/*
 * Member shell: sidebar, topbar, app footer, and (part 2) the mobile and tablet
 * navigation layer. Loaded by template/head.php after every other stylesheet
 * except mobile.css. See docs/MOBILE.md sections 3 and 4.
 *
 * Part 1 is the block that used to sit inline at the top of
 * template/header.php, moved verbatim. Its footer rules are scoped to
 * :where(.main) (same specificity as before),
 * because this file also loads on the guest shell (Render::guest), whose
 * public footer shares the .lp-footer class names.
 */

/* Part 1: user-side redesign (mirrors admin look) */
body[data-theme="dark"] .wrapper,
body[data-theme="dark"] .main,
.main { background: #0d0d0e !important; }

/* Sidebar shell */
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .sidebar-content { background: #0f0f10 !important; border-right: 1px solid rgba(255,255,255,0.06); }
.sidebar-brand { padding: 1rem 1.2rem 0.75rem !important; display:flex; align-items:center; justify-content:center; gap:0.6rem; background: linear-gradient(180deg, rgba(255,153,0,0.12) 0%, transparent 100%); border-top: 2px solid #ff9900; }
.sidebar-brand-text { font-family:'Rajdhani', system-ui, sans-serif; color:#ff9900 !important; font-size:1.65rem !important; font-weight:700 !important; letter-spacing:2px !important; line-height:1 !important; }
.sidebar-brand-dot { color:#f2f2f2; }
.sidebar hr { border-color: rgba(99,99,99,0.12) !important; margin: 0 1rem !important; }

/* Compact stats card */

/* "Logged in as" admin-as banner */
.sidebar-content > h4.text-danger { margin: 0.6rem 0.8rem 0.4rem !important; padding: 0.45rem 0.55rem !important; font-size: 0.62rem !important; line-height: 1.35 !important; color:#dc3545 !important; background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.25); border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.sidebar-content > a.btn.btn-danger.mx-5 { margin: 0 0.8rem 0.5rem !important; padding: 0.35rem 0.5rem !important; font-size: 0.7rem !important; border-radius: 0 !important; }

/* Section headers */
body[data-theme="dark"] .sidebar-header,
.sidebar-header { padding: 0.9rem 1.2rem 0.35rem !important; font-size: 0.6rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: rgba(224,224,224,0.65) !important; text-transform: uppercase !important; }

/* Nav items */
.sidebar-nav { padding: 0 0.5rem; }
.sidebar-item { margin-bottom: 1px; }
body[data-theme="dark"] .sidebar-link,
body[data-theme="dark"] a.sidebar-link,
.sidebar-link { background: transparent !important; padding: 0.5rem 0.75rem !important; border-radius: 0 !important; font-size: 0.78rem !important; color: rgba(224,224,224,0.8) !important; transition: all .15s !important; display: flex !important; align-items: center; gap: 0.55rem; }
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] a.sidebar-link:hover,
.sidebar-link:hover { background: rgba(255,255,255,0.04) !important; color: rgba(224,224,224,0.9) !important; }
body[data-theme="dark"] .sidebar-link i,
body[data-theme="dark"] .sidebar-link svg,
body[data-theme="dark"] a.sidebar-link i,
body[data-theme="dark"] a.sidebar-link svg { color: rgba(224,224,224,0.65) !important; font-size: 0.78rem !important; width: 16px !important; text-align: center; flex-shrink: 0; margin-right: 0 !important; }
body[data-theme="dark"] .sidebar-link:hover i,
body[data-theme="dark"] .sidebar-link:hover svg { color: #ff9900 !important; }
.sidebar-item.active > .sidebar-link,
.sidebar-link.active { background: rgba(255,153,0,0.08) !important; color: #ff9900 !important; }
.sidebar-item.active > .sidebar-link i,
.sidebar-item.active > .sidebar-link svg,
.sidebar-link.active i,
.sidebar-link.active svg { color: #ff9900 !important; }
body[data-theme="dark"] .sidebar-dropdown .sidebar-link,
body[data-theme="dark"] .sidebar-dropdown a.sidebar-link,
.sidebar-dropdown .sidebar-link { padding-left: 2.75rem !important; font-size: 0.74rem !important; }
.sidebar-dropdown .sidebar-link::before { display: none !important; }
.sidebar [data-bs-toggle="collapse"]:after { right: 12px !important; top: 14px !important; border-top-color: rgba(224,224,224,0.65) !important; }

/* Brand-color icons survive the reset */
body[data-theme="dark"] .sidebar-link i.fa-twitch,
body[data-theme="dark"] .sidebar-link i.text-twitch { color: #9146ff !important; }
body[data-theme="dark"] .sidebar-link:hover i.fa-twitch,
body[data-theme="dark"] .sidebar-link:hover i.text-twitch { color: #b18bff !important; }
body[data-theme="dark"] .sidebar-link i.text-streams { color: #ff3b30 !important; }
body[data-theme="dark"] .sidebar-link:hover i.text-streams { color: #ff6b62 !important; }
body[data-theme="dark"] .sidebar-link i.fa-discord { color: #5865f2 !important; }
body[data-theme="dark"] .sidebar-link i.premium-icon,
body[data-theme="dark"] .sidebar-link span.text-primary { color: #ff9900 !important; }

/* Topbar */
.topbar { background: linear-gradient(180deg, rgba(255,153,0,0.12) 0%, #232323 45px) !important; border-bottom: 1px solid rgba(255,153,0,0.08); border-top: 2px solid #ff9900; }
.topbar .navbar,
.topbar .navbar-bg { background: transparent !important; box-shadow: none !important; padding: 0.4rem 1rem !important; min-height: auto !important; }
.topbar .hamburger,
.topbar .hamburger:before,
.topbar .hamburger:after { background: rgba(224,224,224,0.65) !important; }
.topbar .sidebar-toggle:hover .hamburger,
.topbar .sidebar-toggle:hover .hamburger:before,
.topbar .sidebar-toggle:hover .hamburger:after { background: #ff9900 !important; }
.topbar .nav-icon i.nav-fa-sm { color: rgba(224,224,224,0.65); transition: color .15s; font-size: 0.85rem; }
.topbar .nav-icon:hover i.nav-fa-sm { color: #ff9900; }
.topbar .nav-item .indicator { background: #ff9900 !important; box-shadow: none !important; }

/* Breadcrumb */
.content-breadcrumb { background: transparent !important; padding: 0 1.2rem 0.4rem !important; border-bottom: 1px solid rgba(99,99,99,0.08); }
.page-toolbar { font-size: 0.7rem !important; color: rgba(224,224,224,0.65) !important; padding: 0.25rem 0 !important; }
.page-toolbar > .breadcrumb-clock { color: rgba(224,224,224,0.7) !important; font-family: monospace; font-size: 0.72rem; }
.page-toolbar i { color: rgba(224,224,224,0.65); }
.page-toolbar.pointer:hover { color: #ff9900 !important; }
.page-toolbar.pointer:hover i { color: #ff9900 !important; }

/* User dropdown */
.dropdown-username { font-size: 0.78rem !important; color: rgba(224,224,224,0.65) !important; }
.dropdown-username:hover { color: #ff9900 !important; }
.dropdown-username .fa-angle-down { font-size: 0.6rem; opacity: 0.5; margin-left: 0.2rem; }
.dropdown-username span.text-white,
.dropdown-username span.text-shadow { color: inherit !important; text-shadow: none !important; }

/* Main content surfaces */
.main .content { background: transparent !important; }
.main .card,
.main .card-tile { background: #151516 !important; border-color: rgba(99,99,99,0.1) !important; }
.main .card-header { background: transparent !important; border-bottom: 1px solid rgba(99,99,99,0.1) !important; }
.main .card-sub { background: #1b1b1d !important; border-color: rgba(99,99,99,0.12) !important; }

/* Footer (ported from public landing .lp-footer) */
:where(.main) > footer.lp-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #0d0d0e;
    border-top: 1px solid rgba(99,99,99,0.08);
    font-family: var(--lp-f-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--lp-text-muted, rgba(242,242,242,0.6));
    letter-spacing: 0.3px;
}
:where(.main) .lp-footer-copy {
    font-size: 0.72rem;
    color: var(--lp-text-muted, rgba(242,242,242,0.6));
}
:where(.main) .lp-footer-copy a {
    color: var(--lp-text-muted, rgba(242,242,242,0.6));
    text-decoration: none;
    transition: color 0.2s var(--lp-ease, cubic-bezier(.21,.61,.35,1));
}
:where(.main) .lp-footer-copy a:hover { color: var(--lp-accent, #ff9900); }
:where(.main) .lp-footer-right {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
:where(.main) .lp-footer-right a {
    color: var(--lp-text-muted, rgba(242,242,242,0.6));
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.7rem;
    font-family: var(--lp-f-mono, 'IBM Plex Mono', ui-monospace, monospace);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s var(--lp-ease, cubic-bezier(.21,.61,.35,1));
}
:where(.main) .lp-footer-right a:hover { color: var(--lp-accent, #ff9900); }
@media (max-width: 720px) {
    :where(.main) > footer.lp-footer { flex-direction: column; align-items: flex-start; padding: 0.6rem 1rem; }
    :where(.main) .lp-footer-right { gap: 1rem; }
}

/* The hamburger is a <button> now (was an <a>); strip the UA button look so it
   renders exactly as the anchor did. */
button.sidebar-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

/* ==========================================================================
   Part 2: phone and tablet shell (docs/MOBILE.md 3.2 - 3.7)
   M = phone portrait, bottom tab bar. R = tablet or phone landscape, 80px rail.
   Both put #sidebar in an overlay drawer. Nothing here changes 1200px and up,
   where the new elements are simply not displayed.
   ========================================================================== */

:root {
    --vt-topbar-h: 56px;
    --vt-tabbar-h: 0px;            /* 60px in M, set on body.vt-has-tabbar */
    --vt-rail-w: 0px;              /* 80px in R, set on body.vt-has-rail */
    --vt-safe-t: env(safe-area-inset-top, 0px);
    --vt-safe-r: env(safe-area-inset-right, 0px);
    --vt-safe-b: env(safe-area-inset-bottom, 0px);
    --vt-safe-l: env(safe-area-inset-left, 0px);
    --vt-sticky-top: 0px;          /* where a page's own sticky element may stick */
    --vt-bottom-offset: 0px;       /* where a page's own fixed bottom bar must sit */
    --vt-bottom-safe: var(--vt-safe-b);
    --vt-fs-floor: .6875rem;       /* 11px */
    --vt-ease: cubic-bezier(.21, .61, .35, 1);
}
@media (max-width: 1199.98px) {
    :root { --vt-sticky-top: calc(var(--vt-topbar-h) + var(--vt-safe-t)); }
    html { scroll-padding-top: calc(var(--vt-sticky-top) + 8px); }
}
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
    :root { --vt-sticky-top: 0px; }
}
@media (max-width: 767.98px) and (min-height: 501px) {
    .vt-has-tabbar { --vt-tabbar-h: 60px; --vt-bottom-offset: calc(60px + var(--vt-safe-b)); --vt-bottom-safe: 0px; }
    html { scroll-padding-bottom: calc(60px + var(--vt-safe-b)); }
}
@media (min-width: 768px) and (max-width: 1199.98px), (max-width: 767.98px) and (max-height: 500px) {
    .vt-has-rail { --vt-rail-w: 80px; }
}

/* Hidden on desktop. */
.vt-tabbar,
.vt-drawer-backdrop,
.sidebar-account { display: none; }

@media print {
    .vt-tabbar, .vt-drawer-backdrop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Drawer (M and R): #sidebar becomes an overlay. js/shell.js toggles
   html.vt-drawer-open; AdminKit's .collapsed is ignored below 1200px.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1049;
        width: min(288px, 86vw);
        min-width: 0;
        max-width: none;
        margin: 0;
        transform: translateX(-100%);
        visibility: hidden;
        transition: none;
    }
    html.vt-drawer-open #sidebar {
        transform: none;
        visibility: visible;
        box-shadow: 12px 0 40px rgba(0, 0, 0, .5);
    }
    /* Only while js/shell.js opens or closes it, so crossing 1200px on a
       resize or rotation does not slide the pinned sidebar out over the rail. */
    html.vt-drawer-anim #sidebar { transition: transform .24s var(--vt-ease), visibility 0s linear .24s; }
    html.vt-drawer-anim.vt-drawer-open #sidebar { transition: transform .24s var(--vt-ease), visibility 0s; }
    #sidebar .sidebar-content {
        height: 100%;
        padding: var(--vt-safe-t) 0 var(--vt-safe-b) var(--vt-safe-l);
    }
    /* dark.css pins [data-simplebar] to sticky, 264px. */
    #sidebar [data-simplebar] { position: relative; top: auto; width: 100%; }
    #sidebar .simplebar-content { height: auto; min-height: 100%; }
    #sidebar .simplebar-content-wrapper { overscroll-behavior: contain; }

    html.vt-drawer-open .vt-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1048;
        background: rgba(9, 9, 10, .72);
        touch-action: none;
    }
    html.vt-drawer-open,
    html.vt-drawer-open body { overflow: hidden; }

    /* Links: 44px rows, 14px text (13px in the dropdowns). */
    #sidebar .sidebar-link {
        min-height: 44px;
        font-size: .875rem !important;
    }
    #sidebar .sidebar-link i,
    #sidebar .sidebar-link svg { font-size: .875rem !important; }
    #sidebar .sidebar-dropdown .sidebar-link { font-size: .8125rem !important; }
    #sidebar [data-bs-toggle="collapse"]::after { top: 18px !important; }

    /* Account block (members: avatar, name, Settings, Language, Log out). */
    .sidebar-account {
        display: block;
        padding: .25rem .5rem .5rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .sidebar-account-me {
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 56px;
        padding: .5rem .75rem;
        text-decoration: none;
    }
    .sidebar-account-av {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: #212123;
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .sidebar-account-id { display: flex; flex-direction: column; min-width: 0; }
    .sidebar-account-name {
        font: 600 1rem/1.2 'Rajdhani', system-ui, sans-serif;
        letter-spacing: .03em;
        color: #f2f2f2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sidebar-account-sub { font-size: .75rem; color: rgba(224, 224, 224, .65); }
    .sidebar-account-me:hover .sidebar-account-sub { color: #ff9900; }
    .sidebar-account-row {
        display: flex;
        align-items: center;
        gap: .65rem;
        width: 100%;
        min-height: 52px;
        padding: 0 .75rem;
        background: none;
        border: 0;
        border-radius: 0;
        color: rgba(224, 224, 224, .8);
        font-size: .875rem;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .sidebar-account-row > span { color: inherit; }
    .sidebar-account-row i { width: 16px; color: rgba(224, 224, 224, .65); }
    .sidebar-account-row:hover,
    .sidebar-account-row:focus-visible { background: rgba(255, 255, 255, .04); color: #fff; }
    .sidebar-account-row:hover i { color: #ff9900; }
    .sidebar-account-row .fa-discord { color: #5865f2; }
    .sidebar-account-row .fa-steam { color: #c7d5e0; }

    /* Layout: dark.css .main { overflow: hidden } breaks sticky. */
    .main { min-height: 100vh; min-height: 100svh; }
    @supports (overflow: clip) { .main { overflow: clip; } }

    /* Topbar: sticky, avatar menu moves into the drawer. */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        box-sizing: border-box;
        height: calc(var(--vt-topbar-h) + var(--vt-safe-t));
        padding-top: var(--vt-safe-t);
    }
    .topbar .navbar {
        height: 100%;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .topbar .topbar-account { display: none; }
    .topbar .sidebar-toggle {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: 0 4px 0 -9px !important;
        align-items: center;
        justify-content: center;
    }
    .topbar .nav-item { padding: 0; }
    .topbar .nav-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
    }
    .topbar .nav-icon i.nav-fa-sm { font-size: 1rem; }

    /* Toasts: palette restyle below 1200px only (desktop keeps the plugin look). */
    #awn-toast-container .awn-toast {
        --vt-toast: #ff9900;
        background: #151516;
        color: #e0e0e0;
        border: 1px solid rgba(255, 255, 255, .12);
        border-left: 3px solid var(--vt-toast);
        border-radius: 0;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    }
    #awn-toast-container .awn-toast.awn-toast-success { --vt-toast: #1cbb8c; }
    #awn-toast-container .awn-toast.awn-toast-alert { --vt-toast: #ff6b74; }
    #awn-toast-container .awn-toast.awn-toast-warning { --vt-toast: #ffb84d; }
    #awn-toast-container .awn-toast-wrapper {
        border: 0;
        border-radius: 0;
        padding: 14px 52px 12px 14px;
    }
    #awn-toast-container .awn-toast .awn-toast-label,
    #awn-toast-container .awn-toast.awn-toast-info .awn-toast-label {
        margin-bottom: 4px;
        font: 700 .6875rem/1.2 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: .12em;
        color: var(--vt-toast) !important;
    }
    #awn-toast-container .awn-toast-content { color: #e0e0e0; font-size: .875rem; line-height: 1.45; }
    #awn-toast-container .awn-toast-content * { color: inherit; }
    #awn-toast-container .awn-toast-content a { color: #ff9900; }
    #awn-toast-container .awn-toast .fa,
    #awn-toast-container .awn-toast b,
    #awn-toast-container .awn-toast.awn-toast-info b { color: var(--vt-toast) !important; }
    #awn-toast-container .awn-toast-icon { right: 14px; }
    #awn-toast-container .awn-toast-icon .fa { font-size: 24px; }
    #awn-toast-container .awn-toast-progress-bar,
    #awn-toast-container .awn-toast-progress-bar::after { height: 2px; }
    #awn-toast-container .awn-toast-progress-bar::after { background: var(--vt-toast); }

    /* Loading overlay: fades in after 150ms so quick loads never flash it. */
    .overlay { animation: vt-overlay-in .12s ease .15s both; }
    .overlay-logo,
    .overlay-logo > img { width: 96px; height: 96px; }
    .overlay-logo { margin-bottom: 12px; }
    .overlay-logo > img { top: 0; }
    .overlay-content {
        margin-top: 0;
        font-size: 1rem !important;
        text-transform: uppercase;
        letter-spacing: .12em;
    }
}
@keyframes vt-overlay-in { from { opacity: 0; } to { opacity: 1; } }

/* Short landscape phones: the topbar scrolls away to give the page room. */
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
    .topbar { position: relative; }
}

/* --------------------------------------------------------------------------
   Tab bar (M) and rail (R): one element, template/partials/nav.php
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .vt-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 0 2px;
        background: none;
        border: 0;
        border-radius: 0;
        color: rgba(242, 242, 242, .6);
        font: 600 .75rem/1.1 'Rajdhani', system-ui, sans-serif;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .vt-tab i { font-size: 18px; line-height: 1; color: inherit; }
    .vt-tab-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: inherit;
    }
    .vt-tab:hover,
    .vt-tab:focus-visible { color: #f2f2f2; }
    .vt-tab:focus-visible { outline: 2px solid #ff9900; outline-offset: -2px; }
    .vt-tab.is-active { color: #ff9900; }
    .vt-tab--signin { color: #ff9900; }
    .vt-tab-av {
        display: block;
        width: 22px;
        height: 22px;
        overflow: hidden;
        border-radius: 50%;
        background: #212123;
        border: 1px solid rgba(255, 255, 255, .07);
    }
    .vt-tab-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .vt-tab.is-active .vt-tab-av { box-shadow: 0 0 0 2px #ff9900; }
}

/* M: bottom bar */
@media (max-width: 767.98px) and (min-height: 501px) {
    .vt-has-tabbar .vt-tabbar {
        display: flex;
        position: fixed;
        z-index: 1030;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--vt-tabbar-h) + var(--vt-safe-b));
        margin: 0;
        padding: 0 var(--vt-safe-r) var(--vt-safe-b) var(--vt-safe-l);
        background: #0f0f10;
        border-top: 1px solid rgba(255, 255, 255, .07);
        transition: transform .2s var(--vt-ease);
    }
    .vt-has-tabbar .vt-tab { flex: 1 1 0; }
    .vt-has-tabbar .vt-tab--menu { display: none; }
    .vt-has-tabbar .vt-tab.is-active::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        width: 24px;
        height: 2px;
        margin-left: -12px;
        background: #ff9900;
    }
    html.vt-typing .vt-has-tabbar .vt-tabbar { transform: translateY(100%); }
    .vt-has-tabbar .main { padding-bottom: calc(var(--vt-tabbar-h) + var(--vt-safe-b)); }

    /* Topbar on phones: hamburger, page name, bells. */
    .topbar .sidebar-toggle { margin: 0 4px 0 0 !important; }
    .topbar .navbar {
        padding: 0 calc(4px + var(--vt-safe-r)) 0 calc(4px + var(--vt-safe-l)) !important;
        gap: 0 !important;
    }
    .topbar-left { min-width: 0; }
    .topbar-page {
        overflow: hidden;
        text-overflow: ellipsis;
        font: 600 1rem/1.2 'Rajdhani', system-ui, sans-serif !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #f2f2f2 !important;
    }
    .topbar-page > span { color: inherit !important; }
    .topbar-page > i,
    .topbar-sep,
    .topbar-changelog { display: none !important; }
}

/* R: rail */
@media (min-width: 768px) and (max-width: 1199.98px), (max-width: 767.98px) and (max-height: 500px) {
    .vt-has-rail .vt-tabbar {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 1030;
        top: 0;
        bottom: 0;
        left: 0;
        width: calc(var(--vt-rail-w) + var(--vt-safe-l));
        margin: 0;
        padding: var(--vt-safe-t) 0 var(--vt-safe-b) var(--vt-safe-l);
        overflow-y: auto;
        scrollbar-width: none;
        background: #0f0f10;
        border-right: 1px solid rgba(255, 255, 255, .07);
    }
    .vt-has-rail .vt-tabbar::-webkit-scrollbar { display: none; }
    .vt-has-rail .vt-tab { flex: 0 0 auto; height: 64px; }
    .vt-has-rail .vt-tab.is-active {
        background: rgba(255, 153, 0, .10);
        box-shadow: inset 3px 0 0 #ff9900;
    }
    .vt-has-rail .main { padding-left: calc(var(--vt-rail-w) + var(--vt-safe-l)); }
    .vt-has-rail .main { padding-right: var(--vt-safe-r); }
    .vt-has-rail .topbar .sidebar-toggle { display: none; }
}
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
    .vt-has-rail .vt-tab { height: 52px; gap: 2px; }
}

/* --------------------------------------------------------------------------
   Sheets: Explore (members) and Sign in (guests), Bootstrap offcanvas-bottom
   -------------------------------------------------------------------------- */
.vt-sheet.offcanvas-bottom {
    height: auto;
    max-height: min(85vh, 640px);
    max-height: min(85dvh, 640px);
    background: #151516;
    color: #e0e0e0;
    border: 0;
    border-top: 2px solid #ff9900;
    border-radius: 0;
    padding-bottom: var(--vt-safe-b);
}
.vt-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 calc(4px + var(--vt-safe-r)) 0 calc(16px + var(--vt-safe-l));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vt-sheet-title {
    margin: 0;
    font: 700 1rem/1 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f2f2f2;
}
.vt-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: rgba(242, 242, 242, .7);
    font-size: 1.1rem;
}
.vt-sheet-close i { color: inherit; }
.vt-sheet-close:hover { color: #ff9900; }
.vt-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px calc(12px + var(--vt-safe-r)) 16px calc(12px + var(--vt-safe-l));
}
.vt-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}
.vt-sheet-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 8px 4px;
    background: #1b1b1d;
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(242, 242, 242, .8);
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.vt-sheet-tile i { font-size: 1.35rem; color: #ff9900; }
.vt-sheet-tile i.fa-twitch { color: #9146ff; }
.vt-sheet-tile span {
    font: 600 .8125rem/1.15 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
}
.vt-sheet-tile:hover,
.vt-sheet-tile:focus-visible { background: #212123; color: #fff; }
.vt-sheet-tile.is-active { border-color: rgba(255, 153, 0, .5); color: #ff9900; }

.vt-signin { display: grid; gap: 8px; max-width: 420px; margin: 0 auto; }
.vt-signin-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    background: #1b1b1d;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #f2f2f2;
    font-size: .9375rem;
    text-decoration: none;
}
.vt-signin-btn > span, .vt-signin-btn b { color: inherit; }
.vt-signin-btn i { font-size: 1.25rem; }
.vt-signin-btn.is-steam { border-color: rgba(255, 153, 0, .45); }
.vt-signin-btn.is-steam i { color: #ff9900; }
.vt-signin-btn.is-discord i { color: #5865f2; }
.vt-signin-btn.is-google i { color: #ea4335; }
.vt-signin-btn:hover { background: #212123; }
.vt-signin-note {
    max-width: 420px;
    margin: 12px auto 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(242, 242, 242, .65);
}
.vt-signin-note strong { color: #f2f2f2; }

/* --------------------------------------------------------------------------
   Toast positions on phones: above the bar, full width
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) and (min-height: 501px) {
    #awn-toast-container {
        left: 12px;
        right: 12px;
        bottom: calc(var(--vt-bottom-offset) + 12px);
    }
    #awn-toast-container .awn-toast { width: 100%; }
    .notyf { padding-bottom: var(--vt-bottom-offset); }
}

/* --------------------------------------------------------------------------
   App footer on phones: links as a two-column grid of 44px rows
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :where(.main) .lp-footer-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
        width: 100%;
    }
    :where(.main) .lp-footer-right a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Footer links on touch at every width below the phone grid: 44px rows. The
   copyright link sits inside a sentence, so it grows its hit area with inline
   padding, which does not move the line. */
@media (any-pointer: coarse) {
    :where(.main) .lp-footer-right a { display: inline-flex; align-items: center; min-height: 44px; }
    :where(.main) .lp-footer-copy a { padding-block: 14px; }
}

/* ==========================================================================
   Part 3: desktop icon rail (1200px and up)
   The hamburger switches #sidebar between the full sidebar and a 64px rail
   (#sidebar.collapsed, body.vt-sidebar-rail). The state is a cookie, so
   template/header.php renders the right width from the first byte. Labels stay
   in the DOM (faded, not removed), so screen readers keep every name; the
   hover / focus tooltip and the Profile / Ranking flyouts are js/shell.js.
   Nothing here applies below 1200px, where #sidebar is the drawer.

   Motion: the original AdminKit collapse slid the whole 264px panel out to the
   left (margin-left, 350ms ease-in-out) with the page following. This keeps
   that slide but stops at 64px: the icon column never moves (every icon slot
   is centred 32px from the left edge, the rail's centre, and no row changes
   height), while everything to its right - labels, client state, chevrons,
   wordmark - travels rigidly with the sidebar's right edge and slides out
   behind a clip boundary just right of the icons. One registered custom
   property, --vt-p (0 = full, 1 = rail), is the only thing that animates; the
   width and every moving part are computed from it, so they cannot drift
   apart. It transitions only while html.vt-sb-anim is set (js/shell.js, one
   toggle), so first paint and resizes never animate, and a quick re-toggle
   reverses from wherever it is. Without @property support the switch is
   simply instant.
   ========================================================================== */
@property --vt-p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
:root {
    --vt-sidebar-w: 264px;
    --vt-rail-desk-w: 64px;
    --vt-sb-dur: 350ms;              /* AdminKit's original collapse */
    --vt-sb-ease: ease-in-out;
}
/* The short VTL brand exists for the rail only; the drawer shows the wordmark. */
.sidebar-brand { position: relative; overflow: hidden; }
.sidebar-brand-short { display: none; }

/* ---- Client status (template/header.php) ---------------------------------------
   A nav-style row: icon with a status dot, "VTLOG Client", Online / Offline.
   playerStatus.js writes the word and text-success / text-danger onto the
   value; the dot follows that class (data-state, set by js/shell.js, with a
   :has() twin so it is right even before scripts run). The colours are fixed
   signal colours, never the seasonal accent, so they read under every theme;
   the word carries the meaning, not the colour. */
.sidebar-client {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 30px;
    margin: .25rem .5rem;
    padding: 0 .75rem 0 15px;           /* 15 = the nav links' 3px border + 12px */
    overflow: hidden;
    white-space: nowrap;
    font-size: .78rem;
    color: rgba(224, 224, 224, .8);
    cursor: help;
}
.sidebar-client:hover { background: rgba(255, 255, 255, .04); }
.sidebar-client:focus-visible { outline: 2px solid #ff9900; outline-offset: -2px; }
.sidebar-client-icon {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    line-height: 1;
    color: rgba(224, 224, 224, .65);
}
.sidebar-client-icon > i { font-size: .78rem; width: auto; }
.sidebar-client-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b74;
    box-shadow: 0 0 0 2px #0f0f10;
}
.sidebar-client-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.sidebar-client-value {
    margin-left: auto;
    padding-left: .5rem;
    font: 500 .66rem/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ff6b74 !important;
}
.sidebar-client-value.text-success { color: #4dff9a !important; }
.sidebar-client[data-state="online"] .sidebar-client-dot,
.sidebar-client:has(.sidebar-client-value.text-success) .sidebar-client-dot {
    background: #4dff9a;
    box-shadow: 0 0 0 2px #0f0f10, 0 0 6px rgba(77, 255, 154, .7);
}
@media (prefers-reduced-motion: no-preference) {
    .sidebar-client[data-state="online"] .sidebar-client-dot { animation: sidebar-client-pulse 2.4s ease-in-out infinite; }
}
@keyframes sidebar-client-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (max-width: 1199.98px) {
    .sidebar-client { min-height: 40px; font-size: .875rem; }
    .sidebar-client-icon > i { font-size: .875rem; }
}

@media (min-width: 1200px) {
    body.vt-sidebar-rail { --vt-sidebar-w: var(--vt-rail-desk-w); }

    /* ---- Progress and width ------------------------------------------------- */
    #sidebar { --vt-p: 0; }
    #sidebar.collapsed { --vt-p: 1; }
    body:not([data-sidebar-position="right"]) #sidebar.collapsed { margin-left: 0; }
    #sidebar,
    #sidebar.collapsed {
        min-width: calc(264px - var(--vt-p) * 200px);
        max-width: calc(264px - var(--vt-p) * 200px);
    }
    #sidebar [data-simplebar] { width: 100%; }
    #sidebar .simplebar-content-wrapper { overflow-x: hidden !important; }

    /* ---- Header: lines up with the top bar -------------------------------- */
    /* The brand is exactly the top bar's height (74px: 2px accent, content,
       1px rule), with the same bottom rule, so the two read as one band. It
       never shrinks on short screens; the <hr> that sat under it is gone. */
    #sidebar .sidebar-brand {
        width: 264px;
        min-width: 264px;
        height: 74px;
        flex-shrink: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 1px solid rgba(255, 153, 0, .08);
    }
    #sidebar .sidebar-account + hr { display: none; }
    /* The top bar's natural height is 73.6px; pin it to the brand's 74px so the
       two bottom rules land on the same pixel row. */
    .topbar { min-height: 74px; }
    #sidebar .sidebar-client { margin-top: .6rem; }

    /* ---- Shared geometry ---------------------------------------------------- */
    /* Icon slot 20px at 8 (nav) + 3 (AdminKit's border) + 11 = 22px -> centre
       32px; the 5.8px gap keeps every label exactly where it was
       (8 + 3 + 12 + 16 + 8.8 = 47.8px). */
    #sidebar .sidebar-nav { padding: 0 .5rem; }
    #sidebar .sidebar-nav > .sidebar-item > .sidebar-link {
        position: relative;
        padding-left: 11px !important;
        gap: 5.8px;
        white-space: nowrap;
        overflow: hidden;
    }
    body[data-theme] #sidebar .sidebar-nav > .sidebar-item > .sidebar-link > i {
        width: 20px !important;
        flex: 0 0 20px;
        line-height: 1;
        /* Bigger glyphs on the rail, inside the fixed slot. Not a transform:
           the Premium icon spins with one, which would override a scale. */
        font-size: calc(.78rem + var(--vt-p) * .16rem) !important;
    }
    #sidebar .sidebar-nav > .sidebar-item > .sidebar-link > span.align-middle { display: inline-block; }

    /* ---- The slide ------------------------------------------------------------ */
    /* Labels start at 47.8px; they move left with the right edge (200px over
       the toggle) and are clipped from the left once they pass x = 44, just
       right of the icon slots. Only while moving or on the rail. */
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-nav > .sidebar-item > .sidebar-link > span.align-middle,
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-client-label {
        transform: translateX(calc(var(--vt-p) * -200px));
        clip-path: inset(0 0 0 max(0px, calc(var(--vt-p) * 200px - 3.8px)));
    }
    /* The client state is right-aligned, so the narrowing row already carries
       it with the edge; it only needs the same clip at x = 44
       (its right edge sits at 244px - travel). */
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-client-value {
        clip-path: inset(0 0 0 max(0px, calc(100% - 200px + var(--vt-p) * 200px)));
    }
    /* Wordmark: centred at 132px, rides the edge, clipped at the 64px rail. */
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-brand-text {
        transform: translateX(calc(var(--vt-p) * -200px));
        clip-path: inset(0 0 0 max(0px, calc(var(--vt-p) * 200px - 68px + 50%)));
    }
    #sidebar .sidebar-brand-short {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--vt-rail-desk-w);
        font: 700 1.2rem/1 'Rajdhani', system-ui, sans-serif;
        letter-spacing: 1px;
        color: #ff9900;
        opacity: calc(var(--vt-p) * 2 - 1);
        pointer-events: none;
    }
    /* Section names slide out the same way; the rail divider takes their place. */
    #sidebar .sidebar-header {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-indent: calc(var(--vt-p) * -200px);
    }
    #sidebar .sidebar-header::after {
        content: "";
        position: absolute;
        left: 8px;          /* header starts 8px in: line 16 - 48px, like the <hr> */
        width: 32px;
        top: 50%;
        height: 1px;
        background: rgba(255, 255, 255, .1);
        opacity: calc(var(--vt-p) * 2 - 1);
    }
    /* Chevron rides the edge and fades; the rail's flyout notch fades in. */
    #sidebar .sidebar-nav > .sidebar-item > [data-bs-toggle="collapse"]::after { opacity: calc(1 - var(--vt-p) * 1.8); }
    #sidebar .sidebar-nav > .sidebar-item > [data-bs-toggle="collapse"]::before {
        content: "";
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -3px;
        border: 3px solid transparent;
        border-left-color: rgba(224, 224, 224, .45);
        opacity: calc(var(--vt-p) * 2 - 1);
    }
    /* Ticket count: right-aligned like before, so it rides the edge, and
       settles on the icon's top-right corner on the rail. */
    #sidebar #sidebar-ticket-badge-wrap,
    #sidebar #sidebar-messages-badge-wrap {
        position: absolute;
        right: 12px;
        top: 50%;
        margin: 0 !important;
        transform: translate(calc(var(--vt-p) * 6px), calc(-50% - var(--vt-p) * 7px)) scale(calc(1 - var(--vt-p) * .15));
    }
    /* An open submenu folds shut (no jump below it); on the rail it lives in
       the flyout instead. */
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-dropdown.show {
        display: block;
        max-height: calc((1 - var(--vt-p)) * 420px);
        opacity: calc(1 - var(--vt-p) * 2);
        overflow: hidden;
    }
    /* The bottom mark: centred, so it follows the width; shrinks to rail size. */
    .sidebar-tail-name,
    .sidebar-tail-tag { white-space: nowrap; opacity: calc(1 - var(--vt-p) * 2); }
    .sidebar-tail img { transform-origin: 50% 0; transform: scale(calc(1 - var(--vt-p) * .53)); }

    /* ---- Client status ------------------------------------------------------ */
    /* Same grid as a nav row: icon slot centred on 32px, label at 47.8px.
       The dividers around it: Bootstrap draws <hr> at 25 % opacity, which left
       them invisible; one subtle line, 16 - 48px on the rail like the groups'. */
    #sidebar .sidebar-content hr { opacity: 1; border-color: rgba(255, 255, 255, .08) !important; }
    /* 16px more air before Home than the row's .25rem, in both states alike. */
    #sidebar .sidebar-client { padding-left: 14px; gap: 5.8px; margin-bottom: calc(.25rem + 16px); }
    #sidebar .sidebar-client-icon { flex: 0 0 20px; width: 20px; }
    #sidebar .sidebar-client-icon > i { font-size: calc(.78rem + var(--vt-p) * .16rem); }
    #sidebar .sidebar-client-dot { right: -1px; }   /* on the glyph's corner, not the slot's */

    /* ---- Rail-only states (no motion involved) ------------------------------- */
    /* "Logged in as": the return button only, as an icon. */
    #sidebar.collapsed .sidebar-content > h4.text-danger { display: none; }
    #sidebar.collapsed .sidebar-return { margin: .4rem .55rem !important; padding: .45rem 0 !important; }
    #sidebar.collapsed .sidebar-return > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #sidebar.collapsed .sidebar-ticket-badge { min-width: 15px; height: 15px; padding: 0 3px; font-size: .55rem; line-height: 15px; }

    /* A parent whose child page is open lights up too, and an open flyout's parent. */
    #sidebar.collapsed .sidebar-item:has(.sidebar-dropdown .sidebar-link.active) > .sidebar-link,
    #sidebar.collapsed .sidebar-link.vt-flyout-open {
        background: rgba(255, 153, 0, .10) !important;
        color: #ff9900 !important;
        box-shadow: inset 3px 0 0 #ff9900;
    }
    #sidebar.collapsed .sidebar-item:has(.sidebar-dropdown .sidebar-link.active) > .sidebar-link i,
    #sidebar.collapsed .sidebar-link.vt-flyout-open i { color: #ff9900 !important; }
}

/* ---- Motion: one transition, only during a toggle, never under reduced motion -- */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    html.vt-sb-anim #sidebar { transition: --vt-p var(--vt-sb-dur) var(--vt-sb-ease); }
    /* Everything inside is computed from --vt-p each frame. Any transition of
       its own (links carry `all .15s`, AdminKit's chevron `all .2s`) would
       trail behind that and smear the slide, so they pause for the toggle. */
    html.vt-sb-anim #sidebar *,
    html.vt-sb-anim #sidebar *::before,
    html.vt-sb-anim #sidebar *::after { transition: none !important; }
}

/* Rail tooltip and flyout live on <body> (js/shell.js), outside the sidebar's
   scroll container, so no overflow or stacking context can clip them. */
.vt-rail-tip,
.vt-rail-flyout { display: none; }
@media (min-width: 1200px) {
    .vt-rail-tip {
        position: fixed;
        z-index: 1085;
        display: block;
        max-width: 240px;
        padding: .35rem .6rem;
        background: #151516;
        color: #f2f2f2;
        border: 1px solid rgba(255, 255, 255, .1);
        border-left: 2px solid var(--vt-theme-accent, #ff9900);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
        font-size: .75rem;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(-4px, -50%);
        transition: opacity .12s ease, transform .12s ease;
    }
    .vt-rail-tip.is-on { opacity: 1; transform: translate(0, -50%); }
    .vt-rail-tip[hidden] { display: none; }

    .vt-rail-flyout {
        position: fixed;
        z-index: 1080;
        display: block;
        min-width: 210px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        background: #151516;
        border: 1px solid rgba(255, 255, 255, .1);
        border-top: 2px solid var(--vt-theme-accent, #ff9900);
        box-shadow: 10px 10px 32px rgba(0, 0, 0, .55);
    }
    .vt-rail-flyout[hidden] { display: none; }
    .vt-rail-flyout-title {
        padding: .55rem .9rem .35rem;
        font: 700 .62rem/1 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(224, 224, 224, .65);
    }
    .vt-rail-flyout .sidebar-dropdown { display: block !important; height: auto !important; padding: 0 0 .35rem; margin: 0; }
    .vt-rail-flyout .sidebar-item { margin: 0; list-style: none; }
    body[data-theme] .vt-rail-flyout .sidebar-dropdown .sidebar-link {
        display: flex !important;
        align-items: center;
        gap: .55rem;
        padding: .5rem .9rem !important;
        font-size: .78rem !important;
        color: rgba(224, 224, 224, .85) !important;
        text-decoration: none;
        background: transparent;
    }
    .vt-rail-flyout .sidebar-link i { width: 16px; text-align: center; margin: 0 !important; color: rgba(224, 224, 224, .65) !important; font-size: .78rem; }
    .vt-rail-flyout .sidebar-link:hover,
    .vt-rail-flyout .sidebar-link:focus-visible { background: rgba(255, 255, 255, .05); color: #fff !important; }
    .vt-rail-flyout .sidebar-link:hover i { color: #ff9900 !important; }
    .vt-rail-flyout .sidebar-link.active { background: rgba(255, 153, 0, .10); color: #ff9900 !important; box-shadow: inset 3px 0 0 #ff9900; }
    .vt-rail-flyout .sidebar-link.active i { color: #ff9900 !important; }
    .vt-rail-flyout .sidebar-link:focus-visible { outline: 2px solid #ff9900; outline-offset: -2px; }
}

/* ---- Seasonal Theme switch (template/header.php, js/theme.js) ----------------
   A nav-style row right above the bottom VTLOG mark: sparkle icon, "Seasonal
   Theme", a small switch. The menu above grows to fill the column, so the row
   stays anchored above the footer at any menu length and scrolls with the
   sidebar on short screens. On the rail only the icon remains, centred on the
   32px axis, with its state in the corner marker (accent = on, grey = off) and
   in the tooltip. Same grid as the client row, so the slide carries it. */
.sidebar-season {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: calc(100% - 1rem);
    min-height: 30px;
    /* Breathing room above the footer mark: 30px, easing down on short screens
       (the logo itself does not move - the menu above gives up the space). */
    margin: .75rem .5rem clamp(12px, 3.5vh, 30px);
    padding: 0 .75rem 0 15px;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;   /* the attention glow reaches past the pill; the label clips itself */
    white-space: nowrap;
    font-size: .78rem;
    color: rgba(224, 224, 224, .8);
    text-align: left;
    cursor: pointer;
}
.sidebar-season:hover { background: rgba(255, 255, 255, .04); }
.sidebar-season:focus-visible { outline: 2px solid #ff9900; outline-offset: -2px; }
.sidebar-season-icon { position: relative; flex: 0 0 16px; width: 16px; text-align: center; line-height: 1; color: rgba(224, 224, 224, .55); }
.sidebar-season-icon > i { font-size: .78rem; width: auto; color: inherit !important; }   /* the glyph shows the state colour of its wrapper */
.sidebar-season-dot {
    position: absolute; right: -3px; bottom: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #5a5a5e; box-shadow: 0 0 0 2px #0f0f10;
}
.sidebar-season-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; }
/* The full row (and the phone drawer) shows no status dot - the yellow icon and
   the pill say it all. Only the 64px rail keeps the dot element, where it is
   the OFF marker and one of the ON glints. */
.sidebar-season-dot { display: none; }
@media (min-width: 1200px) {
    #sidebar.collapsed .sidebar-season-dot { display: block; }
}
/* Pill switch: OFF and ON both written inside; the orange thumb slides under
   whichever is selected, the other half stays dark grey. */
.sidebar-season-switch {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px;
    background: #2a2a2d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
}
.sidebar-season-switch::before {
    content: "";
    position: absolute;
    top: 2px; bottom: 2px; left: 2px;
    width: calc(50% - 2px);
    border-radius: 999px;
    background: #ff9900;
    transition: transform .2s ease;
}
.sidebar-season[aria-checked="true"] .sidebar-season-switch::before { transform: translateX(100%); }
.sidebar-season-opt {
    position: relative;
    width: 28px;
    padding: 2px 0;
    text-align: center;
    font: 700 .58rem/1.2 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .04em;
    color: rgba(224, 224, 224, .55);
    transition: color .2s ease;
}
.sidebar-season[aria-checked="false"] .sidebar-season-opt.is-off,
.sidebar-season[aria-checked="true"] .sidebar-season-opt.is-on { color: #161617; }
.sidebar-season[aria-checked="true"] .sidebar-season-icon { color: #ffd23f; }   /* the ON sparkle is yellow */
.sidebar-season[aria-checked="true"] .sidebar-season-dot { background: #ffd23f; }
/* Seasonal Effects: the same control stacked right under Seasonal Theme, so the pair
   reads as one group; the footer gap moves to the lower row. Fully independent of Seasonal
   Theme (any combination), with the same attention cues (below). */
.sidebar-season:has(+ .sidebar-season--fx) { margin-bottom: 0; }
.sidebar-season--fx { margin-top: 2px; }
/* Its own accent (cool cyan, so the two rows never read as one switch) and no status dot
   anywhere, the rail included: the icon colour, the pill and the tooltip carry the state. */
/* Seasonal Effects keeps the Seasonal Theme switch exactly (same orange pill); only its icon is its
   own: the multicolour magic wand of the 🪄 emoji, no frame (template/header.php), full colour while
   ON, greyed while OFF. */
.sidebar-fx-wand { display: block; width: 15px; height: 15px; margin: 0 auto; overflow: visible; }
.sidebar-fx-wand .w-handle { fill: #1d3b8f; }
.sidebar-fx-wand .w-shaft { fill: #3f7fe6; }
.sidebar-fx-wand .w-tip { fill: #d6dbe2; }
.sidebar-fx-wand .w-spark { fill: #ffb81c; }
.sidebar-season--fx .sidebar-fx-wand { transition: filter .2s ease, opacity .2s ease; }
.sidebar-season--fx[aria-checked="false"] .sidebar-fx-wand { filter: grayscale(1); opacity: .6; }
@media (max-width: 1199.98px) { .sidebar-fx-wand { width: 17px; height: 17px; } }
@media (min-width: 1200px) { #sidebar .sidebar-fx-wand { width: calc(15px + var(--vt-p, 0) * 3px); height: calc(15px + var(--vt-p, 0) * 3px); } }
@media (prefers-reduced-motion: reduce) { .sidebar-season--fx .sidebar-fx-wand { transition: none; } }
.sidebar-season--fx .sidebar-season-dot,
#sidebar.collapsed .sidebar-season--fx .sidebar-season-dot { display: none; }
@media (prefers-reduced-motion: reduce) {
    .sidebar-season-switch::before, .sidebar-season-opt { transition: none; }
}
@media (max-width: 1199.98px) {
    .sidebar-season { min-height: 44px; font-size: .875rem; }   /* touch target */
    .sidebar-season-icon > i { font-size: .875rem; }
}
@media (min-width: 1200px) {
    #sidebar .sidebar-season { padding-left: 14px; gap: 5.8px; }
    #sidebar .sidebar-season-icon { flex: 0 0 20px; width: 20px; }
    #sidebar .sidebar-season-icon > i { font-size: calc(.78rem + var(--vt-p, 0) * .16rem); }
    #sidebar .sidebar-season-dot { right: -1px; }
    /* The slide: label like a nav label, the switch like the client state. */
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-season-label {
        transform: translateX(calc(var(--vt-p) * -200px));
        clip-path: inset(0 0 0 max(0px, calc(var(--vt-p) * 200px - 3.8px)));
    }
    :is(html.vt-sb-anim #sidebar, #sidebar.collapsed) .sidebar-season-switch {
        clip-path: inset(0 0 0 max(0px, calc(100% - 200px + var(--vt-p) * 200px)));
    }
}

/* ---- Seasonal Theme: attention cue while OFF -----------------------------------
   Themes are opt-in, so while the switch is OFF a bright orange light runs once
   around the pill's edge with a glow that swells and fades (2s), then nothing
   until the next run - every 15s, on its own, for as long as it stays OFF. On
   the rail, where the pill is hidden, the sparkle icon glows instead. CSS only:
   the light is a conic-gradient ring masked to the pill's 1.5px border, turned
   by one registered angle; it never touches layout, text, the OFF/ON colours,
   clicks or focus, and it stops the moment the switch is ON. Reduced motion: a
   faint static orange edge instead. Drawer below 1200px: only while open. */
@property --vt-sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.sidebar-season-switch::after,
.sidebar-season-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.sidebar-season-switch::after {
    inset: -3px;
    padding: 2.5px;
    border-radius: 999px;
    background: conic-gradient(from var(--vt-sweep), transparent 0deg 150deg, rgba(255, 153, 0, .45) 230deg, #ff9900 300deg, #fff1dc 352deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sidebar-season-icon::after {
    inset: -11px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 170, 40, .85) 0%, rgba(255, 153, 0, .35) 42%, rgba(255, 153, 0, 0) 72%);
}
@media (prefers-reduced-motion: no-preference) {
    /* The ring of light, plus a soft halo that swells around the pill while
       it travels. First run 2s after the page loads. */
    .sidebar-season[aria-checked="false"] .sidebar-season-switch::after {
        animation: vt-season-sweep 15s linear 1.5s infinite;
    }
    .sidebar-season[aria-checked="false"] .sidebar-season-switch {
        animation: vt-season-halo 15s ease-in-out 1.5s infinite;
    }
    /* Desktop: the pill on the full sidebar, the icon on the rail - never both. */
    @media (min-width: 1200px) {
        #sidebar.collapsed .sidebar-season[aria-checked="false"] .sidebar-season-switch::after,
        #sidebar.collapsed .sidebar-season[aria-checked="false"] .sidebar-season-switch { animation: none; }
        #sidebar.collapsed .sidebar-season[aria-checked="false"] .sidebar-season-icon::after {
            animation: vt-season-glow 15s ease-in-out 1.5s infinite;
        }
    }
    /* Drawer: animate only while it is open. */
    @media (max-width: 1199.98px) {
        html:not(.vt-drawer-open) .sidebar-season[aria-checked] .sidebar-season-switch::after,
        html:not(.vt-drawer-open) .sidebar-season[aria-checked] .sidebar-season-switch { animation-play-state: paused; }
    }
}
/* 15s cycle: 2s of light (13.3%), then rest. */
@keyframes vt-season-sweep {
    0%     { --vt-sweep: 0deg;   opacity: 0; }
    1.3%   { opacity: 1; }
    11%    { opacity: 1; }
    13.3%  { --vt-sweep: 360deg; opacity: 0; }
    100%   { --vt-sweep: 360deg; opacity: 0; }
}
@keyframes vt-season-halo {
    0%, 13.3%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
    5%              { box-shadow: 0 0 14px 3px rgba(255, 153, 0, .6); }
    9%              { box-shadow: 0 0 9px 1px rgba(255, 153, 0, .35); }
}
@keyframes vt-season-glow {
    0%, 13.3%, 100% { opacity: 0; transform: scale(.7); }
    5%              { opacity: 1; transform: scale(1.15); }
    9%              { opacity: .55; transform: scale(1); }
}
/* The rail icon itself warms to orange while it glows (its corner dot stays). */
@keyframes vt-season-icon {
    0%, 13.3%, 100% { color: rgba(224, 224, 224, .55); }
    5%              { color: #ffb84d; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
    #sidebar.collapsed .sidebar-season[aria-checked="false"] .sidebar-season-icon {
        animation: vt-season-icon 15s ease-in-out 1.5s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-season[aria-checked="false"] .sidebar-season-switch { border-color: rgba(255, 153, 0, .45); }
    @media (min-width: 1200px) {
        #sidebar.collapsed .sidebar-season[aria-checked="false"] .sidebar-season-icon { color: rgba(255, 153, 0, .75); }
    }
}

/* ---- Seasonal Theme ON, collapsed rail: tiny glints ------------------------------
   While a theme is on, the rail's sparkle icon gets three tiny four-point stars
   that pop in, shimmer and fade one after another (~1.4s), every 10s. They
   replace the static orange dot there and reuse the icon's own pieces (the dot
   span and the icon's ::before / ::after), so nothing is added to the layout
   and the icon never moves. Off-rail and in the expanded sidebar nothing
   changes. Reduced motion: no glints, just the static orange icon. */
@media (min-width: 1200px) {
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-dot,
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::before,
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::after {
        content: "";
        position: absolute;
        inset: auto;
        width: 7px;
        height: 7px;
        border-radius: 0;
        box-shadow: none;
        background: #ffe36b;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        filter: drop-shadow(0 0 2px rgba(255, 214, 60, .95));
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
    }
    /* Three spots around the glyph, inside the 64px rail. */
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::before { top: -6px; right: -6px; }
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-dot { top: auto; bottom: -5px; right: auto; left: -5px; width: 5px; height: 5px; }
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::after { top: 4px; left: -8px; width: 5px; height: 5px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::before { animation: vt-glint-a 10s ease-in-out 1s infinite; }
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-dot          { animation: vt-glint-b 10s ease-in-out 1s infinite; }
    #sidebar.collapsed .sidebar-season[aria-checked="true"] .sidebar-season-icon::after  { animation: vt-glint-c 10s ease-in-out 1s infinite; }
}
/* Each glint ~0.7s, staggered: a, then b, then c - 1.4s in all, then rest. */
@keyframes vt-glint-a {
    0%, 7%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    3%           { opacity: 1; transform: scale(1.15) rotate(45deg); }
    5%           { opacity: .8; transform: scale(.8) rotate(70deg); }
}
@keyframes vt-glint-b {
    0%, 3.5%, 10.5%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    6.5%                  { opacity: 1; transform: scale(1.2) rotate(-40deg); }
    8.5%                  { opacity: .7; transform: scale(.7) rotate(-65deg); }
}
@keyframes vt-glint-c {
    0%, 7%, 14%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    10%               { opacity: 1; transform: scale(1.1) rotate(35deg); }
    12%               { opacity: .7; transform: scale(.75) rotate(60deg); }
}