/* ============================================================================
   QUBEE DESIGN SYSTEM — Color & Type Foundations
   Live trivia platform · cinematic dark UI · esports-broadcast HUD styling
   Extracted from "Qubee App UI.fig" (mobile player app, host platform, live screens)
   ----------------------------------------------------------------------------
   Load order in HTML:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Archivo+Black&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================================ */

/* ----------------------------------------------------------------------------
   BRAND DISPLAY FONT — self-hosted. BBH Hegarty is the licensed display face.
   Path is relative to this CSS file (project root). From preview/ cards the
   same family resolves via this @font-face, so no per-card path is needed.
   ---------------------------------------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------------
     BASE COLOR PALETTE — the foundation is black, not "dark gray"
     --------------------------------------------------------------------------- */
  --q-black:        #0D0B0C;   /* rgb(13,11,12)  — true app background, "Qubee black" */
  --q-ink:          #000000;   /* pure black — TV/live screen base, deepest wells   */
  --q-surface-1:    #151314;   /* rgb(21,19,20)  — raised surface / sheet            */
  --q-surface-2:    #1B191A;   /* rgb(27,25,26)  — input wells, list rows            */
  --q-surface-3:    #242223;   /* rgb(36,34,35)  — cards, keypad keys, chips         */
  --q-surface-4:    #2D3436;   /* rgb(45,52,54)  — elevated/active surface           */
  --q-host-panel:   #0A0A0A;   /* rgb(10,10,10)  — host stage / question canvas      */
  --q-host-rail:    #0E1013;   /* rgb(14,16,19)  — host sidebar rail                 */

  /* Borders & hairlines — barely-there, 1px, never heavy */
  --q-border:       #2C2729;   /* rgb(44,39,41)  — default card / input border       */
  --q-border-cool:  #232122;   /* rgb(35,33,34)  — cooler hairline on panels         */
  --q-border-host:  #222321;   /* rgb(34,35,33)  — host panel border                 */
  --q-border-faint: rgba(255,255,255,0.27); /* pill / outline chrome                 */

  /* ---------------------------------------------------------------------------
     TEXT COLORS
     --------------------------------------------------------------------------- */
  --q-fg1:          #FFFFFF;              /* primary text, big display              */
  --q-fg2:          rgba(255,255,255,0.6);/* secondary / placeholder                */
  --q-fg3:          #8A8A8A;              /* rgb(138,138,138) utility labels         */
  --q-fg4:          #777986;              /* rgb(119,121,134) muted metadata         */
  --q-fg-dim:       #4E4D4E;              /* rgb(78,77,78) disabled / ghost          */
  --q-on-accent:    #0D0B0C;              /* text/number sitting ON a bright accent  */

  /* ---------------------------------------------------------------------------
     BRAND & SEMANTIC ACCENTS — every color carries one job. Never decorative.
     --------------------------------------------------------------------------- */
  --q-cyan:         #00F9FF;   /* rgb(0,249,255)  — PLAYER IDENTITY · LOCK-IN · standard mode · select · brand mark */
  --q-yellow:       #FFE000;   /* rgb(255,224,0)  — REWARDS · timers · highlights (NOT reveal)     */
  --q-yellow-alt:   #FFE005;   /* rgb(255,224,5)  — yellow used in glows                          */
  --q-red:          #D81D1D;   /* rgb(216,29,29)  — RISK MODE · INCORRECT reveal · penalties        */
  --q-orange:       #FF5E00;   /* rgb(255,94,0)   — STREAK FLAMES · rank-down · heat                */
  --q-green:        #00FF67;   /* rgb(0,255,103)  — CORRECT reveal · points won · rank-up · live    */
  --q-magenta:      #CC1BD1;   /* rgb(204,27,209) — BOOST MODE atmosphere                          */

  /* Tints for fills behind bright accents (states, soft buttons) */
  --q-red-soft:     rgba(216,29,29,0.20);
  --q-green-soft:   rgba(0,255,103,0.14);
  --q-cyan-soft:    rgba(0,249,255,0.12);
  --q-yellow-soft:  rgba(255,224,0,0.76);

  /* ---------------------------------------------------------------------------
     MODE ATMOSPHERES — each game mode owns a radial-glow backdrop over q-black.
     Apply to a full-bleed layer behind content.
     STANDARD question mode is TEAL. BOOST is magenta. RISK is red.
     REVEAL is not a mode — it is a result state: CORRECT=green, INCORRECT=red.
     --------------------------------------------------------------------------- */
  --q-bg-standard: radial-gradient(115% 75% at 50% 8%, #0E6B6B 0%, #0A3636 42%, #0D0B0C 80%);
  --q-bg-boost:    radial-gradient(120% 80% at 50% 0%, #5A1170 0%, #2A0A34 40%, #0D0B0C 78%);
  --q-bg-risk:     radial-gradient(120% 85% at 50% 0%, #7A0F0F 0%, #3A0A0A 42%, #0D0B0C 80%);
  --q-bg-correct:  radial-gradient(120% 90% at 50% 10%, #0B5A2C 0%, #0A2A18 40%, #0D0B0C 80%);
  --q-bg-incorrect:radial-gradient(120% 90% at 50% 10%, #6E0F0F 0%, #2E0A0A 42%, #0D0B0C 80%);
  --q-bg-profile:  radial-gradient(110% 70% at 50% 18%, #0E6B6B 0%, #0A3838 42%, #0D0B0C 80%);
  --q-bg-login:    radial-gradient(80% 50% at 12% 6%, rgba(216,29,29,0.55) 0%, rgba(13,11,12,0) 62%), #0D0B0C;

  /* ---------------------------------------------------------------------------
     GLOW SYSTEM — restrained, intentional. One glow per moment, never stacked.
     The --q-glow-* tokens scale with the "glow intensity" tweak (multiply spread).
     --------------------------------------------------------------------------- */
  --q-glow-yellow: 0 0 16px rgba(255,224,5,0.23);   /* host question canvas        */
  --q-glow-cyan:   0 0 18px rgba(0,249,255,0.35);   /* selected option / identity  */
  --q-glow-green:  0 0 22px rgba(0,255,103,0.35);   /* correct reveal              */
  --q-glow-red:    0 0 22px rgba(216,29,29,0.40);   /* risk / danger               */
  --q-glow-soft:   0 0 24px rgba(0,0,0,0.25);       /* neutral elevation           */

  /* ---------------------------------------------------------------------------
     RADII — rounded-square language. Keys & chips are soft; cards a touch softer.
     --------------------------------------------------------------------------- */
  --q-r-xs:  8px;    /* tiny pills, rank badges          */
  --q-r-sm:  11px;   /* buttons, list rows               */
  --q-r-md:  14px;   /* inputs, option rows, keypad keys  */
  --q-r-lg:  16px;   /* cards, host panels                */
  --q-r-xl:  20px;   /* outline pills (host chrome)       */
  --q-r-pill: 999px; /* status pills, avatars             */

  /* ---------------------------------------------------------------------------
     SPACING — 4px base grid. Negative space is a feature: bias to the larger step.
     --------------------------------------------------------------------------- */
  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 22px;   /* default screen gutter (mobile)  */
  --q-space-6: 32px;
  --q-space-7: 48px;
  --q-space-8: 64px;
  --q-gutter-mobile: 22px;
  --q-gutter-screen: 36px;

  /* ---------------------------------------------------------------------------
     TYPE FAMILIES
     - Display  : "BBH Hegarty" (brand display, licensed) → fallback Archivo Black
     - UI/Body  : "Archivo" (Google Fonts) — the system workhorse
     - System   : "Poppins" — status bars / OS chrome only
     --------------------------------------------------------------------------- */
  --q-font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --q-font-ui:      "Archivo", system-ui, -apple-system, sans-serif;
  --q-font-system:  "Poppins", system-ui, sans-serif;

  /* numeric — big scores/timers use the display face, tight & tabular */
  --q-font-numeric: "Archivo Black", "Archivo", system-ui, sans-serif;
}

/* ============================================================================
   SEMANTIC TYPE ROLES
   Display = broadcast moments (questions, scores, reveals). Heavy & dramatic.
   Utility = compact metadata labels. Small, uppercase, wide-tracked, muted.
   ============================================================================ */

/* --- DISPLAY / HERO : the cinematic moments --- */
.q-display-hero {            /* full-screen reveal word: PARIS, JOIN THE QUIZ   */
  font-family: var(--q-font-display);
  font-weight: 400;          /* BBH Hegarty ships heavy at regular              */
  font-size: clamp(44px, 9vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--q-fg1);
  text-wrap: balance;
}
.q-display-1 {               /* LEADERBOARD, screen titles                      */
  font-family: var(--q-font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--q-fg1);
}
.q-display-2 {               /* mid display — podium numbers, big stats         */
  font-family: var(--q-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.0;
  color: var(--q-fg1);
}

/* --- HEADERS : the italic broadcast lockup ("QUBEE BOOST") --- */
.q-mode-title {              /* mode header lockup, italic ultra-bold           */
  font-family: var(--q-font-ui);
  font-weight: 900;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--q-fg1);
}

/* --- QUESTION TEXT : strong, sentence/heavy, readable from distance --- */
.q-question {
  font-family: var(--q-font-ui);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--q-fg1);
  text-wrap: pretty;
}
.q-question-tv {             /* host/TV question — huge, all-caps optional      */
  font-family: var(--q-font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.08;
  color: var(--q-fg1);
}

/* --- BODY --- */
.q-body {
  font-family: var(--q-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--q-fg1);
}
.q-body-sm {
  font-family: var(--q-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--q-fg2);
}

/* --- UTILITY LABEL : the compact HUD/metadata voice --- */
.q-label {                   /* TAP THE FIRST LETTER, SELECT ONE OPTION, MENU   */
  font-family: var(--q-font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-fg3);
}
.q-label-tiny {              /* micro labels in stat tiles                      */
  font-family: var(--q-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--q-fg2);
}

/* --- NUMERIC : scores, timers, points --- */
.q-numeric-xl {              /* hero score / big timer                          */
  font-family: var(--q-font-numeric);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--q-fg1);
}
.q-numeric {                 /* row scores, HUD total                           */
  font-family: var(--q-font-numeric);
  font-weight: 900;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--q-fg1);
}

/* --- KEY CAP : keypad letters/numbers --- */
.q-keycap {
  font-family: var(--q-font-numeric);
  font-weight: 900;
  font-size: 20px;
  color: var(--q-fg1);
}

/* ============================================================================
   BASELINE
   ============================================================================ */
.q-root, body.q-root {
  background: var(--q-black);
  color: var(--q-fg1);
  font-family: var(--q-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Qubee Cloud portal — layout & components on top of tokens.css */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--q-black); color: var(--q-fg1);
  font-family: var(--q-font-ui); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--q-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: rgba(0,249,255,.35); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.rail {
  background: var(--q-host-rail); border-right: 1px solid var(--q-border-host);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--q-cyan); color: var(--q-on-accent);
  font-family: var(--q-font-display); font-size: 17px; display: grid; place-items: center; box-shadow: 0 0 18px rgba(0,249,255,.35);
}
.brand .name { font-weight: 900; letter-spacing: .04em; font-size: 15px; }
.brand .sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--q-fg3); font-weight: 800; }
.nav-group { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--q-fg-dim); font-weight: 800; padding: 14px 10px 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--q-fg2);
  font-weight: 700; font-size: 13px; border: 1px solid transparent; background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--q-surface-2); color: var(--q-fg1); text-decoration: none; }
