/* Quiz Studio admin design tokens: shared by the installer, sign-in page and admin panel.
   Light by default; dark follows the system unless the user picked a mode (html[data-theme]). */
:root {
  /* Motion: a strong ease-out (starts fast, settles softly) for anything that enters or responds. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --bg: #f6f7fb;
  --bg-accent: radial-gradient(1100px 560px at 8% -12%, #e3e7ff 0%, transparent 60%), radial-gradient(900px 480px at 108% 4%, #fde7f3 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --surface-3: #e9ecf4;
  --line: #e4e7ef;
  --line-strong: #d3d8e4;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #5b6779;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-ink: #ffffff;
  --btn-primary: #4f46e5;
  --btn-primary-hover: #4338ca;
  --btn-primary-ink: #ffffff;
  --primary-soft: #eef2ff;
  --accent: #db2777;
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --info: #0284c7;
  --info-soft: #f0f9ff;
  --c1: #4f46e5;
  --c2: #0d9488;
  --c3: #f59e0b;
  --c4: #db2777;
  --c5: #0284c7;
  --r-sm: 8px;
  --radius: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgb(16 24 40 / .05);
  --shadow-pop: 0 8px 24px rgb(16 24 40 / .12);
  --shadow-modal: 0 24px 48px rgb(16 24 40 / .18);
  --font: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b0f1a;
  --bg-accent: radial-gradient(1100px 560px at 8% -12%, #1b2150 0%, transparent 60%), radial-gradient(900px 480px at 108% 4%, #33152c 0%, transparent 55%);
  --surface: #121826;
  --surface-2: #1a2133;
  --surface-3: #222a3f;
  --line: #263049;
  --line-strong: #33405e;
  --text: #e6e9f2;
  --text-2: #b6bfd3;
  --muted: #94a0b8;
  --primary: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-ink: #0b0f1a;
  --btn-primary: #5b54f0;
  --btn-primary-hover: #4f46e5;
  --btn-primary-ink: #ffffff;
  --primary-soft: #1e1b4b;
  --accent: #f472b6;
  --ok: #34d399;
  --ok-soft: #0f2e24;
  --warn: #fbbf24;
  --warn-soft: #33280f;
  --bad: #f87171;
  --bad-soft: #3a1820;
  --info: #38bdf8;
  --info-soft: #0c2a3a;
  --c1: #818cf8;
  --c2: #2dd4bf;
  --c3: #fbbf24;
  --c4: #f472b6;
  --c5: #38bdf8;
  --shadow: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-pop: 0 10px 28px rgb(0 0 0 / .45);
  --shadow-modal: 0 24px 56px rgb(0 0 0 / .55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f1a;
    --bg-accent: radial-gradient(1100px 560px at 8% -12%, #1b2150 0%, transparent 60%), radial-gradient(900px 480px at 108% 4%, #33152c 0%, transparent 55%);
    --surface: #121826;
    --surface-2: #1a2133;
    --surface-3: #222a3f;
    --line: #263049;
    --line-strong: #33405e;
    --text: #e6e9f2;
    --text-2: #b6bfd3;
    --muted: #94a0b8;
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-ink: #0b0f1a;
    --btn-primary: #5b54f0;
    --btn-primary-hover: #4f46e5;
    --btn-primary-ink: #ffffff;
    --primary-soft: #1e1b4b;
    --accent: #f472b6;
    --ok: #34d399;
    --ok-soft: #0f2e24;
    --warn: #fbbf24;
    --warn-soft: #33280f;
    --bad: #f87171;
    --bad-soft: #3a1820;
    --info: #38bdf8;
    --info-soft: #0c2a3a;
    --c1: #818cf8;
    --c2: #2dd4bf;
    --c3: #fbbf24;
    --c4: #f472b6;
    --c5: #38bdf8;
    --shadow: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-pop: 0 10px 28px rgb(0 0 0 / .45);
    --shadow-modal: 0 24px 56px rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}

.icon { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.75; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 22px; height: 22px; }