:root {
  --bg: #0A1330; --surface: #14234F; --ink: #EEF2FF; --muted: #A9B8DE;
  --line: rgba(238, 242, 255, 0.26); --chip: #1E3170; --chip-on: #FFC933; --chip-on-ink: #0A1330;
  --btn: #FFC933; --btn-ink: #0A1330; --flag: #FFC933; --flag-ink: #0A1330; --focus: #6DB1FF;
  --outline: rgba(255, 255, 255, 0.10); --bad: #FF9A8F;
  --sh-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  --sh-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1330; --surface: #14234F; --ink: #EEF2FF; --muted: #A9B8DE; --line: rgba(238, 242, 255, 0.26);
    --chip: #1E3170; --chip-on: #FFC933; --chip-on-ink: #0A1330; --btn: #FFC933; --btn-ink: #0A1330; --focus: #6DB1FF;
    --outline: rgba(255, 255, 255, 0.10); --bad: #FF9A8F;
    --sh-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --sh-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1330; --surface: #14234F; --ink: #EEF2FF; --muted: #A9B8DE; --line: rgba(238, 242, 255, 0.26);
  --chip: #1E3170; --chip-on: #FFC933; --chip-on-ink: #0A1330; --btn: #FFC933; --btn-ink: #0A1330; --focus: #6DB1FF;
  --outline: rgba(255, 255, 255, 0.10); --bad: #FF9A8F;
  --sh-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  --sh-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 10; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button, a, select { touch-action: manipulation; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--btn); color: var(--btn-ink); padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }