/* Оформление «Оборота» — те же токены, что в утверждённом концепте. Цвет несут данные.
   Каждый компонент описан ровно один раз (спека упрощения 12.10, G8): раньше .kpi, .drawer, .seg и цвета
   каналов жили в трёх-четырёх местах, и вид решало «последнее описание». */
:root {
  color-scheme: dark;
  --bg: #090b0f; --rail: #0c0e13; --surface: #12151c; --surface-2: #181c25; --surface-3: #212633;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13);
  --text: #eceef3; --text-2: #a3a9b8; --text-3: #6b7282;
  --primary: #f4f5f8; --on-primary: #0b0d12; --focus: #8fb0ff;
  --good: #0ca30c; --warn: #fab219; --crit: #d03b3b;
  --good-soft: rgba(12,163,12,.16); --warn-soft: rgba(250,178,25,.14); --crit-soft: rgba(208,59,59,.16);
  --oz: #3987e5; --wb: #9085e9; --ms: #d95926; --rt: #f0892a;
  /* Палитра каналов: проверена на различимость, в т.ч. при нарушениях цветового зрения, в обеих темах;
     порядок в стопке: Озон, Авито, Розница, ВБ, Опт. Подпись канала — всегда текстом рядом с цветом. */
  --ch-ozon: #3987e5; --ch-wb: #9085e9; --ch-avito: #199e70; --ch-retail: #d95926; --ch-wholesale: #d55181;
  --ch-eaes: #c98500; --ch-other: #7d8494;
  --glow: .14; --shadow: 0 18px 50px rgba(0,0,0,.45);
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --ui: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8494' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f5f6f8; --rail: #ffffff; --surface: #ffffff; --surface-2: #f2f3f6; --surface-3: #e8eaef;
    --line: rgba(12,16,28,.08); --line-2: rgba(12,16,28,.14);
    --text: #0e1117; --text-2: #4a5160; --text-3: #7d8494;
    --primary: #0e1117; --on-primary: #ffffff; --focus: #2a6fe0;
    --oz: #2a78d6; --wb: #4a3aa7; --ms: #eb6834; --rt: #d26a0c;
    --ch-ozon: #2a78d6; --ch-wb: #4a3aa7; --ch-avito: #1baf7a; --ch-retail: #eb6834; --ch-wholesale: #e87ba4;
    --ch-eaes: #eda100;
    --glow: .10; --shadow: 0 18px 50px rgba(20,24,40,.12);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--text-2); } .quiet { color: var(--text-3); } .small { font-size: 12px; } .mono { font-family: var(--mono); font-size: 12.5px; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.03em; text-wrap: balance; }
h2 { margin: 0; font-size: 15px; font-weight: 600; }
.info { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--text-3); font: 600 10px/1 var(--ui); cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; }

/* ── Каркас ───────────────────────────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; position: relative; overflow: hidden; background: conic-gradient(from 210deg, var(--oz), var(--wb), var(--ms), var(--oz)); }
.brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 4px; background: var(--rail); }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 10px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.nav-item:hover, .nav-item.is-current { background: var(--surface-2); color: var(--text); }
.nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-add { color: var(--text-3); }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 600; font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--oz), var(--wb)); }
.avatar-lg { width: 40px; height: 40px; font-size: 13px; border-radius: 11px; }
.rail-foot { margin-top: auto; }

.main { position: relative; min-width: 0; }
.aurora { position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none; overflow: hidden; z-index: 0; }
.aurora::before, .aurora::after { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(90px); opacity: var(--glow); }
.aurora::before { background: var(--oz); top: -380px; left: 4%; }
.aurora::after { background: var(--wb); top: -420px; right: 2%; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.crumbs { color: var(--text-3); font-size: 13px; display: flex; gap: 8px; } .crumbs b { color: var(--text); font-weight: 600; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--text); }
.page { position: relative; z-index: 1; padding: 26px 28px 60px; display: flex; flex-direction: column; gap: 20px; max-width: 1280px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.head-note { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.head-warn { margin: 8px 0 0; font-size: 13px; color: var(--warn); }
.head-warn a { color: inherit; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 9px 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; font: 600 13px var(--ui); text-decoration: none; }
.btn:hover { border-color: var(--text-3); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-danger { background: var(--crit); color: #fff; border-color: transparent; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-link { all: unset; cursor: pointer; color: var(--text-2); font-size: 13px; }
.btn-link:hover { color: var(--text); }
.btn-link:focus-visible { outline: 2px solid var(--focus); border-radius: 4px; }
.btn-text-danger { all: unset; cursor: pointer; color: var(--crit); font: 600 13px var(--ui); padding: 9px 4px; }
.linklike { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linklike:focus-visible { outline: 2px solid var(--focus); border-radius: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.field input, .field select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--text); font: 14px var(--ui); }
.field input[type=password], .field .mono-input { font-family: var(--mono); font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.input-num { width: 92px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--text); font: 13px var(--mono); text-align: right; }

/* Плашка — только отклонения (G2): «всё хорошо» пишем нейтральным текстом или не пишем */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-good { color: var(--good); background: var(--good-soft); }
.pill-mid { color: var(--text-2); background: var(--surface-3); }
.pill-warn { color: var(--warn); background: var(--warn-soft); }
.pill-bad { color: var(--crit); background: var(--crit-soft); }
.pill-sm { padding: 1px 8px; font-size: 10.5px; align-self: flex-start; }
.pill-plain { padding: 0; background: none; color: var(--text-2); font-weight: 500; }
.pill-plain::before { display: none; }
/* Точка статуса у названия (колонка P&L, вердикт) — цвет без подложки */
.st-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; vertical-align: 1px; }
.st-warn { background: var(--warn); } .st-bad { background: var(--crit); } .st-good { background: var(--good); }

