:root{
  --ground:#EEF1F4;
  --surface:#FFFFFF;
  --surface-2:#F6F8FA;
  --ink:#16202B;
  --ink-2:#4A5A68;
  --ink-3:#7A8996;
  --line:#D3DBE2;
  --line-soft:#E4EAEF;
  --accent:#0B6E8C;
  --accent-soft:#DCEDF3;

  --sg:#0E8A6E;
  --ru:#B5472C;
  --kz:#C08A1E;
  --other:#6B7A88;

  --ok:#2E7D5B;
  --warn:#B5822A;
  --crit:#AE3A2A;
  --ok-bg:#E2F0E9;
  --warn-bg:#F7EEDA;
  --crit-bg:#F7E4E0;

  --display:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --col:min(1240px,100% - 2.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1319;
    --surface:#131D25;
    --surface-2:#18242D;
    --ink:#DCE6ED;
    --ink-2:#9CADBA;
    --ink-3:#6C7E8C;
    --line:#2A3945;
    --line-soft:#213039;
    --accent:#4FB4D1;
    --accent-soft:#10333F;
    --sg:#36B08F;
    --ru:#DE7355;
    --kz:#DDAE4A;
    --other:#8496A3;
    --ok:#4FB183;
    --warn:#D9A94E;
    --crit:#DB6A57;
    --ok-bg:#123024;
    --warn-bg:#33270F;
    --crit-bg:#331A15;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1319; --surface:#131D25; --surface-2:#18242D;
  --ink:#DCE6ED; --ink-2:#9CADBA; --ink-3:#6C7E8C;
  --line:#2A3945; --line-soft:#213039;
  --accent:#4FB4D1; --accent-soft:#10333F;
  --sg:#36B08F; --ru:#DE7355; --kz:#DDAE4A; --other:#8496A3;
  --ok:#4FB183; --warn:#D9A94E; --crit:#DB6A57;
  --ok-bg:#123024; --warn-bg:#33270F; --crit-bg:#331A15;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.wrap{width:var(--col); margin-inline:auto; padding-block:1.75rem 4rem}

h1,h2,h3{font-family:var(--display); margin:0; line-height:1.15; text-wrap:balance}
h1{font-size:1.9rem; font-weight:700; letter-spacing:-.01em}
h2{font-size:1.25rem; font-weight:600}
h3{font-size:.95rem; font-weight:600}
p{margin:0}

.eyebrow{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- шапка ---------- */
.top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem; padding-bottom:1rem; border-bottom:2px solid var(--ink)}
.top .lede{color:var(--ink-2); font-size:.92rem; max-width:56ch; margin-top:.3rem}
.asof{font-family:var(--mono); font-size:.72rem; color:var(--ink-3); text-align:right; line-height:1.6}

/* ---------- сводка ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-left:1px solid var(--line); margin-top:1.25rem}
.kpi{border:1px solid var(--line); border-left:none; padding:.8rem .9rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.15rem}
.kpi .k{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.kpi .v{font-family:var(--mono); font-size:1.45rem; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi .s{font-size:.75rem; color:var(--ink-2)}
.kpi.attn .v{color:var(--crit)}

/* ---------- навигация ---------- */
nav.sections{display:flex; flex-wrap:wrap; gap:.4rem; margin:1.5rem 0 0}
nav.sections a{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2); border:1px solid var(--line); padding:.4rem .7rem; background:var(--surface)}
nav.sections a:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- секции ---------- */
section{margin-top:2.75rem; scroll-margin-top:1rem}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--line); margin-bottom:1.1rem; flex-wrap:wrap}
.sec-head .note{font-size:.8rem; color:var(--ink-2); max-width:62ch}

.panel{background:var(--surface); border:1px solid var(--line); padding:1.1rem 1.15rem}
.panel + .panel{margin-top:.9rem}
.panel-title{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap}

.chart{width:100%; overflow-x:auto}
.chart svg{display:block; width:100%; height:auto; min-width:640px}

