/* The sole product palette and typography authority. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --jj-ink: #06090f;
  --jj-panel: #0a0e17;
  --jj-edge: #1c2434;
  --jj-mint: #34d399;
  --jj-loss: #fb7185;
  --jj-ai: #a78bfa;
  --jj-cyan: #22d3ee;
  --jj-amber: #fbbf24;
  --jj-text: #e4e4e7;
  --jj-text-strong: #f4f4f5;
  --jj-text-muted: #a1a1aa;
  --jj-text-faint: #71717a;
  --jj-link: #7dd3fc;
  --jj-surface-0: #06090f;
  --jj-surface-1: #0a0e17;
  --jj-surface-2: #101622;
  --jj-surface-3: #151d2b;
  --jj-overlay: rgba(255, 255, 255, 0.035);
  --jj-overlay-strong: rgba(255, 255, 255, 0.065);
  --jj-focus: #7dd3fc;
  --jj-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --jj-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
  --jj-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.48);
  --jj-glow: none;
  --jj-page-background: radial-gradient(700px 260px at 50% -80px, rgba(52, 211, 153, 0.12), transparent), radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), var(--jj-ink);
  --jj-page-background-size: auto, 26px 26px, auto;
  --jj-button-primary: linear-gradient(135deg, #34d399, #06b6d4);
  --jj-button-primary-border: #34d399;
  --jj-button-primary-text: #03130e;
  --jj-button-secondary: rgba(167, 139, 250, 0.1);
  --jj-button-secondary-border: rgba(167, 139, 250, 0.3);
  --jj-button-shadow: none;
  --jj-tab-1: #34d399;
  --jj-tab-2: #22d3ee;
  --jj-tab-3: #a78bfa;
  --jj-tab-4: #fbbf24;
  --jj-tab-5: #fb7185;
  --jj-tab-6: #7dd3fc;
  --jj-coin-bnb: #f3ba2f;
  --jj-coin-btc: #f7931a;
  --jj-coin-eth: #8b9df2;
  --jj-coin-mnt: #00d1b2;
  --jj-coin-doge: #c2a633;
  --jj-coin-xrp: #00aae4;
  --jj-coin-sol: #14f195;
  --jj-coin-xau: #ffd700;
  --jj-coin-xag: #c0c0c0;
  --jj-coin-cl: #2dd4bf;
  --jj-coin-bz: #0ea5e9;
  --jj-coin-xaut: #ffd700;
  --jj-coin-hype: #9be84d;
  --jj-radius-sm: 0.5rem;
  --jj-radius-md: 0.75rem;
  --jj-radius-lg: 1rem;
  --jj-motion-fast: 120ms;
  --jj-motion-base: 200ms;
  --jj-font-display: "Space Grotesk", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --jj-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --jj-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Compatibility tokens consumed by existing product and Canvas code. */
  --background: 220 43% 4%;
  --foreground: 240 6% 90%;
  --card: 221 39% 6%;
  --card-foreground: 240 9% 96%;
  --panel: 221 39% 6%;
  --popover: 222 35% 8%;
  --muted: 220 25% 12%;
  --border: 218 30% 16%;
  --muted-foreground: 240 5% 65%;
  --primary: 158 64% 52%;
  --destructive: 350 90% 71%;
  --success: 158 64% 52%;
  --warning: 43 96% 56%;
  --info: 188 86% 53%;
  --ai: 255 92% 76%;
  --ring: 199 89% 74%;
  --radius: 0.75rem;
  --tape-bg: 220 43% 4%;
  --tape-bg-elevated: 221 39% 6%;
  --tape-fp-bid: 350 90% 71%;
  --tape-fp-ask: 158 64% 52%;
  --tape-fp-delta-pos: 158 64% 52%;
  --tape-fp-delta-neg: 350 90% 71%;
  --tape-fp-imbalance: 43 96% 56%;
  --tape-fp-stacked: 255 92% 76%;
  --tape-fp-absorption: 43 96% 56%;
  --tape-fp-iceberg: 188 86% 53%;
  --tape-fp-exhaustion: 255 92% 76%;
  --tape-fp-poc: 240 9% 96%;
  --tape-grid: 218 30% 16%;
  --tape-text-primary: 240 9% 96%;
}

