/* ───────────────────────────────────────────────────────────────────────────
   CASCADE design system — DARK MONOCHROME product surface
   Extracted from the Cascade product teaser (see CASCADE_DESIGN.md + recon/)
   Pure-black canvas · dark-grey panels · white text · #e8e8ee ONLY as accent
   (up-candles, Buy / Place Trade, positive P&L, donut, active states)
─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── color tokens (sampled from real frames) ── */
  --void:        #000000;
  --bg:          #050505;
  --surface:     #0F0F0E;
  --surface-2:   #141416;
  --border:      rgba(255, 255, 255, 0.07);
  --border-2:    rgba(255, 255, 255, 0.12);

  --green:       #e8e8ee;
  --green-glow:  #e8e8ee;
  --green-deep:  #e8e8ee;

  --red:         #FF5566;
  --red-deep:    #540A0F;

  /* generic positive/negative — MONOCHROME in the default theme (silver / red), so info
     panels (treasury, market cap, APY, since-launch) stay black-and-white. */
  --pos:         #e8e8ee;
  --neg:         #FF5566;
  /* TRADING P&L ONLY — open positions / orders show profit GREEN, loss RED even in the
     mono default (standard trading legibility). Scoped to the PnL cells below, NOT --pos. */
  --pnl-pos:     #16C784;
  --pnl-neg:     #FF5566;

  /* ── OBELIQ brand accent — MONOCHROME silver sheen (black & white product).
     No green, no teal, no color. --iri-grad for hero/logo pops; --iri solid. */
  --iri-1: #6E6E78;
  --iri-2: #9D9EA8;
  --iri-3: #CFCFD6;
  --iri-4: #FFFFFF;
  --iri:   #E8E8EE;
  --iri-grad: linear-gradient(100deg, #7E7E88 0%, #C7C7CF 45%, #FFFFFF 100%);

  --text:        #FFFFFF;
  --text-muted:  #9D9E9C;
  --text-dim:    #565857;

  /* ── type ── */
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── radii: pills for controls, soft-rounded cards ── */
  --r-pill: 999px;
  --r-card: 16px;
  --r-card-sm: 14px;
  --r-card-lg: 18px;

  /* ── glow recipes ── */
  --glow-green:      0 0 18px rgba(232, 232, 238, 0.35), 0 0 44px rgba(232, 232, 238, 0.14);
  --glow-green-soft: 0 0 10px rgba(232, 232, 238, 0.22);
  --glow-red-soft:   0 0 10px rgba(255, 85, 102, 0.22);
}

/* ───────────────────────────────────────────────────────────────────────────
   LIGHT THEME — html[data-theme="light"]. The toggle (set by /js/theme.js)
   flips these tokens; every surface built on the tokens follows automatically,
   so the whole product can be white or black on demand. Accent stays monochrome
   (ink on white, mirroring silver-on-black) to keep the Cascade character.
─────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --void:        #FFFFFF;
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F1;
  --border:      rgba(0, 0, 0, 0.09);
  --border-2:    rgba(0, 0, 0, 0.15);

  --green:       #141414;   /* ink accent — the light-mode counterpart of silver */
  --green-glow:  #000000;
  --green-deep:  #2C2C2C;

  --red:         #D62246;
  --red-deep:    #F6D4DA;

  --text:        #0B0B0C;
  --text-muted:  #4C4E4A;   /* darkened for readable secondary text on white */
  --text-dim:    #74756D;   /* darkened — was #9A9C99, too light to read on white */

  --glow-green:      0 0 0 rgba(0,0,0,0);
  --glow-green-soft: 0 0 0 rgba(0,0,0,0);
}
html[data-theme="light"] body { background: var(--void); }
/* Light theme — PEARL on the white surfaces: light hitting a pearl throws a soft rainbow, so the
   white canvas carries a stronger iridescent wash + sheen (Solana violet/green + pearl pink/ice).
   Scoped :not(.landing) — the landing runs its own aurora. */
html[data-theme="light"] body:not(.landing)::before {
  background:
    radial-gradient(62% 52% at 16% 10%, rgba(153,69,255,.17), transparent 60%),
    radial-gradient(56% 50% at 86% 18%, rgba(120,196,255,.16), transparent 62%),
    radial-gradient(60% 55% at 72% 92%, rgba(20,241,149,.13), transparent 60%),
    radial-gradient(52% 46% at 28% 90%, rgba(255,170,210,.16), transparent 60%);
}
html[data-theme="light"] body:not(.landing)::after { opacity: .42; }
html[data-theme="light"] body.landing::before, html[data-theme="light"] body.landing::after { background: none; }
html[data-theme="light"] ::selection { background: rgba(20,20,20,0.13); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.30); }
html[data-theme="light"] .film-grain { opacity: 0.02; mix-blend-mode: multiply; }
/* readable positive/negative on white (the dark-mode green is ~2:1 on white) */
html[data-theme="light"] { --pos: #2F6FE0; --neg: #D11F3C; }
/* hero gradient-text (--iri-grad) must read on LIGHT canvases — the root silver
   gradient is invisible on white. Give each light-family theme an on-brand DARK grad. */
html[data-theme="light"]    { --iri-grad: linear-gradient(100deg,#2C2C2C 0%,#55555F 50%,#111114 100%); }
html[data-theme="nerf"]     { --iri-grad: linear-gradient(100deg,#943B00 0%,#FF6B00 55%,#7A3100 100%); }
html[data-theme="nintendo"] { --iri-grad: linear-gradient(100deg,#1D4ED8 0%,#3B82F6 50%,#1C1826 100%); }

/* ─── NERF THEME — light-gray (Nerf plastic) canvas · light green/orange/purple ──
   A third selectable theme (toggle cycles dark → light → nerf). Cool light-gray
   surface like a Nerf toy, dark slate text, the Nerf trio (light green / light
   orange / light purple) distributed across accents. Up = light green, down =
   light orange (never red); purple for selection / focus / active rails. ─────── */
html[data-theme="nerf"] {
  /* TRUE NERF palette — 60% gray · 20% orange · 10% purple · 10% green (like an Elite blaster) */
  --void:        #D8D7D2;   /* Nerf base gray — dominant canvas */
  --bg:          #D8D7D2;
  --surface:     #E5E4DF;   /* lighter gray panels */
  --surface-2:   #DBDAD5;
  --border:      rgba(111,79,160,0.20);   /* subtle purple separators (mechanical detailing) */
  --border-2:    rgba(111,79,160,0.36);
  --green:       #943B00;   /* PRIMARY accent = deep Nerf ORANGE (CTAs, active, balance, price) — darkened to read on light gray */
  --green-glow:  #FF6B00;   /* glow keeps the bright toy-orange hue */
  --green-deep:  #7A3100;
  --red:         #523675;   /* down / loss / secondary = deep Nerf PURPLE — darkened for legibility */
  --red-deep:    #E2DBEF;
  --text:        #2B2B2B;   /* dark charcoal — primary text */
  --text-muted:  #523675;   /* secondary text = darkened purple (readable on cream/gray) */
  --text-dim:    #585753;   /* labels = dark gray (was #8A8985, washed out) — clears 4.5:1 on all nerf surfaces */
  --pos:         #943B00;   /* up / bull / profit = deep ORANGE (Nerf, not trading-green) */
  --neg:         #523675;   /* down / bear / loss = deep PURPLE */
  --glow-green:      0 0 18px -6px rgba(255,107,0,0.45);
  --glow-green-soft: 0 0 12px -6px rgba(255,107,0,0.30);
}
html[data-theme="nerf"] body { background: var(--void); }
html[data-theme="nerf"] body::before, html[data-theme="nerf"] body::after { background: none; }
html[data-theme="nerf"] ::selection { background: rgba(255,107,0,0.30); }
html[data-theme="nerf"] :focus-visible { outline: 2px solid #FF6B00; outline-offset: 2px; }
html[data-theme="nerf"] .btn-green { color: #fff; }
/* nav: selected tab = Nerf orange · hover = purple glow */
html[data-theme="nerf"] .onv-tab.active::after, html[data-theme="nerf"] .onv-tab:hover::after { background: #FF6B00; }
html[data-theme="nerf"] .onv-tab.active { color: #FF6B00; }
html[data-theme="nerf"] .onv-tab:hover { color: #6F4FA0; }
html[data-theme="nerf"] ::-webkit-scrollbar-thumb { background: rgba(122,163,122,0.35); }
/* graph box = light frame with a subtle tactical-green edge */
html[data-theme="nerf"] .chart-wrap, html[data-theme="nerf"] .lite-chart-slot {
  border: 1px solid rgba(50,80,50,0.22) !important;
  box-shadow: 0 0 0 1px rgba(40,42,60,0.05), 0 18px 46px -28px rgba(40,42,60,0.30) !important;
}
/* buttons whose ink flips with the theme */
html[data-theme="light"] .btn-green { color: #fff; }
html[data-theme="light"] .switch.on::after { background: var(--green); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; background: var(--void); }

/* ── Polished cross-page navigation ──────────────────────────────────────────
   Opt every same-origin page into the View Transitions API so navigating
   between pages cross-fades smoothly instead of hard-cutting with a flash.
   Zero JS; the html background (black/white per theme) prevents any flash. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.26s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

body {
  font-family: var(--font-ui);
  background: var(--void);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 13px;
  line-height: 1.45;
}

/* Dark theme is a pure-black obsidian canvas — no spotlights, no vignette.
   Depth comes from card shadows, not from lightening the background.
   (Light theme re-enables soft neutral spotlights via the overrides above.) */
/* PEARL + SOLANA site-wide signature (matches the landing) — soft iridescent radials
   (Solana violet #9945FF + green #14F195 + pearl pink/ice) on ::before, and a slow rotating
   "light on a pearl" sheen on ::after. Scoped :not(.landing) — the landing has its own aurora.
   Subtle on the obsidian default; the light theme (below) strengthens it on the white surfaces. */
body:not(.landing)::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(62% 52% at 16% 10%, rgba(153,69,255,.22), transparent 62%),
    radial-gradient(58% 50% at 86% 18%, rgba(120,196,255,.20), transparent 64%),
    radial-gradient(62% 56% at 72% 92%, rgba(20,241,149,.17), transparent 62%),
    radial-gradient(54% 48% at 28% 90%, rgba(255,170,210,.18), transparent 62%);
}
body:not(.landing)::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen; opacity: .58;
  background: conic-gradient(from 0deg at 50% 42%,
    rgba(255,183,214,.30), rgba(153,69,255,.30), rgba(120,196,255,.32), rgba(20,241,149,.26),
    rgba(255,236,180,.28), rgba(255,183,214,.30));
  filter: blur(58px); animation: pearlSpinC 60s linear infinite;
}
@keyframes pearlSpinC { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body:not(.landing)::after { animation: none !important; } }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: inherit; }
::selection { background: rgba(232, 232, 238,0.25); }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ── primitives ─────────────────────────────────────────────────────────── */

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.pos { color: var(--pos); }     /* generic positive — silver in the mono default (treasury, stats, etc.) */
.neg { color: var(--neg); }     /* generic negative — red */
/* trading P&L on open positions / orders is the ONE place GREEN is allowed in the mono
   default theme — keyed by the PnL cell markers, so treasury/info panels stay silver. */
[data-pf="pnl"].pos, #wbPnl.pos { color: var(--pnl-pos); }
[data-pf="pnl"].neg, #wbPnl.neg { color: var(--pnl-neg); }
/* colourful (non-default) themes: P&L follows the theme's own --pos/--neg, not the green */
html[data-theme]:not([data-theme="dark"]) { --pnl-pos: var(--pos); --pnl-neg: var(--neg); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.pill:hover { border-color: var(--border-2); background: var(--surface-2); }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-muted);
}

/* green buttons are FLAT by default — the glow lives ONLY on the primary
   Place-Trade button (.btn-place below) and the donut, per the reference */
.btn-green {
  background: var(--green);
  color: #04130A;
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn-green:hover { background: var(--green-glow); }
.btn-green:active { background: var(--green-deep); transform: translateY(1px); }

.btn-dark {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: border-color .15s, background .15s;
}
.btn-dark:hover { border-color: var(--border-2); background: var(--surface-2); }

/* switch (Reduce-Only, TP/SL) */
.switch {
  position: relative;
  width: 34px; height: 19px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex: none;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .18s, background .18s;
}
.switch.on {
  background: rgba(232, 232, 238,0.18);
  border-color: rgba(232, 232, 238,0.45);
}
.switch.on::after { transform: translateX(15px); background: var(--green); }

/* generic stat block: dim caps label over mono value */
.stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat .label { white-space: nowrap; }
.stat .val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* underline tabs (Positions | Cash, table tabs) */
.tabs-line { display: flex; gap: 18px; border-bottom: 1px solid var(--border); }
.tabs-line .tab {
  padding: 9px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s;
}
.tabs-line .tab:hover { color: var(--text-muted); }
.tabs-line .tab.active { color: var(--text); border-bottom-color: var(--text); }

/* segmented pill tabs (Limit | Market | Conditional) */
.tabs-seg {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.tabs-seg .tab {
  flex: 1;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  border-radius: var(--r-pill);
  text-align: center;
  transition: color .15s, background .15s;
}
.tabs-seg .tab:hover { color: var(--text-muted); }
.tabs-seg .tab.active { background: var(--surface); color: var(--text); border: 1px solid var(--border-2); }

/* inputs: pill fields with mono values */
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 12px;
  transition: border-color .15s;
}
.field:focus-within { border-color: rgba(232, 232, 238,0.4); }
.field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text);
  text-align: right;
}
.field input::placeholder { color: var(--text-dim); }
.field .unit { font-size: 11px; color: var(--text-dim); flex: none; }
.field .flabel { font-size: 11.5px; color: var(--text-muted); flex: none; }

/* keycap (⌘K) */
.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 2px 7px;
  line-height: 1.4;
}

/* live indicator — monochrome dot, flat, no halo (never green; green is +/- only) */
.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text);
  flex: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   CINEMATIC LAYER — shader void, film grain, silk-unveil intro, bloom
─────────────────────────────────────────────────────────────────────────── */

/* WebGL aurora canvas — sits above the body background, below everything else */
#shaderBg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* film grain — fixed, pointer-transparent, soft-light. Animated by jumping
   transform positions (compositor-only, costs nothing). */
.film-grain {
  position: fixed;
  inset: -120px;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: grain-shift 0.9s steps(1) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0%      { transform: translate(0, 0); }
  12.5%   { transform: translate(-32px, 18px); }
  25%     { transform: translate(14px, -28px); }
  37.5%   { transform: translate(-22px, -12px); }
  50%     { transform: translate(28px, 24px); }
  62.5%   { transform: translate(-12px, 30px); }
  75%     { transform: translate(20px, -16px); }
  87.5%   { transform: translate(-30px, -24px); }
  100%    { transform: translate(0, 0); }
}

/* ── intro: black-silk unveil (recreates f_01 → f_02 cloth lift) ─────────── */
.intro { display: none; } /* only the fx-init path ever shows it */
html.fx-init .intro {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 250;
  background:
    radial-gradient(120% 90% at 50% 30%, #0B0B0B 0%, #020202 62%),
    #020202;
  clip-path: inset(0% 0% 0% 0%);
}
/* the rim light along the cloth's top edge (frame f_01) */
.intro-rim {
  position: absolute;
  top: 16vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 78vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.85) 70%, transparent);
  box-shadow: 0 0 22px rgba(255,255,255,0.35), 0 0 70px rgba(255,255,255,0.12);
  opacity: 0;
}
.intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.intro-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 360px; height: 360px;
  transform: translate(-50%, -56%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 55%, transparent 72%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}
.intro-logo {
  position: relative;
  width: 96px; height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  opacity: 0;
  transform: scale(0.92);
}
.intro-logo svg { width: 72px; height: 72px; filter: drop-shadow(0 0 14px rgba(255,255,255,0.22)); }
/* light sweep that glints across the mark (the silk catching light) */
.intro-glint {
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.32) 47%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.32) 53%, transparent 62%);
  transform: translateX(-160%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.intro-word {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  color: var(--text-muted);
  opacity: 0;
}

/* panels hidden pre-assembly — ONLY when the fx stack is alive */
html.fx-init .fx-panel { opacity: 0; }
/* safety valve: if any CDN/runtime fails, force everything visible */
html.fx-safety .fx-panel { opacity: 1 !important; transform: none !important; }
html.fx-safety .intro { display: none !important; }

/* ── bloom: restrained — ONLY the primary button and the donut glow ─────── */
@keyframes bloom-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Place Trade: the ONE green button that glows — blurred halo, breathing */
.btn-place { position: relative; z-index: 0; box-shadow: var(--glow-green-soft); }
.btn-place::after {
  content: '';
  position: absolute;
  inset: -12px -10px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(58% 110% at 50% 50%, rgba(232, 232, 238,0.34), rgba(232, 232, 238,0.10) 60%, transparent 78%);
  filter: blur(10px);
  animation: bloom-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
.btn-place.sell-mode::after {
  background: radial-gradient(58% 110% at 50% 50%, rgba(255,85,102,0.30), rgba(255,85,102,0.08) 60%, transparent 78%);
}

/* donut halo behind the chart — real layered light, not a flat shadow */
.donut-bloom {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 232, 238,0.20), rgba(232, 232, 238,0.06) 58%, transparent 74%);
  filter: blur(13px);
  animation: bloom-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* tilt targets render on the GPU */
.fx-tilt { transform-style: preserve-3d; }

/* ── reduced motion: freeze the theatrics, keep the premium look ─────────── */
@media (prefers-reduced-motion: reduce) {
  .film-grain,
  .btn-place::after,
  .donut-bloom { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-IMMERSION THEMES — every surface, border, text, number and control
   follows the token contract, so these theme the whole product site-wide.
   Selectable from the Appearance picker (data-theme-set) + /js/theme.js cycle.
   ─ AKIRA     · Neo-Tokyo military terminal — black canvas, blood-red panels,
                 hazard-orange borders & buttons, akira-red losses, white profit.
   ─ NINTENDO  · Nerf × Nintendo full-saturation — orange arcade canvas, toy-gray
                 cards, purple borders, green buys, purple sells, red headers.
   ─ TRON      · Tron Quantum — black void, glowing cyan everything, neon-purple
                 shorts, holographic edges, white price.
═══════════════════════════════════════════════════════════════════════════ */

/* ─── AKIRA — FULL SATURATION ─────────────────────────────────────────────── */
html[data-theme="akira"] {
  --void:#050505; --bg:#050505;
  --surface:#1A0508; --surface-2:#270409;
  --border:rgba(255,94,0,0.30); --border-2:rgba(255,94,0,0.55);
  --green:#FF5E00; --green-glow:#FF5E00; --green-deep:#C94A00;   /* hazard orange = primary/active/buy */
  --red:#FF001E; --red-deep:#4A0008;                              /* akira red */
  --pos:#F8F8F8; --neg:#FF001E;                                   /* profit = industrial white · loss = akira red */
  --text:#F8F8F8; --text-muted:#C7C4C5; --text-dim:#8A8786;
  --glow-green:0 0 18px -4px rgba(255,94,0,0.55),0 0 44px -10px rgba(255,0,30,0.30);
  --glow-green-soft:0 0 12px -6px rgba(255,94,0,0.40);
}
html[data-theme="akira"] body { background: var(--void); }
html[data-theme="akira"] body::before, html[data-theme="akira"] body::after { background: none; }
html[data-theme="akira"] ::selection { background: rgba(255,0,30,0.35); }
html[data-theme="akira"] :focus-visible { outline: 2px solid #FF5E00; outline-offset: 2px; }
html[data-theme="akira"] ::-webkit-scrollbar-thumb { background: rgba(255,94,0,0.40); }
html[data-theme="akira"] h1, html[data-theme="akira"] h2, html[data-theme="akira"] h3, html[data-theme="akira"] .eyebrow { color: #FF5E00; }
html[data-theme="akira"] .onv-tab.active { color: #FF001E; }
html[data-theme="akira"] .onv-tab.active::after, html[data-theme="akira"] .onv-tab:hover::after { background: #FF001E; }
html[data-theme="akira"] .onv-tab:hover { color: #FF5E00; }
html[data-theme="akira"] .chart-wrap, html[data-theme="akira"] .lite-chart-slot {
  border: 1px solid rgba(255,94,0,0.30) !important;
  box-shadow: 0 0 0 1px rgba(255,0,30,0.10), 0 18px 46px -28px rgba(255,0,30,0.45) !important;
}

/* ─── NERF × NINTENDO — FULL SATURATION ───────────────────────────────────── */
html[data-theme="nintendo"] {
  /* App-surface canvas is a warm arcade-paper neutral (NOT bright orange) so data is
     legible; orange stays the ACCENT identity via nav active rails, buttons & highlights. */
  --void:#FBF4EC; --bg:#FBF4EC;                                    /* warm neutral arcade-paper canvas */
  --surface:#F3F1EA; --surface-2:#E6E3DB;                          /* toy-gray panels / cards (dark text reads) */
  --border:rgba(107,76,194,0.40); --border-2:rgba(107,76,194,0.62);/* toy purple */
  --green:#2563EB; --green-glow:#3B82F6; --green-deep:#1D4ED8;     /* arcade BLUE = buy (brand law: positive is azure/blue, never green) */
  --red:#6B4CC2; --red-deep:#E4DDF4;                               /* toy purple = sell / down */
  --pos:#1D4ED8; --neg:#5A39AE;                                    /* blue/purple read on the neutral canvas + gray cards */
  --text:#1C1826; --text-muted:#2E2640; --text-dim:#574C68;        /* dark charcoal/purple — legible on neutral canvas */
  --accent-orange:#FF6B00;                                         /* Nintendo arcade-orange ACCENT (chrome, highlights) */
  --glow-green:0 0 16px -6px rgba(59,130,246,0.55);
  --glow-green-soft:0 0 10px -6px rgba(59,130,246,0.40);
}
html[data-theme="nintendo"] body { background: var(--void); }
html[data-theme="nintendo"] body::before, html[data-theme="nintendo"] body::after { background: none; }
html[data-theme="nintendo"] ::selection { background: rgba(107,76,194,0.30); }
html[data-theme="nintendo"] :focus-visible { outline: 2px solid #6B4CC2; outline-offset: 2px; }
html[data-theme="nintendo"] ::-webkit-scrollbar-thumb { background: rgba(107,76,194,0.45); }
html[data-theme="nintendo"] .btn-green { color: #fff; }
html[data-theme="nintendo"] h1, html[data-theme="nintendo"] h2, html[data-theme="nintendo"] h3, html[data-theme="nintendo"] .eyebrow { color: #C70010; }
html[data-theme="nintendo"] .onv-tab.active { color: #C70010; }
html[data-theme="nintendo"] .onv-tab.active::after, html[data-theme="nintendo"] .onv-tab:hover::after { background: #FF6B00; }
html[data-theme="nintendo"] .onv-tab:hover { color: #6B4CC2; }
html[data-theme="nintendo"] .chart-wrap, html[data-theme="nintendo"] .lite-chart-slot {
  border: 1px solid rgba(107,76,194,0.35) !important;
  box-shadow: 0 0 0 1px rgba(107,76,194,0.10), 0 18px 46px -28px rgba(107,76,194,0.40) !important;
}

/* ─── TRON QUANTUM — FULL SATURATION ──────────────────────────────────────── */
html[data-theme="tron"] {
  --void:#000000; --bg:#000000;
  --surface:#04141A; --surface-2:#07212B;                          /* dark cyan-black panels */
  --border:rgba(0,255,255,0.28); --border-2:rgba(0,255,255,0.52);  /* glowing cyan edges */
  --green:#5896FF; --green-glow:#7FB0FF; --green-deep:#2F6FE0;      /* profit/up/buy = azure (brand law: positive never cyan); cyan kept only for non-semantic chrome below */
  --red:#B026FF; --red-deep:#2A0A40;                               /* neon purple = sell / down */
  --pos:#5896FF; --neg:#B026FF;
  --text:#EAFEFF; --text-muted:#84D9E2; --text-dim:#3E6E76;
  --glow-green:0 0 18px -2px rgba(88,150,255,0.65),0 0 48px -10px rgba(88,150,255,0.40);
  --glow-green-soft:0 0 12px -4px rgba(88,150,255,0.50);
}
html[data-theme="tron"] body { background: var(--void); }
html[data-theme="tron"] body::before, html[data-theme="tron"] body::after { background: none; }
html[data-theme="tron"] ::selection { background: rgba(0,255,255,0.30); }
html[data-theme="tron"] :focus-visible { outline: 2px solid #00FFFF; outline-offset: 2px; }
html[data-theme="tron"] ::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.38); }
html[data-theme="tron"] h1, html[data-theme="tron"] h2, html[data-theme="tron"] h3, html[data-theme="tron"] .eyebrow { color: #B026FF; text-shadow: 0 0 18px rgba(176,38,255,0.45); }
html[data-theme="tron"] .onv-tab.active { color: #00FFFF; }
html[data-theme="tron"] .onv-tab.active::after, html[data-theme="tron"] .onv-tab:hover::after { background: #00FFFF; box-shadow: 0 0 10px rgba(0,255,255,0.7); }
html[data-theme="tron"] .onv-tab:hover { color: #B026FF; }
html[data-theme="tron"] .chart-wrap, html[data-theme="tron"] .lite-chart-slot {
  border: 1px solid rgba(0,255,255,0.40) !important;
  box-shadow: 0 0 0 1px rgba(0,255,255,0.25), 0 0 40px -8px rgba(0,255,255,0.45) !important;
}

/* ─── MATRIX — GREEN-BLACK CINEMATIC INTELLIGENCE TERMINAL ───────────────────
   Theme-scoped green is intentional here (overrides the global "no green accent"
   rule). Premium, restrained — not a hacker-meme. The signature code-rain +
   scanline background is injected globally by /js/theme.js, gated to matrix. */
html[data-theme="matrix"] {
  --void:#020604; --bg:#03140B;
  --surface:rgba(0,20,10,0.72); --surface-2:rgba(0,10,5,0.92);
  --border:rgba(0,255,136,0.25); --border-2:rgba(0,255,136,0.42);
  --green:#00FF88; --green-glow:#39FF14; --green-deep:#03140B;
  --red:#FF3B3B; --red-deep:#2A0606;
  --pos:#00FF88; --neg:#FF3B3B;
  --iri-1:#00FF88; --iri-2:#39FF14; --iri-3:#7CFFB2; --iri-4:#00FF88;
  --iri:#00FF88; --iri-grad:linear-gradient(100deg,#00FF88 0%,#39FF14 50%,#7CFFB2 100%);
  --text:#E8FFF2; --text-muted:#7CFFB2; --text-dim:#53695B;
  --glow-green:0 0 18px rgba(0,255,136,0.40),0 0 48px rgba(0,255,136,0.16);
  --glow-green-soft:0 0 10px rgba(0,255,136,0.25);
  --glow-red-soft:0 0 10px rgba(255,59,59,0.25);
}
html[data-theme="matrix"] body { background: var(--void); }
html[data-theme="matrix"] body::before, html[data-theme="matrix"] body::after { background: none; }
html[data-theme="matrix"] ::selection { background: rgba(0,255,136,0.28); color: #E8FFF2; }
html[data-theme="matrix"] :focus-visible { outline: 2px solid #00FF88; outline-offset: 2px; }
html[data-theme="matrix"] ::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.38); }
html[data-theme="matrix"] .btn-green { color: #02160C; border-color: rgba(0,255,136,0.55); }
html[data-theme="matrix"] .btn-green:hover { box-shadow: var(--glow-green); }
html[data-theme="matrix"] h1, html[data-theme="matrix"] h2, html[data-theme="matrix"] h3, html[data-theme="matrix"] .eyebrow { color: #E8FFF2; text-shadow: 0 0 14px rgba(0,255,136,0.35); }
html[data-theme="matrix"] .onv-tab.active { color: #00FF88; }
html[data-theme="matrix"] .onv-tab.active::after, html[data-theme="matrix"] .onv-tab:hover::after { background: #00FF88; box-shadow: 0 0 10px rgba(0,255,136,0.7); }
html[data-theme="matrix"] .onv-tab:hover { color: #7CFFB2; }
html[data-theme="matrix"] .chart-wrap, html[data-theme="matrix"] .lite-chart-slot {
  background: #020604 !important;
  border: 1px solid rgba(0,255,136,0.40) !important;
  box-shadow: 0 0 0 1px rgba(0,255,136,0.18), 0 0 40px -8px rgba(0,255,136,0.40) !important;
}

/* ── Auto-Pilot order highlight: gold panel + "Auto-Pilot" label + live trailing TP/SL ───── */
/* ---- PRO terminal (table rows) ---- */
.pos-row.auto td { background: rgba(212,175,55,0.07); }
.pos-row.auto td:first-child { box-shadow: inset 3px 0 0 #e8b94a; }
.ap-badge { display:inline-flex; align-items:center; gap:3px; background:linear-gradient(180deg,#f3cf6b,#d4af37);
  color:#1a1400; font-weight:800; font-size:9px; letter-spacing:.04em; padding:2px 7px; border-radius:999px;
  margin-right:7px; vertical-align:1px; white-space:nowrap; }
/* detail sub-row: tight, left-packed pill strip — no sprawling empty colspan */
tr.auto-detail td { background: rgba(212,175,55,0.05); padding:0 12px 7px 12px !important; border-top:0;
  box-shadow: inset 3px 0 0 #e8b94a; }
tr.auto-detail .ap-lvl, tr.auto-detail .ap-trail { vertical-align:middle; }
.ap-lvl { display:inline-flex; align-items:center; gap:5px; margin-right:7px;
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; line-height:1;
  padding:3px 9px; border-radius:7px; background:rgba(212,175,55,0.10); border:1px solid rgba(212,175,55,0.28); }
.ap-lvl i { font-style:normal; color:#d4af37; font-weight:700; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.ap-lvl b { color:var(--text,#e8eaed); font-weight:600; }
.ap-trail { display:inline-flex; align-items:center; font-size:10px; color:#d4af37; letter-spacing:.02em; opacity:.9; }

/* ---- LITE terminal (flex cards) ---- */
.lpos.auto { flex-wrap:wrap; row-gap:7px; border:1px solid rgba(212,175,55,0.55) !important;
  background:rgba(212,175,55,0.07) !important; box-shadow:0 0 0 1px rgba(212,175,55,0.16); }
/* badge sits INLINE at the front of the row (no full-width header eating space) */
.lp-ap { order:-1; flex:none; display:inline-flex; align-items:center; gap:3px;
  font-size:9px; font-weight:800; letter-spacing:.04em; color:#1a1400;
  background:linear-gradient(180deg,#f3cf6b,#d4af37); padding:2px 8px; border-radius:999px; white-space:nowrap; }
/* SL/TP/trail = one compact strip across the bottom, divider above it */
.lp-aplvl { flex-basis:100%; width:100%; display:block; margin:0; padding-top:7px;
  border-top:1px solid rgba(212,175,55,0.18); font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10.5px; line-height:1.6; }
.lp-aplvl i { font-style:normal; color:#d4af37; font-weight:700; font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; margin-right:4px; }
.lp-aplvl b { color:var(--text,#e8eaed); font-weight:600; padding:2px 8px; margin-right:9px;
  border-radius:6px; background:rgba(212,175,55,0.10); border:1px solid rgba(212,175,55,0.26); }
.lp-aptrail { color:#d4af37; font-size:10px; opacity:.9; white-space:nowrap; }

/* responsive: keep pills tidy on iPad / iPhone, let strip wrap instead of overflow */
@media (max-width: 640px) {
  .ap-lvl, .lp-aplvl b { padding:2px 7px; }
  .lp-aplvl { line-height:1.9; }
}