/* Протокол — токены и база.
   Три состояния темы: голый :root (светлая), системная тёмная, ручная тёмная.
   Ни один цвет не объявляется только внутри media/[data-theme]. */

:root {
  --panel-radius:14px; --control-radius:9px;
  --page:#F7F8F5; --win:#FFFFFF; --chrome:#F0F3EE; --rail:#FFFFFF; --sunk:#F0F3EE;
  --line:#DAE3DC; --line-soft:#E9F0E6; --ink:#20372E; --ink-2:#40564B;
  --muted:#617369; --faint:#74837A;
  --accent:#226348; --accent-ink:#FFFFFF; --accent-sunk:#E9F0E6; --accent-press:#164C35;
  --track:#DEDBD5;
  --ok-bg:#E4F2E8; --ok-fg:#1D6B3E; --ok-br:#C6E4D2;
  --warn-bg:#FAEFD8; --warn-fg:#7A4F04; --warn-br:#EFDCB4;
  --bad-bg:#FBE6E3; --bad-fg:#A93A2D; --bad-br:#F1CCC6;
  --neu-bg:#ECEAE5; --neu-fg:#5C5952; --neu-br:#DFDCD5;
  --live:#D93F32;
  --s1-bg:#E7E6FB; --s1-fg:#3F37C9; --s1-dot:#4F46E5;
  --s2-bg:#DCEFEC; --s2-fg:#0E6E63; --s2-dot:#12857A;
  --s3-bg:#FAECD9; --s3-fg:#8A5A05; --s3-dot:#C08A1E;
  --s4-bg:#F6E5EC; --s4-fg:#9B3560; --s4-dot:#B84876;
  --s5-bg:#E6EEF9; --s5-fg:#1F5B9E; --s5-dot:#2C74C4;
  --s6-bg:#EEE7F7; --s6-fg:#6B3FA0; --s6-dot:#8055C0;
  --tl-red:#FF5F57; --tl-yellow:#FEBC2E; --tl-green:#28C840;
  --medal-2:#C09A3E; --medal-3:#B0846C;
  --video-bg:#000000;
  --dialog-backdrop:rgba(0,0,0,.4);
  --speak:#1E9E50; --speak-glow:rgba(30,158,80,.45); --speak-soft:rgba(30,158,80,.3);
  --shadow: 0 1px 2px rgba(26,26,24,.05), 0 30px 70px -28px rgba(26,26,24,.34);
  --shadow-sm: 0 1px 2px rgba(26,26,24,.06);
  --shadow-pop: 0 8px 24px rgba(26,26,24,.22);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0A0A0B; --win:#141416; --chrome:#1A1A1D; --rail:#101012; --sunk:#1B1B1F;
    --line:#2A2A2F; --line-soft:#232327; --ink:#EAE8E3; --ink-2:#C3C0B9;
    --muted:#98958E; --faint:#7B7871;
    --accent:#63B887; --accent-ink:#08150F; --accent-sunk:#153124; --accent-press:#7AC99B;
    --track:#2E2E34;
    --ok-bg:#12271B; --ok-fg:#6FCF97; --ok-br:#1F4630;
    --warn-bg:#2A1F0C; --warn-fg:#E0A94A; --warn-br:#4A3712;
    --bad-bg:#2C1411; --bad-fg:#E8776A; --bad-br:#4C221D;
    --neu-bg:#202024; --neu-fg:#A8A49C; --neu-br:#303036;
    --live:#F0685A;
    --s1-bg:#1E1D3A; --s1-fg:#9C99FF; --s1-dot:#7C79F2;
    --s2-bg:#0F2A27; --s2-fg:#5FC8B8; --s2-dot:#31A395;
    --s3-bg:#2B2109; --s3-fg:#DDAE58; --s3-dot:#C9962F;
    --s4-bg:#2E1420; --s4-fg:#E6849F; --s4-dot:#CB5F82;
    --s5-bg:#101F33; --s5-fg:#79AEEA; --s5-dot:#4D8FD6;
    --s6-bg:#1E1630; --s6-fg:#B08BE0; --s6-dot:#9670CC;
    --tl-red:#FF5F57; --tl-yellow:#FEBC2E; --tl-green:#28C840;
    --video-bg:#000000;
    --dialog-backdrop:rgba(0,0,0,.6);
    --speak:#3FCE6B; --speak-glow:rgba(63,206,107,.5); --speak-soft:rgba(63,206,107,.32);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,1);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-pop: 0 8px 24px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --page:#0A0A0B; --win:#141416; --chrome:#1A1A1D; --rail:#101012; --sunk:#1B1B1F;
  --line:#2A2A2F; --line-soft:#232327; --ink:#EAE8E3; --ink-2:#C3C0B9;
  --muted:#98958E; --faint:#7B7871;
  --accent:#63B887; --accent-ink:#08150F; --accent-sunk:#153124; --accent-press:#7AC99B;
  --track:#2E2E34;
  --ok-bg:#12271B; --ok-fg:#6FCF97; --ok-br:#1F4630;
  --warn-bg:#2A1F0C; --warn-fg:#E0A94A; --warn-br:#4A3712;
  --bad-bg:#2C1411; --bad-fg:#E8776A; --bad-br:#4C221D;
  --neu-bg:#202024; --neu-fg:#A8A49C; --neu-br:#303036;
  --live:#F0685A;
  --s1-bg:#1E1D3A; --s1-fg:#9C99FF; --s1-dot:#7C79F2;
  --s2-bg:#0F2A27; --s2-fg:#5FC8B8; --s2-dot:#31A395;
  --s3-bg:#2B2109; --s3-fg:#DDAE58; --s3-dot:#C9962F;
  --s4-bg:#2E1420; --s4-fg:#E6849F; --s4-dot:#CB5F82;
  --s5-bg:#101F33; --s5-fg:#79AEEA; --s5-dot:#4D8FD6;
  --s6-bg:#1E1630; --s6-fg:#B08BE0; --s6-dot:#9670CC;
  --tl-red:#FF5F57; --tl-yellow:#FEBC2E; --tl-green:#28C840;
  --video-bg:#000000;
  --dialog-backdrop:rgba(0,0,0,.6);
  --speak:#3FCE6B; --speak-glow:rgba(63,206,107,.5); --speak-soft:rgba(63,206,107,.32);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-pop: 0 8px 24px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

/* Атрибут hidden должен побеждать: у него специфичность элемента, и любое
   правило вида «.statusbar { display: flex }» иначе продолжает показывать блок. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}