:root{
  --bg:#0c141c; --bg2:#101c26; --panel:#0f1a23; --panel2:#132330;
  --line:#22384a; --line-soft:#1a2c3a; --ink:#e7f0f5; --dim:#8da1b0; --mut:#5f7889;
  --amber:#f2a83b; --cyan:#3fd0d6; --ok:#5bd08a; --warn:#e2604f;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Inter,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(120% 80% at 50% -10%,#14222e 0,var(--bg) 60%);color:var(--ink);font-family:var(--sans);min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
h1{margin:3px 0 0;font-size:17px;font-weight:650;letter-spacing:.01em}
.conn{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.conn .dot{width:9px;height:9px;border-radius:50%;background:var(--mut)}
.conn .dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
main{display:grid;grid-template-columns:1fr 420px;gap:16px;padding:18px 22px;max-width:1280px;margin:0 auto}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line-soft);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.pill{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--panel2);border:1px solid var(--line);padding:1px 8px;border-radius:20px;color:var(--dim)}
.hintlbl{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mut);text-transform:none;font-weight:400}
.list{padding:8px 12px;display:flex;flex-direction:column;gap:7px}
.empty{color:var(--mut);font-size:12px;font-family:var(--mono);padding:8px 4px}
.empty code{color:var(--cyan)}
.row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--panel2);border:1px solid var(--line-soft);border-radius:9px}
.row .id{font-family:var(--mono);font-size:12px;font-weight:600}
.row .meta{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-top:2px}
.row .rt{margin-left:auto;text-align:right}
.row .val{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.row .val.cy{color:var(--cyan)} .row .val.am{color:var(--amber)}
.sdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--mut)}
.sdot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.sdot.charging{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.sdot.off{background:var(--warn)}
.badge{font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
.badge.sub{color:var(--cyan);border-color:var(--cyan)} .badge.pre{color:var(--amber);border-color:var(--amber)}
.badge.no{color:var(--warn);border-color:var(--warn)}
.gate{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 14px}
.gate select,.gate input{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 10px;font-family:var(--mono);font-size:12px}
.gate .b{border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);padding:9px 12px;font-weight:600;font-size:12px;cursor:pointer;transition:.12s}
.gate .b:hover{transform:translateY(-1px)}
.gate .b.in{border-color:var(--cyan)} .gate .b.out{border-color:var(--amber)}
.feedcol{min-height:0}
.feedcard{display:flex;flex-direction:column;height:calc(100vh - 130px);position:sticky;top:18px}
.clr{margin-left:auto;background:none;border:0;color:var(--mut);font-family:var(--mono);font-size:10px;cursor:pointer}
.clr:hover{color:var(--ink)}
.feed{flex:1;overflow-y:auto;padding:8px 14px;font-family:var(--mono);font-size:11px;line-height:1.7}
.feed .e{display:flex;gap:8px}
.feed .ts{color:var(--mut);flex:0 0 auto}
.feed .tag{flex:0 0 auto;font-size:9.5px;font-weight:600;padding:0 5px;border-radius:4px;align-self:center}
.tag-sys{background:#20262c;color:var(--mut)} .tag-loop{background:#2b2213;color:var(--amber)}
.tag-reader{background:#2b2213;color:#f2c46a} .tag-ctrl{background:#132a2c;color:var(--cyan)}
.tag-ocpp{background:#0f2a2c;color:#6fe3e8} .tag-cloud{background:#1b2333;color:#9fb4ff}
.feed .m{color:var(--dim);white-space:normal}
.feed .m.ok{color:var(--ok)} .feed .m.warn{color:var(--warn)}
.feed::-webkit-scrollbar,.list::-webkit-scrollbar{width:8px}
.feed::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
@media(max-width:900px){main{grid-template-columns:1fr}.feedcard{height:60vh;position:static}}