/* EVENUS - modern dark + crimson brand theme. Plain CSS, no framework. */

:root {
    --bg:          #0e0c12;
    --bg-2:        #141018;
    --panel:       #1c1822;
    --panel-2:     #241e2c;
    --panel-hi:    #2c2535;
    --border:      #3a3240;
    --border-hi:   #504456;
    --text:        #ece6dc;
    --text-dim:    #a8a0b0;
    --text-faint:  #6e6878;
    --accent:      #c64646;
    --accent-hi:   #dc5c5c;
    --accent-dim:  #7a2e34;
    --accent-bg:   #351b1f;
    --ok:          #65c070;
    --ok-bg:       #192e1d;
    --err:         #e05858;
    --err-bg:      #2c1618;
    --warn:        #d4a040;
    --warn-bg:     #2a2214;
    --mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius:      10px;
    --radius-sm:   6px;
    --shadow-1:    0 1px 2px rgba(0,0,0,.4);
    --shadow-2:    0 8px 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    min-height: 100vh;
    background: var(--bg);
    background-image:
        radial-gradient(1200px 500px at 50% -200px, rgba(198,70,70,.08), transparent),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment: fixed;
    color: var(--text);
    font: 14px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--text); }

/* ---------- Header ---------- */
header {
    padding: 12px 28px;
    background: rgba(28, 24, 34, .72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 10;
}
header .brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
}
header .brand img {
    width: 28px; height: 28px; display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
header .brand .brand-text {
    font-weight: 700; letter-spacing: .18em; font-size: 15px;
    color: var(--text);
}
header .brand .brand-text b { color: var(--accent); }
header nav { display: flex; align-items: center; gap: 4px; }
header nav a,
header nav button.link {
    padding: 8px 12px;
    color: var(--text-dim); text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500; font-size: 13px;
    transition: color .15s, background .15s;
}
header nav a:hover,
header nav button.link:hover { color: var(--text); background: var(--panel-hi); }
header nav .me {
    color: var(--text-faint); font-size: 12px;
    padding: 0 8px; border-left: 1px solid var(--border); margin-left: 6px;
}

/* ---------- Layout ---------- */
main {
    max-width: 1100px; margin: 32px auto 48px; padding: 0 28px;
}

footer {
    margin-top: 64px; padding: 20px 28px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-faint); font-size: 12px;
}

/* ---------- Headings ---------- */
h1 {
    margin: 0 0 20px; font-size: 24px; font-weight: 700;
    letter-spacing: -.01em;
}
h2 {
    margin: 28px 0 12px; font-size: 11px;
    color: var(--text-faint); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
h3 {
    margin: 0 0 8px; font-size: 15px; font-weight: 600;
    color: var(--text);
}

/* ---------- Cards ---------- */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 20px 22px; margin: 0 0 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.card.compact { padding: 16px 18px; }

.card label { display: block; margin: 12px 0 10px; font-size: 13px; color: var(--text-dim); }
.card input,
.card select,
.card textarea {
    display: block; width: 100%; max-width: 420px;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-size: 14px;
    transition: border-color .15s, background .15s;
}
.card input:focus,
.card select:focus,
.card textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--panel-hi);
}

/* ---------- Buttons ---------- */
button, .btn {
    background: var(--accent); color: white; border: 0;
    padding: 10px 18px; border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; font-size: 13px;
    cursor: pointer;
    transition: background .15s, transform .05s;
    line-height: 1.2;
}
button:hover, .btn:hover { background: var(--accent-hi); }
button:active, .btn:active { transform: translateY(1px); }

button.ghost,
.btn.ghost {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--border);
}
button.ghost:hover,
.btn.ghost:hover { color: var(--text); border-color: var(--border-hi); background: var(--panel-hi); }

button.link {
    background: transparent; color: var(--accent-hi); padding: 4px 8px;
    font-weight: 500;
}
button.link:hover { color: var(--text); background: var(--panel-hi); border-radius: 4px; }

button.danger { background: var(--err); }
button.danger:hover { background: #ec6868; }

/* ---------- Data table ---------- */
table.data {
    width: 100%; border-collapse: collapse; margin: 0;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-1);
}
table.data th, table.data td {
    padding: 11px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
table.data th {
    background: var(--panel-2); color: var(--text-faint);
    font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .1em;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--panel-2); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions form { display: inline; }

/* ---------- Badges & chips ---------- */
.badge {
    display: inline-block;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
}
.badge.ok    { background: var(--ok-bg);     color: var(--ok); }
.badge.err   { background: var(--err-bg);    color: var(--err); }
.badge.warn  { background: var(--warn-bg);   color: var(--warn); }
.badge.muted { background: var(--panel-2);   color: var(--text-faint); }

.status-active    { color: var(--ok); font-weight: 600; }
.status-pending   { color: var(--ok); font-weight: 600; }
.status-used      { color: var(--text-faint); }
.status-revoked   { color: var(--err); font-weight: 600; }
.status-expired   { color: var(--warn); font-weight: 600; }

/* ---------- Misc text ---------- */
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }

code {
    background: var(--panel-2); padding: 2px 7px; border-radius: 4px;
    font-family: var(--mono); font-size: 12.5px;
    border: 1px solid var(--border);
}

.ok  {
    background: var(--ok-bg); border: 1px solid rgba(101,192,112,.35);
    color: #b8e8c0; padding: 12px 16px; border-radius: var(--radius-sm);
    margin: 0 0 16px;
}
.err {
    background: var(--err-bg); border: 1px solid rgba(224,88,88,.35);
    color: #f4c4c4; padding: 12px 16px; border-radius: var(--radius-sm);
    margin: 0 0 16px;
}

/* ---------- Stat tiles (admin landing) ---------- */
.stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin: 0 0 24px;
}
.stat {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.stat .lbl {
    font-size: 11px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.stat .val {
    margin-top: 4px; font-size: 26px; font-weight: 700;
    color: var(--text); letter-spacing: -.01em;
}
.stat.accent .val { color: var(--accent-hi); }

/* ---------- Landing (pre-login) ---------- */
.landing {
    text-align: center;
    padding: 36px 20px 48px;
}
.landing .logo {
    width: 86px; height: 86px;
    margin: 0 auto 18px;
    filter: drop-shadow(0 8px 20px rgba(198,70,70,.35));
    transform-origin: 50% 50%;
    animation: evenus-flutter 2.4s ease-in-out infinite;
    will-change: transform;
}

/* Fluttering butterfly. CSS can't blend transforms from two animations
   (second one overrides) so flap + bob are composed into one keyframe.
   Period is a 3-beat loop: flap down, flap up at apex, flap down back.
   Each flap is a scaleX squeeze; the vertical offset drifts gently
   up and back down across the whole 2.4s so the motion reads as
   actual flight rather than a jittery pulse. */
@keyframes evenus-flutter {
    0%   { transform: translateY(0px)  scaleX(1);    }
    12%  { transform: translateY(-2px) scaleX(0.72); }
    25%  { transform: translateY(-5px) scaleX(1);    }
    37%  { transform: translateY(-7px) scaleX(0.72); }
    50%  { transform: translateY(-8px) scaleX(1);    }
    62%  { transform: translateY(-7px) scaleX(0.72); }
    75%  { transform: translateY(-5px) scaleX(1);    }
    87%  { transform: translateY(-2px) scaleX(0.72); }
    100% { transform: translateY(0px)  scaleX(1);    }
}

/* CS2 display-mode warning. The overlay can't draw over CS2's exclusive
   fullscreen swap chain, so the one piece of setup the user has to do
   correctly is the display mode. This banner sits right under the
   "download loader.exe" card and pulses a slow crimson so a user
   skimming the dashboard reads it before clicking download.
   Keep the pulse SLOW (1.6s cycle) -- a snappier pulse reads as a
   flashing error, not a reminder, and we don't want to look like a
   bug tracker. */
.cs2-mode-warning {
    display: block;
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--accent-bg);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    color: var(--accent-hi);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-align: center;
    animation: evenus-pulse-warn 1.6s ease-in-out infinite;
    will-change: opacity, text-shadow;
}
@keyframes evenus-pulse-warn {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(220, 92, 92, 0.55);
    }
    50% {
        opacity: 0.55;
        text-shadow: 0 0 2px rgba(220, 92, 92, 0.1);
    }
}

/* Small header butterfly flutters quietly too -- it's tiny but the
   motion catches the eye enough to anchor the brand. Half the flap
   depth so it doesn't distract. */
header .brand img {
    transform-origin: 50% 50%;
    animation: evenus-flutter-mini 1.1s ease-in-out infinite;
    will-change: transform;
}
@keyframes evenus-flutter-mini {
    0%, 100% { transform: scaleX(1);    }
    50%      { transform: scaleX(0.85); }
}
.landing h1 {
    font-size: 40px; font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
}
.landing h1 .accent { color: var(--accent); }
.landing .tag {
    font-size: 15px; color: var(--text-dim);
    max-width: 540px; margin: 0 auto 26px;
    line-height: 1.6;
}
.landing .cta {
    display: inline-flex; gap: 10px; margin: 0 0 40px;
}
.landing .cta .btn {
    padding: 12px 22px; font-size: 14px;
}
.features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; max-width: 820px; margin: 0 auto;
    text-align: left;
}
.feature {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow-1);
}
.feature .h {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 14px; color: var(--text);
    margin-bottom: 6px;
}
.feature .h .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}
.feature p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* ---------- Auth card (login / register) ---------- */
.auth-wrap {
    max-width: 380px; margin: 40px auto 0;
}
.auth-wrap h1 {
    text-align: center; margin: 0 0 20px;
}
.auth-wrap .card { padding: 24px 22px; }
.auth-wrap .card input { max-width: none; }
.auth-wrap .card button[type=submit] { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }
.auth-wrap .alt { text-align: center; margin: 16px 0 0; font-size: 13px; }

