/* ------------------------------------------------------------------ */
/*  VMExit panel — DNR tokens ported byte-for-byte                    */
/*  Reference: C:\recode\sideload\shared\src\kit\dnr\dnr_theme.h      */
/* ------------------------------------------------------------------ */

:root {
    /* dnr::theme::menu */
    --page:         #101011;   /* kPage       16,16,17  */
    --frame:        #141416;   /* kFrame      20,20,22  */
    --tab:          #1a1a1d;   /* kTab        26,26,29  */
    --group:        #19191b;   /* kGroupFill  25,25,27  */
    --line:         #252528;   /* kLine       37,37,40  */
    --control:      #202023;   /* kControl    32,32,35  */
    --control-hot:  #29292d;   /* kControlHot 41,41,45  */
    --knob:         #b4b4ba;   /* kKnob      180,180,186*/
    --text:         #dcdcdf;   /* kText      220,220,223*/
    --text-dim:     #8c8c92;   /* kTextDim   140,140,146*/
    --text-faint:   #55555a;   /* kTextFaint  85,85,90  */
    --rim-dark:     #050505;   /* kRimDark     5,5,5    */
    --ring-outer:   #0a0a0b;   /* kRingOuter  10,10,11  */
    --ring-inner:   #28282b;   /* kRingInner  40,40,43  */
    --window-ring:  #3a3a3e;   /* kWindowRing 58,58,62  */
    --field:        #151517;   /* kField      21,21,23  */
    --field-line:   #252528;   /* kFieldLine  37,37,40  */
    --field-hot:    #404045;   /* kFieldHot   64,64,69  */

    /* dnr::theme (base) */
    --face:         #252527;   /* kFace       37,37,39  */
    --face-hover:   #323234;   /* kFaceHover  50,50,52  */
    --highlight:    #5e5e5f;   /* kHighlight  94,94,95  */

    /* Accent (silver, kAccentDefault C9CDD6) */
    --accent:       #c9cdd6;
    --accent-dim:   #8c90a0;

    /* Status */
    --good:         #6ec88c;
    --warn:         #e6be6e;
    --danger:       #eb5f5f;

    /* 4px grid */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

    --topbar-h: 44px;

    /* Flat */
    --r: 0;

    --f-sans: Tahoma, "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

/* Scrollbars styled in our own skin so the page doesn't get a chrome-colored
   Windows rail down the right side. Scoped to the page viewport (html) and
   to any .grp-box.scroll panels. Firefox gets the native thin + colored
   version via scrollbar-color. */
html {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3f var(--frame);
}
::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: var(--frame); }
::-webkit-scrollbar-thumb    {
    background: #2e2e32;
    border: 1px solid var(--line);
}
::-webkit-scrollbar-thumb:hover { background: #3a3a3f; }
::-webkit-scrollbar-corner   { background: var(--frame); }

body {
    margin: 0; padding: 0;
    min-height: 100vh;
    background:
        /* faint widely-spaced dots */
        radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--frame);
    color: var(--text);
    font-family: var(--f-sans);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex; flex-direction: column;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-weight: 600; margin: 0; }
p { margin: 0; }

/* ------------------------------------------------------------------ */
/*  Menu kit — the sideload menu's own face and parts, for site chrome */
/* ------------------------------------------------------------------ */