.nav-item.active { background: var(--q-cyan-soft); color: var(--q-cyan); border-color: rgba(0,249,255,.25); }
.nav-item .ic { width: 18px; height: 18px; flex: none; }
.nav-item .pill { margin-left: auto; }
.rail-foot { margin-top: auto; padding: 8px; font-size: 11.5px; color: var(--q-fg4); display: flex; flex-direction: column; gap: 6px; }
.rail-foot a { color: var(--q-fg3); }

.main { min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--q-border-cool);
  background: rgba(13,11,12,.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 900; letter-spacing: .01em; }
.topbar .spacer { flex: 1; }
.account { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900;
  background: var(--q-surface-3); color: var(--q-cyan); border: 1px solid var(--q-border); font-size: 13px;
}
.account .who { line-height: 1.15; }
.account .who b { display: block; font-size: 12.5px; }
.account .who span { font-size: 10.5px; color: var(--q-fg3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.content { padding: 26px 28px 60px; max-width: 1180px; }

/* ---------- primitives ---------- */
.card {
  background: var(--q-surface-1); border: 1px solid var(--q-border); border-radius: 14px; padding: 18px 20px;
}
.card + .card, .stack > * + * { margin-top: 16px; }
.card h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--q-fg3); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.card h2 .right { margin-left: auto; display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .content { padding: 18px 16px 50px; } }

.stat { padding: 16px 18px; border-radius: 12px; background: var(--q-surface-2); border: 1px solid var(--q-border-cool); }
.stat .label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--q-fg3); font-weight: 800; }
.stat .value { font-family: var(--q-font-numeric); font-size: 28px; margin-top: 6px; line-height: 1; }
.stat .value.sm { font-size: 20px; font-family: var(--q-font-ui); font-weight: 900; }
.stat .hint { font-size: 12px; color: var(--q-fg4); margin-top: 6px; }
.stat.cyan .value { color: var(--q-cyan); } .stat.green .value { color: var(--q-green); } .stat.yellow .value { color: var(--q-yellow); }
.stat.red .value { color: var(--q-red); } .stat.orange .value { color: var(--q-orange); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--q-border);
  background: var(--q-surface-3); color: var(--q-fg1); font-weight: 800; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap;
}
.btn:hover { background: var(--q-surface-4); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--q-cyan); color: var(--q-on-accent); border-color: transparent; box-shadow: 0 0 16px rgba(0,249,255,.25); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.green { background: var(--q-green); color: var(--q-on-accent); border-color: transparent; }
.btn.danger { background: var(--q-red-soft); color: #ff6b6b; border-color: rgba(216,29,29,.4); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 11.5px; border-radius: 8px; }
.btn.block { width: 100%; justify-content: center; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--q-border); color: var(--q-fg2); background: var(--q-surface-2);
}
.pill.cyan { color: var(--q-cyan); border-color: rgba(0,249,255,.35); background: var(--q-cyan-soft); }
.pill.green { color: var(--q-green); border-color: rgba(0,255,103,.35); background: var(--q-green-soft); }
.pill.yellow { color: var(--q-yellow); border-color: rgba(255,224,0,.35); background: rgba(255,224,0,.1); }
.pill.red { color: #ff6b6b; border-color: rgba(216,29,29,.45); background: var(--q-red-soft); }
.pill.orange { color: var(--q-orange); border-color: rgba(255,94,0,.4); background: rgba(255,94,0,.12); }
.pill.magenta { color: #e46cf0; border-color: rgba(204,27,209,.45); background: rgba(204,27,209,.14); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid; }
.banner.warn { background: rgba(255,224,0,.08); border-color: rgba(255,224,0,.35); }
.banner.danger { background: var(--q-red-soft); border-color: rgba(216,29,29,.5); }
.banner.ok { background: var(--q-green-soft); border-color: rgba(0,255,103,.35); }
.banner.info { background: var(--q-cyan-soft); border-color: rgba(0,249,255,.3); }
.banner b { display: block; font-size: 13.5px; }
.banner p { margin: 2px 0 0; color: var(--q-fg2); font-size: 12.5px; }
.banner .actions { margin-left: auto; display: flex; gap: 8px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--q-fg3); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--q-border); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--q-border-cool); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--q-surface-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--q-fg4); }
.tbl-wrap { overflow-x: auto; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--q-fg3); font-weight: 800; }
.input, select.input, textarea.input {
  background: var(--q-surface-2); border: 1px solid var(--q-border); color: var(--q-fg1); border-radius: 10px; padding: 9px 12px; outline: none; width: 100%;
}
.input:focus { border-color: var(--q-cyan); box-shadow: 0 0 0 3px rgba(0,249,255,.15); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--q-fg4); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.empty { padding: 26px; text-align: center; color: var(--q-fg4); border: 1px dashed var(--q-border); border-radius: 12px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--q-fg3); margin-bottom: 14px; }
.crumbs a { color: var(--q-fg2); }
.crumbs .sep { color: var(--q-fg-dim); }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 12px 16px; border-radius: 12px; background: var(--q-surface-3);
  border: 1px solid var(--q-border); box-shadow: 0 18px 40px rgba(0,0,0,.6); font-weight: 700; max-width: 380px;
}
.toast.err { border-color: rgba(216,29,29,.6); color: #ff8080; }
.toast.ok { border-color: rgba(0,255,103,.4); color: var(--q-green); }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 40; padding: 20px; }
.modal { width: min(560px, 100%); background: var(--q-surface-1); border: 1px solid var(--q-border); border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.modal h3 { margin: 0 0 14px; font-size: 16px; }

.progress { height: 8px; border-radius: 999px; background: var(--q-surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--q-cyan); border-radius: 999px; }

.drop {
  border: 1px dashed var(--q-border-faint); border-radius: 12px; padding: 22px; text-align: center; color: var(--q-fg3); cursor: pointer;
  background: var(--q-surface-2); transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--q-cyan); background: var(--q-cyan-soft); color: var(--q-fg1); }

