:root {
  --bg: #070a12;
  --bg2: #0b0f1a;
  --panel: rgba(19, 24, 38, .78);
  --panel-solid: #121828;
  --panel-2: #1b2338;
  --border: #232c44;
  --border-soft: #1a2236;
  --text: #eef1f7;
  --muted: #8b95ad;
  --faint: #5b657d;
  --buy: #2fe08c;
  --buy-dim: rgba(47, 224, 140, .16);
  --sell: #ff5d6e;
  --sell-dim: rgba(255, 93, 110, .16);
  --cvd: #f5c451;
  --mov: #5aa9ff;
  --accent: #5aa9ff;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 16px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 500px at 15% -10%, rgba(90, 169, 255, .12), transparent 60%),
              radial-gradient(1000px 480px at 90% -5%, rgba(47, 224, 140, .08), transparent 60%),
              linear-gradient(var(--bg), var(--bg2));
  color: var(--text);
  font: 14px/1.5 var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(800px 300px at 50% 110%, rgba(245, 196, 81, .05), transparent 70%); }
body > *:not(.bg-glow) { position: relative; z-index: 1; }
.muted { color: var(--muted); font-weight: 400; font-size: .85em; }
.pos { color: var(--buy); } .neg { color: var(--sell); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--border-soft);
  background: rgba(7, 10, 18, .7); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.logo {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: conic-gradient(from 210deg, #5aa9ff, #2fe08c, #f5c451, #5aa9ff);
  color: #06121f; font-weight: 800; font-size: 22px;
  box-shadow: 0 4px 18px rgba(90, 169, 255, .35);
}
.brand-row { display: flex; align-items: baseline; gap: 10px; }
.brand-row strong { font-size: 17px; letter-spacing: .01em; }
.pair { font: 600 11px var(--mono); color: var(--accent); background: rgba(90,169,255,.12);
  border: 1px solid rgba(90,169,255,.3); padding: 2px 8px; border-radius: 20px; }
.brand-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.livebox { display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.live-dot.live { background: var(--buy); box-shadow: 0 0 12px var(--buy); animation: pulse 2s infinite; }
.live-dot.stale { background: var(--cvd); box-shadow: 0 0 10px var(--cvd); }
.live-dot.err { background: var(--sell); box-shadow: 0 0 10px var(--sell); }
@keyframes pulse { 50% { opacity: .55; } }
.live-state { font-size: 13px; font-weight: 650; }
.live-sub { font: 11px var(--mono); color: var(--muted); }
.refresh-ring { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1turn), var(--panel-2) 0);
  display: grid; place-items: center; }
.refresh-ring i { width: 18px; height: 18px; border-radius: 50%; background: var(--panel-solid); display: block; }
.switch { display: flex; align-items: center; gap: 6px; font: 600 11px var(--mono); color: var(--muted);
  cursor: pointer; user-select: none; }
.switch input { accent-color: var(--buy); width: 15px; height: 15px; cursor: pointer; }
.btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  width: 32px; height: 32px; font-size: 17px; cursor: pointer; line-height: 1; transition: .15s; }
.btn:hover { border-color: var(--accent); transform: rotate(40deg); }
.btn:active { transform: rotate(180deg); }

/* ---------- ticker ---------- */
.ticker {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 14px 24px 0; max-width: 1560px; margin: 0 auto;
}
.tick { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 12px 16px; backdrop-filter: blur(10px); min-width: 0; }
.tick-label { font: 600 10.5px var(--mono); letter-spacing: .09em; color: var(--muted); display: block; margin-bottom: 4px; }
.tick strong { font: 650 21px/1.1 var(--mono); display: block; }
.tick span:last-child { font: 11.5px var(--mono); color: var(--muted); }
.tick .up { color: var(--buy); } .tick .down { color: var(--sell); }
.imbalance { display: flex; height: 9px; border-radius: 6px; overflow: hidden; margin: 6px 0;
  background: var(--panel-2); }
.imbalance i { display: block; height: 100%; }
#imbBuy { background: linear-gradient(90deg, #1d9e62, var(--buy)); }
#imbSell { background: linear-gradient(90deg, var(--sell), #b23a47); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px 0; max-width: 1560px; margin: 0 auto; }
.seg { display: inline-flex; background: rgba(19,24,38,.85); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 9px 16px;
  font: 650 13px var(--mono); cursor: pointer; transition: .15s; }
.seg button + button { border-left: 1px solid var(--border-soft); }
.seg button:hover:not(:disabled) { color: var(--text); background: rgba(90,169,255,.08); }
.seg button.on { background: linear-gradient(180deg, #6cb4ff, #4a94f5); color: #06121f; }
.seg button:disabled { opacity: .3; cursor: not-allowed; }
.seg-win button.on { background: linear-gradient(180deg, #ffd97a, #f5b93f); }
.pill { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 14px; font: 600 12px var(--mono); color: var(--text); }
.pill.ghost { color: var(--muted); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 14px;
  padding: 14px 24px 0; max-width: 1560px; margin: 0 auto; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--shadow); backdrop-filter: blur(12px); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap; }
h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
h3 { margin: 0 0 6px; font-size: 11.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; }
.legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px 4px 8px;
  font: 600 11.5px var(--mono); cursor: pointer; }
.lg.on { color: var(--text); border-color: var(--accent); }
.hint { font-size: 11px; color: var(--faint); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw-cvd { background: var(--cvd); } .sw-mov { background: var(--mov); }

.chart-wrap { position: relative; }
.chart-wrap canvas { width: 100%; display: block; border-radius: 10px; }
#priceCanvas { height: 240px; }
#deltaCanvas { height: 260px; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.tooltip { position: absolute; pointer-events: none; background: rgba(10, 14, 24, .95);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
  font: 11.5px var(--mono); line-height: 1.6; box-shadow: var(--shadow); z-index: 5; white-space: nowrap; }

.side { display: grid; gap: 14px; }
.big { font: 700 30px/1.1 var(--mono); margin: 2px 0 4px; }
.sub { font: 12px var(--mono); color: var(--muted); }
.split { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 12px; background: var(--panel-2); }
.split-buy { background: linear-gradient(90deg, #1d9e62, var(--buy)); transition: width .4s; }
.split-sell { background: linear-gradient(90deg, var(--sell), #b23a47); transition: width .4s; }
.split-legend { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 5px; }

.tbl-wrap { max-height: 340px; overflow: auto; border-radius: 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tbl { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.tbl thead th { position: sticky; top: 0; background: var(--panel-solid); z-index: 2;
  text-align: left; color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .06em;
  padding: 7px 8px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.overall td { font-weight: 700; background: rgba(90,169,255,.07); }
.tbl tr.sel td { background: rgba(90,169,255,.13); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover td { background: rgba(90,169,255,.06); }
.tbl .name { font-family: var(--sans); font-weight: 600; font-size: 12.5px; }
.tbl .tag { font-size: 10px; color: #06121f; background: var(--cvd); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; font-weight: 700; }
.dbar { position: relative; height: 8px; min-width: 70px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.dbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.dbar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--faint); }

.formula { max-width: 1560px; margin: 14px auto 0; }
.formula-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 22px; }
.formula code { display: block; font: 12.5px var(--mono); background: var(--panel-2);
  border: 1px solid var(--border); padding: 8px 10px; border-radius: 9px; margin: 4px 0 8px; }
.formula p { margin: 0; color: var(--muted); font-size: 12.5px; }
.foot { max-width: 1560px; margin: 0 auto; padding: 14px 24px 34px; color: var(--faint); font-size: 11.5px; line-height: 1.7; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 15, 26, .95); border: 1px solid var(--buy); color: var(--text);
  border-radius: 12px; padding: 10px 18px; font: 600 12.5px var(--mono);
  box-shadow: 0 8px 30px rgba(47, 224, 140, .25); z-index: 50; transition: opacity .3s; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .hide-sm { display: none; }
  .formula-grid { grid-template-columns: 1fr 1fr; }
  .brand-sub { display: none; }
}
@media (max-width: 640px) {
  .ticker { grid-template-columns: 1fr 1fr; padding: 12px 14px 0; }
  .toolbar, .layout { padding-left: 14px; padding-right: 14px; }
  .formula-grid { grid-template-columns: 1fr; }
  #priceCanvas { height: 190px; } #deltaCanvas { height: 210px; }
}