:root{
  color-scheme:dark;
  --bg:#080b10;--bg2:#0b1017;--panel:#10161f;--panel2:#141c27;--panel3:#0d131b;
  --line:#263241;--line2:#1d2733;--text:#eef3f8;--muted:#8d9aaa;--faint:#5d6877;
  --ok:#64dda2;--warn:#f2b85c;--bad:#ff7f87;--info:#8fb4ff;--accent:#a9c2ff;
  --shadow:0 16px 42px rgba(0,0,0,.22);--r:16px;--sidebar:238px;--inspector:330px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow:hidden}button{font:inherit}.app{height:100dvh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--inspector);grid-template-rows:68px minmax(0,1fr);background:radial-gradient(circle at 62% -18%,#182338 0,#0b1017 31%,#080b10 68%)}
.sidebar{grid-row:1/3;border-right:1px solid var(--line);background:rgba(8,11,16,.94);padding:18px 14px;display:flex;flex-direction:column;min-height:0;backdrop-filter:blur(16px)}
.brand{padding:4px 8px 18px}.brandline{display:flex;align-items:center;gap:10px}.mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#a9c2ff,#647da9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.brand b{font-size:16px;letter-spacing:-.02em}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.mode-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:#101721;color:#bac4d1;font-size:10px;white-space:nowrap}.chip.ok{color:#a6e8c6;border-color:#2f654d}.chip.warn{color:#f3cf8b;border-color:#664d29}.chip.bad{color:#ffadb2;border-color:#69383b}.dot{width:7px;height:7px;border-radius:50%;background:currentColor}.dot.live{box-shadow:0 0 0 0 rgba(100,221,162,.45);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(100,221,162,0)}100%{box-shadow:0 0 0 0 rgba(100,221,162,0)}}
.nav{display:grid;gap:4px;margin-top:4px}.navbtn{border:0;background:transparent;color:#a8b3c1;text-align:left;padding:10px 11px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:10px}.navbtn:hover,.navbtn.active{background:#151e29;color:#fff}.navicon{width:8px;height:8px;border-radius:3px;background:#445164}.navbtn.active .navicon{background:var(--info);box-shadow:0 0 12px rgba(143,180,255,.45)}
.sidefoot{margin-top:auto;padding:14px 9px 2px;color:var(--faint);font-size:10px;line-height:1.5;border-top:1px solid var(--line2)}
.topbar{grid-column:2/3;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;min-width:0;background:rgba(8,11,16,.72);backdrop-filter:blur(16px);z-index:5}.top-left{min-width:0}.eyebrow{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.title{font-size:16px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;align-items:center;gap:8px}.sync{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok)}.sync.stale i{background:var(--warn)}.iconbtn{border:1px solid var(--line);background:#111924;color:#cbd5e1;border-radius:10px;padding:8px 10px;cursor:pointer}
.workspace{grid-column:2/3;grid-row:2/3;min-width:0;min-height:0;overflow:hidden;padding:18px}.view{height:100%;min-height:0;overflow:hidden}.view-scroll{height:100%;overflow:auto;padding-right:4px;scrollbar-width:thin}.viewhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.viewhead h1{font-size:26px;letter-spacing:-.04em;margin:0}.viewhead p{font-size:12px;color:var(--muted);margin:5px 0 0;max-width:760px}.viewmeta{font-size:10px;color:var(--faint);text-align:right}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.card{grid-column:span 4;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);min-width:0}.card.w6{grid-column:span 6}.card.w8{grid-column:span 8}.card.w12{grid-column:1/-1}.card h3{margin:0 0 12px;color:#8997a8;font-size:10px;text-transform:uppercase;letter-spacing:.11em}.metric{font-size:30px;font-weight:760;letter-spacing:-.045em}.metric.small{font-size:22px}.sub{font-size:11px;color:var(--muted);margin-top:5px}.rows{margin-top:10px}.row{display:grid;grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr);gap:12px;padding:9px 0;border-top:1px solid var(--line2);font-size:11px}.row:first-child{border-top:0}.key{color:#8491a1}.val{overflow-wrap:anywhere}.status-ok{color:var(--ok)}.status-warn{color:var(--warn)}.status-bad{color:var(--bad)}.status-info{color:var(--info)}
.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.frontier{font-size:38px;font-weight:800;letter-spacing:-.06em}.atom{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:#9db2d4;overflow-wrap:anywhere;margin-top:8px}.ring{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ok) 0 72%,#202a36 72% 100%);position:relative}.ring:after{content:"";position:absolute;inset:7px;background:var(--panel2);border-radius:50%}.ring span{position:relative;z-index:1;font-size:11px;color:#cdd7e3}
.spark{width:100%;height:78px;display:block}.spark .axis{stroke:#25303d;stroke-width:1}.spark .line{fill:none;stroke:#92b6ff;stroke-width:2}.spark .area{fill:rgba(143,180,255,.08)}
.delta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.delta span{font-size:10px;padding:4px 7px;background:#0d141d;border:1px solid var(--line2);border-radius:7px}
.attn{display:grid;gap:8px}.attn-item{padding:11px;border:1px solid var(--line2);border-radius:11px;background:#0d141d;display:flex;gap:10px;align-items:flex-start}.attn-item i{width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--warn)}.attn-item b{font-size:11px}.attn-item p{margin:3px 0 0;font-size:10px;color:var(--muted)}
.split{height:calc(100% - 58px);display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.5fr);gap:12px;min-height:0}.pane{min-height:0;overflow:auto;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}.panehead{position:sticky;top:0;z-index:2;padding:13px 14px;border-bottom:1px solid var(--line2);background:rgba(16,22,31,.94);backdrop-filter:blur(12px)}.panehead b{font-size:11px}.panehead small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.panebody{padding:10px}.masteritem{width:100%;border:1px solid transparent;background:transparent;color:#b5c0ce;text-align:left;padding:11px;border-radius:10px;cursor:pointer;margin-bottom:5px}.masteritem:hover,.masteritem.active{background:#151f2b;border-color:#263444;color:#fff}.masteritem b{display:block;font-size:11px}.masteritem span{display:block;margin-top:4px;color:var(--muted);font-size:9px}.detailblock{padding:14px;border:1px solid var(--line2);border-radius:12px;background:#0d141d;margin-bottom:10px}.detailblock h4{margin:0 0 9px;font-size:12px}.detailblock p{font-size:11px;color:#b6c0cc;line-height:1.55;margin:0}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.flowstep{padding:14px;border:1px solid var(--line2);border-radius:12px;background:#0d141d}.flowstep b{display:block;font-size:11px}.flowstep span{display:block;color:var(--muted);font-size:9px;margin-top:5px}.stategrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.state{padding:10px;border:1px solid var(--line2);border-radius:10px;background:#0d141d;font-size:10px;text-align:center;color:#aab5c3}.state.active{border-color:#3a5b83;color:#bcd4ff;background:#101b2b}
.inspector{grid-column:3/4;grid-row:1/3;border-left:1px solid var(--line);background:rgba(8,11,16,.95);min-width:0;display:flex;flex-direction:column}.inspecthead{height:68px;padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.inspecthead b{font-size:12px}.inspectbody{padding:14px;overflow:auto}.inspectgroup{margin-bottom:16px}.inspectgroup h4{margin:0 0 8px;color:#7f8b9a;text-transform:uppercase;letter-spacing:.1em;font-size:9px}.root{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;line-height:1.5;overflow-wrap:anywhere;color:#9bb4db;padding:9px;border:1px solid var(--line2);border-radius:9px;background:#0c1219;margin-bottom:7px}.inspector-close{display:none}
.mobilebar{display:none}.more-sheet{display:none}
.loading{height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px}.errorbox{padding:16px;border:1px solid #69383b;background:#261418;border-radius:12px;color:#ffc0c4;font-size:11px}
@media(max-width:1180px){
  :root{--sidebar:76px;--inspector:300px}.brand small,.brand b,.mode-row,.navbtn span,.sidefoot{display:none}.brandline{justify-content:center}.brand{padding-left:0;padding-right:0}.navbtn{justify-content:center;padding:12px}.navicon{width:10px;height:10px}.sidebar{padding-left:10px;padding-right:10px}.card{grid-column:span 6}
}
@media(max-width:860px){
  body{overflow:hidden}.app{grid-template-columns:1fr;grid-template-rows:58px minmax(0,1fr) 64px}.sidebar{display:none}.topbar{grid-column:1;grid-row:1;padding:0 14px}.workspace{grid-column:1;grid-row:2;padding:12px}.inspector{position:fixed;z-index:20;left:0;right:0;bottom:0;top:auto;height:min(72dvh,650px);transform:translateY(105%);transition:transform .22s ease;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.42)}.inspector.open{transform:translateY(0)}.inspector-close{display:block}.mobilebar{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:rgba(8,11,16,.97);z-index:15}.mobbtn{border:0;background:transparent;color:#8995a4;font-size:9px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:5px}.mobbtn i{width:7px;height:7px;border-radius:3px;background:#435063}.mobbtn.active{color:#fff}.mobbtn.active i{background:var(--info)}.more-sheet{position:fixed;z-index:25;left:10px;right:10px;bottom:72px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#101721;box-shadow:var(--shadow)}.more-sheet.open{display:grid;gap:5px}.more-sheet button{border:0;background:#151e29;color:#cbd5df;text-align:left;padding:12px;border-radius:10px}.top-actions .chip{display:none}.top-actions .iconbtn{display:block}.viewhead h1{font-size:22px}.viewmeta{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.card.w6,.card.w8{grid-column:span 1}.card.w12{grid-column:1/-1}.split{grid-template-columns:1fr;height:auto;overflow:auto}.pane{max-height:none}.flow{grid-template-columns:1fr}.stategrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .workspace{padding:10px}.grid{grid-template-columns:1fr}.card,.card.w6,.card.w8,.card.w12{grid-column:1}.card{padding:14px}.frontier{font-size:32px}.hero .ring{display:none}.row{grid-template-columns:1fr;gap:4px}.viewhead{margin-bottom:12px}.viewhead p{font-size:11px}.metric{font-size:27px}.split{height:100%}.pane{border-radius:13px}.stategrid{grid-template-columns:repeat(2,1fr)}
}