:root{
  --bg:#06090e; --card:#0f1722; --card2:#0b121c; --line:#1b2533;
  --muted:#6a7c93; --text:#e7eef8; --dim:#9db0c6;
  --ok:#00e08a; --okbd:rgba(0,224,138,.5); --okbg:rgba(0,224,138,.08);
  --bad:#ff3b46; --badbd:rgba(255,59,70,.55); --badbg:rgba(255,59,70,.10);
  --warn:#ffb020; --warnbd:rgba(255,176,32,.5); --warnbg:rgba(255,176,32,.08);
  --accent:#36a3ff;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:radial-gradient(1400px 700px at 82% -15%,#0f1c2e 0,var(--bg) 60%) fixed,var(--bg);
  color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.wrap{height:100vh;display:flex;flex-direction:column;padding:clamp(7px,1vh,14px) clamp(10px,1.3vw,22px)}

.topbar{display:flex;align-items:center;justify-content:space-between;height:6vh;min-height:42px;flex:none}
.brand{display:flex;align-items:center;gap:14px}
.logoimg{height:clamp(22px,3.4vh,40px);width:auto;display:block}
.logo{width:clamp(20px,2.3vh,28px);height:clamp(20px,2.3vh,28px);border-radius:7px;
  background:conic-gradient(from 210deg,var(--ok),var(--accent),var(--ok));box-shadow:0 0 22px var(--okbd);
  animation:spin 7s linear infinite;background-size:cover;background-position:center}
@keyframes spin{to{transform:rotate(360deg)}}
.bname{font-weight:800;font-size:clamp(18px,2.5vh,30px);letter-spacing:3px}
.bsub{color:var(--muted);font-family:var(--mono);font-size:clamp(9px,1.2vh,12px);letter-spacing:3px}
.topright{display:flex;align-items:center;gap:clamp(10px,1.3vw,20px)}
.switch{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:clamp(10px,1.3vh,13px);
  letter-spacing:1.5px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card2);transition:.2s}
.switch:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(54,163,255,.35)}
.clock{font-family:var(--mono);font-size:clamp(13px,1.7vh,17px);color:var(--dim);letter-spacing:1px}
.conn{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:clamp(9px,1.2vh,12px);
  letter-spacing:1.5px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card2)}
.conn .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.conn.live{color:var(--ok);border-color:var(--okbd)} .conn.live .dot{background:var(--ok);animation:pulse 1.8s infinite}
.conn.down{color:var(--bad);border-color:var(--badbd)} .conn.down .dot{background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,224,138,.5)}70%{box-shadow:0 0 0 9px rgba(0,224,138,0)}100%{box-shadow:0 0 0 0 transparent}}

/* dynamic dashboard grid */
main{flex:1;min-height:0;display:grid;gap:clamp(6px,.9vh,12px);
  grid-template-columns:repeat(12,1fr);grid-template-rows:0.92fr 1fr 1fr 1.05fr 1.05fr;
  grid-template-areas:
    "pwr pwr pwr pwr pwr pwr pwr pwr pwr pwr pwr pwr"
    "inf inf inf inf cam cam cam cam alm alm alm alm"
    "inf inf inf inf cam cam cam cam alm alm alm alm"
    "mtx mtx mtx mtx mtx mtx mtx tmp tmp fab fab fab"
    "mtx mtx mtx mtx mtx mtx mtx tmp tmp ev  ev  ev";}
.r{min-height:0;display:flex;flex-direction:column;gap:clamp(3px,.5vh,6px)}
.r-pwr{grid-area:pwr}.r-inf{grid-area:inf}.r-alm{grid-area:alm}.r-cam{grid-area:cam}
.r-mtx{grid-area:mtx}.r-fabric{grid-area:fab}.r-tmp{grid-area:tmp}.r-ev{grid-area:ev}
.blabel{font-family:var(--mono);font-size:clamp(10px,1.35vh,13px);letter-spacing:4px;color:var(--dim);padding-left:2px;font-weight:600;flex:none}
.grid{display:grid;gap:clamp(6px,.8vw,11px);min-height:0;flex:1}
.energy{grid-template-columns:1.55fr 1.55fr 1fr 1fr 1fr 1fr}
.energy .card:nth-child(1) .v,.energy .card:nth-child(2) .v{font-size:clamp(30px,6vh,64px)}
.energy .card:nth-child(1) .k,.energy .card:nth-child(2) .k{font-size:clamp(13px,1.85vh,18px)}
.r-cam .card{flex:1;justify-content:flex-start}
.evhead{margin-top:.55em;padding-top:.5em;border-top:1px solid var(--line);font-family:var(--mono);font-size:clamp(9px,1.2vh,12px);letter-spacing:2px;color:var(--muted);margin-bottom:.25em}
.evrow{display:flex;align-items:center;gap:clamp(8px,.8vw,14px);padding:clamp(2px,.45vh,5px) 0;font-size:clamp(11px,1.5vh,15px)}
.evt{font-family:var(--mono);color:var(--muted);flex:none}
.evcam{color:var(--dim);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evlbl{font-family:var(--mono);color:var(--text);flex:none;font-size:.92em}
.infra{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cams{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tmp{grid-template-rows:1fr 1fr}

.card{position:relative;background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:14px;padding:clamp(9px,1.3vh,17px) clamp(10px,1.3vh,17px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;min-height:0}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.k{font-family:var(--mono);font-size:clamp(12px,1.7vh,17px);letter-spacing:1.2px;color:var(--text);text-transform:uppercase;font-weight:700}
.v{font-weight:780;line-height:.95;margin-top:.5em;font-variant-numeric:tabular-nums;font-size:clamp(19px,3.8vh,40px)}
.v small{font-size:.42em;color:var(--dim);font-weight:600;margin-left:.16em}
.v.ok{color:var(--ok)}.v.warn{color:var(--warn)}.v.bad{color:var(--bad)}
.sub{margin-top:.35em;font-family:var(--mono);font-size:clamp(9px,1.15vh,12px);color:var(--muted)}
.pill{position:absolute;top:clamp(8px,1.1vh,13px);right:clamp(8px,.7vw,13px);font-family:var(--mono);
  font-size:clamp(8px,1.05vh,11px);letter-spacing:1.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.pill.ok{color:var(--ok);background:var(--okbg);border-color:var(--okbd)}
.pill.bad{color:var(--bad);background:var(--badbg);border-color:var(--badbd)}
.pill.warn{color:var(--warn);background:var(--warnbg);border-color:var(--warnbd)}

.list .k{margin-bottom:.65em}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:clamp(2px,.5vh,6px) 0;border-top:1px solid var(--line);font-size:clamp(11px,1.6vh,16px)}
.lrow:first-of-type{border-top:none}
.lrow .lz{color:var(--dim);font-weight:600}.lrow .lz small{color:var(--muted);font-weight:500;font-size:.8em}
.lrow .ls{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.45vh,15px);display:flex;align-items:center;gap:7px;white-space:nowrap}
.lrow .ls small{color:var(--muted);font-weight:500}
.ls.ok{color:var(--ok)}.ls.bad{color:var(--bad)}.ls.warn{color:var(--warn)}
.dotc{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.dotc.ok{background:var(--ok);box-shadow:0 0 8px var(--okbd)}.dotc.bad{background:var(--bad);box-shadow:0 0 8px var(--badbd)}.dotc.warn{background:var(--warn)}

/* alarm */
.r-alm .card{flex:1;justify-content:flex-start}
.alarm-h{display:flex;align-items:center;gap:10px;margin-bottom:.4em}
.alarm-h .ic{font-size:clamp(15px,2.1vh,20px)}
.alarm-h .t{font-family:var(--mono);letter-spacing:1.5px;font-size:clamp(12px,1.7vh,16px);color:var(--text);font-weight:700}
.arow{display:flex;align-items:center;justify-content:space-between;padding:clamp(3px,.65vh,8px) 0;border-top:1px solid var(--line)}
.arow:first-of-type{border-top:none}
.arow .z{font-weight:700;font-size:clamp(12px,1.65vh,17px);color:var(--text)}
.arow .s{font-family:var(--mono);font-weight:800;letter-spacing:1px;font-size:clamp(11px,1.45vh,15px)}
.arow .s.armed{color:var(--bad)}.arow .s.safe{color:var(--ok)}

/* cameras */
.cams .card{justify-content:space-between;padding:clamp(8px,1.1vh,14px)}
.cam-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cam-name{font-weight:700;font-size:clamp(10px,1.35vh,13px);font-family:var(--mono);word-break:break-all;line-height:1.1}
.cam-state{margin-top:.2em;font-family:var(--mono);font-weight:800;letter-spacing:1px;font-size:clamp(13px,2vh,20px)}
.cam-state.motion{color:var(--bad)}.cam-state.idle{color:var(--ok)}
.cam-sub{margin-top:.2em;font-family:var(--mono);font-size:clamp(8px,1.05vh,11px);color:var(--muted)}

/* mtx panel */
.r-mtx .card{flex:1}
.r-ev .card,.r-fabric .card{flex:1}
.mtxpanel{justify-content:flex-start}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em}
.mtitle{font-weight:800;font-size:clamp(15px,2.2vh,22px);letter-spacing:2px}
.mlive{font-family:var(--mono);font-size:clamp(9px,1.2vh,12px);color:var(--ok);letter-spacing:1px}
.mgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,.55vw,8px);flex:none;min-height:0}
.mcell{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:clamp(6px,1vh,12px);display:flex;flex-direction:column;justify-content:center;min-height:0}
.mk{font-family:var(--mono);font-size:clamp(11px,1.5vh,15px);letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;font-weight:600}
.mv{font-weight:780;font-size:clamp(16px,2.8vh,30px);font-variant-numeric:tabular-nums;line-height:1;margin-top:.18em}
.mcell.ok .mv{color:var(--ok)}.mcell.warn .mv{color:var(--warn)}.mcell.bad .mv{color:var(--bad)}
.msub{font-family:var(--mono);font-size:clamp(8px,1vh,11px);color:var(--muted);margin-top:.15em}
.stackgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,.55vw,8px);margin-top:.55em;padding-top:.5em;border-top:1px solid var(--line);flex:1;min-height:0}
.stackrow{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:clamp(4px,.65vh,8px)}
.stackrow.degraded{border-color:var(--badbd);background:var(--badbg)}
.stackhost{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;font-family:var(--mono)}
.stackhost .dotc{grid-row:1/3}.stackhost span{font-size:clamp(9px,1.15vh,12px);font-weight:700;white-space:nowrap}
.stackhost small{grid-column:2;color:var(--muted);font-size:clamp(7px,.9vh,9px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.services{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:3px}
.svc{font-family:var(--mono);font-size:clamp(7px,.85vh,9px);line-height:1;padding:3px 5px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.svc.ok{color:var(--ok);border-color:var(--okbd);background:var(--okbg)}.svc.bad{color:var(--bad);border-color:var(--badbd);background:var(--badbg)}

.stale{color:var(--warn)!important}