:root{
  --ink:#0a0c10;
  --panel:#11141b;
  --panel-2:#161a23;
  --line:#242a37;
  --paper:#e9ebf1;
  --dim:#8890a4;
  --teal:#5eead4;
  --amber:#f5a623;
  --violet:#b794f6;
  --rose:#ff6b81;
  --grid:#1b202b;
  --mono:'JetBrains Mono', monospace;
  --disp:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased;}
html,body{margin:0;padding:0;background:var(--ink);color:var(--paper);font-family:var(--body);height:100%;overflow:hidden;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

.app{display:grid; grid-template-columns:280px 1fr; height:100vh;}

.sidebar{background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; display:flex; flex-direction:column;}
.brand{padding:22px 20px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:5;}
.brand .mark{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--teal); text-transform:uppercase;}
.brand h1{font-family:var(--disp); font-size:22px; font-weight:700; margin:6px 0 4px; letter-spacing:-0.02em; line-height:1.05;}
.brand p{font-size:12px; color:var(--dim); margin:0; line-height:1.5;}
.searchbox{margin:12px 20px 4px;}
.searchbox input{width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper); padding:9px 11px; border-radius:7px; font-family:var(--mono); font-size:12px;}
.searchbox input:focus{outline:none; border-color:var(--teal);}
.navtree{padding:10px 10px 30px;}
.navcat{margin-top:14px;}
.navcat-title{font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); padding:6px 10px; display:flex; align-items:center; gap:8px;}
.navcat-title .num{color:var(--amber);}
.navitem{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:#c6cad6; transition:background .12s, color .12s;}
.navitem:hover{background:var(--panel-2); color:var(--paper);}
.navitem.active{background:linear-gradient(90deg, rgba(94,234,212,.14), transparent); color:var(--teal); font-weight:600;}
.navitem .dot{width:6px; height:6px; border-radius:50%; background:var(--line); flex-shrink:0;}
.navitem.active .dot{background:var(--teal); box-shadow:0 0 8px var(--teal);}
.navitem .idx{font-family:var(--mono); font-size:10px; color:var(--dim); width:16px;}

.main{overflow-y:auto; position:relative;}
.topbar{position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:rgba(10,12,16,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topbar .crumbs{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:1px; text-transform:uppercase;}
.topbar .crumbs b{color:var(--teal);}
.topbar .tools{display:flex; gap:8px;}
.btn{background:var(--panel-2); border:1px solid var(--line); color:var(--paper); font-family:var(--mono); font-size:11px; padding:8px 13px; border-radius:7px; cursor:pointer; letter-spacing:.5px; transition:all .12s; text-transform:uppercase;}
.btn:hover{border-color:var(--teal); color:var(--teal);}
.btn.primary{background:var(--teal); color:#04181a; border-color:var(--teal); font-weight:700;}
.btn.primary:hover{background:#7ff2df; color:#04181a;}
.btn.amber{border-color:var(--amber); color:var(--amber);}
.btn:active{transform:scale(.96);}

.stage{padding:28px 34px 90px;}
.hero{padding-bottom:8px;}
.hero .eyebrow{font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:3px; text-transform:uppercase;}
.hero h2{font-family:var(--disp); font-size:34px; margin:8px 0 10px; letter-spacing:-0.02em;}
.hero .desc{color:var(--dim); font-size:14.5px; line-height:1.65; max-width:760px;}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; margin-top:20px;}
.panel-title{font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;}
.controls{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; align-items:flex-end;}
.ctrl{display:flex; flex-direction:column; gap:6px; min-width:120px;}
.ctrl label{font-family:var(--mono); font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; display:flex; justify-content:space-between;}
.ctrl label span{color:var(--teal);}
input[type=range]{-webkit-appearance:none; width:100%; height:4px; background:var(--line); border-radius:2px; outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--teal); cursor:pointer; box-shadow:0 0 0 3px rgba(94,234,212,.2);}
select{background:var(--panel-2); border:1px solid var(--line); color:var(--paper); padding:7px 10px; border-radius:6px; font-family:var(--mono); font-size:12px;}

.canvasWrap{width:100%; background:var(--grid); border-radius:10px; border:1px solid var(--line); position:relative; overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:24px 24px;}
canvas{display:block; width:100%;}

.matgrid{display:inline-grid; gap:3px; font-family:var(--mono); font-weight:600;}
.matcell{width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:5px; font-size:13px; background:var(--panel-2); border:1px solid var(--line); color:var(--paper); transition:all .25s;}
.matcell.hot{background:rgba(94,234,212,.18); border-color:var(--teal); color:var(--teal);}
.matcell.warm{background:rgba(245,166,35,.16); border-color:var(--amber); color:var(--amber);}
.matcell.cold{background:rgba(255,107,129,.14); border-color:var(--rose); color:var(--rose);}
.matrow{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.matlabel{font-family:var(--mono); font-size:11px; color:var(--dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:1px;}
.matblock{display:flex; flex-direction:column; align-items:flex-start;}
.opsign{font-family:var(--disp); font-size:22px; color:var(--dim);}

.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;}
.legend .item{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--dim); font-family:var(--mono);}
.legend .sw{width:10px; height:10px; border-radius:3px;}

.footnote{font-size:12.5px; color:var(--dim); line-height:1.7; margin-top:14px; border-top:1px dashed var(--line); padding-top:14px;}
.footnote b{color:var(--paper);}
.footnote code{font-family:var(--mono); color:var(--teal); background:rgba(94,234,212,.08); padding:1px 5px; border-radius:4px;}

.gridcols{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:980px){.gridcols{grid-template-columns:1fr;}}

.statrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.stat{background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:10px 14px; min-width:100px;}
.stat .k{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; color:var(--dim); letter-spacing:1px;}
.stat .v{font-family:var(--mono); font-size:18px; font-weight:700; color:var(--teal); margin-top:2px;}

.badge{display:inline-block; font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:100px; border:1px solid var(--line); color:var(--dim); text-transform:uppercase; letter-spacing:1px;}

.svgdiag{width:100%; height:auto;}
.node{fill:var(--panel-2); stroke:var(--line); stroke-width:1.5;}
.node.on{fill:rgba(94,234,212,.2); stroke:var(--teal);}
.node.off{fill:rgba(255,107,129,.08); stroke:var(--rose); opacity:.45;}
.edge{stroke:var(--line); stroke-width:1.2; fill:none;}
.edge.hot{stroke:var(--teal); stroke-width:1.8;}
.lbl{font-family:var(--mono); font-size:10px; fill:var(--dim);}
.lbl.b{fill:var(--paper); font-weight:600;}

.emptystate{padding:60px 20px; text-align:center; color:var(--dim); font-family:var(--mono); font-size:13px;}