.flash { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); }
.flash-error { color: var(--crit); background: var(--crit-soft); border-color: transparent; }
.flash-ok { color: var(--text-2); }
.note { padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.note-warn { color: var(--warn); background: var(--warn-soft); }
.notice { border-radius: 12px; padding: 12px 14px; }
.notice-warn { background: var(--warn-soft); border: 1px solid transparent; }
.notice-warn h2 { color: var(--warn); }
.notice p, .notes p { margin: 4px 0; }
.fb-note { color: var(--warn); font-size: 12px; margin-top: 2px; }
.fb-mark { font: 500 10.5px var(--ui); color: var(--warn); white-space: nowrap; cursor: help; }

/* ── Таблицы ───────────────────────────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; }
th[data-sort] button, th[data-sort-field] button { all: unset; cursor: pointer; }
th[data-sort-field] button:focus-visible { outline: 2px solid var(--focus); border-radius: 4px; }
th[aria-sort="ascending"] button::after { content: " ↑"; } th[aria-sort="descending"] button::after { content: " ↓"; }
.prog { height: 6px; width: 120px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.prog span { display: block; height: 100%; background: var(--text); }
.search { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--text); font: 13px var(--ui); min-width: 220px; }
.tbl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tbl-head h2 { margin-right: auto; }

/* ── Строка списка .lrow (G8): подпись (+вторичное) · значение · шеврон ──────────────────────────────
   Одна строка для вердиктов закупок, проверок сверки, расходов, разделов панелей и списков на телефоне. */
.lrows { display: flex; flex-direction: column; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; min-height: 46px;
  padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit;
  text-align: left; text-decoration: none; width: 100%; }
.lrows > .lrow:last-child, .lrows > :last-child > .lrow { border-bottom: 0; }
.lrow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lrow-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.lrow-title > span:not(.ch-dot):not(.st-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-sub { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrow-val small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); }
.lrow-strong .lrow-title, .lrow-strong .lrow-val { font-weight: 600; }
a.lrow, button.lrow, summary.lrow { cursor: pointer; grid-template-columns: minmax(0, 1fr) auto 12px; border-radius: 0; }
a.lrow::after, button.lrow::after, summary.lrow::after { content: ""; width: 12px; height: 12px; background: var(--chev) center / 12px no-repeat; opacity: .9; }
a.lrow:hover, button.lrow:hover, summary.lrow:hover { background: var(--surface-2); }
a.lrow:focus-visible, button.lrow:focus-visible, summary.lrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
details[open] > summary.lrow::after { transform: rotate(90deg); }
summary.lrow { list-style: none; } summary.lrow::-webkit-details-marker { display: none; }
.lrow-body { padding: 4px 2px 12px; border-bottom: 1px solid var(--line); }

/* ── Раскрывашки ─────────────────────────────────────────────────────────────────────────────────
   details.card — карточка со стрелкой справа; details.fold — лёгкий вариант без рамки (панели, «Подробнее»). */
details > summary { cursor: pointer; list-style: none; } details > summary h2 { display: inline; }
details > summary::-webkit-details-marker { display: none; }
details.card > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; border-radius: 10px; }
details.card > summary h2 { display: block; margin: 0; }
details.card > summary::after, details.fold > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease, border-color .18s ease; }
details.card[open] > summary::after, details.fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.card > summary:hover::after, details.fold > summary:hover::after { border-color: var(--text); }
details.card > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
details.card[open] > summary { margin-bottom: 12px; }
.card-sum { font-size: 13px; color: var(--text-3); font-weight: 400; }
details.fold { border-top: 1px solid var(--line); }
details.fold > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 2px; font-weight: 600; font-size: 14px; }
details.fold > summary::after { width: 7px; height: 7px; border-width: 0 1.8px 1.8px 0; }
details.fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
details.fold[open] > summary { margin-bottom: 4px; }
details.fold > .fold-body { padding: 0 2px 14px; }
.fold-n { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.fold-act { margin-left: auto; }
details.fold > summary:has(.fold-act)::after { margin-left: 14px; }
details.fold-sm > summary { min-height: 38px; font-weight: 500; font-size: 13px; color: var(--text-2); }

/* ── Инструменты: переключатель каналов, сегменты, KPI-плитки ─────────────────────────────────── */
.ch-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 6px; background: var(--ch-other); vertical-align: middle; }
.ch-ozon { background: var(--ch-ozon); } .ch-wb { background: var(--ch-wb); } .ch-avito { background: var(--ch-avito); }
.ch-retail { background: var(--ch-retail); } .ch-wholesale { background: var(--ch-wholesale); } .ch-eaes { background: var(--ch-eaes); }
.ch-other { background: var(--ch-other); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  width: fit-content; max-width: 100%; overflow-x: auto; }
.seg-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-2); text-decoration: none; font: 500 13px var(--ui); white-space: nowrap; cursor: pointer; }
.seg-item:hover { color: var(--text); background: var(--surface-2); }
.seg-item.is-current { background: var(--surface-3); color: var(--text); }
.seg-count { font: 500 11.5px var(--mono); color: var(--text-3); }
.seg-flag { font-size: 11px; color: var(--warn); font-weight: 500; }
.seg-btn { border: 0; background: transparent; color: var(--text-2); font: 600 12.5px var(--ui); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.seg-btn.is-on { background: var(--surface-3); color: var(--text); }
.subnav { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.subnav-item { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--text-2); font-weight: 500; }
.subnav-item.is-current, .subnav-item:hover { background: var(--surface-3); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--line-2); background: transparent; color: var(--text-2); border-radius: 999px; padding: 4px 10px;
  font: 500 12px var(--ui); cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.chip .chip-n { opacity: .65; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* KPI-плитка (G8): только уровень 1, не больше 4 на экране, подпись — одна короткая строка.
   Акцент экрана — крупное число плитки .kpi-hero. Плитка-кнопка (.kpi-btn / button.kpi) открывает раскладку. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpis-3 { grid-template-columns: 1fr 1fr 1.35fr; }
.kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; }
button.kpi, .kpi-btn { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
button.kpi:hover, .kpi-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi-value { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value-sm { font-size: 18px; }
.kpi-sub { font-size: 12.5px; color: var(--text-2); }
.kpi-sub .warn { color: var(--warn); }
.kpi-hero .kpi-value { font-size: 34px; }
.kpis:not(.kpis-3) .kpi-hero { grid-column: span 2; }
.gradebar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-3); margin: 8px 0 4px; gap: 2px; }
.gradebar > * { border: 0; padding: 0; height: 100%; min-width: 0; }
button.gb { cursor: pointer; } button.gb:hover { filter: brightness(1.15); }
.gb-good { background: var(--good); } .gb-mid { background: var(--text-3); } .gb-bad { background: var(--crit); } .gb-none { background: var(--surface-3); }

/* ── Шестерёнка инструмента (.gear-btn + .ops-drawer) — у каждого инструмента ─────────────────── */
.gear-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; transition: color .15s, border-color .15s; }
.gear-btn:hover { color: var(--text); border-color: var(--line-2); }
.gear-btn svg { transition: transform .35s ease; }
.gear-btn:hover svg { transform: rotate(45deg); }
.gear-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gear-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.gear-bad { background: var(--crit); }
.gear-warn { background: var(--warn); }
.ops-tabs-wrap { padding: 12px 20px 0; }
.ops-tabs { width: 100%; display: flex; }
.ops-tabs .seg-item { flex: 1; justify-content: center; }
.ops-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; color: #fff; }
.ops-bad { background: var(--crit); }
.ops-warn { background: var(--warn); color: #1b1300; }
.ops-pane { display: flex; flex-direction: column; gap: 14px; }
.ops-line { margin: 0; font-size: 13px; color: var(--text-2); }
.ops-ok { margin: 0; padding: 12px 2px; color: var(--text-2); font-size: 14px; }
.ops-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ops-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.reasons { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 12.5px; }
.reasons li + li { margin-top: 4px; }

/* ── Боковая панель (раскладка числа, позиция, шестерёнка) — одна для всех вкладок ────────────────
   Шапка одна: строка контекста, заголовок, крупное значение, справа только ✕. Страница не затемняется,
   панель поверх всего и листается сама; прокрутка из неё в страницу не проваливается. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); height: 100vh; height: 100dvh; z-index: 61;
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--shadow); }
.drawer-backdrop, .scrim { display: none !important; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.drawer-titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drawer-ctx { font-size: 12.5px; color: var(--text-3); }
.drawer-head h2 { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.drawer-head p { margin: 2px 0 0; }
.drawer-value { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.drawer-value small { font: 400 13px var(--ui); color: var(--text-3); letter-spacing: 0; margin-left: 6px; }
.drawer-back { all: unset; cursor: pointer; font-size: 12.5px; color: var(--text-2); margin-bottom: 2px; }
.drawer-back:hover { color: var(--text); }
.drawer-actions { display: flex; gap: 8px; align-items: center; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.drawer-body > * { flex-shrink: 0; }
.drawer-body h3 { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; }
.drawer-body ul { margin: 6px 0 0; padding-left: 18px; }
.drawer-warn { margin: 0; padding: 10px 12px; border-radius: 10px; color: var(--warn); background: var(--warn-soft); font-size: 13px; }
.drawer-section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
/* ✕ — картинкой (SVG): текстовый глиф не центрируется ровно в круге */
.x-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 0; line-height: 0; }
.x-btn::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8494' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  display: block; width: 16px; height: 16px; }
.x-btn:hover { background: var(--surface-3); }
.x-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Записи (уровень 3): дата · артикул · штук … сумма; код записи — третьей строкой мелко */
.recs { list-style: none; margin: 0 !important; padding: 0 !important; }
.recs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.recs li:last-child { border-bottom: 0; }
.recs .r-what { min-width: 0; }
.recs .r-sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recs .r-ref, .src-ref { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.recs .is-off { color: var(--text-3); }
.kv { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.how { font-size: 12.5px; color: var(--text-2); }
.how p { margin: 0 0 6px; }
pre.detail { white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; max-height: 260px; overflow: auto; }
table.drill td, table.drill th { padding: 7px 8px; vertical-align: top; }
table.drill .sum-row td { font-weight: 600; border-top: 1px solid var(--line-2); }
table.drill tr.is-off td { color: var(--text-3); }
.drill-num { border: 1px solid var(--line); border-radius: 12px; }
.drill-num > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; }
.drill-num > summary::-webkit-details-marker { display: none; }
.drill-num > summary .drill-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.drill-num[open] > summary { border-bottom: 1px solid var(--line); }
.drill-formula { font-size: 12px; color: var(--text-2); padding: 8px 12px 0; }
.drill-parts { padding: 4px 12px 10px; font-size: 12.5px; }
.drill-parts td { padding: 6px 8px; }
@media (max-width: 860px) { .drawer { width: 100vw; } .search { min-width: 0; flex: 1; } }

/* ── Вход ──────────────────────────────────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; position: relative; }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }

/* ── Кабинеты ──────────────────────────────────────────────────────────────────────────────────── */
.cab-card { display: flex; flex-direction: column; gap: 14px; }
.cab-head { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.cab-head h2 { font-size: 16px; }
.cab-line { margin: 2px 0 0; font-size: 13px; color: var(--text-3); }
.cab-problem { margin: 0; font-size: 13px; color: var(--crit); }
.cab-card:has(.cab-head:hover) { border-color: var(--line-2); }
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.src-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.src-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.src-moysklad { background: var(--ms); } .src-ozon { background: var(--oz); } .src-wb { background: var(--wb); }
.src-abcp { background: var(--rt); }
.cab-new { border-style: dashed; background: transparent; }
.cab-new > summary { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text-2); font-weight: 600; }
.cab-new > summary:hover { color: var(--text); }
.cab-new[open] > summary { margin-bottom: 12px; }
.cab-new form { display: flex; flex-direction: column; gap: 12px; }
.cab-danger > summary h2 { color: var(--text-2); font-size: 14px; }
.cab-danger[open] > summary h2 { color: var(--crit); }
.cab-del-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.cab-del-form input { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--text); font: 14px var(--ui); }
.cab-del-form .btn { align-self: flex-start; }
.login-error { margin: 0; color: var(--crit); font-size: 13px; }

