:root {
  color-scheme: light;
  --bg: #f5f6f8; --card: #fff; --ink: #17212b; --muted: #6b7785;
  --line: #e2e6ea; --accent: #1f6feb; --ok: #1a7f4b; --warn: #b26a00; --err: #c0392b;
  --soft: #fbfcfd; --soft2: #f0f2f5; --hover: #eaf1fd; --field: #fff; --track: #cfd6de;
  --okbg: #e6f4ec; --warnbg: #fdf1de; --errbg: #fdecea; --infobg: #e8f0fe; --infoink: #1a4f9c;
  --head: #17212b; --headink: #b9c4d0;
}
/* Тёмная тема: свои ступени цветов, а не механическая инверсия светлых */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1620; --card: #161f2a; --ink: #e6ecf2; --muted: #93a1b0;
  --line: #2a3542; --accent: #4b93ff; --ok: #3fb37a; --warn: #e0a34a; --err: #ef6b5c;
  --soft: #1a2430; --soft2: #202b38; --hover: #22344a; --field: #111a24; --track: #3a4756;
  --okbg: #14301f; --warnbg: #33260f; --errbg: #34191a; --infobg: #16283f; --infoink: #9fc4ff;
  --head: #0b1119; --headink: #97a6b5;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
header { background: var(--head); color: #fff; padding: 0 20px; display: flex; align-items: center; gap: 22px; height: 52px; }
header .brand { font-weight: 600; }
header nav a { color: var(--headink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
header nav a.active, header nav a:hover { color: #fff; border-color: var(--accent); }
header nav { display: flex; gap: 18px; }
header .sp { margin-left: auto; font-size: 13px; color: #8c99a6; }
main { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 26px 0 10px; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ds { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.ds .code { font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; background: var(--accent); padding: 4px 7px; border-radius: 5px; }
.ds .t { font-weight: 600; margin: 9px 0 4px; }
.ds .m { color: var(--muted); font-size: 13px; }
.ds .n { font-size: 27px; font-weight: 650; margin: 8px 0 0; }
.ds .n span { font-size: 13px; font-weight: 400; color: var(--muted); }
button, .btn { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; }
button.sec { background: var(--soft2); color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--errbg); color: var(--err); border: 1px solid var(--line); }
button:disabled { opacity: .55; cursor: default; }
button.mini { padding: 4px 9px; font-size: 13px; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--ink); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 9px; text-align: left; white-space: nowrap; }
th { background: var(--soft2); font-weight: 600; position: sticky; top: 0; }
.scroll { overflow: auto; max-height: 460px; border: 1px solid var(--line); border-radius: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--soft2); color: var(--muted); }
.pill.ok { background: var(--okbg); color: var(--ok); }
.pill.warn { background: var(--warnbg); color: var(--warn); }
.pill.err { background: var(--errbg); color: var(--err); }
.msg { padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: 14px; display: none; }
.msg.ok { background: var(--okbg); color: var(--ok); display: block; }
.msg.err { background: var(--errbg); color: var(--err); display: block; }
.msg.info { background: var(--infobg); color: var(--infoink); display: block; }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.link-row td { white-space: normal; }
.arrow { color: var(--accent); font-weight: 700; }
.diagram { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.node { border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: var(--soft); }
.node.dict { background: var(--warnbg); border-color: var(--line); }
.node b { display: block; font-size: 13px; }
.node small { color: var(--muted); }
dialog { border: 0; border-radius: 12px; padding: 0; max-width: 96vw; background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(20, 28, 38, .45); }
.dlg { padding: 18px 20px; min-width: 460px; }
.f { display: grid; grid-template-columns: 150px 1fr; gap: 9px; align-items: center; margin-bottom: 9px; }
.hint { font-size: 13px; color: var(--muted); }

/* ── Переключатель темы в шапке ─────────────────────────────────────────── */
#themeBtn { margin-left: auto; background: transparent; border: 1px solid #3a4756; color: var(--headink); padding: 4px 10px; font-size: 13px; border-radius: 7px; }
#themeBtn:hover { color: #fff; border-color: var(--accent); }

/* ── Вкладки «Таблица / График» ─────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-size: 14.5px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* ── Плитки KPI ─────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--soft); }
.kpi .t { font-size: 12.5px; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 650; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .n { font-size: 12px; color: var(--muted); }
.kpi .v.up { color: var(--ok); }
.kpi .v.down { color: var(--err); }

/* ── Область графика ────────────────────────────────────────────────────── */
.chartbox { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chartbox .stub { padding: 46px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.chartbox [data-t] { cursor: default; }
.chartbox [data-t]:hover { opacity: .82; }
.chart-tip { position: fixed; z-index: 40; pointer-events: none; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: none; max-width: 320px; }
.chart-tip b { display: block; font-weight: 600; }
.chart-tip span { color: var(--muted); }