:root { --bg:#0e1117; --panel:#151a23; --line:#232a36; --txt:#d1d4dc; --mut:#7d8592; --up:#26a69a; --dn:#ef5350; --acc:#2962ff; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--txt); font:12px -apple-system,system-ui,Segoe UI,Roboto,sans-serif; overflow:hidden; overscroll-behavior:none; }
body { display:flex; flex-direction:column; height:100vh; height:100dvh; }
button,select,input { font:inherit; color:var(--txt); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 7px; }
button.on { background:var(--acc); border-color:var(--acc); color:#fff; }
#top { flex:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:5px 6px; border-bottom:1px solid var(--line); }
.grp { display:flex; gap:3px; flex-wrap:wrap; }
#status { margin-left:auto; display:flex; gap:6px; align-items:center; font-weight:600; font-variant-numeric:tabular-nums; }
.dot { width:8px; height:8px; border-radius:50%; background:#555; display:inline-block; }
.dot.ok { background:var(--up); } .dot.bad { background:var(--dn); }
.menu { position:fixed; z-index:20; right:6px; top:40px; max-width:calc(100vw - 12px); max-height:70vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.menu label { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.menu input[type=number] { width:70px; }
.hidden { display:none !important; }
#main { display:flex; flex:1; min-height:0; }
#chartCol { flex:1; display:flex; flex-direction:column; min-width:0; }
#mainChart { position:relative; flex:1; min-height:200px; }
#heatCv, #bubCv { position:absolute; left:0; top:0; pointer-events:none; }
#heatCv { z-index:0; } #bubCv { z-index:3; }
#mainChart .tv-lightweight-charts { position:relative; z-index:1; }
#legend { position:absolute; left:6px; top:4px; z-index:4; pointer-events:none; font-variant-numeric:tabular-nums; color:var(--mut); }
#panes .pane { position:relative; height:90px; border-top:1px solid var(--line); }
#panes .pane .nm { position:absolute; left:6px; top:2px; z-index:4; color:var(--mut); pointer-events:none; background:rgba(14,17,23,.75); padding:0 4px; border-radius:3px; white-space:nowrap; max-width:calc(100% - 84px); overflow:hidden; text-overflow:ellipsis; }
#side { width:300px; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.box { display:flex; flex-direction:column; min-height:0; }
#bookBox { flex:3; } #tapeBox { flex:2; border-top:1px solid var(--line); }
.hdr { display:flex; gap:6px; align-items:center; padding:4px 6px; border-bottom:1px solid var(--line); color:var(--mut); }
#spread { margin-left:auto; }
#book, #tape { overflow-y:auto; flex:1; font-variant-numeric:tabular-nums; }
.row { display:flex; position:relative; padding:0 6px; line-height:16px; height:16px; }
.row .bar { position:absolute; top:1px; bottom:1px; right:0; opacity:.22; }
.row.a .bar { background:var(--dn); } .row.b .bar { background:var(--up); }
.row span { position:relative; z-index:1; flex:1; }
.row span:last-child { text-align:right; }
.row.a .p { color:var(--dn); } .row.b .p { color:var(--up); }
.row.big { font-weight:700; } .row.big span { color:#ffd54f !important; }
.row.mid { justify-content:center; color:var(--txt); font-weight:600; background:#1b2230; }
.tr { display:grid; grid-template-columns:62px 1fr 64px 60px; padding:0 6px; line-height:17px; }
.tr .s1 { color:var(--up); } .tr .s0 { color:var(--dn); }
.tr .r { text-align:right; }
#tabs { display:none; }
@media (max-width: 760px) {
  #side { width:100%; border-left:0; }
  #main.v-chart #side, #main.v-book #chartCol, #main.v-tape #chartCol { display:none; }
  #main.v-book #tapeBox, #main.v-tape #bookBox { display:none; }
  #main.v-book #bookBox, #main.v-tape #tapeBox { flex:1; border-top:0; }
  #tabs { flex:none; display:flex; height:calc(44px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); }
  #tabs button { font-size:15px; }
  #tabs button { flex:1; border:0; border-radius:0; background:var(--bg); }
  #tabs button.on { color:var(--acc); background:var(--bg); font-weight:700; }
}

.bright { display:flex; align-items:center; gap:3px; color:var(--mut); }
.bright input { width:80px; }
@media (max-width: 760px) { .bright input { width:60px; } }
.attr { color:var(--mut); font-size:11px; } .attr a { color:var(--mut); }
.mh { display:flex; justify-content:space-between; align-items:center; font-weight:600; gap:12px; }
.mh .close { border:0; background:transparent; font-size:16px; padding:2px 6px; }