/*
 * 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.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; z-index: 2; }
.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; }
}