/* Option Radiant — оформление в духе инженерного чертежа.
   Палитра из семейства Prime Radiant: основа hsl(240 10% 4%), золото hsl(45 100% 50%).
   Принципы: волосяные линии вместо заливок, угловые засечки у блоков, моноширинные
   цифры с табличными знаками, прописные разрядки в подписях, прямые углы. */

@font-face{font-family:'Rajdhani';src:url('vendor/rajdhani-600-latin.woff2') format('woff2');
           font-weight:600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('vendor/rajdhani-700-latin.woff2') format('woff2');
           font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('vendor/jbmono-latin.woff2') format('woff2');
           font-weight:100 800;font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'JetBrains Mono';src:url('vendor/jbmono-cyrillic.woff2') format('woff2');
           font-weight:100 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491}

:root{
  --bg:#0a0a0f; --card:#0e0e14; --panel:#0c0c12;
  --line:#22222b; --line2:#2e2e3a; --grid:rgba(255,191,0,.032);
  --tx:#e9e9e4; --mut:#8b8b93; --dim:#5f5f69;
  --acc:#d9a441; --brand:#ffbf00; --ok:#3fbf85; --warn:#e07a5f; --live:#6aa9d9;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:13.5px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* миллиметровка: мелкая сетка и крупная разметка поверх */
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(rgba(255,191,0,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,191,0,.018) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
.wrap{max-width:1580px;margin:0 auto;padding:22px 20px 70px}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
a{color:inherit;text-decoration:none}

/* --- цифры чертёжным шрифтом, с табличными знаками */
.mono,td,th,.sc,.tk,input[type=number],.bar+span,.lv b,.mt b{font-variant-numeric:tabular-nums}
td,th,.sc,.lv b{font-family:var(--mono)}

/* --- фирменный блок */
.hdr{align-items:flex-start;margin-bottom:4px}
.hright{text-align:right}
.hright .sub{white-space:nowrap}
/* Логотип ростом с блок «название + раздел»: 28px имя + 3px отступ + 14px подпись. */
.brand{display:flex;align-items:center;gap:15px}
.logo{width:52px;height:52px;flex:none}
.bname{font-family:'Rajdhani',-apple-system,sans-serif;font-size:28px;font-weight:700;
       letter-spacing:.05em;color:var(--brand);line-height:1;text-transform:uppercase}
.bsec{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.sub{color:var(--mut);font-size:11.5px;font-family:var(--mono)}
.brand .sub{margin-top:4px;color:var(--dim)}
@media(max-width:900px){.hdr{flex-direction:column}.hright{text-align:left}}

/* --- заголовки разделов: прописные с разрядкой и линией до края */
h1{font-size:19px;font-weight:500;margin:0}
h1[style*="16px"]{font-size:12px!important;letter-spacing:.2em;text-transform:uppercase;
                  color:var(--mut);font-weight:500;display:flex;align-items:center;gap:12px}
h1[style*="16px"]::after{content:"";flex:1;height:1px;background:var(--line);min-width:24px}
h1[style*="16px"] .sub{text-transform:none;letter-spacing:0}

/* --- блоки с угловыми засечками, как рамка чертежа */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:2px;
       padding:15px 17px;margin:14px 0;position:relative}
.panel::before,.panel::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-top:1px solid var(--brand);border-left:1px solid var(--brand);opacity:.5}
.panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--brand);border-right:1px solid var(--brand);opacity:.5}

.grp{display:flex;flex-direction:column;gap:7px;margin-right:20px}
.grp>label{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.16em}

/* --- переключатели: прямоугольные, волосяная рамка */
.chips{display:flex;gap:5px;flex-wrap:wrap;max-width:660px}
.chip{padding:3px 10px;border:1px solid var(--line2);border-radius:2px;cursor:pointer;
      font-size:11.5px;color:var(--mut);user-select:none;background:transparent;
      font-family:var(--mono);letter-spacing:.02em;transition:border-color .12s,color .12s}
.chip:hover{border-color:var(--acc);color:var(--tx)}
.chip.on{background:rgba(255,191,0,.1);border-color:var(--brand);color:var(--brand)}
.chip.dim{opacity:.5}

button{background:transparent;color:var(--tx);border:1px solid var(--line2);border-radius:2px;
       padding:7px 14px;cursor:pointer;font-size:11.5px;font-family:var(--mono);
       text-transform:uppercase;letter-spacing:.1em}
