:root{
  --magenta:#FF2E7E; --sunset:#FF7A3D; --gold:#FFC24D; --aqua:#2DE6DE; --violet:#8A5CFF;
  --good:#35D07F; --warn:#FFB020; --crit:#FF4D5E;
  --night:#0B0711; --panel:#140D1F; --panel2:#1B1329; --line:#2A1E3D;
  --ink:#F4ECFB; --haze:#C6B6DA; --mute:#8B7BA6;
  --grad:linear-gradient(90deg,#FF2E7E,#FF7A3D,#FFC24D);
  --glow:0 0 24px rgba(255,46,126,.35);
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{ --night:#FBF3EC; --panel:#FFFFFF; --panel2:#FFF7F1; --line:#F0DFD4;
         --ink:#1A1020; --haze:#5A4A66; --mute:#8A7A96; --glow:0 0 18px rgba(255,46,126,.22); }
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--night);color:var(--ink);font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
#app{max-width:960px;margin:0 auto;padding:16px 20px 60px}
a{color:var(--aqua)} button{font:inherit}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.nav .logo{font-family:"Arial Black",system-ui;font-weight:900;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}
.nav a.item{color:var(--haze);text-decoration:none;font-weight:600} .nav a.item.active{color:var(--ink)}
.nav .spacer{flex:1} .nav .who{color:var(--mute);font-size:13px}
.btn{display:inline-block;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
     padding:9px 16px;border-radius:10px;cursor:pointer;text-decoration:none;font-weight:600}
.btn.primary{border:0;background:var(--grad);color:#0B0711;box-shadow:var(--glow)}
.btn.danger{border-color:var(--crit);color:var(--crit);background:transparent}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
/* WCAG 2.4.7 (focus visible) + 1.4.11 (non-text contrast). Several controls here sit on --grad or on
   --crit, where the browser's default focus ring is nearly invisible; --aqua reads at high contrast on
   every one of these backgrounds in both themes. The offset keeps the ring off the button's own border
   so it stays legible on the outlined .btn.danger too. :focus-visible (not :focus) so a mouse click
   doesn't leave a ring behind, while keyboard users always get one.
   Sets ONLY outline properties: an earlier version also set border-radius, which silently reshaped
   whatever happened to be focused (a nav link, a .card button) for as long as it held focus. The
   outline follows each element's own radius anyway, so it was never needed. */
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
a:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
/* color:var(--ink) is load-bearing: a `button.card` (the new-server game picker) otherwise renders the
   browser default dark button text on the dark panel — a WCAG contrast failure. --ink on --panel is ~15:1. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700}
.chip.running{background:var(--good);color:#04170d} .chip.stopped{background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
/* Smart Pause: dark text on a bright fill (same recipe as .chip/.banner.warn above) so the pill reads
   at ~11:1 contrast in both themes — never white/light text on these light fills. */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.parked{background:var(--gold);color:#241600}
.pill.restoring{background:var(--aqua);color:#04211f}
/* "Pausing…" — the park is decided but the snapshot is not yet confirmed durable. Deliberately NOT the
   same gold as .parked: those two say different things about where the customer's world is, and the
   words differ too ("Pausing…" vs "Paused to save credits"), so the distinction never rests on colour. */
.pill.pending{background:var(--warn);color:#241600}
.banner{border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-weight:600}
.banner.warn{background:var(--warn);color:#241600}
.hero{text-align:center;padding:70px 0}
.hero h1{font-family:"Arial Black",system-ui;font-weight:900;font-size:40px;margin:0 0 8px;
         background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--haze);margin:0 0 26px}
.stat{display:flex;gap:22px;color:var(--haze);font-size:13px;margin-bottom:18px}
.stat b{color:var(--ink);font-size:16px;display:block}
.field{margin-bottom:14px} .field label{display:block;color:var(--haze);font-size:13px;margin-bottom:4px}
/* textarea joins input/select here for A-13's ticket form — same box, same focus ring (the
   :focus-visible rule above already names textarea), so a support message field does not read as a
   different kind of control from every other field on the site. */
.field input,.field select,.field textarea{width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
                           background:var(--panel2);color:var(--ink);font:inherit}
table.ledger{width:100%;border-collapse:collapse;font-size:14px}
table.ledger td,table.ledger th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
table.ledger td.amt{text-align:right;font-variant-numeric:tabular-nums}
.amt.pos{color:var(--good)} .amt.neg{color:var(--haze)}
.muted{color:var(--mute)} .mono{font-family:ui-monospace,Consolas,monospace}
/* Read-only log tail. Scrolls in BOTH axes inside itself so a long line never makes the page scroll
   sideways, and is focusable (tabindex=0 in app.js) so it can be scrolled from the keyboard — a
   scrollable region that only a mouse can reach is WCAG 2.1.1. --ink on --panel2 is ~13:1. */
.logbox{max-height:340px;overflow:auto;margin:10px 0 0;padding:10px 12px;white-space:pre;
        background:var(--panel2);border:1px solid var(--line);border-radius:10px;
        color:var(--ink);font-size:12px;line-height:1.45}
.connect{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);
         border-radius:10px;padding:9px 12px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
       border:1px solid var(--line);border-radius:10px;padding:10px 18px;box-shadow:var(--glow)}

/* K-01 customer help. Two columns on a wide screen, stacked on a phone. The body is rendered from our
   own markdown, so it needs the plain prose defaults the rest of this app never uses. */
.help-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.help-layout > .card:first-child a { display: block; padding: 4px 0; }
.help-layout > .card:first-child a.active { font-weight: 800; }
.help-body { line-height: 1.65; max-width: 72ch; }
.help-body h1 { font-size: 26px; margin: 0 0 14px; }
.help-body h2 { font-size: 18px; margin: 26px 0 8px; }
.help-body p, .help-body li { color: inherit; }
.help-body ul { padding-left: 20px; }
.help-body table { border-collapse: collapse; margin: 14px 0; }
.help-body th, .help-body td { border: 1px solid rgba(128,128,128,0.3); padding: 6px 12px; text-align: left; }
.help-body td:not(:first-child) { font-variant-numeric: tabular-nums; text-align: right; }
.help-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
@media (max-width: 720px) { .help-layout { grid-template-columns: 1fr; } }