/* ============ Токены. Палитра унаследована от отчётов движка ============ */
:root{
  --paper:#F2F5F8; --surface:#FFFFFF; --sunk:#E9EEF3; --raised:#FFFFFF;
  --ink:#141A21; --ink-soft:#4C5866; --ink-faint:#78848F;
  --line:#D8DFE7; --line-strong:#B9C4D0;
  --accent:#2D4A7C; --accent-soft:#E3EAF5; --accent-ink:#FFFFFF;
  --crit:#A63D2F; --crit-soft:#F7E7E3;
  --warn:#A8761B; --warn-soft:#F7EEDC;
  --pass:#4A7657; --pass-soft:#E6EFE8;
  --steel:#4A6B8A; --steel-soft:#E4EAF0;
  --shadow:0 1px 2px rgba(20,26,33,.06), 0 10px 28px -20px rgba(20,26,33,.4);
  --shadow-lift:0 2px 6px rgba(20,26,33,.08), 0 18px 40px -24px rgba(20,26,33,.5);
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F141A; --surface:#171E26; --sunk:#121820; --raised:#1C242E;
    --ink:#E5EAF0; --ink-soft:#A3AFBC; --ink-faint:#7A8695;
    --line:#28323D; --line-strong:#3A4652;
    --accent:#86A9DC; --accent-soft:#1B2634; --accent-ink:#0F141A;
    --crit:#E28873; --crit-soft:#2A1B18;
    --warn:#DDB061; --warn-soft:#2A2317;
    --pass:#84BA95; --pass-soft:#17251C;
    --steel:#92B2CE; --steel-soft:#1A2430;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 22px 44px -26px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --paper:#0F141A; --surface:#171E26; --sunk:#121820; --raised:#1C242E;
  --ink:#E5EAF0; --ink-soft:#A3AFBC; --ink-faint:#7A8695;
  --line:#28323D; --line-strong:#3A4652;
  --accent:#86A9DC; --accent-soft:#1B2634; --accent-ink:#0F141A;
  --crit:#E28873; --crit-soft:#2A1B18;
  --warn:#DDB061; --warn-soft:#2A2317;
  --pass:#84BA95; --pass-soft:#17251C;
  --steel:#92B2CE; --steel-soft:#1A2430;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 22px 44px -26px rgba(0,0,0,1);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:24px; line-height:1.2}
h2{font-size:18px; line-height:1.25}
h3{font-size:15px}
p{margin:0}
a{color:var(--accent)}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-faint)}
.soft{color:var(--ink-soft)}

/* ============ Каркас приложения ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:2px}
.brand b{font-size:15px; font-weight:600; letter-spacing:-.02em}
.brand span{font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.topbar .spacer{flex:1}
.crumb{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);
  padding-left:14px; border-left:1px solid var(--line);
}
.crumb b{font-weight:600; color:var(--ink)}
.livedot{
  width:7px; height:7px; border-radius:50%; background:var(--warn);
  box-shadow:0 0 0 3px var(--warn-soft);
}
@media (prefers-reduced-motion:no-preference){
  .livedot{animation:pulse 1.8s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.ghost{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft);
  border-radius:6px; padding:5px 10px; font-size:12.5px;
}
.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* лента экранов */
.tabs{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:thin;
  padding:0 12px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:53px; z-index:39;
}
.tab{
  border:0; background:transparent; padding:9px 12px 8px; font-size:13px;
  color:var(--ink-faint); white-space:nowrap; border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:7px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:500}
.tab .step{
  font-family:var(--mono); font-size:10px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:3px; padding:0 4px; line-height:15px;
}
.tab[aria-selected="true"] .step{border-color:var(--accent); color:var(--accent)}

main{padding:22px 20px 72px; max-width:1320px; margin:0 auto}
.screen{display:none}
.screen.on{display:block}
@media (prefers-reduced-motion:no-preference){
  .screen.on{animation:rise .22s ease-out}
}
@keyframes rise{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

.head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:16px}
.head .lede{max-width:66ch; margin-top:5px; color:var(--ink-soft); font-size:13.5px}
.tools{display:flex; gap:8px; flex-wrap:wrap}