:root[data-theme="light"] {
  color-scheme: light;
  --jj-ink: #f5f7fb;
  --jj-panel: #ffffff;
  --jj-edge: #c7cfdd;
  --jj-mint: #065f46;
  --jj-loss: #b4233a;
  --jj-ai: #6842bd;
  --jj-cyan: #056b80;
  --jj-amber: #8a5b00;
  --jj-text: #273142;
  --jj-text-strong: #111827;
  --jj-text-muted: #4b5565;
  --jj-text-faint: #667085;
  --jj-link: #075985;
  --jj-surface-0: #f5f7fb;
  --jj-surface-1: #ffffff;
  --jj-surface-2: #eef2f7;
  --jj-surface-3: #e4eaf2;
  --jj-overlay: rgba(15, 23, 42, 0.035);
  --jj-overlay-strong: rgba(15, 23, 42, 0.07);
  --jj-focus: #075985;
  --jj-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  --jj-shadow-sm: 0 7px 22px rgba(15, 23, 42, 0.08);
  --jj-shadow-lg: 0 26px 68px rgba(15, 23, 42, 0.18);
  --jj-glow: none;
  --jj-page-background: linear-gradient(180deg, #ffffff 0, #f5f7fb 24rem);
  --jj-page-background-size: auto;
  --jj-button-primary: linear-gradient(135deg, #065f46, #056b80);
  --jj-button-primary-border: #065f46;
  --jj-button-primary-text: #ffffff;
  --jj-button-secondary: rgba(104, 66, 189, 0.08);
  --jj-button-secondary-border: rgba(104, 66, 189, 0.35);
  --jj-button-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  --background: 220 43% 97%;
  --foreground: 221 39% 12%;
  --card: 0 0% 100%;
  --card-foreground: 221 39% 12%;
  --panel: 0 0% 100%;
  --popover: 0 0% 100%;
  --muted: 218 28% 94%;
  --border: 218 24% 82%;
  --muted-foreground: 220 15% 34%;
  --primary: 160 88% 19%;
  --destructive: 350 67% 42%;
  --success: 160 88% 19%;
  --warning: 40 100% 27%;
  --info: 190 92% 26%;
  --ai: 259 48% 50%;
  --ring: 199 89% 28%;
  --tape-bg: 220 43% 97%;
  --tape-bg-elevated: 0 0% 100%;
  --tape-fp-bid: 350 67% 42%;
  --tape-fp-ask: 160 88% 19%;
  --tape-fp-delta-pos: 160 88% 19%;
  --tape-fp-delta-neg: 350 67% 42%;
  --tape-fp-imbalance: 40 100% 27%;
  --tape-fp-stacked: 259 48% 50%;
  --tape-fp-absorption: 40 100% 27%;
  --tape-fp-iceberg: 190 92% 26%;
  --tape-fp-exhaustion: 259 48% 50%;
  --tape-fp-poc: 221 39% 12%;
  --tape-grid: 218 24% 82%;
  --tape-text-primary: 221 39% 12%;
}

:root[data-theme="premium"] {
  color-scheme: dark;
  --jj-ink: #070711;
  --jj-panel: #151226;
  --jj-edge: #51456f;
  --jj-mint: #43ddb0;
  --jj-loss: #ff7991;
  --jj-ai: #b69cff;
  --jj-cyan: #39d8ee;
  --jj-amber: #e8c15d;
  --jj-text: #ebe8f3;
  --jj-text-strong: #fffdf7;
  --jj-text-muted: #b2abc1;
  --jj-text-faint: #817991;
  --jj-link: #63e6f5;
  --jj-surface-0: #070711;
  --jj-surface-1: #151226;
  --jj-surface-2: #1d1833;
  --jj-surface-3: #292044;
  --jj-overlay: rgba(182, 156, 255, 0.045);
  --jj-overlay-strong: rgba(232, 193, 93, 0.09);
  --jj-focus: #e8c15d;
  --jj-shadow: 0 24px 64px rgba(2, 1, 9, 0.58);
  --jj-shadow-sm: 0 14px 36px rgba(2, 1, 9, 0.42);
  --jj-shadow-lg: 0 34px 88px rgba(2, 1, 9, 0.72);
  --jj-glow: 0 0 44px rgba(182, 156, 255, 0.09);
  --jj-page-background: radial-gradient(900px 420px at 12% -8%, rgba(232, 193, 93, 0.17), transparent 62%), radial-gradient(850px 460px at 92% 2%, rgba(182, 156, 255, 0.2), transparent 64%), radial-gradient(600px 380px at 50% 100%, rgba(57, 216, 238, 0.09), transparent 68%), #070711;
  --jj-page-background-size: auto;
  --jj-button-primary: linear-gradient(135deg, #e8c15d, #b69cff 55%, #39d8ee);
  --jj-button-primary-border: #e8c15d;
  --jj-button-primary-text: #090711;
  --jj-button-secondary: linear-gradient(135deg, rgba(182, 156, 255, 0.2), rgba(57, 216, 238, 0.1));
  --jj-button-secondary-border: rgba(232, 193, 93, 0.5);
  --jj-button-shadow: 0 8px 24px rgba(182, 156, 255, 0.2), 0 0 28px rgba(232, 193, 93, 0.08);
  --jj-motion-fast: 150ms;
  --jj-motion-base: 260ms;
  --background: 250 38% 6%;
  --foreground: 257 20% 93%;
  --card: 252 30% 11%;
  --card-foreground: 48 100% 99%;
  --panel: 244 32% 8%;
  --popover: 248 35% 11%;
  --muted: 250 28% 15%;
  --border: 251 28% 31%;
  --muted-foreground: 259 13% 71%;
  --primary: 160 69% 56%;
  --destructive: 349 100% 74%;
  --success: 160 69% 56%;
  --warning: 43 74% 64%;
  --info: 188 84% 58%;
  --ai: 255 100% 81%;
  --ring: 43 74% 64%;
  --tape-bg: 250 38% 6%;
  --tape-bg-elevated: 252 30% 11%;
  --tape-fp-bid: 349 100% 74%;
  --tape-fp-ask: 160 69% 56%;
  --tape-fp-delta-pos: 160 69% 56%;
  --tape-fp-delta-neg: 349 100% 74%;
  --tape-fp-imbalance: 43 74% 64%;
  --tape-fp-stacked: 255 100% 81%;
  --tape-fp-absorption: 43 74% 64%;
  --tape-fp-iceberg: 188 84% 58%;
  --tape-fp-exhaustion: 255 100% 81%;
  --tape-fp-poc: 48 100% 99%;
  --tape-grid: 251 28% 31%;
  --tape-text-primary: 48 100% 99%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { min-width: 320px; min-height: 100%; margin: 0; }
body {
  background: var(--jj-page-background);
  background-size: var(--jj-page-background-size);
  background-attachment: fixed;
  color: var(--jj-text);
  font-family: var(--jj-font-body);
  transition: background-color var(--jj-motion-base), color var(--jj-motion-base);
}
button, input, select, textarea { font: inherit; }
button, a, select, input, textarea { outline: none; }
button { transition: border-color var(--jj-motion-fast), background var(--jj-motion-fast), color var(--jj-motion-fast), box-shadow var(--jj-motion-fast), transform var(--jj-motion-fast); }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.52; }
a { color: var(--jj-link); }
:where(button, a, select, input, textarea):focus-visible {
  outline: 3px solid var(--jj-focus);
  outline-offset: 3px;
}
.jj-display { font-family: var(--jj-font-display); }
.jj-number { font-family: var(--jj-font-mono); font-variant-numeric: tabular-nums; }
.jj-skip-link { position: fixed; z-index: 10000; inset: 8px auto auto 8px; transform: translateY(-150%); padding: 10px 14px; border-radius: var(--jj-radius-sm); background: var(--jj-text-strong); color: var(--jj-ink); }
.jj-skip-link:focus { transform: translateY(0); }
.jj-platform-bar { position: relative; z-index: 60; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px; border-bottom: 1px solid var(--jj-edge); background: color-mix(in srgb, var(--jj-panel) 94%, transparent); box-shadow: var(--jj-glow); font-size: 12px; backdrop-filter: blur(18px); }
.jj-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--jj-text-strong); font-family: var(--jj-font-display); font-weight: 700; white-space: nowrap; }
.jj-brand-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--jj-mint), var(--jj-cyan)); color: #020706; font-family: var(--jj-font-display); }
.jj-product-nav { display: flex; gap: 4px; }
.jj-product-nav a { position: relative; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--jj-radius-sm); color: var(--jj-text-muted); text-decoration: none; transition: background var(--jj-motion-fast), border-color var(--jj-motion-fast), color var(--jj-motion-fast); }
.jj-product-nav a:hover { border-color: var(--jj-edge); background: var(--jj-overlay); color: var(--jj-text-strong); }
.jj-product-nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--jj-cyan) 40%, var(--jj-edge)); background: color-mix(in srgb, var(--jj-cyan) 10%, var(--jj-panel)); color: var(--jj-cyan); }
:root[data-theme="premium"] .jj-product-nav a[data-product="home"][aria-current="page"] { border-color: color-mix(in srgb, var(--jj-mint) 55%, var(--jj-edge)); color: var(--jj-mint); }
:root[data-theme="premium"] .jj-product-nav a[data-product="tape"][aria-current="page"] { border-color: color-mix(in srgb, var(--jj-cyan) 55%, var(--jj-edge)); color: var(--jj-cyan); }
:root[data-theme="premium"] .jj-product-nav a[data-product="options"][aria-current="page"] { border-color: color-mix(in srgb, var(--jj-ai) 55%, var(--jj-edge)); color: var(--jj-ai); }
:root[data-theme="premium"] .jj-product-nav a[data-product="tools"][aria-current="page"] { border-color: color-mix(in srgb, var(--jj-amber) 55%, var(--jj-edge)); color: var(--jj-amber); }
:root[data-theme="premium"] .jj-product-nav a[data-product="monitor"][aria-current="page"] { border-color: color-mix(in srgb, var(--jj-loss) 55%, var(--jj-edge)); color: var(--jj-loss); }
.jj-platform-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jj-auth-state, .jj-freshness { display: inline-flex; align-items: center; gap: 6px; color: var(--jj-text-muted); font-family: var(--jj-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.jj-status-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 7px 11px; border: 1px solid var(--jj-edge); border-radius: 999px; color: var(--jj-text-muted); font-family: var(--jj-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.jj-status-badge[data-tone="positive"] { border-color: color-mix(in srgb, var(--jj-mint) 45%, var(--jj-edge)); color: var(--jj-mint); }
.jj-status-badge[data-tone="warning"] { border-color: color-mix(in srgb, var(--jj-amber) 45%, var(--jj-edge)); color: var(--jj-amber); }
.jj-status-badge[data-tone="negative"] { border-color: color-mix(in srgb, var(--jj-loss) 45%, var(--jj-edge)); color: var(--jj-loss); }
.jj-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jj-text-faint); }
.jj-dot[data-tone="positive"] { background: var(--jj-mint); }
.jj-dot[data-tone="warning"] { background: var(--jj-amber); }
.jj-dot[data-tone="negative"] { background: var(--jj-loss); }
.jj-theme-switcher { display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border: 1px solid var(--jj-edge); border-radius: 999px; background: var(--jj-ink); }
.jj-theme-switcher button { min-height: 29px; border: 1px solid transparent; border-radius: 999px; padding: 0 9px; background: transparent; color: var(--jj-text-muted); cursor: pointer; font-size: 10px; }
.jj-theme-switcher button[aria-pressed="true"] { background: var(--jj-overlay-strong); color: var(--jj-text-strong); box-shadow: inset 0 0 0 1px var(--jj-edge); }
:root[data-theme="premium"] .jj-theme-switcher button[data-theme-choice="dark"] { color: var(--jj-cyan); }
:root[data-theme="premium"] .jj-theme-switcher button[data-theme-choice="light"] { color: var(--jj-ai); }
:root[data-theme="premium"] .jj-theme-switcher button[data-theme-choice="premium"][aria-pressed="true"] { border-color: var(--jj-amber); background: var(--jj-button-primary); color: var(--jj-button-primary-text); box-shadow: var(--jj-button-shadow); }
.jj-logout { min-height: 29px; padding: 0 9px; border: 1px solid var(--jj-edge); border-radius: 999px; background: transparent; color: var(--jj-text-muted); cursor: pointer; font-size: 10px; }
.jj-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-md); background: var(--jj-overlay); color: var(--jj-text-muted); }
.jj-state strong { color: var(--jj-text-strong); font-family: var(--jj-font-display); }
.jj-state[data-state="loading"], .jj-state[data-state="warming"], .jj-state[data-state="reconnecting"] { border-color: color-mix(in srgb, var(--jj-amber) 45%, var(--jj-edge)); }
.jj-state[data-state="partial"], .jj-state[data-state="stale"] { border-color: color-mix(in srgb, var(--jj-cyan) 45%, var(--jj-edge)); }
.jj-state[data-state="unavailable"], .jj-state[data-state="error"] { border-color: color-mix(in srgb, var(--jj-loss) 50%, var(--jj-edge)); }
.jj-state-icon { color: var(--jj-amber); font-family: var(--jj-font-mono); }
.jj-state[data-state="unavailable"] .jj-state-icon, .jj-state[data-state="error"] .jj-state-icon { color: var(--jj-loss); }
.jj-state p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }

/* Shared institutional controls: products may compose these without adding palette values. */
.jj-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.9rem; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-sm); background: var(--jj-surface-2); color: var(--jj-text-strong); cursor: pointer; font-weight: 650; }
.jj-button[data-variant="primary"] { border-color: var(--jj-button-primary-border); background: var(--jj-button-primary); color: var(--jj-button-primary-text); box-shadow: var(--jj-button-shadow); }
.jj-button[data-variant="secondary"] { border-color: var(--jj-button-secondary-border); background: var(--jj-button-secondary); color: var(--jj-ai); }
.jj-button[data-variant="ghost"] { background: transparent; color: var(--jj-text-muted); }
.jj-button[data-variant="danger"] { border-color: color-mix(in srgb, var(--jj-loss) 55%, var(--jj-edge)); background: color-mix(in srgb, var(--jj-loss) 12%, transparent); color: var(--jj-loss); }
.jj-tabs { display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--jj-edge); scrollbar-width: thin; }
.jj-tab { --jj-tab-accent: var(--jj-mint); min-height: 38px; flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--jj-text-muted); cursor: pointer; }
.jj-tab:nth-child(6n + 2) { --jj-tab-accent: var(--jj-tab-2); }
.jj-tab:nth-child(6n + 3) { --jj-tab-accent: var(--jj-tab-3); }
.jj-tab:nth-child(6n + 4) { --jj-tab-accent: var(--jj-tab-4); }
.jj-tab:nth-child(6n + 5) { --jj-tab-accent: var(--jj-tab-5); }
.jj-tab:nth-child(6n) { --jj-tab-accent: var(--jj-tab-6); }
.jj-tab:hover, .jj-tab[aria-selected="true"] { border-bottom-color: var(--jj-tab-accent); background: color-mix(in srgb, var(--jj-tab-accent) 9%, transparent); color: var(--jj-tab-accent); }
.jj-coin { --jj-coin-accent: var(--jj-cyan); display: inline-flex; min-height: 24px; align-items: center; border: 1px solid color-mix(in srgb, var(--jj-coin-accent) 55%, var(--jj-edge)); border-radius: var(--jj-radius-sm); padding: 0 0.55rem; background: color-mix(in srgb, var(--jj-coin-accent) 13%, transparent); color: var(--jj-coin-accent); font: 700 0.7rem var(--jj-font-mono); }
[data-coin="BNB"] { --jj-coin-accent: var(--jj-coin-bnb); } [data-coin="BTC"] { --jj-coin-accent: var(--jj-coin-btc); } [data-coin="ETH"] { --jj-coin-accent: var(--jj-coin-eth); }
[data-coin="MNT"] { --jj-coin-accent: var(--jj-coin-mnt); } [data-coin="DOGE"] { --jj-coin-accent: var(--jj-coin-doge); } [data-coin="XRP"] { --jj-coin-accent: var(--jj-coin-xrp); } [data-coin="SOL"] { --jj-coin-accent: var(--jj-coin-sol); }
[data-coin="XAU"] { --jj-coin-accent: var(--jj-coin-xau); } [data-coin="XAG"] { --jj-coin-accent: var(--jj-coin-xag); } [data-coin="CL"] { --jj-coin-accent: var(--jj-coin-cl); } [data-coin="BZ"] { --jj-coin-accent: var(--jj-coin-bz); } [data-coin="XAUT"] { --jj-coin-accent: var(--jj-coin-xaut); } [data-coin="HYPE"] { --jj-coin-accent: var(--jj-coin-hype); }

