/* Мичурин: система управления сайтами. Токены → основа → компоненты → каркас → экраны. */

/* ===== Токены ===== */
:root {
  color-scheme: light;
  /* поверхности: единая страница, панели чуть темнее, без карточек с тенями */
  --bg: #fbfcfb; --panel: #f1f4f2; --raised: #ffffff; --side: #eef2ef;
  /* текст */
  --ink: #17211c; --ink-2: #4a5650; --ink-3: #616c66;
  /* линии */
  --line: #dde3df; --line-strong: #bcc6c0;
  /* действие и выделение */
  --accent: #1a5fb4; --accent-hover: #154f97; --accent-ink: #ffffff; --accent-soft: #e4edf8; --focus: #1a5fb4;
  /* смысл: всегда вместе со словом или знаком */
  --good: #0f6b2f; --warn: #7a5600; --serious: #a8481c; --critical: #b3261e;
  --good-soft: #e3f2e7; --warn-soft: #fbf1d8; --serious-soft: #fbe9e0; --critical-soft: #fbe6e4;
  /* ряды графиков: палитра проверена на дальтонизм */
  --series-1: #2a78d6; --series-2: #eb6834; --bar: #c9d2cc; --bar-on: #2a78d6; --selection: rgba(42, 120, 214, .16);
  /* типографика */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 28px;
  /* отступы: сетка 4/8 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* радиусы и размеры */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --control: 36px; --side-w: 208px; --bar-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme=light])) {
    color-scheme: dark;
    --bg: #111513; --panel: #191e1b; --raised: #1f2522; --side: #161a18;
    --ink: #eceeea; --ink-2: #bdc4bf; --ink-3: #a0a8a2;
    --line: #2b322e; --line-strong: #434c47;
    --accent: #8ab8f2; --accent-hover: #a7cbf6; --accent-ink: #0d1a2b; --accent-soft: #1d2c40; --focus: #8ab8f2;
    --good: #5fcf80; --warn: #eebf55; --serious: #f0996f; --critical: #f08a82;
    --good-soft: #17301f; --warn-soft: #33290f; --serious-soft: #38221a; --critical-soft: #3a1f1d;
    --series-1: #3987e5; --series-2: #d95926; --bar: #39423d; --bar-on: #3987e5; --selection: rgba(57, 135, 229, .24);
  }
}

/* ===== Основа ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--sp-4)); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-md)/1.5 var(--font); }
h1 { font-size: var(--t-xl); line-height: 1.25; font-weight: 650; margin: 0; }
h2 { font-size: var(--t-lg); line-height: 1.3; font-weight: 650; margin: 0 0 var(--sp-3); }
h3 { font-size: var(--t-md); line-height: 1.4; font-weight: 650; margin: var(--sp-4) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); max-width: 76ch; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
code { font: var(--t-sm) var(--mono); background: var(--panel); padding: 1px var(--sp-1); border-radius: var(--r-sm); overflow-wrap: anywhere; }
pre { font: var(--t-sm)/1.5 var(--mono); background: var(--panel); padding: var(--sp-3); border-radius: var(--r-md); overflow-x: auto; margin: 0 0 var(--sp-3); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.neg { color: var(--critical); }
.pos { color: var(--good); }
.skip { position: absolute; left: var(--sp-2); top: -48px; z-index: 30; background: var(--raised); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.skip:focus { top: var(--sp-2); }

/* ===== Кнопки ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--ink); font: 500 var(--t-md)/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--panel); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-danger { background: var(--critical); border-color: var(--critical); color: var(--bg); }
.btn-danger:hover { background: var(--critical); color: var(--bg); filter: brightness(.92); }
.btn-quiet { border-color: transparent; color: var(--ink-2); padding: 0 var(--sp-2); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ===== Поля ===== */
.field { display: block; min-width: 0; }
.field > span.label, .label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: var(--sp-1); }
.req { color: var(--critical); }
input, select, textarea { font: var(--t-md)/1.3 var(--font); color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: var(--control); padding: 0 var(--sp-2); width: 100%; }
textarea { width: 100%; padding: var(--sp-2); font: var(--t-sm)/1.5 var(--mono); }
input[type=file] { width: 100%; padding: var(--sp-2) 0; border: 0; background: none; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
[aria-invalid=true] { border-color: var(--critical); box-shadow: 0 0 0 1px var(--critical); }
.hint { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--sp-1); }
.field-error { display: block; font-size: var(--t-sm); color: var(--critical); font-weight: 500; margin-top: var(--sp-1); }
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-md); min-height: var(--control); cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); align-items: start; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid-wide { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* переключатель из нескольких вариантов */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--raised); max-width: 100%; }
.seg label, .seg a, .seg button { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--control) - 2px); padding: 0 var(--sp-3); font: 500 var(--t-sm)/1.2 var(--font); color: var(--ink-2); background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer; text-decoration: none; white-space: nowrap; }
.seg > :first-child, .seg input:first-child + label { border-left: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg a:hover, .seg button:hover, .seg label:hover { background: var(--panel); color: var(--ink); }
.seg input:checked + label, .seg [aria-current=true], .seg [aria-pressed=true] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ===== Таблицы ===== */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-md); }
th, td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; white-space: nowrap; }
tbody th { font-weight: 400; }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.n { text-align: right; }
td:last-child, th:last-child { padding-right: 0; }
.sort { all: unset; cursor: pointer; display: inline-flex; gap: var(--sp-1); color: inherit; font: inherit; }
.sort:hover { color: var(--ink); }
.sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
th[aria-sort] .sort { color: var(--ink); font-weight: 650; }
th[aria-sort=descending] .sort::after { content: "↓"; }
th[aria-sort=ascending] .sort::after { content: "↑"; }
tr.is-void td { color: var(--ink-3); }
tr.is-void .amount { text-decoration: line-through; }
.meter { display: block; height: 3px; background: var(--series-1); border-radius: 2px; margin-top: var(--sp-1); }
.empty-row { padding: var(--sp-5) 0; color: var(--ink-3); }
.site-name { font-weight: 500; }