/* ── Подключения: страница канала ─────────────────────────────────────────────────────────────── */
.conn { display: flex; flex-direction: column; gap: 14px; }
.conn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-status { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.conn-form, .conn-settings { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.conn-form .btn, .conn-settings > .btn { align-self: flex-start; }
.setting { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.setting legend { font-weight: 600; padding: 0 6px; }
.setting select, .decision-panel select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--text); font: 13px var(--ui); }
.job-error { color: var(--crit); }
.job-note { color: var(--text-2); }   /* пауза по лимиту площадки — не сбой */
/* «Состояние» на странице канала: проблемы — красным и по-человечески, первыми; тихая пауза по лимиту — одной серой строкой */
.state-block { display: flex; flex-direction: column; gap: 8px; }
.state-line { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.state-bad { color: var(--crit); background: var(--crit-soft); }
.state-neutral { color: var(--text-2); background: var(--surface-2); }
.decision-panel .drawer-body form { display: flex; flex-direction: column; gap: 14px; }
.conn-title { display: flex; align-items: center; gap: 10px; }
.conn-title .src-dot { width: 10px; height: 10px; }
.conn-status .status-dot { margin-right: 7px; }
.conn-status { display: flex; align-items: center; gap: 0; white-space: pre-wrap; flex-wrap: wrap; margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.state-quiet { margin: 0; font-size: 13px; color: var(--text-3); }
.conn-sec > summary h2 { font-size: 15px; }
.conn-sec .lrows { margin-top: -4px; }
.job-bad { color: var(--crit); }
.job-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.job-prog { display: flex; align-items: center; gap: 10px; }
.run-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.run-row .lrow-val small { display: block; font-weight: 400; color: var(--text-3); }
.run-row .lrow-val { font-weight: 500; font-size: 13px; }
.warn-text { color: var(--warn); }
.checks-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check-note { margin: 2px 0 0 26px; }
.conn-decisions h2 { margin-bottom: 4px; }

/* ── «Подключения»: плитки каналов — ровные спокойные карточки; вся плитка — одна ссылка ───────── */
.conn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .conn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .conn-grid { grid-template-columns: minmax(0, 1fr); } }
.tile.conn-tile { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; min-width: 0; min-height: 0; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tile.conn-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.tile.conn-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile-names { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tile-scale { margin: 0; }
.tile-flag { position: absolute; top: 20px; right: 48px; font: 600 11px var(--ui); color: var(--crit); background: var(--crit-soft);
  border-radius: 999px; padding: 3px 9px; line-height: 1.4; }
.conn-tile .tile-head { padding-right: 28px; }
.conn-tile:has(.tile-flag:not([hidden])) .tile-head { padding-right: 150px; }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tile-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 700 14px var(--display); }
.tile-mark-neutral { background: var(--surface-3); color: var(--text-2); font-size: 16px; }
.tile-status { display: flex; align-items: center; gap: 0; font-size: 12.5px; color: var(--text-3); white-space: pre; }
.tile-status .status-dot { margin-right: 7px; }
.tile-status.is-ok { color: var(--text-2); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.tile-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile.conn-tile p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tile-arrow { position: absolute; top: 26px; right: 20px; width: 14px; height: 14px; background: var(--chev) center / 14px no-repeat; transition: transform .15s ease; }
.tile.conn-tile:hover .tile-arrow { transform: translateX(3px); }

/* ── P&L: переключатель периода «‹ период ▾ ›»; вид периода — внутри ▾ ───────────────────────────── */
.period-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.period-step { display: inline-flex; align-items: center; gap: 6px; }
.step-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  color: var(--text-2); text-decoration: none; font-size: 18px; line-height: 1; background: var(--surface); }
.step-btn:hover { color: var(--text); border-color: var(--line-2); }
.step-btn.is-off { opacity: .35; }
.period-pop { position: relative; }
.period-pop > summary { list-style: none; cursor: pointer; }
.period-pop > summary::-webkit-details-marker { display: none; }
.period-current { min-width: 170px; text-align: center; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.period-current::after { content: " ▾"; color: var(--text-3); font-weight: 400; }
.period-pop[open] > .period-current { border-color: var(--line-2); }
.pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; max-height: 380px; overflow-y: auto;
  padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; }
.pop-kinds { width: 100%; }
.pop-kinds .seg-item { flex: 1; justify-content: center; padding: 6px 8px; }
.pop-y { font-size: 12px; color: var(--text-3); margin-bottom: 6px; letter-spacing: .04em; }
.pop-grid { display: grid; gap: 4px; }
.pop-month { grid-template-columns: repeat(4, 1fr); }
.pop-quarter { grid-template-columns: repeat(4, 1fr); }
.pop-half { grid-template-columns: repeat(2, 1fr); }
.pop-year { grid-template-columns: repeat(1, 1fr); }
.pop-item { padding: 7px 0; text-align: center; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13px; }
a.pop-item:hover { background: var(--surface-2); }
.pop-item.is-current { background: var(--primary); color: var(--on-primary); }
.pop-item.is-off { color: var(--text-3); opacity: .45; }

/* ── P&L: KPI и цепочка ─────────────────────────────────────────────────────────────────────────
   Шаги цепочки жирные; итоговые «=» — с фоном; подстроки шага свёрнуты под ним (▸), нулевые скрыты;
   справочные строки — за «Подробнее». Суммы — в тыс. ₽ (подпись в шапке), точные — в раскладке. */
.chain-card { padding: 6px 18px 8px; }
.chain-note { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }
table.chain th, table.chain td { padding: 8px 10px; font-size: 13.5px; }
table.chain thead th { font-size: 11px; vertical-align: bottom; padding-top: 14px; white-space: nowrap; }
table.chain thead th.unit { text-transform: none; letter-spacing: 0; font-size: 12px; }
table.chain th[scope=row] { font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13.5px; white-space: nowrap; }
table.chain .cell { all: unset; cursor: pointer; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
table.chain .cell:hover, table.chain .cell:focus-visible { background: var(--surface-3); outline: none; }
table.chain .nil { color: var(--text-3); }
table.chain .v-s { display: none; }
table.chain .row-step th, table.chain .row-step td { font-weight: 600; }
table.chain .row-result th, table.chain .row-result td { background: var(--surface-2); }
table.chain .row-result th[scope=row] { border-radius: 10px 0 0 10px; }
table.chain .row-sub th[scope=row] { padding-left: 40px; color: var(--text-2); font-weight: 400; }
table.chain .row-sub td { color: var(--text-2); font-weight: 400; }
table.chain .row-ref th[scope=row], table.chain .row-ref td { color: var(--text-2); font-weight: 400; }
table.chain .step:not(.is-open) .row-sub, table.chain .step:not(.is-open) .row-more { display: none; }
table.chain .step.is-open:not(.show-zero) .row-sub.row-zero { display: none; }
table.chain .step.show-zero .row-more { display: none; }
table.chain td:last-child { border-left: 1px solid var(--line); }
table.chain th[scope=row], table.chain thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.chain td:last-child, table.chain thead th:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); }
table.chain .row-result th[scope=row], table.chain .row-result td:last-child { background: var(--surface-2); }
.step-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.step-toggle::before { content: ""; width: 12px; height: 12px; background: var(--chev) center / 12px no-repeat; transition: transform .15s ease; margin-left: -20px; }
.step.is-open .step-toggle::before, .step-ref.is-open .step-toggle::before { transform: rotate(90deg); }
.step-toggle:focus-visible { outline: 2px solid var(--focus); border-radius: 4px; }
table.chain th[scope=row] .step-toggle { padding-left: 20px; }
.step-plain { padding-left: 20px; display: inline-block; }
table.chain .row-more td, table.chain .row-fold th { border-bottom: 1px solid var(--line); }
table.chain .row-more td { padding: 4px 10px 8px 40px; text-align: left; border-left: 0; position: static; }
table.chain .row-fold th { font-weight: 500; color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: 13.5px; padding-top: 12px; }
table.chain tbody tr:last-child td { border-bottom: 1px solid var(--line); }
table.chain tbody:last-child tr:last-child th, table.chain tbody:last-child tr:last-child td { border-bottom: 0; }

/* P&L «Расходы»: список статей только для чтения, правка — в панели */
.exp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.exp-total { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.exp-total small { font: 400 13px var(--ui); color: var(--text-3); margin-left: 8px; letter-spacing: 0; }
.exp-kind { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 8px; }
.exp-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.expense-form { display: flex; flex-direction: column; gap: 12px; }
.expense-form .field input, .expense-form .field select { width: 100%; }
.expense-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.expense-form .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.already { margin: 0; padding: 0; list-style: none; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu .pop { right: 0; left: auto; min-width: 260px; gap: 4px; }
.menu .pop .btn-link { padding: 8px 6px; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; } .nav-label, .rail-foot { display: none; }
  .topbar { padding: 12px 16px; } .page { padding: 18px 16px 48px; }
  .kpis:not(.kpis-3) .kpi-hero { grid-column: 1 / -1; }
  .kpi-value { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* P&L: шестерёнка — ставки канала, строки состава панели */
.rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rate-grid .input-num, .rate-grid select { width: 100%; }
.rate-grid select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--text); font: 13px var(--ui); }
.lrow-total { background: var(--surface-2); border-radius: 10px; padding-left: 10px; padding-right: 10px; border-bottom: 0; margin-top: 4px; }
.drill-parts-list > .ops-sub { margin-bottom: 2px; }
.period-static::after { content: none; }
.exp-note { color: var(--text-3); flex: none; }
.exp-already > summary h2 { font-size: 14px; }
.exp-already .lrow-val { font-weight: 500; color: var(--text-2); }

/* ── Юнит-экономика: 4 колонки (артикул · отдача · на штуку · за окно), группы свёрнуты в конце ───── */
.ue-kpis .kpi-label { text-transform: uppercase; }
.ue-grades .gradebar { margin: 10px 0 6px; }
.ue-list .tbl-head .ue-grade-seg { margin-right: 4px; }
.ue-table tbody tr[data-article] { cursor: pointer; }
.ue-table tbody tr[data-article]:hover, .ue-table tbody tr[data-article]:focus-visible { background: var(--surface-2); outline: none; }
.ue-table td { padding-top: 10px; padding-bottom: 10px; }
.ue-table th:first-child { width: 55%; }
.ue-art { min-width: 0; max-width: 0; }
.ue-code { font-family: var(--mono); font-size: 12.5px; }
.ue-exp { width: 20px; height: 20px; margin: 0 4px 0 -4px; vertical-align: -5px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--chev) center / 11px no-repeat; transition: transform .15s ease; }
.ue-exp:hover { background-color: var(--surface-3); }
.ue-exp[aria-expanded="true"] { transform: rotate(90deg); }
.ue-table tr:has(+ .ue-more-row) td { border-bottom-color: transparent; }
.ue-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 180px)); gap: 10px; padding: 0 0 6px 20px; }
.ue-minis .pu-mini { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ue-minis .pu-mini-l { font-size: 11.5px; color: var(--text-3); }
.ue-minis b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ue-name { display: block; margin: 2px 0 0 20px; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-key { font-weight: 600; }
.ue-sub { display: none; }
.roi-mid { color: var(--text-2); }
.ue-more { margin-top: 12px; }
.ue-list > details.fold { margin-top: 10px; }
.ue-group .lrow-title > span { font-family: var(--mono); font-size: 12.5px; }
.attention-line { margin: -6px 0 0; }
.attention-line .btn-link { color: var(--warn); }
.coeff-row { border-bottom: 1px solid var(--line); }
.coeff-row:last-child { border-bottom: 0; }
.coeff-row > .lrow { border-bottom: 0; }
.coeff-apply { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 0 2px 10px; }
.check-ok { color: var(--text-3); font-weight: 400; }
/* панель позиции: три числа под шапкой и лесенка «Куда уходит цена» */
.ue-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ue-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.ue-stat-l { font-size: 12px; color: var(--text-3); }
.ue-stat b { font: 600 18px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ue-stat small { font-size: 12px; color: var(--text-3); }
.ue-ladder details.ue-line { border-bottom: 1px solid var(--line); }
.ue-ladder details.ue-line > summary.lrow { border-bottom: 0; }
.ue-ladder details.ue-line:last-child { border-bottom: 0; }
.ue-ladder .ue-line-total > summary { background: var(--surface-2); border-radius: 10px; padding-left: 10px; padding-right: 10px; margin-top: 4px; }
.ue-ladder .lrow-body { border-bottom: 0; padding: 2px 2px 12px; }
.ue-sub-ladder { padding-left: 14px; border-left: 2px solid var(--line); }
.ue-sub-ladder .lrow-title, .ue-sub-ladder .lrow-val { font-size: 13px; font-weight: 500; }
/* названия проверок сверки и задач — переносятся, а не обрезаются многоточием */
details[class^="check-"] .lrow-title > span, .job-row .lrow-title > span, .run-row .lrow-sub { white-space: normal; }
.run-row .lrow-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.cab-new > summary::after { display: none; }

/* Кнопка «Наверх» (ui.js): на длинных страницах, после полутора экранов прокрутки */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--text-3); }
.to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }