/* Тёмная тема. Выбор (static/theme.js): «как у устройства» (по умолчанию), «светлая» или «тёмная» — html[data-theme].
   Цвета страниц заданы переменными в :root каждой страницы; здесь — их тёмные значения и общие токены
   для того, что раньше было записано цветом напрямую (стекло, наведение, текст на чёрных плашках). */

:root {
  --on-ink: #fff;                          /* текст на плашке цвета --ink (чёрной в светлой теме) */
  --on-ink-2: rgba(255, 255, 255, .62);
  --on-ink-line: rgba(255, 255, 255, .18);
  --on-bad: #fff;                          /* текст на красной плашке */
  --hover: #fafafa;                        /* строка таблицы под курсором */
  --shimmer: #f7f7f7;                      /* блик скелетона при загрузке */
  --bar-bg: rgba(246, 246, 246, .42);      /* плавающая шапка */
  --glass: linear-gradient(180deg, rgba(250, 250, 250, .62), rgba(236, 236, 236, .5));
  --glass-solid: rgba(250, 250, 250, .74);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-line: rgba(30, 33, 36, .1);
  --shadow: rgba(0, 0, 0, .14);
  /* диаграммы «Состояние звеньев»: сектор, светлая часть (завал) и подписи на них */
  --wheel: #1e2124; --wheel-hi: #ebebeb; --wheel-on: #f3f3f3; --wheel-on-2: #a7a9ac; --wheel-on-hi: #1e2124; --wheel-on-hi-2: #6b6d70;
}

/* тёмные значения: при выборе «тёмная» или «как у устройства», если устройство в тёмном режиме */
:root[data-theme="dark"] {
  --bg: #121416; --ink: #e8e9ea; --ink-2: #c3c5c8; --muted: #8b8f94; --faint: #5d6167;
  --fill: #1b1e21; --fill-2: #25292d; --line: #2d3136;
  --c1: #e8e9ea; --c2: #5d6167;
  --ok: #7cc489; --ok-bg: #1b2d20; --amber: #e2b45f; --amber-bg: #33290f; --bad: #f08174; --bad-bg: #3b1d19;
  --on-ink: #121416; --on-ink-2: rgba(18, 20, 22, .62); --on-ink-line: rgba(18, 20, 22, .16); --on-bad: #1b0d0b;
  --hover: #1d2024; --shimmer: #2c3034;
  --bar-bg: rgba(30, 33, 36, .55);
  --glass: linear-gradient(180deg, rgba(40, 44, 48, .66), rgba(26, 29, 32, .58));
  --glass-solid: rgba(30, 33, 36, .8);
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .1);
  --shadow: rgba(0, 0, 0, .5);
  --wheel: #2c3136; --wheel-hi: #d4d7db; --wheel-on: #e8e9ea; --wheel-on-2: #8b8f94; --wheel-on-hi: #121416; --wheel-on-hi-2: #4b5056;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121416; --ink: #e8e9ea; --ink-2: #c3c5c8; --muted: #8b8f94; --faint: #5d6167;
    --fill: #1b1e21; --fill-2: #25292d; --line: #2d3136;
    --c1: #e8e9ea; --c2: #5d6167;
    --ok: #7cc489; --ok-bg: #1b2d20; --amber: #e2b45f; --amber-bg: #33290f; --bad: #f08174; --bad-bg: #3b1d19;
    --on-ink: #121416; --on-ink-2: rgba(18, 20, 22, .62); --on-ink-line: rgba(18, 20, 22, .16); --on-bad: #1b0d0b;
    --hover: #1d2024; --shimmer: #2c3034;
    --bar-bg: rgba(30, 33, 36, .55);
    --glass: linear-gradient(180deg, rgba(40, 44, 48, .66), rgba(26, 29, 32, .58));
    --glass-solid: rgba(30, 33, 36, .8);
    --glass-edge: rgba(255, 255, 255, .08);
    --glass-line: rgba(255, 255, 255, .1);
    --shadow: rgba(0, 0, 0, .5);
    --wheel: #2c3136; --wheel-hi: #d4d7db; --wheel-on: #e8e9ea; --wheel-on-2: #8b8f94; --wheel-on-hi: #121416; --wheel-on-hi-2: #4b5056;
    color-scheme: dark;
  }
}
html, body { background: var(--bg); }

/* переключатель темы в шапке: «как у устройства» → «светлая» → «тёмная» */
.theme-btn { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.theme-btn:hover { background: var(--ink); color: var(--bg); }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-btn svg { display: block; }
@media (max-width: 760px) { .theme-btn { width: 40px; height: 40px; } }