.btn{
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  border-radius:7px; padding:8px 14px; font-size:13.5px; font-weight:500;
}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--surface); color:var(--accent)}
.btn.sec:hover{background:var(--accent-soft); filter:none}
.btn.quiet{background:transparent; border-color:var(--line-strong); color:var(--ink-soft)}
.btn.quiet:hover{border-color:var(--ink-faint); color:var(--ink); background:transparent}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:none}

/* ============ Засечка критичности: линейка, а не пилюля ============ */
.sev{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); white-space:nowrap}
.sev i{display:block; width:3px; border-radius:2px; background:var(--steel)}
.sev i.h{height:14px}
.sev-critical i{background:var(--crit); width:5px; height:18px}
.sev-high i{background:var(--crit); width:4px; height:15px}
.sev-medium i{background:var(--warn); width:3px; height:12px}
.sev-low i{background:var(--warn); width:2px; height:9px; opacity:.8}
.sev-ok i{background:var(--pass); width:3px; height:12px}
.sev-no_data i{background:var(--steel); width:2px; height:12px}

.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; line-height:1.5;
  padding:1px 7px; border-radius:20px; border:1px solid var(--line-strong); color:var(--ink-soft);
  white-space:nowrap;
}
.pill.warn{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.pill.crit{border-color:var(--crit); color:var(--crit); background:var(--crit-soft)}
.pill.pass{border-color:var(--pass); color:var(--pass); background:var(--pass-soft)}
.pill.info{border-color:var(--steel); color:var(--steel); background:var(--steel-soft)}

/* ============ Плашка границ метода ============ */
.limits{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:0 8px 8px 0;
  padding:12px 16px; display:grid; gap:7px; margin-bottom:18px;
}
.limits h3{font-size:12.5px; color:var(--warn); font-weight:600}
.limits ul{margin:0; padding-left:17px; display:grid; gap:5px; font-size:13px; color:var(--ink-soft)}
.limits li::marker{color:var(--ink-faint)}
.limits b{color:var(--ink); font-weight:600}

/* ============ Общие блоки ============ */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.panel-h{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.panel-h h2{font-size:14px}
.panel-h .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.panel-b{padding:16px}
.grid2{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:940px){.grid2{grid-template-columns:1fr}}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; align-items:baseline}
.kv dt{color:var(--ink-faint)}
.kv dd{margin:0; color:var(--ink)}

/* ============ Дополнения приложения ============ */
.wrap-narrow{max-width:420px; margin:0 auto; padding:64px 20px}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px; box-shadow:var(--shadow); display:grid; gap:16px}
.login-card h1{font-size:21px}
.login-card .sub{font-size:13.5px; color:var(--ink-soft)}
.login-card label{display:grid; gap:5px; font-size:12.5px; color:var(--ink-faint)}
.login-card input{font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink)}
.login-card input:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.err{background:var(--crit-soft); border:1px solid var(--crit); color:var(--crit); border-radius:7px; padding:9px 12px; font-size:13px}
.empty{display:grid; gap:12px; justify-items:start; padding:28px; border:1px dashed var(--line-strong); border-radius:10px; background:var(--surface)}
.empty h2{font-size:16px}
.empty p{font-size:13.5px; color:var(--ink-soft); max-width:62ch}
.status-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:grid; gap:3px}
.stat b{font-family:var(--mono); font-size:20px; font-weight:600}
.stat span{font-size:12px; color:var(--ink-faint)}
.stat.ok b{color:var(--pass)}

/* ============ Проекты ============ */
.projects{display:grid; gap:12px}
.proj{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:15px 18px; display:grid; gap:11px; box-shadow:var(--shadow);
}
.proj.live{border-color:var(--warn)}
.proj-top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.proj-top h3{font-size:17px; letter-spacing:-.02em}
.proj-top .who{font-size:12.5px; color:var(--ink-faint)}
.proj-state{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft)}
.proj-body{display:flex; gap:26px; flex-wrap:wrap; align-items:center}
.figures{display:flex; gap:22px; flex-wrap:wrap}
.fig{display:grid; gap:1px}
.fig b{font-family:var(--mono); font-size:19px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums}
.fig span{font-size:11.5px; color:var(--ink-faint)}
.fig.crit b{color:var(--crit)}
.fig.warn b{color:var(--warn)}
.fig.pass b{color:var(--pass)}
.proj-actions{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap}
.flag{
  display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft);
  background:var(--sunk); border-radius:6px; padding:7px 11px;
}
.flag b{color:var(--ink); font-weight:600}
.flag.crit{background:var(--crit-soft); color:var(--crit)}
.flag.crit b{color:var(--crit)}

