.app-shell {
    display:flex;
    min-height:100vh
}

.sidebar {
    width:var(--sidebar-width);
    position:fixed;
    inset:0 auto 0 0;
    background:var(--color-sidebar);
    color:#e6e8de;
    display:flex;
    flex-direction:column;
    padding:1rem;
    z-index:30;
    overflow:hidden
}

.brand {
    display:flex;
    align-items:center;
    gap:.8rem;
    color:inherit;
    text-decoration:none;
    padding:0 .7rem
}

.brand>span {
    font-family:var(--font-display);
    font-size:2.4rem;
    line-height:1;
    letter-spacing:-.04em
}

.brand small {
    display:block;
    font-family:var(--font-body);
    font-size:.55rem;
    letter-spacing:.48em;
    margin-top:.65rem;
    text-align:center
}

.sidebar-brand {
    justify-content:center;
    padding:.25rem .75rem .75rem;
    flex-shrink:0;
    margin-bottom:.5rem;
    border-bottom:1px solid #43473e
}

.sidebar-brand img {
    display:block;
    width:145px;
    height:auto
}

.sidebar-nav {
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#59614f transparent;
    padding:.25rem .35rem .75rem
}

.nav-caption {
    display:block;
    font-size:.62rem;
    letter-spacing:.12em;
    color:#a0a598;
    padding:.65rem .75rem
}

.nav-item {
    display:flex;
    align-items:center;
    gap:.8rem;
    min-height:46px;
    padding:.65rem .75rem;
    margin:.15rem 0;
    color:inherit;
    text-decoration:none;
    font-size:.875rem;
    border-radius:6px
}

a.nav-item:hover {
    background:#34392f
}

.nav-item.is-active {
    background:#404437;
    color:#f5ebcc
}

.nav-item.is-active .icon {
    color:#cab075
}

.nav-item.is-unavailable {
    color:#a4aa9d;
    gap:.65rem;
    font-size:.78rem
}

.nav-item .icon {
    width:17px;
    height:17px
}

.nav-soon {
    margin-left:auto;
    font-size:.57rem;
    white-space:nowrap;
    color:#b9c0ad
}

.app-content {
    margin-left:var(--sidebar-width);
    flex:1;
    min-width:0
}

.topbar {
    display:flex;
    align-items:center;
    gap:1rem;
    justify-content:space-between;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    min-height:64px;
    padding:.65rem 1.5rem
}

.breadcrumb {
    font-size:.78rem;
    color:var(--color-muted)
}

.main-content {
    max-width:1700px;
    margin:auto;
    padding:1.5rem;
    min-height:calc(100vh - 120px)
}

.page-footer {
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.5rem;
    border-top:1px solid var(--color-border);
    font-size:.7rem;
    color:var(--color-muted)
}

.user-menu {
    position:relative
}

.user-menu summary {
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:.8rem;
    list-style:none
}

.user-menu summary::-webkit-details-marker {
    display:none
}

.avatar {
    width:35px;
    height:35px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--color-gold-soft);
    color:var(--color-gold);
    font-family:var(--font-display);
    font-size:1.1rem
}

.user-name {
    font-size:.78rem;
    max-width:210px;
    overflow-wrap:anywhere
}

.user-name small {
    display:block;
    font-size:.65rem;
    color:var(--color-muted)
}

.user-dropdown {
    position:absolute;
    z-index:20;
    top:calc(100% + 1rem);
    right:0;
    width:240px;
    background:white;
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    padding:1rem;
    box-shadow:0 8px 24px #0000000d
}

.user-dropdown p {
    font-size:.78rem;
    color:var(--color-muted);
    margin-bottom:.8rem
}

.user-dropdown .button {
    width:100%
}

.menu-toggle {
    display:none
}

.sidebar-overlay {
    position:fixed;
    inset:0;
    background:#171c1799;
    border:0;
    z-index:25
}

.auth-shell {
    min-height:100vh;
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:3rem 1.5rem;
    background:radial-gradient(ellipse at 15% 10%, var(--color-auth-tint), transparent 55%), radial-gradient(ellipse at 90% 90%, var(--color-gold-soft), transparent 50%), var(--color-bg)
}

.auth-main {
    display:grid;
    grid-template-columns:.95fr 1fr;
    width:100%;
    max-width:960px;
    min-width:0;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:calc(var(--radius) * 2.8);
    box-shadow:var(--shadow-auth)
}

