:root{
  --bg:#0b0e14; --bg2:#11151f; --panel:#141926; --panel2:#1a2030; --line:#232b3d;
  --txt:#dfe6f5; --dim:#8593ad; --dim2:#5d6b85;
  --up:#26d07c; --down:#ff5c72; --warn:#ffb020; --info:#4a9eff; --accent:#7c5cff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--info);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a3348;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a4560}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;height:100vh}
header{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--bg2);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.5px;font-size:15px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--dim2);box-shadow:0 0 0 0 rgba(38,208,124,.6)}
.brand .dot.live{background:var(--up);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,208,124,.5)}70%{box-shadow:0 0 0 7px rgba(38,208,124,0)}100%{box-shadow:0 0 0 0 rgba(38,208,124,0)}}
.pill{font:600 10px/1 var(--mono);padding:5px 8px;border-radius:4px;letter-spacing:.7px;
  text-transform:uppercase;border:1px solid var(--line);color:var(--dim)}
.pill.paper{background:rgba(74,158,255,.12);border-color:rgba(74,158,255,.4);color:var(--info)}
.pill.live{background:rgba(255,92,114,.14);border-color:rgba(255,92,114,.5);color:var(--down)}
.pill.killed{background:rgba(255,92,114,.2);border-color:var(--down);color:var(--down)}
.hstats{display:flex;gap:20px;margin-left:auto;align-items:center}
.hstat{text-align:right}
.hstat .k{font:10px/1 var(--sans);color:var(--dim2);text-transform:uppercase;letter-spacing:.6px}
.hstat .v{font:600 15px/1.3 var(--mono)}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:6px 11px;
  border-radius:5px;cursor:pointer;font:600 11px var(--sans);transition:.13s}
.btn:hover{background:#232b3d;border-color:#39435c}
.btn.danger{border-color:rgba(255,92,114,.45);color:var(--down)}
.btn.danger:hover{background:rgba(255,92,114,.14)}

nav{display:flex;gap:2px;padding:0 18px;background:var(--bg2);border-bottom:1px solid var(--line);flex:0 0 auto}
nav button{background:none;border:none;color:var(--dim);padding:9px 14px;cursor:pointer;
  font:600 12px var(--sans);border-bottom:2px solid transparent;transition:.13s}
nav button:hover{color:var(--txt)}
nav button.on{color:var(--txt);border-bottom-color:var(--accent)}
nav .count{font:600 10px var(--mono);background:var(--panel2);padding:1px 5px;border-radius:8px;margin-left:5px;color:var(--dim)}

main{flex:1;overflow-y:auto;padding:14px 18px 40px}
.view{display:none}.view.on{display:block}

/* ---------- layout ---------- */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
@media(max-width:1250px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:1fr!important}.span2{grid-column:span 1}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.panel>h3{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
  padding:10px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;background:var(--bg2)}
.panel>h3 .sub{margin-left:auto;font:500 10px var(--mono);color:var(--dim2);text-transform:none;letter-spacing:0}
.panel .body{padding:12px 13px}
.panel .body.flush{padding:0}
.scroll{max-height:390px;overflow-y:auto}
.scroll.tall{max-height:620px}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.card .label{font:10px var(--sans);color:var(--dim2);text-transform:uppercase;letter-spacing:.7px}
.card .val{font:600 22px/1.25 var(--mono);margin-top:3px}
.card .note{font:11px var(--mono);color:var(--dim);margin-top:3px}
.bar{height:4px;background:var(--panel2);border-radius:2px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--info);border-radius:2px;transition:width .3s}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--down)}.bar i.ok{background:var(--up)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font:12px var(--mono)}
th{position:sticky;top:0;background:var(--bg2);color:var(--dim2);font:600 10px var(--sans);
  text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);z-index:2}