button:hover{border-color:var(--brand);color:var(--brand)}
button:disabled{opacity:.4;cursor:default}

input[type=number]{background:transparent;color:var(--tx);border:1px solid var(--line2);
                   border-radius:2px;padding:5px 7px;width:66px;font-family:var(--mono)}
/* ползунок: тонкий рельс и квадратный бегунок */
input[type=range]{-webkit-appearance:none;width:132px;height:14px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:14px;
  background:var(--brand);border-radius:1px;margin-top:-6.5px;cursor:pointer}
.grp .row>span{font-family:var(--mono);font-size:12px;color:var(--tx);min-width:34px}

/* --- карточки */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:11px}
.card{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:12px 13px;
      cursor:pointer;position:relative;transition:border-color .12s}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
              border-top:1px solid var(--brand);border-left:1px solid var(--brand);opacity:.32}
.card:hover{border-color:var(--acc)}
.card.sel,.card.sel:hover{border-color:var(--brand)}
.card .tk{font-family:'Rajdhani',sans-serif;font-size:19px;font-weight:700;letter-spacing:.03em}
.card .sc{float:right;color:var(--brand);font-weight:600;font-size:14px}
.card .bz{color:var(--dim);font-size:11px;height:15px;overflow:hidden;margin-bottom:7px}
.card .mt{font-size:11.5px;color:var(--mut)}
.card .mt b{color:var(--tx);font-weight:500;font-family:var(--mono)}

/* --- таблица: волосяные линейки, прописные заголовки */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:right;color:var(--dim);font-weight:500;padding:7px 8px;
   border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--bg);
   cursor:pointer;white-space:nowrap;font-size:10px;text-transform:uppercase;
   letter-spacing:.12em;font-family:-apple-system,sans-serif}
th:hover{color:var(--brand)}
th:first-child,td:first-child{text-align:left}
th.a,td.a{text-align:left}
td{padding:5px 8px;border-bottom:1px solid rgba(34,34,43,.55);white-space:nowrap;color:var(--mut)}
td:first-child,td:nth-child(2){color:var(--tx)}
tr:hover td{background:rgba(255,191,0,.045);cursor:pointer}
tr.sel td{background:rgba(255,191,0,.07)}

.tag{font-size:9px;padding:1px 5px;border-radius:2px;border:1px solid var(--line2);
     color:var(--dim);margin-left:5px;text-transform:uppercase;letter-spacing:.08em}
.tag.d{border-color:var(--warn);color:var(--warn)}
.tag.u{border-color:var(--live);color:var(--live)}
.pos{color:var(--ok)}.neg{color:var(--warn)}.mut{color:var(--dim)}

/* --- график и уровни */
#chartWrap{display:none}
#chart{height:430px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lv{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-top:10px;
    text-transform:uppercase;letter-spacing:.08em}
.lv b{color:var(--tx);font-weight:500;text-transform:none;letter-spacing:0}

.bar{height:3px;background:#191922;border-radius:0;overflow:hidden;width:220px}
.bar i{display:block;height:100%;background:var(--brand);width:0}

.foot{color:var(--dim);font-size:11px;margin-top:30px;border-top:1px solid var(--line);
      padding-top:14px;line-height:1.7}
.foot code{font-family:var(--mono);color:var(--mut)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1100px){.split{grid-template-columns:1fr}}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--acc)}

/* --- легенда графика */
.legend{display:flex;flex-wrap:wrap;gap:7px 20px;margin-top:11px;font-size:11px;color:var(--mut)}
.lg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lg b{color:var(--tx);font-weight:500}
.lg .sw{display:inline-block;width:20px;height:2px;flex:none}

/* --- опционная карточка: слева описание, справа увеличенный сетап */
.opt-split{display:grid;grid-template-columns:minmax(440px,1fr) minmax(460px,1.05fr);gap:16px;align-items:start}
.card[data-kind]{cursor:pointer}
.card.shown{border-color:var(--live)}
.card.shown::after{content:"";position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;
                   border-bottom:1px solid var(--live);border-right:1px solid var(--live)}
.opt-right{position:sticky;top:12px}
.cards.cons{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
@media(max-width:1200px){.opt-split{grid-template-columns:1fr}.opt-right{position:static}}