/* Premium is deliberately richer and more colourful than Dark across every existing shell. */
:root[data-theme="premium"] :is(.tape-shell, .options-shell, .monitor-shell) { background: transparent; }
:root[data-theme="premium"] :is(.panel, .tape-chart-panel, .tape-side-panel, .tape-header, .control-strip, .freshness-cell, .metric) { border-color: color-mix(in srgb, var(--jj-ai) 26%, var(--jj-edge)); background-image: linear-gradient(145deg, rgba(182, 156, 255, 0.075), rgba(232, 193, 93, 0.045)); box-shadow: var(--jj-shadow-sm), inset 0 1px rgba(255, 255, 255, 0.035); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab) { --jj-control-accent: var(--jj-tab-1); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab):nth-child(6n + 2) { --jj-control-accent: var(--jj-tab-2); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab):nth-child(6n + 3) { --jj-control-accent: var(--jj-tab-3); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab):nth-child(6n + 4) { --jj-control-accent: var(--jj-tab-4); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab):nth-child(6n + 5) { --jj-control-accent: var(--jj-tab-5); }
:root[data-theme="premium"] :is(.view-tabs button, .curve-toolbar button, .tape-tab):nth-child(6n) { --jj-control-accent: var(--jj-tab-6); }
:root[data-theme="premium"] :is(.view-tabs button.active, .curve-toolbar button.active, .tape-tab-active) { border-color: var(--jj-control-accent); background: color-mix(in srgb, var(--jj-control-accent) 13%, transparent); color: var(--jj-control-accent); box-shadow: inset 0 -2px var(--jj-control-accent), 0 0 20px color-mix(in srgb, var(--jj-control-accent) 12%, transparent); }
:root[data-theme="premium"] :is(.resolve-button, .scenario-panel > button, .specialist-body > button, .assistant-launch, button[type="submit"]) { border-color: var(--jj-button-primary-border); background: var(--jj-button-primary); color: var(--jj-button-primary-text); box-shadow: var(--jj-button-shadow); }
:root[data-theme="premium"] .tape-coin-btn { border-color: color-mix(in srgb, var(--jj-coin-accent) 22%, transparent); color: color-mix(in srgb, var(--jj-coin-accent) 72%, var(--jj-text-muted)); }
:root[data-theme="premium"] .tape-coin-btn:hover, :root[data-theme="premium"] .tape-coin-btn-active { border-color: var(--jj-coin-accent); background: color-mix(in srgb, var(--jj-coin-accent) 16%, transparent); color: var(--jj-coin-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--jj-coin-accent) 13%, transparent); }