/* ===== Значки и сигналы ===== */
.badge { display: inline-block; padding: 1px var(--sp-2); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 500; line-height: 18px; background: var(--panel); color: var(--ink-2); white-space: nowrap; }
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.sev { display: inline-block; font-size: var(--t-xs); font-weight: 650; padding: 1px var(--sp-2); border-radius: var(--r-sm); line-height: 18px; white-space: nowrap; }
.sev-critical { background: var(--critical-soft); color: var(--critical); }
.sev-serious { background: var(--serious-soft); color: var(--serious); }
.sev-warning { background: var(--warn-soft); color: var(--warn); }
.sev-good { background: var(--good-soft); color: var(--good); }
.alerts { list-style: none; }
.alert { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.alert:last-child { border-bottom: 0; }
.alert-body { min-width: 0; }
.alert-title { font-weight: 500; }
.alert-action { color: var(--ink-2); font-size: var(--t-sm); margin: 0; max-width: none; }
.alert > .sev, .steps .sev { align-self: start; justify-self: start; }
.sig { font-size: var(--t-sm); line-height: 1.35; }

/* ===== Сообщения ===== */
.toast { position: sticky; top: var(--sp-2); z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) var(--sp-5) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-weight: 500; }
.toast-ok { background: var(--good-soft); color: var(--good); }
.toast-err { background: var(--critical-soft); color: var(--critical); }
.toast button { all: unset; cursor: pointer; font-size: var(--t-sm); text-decoration: underline; }
.toast button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.asof { background: var(--warn-soft); color: var(--warn); padding: var(--sp-2) var(--sp-5); font-size: var(--t-sm); font-weight: 500; }
.asof a { color: inherit; font-weight: 650; }
.demo-flag { background: #7a5600; color: #fff; padding: var(--sp-1) var(--sp-5); font-size: var(--t-sm); font-weight: 500; }
.empty { background: var(--panel); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); }
.empty p:last-child { margin-bottom: 0; }
.steps { list-style: none; }
.steps li { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }

/* ===== Диалоги и раскрытия ===== */
dialog { border: 0; border-radius: var(--r-lg); padding: 0; width: min(520px, calc(100% - 32px)); background: var(--raised); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
dialog::backdrop { background: rgba(10, 16, 13, .45); }
.dlg { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.dlg h2 { margin: 0; }
.dlg-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
details > summary { cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); }
details > summary:hover { color: var(--ink); }
.more { margin-top: var(--sp-2); }
.more > summary { padding: var(--sp-2) 0; }

/* ===== Каркас ===== */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); border-right: 1px solid var(--line); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 650; font-size: var(--t-lg); color: var(--ink); text-decoration: none; padding: 0 var(--sp-2); }
.brand:hover { color: var(--ink); }
.brand small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; min-height: 36px; padding: 0 var(--sp-2); border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a[aria-current=page] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.side-foot { margin-top: auto; display: grid; gap: var(--sp-2); }
.side-foot .btn { justify-content: flex-start; width: 100%; padding: 0 var(--sp-2); border-color: transparent; color: var(--ink-2); font-weight: 400; }
.more-menu { display: none; }
.content { min-width: 0; display: flex; flex-direction: column; }
main { padding: var(--sp-5); max-width: 1360px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.page-head p { margin: 2px 0 0; }
.crumbs { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--sp-1); }
.block { margin-bottom: var(--sp-6); }
.block > h2:first-child { margin-bottom: var(--sp-3); }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.block-head h2 { margin: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 var(--sp-6); }
.panel { background: var(--panel); border-radius: var(--r-lg); padding: var(--sp-4); }
.subnav { display: flex; gap: var(--sp-4); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.subnav a { padding: var(--sp-2) 0; color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.subnav a:hover { color: var(--accent); }

/* ===== Строка времени ===== */
.timebar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.timebar > summary { display: none; }
.time-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); min-height: var(--bar-h); }
.time-label { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.presets a { min-height: 30px; padding: 0 var(--sp-2); }
.ruler { position: relative; flex: 1 1 200px; min-width: 200px; height: 40px; cursor: crosshair; user-select: none; touch-action: none; border-radius: var(--r-sm); }
.ruler .bars { position: absolute; inset: 0 0 14px 0; display: flex; align-items: flex-end; background: var(--panel); border-radius: var(--r-sm); overflow: hidden; }
.ruler .bars i { flex: 1 1 0; min-width: 0; background: var(--bar); display: block; }
.ruler .bars i.on { background: var(--bar-on); }
.ruler .band { position: absolute; top: 0; bottom: 14px; background: var(--selection); border-inline: 2px solid var(--bar-on); pointer-events: none; }
.ruler .marks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; font-size: 11px; line-height: 14px; color: var(--ink-3); overflow: hidden; }
.ruler .marks span { position: absolute; white-space: nowrap; }
.ruler-tip { position: absolute; top: -2px; background: var(--ink); color: var(--bg); font-size: var(--t-xs); padding: 1px var(--sp-2); border-radius: var(--r-sm); pointer-events: none; white-space: nowrap; display: none; z-index: 2; }
.dates { position: relative; }
.dates > summary { list-style: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; }
.dates > summary::-webkit-details-marker { display: none; }
.dates-pop { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 12; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 340px; }
.dates-pop .btn { grid-column: 1 / -1; }

/* ===== Показатели ===== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); }
.stat b { display: block; font-size: var(--t-2xl); line-height: 1.15; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat span { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
.stat small { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-5); padding: var(--sp-2) 0; border-block: 1px solid var(--line); font-size: var(--t-sm); }
.facts div { display: flex; gap: var(--sp-1); align-items: baseline; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ===== Таблица сайтов ===== */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tools input[type=search]:not([type=checkbox]) { width: 200px; }
.tools .check { min-height: 0; font-size: var(--t-sm); }
.sort-mobile { display: none; }
table[data-view=o] [data-cols]:not([data-cols*=o]),
table[data-view=t] [data-cols]:not([data-cols*=t]),
table[data-view=m] [data-cols]:not([data-cols*=m]) { display: none; }

/* ===== Графики ===== */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart svg:focus-visible { outline-offset: 4px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .ln.s1 { stroke: var(--series-1); }
.chart .ln.s2 { stroke: var(--series-2); }
.chart .pt { stroke: var(--bg); stroke-width: 2; }
.chart .pt.s1 { fill: var(--series-1); }
.chart .pt.s2 { fill: var(--series-2); }
.chart .dl { fill: var(--ink-2); font-size: 12.5px; }
.chart .ev line { stroke: var(--line-strong); stroke-width: 1; }
.chart .xh { stroke: var(--line-strong); stroke-width: 1; }
.tip { position: absolute; top: var(--sp-2); background: var(--ink); color: var(--bg); font-size: var(--t-sm); line-height: 1.35; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); pointer-events: none; white-space: nowrap; z-index: 2; }
.legend { display: flex; gap: var(--sp-3); font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--sp-1); }
.legend i { display: inline-block; width: 12px; height: 2px; margin-right: var(--sp-1); vertical-align: middle; }
.legend i.s1 { background: var(--series-1); }
.legend i.s2 { background: var(--series-2); }

