/* layout-agent */
/* Premium chrome for layouts, dashboard command center, auth, and page partials.
   Design-system tokens (page-head, empty-state, kpi-card) live here so module CSS can coexist. */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-head-kicker,
.auth-kicker {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .35rem;
}
.page-head-title,
.page-head h1 {
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: -.035em;
}
.page-head-desc,
.page-head .subtitle {
    color: var(--muted);
    font-size: .87rem;
    margin: .25rem 0 0;
    max-width: 42rem;
}
.page-head-actions,
.page-head .actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.kpi-card.stat-card {
    min-height: 100%;
}
.dash-command .page-head-title {
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    letter-spacing: -.045em;
}
.dash-command .dash-kpis .kpi-card .stat-value {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-variant-numeric: tabular-nums;
}
.dash-command .card .empty-state {
    padding: 1.6rem 1rem;
}
.dash-command .card .empty-state .empty-icon {
    width: 56px;
    height: 56px;
    font-size: 1.45rem;
    margin-bottom: .7rem;
}
.dash-command .card .empty-state p {
    margin-bottom: .5rem;
}

.dash-qa {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.15rem;
}
.dash-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.dash-qa-btn i { color: var(--brand); font-size: .95rem; }
.dash-qa-btn:hover {
    color: var(--ink);
    border-color: var(--brand-400);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.empty-state-cta { margin-top: .15rem; }

.command-palette {
    position: relative;
}
.command-palette .search-kbd {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    padding: .12rem .42rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-2, var(--background));
    color: var(--muted);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    pointer-events: none;
}
@media (min-width: 1200px) {
    .command-palette .search-kbd { display: inline-flex; }
    .command-palette input { padding-right: 4.4rem; }
    /* app.css already paints a ::after hint — hide it when the kbd is shown */
    .command-palette.global-search::after { display: none; }
}
.command-palette input:focus ~ .search-kbd { opacity: .45; }
.command-palette .search-results {
    border-radius: 18px;
    padding: .4rem;
    box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb), .45), var(--shadow-lg);
}
.command-palette .sr-group {
    padding: .65rem .8rem .3rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--n-500);
}
.command-palette .search-results a {
    border-radius: 12px;
    padding: .6rem .8rem;
}
.command-palette .search-results a i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--brand-50);
    color: var(--brand);
    flex-shrink: 0;
}

html.sidebar-rail .nav-group:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

/* Last-loaded shield: global h1–h3 ink must not wash out the dark More sheet title. */
.more-sheet h1,
.more-sheet h2,
.more-sheet h3 { color: #fff; }

.auth-body { background: var(--surface-soft); }
.auth-brand {
    display: block;
    margin: 0 0 1.65rem;
}
.auth-brand .logo {
    height: 28px;
    width: auto;
}
.auth-title {
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.04em;
    margin: 0 0 .35rem;
    color: var(--ink);
}
.auth-lede {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 1.4rem;
    max-width: 26rem;
}
.auth-inline-link {
    font-size: .8rem;
    font-weight: 650;
    color: var(--brand);
}
.auth-foot {
    text-align: center;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: .9rem;
}
.auth-foot a { font-weight: 650; }
.auth-foot-muted {
    margin-top: .55rem;
    font-size: .8rem;
}
.auth-foot-muted a { color: var(--muted); font-weight: 550; }
.auth-side-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-400);
    margin-bottom: .85rem;
}
.auth-side-lede {
    color: var(--n-300);
    font-size: .95rem;
    line-height: 1.5;
    max-width: 26rem;
    margin: 0 0 1.5rem;
}
.auth-card-wide { max-width: 520px; }
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 0 1.15rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: var(--flame-50);
    color: var(--flame-600);
    border: 1px solid var(--danger-light);
    font-weight: 600;
    font-size: .84rem;
    line-height: 1.4;
}
.auth-alert i { margin-top: .1rem; flex-shrink: 0; }
.auth-card .form-alert { border-radius: 14px; }
.auth-card .form-label { font-weight: 650; color: var(--ink-2, var(--ink)); }
@media (max-width: 991.98px) {
    .auth-brand { text-align: center; margin: .35rem auto 1.75rem; }
}

.admin-topbar-copy { line-height: 1.15; }
.admin-topbar-copy strong { display: block; font-size: .95rem; }
.admin-body .sidebar .tenant-head-copy small { letter-spacing: .1em; }

