:root{--bg:#0a0a15;--bgp:#11111e;--bgc:#16162a;--bgg:#0e0e1a;--fg:#c0c0d0;--fgd:#606078;--fgb:#e0e0f0;--acc:#6080f0;--aw:#f0a060;--ac:#60f0a0;--ah:#f06060;--bd:#1e1e38;--bdb:#2e2e58;--cw:90px;--ps:28px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:'SF Mono','Fira Code',monospace;font-size:13px;user-select:none;-webkit-user-select:none}
#app{display:grid;grid-template-rows:auto auto 1fr auto auto;height:100vh}

/* Topbar */
#topbar{display:flex;align-items:center;gap:12px;padding:6px 14px;background:linear-gradient(180deg,#14142a,#0e0e1e);border-bottom:1px solid var(--bd)}
.logo{font-weight:700;font-size:14px;letter-spacing:1px;color:var(--fgb);white-space:nowrap}
#transport{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb{background:var(--bgc);border:1px solid var(--bdb);color:var(--fgb);width:32px;height:28px;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.tb:hover{background:var(--bdb)}
.tb.on{background:var(--acc);color:#fff;box-shadow:0 0 8px var(--acc)}
.tb.rec.on{background:var(--ah);box-shadow:0 0 8px var(--ah);animation:pr 1.5s ease-in-out infinite}
@keyframes pr{50%{opacity:.6}}
.pos{font-variant-numeric:tabular-nums;color:var(--acc);font-size:13px;min-width:55px;text-align:center}
.bpm{font-variant-numeric:tabular-nums;color:var(--fgb);font-size:13px;min-width:55px;text-align:right}
.bpm small{color:var(--fgd);font-size:10px}
.taps{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fgd)}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--fgd);transition:background .3s}
.tdot.live{background:var(--ac);box-shadow:0 0 6px var(--ac);animation:pl 2s ease-in-out infinite}
@keyframes pl{50%{opacity:.5}}
.dev{color:var(--fgd);font-size:11px}

/* Jazz bar */
#jazzbar{display:flex;align-items:center;gap:14px;padding:4px 14px;background:var(--bgp);border-bottom:1px solid var(--bd);font-size:12px;overflow:hidden;flex-wrap:wrap}
.jm{font-weight:700;color:var(--aw);white-space:nowrap}
.jc{color:var(--ac);white-space:nowrap}
.jd{color:var(--fgd);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:100px}
.jms{display:flex;gap:10px;align-items:center}
.ml{color:var(--fgd);font-size:10px;text-transform:uppercase}
.mbar{width:50px;height:5px;background:var(--bgg);border-radius:3px;overflow:hidden}
.mfill{height:100%;width:0%;background:var(--ah);transition:width .5s ease}
.mfill.e{background:var(--acc)}
.mfill.c{background:var(--aw)}

/* Main panels */
#main{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--bd);overflow:hidden;min-height:0}
.pn{background:var(--bgp);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.ph{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
.ph h2{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--fgd);text-transform:uppercase}
.pi{font-size:10px;color:var(--fgd)}
.pb{flex:1;overflow:hidden;position:relative;min-height:0}

/* Mixer channels */
#chstrip{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;gap:2px;padding:4px}
.cs{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;background:var(--bgc);border:1px solid var(--bd);border-radius:6px;min-width:var(--cw);max-width:var(--cw);flex-shrink:0;cursor:pointer;transition:border-color .2s}
.cs:hover{border-color:var(--bdb)}
.cs.flash{border-color:var(--acc);box-shadow:0 0 8px rgba(96,128,240,.4)}
.cs.muted{opacity:.4}
.ccn{font-size:10px;font-weight:700;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccr{font-size:8px;color:var(--fgd);text-transform:uppercase}
.ccnv{flex:1;width:100%;position:relative;background:var(--bgg);border-radius:3px;overflow:hidden;min-height:50px}
.ndot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);animation:nf 3s ease-out forwards;pointer-events:none}
@keyframes nf{0%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}
.cf{display:flex;gap:3px}
.cb{background:var(--bgg);border:1px solid var(--bd);color:var(--fgd);width:22px;height:16px;border-radius:3px;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cb:hover{border-color:var(--bdb)}
.cb.am{background:var(--ah);color:#fff}
.cb.as{background:var(--aw);color:#000}

/* Pulse grid */
#pgrid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:8px;height:100%}
.pc{background:var(--bgg);border:1px solid var(--bd);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .2s;min-height:var(--ps)}
.pc.ecn{border-top:2px solid var(--acc)}
.pc.dmn{border-top:2px solid var(--aw)}
.pc.both{border-top:2px solid var(--ac);box-shadow:0 0 8px rgba(96,240,160,.15)}
.pc.active{background:var(--bgc);border-color:var(--acc);box-shadow:0 0 12px rgba(96,128,240,.25)}
.pc.cur{animation:pg .5s ease-out}
@keyframes pg{0%{transform:scale(1.1);box-shadow:0 0 20px var(--acc)}100%{transform:scale(1)}}
.pnum{font-size:16px;font-weight:700;color:var(--fgd)}
.pc.active .pnum{color:var(--fgb)}
.plbl{font-size:8px;color:var(--fgd);margin-top:1px}
.pc.both .plbl{color:var(--ac);font-weight:700}
.pc.ecn .plbl{color:var(--acc)}
.pc.dmn .plbl{color:var(--aw)}
.pct{position:absolute;top:2px;right:4px;font-size:9px;color:var(--acc);font-weight:700}

/* Chart */
#chartcv{width:100%;height:100%;display:block;cursor:grab}
#chartcv:active{cursor:grabbing}
.cctrls{position:absolute;bottom:8px;right:8px;display:flex;gap:4px;z-index:5}
.ccb{background:rgba(14,14,30,.85);border:1px solid var(--bdb);color:var(--fgb);width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.ccb:hover{background:var(--bdb)}
.cov{position:absolute;top:8px;left:8px;background:rgba(14,14,30,.85);border:1px solid var(--bd);border-radius:4px;padding:4px 8px;font-size:10px;color:var(--fgd);pointer-events:none}

/* Event log */
#evlog{display:flex;flex-direction:column;height:120px;background:var(--bgp);border-top:1px solid var(--bd);overflow:hidden}
#evlist{flex:1;overflow-y:auto;padding:4px 10px;font-size:11px;line-height:1.6}
.er{display:flex;gap:8px;padding:2px 0;border-bottom:1px solid rgba(30,30,56,.3);animation:es .3s ease}
@keyframes es{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.et{color:var(--fgd);font-variant-numeric:tabular-nums;white-space:nowrap}
.esp{font-weight:700;white-space:nowrap}
.esg{font-size:10px;white-space:nowrap}
.etx{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* Footer */
#footer{display:flex;align-items:center;justify-content:space-between;padding:4px 14px;background:var(--bgp);border-top:1px solid var(--bd);font-size:10px;color:var(--fgd)}
.fl{display:flex;gap:10px;align-items:center}
.fb{background:var(--bgc);border:1px solid var(--bd);color:var(--fgd);padding:2px 8px;border-radius:3px;cursor:pointer;font-size:10px;transition:all .15s}
.fb:hover{border-color:var(--bdb);color:var(--fgb)}

/* Responsive */
@media(max-width:900px){#main{grid-template-columns:1fr 1fr}#chart-panel{display:none}}
@media(max-width:768px){:root{--cw:60px;--ps:22px}#main{grid-template-columns:1fr}.jd{display:none}}
@media(max-width:480px){.jms{display:none}#evlog{height:80px}}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bdb);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--acc)}