/* ===== Экран денег ===== */
.money-top { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-6); }
.entry-form { display: grid; gap: var(--sp-3); }
.seg-full { display: flex; }
.seg-full label { flex: 1; }
.defs { display: grid; gap: var(--sp-3); }
.defs dt { font-weight: 500; }
.defs dd { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* ===== Вход ===== */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-4); }
.login { width: min(360px, 100%); display: grid; gap: var(--sp-3); }
.login h1 { margin-bottom: var(--sp-2); }
.login-page main { width: auto; max-width: none; padding: 0; }

/* ===== Телефон и узкие окна ===== */
@media (max-width: 1100px) {
  .time-row { flex-wrap: wrap; }
  .ruler { flex-basis: 100%; order: 5; }
}
@media (max-width: 800px) {
  :root { --control: 44px; --bar-h: 48px; }
  html { scroll-padding-top: var(--sp-4); }
  body { padding-bottom: 64px; }
  .shell { display: block; }
  .side { position: fixed; inset: auto 0 0 0; height: auto; z-index: 20; flex-direction: row; padding: 0; gap: 0; border-right: 0; border-top: 1px solid var(--line); background: var(--raised); }
  .side .brand, .side-foot, .nav-secondary { display: none; }
  .nav-primary { display: flex; flex: 3; gap: 0; }
  .nav-primary a { flex: 1; justify-content: center; min-height: 56px; border-radius: 0; font-size: var(--t-sm); }
  .more-menu { display: block; flex: 1; position: relative; }
  .more-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: var(--t-sm); color: var(--ink-2); }
  .more-menu > summary::-webkit-details-marker { display: none; }
  .more-pop { position: absolute; right: var(--sp-2); bottom: calc(100% + var(--sp-2)); width: 220px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--sp-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); display: grid; gap: 2px; }
  .more-pop a, .more-pop .btn { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 0 var(--sp-2); width: 100%; color: var(--ink); text-decoration: none; border: 0; }
  main { padding: var(--sp-4); }
  .toast { margin: var(--sp-2) var(--sp-4) 0; }
  .asof, .demo-flag { padding-inline: var(--sp-4); }
  .timebar { position: static; }
  .timebar > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--bar-h); padding: 0 var(--sp-4); list-style: none; color: var(--ink); font-size: var(--t-md); font-weight: 650; }
  .timebar > summary::-webkit-details-marker { display: none; }
  .timebar > summary::after { content: "Изменить"; font-size: var(--t-sm); font-weight: 500; color: var(--accent); }
  .timebar[open] > summary::after { content: "Скрыть"; }
  .time-row { padding: 0 var(--sp-4) var(--sp-3); min-height: 0; }
  .time-label { display: none; }
  .presets { width: 100%; }
  .presets a { flex: 1; min-height: 40px; padding: 0 var(--sp-1); }
  .dates { width: 100%; }
  .dates > summary { min-height: 40px; }
  .dates-pop { position: static; width: 100%; margin-top: var(--sp-2); box-shadow: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 24px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .money-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .tools input[type=search]:not([type=checkbox]), .tools .seg { width: 100%; }
  .tools .seg button { flex: 1; }
  .sort-mobile { display: block; width: 100%; }
  .btn-row .btn { flex: 1; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  input, select, textarea { font-size: 16px; }
  /* строки таблицы становятся карточками: подпись берётся из data-label */
  .stack thead { display: none; }
  .stack, .stack tbody { display: block; }
  .stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .stack td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  table[data-view] td[data-cols]:not(.x) { display: block; }
  table[data-view=o] td[data-cols]:not([data-cols*=o]), table[data-view=t] td[data-cols]:not([data-cols*=t]), table[data-view=m] td[data-cols]:not([data-cols*=m]) { display: none; }
  .stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--ink-3); }
  .stack .full { grid-column: 1 / -1; }
  .stack td:empty { display: none !important; }
  #sites tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sites td[data-v][data-cols=o]:not([data-label]) { grid-column: 1 / -1; }
  details > summary { min-height: 44px; display: flex; align-items: center; gap: var(--sp-1); }
  .timebar > summary { min-height: var(--bar-h); }
  .sort { min-height: 40px; align-items: center; }
  .alert, .steps li { grid-template-columns: 1fr; }
  .alert .sev, .steps .sev { justify-self: start; }
}
@media print {
  .side, .timebar, .toast, .btn, .tools { display: none !important; }
  .shell { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}