:root {
  --bg: #07101f;
  --bg-accent-start: #143258;
  --surface-1: #10223d;
  --surface-2: #152d4f;
  --surface-3: #1f3f68;
  --line: #30537f;
  --text-main: #e8efff;
  --text-muted: #bbcbec;
  --accent: #50c2ff;
  --focus: #ffe55e;
  --danger: #ff6e7c;
  --ok: #57d993;
  --shell-surface: rgba(16, 34, 61, 0.86);
  --shell-chrome: rgba(16, 34, 61, 0.78);
  --ticker-bg: rgba(89, 72, 25, 0.92);
  --ticker-line: #7f6a2a;
  --ticker-text: #fff5cc;
  --media-grad-start: #1f3f68;
  --media-grad-end: #123055;
  --media-text: #d8f0ff;
  --media-fpo-16-9: rgba(91, 207, 255, 0.4);
  --media-fpo-4-3: rgba(255, 213, 125, 0.35);
  --media-fpo-1-1: rgba(149, 230, 180, 0.35);
  --media-fpo-21-9: rgba(221, 165, 255, 0.35);
  --media-fpo-label-bg: rgba(9, 23, 40, 0.62);
  --media-fpo-label-text: #e5f3ff;
  --player-grad-start: #092447;
  --player-grad-end: #071830;
  --tile-c-grad-start: #1f456d;
  --tile-c-grad-end: #173757;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.25);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

[data-theme="bright"] {
  --bg: #f3efe4;
  --bg-accent-start: #e9dfcc;
  --surface-1: #f7f1e4;
  --surface-2: #efe6d4;
  --surface-3: #e7dac2;
  --line: #c8b89d;
  --text-main: #2e2a22;
  --text-muted: #665d50;
  --accent: #4da0cc;
  --focus: #d8a33e;
  --danger: #cf5d5d;
  --ok: #3d8d60;
  --shell-surface: rgba(245, 237, 224, 0.88);
  --shell-chrome: rgba(241, 231, 215, 0.92);
  --ticker-bg: rgba(214, 188, 132, 0.85);
  --ticker-line: #b08d46;
  --ticker-text: #433111;
  --media-grad-start: #e7dcc6;
  --media-grad-end: #dbcbae;
  --media-text: #4b3e2a;
  --media-fpo-16-9: rgba(55, 136, 173, 0.34);
  --media-fpo-4-3: rgba(177, 135, 54, 0.3);
  --media-fpo-1-1: rgba(85, 141, 101, 0.3);
  --media-fpo-21-9: rgba(139, 102, 166, 0.3);
  --media-fpo-label-bg: rgba(249, 242, 230, 0.7);
  --media-fpo-label-text: #56472f;
  --player-grad-start: #efe5d0;
  --player-grad-end: #e5d8bf;
  --tile-c-grad-start: #eadfc8;
  --tile-c-grad-end: #dfd1b4;
  --shadow-soft: 0 8px 20px rgba(67, 52, 24, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(circle at 20% 20%, var(--bg-accent-start) 0%, var(--bg) 55%);
  color: var(--text-main);
  font-family: var(--font);
}

.hidden {
  display: none !important;
}