/* Кабинет управленческого учёта ЭМС — демо-стенд. Без внешних зависимостей. */

:root {
  --blue:#1479C4; --blue-soft:#1479C41f;
  --orange:#EE5A24; --orange-soft:#EE5A241f;
  --ok:#1F9D55; --ok-soft:#1F9D551f;
  --warn:#D08700; --warn-soft:#D087001f;
  --bad:#D8412F; --bad-soft:#D8412F1f;

  --bg:#F2F4F7; --surface:#FFFFFF; --surface-2:#F7F9FC;
  --line:#E1E6ED; --line-strong:#CBD3DE;
  --text:#111826; --text-2:#475467; --muted:#8A94A6;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
  --r:14px; --r-sm:9px;
  --nav-w:236px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

:root[data-theme="dark"], :root:not([data-theme]) {}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D1117; --surface:#151B24; --surface-2:#1B222D;
    --line:#252D3A; --line-strong:#333D4D;
    --text:#E9EDF3; --text-2:#A6B0C0; --muted:#6E7A8C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --blue:#4AA3E8; --orange:#FF7A4D; --ok:#3FBF74; --warn:#E9A93A; --bad:#F0685A;
    --blue-soft:#4AA3E826; --orange-soft:#FF7A4D26; --ok-soft:#3FBF7426;
    --warn-soft:#E9A93A26; --bad-soft:#F0685A26;
  }
}
:root[data-theme="dark"] {
  --bg:#0D1117; --surface:#151B24; --surface-2:#1B222D;
  --line:#252D3A; --line-strong:#333D4D;
  --text:#E9EDF3; --text-2:#A6B0C0; --muted:#6E7A8C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --blue:#4AA3E8; --orange:#FF7A4D; --ok:#3FBF74; --warn:#E9A93A; --bad:#F0685A;
  --blue-soft:#4AA3E826; --orange-soft:#FF7A4D26; --ok-soft:#3FBF7426;
  --warn-soft:#E9A93A26; --bad-soft:#F0685A26;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1,h2,h3,p { margin:0; }
button { font:inherit; color:inherit; }

/* ── плашка ДЕМО ───────────────────────────────────────────────────────── */
/* display:flex на классе перебивает браузерное [hidden]{display:none} —
   без этой строки атрибут hidden молча не работает. */
.demo-badge[hidden] { display:none !important; }
.demo-badge {
  position:sticky; top:0; z-index:60;
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:8px 16px; background:var(--orange); color:#fff;
  font-size:12.5px; letter-spacing:.01em;
}
.demo-badge strong { letter-spacing:.09em; font-size:11.5px; }
.demo-badge span { opacity:.93; }

/* ── каркас ────────────────────────────────────────────────────────────── */
.shell { display:flex; min-height:100vh; }

.nav {
  width:var(--nav-w); flex:0 0 var(--nav-w);
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px;
  position:sticky; top:0; height:100vh;
}
.brand { display:flex; gap:10px; align-items:center; padding:0 6px 18px; }
.brand-mark {
  width:38px; height:38px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--blue),#0E5E9B);
  color:#fff; font-weight:800; font-size:13px; letter-spacing:.03em;
  display:grid; place-items:center;
}
.brand-text { display:flex; flex-direction:column; line-height:1.2; }
.brand-text b { font-size:14.5px; }
.brand-text span { font-size:11.5px; color:var(--muted); }

.nav-list { display:flex; flex-direction:column; gap:2px; flex:1; }
/* заголовок роли в меню: тринадцать пунктов подряд читаются как склад функций */
.nav-role {
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  padding:14px 10px 5px; line-height:1.2;
}
.nav-role:first-child { padding-top:2px; }
.nav-role span {
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.nav-role i { font-style:normal; font-size:10.5px; color:var(--line-strong); }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  color:var(--text-2); text-decoration:none; font-size:14px;
  border:none; background:none; cursor:pointer; text-align:left; width:100%;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.nav-item .ic { width:18px; height:18px; flex:none; display:block; opacity:.9; }
.nav-item .ic svg, .tab .ic svg { width:18px; height:18px; display:block; }

.nav-foot { padding-top:12px; border-top:1px solid var(--line); }
.theme-btn {
  width:100%; padding:7px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface-2);
  font-size:12.5px; cursor:pointer; color:var(--text-2);
}
.nav-src { margin-top:10px; font-size:11px; color:var(--muted); line-height:1.4; }
.nav-src em { color:var(--ok); font-style:normal; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {
  display:flex; align-items:center; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; z-index:40;
}
.topbar-title { flex:1; min-width:0; }
.topbar-title h1 { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.topbar-title p { font-size:12.5px; color:var(--muted); margin-top:2px; }
.topbar-date { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; }
.burger { display:none; }

.view { padding:20px 22px 40px; display:flex; flex-direction:column; gap:16px; }

/* ── блоки ─────────────────────────────────────────────────────────────── */
.section-h {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:6px 2px -4px;
}
.section-h h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.section-h small { font-size:12px; color:var(--muted); }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:16px;
}
.grid { display:grid; gap:12px; }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* KPI */
.kpi .kpi-l { font-size:12px; color:var(--muted); }
.kpi .kpi-v {
  font-size:27px; font-weight:750; letter-spacing:-.02em;
  margin-top:5px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kpi-v .u { font-size:15px; font-weight:600; color:var(--text-2); margin-left:6px; }
.kpi .kpi-s { font-size:12px; color:var(--text-2); margin-top:5px; }
.kpi .kpi-s b { font-variant-numeric:tabular-nums; }

.bar-track { height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:9px; }
.bar-fill { height:100%; border-radius:3px; background:var(--blue); }

/* риски */
.risk {
  display:flex; gap:11px; align-items:flex-start; width:100%;
  padding:12px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  cursor:pointer; text-align:left;
}
.risk:hover { border-color:var(--line-strong); }
.risk .dot { width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none; }
.risk > span { display:block; flex:1; min-width:0; }
.risk .rt { display:block; font-size:13.5px; font-weight:600; line-height:1.3; }
.risk .rs { display:block; font-size:12px; color:var(--text-2); margin-top:4px; font-variant-numeric:tabular-nums; }
.risk.bad { background:var(--bad-soft); border-color:transparent; }
.risk.bad .dot { background:var(--bad); }
.risk.warn { background:var(--warn-soft); border-color:transparent; }
.risk.warn .dot { background:var(--warn); }

/* водопад переделов */
.wf { display:flex; gap:7px; align-items:flex-end; overflow-x:auto; padding-bottom:6px; }
.wf-col {
  flex:1 1 0; min-width:88px; overflow:hidden;
  display:flex; flex-direction:column; gap:4px; cursor:default;
}
.wf-bar { height:112px; display:flex; align-items:flex-end; }
.wf-bar i {
  display:block; width:100%; border-radius:5px 5px 2px 2px;
  background:var(--blue); min-height:4px;
}
.wf-col.over .wf-bar i { background:var(--bad); }
.wf-col.warn .wf-bar i { background:var(--warn); }
.wf-name {
  font-size:10.5px; color:var(--text-2); line-height:1.22;
  min-height:38px; padding-top:3px; overflow-wrap:anywhere;
}
.wf-num { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wf-num small { font-weight:500; color:var(--muted); font-size:10px; }
.wf-sub { font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wf-col.over .wf-days { color:var(--bad); font-weight:700; }
.wf-col.warn .wf-days { color:var(--warn); font-weight:600; }

/* таблицы */
table.t { width:100%; border-collapse:collapse; font-size:13.5px; }
table.t th {
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:0 10px 9px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.t td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.t tr:last-child td { border-bottom:none; }
table.t td.n, table.t th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.t tr.clickable { cursor:pointer; }
table.t tr.clickable:hover td { background:var(--surface-2); }
table.t tfoot td { font-weight:700; border-top:2px solid var(--line-strong); border-bottom:none; }

.tag {
  display:inline-block; padding:2px 7px; border-radius:20px;
  font-size:11px; font-weight:650; white-space:nowrap;
}
.tag.ok { background:var(--ok-soft); color:var(--ok); }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.tag.bad { background:var(--bad-soft); color:var(--bad); }
.tag.blue { background:var(--blue-soft); color:var(--blue); }
.tag.mute { background:var(--surface-2); color:var(--muted); }

.delta.up { color:var(--bad); font-weight:650; }
.delta.down { color:var(--ok); font-weight:650; }
.delta.zero { color:var(--muted); }

/* горящие заказы */
.fire { display:grid; gap:9px; }
.fire-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
}
.fire-row:hover { border-color:var(--blue); }
.fire-lag {
  font-variant-numeric:tabular-nums; font-weight:750; font-size:16px;
  color:var(--bad); min-width:44px; text-align:center;
}
.fire-lag small { display:block; font-size:9.5px; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.fire-main b { font-size:13.5px; }
.fire-main span { display:block; font-size:12px; color:var(--text-2); margin-top:2px; }
.fire-meta { text-align:right; font-size:11.5px; color:var(--muted); }

/* загрузка рабочих центров */
.load-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; padding:7px 0; }
.load-name { font-size:13px; }
.load-weeks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.load-w { position:relative; height:30px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.load-w i { position:absolute; left:0; top:0; bottom:0; background:var(--blue); opacity:.85; }
.load-w.over i { background:var(--bad); }
.load-w.high i { background:var(--warn); }
.load-w b {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums;
  mix-blend-mode:normal; color:var(--text);
}
.load-head { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; }
.load-head .load-weeks span { font-size:10.5px; color:var(--muted); text-align:center; }

/* Парето */
.pareto-row { display:grid; grid-template-columns:minmax(0,1fr) 78px; gap:12px; align-items:start; padding:7px 0; }
.pareto-left { min-width:0; }
.pareto-bar { height:13px; border-radius:4px; background:var(--surface-2); overflow:hidden; position:relative; }
.pareto-bar i { position:absolute; inset:0 auto 0 0; background:var(--blue); }
.pareto-bar.org i { background:var(--blue); }
.pareto-bar.brk i { background:var(--bad); }
.pareto-name {
  font-size:12.5px; font-weight:600; color:var(--text); line-height:1.25;
  margin-bottom:5px; overflow-wrap:anywhere;
}
.pareto-cm { font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.35; }
.pareto-val { text-align:right; font-variant-numeric:tabular-nums; font-size:13px; font-weight:650; padding-top:1px; }

/* станки */
.mach {
  display:flex; flex-direction:column; gap:8px; padding:14px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  border-left:3px solid var(--ok);
}
.mach.warn { border-left-color:var(--warn); }
.mach.bad { border-left-color:var(--bad); }
.mach-h { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.mach-h b { font-size:13.5px; line-height:1.3; }
.mach-kv { display:flex; justify-content:space-between; font-size:12px; color:var(--text-2); }
.mach-kv b { font-variant-numeric:tabular-nums; color:var(--text); }

/* терминал */
.term-wrap { display:grid; grid-template-columns:290px minmax(0,1fr); gap:20px; align-items:start; }
.phone {
  width:290px; border-radius:34px; padding:12px;
  background:#11161E; box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
  border:1px solid #262E3A;
}
.phone-scr {
  border-radius:24px; background:var(--surface); padding:18px 16px 20px;
  min-height:470px; display:flex; flex-direction:column;
}
.phone-notch { width:96px; height:5px; border-radius:3px; background:#2A323F; margin:0 auto 12px; }
.term-qr { font-size:10.5px; letter-spacing:.1em; color:var(--muted); text-align:center; margin-bottom:14px; }
.term-order { font-size:11px; color:var(--muted); letter-spacing:.05em; }
.term-prod { font-size:19px; font-weight:750; line-height:1.2; margin-top:3px; }
.term-obj { font-size:13px; color:var(--text-2); margin-top:4px; }
.term-op {
  margin-top:16px; padding:12px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--line);
}
.term-op small { font-size:10.5px; color:var(--muted); letter-spacing:.05em; }
.term-op b { display:block; font-size:15px; margin-top:3px; }
.term-btns { margin-top:auto; display:grid; gap:9px; padding-top:18px; }
.tbtn {
  padding:15px; border-radius:12px; border:none; cursor:pointer;
  font-size:15px; font-weight:700; letter-spacing:.01em;
}
.tbtn.go { background:var(--ok); color:#fff; }
.tbtn.done { background:var(--blue); color:#fff; }
.tbtn.prob { background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); }
.tbtn:disabled { opacity:.4; cursor:default; }
.term-state {
  margin-top:12px; padding:9px 11px; border-radius:9px;
  background:var(--ok-soft); color:var(--ok); font-size:12.5px; font-weight:600;
}
.term-reasons { display:grid; gap:7px; margin-top:12px; }
.term-reasons button {
  padding:11px; border-radius:9px; border:1px solid var(--line-strong);
  background:var(--surface); cursor:pointer; font-size:13.5px; text-align:left;
}
.term-reasons button:hover { border-color:var(--orange); }

.note {
  font-size:12.5px; color:var(--text-2); line-height:1.55;
  padding:12px 14px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.note b { color:var(--text); }
.note + .note { margin-top:9px; }

.timeline { display:grid; gap:0; }
.tl-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; padding:6px 0; font-size:12.5px; }
.tl-track { position:relative; height:20px; background:var(--surface-2); border-radius:4px; }
.tl-plan, .tl-fact { position:absolute; top:3px; height:6px; border-radius:3px; }
.tl-plan { background:var(--line-strong); }
.tl-fact { top:11px; background:var(--blue); }
.tl-row.late .tl-fact { background:var(--bad); }

.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

.tabbar { display:none; }


/* ── отступы внутри карточки ───────────────────────────────────────────────
   `.section-h` задуман как заголовок НАД карточкой и имеет отрицательный
   нижний отступ. Внутри карточки он приклеивал заголовок к содержимому:
   у таблиц это было терпимо, у форм и чек-листов — нет. */
.card > .section-h { margin:0 0 12px; }
.card > .note { margin-top:12px; }
.card > .ff-grid + .ff-foot { margin-top:14px; }
.card > .scroll-x + .note,
.card > .ck-list + .note { margin-top:12px; }

/* подпись под кнопкой формы уезжала за край — пусть переносится строкой ниже */
.ff-foot { align-items:center; }
.ff-fn { flex:1 1 280px; }


/* ── кнопка проигрыша: сборка сметы, разбор звонка ─────────────────────── */
.run-btn {
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:9px 17px; border-radius:20px; border:0; cursor:pointer;
  background:var(--blue); color:#fff; font-size:13px; font-weight:700;
  font-family:inherit; transition:transform .12s ease, filter .12s ease;
}
.run-btn:hover { filter:brightness(1.06); }
.run-btn:active { transform:scale(.972); }
.run-btn.busy { background:var(--surface-2); color:var(--text-2); cursor:progress; }
.run-btn.done { background:var(--surface-2); color:var(--text-2); border:1px solid var(--line-strong); }
.run-dot {
  width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none;
  animation:runpulse .9s ease-in-out infinite;
}
@keyframes runpulse { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.1); } }
.run-done {
  margin-top:12px; padding:11px 14px; border-radius:var(--r-sm);
  background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  color:var(--text); font-size:13px; font-weight:600;
}
/* шаг появляется, а не возникает: видно, что процесс идёт */
.ff, .ev { animation:runin .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes runin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .ff, .ev { animation:none; }
  .run-dot { animation:none; }
}

/* ── чек-лист ──────────────────────────────────────────────────────────── */
.ck-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.ck-head b { font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ck-head span { font-size:12px; color:var(--muted); }
.ck-head .bar-track { flex:1 1 120px; min-width:90px; }
.ck-list { display:flex; flex-direction:column; }
.ck {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-top:1px solid var(--line);
}
.ck:first-child { border-top:0; }
.ck-b {
  width:17px; height:17px; border-radius:5px; flex:none; margin-top:1px;
  border:1.5px solid var(--line-strong); background:var(--surface-2);
}
.ck.ok .ck-b {
  border-color:var(--ok); background:var(--ok);
  box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 9px var(--ok);
}
.ck.bad .ck-b { border-color:var(--bad); background:var(--bad-soft); }
.ck-t { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ck-t b { font-size:13.5px; font-weight:600; }
.ck.ok .ck-t b { color:var(--text-2); }
.ck-t span { font-size:12px; color:var(--muted); }
.ck.bad .ck-t span { color:var(--bad); }
.ck-w { font-size:11.5px; color:var(--muted); white-space:nowrap; flex:none; }

/* ── форма ввода: макет, а не рабочее поле ─────────────────────────────── */
.ff-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; }
.ff { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ff.wide { grid-column:1 / -1; }
.ff-l {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.ff-src {
  font-style:normal; font-size:10px; letter-spacing:.02em; text-transform:none;
  padding:1px 7px; border-radius:20px; white-space:nowrap;
  background:var(--blue-soft); color:var(--blue); font-weight:700;
}
.ff-src.ok   { background:var(--ok-soft);   color:var(--ok); }
.ff-src.warn { background:var(--warn-soft); color:var(--warn); }
.ff-src.mute { background:var(--surface-2); color:var(--muted); }
.ff-v {
  display:block; min-height:38px; padding:9px 11px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text); font-size:14px;
  overflow-wrap:anywhere;
}
/* многострочное значение обязано остаться многострочным: состав заказа,
   слипшийся в одну строку, читается как каша */
.ff-v.area { min-height:66px; white-space:pre-line; }
.ff-empty { color:var(--muted); font-style:normal; }
.ff-h { font-size:11.5px; color:var(--muted); }
.ff-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:13px; }
.ff-btn {
  padding:9px 17px; border-radius:20px; background:var(--blue); color:#fff;
  font-size:13px; font-weight:700; white-space:nowrap;
}
.ff-fn { font-size:12px; color:var(--muted); min-width:0; }
@media (max-width:640px) { .ff-grid { grid-template-columns:minmax(0,1fr); } }

/* «Откуда данные» — строка происхождения цифр на самом экране.
   ЛПР не должен гадать, откуда взялись числа: без этой строки стенд читается
   как красивая выдумка. */
.screen-src {
  display:flex; gap:9px; align-items:baseline; flex-wrap:wrap;
  padding:9px 13px; border-radius:var(--r-sm);
  background:var(--blue-soft); border:1px solid var(--line);
  font-size:12.5px; line-height:1.4; color:var(--text-2);
}
/* Только первый <b> — это подпись «ОТКУДА ДАННЫЕ». Выделения внутри самого
   текста остаются обычным полужирным, иначе они лезут капсом. */
.screen-src > b:first-child {
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); white-space:nowrap; flex:none;
}
.screen-src span { min-width:0; }
.screen-src span b { color:var(--text); font-weight:700; }

/* Меню-шторка на мобильном: без затемнения и крестика её нельзя было закрыть —
   шторка (z-index 70) перекрывала бургер в шапке (z-index 40). */
.nav-backdrop { display:none; }
.nav-close { display:none; }

/* ── адаптив ───────────────────────────────────────────────────────────── */
@media (max-width:1080px) { .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:860px) {
  .nav {
    position:fixed; left:0; top:0; z-index:70; height:100dvh;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 60px rgba(0,0,0,.3);
  }
  .nav.open { transform:none; }
  .nav-backdrop {
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(16,24,40,.45); backdrop-filter:blur(2px);
  }
  .nav-backdrop[hidden] { display:none !important; }
  .nav-close {
    display:flex; align-items:center; justify-content:center; flex:none;
    width:32px; height:32px; margin-left:auto;
    border:1px solid var(--line-strong); border-radius:9px;
    background:var(--surface-2); color:var(--text-2);
    font-size:20px; line-height:1; cursor:pointer;
  }
  .nav-close:hover { border-color:var(--blue); color:var(--text); }
  .burger {
    display:flex; flex-direction:column; gap:4px; justify-content:center;
    width:36px; height:36px; border:1px solid var(--line-strong);
    border-radius:9px; background:var(--surface-2); cursor:pointer; padding:0 8px; flex:none;
  }
  .burger span { display:block; height:2px; background:var(--text); border-radius:2px; }
  .view { padding:14px 13px 96px; gap:13px; }
  .topbar { padding:12px 13px; }
  .topbar-title h1 { font-size:17px; }
  .g4, .g3, .g2 { grid-template-columns:minmax(0,1fr); }
  .g4.keep2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi .kpi-v { font-size:23px; }
  .term-wrap { grid-template-columns:minmax(0,1fr); justify-items:center; }
  .load-row, .load-head { grid-template-columns:minmax(0,1fr); gap:5px; }
  .tl-row { grid-template-columns:minmax(0,1fr); gap:3px; }
  .fire-row { grid-template-columns:auto minmax(0,1fr); }
  .fire-meta { display:none; }
  .card { padding:13px; }
  .wf-col { min-width:66px; }

  .tabbar {
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:65;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab {
    border:none; background:none; cursor:pointer; padding:5px 2px;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:9.5px; color:var(--muted); line-height:1.1;
  }
  .tab .ic { width:19px; height:19px; display:block; }
  .tab .ic svg { width:19px; height:19px; }
  .tab.active { color:var(--blue); font-weight:700; }
}

@media (max-width:400px) { .g4.keep2 { grid-template-columns:minmax(0,1fr); } }

.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── KPI со спарклайном ────────────────────────────────────────────────── */
.kpi-row { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.spark { width:96px; height:30px; flex:none; opacity:.9; margin-bottom:5px; }

/* ── вторая полоса показателей ─────────────────────────────────────────── */
.mini-strip {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
.mini {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; border-top:2px solid var(--line-strong);
}
.mini.ok   { border-top-color:var(--ok); }
.mini.warn { border-top-color:var(--warn); }
.mini.bad  { border-top-color:var(--bad); }
.mini-l { font-size:11px; color:var(--muted); line-height:1.3; min-height:28px; }
.mini-v { font-size:19px; font-weight:750; margin-top:3px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mini-s { font-size:11px; color:var(--text-2); margin-top:3px; }

/* ── канбан ────────────────────────────────────────────────────────────── */
.kanban {
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px; align-items:start; padding-bottom:6px;
}
.kan-col { display:flex; flex-direction:column; gap:8px; min-width:0; }

@media (max-width:1320px) {
  .kanban { display:flex; gap:11px; }
  .kan-col { flex:0 0 206px; }
}
.kan-h {
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  color:var(--text-2); padding:0 2px 7px; border-bottom:2px solid var(--line-strong);
  display:flex; flex-direction:column; gap:3px;
}
.kan-h span { font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:600; }
.kan-card {
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r-sm); padding:9px 10px; cursor:pointer;
}
.kan-card:hover { border-color:var(--blue); border-left-color:var(--blue); }
.kan-card.warn { border-left-color:var(--warn); }
.kan-card.bad  { border-left-color:var(--bad); background:var(--bad-soft); }
.kan-top { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.kan-top b { font-size:12px; font-variant-numeric:tabular-nums; }
.kan-lag { font-size:10.5px; font-weight:700; color:var(--bad); }
.kan-ok  { font-size:10.5px; color:var(--muted); }
.kan-prod { font-size:12.5px; font-weight:650; margin-top:5px; line-height:1.25; }
.kan-obj { font-size:11.5px; color:var(--text-2); margin-top:2px; }
.kan-foot {
  display:flex; justify-content:space-between; margin-top:7px; padding-top:6px;
  border-top:1px solid var(--line); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.kan-foot b { color:var(--text-2); }

/* ── столбики ──────────────────────────────────────────────────────────── */
.bars { display:flex; gap:5px; align-items:flex-end; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.bar-box { width:100%; height:56px; display:flex; align-items:flex-end; }
.bar-box i { width:100%; background:var(--blue); border-radius:3px 3px 1px 1px; opacity:.85; }
.bar-v { font-size:10.5px; font-weight:650; font-variant-numeric:tabular-nums; }
.bar-l { font-size:9.5px; color:var(--muted); }
.bars-unit { font-size:11px; color:var(--muted); margin-top:7px; }

/* ── мини-полоса в таблице ─────────────────────────────────────────────── */
.minibar { height:3px; border-radius:2px; background:var(--line); margin-top:5px; overflow:hidden; }
.minibar i { display:block; height:100%; background:var(--blue); opacity:.7; }

/* ── станки ────────────────────────────────────────────────────────────── */
.mach-note { font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:2px; }

/* ── Парето: подпись под значением ─────────────────────────────────────── */
.pareto-row { grid-template-columns:minmax(0,1fr) 74px; }
.pareto-val small { display:block; font-size:10px; font-weight:500; color:var(--muted); }

/* ── карточка заказа ───────────────────────────────────────────────────── */
.ord-b { font-size:19px; font-weight:750; margin-top:4px; font-variant-numeric:tabular-nums; }
.ord-m { font-size:15px; font-weight:650; margin-top:6px; line-height:1.25; }
.ord-who {
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--text-2);
}

/* ── лента событий ─────────────────────────────────────────────────────── */
.ev-list { display:flex; flex-direction:column; }
.ev { display:grid; grid-template-columns:52px minmax(0,1fr); gap:11px; padding:8px 0; position:relative; }
.ev + .ev { border-top:1px solid var(--line); }
.ev-d { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:1px; }
.ev-b b { display:block; font-size:12.5px; font-weight:600; line-height:1.35; }
.ev-b span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.ev.bad  .ev-b b { color:var(--bad); }
.ev.warn .ev-b b { color:var(--warn); }

/* ── терминал ──────────────────────────────────────────────────────────── */
.term-side { display:grid; gap:12px; max-width:660px; }
.term-op-s { font-size:12px; color:var(--muted); margin-top:4px; }
.term-state.warn { background:var(--warn-soft); color:var(--warn); }
.term-back { border:none; background:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:8px; }

@media (max-width:1240px) { .mini-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px) {
  .mini-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mini-l { min-height:0; }
  .spark { width:76px; }
  .kan-col { flex:0 0 190px; }
  .load-name small { color:var(--muted); margin-left:6px; }
}
@media (max-width:400px) { .mini-strip { grid-template-columns:minmax(0,1fr); } }

.load-name small { display:block; font-size:10.5px; color:var(--muted); }

/* ── тумблер «Сравнить с Битриксом» ────────────────────────────────────── */
.bx-btn {
  display:flex; align-items:center; gap:7px; flex:none;
  padding:7px 12px; border-radius:20px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-2);
  font-size:12.5px; font-weight:600; color:var(--text-2); white-space:nowrap;
}
.bx-btn:hover { border-color:var(--blue); color:var(--text); }
.bx-btn[hidden] { display:none !important; }

/* ── переключатель ниш: те же экраны, другие данные ─────────────────────── */
.niche {
  display:flex; align-items:center; gap:2px; flex:none;
  padding:2px; border-radius:20px;
  border:1px solid var(--line-strong); background:var(--surface-2);
}
.niche[hidden] { display:none !important; }
.niche-b {
  padding:6px 13px; border-radius:18px; border:0; cursor:pointer;
  background:transparent; color:var(--text-2); white-space:nowrap;
  font-size:12.5px; font-weight:600; font-family:inherit;
  transition:background .14s ease, color .14s ease;
}
.niche-b:hover { color:var(--text); }
.niche-b.on {
  background:linear-gradient(180deg, var(--blue), var(--blue-2, var(--blue)));
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
@media (max-width:720px) {
  .niche-b { padding:6px 10px; font-size:12px; }
}
.bx-btn .bx-dot {
  width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex:none;
  transition:background .15s ease;
}
.bx-btn.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.bx-btn.on .bx-dot { background:#fff; }

/* ── бейджи разметки ───────────────────────────────────────────────────── */
.bx { display:none; }
body.bx-on .bx {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  text-transform:none; cursor:help;
}
body.bx-on .bx-yes    { background:var(--ok-soft);   color:var(--ok); }
body.bx-on .bx-manual { background:var(--warn-soft); color:var(--warn); }
body.bx-on .bx-no     { background:var(--bad-soft);  color:var(--bad); }

.bx-sum { display:none; }
body.bx-on .bx-sum {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--blue); box-shadow:var(--shadow);
}
body.bx-on .bx-sum > b { font-size:13.5px; margin-right:2px; }
body.bx-on .bx-sum .bx { display:inline-block; font-size:12px; padding:4px 11px; }
body.bx-on .bx-sum em {
  flex-basis:100%; font-style:normal; font-size:12.5px; color:var(--text-2);
  line-height:1.5; margin-top:2px;
}

/* ── кольца ────────────────────────────────────────────────────────────── */
.rings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
.donut { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.donut svg { width:78px; height:78px; }
.donut b { font-size:17px; font-weight:750; font-variant-numeric:tabular-nums; margin-top:-52px; }
.donut span { font-size:11px; color:var(--muted); line-height:1.35; margin-top:30px; }
.rings-note {
  grid-column:1 / -1; font-size:12.5px; color:var(--text-2); line-height:1.5;
  padding-top:12px; border-top:1px solid var(--line);
}

/* ── тренд-стрелка ─────────────────────────────────────────────────────── */
.trend {
  display:inline-flex; align-items:center; gap:3px; margin-top:4px;
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.trend .arw { width:8px; height:8px; }
.trend.good { color:var(--ok); }
.trend.good .arw { fill:var(--ok); }
.trend.bad { color:var(--bad); }
.trend.bad .arw { fill:var(--bad); }
.trend.zero { color:var(--muted); font-weight:500; }

/* ── крупная плитка без графика ────────────────────────────────────────── */
.kpi.big { border-top:2px solid var(--line-strong); }
.kpi.big.ok   { border-top-color:var(--ok); }
.kpi.big.warn { border-top-color:var(--warn); }
.kpi.big.bad  { border-top-color:var(--bad); }
.kpi.big.blue { border-top-color:var(--blue); }
.kpi.big .kpi-v { font-size:30px; margin-top:6px; }

@media (max-width:980px) { .rings { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; } }
@media (max-width:860px) {
  .topbar { flex-wrap:wrap; }
  .bx-btn { order:3; width:100%; justify-content:center; margin-top:2px; }
  /* восемь экранов в таббар не влезают — прокручиваем горизонтально */
  .tabbar {
    grid-template-columns:none; display:flex; overflow-x:auto;
    scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 74px; }
}
@media (max-width:460px) { .rings { grid-template-columns:minmax(0,1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   СЛОЙ ОТДЕЛКИ
   Плоскость лечится тремя вещами: разной высотой поверхностей, контрастом
   типографической шкалы и градиентом вместо сплошной заливки в графике.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --surface-hi:#FFFFFF;
  --glow-a:rgba(20,121,196,.10);
  --glow-b:rgba(238,90,36,.07);
  --sheen:rgba(255,255,255,.9);
  --ring:rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-hi:#1B2331;
    --glow-a:rgba(74,163,232,.13);
    --glow-b:rgba(255,122,77,.08);
    --sheen:rgba(255,255,255,.055);
    --ring:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --surface-hi:#1B2331;
  --glow-a:rgba(74,163,232,.13);
  --glow-b:rgba(255,122,77,.08);
  --sheen:rgba(255,255,255,.055);
  --ring:rgba(0,0,0,.5);
}

/* фон перестаёт быть листом бумаги */
body {
  background:
    radial-gradient(1100px 520px at 12% -8%,  var(--glow-a), transparent 62%),
    radial-gradient(900px 480px at 96% 4%,    var(--glow-b), transparent 58%),
    var(--bg);
  background-attachment:fixed;
}

/* карточка: подъём, а не рамка */
.card, .risk, .mach, .kan-card, .mini, .phone-scr {
  background-image:linear-gradient(180deg, var(--surface-hi) 0%, var(--surface) 58%);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card, .mach {
  box-shadow:
    inset 0 1px 0 var(--sheen),
    0 1px 2px var(--ring),
    0 14px 32px -22px var(--ring);
}
.card:hover, .mach:hover { box-shadow:inset 0 1px 0 var(--sheen), 0 2px 4px var(--ring), 0 22px 44px -24px var(--ring); }
.risk:hover, .kan-card:hover, .fire-row:hover { transform:translateY(-1px); }

/* типографика: шкала должна дышать, а не быть ровным серым полем */
.kpi .kpi-v, .kpi.big .kpi-v {
  font-size:clamp(28px, 2.6vw, 38px); font-weight:800; letter-spacing:-.035em;
  font-feature-settings:"tnum" 1, "ss01" 1; line-height:1.05;
}
.kpi .kpi-v .u { font-size:.42em; font-weight:650; letter-spacing:0; opacity:.72; }
.kpi-l, .mini-l {
  font-size:10.5px; font-weight:700; letter-spacing:.085em; text-transform:uppercase;
  color:var(--muted);
}
.mini-v { font-size:22px; font-weight:800; letter-spacing:-.025em; }
.section-h h2 { position:relative; padding-left:11px; letter-spacing:.11em; }
.section-h h2::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:12px; border-radius:2px;
  background:linear-gradient(180deg, var(--blue), var(--orange));
}
.topbar-title h1 { font-size:21px; font-weight:800; letter-spacing:-.022em; }

/* шапка и меню отделяются от полотна */
.topbar {
  background:linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow:0 1px 0 var(--line), 0 10px 24px -26px var(--ring);
  backdrop-filter:saturate(1.4) blur(6px);
}
.nav { background:linear-gradient(180deg, var(--surface-hi), var(--surface)); }
.nav-item { position:relative; transition:background .14s ease, color .14s ease; }
.nav-item.active {
  background:linear-gradient(90deg, var(--blue-soft), transparent 85%);
}
.nav-item.active::before {
  content:''; position:absolute; left:-12px; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--blue), var(--orange));
}
.brand-mark { box-shadow:0 6px 16px -8px rgba(20,121,196,.75); }

/* графика: градиент и скруглённый конец данных вместо плоского блока */
.wf-bar i {
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 72%, transparent));
}
.wf-col.over .wf-bar i { background:linear-gradient(180deg, var(--bad), color-mix(in srgb, var(--bad) 68%, transparent)); }
.wf-col.warn .wf-bar i { background:linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 68%, transparent)); }
.bar-box i { border-radius:4px 4px 0 0; }
.pareto-bar i { border-radius:5px; }
.pareto-bar.org i { background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 62%, transparent), var(--blue)); }
.pareto-bar.brk i { background:linear-gradient(90deg, color-mix(in srgb, var(--bad) 78%, transparent), var(--bad)); }
.load-w i { background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 74%, transparent), var(--blue)); }
.load-w.over i { background:linear-gradient(90deg, color-mix(in srgb, var(--bad) 74%, transparent), var(--bad)); }
.load-w.high i { background:linear-gradient(90deg, color-mix(in srgb, var(--warn) 74%, transparent), var(--warn)); }
.bar-fill { background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 70%, transparent), var(--blue)); }
.minibar i { background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 45%, transparent), var(--blue)); }
.donut svg { filter:drop-shadow(0 6px 14px rgba(0,0,0,.16)); }

/* статусы: пилюли читаются как метки, а не как текст */
.tag {
  letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

/* таблицы: шапка приподнята, строки живые */
table.t thead th {
  background:linear-gradient(180deg, var(--surface-hi), transparent);
  position:sticky; top:0; z-index:2;
}
table.t tbody tr { transition:background .12s ease; }
table.t tbody tr:hover td { background:var(--surface-2); }

/* акцент на первой строке показателей */
.grid.g4.keep2 > .card.kpi:first-child { border-top:2px solid var(--blue); }

/* ══════════════════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ
   Одна кривая на всё — cubic-bezier(.22,1,.36,1): быстрый старт, мягкая
   посадка. Каскад появления задаёт порядок чтения, графика прорастает от
   своей базовой линии. Весь вход укладывается примерно в 700 мс.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --ease:cubic-bezier(.22,1,.36,1); }

@keyframes riseIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes growY   { from { transform:scaleY(0); }  to { transform:scaleY(1); } }
@keyframes growX   { from { transform:scaleX(0); }  to { transform:scaleX(1); } }
@keyframes ring    { to   { stroke-dashoffset:var(--to); } }
@keyframes draw    { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes pulse   { 0%,100% { box-shadow:0 0 0 0 currentColor; opacity:1; }
                     55%     { box-shadow:0 0 0 5px transparent; opacity:.55; } }

/* каскад: блоки въезжают по очереди, но не дольше девяти шагов */
.view > * {
  animation:riseIn .40s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 38ms);
}

/* столбики растут от базовой линии, полосы — слева направо */
.wf-bar i { transform-origin:bottom; animation:growY .52s var(--ease) both; animation-delay:.10s; }
.bar-box i { transform-origin:bottom; animation:growY .48s var(--ease) both; animation-delay:.14s; }
.load-w i, .pareto-bar i, .bar-fill, .minibar i, .tl-plan, .tl-fact {
  transform-origin:left; animation:growX .55s var(--ease) both; animation-delay:.14s;
}

/* кольцо прочерчивается по дуге, спарклайн — по своей длине */
.donut circle.val {
  stroke-dasharray:var(--dash); stroke-dashoffset:var(--dash);
  animation:ring .70s var(--ease) .08s forwards;
}
.spark .draw { stroke-dasharray:1; animation:draw .62s var(--ease) .12s both; }

/* критический риск подмигивает один раз, а не мигает постоянно */
.risk.bad .dot { color:var(--bad); animation:pulse 1.1s ease-out 1; }

/* отклик на прикосновение */
.nav-item, .tab, .tbtn, .bx-btn, .theme-btn, .risk, .fire-row, .kan-card {
  transition:transform .14s var(--ease), background .16s ease,
             color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tbtn:active:not(:disabled), .bx-btn:active, .theme-btn:active { transform:scale(.972); }
.risk:active, .fire-row:active, .kan-card:active { transform:translateY(0) scale(.995); }
.tbtn { will-change:transform; }
.tag, .kan-lag { transition:opacity .16s ease; }

/* переключение темы не должно моргать */
.card, .mach, .topbar, .nav, body { transition:background-color .22s ease, border-color .22s ease; }

/* ── доступность: у кого выключены анимации, тот их не получает ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .donut circle.val { stroke-dashoffset:var(--to); }
  .spark .draw { stroke-dasharray:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   АДАПТИВ: ЗАПРЕТ НА РАСПОРКУ
   `1fr` — это `minmax(auto, 1fr)`, то есть колонка не может стать уже своего
   содержимого. Одна широкая таблица внутри распирает грид, а с ним и всю
   страницу. Лечится единообразно: minmax(0,1fr) на треках и min-width:0 на
   элементах, чтобы прокрутка жила внутри .scroll-x, а не в теле документа.
   ══════════════════════════════════════════════════════════════════════════ */


.view > *, .grid > *, .mini-strip > *, .rings > *,
.fire-main, .pareto-left, .ev-b, .load-weeks, .section-h, .note {
  min-width:0;
}
.view > * { max-width:100%; }
.section-h { flex-wrap:wrap; }
.section-h small { min-width:0; overflow-wrap:anywhere; }
.kpi-v, .mini-v, .ord-b { overflow-wrap:anywhere; }

/* прокручиваемая таблица должна выглядеть прокручиваемой */
.scroll-x { position:relative; scrollbar-width:thin; }
.scroll-x::-webkit-scrollbar { height:5px; }
.scroll-x::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:3px; }