@media (max-width: 991.98px) {
    .page-head { align-items: stretch; margin-bottom: 1.1rem; }
    .page-head-title, .page-head h1 { font-size: 1.35rem; }
    .page-head-actions, .page-head .actions { width: 100%; }
    .page-head-actions > .btn,
    .page-head-actions > a.btn,
    .page-head .actions > .btn,
    .page-head .actions > a.btn,
    .page-head .actions > .dropdown { flex: 1 1 auto; }
    .dash-command .dash-kpis .kpi-card .stat-value { font-size: 1.28rem; }
    .dash-qa { margin-bottom: 1rem; }
    .dash-qa-btn { flex: 1 1 calc(50% - .5rem); justify-content: center; min-height: 42px; }
}

/* ultra-header */
.app-body .topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 560px) minmax(max-content, 1fr);
    align-items: center;
    column-gap: .75rem;
    row-gap: 0;
    min-height: 56px;
    padding: .55rem 1.35rem;
    background: color-mix(in srgb, #fff 74%, var(--bg) 26%);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(var(--shadow-rgb), .06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset;
}
.app-body .topbar-brand { display: none; }
.app-body .topbar .global-search {
    grid-column: 2;
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
}
.app-body .topbar .global-search::after { display: none !important; content: none !important; }
.app-body .topbar .global-search > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--n-500);
    font-size: .95rem;
    pointer-events: none;
    z-index: 1;
}
.app-body .topbar .global-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid rgba(var(--shadow-rgb), .08);
    background: color-mix(in srgb, var(--surface-2) 88%, #fff);
    border-radius: 12px;
    padding: .5rem 4.6rem .5rem 2.55rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ink);
    outline: none;
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03);
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.app-body .topbar .global-search input::placeholder { color: var(--n-500); font-weight: 500; }
.app-body .topbar .global-search input:hover { border-color: var(--n-300); background: #fff; }
.app-body .topbar .global-search input:focus {
    border-color: var(--wave);
    background: #fff;
    box-shadow: var(--ring), 0 10px 24px -18px rgba(var(--shadow-rgb), .28);
}
.app-body .topbar .search-kbd {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    min-height: 22px;
    padding: .1rem .42rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--muted);
    font-family: var(--font);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(var(--shadow-rgb), .04);
}
html[data-mod="cmd"] .app-body .topbar .search-kbd { font-size: 0; letter-spacing: 0; }
html[data-mod="cmd"] .app-body .topbar .search-kbd::after {
    content: '⌘K';
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}
.app-body .topbar .global-search input:focus ~ .search-kbd { opacity: .42; }
.app-body .topbar-actions {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: .4rem;
}
.app-body .topbar-actions .dropdown { display: flex; align-items: center; flex-shrink: 0; }
.app-body .topbar-branch { flex-shrink: 1; min-width: 0; }
.app-body .topbar .branch-switch {
    min-width: 0;
    width: 148px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(var(--shadow-rgb), .08);
    background: #fff;
    font-weight: 600;
    font-size: .78rem;
    color: var(--ink-2);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03);
}
.app-body .topbar-pill {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--shadow-rgb), .08);
    background: #fff;
    color: var(--ink-2);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 6px 16px -12px rgba(var(--shadow-rgb), .18);
    overflow: visible;
    transform: translateZ(0);
    transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform .12s var(--ease-out);
}
.app-body .topbar-pill:hover,
.app-body .topbar-pill:focus-visible {
    background: #fff;
    border-color: var(--n-300);
    color: var(--ink);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .04), 0 10px 20px -14px rgba(var(--shadow-rgb), .22);
    transform: translateY(-1px);
}
.app-body .topbar-pill:active { transform: scale(.96); }
.app-body .topbar-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.app-body .topbar-pill.btn-icon { background: #fff; border: 1px solid rgba(var(--shadow-rgb), .08); }
.app-body .topbar-create {
    width: auto;
    min-width: 40px;
    padding: 0 .95rem;
    background: var(--wave);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -12px rgba(var(--primary-light-rgb), .55);
}
.app-body .topbar-create:hover,
.app-body .topbar-create:focus-visible {
    background: var(--brand-600);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 22px -12px rgba(var(--primary-light-rgb), .6);
}
.app-body .topbar-create-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
.app-body .topbar .user-btn.topbar-pill {
    width: auto;
    padding: 0 .55rem 0 .2rem;
    gap: .5rem;
    background: #fff;
    color: var(--ink);
}
.app-body .topbar .user-btn .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(var(--primary-light-rgb), .42);
}
.app-body .topbar-user-meta { min-width: 0; padding-right: .15rem; }
.app-body .topbar-user-meta strong {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    max-width: 9.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-body .topbar-user-meta small {
    font-size: .66rem;
    font-weight: 600;
    color: var(--muted) !important;
}
.app-body .topbar .notif-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 99px;
    background: var(--flame);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), .12);
    pointer-events: none;
}
@media (min-width: 992px) {
    .app-body .topbar .search-kbd { display: inline-flex; }
}

@media (max-width: 991.98px) {
    .app-body .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: .5rem;
        row-gap: .55rem;
        min-height: 0;
        padding: calc(.5rem + env(safe-area-inset-top, 0px)) max(.9rem, env(safe-area-inset-right, 0px)) .6rem max(.9rem, env(safe-area-inset-left, 0px));
    }
    .app-body .topbar-brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
    }
    .app-body .topbar-brand:hover { color: var(--ink); }
    .app-body .topbar-brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 16px;
        background: #fff;
        color: var(--brand-700);
        border: 1px solid rgba(var(--shadow-rgb), .08);
        box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03);
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: .72rem;
        letter-spacing: .02em;
        flex-shrink: 0;
        overflow: hidden;
    }
    .app-body .topbar-brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }
    .app-body .topbar-brand-copy { min-width: 0; flex: 1; }
    .app-body .topbar-brand-name {
        display: block;
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.2;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-body .topbar-actions {
        grid-column: 2;
        grid-row: 1;
        gap: .35rem;
    }
    .app-body .topbar .global-search {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        width: 100%;
    }
    .app-body .topbar .global-search input {
        height: 44px;
        font-size: 16px;
        border-radius: 999px;
        padding: .55rem 1rem .55rem 2.55rem;
        background: #fff;
    }
    .app-body .topbar .search-kbd { display: none; }
    .app-body .topbar-pill,
    .app-body .topbar-create,
    .app-body .topbar .user-btn.topbar-pill {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 14px;
    }
    .app-body .topbar-create-label,
    .app-body .topbar-actions .topbar-create span { display: none !important; }
    .app-body .topbar .user-btn.topbar-pill { justify-content: center; }
    .app-body .topbar .user-btn .avatar {
        width: 32px;
        height: 32px;
        font-size: .7rem;
    }
    .app-body .topbar .notif-dot {
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
    }
    .app-body .topbar .branch-switch {
        width: 7.25rem;
        height: 44px;
        border-radius: 14px;
        font-size: .75rem;
    }
}

/* mobile-header */
@media (max-width: 991.98px) {
    .app-body .topbar {
        row-gap: .8rem;
        column-gap: .75rem;
        padding: calc(.7rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px));
        color: #fff;
        background:
            radial-gradient(120% 150% at 0% 0%, rgba(var(--primary-light-rgb), .34) 0%, rgba(var(--primary-light-rgb), 0) 58%),
            radial-gradient(80% 120% at 100% 0%, rgba(var(--primary-light-rgb), .14) 0%, rgba(var(--primary-light-rgb), 0) 62%),
            var(--sidebar);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 14px 30px -22px rgba(var(--secondary-rgb), .7), inset 0 -1px 0 rgba(255, 255, 255, .04);
        transition: box-shadow .2s var(--ease);
    }
    html.topbar-scrolled .app-body .topbar {
        box-shadow: 0 18px 36px -18px rgba(var(--secondary-rgb), .75), inset 0 -1px 0 rgba(255, 255, 255, .05);
    }

    .app-body .topbar-brand { gap: .7rem; color: #fff; }
    .app-body .topbar-brand:hover,
    .app-body .topbar-brand:active { color: #fff; }
    .app-body .topbar-brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 0;
        color: #fff;
        font-size: .8rem;
        letter-spacing: .03em;
        background: linear-gradient(145deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 22px -10px rgba(0, 0, 0, .7);
    }
    .app-body .topbar-brand-mark:has(img) {
        background: #fff;
        padding: 4px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 22px -10px rgba(0, 0, 0, .7);
    }
    .app-body .topbar-brand-mark img { border-radius: 10px; }
    .app-body .topbar-brand-copy { display: flex; flex-direction: column; gap: .12rem; }
    .app-body .topbar-brand-name {
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -.025em;
        line-height: 1.15;
        color: #fff;
    }
    .app-body .topbar-brand-sub {
        display: flex;
        align-items: center;
        gap: .4rem;
        min-width: 0;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.2;
        color: rgba(var(--on-dark-rgb), .6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-body .topbar-brand-sub::before {
        content: '';
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--sun);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
    }

    .app-body .topbar-actions { gap: .45rem; }
    .app-body .topbar-pill,
    .app-body .topbar-pill.btn-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 14px;
        color: var(--n-100);
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
        -webkit-tap-highlight-color: transparent;
    }
    .app-body .topbar-pill i { font-size: 1.12rem; }
    .app-body .topbar-pill:hover,
    .app-body .topbar-pill:focus-visible,
    .app-body .topbar-pill[aria-expanded="true"] {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
        transform: none;
    }
    .app-body .topbar-pill:focus-visible { box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), .5); }
    .app-body .topbar-pill:active { transform: scale(.93); background: rgba(255, 255, 255, .16); }

    .app-body .topbar-create,
    .app-body .topbar-create:hover,
    .app-body .topbar-create:focus-visible,
    .app-body .topbar-create[aria-expanded="true"] {
        width: 42px;
        min-width: 42px;
        height: 42px;
        color: #fff;
        border: 0;
        background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(var(--primary-light-rgb), .9);
    }
    .app-body .topbar-create i { font-size: 1.2rem; }

    .app-body .topbar .user-btn.topbar-pill,
    .app-body .topbar .user-btn.topbar-pill:hover,
    .app-body .topbar .user-btn.topbar-pill[aria-expanded="true"] {
        width: 42px;
        height: 42px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .app-body .topbar .user-btn .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: .74rem;
        color: #fff;
        border: 2px solid transparent;
        background:
            linear-gradient(145deg, var(--bl-navy-700), var(--bl-navy-800)) padding-box,
            conic-gradient(from 200deg, var(--accent), var(--primary-light), #fff, var(--accent)) border-box;
        box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8);
    }

    .app-body .topbar .notif-dot {
        top: 5px;
        right: 5px;
        min-width: 17px;
        height: 17px;
        font-size: .6rem;
        border: 2px solid var(--sidebar);
        box-shadow: 0 4px 10px -3px rgba(var(--danger-rgb), .7);
    }

    .app-body .topbar .global-search > i { left: 1.05rem; color: var(--n-500); font-size: 1rem; }
    .app-body .topbar .global-search input {
        height: 48px;
        border: 0;
        border-radius: 16px;
        padding: .6rem 1rem .6rem 2.75rem;
        font-size: 16px;
        font-weight: 500;
        color: var(--ink);
        background: #fff;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 26px -16px rgba(0, 0, 0, .75);
    }
    .app-body .topbar .global-search input::placeholder { color: var(--n-500); }
    .app-body .topbar .global-search input:hover { background: #fff; }
    .app-body .topbar .global-search input:focus {
        background: #fff;
        box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), .55), 0 12px 26px -16px rgba(0, 0, 0, .75);
    }
    .app-body .topbar .search-results {
        top: calc(100% + .5rem);
        border-radius: 18px;
        box-shadow: 0 24px 48px -20px rgba(var(--secondary-rgb), .45);
    }

    .app-body .topbar .branch-switch {
        color: #fff;
        background-color: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: none;
        filter: none;
    }
    .app-body .topbar .branch-switch option { color: var(--ink); }

    .app-body .topbar .dropdown-menu { margin-top: .55rem !important; border-radius: 16px; }

    .app-body .trial-banner {
        margin: .85rem max(.9rem, env(safe-area-inset-left, 0px)) 0;
        padding: .7rem .9rem;
        border: 1px solid var(--sun-100, var(--bl-ice-200));
        border-radius: 14px;
        font-size: .8rem;
        line-height: 1.4;
    }
    .app-body .announce-banner { border-color: var(--brand-100); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .app-body .topbar-pill:active { transform: none; }
}

/* menu-accents */
[data-nav-group] { --acc: var(--accent); --acc-rgb: var(--accent-rgb); }