/* Tahoma Px10: pixel-exact at 10px, the face every menu element uses. */
@font-face { font-family: "TahomaPx10"; src: url("/static/fonts/tahoma-px10-regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "TahomaPx10"; src: url("/static/fonts/tahoma-px10-bold.ttf") format("truetype"); font-weight: 700; }

/* ------------------------------------------------------------------ */
/*  Topbar — the menu header band: brand, tabs, who chip, power       */
/* ------------------------------------------------------------------ */

.topbar {
    position: sticky; top: 0; z-index: 20;
    height: 34px;
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 0 14px;
    background: var(--tab);
    border-bottom: 1px solid var(--ring-outer);
    box-shadow: 0 1px 0 var(--ring-inner);
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
}

.brand {
    display: flex; align-items: center;
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
    color: var(--text);
}

.topbar .tabs, .topbar .who { display: flex; align-items: stretch; gap: 2px; }
.topbar .tabs { flex: 1; }
.topbar .who { gap: 10px; }

.topbar .tab {
    position: relative;
    display: flex; align-items: center;
    padding: 0 10px;
    color: #828282;
    white-space: nowrap;
}
.topbar .tab:hover { color: var(--text); }
.topbar .tab.active { color: #e8e8e8; }
.topbar .tab::after {
    content: ""; position: absolute;
    left: 4px; right: 4px; bottom: 6px;
    height: 1px; background: var(--line);
}
.topbar .tab.active::after { height: 2px; background: var(--accent); }

.chip { display: flex; align-items: center; gap: 6px; color: var(--text); }
.chip-text { display: flex; flex-direction: column; gap: 2px; }
.chip-text strong { font-weight: 700; color: #e8e8e8; }
.chip-text small { font: 400 10px/1 "TahomaPx10", var(--f-sans); color: var(--text-dim); }
.chip:hover strong, .chip.active strong { color: #fff; }
.avatar {
    width: 20px; height: 20px;
    border: 1px solid var(--ring-outer);
    box-shadow: inset 0 0 0 1px var(--ring-inner);
    background: var(--field);
    display: inline-block; object-fit: cover;
}
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 "TahomaPx10", var(--f-sans); color: #e8e8e8; }
.inline-form { display: flex; align-items: center; margin: 0; }

.power {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    background: transparent; border: none;
    color: #828282; cursor: pointer;
}
.power:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/*  Window frame — the main content sits inside a bordered "page"     */
/* ------------------------------------------------------------------ */

.inner {
    width: 100%;
    margin: 0;
    padding: var(--s-5) var(--s-6);
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 1;
}

/* ------------------------------------------------------------------ */
/*  Landing — centered VMEXIT + the big game logos                    */
/* ------------------------------------------------------------------ */

body.landing { overflow: hidden; background: #000; }
body.landing .topbar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.inner.landing-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.land-dim {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,11,0.35), rgba(10,10,11,0.65));
    z-index: -1;
}
/* fallback backdrop so the page is never flat black */
body.landing::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, #182334 0%, #0b1424 55%, #04060a 100%);
    z-index: -3;
}

.land-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-7);
    padding: var(--s-7);
    opacity: 1;
    animation: land-fade 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes land-fade {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}

.land-brand {
    font: 700 80px/1 "TahomaPx10", var(--f-sans);
    letter-spacing: 10px;
    margin: 0 -10px 0 0;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(201,205,214,0.25);
}
.land-motto {
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
    letter-spacing: 6px;
    color: #c9cdd6;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    opacity: 0.85;
}
@media (max-width: 720px) {
    .land-brand { font-size: 40px; letter-spacing: 5px; margin-right: -5px; }
}

.land-games {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    margin-top: var(--s-4);
}
.land-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5);
    color: var(--text);
    position: relative;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.land-game img {
    width: clamp(96px, 11vw, 144px);
    height: clamp(96px, 11vw, 144px);
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
    transition: filter 180ms linear, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.land-game span {
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d9dde6;
    transition: color 150ms linear;
}
.land-game::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 8px;
    width: 0; height: 1px;
    background: var(--accent);
    transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1), left 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.land-game:hover { transform: translateY(-4px); }
.land-game:hover img { filter: drop-shadow(0 6px 24px rgba(201,205,214,0.3)) brightness(1.15); }
.land-game:hover span { color: #fff; }
.land-game:hover::after { width: 60%; left: 20%; }

/* ------------------------------------------------------------------ */
/*  Game page — full-bleed stage with a draggable fake menu           */
/* ------------------------------------------------------------------ */

body.game { overflow: hidden; background: #000; }

.inner.game-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #000;
}
.stage-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    filter: saturate(0.7) brightness(0.85);
    z-index: 0;
}
/* Each game's pixel-art scene (scripts/pixelize_stage.py), over a gradient that shows until it loads. */
.stage[data-game="ow2"]     .stage-bg { background-image: url("/static/stage/ow2.png"), linear-gradient(135deg, #1a2538, #0b1424 60%, #000 100%); }
.stage[data-game="wardogs"] .stage-bg { background-image: url("/static/stage/wardogs.png"), linear-gradient(135deg, #2a1818, #180a0a 60%, #000 100%); }
.stage[data-game="h1z1"]    .stage-bg { background-image: url("/static/stage/h1z1.png"), linear-gradient(135deg, #1f2a1a, #0d130a 60%, #000 100%); }
.stage-dim {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(10,10,11,0) 35%, rgba(10,10,11,0.7) 100%),
        linear-gradient(180deg, rgba(10,10,11,0.3), rgba(10,10,11,0.5));
    z-index: 1;
}

/* ------------------------------------------------------------------ */
/*  Window — the menu window: header band, framed page, footer band  */
/* ------------------------------------------------------------------ */

.win {
    background: var(--frame);
    border: 1px solid var(--ring-outer);
    border-top: 2px solid #e8e8e8;
    box-shadow: inset 0 0 0 1px var(--ring-inner), 0 12px 36px rgba(0,0,0,0.65);
    color: var(--text);
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
}
.win-head {
    display: flex; align-items: stretch; gap: 14px;
    height: 34px; padding: 0 14px;
}
.win-head .brand { color: var(--text); }
.win-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.win-tabs::-webkit-scrollbar { display: none; }
.win-tabs > * {
    position: relative;
    display: flex; align-items: center;
    flex: 0 0 auto; white-space: nowrap;
    padding: 0 10px;
    font-weight: 700;
    color: #828282;
}
.win-tabs > *:hover { color: var(--text); }
.win-tabs > *.active { color: #e8e8e8; }
.win-tabs > *::after {
    content: ""; position: absolute;
    left: 4px; right: 4px; bottom: 6px;
    height: 1px; background: var(--line);
}
.win-tabs > *.active::after { height: 2px; background: var(--accent); }
.win-page {
    margin: 0 16px;
    padding: 12px;
    background: var(--page);
    border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px;
}
.win-foot {
    display: flex; align-items: center; gap: 8px;
    min-height: 36px; padding: 0 16px;
    color: var(--text-dim);
}

/* Group: bold title above a framed box (the menu's group box). */
.grp { display: flex; flex-direction: column; gap: 6px; }
.grp-title { font-weight: 700; color: #e8e8e8; padding-left: 2px; }
.grp-box {
    background: var(--group);
    border: 1px solid var(--line);
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
}

/* Fields + buttons at menu scale. */
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > label { color: #b8b8b8; }
.win input[type=text], .win input[type=password], .win input:not([type]) {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 20px;
    padding: 0 6px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    color: #e8e8e8;
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
    outline: none;
}
/* Chrome autofill swaps in its own font and a blue fill; keep the field's own. */
.win input:-webkit-autofill,
.win input:-webkit-autofill:hover,
.win input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e8e8e8;
    caret-color: #e8e8e8;
    box-shadow: inset 0 0 0 100px var(--field);
    transition: background-color 99999s;
}
.win input:-webkit-autofill::first-line { font: 400 10px/1 "TahomaPx10", var(--f-sans); }
.win input:hover { border-color: var(--field-hot); }
.win input:focus { border-color: var(--accent); background: var(--field); }
.win input::placeholder { color: var(--text-faint); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; padding: 0 12px;
    background: var(--control);
    border: 1px solid var(--line);
    color: #b8b8b8;
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--control-hot); color: #fff; }
.btn:active { background: var(--field); }
.btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.btn.hi { color: #e8e8e8; font-weight: 700; border-color: var(--field-hot); }
.btn.block { width: 100%; }

/* ======================================================================= */
/*  Setup Guide -- lives inside the same win/grp chrome as the dashboard,   */
/*  with a slim left column of in-page section links.                       */
/* ======================================================================= */

.guide-win { width: min(1180px, 100%); }

.guide-cols {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.guide-side {
    position: sticky;
    top: 48px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding-right: 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.guide-side .grp-title { font-size: 11px; }
.guide-side .g-nav a { font-size: 11px; padding: 4px 7px; }
.guide-side .g-search { font-size: 11px; padding: 4px 7px; }

.g-search {
    width: 100%;
    background: var(--field);
    border: 1px solid var(--line);
    color: #d8d8d8;
    padding: 4px 6px;
    margin-bottom: 6px;
    font: 400 10px/1.2 "TahomaPx10", var(--f-sans);
    outline: none;
}
.g-search:focus { border-color: var(--accent); }
.g-search::placeholder { color: #666; }
.g-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.g-search-empty {
    margin-top: 6px;
    color: var(--text-dim);
    font-style: italic;
}

.g-nav {
    display: flex; flex-direction: column;
    gap: 1px;
}
.g-nav a {
    display: block;
    padding: 4px 6px;
    color: #a8a8a8;
    text-decoration: none;
    border-left: 2px solid transparent;
}
.g-nav a:hover { color: #e8e8e8; background: var(--control-hot); border-left-color: var(--accent); }

.guide-doc { gap: 10px; }

/* Anchor jumps leave room for the sticky topbar (34px) plus a bit of air so
   the section title isn't glued to the top edge. */
.guide-doc > section { scroll-margin-top: 54px; }
/* Deep-link anchors inside a section (e.g. troubleshooting rows) get the same
   offset so the Last Run card jumps don't vanish under the topbar. */
.guide-doc h3[id], .guide-doc tr[id] { scroll-margin-top: 54px; }

.guide-doc .grp-title { font-size: 12px; }

.g-prose {
    font-size: 11px;
    line-height: 1.55;
    color: #c8c8c8;
}
.g-prose p { margin: 0 0 8px; }
.g-prose p:last-child { margin-bottom: 0; }
.g-prose ol, .g-prose ul { margin: 0 0 8px 20px; padding: 0; }
.g-prose li { margin-bottom: 4px; }
.g-prose h3 {
    font-size: 12px;
    font-weight: 700; color: #e8e8e8;
    margin: 12px 0 5px; padding: 0;
}
.g-prose h3:first-child { margin-top: 0; }
.g-prose a {
    color: #d8d8d8;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 2px;
}
.g-prose a:hover { color: #ffffff; }
.g-prose code {
    background: var(--field);
    border: 1px solid var(--line);
    padding: 0 3px;
    color: #d8d8d8;
}
.g-prose b { color: #e8e8e8; }
.g-prose i { color: #b8b8b8; font-style: italic; }

.g-aside { color: var(--text-dim); margin-top: 6px; }

.g-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 4px 0 6px;
}
.g-tbl th, .g-tbl td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    color: #c0c0c0;
    line-height: 1.4;
}
.g-tbl th {
    background: var(--control-hot);
    color: #e8e8e8;
    font-weight: 700;
}
.g-tbl td.yes { color: var(--danger); }
.g-tbl code { font-size: 11px; }

/* Deep-link highlight when a Last Run card jumps to an anchor. */
.g-tbl tr:target td,
.g-prose h3:target {
    animation: g-flash 1.8s ease-out 1;
}
@keyframes g-flash {
    0%   { background: rgba(201, 205, 214, 0.18); }
    100% { background: transparent; }
}

/* Search: highlight a hit section with a pulsing left border + brief glow. */
.guide-doc > section.g-hit > .grp-box {
    border-color: var(--accent);
    animation: g-hit-pulse 1.6s ease-out 1;
}
.guide-doc > section.g-hit > .grp-title {
    color: #ffffff;
}
@keyframes g-hit-pulse {
    0%   { box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(201, 205, 214, 0.35); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}

/* Dim nav links the search didn't match. */
.g-nav a.dim { opacity: 0.3; }
.g-nav a.dim:hover { opacity: 0.9; }

/* Admin payments ledger. */
.pay-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.pay-filter .chip {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    background: var(--field);
    border: 1px solid var(--line);
    color: #a8a8a8;
    text-decoration: none;
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
}
.pay-filter .chip:hover { color: #e8e8e8; background: var(--control-hot); }
.pay-filter .chip.active { color: #ffffff; border-color: var(--accent); }
.pay-tbl td, .pay-tbl th { font-size: 10px; }
.pay-flagged td   { background: rgba(235, 95, 95, 0.06); }
.pay-received td  { background: rgba(230, 190, 110, 0.06); }
.pay-granted td   { color: #b8b8b8; }

/* UID chip beside the Admin/Member role on the dashboard Profile card. */
.prof-uid {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    background: var(--field);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font: 400 10px/1.3 "TahomaPx10", var(--f-sans);
}

/* Rules page: narrower window, more readable body text. */
.rules-win { width: min(760px, 100%); }
.rules-prose {
    font-size: 12px;
    line-height: 1.6;
    color: #c8c8c8;
}
.rules-prose p { margin: 0 0 8px; }
.rules-prose p:last-child { margin-bottom: 0; }
.rules-prose a {
    color: #d8d8d8;
    text-decoration: underline;
    text-decoration-color: var(--accent);
}
.rules-prose b { color: #e8e8e8; }
.rules-accept-form { margin-top: 8px; }
.rules-accept-sub {
    margin-top: 6px;
    text-align: center;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.5;
}

/* Register-form "agree to rules" checkbox row. */
.fld-check { margin-top: 4px; }
.fld-check label {
    display: flex; align-items: center; gap: 6px;
    color: #c8c8c8;
    font: 400 10px/1.4 "TahomaPx10", var(--f-sans);
}
.fld-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 13px; height: 13px;
    margin: 0;
}
.fld-check a {
    color: #d8d8d8;
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

/* "Discord ->" link in the Stuck panel. */
.g-help-link {
    display: inline-block;
    color: #d8d8d8;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
}
.g-help-link:hover { color: #ffffff; }

/* Placeholder frame for inline screenshots once we drop them in. */
.g-shot {
    display: block;
    margin: 10px 0;
    border: 1px solid var(--line);
    background: var(--field);
    max-width: 100%;
    height: auto;
}
.g-shot-cap {
    display: block;
    margin: -4px 0 10px;
    color: var(--text-dim);
    font-size: 10px;
}

@media (max-width: 720px) {
    .guide-cols { grid-template-columns: 1fr; }
    .guide-side { position: static; }
}

.link-alt { margin-top: 6px; text-align: center; }
.linkbtn {
    background: none; border: 0; padding: 0;
    color: #8a8a8a; cursor: pointer;
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
    text-decoration: underline;
}
.linkbtn:hover { color: #c0c0c0; }

.err { color: var(--danger); }

.win-tabs > button {
    background: none; border: none; cursor: pointer;
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
}
.win-panel { display: none; }
.win-panel.active { display: flex; flex-direction: column; gap: 12px; animation: fade 120ms ease-out; }

/* Two menu columns of groups. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sep { height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.note { color: var(--text-dim); line-height: 14px; }
.dim { color: var(--text-dim); }
.good { color: var(--good); }
.win .mono { font: 400 10px/14px "TahomaPx10", var(--f-sans); color: var(--text-dim); overflow-wrap: anywhere; }
.win a.link { color: #e8e8e8; text-decoration: underline; text-decoration-color: var(--field-hot); }

/* Label left, value right: a menu row. */
.kv-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 16px;
    color: #b8b8b8;
}
.kv-row > :last-child { color: #e8e8e8; text-align: right; min-width: 0; }

.prof { display: flex; align-items: center; gap: 10px; }
.prof-name { font-weight: 700; color: #e8e8e8; }
.prof-sub { margin-top: 4px; color: var(--text-dim); }
.win .avatar-lg { width: 36px; height: 36px; }
.win .avatar-lg.avatar-fallback { font: 700 20px/1 "TahomaPx10", var(--f-sans); color: #b8b8b8; }
.win .avatar-empty { border-style: dashed; border-color: var(--line); box-shadow: none; background: var(--field); }

/* Game rows: icon, name + status, days on the right. */
.game-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 24px; }
.game-row + .game-row { border-top: 1px solid var(--line); padding-top: 8px; }
.game-row img { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
.game-row .name { font-weight: 700; color: #e8e8e8; }
.game-row .sub { margin-top: 3px; color: var(--text-dim); }
.game-row .days { font-weight: 700; color: var(--good); }
.game-row .days span, .game-row .cost span { font-weight: 400; color: var(--text-dim); }
.game-row.expired .days { color: var(--danger); }
.game-row.none img { filter: grayscale(1) opacity(0.45); }
.game-row.none .name { color: #b8b8b8; }
.game-row.none .days { color: var(--text-faint); }
.game-row.price { grid-template-columns: 20px minmax(0, 1fr) auto 120px; gap: 12px; }
.game-row.price.none img { filter: none; }
.game-row .cost { font-weight: 700; color: #e8e8e8; white-space: nowrap; }
.game-row .cost s { font-weight: 400; color: var(--text-faint); margin-right: 4px; }
.game-row .sub .sale { color: var(--good); }

.btn-row { display: flex; gap: 4px; }
.btn-row.end { justify-content: flex-end; }
.btn.grow { flex: 1; }
.btn.danger { color: var(--danger); }
.sub-line { display: flex; flex-direction: column; gap: 6px; }
.sub-edit { display: flex; align-items: center; gap: 4px; }
.win .sub-edit input[type=number] { flex: 1; text-align: left; }
.win .sub-edit select { width: 80px; flex: 0 0 80px; }
.sub-edit .btn { width: 72px; }
.sub-line + .sub-line { border-top: 1px solid var(--line); padding-top: 8px; }
.btn[disabled] { pointer-events: none; color: var(--text-faint); background: var(--field); }
.btn.disabled { pointer-events: none; color: var(--text-faint); background: var(--field); }
.btn.disabled.good { color: var(--good); }

/* Desk: a menu window over the landing backdrop, page scrolls. */
body.desk { background: #000; }
body.desk::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at 50% 40%, #182334 0%, #0b1424 55%, #04060a 100%);
}
body.desk .inner { padding: 0; display: flex; flex-direction: column; }
.desk-wrap { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; }
.dash-win { width: 760px; max-width: 100%; }
.modal-win { width: 320px; max-width: 100%; }

@media (max-width: 720px) {
    .cols { grid-template-columns: minmax(0, 1fr); }
    .game-row.price { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .game-row.price .btn { grid-column: 1 / -1; }
    .desk-wrap { padding: 16px; }
}

/* Auth: a menu window floating over the landing backdrop. */
.auth-wrap {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
}
.auth-win { width: 320px; max-width: 100%; }

/* ------------------------------------------------------------------ */
/*  2FA                                                               */
/* ------------------------------------------------------------------ */

.tfa-win { width: 320px; max-width: 100%; }
.tfa-qr { align-self: center; width: 160px; height: 160px; padding: 8px; background: #fff; }
.tfa-qr svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.codes span {
    padding: 4px 6px; text-align: center;
    background: var(--field); border: 1px solid var(--line);
    color: #e8e8e8; letter-spacing: 1px; user-select: all;
}
.tfa-secret {
    padding: 4px 6px;
    background: var(--field); border: 1px solid var(--line);
    color: #e8e8e8; letter-spacing: 1px;
    user-select: all; overflow-wrap: anywhere;
}

@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* The menu preview: the real menu, drawn into a canvas over the stage. */
.stage-menu {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    z-index: 3;
    outline: none;
}

.stage-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 1px;
}

/* The avatar picker's real input: hidden, the Choose label opens it. */
input[type=file].file-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.file-input:focus-visible + .btn { outline: 1px solid var(--accent); outline-offset: 1px; }

.modal {
    display: none;
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.65);
    align-items: center; justify-content: center;
    padding: 16px;
}

/* ------------------------------------------------------------------ */
/*  Admin — the same window, plus the menu's list, segments, tables   */
/* ------------------------------------------------------------------ */

.admin-win { width: 760px; max-width: 100%; }

/* Users | detail. */
.split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }

/* List: the menu's config list -- 16px rows, picked row lit. */
.list { display: flex; flex-direction: column; background: var(--field); border: 1px solid var(--line); max-height: 480px; overflow-y: auto; }
.list > a {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-height: 18px; padding: 0 6px;
    color: #b8b8b8;
}
.list > a:hover { background: var(--control); color: #e8e8e8; }
.list > a.sel { background: var(--control-hot); color: #fff; font-weight: 700; }
.list > a.banned .name { color: var(--text-faint); text-decoration: line-through; }
.list .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .meta { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.list .meta img { width: 10px; height: 10px; image-rendering: pixelated; display: block; }
.list .meta img.off { filter: grayscale(1) opacity(0.35); }
.list .empty { padding: 4px 6px; color: var(--text-faint); }

/* Segments: joined buttons, the picked one raised. */
.seg { display: flex; gap: 2px; flex-wrap: wrap; }
.seg > a, .seg > button {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    height: 20px; padding: 0 8px;
    background: var(--field);
    border: 1px solid var(--line);
    color: #828282;
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
    cursor: pointer;
    white-space: nowrap;
}
.seg > a:hover, .seg > button:hover { color: #e8e8e8; }
.seg > .active { background: var(--control-hot); border-color: var(--field-hot); color: #fff; }

/* Tags + status squares. */
.tg {
    display: inline-flex; align-items: center;
    height: 14px; padding: 0 5px;
    border: 1px solid var(--line);
    background: var(--field);
    color: var(--text-dim);
    font: 700 10px/1 "TahomaPx10", var(--f-sans);
    white-space: nowrap;
}
.tg.good   { color: var(--good);   border-color: rgba(110, 200, 140, 0.35); }
.tg.warn   { color: var(--warn);   border-color: rgba(230, 190, 110, 0.35); }
.tg.danger { color: var(--danger); border-color: rgba(235, 95, 95, 0.35); }
.sq { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--ring-outer); background: var(--field); vertical-align: middle; }
.sq.good   { background: var(--good); }
.sq.danger { background: var(--danger); }
.sq.on     { background: var(--accent); }
.warn { color: var(--warn); }
.danger-t { color: var(--danger); }

/* Tables at menu scale. */
.tbl-wrap { overflow: auto; max-height: 520px; border: 1px solid var(--line); background: var(--field); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { height: 18px; padding: 2px 6px; text-align: left; vertical-align: middle; white-space: nowrap; }
.tbl thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--control);
    border-bottom: 1px solid var(--line);
    color: #828282; font-weight: 700;
}
.tbl tbody td { border-bottom: 1px solid var(--line); color: #b8b8b8; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--group); color: #e8e8e8; }
.tbl td.wrap { white-space: normal; overflow-wrap: anywhere; }
.tbl td.mono, .tbl .mono { font: 400 10px/14px "TahomaPx10", var(--f-sans); color: var(--text-dim); }
.tbl tr.critical td { background: rgba(235, 95, 95, 0.07); }
.tbl a { color: #e8e8e8; text-decoration: underline; text-decoration-color: var(--field-hot); }

/* Form bits. */
.form-row { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.form-row > .fld { flex: 1 1 120px; }
.form-row > .fld.narrow { flex: 0 0 70px; }
.win input[type=number], .win select, .win textarea {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 20px; padding: 0 6px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 0; box-shadow: none;
    color: #e8e8e8;
    font: 400 10px/1 "TahomaPx10", var(--f-sans);
    outline: none;
}
.win input[type=number] { text-align: right; }
.win input[type=number].days { width: 60px; flex: 0 0 60px; }
.win select {
    padding-right: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%23828282' stroke-width='1.3'/></svg>");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 10px 10px;
}
.win textarea { height: auto; min-height: 80px; padding: 4px 6px; line-height: 14px; resize: vertical; }
.win input[type=number]:focus, .win select:focus, .win textarea:focus { border-color: var(--accent); }
.win textarea::placeholder { color: var(--text-faint); }

.code-big { font: 700 20px/1 "TahomaPx10", var(--f-sans); color: var(--accent); padding: 8px 10px; background: var(--field); border: 1px solid var(--line); user-select: all; }

/* Selected user header. */
.who-head { display: flex; align-items: center; gap: 10px; }
.who-head .tags { margin-left: auto; display: flex; gap: 4px; }

/* Load-session logs. */
.log-head { display: flex; align-items: center; gap: 6px; min-height: 16px; color: var(--text-dim); flex-wrap: wrap; }
.log-pre {
    margin: 4px 0 0; padding: 4px 6px;
    background: var(--field); border: 1px solid var(--line);
    color: var(--text-dim);
    overflow-x: auto; max-height: 260px;
}
/* One event per row, fixed columns so the fields line up in a proportional font. */
.log-line { display: grid; grid-template-columns: 90px 40px 50px 110px minmax(0, 1fr); gap: 8px; min-height: 14px; align-items: baseline; }
.log-line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-line > span:last-child { white-space: normal; overflow-wrap: anywhere; }
.log-line.lvl-warn  { color: var(--warn); }
.log-line.lvl-error { color: var(--danger); }
.log-line.lvl-good  { color: var(--good); }
.log-one + .log-one { margin-top: 8px; }
.grp-box.scroll { max-height: 480px; overflow-y: auto; display: block; }

/* HV counts. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--field); border: 1px solid var(--line); }
.stat .n { font: 700 20px/1 "TahomaPx10", var(--f-sans); color: var(--text-faint); }
.stat .k { color: var(--text-dim); }
.stat.ok .n { color: var(--good); }
.stat.warn .n { color: var(--warn); }
.stat.critical { border-color: rgba(235, 95, 95, 0.45); background: rgba(235, 95, 95, 0.06); }
.stat.critical .n, .stat.critical .k { color: var(--danger); }

[data-seg-panel] { display: none; flex-direction: column; gap: 12px; }
[data-seg-panel].active { display: flex; }

@media (max-width: 720px) {
    .sub-edit { flex-wrap: wrap; }
    .win .sub-edit input[type=number] { flex: 1 1 100%; }
    .sub-edit .btn { flex: 1; width: auto; }
    .land-games { flex-wrap: wrap; gap: 8px; }
    .land-game { padding: 8px; }
    .split { grid-template-columns: minmax(0, 1fr); }
    .stats { grid-template-columns: minmax(0, 1fr); }
}

/* Menu-kit chrome at 200%: Tahoma Px10 is pixel-exact only at whole multiples
   of 10px, so the site scales the whole kit (lines too) by 2, like the menu's
   own 200% size. Narrow screens keep 100%. */
@media (min-width: 1560px) {
    .topbar, .win { zoom: 2; }
}

/* Site footer -- Terms + Privacy links and copyright. Appears below the main
   content on every page the base template renders. Styled quiet so the current
   page stays the focus. */
.footer {
    max-width: 820px;
    margin: 24px auto 20px auto;
    padding: 12px 16px 0 16px;
    text-align: center;
    color: var(--text-faint);
    font-size: 11px;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--line);
    opacity: 0.75;
}
.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 0 6px;
}
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-sep { color: var(--text-faint); }
.footer-copy { margin-top: 4px; }
body.desk .footer { color: var(--text-dim); opacity: 0.6; }