/* МОСТ · пульт подключения — «Радиорубка»
   Тёплый почти-чёрный + зелёный фосфор ЭЛТ + красные LED. JetBrains Mono (self-hosted VF).
   Все размеры в rem: корневой шрифт растёт с шириной экрана, поэтому на большом
   мониторе пульт масштабируется целиком, а не тонет в пустоте. */

@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;
  src:url('/static/fonts/jbmono-vf-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;
  src:url('/static/fonts/jbmono-vf-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#0C0E0A; --panel:#12150F; --chassis:#1C2117; --edge:#2A3122; --screen:#090B07;
  --phos:#4AF626; --phos-dim:#2E9C1C; --paper:#C8CFC0; --bright:#E7EEDE; --mut:#7C8873;
  --led-r:#FF3B30; --led-y:#FFD60A; --err:#FF6B61;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(14px,0.45vw + 8.9px,21px)}
@media (max-height:780px) and (min-width:900px){html{font-size:clamp(12.5px,0.4vw + 7.5px,16px)}}
html,body{margin:0}
body{background:var(--bg);color:var(--paper);font-family:'JetBrains Mono',Consolas,monospace;
  font-size:.95rem;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--phos);color:var(--bg)}
b{color:var(--bright);font-weight:700}
a{color:var(--phos);text-underline-offset:3px}
a:hover{color:#7DFF61}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--phos);outline-offset:2px;border-radius:3px}

/* сканлайны ЭЛТ поверх всего */
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:9;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.7) 2px 3px)}

.page{min-height:100dvh;max-width:74rem;margin:0 auto;padding:1.5rem 1.8rem;
  display:flex;flex-direction:column;gap:1.1rem}

/* ── шапка-корпус ─────────────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:1.1rem;border:1.5px solid var(--edge);border-radius:10px;
  background:var(--chassis);padding:.65rem 1.15rem}
.brand{display:flex;align-items:center;gap:.7rem}
.mark{width:auto;height:2.2rem;display:block;filter:drop-shadow(0 0 8px rgba(74,246,38,.3))}
.wm{width:auto;height:1.3rem;display:block;filter:drop-shadow(0 0 6px rgba(74,246,38,.25))}
.route{display:flex;align-items:center;gap:.55rem;border:1px solid var(--edge);border-radius:6px;
  padding:.32rem .75rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--paper);
  white-space:nowrap}
.route svg{width:.95rem;height:.95rem;color:var(--phos);flex:none}
.leds{margin-left:auto;display:flex;gap:1rem;font-size:.72rem;color:var(--mut);white-space:nowrap}
.led{display:flex;align-items:center;gap:.45rem}
.led i{width:.58rem;height:.58rem;border-radius:50%;background:#333A2C;flex:none}
.led.g i{background:var(--phos);box-shadow:0 0 8px rgba(74,246,38,.8)}
.led.r i{background:var(--led-r);box-shadow:0 0 8px rgba(255,59,48,.7);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* ── цепь подключения ─────────────────────────────────────────── */
.chain{border:1.5px solid var(--edge);border-radius:10px;background:var(--panel);padding:1rem 1.15rem}
#chainSlot{display:none}
#chainSlot .chain{padding:.8rem 1.15rem}
[data-stage="console"] #chainSlot,[data-stage="done"] #chainSlot{display:block}
.chain .t{font-size:.7rem;letter-spacing:.14em;color:var(--mut);margin:0 0 .8rem}
.chain ol{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative}
/* сплошная рельса между центрами первой и последней ячейки + фосфорный прогресс */
.chain ol::before{content:'';position:absolute;left:.95rem;right:.95rem;top:.95rem;height:2px;background:var(--edge)}
.chain ol::after{content:'';position:absolute;left:.95rem;right:.95rem;top:.95rem;height:2px;
  background:var(--phos-dim);transform:scaleX(var(--p,0));transform-origin:0 50%;
  transition:transform .45s ease;box-shadow:0 0 8px rgba(74,246,38,.3)}
.chain li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cell{width:1.9rem;height:1.9rem;border:2px solid var(--edge);border-radius:6px;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;color:var(--mut);background:var(--chassis);
  transition:border-color .3s,color .3s,box-shadow .3s}
.chain li.on .cell{border-color:var(--phos);color:var(--phos);box-shadow:0 0 10px rgba(74,246,38,.35);
  animation:cellpulse 2.2s ease-in-out infinite}
@keyframes cellpulse{50%{box-shadow:0 0 16px rgba(74,246,38,.55)}}
.chain li.done .cell{border-color:var(--phos-dim);color:var(--phos-dim);background:rgba(74,246,38,.07)}
.cell svg{width:.9rem;height:.9rem;display:block}
.chain small{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);white-space:nowrap}
.chain li.on small{color:var(--phos)}
.chain li.done small{color:var(--phos-dim)}

/* ── средняя зона ─────────────────────────────────────────────── */
.mid{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:2.6rem;align-items:center;min-height:0}

.crt{min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.heromark{width:auto;height:clamp(3.4rem,5vw,4.6rem);display:block;margin:0 0 1.4rem -.4rem;
  filter:drop-shadow(0 0 12px rgba(74,246,38,.35))}
.crt h1{font-size:clamp(1.7rem,2.6vw,2.6rem);font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin:0 0 1.15rem;color:var(--phos);text-shadow:0 0 14px rgba(74,246,38,.35);text-wrap:balance}
.crt .out{margin:0 0 1.6rem;max-width:56ch}
.crt .out p{margin:0 0 .5rem}
.pfx-p,.crt .out .p,.log .p{color:var(--phos-dim);user-select:none;margin-right:.5rem}

/* журнал сеанса — экран ЭЛТ */
#logbox{flex:1;min-height:0;display:flex;flex-direction:column;border:1.5px solid var(--edge);
  border-radius:12px;background:var(--screen);box-shadow:inset 0 0 3rem rgba(74,246,38,.05);
  transform-origin:50% 50%}
[data-stage="console"] #logbox,[data-stage="done"] #logbox{animation:crton .5s ease-out}
@keyframes crton{0%{transform:scaleY(.02);filter:brightness(2.6)}55%{transform:scaleY(1.03)}100%{transform:scaleY(1);filter:none}}
#logbox .lt{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.7rem 1.1rem;
  border-bottom:1.5px solid var(--edge);font-size:.7rem;letter-spacing:.14em;color:var(--mut)}
#logbox .lt #uptime{color:var(--phos-dim);font-variant-numeric:tabular-nums}
#logbox .lt .ltr{display:flex;align-items:center;gap:.9rem}
#logbox .lt .exit{font-size:.7rem;letter-spacing:.1em;color:var(--mut);text-transform:none}
#logbox .lt .exit:hover{color:var(--err)}
.logscroll{flex:1;min-height:0;overflow-y:auto;padding:1rem 1.15rem;scrollbar-width:thin;
  scrollbar-color:var(--edge) transparent}