.legend{display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; margin-top:.6rem}
.legend span{display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-2)}
.legend i{width:11px; height:11px; display:inline-block; border-radius:2px}

/* ---------- таблицы ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:760px; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:.45rem .7rem; border-top:1px solid var(--line-soft); font-size:.83rem; white-space:nowrap}
thead th{position:sticky; top:0; background:var(--surface-2); border-top:none; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
td.n{text-align:right; font-family:var(--mono)}
tbody tr:hover{background:var(--surface-2)}

.pill{display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em;
  padding:.12rem .42rem; border-radius:2px; border:1px solid transparent}
.pill.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit); border-color:var(--crit)}
.pill.mute{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}

.dir{display:inline-flex; align-items:center; gap:.35rem; font-weight:500}
.dir i{width:8px; height:8px; border-radius:50%; display:inline-block}

/* полоса заполнения: шкала до физического объёма кузова, отметка — плановая норма */
.fill{position:relative; width:92px; height:9px; background:var(--surface-2); border:1px solid var(--line-soft)}
.fill b{position:absolute; inset:0 auto 0 0; display:block; background:var(--accent)}
.fill b.over{background:var(--sg)}
.fill b.impossible{background:var(--crit)}
.fill u{position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--ink-3)}

/* ---------- позиция по фабрике ---------- */
.pos{display:grid; gap:.1rem}
.pos-row{display:grid; grid-template-columns:minmax(190px,1.4fr) minmax(120px,2fr) minmax(96px,auto);
  gap:.7rem; align-items:center; padding:.35rem .1rem; border-bottom:1px solid var(--line-soft)}
.pos-row .lbl{font-size:.85rem}
.pos-row .lbl small{display:block; color:var(--ink-3); font-size:.72rem; line-height:1.35}
.pos-row .bar{height:12px; background:var(--surface-2); position:relative; border:1px solid var(--line-soft)}
.pos-row .bar b{position:absolute; top:0; bottom:0; display:block}
.pos-row .val{text-align:right; font-family:var(--mono); font-size:.87rem; font-variant-numeric:tabular-nums}
.pos-group{font-family:var(--mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding:.9rem .1rem .25rem}
.pos-row.total{border-top:1px solid var(--line); border-bottom:none; margin-top:.2rem}
.pos-row.total .lbl{font-weight:600}
.pos-row.total .val{font-size:1rem; font-weight:500}

/* ---------- фильтры ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center}
.filters button{font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line); padding:.3rem .6rem; cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface)}
.filters button:hover{border-color:var(--accent)}

.foot{margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:.3rem 1.4rem}

@media (max-width:640px){
  .pos-row{grid-template-columns:1fr auto; }
  .pos-row .bar{display:none}
}

/* ---------- вход и состояние ---------- */
.auth{max-width:420px; margin:12vh auto 0; background:var(--surface); border:1px solid var(--line); padding:1.6rem 1.7rem}
.auth h1{font-size:1.5rem; margin-top:.25rem}
.auth p{color:var(--ink-2); font-size:.9rem; margin-top:.5rem}
.auth form{display:grid; gap:.6rem; margin-top:1.1rem}
.auth label{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.auth input{font:inherit; padding:.55rem .7rem; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); width:100%}
.auth input:focus{border-color:var(--accent)}
.btn{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.6rem .9rem; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent)}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.55; cursor:default}
.auth .row{display:flex; gap:.5rem; flex-wrap:wrap}
.msg{font-size:.85rem; padding:.55rem .7rem; border:1px solid var(--line); background:var(--surface-2); margin-top:.6rem}
.msg.ok{border-color:var(--ok); background:var(--ok-bg); color:var(--ok)}
.msg.err{border-color:var(--crit); background:var(--crit-bg); color:var(--crit)}
.userbar{display:flex; gap:.7rem; align-items:center; font-family:var(--mono); font-size:.72rem; color:var(--ink-3)}
.loading{font-family:var(--mono); font-size:.8rem; color:var(--ink-3); padding:2rem 0}
[hidden]{display:none!important}