:root{
  --bg:#080b10;--bg2:#0c1118;--panel:#111722;--panel2:#161d2a;--line:#222c3b;--txt:#e8eef7;--muted:#8593a8;
  --accent:#f97316;--accent2:#fb923c;--accent3:#fdba74;--glow:rgba(249,115,22,.32);
  --good:#34d399;--warn:#fbbf24;--bad:#f87171;--blue:#60a5fa;--purple:#a78bfa;
  --mono:'SF Mono',ui-monospace,Consolas,monospace;--sans:'Inter','Segoe UI',system-ui,'Noto Sans Thai',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.5;min-height:100vh;
  background-image:
    radial-gradient(1100px 600px at 50% -15%,rgba(249,115,22,.13),transparent 55%),
    radial-gradient(800px 600px at 100% 0,rgba(96,165,250,.06),transparent 55%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,auto,42px 42px,42px 42px;}
a{color:var(--accent2)}
.modeBar{text-align:center;padding:6px;font-size:12px;font-family:var(--mono);border-bottom:1px solid var(--line)}
.modeBar.mock{background:repeating-linear-gradient(45deg,#3a2400,#3a2400 12px,#2c1c00 12px,#2c1c00 24px);color:var(--accent2)}
.modeBar.live{background:rgba(52,211,153,.1);color:var(--good)}
.modeBar.err{background:rgba(248,113,113,.12);color:var(--bad)}
/* login */
.center{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 25%,#1a1206,#06080c 70%)}
.lbox{background:linear-gradient(180deg,#141a25,#0e131b);border:1px solid var(--line);border-radius:22px;padding:38px 34px;width:380px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.badge{display:inline-flex;align-items:center;gap:7px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);color:var(--accent2);padding:5px 13px;border-radius:30px;font-size:12px;font-weight:600;margin-bottom:16px}
.lbox .logo{font-size:40px}
.lbox h1{font-size:23px;margin:6px 0 3px;font-weight:800}
.lbox h1 span,.gm{background:linear-gradient(90deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lbox p{color:var(--muted);font-size:12.5px;margin-bottom:22px}
.lbox input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:12px 14px;border-radius:11px;margin-bottom:11px;font-size:14px;font-family:var(--sans)}
.lbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a0e00;border:none;font-weight:800;cursor:pointer;font-family:var(--sans)}
.lbox button{width:100%;padding:13px;border-radius:11px;font-size:14.5px;box-shadow:0 8px 24px var(--glow)}
.lbox .role{margin-top:16px;font-size:11px;color:var(--muted);line-height:1.7}.lbox .role b{color:var(--good)}
.err{color:var(--bad);font-size:12.5px;margin-bottom:10px;min-height:16px}
/* nav */
.navwrap{position:sticky;top:0;z-index:30;padding:14px 18px 4px;background:linear-gradient(180deg,var(--bg),rgba(8,11,16,.55) 70%,transparent)}
.top{max-width:1480px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:11px 18px;border:1px solid var(--line);background:rgba(17,23,34,.86);backdrop-filter:blur(12px);border-radius:18px;flex-wrap:wrap;box-shadow:0 10px 34px rgba(0,0,0,.4)}
.brand{font-weight:800;display:flex;align-items:center;gap:9px;font-size:15.5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 9px var(--good);animation:pulse 2s infinite}
.dot.stale{background:var(--warn);box-shadow:0 0 9px var(--warn)}
.spacer{flex:1}
button.tb{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:8px 13px;border-radius:10px;cursor:pointer;font-size:12px;font-family:var(--sans)}
button.tb:hover{border-color:var(--accent);color:var(--accent2)}
button.tb.owner{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.4);color:var(--accent2);font-weight:700}
.who{font-size:12px;color:var(--muted);font-family:var(--mono)}.who b{color:var(--accent2)}
.rolechip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.rolechip.owner{background:rgba(249,115,22,.18);color:var(--accent2)}.rolechip.noc{background:rgba(96,165,250,.16);color:var(--blue)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.wrap{padding:16px 18px 44px;max-width:1480px;margin:0 auto}
h3.sec{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--accent2);margin:24px 0 13px;display:flex;align-items:center;gap:8px}
h3.sec:first-child{margin-top:8px}
/* KPI hero */
.kpis{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:13px}
@media(max-width:1100px){.kpis{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:linear-gradient(180deg,#141b27,#0f141d);border:1px solid var(--line);border-radius:16px;padding:15px 17px;position:relative;overflow:hidden}
.kpi .kl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.kpi .kv{font-size:26px;font-weight:800;font-family:var(--mono);margin-top:5px}
.kpi .kv small{font-size:13px;color:var(--muted);font-weight:400}
.kpi.accent{box-shadow:inset 0 0 0 1px rgba(249,115,22,.25)}
.health{grid-row:span 1;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#1a1206,#10141d)}
.health .ring{flex-shrink:0}
.health .ht{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.health .hs{font-size:30px;font-weight:800;font-family:var(--mono);line-height:1}
.health .hl{font-size:13px;font-weight:700;margin-top:3px}
.spark{width:100%;height:30px;margin-top:8px;display:block}
.kpi .trend{position:absolute;top:14px;right:15px;font-size:11px;font-family:var(--mono)}
/* AI insight */
.insight{background:linear-gradient(135deg,#15110a,#0f141d);border:1px solid rgba(249,115,22,.22);border-radius:16px;padding:15px 18px}
.insight .ih{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;margin-bottom:10px}
.insight .ih .ai{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px}
.ins{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.ins:first-of-type{border-top:none}
.ins .ic{flex-shrink:0;font-size:15px}
.ins.warn .ic{filter:none}
.ins .itxt{color:var(--txt)}.ins.info .itxt{color:var(--muted)}
.insOk{color:var(--good);font-size:13px;padding:6px 0}
/* nodes */
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:15px}
.ncard{background:linear-gradient(180deg,#141b27,#0f141d);border:1px solid var(--line);border-radius:16px;padding:16px 17px;transition:border-color .3s,transform .2s,box-shadow .3s}
.ncard:hover{border-color:rgba(249,115,22,.45);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ncard.off{border-color:var(--bad);background:rgba(248,113,113,.06)}
.nh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.nn{font-weight:800;font-family:var(--mono);font-size:15px}
.ni{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:1px}
.ep{font-size:9.5px;color:var(--accent2);background:rgba(249,115,22,.1);padding:1px 7px;border-radius:5px;font-family:var(--mono)}
.st{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.st.on{background:rgba(52,211,153,.15);color:var(--good)}.st.off{background:rgba(248,113,113,.18);color:var(--bad)}
.gauge{margin:8px 0}
.gauge .gl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:3px}
.gauge .gl b{font-family:var(--mono);color:var(--txt)}
.bar{height:7px;background:var(--panel2);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;transition:width .6s ease,background .4s}
.nfoot{display:flex;justify-content:space-between;margin-top:11px;font-size:11px;color:var(--muted);font-family:var(--mono);border-top:1px solid var(--line);padding-top:9px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
th{background:var(--panel2);color:var(--muted);text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
td{padding:9px 12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;vertical-align:middle}
tr:hover td{background:rgba(249,115,22,.04)}
.vst{font-size:10px;font-weight:700;padding:2px 9px;border-radius:6px}
.vst.run{background:rgba(52,211,153,.15);color:var(--good)}.vst.stop{background:rgba(125,139,163,.15);color:var(--muted)}
.mini{display:inline-block;width:52px;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:6px}.mini i{display:block;height:100%}
.filterbar{display:flex;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.filterbar input,.filterbar select{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:9px 12px;border-radius:10px;font-family:var(--mono);font-size:12px}
.filterbar input:focus,.filterbar select:focus{outline:none;border-color:var(--accent)}
.grid3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
@media(max-width:1050px){.grid3{grid-template-columns:1fr}}
.panel{background:linear-gradient(180deg,#141b27,#0f141d);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.panel h4{font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.toprow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.toprow:first-of-type{border-top:none}
.toprow .tn{font-family:var(--sans)}.toprow .tnode{color:var(--muted);font-size:11px}
.toprow .tv{font-family:var(--mono);font-weight:700}
/* alerts + ticker */
.alerts{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-height:330px;overflow-y:auto}
.arow{display:flex;gap:11px;padding:11px 14px;border-top:1px solid var(--line);align-items:flex-start}
.arow:first-child{border-top:none}
.arow .sev{width:6px;align-self:stretch;border-radius:3px;flex-shrink:0;min-height:30px}
.arow.crit .sev{background:var(--bad)}.arow.warn .sev{background:var(--warn)}.arow.info .sev{background:var(--blue)}.arow.ok .sev{background:var(--good)}
.arow .ac{flex:1}.arow .at{font-size:13px;font-weight:700}.arow .am{font-size:12px;color:var(--muted)}
.arow .ax{font-size:10.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.arow button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer}
.arow button:hover{border-color:var(--accent);color:var(--accent2)}
.empty{padding:24px;text-align:center;color:var(--muted);font-size:12px}
.ticker{overflow:hidden;white-space:nowrap;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 0;margin-bottom:12px;font-family:var(--mono);font-size:12px}
.ticker .tk{display:inline-block;padding-left:100%;animation:scroll 30s linear infinite}
.ticker .tk span{margin:0 26px;color:var(--muted)}.ticker .tk b{color:var(--accent2)}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* toast */
#toasts{position:fixed;top:18px;right:18px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:380px}
.toast{background:linear-gradient(180deg,#171e2a,#11151d);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:13px 15px;box-shadow:0 14px 40px rgba(0,0,0,.6);animation:slidein .3s ease}
.toast.crit{border-left-color:var(--bad)}.toast.warn{border-left-color:var(--warn)}.toast.info{border-left-color:var(--blue)}.toast.ok{border-left-color:var(--good)}
.toast .tt{font-weight:700;font-size:13px;display:flex;justify-content:space-between;gap:10px}.toast .tm{font-size:12px;color:var(--muted);margin-top:3px}.toast .tc{cursor:pointer;color:var(--muted)}
@keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
/* demo + chips */
.democtl{display:flex;gap:9px;flex-wrap:wrap}
.democtl button{background:#2a1810;border:1px solid #5a3420;color:#fdba74;padding:9px 14px;border-radius:10px;cursor:pointer;font-size:12px;font-family:var(--sans);font-weight:600}
.democtl button:hover{background:#3a2316}.democtl button.ok{background:#16251c;border-color:#2a5a3a;color:#86efac}
.note{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.7}
code{font-family:var(--mono);background:var(--panel2);padding:1px 5px;border-radius:4px;color:var(--accent2);font-size:11.5px}
/* admin */
.adminwrap{max-width:1100px;margin:0 auto;padding:18px}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:10px;cursor:pointer;font-family:var(--sans);font-size:13px}
.tabs button.on{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.4);color:var(--accent2);font-weight:700}
.tabpane{display:none}.tabpane.on{display:block}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;margin-bottom:12px}
.fld label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.fld input,.fld select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:9px 11px;border-radius:9px;font-family:var(--mono);font-size:12.5px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:9px 15px;border-radius:9px;cursor:pointer;font-family:var(--sans);font-size:13px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a0e00;border:none;font-weight:700}
.btn.danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4);color:#fca5a5}
.btn.small{padding:5px 11px;font-size:12px}
.msg{font-size:12.5px;margin:8px 0;min-height:16px}.msg.ok{color:var(--good)}.msg.bad{color:var(--bad)}
.range{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:13px}.range input[type=range]{flex:1;accent-color:var(--accent)}

/* ============ 2026 polish ============ */
@view-transition { navigation: auto; }                 /* สลับหน้า /, /admin, /login แบบลื่น */
::view-transition-old(root){animation:vtOut .28s both}
::view-transition-new(root){animation:vtIn .32s both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}50%{box-shadow:0 0 22px 0 rgba(249,115,22,.18)}}
/* entrance reveal (เฉพาะ container นิ่ง — เล่นครั้งเดียวตอนโหลด) */
.kpis>.kpi,.insight,h3.sec,.ticker,.panel{animation:fadeUp .55s cubic-bezier(.2,.75,.2,1) both}
.kpis>.kpi:nth-child(1){animation-delay:.04s}.kpis>.kpi:nth-child(2){animation-delay:.10s}
.kpis>.kpi:nth-child(3){animation-delay:.16s}.kpis>.kpi:nth-child(4){animation-delay:.22s}
.kpis>.kpi:nth-child(5){animation-delay:.28s}.kpis>.kpi:nth-child(6){animation-delay:.34s}
.kpi.health{animation:fadeUp .55s cubic-bezier(.2,.75,.2,1) both, glowPulse 4s ease-in-out 1s infinite}
/* node card entrance เฉพาะตอนเพิ่มใหม่ (class .enter) */
.ncard.enter{animation:fadeUp .5s cubic-bezier(.2,.75,.2,1) both}
/* ค่าตัวเลขเปลี่ยน → แฟลชนิดๆ */
@keyframes valFlash{0%{color:var(--accent2)}100%{}}
.flash{animation:valFlash .6s ease-out}
/* gauge bar + ring ลื่นขึ้น */
.bar i{transition:width .7s cubic-bezier(.3,.8,.3,1),background .5s}
.ncard{will-change:transform}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* login system line */
.sysline{margin-top:13px;font-size:10.5px;color:var(--muted);font-family:var(--mono);letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:7px}
.sysline .pip{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 2s infinite}
/* branded footer bar (NOC product feel) */
.footbar{margin-top:28px;padding:13px 18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#10141d,#0d1119);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.4px}
.footbar .brand-f{color:var(--accent2);font-weight:700}
.footbar b{color:var(--txt)}

/* ============ GODPACK HUD FX (ZamakVote-inspired · CSS-only) ============ */
@keyframes hudDrift{to{background-position:0 0,0 0,42px 42px,42px 42px}}
body{animation:hudDrift 40s linear infinite}
/* CRT scanline + vignette overlay (ไม่บังคลิก) */
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.04) 3px,transparent 4px);box-shadow:inset 0 0 240px rgba(0,0,0,.5)}
/* HUD corner brackets */
.kpi,.panel,.insight,.alerts{position:relative}
.kpi::before,.panel::before,.insight::before,.alerts::before{content:"";position:absolute;top:6px;left:6px;width:12px;height:12px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);opacity:.4;pointer-events:none;z-index:3}
.kpi::after,.panel::after,.insight::after,.alerts::after{content:"";position:absolute;bottom:6px;right:6px;width:12px;height:12px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);opacity:.4;pointer-events:none;z-index:3}
/* neon glow */
.brand .gm,.lbox h1 span{text-shadow:0 0 16px rgba(249,115,22,.4)}
.kpi .kv,.health .hs{text-shadow:0 0 16px rgba(249,115,22,.28)}
.ticker .tk b{color:var(--accent2);text-shadow:0 0 10px rgba(251,146,60,.35)}
.ep{box-shadow:0 0 8px rgba(249,115,22,.18)}
.modeBar.live{text-shadow:0 0 10px rgba(52,211,153,.4)}
.dot{box-shadow:0 0 10px var(--good)}
/* sheen sweep on primary buttons */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:hudSheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes hudSheen{0%,55%{left:-60%}100%{left:150%}}
/* gauge bar subtle glow */
.bar i{filter:drop-shadow(0 0 3px rgba(255,255,255,.12))}
@media (prefers-reduced-motion: reduce){body::after{display:none}body{animation:none}}

/* ============ per-endpoint cluster tiles ============ */
.endpoints{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:13px}
.epcard{background:linear-gradient(180deg,#15202e,#0f141d);border:1px solid var(--line);border-radius:14px;padding:14px 15px;position:relative;transition:border-color .3s,transform .2s}
.epcard:hover{transform:translateY(-2px);border-color:rgba(54,197,255,.5)}
.epcard.warn{border-color:var(--warn);background:rgba(251,191,36,.05)}
.eph{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.epn{font-weight:800;font-family:var(--mono);font-size:13.5px;color:var(--accent2)}
.epst{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.epst.on{background:rgba(52,211,153,.15);color:var(--good)}
.epst.off{background:rgba(251,191,36,.16);color:var(--warn)}
.epstats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;text-align:center}
.epstats>div{background:var(--panel2);border-radius:9px;padding:8px 3px;border:1px solid var(--line)}
.epstats b{display:block;font-family:var(--mono);font-size:16px;font-weight:800;line-height:1.1}
.epstats span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}

/* ============ AI assistant ============ */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;border:1px solid rgba(249,115,22,.5);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a0e00;font-size:24px;cursor:pointer;box-shadow:0 8px 28px var(--glow);align-items:center;justify-content:center;animation:glowPulse 3s ease-in-out infinite}
.ai-fab:hover{transform:scale(1.08)}
.ai-drawer{position:fixed;right:0;top:0;height:100vh;width:390px;max-width:94vw;z-index:75;background:linear-gradient(180deg,#10141d,#0a0d13);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.55);transform:translateX(106%);transition:transform .3s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column}
.ai-drawer.open{transform:none}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);font-weight:800;color:var(--accent2);text-shadow:0 0 12px rgba(251,146,60,.3)}
.ai-x{cursor:pointer;color:var(--muted);font-size:16px}.ai-x:hover{color:var(--bad)}
.ai-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.ai-hint{color:var(--muted);font-size:12.5px;line-height:1.8}
.ai-msg{padding:10px 13px;border-radius:13px;font-size:13px;max-width:92%;line-height:1.65;word-break:break-word}
.ai-msg.user{align-self:flex-end;background:rgba(249,115,22,.16);border:1px solid rgba(249,115,22,.3)}
.ai-msg.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.ai-msg.wait{color:var(--muted);font-style:italic}
.ai-quick{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 10px}
.ai-quick button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:6px 12px;font-size:11.5px;cursor:pointer;font-family:var(--sans)}
.ai-quick button:hover{border-color:var(--accent);color:var(--accent2)}
.ai-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ai-input input{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:10px 12px;border-radius:10px;font-family:var(--sans);font-size:13px}
.ai-input input:focus{outline:none;border-color:var(--accent)}
.ai-input button{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a0e00;border:none;font-weight:700;padding:0 17px;border-radius:10px;cursor:pointer}

/* ============ machine detail modal (node + VM) ============ */
.modal-ov{position:fixed;inset:0;background:rgba(3,6,12,.74);backdrop-filter:blur(6px);z-index:85;display:none;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow:auto}
.modal-ov.open{display:flex}
.modal-box{width:100%;max-width:800px;background:linear-gradient(180deg,#141b27,#0e131b);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1}}
.mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.mh .mt{font-size:19px;font-weight:800}
.mh .mt small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:4px;font-family:var(--mono)}
.mx{cursor:pointer;color:var(--muted);font-size:18px}.mx:hover{color:var(--bad)}
.nstatus{font-size:11px;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:6px;white-space:nowrap}
.nstatus.good{background:rgba(52,211,153,.16);color:var(--good)}.nstatus.bad{background:rgba(248,113,113,.18);color:var(--bad)}.nstatus.muted{background:rgba(125,139,163,.15);color:var(--muted)}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:6px}
.spec{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.spec .sl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.spec .sv{font-family:var(--mono);font-size:13.5px;font-weight:700;margin-top:4px;word-break:break-word;line-height:1.4}
.msec{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent2);margin:18px 0 9px;font-weight:700}
.mgraph{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:6px}
.mfoot{margin-top:18px}
.stlist,.dklist,.vmlist{display:flex;flex-direction:column;gap:6px}
.strow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-family:var(--mono)}
.strow span:first-child{min-width:140px}.strow small{color:var(--muted)}
.sbar{flex:1;height:7px;background:var(--panel);border-radius:4px;overflow:hidden}.sbar i{display:block;height:100%}
.dkrow{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-family:var(--mono);padding:6px 0;border-bottom:1px solid var(--line)}
.dkrow small{color:var(--muted)}
.hlbadge{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:5px;background:var(--panel);color:var(--muted)}
.hlbadge.on{background:rgba(52,211,153,.15);color:var(--good)}.hlbadge.bad{background:rgba(248,113,113,.18);color:var(--bad)}
.vmli{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px;font-family:var(--mono);cursor:pointer}
.vmli:hover{border-color:var(--accent)}
.tmpls{display:flex;gap:6px;flex-wrap:wrap}
.tmpl{font-family:var(--mono);font-size:11px;background:var(--panel2);border:1px solid var(--line);color:var(--accent2);padding:3px 9px;border-radius:6px}
.tgl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-family:var(--sans);cursor:pointer;user-select:none;padding:0 4px}
.tgl input{accent-color:var(--accent);cursor:pointer}