.sidebar .nav-section .nav-group-ic,
.sidebar .nav-section.is-open > .nav-group .nav-group-ic,
.sidebar .nav-section.is-current > .nav-group .nav-group-ic { color: var(--acc, var(--bl-ice-300)); }
.sidebar .nav-section .nav-link.active { background: rgba(var(--acc-rgb, 100, 142, 202), .13); }
.sidebar .nav-section .nav-link.active i { color: var(--acc, var(--brand-400)); }
.sidebar .nav-section .nav-link.active::before { background: var(--acc, var(--brand-400)); box-shadow: 0 0 10px rgba(var(--acc-rgb, 100, 142, 202), .55); }

/* more-menu */
@media (max-width: 991.98px) {
    body.more-open .mobile-tabbar { z-index: 1048; background: var(--bl-navy-900); }
    .more-backdrop { background: rgba(var(--shadow-rgb), .55); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }

    .more-sheet {
        top: calc(env(safe-area-inset-top, 0px) + 2.75rem);
        height: auto;
        max-height: none;
        border-radius: 28px 28px 0 0;
        color: var(--bl-ice-150);
        background:
            radial-gradient(120% 60% at 0% 0%, rgba(var(--primary-light-rgb), .22) 0%, rgba(var(--primary-light-rgb), 0) 60%),
            linear-gradient(180deg, var(--bl-navy-800) 0%, var(--bl-navy-900) 42%);
        box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
        transform: translate3d(0, 100%, 0);
        opacity: 1;
        transition: transform .38s var(--ease-out), visibility 0s linear .38s;
        visibility: hidden;
    }
    .more-sheet.is-open { transform: translate3d(0, 0, 0); visibility: visible; transition: transform .38s var(--ease-out), visibility 0s; }

    .more-handle { width: 38px; height: 5px; margin: .6rem auto .1rem; background: rgba(255, 255, 255, .2); }

    .more-head { align-items: center; padding: .5rem 1.1rem .85rem; }
    .more-head-copy { min-width: 0; }
    .more-sheet .more-head h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin: 0; color: #fff; }
    .more-kicker {
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-top: .3rem;
        min-width: 0;
        font-size: .76rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(var(--on-dark-rgb), .62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .more-plan {
        flex-shrink: 0;
        padding: .12rem .5rem;
        border-radius: 99px;
        font-size: .6rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--bl-navy-900);
        background: linear-gradient(135deg, #fff, var(--bl-ice-100));
    }
    .more-close {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--n-100);
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .1);
        transition: background .18s var(--ease), transform .12s var(--ease-out);
    }
    .more-close:active { transform: scale(.92); background: rgba(255, 255, 255, .14); }

    .more-search { position: relative; margin: 0 1.1rem .85rem; flex-shrink: 0; }
    .more-search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--n-500); pointer-events: none; }
    .more-search input {
        width: 100%;
        height: 46px;
        padding: .55rem 1rem .55rem 2.6rem;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .08);
        background: rgba(255, 255, 255, .06);
        color: #fff;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    }
    .more-search input::placeholder { color: var(--n-500); }
    .more-search input:focus { border-color: rgba(var(--accent-rgb), .55); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), .22); }
    .more-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

    .more-body { padding: 0 1.1rem 1rem; overscroll-behavior: contain; }
    .more-section + .more-section { margin-top: 1.25rem; }
    .more-section-h {
        margin: 0 .2rem .6rem;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(var(--on-dark-rgb), .45);
    }
    .more-sheet.is-searching .more-quick-wrap,
    .more-sheet.is-searching .more-section-h { display: none; }
    .more-sheet.is-searching .more-section + .more-section { margin-top: 0; }

    .more-quick { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: .55rem; }
    .more-quick-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .45rem;
        padding: .8rem .25rem .7rem;
        border-radius: 18px;
        color: var(--n-100);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: -.01em;
        text-align: center;
        background: rgba(255, 255, 255, .045);
        border: 1px solid rgba(255, 255, 255, .07);
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s var(--ease-out), background .18s var(--ease);
    }
    .more-quick-btn:hover { color: #fff; }
    .more-quick-btn:active { transform: scale(.95); background: rgba(255, 255, 255, .08); }
    .more-quick-ic {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        font-size: 1.1rem;
        color: #fff;
        background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -10px rgba(var(--primary-light-rgb), .9);
    }

    .more-sheet .more-group {
        margin: 0 0 .55rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        transition: background .2s var(--ease), border-color .2s var(--ease);
    }
    .more-sheet .more-group.is-open { background: rgba(255, 255, 255, .05); border-color: rgba(var(--acc-rgb, 100, 142, 202), .22); }
    .more-sheet .more-group-h,
    .more-sheet .more-group.is-open > .more-group-h,
    .more-sheet .more-group.is-current > .more-group-h {
        gap: .8rem;
        padding: .75rem .8rem .75rem .75rem;
        min-height: 64px;
        border-radius: 20px;
        background: transparent;
        color: #fff;
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: -.015em;
        text-transform: none;
        -webkit-tap-highlight-color: transparent;
    }
    .more-sheet .more-group-h:focus-visible { box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), .45); }
    .more-group-tile {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: rgba(var(--acc-rgb, 100, 142, 202), .14);
        box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, 100, 142, 202), .18);
    }
    .more-sheet .more-group-ic,
    .more-sheet .more-group.is-open > .more-group-h .more-group-ic,
    .more-sheet .more-group.is-current > .more-group-h .more-group-ic { width: auto; font-size: 1.15rem; color: var(--acc, var(--bl-ice-300)); }
    .more-group-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
    .more-group-label { line-height: 1.2; }
    .more-group-sub {
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: 0;
        color: rgba(var(--on-dark-rgb), .52);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .more-group-count {
        flex-shrink: 0;
        min-width: 24px;
        height: 22px;
        padding: 0 .4rem;
        border-radius: 99px;
        display: grid;
        place-items: center;
        font-size: .68rem;
        font-weight: 800;
        color: rgba(var(--on-dark-rgb), .7);
        background: rgba(255, 255, 255, .06);
    }
    .more-sheet .more-group-chev {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        margin-left: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: .78rem;
        color: var(--n-500);
        background: rgba(255, 255, 255, .05);
    }
    .more-sheet .more-group.is-open .more-group-chev { color: var(--bl-navy-900); background: var(--acc, var(--bl-ice-300)); }

    .more-sheet .more-items-inner { padding: 0; }
    .more-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
        padding: .1rem .6rem .7rem;
    }
    .more-sheet .more-row {
        flex-direction: column;
        justify-content: flex-start;
        gap: .45rem;
        min-height: 88px;
        padding: .75rem .3rem .65rem;
        border-radius: 16px;
        text-align: center;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: -.005em;
        line-height: 1.25;
        color: var(--bl-ice-150);
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .06);
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s var(--ease-out), background .18s var(--ease), border-color .18s var(--ease);
    }
    .more-sheet .more-row[hidden] { display: none !important; }
    .more-sheet .more-row:hover { color: #fff; background: rgba(255, 255, 255, .06); }
    .more-sheet .more-row:active { transform: scale(.95); background: rgba(255, 255, 255, .08); }
    .more-sheet .more-row .more-ic {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 1.1rem;
        color: var(--acc, var(--brand-400));
        background: rgba(var(--acc-rgb, 100, 142, 202), .12);
    }
    .more-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
    .more-sheet .more-row.active {
        color: #fff;
        background: rgba(var(--acc-rgb, 100, 142, 202), .14);
        border-color: rgba(var(--acc-rgb, 100, 142, 202), .45);
    }
    .more-sheet .more-row.active .more-ic { color: var(--bl-navy-900); background: var(--acc, var(--brand-400)); box-shadow: 0 8px 18px -10px rgba(var(--acc-rgb, 100, 142, 202), .9); }
    .more-sheet.is-searching .more-group .more-items { grid-template-rows: 1fr; }
    .more-sheet.is-searching .more-group-chev,
    .more-sheet.is-searching .more-group-count { visibility: hidden; }

    .more-empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2.25rem 1rem; text-align: center; color: rgba(var(--on-dark-rgb), .6); font-size: .8rem; }
    .more-empty[hidden] { display: none; }
    .more-empty i { font-size: 1.5rem; color: rgba(var(--on-dark-rgb), .35); margin-bottom: .25rem; }
    .more-empty strong { color: #fff; font-size: .95rem; }

    .more-foot {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .7rem 1.1rem .8rem;
        background: rgba(var(--secondary-rgb), .92);
        border-top: 1px solid rgba(255, 255, 255, .06);
    }
    .more-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; color: #fff; -webkit-tap-highlight-color: transparent; }
    .more-me:hover { color: #fff; }
    .more-me-avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: .74rem;
        font-weight: 800;
        color: #fff;
        border: 2px solid transparent;
        background:
            linear-gradient(145deg, var(--bl-navy-700), var(--bl-navy-800)) padding-box,
            conic-gradient(from 200deg, var(--accent), var(--primary-light), #fff, var(--accent)) border-box;
    }
    .more-me-copy { min-width: 0; display: flex; flex-direction: column; }
    .more-me-copy strong { font-size: .88rem; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .more-me-copy small { font-size: .7rem; color: rgba(var(--on-dark-rgb), .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .more-sheet .more-logout { margin: 0; padding: 0; flex-shrink: 0; background: transparent; }
    .more-sheet .more-logout button {
        width: auto;
        min-height: 42px;
        padding: 0 1rem;
        gap: .45rem;
        border-radius: 12px;
        font-size: .8rem;
        font-weight: 700;
        color: var(--danger-light);
        background: rgba(var(--danger-rgb), .12);
        border: 1px solid rgba(var(--danger-rgb), .22);
        transition: transform .12s var(--ease-out), background .18s var(--ease);
    }
    .more-sheet .more-logout button:active { transform: scale(.95); background: rgba(var(--danger-rgb), .2); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .more-sheet, .more-sheet.is-open { transition: none; }
}

/* tabbar */
@media (max-width: 991.98px) {
    :root { --tabbar-h: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .mobile-tabbar {
        align-items: stretch;
        padding: 6px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
        background:
            radial-gradient(90% 140% at 50% 0%, rgba(var(--primary-light-rgb), .16) 0%, rgba(var(--primary-light-rgb), 0) 70%),
            linear-gradient(180deg, var(--bl-navy-800) 0%, var(--bl-navy-900) 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 0;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -14px 32px -20px rgba(var(--secondary-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .07);
    }
    .mobile-tabbar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--primary-light-rgb), .5) 30%, rgba(var(--accent-rgb), .6) 70%, rgba(var(--accent-rgb), 0));
    }
    body.more-open .mobile-tabbar { border-radius: 0; background: var(--bl-navy-900); }

    .mobile-tabbar a,
    .mobile-tabbar .tab-more {
        height: 58px;
        min-height: 58px;
        gap: 4px;
        padding: 0 2px;
        border-radius: 16px;
        color: var(--n-500);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: 0;
        transition: color .2s var(--ease);
    }
    .mobile-tabbar a::before,
    .mobile-tabbar .tab-more::before,
    .mobile-tabbar a.active::before,
    .mobile-tabbar .tab-more.active::before { content: none; }
    .mobile-tabbar a span.tab-ic,
    .mobile-tabbar .tab-more span.tab-ic {
        width: 56px;
        max-width: none;
        height: 32px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border-radius: 99px;
        overflow: visible;
        transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .14s var(--ease-out);
    }
    .mobile-tabbar i { font-size: 1.24rem; color: inherit; transition: color .2s var(--ease), transform .25s var(--ease-out); }
    .mobile-tabbar .tab-label { line-height: 1.1; }

    .mobile-tabbar a.active,
    .mobile-tabbar .tab-more.active { color: #fff; font-weight: 700; }
    .mobile-tabbar a.active i,
    .mobile-tabbar .tab-more.active i { color: #fff; }
    .mobile-tabbar a.active .tab-ic,
    .mobile-tabbar .tab-more.active .tab-ic {
        background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -8px rgba(var(--primary-light-rgb), .95);
        animation: tabPop .38s var(--ease-out);
    }
    .mobile-tabbar a:active .tab-ic,
    .mobile-tabbar .tab-more:active .tab-ic { transform: scale(.9); }
    .mobile-tabbar a:not(.active):active .tab-ic,
    .mobile-tabbar .tab-more:not(.active):active .tab-ic { background: rgba(255, 255, 255, .07); }
    .mobile-tabbar a:focus-visible,
    .mobile-tabbar .tab-more:focus-visible { outline: none; }
    .mobile-tabbar a:focus-visible .tab-ic,
    .mobile-tabbar .tab-more:focus-visible .tab-ic { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .7); }
}
@keyframes tabPop {
    0% { transform: scale(.55); opacity: .3; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .mobile-tabbar a.active .tab-ic, .mobile-tabbar .tab-more.active .tab-ic { animation: none; }
}