:root{
  --bg:#0b0f14; --text:#e6eef7; --muted:#9fb0c3; --border:rgba(255,255,255,0.08);
  --good:#2dd36f; --bad:#ff4d4f; --accent:#3aa3ff; --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); }
.topbar{
  padding:12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; gap:10px; align-items:center; min-width:260px; }
.dot{ width:10px; height:10px; background:var(--accent); border-radius:999px; box-shadow:0 0 18px rgba(58,163,255,.7); }
.title{ font-weight:700; letter-spacing:0.2px; }
.subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }
.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.seg{ display:flex; border:1px solid var(--border); background:rgba(255,255,255,0.03); border-radius:999px; overflow:hidden; }
.seg button{ appearance:none; border:0; background:transparent; color:var(--muted); padding:10px 12px; font-weight:600; font-size:14px; }
.seg button.on{ background:rgba(58,163,255,0.18); color:var(--text); }
.toggles{ display:flex; gap:10px; align-items:center; }
.toggle{ display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,0.02); color:var(--muted); font-size:13px; user-select:none; }
.toggle input{ transform:scale(1.15); }
.main{ padding:12px 12px 10px; }
.chartWrap{
  position:relative; width:100%; height: calc(100vh - 150px); min-height:420px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow); overflow:hidden;
}
#chart{ position:absolute; inset:0; }
#overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:auto; }
.hud{ position:absolute; left:10px; top:10px; right:10px; background:rgba(15,22,32,0.72);
  border:1px solid var(--border); border-radius:12px; padding:8px 10px; backdrop-filter: blur(10px); }
.hudRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hudRow.small{ margin-top:4px; font-size:12px; color:var(--muted); min-height:16px; }
.k{ color:var(--muted); font-size:12px; font-weight:700; }
.v{ font-size:12px; font-weight:700; }
.footer{ padding:8px 14px 14px; color:var(--muted); font-size:12px; }
.bubbleInfo{ position:absolute; right:10px; top:58px; max-width:min(360px, 90vw);
  background:rgba(18,27,38,0.90); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size:13px; line-height:1.35; }
.bubbleInfo .h{ font-weight:800; margin-bottom:6px; }
.bubbleInfo .row{ display:flex; justify-content:space-between; gap:10px; margin:3px 0; }
.bubbleInfo .row span:first-child{ color:var(--muted); font-weight:700; }
.bubbleInfo .row span:last-child{ font-weight:800; text-align:right; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:900; margin-left:6px; }
.badge.buy{ background:rgba(45,211,111,.18); color:rgba(45,211,111,0.95); border:1px solid rgba(45,211,111,.35); }
.badge.sell{ background:rgba(255,77,79,.18); color:rgba(255,77,79,0.95); border:1px solid rgba(255,77,79,.35); }