:root{
  --ground:#F4F7F6; --surface:#FFFFFF; --surface-2:#EAF0EF;
  --fg:#101C1C; --fg-muted:#546463; --fg-faint:#7C8C8A;
  --rule:#D8E1DF; --rule-strong:#B6C4C2;
  --accent:#0B6E75; --accent-fg:#07565B; --accent-soft:#E0EEEF;
  --wait:#8E5407; --wait-bg:#FAF0DC;
  --live:#1B6B45; --live-bg:#E2F0E8;
  --lost:#9A2E41; --lost-bg:#F8E5E8;
  --sans:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D1414; --surface:#141D1D; --surface-2:#1B2626;
  --fg:#E6EDEB; --fg-muted:#9BADAA; --fg-faint:#788987;
  --rule:#24302F; --rule-strong:#3A4948;
  --accent:#4EC0C4; --accent-fg:#7CD7D7; --accent-soft:#0F2E2F;
  --wait:#DFA44C; --wait-bg:#2C2312;
  --live:#5FBF8C; --live-bg:#12281E;
  --lost:#E1808F; --lost-bg:#2B1418;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.5}
a{color:var(--accent-fg);text-decoration:none}
button{font:inherit;font-family:var(--sans)}

/* --- каркас --- */
.shell{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--rule);padding:18px 0;display:flex;flex-direction:column}
.brand{padding:0 18px 16px;border-bottom:1px solid var(--rule);margin-bottom:12px}
.brand b{display:block;font-size:15px;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:10px;color:var(--fg-faint);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1}
.nav a{padding:8px 12px;border-radius:6px;color:var(--fg-muted);font-size:13.5px;cursor:pointer}
.nav a:hover{background:var(--surface-2);color:var(--fg)}
.nav a.on{background:var(--accent-soft);color:var(--accent-fg);font-weight:600}
.who{padding:12px 18px 0;border-top:1px solid var(--rule);margin-top:12px;font-size:12px;color:var(--fg-muted)}
.who b{display:block;color:var(--fg);font-size:13px}
.who button{margin-top:8px;background:none;border:1px solid var(--rule-strong);color:var(--fg-muted);
  border-radius:5px;padding:4px 10px;font-size:12px;cursor:pointer}
.main{padding:24px 28px 60px;overflow-x:auto}
h1{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.sub{color:var(--fg-muted);font-size:13px;margin:0 0 20px}

/* --- элементы --- */
.btn{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer}
.btn.ghost{background:none;border:1px solid var(--rule-strong);color:var(--fg-muted)}
.btn:disabled{opacity:.5;cursor:default}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px 18px;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input,select,textarea{font:inherit;font-family:var(--sans);background:var(--surface);color:var(--fg);
  border:1px solid var(--rule-strong);border-radius:6px;padding:7px 10px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:4px}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);padding:9px 12px;border-bottom:1px solid var(--rule-strong)}
td{padding:9px 12px;border-bottom:1px solid var(--rule);color:var(--fg-muted)}
td:first-child{color:var(--fg)}
tbody tr:hover td{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;white-space:nowrap}
.pill.ok{background:var(--live-bg);color:var(--live)}
.pill.warn{background:var(--wait-bg);color:var(--wait)}
.pill.bad{background:var(--lost-bg);color:var(--lost)}
.pill.neutral{background:var(--surface-2);color:var(--fg-muted)}

/* --- канбан --- */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:16px}
.col{flex:0 0 236px;background:var(--surface-2);border-radius:8px;padding:10px}
.col h3{margin:0 0 4px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.col h3 em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--fg-faint)}
.col .sla{font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);margin-bottom:8px;
  letter-spacing:.06em;text-transform:uppercase}