td{padding:7px 10px;border-bottom:1px solid rgba(35,43,61,.55);white-space:nowrap}
tbody tr:hover{background:rgba(124,92,255,.06)}
.r{text-align:right}
.up{color:var(--up)}.down{color:var(--down)}.dim{color:var(--dim)}.dim2{color:var(--dim2)}
.warn{color:var(--warn)}.info{color:var(--info)}
.tag{font:600 9px var(--mono);padding:2px 5px;border-radius:3px;background:var(--panel2);color:var(--dim);letter-spacing:.4px}
.tag.long{background:rgba(38,208,124,.15);color:var(--up)}
.tag.short{background:rgba(255,92,114,.15);color:var(--down)}
.tag.ap{background:rgba(124,92,255,.18);color:#b3a0ff}
.tag.a{background:rgba(74,158,255,.14);color:var(--info)}
.tag.syn{background:rgba(255,176,32,.14);color:var(--warn)}
.empty{padding:26px;text-align:center;color:var(--dim2);font:12px var(--sans)}

/* ---------- charts ---------- */
canvas{display:block;width:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:10px var(--mono);color:var(--dim);padding:8px 13px 0}
.legend i{display:inline-block;width:9px;height:2px;vertical-align:middle;margin-right:4px}

/* ---------- feeds ---------- */
.feed{display:flex;flex-direction:column}
.item{padding:9px 13px;border-bottom:1px solid rgba(35,43,61,.5);display:flex;gap:9px;align-items:flex-start}
.item:hover{background:rgba(124,92,255,.05)}
.item .s{width:3px;align-self:stretch;border-radius:2px;background:var(--dim2);flex:0 0 auto}
.item .s.up{background:var(--up)}.item .s.down{background:var(--down)}.item .s.warn{background:var(--warn)}
.item .c{flex:1;min-width:0}
.item .t{font:12px var(--sans);color:var(--txt);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .m{font:10px var(--mono);color:var(--dim2);margin-top:3px;display:flex;gap:9px;flex-wrap:wrap}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font:11px var(--mono)}
.kv .k{color:var(--dim2)}
.check{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(35,43,61,.5);font:12px var(--mono)}
.check .ic{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--sans);flex:0 0 auto}
.check .ic.p{background:rgba(38,208,124,.18);color:var(--up)}
.check .ic.f{background:rgba(255,92,114,.18);color:var(--down)}
.check .n{flex:1;color:var(--dim)}
.banner{padding:11px 14px;border-radius:7px;font:12px var(--sans);margin-bottom:12px;border:1px solid}
.banner.info{background:rgba(74,158,255,.08);border-color:rgba(74,158,255,.3);color:#a8ccff}
.banner.warn{background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.3);color:#ffd98a}
.banner.bad{background:rgba(255,92,114,.09);border-color:rgba(255,92,114,.35);color:#ffb0ba}
.banner b{color:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 13px 2px}
.chip{font:600 10px var(--mono);padding:4px 8px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line);color:var(--dim);cursor:pointer}
.chip:hover{border-color:#39435c;color:var(--txt)}
.chip.on{background:rgba(124,92,255,.16);border-color:var(--accent);color:#c3b4ff}
.src{display:flex;align-items:center;gap:7px;padding:6px 0;font:11px var(--mono);border-bottom:1px solid rgba(35,43,61,.4)}
.led{width:7px;height:7px;border-radius:50%;background:var(--down);flex:0 0 auto}
.led.ok{background:var(--up)}

/* ---------- token gate ---------- */
#login-veil{position:fixed;inset:0;background:rgba(11,14,20,.96);backdrop-filter:blur(6px);
  display:grid;place-items:center;z-index:999}
.login-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:30px 28px;width:min(420px,92vw);text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-brand{font:700 22px var(--sans);letter-spacing:2px;margin-bottom:8px}
.login-sub{font:12px/1.6 var(--sans);color:var(--dim);margin-bottom:18px}
.login-sub code{font:11px var(--mono);background:var(--panel2);padding:1px 5px;border-radius:3px;color:var(--info)}
#login-input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  color:var(--txt);padding:11px 13px;font:13px var(--mono);margin-bottom:11px;outline:none}
#login-input:focus{border-color:var(--accent)}
#login-veil .btn{width:100%;padding:11px;font:600 13px var(--sans);
  background:var(--accent);border-color:var(--accent);color:#fff}
#login-veil .btn:hover{filter:brightness(1.12)}
.login-msg{font:11px var(--mono);color:var(--warn);margin-top:11px;min-height:14px}

/* ---------- phone ---------- */
@media(max-width:700px){
  header{flex-wrap:wrap;gap:9px;padding:9px 12px}
  .hstats{width:100%;margin-left:0;gap:13px;justify-content:space-between;flex-wrap:wrap}
  .hstat .v{font-size:13px}
  #btn-flatten,#btn-kill{flex:1;min-width:110px}
  nav{overflow-x:auto;padding:0 8px;-webkit-overflow-scrolling:touch}
  nav button{white-space:nowrap;padding:9px 10px;font-size:11px}
  main{padding:10px 8px 40px}
  .scroll,.scroll.tall{max-height:460px}
  table{font-size:11px}
  td,th{padding:6px 7px}
}