.auth-identity {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:3rem;
    overflow:hidden;
    border-radius:calc(var(--radius) * 2.8) 0 0 calc(var(--radius) * 2.8);
    background:linear-gradient(145deg, var(--color-gold-soft), var(--color-auth-tint))
}

.auth-ornament {
    position:absolute;
    width:540px;
    height:540px;
    border:1px solid var(--color-auth-line);
    border-radius:50%;
    box-shadow:0 0 0 45px var(--color-auth-line), 0 0 0 90px var(--color-auth-line);
    transform:translate(-20%, 35%);
    pointer-events:none
}

.auth-brand {
    position:relative;
    display:block;
    width:310px;
    max-width:100%;
    border-radius:var(--radius)
}

.auth-brand img {
    display:block;
    width:100%;
    height:auto
}

.auth-form {
    width:100%;
    min-width:0;
    padding:3.5rem 3rem
}

.auth-welcome-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-bottom:1.25rem;
    border:1px solid var(--color-gold-tint);
    border-radius:50%;
    color:var(--color-gold);
    background:var(--color-gold-soft)
}

.auth-form h1,.auth-form h2 {
    font-family:var(--font-display);
    font-size:clamp(1.8rem, 4vw, 2.6rem);
    line-height:1.15;
    font-weight:400;
    letter-spacing:-.045em;
    margin-bottom:.85rem
}

.auth-form>.muted {
    font-size:.9rem;
    margin-bottom:2rem
}

.auth-form .input {
    min-height:52px;
    border-radius:10px;
    background:var(--color-form-panel)
}

.auth-form .button-full {
    min-height:52px;
    border-radius:10px;
    margin-top:.25rem
}

.auth-password {
    position:relative
}

.auth-password .input {
    padding-right:10rem
}

.auth-password-toggle {
    position:absolute;
    right:5px;
    top:5px;
    bottom:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.4rem .65rem;
    border:0;
    border-radius:7px;
    font-size:.75rem;
    font-weight:600;
    background:transparent;
    color:var(--color-text)
}

.auth-password-toggle[hidden] {
    display:none
}

.auth-password-toggle:hover {
    background:var(--color-gold-soft)
}

.auth-password-toggle .icon {
    width:18px;
    height:18px
}

.auth-remember {
    display:flex;
    align-items:center;
    align-self:flex-start;
    gap:.65rem;
    min-height:44px;
    font-size:.85rem;
    cursor:pointer
}

.auth-remember input {
    flex-shrink:0;
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--color-sidebar)
}

.auth-help {
    font-size:.75rem;
    color:var(--color-muted);
    text-align:center;
    margin-top:2rem
}

.forgot-link {
    align-self:flex-end;
    font-size:.8rem
}

.back-link {
    display:block;
    margin-top:1.7rem;
    text-align:center;
    font-size:.85rem
}

.error-page {
    max-width:620px;
    margin:15vh auto;
    padding:2rem
}

.error-page p {
    margin:1rem 0 2rem
}

@media(max-width:1100px) {
    .main-content,.topbar {
        padding-left:1.25rem;
        padding-right:1.25rem
    }
    .nav-item {
        padding-left:.5rem;
        padding-right:.5rem
    }
    .nav-soon {
        font-size:.5rem
    }
}

@media(max-width:800px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s;
        width:min(var(--sidebar-width), calc(100vw - 3rem))
    }
    .sidebar.is-open {
        transform:translateX(0)
    }
    .app-content {
        margin-left:0
    }
    .menu-toggle {
        display:inline-flex
    }
    .topbar {
        min-height:60px;
        padding:.6rem 1rem
    }
    .breadcrumb {
        margin-right:auto
    }
    .main-content {
        padding:1.25rem 1rem
    }
    .user-name {
        display:none
    }
    .page-footer {
        padding:1rem
    }
    .auth-shell {
        padding:1.5rem 1rem
    }
    .auth-main {
        grid-template-columns:1fr;
        max-width:460px;
        border-radius:22px
    }
    .auth-identity {
        padding:1.5rem;
        border-radius:22px 22px 0 0
    }
    .auth-brand {
        width:165px
    }
    .auth-ornament {
        width:320px;
        height:320px
    }
    .auth-form {
        padding:2rem 1.5rem
    }
    .auth-welcome-icon {
        display:none
    }
}

body.navigation-open {
    overflow:hidden
}