@media (max-width:1080px) { .g4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:1240px) { .mini-strip { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:980px)  { .rings { grid-template-columns:repeat(2, minmax(0,1fr)); } }

@media (max-width:860px) {
  .g4, .g3, .g2 { grid-template-columns:minmax(0,1fr); }
  .g4.keep2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mini-strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .term-wrap { grid-template-columns:minmax(0,1fr); }
  .load-row, .load-head, .tl-row { grid-template-columns:minmax(0,1fr); }
  .fire-row { grid-template-columns:auto minmax(0,1fr); }

  /* плашка и шапка не должны съедать пол-экрана */
  .demo-badge { padding:7px 13px; font-size:12px; line-height:1.35; }
  /* row-gap без flex-wrap не работал: переключатель ниш вставал в одну строку
     с заголовком и налезал на него. На узком экране он уходит на свою строку. */
  .topbar { padding:10px 13px; gap:9px; row-gap:8px; flex-wrap:wrap; }
  /* заголовок забирает первую строку целиком, иначе длинное название экрана
     выдавливает дату и переключатель в кашу */
  .topbar-title { flex:1 1 auto; }
  .niche { order:5; flex:1 1 auto; }
  .niche-b { flex:1 1 0; text-align:center; }
  .topbar-date { order:6; margin-left:auto; text-align:right; }
  .topbar-title h1 { font-size:17px; }
  .topbar-title p { display:none; }
  .topbar-date { font-size:11px; }
  .bx-btn { padding:6px 12px; font-size:12px; }

  /* таблицы на узком экране: мельче кегль, компактнее ячейка */
  table.t { font-size:12.5px; }
  table.t th { font-size:10px; padding:0 7px 8px; }
  table.t td { padding:8px 7px; }
  .card { padding:12px; }
  .rings { row-gap:18px; }
  .donut svg { width:70px; height:70px; }
}

@media (max-width:460px) {
  .rings { grid-template-columns:minmax(0,1fr); }
  .g4.keep2 { grid-template-columns:minmax(0,1fr); }
  .mini-strip { grid-template-columns:minmax(0,1fr); }
  .view { padding:12px 11px 96px; }
  .phone { width:100%; max-width:290px; }
}