@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0c10;--panel:#12151c;--border:#1e2330;--text:#c8cdd8;--dim:#5a6275;--bright:#e8ecf4;--acc:#00b4d8;--acc-g:rgba(0,180,216,.15);--acc2:#06d6a0;--warn:#f77f00;--red:#ef476f}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;overflow:hidden;height:100vh}
#app{display:grid;grid-template-columns:280px 1fr 240px;grid-template-rows:48px 1fr 40px;height:100vh;gap:1px;background:var(--border)}
header{grid-column:1/-1;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.logo{display:flex;align-items:center;gap:8px}
.logo svg{width:20px;height:20px}
.logo h1{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;color:var(--bright)}
.logo h1 em{color:var(--acc);font-style:normal}.logo h1 span{color:var(--dim);font-weight:300}
.htb{display:flex;gap:4px}.htb button{background:var(--acc-g);border:1px solid var(--acc);color:var(--acc);padding:4px 10px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:9px;cursor:pointer;transition:.2s}.htb button:hover{background:var(--acc);color:var(--bg)}.htb button.sec{background:0;border-color:var(--border);color:var(--dim)}.htb button.sec:hover{border-color:var(--acc);color:var(--text)}

/* LEFT PANEL: Trace + Params */
#left{background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
#trace-wrap{flex:1;position:relative;overflow:hidden;min-height:0}
#trace-wrap canvas{display:block;width:100%;height:100%}
.drop-ov{position:absolute;inset:0;background:rgba(0,180,216,.08);border:2px dashed var(--acc);display:none;align-items:center;justify-content:center;z-index:10;pointer-events:none}.drop-ov.show{display:flex}.drop-ov span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc)}
.tl{position:absolute;top:8px;left:8px;font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--dim);background:rgba(18,21,28,.92);padding:2px 6px;border-radius:3px;border:1px solid var(--border);z-index:2}.tl em{font-style:normal;color:var(--acc)}
.tt{position:absolute;top:8px;right:8px;display:flex;gap:2px;z-index:2}
.tt button{background:rgba(18,21,28,.92);border:1px solid var(--border);color:var(--dim);width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:.2s}.tt button:hover{border-color:var(--acc);color:var(--acc)}.tt button.active{background:var(--acc-g);border-color:var(--acc);color:var(--acc)}
#params{overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;border-top:1px solid var(--border)}
#params::-webkit-scrollbar{width:3px}#params::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ps{margin-bottom:10px}.ps h4{font-family:'JetBrains Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin-bottom:6px}
.pr{display:flex;align-items:center;gap:4px;margin-bottom:5px}.pr label{font-size:10px;min-width:45px;color:var(--text)}.pr .v{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--acc);min-width:32px;text-align:right}
.pr input[type=range]{flex:1;-webkit-appearance:none;height:2px;border-radius:1px;background:#1e2330;outline:0;cursor:pointer;min-width:40px}
.pr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--acc);cursor:pointer}
.pr input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.pr select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 4px;border-radius:3px;font-size:9px;cursor:pointer;outline:0;flex:1}

/* CENTER: 3D Sim */
#sim3d{background:var(--bg);position:relative;overflow:hidden}
#sim3d canvas{display:block}
.sim-label{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:9px;background:rgba(18,21,28,.92);padding:3px 8px;border-radius:3px;border:1px solid var(--border);z-index:2;color:var(--dim)}.sim-label em{font-style:normal;color:var(--warn)}
.sim-bar{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:6px;align-items:center;z-index:2;background:rgba(18,21,28,.94);padding:7px 10px;border-radius:5px;border:1px solid var(--border);backdrop-filter:blur(6px)}
.sim-bar label{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--dim);white-space:nowrap}
.sim-bar .v{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--acc);min-width:30px;text-align:right}
.sim-bar input[type=range]{flex:1;-webkit-appearance:none;height:2px;border-radius:1px;background:#1e2330;outline:0;cursor:pointer;min-width:50px}
.sim-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--acc);cursor:pointer}
.sim-bar input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--acc);cursor:pointer;border:0}
.sim-bar button{background:var(--acc-g);border:1px solid var(--acc);color:var(--acc);padding:3px 8px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:8px;cursor:pointer;white-space:nowrap;transition:.2s}.sim-bar button:hover{background:var(--acc);color:var(--bg)}.sim-bar button.on{background:var(--red);border-color:var(--red);color:#fff}
.view-toggle{position:absolute;top:10px;right:10px;display:flex;gap:2px;z-index:2}
.view-toggle button{background:rgba(18,21,28,.92);border:1px solid var(--border);color:var(--dim);padding:3px 8px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:8px;cursor:pointer;transition:.2s}.view-toggle button:hover{border-color:var(--acc);color:var(--text)}.view-toggle button.active{background:var(--acc-g);border-color:var(--acc);color:var(--acc)}

/* RIGHT: Dashboard */
#dash{background:var(--panel);overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
#dash::-webkit-scrollbar{width:3px}#dash::-webkit-scrollbar-thumb{background:var(--border)}
#dash h4{font-family:'JetBrains Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin-bottom:8px}
.dr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.dr .l{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim)}.dr .n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600}
.n.cy{color:var(--acc)}.n.gn{color:var(--acc2)}.n.or{color:var(--warn)}.n.rd{color:var(--red)}.n.wh{color:var(--text)}
.divider{border-top:1px solid var(--border);margin:8px 0}
.bar{height:4px;border-radius:2px;background:var(--border);margin:3px 0 6px;overflow:hidden}.bar-f{height:100%;border-radius:2px;transition:width .3s}
.polar-wrap{margin-top:4px}.polar-wrap canvas{width:100%;border-radius:4px;border:1px solid var(--border)}
.cp-wrap{margin-top:4px}.cp-wrap canvas{width:100%;height:60px;border-radius:4px;border:1px solid var(--border)}
.legend{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.legend span{font-family:'JetBrains Mono',monospace;font-size:8px;display:flex;align-items:center;gap:3px}.legend .dot{width:6px;height:6px;border-radius:50%;display:inline-block}

footer{grid-column:1/-1;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim)}footer b{color:var(--text)}