:root{
  --bg:#08070b;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.5);
  --accent:#9d7cff;
  --accent2:#6ea8ff;
  --gold:#ffd166;
  --lime:#ff7ad9;
  --accent-soft:rgba(157,124,255,.10);
  --accent-mid:rgba(157,124,255,.18);
  --accent-strong:rgba(157,124,255,.30);
  --good:#9d7cff;
  --bad:#ff4d6a;
  --radius:14px;
  --radius-sm:10px;
  --glass:rgba(13,12,14,.74);
  --glass-2:rgba(19,18,21,.92);
  --glass-border:rgba(255,255,255,.08);
  --glass-blur:blur(18px);
  --hud-pad:14px;
}
*{ box-sizing:border-box; font-family:'Inter',system-ui,-apple-system,sans-serif; }
html,body{ height:100%; margin:0; }
body{
  color:var(--text); background:var(--bg); overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:24px 24px;
}
a{ color:var(--accent); }
.muted{ color:var(--muted); font-size:12px; }
.tiny{ font-size:11px; }
.hidden{ display:none !important; }
.h{ font-weight:700; font-size:14px; }
.mono{ font-family:ui-monospace,Menlo,Consolas,monospace; }
button{ font-family:inherit; }

/* ─── Full-screen stage ─── */
body.landingBg .stage{ background:
  radial-gradient(70% 40% at 50% 72%, rgba(157,124,255,.055), transparent 70%),
  linear-gradient(#08070b 0%, #09080e 30%, #100c1e 55%, #17112e 70%, #120d24 82%, #08070b 100%); }
body.landingBg .stage::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; contain:strict; background-image:radial-gradient(rgba(216,204,255,.07) 1px, transparent 1.4px), linear-gradient(#08070b 0, rgba(7,7,8,0) 30%, rgba(7,7,8,0) 78%, #08070b 100%); background-size:16px 16px, 100% 100%; }
body.landingBg .gridCell{ border-right-color:rgba(255,255,255,.1); border-bottom-color:rgba(255,255,255,.1); color:rgba(255,255,255,.42); }
body.landingBg .gridOverlayInner{ background-image:radial-gradient(circle, rgba(255,255,255,.5) 1.3px, rgba(255,255,255,0) 2px); }

.stage{ position:fixed; inset:0; overflow:hidden; --shake:4px; }
.stage.shaking{ animation:stageShake .28s linear infinite; }
@keyframes stageShake{
  0%{ transform:translate(0,0); } 12%{ transform:translate(var(--shake), calc(var(--shake) * -.6)); }
  25%{ transform:translate(calc(var(--shake) * -.8), var(--shake)); } 37%{ transform:translate(calc(var(--shake) * .5), calc(var(--shake) * .7)); }
  50%{ transform:translate(calc(var(--shake) * -1), calc(var(--shake) * -.3)); } 62%{ transform:translate(calc(var(--shake) * .7), calc(var(--shake) * -1)); }
  75%{ transform:translate(calc(var(--shake) * -.4), calc(var(--shake) * .5)); } 87%{ transform:translate(calc(var(--shake) * .9), calc(var(--shake) * .2)); }
  100%{ transform:translate(0,0); }
}
#chart{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; pointer-events:none; }
.fxLayer{ position:fixed; inset:0; width:100%; height:100%; z-index:8500; pointer-events:none; }
.gridOverlayWrap{ position:absolute; inset:0; overflow:hidden; z-index:1; --shift-x:0px; --shift-y:0px; touch-action:none; }
.gridOverlayInner{
  display:grid; transform:translate(var(--shift-x), var(--shift-y)); will-change:transform;
  --cell:60px;
  background-image:radial-gradient(circle, rgba(255,255,255,.42) 1.3px, rgba(255,255,255,0) 2px);
  background-size:var(--cell) var(--cell);
  background-position:calc(var(--cell) * -0.5) calc(var(--cell) * -0.5);
}
.gridCell{
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:0 7px 5px 0;
  font-size:11px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.34);
  border-right:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07);
  user-select:none; cursor:pointer; position:relative; min-width:0; min-height:0;
  transition:background .12s ease, color .12s ease;
}
.gridCell:hover{
  color:var(--lime);
  background:radial-gradient(circle at 50% 55%, rgba(157,124,255,.16), rgba(157,124,255,0) 65%);
  box-shadow:inset 0 0 0 1px rgba(157,124,255,.35); border-radius:14%;
}
.gridCell[data-bet]{ transition:none !important; padding:0; }

/* ── tapped cell: style E "glass + timer" ── */
.gridCell.betPlacing, .gridCell.betActive{
  border-radius:16%; border:1.5px solid transparent !important; overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(157,124,255,.14), rgba(157,124,255,0) 70%) padding-box,
    linear-gradient(rgba(13,10,18,.74), rgba(13,10,18,.74)) padding-box,
    linear-gradient(135deg, var(--lime), var(--accent) 50%, rgba(110,168,255,.55)) border-box !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 0 22px rgba(157,124,255,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:#fff !important; transform-origin:50% 50%;
}
.gridCell.betPlacing, .gridCell.betActive.fresh{ animation:cellIn .42s cubic-bezier(.34,1.56,.64,1) both; }
.gridCell.betActive{ animation:cellBreathe 2.6s ease-in-out infinite; }
.gridCell.betActive.fresh{ animation:cellIn .42s cubic-bezier(.34,1.56,.64,1) both, cellBreathe 2.6s ease-in-out .42s infinite; }
@keyframes cellIn{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }
@keyframes cellBreathe{
  0%,100%{ box-shadow:0 0 18px rgba(157,124,255,.2), inset 0 1px 0 rgba(255,255,255,.06); }
  50%{ box-shadow:0 0 30px rgba(157,124,255,.38), inset 0 1px 0 rgba(255,255,255,.08); }
}
.gridCell .betOpen{ position:relative; width:100%; height:100%; }
.gridCell .betOpenAmt{ position:absolute; top:11%; left:11%; font-weight:800; font-size:clamp(11px,1.05vw,14px); color:var(--gold); text-shadow:0 0 10px rgba(255,209,102,.35); line-height:1; }
.gridCell .betOpenMult{ position:absolute; bottom:15%; right:10%; font-weight:900; font-size:clamp(13px,1.35vw,19px); color:#fff; text-shadow:0 0 14px rgba(157,124,255,.45); line-height:1; letter-spacing:-.01em; }
.gridCell .betTimer{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left center; transform:scaleX(1);
  background:linear-gradient(90deg, var(--accent), var(--lime)); box-shadow:0 0 8px var(--accent); will-change:transform; }
.gridCell.betWon{ background:linear-gradient(160deg, rgba(157,124,255,.95), rgba(110,168,255,.85)) !important; color:#160c2e !important; border-radius:16%; border-color:transparent !important; box-shadow:0 0 30px rgba(157,124,255,.5); }
.gridCell.betWon.popping{ animation:cellWin .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes cellWin{ 0%{ transform:scale(1); filter:brightness(1); } 25%{ transform:scale(1.35); filter:brightness(2.2); } 55%{ transform:scale(.9); } 100%{ transform:scale(1); filter:brightness(1); } }
.gridCell.betLost{ background:rgba(255,77,106,.72) !important; color:#2a000e !important; border-radius:16%; border-color:transparent !important; box-shadow:0 0 18px rgba(255,77,106,.25); }
.gridCell.betLost.deflating{ animation:cellLose .6s ease-out both; }
@keyframes cellLose{ 0%{ transform:scale(1) rotate(0); } 25%{ transform:scale(.92) rotate(-2.5deg); } 50%{ transform:scale(.88) rotate(2.5deg); } 75%{ transform:scale(.94) rotate(-1deg); } 100%{ transform:scale(1) rotate(0); } }
.gridCell .betCellInner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; height:100%; text-align:center; }
.gridCell .betAmt{ font-weight:900; font-size:clamp(12px,1.3vw,17px); line-height:1; }

/* floating amount from the hit cell */
.fxText{ position:fixed; z-index:8600; transform:translate(-50%,-50%); font-weight:900; font-size:26px; color:#fff; letter-spacing:-.01em; text-shadow:0 0 16px rgba(157,124,255,.9), 0 2px 10px rgba(0,0,0,.6); animation:fxText 1.3s cubic-bezier(.2,.8,.2,1) forwards; pointer-events:none; white-space:nowrap; }
.fxText.red{ color:#ffb3bf; text-shadow:0 0 12px rgba(255,77,106,.7), 0 2px 10px rgba(0,0,0,.6); font-size:20px; }
@keyframes fxText{ 0%{ transform:translate(-50%,-50%) scale(.5); opacity:0; } 18%{ transform:translate(-50%,-80%) scale(1.3); opacity:1; } 100%{ transform:translate(-50%,-230%) scale(1); opacity:0; } }
.stageFlash{ position:fixed; inset:0; z-index:8400; pointer-events:none; background:radial-gradient(circle at var(--fx,50% 50%), rgba(157,124,255,.28), rgba(157,124,255,0) 42%); animation:stageFlash .7s ease-out forwards; }
@keyframes stageFlash{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }

/* ─── HUD ─── */
.hud{ position:absolute; z-index:20; }
.hudTop{
  top:0; left:0; right:0; height:58px; padding:0 var(--hud-pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, rgba(7,7,8,.94), rgba(7,7,8,.6) 70%, transparent);
  pointer-events:none;
}
.hudTop > *{ pointer-events:auto; }
.hudLeft,.hudRight{ display:flex; align-items:center; gap:8px; min-width:0; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); margin-right:4px; }
.siteLogo{ width:26px; height:26px; border-radius:8px; }
.wordmarkImg{ display:block; height:26px; width:auto; }
.siteLogo{ width:30px; height:30px; border-radius:9px; box-shadow:0 0 14px rgba(157,124,255,.25); }
.netBadge{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-mid); border-radius:999px; padding:2px 7px; }
.symbolBar{ display:flex; gap:3px; padding:3px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:var(--glass-blur); }
.symBtn{
  display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid transparent;
  background:transparent; color:rgba(255,255,255,.7); cursor:pointer; font-weight:700; font-size:12px;
  transition:background .15s, color .15s, transform .1s;
}
.symBtn img{ width:18px; height:18px; border-radius:50%; background:#1a1440; }
.symBtn em{ font-style:normal; font-weight:600; font-size:11px; color:var(--muted); }
.symBtn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.symBtn:active{ transform:scale(.97); }
.symBtn.active{ background:linear-gradient(180deg, rgba(157,124,255,.22), rgba(157,124,255,.10)); border-color:rgba(157,124,255,.35); color:#fff; box-shadow:0 0 14px rgba(157,124,255,.15); }
.symBtn.active em{ color:var(--accent); }
.symBtn.lockedSwitch{ opacity:.4; cursor:not-allowed; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--text);
  font-weight:700; font-size:13px; cursor:pointer; backdrop-filter:var(--glass-blur);
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover{ filter:brightness(1.1); }
.btn:active{ transform:scale(.96); }
.btn:disabled{ opacity:.5; cursor:wait; }
.btn-primary{ background:linear-gradient(180deg, #b49cff, #9d7cff); color:#160c2e; border-color:rgba(157,124,255,.6); box-shadow:0 6px 18px rgba(157,124,255,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover{ box-shadow:0 8px 24px rgba(157,124,255,.38), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-ghost{ background:rgba(255,255,255,.05); }
.btn-ghost:hover{ background:rgba(255,255,255,.09); }
.btn-danger{ color:var(--bad); border-color:rgba(255,77,106,.35); background:rgba(255,77,106,.06); }
.iconBtn{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid var(--glass-border); background:var(--glass); color:rgba(255,255,255,.75); cursor:pointer; backdrop-filter:var(--glass-blur);
  transition:transform .1s ease, color .15s, border-color .15s, background .15s;
}
.iconBtn:hover{ color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
.iconBtn:active{ transform:scale(.94); }
.iconBtn.unmuted{ color:var(--accent); border-color:var(--accent-mid); background:var(--accent-soft); }

.statGroup{ display:flex; gap:6px; }
.pill{ display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:var(--glass-blur); font-weight:700; font-size:13px; }
.statPill .k{ font-size:10.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.statPill .v{ color:var(--accent); font-variant-numeric:tabular-nums; }
.statPill .sub{ font-size:10.5px; color:var(--muted); font-weight:600; }
#hitRate.cold{ color:#ff8da0; } #hitRate.warm{ color:var(--gold); }

/* price tag */
.priceTag{ position:absolute; left:var(--hud-pad); top:74px; z-index:20; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:var(--glass-blur); pointer-events:none; }
.priceBig{ font-weight:900; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ─── fold-up docks ─── */
.dock{ bottom:var(--hud-pad); display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none; }
.dock > *{ pointer-events:auto; }
.dockLeft{ left:var(--hud-pad); }
.dockRight{ right:var(--hud-pad); align-items:flex-end; }
.pillBtn{
  display:inline-flex; align-items:center; gap:9px; padding:9px 12px 9px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:var(--glass-2); color:#fff; cursor:pointer; backdrop-filter:var(--glass-blur);
  font-weight:800; font-size:14px; box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:transform .1s ease, border-color .15s ease, box-shadow .15s ease;
}
.pillBtn:hover{ border-color:rgba(157,124,255,.4); box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 18px rgba(157,124,255,.12); }
.pillBtn:active{ transform:scale(.96); }
.pillIcon{ width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-mid); }
.pillVal{ font-variant-numeric:tabular-nums; }
.pillBadge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--accent); color:#160c2e; }
.pillBadge.red{ background:var(--bad); color:#fff; }
.pillChev{ display:inline-flex; color:var(--muted); transition:transform .2s ease; }
.dock.open .pillChev{ transform:rotate(180deg); }
.dock.open .pillBtn{ border-color:rgba(157,124,255,.45); }
.foldPanel{
  width:300px; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:var(--glass-2); backdrop-filter:var(--glass-blur);
  box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(157,124,255,.05);
  transform-origin:bottom left; transform:translateY(8px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2), opacity .14s ease;
}
.dockRight .foldPanel{ transform-origin:bottom right; }
.dock.open .foldPanel{ transform:none; opacity:1; pointer-events:auto; }
.foldHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.foldTitle{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.betAmountRow{ display:flex; align-items:center; gap:8px; }
.betDollar{ color:var(--accent); font-weight:900; font-size:18px; }
#betAmount{ flex:1; min-width:0; padding:9px 12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:#fff; font-weight:900; font-size:20px; outline:none; font-variant-numeric:tabular-nums; }
#betAmount:focus{ border-color:var(--accent-mid); box-shadow:0 0 0 3px rgba(157,124,255,.08); }
.quickAmts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.quickAmts button{ flex:1 0 calc(25% - 5px); padding:7px 0; border-radius:999px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:rgba(255,255,255,.75); font-size:12px; font-weight:800; cursor:pointer; transition:background .12s, color .12s, transform .1s; }
.quickAmts button:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-mid); }
.quickAmts button:active{ transform:scale(.95); }
.betSliderWrap{ margin-top:12px; }
#status{ display:inline-flex; align-items:center; gap:6px; }
#status::before{ content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); }
#status.on::before{ background:var(--accent); box-shadow:0 0 6px var(--accent); animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) var(--range-progress,0%), rgba(255,255,255,.1) var(--range-progress,0%)); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 0 12px rgba(157,124,255,.5); }
input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent); }
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* history */
#historyPanel{ width:300px; max-height:min(420px, calc(100vh - 140px)); overflow:auto; }
.betsDisabled{ padding:12px; border-radius:12px; border:1px dashed var(--glass-border); text-align:center; font-size:12px; color:var(--muted); }
.bets{ display:flex; flex-direction:column; gap:6px; }
.betsEmpty{ font-size:12px; color:var(--muted); padding:10px; text-align:center; }
.betRow{ padding:9px 11px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.betRow.open{ border-color:rgba(157,124,255,.3); background:rgba(157,124,255,.04); }
.betRow.won{ border-color:rgba(157,124,255,.4); background:rgba(157,124,255,.07); }
.betRow.lost{ border-color:rgba(255,77,106,.3); }
.betRowTop,.betRowMid{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.betRowMid{ margin-top:4px; }
.betPair{ font-weight:800; font-size:12px; }
.betStatus{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.betRow.open .betStatus{ color:var(--accent); }
.betRowMid .betMeta{ font-size:12px; color:rgba(255,255,255,.6); font-weight:600; margin:0; }
.betPnl{ font-size:12px; font-weight:900; }
.betRow.won .betPnl{ color:var(--good); }
.betRow.lost .betPnl{ color:var(--bad); }
.betRowFoot{ margin-top:4px; font-size:10px; }
.txLink{ color:var(--muted); text-decoration:none; }
.txLink:hover{ color:var(--accent); }
.win-streak-badge{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; background:rgba(255,204,0,.1); border:1px solid rgba(255,204,0,.3); color:#ffcc00; font-weight:800; font-size:11px; }
.win-streak-badge.streak-bump{ animation:streakBump .4s ease; }
@keyframes streakBump{ 50%{ transform:scale(1.25); } }

.hint{ position:absolute; bottom:calc(var(--hud-pad) + 4px); left:50%; transform:translateX(-50%); z-index:15; font-size:12px; color:var(--muted); padding:7px 13px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); pointer-events:none; white-space:nowrap; }

.zoomCtl{ position:absolute; right:var(--hud-pad); top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; align-items:center; gap:6px; }
.zoomLabel{ font-size:10px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .zoomCtl{ display:none; } }

/* loading */
.chartLoading{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(7,7,8,.72); backdrop-filter:blur(6px); transition:opacity .25s ease; }
.chartLoading.hidden{ display:flex !important; opacity:0; pointer-events:none; }
.chartLoadingInner{ text-align:center; padding:20px 28px; border-radius:var(--radius); border:1px solid var(--glass-border); background:var(--glass); }
.chartLoadingTitle{ font-weight:700; margin-top:10px; }
.chartLoadingSub{ margin-top:4px; font-size:12px; color:var(--muted); }
.spinner{ width:26px; height:26px; margin:0 auto; border-radius:50%; border:3px solid rgba(255,255,255,.1); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* toasts */
.toastHost{ position:fixed; right:16px; top:70px; z-index:9000; display:flex; flex-direction:column; gap:8px; max-width:340px; }
.toast{ padding:10px 14px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(15,14,16,.94); backdrop-filter:var(--glass-blur); opacity:0; transform:translateY(-8px); animation:toastIn .2s ease forwards; transition:opacity .2s, transform .2s; }
.toast .tTitle{ font-weight:800; font-size:13px; }
.toast .tMsg{ font-size:12px; opacity:.75; margin-top:3px; line-height:1.35; }
.toast.good{ border-color:rgba(157,124,255,.35); }
.toast.warn{ border-color:rgba(255,204,0,.35); }
.toast.bad{ border-color:rgba(255,77,106,.4); }
.toast.info{ border-color:rgba(157,124,255,.2); }
@keyframes toastIn{ to{ opacity:1; transform:translateY(0); } }

/* ─── Overlay views (profile / leaderboard) ─── */
.overlayView{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:72px 16px 24px; background:rgba(4,4,5,.6); backdrop-filter:blur(8px); overflow:auto; }
.overlayCard{ width:100%; max-width:920px; padding:18px; border-radius:18px; border:1px solid var(--glass-border); background:rgba(13,12,14,.96); animation:viewIn .18s ease; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } }
.overlayHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.overlayHead .h{ font-size:18px; }
.closeView{ font-size:20px; }

.profileHeaderCard{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); flex-wrap:wrap; }
.profileIdentity{ display:flex; align-items:center; gap:14px; }
.profileAvatar{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-mid); }
.profileName{ font-weight:800; font-size:16px; font-family:ui-monospace,Menlo,monospace; }
.profileHeadlineStats{ display:flex; gap:18px; }
.profileStatRight{ text-align:right; min-width:120px; }
.profileBig{ font-weight:900; font-size:20px; }
.profileBig.good{ color:var(--good); } .profileBig.bad{ color:var(--bad); }
.profileStatsGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.profileMiniCard{ padding:12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.profileMiniBig{ font-weight:900; font-size:18px; margin-top:4px; }
.profileRecent{ padding:14px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.02); }
.profileRecentHead{ display:flex; justify-content:space-between; margin-bottom:10px; }
.profileTradesList{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.tradeGrid{ display:flex; flex-direction:column; gap:8px; }
.tradeRow{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.02); }
.tradeLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.tradeSymBadge{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); }
.tradeSymBadge img{ width:22px; height:22px; }
.tradeTitle{ font-weight:700; font-size:13px; }
.tradeSub{ margin-top:2px; font-size:11px; color:var(--muted); }
.tradeRight{ text-align:right; }
.tradePnl{ font-weight:900; font-size:13px; } .tradePnl.good{ color:var(--good); } .tradePnl.bad{ color:var(--bad); }
.tradeMeta{ margin-top:3px; font-size:11px; color:var(--muted); }
.tradePager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.tradePagerInfo{ font-size:12px; color:var(--muted); }
.btnSmall{ padding:5px 12px; font-size:12px; }
.btnSmall:disabled{ opacity:.4; cursor:not-allowed; }

.lbTop3{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.lbTop3 .lbCardBig{ grid-column:1 / -1; }
.lbCard{ padding:14px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.lbCardHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lbIdent{ display:flex; align-items:center; gap:12px; }
.lbAvatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--accent-soft); color:var(--accent); }
.lbName{ font-weight:700; font-size:15px; } .lbSub{ font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
.lbPnl{ font-weight:900; font-size:16px; } .lbPnl.pos{ color:var(--good); } .lbPnl.neg{ color:var(--bad); }
.lbStats{ display:flex; gap:18px; margin-top:12px; flex-wrap:wrap; }
.lbStat .k{ font-size:11px; color:var(--muted); } .lbStat .v{ font-size:15px; font-weight:700; }
.lbBar{ height:4px; border-radius:999px; background:rgba(255,255,255,.08); margin-top:6px; overflow:hidden; width:120px; }
.lbBar > div{ height:100%; background:var(--accent); }
.lbListCard{ padding:14px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.02); }
.lbListHead{ display:flex; justify-content:space-between; margin-bottom:10px; }
.lbTable{ display:flex; flex-direction:column; }
.lbRow{ display:grid; grid-template-columns:60px 1fr 120px 100px 90px; gap:10px; padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; align-items:center; }
.lbRowHead{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.lbRow .right{ text-align:right; }
.lbUserCell{ display:flex; align-items:center; gap:8px; }
.lbUserCell .u1{ font-weight:600; } .lbUserCell .u2{ font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }

/* ─── Deposit / withdraw modal ─── */
.dw-modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); padding:16px; }
.dw-modal{ width:100%; max-width:520px; border-radius:20px; border:1px solid var(--glass-border); background:rgba(13,12,14,.97); box-shadow:0 30px 80px rgba(0,0,0,.6); animation:viewIn .18s ease; }
.dw-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--glass-border); }
.dw-modal-tabs{ display:flex; gap:4px; padding:3px; border-radius:999px; background:rgba(255,255,255,.04); }
.dw-tab{ padding:7px 16px; border-radius:999px; border:none; background:transparent; color:var(--muted); font-weight:800; font-size:13px; cursor:pointer; }
.dw-tab.active{ background:var(--accent-soft); color:var(--accent); }
.dw-modal-close{ background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; }
.dw-tab-content{ padding:16px; }
.dw-section{ margin-bottom:16px; }
.dw-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px; }
.dw-row{ display:flex; gap:8px; align-items:center; }
.dw-input{ flex:1; min-width:0; padding:10px 12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:#fff; font-size:13px; outline:none; font-family:ui-monospace,Menlo,monospace; }
.dw-input:focus{ border-color:var(--accent-mid); }
.dw-hint{ margin-top:8px; font-size:11px; color:var(--muted); line-height:1.45; }
.dw-balances{ display:flex; gap:10px; }
.dw-bal{ flex:1; padding:12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.dw-bal-label{ font-size:11px; color:var(--muted); }
.dw-bal-val{ font-weight:900; font-size:16px; margin-top:4px; }
.dw-modal-footer{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--glass-border); }

/* ─── Responsive ─── */
@media (max-width:1150px){ .symBtn em{ display:none; } .statPill .k{ display:none; } }
@media (max-width:900px){
  .hudTop{ height:auto; padding:8px 10px; flex-wrap:wrap; }
  .symbolBar{ margin-left:0; order:3; width:100%; justify-content:space-between; }
  .symBtn{ padding:6px 8px; }
  .brandText,.netBadge,#balanceNative,#hitRatePill{ display:none; }
  .priceTag{ top:auto; bottom:calc(var(--hud-pad) + 54px); left:var(--hud-pad); }
  .foldPanel,#historyPanel{ width:min(300px, calc(100vw - 28px)); }
  .hint{ display:none; }
  .profileStatsGrid{ grid-template-columns:1fr; }
  .lbTop3{ grid-template-columns:1fr; }
  .lbRow{ grid-template-columns:40px 1fr 90px 70px; }
  .lbRow > :nth-child(5){ display:none; }
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(157,124,255,.2); border-radius:999px; }


/* ─── account chip (Fomo-style) ─── */
.acct{ display:inline-flex; align-items:center; gap:10px; padding:5px 5px 5px 12px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:var(--glass-blur); color:var(--text); cursor:pointer; transition:border-color .15s; }
.acct:hover{ border-color:rgba(157,124,255,.4); }
.acctText{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.acctBal{ font-size:13px; font-weight:800; }
.acctPnl{ font-size:10.5px; font-weight:700; color:var(--muted); }
.acctPnl.good{ color:var(--good); } .acctPnl.bad{ color:var(--bad); }
.acctAvatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-mid); color:var(--accent); font-size:11px; font-weight:800; }
.acctAvatar img{ width:100%; height:100%; object-fit:cover; }

/* ─── side tab + panel ─── */
.sideTab{ position:absolute; right:calc(var(--hud-pad) + 46px); top:50%; transform:translateY(-50%); z-index:21; width:36px; height:36px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass); color:rgba(255,255,255,.75); cursor:pointer; display:grid; place-items:center; transition:transform .2s, color .15s, border-color .15s; }
.sideTab:hover{ color:#fff; border-color:rgba(157,124,255,.4); transform:translateY(-50%) translateX(-2px); }
body.spOpen .sideTab{ display:none; }
body.spOpen .stage{ right:340px; }
body.spOpen .fxLayer{ right:340px; width:auto; }
.sidePanel{ position:fixed; top:0; right:0; bottom:0; width:340px; z-index:40; transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.9,.3,1); background:rgba(11,10,12,.98); border-left:1px solid var(--glass-border); display:flex; flex-direction:column; }
.sidePanel.open{ transform:none; }
.spTabs{ display:flex; align-items:center; gap:4px; padding:12px 12px 10px; border-bottom:1px solid var(--glass-border); }
.spTab{ padding:7px 12px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; }
.spTab.active{ color:#fff; background:var(--accent-soft); border-color:var(--accent-mid); }
.spClose{ margin-left:auto; width:30px; height:30px; }
.spBody{ flex:1; overflow:auto; padding:10px 12px 16px; }
.spEmpty{ padding:28px 10px; text-align:center; color:var(--muted); font-size:12px; }
.spWin,.spRow{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:12px; border:1px solid transparent; }
.spWin+.spWin,.spRow+.spRow{ border-top-color:rgba(255,255,255,.05); }
.spWin.fresh{ animation:spIn .5s ease; background:rgba(157,124,255,.05); }
@keyframes spIn{ from{ transform:translateX(16px); opacity:0; } }
.spAvatar{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-mid); color:var(--accent); font-size:11px; font-weight:800; }
.spAvatar img{ width:100%; height:100%; object-fit:cover; }
.spWinMain{ flex:1; min-width:0; }
.spWinMain b{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spWinMain small{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.spWinRight{ text-align:right; } .spWinRight b{ font-size:13px; font-weight:800; display:block; } .spWinRight small{ font-size:10px; color:var(--muted); }
.spX{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); }
.spX:hover{ background:#fff; color:#000; }
.spRank{ width:22px; font-size:12px; color:var(--muted); font-weight:700; }
.spRow>b{ font-size:13px; font-weight:800; }
.spPeriods{ display:flex; gap:4px; margin:4px 0 10px; }
.spPeriods button{ padding:5px 10px; border-radius:8px; border:1px solid var(--glass-border); background:transparent; color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; }
.spPeriods button.active{ color:#fff; background:var(--accent-soft); border-color:var(--accent-mid); }
.spMe{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--accent-mid); background:var(--accent-soft); margin-bottom:8px; }
.spMeAvatar{ width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:rgba(0,0,0,.3); color:var(--accent); font-size:11px; font-weight:800; }
.spMeAvatar img{ width:100%; height:100%; object-fit:cover; }
.spMeText{ flex:1; } .spMeText small,.spMePnl small{ display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.spMeText b,.spMePnl b{ font-size:15px; font-weight:900; } .spMePnl{ text-align:right; }

/* ─── profile ─── */
.profileCard{ position:relative; overflow:visible; max-width:760px; }
.pfWave{ position:absolute; inset:-14px; border-radius:26px; border:1px solid rgba(157,124,255,.22); pointer-events:none; animation:pfWave 4.5s ease-out infinite; z-index:-1; }
.pfWave.two{ animation-delay:2.25s; }
@keyframes pfWave{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.06); opacity:0; } }
.pfSignedOut{ padding:20px 0 8px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.pfHero{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:18px; border-radius:16px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.pfAvatarWrap{ position:relative; cursor:pointer; }
.pfAvatar{ width:76px; height:76px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); border:2px solid var(--accent-mid); box-shadow:0 0 24px rgba(157,124,255,.15); }
.pfAvatar img{ width:100%; height:100%; object-fit:cover; }
.pfAvatarEdit{ position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#0e0c15; border:1px solid var(--glass-border); color:var(--accent); }
.pfIdentity{ min-width:0; }
.pfField span{ display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pfInputRow{ display:flex; align-items:center; gap:4px; padding:8px 12px; border-radius:10px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); max-width:300px; }
.pfInputRow i{ font-style:normal; color:var(--muted); font-weight:700; }
.pfInputRow input{ flex:1; min-width:0; background:none; border:0; outline:none; color:#fff; font-size:16px; font-weight:800; }
.pfMeta{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; color:var(--muted); }
.pfXBtn{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:#fff; font-size:12px; font-weight:700; cursor:pointer; }
.pfXBtn:hover{ background:#fff; color:#000; }
.pfXBtn.linked{ border-color:var(--accent-mid); color:var(--accent); }
.pfHeadStats{ display:flex; gap:18px; text-align:right; }
.pfHeadStats small{ display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.pfHeadStats b{ display:block; font-size:20px; font-weight:900; letter-spacing:-.02em; }
.pfSub{ font-size:12px; font-weight:800; margin-right:4px; } .pfSub.good{ color:var(--good); } .pfSub.bad{ color:var(--bad); }
.pfBig.good{ color:var(--good); } .pfBig.bad{ color:var(--bad); }
.pfRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; flex-wrap:wrap; }
.pfDeposit{ display:flex; align-items:center; gap:10px; font-size:12px; }
.pfStats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pfStats>div{ padding:12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03); }
.pfStats small{ display:block; font-size:11px; color:var(--muted); } .pfStats b{ display:block; font-size:18px; font-weight:900; margin-top:4px; }
.pfRecent{ margin-top:12px; padding:14px; border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.02); }
.pfRecentHead{ display:flex; justify-content:space-between; margin-bottom:8px; }
.pfTrades{ display:flex; flex-direction:column; }
.pfTrade{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.pfTrade img{ width:22px; height:22px; border-radius:50%; }
.pfTradeMain{ flex:1; } .pfTradeMain b{ display:block; font-size:13px; } .pfTradeMain small{ color:var(--muted); font-size:11px; }
.pfTradePnl{ font-weight:900; font-size:13px; } .pfTradePnl.good{ color:var(--good); } .pfTradePnl.bad{ color:var(--bad); }
.cwRecovery .dw-input{ color:var(--gold); font-weight:700; letter-spacing:.04em; }
@media (max-width:900px){ body.spOpen .stage{ right:0; } .sidePanel{ width:min(340px, 90vw); } .pfHero{ grid-template-columns:auto 1fr; } .pfHeadStats{ grid-column:1 / -1; text-align:left; } .pfStats{ grid-template-columns:1fr; } }

/* balance lives in the account chip now */
#headerBalancePill{ display:none !important; }
@media (max-width:1400px){ .statPill .k{ display:none; } .symBtn em{ display:none; } }

.pfSendBtn{ border-color:var(--accent-mid); color:var(--accent); background:var(--accent-soft); }
.pfSendBtn:hover{ background:var(--accent); color:#160c2e; }

/* X link in the app header */
a.iconBtn{ display:inline-grid; place-items:center; text-decoration:none; }