/* ---------- Grouped admin sections ---------- */
.section {
    display: grid; grid-template-columns: 200px 1fr; gap: 24px;
    margin: 0 0 32px;
}
.section .section-head h2 { margin: 0 0 4px; }
.section .section-head p { margin: 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.5; }
.section .section-body { min-width: 0; }

@media (max-width: 760px) {
    .section { grid-template-columns: 1fr; gap: 10px; }
    main { padding: 0 16px; }
    header { padding: 12px 16px; }
}

/* Collapsible details for noisy sections like activation logs. */
details.collapsible {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); margin: 0 0 20px;
}
details.collapsible > summary {
    list-style: none; cursor: pointer;
    padding: 14px 18px;
    font-weight: 600; font-size: 13px;
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: space-between;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary:hover { color: var(--text); }
details.collapsible > summary::after {
    content: '▸';
    color: var(--text-faint);
    transition: transform .15s;
}
details.collapsible[open] > summary::after { transform: rotate(90deg); }
details.collapsible > div { padding: 0 0 14px; }
details.collapsible > div table.data {
    border: 0; border-top: 1px solid var(--border);
    border-radius: 0;
}

/* =============================================================
   Admin page toolbox: search, pagination, KILL button.
   ============================================================= */

/* Search input that sits above a table. Minimal, matches the dark
   theme, keyboard-grabbable (tab, type, auto-filter). */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}
.search-box input {
    flex: 1;
    max-width: 420px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elev);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}
.search-box input::placeholder { color: var(--text-dim); }
.search-box .hint {
    font-size: 12px;
    color: var(--text-dim);
}

/* Paginator strip under a table. Simple prev / "N–M of T" / next row. */
.paginator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 10px 0 0;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-dim);
}
.paginator .pg-info { min-width: 10ch; text-align: center; }
.paginator .pg-btn {
    background: transparent;
    color: var(--accent-hi);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.paginator .pg-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text);
}
.paginator .pg-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* KILL button. For irreversible-feeling "take this out" actions:
   KILL a build, DELETE an invite, BAN a user. Red fill, uppercase,
   with a subtle hammer glyph before the label so it reads as
   decisive at a glance. */
button.kill, .btn-kill {
    background: var(--err);
    color: #fff;
    border: 0;
    padding: 5px 12px 5px 9px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.1s, transform 0.05s;
}
button.kill:hover, .btn-kill:hover {
    background: #ec6868;
}
button.kill:active, .btn-kill:active {
    transform: translateY(1px);
}
button.kill::before, .btn-kill::before {
    content: "\2692"; /* HAMMER ⚒ */
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
}

/* Softer ghost-kill for lower-stakes removals where red is too loud. */
button.kill-soft {
    background: transparent;
    color: var(--err);
    border: 1px solid var(--err);
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
button.kill-soft:hover {
    background: rgba(218, 70, 70, 0.08);
}

/* Build status badges, for the admin builds page. */
.badge.revoked    { background: rgba(218, 70, 70, 0.14);  color: var(--err); }
.badge.deprecated { background: rgba(212, 160, 64, 0.14); color: var(--warn); }

/* Suspicious-leak highlight: amber left-border on rows where
   unique_hwid_count is suspiciously large relative to seen_count. */
tr.leak-flag td:first-child { border-left: 3px solid var(--warn); padding-left: 11px; }

/* ===========================================================
   Responsive wide-table scroll. Each admin table (invites,
   builds, users, logs) has 8-10 columns which overflow a 4:3
   or narrow display. Wrapping in .table-wrap gives a
   horizontal scrollbar on narrow screens without clipping any
   column. Full width restored on wider viewports.
   =========================================================== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elev);
    margin: 0 0 8px;
}
.table-wrap > table {
    margin: 0;
    border: 0;
    min-width: 760px; /* keeps columns readable; wrapper scrolls */
}
/* cancel the outer-border on nested tables since the wrap has one */
.table-wrap > table.data { background: transparent; }

/* Inline extend-license control -- compact select+button pair
   that fits in a per-row action cell without wrapping on 4:3. */
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px 0 0;
}
.inline-form select {
    padding: 2px 6px;
    font-size: 11px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: inherit;
}
.inline-form select:focus {
    outline: none;
    border-color: var(--accent);
}
.inline-form button {
    padding: 3px 8px;
    font-size: 11px;
    background: var(--accent-bg);
    color: var(--accent-hi);
    border: 1px solid var(--accent);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
}
.inline-form button:hover {
    background: var(--accent);
    color: #fff;
}

/* Status pills for license key states */
.pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; }
.pill-active   { background: rgba(120,200,120,0.14); color: var(--ok); }
.pill-revoked  { background: rgba(218,70,70,0.14);   color: var(--err); }
.pill-expired  { background: rgba(212,160,64,0.14);  color: var(--warn); }

/* Build status badge: 'degraded' sits between 'active' (green) and
   'revoked' (red). Amber-orange so admin can tell at a glance that a
   build is silently sabotaged without being hard-blocked. */
.badge.degraded {
    background: rgba(212,160,64,0.18);
    color: var(--warn);
    border: 1px solid rgba(212,160,64,0.35);
}

/* =============================================================
   Themed form controls: <select> + <input> + <textarea>.
   Browser-default blue focus rings and OS-grey dropdown chrome
   don't belong on a dark crimson site, so we repaint them.
   Rules:
     - appearance:none on every select so the UA arrow goes away
     - a hand-drawn crimson chevron via SVG background-image
     - crimson focus rings matching .search-box
     - open <option> list inherits the dark panel colour on
       browsers that honour it (Chromium 119+, Firefox 115+).
       Safari still paints the OS list; nothing we can do.
   ============================================================= */
select,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    background: var(--panel-2, var(--bg-2));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c64646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
}
select:hover,
input:hover,
textarea:hover { border-color: var(--border-hi); }
select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
    background-color: var(--panel-hi, var(--panel-2));
}
select option,
select optgroup {
    background: var(--panel);
    color: var(--text);
}
select:disabled,
input:disabled,
textarea:disabled { opacity: .55; cursor: not-allowed; }

/* =============================================================
   Scrollbar skin: dark track, crimson thumb. Applies globally
   plus the .table-wrap horizontal scroller.
   ============================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) var(--panel);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: var(--panel);
}
::-webkit-scrollbar-track {
    background: var(--panel);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--accent-dim);
    border: 2px solid var(--panel);
    border-radius: 6px;
    min-height: 32px;
    min-width: 32px;
}
::-webkit-scrollbar-thumb:hover    { background: var(--accent); }
::-webkit-scrollbar-thumb:active   { background: var(--accent-hi); }
::-webkit-scrollbar-corner         { background: var(--panel); }
.table-wrap::-webkit-scrollbar     { height: 10px; }

/* =============================================================
   Language picker: three tiny crimson pills in the top-right nav,
   current language has a filled accent, others are ghost-outlined.
   ============================================================= */
.lang-picker {
    display: inline-flex;
    gap: 2px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}
.lang-picker form { margin: 0; }
.lang-pill {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color .12s, background .12s, border-color .12s;
}
.lang-pill:hover {
    color: var(--text);
    border-color: var(--border-hi);
}
.lang-pill-active {
    background: var(--accent-bg);
    color: var(--accent-hi);
    border-color: var(--accent);
}
.lang-pill-active:hover { color: #fff; background: var(--accent); }

/* =============================================================
   Admin site-mode row: shows the current registration state with
   a coloured dot and offers the inverse-mode toggle button.
   ============================================================= */
.mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
}
.mode-current {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; flex-wrap: wrap;
}
.mode-current .mode-dot {
    width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.mode-current.invite { color: var(--warn); }
.mode-current.open   { color: var(--ok); }
.mode-current.invite .mode-dot { background: var(--warn); }
.mode-current.open   .mode-dot { background: var(--ok); }

/* =============================================================
   Register-page status banner. Orange on invite-only, green when
   registration is open to anyone (promo push). Full-width above
   the form, tappable on phones, readable at 4:3.
   ============================================================= */
.reg-banner {
    display: block;
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
.reg-banner strong { display: block; font-size: 14px; margin-bottom: 2px; }
.reg-banner.invite {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn);
    box-shadow: 0 0 0 1px rgba(212,160,64,.15) inset;
}
.reg-banner.open {
    color: var(--ok);
    background: var(--ok-bg);
    border-color: var(--ok);
    box-shadow: 0 0 0 1px rgba(101,192,112,.15) inset;
}

/* =============================================================
   FAQ page: Q&A layout. Hand-written content, kept legible on
   4:3 and phones without column shrinkage.
   ============================================================= */
.faq-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 0; }
.faq-q {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 6px;
}
.faq-a {
    color: var(--text-dim);
    max-width: 720px;
    line-height: 1.6;
}
.faq-a strong { color: var(--text); font-weight: 600; }
.faq-a a { color: var(--accent-hi); }