.logscroll::-webkit-scrollbar{width:8px}
.logscroll::-webkit-scrollbar-thumb{background:var(--edge);border-radius:4px}
.log p{margin:0 0 .4rem;font-size:.86rem;line-height:1.55;overflow-wrap:anywhere}
.log .ts{color:#4A5540;font-size:.72rem;margin-right:.55rem;font-variant-numeric:tabular-nums}
.log p.ok .tx{color:var(--phos)}
.log p.warn .tx{color:var(--led-y)}
.log p.err .tx{color:var(--err)}
.log p:last-child .tx::after{content:'▌';color:var(--phos);animation:cur 1.1s steps(2) infinite}
.cursor::after{content:'▌';animation:cur 1.1s steps(2) infinite;color:var(--phos)}
@keyframes cur{50%{opacity:0}}

/* ── правая колонка: модули пульта ────────────────────────────── */
.side{min-width:0}
.mod{display:none;border:1.5px solid var(--edge);border-radius:12px;background:var(--chassis);overflow:hidden}
.mod.on{display:block;animation:modin .35s ease-out}
@keyframes modin{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.khead{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1.5px solid var(--edge);
  font-size:.72rem;letter-spacing:.1em;color:var(--mut)}
.khead i{width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--led-y);box-shadow:0 0 7px rgba(255,214,10,.6)}
.khead.r i{background:var(--led-r);box-shadow:0 0 7px rgba(255,59,48,.7)}
.khead.g i{background:var(--phos);box-shadow:0 0 7px rgba(74,246,38,.7)}
.khead .logout{margin-left:auto;font-size:.7rem;letter-spacing:.1em;color:var(--mut);text-transform:none}
.khead .logout:hover{color:var(--err)}
.kin{padding:1.3rem 1.25rem 1.25rem}
.kdesc{margin:0 0 1rem;font-size:.83rem;color:var(--mut);line-height:1.65}
.kdesc b{color:var(--bright)}

.steps{list-style:none;margin:0 0 1.15rem;padding:0}
.steps li{display:flex;gap:.65rem;padding:.42rem 0;font-size:.85rem;line-height:1.5;border-bottom:1px dashed #232A1C}
.steps li:last-child{border-bottom:0}
.steps .n{color:var(--phos-dim);font-weight:700;flex:none}

label{display:block;font-size:.72rem;letter-spacing:.1em;color:var(--paper);margin-bottom:.5rem}
label .opt{color:var(--mut)}
.inwrap{display:flex;align-items:center;border:1.5px solid var(--edge);border-radius:8px;background:var(--screen);
  transition:border-color .15s,box-shadow .15s}
.inwrap:focus-within{border-color:var(--phos);box-shadow:0 0 0 3px rgba(74,246,38,.15)}
.inwrap .pfx{padding-left:.9rem;color:var(--phos-dim);font-weight:700;user-select:none}
input{flex:1;min-width:0;border:0;background:none;padding:.85rem .9rem .85rem .6rem;color:var(--phos);
  font-family:inherit;font-size:1rem;outline:none;caret-color:var(--phos)}
input::placeholder{color:#3E4936}
input.code{letter-spacing:.45em;font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.fld{margin-bottom:1rem}
.fnote{margin:.55rem 0 0;font-size:.74rem;color:var(--mut);line-height:1.55}
.hint{margin:0 0 1rem;font-size:.83rem;color:var(--led-y)}

.btn{width:100%;margin-top:.35rem;border:1.5px solid var(--phos);border-radius:8px;cursor:pointer;
  background:rgba(74,246,38,.08);color:var(--phos);font-family:inherit;font-weight:800;
  font-size:.92rem;letter-spacing:.12em;padding:.9rem 1rem;transition:background .15s,box-shadow .15s}
.btn:hover{background:rgba(74,246,38,.16);box-shadow:0 0 16px rgba(74,246,38,.25)}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:wait;opacity:.75;animation:busy 1.2s ease-in-out infinite}
@keyframes busy{50%{opacity:.45}}
.lnk{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:.78rem;
  color:var(--phos-dim);text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--phos)}
.alt{margin:.8rem 0 0;text-align:center}
.kfoot{margin:1.05rem 0 0;font-size:.74rem;color:var(--mut);line-height:1.6}
.agree{display:flex;gap:.65rem;align-items:center;margin:.95rem 0 0;
  font-size:.78rem;color:var(--paper);line-height:1.5;cursor:pointer;user-select:none}
.agree input{position:absolute;opacity:0;pointer-events:none}
.agree .box{flex:none;width:1.05rem;height:1.05rem;border:1.5px solid var(--edge);border-radius:4px;
  background:var(--screen);display:grid;place-items:center;transition:border-color .15s}
.agree .box::after{content:'';width:.55rem;height:.55rem;border-radius:2px;background:var(--phos);
  opacity:0;transform:scale(.4);transition:opacity .15s,transform .15s}
.agree:hover .box{border-color:var(--phos-dim)}
.agree input:checked ~ .box{border-color:var(--phos)}
.agree input:checked ~ .box::after{opacity:1;transform:scale(1);box-shadow:0 0 8px rgba(74,246,38,.6)}
.agree input:focus-visible ~ .box{outline:2px solid var(--phos);outline-offset:2px}
.agree a{color:var(--phos)}
.err{margin:.7rem 0 0;color:var(--err);font-size:.82rem;line-height:1.5}
.err.shake{animation:shake .3s ease-out}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* сканирование эфира */
.sweep{position:relative;height:.5rem;border:1px solid var(--edge);border-radius:99px;overflow:hidden;
  background:var(--screen);margin:0 0 .7rem}
.sweep i{position:absolute;top:0;bottom:0;width:24%;border-radius:99px;background:var(--phos);opacity:.9;
  box-shadow:0 0 10px rgba(74,246,38,.6);animation:sweep 1.5s ease-in-out infinite alternate}
@keyframes sweep{from{left:0}to{left:76%}}
.scantxt{margin:0;font-size:.8rem;color:var(--phos-dim)}
.dots::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:dots 1.6s steps(1) infinite}
@keyframes dots{0%{content:''}25%{content:'·'}50%{content:'··'}75%{content:'···'}}

/* найденная группа */
.gcard{border:1.5px solid var(--edge);border-radius:8px;background:var(--screen);padding:.85rem 1rem;margin:0 0 .9rem}
.gcard .gt{margin:0;color:var(--phos);font-weight:700;font-size:1rem;overflow-wrap:anywhere}
.gcard .go{margin:.25rem 0 0;color:var(--mut);font-size:.78rem}
.okbox,.warnbox{border-radius:8px;padding:.75rem .9rem;font-size:.8rem;line-height:1.55;margin:0 0 1rem}
.okbox{border:1.5px solid rgba(74,246,38,.35);background:rgba(74,246,38,.06);color:#A9DE9A}
.okbox b{color:var(--phos)}
.warnbox{border:1.5px solid rgba(255,214,10,.4);background:rgba(255,214,10,.06);color:#EAD98A}
.warnbox b{color:var(--led-y)}

/* прокси-опция */
details.px{margin:0 0 1rem;border:1px dashed var(--edge);border-radius:8px;padding:.55rem .8rem}
details.px summary{cursor:pointer;font-size:.72rem;letter-spacing:.1em;color:var(--mut);list-style:none}
details.px summary::before{content:'+ ';color:var(--phos-dim)}
details.px[open] summary::before{content:'− '}
details.px summary::-webkit-details-marker{display:none}
details.px .inwrap{margin-top:.7rem}

/* сводка перед запуском */
.sum{margin:0 0 1.1rem;border-top:1px dashed #232A1C}
.sum .row{display:flex;justify-content:space-between;gap:1rem;padding:.48rem 0;
  border-bottom:1px dashed #232A1C;font-size:.84rem}
.sum .k{color:var(--mut);flex:none}
.sum .v{color:var(--bright);text-align:right;overflow-wrap:anywhere}
.sum .v.ph{color:var(--phos)}

/* финал */
.wave{display:block;width:100%;height:3.2rem;margin:0 0 .9rem;overflow:hidden}
.wave path{fill:none;stroke:var(--phos);stroke-width:2;filter:drop-shadow(0 0 6px rgba(74,246,38,.55))}
.wave g{animation:wave 2.4s linear infinite}
@keyframes wave{to{transform:translateX(-100px)}}
.doneh{margin:0 0 .9rem;font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--phos);
  text-shadow:0 0 14px rgba(74,246,38,.4)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.85rem;
  border-top:1px dashed #232A1C;font-size:.62rem;letter-spacing:.14em;color:var(--mut)}
.foot .fpriv i{display:inline-block;width:.42rem;height:.42rem;border-radius:50%;
  background:var(--phos-dim);margin-right:.55rem;vertical-align:.06rem;
  box-shadow:0 0 6px rgba(74,246,38,.4)}
.foot .fsig{color:#5A6450}

/* ── вторичные кнопки и панель владельца ──────────────────────── */
.btn.dim{border-color:var(--phos-dim);color:var(--phos-dim);background:none}
.btn.dim:hover{color:var(--phos);border-color:var(--phos);background:rgba(74,246,38,.08)}
.abtn{display:flex;justify-content:center;text-decoration:none;margin-top:.35rem}
.btnrow{display:flex;gap:.7rem;margin:0 0 1.15rem}
.btn.half{width:auto;flex:1;margin-top:0;font-size:.78rem;padding:.75rem .5rem;letter-spacing:.06em;white-space:nowrap}
#kitWiz{border-top:1px dashed #232A1C;padding-top:1.05rem;margin:0 0 1.15rem}
#newKey{margin-bottom:1rem}
.lt2{margin:1.3rem 0 .6rem;font-size:.7rem;letter-spacing:.14em;color:var(--mut);
  border-top:1px dashed #232A1C;padding-top:1.05rem}
.keys{display:flex;flex-direction:column;gap:.45rem}
.krow{border:1.5px solid var(--edge);border-radius:8px;background:var(--screen);
  padding:.55rem .8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem}
.kmain{display:flex;align-items:center;gap:.8rem;flex:1;min-width:0}
.kc{color:var(--phos);font-weight:700;font-size:.88rem;letter-spacing:.04em;overflow-wrap:anywhere}
.kc.big{font-size:1.05rem}
.kb{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--edge);border-radius:4px;padding:.1rem .4rem;white-space:nowrap}
.kst{font-size:.72rem;white-space:nowrap}
.kst.free{color:var(--phos)}
.kst.used{color:var(--mut)}
.kst.rev{color:var(--err)}
.kside{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.kn{flex-basis:100%;margin:.1rem 0 0;font-size:.72rem;color:var(--mut)}
.okbox.big{font-size:.88rem;line-height:1.7}
.okbox .nkfoot{display:block;margin-top:.25rem}

/* ── адаптив ──────────────────────────────────────────────────── */
@media (max-width:880px){
  .page{padding:1rem 1.05rem;gap:.9rem}
  .mid{grid-template-columns:1fr;gap:1.3rem;align-items:start}
  .crt{justify-content:flex-start}
  .leds .lbl{display:none}
  .route{display:none}
  .mark{height:1.7rem}
  .wm{height:1.05rem}
  .heromark{height:3rem;margin-bottom:1.1rem}
  #logbox{flex:none;max-height:32dvh}
  .crt h1{font-size:1.55rem}
  .chain small{font-size:.56rem;letter-spacing:.08em}
  .btn.half{font-size:.7rem}
  .foot{flex-direction:column;gap:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .led.r i,.cursor::after,.log p:last-child .tx::after,.sweep i,.dots::after,
  .chain li.on .cell,.btn:disabled,.wave g{animation:none}
  .mod.on,[data-stage="console"] #logbox,[data-stage="done"] #logbox{animation:none}
}