/* Одна светлая тема — осознанно: рабочий инструмент, читаемость важнее режимов.
   Нейтрали холодные, акцент синий, шкала отклонений синяя (дешевле) ↔ янтарная (дороже): без красно-зелёного. */
:root {
  --ground: #F5F6F8; --panel: #FFFFFF; --rail: #FFFFFF; --rail-ink: #2B3140; --rail-active: #E9EFFA; --rail-dim: #6F7787;
  --sunk: #EEF0F4; --ink: #1B1F26; --ink-soft: #454B57; --ink-faint: #6B7280; --rule: #D6DAE1; --rule-soft: #E7EAEF;
  --accent: #2457C5; --accent-soft: #E6EEFB; --accent-ink: #FFFFFF;
  --c3: #1E5FB3; --c2: #6A9BE0; --c1: #C7D9F4; --c0: #F1F3F6; --w1: #FBE3C4; --w2: #EFAE5A; --w3: #C6621E;
  --on-cold: #FFFFFF; --on-warm: #2B1A05;
  --stop: #B3261E; --stop-bg: #FCE3E1; --go: #1F5BC2; --go-bg: #E6EEFB; --warn: #8A5200; --warn-bg: #FFF1D6;
  --shadow: 0 1px 2px rgba(27,31,38,.05), 0 12px 32px -20px rgba(27,31,38,.22);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.mono, .num { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
button { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, td.cell:focus-visible, .row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== оболочка ===== */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 16px 0 18px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--rule); }
.brand { padding: 4px 18px 14px; display: flex; align-items: baseline; gap: 8px; }
.brand b { color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.brand span { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 10px; color: var(--rail-dim); letter-spacing: .08em; }
.roles { margin: 0 14px 10px; display: grid; grid-template-columns: 1fr 1fr; background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px; padding: 3px; gap: 3px; }
.roles button { appearance: none; border: 0; background: none; color: var(--rail-ink); font-size: 13px; padding: 7px 4px; cursor: pointer; border-radius: 3px; font-weight: 500; }
.roles button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rail-label { padding: 12px 18px 5px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-dim); }
.navbtn { appearance: none; background: none; border: 0; width: 100%; text-align: left; padding: 9px 18px; color: var(--rail-ink); font: inherit; font-size: 14.5px; cursor: pointer; display: flex; align-items: center; gap: 9px; border-left: 2px solid transparent; }
.navbtn:hover { background: var(--rail-active); }
.navbtn[aria-current="true"] { background: var(--rail-active); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.navbtn .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.navbtn[aria-current="true"] .dot { opacity: 1; background: var(--accent); }
.navbtn .st { margin-left: auto; font-size: 10px; color: var(--rail-dim); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.rail-foot { margin-top: auto; padding: 12px 18px 0; font-size: 11px; color: var(--rail-dim); line-height: 1.45; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { background: var(--panel); border-bottom: 1px solid var(--rule); padding: 13px 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.top h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.top .sub { font-size: 12px; color: var(--ink-faint); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.spacer { flex: 1 1 auto; }
.view { padding: 20px 22px 60px; }
.view[hidden] { display: none; }

/* ===== элементы ===== */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rule); background: var(--panel); border-radius: 3px; font-size: 13.5px; color: var(--ink-soft); }
.pill b { font-weight: 600; color: var(--ink); }
.pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
button.pill { cursor: pointer; }
button.pill:hover { border-color: var(--accent); }
.btn { appearance: none; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 2px; cursor: pointer; }
.btn.ghost { background: var(--panel); color: var(--accent); }
.btn.quiet { background: var(--panel); color: var(--ink-soft); border-color: var(--rule); font-weight: 500; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.bar { background: var(--panel); border-bottom: 1px solid var(--rule); padding: 10px 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar .lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 18px; }
.kpi { background: var(--panel); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.kpi .v { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kpi .k { font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; }
.kpi .v.cold { color: var(--c3); } .kpi .v.warm { color: var(--w3); } .kpi .v.acc { color: var(--accent); }
.tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; white-space: nowrap; display: inline-block; }
.tag.go { color: var(--go); background: var(--go-bg); } .tag.warn { color: var(--warn); background: var(--warn-bg); } .tag.stop { color: var(--stop); background: var(--stop-bg); } .tag.acc { color: var(--accent); background: var(--accent-soft); } .tag.mute { color: var(--ink-faint); background: var(--sunk); }
.card { background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px; }
.card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.note { border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--panel); padding: 13px 16px; margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.note.warn { border-left-color: var(--warn); }
.note b { color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.field input, .field select { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); color: var(--ink); }
.field .hint { font-size: 12px; color: var(--ink-faint); }
h2.sec { font-size: 15px; font-weight: 600; margin: 24px 0 10px; }
h2.sec:first-child { margin-top: 0; }

/* ===== таблицы ===== */
.tablewrap { border: 1px solid var(--rule); background: var(--panel); overflow: auto; max-height: 70vh; }
table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; width: 100%; }
th, td { white-space: nowrap; }
thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--rule); padding: 8px 8px; font-weight: 600; font-size: 12px; color: var(--ink-faint); text-align: center; }
thead th.corner, tbody th { position: sticky; left: 0; z-index: 4; background: var(--panel); border-right: 1px solid var(--rule); text-align: left; padding: 7px 12px; min-width: 210px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
thead th.corner { z-index: 5; }
tbody th { font-weight: 500; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--rule-soft); }
tbody th small { display: block; color: var(--ink-faint); font-size: 10.5px; font-weight: 400; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
thead th.we { color: var(--w3); }
tr.me th, tr.me td { background: var(--sunk); }
tr.me th { font-weight: 700; border-left: 2px solid var(--accent); }
td.cell { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--rule-soft); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 13.5px; cursor: pointer; min-width: 68px; position: relative; }
td.cell.na { color: var(--ink-faint); background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--rule-soft) 4px, var(--rule-soft) 5px); cursor: default; }
td.cell.deep::after { content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
tr.summary td, tr.summary th { border-top: 1px solid var(--rule); background: var(--panel); font-weight: 600; }
tr.summary.first td, tr.summary.first th { border-top: 2px solid var(--ink); }
/* классы шкалы — с приоритетом над фоном строки своего объекта и итоговых строк */
td.cell.d3, .ico.d3 { background: var(--c3); color: var(--on-cold); } td.cell.d2, .ico.d2 { background: var(--c2); color: var(--on-cold); } td.cell.d1 { background: var(--c1); } td.cell.d0, .ico.d0 { background: var(--c0); }
td.cell.u1 { background: var(--w1); } td.cell.u2, .ico.u2 { background: var(--w2); color: var(--on-warm); } td.cell.u3 { background: var(--w3); color: var(--on-warm); }
tr.me td.cell.d0 { background: var(--sunk); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); }
.sw { display: inline-block; width: 22px; height: 12px; border: 1px solid var(--rule); }
table.list td, table.list th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); white-space: normal; }
table.list thead th { text-align: left; position: static; }
table.list tbody tr:hover td { background: var(--sunk); }
table.list tbody tr.row { cursor: pointer; }