/* Compatibility bridge for shared chart/tool primitives that predate semantic tokens. */
[class*="bg-slate-9"], [class*="bg-slate-8"] { background-color: var(--jj-panel) !important; }
[class*="bg-slate-7"] { background-color: var(--jj-overlay-strong) !important; }
[class*="border-slate-"] { border-color: var(--jj-edge) !important; }
[class*="text-slate-1"], [class*="text-slate-2"] { color: var(--jj-text-strong) !important; }
[class*="text-slate-3"], [class*="text-slate-4"], [class*="text-slate-5"], [class*="text-slate-6"] { color: var(--jj-text-muted) !important; }
[class*="text-cyan-"] { color: var(--jj-cyan) !important; }
[class*="text-emerald-"] { color: var(--jj-mint) !important; }
[class*="text-rose-"] { color: var(--jj-loss) !important; }
[class*="text-amber-"] { color: var(--jj-amber) !important; }
[class*="bg-cyan-"] { background-color: color-mix(in srgb, var(--jj-cyan) 12%, transparent) !important; }
[class*="bg-emerald-"] { background-color: color-mix(in srgb, var(--jj-mint) 12%, transparent) !important; }
[class*="bg-rose-"] { background-color: color-mix(in srgb, var(--jj-loss) 12%, transparent) !important; }
[class*="border-cyan-"] { border-color: color-mix(in srgb, var(--jj-cyan) 45%, var(--jj-edge)) !important; }
[class*="border-emerald-"] { border-color: color-mix(in srgb, var(--jj-mint) 45%, var(--jj-edge)) !important; }
[class*="border-rose-"] { border-color: color-mix(in srgb, var(--jj-loss) 45%, var(--jj-edge)) !important; }

.jj-specialist-chat { position: fixed; z-index: 80; right: 18px; bottom: 18px; font-family: var(--jj-font-body); }
.jj-chat-launch { min-height: 42px; border: 1px solid var(--jj-button-primary-border); border-radius: 999px; padding: 0 16px; background: var(--jj-button-primary); color: var(--jj-button-primary-text); box-shadow: var(--jj-button-shadow); font: 700 11px var(--jj-font-mono); cursor: pointer; }
.jj-chat-panel { position: absolute; right: 0; bottom: 52px; width: min(420px, calc(100vw - 24px)); display: grid; gap: 10px; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-lg); padding: 13px; background: var(--jj-panel); color: var(--jj-text); box-shadow: var(--jj-shadow-lg); }
.jj-chat-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--jj-edge); }
.jj-chat-panel > header div { display: grid; gap: 3px; }.jj-chat-panel > header small, .jj-chat-panel > footer { color: var(--jj-text-muted); font-size: 9px; }.jj-chat-panel > header button { border: 0; background: transparent; color: var(--jj-text-muted); font-size: 20px; cursor: pointer; }
.jj-chat-packet { border-left: 3px solid var(--jj-amber); padding: 7px 9px; background: var(--jj-surface-1); color: var(--jj-text-muted); font-size: 10px; }.jj-chat-packet[data-state="ready"] { border-color: var(--jj-mint); color: var(--jj-text); }.jj-chat-packet[data-state="unavailable"] { border-color: var(--jj-loss); color: var(--jj-loss); }
.jj-chat-panel label { display: grid; gap: 4px; color: var(--jj-text-muted); font: 700 9px var(--jj-font-mono); text-transform: uppercase; }.jj-chat-panel select, .jj-chat-panel textarea { width: 100%; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-sm); padding: 8px; background: var(--jj-field); color: var(--jj-text); font: 11px var(--jj-font-mono); }.jj-chat-panel textarea { min-height: 82px; resize: vertical; }
.jj-chat-actions { display: flex; gap: 7px; }.jj-chat-actions button { min-height: 36px; border: 1px solid var(--jj-tab-4); border-radius: var(--jj-radius-sm); padding: 7px 11px; background: color-mix(in srgb, var(--jj-tab-4) 14%, var(--jj-panel)); color: var(--jj-text); cursor: pointer; }.jj-chat-actions button:disabled { cursor: not-allowed; opacity: .5; }
.jj-chat-response { max-height: 210px; overflow: auto; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-sm); padding: 10px; background: var(--jj-surface-1); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }.jj-chat-response[data-state="refused"] { border-color: var(--jj-loss); color: var(--jj-loss); }
.jj-chat-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }.jj-chat-metadata > div { min-width: 0; border: 1px solid var(--jj-edge); border-radius: var(--jj-radius-sm); padding: 6px 8px; background: var(--jj-surface-1); }.jj-chat-metadata dt { color: var(--jj-text-muted); font: 700 8px var(--jj-font-mono); text-transform: uppercase; }.jj-chat-metadata dd { margin: 3px 0 0; color: var(--jj-text); font: 10px var(--jj-font-mono); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .jj-platform-bar { align-items: flex-start; flex-wrap: wrap; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .jj-product-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .jj-product-nav a, .jj-theme-switcher button, .jj-logout, .jj-button, .jj-tab { min-height: 44px; }
  .jj-platform-meta { width: 100%; margin-left: 0; justify-content: space-between; }
  .jj-auth-state { display: none; }
  .jj-specialist-chat { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}