/* NEO-Arena · the cotrugli.tech design language, one file for every surface.
 *
 * Tokens are the shop-window exhibit's (cotrugli-tech-home/arena), light-first with the
 * same dark variant, so the arena and the mothership read as one house. The consoles'
 * markup keeps its Tailwind utility classes; the `body .` selectors below out-rank the
 * CDN's generated rules (descendant > bare class), so colours flow from the tokens here
 * without touching the markup.
 */
:root {
  --navy:#1B2A4A; --navy-2:#22304f; --gold:#8C6A2F; --gold-lite:#d9b06a;
  --paper:#f7f6f3; --card:#ffffff; --ink:#1c1c1e; --muted:#6b6b70;
  --line:rgba(27,42,74,.14); --settle:#1E7F4F; --refuse:#B3392E;
  --chip-bg:#eef0f4; --chip-ink:#39415a;
}
@media (prefers-color-scheme:dark){
  :root{
    --navy:#0f1626; --navy-2:#141d31; --gold:#c79a52; --gold-lite:#e6bd6f;
    --paper:#0b0f17; --card:#131a28; --ink:#e7e9ee; --muted:#9aa2b4;
    --line:rgba(255,255,255,.10); --settle:#4CC38A; --refuse:#e5766c;
    --chip-bg:#1c2536; --chip-ink:#c3cad9;
  }
}

body { background:var(--paper); color:var(--ink);
       font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.mono { font-family:ui-monospace,"SF Mono",Menlo,monospace; }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.step { border:1px solid var(--line); border-radius:10px; padding:1rem; background:var(--card); }

input, select, textarea {
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:.4rem .6rem; color:var(--ink); width:100%;
}
input::placeholder, textarea::placeholder { color:var(--muted); }

.btn { background:var(--gold-lite); color:var(--navy); padding:.45rem .9rem; font-weight:700;
       border-radius:8px; letter-spacing:.04em; }
.btn:hover { background:var(--gold); color:#fff; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost { background:var(--chip-bg); color:var(--chip-ink); padding:.4rem .8rem;
             border-radius:8px; font-weight:600; }
.btn-ghost:hover { background:var(--line); }

.lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
       color:var(--gold); margin-bottom:.2rem; font-weight:700; }
.hint { font-size:.75rem; color:var(--muted); margin-top:.25rem; }

/* Tailwind utility overrides — semantic, not cosmetic:
 * gray → muted ink · green → settled · amber → gated/pending · red → refused.
 * The dark-theme utilities in the markup were designed on #0b0f17; on paper they
 * flow from the same tokens, and in the dark variant they return to type. */
body .text-gray-200, body .text-gray-300 { color:var(--ink); }
body .text-gray-400, body .text-gray-500 { color:var(--muted); }
body .text-gray-600, body .text-gray-700 { color:var(--muted); opacity:.8; }
body .text-green-400, body .text-emerald-400 { color:var(--settle); }
body .text-amber-400 { color:var(--gold); }
body .text-red-400, body .text-red-300 { color:var(--refuse); }
body .text-blue-400 { color:var(--navy-2); }
@media (prefers-color-scheme:dark){ body .text-blue-400 { color:#8fb3e8; } }
body .bg-gray-900, body .bg-gray-900\/60 { background:var(--chip-bg); }
body .border-gray-800 { border-color:var(--line); }

/* scrollbars, shared */
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }