/* APOGEE — оболочка по брендбуку: графит, акцент Ion, рамки 1px с техническими уголками */
:root{
  --void:#0B0C0D; --bg:#121314; --surface:#17191B; --surface-2:#1D2023; --surface-3:#24282C;
  --line:#25292D; --line-2:#343A40; --fg:#E6E8EA; --muted:#8B9298; --dim:#5A6067;
  --ok:#3DDC97; --warn:#F5B841; --down:#FF5A5F; --cold:#4A4F55;
  --accent:#6EC4FF; --on-accent:#06121B;
  --pulsar:#005EAA; --pulsar-2:#FF7614; --avr-a:#F2A5C3; --avr-b:#5A4FC8; --zero:#E8ECF0; --r3212:#D7141A;
  --sans:"Geist","Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:2px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
[hidden]{display:none!important}
::selection{background:rgba(110,196,255,.28)}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.lbl{font:500 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.view{position:relative;z-index:1}

.tick{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:var(--r)}
.tick::before,.tick::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;border-color:var(--line-2);border-style:solid;transition:border-color .2s var(--ease)}
.tick::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.tick::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* ---------- вход ---------- */
#login{min-height:100vh;display:grid;align-items:center;padding:24px clamp(16px,8vw,120px)}
.login{width:min(380px,100%);padding:26px 24px 18px;display:grid;gap:14px;background:rgba(23,25,27,.92);backdrop-filter:blur(6px)}
.login:focus-within::before,.login:focus-within::after{border-color:var(--accent)}
.login-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-head .mk{width:34px;height:34px;color:var(--fg)}
.login-head b{display:block;font:500 18px var(--mono);letter-spacing:.32em}
.fld{display:grid;gap:6px}
.fld input{height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--void);color:var(--fg);font:14px var(--mono);outline:none;transition:border-color .15s}
.fld input:focus{border-color:var(--accent)}
.fld input[name=code]{letter-spacing:.4em;font-size:16px}
.err{margin:0;color:var(--down);font:12px var(--mono)}
.setup{margin:0;padding:10px 12px;border:1px dashed var(--line-2);color:var(--muted);font-size:13px}
.setup code{font:12px var(--mono);color:var(--fg)}
.login-foot{display:flex;justify-content:space-between;margin-top:4px;color:var(--dim)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:filter .15s,background .15s,color .15s}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.pri:hover{filter:brightness(1.12)}
.btn[disabled]{opacity:.5;cursor:progress}

/* ---------- шапка ---------- */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;height:48px;padding:0 clamp(12px,2vw,24px);background:rgba(23,25,27,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;color:var(--fg);text-decoration:none;font:500 12px var(--mono);letter-spacing:.32em}
.brand .mk{width:20px;height:20px}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tab{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);color:var(--muted);font:500 11px var(--mono);letter-spacing:.1em;white-space:nowrap}
.tab:hover{background:var(--surface-2);color:var(--fg)}
.tab[aria-selected=true]{background:var(--surface-3);color:var(--fg)}
.tab .dot{width:6px;height:6px;border-radius:50%}
.tab .lv{font-size:10px;color:var(--dim)}
.tab svg{width:11px;height:11px}
.right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;white-space:nowrap}
.who{color:var(--muted);padding-left:16px;border-left:1px solid var(--line)}
.icon{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r);color:var(--muted)}
.icon:hover{background:var(--surface-2);color:var(--fg)}
.icon svg{width:15px;height:15px}
.sline{height:2px;background:var(--accent);transition:background .3s var(--ease)}
@media(max-width:900px){#host-ip,#host-up{display:none}}
@media(max-width:620px){.who{display:none}.brand b{display:none}}

/* ---------- монитор ---------- */
.main{padding:18px clamp(12px,2vw,24px) 40px;display:grid;gap:18px;max-width:1600px;margin:0 auto}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{padding:12px 14px}
.metric .v{font:500 24px/1.1 var(--mono);font-variant-numeric:tabular-nums;margin:6px 0 9px}
.metric .v small{font-size:12px;color:var(--muted);font-weight:400}
.bar-m{height:3px;background:var(--surface-3);position:relative;overflow:hidden}
.bar-m i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .6s var(--ease)}
.bar-m i.w{background:var(--warn)} .bar-m i.e{background:var(--down)}

.cols{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1100px){.cols{grid-template-columns:1fr}}
.sector{margin-bottom:22px}
.sector-h{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.sector-h b{font:500 13px var(--mono);letter-spacing:.24em}
.sector-h .lv{font:500 10px var(--mono);color:var(--dim);letter-spacing:.1em}
.sector-h .t{color:var(--muted);font-size:13px}
.sector-h .sw{width:10px;height:10px;align-self:center}
.group{margin-bottom:14px}
.group .lbl{margin-bottom:8px;display:block}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}

.node{display:grid;gap:8px;padding:12px 12px 10px;color:inherit;text-decoration:none;transition:background .2s var(--ease)}
a.node:hover{background:var(--surface-2)}
a.node:hover::before,a.node:hover::after{border-color:var(--accent)}
.node .h{display:flex;align-items:center;gap:8px;min-width:0}
.node .h b{font:500 13px var(--mono);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .st{margin-left:auto;font:500 10px var(--mono);letter-spacing:.14em;flex:none}
.node .meta{display:flex;justify-content:space-between;gap:8px;font:11px/1.5 var(--mono);color:var(--muted)}
.node .meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node svg.spark{width:100%;height:24px;display:block}
.node.cold,.node.planned{background:var(--bg);border-style:dashed}
.node.cold>*,.node.planned>*{opacity:.6}
.node.cold:hover>*,.node.planned:hover>*{opacity:.9}
.node.cold .h b,.node.planned .h b{color:var(--muted)}
.node.down{border-color:rgba(255,90,95,.45)}
.led{width:7px;height:7px;border-radius:50%;flex:none}
.led.nominal{background:var(--ok);box-shadow:0 0 0 3px rgba(61,220,151,.12)}
.led.degraded{background:var(--warn);box-shadow:0 0 0 3px rgba(245,184,65,.12)}
.led.down{background:var(--down);box-shadow:0 0 0 3px rgba(255,90,95,.14);animation:blink 1.2s steps(2) infinite}
.led.cold,.led.planned,.led.unknown{border:1px solid var(--cold)}
@keyframes blink{50%{opacity:.25}}
.c-nominal{color:var(--ok)} .c-degraded{color:var(--warn)} .c-down{color:var(--down)} .c-cold,.c-planned,.c-unknown{color:var(--cold)}

.locked{display:flex;align-items:center;gap:14px;padding:18px;background:#000;border:1px solid #3A0507;color:#8A6A6A;font:12px/1.6 var(--mono)}
.locked svg{width:18px;height:18px;color:var(--r3212);flex:none}
.locked b{color:var(--r3212);letter-spacing:.2em;font-weight:500}

.side{display:grid;gap:12px;position:sticky;top:66px}
.panel{padding:14px}
.ph{display:flex;justify-content:space-between;margin-bottom:10px}
.sum{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sum div{display:flex;align-items:baseline;gap:8px;font:12px var(--mono);color:var(--muted)}
.sum b{font:500 20px var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.log{font:11.5px/1.75 var(--mono);color:var(--muted);max-height:46vh;overflow:auto}
.log div{display:grid;grid-template-columns:62px 12px 1fr;gap:6px}
.log .t{color:var(--dim)}
.log .ok{color:var(--ok)} .log .warn{color:var(--warn)} .log .down{color:var(--down)} .log .auth{color:var(--accent)} .log .error{color:var(--down)}
.empty{color:var(--dim);font:12px var(--mono)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- карточка узла (база: оболочка Apogee) ---------- */
.node{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);cursor:pointer;color:var(--fg)}
.node:hover,.node.sel{background:var(--surface-2);border-color:var(--line-2)}
.node:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.node .spark{color:var(--dim)}

/* ---------- PULSAR — по брендбуку КС54: тёмно-синий, срезанные углы, Unbounded, оранжевый ---------- */
.sec-pulsar{--k-bg:#0D1634;--k-bg2:#13204A;--k-line:#22305C;--k-muted:#A3AFCC;--k-blue:#005EAA;--k-orange:#FF7614}
.sec-pulsar .sector-h{position:relative;align-items:center;gap:14px;padding:16px 18px;border:0;margin-bottom:16px;background:#060B1A;overflow:hidden;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.sec-pulsar .sector-h::after{content:"";position:absolute;right:-20px;top:0;bottom:0;width:240px;opacity:.5;
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(0,94,170,.55) 14px 15px)}
.sec-pulsar .sec-mk{width:30px;height:30px;color:#5AA9F0;flex:none}
.sec-pulsar .sector-h b{font:800 22px/1 "Unbounded",var(--sans);letter-spacing:-.02em;color:#EEF2FA}
.sec-pulsar .sector-h .t{color:var(--k-muted);font:14px "Golos Text",var(--sans);position:relative;z-index:1}
.sec-pulsar .eyebrow{display:flex;align-items:center;gap:8px;font:500 10px var(--mono);letter-spacing:.12em;color:var(--k-muted);margin-bottom:5px}
.sec-pulsar .eyebrow i{width:20px;height:3px;background:var(--k-orange);transform:skewX(-45deg)}
.sec-pulsar .group .lbl{color:var(--k-muted)}
.sec-pulsar .node{background:var(--k-bg);border:0;border-radius:0;font-family:"Golos Text",var(--sans);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:inset 0 2px 0 var(--k-blue)}
.sec-pulsar .node:hover,.sec-pulsar .node.sel{background:var(--k-bg2);box-shadow:inset 0 2px 0 var(--k-orange)}
.sec-pulsar .node .h b{font:600 13px "Unbounded",var(--sans);letter-spacing:0}
.sec-pulsar .node .meta{color:var(--k-muted)}
.sec-pulsar .node.cold,.sec-pulsar .node.planned{background:#060B1A;box-shadow:inset 0 0 0 1px var(--k-line)}
.sec-pulsar .node.down{box-shadow:inset 0 2px 0 var(--down),inset 0 0 0 1px rgba(255,90,95,.35)}

/* ---------- AVR — по брендбуку avr: бирюза, мягкие скругления, звезда, Outfit, розовый ---------- */
.sec-avr{--a-bg:#062E33;--a-bg2:#0B4248;--a-line:#1E5B62;--a-muted:#A9C4C6;--a-pink:#F2A5C3;--a-violet:#C4BCFF;--spring:cubic-bezier(.34,1.56,.64,1)}
.sec-avr .sector-h{align-items:center;gap:12px;padding:16px 20px;border:0;margin-bottom:16px;border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%,#0B4248 0%,#062E33 60%)}
.sec-avr .sec-mk{width:28px;height:28px;flex:none;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.86) rotate(12deg);opacity:.8}}
.sec-avr .sector-h b{font:500 24px/1 "Outfit",var(--sans);letter-spacing:-.026em;color:#D3E3E4;text-transform:none}
.sec-avr .sector-h b span{font-weight:300;color:var(--a-pink)}
.sec-avr .sector-h .lv{color:var(--a-muted)}
.sec-avr .sector-h .t{color:var(--a-muted);font:14px "Outfit",var(--sans)}
.sec-avr .group .lbl{font:400 13px "Outfit",var(--sans);letter-spacing:0;text-transform:lowercase;color:var(--a-muted)}
.sec-avr .node{background:var(--a-bg);border:1px solid var(--a-line);border-radius:18px;font-family:"Outfit",var(--sans);
  transition:transform .35s var(--spring),background .2s,border-color .2s}
.sec-avr .node:hover,.sec-avr .node.sel{background:var(--a-bg2);border-color:var(--a-pink);transform:translateY(-2px)}
.sec-avr .node .h b{font:500 15px "Outfit",var(--sans);letter-spacing:-.01em}
.sec-avr .node .st{font-family:"Outfit",var(--sans);letter-spacing:.06em}
.sec-avr .node .meta{color:var(--a-muted)}
.sec-avr .node .led.nominal{background:var(--a-pink);box-shadow:0 0 0 3px rgba(242,165,195,.16)}
.sec-avr .node .c-nominal{color:var(--a-pink)}
.sec-avr .node.cold,.sec-avr .node.planned{background:transparent;border-style:dashed;border-color:var(--a-line)}
.sec-avr .node.down{border-color:rgba(255,90,95,.55)}

/* ---------- ENTROPYIS0 — абсолютный порядок: белый ноль ---------- */
.entropy-banner{padding:22px 4px 26px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.entropy-banner b{display:block;margin-top:6px;font:500 clamp(28px,4vw,44px)/1 var(--mono);letter-spacing:.16em;color:var(--fg)}
.entropy-banner em{font-style:normal;color:#fff;text-shadow:0 0 18px rgba(232,236,240,.45)}

/* ---------- 3212 (закрыт) — чёрный и багровый, без скруглений ---------- */
.sec-n3212 .sector-h b{color:var(--r3212);letter-spacing:.3em}
.sec-n3212 .sector-h .sw{background:var(--r3212)!important}

/* ---------- панель узла ---------- */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(5,6,7,.5)}
.drawer{position:fixed;z-index:21;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line-2);box-shadow:-24px 0 48px rgba(0,0,0,.35);animation:slide .22s var(--ease)}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
.drawer.sec-pulsar{border-left:3px solid #FF7614}
.drawer.sec-avr{border-left:3px solid #F2A5C3}
.dr-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dr-h b{font:500 16px var(--mono);letter-spacing:.04em}
.dr-h .st{font:500 10px var(--mono);letter-spacing:.14em;margin-left:4px}
.dr-h .icon{margin-left:auto}
.dr-body{padding:18px;display:grid;gap:16px;overflow:auto;align-content:start;flex:1}
.dr-facts{display:grid;grid-template-columns:110px 1fr;gap:6px 14px;margin:0;font:12.5px/1.5 var(--mono)}
.dr-facts dt{color:var(--dim)}
.dr-facts dd{margin:0;color:var(--fg);word-break:break-all}
.dr-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dr-actions .btn svg{width:13px;height:13px}
.confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px 6px 12px;border:1px solid rgba(255,90,95,.45);border-radius:var(--r);font:12px var(--mono);color:#FFB3B5}
.dr-msg{font:12px var(--mono);color:var(--muted);min-height:1em}
.dr-msg.ok{color:var(--ok)} .dr-msg.err{color:var(--down)}
.dr-logs{display:grid;gap:8px}
.dr-logs-h{display:flex;justify-content:space-between;align-items:center}
.dr-logs-h select{background:var(--void);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--r);font:11px var(--mono);height:26px;padding:0 6px}
.dr-log{margin:0;padding:12px;background:var(--void);border:1px solid var(--line);border-radius:var(--r);font:11px/1.6 var(--mono);color:var(--muted);
  max-height:52vh;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* кнопки второго ряда */
.btn{height:34px;padding:0 14px;text-decoration:none}
.btn.sec{border:1px solid var(--line-2);color:var(--fg)}
.btn.sec:hover{border-color:var(--accent);color:var(--accent)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--surface-2)}
.btn.red{border:1px solid rgba(215,20,26,.55);color:#FF6B70}
.btn.red:hover{background:rgba(215,20,26,.12)}
.login .btn{height:40px}
.dr-logs-h>span:last-child{display:flex;align-items:center;gap:6px}