/* ===== матрица ===== */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .pair { grid-template-columns: 1fr; } }
.mx { border: 1px solid var(--rule); background: var(--panel); }
.mx h3 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.mx h3 span { font-size: 11px; color: var(--ink-faint); font-weight: 400; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.mx .inner { overflow-x: auto; }
.mx table { font-size: 13px; }
.mx thead th { text-align: left; padding: 9px 10px; font-size: 11.5px; line-height: 1.25; white-space: normal; min-width: 96px; vertical-align: bottom; }
.mx tbody th { min-width: 160px; max-width: 190px; white-space: normal; font-size: 13px; line-height: 1.3; }
.mx td { padding: 6px 9px; border-bottom: 1px solid var(--rule-soft); text-align: right; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; vertical-align: top; }
.mx td.empty { color: var(--ink-faint); text-align: center; }
.mx td.best { background: var(--accent-soft); font-weight: 600; }
.chips { display: flex; gap: 3px; justify-content: flex-end; margin-top: 2px; flex-wrap: wrap; }
.chip { font-size: 10.5px; padding: 1px 5px; border-radius: 2px; font-family: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
.chip.nr { background: var(--stop-bg); color: var(--stop); } .chip.pp { background: var(--warn-bg); color: var(--warn); } .chip.left { background: var(--accent-soft); color: var(--accent); } .chip.meal { background: var(--sunk); color: var(--ink-soft); } .chip.ok { background: var(--go-bg); color: var(--go); }
.obs { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ob { background: var(--panel); padding: 12px 15px; display: flex; gap: 12px; align-items: flex-start; }
.ob .mark { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 11px; padding: 2px 7px; border-radius: 2px; flex: none; margin-top: 1px; }
.ob .mark.hi { background: var(--w2); color: var(--on-warm); } .ob .mark.lo { background: var(--c2); color: var(--on-cold); } .ob .mark.nu { background: var(--sunk); color: var(--ink-soft); }
.ob p { margin: 0; font-size: 13px; line-height: 1.5; } .ob p b { font-weight: 600; } .ob p em { font-style: normal; color: var(--ink-faint); font-size: 12px; display: block; margin-top: 3px; }

/* ===== онбординг ===== */
.search { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.search input, .search select { font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); color: var(--ink); }
.search input { flex: 1 1 260px; }
.results { border: 1px solid var(--rule); background: var(--panel); max-height: 54vh; overflow: auto; }
.res { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--rule-soft); }
.res:hover { background: var(--sunk); }
.res .n { font-weight: 500; }
.res .n small { display: block; color: var(--ink-faint); font-size: 11.5px; font-weight: 400; }
.res .add { appearance: none; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 2px; cursor: pointer; }
.res .add[disabled] { border-color: var(--rule); color: var(--ink-faint); cursor: not-allowed; }
.res .add.in { background: var(--accent); color: var(--accent-ink); }
.picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; min-height: 30px; }
.picked .pk { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 2px; font-size: 12.5px; }
.picked .pk button { appearance: none; border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.quota { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 12px; color: var(--ink-soft); }
.quota b { color: var(--accent); }

/* ===== прогресс ===== */
.prog { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pr { background: var(--panel); padding: 11px 15px; display: grid; grid-template-columns: 1fr 180px 110px; gap: 12px; align-items: center; }
.pr .n { font-weight: 500; } .pr .n small { display: block; color: var(--ink-faint); font-size: 11.5px; font-weight: 400; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.pr .steps { display: flex; gap: 4px; }
.pr .step { flex: 1; height: 6px; background: var(--sunk); border-radius: 1px; }
.pr .step.on { background: var(--accent); }
.pr .step.err { background: var(--stop); }
.pr .s { font-size: 11.5px; color: var(--ink-faint); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; text-align: right; }
.bigbar { height: 8px; background: var(--sunk); border: 1px solid var(--rule); margin: 0 0 14px; }
.bigbar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

/* ===== вход ===== */
.login { max-width: 440px; margin: 8vh auto 0; }
.login .card { padding: 26px 28px; box-shadow: var(--shadow); }
.login h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }
.login p { color: var(--ink-soft); margin: 0 0 18px; font-size: 13.5px; }

/* ===== шаг-шапка ===== */
.stepper { display: flex; gap: 0; margin: 0 0 18px; border: 1px solid var(--rule); background: var(--panel); }
.stepper div { flex: 1; padding: 9px 14px; font-size: 12px; color: var(--ink-faint); border-right: 1px solid var(--rule-soft); display: flex; gap: 8px; align-items: center; }
.stepper div:last-child { border-right: 0; }
.stepper div b { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 11px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule); display: inline-grid; place-items: center; }
.stepper div.on { color: var(--ink); font-weight: 600; } .stepper div.on b { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stepper div.done { color: var(--ink-soft); } .stepper div.done b { background: var(--go-bg); color: var(--go); border-color: var(--go-bg); }
.feed { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ev { background: var(--panel); padding: 11px 15px; display: flex; gap: 12px; align-items: center; }
.ev .ico { width: 26px; height: 26px; border-radius: 2px; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.ev .txt { flex: 1 1 auto; min-width: 0; } .ev .txt b { font-weight: 600; } .ev .txt em { font-style: normal; color: var(--ink-faint); font-size: 12px; display: block; }
.ev .val { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.mock { position: relative; }
.mock::after { content: "МАКЕТ · появится после второго сбора"; position: absolute; top: 8px; right: 10px; font-size: 10px; letter-spacing: .1em; background: var(--warn-bg); color: var(--warn); padding: 3px 9px; border-radius: 2px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; z-index: 2; }
.dim { opacity: .55; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.toggle input { width: 16px; height: 16px; accent-color: var(--accent); }