/* Отступы под вырез экрана — как в оболочке прототипа */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
/* Дизайн — вариант A «фирменный темный» (утвержден 22.10.2026). Тема одна, системную светлую/темную тему не учитываем.
   Шампань — ключевые цифры, ссылки, логотип, заголовки групп. Красный — только кнопки в Telegram, полоса над шапкой и подчеркивание активной вкладки.
   Jost — заголовки, крупные цифры, логотип, разделители капсом; Golos Text — остальной текст. Подписи не мельче 14 px, нажимаемое — не ниже 44 px. */
:root{
  color-scheme:dark;
  --bg:#011328; --surface:#0A2140; --sunk:#0F2A4D; --nav:#061A33;
  --line:#1C3556; --field:#2A4569;
  --ink:#F4ECE1; --muted:#A9B4C4; --faint:#8C99AD; --soft:#C9D2DE;
  --gold:#DEBE9A; --on-gold:#011328; --gold-line:#5C5243;
  --red:#A9151B; --on-red:#F4ECE1;
  --bar:#8F7E69; --slate:#5B7396;
  --accent:var(--gold); --on-accent:var(--on-gold);
  --approx:#C9D2DE; --bad:#F09A8A; --ok:var(--gold);
  --font-display:"Jost","Golos Text",system-ui,sans-serif;
  --font-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --tabs-h:62px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--gold)}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(28px,8.4vw,34px);line-height:1.1}
h2{font-size:20px;line-height:1.25}
h3{font-size:18px;line-height:1.3}
p{margin:0}
.hl{color:var(--gold)}
.num,table{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny,.s{font-size:14px;color:var(--muted)}
.hint{font-size:14px;color:var(--muted)}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Шапка: красная полоса 3 px, логотип (две красные полоски и одна шампань), Telegram — контур шампань */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--bg);border-top:3px solid var(--red);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;padding-block:9px;max-width:1040px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 17px/1 var(--font-display);letter-spacing:.14em;color:var(--gold);text-decoration:none;white-space:nowrap}
.logo:hover{color:var(--gold)}
.logo .mk{display:grid;gap:3px;width:24px;flex:none}
.logo .mk i{display:block;height:4px;border-radius:2px;background:var(--red)}
.logo .mk i:last-child{background:var(--gold)}
.backlink{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--gold);text-decoration:none;white-space:nowrap}
.tg{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:8px 14px;font:500 14px/1 var(--font-body);text-decoration:none;white-space:nowrap}
.tg::after{content:"";position:absolute;inset:-6px -4px}
.tg:hover{color:var(--ink);border-color:var(--ink)}
.tg svg{flex:none}
.tabs{display:flex}
.tabs a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font:500 14px/1.2 var(--font-body);padding:10px 4px;position:relative;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--gold);font-weight:600}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:50%;width:28px;margin-left:-14px;bottom:12px;height:2px;border-radius:2px;background:var(--red)}
.tabs.bottom{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--nav);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);height:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px))}
.tabs.bottom a{display:flex;align-items:center;justify-content:center;padding-bottom:16px;padding-top:12px}
.tabs.top{display:none}
main{padding-block:22px calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom,0px))}
@media (min-width:800px){
  .tabs.bottom{display:none}
  .tabs.top{display:flex;gap:4px;margin-left:24px}
  .tabs.top a{flex:none;padding:12px 12px}
  .tabs.top a[aria-current="page"]::after{bottom:2px}
  main{padding-block:28px 40px}
}
/* Кнопки и поля: кнопки — скругление 14 px, плашки и фильтры — капсулы; основное действие — шампань, Telegram — красный */
button,.btn{font:500 15px/1.2 var(--font-body);border-radius:var(--r);border:1px solid var(--field);background:transparent;color:var(--ink);padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
button:hover,.btn:hover{border-color:var(--gold);color:var(--ink)}
.btn.primary,button.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.btn.primary:hover,button.primary:hover{color:var(--on-gold);filter:brightness(1.08)}
button.primary:disabled{opacity:.6;cursor:progress}
.btn.tgb{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:600;font-size:16px;min-height:52px}
.btn.tgb:hover{color:var(--on-red);filter:brightness(1.15)}
button.link{position:relative;border:0;background:none;padding:0;min-height:0;color:var(--gold);font-size:14px;text-decoration:underline;text-underline-offset:3px}
button.link::after{content:"";position:absolute;inset:-14px -8px}
a.link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);text-decoration:none;font-size:15px}
.explain a{display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
select,input{font:15px/1.2 var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:12px;padding:10px 12px;min-height:46px;width:100%}
select{-webkit-appearance:none;appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DEBE9A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
option{background:var(--surface);color:var(--ink)}
input::placeholder{color:var(--faint)}
select:focus,input:focus{border-color:var(--gold)}
label.f{display:grid;gap:6px;font-size:14px;color:var(--muted);min-width:0}
.err{color:var(--bad);font-size:14px}
.err:empty{display:none}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;align-items:start}
.seg{display:inline-flex;border:1.5px solid var(--gold);border-radius:999px;overflow:hidden;background:transparent}
.seg button{border:0;border-radius:0;min-height:44px;padding:8px 16px;font-size:15px;background:transparent;color:var(--gold)}
.seg button+button{border-left:1.5px solid var(--gold)}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);font-weight:600}
.toggles{display:flex;flex-wrap:wrap;gap:12px 20px}
.tgl{display:flex;align-items:center;gap:10px}
.tl{font-size:14px;color:var(--muted);min-width:62px}
/* Главная */
.lead{color:var(--muted);font-size:16px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:6px;align-content:start;min-width:0}
.tile .v{font:500 30px/1 var(--font-display)}
.tile .l{font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center}
.tile .s{font-size:14px;line-height:1.35;color:var(--muted)}
.tile .v.approx,.approx{color:var(--approx)}
a.tile.stat{text-decoration:none;color:var(--ink)}
a.tile.stat .l{order:-1}
a.tile.stat .v{font-size:34px}
a.tile.stat .s{color:var(--gold)}
a.tile.stat:hover{border-color:var(--gold)}
.stats a.tile.stat:last-child{border-color:var(--gold)}
.stats a.tile.stat:last-child .v{color:var(--gold)}
.stats a.tile.stat:last-child .v.approx{color:var(--approx)}
/* Четыре фильтра: 2×2 на ширине телефона, в строку на планшете */
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.chip-sel{width:100%;min-width:0;min-height:44px;padding:6px 32px 6px 14px;border-radius:999px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:transparent;border-color:var(--field);color:var(--ink);background-position:right 12px center}
@media (max-width:520px){.chips{grid-template-columns:1fr 1fr}}
@media (min-width:640px){.chips{display:flex;flex-wrap:wrap}.chip-sel{width:auto;padding-right:40px}}
.chip-sel.on{border-color:var(--gold);color:var(--gold);font-weight:500}
.sec{display:grid;gap:10px}
.sh{display:flex;align-items:center;gap:10px;margin-top:4px;font:500 14px/1.3 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sh::after,.gh::after{content:"";flex:1;min-width:16px;height:1px;background:var(--field)}
.gh{display:flex;align-items:center;gap:10px;font:500 18px/1.3 var(--font-display);color:var(--gold);margin-top:4px}
/* Строка объекта: название и крупный ROI, под чертой — подписанные значения; прогноз — пунктирная рамка и цифры со знаком «≈» */
.orow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.orow:hover{border-color:var(--gold);color:var(--ink)}
.orow.fc{border-style:dashed;border-color:var(--field)}
.orow.fc:hover{border-color:var(--gold)}
.orow .n{font-weight:600;font-size:17px;line-height:1.3;min-width:0}
.orow .r{font:500 30px/1 var(--font-display);color:var(--gold);text-align:right;white-space:nowrap}
.orow .r small{display:block;font:400 14px/1.2 var(--font-body);color:var(--muted);margin:0 0 4px}
.orow .r.approx{color:var(--approx)}
.orow .r small.r2{margin:6px 0 0}
.orow .bd{grid-column:1/-1;justify-self:start;font-size:14px;line-height:1.2;color:var(--gold);border:1px solid var(--gold-line);border-radius:999px;padding:4px 12px}
.orow .ft{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;border-top:1px solid var(--line);padding-top:10px}
.orow .fx{display:grid;gap:3px;font-size:14px;line-height:1.4;color:var(--muted);align-self:start;min-width:0}
.orow .fx.wide{grid-column:1/-1}
.orow .ri{align-self:start;text-align:right;font-size:14px;line-height:1.4;color:var(--muted)}
.orow .ri b{color:var(--ink);font-weight:600;font-size:16px}
.orow .ri b.approx{color:var(--approx)}
.orow .fx b{color:var(--ink);font-weight:600;font-size:15px}
.empty{color:var(--muted);font-size:15px}
/* Сравнение с похожими */
.sum .q{font-weight:600;font-size:15px}
p.q{font:500 24px/1.2 var(--font-display)}
p.q b{display:block;margin-top:4px;font:500 18px/1.3 var(--font-display);color:var(--soft)}
/* Закрепленный блок с объектом посетителя */
.pin{position:sticky;top:var(--bar-h,62px);z-index:4;background:var(--surface);border:1.5px solid var(--gold);border-radius:18px;padding:12px 16px;display:grid;gap:8px;box-shadow:0 10px 24px rgba(1,19,40,.75)}
.pk{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 14px/1.3 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pk .link{flex:none;font:400 14px/1.2 var(--font-body);letter-spacing:0;text-transform:none}
.pm{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pt{font:600 18px/1.3 var(--font-body);min-width:0}
.pr{font:500 34px/1 var(--font-display);color:var(--gold);white-space:nowrap;text-align:right;max-width:60%}
.pr small{display:block;font:400 14px/1.25 var(--font-body);color:var(--muted);margin-bottom:4px;white-space:normal}
.pin .fx{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.pin .fx b{color:var(--ink);font-weight:600;font-size:15px}
/* Проверить */
.drop{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;border:1.5px dashed var(--field);border-radius:18px;padding:26px 16px;cursor:pointer;background:var(--surface)}
.drop:hover{border-color:var(--gold)}
.drop b{font:500 20px/1.3 var(--font-display);color:var(--gold)}
.drop.busy{cursor:progress;border-style:solid}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.cmp{display:grid;gap:12px}
.cmp .ci{display:grid;gap:4px;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:12px}
.cmp .ci:last-child{border-bottom:0;padding-bottom:0}
.cmp .cl{font:500 16px/1.3 var(--font-display);color:var(--gold)}
.cmp .me b{font-weight:600}
.cmp ul.co{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:14px;line-height:1.4;color:var(--soft)}
.cmp .cn{font-size:14px;color:var(--muted)}
button.orow{font:inherit;text-align:left;width:100%;min-height:0;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--ink)}
button.orow .n{white-space:normal}
button.orow .r{font-size:24px}
button.orow .r small{display:inline;margin:0 0 0 4px}
button.orow>.fx{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 18px;border-top:1px solid var(--line);padding-top:10px}
button.orow.on{background:var(--sunk);border:1.5px solid var(--gold)}
button.orow.on .n,button.orow.on .r{color:var(--gold)}
/* «Спросите ИИ про цифры» */
.ask{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.ask h3{display:flex;align-items:center;gap:8px;font-size:20px}
.ask h3 svg{flex:none}
.ask form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ask input{background:var(--bg)}
.ask button[type=submit]{min-height:46px;padding:0 16px;border-radius:12px}
.ask .ex{display:flex;flex-wrap:wrap;gap:6px}
.ask .ex button{min-height:44px;padding:0 12px;font-size:14px;border-radius:999px;color:var(--soft);background:transparent;border-color:var(--field)}
.ask .ex button:hover{color:var(--ink);border-color:var(--gold)}
.ask .out{display:grid;gap:8px}
.ask .out>p{font-size:15px}
.ask .wait{font-size:15px;color:var(--muted)}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink);font-size:15px}
.arow:hover{border-color:var(--gold);color:var(--ink)}
.arow .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .v{font-weight:600;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.arow .l{grid-column:1/-1;font-size:14px;color:var(--muted)}
/* Карточка */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:640px){.tiles.four{grid-template-columns:repeat(4,1fr)}}
.tiles.scen{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.scen .v{font-size:18px}
.info{position:relative;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--faint);background:none;color:var(--muted);font:600 14px/1 var(--font-body);display:inline-flex;align-items:center;justify-content:center;flex:none}
.info::after{content:"";position:absolute;inset:-11px}
.info:hover{border-color:var(--gold);color:var(--gold)}
.explain{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--soft);display:grid;gap:6px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 16px}
.casc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:14px}
.casc dt{color:var(--muted)}
.casc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.casc .tot{border-top:1px solid var(--line);padding-top:6px;font-weight:600;color:var(--ink)}
.casc .ref{font-size:14px;color:var(--faint)}
/* Карточка: паспорт 2×2, «Доходность», «Сдача», график с итогами, «Куда уходят деньги» */
.pass{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px;align-content:start;min-width:0}
.pc .l,.pc .s{font-size:14px;color:var(--muted)}
.pc .v{font:500 22px/1.2 var(--font-display)}
.pc:last-child .v{font-size:18px;line-height:1.25}
.panel h2{margin-bottom:12px}
.panel>.s{margin-top:8px}
.big{display:grid;gap:2px;margin-bottom:14px}
.big .v{font:500 46px/1 var(--font-display);color:var(--gold)}
.big .v.approx{color:var(--approx)}
.big .l{font-size:16px;font-weight:500;margin-top:4px}
.big .s{font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ygrid{display:grid;gap:8px}
.ym{background:var(--sunk);border-radius:12px;padding:12px;display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:baseline;min-width:0}
.ym .v{font:500 28px/1.05 var(--font-display);grid-row:1/span 2;white-space:nowrap}
.ym.irr{box-shadow:inset 0 0 0 1px var(--gold)}
.ym.irr .v{color:var(--gold)}
.ym.irr .v.approx{color:var(--approx)}
@media (min-width:640px){.ygrid{grid-template-columns:repeat(3,minmax(0,1fr))}.ym{grid-template-columns:1fr;align-content:start}.ym .v{grid-row:auto}}
.ym .l{font-size:16px;font-weight:600;display:flex;gap:8px;align-items:center}
.ym .s{font-size:14px;line-height:1.35;color:var(--muted)}
.yld .explain-slot:not(:empty){margin-top:10px}
.panel.rent{background:none;border:0;padding:0;border-radius:0}
.rent h2{margin-bottom:8px}
.rent .ygrid{grid-template-columns:1fr 1fr}
.rent .ym{grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.rent .ym .v{grid-row:auto;font-size:26px}
.rent .ym .l{font-size:14px;font-weight:400;color:var(--muted)}
#chartbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 16px}
dl.totals{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin:0;font-size:15px;border-top:1px solid var(--line);padding-top:12px}
dl.totals dt{color:var(--muted)}
dl.totals dd{margin:0;text-align:right;font-weight:600;white-space:nowrap}
/* Полоса долей выручки: владельцу — шампань, УК — красный, расходы — сине-серый, ремонт — светло-серый; те же метки у строк */
.shares{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;margin:12px 0 6px}
.shares i{display:block;flex-basis:0;min-width:3px}
.mk{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0;flex:none}
.k-own{background:var(--gold)} .k-uk{background:var(--red)} .k-exp{background:var(--slate)} .k-rep{background:var(--soft)}
.mf{display:grid}
.mr,.mx>summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.mr b,.mx>summary b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mr small{display:block;font-size:14px;color:var(--muted)}
.mr.tot{border-bottom:0;font-weight:600;font-size:17px;align-items:center;padding-top:12px}
.mr.tot b{font:500 24px/1 var(--font-display);color:var(--gold)}
.mr.ref{border-bottom:0;padding-top:0;color:var(--muted);font-size:15px}
.mr.ref b{font-weight:500}
.mx>summary{cursor:pointer;list-style:none}
.mx>summary::-webkit-details-marker{display:none}
.mx>summary span{color:var(--ink)}
.mx>summary span::after{content:" ▾";color:var(--gold);font-size:14px}
.mx[open]>summary span::after{content:" ▴"}
.mx .exp{padding:10px 0 12px 18px;border-bottom:1px solid var(--line)}
.src{font-size:14px;color:var(--muted);text-align:center}
details.fold{border-top:1px solid var(--line)}
details.fold:last-of-type{border-bottom:1px solid var(--line)}
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;color:var(--gold);font-weight:500;font-size:16px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"+";font:500 20px/1 var(--font-display);width:14px}
details.fold[open]>summary::before{content:"−"}
details.fold>.body{padding-bottom:16px;display:grid;gap:12px}
.exp{display:grid;gap:8px}
.exp .it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;font-size:14px;color:var(--soft)}
.exp .it .b{grid-column:1/-1;height:5px;background:var(--sunk);border-radius:3px;overflow:hidden}
.exp .it .b i{display:block;height:100%;background:var(--slate);border-radius:3px}
.exp .sub{grid-column:1/-1;font-size:14px;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:15px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font:500 14px/1.3 var(--font-body);color:var(--muted);background:var(--sunk)}
th a{display:inline-block;padding:14px 0;margin:-14px 0;text-decoration:none}
th:first-child,td:first-child{text-align:left}
tr:last-child td{border-bottom:0}
td .sub{display:block;font-size:14px;color:var(--faint)}
/* Графики: столбики — темная шампань, выбранный — шампань; ниже нуля — сине-серый */
.chart{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.plot{position:relative;display:flex;align-items:stretch;gap:3px;padding-left:74px}
.plot .gl{position:absolute;left:74px;right:0;border-top:1px solid var(--line)}
.plot .gl span{position:absolute;right:calc(100% + 6px);top:-9px;font:14px/1 var(--font-body);color:var(--muted);white-space:nowrap}
.plot .gl.zero{border-top-color:var(--field)}
.col{flex:1;display:flex;flex-direction:column;min-width:2px;position:relative;cursor:pointer}
.col .up,.col .dn{display:flex;width:100%}
.col .up{align-items:flex-end}
.col .dn{align-items:flex-start}
.col i{display:block;width:100%;background:var(--bar)}
.col .up i{border-radius:4px 4px 0 0}
.col .dn i{background:var(--slate);border-radius:0 0 4px 4px}
.col i.hatch{background:repeating-linear-gradient(135deg,var(--bar) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--bar)}
.col i.ramp{background:repeating-linear-gradient(45deg,var(--bar) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--bar)}
.col:hover i,.col.on i{background:var(--gold)}
.col:hover i.hatch,.col.on i.hatch{background:repeating-linear-gradient(135deg,var(--gold) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--gold)}
.col:hover i.ramp,.col.on i.ramp{background:repeating-linear-gradient(45deg,var(--gold) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--gold)}
.col.miss::after{content:"";position:absolute;left:20%;right:20%;bottom:var(--zb,0);border-top:2px dotted var(--faint)}
.col .tag{position:absolute;left:50%;transform:translateX(-50%);font:500 14px/1 var(--font-body);color:var(--muted);white-space:nowrap}
.xax{display:flex;gap:3px;padding-left:74px;font:14px/1.2 var(--font-body);color:var(--muted)}
.xax span{flex:1 1 0;text-align:center;min-width:0;white-space:pre;overflow:visible}
.xax span.end{direction:rtl}
.readout{font-size:15px;color:var(--ink);min-height:22px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:10px;border-radius:2px;background:var(--bar);margin-right:6px;vertical-align:-1px}
.legend i.hatch{background:repeating-linear-gradient(135deg,var(--bar) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--bar)}
.legend i.ramp{background:repeating-linear-gradient(45deg,var(--bar) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--bar)}
.legend i.neg{background:var(--slate)}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note{font-size:14px;color:var(--muted)}
/* Результаты */
.sum{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:8px}
.sum .line{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sum b{font:500 26px/1.1 var(--font-display)}
.sum .line:first-child b{color:var(--gold)}
.sum .small{color:var(--muted)}
.sum .diff{font-weight:600}
.pos{color:var(--ok)} .neg{color:var(--bad)}
.verdict{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:6px}
.verdict>b{font:500 20px/1.25 var(--font-display)}
.verdict span{font-size:15px;color:var(--soft)}
.verdict span b{font:600 15px var(--font-body);color:var(--ink)}
.verdict.ok{border-color:var(--gold)} .verdict.ok>b{color:var(--gold)}
.verdict.warn{border-color:var(--soft)}
.verdict.bad{border-color:var(--bad)} .verdict.bad>b{color:var(--bad)}
ul.clean{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
ul.clean li::marker{color:var(--gold)}
.inputs{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.inputs b{color:var(--ink);font-size:16px}
.cta{display:grid;gap:8px}
.cta .btn{width:100%}
.cta .tiny{text-align:center}
/* «Почему у них выше?» — красная, на всю ширину; три раза расходится красный ореол и замирает */
.btn.why{width:100%;min-height:56px;border-radius:16px;padding:10px 12px;font-size:15px;font-weight:600;text-align:center;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){.btn.why{animation:ring 1.6s ease-out .4s 3}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(169,21,27,.6)}100%{box-shadow:0 0 0 16px rgba(169,21,27,0)}}
/* Когда на экране есть «Почему у них выше?», кнопка канала внизу — контурная, чтобы не было двух красных */
.why~.cta .btn.tgb{background:transparent;border-color:var(--gold);color:var(--gold);font-weight:500}
.why~.cta .btn.tgb:hover{filter:none;color:var(--ink);border-color:var(--ink)}
.row>button[data-cmp]:only-child{flex:1}
.asm{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--soft)}
.asm::before{content:"≈";font:500 14px/1 var(--font-display);border:1px solid currentColor;border-radius:4px;padding:1px 4px}
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom,0px));z-index:5;background:var(--gold);color:var(--on-gold);border:0;border-radius:999px;padding:10px 20px;min-height:44px;font-size:15px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.tray:hover{color:var(--on-gold)}
@media (min-width:800px){.tray{bottom:24px}}
/* Проверка «не робот» (Cloudflare Turnstile): видна, только если нужно нажать */
.ts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom,0px));z-index:7}
@media (min-width:800px){.ts{bottom:24px}}
footer{padding-block:0 calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--line);padding-top:16px}
footer a{min-height:24px}
@media (min-width:800px){footer{padding-block:0 32px}}
.how h2{margin-top:8px}
.how p,.how li{max-width:65ch;font-size:16px;color:var(--ink)}
.how .tw td{white-space:normal;min-width:84px}
@media (prefers-reduced-motion:no-preference){.view{animation:in .16s ease-out}@keyframes in{from{transform:translateY(3px)}to{transform:none}}}