/* ---------- sign-in ---------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--q-bg-standard, var(--q-black)); padding: 20px; }
.login .box { width: min(420px, 100%); background: rgba(21,19,20,.9); border: 1px solid var(--q-border); border-radius: 18px; padding: 34px 30px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.login h1 { font-family: var(--q-font-display); font-size: 30px; margin: 14px 0 6px; letter-spacing: .02em; }
.login p { color: var(--q-fg2); margin: 0 0 22px; }
.login .mark { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto; background: var(--q-cyan); color: var(--q-on-accent); font-family: var(--q-font-display); font-size: 30px; display: grid; place-items: center; box-shadow: 0 0 34px rgba(0,249,255,.45); }

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--q-surface-4); border-top-color: var(--q-cyan); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { display: grid; place-items: center; padding: 40px; }

.answers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ans { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--q-border-cool); background: var(--q-surface-2); font-size: 12.5px; }
.ans b { display: block; font-size: 12px; }
.ans.correct { border-color: rgba(0,255,103,.45); background: var(--q-green-soft); }
.ans.wrong { border-color: rgba(216,29,29,.45); background: var(--q-red-soft); }
.ans.no-answer, .ans.skipped { opacity: .7; }
.ans.frozen { border-color: rgba(0,249,255,.35); }
.ans .meta { color: var(--q-fg3); font-size: 11px; margin-top: 3px; display: flex; gap: 8px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 12.5px; }
.kv dt { color: var(--q-fg3); font-weight: 700; } .kv dd { margin: 0; }
.btn.primary .pill { background: rgba(0,0,0,.22); color: var(--q-on-accent); border-color: transparent; }
.stat .value.sm { font-size: 17px; line-height: 1.25; }

.build-version { position: fixed; right: 12px; bottom: 8px; font-size: 10px; color: var(--q-fg-dim); pointer-events: none; z-index: 1; }