/* прогресс-полоса обхода: знаменатель «плывёт», это видно */
.bar{height:5px; border-radius:3px; background:var(--sunk); overflow:hidden; position:relative; min-width:180px; flex:1}
.bar i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease}
.bar.warn i{background:var(--warn)}

/* ============ Идущий прогон ============ */
.stages{display:grid; gap:0; margin-bottom:16px}
.stage{
  display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:center;
  padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.stage:last-child{border-bottom:0}
.stage .dot{
  width:11px; height:11px; border-radius:50%; border:2px solid var(--line-strong);
  justify-self:center; background:var(--surface);
}
.stage.done .dot{background:var(--pass); border-color:var(--pass)}
.stage.now .dot{background:var(--warn); border-color:var(--warn); box-shadow:0 0 0 4px var(--warn-soft)}
.stage.done{color:var(--ink-soft)}
.stage.todo{color:var(--ink-faint)}
.stage .nm{font-weight:500}
.stage.todo .nm{font-weight:400}
.stage .meta{font-family:var(--mono); font-size:12px; color:var(--ink-faint); text-align:right}

.nowbox{background:var(--sunk); border:1px solid var(--line); border-radius:9px; padding:14px 16px; display:grid; gap:11px}
.nowbox h3{font-size:13px; color:var(--ink-soft); font-weight:600}
.counters{display:flex; gap:20px; flex-wrap:wrap; align-items:baseline}
.counters .c{display:grid; gap:0}
.counters .c b{font-family:var(--mono); font-size:22px; font-weight:600; line-height:1.1}
.counters .c span{font-size:11.5px; color:var(--ink-faint)}
.drift{font-size:12.5px; color:var(--warn); display:flex; gap:7px; align-items:baseline}

.log{
  font-family:var(--mono); font-size:12px; line-height:1.75; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  height:216px; overflow:auto; display:grid; align-content:start; gap:0;
}
.log div{display:grid; grid-template-columns:58px 42px 1fr auto; gap:10px; white-space:nowrap}
.log .t{color:var(--ink-faint)}
.log .s2{color:var(--pass)}
.log .s3{color:var(--steel)}
.log .s4{color:var(--crit)}
.log .u{overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft)}
.log .ms{color:var(--ink-faint)}
.log .ev{grid-template-columns:58px 1fr; color:var(--ink)}
.log .ev.warn{color:var(--warn)}

.tick{display:grid; gap:5px}
.tick-row{display:grid; grid-template-columns:66px 1fr auto; gap:11px; align-items:center; font-size:13px; padding:3px 0}
.tick-row .id{font-family:var(--mono); font-size:12px; color:var(--ink-soft)}
.tick-row .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .tick-row{animation:slot .25s ease-out}
}
@keyframes slot{from{opacity:0; transform:translateX(-5px)}to{opacity:1; transform:none}}

.shots{display:flex; gap:7px; flex-wrap:wrap}
.shot-slot{
  width:34px; height:44px; border:1px solid var(--line-strong); border-radius:4px;
  background:var(--sunk); display:grid; place-items:center; font-size:11px; color:var(--ink-faint);
  overflow:hidden;
}
.shot-slot.filled{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.shot-slot.busy{border-color:var(--warn); color:var(--warn)}

/* ============ Результат ============ */
.scores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface);
}
.score{padding:13px 16px; border-right:1px solid var(--line); display:grid; gap:2px}
.score:last-child{border-right:0}
.score b{font-family:var(--mono); font-size:26px; font-weight:600; line-height:1.05}
.score span{font-size:12px; color:var(--ink-faint)}
.score.crit b{color:var(--crit)}
.score.warn b{color:var(--warn)}
.score.pass b{color:var(--pass)}
.score.steel b{color:var(--steel)}

/* мозаика проверок прогона */
.board{display:flex; flex-wrap:wrap; gap:3px; margin:14px 0 2px}
.cell{
  width:26px; height:26px; border-radius:3px; border:1px solid transparent;
  font-family:var(--mono); font-size:9px; display:grid; place-items:center;
  background:var(--sunk); color:var(--ink-faint); cursor:pointer; padding:0;
}
.cell:hover{outline:2px solid var(--ink); outline-offset:1px}
.cell.ok{background:var(--pass-soft); color:var(--pass)}
.cell.issue-low,.cell.issue-medium{background:var(--warn-soft); color:var(--warn)}
.cell.issue-high,.cell.issue-critical{background:var(--crit-soft); color:var(--crit); font-weight:600}
.cell.no_data{background:var(--steel-soft); color:var(--steel)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-faint); margin-top:9px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:baseline}

/* строка находки — засечка слева вместо рамки-карточки */
.findings{display:grid; gap:0; margin-top:6px}
.fnd{
  display:grid; grid-template-columns:5px 64px minmax(0,1fr) auto; gap:0 14px;
  align-items:baseline; padding:11px 14px 11px 0; border-bottom:1px solid var(--line);
  background:transparent; border-left:0; border-right:0; border-top:0; text-align:left; width:100%;
}
.fnd:hover{background:var(--sunk)}
.fnd .rule{align-self:stretch; border-radius:3px; background:var(--line-strong)}
.fnd.s-critical .rule{background:var(--crit)}
.fnd.s-high .rule{background:var(--crit); opacity:.72}
.fnd.s-medium .rule{background:var(--warn)}
.fnd.s-low .rule{background:var(--warn); opacity:.5}
.fnd.s-ok .rule{background:var(--pass); opacity:.55}
.fnd.s-no_data .rule{background:var(--steel); opacity:.5}
.fnd .id{font-family:var(--mono); font-size:12px; color:var(--ink-soft); padding-left:11px}
.fnd .main{display:grid; gap:3px; min-width:0}
.fnd .ttl{font-size:14px; font-weight:500}
.fnd .sum{font-size:13px; color:var(--ink-soft)}
.fnd .aside{display:grid; gap:3px; justify-items:end; text-align:right}
.fnd .aside .n{font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.filters{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.chip{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  border-radius:20px; padding:3px 11px; font-size:12.5px;
}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip .n{font-family:var(--mono); opacity:.7; margin-left:5px}
.search{
  font:inherit; font-size:13px; padding:5px 10px; border:1px solid var(--line-strong);
  border-radius:6px; background:var(--surface); color:var(--ink); min-width:180px;
}

/* ============ Карточка находки ============ */
.fcard{display:grid; gap:16px}
.fcard-head{display:grid; grid-template-columns:5px 1fr; gap:0 16px; align-items:start}
.fcard-head .rule{align-self:stretch; border-radius:3px; background:var(--warn); min-height:56px}
.fcard-head.s-high .rule,.fcard-head.s-critical .rule{background:var(--crit)}
.fcard-head.s-ok .rule{background:var(--pass)}
.fcard-head .hd{display:grid; gap:6px}
.fcard-head .line1{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.fcard-head .line1 .id{font-family:var(--mono); font-size:13px; color:var(--ink-soft)}
.fcard-head h2{font-size:19px}
.fcard-head .sum{font-size:15px; color:var(--ink); max-width:74ch}

.method{background:var(--sunk); border-radius:8px; padding:13px 15px; display:grid; gap:8px}
.method h3{font-size:12.5px; color:var(--ink-soft)}
.method .rows{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; align-items:baseline}
.method .rows dt{color:var(--ink-faint); white-space:nowrap}
.method .rows dd{margin:0; color:var(--ink-soft)}
.method .rows dd b{color:var(--ink); font-weight:500}

.ev-list{display:grid; gap:0}
.ev{
  display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:8px 16px;
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; align-items:baseline;
}
.ev:last-child{border-bottom:0}
.ev dt{color:var(--ink-faint)}
.ev dd{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow-wrap:anywhere}

/* линейка пиксельной ширины Title — специфика SEO-инструмента */
.ruler{display:grid; gap:7px; margin-top:4px}
.ruler-track{
  position:relative; height:52px; background:var(--sunk); border-radius:6px;
  border:1px solid var(--line); overflow:hidden;
}
.ruler-ok{position:absolute; top:0; bottom:0; background:var(--pass-soft); border-inline:1px solid var(--pass)}
.ruler-bar{position:absolute; bottom:0; background:var(--steel); opacity:.85; border-radius:2px 2px 0 0}
.ruler-bar.over{background:var(--warn)}
.ruler-bar.under{background:var(--crit)}
.ruler-scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.ruler-note{font-size:12.5px; color:var(--ink-soft)}
.ruler-note b{color:var(--ink)}

details.proof{border:1px solid var(--line); border-radius:8px; background:var(--surface)}
details.proof+details.proof{margin-top:8px}
details.proof>summary{
  padding:9px 13px; font-size:13.5px; cursor:pointer; display:flex; gap:9px; align-items:center;
  list-style:none;
}
details.proof>summary::-webkit-details-marker{display:none}
details.proof>summary::before{content:"▸"; color:var(--ink-faint); font-size:11px}
details.proof[open]>summary::before{content:"▾"}
details.proof>summary .cnt{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.proof-body{border-top:1px solid var(--line); padding:4px 0}
.url-row{
  display:grid; grid-template-columns:1fr auto; gap:14px; padding:5px 13px;
  font-family:var(--mono); font-size:12px; align-items:baseline; border-bottom:1px dashed var(--line);
}
.url-row:last-child{border-bottom:0}
.url-row span{overflow-wrap:anywhere; color:var(--ink-soft)}
.url-row b{color:var(--ink); font-weight:500; white-space:nowrap}
.more{padding:8px 13px; font-size:12.5px; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.draft{border:1px solid var(--accent); background:var(--accent-soft); border-radius:8px; padding:13px 15px; display:grid; gap:7px}
.draft h3{font-size:12.5px; color:var(--accent)}
.draft p{font-size:13.5px; color:var(--ink); max-width:74ch}
.draft .who{font-size:12px; color:var(--ink-soft)}

/* ============ Покрытие 122 ============ */
.cover-grid{display:flex; flex-wrap:wrap; gap:2px}
.ccell{
  width:19px; height:19px; border-radius:2px; background:var(--sunk); border:0; padding:0; cursor:pointer;
}
.ccell.done{background:var(--pass)}
.ccell.soon{background:var(--line-strong)}
.ccell.api{background:var(--steel); opacity:.55}
.ccell.human{background:var(--warn); opacity:.5}
.ccell:hover{outline:2px solid var(--ink); outline-offset:1px}
.ccell.dim{opacity:.18}
.cover-rows{display:grid; gap:9px}
.crow{display:grid; grid-template-columns:minmax(170px,1.1fr) minmax(0,2fr) auto; gap:14px; align-items:center; font-size:13px}
.crow .track{height:9px; background:var(--sunk); border-radius:5px; overflow:hidden; display:flex}
.crow .track i{display:block; height:100%}
.crow .track i.done{background:var(--pass)}
.crow .track i.api{background:var(--steel); opacity:.55}
.crow .track i.human{background:var(--warn); opacity:.5}
.crow .n{font-family:var(--mono); font-size:12px; color:var(--ink-faint); white-space:nowrap}

.note{font-size:12.5px; color:var(--ink-faint); max-width:74ch}
.hr{height:1px; background:var(--line); margin:22px 0}
.stack{display:grid; gap:14px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
@media (max-width:640px){
  main{padding:16px 16px 60px}
  .fnd{grid-template-columns:5px 1fr; gap:0 12px}
  .fnd .id{grid-column:2; padding-left:0}
  .fnd .main{grid-column:2}
  .fnd .aside{grid-column:2; justify-items:start; text-align:left; margin-top:4px}
  .score b{font-size:22px}
}