.deal{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:10px;margin-bottom:8px;cursor:pointer}
.deal:hover{border-color:var(--accent)}
.deal b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.deal .meta{font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.empty{color:var(--fg-faint);font-size:12.5px;padding:14px 4px;text-align:center}
.msg{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px}
.msg.err{background:var(--lost-bg);color:var(--lost)}
.msg.ok{background:var(--live-bg);color:var(--live)}

/* --- логин --- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:26px}
.login h1{font-size:19px;margin-bottom:2px}
.login .sub{margin-bottom:18px}
.login .btn{width:100%;margin-top:6px;padding:9px}
@media (max-width:760px){.shell{grid-template-columns:1fr}.side{border-right:0;border-bottom:1px solid var(--rule)}.main{padding:18px}}

/* ================= сводка (главная) ================= */
.period{display:inline-flex;border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden}
.period button{background:none;border:0;padding:6px 13px;font-size:12.5px;color:var(--fg-muted);cursor:pointer}
.period button+button{border-left:1px solid var(--rule-strong)}
.period button.on{background:var(--accent-soft);color:var(--accent-fg);font-weight:600}

.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-bottom:20px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);display:block;margin-bottom:6px}
.tile .v{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile .n{font-size:11.5px;color:var(--fg-faint);margin-top:3px}
/* статусные плитки: цвет + всегда текстовая подпись, никогда цвет в одиночку */
.tile.attn{border-color:var(--wait)}
.tile.attn .v{color:var(--wait)}
.tile.crit{border-color:var(--lost)}
.tile.crit .v{color:var(--lost)}
.tile.calm .v{color:var(--fg-faint)}
.tile.clickable{cursor:pointer}
.tile.clickable:hover{border-color:var(--accent)}

.panes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}
.pane{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px 18px}
.pane h2{font-size:14px;font-weight:600;margin:0 0 3px}
.pane .hint{font-size:11.5px;color:var(--fg-faint);margin:0 0 14px}

/* полосы: один тон, различение цветом не нужно — каждая подписана */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:128px minmax(0,1fr) 62px;gap:10px;align-items:center}
.bar-lab{font-size:12.5px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--surface-2);border-radius:4px;height:10px;position:relative}
.bar-fill{height:10px;border-radius:0 4px 4px 0;background:var(--accent);min-width:2px}
.bar-fill.wait{background:var(--wait)}
.bar-fill.zero{background:var(--rule-strong);width:2px!important;border-radius:1px}
.bar-val{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--fg)}
.bar-val small{display:block;font-size:10px;color:var(--fg-faint)}

.feed{list-style:none;margin:0;padding:0;font-size:12.5px}
.feed li{padding:8px 0;border-bottom:1px solid var(--rule);color:var(--fg-muted)}
.feed li:last-child{border-bottom:0}
.feed b{color:var(--fg);font-weight:600}
.feed time{font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);display:block;margin-top:2px}

/* ================= карточки (этап 2) ================= */
.crumb{font-size:12.5px;color:var(--fg-faint);margin-bottom:10px}
.crumb a{cursor:pointer;color:var(--accent-fg)}
.crumb a:hover{text-decoration:underline}
.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cardhead h1{margin:0}
.cardhead .sub{margin:4px 0 0}
.clickrow{cursor:pointer}

/* степпер стадий: порядок читается слева направо, текущая — заливкой */
.stepper{display:flex;flex-wrap:wrap;gap:6px}
.step{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--rule);
  color:var(--fg-muted);border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.step:hover{border-color:var(--accent);color:var(--fg)}
.step em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.step.past{opacity:.62}
.step.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-fg);font-weight:600;cursor:default}
.step.on em{color:var(--accent-fg)}

.msg.warn{background:var(--wait-bg);color:var(--wait)}
.msg.warn ul{margin:6px 0 10px;padding-left:20px}
.msg.warn .btn.ghost{border-color:var(--wait);color:var(--wait)}
.pane h2+.hint{margin-top:2px}
.pane .field:last-of-type{margin-bottom:14px}

/* ================= чек-листы (этап 3) ================= */
.progress{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;
  background:var(--surface-2);color:var(--fg-muted);border-radius:3px;padding:2px 6px;margin-left:8px;
  vertical-align:2px}
.progress.full{background:var(--live-bg);color:var(--live)}
.checklist{display:flex;flex-direction:column;gap:6px}
.ci{display:grid;grid-template-columns:minmax(220px,1fr) 132px 150px 140px minmax(150px,0.8fr);
  gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--rule);border-radius:6px;
  background:var(--surface-2)}
.ci>*{min-width:0}
.ci-t{font-size:12.5px;color:var(--fg);line-height:1.35}
.ci-t em{display:block;font-style:normal;font-size:11px;color:var(--fg-faint);margin-top:2px}
.ci select,.ci input{font-size:12px;padding:5px 7px;background:var(--surface)}
/* закрытый пункт приглушается, отклонённый помечен и цветом, и текстом причины */
.ci.done{opacity:.72}
.ci.rej{border-color:var(--lost)}
.ci.rej .ci-t em{color:var(--lost)}
/* ниже ~1000px пяти колонкам уже тесно — переносим в две */
@media (max-width:1000px){
  .ci{grid-template-columns:1fr 1fr;gap:6px}
  .ci-t{grid-column:1/-1}
}

/* таблица «ключ — значение» для утверждённых условий (только чтение) */
table.kv{min-width:0;width:auto}
table.kv td{border-bottom:1px solid var(--rule);padding:6px 14px 6px 0}
table.kv td:first-child{color:var(--fg-faint);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}