:root{
  --ground:#0E1116; --panel:#151A21; --raise:#1C232C; --ink:#E9ECF1; --muted:#9BA4B2; --line:#27303B;
  --accent:#5B8CFF; --accent-ink:#0B1530; --good:#45C486; --warn:#F2A24A; --crit:#FF7A70;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body{background:var(--ground); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.45}
a{color:var(--accent)}
.muted{color:var(--muted)} .small{font-size:12.5px} .hidden{display:none !important}
.err{color:var(--crit)} .ok{color:var(--good)} .warn{color:var(--warn)}
.app{display:flex; min-height:100vh}
nav.side{flex:0 0 240px; background:var(--panel); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:14px; position:sticky; top:0; height:100vh}
.logo{font-weight:700; font-size:17px; padding:0 8px}
.logo span{display:block; font-weight:400; font-size:12.5px; color:var(--muted)}
.grp{display:flex; flex-direction:column; gap:2px}
.grp h3{margin:6px 8px 4px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.grp a{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--ink); opacity:.85; text-decoration:none; min-height:38px}
.grp a:hover{background:var(--raise); opacity:1}
.grp a[aria-current="page"]{background:var(--raise); opacity:1; box-shadow:inset 3px 0 0 var(--accent)}
.bn{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--raise); color:var(--muted); font-size:12px; margin-right:4px}
.bn.big{width:30px; height:30px; font-size:16px; vertical-align:middle; background:rgba(91,140,255,.16); color:var(--accent)}
.who{margin-top:auto; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; gap:10px}
main{flex:1; min-width:0; padding:18px 22px 48px; display:flex; flex-direction:column; gap:14px}
.head h1{margin:0; font-size:22px}
.head p{margin:4px 0 0; color:var(--muted)}
.note{background:rgba(242,162,74,.1); border:1px solid rgba(242,162,74,.35); color:var(--ink) !important; border-radius:8px; padding:6px 10px; display:inline-block}
h2{margin:0; font-size:16px} h3{margin:0 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px}
.card.flush{padding:0} .pad{padding:12px 14px}
.card.empty{padding:28px}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.f{display:flex; flex-direction:column; gap:4px; min-width:120px}
.f.grow{flex:1 1 200px}
.f label, label{font-size:12px; color:var(--muted)}
select, input{font:inherit; color:var(--ink); background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:7px 10px; min-height:38px; max-width:100%}
button, .btn{font:inherit; border:0; background:var(--accent); color:var(--accent-ink); font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; min-height:38px; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
button.ghost{background:var(--raise); color:var(--ink); font-weight:500; border:1px solid var(--line)}
button.ghost[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.seg{display:inline-flex; background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px}
.seg button{background:transparent; color:var(--muted); font-weight:500; padding:6px 10px; min-height:32px}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:600}
.actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{background:var(--raise); border:1px solid var(--line); border-radius:10px; padding:6px 10px; display:flex; flex-direction:column; min-width:150px}
.chip b{font-size:13px} .chip .s{font-size:12px; color:var(--muted)}
.chip.bad{border-color:rgba(255,122,112,.5)} .chip.good{border-color:rgba(69,196,134,.45)}
.tablewrap{overflow:auto; max-height:70vh; border-top:1px solid var(--line)}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:13px}
th, td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; vertical-align:top}
thead th{position:sticky; top:0; background:var(--panel); z-index:1; font-weight:600; color:var(--muted); font-size:12px}
th.auto{color:#7e8796; font-style:italic}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer} tbody tr:hover td{background:var(--raise)}
td.wrap{white-space:normal; min-width:220px; max-width:360px}
.badge{display:inline-block; border-radius:999px; padding:1px 8px; font-size:12px; background:var(--raise); border:1px solid var(--line)}
.badge.auto{background:rgba(69,196,134,.14); border-color:rgba(69,196,134,.4); color:var(--good)}
.badge.pause{color:var(--muted)}
.badge.err{background:rgba(255,122,112,.12); border-color:rgba(255,122,112,.4); color:var(--crit)}
dialog{background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; width:min(1100px, 96vw); max-height:90vh; padding:16px}
dialog::backdrop{background:rgba(0,0,0,.55)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:12px}
@media (max-width: 900px){ .split{grid-template-columns:1fr} nav.side{display:none} }
dl.fields{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13px}
dl.fields dt{color:var(--muted)} dl.fields dt.auto::after{content:" · считает софт"; color:#6c7584; font-size:11px}
dl.fields dd{margin:0; word-break:break-word}
body.center{display:grid; place-items:center; min-height:100vh; padding:20px}
.card.auth{width:min(400px, 100%); display:flex; flex-direction:column; gap:12px; padding:22px}
.card.auth label{display:flex; flex-direction:column; gap:4px}
.card.auth h1{margin:6px 0 0; font-size:20px}
.grid-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:10px; align-items:end}
.grid-form label{display:flex; flex-direction:column; gap:4px}
.grid-form label.check{flex-direction:row; align-items:center; gap:8px; color:var(--ink)}
.grid-form .wide{grid-column:1 / -1}
.wide-input{flex:1; min-width:280px}
.tabs{align-self:flex-start}
td input{min-height:32px; padding:4px 8px; width:170px}

h3.gap{margin-top:18px}
td.mark{width:22px; padding-right:0; color:var(--warn)}
tr.draft td{background:rgba(242,162,74,.06)}
tr.newrow td{background:rgba(91,140,255,.08)}
.was{color:var(--muted); text-decoration:line-through; margin-right:6px}
.now{color:var(--warn); font-weight:600}
.grid-form.compact{grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
/* тепловая карта: цвет задаётся переменной --h (0 — красный, 120 — зелёный) */
table.heat td.hc, table.hc-tab td.hc{background:hsla(var(--h), 72%, 44%, .78); color:#fff}
table.heat tbody.hg tr.child{display:none}
table.heat tbody.hg:hover tr.child, table.heat tbody.hg.open tr.child{display:table-row}
table.heat tbody.hg tr.ghead td{font-weight:600; border-top:2px solid var(--line)}
table.heat tbody.hg.open tr.ghead td.gname, table.heat tbody.hg:hover tr.ghead td.gname{color:var(--accent)}
table.heat td.aname{padding-left:26px}
.tip-on{color:var(--good)} .tip-off{color:var(--crit)} .tip-tr{color:var(--accent)}
.heat-demo{display:inline-block; width:120px; height:10px; border-radius:4px; vertical-align:middle; background:linear-gradient(90deg, hsl(0,72%,44%), hsl(60,72%,44%), hsl(120,72%,44%))}
ul.concl{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
/* блок 2 АОД */
tr.sub td{background:var(--raise); color:var(--muted); font-weight:600; font-size:12.5px}
tr.red td{background:rgba(255,122,112,.09)} tr.red td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
tr.sub.red td{color:var(--crit)}
tr.lowst td{background:rgba(242,162,74,.07)}
.bar{display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--raise); border:1px solid var(--line); vertical-align:middle; overflow:hidden}
.bar i{display:block; height:100%; background:var(--good)} .bar.over i{background:var(--crit)}
pre.msg{white-space:pre-wrap; background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:10px; max-height:46vh; overflow:auto; font:12.5px/1.5 ui-monospace, monospace; margin:6px 0 14px}
input.w70{width:70px} input.w80{width:80px} input.w130{width:130px} input.w140{width:140px}
tr.edit td{cursor:default} tr.edit:hover td{background:transparent}
/* настройки: слот API-ключа — зелёный подключён, красный истёк/нет */
input.secret{-webkit-text-security:disc; font-family:ui-monospace, monospace}
.keyslot{display:flex; align-items:center; gap:6px; border-radius:10px; padding:3px 4px 3px 8px; border:1px solid var(--line)}
.keyslot input{min-width:230px; flex:1}
.keyslot .km{font-weight:700}
.keyslot.key-ok{background:rgba(69,196,134,.12); border-color:rgba(69,196,134,.55)} .keyslot.key-ok .km{color:var(--good)}
.keyslot.key-ok input::placeholder{color:var(--good)}
.keyslot.key-soon{background:rgba(69,196,134,.08); border-color:rgba(242,162,74,.7)} .keyslot.key-soon .km{color:var(--warn)}
.keyslot.key-soon input::placeholder{color:var(--warn)}
.keyslot.key-bad{background:rgba(255,122,112,.12); border-color:rgba(255,122,112,.6)} .keyslot.key-bad .km{color:var(--crit)}
.keyslot.key-bad input::placeholder{color:var(--crit)}
.small-btn{min-height:30px; padding:4px 10px; font-size:12.5px}
.grid-form .wide-key{grid-column:span 2}
.keyslot input::placeholder{font-family:var(--font)} .keyslot input{min-width:260px}
#sendBar{margin:8px 0 12px; flex-wrap:wrap}
button.ghost.danger{color:var(--crit); border-color:rgba(255,122,112,.5)} button.ghost.danger:hover{background:rgba(255,122,112,.12)}
/* блок 5 прогноз поставки */
table.sup td.cb, table.sup th.cb{width:34px; text-align:center}
table.sup td.b{font-weight:600}
table.sup tr.allrow td{background:rgba(242,162,74,.08)}
table.sup tr.off td{color:var(--muted)}
table.sup td.ship{font-weight:700; color:var(--good)}
table.sup td.ship.off, table.sup tr.off td.ship{color:var(--muted); font-weight:500}
table.sup td.ship.nosel{background:rgba(255,122,112,.18); color:var(--crit)}
table.sup tr.sg td{background:rgba(91,140,255,.10); font-weight:600}
table.sup tr.sz td{background:rgba(242,162,74,.06)}
table.sup tr.rg td:nth-child(2){padding-left:28px}
table.sup tr.rg.d2 td:nth-child(2){padding-left:44px} table.sup tr.rg.d3 td:nth-child(2){padding-left:60px}
table.sup tr.ar td:first-child{white-space:nowrap}
table.sup .tg{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:5px; border:1px solid var(--line); background:var(--raise); cursor:pointer; font-weight:700; line-height:1}
table.sup tr.open > td:first-child .tg{border-color:var(--accent); color:var(--accent)}
table.sup tbody tr{cursor:default}
input[type=checkbox]{min-height:0; width:17px; height:17px; padding:0; accent-color:var(--accent); vertical-align:middle}
/* блок 1: «Сегодня» — компактная таблица вместо плиток */
.card.compact{padding:10px 14px} .card.compact h2{font-size:15px}
.tablewrap.short{max-height:260px; margin-top:8px; border:1px solid var(--line); border-radius:8px}
table.dense th, table.dense td{padding:4px 10px; font-size:12.5px}
table.dense tr.badrow td{background:rgba(255,122,112,.07)}
table.dense tbody tr{cursor:pointer}
/* блок 1: правка прямо в таблице */
td.ed{cursor:text; position:relative}
td.ed:hover{outline:1px dashed var(--accent); outline-offset:-3px}
td .inl{min-height:30px; padding:3px 6px; font-size:13px; width:100%; min-width:90px}
label.inline{display:inline-flex; align-items:center; gap:6px; color:var(--ink)}
/* АОД: ответственные и компетенции */
.setgrid{display:grid; grid-template-columns:minmax(0, 3fr) minmax(280px, 1fr); gap:12px; align-items:start}
@media (max-width: 1200px){ .setgrid{grid-template-columns:1fr} }
.howto{background:rgba(69,196,134,.08); border:1px solid rgba(69,196,134,.35); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:13px; line-height:1.7}
.cat{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border-radius:6px; font-weight:700; font-size:12px; color:#0b1530}
.cat.cA{background:#6fcf7f} .cat.cB{background:#f2b84b} .cat.cC{background:#ff8a80} .cat.big{min-width:34px; height:34px; font-size:15px; border-radius:9px}
table.staff th.tA, table.staff td.tA{background:rgba(111,207,127,.06)} table.staff th.tB, table.staff td.tB{background:rgba(242,184,75,.06)} table.staff th.tC, table.staff td.tC{background:rgba(255,138,128,.06)}
table.staff tr.off td{opacity:.55}
.who2{display:flex; gap:10px; align-items:center} .who2 input{margin-top:3px; min-height:28px; padding:3px 6px; font-size:12.5px}
.ava{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, #5B8CFF, #8B5BFF); color:#fff; font-weight:700; font-size:12px; flex:0 0 34px}
.cycgrid{display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:8px 10px; align-items:end; margin:10px 0}
.cycgrid label{display:flex; flex-direction:column; gap:3px; font-size:11.5px}
textarea{font:inherit; color:var(--ink); background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; resize:vertical}
.cycgrid input{width:100%; min-width:0} .setgrid > .card{min-width:0}
p.legend{margin:0; padding:6px 14px 10px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px} p.legend b{color:var(--ink)}
table.sup td.ship.fb{background:rgba(242,184,75,.18); color:var(--warn)}
table.sup tr.totrow td{background:rgba(69,196,134,.12); font-weight:700; border-bottom:2px solid var(--line)}

/* блок 3: склейки карточками, ABC как в парсере (ярче пастели парсера) */
.abc{display:inline-block; min-width:34px; padding:1px 6px; border-radius:5px; font-weight:700; font-size:12px; text-align:center; color:#0E1116; background:#5b6470; margin-right:4px}
.abc-A{background:#2E9E44} .abc-AA{background:#59B86A} .abc-AAA{background:#8CCF98}
.abc-B{background:#E0A21B} .abc-BB{background:#E9BC57} .abc-BBB{background:#F1D592}
.abc-C{background:#D9534A} .abc-CC{background:#E5837B} .abc-CCC{background:#EFB1AB}
.abc-none{background:var(--raise); color:var(--muted)}
.legend-row{margin:4px 0; line-height:1.9}
.hcards{display:flex; gap:10px; padding:12px 12px 80px; align-items:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity}
.hcard{border:1px solid var(--line); border-radius:10px; background:var(--raise); overflow:hidden; display:flex; flex-direction:column}
.hcard.attn{border-color:var(--warn)}
.hcard.wide{width:max-content; max-width:calc(100vw - 340px)}
.hc-head{padding:10px 12px 8px; border-bottom:1px solid var(--line); background:var(--panel)}
.hc-title{display:flex; align-items:center; gap:6px; font-size:14.5px}
.hc-sub{font-size:12px; margin-top:3px}
.hc-verdict{list-style:none; margin:6px 0 0; padding:0; font-size:12.5px; display:flex; flex-direction:column; gap:2px}
.hc-verdict .v-need, .hc-verdict .v-move{color:var(--warn); font-weight:600} .hc-verdict .v-out{color:var(--crit)} .hc-verdict .v-ok{color:var(--good)}
table.hc-tab, table.hc-full{width:100%; border-collapse:collapse; font-size:12.5px}
table.hc-tab th, table.hc-full th{font-weight:500; color:var(--muted); font-size:11.5px; padding:4px 6px; text-align:left}
table.hc-tab td, table.hc-full td{padding:3px 5px; border-top:1px solid var(--line); white-space:nowrap}
table.hc-tab td.nm b{display:block; font-weight:600} table.hc-tab td.nm small{color:var(--muted)}
td.abc-cell{width:44px}
td.rk{color:#fff; font-size:15px; text-align:center; width:22px}
tr.out td:first-child{box-shadow:inset 4px 0 0 var(--crit)}
td.flag{white-space:nowrap; font-weight:600; font-size:12px}
.f-need{color:var(--warn); font-weight:600} .f-move{color:var(--accent); font-weight:600} .f-out{color:var(--crit); font-weight:600}
.hc-more{align-self:flex-start; margin:6px 10px 10px; padding:3px 10px; font-size:12.5px}
.hc-full-wrap{overflow-x:auto}
/* блок 4: таблица как в PBI */
.dates{display:flex; align-items:center; gap:6px} .dates input{width:150px}
.quick{display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:4px; font-size:12px}
button.link{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font-size:12px}
.nmpick{display:flex; gap:4px} .nmpick input{width:230px}
details.dd{position:relative; min-width:220px}
details.dd summary{list-style:none; cursor:pointer; padding:7px 30px 7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--raise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px}
details.dd summary::after{content:'▾'; position:absolute; right:10px; top:7px; color:var(--muted)}
details.dd summary::-webkit-details-marker{display:none}
.dd-panel{position:absolute; z-index:30; top:calc(100% + 4px); left:0; width:320px; max-height:420px; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.45)}
.dd-q{width:100%; margin-bottom:6px} .dd-all{font-weight:600; padding:4px 2px; border-bottom:1px solid var(--line)}
.dd-list{overflow:auto; padding-top:4px} .dd-list label{display:block; padding:3px 2px; cursor:pointer; font-size:13px} .dd-g{color:var(--muted); font-size:11.5px; margin:6px 0 2px; text-transform:uppercase; letter-spacing:.03em}
table.ptab{border-collapse:separate; border-spacing:0; font-size:12.5px; min-width:100%}
table.ptab th{position:sticky; background:var(--raise); z-index:2; font-weight:500; padding:5px 8px; border-bottom:1px solid var(--line); white-space:normal; min-width:84px; vertical-align:bottom}
table.ptab tr.g0 th{top:0; height:28px} table.ptab tr.g1 th{top:0; height:28px} table.ptab tr.g0 + tr.g1 th{top:28px}
table.ptab tr.g2 th{top:28px} table.ptab tr.g0 ~ tr.g2 th{top:56px}
table.ptab th.cgrp{text-align:center; color:var(--muted); border-left:1px solid var(--line); font-size:12px}
table.ptab th.per{text-align:center; font-weight:600; border-left:2px solid var(--line)} table.ptab th.per.before, table.ptab td.before, table.ptab th.before{color:var(--muted)}
table.ptab th.sortable{cursor:pointer} table.ptab th.sortable.desc::after{content:' ▾'} table.ptab th.sortable.asc::after{content:' ▴'}
table.ptab td{padding:4px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
table.ptab .sticky-col{position:sticky; left:0; z-index:3; background:var(--panel); min-width:230px; max-width:320px; overflow:hidden; text-overflow:ellipsis}
table.ptab thead .sticky-col{z-index:4; background:var(--raise)}
table.ptab tr.tot td{font-weight:700; background:var(--raise)} table.ptab tr.tot td.sticky-col{background:var(--raise)}
table.ptab tr.ghead td{font-weight:600; cursor:pointer} table.ptab tr.ghead:hover td{background:rgba(91,140,255,.06)}
table.ptab tr.child td.sticky-col{padding-left:24px; color:var(--muted)}
table.ptab td.hsoft{background:hsla(var(--h), 65%, 45%, .30)}
table.ptab td.better{background:rgba(69,196,134,.28)} table.ptab td.worse{background:rgba(255,122,112,.25)}

/* лента склеек: узкие карточки слева направо, листаем вбок; при наведении карточка выезжает поверх соседей */
.hslot{flex:0 0 236px; position:relative; scroll-snap-align:start}
.hslot.wide{flex:0 0 auto}
.hcard.mini{width:236px}
.hcard.mini .hc-title b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.3}
.hcard .hc-sub{font-size:11.5px}
.hc-badges{display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px; font-size:12px} .hc-badges:empty{display:none}
.hcard.mini .hc-more-info{display:none}
.hcard.mini.hov .hc-more-info{display:block}
.hcard.mini .hc-body{max-height:62vh; overflow-y:auto}
.hcard.mini td.nm{max-width:132px; overflow:hidden; text-overflow:ellipsis} .hcard.mini td.nm small{display:block; overflow:hidden; text-overflow:ellipsis}
.hcard.mini td.dcol, .hcard.mini th.dcol{padding:0; transition:padding .25s ease}
.hcard.mini .dc{max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .3s ease, opacity .25s ease}
.hcard.mini.hov{position:absolute; top:0; left:0; width:max-content; min-width:236px; z-index:8; box-shadow:0 10px 34px rgba(0,0,0,.6)}
.hcard.mini.hov.to-left{left:auto; right:0}
.hcard.mini.hov td.dcol, .hcard.mini.hov th.dcol{padding:3px 6px}
.hcard.mini.hov .dc{max-width:130px; opacity:1}
.hcard.mini.hov td.nm{max-width:none}
.hcard.mini .hc-head{width:0; min-width:100%}
@media (prefers-reduced-motion: reduce){.hcard.mini .dc, .hcard.mini td.dcol{transition:none}}
td.t-zero{background:hsla(0, 72%, 44%, .78); color:#fff}
.hcard.mini.hov .hc-verdict{max-height:5.4em; overflow:hidden}
/* развёрнутая склейка: не больше половины экрана, внутри прокрутка вниз-вверх и вбок, шапка таблицы на месте */
.hcard.wide .hc-body{max-height:50vh; overflow:auto}
.hcard.wide table.hc-full thead th{position:sticky; top:0; background:var(--panel); z-index:1}
.sumlink{margin-left:10px; font-size:12.5px} .sumlink.on{color:var(--ink); text-decoration:underline} .sumlink:disabled{color:var(--muted); cursor:default}
.lwrap{max-height:45vh} #hListGrid tr.lrow{cursor:pointer} #hListGrid tr.lrow:hover td{background:rgba(91,140,255,.08)}
#hListGrid thead th{position:sticky; top:0; background:var(--panel); z-index:1}
.hcard.flash{outline:2px solid var(--accent); outline-offset:2px}
/* блок «Как читать страницу»: свёрнут до первой строки, «Подробнее» — разворачивает */
details.legend summary{list-style:none; cursor:pointer; line-height:1.6}
details.legend summary::-webkit-details-marker{display:none}
details.legend summary .more::after{content:'Подробнее ▾'; color:var(--accent); margin-left:6px; white-space:nowrap}
details.legend[open] summary .more::after{content:'Свернуть ▴'}
.legend-body{margin-top:10px; border-top:1px solid var(--line); padding-top:8px}
.legend-body h3{font-size:12.5px; margin:8px 0 4px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.legend-body ol, .legend-body ul.terms{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; line-height:1.55}
.dynchip{display:inline-block; padding:0 6px; border-radius:5px; font-weight:600; color:#fff; background:var(--raise)}
.dynchip.dynb, td.dynb{background:hsla(var(--h), 72%, 42%, .85); color:#fff}
.dynrow{display:flex; align-items:center; gap:10px} .dynrow input[type=range]{width:220px; accent-color:var(--accent)}
/* выбор кабинета — первым слева и заметным цветом на всех вкладках */
.f.cabpick label{color:var(--accent); font-weight:600}
.f.cabpick select{border:2px solid var(--accent); background:rgba(91,140,255,.16); color:var(--ink); font-weight:600; min-width:230px}
table.ptab td.tl-g{background:rgba(69,196,134,.32)} table.ptab td.tl-y{background:rgba(242,162,74,.34)} table.ptab td.tl-r{background:rgba(255,122,112,.34)}
.tlg{color:var(--good)} .tly{color:var(--warn)} .tlr{color:var(--crit)}