:root{
  --bg:#07090d;--bg2:#0b0e14;--line:#1a2030;--line2:#252c3d;--ink:#d7dce6;--ink2:#8b93a7;--ink3:#5a6275;
  --project:#e8ecf5;--system:#3dd6e0;--pipeline:#f0b429;--module:#4f8dff;--file:#4f8dff;--class:#a26bff;--function:#a26bff;--method:#a26bff;
  --memory:#3ddc84;--decision:#ff6b4a;--session:#f0b429;--audit:#9aa3b8;--dependency:#6f7a94;
  --sel:#ffffff;--font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:12px/1.45 var(--font);}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font:10px var(--font);color:var(--ink3);border:1px solid var(--line2);border-radius:3px;padding:0 4px;margin-left:6px}
body{display:grid;grid-template-rows:44px 1fr 170px;height:100vh;overflow:hidden}

/* auth */
.login-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#121827 0%,#07090d 68%);padding:20px}
.login-screen[hidden]{display:none}
.login-panel{width:min(390px,100%);border:1px solid var(--line2);background:#0b0e14;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.login-panel canvas{display:block;margin-bottom:16px}
.login-eyebrow{font-size:9px;letter-spacing:.16em;color:var(--memory);margin-bottom:7px}
.login-panel h1{font-size:22px;font-weight:500;margin:0 0 5px}
.login-panel p{color:var(--ink3);margin:0 0 24px}
.login-panel label{display:block;color:var(--ink2);font-size:10px;letter-spacing:.06em;margin-top:13px;text-transform:uppercase}
.login-panel input{display:block;width:100%;height:38px;margin-top:5px;padding:0 10px;border:1px solid var(--line2);border-radius:4px;background:#07090d;color:var(--ink);font:12px var(--font);outline:0}
.login-panel input:focus{border-color:var(--memory)}
.login-panel button{width:100%;height:38px;margin-top:18px;border:1px solid var(--memory);border-radius:4px;color:#07110b;background:var(--memory);font-weight:600}
.login-panel button:disabled{opacity:.5;cursor:wait}
.login-error{min-height:17px;margin-top:8px;color:var(--decision);font-size:10px}

/* top */
.top{display:flex;align-items:center;gap:18px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg2);min-width:0;overflow:hidden}
.brand{display:flex;gap:10px;align-items:center;min-width:0;flex:none}
.brand-title{font-size:12px;letter-spacing:.06em;font-weight:600}
.brand-sub{font-size:10px;color:var(--ink3);display:flex;gap:10px}
.live{color:var(--memory)}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:4px;box-shadow:0 0 6px currentColor}
.live.off{color:var(--decision)}
.tabs{display:flex;gap:4px;flex:1}
.tabs button{padding:12px 10px;font-size:11px;letter-spacing:.05em;color:var(--ink2);border-bottom:2px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--class)}
.top-right{display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:5px;padding:3px 8px;background:var(--bg)}
.search input{background:none;border:0;color:var(--ink);font:inherit;width:170px;outline:0}
.search span{color:var(--ink3)}
.sync{font-size:10px;color:var(--ink3)}.sync b{color:var(--memory)}
.auth-user{max-width:110px;overflow:hidden;text-overflow:ellipsis;color:var(--ink3);font-size:10px}
.logout{padding:4px 7px;border:1px solid var(--line2);border-radius:4px;color:var(--ink2);font-size:10px;white-space:nowrap}
.logout:hover{border-color:var(--ink3);color:var(--ink)}

/* shell */
.shell{display:grid;grid-template-columns:230px minmax(0,1fr) 340px;min-height:0;min-width:0;overflow:hidden}
.left,.right{border-right:1px solid var(--line);background:var(--bg2);overflow:auto;padding:10px 12px;min-width:0}
.right{border-right:0;border-left:1px solid var(--line)}
.sec-title{font-size:9.5px;letter-spacing:.1em;color:var(--ink3);margin:10px 0 6px}
.nav .item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;color:var(--ink2);cursor:pointer;border:1px solid transparent}
.nav .item:hover{background:#0f1420}.nav .item.on{background:#0f1420;border-color:var(--line2);color:var(--ink)}
.nav .item .dot{width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);flex:none}
.nav .item small{display:block;color:var(--ink3);font-size:10px}
.nav .item.child{padding-left:22px}
.legend div{display:flex;align-items:center;gap:8px;color:var(--ink2);padding:2px 0}
.legend i{width:9px;height:9px;border:1px solid currentColor;display:inline-block;transform:rotate(45deg) scale(.8)}
.ctrls button{display:flex;width:100%;justify-content:space-between;color:var(--ink2);padding:4px 6px;border-radius:4px}
.ctrls button:hover{background:#0f1420;color:var(--ink)}

.center{position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 40%,#0c1018 0%,var(--bg) 70%)}
#graph{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#graph.drag{cursor:grabbing}
.crumbs{position:absolute;top:10px;left:14px;z-index:2;display:flex;gap:6px;color:var(--ink3);font-size:11px}
.crumbs span{cursor:pointer}.crumbs span:hover{color:var(--ink)}.crumbs span.cur{color:var(--ink)}
.axes{position:absolute;top:8px;right:12px;z-index:2;opacity:.7}
.status{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;border:1px solid var(--line2);background:rgba(11,14,20,.85);padding:4px 12px;border-radius:5px;color:var(--ink2);font-size:11px}
.hint{position:absolute;bottom:10px;right:12px;color:var(--ink3);font-size:10px}

/* inspector */
.right .empty{color:var(--ink3);padding:20px 0}
.ins-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ins-h h2{font-size:13px;margin:0;font-weight:600;word-break:break-all}
.pill{font-size:9.5px;letter-spacing:.06em;padding:2px 6px;border:1px solid;border-radius:4px;text-transform:uppercase}
.ins-meta{color:var(--ink3);font-size:10.5px;margin:6px 0 10px;word-break:break-all}
.ins-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0}
.ins-tabs button{padding:6px 8px;font-size:10px;letter-spacing:.06em;color:var(--ink3);border-bottom:2px solid transparent}
.ins-tabs button.on{color:var(--ink);border-bottom-color:var(--class)}
.ins-sec{margin:10px 0}
.ins-sec h4{font-size:9.5px;letter-spacing:.1em;color:var(--ink3);margin:0 0 5px}
.ins-sec p{margin:0;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.row{display:flex;justify-content:space-between;gap:8px;padding:4px 6px;border:1px solid var(--line);border-radius:4px;margin-bottom:4px;cursor:pointer;color:var(--ink2)}
.row:hover{border-color:var(--line2);color:var(--ink);background:#0f1420}
.row b{font-weight:500;color:var(--ink)}
.row .n{color:var(--ink3);font-size:10px;white-space:nowrap}
.row .tag{font-size:9px;border:1px solid;border-radius:3px;padding:0 4px;white-space:nowrap}
.code{background:#05070b;border:1px solid var(--line);border-radius:5px;overflow:auto;max-height:420px;font-size:11px}
.code table{border-collapse:collapse;width:100%}
.code td{padding:0 8px;white-space:pre;vertical-align:top}
.code td.ln{color:var(--ink3);text-align:right;user-select:none;width:1%;border-right:1px solid var(--line)}
.code tr.hl td{background:#0f1a2b}
.code .k{color:#c792ea}.code .s{color:#c3e88d}.code .c{color:#546e7a;font-style:italic}.code .n{color:#f78c6c}.code .d{color:#82aaff}
.code-tools{display:flex;gap:6px;justify-content:flex-end;margin:4px 0}
.code-tools button{color:var(--ink3);font-size:10px;border:1px solid var(--line);padding:2px 6px;border-radius:3px}
.code-tools button:hover{color:var(--ink)}

/* bottom */
.bottom{display:grid;grid-template-columns:250px 240px minmax(0,1fr) 260px;border-top:1px solid var(--line);background:var(--bg2);min-height:0;min-width:0;overflow:hidden}
.panel{border-right:1px solid var(--line);padding:6px 12px;overflow:auto;min-width:0}
.panel:last-child{border-right:0}
#minimap{display:block;border:1px solid var(--line);border-radius:4px;background:#05070b;width:100%;height:110px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.metrics div{display:flex;justify-content:space-between;color:var(--ink2);padding:2px 0}
.metrics b{font-weight:500}
.activity .ev{display:grid;grid-template-columns:8px 60px 1fr;gap:8px;align-items:start;padding:3px 0;color:var(--ink2);cursor:pointer;border-bottom:1px solid var(--line)}
.activity .ev:hover{color:var(--ink)}
.activity .ev i{width:7px;height:7px;border-radius:2px;margin-top:4px;display:inline-block}
.activity .ev small{color:var(--ink3);font-size:10px;display:block}
.kv div{display:flex;justify-content:space-between;color:var(--ink2);padding:2px 0}
.kv b{font-weight:500;color:var(--ink)}

/* tab pane (lists over the graph) */
.tabpane{position:absolute;top:44px;left:230px;right:340px;bottom:170px;background:rgba(7,9,13,.96);z-index:5;overflow:auto;padding:14px 18px}
.tabpane h3{font-size:11px;letter-spacing:.1em;color:var(--ink3);margin:0 0 10px}
.tabpane .row{max-width:900px}
.tabpane .stage{display:flex;align-items:center;gap:10px;margin:6px 0}
.tabpane .stage .arrow{color:var(--ink3)}
.tabpane .stagebox{border:1px solid;border-radius:6px;padding:8px 10px;min-width:150px;cursor:pointer}
.tabpane .stagebox small{display:block;color:var(--ink3)}
.dim{opacity:.4}
@media (max-width:1100px){.shell{grid-template-columns:200px 1fr 300px}.bottom{grid-template-columns:1fr 1fr}.tabpane{left:200px;right:300px}}
@media (max-width:800px){.shell{grid-template-columns:1fr}.left,.right{display:none}.bottom{display:none}body{grid-template-rows:44px 1fr}.tabpane{left:0;right:0;bottom:0}}