:root{--bg:#0b0e11;--sf:#14171c;--bd:#1e2329;--tx:#eaecef;--dm:#5e6673;--ac:#3b82f6;--gn:#0ecb81;--rd:#f6465d;--yl:#f0b90b;--or:#f97316}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font:12px/1.4 'JetBrains Mono','Fira Code','Cascadia Code',monospace;overflow:hidden;height:100vh}
#app{display:flex;flex-direction:column;height:100vh}

header{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;background:var(--sf);border-bottom:1px solid var(--bd);height:36px;flex-shrink:0}
header h1{font-size:14px;font-weight:700;color:var(--ac);margin-right:10px}
.header-left,.header-right{display:flex;align-items:center;gap:8px}
#symbol-select{background:var(--bd);color:var(--tx);border:none;border-radius:3px;padding:2px 6px;font:inherit;min-width:140px;cursor:pointer}
#symbol-search{background:var(--bd);color:var(--tx);border:none;border-radius:3px;padding:2px 6px;font:inherit;width:80px}
#trade-amount{background:var(--bd);color:var(--yl);border:none;border-radius:3px;padding:2px 6px;font:inherit;width:70px;text-align:right}
#trade-amount+label{color:var(--dm);font-size:10px}
label[for=trade-amount]{color:var(--dm);font-size:10px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.dot.on{background:var(--gn)}.dot.off{background:var(--rd)}
#update-rate{color:var(--dm);font-size:10px;min-width:40px;text-align:right}

main{display:flex;flex:1;min-height:0;overflow:hidden}
.col-left{flex:3;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--bd)}
.col-right{flex:2;display:flex;flex-direction:column;min-width:0}

.panel{display:flex;flex-direction:column;overflow:hidden;border-bottom:1px solid var(--bd)}
#price-panel{flex:3}#spread-panel{flex:1}
#depth-panel{flex:3}#tape-panel{flex:1}#signals-panel{flex:2}

.panel-bar{display:flex;justify-content:space-between;align-items:center;padding:2px 8px;background:var(--sf);font-size:10px;color:var(--dm);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;border-bottom:1px solid var(--bd)}
.panel-bar span:last-child{color:var(--tx);font-weight:600}

canvas{flex:1;width:100%;display:block;min-height:0}

#tick-tape{flex:1;overflow-y:auto;padding:2px 6px;font-size:10px;line-height:1.5}
#signal-log{flex:1;overflow-y:auto;padding:2px 6px;font-size:10px;line-height:1.5}

.tick{white-space:nowrap}
.tick .ts{color:var(--dm)}.tick .ex{min-width:5px;display:inline-block}
.tick .pr{font-weight:600}.tick .sz{color:var(--dm)}
.tick.buy .pr{color:var(--gn)}.tick.sell .pr{color:var(--rd)}
.tick.leader .ex{color:var(--ac)}.tick.follower .ex{color:var(--or)}

.sig{white-space:nowrap;padding:1px 0;border-bottom:1px solid var(--bd)}
.sig .ts{color:var(--dm)}.sig .tp{font-weight:700;min-width:55px;display:inline-block}
.sig .dr{font-weight:600;min-width:36px;display:inline-block}
.sig .dt{color:var(--dm)}
.sig .tp.trigger{color:var(--yl)}.sig .tp.reached{color:var(--gn)}.sig .tp.expired{color:var(--rd)}.sig .tp.reverted{color:var(--or)}
.sig .dr.long{color:var(--gn)}.sig .dr.short{color:var(--rd)}

footer{display:flex;gap:0;padding:0;background:var(--sf);border-top:1px solid var(--bd);height:28px;flex-shrink:0}
.fstat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 10px;border-right:1px solid var(--bd);min-width:90px}
.fl{font-size:8px;color:var(--dm);text-transform:uppercase;letter-spacing:.5px}
.fv{font-size:11px;font-weight:600}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--sf)}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}