/* ═══════════════════════════════════════════════════════════════════
   CHARMCAST · DASHBOARD V2.1
   Liquid Glass · OKLCH · Animated bg · Shine buttons · Density-scaled
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── 10% density reduction baseline. Everything spaced via --cc-density
      can be re-scaled by the customize drawer (compact .85 / cosy .95 / spacious 1.05). */
html { font-size: 14.4px; }   /* 90% of default 16px */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  color: #f5f5f7;
  background: #06070a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:root {
  /* DENSITY - 1.0 = comfy default; 0.9 = -10% (current); 0.85 = compact; 1.05 = roomy */
  --cc-density: 0.9;

  /* Theme accent - overridable per theme. Default is mono-white. */
  --cc-accent-h: 250;
  --cc-accent-c: 0.003;

  /* Color palette (built from accent)
     EYE-COMFORT REVISION
     - bg-0/1/2 raised slightly so the deepest void isn't true-black
       (true-black + bright text = bloom on OLED, halation on LCD)
     - fg dropped from 0.97 → 0.91; was a 16:1 contrast ratio against
       bg-1 which is fatigue territory; 0.91 sits at ~11:1, AAA but
       readable for hours
     - fg-2/3/4 nudged so the visual hierarchy stays intact
     - pos/neg saturation lowered (0.16/0.18 → 0.10/0.12) so green/red
       PnL doesn't burn into your retinas next to dim text */
  --cc-bg-0: oklch(0.085 var(--cc-accent-c) var(--cc-accent-h));
  --cc-bg-1: oklch(0.115 0.004 var(--cc-accent-h));
  --cc-bg-2: oklch(0.155 0.005 var(--cc-accent-h));
  --cc-fg:   oklch(0.91 0.003 var(--cc-accent-h));
  --cc-fg-2: oklch(0.90 0.003 var(--cc-accent-h) / 0.70);
  --cc-fg-3: oklch(0.90 0.003 var(--cc-accent-h) / 0.45);
  --cc-fg-4: oklch(0.90 0.003 var(--cc-accent-h) / 0.20);

  --cc-border-1: oklch(0.90 0.003 var(--cc-accent-h) / 0.06);
  --cc-border-2: oklch(0.90 0.003 var(--cc-accent-h) / 0.11);
  --cc-border-3: oklch(0.90 0.003 var(--cc-accent-h) / 0.18);

  --cc-glass:   oklch(0.17 0.005 var(--cc-accent-h) / 0.55);
  --cc-glass-2: oklch(0.19 0.005 var(--cc-accent-h) / 0.75);

  --cc-pos: oklch(0.80 0.10 145);
  --cc-pos-bg: oklch(0.65 0.12 145 / 0.14);
  --cc-neg: oklch(0.78 0.12 25);
  --cc-neg-bg: oklch(0.55 0.13 25 / 0.14);
  --cc-warn: oklch(0.84 0.09 75);
  --cc-info: oklch(0.78 0.10 var(--cc-accent-h));

  --cc-mono: 'SF Mono', 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Sizes scale with density */
  --top-h:    calc(56px * var(--cc-density));
  --strip-h:  calc(50px * var(--cc-density));
  /* Sidebar: thin icon rail by default (52 px), auto-expands to full
     width on hover as a floating overlay. Grid reserves only the
     collapsed width so there's no layout shift on expand. */
  --side-w:           calc(52px  * var(--cc-density));
  --side-w-expanded:  calc(216px * var(--cc-density));
  --rail-w:   calc(290px * var(--cc-density));
  --pad-card: calc(16px * var(--cc-density));
  --pad-cell: calc(10px * var(--cc-density));
  --gap:      calc(13px * var(--cc-density));
  --radius:   calc(13px * var(--cc-density));
  --radius-sm:calc(7px * var(--cc-density));

  /* Glass intensity - overridable in customize drawer */
  --cc-blur: 18px;
  --cc-saturate: 1.05;

  /* Animation toggle (set animations: 0 to disable) */
  --cc-anim: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   FULL THEMES - palette + bg + animated atmosphere per theme
   ═══════════════════════════════════════════════════════════════════
   Each [data-theme] override does FOUR things:
     1. CSS-var palette (bg ramp, accent hue/chroma, fg tones)
     2. Semantic colors (pos/neg/warn) tuned for the palette
     3. A body::before atmospheric layer (animated gradients, scan
        lines, particles - defined per-theme below)
     4. A glow tint via --cc-glow-rgb for accent effects
   Themes degrade gracefully when prefers-reduced-motion is set:
     all atmospheric animations slow to 0.001s.
   ═══════════════════════════════════════════════════════════════════ */

/* Atmosphere layer - full-screen pseudo-element behind everything.
   Each theme defines its own background/animation; default = none. */
body[data-theme]::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
body[data-theme]:not([data-theme="default"])::before { opacity: 1; }

/* ───────── 1 · MIDNIGHT - aurora ribbons over deep indigo ───────── */
body[data-theme="midnight"] {
  --cc-accent-h: 270; --cc-accent-c: 0.030;
  --cc-bg-0: oklch(0.040 0.018 268);
  --cc-bg-1: oklch(0.075 0.020 268);
  --cc-bg-2: oklch(0.120 0.018 268);
  --cc-pos:  oklch(0.82 0.14 160);
  --cc-neg:  oklch(0.78 0.13 18);
  --cc-warn: oklch(0.85 0.12 70);
}
body[data-theme="midnight"]::before {
  background:
    radial-gradient(ellipse at 20% 10%, oklch(0.45 0.18 280 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 30%, oklch(0.50 0.20 200 / 0.40) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 90%, oklch(0.40 0.15 320 / 0.45) 0%, transparent 55%);
  filter: blur(40px);
  animation: cc-aurora 28s ease-in-out infinite alternate;
}
@keyframes cc-aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(40px, -30px) rotate(2deg) scale(1.1); }
  100% { transform: translate(-30px, 20px) rotate(-1deg) scale(0.95); }
}

/* ───────── 2 · SUNSET - warm gradient with gold pulse ──────────── */
body[data-theme="sunset"] {
  --cc-accent-h: 25;  --cc-accent-c: 0.040;
  --cc-bg-0: oklch(0.060 0.025 25);
  --cc-bg-1: oklch(0.105 0.030 18);
  --cc-bg-2: oklch(0.155 0.030 12);
  --cc-pos:  oklch(0.82 0.14 145);
  --cc-neg:  oklch(0.75 0.18 15);
  --cc-warn: oklch(0.85 0.16 60);
}
body[data-theme="sunset"]::before {
  background:
    linear-gradient(180deg,
      oklch(0.18 0.08 25)  0%,
      oklch(0.10 0.06 12)  40%,
      oklch(0.06 0.04 350) 100%),
    radial-gradient(circle at 50% 100%,
      oklch(0.55 0.20 35 / 0.50) 0%,
      transparent 60%);
  background-blend-mode: screen;
  animation: cc-sunset-pulse 12s ease-in-out infinite;
}
@keyframes cc-sunset-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

/* ───────── 3 · BLOSSOM - soft pinks, drifting petals ───────────── */
body[data-theme="blossom"] {
  --cc-accent-h: 340; --cc-accent-c: 0.022;
  --cc-bg-0: oklch(0.070 0.018 340);
  --cc-bg-1: oklch(0.115 0.020 340);
  --cc-bg-2: oklch(0.165 0.020 340);
  --cc-pos:  oklch(0.84 0.10 145);
  --cc-neg:  oklch(0.78 0.14 12);
  --cc-warn: oklch(0.86 0.12 60);
}
body[data-theme="blossom"]::before {
  background:
    radial-gradient(circle at 15% 25%, oklch(0.55 0.18 350 / 0.35) 0%, transparent 35%),
    radial-gradient(circle at 85% 70%, oklch(0.50 0.16 320 / 0.30) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, oklch(0.40 0.10 340 / 0.20) 0%, transparent 60%);
  filter: blur(20px);
  animation: cc-drift 40s linear infinite;
}
@keyframes cc-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-20px, 30px); }
}

/* ───────── 4 · CYBER - terminal scan lines, neon cyan/magenta ──── */
body[data-theme="cyber"] {
  --cc-accent-h: 195; --cc-accent-c: 0.060;
  --cc-bg-0: oklch(0.045 0.012 220);
  --cc-bg-1: oklch(0.080 0.015 220);
  --cc-bg-2: oklch(0.115 0.018 220);
  --cc-fg:   oklch(0.92 0.040 195);
  --cc-pos:  oklch(0.80 0.20 145);
  --cc-neg:  oklch(0.75 0.22 25);
  --cc-warn: oklch(0.82 0.18 320);
}
body[data-theme="cyber"]::before {
  background:
    linear-gradient(180deg,
      oklch(0.06 0.04 220) 0%,
      oklch(0.04 0.03 280) 100%),
    repeating-linear-gradient(0deg,
      oklch(0.95 0.05 195 / 0.04) 0px,
      oklch(0.95 0.05 195 / 0.04) 1px,
      transparent 1px,
      transparent 3px);
  animation: cc-cyber-scan 6s linear infinite;
}
@keyframes cc-cyber-scan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 60px; }
}
/* Subtle scan-line sweep across the screen */
body[data-theme="cyber"]::after {
  content: '';
  position: fixed; left: 0; right: 0;
  height: 80px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(0.95 0.20 195 / 0.06) 50%,
    transparent 100%);
  animation: cc-cyber-sweep 8s linear infinite;
}
@keyframes cc-cyber-sweep {
  0%   { top: -80px; }
  100% { top: 100vh; }
}

/* ───────── 5 · FOREST - deep evergreen, ambient drift ──────────── */
body[data-theme="forest"] {
  --cc-accent-h: 145; --cc-accent-c: 0.025;
  --cc-bg-0: oklch(0.055 0.015 150);
  --cc-bg-1: oklch(0.095 0.018 150);
  --cc-bg-2: oklch(0.140 0.020 150);
  --cc-pos:  oklch(0.82 0.14 145);
  --cc-neg:  oklch(0.76 0.13 25);
  --cc-warn: oklch(0.84 0.12 75);
}
body[data-theme="forest"]::before {
  background:
    radial-gradient(ellipse at 30% 20%, oklch(0.30 0.12 145 / 0.40) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, oklch(0.25 0.10 165 / 0.35) 0%, transparent 55%);
  filter: blur(30px);
  animation: cc-forest-breath 18s ease-in-out infinite alternate;
}
@keyframes cc-forest-breath {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-10px, 8px); }
}

/* ───────── 6 · OCEAN - slow rippling deep blue ─────────────────── */
body[data-theme="ocean"] {
  --cc-accent-h: 220; --cc-accent-c: 0.030;
  --cc-bg-0: oklch(0.055 0.020 230);
  --cc-bg-1: oklch(0.095 0.025 225);
  --cc-bg-2: oklch(0.140 0.025 220);
  --cc-pos:  oklch(0.82 0.14 165);
  --cc-neg:  oklch(0.76 0.14 18);
  --cc-warn: oklch(0.84 0.12 70);
}
body[data-theme="ocean"]::before {
  background:
    radial-gradient(ellipse at 25% 30%, oklch(0.30 0.18 215 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 70%, oklch(0.25 0.20 195 / 0.45) 0%, transparent 50%),
    linear-gradient(180deg, transparent 0%, oklch(0.04 0.02 240) 100%);
  filter: blur(50px);
  animation: cc-ocean-ripple 25s ease-in-out infinite alternate;
}
@keyframes cc-ocean-ripple {
  0%   { transform: scale(1) translate(0, 0); filter: blur(50px); }
  50%  { transform: scale(1.15) translate(20px, -10px); filter: blur(60px); }
  100% { transform: scale(0.95) translate(-15px, 12px); filter: blur(45px); }
}

/* ───────── 7 · EMBER - flickering warm orange/red ──────────────── */
body[data-theme="ember"] {
  --cc-accent-h: 25;  --cc-accent-c: 0.050;
  --cc-bg-0: oklch(0.050 0.025 25);
  --cc-bg-1: oklch(0.090 0.030 22);
  --cc-bg-2: oklch(0.130 0.030 20);
  --cc-pos:  oklch(0.84 0.12 145);
  --cc-neg:  oklch(0.74 0.20 18);
  --cc-warn: oklch(0.86 0.18 50);
}
body[data-theme="ember"]::before {
  background:
    radial-gradient(circle at 30% 90%, oklch(0.50 0.25 25 / 0.55) 0%, transparent 40%),
    radial-gradient(circle at 70% 100%, oklch(0.45 0.22 35 / 0.45) 0%, transparent 45%),
    linear-gradient(180deg, transparent 0%, oklch(0.05 0.04 15) 100%);
  filter: blur(30px);
  animation: cc-ember-flicker 4.5s ease-in-out infinite;
}
@keyframes cc-ember-flicker {
  0%, 100% { opacity: 1; transform: translateY(0); }
  20%      { opacity: 0.92; transform: translateY(-2px); }
  40%      { opacity: 0.98; transform: translateY(1px); }
  60%      { opacity: 0.88; transform: translateY(-3px); }
  80%      { opacity: 0.95; transform: translateY(2px); }
}

/* ───────── 8 · FROST - icy crystalline shimmer ─────────────────── */
body[data-theme="frost"] {
  --cc-accent-h: 200; --cc-accent-c: 0.012;
  --cc-bg-0: oklch(0.075 0.012 220);
  --cc-bg-1: oklch(0.125 0.014 215);
  --cc-bg-2: oklch(0.175 0.014 210);
  --cc-fg:   oklch(0.94 0.008 215);
  --cc-pos:  oklch(0.84 0.12 165);
  --cc-neg:  oklch(0.78 0.13 22);
  --cc-warn: oklch(0.85 0.11 70);
}
body[data-theme="frost"]::before {
  background:
    radial-gradient(ellipse at 50% 0%, oklch(0.55 0.10 200 / 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, oklch(0.50 0.08 215 / 0.30) 0%, transparent 45%),
    linear-gradient(135deg, oklch(0.20 0.04 220 / 0.4) 0%, transparent 60%);
  filter: blur(35px);
  animation: cc-frost-shimmer 14s ease-in-out infinite alternate;
}
@keyframes cc-frost-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.85; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(-6px); }
}

/* ───────── 9 · VAPOR - synthwave grid + magenta/cyan ───────────── */
body[data-theme="vapor"] {
  --cc-accent-h: 320; --cc-accent-c: 0.060;
  --cc-bg-0: oklch(0.045 0.020 290);
  --cc-bg-1: oklch(0.085 0.025 290);
  --cc-bg-2: oklch(0.130 0.030 295);
  --cc-pos:  oklch(0.82 0.16 195);
  --cc-neg:  oklch(0.78 0.20 320);
  --cc-warn: oklch(0.84 0.14 60);
}
body[data-theme="vapor"]::before {
  background:
    linear-gradient(180deg,
      oklch(0.10 0.06 290) 0%,
      oklch(0.05 0.04 320) 60%,
      oklch(0.08 0.10 350) 100%),
    repeating-linear-gradient(90deg,
      oklch(0.95 0.20 320 / 0.05) 0px,
      oklch(0.95 0.20 320 / 0.05) 1px,
      transparent 1px,
      transparent 60px),
    repeating-linear-gradient(0deg,
      oklch(0.95 0.20 195 / 0.05) 0px,
      oklch(0.95 0.20 195 / 0.05) 1px,
      transparent 1px,
      transparent 60px);
}
body[data-theme="vapor"]::after {
  content: '';
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 50vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(0.45 0.20 320 / 0.40) 0%, transparent 60%);
  animation: cc-vapor-glow 10s ease-in-out infinite alternate;
}
@keyframes cc-vapor-glow {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.05); }
}

/* ───────── 10 · SLATE - clean monochrome, no atmosphere ─────────── */
body[data-theme="slate"] {
  --cc-accent-h: 250; --cc-accent-c: 0.004;
  --cc-bg-0: oklch(0.090 0.004 250);
  --cc-bg-1: oklch(0.130 0.004 250);
  --cc-bg-2: oklch(0.175 0.004 250);
  --cc-fg:   oklch(0.93 0.002 250);
  --cc-pos:  oklch(0.84 0.10 150);
  --cc-neg:  oklch(0.76 0.12 25);
  --cc-warn: oklch(0.85 0.10 75);
}
body[data-theme="slate"]::before {
  /* Intentionally minimal - slate is the calm one */
  background: radial-gradient(ellipse at 50% 0%, oklch(0.20 0.005 250 / 0.5) 0%, transparent 70%);
}

/* Home-tab positioning note - clarifies that CharmCast is a tool, not
   a signals service. Dismissable; remembered per-user in localStorage. */
.cc-positioning-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  position: relative;
  background: linear-gradient(135deg,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.06),
    oklch(0.95 0.003 var(--cc-accent-h) / 0.02));
  border: 1px solid var(--cc-border-2);
}
.cc-positioning-note.is-dismissed { display: none; }
.cc-positioning-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  color: var(--cc-fg);
}
.cc-positioning-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.cc-positioning-body { flex: 1; min-width: 0; }
.cc-positioning-title {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--cc-fg);
  margin-bottom: 4px;
}
.cc-positioning-title b {
  color: var(--cc-fg);
  font-weight: 700;
  border-bottom: 1px solid var(--cc-fg-3);
}
.cc-positioning-sub {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cc-fg-2);
  letter-spacing: 0;
}
.cc-positioning-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  width: 24px; height: 24px;
  font-size: 18px; line-height: 1;
  color: var(--cc-fg-3); cursor: pointer;
  border-radius: 4px;
  transition: background 0.18s, color 0.18s;
}
.cc-positioning-close:hover {
  color: var(--cc-fg);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   TUTORIAL - first-run product tour
   Backdrop blur + spotlight cutout + liquid-glass tooltip card.
   Powered by /lib/ui/tutorial.js.
   ═══════════════════════════════════════════════════════════════════ */
.cc-tutorial-root {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
}
body.cc-tutorial-active { overflow: hidden; }

/* Layer 1 - invisible click-catcher behind the spotlight. The spotlight
   itself uses a 9999px box-shadow to dim everything outside its
   rectangle, so we DON'T also apply backdrop-filter here - that would
   blur the cutout area along with the rest. Keeping just the click
   target so users can tap the dimmed area to advance the tour. */
.cc-tutorial-blur {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  animation: cc-tut-fade-in 280ms ease both;
}
@keyframes cc-tut-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Layer 2 - spotlight. The clever bit: a small box with a HUGE box-
   shadow effectively dims everything OUTSIDE its rectangle while
   leaving the inside bright and crisp. Animated on every step
   transition for a smooth glide between targets. */
.cc-tutorial-spotlight {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  /* Massive shadow = the dim layer for everything outside the rect.
     0.78 = strong dim; the highlighted element stays fully bright/crisp
     because it sits in the rectangle's transparent interior. */
  box-shadow:
    0 0 0 9999px oklch(0.04 0.005 var(--cc-accent-h, 250) / 0.78),
    0 0 0 1px var(--cc-fg, oklch(0.93 0.003 250)) inset,
    0 0 32px 4px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.55),
    0 0 80px 10px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.30);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width    420ms cubic-bezier(0.22, 1, 0.36, 1),
    height   420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity  220ms ease;
}
.cc-tutorial-spotlight.is-visible { opacity: 1; }
/* Subtle pulse so the eye locks on */
.cc-tutorial-spotlight.is-visible {
  animation: cc-tut-pulse 2.4s ease-in-out infinite;
}
@keyframes cc-tut-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px oklch(0.04 0.005 var(--cc-accent-h, 250) / 0.78),
      0 0 0 1px var(--cc-fg, oklch(0.93 0.003 250)) inset,
      0 0 32px 4px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.55),
      0 0 80px 10px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.30);
  }
  50% {
    box-shadow:
      0 0 0 9999px oklch(0.04 0.005 var(--cc-accent-h, 250) / 0.78),
      0 0 0 1px var(--cc-fg, oklch(0.93 0.003 250)) inset,
      0 0 48px 8px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.75),
      0 0 120px 18px oklch(0.93 0.003 var(--cc-accent-h, 250) / 0.42);
  }
}

/* Layer 3 - the liquid-glass tooltip card */
.cc-tutorial-card {
  position: absolute; top: 0; left: 0;
  width: 360px; max-width: calc(100vw - 32px);
  padding: 18px 18px 14px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      oklch(0.20 0.008 var(--cc-accent-h, 250) / 0.78),
      oklch(0.13 0.005 var(--cc-accent-h, 250) / 0.78));
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.18);
  box-shadow:
    0 24px 70px -16px oklch(0 0 0 / 0.65),
    inset 0 0 0 1px oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.04),
    inset 0 1px 0 oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.08);
  pointer-events: auto;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
  animation: cc-tut-card-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
@keyframes cc-tut-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; }
}
/* Centered welcome state */
.cc-tutorial-card.is-centered {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 440px;
  padding: 28px 28px 22px;
}

/* Step counter chip */
.cc-tutorial-step-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.22em;
  color: oklch(0.72 0.005 var(--cc-accent-h, 250));
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cc-tutorial-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: oklch(0.95 0.003 var(--cc-accent-h, 250));
  margin-bottom: 6px;
  line-height: 1.25;
}
.cc-tutorial-card.is-centered .cc-tutorial-title { font-size: 22px; }
.cc-tutorial-body {
  font-size: 13px; line-height: 1.55;
  color: oklch(0.86 0.003 var(--cc-accent-h, 250));
  margin-bottom: 14px;
}

/* Controls row */
.cc-tutorial-controls {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.10);
}
.cc-tutorial-skip {
  background: none; border: none;
  color: oklch(0.65 0.005 var(--cc-accent-h, 250));
  font-family: inherit; font-size: 12px;
  cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.18s, background 0.18s;
}
.cc-tutorial-skip:hover {
  color: oklch(0.92 0.003 var(--cc-accent-h, 250));
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.05);
}
.cc-tutorial-progress {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}
.cc-tutorial-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.16);
  transition: background 0.22s, width 0.22s;
}
.cc-tutorial-dot.is-done   { background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.40); }
.cc-tutorial-dot.is-active {
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.95);
  width: 18px; border-radius: 3px;
}
.cc-tutorial-nav { display: flex; gap: 6px; }
.cc-tutorial-prev, .cc-tutorial-next {
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.06);
  border: 1px solid oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.14);
  color: oklch(0.92 0.003 var(--cc-accent-h, 250));
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.cc-tutorial-prev:hover, .cc-tutorial-next:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.12);
  border-color: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.30);
  transform: translateY(-1px);
}
.cc-tutorial-prev:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.cc-tutorial-next {
  background: oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.85);
  color: oklch(0.10 0.005 var(--cc-accent-h, 250));
  border-color: oklch(0.95 0.003 var(--cc-accent-h, 250));
  font-weight: 600;
}

/* Arrow pointing at the spotlight (CSS triangle via border trick) */
.cc-tutorial-arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: linear-gradient(135deg,
    oklch(0.20 0.008 var(--cc-accent-h, 250) / 0.78),
    oklch(0.13 0.005 var(--cc-accent-h, 250) / 0.78));
  border-left: 1px solid oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.18);
  border-top: 1px solid oklch(0.95 0.003 var(--cc-accent-h, 250) / 0.18);
  pointer-events: none;
}
.cc-tutorial-card.is-bottom .cc-tutorial-arrow {
  top: -8px; left: var(--arrow-pos, 30px);
  transform: rotate(45deg);
}
.cc-tutorial-card.is-top .cc-tutorial-arrow {
  bottom: -8px; left: var(--arrow-pos, 30px);
  transform: rotate(225deg);
}
.cc-tutorial-card.is-right .cc-tutorial-arrow {
  left: -8px; top: var(--arrow-pos, 30px);
  transform: rotate(-45deg);
}
.cc-tutorial-card.is-left .cc-tutorial-arrow {
  right: -8px; top: var(--arrow-pos, 30px);
  transform: rotate(135deg);
}
.cc-tutorial-card.is-centered .cc-tutorial-arrow { display: none; }

/* Reduced-motion: kill the pulse + slow transitions */
@media (prefers-reduced-motion: reduce) {
  .cc-tutorial-spotlight.is-visible { animation: none; }
  .cc-tutorial-card,
  .cc-tutorial-spotlight { transition-duration: 0.001s; animation-duration: 0.001s; }
}

/* Corner watermark logo - sits in bottom-right above the walls ticker.
   Subtle (40% opacity, no animation) so it never competes with the
   data; rises to 80% on hover for users who want to click through. */
.cc-corner-logo {
  position: fixed;
  bottom: 42px;            /* above the 32 px walls-ticker + breathing room */
  right: 14px;
  width: 36px; height: 36px;
  z-index: 40;
  pointer-events: auto;
  opacity: 0.40;
  transition: opacity 240ms ease, transform 220ms ease;
  filter: drop-shadow(0 0 8px oklch(0.95 0.003 var(--cc-accent-h) / 0.25));
}
.cc-corner-logo:hover { opacity: 0.85; transform: scale(1.08); }
.cc-corner-logo img { width: 100%; height: 100%; display: block; }
@media (max-width: 800px) { .cc-corner-logo { display: none; } }

/* ─── THEME DECORATIONS layer ─────────────────────────────────────────
   Single fixed full-screen container holding 12 generic particle slots
   (.cc-fx-p) + two big-shape slots (.cc-fx-sun, .cc-fx-grid). Each
   theme's CSS below decides which particles are visible, what they
   look like, and how they animate. Default = invisible everywhere. */
.cc-theme-fx {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cc-theme-fx .cc-fx-p {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.cc-theme-fx .cc-fx-big {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

/* ─── 1 · MIDNIGHT - twinkling stars ────────────────────────────────
   12 small white-blue dots at scattered positions, each pulsing on
   its own staggered cadence. */
body[data-theme="midnight"] .cc-fx-p {
  opacity: 1;
  width: 2px; height: 2px; border-radius: 50%;
  background: oklch(0.95 0.05 220);
  box-shadow: 0 0 4px oklch(0.85 0.10 220 / 0.8),
              0 0 8px oklch(0.65 0.12 280 / 0.5);
  animation: cc-fx-twinkle 4s ease-in-out infinite;
  animation-delay: calc(var(--n) * -0.37s);
}
body[data-theme="midnight"] .cc-fx-p:nth-child(1)  { top:  8%; left: 12%; }
body[data-theme="midnight"] .cc-fx-p:nth-child(2)  { top: 18%; left: 78%; width: 3px; height: 3px; }
body[data-theme="midnight"] .cc-fx-p:nth-child(3)  { top: 25%; left: 45%; }
body[data-theme="midnight"] .cc-fx-p:nth-child(4)  { top: 38%; left: 22%; width: 2.5px; height: 2.5px; }
body[data-theme="midnight"] .cc-fx-p:nth-child(5)  { top: 55%; left: 88%; }
body[data-theme="midnight"] .cc-fx-p:nth-child(6)  { top: 62%; left: 35%; }
body[data-theme="midnight"] .cc-fx-p:nth-child(7)  { top: 14%; left: 92%; width: 3px; height: 3px; }
body[data-theme="midnight"] .cc-fx-p:nth-child(8)  { top: 72%; left: 8%;  }
body[data-theme="midnight"] .cc-fx-p:nth-child(9)  { top: 82%; left: 62%; width: 2.5px; height: 2.5px; }
body[data-theme="midnight"] .cc-fx-p:nth-child(10) { top: 28%; left: 5%;  }
body[data-theme="midnight"] .cc-fx-p:nth-child(11) { top: 48%; left: 60%; }
body[data-theme="midnight"] .cc-fx-p:nth-child(12) { top: 90%; left: 30%; width: 3px; height: 3px; }
@keyframes cc-fx-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.4); }
}

/* ─── 2 · SUNSET - big sun in upper-right + soft rays ──────────────
   Single big radial-glow circle anchored top-right. */
body[data-theme="sunset"] .cc-fx-sun {
  opacity: 0.9;
  top: 5%; right: 6%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(circle, oklch(0.85 0.20 60) 0%, oklch(0.70 0.22 30) 30%, transparent 70%);
  filter: blur(2px);
  box-shadow:
    0 0 80px 20px oklch(0.65 0.20 25 / 0.45),
    0 0 200px 40px oklch(0.50 0.20 18 / 0.30);
  animation: cc-sun-pulse 8s ease-in-out infinite;
}
@keyframes cc-sun-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 80px 20px oklch(0.65 0.20 25 / 0.45), 0 0 200px 40px oklch(0.50 0.20 18 / 0.30); }
  50%      { transform: scale(1.04); box-shadow: 0 0 100px 28px oklch(0.65 0.20 25 / 0.55), 0 0 240px 50px oklch(0.50 0.20 18 / 0.40); }
}

/* ─── 3 · BLOSSOM - drifting petals ───────────────────────────────
   12 small petal shapes (rotated rounded rects) drifting from top to
   bottom on randomized timings + horizontal sway. */
body[data-theme="blossom"] .cc-fx-p {
  opacity: 1;
  width: 8px; height: 12px;
  background: oklch(0.75 0.18 350 / 0.7);
  border-radius: 0 80% 0 80%;
  filter: blur(0.5px);
  animation: cc-petal-fall 14s linear infinite;
  animation-delay: calc(var(--n) * -1.2s);
}
body[data-theme="blossom"] .cc-fx-p:nth-child(2n) { background: oklch(0.78 0.16 320 / 0.6); }
body[data-theme="blossom"] .cc-fx-p:nth-child(3n) { background: oklch(0.80 0.14 340 / 0.5); }
body[data-theme="blossom"] .cc-fx-p:nth-child(1)  { left:  5%; }
body[data-theme="blossom"] .cc-fx-p:nth-child(2)  { left: 15%; animation-duration: 18s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(3)  { left: 25%; }
body[data-theme="blossom"] .cc-fx-p:nth-child(4)  { left: 35%; animation-duration: 16s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(5)  { left: 45%; }
body[data-theme="blossom"] .cc-fx-p:nth-child(6)  { left: 55%; animation-duration: 19s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(7)  { left: 65%; }
body[data-theme="blossom"] .cc-fx-p:nth-child(8)  { left: 75%; animation-duration: 17s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(9)  { left: 85%; }
body[data-theme="blossom"] .cc-fx-p:nth-child(10) { left: 92%; animation-duration: 15s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(11) { left: 50%; animation-duration: 20s; }
body[data-theme="blossom"] .cc-fx-p:nth-child(12) { left: 30%; animation-duration: 13s; }
@keyframes cc-petal-fall {
  0%   { top: -5%;  transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(20px) rotate(120deg); }
  50%  { transform: translateX(-15px) rotate(240deg); }
  75%  { transform: translateX(25px) rotate(360deg); }
  100% { top: 105%; transform: translateX(-10px) rotate(480deg); }
}

/* ─── 4 · CYBER - vertical data-rain ─────────────────────────────
   Tall thin streaks falling at staggered speeds, like Matrix code rain. */
body[data-theme="cyber"] .cc-fx-p {
  opacity: 1;
  width: 1px; height: 60px;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(0.85 0.20 195 / 0.0) 0%,
    oklch(0.85 0.20 195 / 0.7) 80%,
    oklch(0.95 0.25 195 / 1.0) 100%);
  box-shadow: 0 0 6px oklch(0.95 0.25 195 / 0.6);
  animation: cc-data-rain 5s linear infinite;
  animation-delay: calc(var(--n) * -0.4s);
}
body[data-theme="cyber"] .cc-fx-p:nth-child(1)  { left:  6%; animation-duration: 4s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(2)  { left: 14%; animation-duration: 6s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(3)  { left: 22%; animation-duration: 5s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(4)  { left: 30%; animation-duration: 7s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(5)  { left: 38%; animation-duration: 4.5s;}
body[data-theme="cyber"] .cc-fx-p:nth-child(6)  { left: 46%; animation-duration: 5.5s;}
body[data-theme="cyber"] .cc-fx-p:nth-child(7)  { left: 54%; animation-duration: 6.5s;}
body[data-theme="cyber"] .cc-fx-p:nth-child(8)  { left: 62%; animation-duration: 5s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(9)  { left: 70%; animation-duration: 4.5s;}
body[data-theme="cyber"] .cc-fx-p:nth-child(10) { left: 78%; animation-duration: 6s;  }
body[data-theme="cyber"] .cc-fx-p:nth-child(11) { left: 86%; animation-duration: 5.5s;}
body[data-theme="cyber"] .cc-fx-p:nth-child(12) { left: 94%; animation-duration: 4s;  }
@keyframes cc-data-rain {
  0%   { top: -10%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 105%;  opacity: 0; }
}

/* ─── 5 · FOREST - slow-drifting leaves ────────────────────────── */
body[data-theme="forest"] .cc-fx-p {
  opacity: 1;
  width: 10px; height: 6px;
  background: oklch(0.55 0.16 145 / 0.6);
  border-radius: 0 50% 0 50%;
  animation: cc-leaf-drift 22s linear infinite;
  animation-delay: calc(var(--n) * -1.8s);
}
body[data-theme="forest"] .cc-fx-p:nth-child(2n) { background: oklch(0.50 0.12 130 / 0.5); }
body[data-theme="forest"] .cc-fx-p:nth-child(3n) { background: oklch(0.45 0.18 165 / 0.55); }
body[data-theme="forest"] .cc-fx-p:nth-child(1)  { left: 10%; }
body[data-theme="forest"] .cc-fx-p:nth-child(2)  { left: 20%; animation-duration: 25s; }
body[data-theme="forest"] .cc-fx-p:nth-child(3)  { left: 30%; }
body[data-theme="forest"] .cc-fx-p:nth-child(4)  { left: 42%; animation-duration: 28s; }
body[data-theme="forest"] .cc-fx-p:nth-child(5)  { left: 52%; }
body[data-theme="forest"] .cc-fx-p:nth-child(6)  { left: 62%; animation-duration: 24s; }
body[data-theme="forest"] .cc-fx-p:nth-child(7)  { left: 72%; }
body[data-theme="forest"] .cc-fx-p:nth-child(8)  { left: 82%; animation-duration: 26s; }
body[data-theme="forest"] .cc-fx-p:nth-child(9)  { left: 92%; }
body[data-theme="forest"] .cc-fx-p:nth-child(10) { left:  5%; animation-duration: 23s; }
body[data-theme="forest"] .cc-fx-p:nth-child(11) { left: 38%; animation-duration: 30s; }
body[data-theme="forest"] .cc-fx-p:nth-child(12) { left: 68%; animation-duration: 27s; }
@keyframes cc-leaf-drift {
  0%   { top: -5%;  transform: translateX(0)    rotate(0deg); }
  33%  { transform: translateX(40px)  rotate(180deg); }
  66%  { transform: translateX(-30px) rotate(360deg); }
  100% { top: 105%; transform: translateX(20px)  rotate(540deg); }
}

/* ─── 6 · OCEAN - rising bubbles ────────────────────────────────── */
body[data-theme="ocean"] .cc-fx-p {
  opacity: 1;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: oklch(0.70 0.10 215 / 0.4);
  box-shadow: inset -2px -2px 4px oklch(0.95 0.05 200 / 0.4),
              0 0 6px oklch(0.65 0.15 215 / 0.5);
  animation: cc-bubble-rise 9s ease-in infinite;
  animation-delay: calc(var(--n) * -0.7s);
}
body[data-theme="ocean"] .cc-fx-p:nth-child(2n) { width: 6px;  height: 6px;  animation-duration: 11s; }
body[data-theme="ocean"] .cc-fx-p:nth-child(3n) { width: 10px; height: 10px; animation-duration: 8s;  }
body[data-theme="ocean"] .cc-fx-p:nth-child(1)  { left:  7%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(2)  { left: 17%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(3)  { left: 27%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(4)  { left: 37%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(5)  { left: 47%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(6)  { left: 57%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(7)  { left: 67%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(8)  { left: 77%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(9)  { left: 87%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(10) { left: 95%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(11) { left:  3%; }
body[data-theme="ocean"] .cc-fx-p:nth-child(12) { left: 50%; }
@keyframes cc-bubble-rise {
  0%   { top: 105%; transform: translateX(0)    scale(0.6); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateX(15px) scale(1); }
  90%  { opacity: 0.6; }
  100% { top: -5%;  transform: translateX(-10px) scale(1.1); opacity: 0; }
}

/* ─── 7 · EMBER - floating sparks ───────────────────────────────── */
body[data-theme="ember"] .cc-fx-p {
  opacity: 1;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: oklch(0.85 0.25 35);
  box-shadow: 0 0 6px oklch(0.85 0.25 35 / 0.9),
              0 0 12px oklch(0.70 0.22 25 / 0.6);
  animation: cc-spark-rise 5s ease-out infinite;
  animation-delay: calc(var(--n) * -0.4s);
}
body[data-theme="ember"] .cc-fx-p:nth-child(2n) { background: oklch(0.80 0.22 50); }
body[data-theme="ember"] .cc-fx-p:nth-child(3n) { background: oklch(0.75 0.18 25); }
body[data-theme="ember"] .cc-fx-p:nth-child(1)  { left: 12%; }
body[data-theme="ember"] .cc-fx-p:nth-child(2)  { left: 22%; animation-duration: 6s; }
body[data-theme="ember"] .cc-fx-p:nth-child(3)  { left: 32%; }
body[data-theme="ember"] .cc-fx-p:nth-child(4)  { left: 42%; animation-duration: 4.5s; }
body[data-theme="ember"] .cc-fx-p:nth-child(5)  { left: 52%; }
body[data-theme="ember"] .cc-fx-p:nth-child(6)  { left: 62%; animation-duration: 5.5s; }
body[data-theme="ember"] .cc-fx-p:nth-child(7)  { left: 72%; }
body[data-theme="ember"] .cc-fx-p:nth-child(8)  { left: 82%; animation-duration: 6.5s; }
body[data-theme="ember"] .cc-fx-p:nth-child(9)  { left: 92%; }
body[data-theme="ember"] .cc-fx-p:nth-child(10) { left:  8%; animation-duration: 4s; }
body[data-theme="ember"] .cc-fx-p:nth-child(11) { left: 50%; animation-duration: 7s; }
body[data-theme="ember"] .cc-fx-p:nth-child(12) { left: 78%; animation-duration: 5s; }
@keyframes cc-spark-rise {
  0%   { top: 95%; transform: translateX(0)    scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateX(8px)  scale(1); }
  90%  { opacity: 0.4; }
  100% { top: 10%; transform: translateX(-6px) scale(0.3); opacity: 0; }
}

/* ─── 8 · FROST - falling snowflakes ────────────────────────────── */
body[data-theme="frost"] .cc-fx-p {
  opacity: 1;
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px oklch(0.95 0.05 215 / 0.8),
              0 0 12px oklch(0.85 0.10 215 / 0.4);
  animation: cc-snow-fall 12s linear infinite;
  animation-delay: calc(var(--n) * -1s);
}
body[data-theme="frost"] .cc-fx-p:nth-child(2n) { width: 4px; height: 4px; }
body[data-theme="frost"] .cc-fx-p:nth-child(3n) { width: 8px; height: 8px; }
body[data-theme="frost"] .cc-fx-p:nth-child(1)  { left:  4%; }
body[data-theme="frost"] .cc-fx-p:nth-child(2)  { left: 14%; animation-duration: 14s; }
body[data-theme="frost"] .cc-fx-p:nth-child(3)  { left: 24%; }
body[data-theme="frost"] .cc-fx-p:nth-child(4)  { left: 34%; animation-duration: 16s; }
body[data-theme="frost"] .cc-fx-p:nth-child(5)  { left: 44%; }
body[data-theme="frost"] .cc-fx-p:nth-child(6)  { left: 54%; animation-duration: 13s; }
body[data-theme="frost"] .cc-fx-p:nth-child(7)  { left: 64%; }
body[data-theme="frost"] .cc-fx-p:nth-child(8)  { left: 74%; animation-duration: 15s; }
body[data-theme="frost"] .cc-fx-p:nth-child(9)  { left: 84%; }
body[data-theme="frost"] .cc-fx-p:nth-child(10) { left: 94%; animation-duration: 11s; }
body[data-theme="frost"] .cc-fx-p:nth-child(11) { left: 38%; animation-duration: 17s; }
body[data-theme="frost"] .cc-fx-p:nth-child(12) { left: 70%; animation-duration: 12s; }
@keyframes cc-snow-fall {
  0%   { top: -5%;  transform: translateX(0)   rotate(0deg); }
  50%  { transform: translateX(25px) rotate(180deg); }
  100% { top: 105%; transform: translateX(-15px) rotate(360deg); }
}

/* ─── 9 · VAPOR - synthwave grid floor + setting sun ──────────── */
body[data-theme="vapor"] .cc-fx-grid {
  opacity: 0.6;
  bottom: 0; left: 0; right: 0;
  height: 35vh;
  background-image:
    repeating-linear-gradient(0deg,
      oklch(0.95 0.20 320 / 0.2) 0px,
      oklch(0.95 0.20 320 / 0.2) 1px,
      transparent 1px,
      transparent 30px),
    repeating-linear-gradient(90deg,
      oklch(0.95 0.20 320 / 0.2) 0px,
      oklch(0.95 0.20 320 / 0.2) 1px,
      transparent 1px,
      transparent 60px);
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom;
  animation: cc-vapor-grid-pull 6s linear infinite;
}
@keyframes cc-vapor-grid-pull {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 30px, 0 0; }
}
body[data-theme="vapor"] .cc-fx-sun {
  opacity: 0.9;
  bottom: 30%; left: 50%; transform: translateX(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: linear-gradient(180deg,
    oklch(0.85 0.20 320) 0%,
    oklch(0.70 0.22 350) 50%,
    oklch(0.55 0.20 25) 100%);
  box-shadow:
    0 0 80px 20px oklch(0.65 0.20 320 / 0.5),
    0 0 200px 60px oklch(0.50 0.20 350 / 0.3);
}

/* ─── 10 · SLATE - intentionally clean (no decorations) ────────── */

/* Reduced motion / animation-off - pause every fx layer too */
@media (prefers-reduced-motion: reduce) {
  body[data-theme]::before,
  body[data-theme]::after,
  .cc-theme-fx .cc-fx-p,
  .cc-theme-fx .cc-fx-big {
    animation-duration: 0.001s !important;
  }
}
body.cc-anim-off .cc-theme-fx .cc-fx-p,
body.cc-anim-off .cc-theme-fx .cc-fx-big {
  animation-duration: 0.001s !important;
}

/* Also honor the user's animation-speed pref (set on body via
   customize-pro). When OFF, the atmosphere still shows but doesn't
   move. */
body.cc-anim-off[data-theme]::before,
body.cc-anim-off[data-theme]::after {
  animation-duration: 0.001s !important;
}

/* Density presets */
body[data-density="compact"]  { --cc-density: 0.82; }
body[data-density="comfy"]    { --cc-density: 0.92; }
body[data-density="spacious"] { --cc-density: 1.05; }

/* ═══════════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND - aurora morph + drifting dot grid + glow pulse
   ═══════════════════════════════════════════════════════════════════ */
.cc-bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, oklch(0.95 0.003 var(--cc-accent-h) / 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 60% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 40%, transparent 100%);
  animation: cc-grid-drift calc(80s / var(--cc-anim, 0.001)) linear infinite;
}
.cc-bg-glow {
  position: fixed; inset: -10vh -10vw; z-index: 0; pointer-events: none;
  background:
    radial-gradient(800px 600px at var(--g1x, 30%) var(--g1y, 0%),  oklch(0.30 0.05 var(--cc-accent-h) / 0.20), transparent 60%),
    radial-gradient(800px 600px at var(--g2x, 80%) var(--g2y, 30%), oklch(0.30 0.05 calc(var(--cc-accent-h) - 30) / 0.16), transparent 60%),
    radial-gradient(800px 600px at var(--g3x, 50%) var(--g3y, 80%), oklch(0.30 0.05 calc(var(--cc-accent-h) + 60) / 0.12), transparent 60%);
  filter: blur(40px) saturate(1.2);
  animation: cc-aurora calc(28s / var(--cc-anim, 0.001)) ease-in-out infinite alternate;
}
@keyframes cc-grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}
@keyframes cc-aurora {
  0%   { --g1x: 30%; --g1y: 0%;   --g2x: 80%; --g2y: 30%; --g3x: 50%; --g3y: 80%; }
  50%  { --g1x: 60%; --g1y: 20%;  --g2x: 30%; --g2y: 50%; --g3x: 80%; --g3y: 60%; }
  100% { --g1x: 20%; --g1y: 40%;  --g2x: 70%; --g2y: 10%; --g3x: 40%; --g3y: 90%; }
}

/* Subtle scanline overlay (toggleable) */
body[data-effects~="scan"]::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%, transparent 49.7%,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.025) 50%,
    transparent 50.3%, transparent 100%);
  background-size: 100% 4px;
  mix-blend-mode: overlay;
}

/* Vignette */
body[data-effects~="vignette"]::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, oklch(0 0 0 / 0.45) 100%);
}

@property --g1x { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --g1y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --g2x { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --g2y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --g3x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --g3y { syntax: '<percentage>'; inherits: false; initial-value: 80%; }

/* ═══════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════ */
.cc-top {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--top-h);
  padding: 0 calc(18px * var(--cc-density));
  background: oklch(0.06 0.005 var(--cc-accent-h) / 0.78);
  backdrop-filter: blur(var(--cc-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--cc-blur)) saturate(1.4);
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-top-l, .cc-top-r {
  display: flex; align-items: center; gap: calc(14px * var(--cc-density));
}
.cc-brand {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.cc-brand-mark {
  width: calc(22px * var(--cc-density)); height: calc(22px * var(--cc-density));
  background: url('/assets/charmcast-logo.svg') center/contain no-repeat;
  filter: drop-shadow(0 0 10px oklch(0.95 0.003 var(--cc-accent-h) / 0.20));
  animation: cc-mark-pulse 4s ease-in-out infinite;
}
@keyframes cc-mark-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px oklch(0.95 0.003 var(--cc-accent-h) / 0.18)); transform: rotate(0deg); }
  50%      { filter: drop-shadow(0 0 16px oklch(0.95 0.003 var(--cc-accent-h) / 0.32)); transform: rotate(3deg); }
}
.cc-brand-text {
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--cc-fg);
}

/* SHINE BUTTON - base for any button that should glint on hover */
.cc-action-btn, .cc-symbol-btn, .cc-pill-btn, .cc-icon-btn, .cc-row-btn,
.cc-promote-btn, .cc-suggest, .cc-symbol-quick button, .cc-link-row,
.cc-watch-row, .cc-nav-item, .cc-preset, .cc-theme-swatch {
  position: relative; overflow: hidden;
  transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.22s, border-color 0.18s;
}
.cc-action-btn::after, .cc-symbol-btn::after, .cc-pill-btn::after,
.cc-promote-btn::after, .cc-suggest::after, .cc-link-row::after,
.cc-watch-row::after, .cc-nav-item::after, .cc-row-btn::after,
.cc-preset::after, .cc-symbol-quick button::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 25%,
    oklch(0.97 0.003 var(--cc-accent-h) / 0.20) 48%,
    oklch(0.97 0.003 var(--cc-accent-h) / 0.30) 50%,
    oklch(0.97 0.003 var(--cc-accent-h) / 0.20) 52%,
    transparent 75%);
  transform: translateX(-110%);
  transition: transform 0.65s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.cc-action-btn:hover::after, .cc-symbol-btn:hover::after, .cc-pill-btn:hover::after,
.cc-promote-btn:hover::after, .cc-suggest:hover::after, .cc-link-row:hover::after,
.cc-watch-row:hover::after, .cc-nav-item:hover::after, .cc-row-btn:hover::after,
.cc-preset:hover::after, .cc-symbol-quick button:hover::after {
  transform: translateX(110%);
}

/* Symbol button */
.cc-symbol-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: calc(6px * var(--cc-density)) calc(14px * var(--cc-density));
  border-radius: 99px;
  background: var(--cc-glass); border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--cc-fg);
}
.cc-symbol-btn:hover {
  background: var(--cc-glass-2);
  border-color: var(--cc-border-3);
  box-shadow: 0 0 20px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.20);
}
.cc-symbol-btn:active { transform: scale(0.97); }
.cc-symbol-caret { font-size: 9px; color: var(--cc-fg-3); }

/* Display-as pill - sits next to the symbol button. Quietly hidden when
   the current symbol has no alternate representations. Click cycles
   through ETF / index / future. Highlights when a non-default view is
   active so the user remembers prices are being converted. */
.cc-display-as-pill {
  display: inline-flex; align-items: center;
  margin-left: -2px;
  padding: calc(4px * var(--cc-density)) calc(10px * var(--cc-density));
  border-radius: 99px;
  background: transparent;
  border: 1px dashed var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--cc-fg-3);
  cursor: pointer;
  transition: 0.16s ease;
}
.cc-display-as-pill:hover {
  color: var(--cc-fg);
  border-color: var(--cc-fg-3);
  border-style: solid;
}
.cc-display-as-pill.is-active {
  color: var(--cc-accent);
  border-color: var(--cc-accent);
  border-style: solid;
  background: oklch(from var(--cc-accent) l c h / 0.08);
  box-shadow: 0 0 14px -4px oklch(from var(--cc-accent) l c h / 0.40);
}
.cc-display-as-pill[hidden] { display: none; }

/* DTE pills */
.cc-exp-row { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.cc-exp-label { font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--cc-fg-3); }
.cc-dte-pills {
  display: flex; gap: 3px;
  padding: 3px; border-radius: 99px;
  background: var(--cc-glass); border: 1px solid var(--cc-border-1);
}
.cc-dte-pill {
  padding: 4px 10px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--cc-fg-3);
  transition: background 0.15s, color 0.15s;
}
.cc-dte-pill.is-active {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  color: var(--cc-fg);
  box-shadow: 0 0 10px -2px oklch(0.95 0.003 var(--cc-accent-h) / 0.30);
}
.cc-dte-pill:hover { color: var(--cc-fg); }

/* Action buttons */
.cc-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: calc(6px * var(--cc-density)) calc(14px * var(--cc-density));
  border-radius: 99px;
  background: var(--cc-glass); border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--cc-fg);
}
.cc-action-btn:hover {
  background: var(--cc-glass-2);
  border-color: var(--cc-border-3);
  box-shadow: 0 0 16px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.30);
}
.cc-action-btn:active { transform: scale(0.96); }
.cc-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cc-action-btn:disabled::after { display: none; }
.cc-action-btn.cc-primary {
  background: oklch(0.65 0.18 145 / 0.22);
  border-color: oklch(0.65 0.18 145 / 0.40);
  color: oklch(0.85 0.16 145);
}
.cc-action-btn.cc-primary:hover {
  background: oklch(0.65 0.18 145 / 0.32);
  box-shadow: 0 0 22px -4px oklch(0.65 0.18 145 / 0.48);
}

.cc-icon-btn {
  width: calc(32px * var(--cc-density)); height: calc(32px * var(--cc-density));
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-glass); border: 1px solid var(--cc-border-2);
  color: var(--cc-fg-2);
}
.cc-icon-btn:hover {
  background: var(--cc-glass-2);
  color: var(--cc-fg);
  transform: rotate(15deg);
  box-shadow: 0 0 14px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.30);
}

.cc-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.10em; color: var(--cc-fg-2);
}
.cc-live-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--cc-pos);
  animation: cc-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 6px var(--cc-pos);
}
@keyframes cc-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.cc-clock {
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-3); letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWS TICKER (under top bar)
   ═══════════════════════════════════════════════════════════════════ */
.cc-news-ticker {
  position: relative; z-index: 5;
  display: flex; align-items: center;
  /* Bumped from 28 → 32 px and forced line-height:1 on every span so the
     mono font's descenders aren't clipped by the container. */
  height: calc(32px * var(--cc-density));
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.65);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--cc-border-1);
  overflow: hidden;
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cc-fg-2);
}
.cc-news-ticker, .cc-news-ticker * { line-height: 1; }
/* Label kept as a no-op selector in case markup elsewhere still
   references it; the actual <span class="cc-news-ticker-label"> was
   removed from index.html because it collided with the scrolling
   text on the left edge as items wrapped through the loop point. */
.cc-news-ticker-label { display: none; }
.cc-news-track {
  display: inline-flex; gap: 32px;
  padding-left: 24px;
  white-space: nowrap;
  animation: cc-news-scroll 60s linear infinite;
}
.cc-news-track > span { display: inline-flex; align-items: center; gap: 8px; }
.cc-news-track > span::before {
  content: '◆'; color: var(--cc-fg-3); font-size: 8px;
}
@keyframes cc-news-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO STRIP
   ═══════════════════════════════════════════════════════════════════ */
.cc-strip {
  position: relative; z-index: 5;
  display: grid;
  /* Simplified 6-column strip: PRICE (1.4fr) | CHG | REGIME |
     ACTIVE SETUPS (1.4fr) | NEXT EVENT (1.6fr) | SESSION
     The PRICE + setups + event get extra weight because they're the
     things a trader scans first. */
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr 1.6fr 1fr;
  gap: 1px;
  height: var(--strip-h);
  margin: calc(12px * var(--cc-density)) calc(14px * var(--cc-density)) 0;
  border-radius: var(--radius);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.04);
  border: 1px solid var(--cc-border-1);
  overflow: hidden;
  box-shadow: 0 1px 0 oklch(0.95 0.003 var(--cc-accent-h) / 0.04) inset,
              0 0 30px -8px oklch(0.50 0.10 var(--cc-accent-h) / 0.15);
}
@media (max-width: 1100px) {
  .cc-strip { grid-template-columns: 1fr 1fr 1fr; }
  .cc-strip-cell:nth-child(n+4) { display: none; }
}
.cc-strip-cell {
  display: flex; flex-direction: column; gap: 2px;
  justify-content: center;
  padding: 6px calc(14px * var(--cc-density));
  background: linear-gradient(180deg, oklch(0.10 0.004 var(--cc-accent-h) / 0.65), oklch(0.06 0.005 var(--cc-accent-h) / 0.85));
  font-family: var(--cc-mono);
  position: relative;
  transition: background 0.2s;
}
.cc-strip-cell:hover { background: linear-gradient(180deg, oklch(0.14 0.006 var(--cc-accent-h) / 0.75), oklch(0.08 0.005 var(--cc-accent-h) / 0.85)); }
.cc-strip-cell .cc-k { font-size: 8px; letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 700; }
.cc-strip-cell .cc-v {
  font-size: 14px; color: var(--cc-fg); font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.18s;
}
.cc-strip-price .cc-v { font-size: 16px; letter-spacing: -0.01em; }
/* Clickable cells - cursor + accent on hover. Both setups + event
   navigate to their respective tabs when clicked. */
.cc-strip-setups, .cc-strip-event { cursor: pointer; }
.cc-strip-setups:hover .cc-v, .cc-strip-event:hover .cc-v { color: var(--cc-accent); }
.cc-strip-setups .cc-v {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.cc-strip-event .cc-v {
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-strip-cell-hidden { display: none !important; }

/* Tick-up / tick-down animation when value updates */
.cc-tick-up   { animation: cc-flash-pos 0.6s ease-out; }
.cc-tick-down { animation: cc-flash-neg 0.6s ease-out; }
@keyframes cc-flash-pos {
  0% { color: var(--cc-pos); text-shadow: 0 0 8px var(--cc-pos); }
  100% { color: var(--cc-fg); text-shadow: none; }
}
@keyframes cc-flash-neg {
  0% { color: var(--cc-neg); text-shadow: 0 0 8px var(--cc-neg); }
  100% { color: var(--cc-fg); text-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SHELL - left nav + main + right rail
   ═══════════════════════════════════════════════════════════════════ */
.cc-shell {
  position: relative; z-index: 1;
  display: grid;
  /* Right rail removed - shell is now sidebar + main only. The freed
     ~290px goes back to the main view, which finally lets dense
     orderflow / vol cards breathe. */
  grid-template-columns: var(--side-w) 1fr;
  gap: var(--gap);
  margin: var(--gap);
  /* Walls ticker also removed, so no bottom-reserve needed. Just a
     small bottom buffer so the last card doesn't kiss the viewport. */
  padding-bottom: 16px;
  min-height: calc(100vh - var(--top-h) - var(--strip-h) - 60px);
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT SIDEBAR - collapsed-icon-only by default, hover-expands
   as an OVERLAY (no layout shift, no content squish).

   Architecture:
   - `.cc-side` is sticky inside its grid cell at the collapsed width
     (--side-w = 56px). The grid never reallocates its space.
   - On hover (or `.is-pinned` for click-to-pin), `.cc-side` widens
     itself with `width` transition only - but because it's positioned
     OVER the main content (z-index above + transparent right edge),
     no main element re-layouts. The result feels like the panel
     "blooms" outward without pushing anything.
   - Icons sit in a fixed-width gutter; labels live in a flex child
     that fades in on expand. Hardware-accelerated (will-change), so
     no jank on laptops with weak GPUs.
   ═══════════════════════════════════════════════════════════════════ */
.cc-side {
  position: sticky; top: var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
  align-self: flex-start;
  max-height: calc(100vh - 110px);
  /* Default = thin icon rail. Hover expands as overlay. */
  width: var(--side-w);
  z-index: 20;
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}
/* Hover (or keyboard focus, or .is-pinned via the lock button) →
   expand as a FLOATING overlay over the main content. Grid keeps the
   reserved column at --side-w (the thin rail), so nothing else moves. */
.cc-side:hover,
.cc-side:focus-within,
.cc-side.is-pinned {
  width: var(--side-w-expanded);
}
.cc-side:hover .cc-nav,
.cc-side:focus-within .cc-nav,
.cc-side.is-pinned .cc-nav {
  box-shadow:
    8px 0 32px -10px oklch(0 0 0 / 0.65),
    0 0 0 1px var(--cc-border-2);
}

.cc-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  -webkit-backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  border: 1px solid var(--cc-border-1);
  /* Scroll the nav list when there are more tabs than fit the viewport.
     Was overflow:hidden which CLIPPED the bottom 15 tabs of 24 on
     short viewports. overflow-x stays hidden so the text-fade still
     works during the collapse transition. */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - var(--top-h) - var(--strip-h) - 130px);
  transition: box-shadow 220ms ease;
  /* Thin scrollbar to keep it visually clean */
  scrollbar-width: thin;
  scrollbar-color: var(--cc-border-3) transparent;
}
.cc-nav::-webkit-scrollbar { width: 4px; }
.cc-nav::-webkit-scrollbar-track { background: transparent; }
.cc-nav::-webkit-scrollbar-thumb { background: var(--cc-border-3); border-radius: 2px; }

.cc-nav-item {
  display: flex; align-items: center; gap: 12px;
  /* Slim row - denser like the reference design */
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 8px;
  /* Sans-serif (system stack) at sentence-case size - bulk text removed */
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cc-fg-2);
  text-align: left;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
/* Default state (icon rail): center icons, tighter padding. When the
   sidebar expands on hover, this rule no longer applies and items
   regain their left-aligned look. */
.cc-side:not(:hover):not(:focus-within):not(.is-pinned) .cc-nav-item {
  justify-content: center;
  padding: 8px 4px;
  min-height: 32px;
  /* Critical: remove the gap so the (zero-width) text doesn't push the
     icon out of the centered flex layout. Without this, icons get
     visually clipped off the left edge of the 56px gutter. */
  gap: 0;
}

/* Section dividers - thin horizontal lines between functional groups.
   Hidden when sidebar is collapsed (gutter is too narrow to look clean). */
.cc-nav-divider {
  height: 1px;
  background: var(--cc-border-1);
  margin: 6px 8px;
  flex-shrink: 0;
  transition: opacity 200ms ease;
}
.cc-side:not(:hover):not(:focus-within):not(.is-pinned) .cc-nav-divider {
  opacity: 0;                              /* hidden when collapsed */
  margin: 4px 14px;                        /* slimmer line in icon rail */
}
.cc-nav-item:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  color: var(--cc-fg);
}
.cc-nav-item.is-active {
  background: linear-gradient(135deg,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.13),
    oklch(0.95 0.003 var(--cc-accent-h) / 0.06));
  color: var(--cc-fg);
  box-shadow: inset 2px 0 0 var(--cc-fg),
              0 4px 18px -8px oklch(0.95 0.003 var(--cc-accent-h) / 0.40);
}
/* Active accent rail when sidebar is at icon-only width */
.cc-side:not(:hover):not(:focus-within):not(.is-pinned) .cc-nav-item.is-active {
  box-shadow: inset 3px 0 0 var(--cc-fg),
              0 0 18px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.35);
}

/* Icon: smaller, tighter gutter - clean icon-rail look */
.cc-nav-icon {
  flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  transition: filter 220ms ease, transform 180ms ease, background 180ms ease;
}
.cc-nav-icon svg { width: 16px; height: 16px; display: block; }
.cc-nav-item.is-active .cc-nav-icon {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08);
  filter: drop-shadow(0 0 8px oklch(0.95 0.003 var(--cc-accent-h) / 0.45));
}
.cc-nav-item:hover .cc-nav-icon {
  transform: scale(1.10);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.05);
}

/* Text labels: hidden by default (collapsed rail), fade in when the
   sidebar expands (hover / focus / pinned). Both opacity AND max-width
   are animated - without max-width, the invisible text still occupies
   layout space and pushes the icon out of the 56px gutter. */
.cc-nav-text {
  opacity: 0;
  transform: translateX(-6px);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity 200ms ease 80ms,
    transform 200ms ease 80ms,
    max-width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.cc-side:hover .cc-nav-text,
.cc-side:focus-within .cc-nav-text,
.cc-side.is-pinned .cc-nav-text {
  opacity: 1;
  transform: translateX(0);
  max-width: 220px;
  pointer-events: auto;
}

/* Tooltip: floating chip on hover when sidebar is at the thin width.
   Only shows BEFORE the panel expands (i.e. on the very first hover
   moment). When fully expanded, the inline label is visible instead. */
.cc-side:not(:hover):not(:focus-within):not(.is-pinned) .cc-nav-item:hover::after {
  content: attr(aria-label);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  background: oklch(0.18 0.005 var(--cc-accent-h) / 0.92);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg);
  font-family: var(--cc-mono); font-size: 10.5px; letter-spacing: 0.18em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px -6px oklch(0 0 0 / 0.55);
  z-index: 30;
}

/* Pin toggle (rendered by the nav as the last child) */
.cc-side-pin {
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px;
  height: 28px;
  border: 1px solid var(--cc-border-1);
  background: transparent;
  color: var(--cc-fg-3);
  cursor: pointer;
  font-family: var(--cc-mono); font-size: 9.5px; letter-spacing: 0.18em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cc-side-pin:hover { color: var(--cc-fg); border-color: var(--cc-border-3); }
.cc-side.is-pinned .cc-side-pin { color: var(--cc-fg); border-color: var(--cc-border-3); background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06); }

/* Watchlist + side-foot are part of the expanded panel only. Hidden
   when the sidebar is at icon-rail width; fade in on expand. */
.cc-side .cc-watchlist,
.cc-side .cc-side-foot {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 200ms ease 80ms;
}
.cc-side:hover .cc-watchlist,
.cc-side:focus-within .cc-watchlist,
.cc-side.is-pinned .cc-watchlist,
.cc-side:hover .cc-side-foot,
.cc-side:focus-within .cc-side-foot,
.cc-side.is-pinned .cc-side-foot {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Standard-deviation tiles in the Vol tab */
.cc-stdev-tile {
  border: 1px solid var(--cc-border-1);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.02);
  padding: 8px 6px;
  text-align: center;
  font-family: var(--cc-mono);
  border-radius: 6px;
}
.cc-stdev-k {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--cc-fg-3);
}
.cc-stdev-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-fg);
  margin-top: 4px;
}
.cc-stdev-toggle.is-active {
  color: var(--cc-fg);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  border: 1px solid var(--cc-border-3);
}

/* Animation-speed multiplier - set by customize-pro from the user's
   speed pref. Most existing animations check `--cc-anim-speed` via
   their duration, so a single CSS-var change re-times everything.
   When 0 (off), all transitions snap. */
body.cc-anim-off *,
body.cc-anim-off *::before,
body.cc-anim-off *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

/* Drag-disabled - hides handles entirely so the card head looks normal */
body.cc-drag-disabled .cc-drag-handle { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   DRAGGABLE CARDS - iOS-style drag with handle in the card head.
   Powered by /lib/ui/cardDrag.js. Compositor-only transforms, smooth
   FLIP-style sibling slide.
   ═══════════════════════════════════════════════════════════════════ */
.cc-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-right: 8px;
  cursor: grab;
  color: var(--cc-fg-3);
  font-size: 13px;
  letter-spacing: -0.05em;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;        /* required for pointer events on mobile */
  border-radius: 4px;
  transition: color 0.18s, background 0.18s, transform 0.18s;
  flex-shrink: 0;
}
.cc-drag-handle:hover {
  color: var(--cc-fg);
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  transform: scale(1.1);
}
.cc-drag-handle:active { cursor: grabbing; }
/* Corner handle - for headless cards (setup rows etc.) */
.cc-drag-handle--corner {
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  font-size: 11px;
  background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent);
  z-index: 2;
  margin: 0;
}
/* Universal-drag dimmer - only the dragged element stays bright */
body.cc-dragging-card .cc-h2-section,
body.cc-dragging-card .cc-h2-card,
body.cc-dragging-card .cc-an-card,
body.cc-dragging-card .cc-h2-setup,
body.cc-dragging-card .cc-ws-section { transition: opacity 120ms ease; }
body.cc-dragging-card .cc-h2-section:not(.is-dragging),
body.cc-dragging-card .cc-h2-card:not(.is-dragging),
body.cc-dragging-card .cc-an-card:not(.is-dragging),
body.cc-dragging-card .cc-h2-setup:not(.is-dragging),
body.cc-dragging-card .cc-ws-section:not(.is-dragging) { opacity: 0.86; }
.cc-h2-section.is-dragging,
.cc-h2-card.is-dragging,
.cc-an-card.is-dragging,
.cc-h2-setup.is-dragging,
.cc-ws-section.is-dragging {
  cursor: grabbing;
  box-shadow: 0 24px 60px -16px oklch(0 0 0 / 0.65),
              0 0 0 1px var(--cc-border-2, rgba(255,255,255,0.18));
}

/* While ANY card is being dragged, dim and disable pointer-events on
   all card bodies so the user can't accidentally click into them. */
body.cc-dragging-card .cc-card { transition: opacity 120ms ease; }
body.cc-dragging-card .cc-card:not(.is-dragging) { opacity: 0.85; }

.cc-card.is-dragging {
  /* Smooth handoff - transition handled by JS via inline transforms */
  transition: transform 90ms ease, box-shadow 200ms ease !important;
}

.cc-drag-placeholder {
  /* Subtle pulse so the user can see where the card will land */
  animation: cc-drop-pulse 1.4s ease-in-out infinite;
}
@keyframes cc-drop-pulse {
  0%, 100% { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.04); }
  50%      { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); }
}

/* HELP redirect highlight - temporary ring + glow on the target element
   so the user can see exactly where the AI is pointing them. Removed
   after 2.4s by JS. Pure CSS animation (no JS frame loop). */
.cc-help-flash {
  position: relative;
  animation: cc-help-flash 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}
@keyframes cc-help-flash {
  0%   { box-shadow: 0 0 0 0   oklch(0.95 0.003 var(--cc-accent-h) / 0.0),
                     0 0 0 0   oklch(0.95 0.003 var(--cc-accent-h) / 0.0); }
  15%  { box-shadow: 0 0 0 4px oklch(0.95 0.003 var(--cc-accent-h) / 0.55),
                     0 0 36px 4px oklch(0.95 0.003 var(--cc-accent-h) / 0.45); }
  60%  { box-shadow: 0 0 0 4px oklch(0.95 0.003 var(--cc-accent-h) / 0.30),
                     0 0 28px 4px oklch(0.95 0.003 var(--cc-accent-h) / 0.20); }
  100% { box-shadow: 0 0 0 0   oklch(0.95 0.003 var(--cc-accent-h) / 0.0),
                     0 0 0 0   oklch(0.95 0.003 var(--cc-accent-h) / 0.0); }
}

/* Generic icon class - used in cards, chips, anywhere outside the nav */
.cc-icon {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}
.cc-icon.cc-icon-lg { width: 20px; height: 20px; }
.cc-icon.cc-icon-sm { width: 12px; height: 12px; }

.cc-watchlist {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--cc-glass);
  backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  -webkit-backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  border: 1px solid var(--cc-border-1);
}
.cc-watch-list { display: flex; flex-direction: column; gap: 4px; }
.cc-watch-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  font-family: var(--cc-mono); font-size: 11px;
  cursor: pointer;
}
.cc-watch-row:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08);
  transform: translateX(2px);
}
.cc-watch-sym { color: var(--cc-fg); font-weight: 700; }
.cc-watch-px { color: var(--cc-fg-2); font-variant-numeric: tabular-nums; }

.cc-side-foot {
  margin-top: auto; padding: 8px 10px;
  font-family: var(--cc-mono); font-size: 10px; color: var(--cc-fg-3);
  text-align: center;
  border-radius: 8px;
  background: var(--cc-glass);
  border: 1px solid var(--cc-border-1);
}
.cc-user-pill { color: var(--cc-fg-2); }

/* ═══════════════════════════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════════════════════════ */
.cc-main { min-width: 0; }
.cc-view {
  display: none; flex-direction: column; gap: var(--gap);
}
.cc-view.is-active {
  display: flex;
  animation: cc-view-enter 0.32s cubic-bezier(.2,.8,.2,1);
}
/* Vol-tab card reorder: research-paper indicators (Hurst, SVI, Hawkes,
   Charm cascade, etc.) live in the QUICK EDGES strip. They were the
   FIRST card on the tab which made the page open with the most opaque
   stuff in the user's face. Push them below the standard estimators
   so the tab opens with the regime headline + RV/IV bands first. */
.cc-view[data-view="vol"] > .cc-qedge-card { order: 10; }
@keyframes cc-view-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.995); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Stagger children */
.cc-view.is-active > .cc-card,
.cc-view.is-active > .cc-grid-2 > .cc-card,
.cc-view.is-active > .cc-grid-2 {
  animation: cc-card-rise 0.45s cubic-bezier(.2,.8,.2,1) backwards;
}
.cc-view.is-active > *:nth-child(1) { animation-delay: 0ms; }
.cc-view.is-active > *:nth-child(2) { animation-delay: 60ms; }
.cc-view.is-active > *:nth-child(3) { animation-delay: 120ms; }
.cc-view.is-active > *:nth-child(4) { animation-delay: 180ms; }
.cc-view.is-active > *:nth-child(5) { animation-delay: 240ms; }
@keyframes cc-card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════ */
.cc-card {
  position: relative;
  padding: var(--pad-card) calc(var(--pad-card) + 2px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  -webkit-backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-saturate));
  border: 1px solid var(--cc-border-1);
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.cc-card:hover {
  border-color: var(--cc-border-2);
  box-shadow: 0 4px 22px -8px oklch(0 0 0 / 0.5),
              0 0 24px -6px oklch(0.50 0.10 var(--cc-accent-h) / 0.12);
}
/* Corner ticks */
.cc-card::before, .cc-card::after {
  content: ''; position: absolute; width: 11px; height: 11px;
  border: 1px solid var(--cc-border-3); pointer-events: none;
  transition: width 0.22s, height 0.22s, border-color 0.22s;
}
.cc-card::before { top: 7px; left: 7px;   border-right: 0; border-bottom: 0; }
.cc-card::after  { bottom: 7px; right: 7px; border-left: 0;  border-top: 0; }
.cc-card:hover::before, .cc-card:hover::after { width: 14px; height: 14px; border-color: oklch(0.95 0.003 var(--cc-accent-h) / 0.35); }

/* Hide ticks via effects */
body[data-effects~="no-ticks"] .cc-card::before,
body[data-effects~="no-ticks"] .cc-card::after { display: none; }

/* Hero card - adds a top scan line */
.cc-hero {
  background: linear-gradient(180deg,
    oklch(0.20 0.012 var(--cc-accent-h) / 0.85),
    oklch(0.10 0.004 var(--cc-accent-h) / 0.95));
  position: relative;
}
.cc-hero > .cc-hero-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.5) 30%,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.5) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: cc-scan-down 4.4s ease-in-out infinite;
}
@keyframes cc-scan-down {
  0%,100% { transform: translateY(0) scaleX(0.6); opacity: 0.4; }
  50%     { transform: translateY(140px) scaleX(1); opacity: 1; }
}

.cc-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; min-height: 24px;
}
.cc-eyebrow {
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--cc-fg-2); font-weight: 700;
}
.cc-link-btn {
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.10em;
  color: var(--cc-fg-3); padding: 4px 8px;
  transition: color 0.2s;
}
.cc-link-btn:hover { color: var(--cc-fg); }
.cc-pill-btn {
  padding: 5px 12px; border-radius: 99px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.12em; font-weight: 700;
  color: var(--cc-fg);
}
.cc-pill-btn:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.16);
  box-shadow: 0 0 14px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.30);
}
.cc-pill-btn:active { transform: scale(0.96); }
.cc-pill-btn.is-armed {
  background: oklch(0.65 0.18 145 / 0.22);
  border-color: oklch(0.65 0.18 145 / 0.45);
  color: oklch(0.85 0.16 145);
  box-shadow: 0 0 18px -4px oklch(0.65 0.18 145 / 0.50);
  animation: cc-armed-glow 2.4s ease-in-out infinite;
}
@keyframes cc-armed-glow {
  0%,100% { box-shadow: 0 0 12px -4px oklch(0.65 0.18 145 / 0.40); }
  50%     { box-shadow: 0 0 24px -2px oklch(0.65 0.18 145 / 0.65); }
}

.cc-section-h {
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.20em;
  color: var(--cc-fg-2); margin: 12px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--cc-border-1);
}

.cc-empty {
  padding: 22px 14px; text-align: center;
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-3);
  line-height: 1.5;
}
.cc-empty-hint { margin-top: 8px; font-family: var(--cc-mono); font-size: 10px; color: var(--cc-fg-3); }

/* Loading shimmer */
.cc-shimmer {
  position: relative; overflow: hidden;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
}
.cc-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    oklch(0.95 0.003 var(--cc-accent-h) / 0.06) 50%,
    transparent 70%);
  animation: cc-shimmer 1.4s linear infinite;
}
@keyframes cc-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════════
   GRIDS, STATS
   ═══════════════════════════════════════════════════════════════════ */
.cc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
/* Wide-screen extension. With the right rail removed, the main column
   gained ~290px of breathing room. At >=1600px we bump 2-column grids
   to 3 columns and 3-column grids to 4, so the freed space fills with
   content rather than empty page. Cards stay readable because the
   default single-column min-width still applies on narrow viewports. */
@media (min-width: 1600px) {
  .cc-grid-2 { grid-template-columns: repeat(3, 1fr); }
  .cc-grid-3 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1900px) {
  .cc-grid-2 { grid-template-columns: repeat(4, 1fr); }
}
.cc-grid-2-engine { display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr; gap: 18px; margin-top: 6px; }
.cc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cc-stat-grid.cc-stat-3 { grid-template-columns: repeat(3, 1fr); }
.cc-stat-grid.cc-stat-4 { grid-template-columns: repeat(4, 1fr); }
.cc-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--pad-cell) calc(var(--pad-cell) + 2px); border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  font-family: var(--cc-mono);
  transition: background 0.18s, transform 0.15s;
}
.cc-stat:hover {
  background: oklch(0.10 0.004 var(--cc-accent-h) / 0.55);
  transform: translateY(-1px);
}
.cc-stat .cc-k { font-size: 8px; letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 700; }
.cc-stat .cc-v { font-size: 14px; color: var(--cc-fg); font-weight: 700; font-variant-numeric: tabular-nums; }

.cc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 12px;
}
.cc-row:last-child { border-bottom: 0; }
.cc-row .cc-k { font-size: 9px; letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 700; }
.cc-row .cc-v { color: var(--cc-fg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   CONVICTION METER
   ═══════════════════════════════════════════════════════════════════ */
.cc-conviction { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.cc-conv-large { padding: 10px 0 14px; }
.cc-side-chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.16em; font-weight: 700;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  color: var(--cc-fg-3);
  border: 1px solid var(--cc-border-2);
  min-width: 80px; text-align: center;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.cc-side-chip[data-side="long"] {
  background: var(--cc-pos-bg); color: var(--cc-pos);
  border-color: oklch(0.65 0.18 145 / 0.35);
  box-shadow: 0 0 18px -4px oklch(0.65 0.18 145 / 0.45);
}
.cc-side-chip[data-side="short"] {
  background: var(--cc-neg-bg); color: var(--cc-neg);
  border-color: oklch(0.55 0.20 25 / 0.35);
  box-shadow: 0 0 18px -4px oklch(0.55 0.20 25 / 0.45);
}
.cc-meter { flex: 1; min-width: 0; }
.cc-meter-track {
  position: relative; height: 8px; border-radius: 99px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  overflow: hidden;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.30);
}
.cc-meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, oklch(0.55 0.18 var(--cc-accent-h)), oklch(0.78 0.20 145));
  border-radius: 99px; transition: width 0.4s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 10px oklch(0.78 0.20 145 / 0.55);
}
.cc-meter-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(0.97 0 0 / 0.30), transparent);
  animation: cc-meter-shine 2.4s ease-in-out infinite;
}
@keyframes cc-meter-shine { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.cc-meter-mark {
  position: absolute; left: 70%; top: -3px; bottom: -3px; width: 1px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.4);
}
.cc-meter-mark::after {
  content: '70'; position: absolute; top: -16px; left: -8px;
  font-family: var(--cc-mono); font-size: 9px; color: var(--cc-fg-3);
}
.cc-meter-label {
  display: flex; justify-content: space-between; padding-top: 6px;
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.10em; color: var(--cc-fg-3);
}
.cc-meter-label > span:last-child { color: var(--cc-fg); font-weight: 700; }
.cc-meter-mid { color: var(--cc-fg-3); }
.cc-hero-msg {
  margin-top: 14px; font-family: var(--cc-mono); font-size: 11px; line-height: 1.55;
  color: var(--cc-fg-2);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE STRIP
   ═══════════════════════════════════════════════════════════════════ */
.cc-phase-strip {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  padding: 10px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-phase {
  height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.04);
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--cc-fg-3);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  position: relative;
}
.cc-phase.is-past { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); color: var(--cc-fg-2); }
.cc-phase.is-active {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.22); color: var(--cc-fg);
  box-shadow: inset 0 0 0 1px var(--cc-border-3),
              0 0 18px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.40);
}
.cc-phase.is-active::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 7px;
  background: linear-gradient(90deg, transparent, oklch(0.95 0.003 var(--cc-accent-h) / 0.20), transparent);
  filter: blur(6px);
  animation: cc-phase-ring 1.8s ease-in-out infinite;
}
@keyframes cc-phase-ring {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%     { opacity: 0.8; transform: scale(1.05); }
}
.cc-phase.is-active.phase-triggered {
  background: oklch(0.65 0.18 145 / 0.35); color: var(--cc-fg);
  box-shadow: inset 0 0 0 1px oklch(0.65 0.18 145 / 0.55),
              0 0 26px -4px oklch(0.65 0.18 145 / 0.65);
}

/* ═══════════════════════════════════════════════════════════════════
   TRIGGERS
   ═══════════════════════════════════════════════════════════════════ */
.cc-trigger-list { display: flex; flex-direction: column; gap: 5px; }
.cc-trigger {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.03);
  font-family: var(--cc-mono); font-size: 12px;
  transition: background 0.2s, transform 0.18s, box-shadow 0.22s;
}
.cc-trigger:hover { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08); transform: translateX(2px); }
.cc-trigger.is-fired {
  background: oklch(0.65 0.18 145 / 0.10);
  box-shadow: inset 0 0 0 1px oklch(0.65 0.18 145 / 0.25), 0 0 18px -6px oklch(0.65 0.18 145 / 0.40);
  animation: cc-trigger-fire 0.5s ease-out;
}
.cc-trigger.is-fired-short {
  background: oklch(0.55 0.20 25 / 0.10);
  box-shadow: inset 0 0 0 1px oklch(0.55 0.20 25 / 0.25), 0 0 18px -6px oklch(0.55 0.20 25 / 0.40);
  animation: cc-trigger-fire 0.5s ease-out;
}
@keyframes cc-trigger-fire {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.cc-trigger-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.20);
}
.cc-trigger.is-fired .cc-trigger-dot { background: var(--cc-pos); animation: cc-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 8px var(--cc-pos); }
.cc-trigger.is-fired-short .cc-trigger-dot { background: var(--cc-neg); animation: cc-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 8px var(--cc-neg); }
.cc-trigger-strength { font-size: 10px; color: var(--cc-fg-3); font-variant-numeric: tabular-nums; }
.cc-trigger.is-fired .cc-trigger-strength { color: var(--cc-pos); }
.cc-trigger.is-fired-short .cc-trigger-strength { color: var(--cc-neg); }

/* ═══════════════════════════════════════════════════════════════════
   FEED
   ═══════════════════════════════════════════════════════════════════ */
.cc-feed {
  display: flex; flex-direction: column; gap: 4px;
  height: 220px; overflow-y: auto;
  padding: 10px 12px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  font-family: var(--cc-mono); font-size: 11px; line-height: 1.5;
  border: 1px solid var(--cc-border-1);
}
.cc-feed::-webkit-scrollbar { width: 5px; }
.cc-feed::-webkit-scrollbar-thumb { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); border-radius: 99px; }
.cc-feed-line {
  display: grid; grid-template-columns: 60px 88px 1fr; gap: 8px;
  color: var(--cc-fg-2);
  animation: cc-feed-in 0.3s ease-out;
}
@keyframes cc-feed-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-feed-line.is-trigger { color: var(--cc-pos); }
.cc-feed-line.is-warn { color: var(--cc-warn); }
.cc-feed-ts { color: var(--cc-fg-3); }
.cc-feed-phase { color: var(--cc-fg-3); letter-spacing: 0.06em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════
   WHY block + plan
   ═══════════════════════════════════════════════════════════════════ */
.cc-why {
  margin-top: 12px; padding: 14px 16px;
  border-radius: 10px;
  background: oklch(0.65 0.18 145 / 0.06);
  box-shadow: inset 0 0 0 1px oklch(0.65 0.18 145 / 0.20),
              0 0 24px -8px oklch(0.65 0.18 145 / 0.45);
  animation: cc-why-in 0.5s ease-out;
}
@keyframes cc-why-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-why-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 8px 0 12px; }
.cc-why-list li {
  font-family: var(--cc-mono); font-size: 12px;
  padding-left: 16px; position: relative; color: var(--cc-fg);
}
.cc-why-list li::before { content: '▸'; position: absolute; left: 2px; color: var(--cc-pos); }
.cc-plan-row {
  display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px;
  align-items: end; padding-top: 12px;
  border-top: 1px solid oklch(0.65 0.18 145 / 0.20);
}
.cc-plan-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: 6px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  font-family: var(--cc-mono);
  transition: background 0.18s;
}
.cc-plan-cell:hover { background: oklch(0.10 0.004 var(--cc-accent-h) / 0.55); }
.cc-plan-cell .cc-k { font-size: 8px; letter-spacing: 0.18em; color: var(--cc-fg-3); }
.cc-plan-cell .cc-v { font-size: 13px; color: var(--cc-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-promote-btn {
  padding: 12px 16px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, oklch(0.65 0.18 145 / 0.30), oklch(0.65 0.18 145 / 0.18));
  border: 1px solid oklch(0.65 0.18 145 / 0.45);
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  color: oklch(0.85 0.16 145);
  box-shadow: 0 0 22px -6px oklch(0.65 0.18 145 / 0.50);
}
.cc-promote-btn:hover {
  box-shadow: 0 0 30px -4px oklch(0.65 0.18 145 / 0.65);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   ANALYSIS / VOL / OF chart hosts
   ═══════════════════════════════════════════════════════════════════ */
.cc-chart-host, .cc-of-host {
  height: 320px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cc-border-1);
}
.cc-analysis-output {
  font-family: var(--cc-mono); font-size: 12px; line-height: 1.6;
  color: var(--cc-fg);
  white-space: pre-wrap;
  min-height: 200px;
  padding: 12px 14px;
  border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT
   ═══════════════════════════════════════════════════════════════════ */
.cc-chat-card { display: flex; flex-direction: column; min-height: 540px; }
.cc-cache-chip {
  padding: 3px 9px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.10em;
  background: oklch(0.65 0.18 var(--cc-accent-h) / 0.18);
  color: var(--cc-info);
  border: 1px solid oklch(0.65 0.18 var(--cc-accent-h) / 0.30);
}
.cc-thread {
  flex: 1; min-height: 280px; max-height: 540px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 0; margin-bottom: 12px;
  overflow-y: auto;
}
.cc-thread-empty { padding: 40px 16px; }
.cc-msg {
  padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; max-width: 88%;
  word-wrap: break-word;
  animation: cc-msg-in 0.3s ease-out;
}
@keyframes cc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cc-msg.user {
  align-self: flex-end;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg);
}
.cc-msg.assistant {
  align-self: flex-start;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  border: 1px solid var(--cc-border-1);
  color: var(--cc-fg);
  font-family: var(--cc-mono); font-size: 12px;
}
.cc-msg.assistant.is-loading::after { content: '▍'; animation: cc-blink 1s infinite; }
@keyframes cc-blink { 50% { opacity: 0; } }
.cc-suggest-strip {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px;
}
.cc-suggest-strip::-webkit-scrollbar { display: none; }
.cc-suggest {
  flex-shrink: 0;
  padding: 7px 13px; border-radius: 99px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.05);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-2); white-space: nowrap;
}
.cc-suggest:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.12);
  color: var(--cc-fg);
  border-color: var(--cc-border-3);
}
.cc-input-row { display: flex; gap: 8px; align-items: center; }
.cc-input {
  flex: 1; min-width: 0;
  padding: 10px 14px; border-radius: 99px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg); font-size: 13px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.22s;
}
.cc-input:focus {
  border-color: oklch(0.65 0.10 var(--cc-accent-h) / 0.55);
  box-shadow: 0 0 0 4px oklch(0.65 0.10 var(--cc-accent-h) / 0.10);
}
.cc-input-num { padding: 10px 14px; border-radius: 8px; font-family: var(--cc-mono); width: 100%; }
.cc-input-label {
  display: block; font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--cc-fg-3); margin: 8px 0 4px; font-weight: 700;
}
.cc-send-btn {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-fg);
  color: var(--cc-bg-0);
  transition: transform 0.12s, box-shadow 0.22s;
}
.cc-send-btn:hover {
  box-shadow: 0 0 22px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.55);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════
   TRADE LIST + LESSONS
   ═══════════════════════════════════════════════════════════════════ */
.cc-trade-list { display: flex; flex-direction: column; gap: 5px; }
.cc-trade-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  font-family: var(--cc-mono); font-size: 11px;
  transition: background 0.18s, transform 0.18s;
}
.cc-trade-row:hover { background: oklch(0.10 0.004 var(--cc-accent-h) / 0.50); transform: translateX(2px); }
.cc-trade-grade {
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  color: var(--cc-fg);
}
.cc-trade-grade.grade-Aplus, .cc-trade-grade.grade-A { background: oklch(0.65 0.18 145 / 0.20); color: var(--cc-pos); }
.cc-trade-grade.grade-B { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); color: var(--cc-fg); }
.cc-trade-grade.grade-C { background: oklch(0.85 0.13 75 / 0.18); color: var(--cc-warn); }
.cc-trade-grade.grade-D, .cc-trade-grade.grade-F { background: oklch(0.55 0.20 25 / 0.18); color: var(--cc-neg); }
.cc-trade-pnl { font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-trade-pnl.pos { color: var(--cc-pos); }
.cc-trade-pnl.neg { color: var(--cc-neg); }

.cc-lessons { display: flex; flex-direction: column; gap: 5px; }
.cc-lesson {
  display: grid; grid-template-columns: 1fr 50px 50px;
  gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.35);
  font-family: var(--cc-mono); font-size: 11px;
}
.cc-lesson-stat { color: var(--cc-fg-3); font-size: 10px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════
   RIGHT RAIL
   ═══════════════════════════════════════════════════════════════════ */
.cc-rail {
  display: flex; flex-direction: column; gap: var(--gap);
  align-self: flex-start;
  position: sticky; top: var(--gap);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.cc-rail::-webkit-scrollbar { width: 5px; }
.cc-rail::-webkit-scrollbar-thumb { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08); border-radius: 99px; }
.cc-rail-card { padding: 14px 16px; }
.cc-alert-list { display: flex; flex-direction: column; gap: 6px; }
.cc-alert-row {
  padding: 8px 10px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  font-family: var(--cc-mono); font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   MACRO STRIP
   ═══════════════════════════════════════════════════════════════════ */
.cc-macro-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   LEVELS + SETUPS + NEWS
   ═══════════════════════════════════════════════════════════════════ */
.cc-level-list, .cc-setup-list, .cc-macro-list, .cc-news-list { display: flex; flex-direction: column; gap: 5px; }
.cc-level-row, .cc-setup-row, .cc-macro-row, .cc-news-row {
  display: grid; grid-template-columns: 70px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.35);
  font-family: var(--cc-mono); font-size: 11px;
  transition: background 0.18s;
}
.cc-news-row { grid-template-columns: 60px 1fr; }
.cc-level-row:hover, .cc-setup-row:hover, .cc-news-row:hover { background: oklch(0.10 0.004 var(--cc-accent-h) / 0.50); }
.cc-level-row .cc-k, .cc-setup-row .cc-k, .cc-news-row .cc-k {
  font-size: 9px; letter-spacing: 0.10em; color: var(--cc-fg-3); font-weight: 700;
}
.cc-level-row .cc-v, .cc-setup-row .cc-v { color: var(--cc-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-level-strength { font-size: 9px; color: var(--cc-fg-3); }

/* ═══════════════════════════════════════════════════════════════════
   LINK LIST
   ═══════════════════════════════════════════════════════════════════ */
.cc-link-list { display: flex; flex-direction: column; gap: 6px; }
.cc-link-row {
  display: block; padding: 12px 14px; border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 12px;
  color: var(--cc-fg-2);
}
.cc-link-row:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08);
  color: var(--cc-fg);
  border-color: var(--cc-border-2);
}

/* ═══════════════════════════════════════════════════════════════════
   SHEET (symbol picker, customize drawer)
   ═══════════════════════════════════════════════════════════════════ */
.cc-sheet {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.cc-sheet[hidden] { display: none; }
.cc-sheet-backdrop {
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cc-fade-in 0.22s ease-out;
}
@keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cc-sheet-panel {
  position: relative;
  width: 480px; max-width: 92vw;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, oklch(0.18 0.005 var(--cc-accent-h) / 0.95), oklch(0.10 0.004 var(--cc-accent-h) / 0.98));
  border: 1px solid var(--cc-border-2);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  animation: cc-sheet-in 0.32s cubic-bezier(.2,.8,.2,1);
  max-height: 85vh; overflow-y: auto;
}
@keyframes cc-sheet-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.cc-symbol-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cc-symbol-quick button {
  padding: 12px; border-radius: 8px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700;
  color: var(--cc-fg);
}
.cc-symbol-quick button:hover { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.14); }

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMIZE DRAWER
   ═══════════════════════════════════════════════════════════════════ */
.cc-customize-section { margin-bottom: 18px; }
.cc-customize-section:last-child { margin-bottom: 0; }
.cc-customize-section h4 {
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--cc-fg-2); margin-bottom: 8px;
}
/* Theme picker - bigger swatches with name label, atmospheric preview */
.cc-theme-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.cc-theme-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  border-radius: 8px;
  border: 1px solid var(--cc-border-2);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s, box-shadow 0.22s;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.cc-theme-swatch > span {
  display: block;
  position: relative; z-index: 2;
  padding: 4px 6px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600;
  color: oklch(0.97 0.005 250);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.7);
  letter-spacing: 0.01em;
}
.cc-theme-swatch:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--cc-border-3);
  box-shadow: 0 8px 22px -8px oklch(0 0 0 / 0.5);
}
.cc-theme-swatch.is-active {
  border-color: var(--cc-fg);
  box-shadow: 0 0 0 1px var(--cc-fg), 0 8px 22px -6px var(--cc-fg);
}
/* Subtle animated gradient on each swatch - gives a hint of the
   theme's actual atmosphere without running the full effect. */
.cc-theme-swatch[data-theme="default"]  { background: linear-gradient(135deg, oklch(0.32 0.005 250), oklch(0.16 0.005 250)); }
.cc-theme-swatch[data-theme="slate"]    { background: linear-gradient(135deg, oklch(0.42 0.004 250), oklch(0.16 0.004 250)); }
.cc-theme-swatch[data-theme="midnight"] {
  background:
    radial-gradient(ellipse at 30% 20%, oklch(0.45 0.20 280 / 0.7) 0%, transparent 60%),
    linear-gradient(135deg, oklch(0.20 0.10 268), oklch(0.06 0.04 268));
}
.cc-theme-swatch[data-theme="sunset"] {
  background: linear-gradient(180deg, oklch(0.55 0.20 25) 0%, oklch(0.30 0.18 12) 60%, oklch(0.10 0.06 350) 100%);
}
.cc-theme-swatch[data-theme="blossom"] {
  background:
    radial-gradient(circle at 25% 30%, oklch(0.60 0.18 350 / 0.7) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, oklch(0.55 0.16 320 / 0.6) 0%, transparent 55%),
    linear-gradient(135deg, oklch(0.20 0.08 340), oklch(0.10 0.04 340));
}
.cc-theme-swatch[data-theme="cyber"] {
  background:
    repeating-linear-gradient(0deg, oklch(0.95 0.12 195 / 0.10) 0px, oklch(0.95 0.12 195 / 0.10) 1px, transparent 1px, transparent 4px),
    linear-gradient(135deg, oklch(0.18 0.10 220), oklch(0.06 0.04 280));
}
.cc-theme-swatch[data-theme="forest"] {
  background:
    radial-gradient(ellipse at 30% 30%, oklch(0.40 0.18 145 / 0.7) 0%, transparent 60%),
    linear-gradient(135deg, oklch(0.20 0.08 150), oklch(0.06 0.03 150));
}
.cc-theme-swatch[data-theme="ocean"] {
  background:
    radial-gradient(ellipse at 35% 40%, oklch(0.45 0.22 215 / 0.7) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.18 0.10 225), oklch(0.04 0.02 240));
}
.cc-theme-swatch[data-theme="ember"] {
  background:
    radial-gradient(circle at 50% 100%, oklch(0.55 0.25 25 / 0.85) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.10 0.04 15), oklch(0.05 0.03 15));
}
.cc-theme-swatch[data-theme="frost"] {
  background:
    radial-gradient(ellipse at 50% 0%, oklch(0.65 0.10 200 / 0.6) 0%, transparent 55%),
    linear-gradient(135deg, oklch(0.30 0.05 215), oklch(0.10 0.02 215));
}
.cc-theme-swatch[data-theme="vapor"] {
  background:
    repeating-linear-gradient(90deg, oklch(0.95 0.20 320 / 0.10) 0px, oklch(0.95 0.20 320 / 0.10) 1px, transparent 1px, transparent 8px),
    linear-gradient(180deg, oklch(0.15 0.08 290) 0%, oklch(0.10 0.10 320) 60%, oklch(0.20 0.18 350) 100%);
}

.cc-segmented {
  display: inline-flex; gap: 3px;
  padding: 3px; border-radius: 99px;
  background: var(--cc-glass);
  border: 1px solid var(--cc-border-1);
}
.cc-segmented button {
  padding: 6px 12px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--cc-fg-3);
  transition: background 0.15s, color 0.15s;
}
.cc-segmented button:hover { color: var(--cc-fg); }
.cc-segmented button.is-active {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  color: var(--cc-fg);
}

.cc-toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  font-family: var(--cc-mono); font-size: 12px; color: var(--cc-fg);
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-toggle-row:last-child { border-bottom: 0; }
.cc-toggle {
  position: relative; width: 38px; height: 22px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.22s;
}
.cc-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--cc-fg-2);
  transition: transform 0.22s, background 0.22s;
}
.cc-toggle.is-on { background: oklch(0.65 0.18 145 / 0.40); }
.cc-toggle.is-on::after { transform: translateX(16px); background: var(--cc-pos); }

/* ════════════════════════════════════════════════════════════════════
   ORDERFLOW TERMINAL  (data-view="terminal")
   Single-screen 4-panel institutional layout.
   Grid:
     [chart      ][footprint]
     [chart      ][dom      ]
     [chart      ][signals  ]
     [tape strip - full width                ]
   ════════════════════════════════════════════════════════════════════ */
.cc-tx {
  display: flex; flex-direction: column;
  gap: 8px;
  height: calc(100vh - var(--top-h, 56px) - 28px);
  min-height: 700px;
}
.cc-tx-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  border: 1px solid var(--cc-border-1);
  border-radius: 8px;
  font-family: var(--cc-mono);
}
.cc-tx-head-l { display: flex; align-items: center; gap: 16px; }
.cc-tx-head-r { display: flex; align-items: center; gap: 8px; }
.cc-tx-symbol {
  font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--cc-fg);
}
.cc-tx-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--cc-fg-3);
  letter-spacing: 0.08em;
}
.cc-tx-meta b { color: var(--cc-fg-2); font-weight: 600; }
.cc-tx-meta-sep {
  display: inline-block; width: 1px; height: 12px;
  background: var(--cc-border-1); margin: 0 6px;
}
.cc-tx-modes {
  display: inline-flex; padding: 2px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.45);
  border: 1px solid var(--cc-border-1);
  border-radius: 99px;
}
.cc-tx-mode {
  padding: 4px 12px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--cc-fg-3); background: transparent; cursor: pointer;
  transition: 0.16s ease;
}
.cc-tx-mode:hover { color: var(--cc-fg); }
.cc-tx-mode.is-active {
  background: var(--cc-glass-2); color: var(--cc-fg);
  box-shadow: inset 0 0 0 1px var(--cc-border-2);
}
.cc-tx-tf {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.45);
  border: 1px solid var(--cc-border-1);
  border-radius: 99px;
}
.cc-tx-tf-pill {
  padding: 4px 10px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--cc-fg-3); background: transparent; cursor: pointer;
  transition: 0.16s ease;
}
.cc-tx-tf-pill:hover { color: var(--cc-fg); }
.cc-tx-tf-pill.is-active {
  background: var(--cc-glass-2); color: var(--cc-fg);
}
.cc-tx-pill {
  padding: 5px 12px; border-radius: 6px;
  background: var(--cc-glass); border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-2);
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.14em; font-weight: 600;
  cursor: pointer; transition: 0.16s ease;
}
.cc-tx-pill:hover { color: var(--cc-fg); border-color: var(--cc-border-2); }
.cc-tx-pill-mini { padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.12em; }
.cc-tx-ws-select {
  appearance: none;
  background-image: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  padding-right: 22px;
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 8px;
}
.cc-tx-pill-mini.is-active {
  background: oklch(from var(--cc-accent) l c h / 0.18);
  border-color: var(--cc-accent); color: var(--cc-accent);
}

.cc-tx-grid {
  flex: 1 1 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: 1.4fr 1fr 1fr 56px 160px;
  grid-template-areas:
    "chart   footprint"
    "chart   dom"
    "chart   signals"
    "tape    tape"
    "heatmap heatmap";
  min-height: 0;
}
@media (max-width: 1100px) {
  .cc-tx-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 350px 240px 240px 220px 56px 160px;
    grid-template-areas: "chart" "footprint" "dom" "signals" "tape" "heatmap";
  }
}
.cc-tx-chart     { grid-area: chart; }
.cc-tx-footprint { grid-area: footprint; }
.cc-tx-dom       { grid-area: dom; }
.cc-tx-signals   { grid-area: signals; }
.cc-tx-tape      { grid-area: tape; }
.cc-tx-heatmap   { grid-area: heatmap; }

.cc-tx-panel {
  background: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  border: 1px solid var(--cc-border-1);
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.cc-tx-panel-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.42);
  border-bottom: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--cc-fg-2); font-weight: 700;
  flex: 0 0 auto;
}
.cc-tx-panel-status { font-size: 9px; color: var(--cc-fg-3); letter-spacing: 0.10em; }
.cc-tx-canvas { flex: 1 1 0; width: 100%; height: 100%; display: block; }

/* Footprint pattern badges strip ─────────────────────────── */
.cc-tx-fp-patterns {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  padding: 4px 8px;
  border-bottom: 1px solid var(--cc-border-1);
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.30);
  flex: 0 0 auto;
  min-height: 26px;
  scrollbar-width: thin;
}
.cc-tx-fp-patterns:empty::before {
  content: 'No footprint patterns detected in last 8 bars';
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.10em;
  color: var(--cc-fg-3); padding: 3px 0;
}
.cc-tx-fp-pat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: oklch(0.10 0.003 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--cc-fg-2); white-space: nowrap;
  cursor: pointer; transition: 0.16s ease;
  flex: 0 0 auto;
}
.cc-tx-fp-pat:hover { background: oklch(0.16 0.003 var(--cc-accent-h) / 0.75); color: var(--cc-fg); }
.cc-tx-fp-pat.is-bull  { color: oklch(0.78 0.16 145); border-color: oklch(0.65 0.18 145 / 0.40); }
.cc-tx-fp-pat.is-bear  { color: oklch(0.72 0.20 25);  border-color: oklch(0.55 0.20 25 / 0.40); }
.cc-tx-fp-pat .cc-tx-fp-pat-conf { color: var(--cc-fg-3); font-size: 8.5px; }

.cc-tx-dom-body { flex: 1 1 0; overflow-y: auto; font-family: var(--cc-mono); font-size: 11px; padding: 4px 0; }
.cc-tx-dom-row {
  display: grid; grid-template-columns: 1fr 70px 1fr; gap: 6px;
  padding: 2px 12px; position: relative; align-items: center;
}
.cc-tx-dom-row.is-best { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.04); }
.cc-tx-dom-bid { justify-content: flex-end; color: oklch(0.78 0.16 145); display: flex; align-items: center; padding: 1px 6px; min-height: 18px; position: relative; }
.cc-tx-dom-ask { justify-content: flex-start; color: oklch(0.72 0.20 25); display: flex; align-items: center; padding: 1px 6px; min-height: 18px; position: relative; }
.cc-tx-dom-bidbar, .cc-tx-dom-askbar {
  position: absolute; top: 0; bottom: 0; pointer-events: none; opacity: 0.20;
}
.cc-tx-dom-bidbar { right: 0; background: linear-gradient(90deg, transparent, oklch(0.65 0.18 145)); }
.cc-tx-dom-askbar { left: 0; background: linear-gradient(90deg, oklch(0.55 0.20 25), transparent); }
.cc-tx-dom-px { text-align: center; color: var(--cc-fg-2); font-weight: 600; }
.cc-tx-dom-px.is-spread { color: var(--cc-fg-3); font-size: 9px; letter-spacing: 0.16em; }
/* Pull/stack flash + iceberg marker */
.cc-tx-dom-row.is-stack { animation: cc-tx-stack 0.55s ease-out; }
.cc-tx-dom-row.is-pull  { animation: cc-tx-pull  0.55s ease-out; }
.cc-tx-dom-row.is-iceberg .cc-tx-dom-px { color: oklch(0.78 0.18 280); }
.cc-tx-dom-icetag {
  display: inline-block; margin: 0 4px;
  color: oklch(0.78 0.18 280);
  font-weight: 700; font-size: 9px;
  text-shadow: 0 0 6px oklch(0.78 0.18 280 / 0.55);
}
@keyframes cc-tx-stack {
  0%   { background: oklch(0.65 0.18 145 / 0.30); }
  100% { background: transparent; }
}
@keyframes cc-tx-pull {
  0%   { background: oklch(0.55 0.20 25 / 0.30); }
  100% { background: transparent; }
}

.cc-tx-signals-filter { display: flex; gap: 3px; }
.cc-tx-signals-body { flex: 1 1 0; overflow-y: auto; padding: 6px 8px; }
.cc-tx-signals-empty {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); padding: 16px; text-align: center;
}
.cc-tx-sig {
  padding: 8px 10px; margin-bottom: 6px;
  background: oklch(0.10 0.003 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  border-left-width: 3px;
  border-radius: 4px;
  cursor: pointer; transition: 0.16s ease;
  animation: cc-tx-sig-in 0.32s cubic-bezier(.2,.9,.3,1.05);
}
.cc-tx-sig:hover { background: oklch(0.14 0.003 var(--cc-accent-h) / 0.65); }
.cc-tx-sig.side-long  { border-left-color: oklch(0.65 0.18 145); }
.cc-tx-sig.side-short { border-left-color: oklch(0.55 0.20 25); }
.cc-tx-sig.side-neutral { border-left-color: var(--cc-border-3); }
.cc-tx-sig-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.cc-tx-sig-kind { color: var(--cc-fg); font-weight: 700; }
.cc-tx-sig-conf {
  padding: 1px 6px; border-radius: 99px;
  background: var(--cc-glass);
  border: 1px solid var(--cc-border-1);
  font-size: 9px;
}
.cc-tx-sig-conf.is-high { color: oklch(0.78 0.16 145); border-color: oklch(0.65 0.18 145 / 0.40); }
.cc-tx-sig-conf.is-mid  { color: var(--cc-fg-2); }
.cc-tx-sig-conf.is-low  { color: var(--cc-fg-3); }
.cc-tx-sig-narr { font-size: 11px; line-height: 1.5; color: var(--cc-fg-2); }
.cc-tx-sig-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--cc-mono); font-size: 9px;
  color: var(--cc-fg-3); letter-spacing: 0.10em;
}
.cc-tx-sig-meta b { color: var(--cc-fg-2); }
@keyframes cc-tx-sig-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-tx-tape-body {
  flex: 1 1 0; overflow-x: auto; overflow-y: hidden;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 4px;
  padding: 0 12px; white-space: nowrap;
}
.cc-tx-tape-print {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px;
  font-family: var(--cc-mono); font-size: 11px;
  background: oklch(0.10 0.003 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  flex: 0 0 auto;
}
.cc-tx-tape-print.is-buy  { color: oklch(0.78 0.16 145); border-color: oklch(0.65 0.18 145 / 0.30); }
.cc-tx-tape-print.is-sell { color: oklch(0.72 0.20 25);  border-color: oklch(0.55 0.20 25 / 0.30); }
.cc-tx-tape-print b { font-weight: 700; }

/* Alert composer modal ──────────────────────────────────── */
.cc-tx-alerts-modal {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cc-tx-alerts-modal[hidden] { display: none; }
.cc-tx-alerts-card {
  width: 600px; max-width: 100%; max-height: 80vh;
  background: linear-gradient(180deg, var(--cc-glass-2), var(--cc-glass));
  border: 1px solid var(--cc-border-2);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.65);
}
.cc-tx-alerts-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-tx-alerts-body {
  padding: 14px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-tx-alerts-help {
  font-size: 12px; line-height: 1.6; color: var(--cc-fg-2);
  margin: 0; padding: 10px; background: oklch(0.05 0.002 var(--cc-accent-h) / 0.45);
  border-left: 2px solid var(--cc-border-3); border-radius: 4px;
}
.cc-tx-alerts-help code {
  font-family: var(--cc-mono); font-size: 11px;
  background: var(--cc-glass); padding: 1px 6px; border-radius: 3px;
  color: var(--cc-fg);
}
.cc-tx-alerts-vocab summary {
  cursor: pointer; font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); letter-spacing: 0.10em; padding: 4px 0;
}
.cc-tx-alerts-vocab-grid {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: var(--cc-fg-2); padding: 8px 0;
  font-family: var(--cc-mono);
}
.cc-tx-alerts-vocab-grid b { color: var(--cc-fg); }
.cc-tx-alerts-form {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px; border-top: 1px dashed var(--cc-border-1);
}
.cc-tx-alerts-form textarea.cc-input {
  font-family: var(--cc-mono); font-size: 12px; resize: vertical;
}
.cc-tx-alerts-status {
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-3);
  padding: 4px 0; min-height: 20px;
}
.cc-tx-alerts-status.is-ok  { color: oklch(0.78 0.16 145); }
.cc-tx-alerts-status.is-err { color: oklch(0.72 0.20 25); }
.cc-tx-alerts-actions { display: flex; gap: 8px; margin-top: 4px; }
.cc-tx-alerts-list-h {
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cc-fg-3);
  padding-top: 8px; border-top: 1px dashed var(--cc-border-1);
}
.cc-tx-alerts-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cc-tx-alerts-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: oklch(0.10 0.003 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1); border-radius: 4px;
  font-size: 12px;
}
.cc-tx-alerts-row-name { font-weight: 600; color: var(--cc-fg); flex: 0 0 140px; }
.cc-tx-alerts-row-expr {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-tx-alerts-row-meta { font-family: var(--cc-mono); font-size: 9.5px; color: var(--cc-fg-3); }
.cc-tx-alerts-row-del {
  background: transparent; border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-3); padding: 2px 8px; border-radius: 4px;
  cursor: pointer; font-size: 11px;
}
.cc-tx-alerts-row-del:hover { color: oklch(0.72 0.20 25); border-color: oklch(0.55 0.20 25 / 0.40); }

/* ── Automation schedule rows (Settings → Automation card) ────── */
.cc-auto-row {
  border-top: 1px dashed var(--cc-border-1);
  padding: 12px 0 14px;
}
.cc-auto-row:first-of-type { border-top: 0; padding-top: 0; }
.cc-auto-row-head {
  display: flex; align-items: center; gap: 10px;
}
.cc-auto-name {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--cc-fg);
}
.cc-auto-row-body {
  margin-top: 8px; padding-left: 50px;
  display: flex; flex-direction: column; gap: 6px;
}
.cc-auto-status {
  font-family: var(--cc-mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--cc-fg-3);
  margin-top: 4px;
}
.cc-auto-status.is-error { color: var(--cc-neg); }
.cc-auto-status.is-fresh { color: var(--cc-pos); }

/* Input-based on/off toggle (used by automation rows). Hides the
   actual checkbox and styles a sibling slider. */
.cc-toggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.cc-toggle-slider {
  display: inline-block;
  position: relative;
  width: 38px; height: 22px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s;
}
.cc-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--cc-fg-2);
  transition: transform 0.22s, background 0.22s;
}
.cc-toggle input[type="checkbox"]:checked + .cc-toggle-slider {
  background: oklch(0.65 0.18 145 / 0.40);
  border-color: oklch(0.65 0.18 145 / 0.55);
}
.cc-toggle input[type="checkbox"]:checked + .cc-toggle-slider::after {
  transform: translateX(16px);
  background: var(--cc-pos);
}

/* Compact action button + numeric input variants */
.cc-action-btn-mini {
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: 0.10em;
}
.cc-input-mini {
  padding: 3px 6px !important;
  font-size: 11px !important;
  width: 64px; min-width: 64px;
}
.cc-input-label-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SAVED VIEWS DOCK (bottom-right floating)
   ═══════════════════════════════════════════════════════════════════ */
.cc-views-dock {
  position: fixed; right: 20px; bottom: 20px;
  z-index: 90;
  padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(180deg, oklch(0.18 0.005 var(--cc-accent-h) / 0.85), oklch(0.10 0.004 var(--cc-accent-h) / 0.95));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--cc-border-2);
  box-shadow: 0 8px 32px -10px oklch(0 0 0 / 0.55),
              0 0 32px -8px oklch(0.50 0.10 var(--cc-accent-h) / 0.18);
  animation: cc-dock-in 0.4s 0.3s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes cc-dock-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.cc-views-label {
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.20em; font-weight: 700;
  color: var(--cc-fg-3); margin-bottom: 7px; text-align: center;
}
.cc-views-row { display: flex; gap: 5px; }
.cc-preset {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 13px; font-weight: 700;
  color: var(--cc-fg-2);
  position: relative;
}
.cc-preset:hover {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08);
  color: var(--cc-fg);
  border-color: var(--cc-border-3);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px -4px oklch(0.50 0.10 var(--cc-accent-h) / 0.30);
}
.cc-preset.is-saved {
  background: oklch(0.65 0.18 var(--cc-accent-h) / 0.18);
  border-color: oklch(0.65 0.18 var(--cc-accent-h) / 0.40);
  color: var(--cc-info);
}
.cc-preset.is-saved::before {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 99px;
  background: var(--cc-pos);
  box-shadow: 0 0 6px var(--cc-pos);
}
.cc-preset.is-active {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.18);
  border-color: var(--cc-fg);
  color: var(--cc-fg);
  box-shadow: 0 0 18px -4px oklch(0.95 0.003 var(--cc-accent-h) / 0.45);
}
.cc-views-row-actions {
  display: flex; gap: 5px; margin-top: 5px;
}
.cc-views-action {
  flex: 1; padding: 4px 6px; border-radius: 6px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 8px; letter-spacing: 0.10em; font-weight: 700;
  color: var(--cc-fg-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-align: center;
}
.cc-views-action:hover { color: var(--cc-fg); background: oklch(0.95 0.003 var(--cc-accent-h) / 0.08); }
.cc-views-action.is-armed { color: var(--cc-warn); background: oklch(0.85 0.13 75 / 0.10); border-color: oklch(0.85 0.13 75 / 0.30); }

/* Disclaimer strip */
.cc-disclaimer {
  position: relative; z-index: 5;
  padding: 6px var(--gap);
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--cc-fg-3);
  text-align: center;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border-bottom: 1px solid var(--cc-border-1);
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
.cc-toast-host {
  position: fixed; left: 0; right: 0; top: 18px;
  z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.cc-toast {
  pointer-events: auto;
  padding: 10px 18px; border-radius: 99px;
  background: oklch(0.18 0.005 var(--cc-accent-h) / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--cc-fg);
  animation: cc-toast-in 0.3s cubic-bezier(.2,.9,.2,1), cc-toast-out 0.3s 2.4s forwards;
  box-shadow: 0 8px 30px -8px oklch(0 0 0 / 0.55);
}
.cc-toast.err { background: oklch(0.30 0.20 25 / 0.95); border-color: oklch(0.55 0.20 25 / 0.45); }
.cc-toast.ok  { background: oklch(0.30 0.18 145 / 0.95); border-color: oklch(0.65 0.18 145 / 0.45); }
@keyframes cc-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.95); } }
@keyframes cc-toast-out { to { opacity: 0; transform: translateY(-6px) scale(0.95); } }

/* ═══════════════════════════════════════════════════════════════════
   USAGE
   ═══════════════════════════════════════════════════════════════════ */
.cc-usage { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .cc-shell { grid-template-columns: var(--side-w) 1fr; }
  .cc-rail { display: none; }
}
@media (max-width: 900px) {
  .cc-shell { grid-template-columns: 1fr; }
  .cc-side { position: static; max-height: none; }
  .cc-strip { grid-template-columns: repeat(3, 1fr); height: auto; }
  .cc-grid-2, .cc-grid-2-engine, .cc-grid-3 { grid-template-columns: 1fr; }
  .cc-stat-grid.cc-stat-4 { grid-template-columns: repeat(2, 1fr); }
  .cc-plan-row { grid-template-columns: repeat(3, 1fr); }
  .cc-views-dock { right: 12px; bottom: 12px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* When animations toggled off via [data-effects~="no-anim"] */
body[data-effects~="no-anim"] *,
body[data-effects~="no-anim"] *::before,
body[data-effects~="no-anim"] *::after {
  animation-play-state: paused !important;
  animation-duration: 0.001s !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PREF-DRIVEN STYLES (controlled by customize-pro.js)
   ═══════════════════════════════════════════════════════════════════ */

/* Font family preference */
body[data-font="sans"]  { font-family: -apple-system, 'Inter', system-ui, sans-serif; }
body[data-font="serif"] { font-family: 'Source Serif Pro', Georgia, serif; }
body[data-font="mono"] .cc-card,
body[data-font="mono"] .cc-strip-cell,
body[data-font="mono"] .cc-watch-row { font-family: var(--cc-mono); }

/* Radius preference */
body[data-radius="sharp"]  { --radius: 0; --radius-sm: 0; }
body[data-radius="round"]  { --radius: 18px; --radius-sm: 10px; }
body[data-radius="pill"]   { --radius: 22px; --radius-sm: 14px; }

/* Card shadow */
body[data-card-shadow="off"] .cc-card     { box-shadow: none !important; }
body[data-card-shadow="subtle"] .cc-card  { box-shadow: 0 1px 3px oklch(0 0 0 / 0.30); }
body[data-card-shadow="dramatic"] .cc-card{ box-shadow: 0 12px 40px -8px oklch(0 0 0 / 0.55), 0 0 30px -8px oklch(0.50 0.10 var(--cc-accent-h) / 0.20); }

/* High contrast mode */
body[data-contrast="high"] {
  --cc-fg-2: oklch(0.95 0.003 250 / 0.85);
  --cc-fg-3: oklch(0.95 0.003 250 / 0.65);
  --cc-border-1: oklch(0.95 0.003 250 / 0.18);
  --cc-border-2: oklch(0.95 0.003 250 / 0.30);
  --cc-border-3: oklch(0.95 0.003 250 / 0.40);
}

/* Light color mode */
body[data-colour="light"] {
  --cc-bg-0: oklch(0.96 0.003 250);
  --cc-bg-1: oklch(0.92 0.003 250);
  --cc-bg-2: oklch(0.88 0.005 250);
  --cc-fg:   oklch(0.15 0.003 250);
  --cc-fg-2: oklch(0.30 0.003 250);
  --cc-fg-3: oklch(0.50 0.003 250);
  background: oklch(0.96 0.003 250);
  color: oklch(0.15 0.003 250);
}

/* Color blindness modes - channel rotations */
body[data-cb="deuteranopia"] { filter: hue-rotate(-12deg) saturate(1.15); }
body[data-cb="protanopia"]   { filter: hue-rotate(-20deg) saturate(1.15); }
body[data-cb="tritanopia"]   { filter: hue-rotate(40deg) saturate(1.15); }

/* Reduce transparency - opaque backgrounds */
body[data-effects~="reduce-trans"] .cc-card,
body[data-effects~="reduce-trans"] .cc-top,
body[data-effects~="reduce-trans"] .cc-tabbar,
body[data-effects~="reduce-trans"] .cc-views-dock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: oklch(0.10 0.004 var(--cc-accent-h) / 0.99) !important;
}

/* Privacy mode - blur PnL/dollar amounts */
body[data-effects~="blur-pnl"] .cc-trade-pnl,
body[data-effects~="blur-pnl"] #ccUsageTokens,
body[data-effects~="blur-pnl"] #ccJPnl,
body[data-effects~="blur-pnl"] [data-privacy="pnl"] {
  filter: blur(5px);
  transition: filter 0.18s;
}
body[data-effects~="blur-pnl"] .cc-trade-pnl:hover,
body[data-effects~="blur-pnl"] [data-privacy="pnl"]:hover { filter: blur(0); }

/* Cursor highlight - soft glow follow */
body[data-effects~="cursor-glow"] {
  cursor: crosshair;
}

/* No-glow mode - strip colored shadows */
body[data-effects~="no-glow"] *,
body[data-effects~="no-glow"] *::before,
body[data-effects~="no-glow"] *::after {
  box-shadow: none !important;
}

/* Hidden card */
.cc-card.is-hidden, .cc-rail.is-hidden, .cc-news-ticker.is-hidden,
.cc-disclaimer.is-hidden, .cc-views-dock.is-hidden { display: none !important; }

/* Modern Terminal widget grid */
.cc-mt-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.cc-mt-widget {
  grid-column: span 6;
  padding: 12px 14px;
  border-radius: 10px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
  transition: border-color 0.18s, box-shadow 0.22s;
}
.cc-mt-widget:hover {
  border-color: var(--cc-border-2);
  box-shadow: 0 0 18px -8px oklch(0.50 0.10 var(--cc-accent-h) / 0.25);
}
.cc-mt-widget[data-widget="overview"]  { grid-column: span 12; }
.cc-mt-widget[data-widget="exposure"]  { grid-column: span 6; }
.cc-mt-widget[data-widget="strikes"]   { grid-column: span 12; }

/* Cloned/imported cards on the customised tab carry data-custom-span
   set by _cloneCard based on the source card's natural width. These
   selectors let CSS pick up the right span without inline-style
   specificity wars and keep the 900px-breakpoint collapse working. */
.cc-mt-grid > [data-custom-span="3"]  { grid-column: span 3; }
.cc-mt-grid > [data-custom-span="4"]  { grid-column: span 4; }
.cc-mt-grid > [data-custom-span="6"]  { grid-column: span 6; }
.cc-mt-grid > [data-custom-span="8"]  { grid-column: span 8; }
.cc-mt-grid > [data-custom-span="12"] { grid-column: span 12; }
@media (max-width: 1280px) {
  .cc-mt-grid > [data-custom-span="3"]  { grid-column: span 4; }
  .cc-mt-grid > [data-custom-span="4"]  { grid-column: span 6; }
  .cc-mt-grid > [data-custom-span="8"]  { grid-column: span 12; }
}

/* Brief sections - 24 reorderable cards */
.cc-brief-sections { display: flex; flex-direction: column; gap: 10px; }
.cc-brief-section { transition: transform 0.18s, box-shadow 0.22s, opacity 0.18s; }
.cc-brief-section.is-dragging {
  opacity: 0.55; cursor: grabbing;
  box-shadow: 0 10px 28px -8px oklch(0 0 0 / 0.6);
}
.cc-brief-section.is-drag-over {
  box-shadow: 0 0 0 2px oklch(0.65 0.18 var(--cc-accent-h) / 0.45);
}
.cc-drag-handle {
  display: inline-block; cursor: grab; user-select: none;
  color: var(--cc-fg-3); margin-right: 4px; letter-spacing: -1px;
  transition: color 0.15s;
}
.cc-drag-handle:hover { color: var(--cc-fg); }
.cc-drag-handle:active { cursor: grabbing; }
.cc-brief-body {
  font-family: var(--cc-mono); font-size: 12px; line-height: 1.55;
  color: var(--cc-fg); padding: 6px 0 0;
  white-space: pre-wrap; word-wrap: break-word;
}

@media (max-width: 900px) {
  .cc-mt-widget, .cc-mt-widget[data-widget] { grid-column: span 12; }
  /* On narrow viewports, all custom-span clones go full-width too
     so they stay readable. */
  .cc-mt-grid > [data-custom-span] { grid-column: span 12; }
}

/* Customize sheet - make it taller for the expanded prefs */
#ccCustomizeSheet .cc-sheet-panel { width: 560px; max-height: 90vh; }

/* Customize section nav (tabs at top of drawer) */
.cc-prefs-tabs {
  display: flex; gap: 3px;
  padding: 3px; border-radius: 99px;
  background: var(--cc-glass);
  border: 1px solid var(--cc-border-1);
  margin-bottom: 16px; overflow-x: auto;
}
.cc-prefs-tabs::-webkit-scrollbar { display: none; }
.cc-prefs-tab {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 99px;
  font-family: var(--cc-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cc-fg-3);
}
.cc-prefs-tab:hover { color: var(--cc-fg); }
.cc-prefs-tab.is-active { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); color: var(--cc-fg); }
.cc-prefs-section { display: none; }
.cc-prefs-section.is-active { display: block; animation: cc-fade-in 0.22s; }

/* Slider styling */
.cc-pref-slider {
  width: 100%; height: 26px;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.cc-pref-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
}
.cc-pref-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--cc-fg);
  margin-top: -6px;
  box-shadow: 0 0 10px -2px var(--cc-fg);
  cursor: pointer;
}
.cc-pref-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--cc-fg); border: 0;
  cursor: pointer;
}

/* Pref row (label + control) */
.cc-pref-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0;
  font-family: var(--cc-mono); font-size: 11px;
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-pref-row:last-child { border-bottom: 0; }
.cc-pref-row > span:first-child { color: var(--cc-fg); flex: 1; min-width: 0; }
.cc-pref-row .cc-pref-help { font-size: 9px; color: var(--cc-fg-3); display: block; margin-top: 2px; letter-spacing: 0; }
.cc-pref-row select, .cc-pref-row input[type="number"] {
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg);
  padding: 5px 9px; border-radius: 6px;
  font-family: var(--cc-mono); font-size: 11px;
  outline: none;
}
.cc-pref-row input[type="number"] { width: 70px; text-align: right; }

/* Keyboard shortcut input */
.cc-kb-input {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 28px;
  padding: 0 10px; border-radius: 6px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 10px; font-weight: 700;
  color: var(--cc-fg);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.cc-kb-input:hover { border-color: var(--cc-border-3); }
.cc-kb-input.is-recording {
  background: oklch(0.85 0.13 75 / 0.18);
  border-color: oklch(0.85 0.13 75 / 0.45);
  color: var(--cc-warn);
  animation: cc-pulse 1.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   EXEC TAB · Smart Entry, AI Exec Plan, Broker Grid, Stepper, Risk
   ═══════════════════════════════════════════════════════════════════ */
.cc-exec-triple .cc-stat .cc-v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cc-mgmt-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cc-mgmt-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono);
  font-size: 11px;
  color: var(--cc-fg-2);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.cc-mgmt-row:hover { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06); border-color: var(--cc-border-2); }
.cc-mgmt-row input[type="checkbox"] { accent-color: var(--cc-info); width: 14px; height: 14px; }
.cc-mgmt-detail { font-size: 10px; color: var(--cc-fg-3); letter-spacing: 0.06em; }

.cc-plan-thesis {
  padding: 10px 12px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--cc-fg-2);
  min-height: 46px;
}

.cc-confirm-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.cc-confirm-row .cc-action-btn { flex: 1; min-width: 110px; }

/* ═══════ BRACKET STEPPER ═══════ */
.cc-stepper {
  display: flex; align-items: center;
  gap: 0;
  padding: 14px 6px;
  border-radius: 12px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
  margin-top: 6px;
}
.cc-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
  min-width: 80px;
}
.cc-step-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 99px;
  font-family: var(--cc-mono);
  font-size: 12px; font-weight: 700;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg-2);
  transition: background 0.22s, color 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.cc-step-label {
  font-family: var(--cc-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--cc-fg-3);
  font-weight: 700;
}
.cc-step-connector {
  flex: 1; min-width: 24px; height: 1px;
  background: var(--cc-border-1);
  margin: 0 -2px 22px;
}
.cc-step.is-active .cc-step-circle {
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  border-color: var(--cc-info);
  color: var(--cc-fg);
  box-shadow: 0 0 14px -2px var(--cc-info);
  animation: cc-pulse 1.6s ease-in-out infinite;
}
.cc-step.is-active .cc-step-label { color: var(--cc-info); }
.cc-step.is-done .cc-step-circle {
  background: var(--cc-pos-bg, oklch(0.55 0.16 145 / 0.22));
  border-color: var(--cc-pos);
  color: var(--cc-pos);
}
.cc-step.is-done .cc-step-label { color: var(--cc-pos); }
.cc-step.is-done .cc-step-circle::before { content: '✓'; }
.cc-step.is-done .cc-step-circle > * { display: none; }

.cc-stepper-detail {
  margin-top: 10px;
  padding: 10px 12px;
  min-height: 56px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.30);
  border: 1px dashed var(--cc-border-1);
  font-family: var(--cc-mono);
  font-size: 11px;
  color: var(--cc-fg-2);
  line-height: 1.6;
}
.cc-stepper-detail strong { color: var(--cc-fg); }
.cc-stepper-countdown {
  font-family: var(--cc-mono);
  font-size: 36px; font-weight: 800;
  color: var(--cc-info);
  text-align: center;
  letter-spacing: 0.10em;
  animation: cc-pulse 1s ease-in-out infinite;
}

/* ═══════ 13-BROKER GRID ═══════ */
.cc-broker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cc-broker-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  border: 1px solid var(--cc-border-1);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.cc-broker-tile:hover { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06); border-color: var(--cc-border-2); transform: translateY(-1px); }
.cc-broker-name {
  font-family: var(--cc-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--cc-fg);
}
.cc-broker-pill {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--cc-mono);
  font-size: 9px; letter-spacing: 0.14em;
  font-weight: 700;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-3);
}
.cc-broker-pill[data-status="online"] {
  color: var(--cc-pos);
  border-color: oklch(0.55 0.16 145 / 0.45);
  background: oklch(0.55 0.16 145 / 0.18);
}
.cc-broker-pill[data-status="connecting"] {
  color: var(--cc-warn);
  border-color: oklch(0.85 0.13 75 / 0.45);
  background: oklch(0.85 0.13 75 / 0.18);
  animation: cc-pulse 1.4s ease-in-out infinite;
}
.cc-broker-btn {
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--cc-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cc-broker-btn:hover { color: var(--cc-fg); border-color: var(--cc-border-3); background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); }

/* ═══════ RISK BUDGET / FORM LABELS ═══════ */
.cc-risk-label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.cc-risk-label .cc-k { font-family: var(--cc-mono); font-size: 10.5px; letter-spacing: 0.10em; color: var(--cc-fg-2); }
.cc-risk-label input.cc-input {
  width: 140px;
  font-variant-numeric: tabular-nums;
}

/* ═══════ MODAL HELPERS ═══════ */
.cc-sheet-panel-wide { width: 720px; }

.cc-grab-meta {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.45);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono);
}
.cc-grab-meta .cc-k { font-size: 9px; letter-spacing: 0.16em; color: var(--cc-fg-3); }
.cc-grab-meta .cc-v { font-size: 12px; font-weight: 700; color: var(--cc-fg); font-variant-numeric: tabular-nums; }

.cc-grab-steps { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.cc-grab-step {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono);
  font-size: 11px;
  color: var(--cc-fg-2);
}
.cc-grab-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 99px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-size: 9px;
}
.cc-grab-step[data-status="ok"] .cc-grab-step-icon { background: oklch(0.55 0.16 145 / 0.30); border-color: var(--cc-pos); color: var(--cc-pos); }
.cc-grab-step[data-status="err"] .cc-grab-step-icon { background: oklch(0.55 0.20 25 / 0.30); border-color: var(--cc-neg); color: var(--cc-neg); }
.cc-grab-step[data-status="run"] .cc-grab-step-icon { animation: cc-pulse 1.2s ease-in-out infinite; color: var(--cc-info); border-color: var(--cc-info); }
.cc-grab-step-time { font-size: 10px; color: var(--cc-fg-3); font-variant-numeric: tabular-nums; }

.cc-shortcuts-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-family: var(--cc-mono); font-size: 11px;
  max-height: 60vh; overflow-y: auto;
}
.cc-shortcut-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--cc-fg);
  font-weight: 700;
}
.cc-shortcut-action { color: var(--cc-fg-2); align-self: center; }

.cc-outcome-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.cc-outcome-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.45);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-2);
}
.cc-outcome-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--cc-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.50);
  border: 1px solid var(--cc-border-2);
  color: var(--cc-fg-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cc-outcome-btn:hover { color: var(--cc-fg); border-color: var(--cc-border-3); }
.cc-outcome-btn.is-selected[data-out="WIN"]    { background: oklch(0.55 0.16 145 / 0.22); border-color: var(--cc-pos); color: var(--cc-pos); }
.cc-outcome-btn.is-selected[data-out="LOSS"]   { background: oklch(0.55 0.20 25 / 0.22);  border-color: var(--cc-neg); color: var(--cc-neg); }
.cc-outcome-btn.is-selected[data-out="SCRATCH"]{ background: oklch(0.85 0.13 75 / 0.22);  border-color: var(--cc-warn); color: var(--cc-warn); }

.cc-pm-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.cc-pm-field .cc-k { font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--cc-fg-3); }
.cc-pm-field textarea { resize: vertical; }
.cc-pm-output { margin-top: 14px; }

/* ═══════ WALLS TICKER (bottom strip) ═══════ */
.cc-walls-ticker {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center;
  height: 32px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.78);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-top: 1px solid var(--cc-border-1);
  overflow: hidden;
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cc-fg-2);
}
.cc-walls-ticker, .cc-walls-ticker * { line-height: 1; }
.cc-walls-ticker-label {
  flex-shrink: 0;
  padding: 0 14px;
  font-weight: 700; letter-spacing: 0.18em; color: var(--cc-pos);
  border-right: 1px solid var(--cc-border-1);
  background: linear-gradient(90deg, oklch(0.05 0.002 var(--cc-accent-h) / 0.85), transparent);
}
.cc-walls-track {
  display: inline-flex; gap: 32px;
  padding-left: 18px;
  white-space: nowrap;
  animation: cc-walls-scroll 90s linear infinite;
}
.cc-walls-track > span { display: inline-flex; align-items: center; gap: 8px; }
.cc-walls-track > span::before {
  content: '◆'; color: var(--cc-fg-3); font-size: 8px;
}
@keyframes cc-walls-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 920px) {
  .cc-broker-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-stepper { gap: 0; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME ANALYTICAL DEPTH - extensions
   ═══════════════════════════════════════════════════════════════════ */
.cc-stat-grid.cc-stat-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .cc-stat-grid.cc-stat-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Core-7 Radar */
.cc-c7-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}
.cc-c7-canvas {
  display: block;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border-radius: 7px;
  width: 300px; height: 300px;
}
.cc-c7-side { display: flex; flex-direction: column; gap: 6px; }
.cc-c7-bias {
  font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: 0.10em;
}
.cc-c7-contributors {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-2);
}
.cc-c7-contributors li {
  padding: 4px 6px; border-bottom: 1px solid var(--cc-border-1);
}
.cc-c7-contributors li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .cc-c7-wrap { grid-template-columns: 1fr; }
  .cc-c7-canvas { width: 100%; height: auto; max-width: 300px; margin: 0 auto; }
}

/* Volatility Modeling 12-tile grid stays 4x3 - uses cc-stat-4 */
.cc-vm-grid { row-gap: 6px; }

/* 0DTE table */
.cc-zd-wrap { overflow-x: auto; }
.cc-zd-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--cc-mono); font-size: 11px;
}
.cc-zd-table thead th {
  text-align: left; padding: 6px 8px;
  font-size: 9px; letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 700;
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-zd-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--cc-border-1);
  color: var(--cc-fg);
}

/* Footprint Read narrative */
.cc-fp-headline {
  font-family: var(--cc-mono); font-size: 16px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: 0.06em;
  padding: 6px 0 4px;
}
.cc-fp-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-2);
}
.cc-fp-list li {
  padding: 4px 6px; border-bottom: 1px solid var(--cc-border-1);
}
.cc-fp-list li:last-child { border-bottom: 0; }
.cc-fp-tilt {
  font-family: var(--cc-mono); font-size: 12px; color: var(--cc-fg);
  padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RIGHT-RAIL EXTENSIONS
   ═══════════════════════════════════════════════════════════════════ */
.cc-walls-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--cc-mono); font-size: 11px;
}
.cc-walls-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 4px; border-bottom: 1px solid var(--cc-border-1);
  color: var(--cc-fg-2);
}
.cc-walls-list li:last-child { border-bottom: 0; }
.cc-walls-list .cc-empty { justify-content: center; }

.cc-pin-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0;
}
.cc-pin-strip .cc-pin-chip {
  padding: 4px 10px; border-radius: 99px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 10px; color: var(--cc-fg);
  letter-spacing: 0.10em;
}

.cc-topo-canvas {
  display: block; width: 100%; height: 180px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border-radius: 7px;
  margin-top: 8px;
}

.cc-analyst-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.cc-conv-tag {
  padding: 3px 8px; border-radius: 99px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--cc-fg-2); font-weight: 700;
}
.cc-analyst-text {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-2); line-height: 1.5;
  margin: 6px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BRIEFING TAB
   ═══════════════════════════════════════════════════════════════════ */
.cc-briefing-meta {
  font-family: var(--cc-mono); font-size: 10px; color: var(--cc-fg-3);
  letter-spacing: 0.16em; padding: 2px 0 8px;
}
.cc-briefing-text {
  font-family: var(--cc-mono); font-size: 12px; color: var(--cc-fg);
  line-height: 1.55; padding: 4px 0;
  white-space: pre-wrap;
}
.cc-brf-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0 8px;
}
.cc-textarea {
  resize: vertical; min-height: 110px;
  font-family: var(--cc-mono); font-size: 12px;
  line-height: 1.5;
}
.cc-brf-list {
  display: flex; flex-direction: column; gap: 8px;
}
.cc-brf-doc {
  padding: 8px 10px; border-radius: 7px;
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.40);
  border: 1px solid var(--cc-border-1);
}
.cc-brf-doc-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--cc-border-1);
  margin-bottom: 4px;
}
.cc-brf-doc-title {
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700;
  color: var(--cc-fg); flex: 1; letter-spacing: 0.06em;
}
.cc-brf-doc-ts {
  font-family: var(--cc-mono); font-size: 9px; color: var(--cc-fg-3);
  letter-spacing: 0.10em;
}
.cc-brf-doc-text {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-2); line-height: 1.5;
  white-space: pre-wrap;
}

/* ════════════════════════════════════════════════════════════════════
   DEMO MODE BANNER - only visible when <body class="cc-demo">
   ════════════════════════════════════════════════════════════════════ */
.cc-demo-banner {
  display: none;
  position: relative;
  z-index: 50;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--cc-accent) 18%, transparent),
    color-mix(in oklch, var(--cc-accent-2, var(--cc-accent)) 12%, transparent));
  border-bottom: 1px solid color-mix(in oklch, var(--cc-accent) 40%, var(--cc-border-1));
  font-family: var(--cc-sans);
  font-size: 12.5px; color: var(--cc-fg);
  letter-spacing: 0.01em;
}
body.cc-demo .cc-demo-banner { display: flex; }

.cc-demo-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--cc-accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-accent) 25%, transparent);
  animation: cc-demo-pulse 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes cc-demo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.65; }
}
.cc-demo-text { flex: 1; line-height: 1.4; }
.cc-demo-text b { color: var(--cc-accent); font-weight: 700; }
.cc-demo-cta {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--cc-border-2, var(--cc-border-1));
  background: color-mix(in oklch, var(--cc-bg-2) 80%, transparent);
  color: var(--cc-fg);
  font-size: 12px; font-weight: 500;
  text-decoration: none; transition: 0.16s ease;
  flex: none;
}
.cc-demo-cta:hover {
  background: var(--cc-bg-2);
  border-color: var(--cc-accent);
}
.cc-demo-cta-primary {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}
.cc-demo-cta-primary:hover {
  filter: brightness(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .cc-demo-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   TIER LOCKS - 🔒 stamps + blurred upgrade overlay
   ════════════════════════════════════════════════════════════════════ */
.cc-nav-item.is-locked {
  position: relative;
  opacity: 0.62;
}
.cc-nav-item.is-locked:hover { opacity: 0.85; }
.cc-nav-item.is-locked .cc-nav-text {
  color: var(--cc-fg-3);
}
.cc-nav-lock {
  position: absolute;
  top: 4px; right: 4px;
  width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in oklch, var(--cc-accent) 70%, var(--cc-fg-2));
  background: color-mix(in oklch, var(--cc-bg-1) 92%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
.cc-nav-lock svg { width: 10px; height: 10px; }
.cc-nav-item.is-locked:hover .cc-nav-lock {
  color: var(--cc-accent);
}

/* Overlay - appears centered over .cc-main with the locked view
   blurred behind it. Backdrop blur targets the .cc-main siblings only.
   Element itself is fixed-positioned so its z-index ranks above the
   active view but below the demo banner. */
.cc-lock-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 40;
  background: color-mix(in oklch, var(--cc-bg-0) 55%, transparent);
  backdrop-filter: blur(14px) saturate(0.85);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
  animation: cc-lock-fade 0.22s ease;
}
.cc-lock-overlay.is-visible { display: flex; }
@keyframes cc-lock-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cc-lock-card {
  width: min(440px, calc(100% - 32px));
  padding: 32px 28px 26px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--cc-bg-1) 92%, transparent);
  border: 1px solid color-mix(in oklch, var(--cc-accent) 35%, var(--cc-border-1));
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in oklch, var(--cc-accent) 18%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
  text-align: center;
  font-family: var(--cc-sans);
  animation: cc-lock-card-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes cc-lock-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.cc-lock-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--cc-accent) 18%, transparent);
  color: var(--cc-accent);
}
.cc-lock-title {
  font-size: 19px; font-weight: 600;
  color: var(--cc-fg); margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cc-lock-body {
  font-size: 13.5px; color: var(--cc-fg-2);
  line-height: 1.5; margin-bottom: 22px;
}
.cc-lock-actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
}
.cc-lock-cta-primary {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: 9px;
  background: var(--cc-accent); color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--cc-accent);
  transition: 0.16s ease;
}
.cc-lock-cta-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cc-lock-cta-back {
  padding: 9px 16px; border-radius: 9px;
  background: transparent; color: var(--cc-fg-2);
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--cc-border-2, var(--cc-border-1));
  cursor: pointer; transition: 0.16s ease;
  font-family: inherit;
}
.cc-lock-cta-back:hover { color: var(--cc-fg); border-color: var(--cc-fg-3); }

/* When a route is locked, soften the underlying view so it reads
   as "you're not really here". The overlay's backdrop-filter does
   the heavy lifting; this just dampens motion + interactivity. */
body.cc-route-locked .cc-view.is-active {
  pointer-events: none;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════════════
   CLEAN HOME · WORKSPACE LAYOUT
   Replaces the old eye-strain card stack. Spacious sections, minimal
   gridlines, large numbers, plenty of breathing room.
   ════════════════════════════════════════════════════════════════════ */
.cc-workspace-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
.cc-workspace-l { display: flex; align-items: center; gap: 12px; }
.cc-workspace-eye {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--cc-accent);
}
.cc-workspace-hint {
  font-size: 11.5px; color: var(--cc-fg-3); letter-spacing: 0.01em;
}
.cc-workspace-r { display: flex; align-items: center; gap: 8px; }
.cc-ws-presets {
  display: inline-flex;
  border: 1px solid var(--cc-border-1);
  border-radius: 999px;
  padding: 2px;
}
.cc-ws-preset {
  appearance: none; background: transparent; color: var(--cc-fg-2);
  border: 0; padding: 4px 12px; cursor: pointer;
  font-family: var(--cc-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; border-radius: 999px;
  transition: 0.16s ease;
}
.cc-ws-preset:hover { color: var(--cc-fg); }
.cc-ws-preset.is-active {
  background: var(--cc-bg-2); color: var(--cc-fg);
  box-shadow: inset 0 0 0 1px var(--cc-border-2, var(--cc-border-1));
}
.cc-ws-reset {
  appearance: none; background: transparent;
  border: 1px solid var(--cc-border-1); color: var(--cc-fg-2);
  padding: 5px 14px; border-radius: 999px;
  font-family: var(--cc-sans); font-size: 11.5px; cursor: pointer;
  transition: 0.16s ease;
}
.cc-ws-reset:hover { color: var(--cc-fg); border-color: var(--cc-fg-3); }

/* ── Section wrapper ───────────────────────────────────────────── */
.cc-ws-section {
  margin: 0 0 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 50%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  overflow: hidden;
}
.cc-ws-section.is-dragging  { opacity: 0.55; }
.cc-ws-section.is-drop-into { box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-ws-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--cc-border-1);
  background: color-mix(in oklch, var(--cc-bg-1) 35%, transparent);
}
.cc-ws-grip {
  font-size: 14px; color: var(--cc-fg-3); cursor: grab;
  user-select: none; line-height: 1;
}
.cc-ws-grip:active { cursor: grabbing; }
.cc-ws-name {
  flex: 1;
  font-family: var(--cc-mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--cc-accent);
  font-weight: 600;
}
.cc-ws-tag {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3);
}
.cc-ws-tag-link {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--cc-accent);
  cursor: pointer; transition: 0.14s ease;
}
.cc-ws-tag-link:hover { filter: brightness(1.2); text-decoration: underline; }

/* ── Section 1 · OVERVIEW ──────────────────────────────────────── */
.cc-ws-overview-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 22px; flex-wrap: wrap;
}
.cc-ws-em { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-ws-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.20em; color: var(--cc-fg-3);
  text-transform: uppercase;
}
.cc-ws-em-v {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: -0.01em;
}
.cc-ws-em-pct {
  font-family: var(--cc-mono); font-size: 13px;
  color: var(--cc-fg-2); letter-spacing: 0;
}
.cc-ws-overview-right {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.cc-ws-od { display: flex; flex-direction: column; gap: 2px; }
.cc-ws-od-v {
  font-family: var(--cc-mono); font-size: 14px;
  color: var(--cc-fg); font-weight: 700;
}
.cc-ws-od-sub {
  font-family: var(--cc-mono); font-size: 9.5px;
  color: var(--cc-fg-3); letter-spacing: 0.10em;
}
.cc-ws-link {
  appearance: none; background: transparent;
  border: 1px solid var(--cc-border-1); color: var(--cc-fg-2);
  padding: 6px 14px; border-radius: 4px;
  font-size: 11.5px; cursor: pointer;
  transition: 0.16s ease;
}
.cc-ws-link:hover { color: var(--cc-accent); border-color: var(--cc-accent); }

/* ── Section 2 · CORE SNAPSHOT ─────────────────────────────────── */
.cc-ws-core-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0;
}
@media (max-width: 1280px) { .cc-ws-core-grid { grid-template-columns: 1fr; } }
.cc-ws-card {
  padding: 18px 22px;
  border-right: 1px dashed var(--cc-border-1);
}
.cc-ws-card:last-child { border-right: 0; }
@media (max-width: 1280px) {
  .cc-ws-card { border-right: 0; border-bottom: 1px dashed var(--cc-border-1); }
  .cc-ws-card:last-child { border-bottom: 0; }
}
.cc-ws-card-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px;
}
.cc-ws-card-eye {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.20em; color: var(--cc-fg-3);
  font-weight: 600;
}
.cc-ws-card-eye-sub {
  font-family: var(--cc-mono); font-size: 9px;
  letter-spacing: 0.16em; color: var(--cc-fg-3); opacity: 0.6;
}
/* GAMMA REGIME card */
.cc-ws-card-px {
  font-family: var(--cc-mono); font-size: 36px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: -0.02em;
  margin-bottom: 6px; line-height: 1;
}
.cc-ws-card-tag {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--cc-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.cc-ws-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc-neg);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-neg) 25%, transparent);
}
.cc-ws-card-tag.is-long .cc-ws-dot { background: var(--cc-pos); box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-pos) 25%, transparent); }
.cc-ws-card-tag.is-short .cc-ws-tag-txt { color: var(--cc-neg); }
.cc-ws-card-tag.is-long  .cc-ws-tag-txt { color: var(--cc-pos); }
.cc-ws-card-sub {
  font-size: 12.5px; color: var(--cc-fg-2);
  margin-bottom: 12px; font-style: italic;
}
.cc-ws-card-body {
  font-size: 12.5px; color: var(--cc-fg-2);
  line-height: 1.6; margin: 0 0 14px;
}
.cc-ws-card-body b { color: var(--cc-fg); font-weight: 600; }
.cc-ws-card-foot {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-ws-foot-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3);
}
.cc-ws-foot-v {
  font-family: var(--cc-mono); font-size: 14px; font-weight: 700;
  color: var(--cc-fg);
}
.cc-ws-foot-pct {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-pos); margin-left: auto;
}

/* KEY LEVELS card */
.cc-ws-levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin-bottom: 16px;
}
.cc-ws-lv {
  display: flex; flex-direction: column; gap: 4px;
}
.cc-ws-lv-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.cc-ws-pin {
  cursor: pointer; opacity: 0.5; transition: 0.16s ease;
}
.cc-ws-pin:hover, .cc-ws-pin.is-pinned {
  opacity: 1; color: oklch(0.85 0.14 80);
}
.cc-ws-lv-v {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
}
.cc-ws-lv-v.cc-pos { color: var(--cc-pos); }
.cc-ws-lv-v.cc-neg { color: var(--cc-neg); }
.cc-ws-spotdist {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-ws-spot-v {
  font-family: var(--cc-mono); font-size: 13px;
  color: var(--cc-fg-2);
}

/* EXPOSURE & FLOW card */
.cc-ws-exposure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.cc-ws-ex {
  display: flex; flex-direction: column; gap: 4px;
}
.cc-ws-ex-v {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
}
.cc-ws-ex-v.cc-pos { color: var(--cc-pos); }
.cc-ws-ex-v.cc-neg { color: var(--cc-neg); }

/* ── Section 3 · ORDERFLOW SUMMARY ─────────────────────────────── */
.cc-ws-of-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0;
}
@media (max-width: 1280px) { .cc-ws-of-grid { grid-template-columns: 1fr; } }
.cc-ws-of-card { padding: 16px 22px; border-right: 1px dashed var(--cc-border-1); }
.cc-ws-of-card:last-child { border-right: 0; }
.cc-ws-of-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cc-ws-of-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--cc-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em;
  background: color-mix(in oklch, var(--cc-pos) 15%, transparent);
  color: var(--cc-pos);
  border: 1px solid color-mix(in oklch, var(--cc-pos) 30%, transparent);
}
.cc-ws-of-tag.is-neg {
  background: color-mix(in oklch, var(--cc-neg) 15%, transparent);
  color: var(--cc-neg);
  border-color: color-mix(in oklch, var(--cc-neg) 30%, transparent);
}
.cc-ws-of-tag.is-warn {
  background: color-mix(in oklch, oklch(0.78 0.14 60) 15%, transparent);
  color: oklch(0.85 0.14 60);
  border-color: color-mix(in oklch, oklch(0.78 0.14 60) 30%, transparent);
}
.cc-ws-of-cvd {
  font-family: var(--cc-mono); font-size: 13px; font-weight: 700;
  color: var(--cc-fg);
}
.cc-ws-of-mini { margin-top: 4px; height: 64px; }
.cc-ws-of-signals {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--cc-mono); font-size: 11px;
}
.cc-ws-of-sig {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent);
}
.cc-ws-of-sig-tag {
  padding: 2px 6px; border-radius: 3px;
  background: color-mix(in oklch, var(--cc-accent) 15%, transparent);
  color: var(--cc-accent);
  font-size: 9.5px; letter-spacing: 0.10em;
  min-width: 88px; text-align: center;
}
.cc-ws-empty {
  padding: 10px; text-align: center;
  font-size: 11px; color: var(--cc-fg-3); font-style: italic;
}

/* ── Section 4 · MACRO SUMMARY ─────────────────────────────────── */
.cc-ws-macro-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.4fr;
  gap: 0;
}
@media (max-width: 1280px) { .cc-ws-macro-grid { grid-template-columns: 1fr; } }
.cc-ws-macro-card { padding: 16px 22px; border-right: 1px dashed var(--cc-border-1); }
.cc-ws-macro-card:last-child { border-right: 0; }
.cc-ws-tone {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.cc-ws-tone.is-on  { color: var(--cc-pos); }
.cc-ws-tone.is-off { color: var(--cc-neg); }
.cc-ws-tone.is-mix { color: oklch(0.82 0.12 70); }
.cc-ws-tone-sub {
  font-size: 11.5px; color: var(--cc-fg-3); line-height: 1.5;
}
.cc-ws-macro-row {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px;
  font-family: var(--cc-mono); font-size: 12.5px;
  margin-bottom: 10px;
}
.cc-ws-macro-row b { color: var(--cc-fg); font-weight: 700; text-align: right; }
.cc-ws-fomc-bar {
  display: flex; height: 14px;
  border: 1px solid var(--cc-border-1);
  border-radius: 3px; overflow: hidden;
}

/* ── Advanced expander (the OLD home content) ───────────────────── */
.cc-home-advanced {
  margin-top: 18px;
  border: 1px dashed var(--cc-border-1);
  border-radius: 4px;
  background: color-mix(in oklch, var(--cc-bg-0) 30%, transparent);
}
.cc-home-advanced > summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.cc-home-advanced > summary::-webkit-details-marker { display: none; }
.cc-home-advanced > summary::before {
  content: "▶";
  font-size: 9px; color: var(--cc-fg-3);
  transition: transform 0.16s ease;
  margin-right: 4px;
}
.cc-home-advanced[open] > summary::before { transform: rotate(90deg); }
.cc-home-advanced > summary:hover { background: color-mix(in oklch, var(--cc-bg-1) 40%, transparent); }
.cc-home-advanced .cc-ws-eye {
  font-family: var(--cc-mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--cc-fg-2); font-weight: 600;
}
.cc-home-advanced .cc-ws-hint {
  font-size: 11px; color: var(--cc-fg-3); flex: 1;
}
.cc-home-advanced[open] {
  background: color-mix(in oklch, var(--cc-bg-1) 30%, transparent);
}
.cc-home-advanced > *:not(summary) {
  margin: 8px 12px 12px;
}

/* ════════════════════════════════════════════════════════════════════
   CHARTV2 · TOP TOOLBAR · timeframe + chart-type + theme + settings
   Inserted as a sibling above every ChartV2 canvas.
   ════════════════════════════════════════════════════════════════════ */
.cc-chartv2-toolbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: color-mix(in oklch, var(--cc-bg-1) 55%, transparent);
  border: 1px solid var(--cc-border-1);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-family: var(--cc-mono); font-size: 11px;
  flex-wrap: wrap;
}
.cc-cv2-l, .cc-cv2-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-cv2-title {
  font-family: var(--cc-sans); font-size: 11.5px;
  color: var(--cc-fg-2); letter-spacing: 0;
  margin-right: 4px;
}
.cc-cv2-pills {
  display: inline-flex;
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  padding: 2px;
  background: color-mix(in oklch, var(--cc-bg-2) 60%, transparent);
}
.cc-cv2-pills button {
  appearance: none; background: transparent;
  border: 0; padding: 4px 9px;
  color: var(--cc-fg-3); cursor: pointer;
  font-family: inherit; font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.06em;
  border-radius: 3px;
  transition: 0.14s ease;
}
.cc-cv2-pills button:hover { color: var(--cc-fg); background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent); }
.cc-cv2-pills button.is-active {
  background: color-mix(in oklch, var(--cc-accent) 22%, var(--cc-bg-2));
  color: var(--cc-fg);
}
.cc-cv2-icon {
  appearance: none; background: transparent;
  border: 1px solid var(--cc-border-1); color: var(--cc-fg-3);
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; transition: 0.14s ease;
}
.cc-cv2-icon:hover { color: var(--cc-fg); border-color: var(--cc-accent); }
.cc-cv2-gear:hover { transform: rotate(45deg); }

/* ── Settings dropdown menu ── */
.cc-cv2-menu {
  position: absolute; top: calc(100% + 4px); right: 8px;
  z-index: 30;
  min-width: 220px; padding: 12px;
  background: color-mix(in oklch, var(--cc-bg-1) 95%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cc-border-2, var(--cc-border-1));
  border-radius: 6px;
  box-shadow: 0 18px 48px -12px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 8px;
  animation: cc-cv2-menu-in 0.18s ease;
}
@keyframes cc-cv2-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-cv2-menu-h {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.20em; color: var(--cc-fg-3);
  margin-top: 4px; font-weight: 700;
}
.cc-cv2-menu-h:first-child { margin-top: 0; }
.cc-cv2-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cc-cv2-themes button {
  appearance: none; background: var(--cc-bg-2); color: var(--cc-fg-2);
  border: 1px solid var(--cc-border-1); padding: 6px 8px; border-radius: 4px;
  cursor: pointer; transition: 0.14s ease;
  display: flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 11px; text-transform: capitalize;
}
.cc-cv2-themes button:hover { border-color: var(--cc-accent); color: var(--cc-fg); }
.cc-cv2-themes button.is-active {
  border-color: var(--cc-accent);
  background: color-mix(in oklch, var(--cc-accent) 14%, var(--cc-bg-2));
}
.cc-cv2-swatch {
  width: 16px; height: 14px; border-radius: 3px;
  border: 1px solid color-mix(in oklch, var(--cc-fg-3) 30%, transparent);
}
.cc-cv2-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--cc-fg-2);
  padding: 4px 0; cursor: pointer;
}
.cc-cv2-toggle input { accent-color: var(--cc-accent); }

/* When ChartV2 builds its own toolbar, the canvas should sit flush
   underneath without a duplicate top border. */
.cc-chartv2-toolbar + canvas {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ════════════════════════════════════════════════════════════════════
   QUICK EDGES · research-driven indicators (Vol/Macro/Orderflow/Home)
   ════════════════════════════════════════════════════════════════════ */
/* Vol-tab strip card */
.cc-qedge-card { padding: 0; }
.cc-qedge-card .cc-card-head { padding: 10px 14px; }
.cc-qedge-hint {
  font-size: 10px; color: var(--cc-fg-3);
  letter-spacing: 0.06em;
}
.cc-qedge-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1100px) { .cc-qedge-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .cc-qedge-grid { grid-template-columns: 1fr; } }
.cc-qedge {
  padding: 14px 16px;
  border-right: 1px dashed var(--cc-border-1);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.cc-qedge:last-child { border-right: 0; }
.cc-qedge-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-qedge-v {
  font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: -0.01em;
}
.cc-qedge-v.cc-pos { color: var(--cc-pos); }
.cc-qedge-v.cc-neg { color: var(--cc-neg); }
.cc-qedge-sub {
  font-size: 11px; color: var(--cc-fg-2); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Macro-tab regime cards */
.cc-regime-card .cc-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.cc-regime-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--cc-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  background: color-mix(in oklch, var(--cc-bg-2) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-2);
}
.cc-regime-pill.is-stress  { background: color-mix(in oklch, var(--cc-neg) 16%, transparent); color: var(--cc-neg); border-color: color-mix(in oklch, var(--cc-neg) 30%, transparent); }
.cc-regime-pill.is-warn    { background: color-mix(in oklch, oklch(0.85 0.14 70) 16%, transparent); color: oklch(0.85 0.14 70); border-color: color-mix(in oklch, oklch(0.85 0.14 70) 30%, transparent); }
.cc-regime-pill.is-calm    { background: color-mix(in oklch, var(--cc-pos) 16%, transparent); color: var(--cc-pos); border-color: color-mix(in oklch, var(--cc-pos) 30%, transparent); }
.cc-regime-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; padding: 14px 16px;
}
@media (max-width: 760px) { .cc-regime-row { grid-template-columns: repeat(3, 1fr); } }
.cc-regime-row > div { display: flex; flex-direction: column; gap: 3px; }
.cc-regime-row .cc-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-regime-row b {
  font-family: var(--cc-mono); font-size: 14px; font-weight: 700; color: var(--cc-fg);
}
.cc-regime-narr {
  margin: 0; padding: 10px 16px 14px;
  border-top: 1px dashed var(--cc-border-1);
  font-size: 12px; color: var(--cc-fg-2); line-height: 1.55;
}
/* GPR transmission per-sector heatmap chips */
.cc-gpr-sectors {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 16px 10px;
  font-family: var(--cc-mono);
}
.cc-gpr-sector {
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.06em;
  border: 1px solid var(--cc-border-1);
}
.cc-gpr-sector.is-up   { background: color-mix(in oklch, var(--cc-neg) 16%, transparent); color: var(--cc-neg); border-color: color-mix(in oklch, var(--cc-neg) 30%, transparent); }
.cc-gpr-sector.is-down { background: color-mix(in oklch, var(--cc-pos) 14%, transparent); color: var(--cc-pos); border-color: color-mix(in oklch, var(--cc-pos) 28%, transparent); }
.cc-gpr-sector b { color: var(--cc-fg); }

/* Orderflow-tab quick-edge inline rows under microstructure.
   Was a single tall column of 9 rows that made the Microstructure
   card ~600px tall on its own. Two-column grid on wider widths
   halves the height without removing data; collapses to one column
   on narrow screens. Tighter gap + smaller subtext keep dense
   information readable. */
.cc-of-qedge {
  border-top: 1px dashed var(--cc-border-1);
  margin-top: 10px;
  padding: 8px 10px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 0;
}
@media (max-width: 1100px) {
  .cc-of-qedge { grid-template-columns: 1fr; }
}
.cc-of-qedge-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  font-family: var(--cc-mono); font-size: 11px;
  min-width: 0;
}
.cc-of-qedge-sub {
  font-size: 10px; color: var(--cc-fg-3); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-of-qedge-row .cc-k { min-width: 90px; flex-shrink: 0; }
.cc-of-qedge-row b {
  color: var(--cc-fg); font-size: 12.5px;
  margin-right: 6px;
}
.cc-of-qedge-row b.cc-pos { color: var(--cc-pos); }
.cc-of-qedge-row b.cc-neg { color: var(--cc-neg); }
.cc-of-qedge-chip {
  margin-left: auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.10em;
  background: color-mix(in oklch, oklch(0.85 0.14 70) 14%, transparent);
  color: oklch(0.85 0.14 70);
  border: 1px solid color-mix(in oklch, oklch(0.85 0.14 70) 30%, transparent);
}

/* Home v3 inline quick-edges strip (sits below the existing vol cards) */
.cc-h2-qedge-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 50%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
@media (max-width: 920px) { .cc-h2-qedge-strip { grid-template-columns: 1fr 1fr; } }
.cc-h2-qedge {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--cc-mono);
  min-width: 0;
}
.cc-h2-qedge b {
  font-size: 14px; color: var(--cc-fg); font-weight: 700;
}
.cc-h2-qedge b.cc-pos { color: var(--cc-pos); }
.cc-h2-qedge b.cc-neg { color: var(--cc-neg); }
.cc-h2-qedge span:last-child {
  font-size: 10.5px; color: var(--cc-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN-ONLY ACTIONS · gate the buttons users shouldn\'t see
   Data-regulation actions (chain refresh, AI run, briefing regen) are
   admin-only. The corresponding buttons hide for everyone else.
   Server-side enforces - the body class is purely cosmetic.
   ════════════════════════════════════════════════════════════════════ */
/* ── Tier-feature lock - element-level (not just tab-level)
   Tag any element with data-tier-min="pro|max|admin" and it auto-hides
   for users below that tier. The tier hierarchy mirrors TierLocks:
   demo < starter < pro < max < admin.                                 */
body.cc-tier-demo    [data-tier-min="starter"],
body.cc-tier-demo    [data-tier-min="pro"],
body.cc-tier-demo    [data-tier-min="max"],
body.cc-tier-demo    [data-tier-min="admin"],
body.cc-tier-starter [data-tier-min="pro"],
body.cc-tier-starter [data-tier-min="max"],
body.cc-tier-starter [data-tier-min="admin"],
body.cc-tier-pro     [data-tier-min="max"],
body.cc-tier-pro     [data-tier-min="admin"],
body.cc-tier-max     [data-tier-min="admin"] { display: none !important; }

/* Owner-only elements — strictly hidden from everyone except the
   configured owner email (ADMIN_EMAILS[0] on the server). Used for the
   ML Pipeline tab that surfaces the Python charmcast-ml side project.
   Server-side routes re-check, so removing the body class in devtools
   does NOT bypass the gate — the API will still return owner-only. */
body:not(.cc-is-owner) [data-owner-only] { display: none !important; }

body.cc-not-admin [data-admin-only],
body.cc-not-admin #ccGrabBtn,
body.cc-not-admin #ccAnalyseBtn,
body.cc-not-admin #ccAnRunBtn,
body.cc-not-admin #ccMacroRegenBtn,
body.cc-not-admin #ccPmContextBtn,
body.cc-not-admin #ccHomeArmBtn,
body.cc-not-admin #ccEngArmBtn,
body.cc-not-admin #seExecArmBtn,
body.cc-not-admin #ccPipelineModal,
body.cc-not-admin .cc-pipeline-host { display: none !important; }
/* Show a small read-only badge on the analysis tab where the RUN
   button used to be, so the user understands curation is centralized. */
body.cc-not-admin .cc-an-hero-r::before {
  content: 'CURATED · admin-managed';
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklch, var(--cc-accent) 10%, transparent);
  border: 1px dashed color-mix(in oklch, var(--cc-accent) 40%, var(--cc-border-1));
  color: var(--cc-fg-2);
  font-family: var(--cc-mono); font-size: 10.5px;
  letter-spacing: 0.16em; font-weight: 600;
}
body.cc-not-admin .cc-an-hero-r::after {
  content: '👁';
  margin-left: 6px;
  font-size: 13px; opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL KNOWLEDGE GRAPH · floating action button + overlay
   ════════════════════════════════════════════════════════════════════ */
.cc-graph-fab {
  position: fixed;
  bottom: 64px;
  right: 22px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  background: color-mix(in oklch, var(--cc-accent) 22%, var(--cc-bg-1));
  color: var(--cc-fg);
  border: 1px solid color-mix(in oklch, var(--cc-accent) 50%, var(--cc-border-1));
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in oklch, var(--cc-accent) 14%, transparent);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.2s ease;
  font-family: var(--cc-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.cc-graph-fab:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.12);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.65), 0 0 0 1px color-mix(in oklch, var(--cc-accent) 28%, transparent);
}
.cc-graph-fab svg { color: var(--cc-accent); }
.cc-graph-fab-label { letter-spacing: 0.20em; }

.cc-graph-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  background: color-mix(in oklch, var(--cc-bg-0) 75%, transparent);
  backdrop-filter: blur(20px) saturate(0.85);
  -webkit-backdrop-filter: blur(20px) saturate(0.85);
  display: flex; flex-direction: column;
  animation: cc-graph-overlay-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1.05);
}
.cc-graph-overlay[hidden] { display: none; }
@keyframes cc-graph-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cc-graph-overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: color-mix(in oklch, var(--cc-bg-1) 88%, transparent);
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-graph-overlay-head .cc-eyebrow {
  font-family: var(--cc-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--cc-accent); font-weight: 700;
}
.cc-graph-overlay-meta {
  margin-left: 14px;
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); letter-spacing: 0.10em;
}
.cc-graph-overlay-actions { display: flex; align-items: center; gap: 16px; }
.cc-graph-hint {
  font-size: 11px; color: var(--cc-fg-3); letter-spacing: 0.04em;
}
.cc-graph-overlay-close {
  appearance: none; background: transparent;
  border: 1px solid var(--cc-border-1); color: var(--cc-fg-2);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  font-size: 22px; line-height: 1;
  transition: 0.16s ease;
}
.cc-graph-overlay-close:hover { color: var(--cc-fg); border-color: var(--cc-fg-3); }
.cc-graph-overlay-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
}
@media (max-width: 1080px) {
  .cc-graph-overlay-body { grid-template-columns: 1fr; }
  .cc-graph-overlay-side { display: none; }
}
.cc-graph-overlay-side {
  border-left: 1px solid var(--cc-border-1);
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cc-graph-overlay-side-head {
  padding: 14px 18px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-graph-overlay-side-head .cc-eyebrow {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-graph-overlay-side-body {
  flex: 1; padding: 14px 18px;
  overflow-y: auto;
  font-size: 12px; color: var(--cc-fg-2);
}

/* ── Graph-linked card indicator. Sits in card heads on every box
   that has a node in the knowledge graph. Subtle 3-node "network"
   glyph rendered as a CSS dot trio — no SVG round-trip, scales with
   text, never gets out of sync with theme color. Hover reveals the
   "Open in graph" tooltip via title attribute and brightens.
   Old version was an "⌗" hash mark which read as decorative type
   rather than a link affordance. */
.cc-link-graph {
  appearance: none;
  background: transparent;
  border: 0;
  width: 18px; height: 18px;
  margin-left: 8px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
  transition: 0.14s ease;
  flex: none;
  /* Three small dots in a triangle = "this card has neighbors in the
     network". Constructed entirely with radial-gradient backgrounds
     so the glyph stays crisp at any DPR. */
  background-image:
    radial-gradient(circle at 4px 5px,  currentColor 1.4px, transparent 2px),
    radial-gradient(circle at 14px 5px, currentColor 1.4px, transparent 2px),
    radial-gradient(circle at 9px 13px, currentColor 1.4px, transparent 2px);
  color: var(--cc-fg-3);
}
/* Faint connecting lines drawn via a pseudo-element — keeps the
   glyph readable as "linked nodes" rather than three random dots. */
.cc-link-graph::before {
  content: '';
  position: absolute;
  inset: 4px 3px 4px 3px;
  background:
    linear-gradient(90deg, transparent 1px, currentColor 1px, currentColor calc(100% - 1px), transparent calc(100% - 1px)) top/100% 1px no-repeat,
    linear-gradient(125deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) center/1px 100% no-repeat,
    linear-gradient(55deg,  transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) center/1px 100% no-repeat;
  opacity: 0.30;
  pointer-events: none;
}
.cc-link-graph:hover {
  color: var(--cc-accent);
  transform: scale(1.18);
}
.cc-link-graph:hover::before { opacity: 0.65; }
.cc-link-graph:active { transform: scale(0.94); }

/* ════════════════════════════════════════════════════════════════════
   HOME v3 · 5-section feature summary
   Each section: header + glance content. Generous whitespace,
   muted dividers, only the headline numbers are bright.
   ════════════════════════════════════════════════════════════════════ */
.cc-h2-section {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: color-mix(in oklch, var(--cc-bg-1) 35%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 6px;
}
.cc-h2-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-h2-name {
  font-family: var(--cc-mono); font-size: 11.5px;
  letter-spacing: 0.22em; color: var(--cc-accent);
  font-weight: 700;
}
.cc-h2-meta {
  flex: 1;
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); letter-spacing: 0.04em;
}
.cc-h2-link {
  appearance: none; background: transparent;
  border: 0; padding: 4px 10px; cursor: pointer;
  font-family: var(--cc-mono); font-size: 10.5px;
  color: var(--cc-fg-2); letter-spacing: 0.10em;
  border-radius: 4px;
  transition: 0.14s ease;
}
.cc-h2-link:hover { color: var(--cc-accent); background: color-mix(in oklch, var(--cc-accent) 12%, transparent); }

.cc-h2-card {
  padding: 14px 16px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
.cc-h2-card-wide { grid-column: span 2; }
.cc-h2-card-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.cc-h2-card-head > span:first-child {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-h2-card-sub {
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-3); margin-left: auto; letter-spacing: 0.12em;
}
.cc-h2-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3);
  display: block; margin-bottom: 3px;
}
.cc-h2-empty {
  font-style: italic; font-size: 11.5px; color: var(--cc-fg-3);
  text-align: center; padding: 10px;
}

/* ── Top row: orderflow ⟂ analysis summary ── */
.cc-h2-row-2col {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1280px) {
  .cc-h2-row-2col { grid-template-columns: 1fr; }
}

/* ── ANALYSIS summary card (sits next to orderflow) ── */
.cc-h2-an-section {
  display: flex; flex-direction: column;
}
.cc-h2-an-body {
  display: flex; flex-direction: column;
  gap: 12px;
}
.cc-h2-an-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-h2-an-sym {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: -0.02em;
}
.cc-h2-an-side {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--cc-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  background: color-mix(in oklch, var(--cc-fg-3) 18%, transparent);
  color: var(--cc-fg-2);
  border: 1px solid var(--cc-border-1);
  justify-self: start;
}
.cc-h2-an-side.is-long {
  background: color-mix(in oklch, var(--cc-pos) 16%, transparent);
  color: var(--cc-pos);
  border-color: color-mix(in oklch, var(--cc-pos) 35%, transparent);
}
.cc-h2-an-side.is-short {
  background: color-mix(in oklch, var(--cc-neg) 16%, transparent);
  color: var(--cc-neg);
  border-color: color-mix(in oklch, var(--cc-neg) 35%, transparent);
}
.cc-h2-an-conv { text-align: right; }
.cc-h2-an-conv b {
  display: block;
  font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
  color: var(--cc-fg);
}
.cc-h2-an-sig {
  font-family: var(--cc-mono); font-size: 11px;
  letter-spacing: 0.10em;
  padding: 7px 11px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--cc-bg-2) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-3);
  text-align: center;
}
.cc-h2-an-sig.is-fired {
  background: color-mix(in oklch, var(--cc-accent) 16%, transparent);
  border-color: color-mix(in oklch, var(--cc-accent) 40%, var(--cc-border-1));
  color: var(--cc-accent);
  font-weight: 700;
}
.cc-h2-an-sig.is-watching {
  color: oklch(0.85 0.14 70);
  border-color: color-mix(in oklch, oklch(0.85 0.14 70) 30%, var(--cc-border-1));
}
.cc-h2-an-plan {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
.cc-h2-an-plan b {
  display: block;
  font-family: var(--cc-mono); font-size: 13.5px; font-weight: 700;
  color: var(--cc-fg);
  margin-top: 3px;
}
.cc-h2-an-thesis {
  margin: 0;
  font-size: 12.5px; line-height: 1.6;
  color: var(--cc-fg-2);
}
.cc-h2-an-thesis b { color: var(--cc-fg); font-weight: 600; }
.cc-h2-an-confl-head {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.20em; color: var(--cc-fg-3); font-weight: 600;
  margin-top: 4px;
}
.cc-h2-an-confl {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.cc-h2-an-confl li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 6px;
  font-size: 12px; color: var(--cc-fg-2);
  line-height: 1.5;
}
.cc-h2-an-confl li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-accent);
  margin-top: 6px;
}
.cc-h2-an-cont {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-h2-an-cont-pill {
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.14em; font-weight: 700;
  background: color-mix(in oklch, var(--cc-bg-2) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  color: var(--cc-fg-2);
}
.cc-h2-an-cont-pill.is-cont    { color: var(--cc-pos); border-color: color-mix(in oklch, var(--cc-pos) 30%, transparent); }
.cc-h2-an-cont-pill.is-refined { color: oklch(0.85 0.14 70); border-color: color-mix(in oklch, oklch(0.85 0.14 70) 30%, transparent); }
.cc-h2-an-cont-pill.is-rev     { color: var(--cc-neg); border-color: color-mix(in oklch, var(--cc-neg) 30%, transparent); }

/* ── 1 · ORDERFLOW row ──
   Grid was 1fr 1fr 2fr to accommodate the AMT/VP card that used to
   sit alongside Events + Anomalies. AMT moved to the Orderflow tab a
   while back, so the 2fr column was empty — leaving the box looking
   "way too wide" with a huge dead zone on the right. Now sized to fit
   just the two remaining cards. */
.cc-h2-of-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1280px) { .cc-h2-of-grid { grid-template-columns: 1fr 1fr; } .cc-h2-card-wide { grid-column: span 2; } }
@media (max-width: 720px)  { .cc-h2-of-grid { grid-template-columns: 1fr; } .cc-h2-card-wide { grid-column: span 1; } }
.cc-h2-events {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
  font-family: var(--cc-mono); font-size: 11px;
}
.cc-h2-events-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 4px 6px; border-bottom: 1px dashed color-mix(in oklch, var(--cc-border-1) 60%, transparent);
}
.cc-h2-events-row:last-child { border-bottom: 0; }
.cc-h2-events-row .ts { color: var(--cc-fg-3); font-size: 9.5px; }
.cc-h2-events-row .label { color: var(--cc-fg-2); }
.cc-h2-events-row .v { font-weight: 700; }
.cc-h2-anomalies {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto;
}
.cc-h2-anomaly {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px; padding: 6px 8px;
  border-radius: 3px;
  background: color-mix(in oklch, oklch(0.85 0.14 60) 8%, transparent);
  border-left: 2px solid oklch(0.85 0.14 60);
  font-size: 11px;
}
.cc-h2-anomaly .lvl {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.10em; color: oklch(0.85 0.14 60); font-weight: 700;
}
.cc-h2-amt-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-bottom: 12px;
}
.cc-h2-amt-stat b {
  font-family: var(--cc-mono); font-size: 16px;
  color: var(--cc-fg); font-weight: 700;
}
.cc-h2-amt-summary {
  font-size: 12.5px; line-height: 1.65; color: var(--cc-fg-2);
  margin: 0; padding-top: 10px;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-h2-amt-summary b { color: var(--cc-fg); }

/* ── 2 · GEX row ── */
.cc-h2-gex-row {
  display: grid;
  grid-template-columns: 220px 2fr 1.4fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1280px) { .cc-h2-gex-row { grid-template-columns: 1fr; } }
.cc-h2-gex-headline {
  padding: 16px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
.cc-h2-gex-spot {
  font-family: var(--cc-mono); font-size: 32px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cc-h2-gex-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cc-mono); font-size: 11px;
  letter-spacing: 0.14em; font-weight: 700;
  margin-bottom: 8px;
}
.cc-h2-gex-tag.is-long  { color: var(--cc-pos); }
.cc-h2-gex-tag.is-short { color: var(--cc-neg); }
.cc-h2-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cc-neg);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-neg) 25%, transparent);
}
.cc-h2-gex-tag.is-long .cc-h2-dot {
  background: var(--cc-pos);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-pos) 25%, transparent);
}
.cc-h2-gex-sub { font-size: 12px; color: var(--cc-fg-2); line-height: 1.5; }
.cc-h2-gex-viz {
  padding: 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-h2-gex-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--cc-mono); font-size: 10.5px; color: var(--cc-fg-2);
}
.cc-h2-gex-legend b { color: var(--cc-fg); margin-left: 4px; }
.cc-h2-sw {
  display: inline-block; width: 12px; height: 4px; margin-right: 6px;
  vertical-align: middle;
}
.cc-h2-sw.cc-pos { background: var(--cc-pos); }
.cc-h2-sw.cc-neg { background: var(--cc-neg); }
.cc-h2-sw.cc-amber { background: oklch(0.85 0.14 80); }
.cc-h2-gex-reason {
  padding: 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-h2-gex-reason p {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--cc-fg-2);
}
.cc-h2-gex-reason b { color: var(--cc-fg); }

/* ── 3 · MACRO row ── */
.cc-h2-macro-row {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1280px) { .cc-h2-macro-row { grid-template-columns: 1fr; } }
.cc-h2-tone-card {
  display: flex; flex-direction: column; gap: 10px;
}
.cc-h2-tone {
  font-family: var(--cc-mono); font-size: 22px; font-weight: 700;
  letter-spacing: 0.06em;
}
.cc-h2-tone.is-on  { color: var(--cc-pos); }
.cc-h2-tone.is-off { color: var(--cc-neg); }
.cc-h2-tone.is-mix { color: oklch(0.82 0.14 70); }
.cc-h2-tone-sub {
  font-size: 11.5px; color: var(--cc-fg-2); line-height: 1.5;
}
.cc-h2-macro-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-h2-macro-stats b {
  font-family: var(--cc-mono); font-size: 14px; color: var(--cc-fg); font-weight: 700;
}

/* ── 4 · SETUPS list ── */
.cc-h2-setups {
  display: flex; flex-direction: column; gap: 6px;
}
.cc-h2-setup {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--cc-bg-1) 70%, transparent);
  border: 1px solid var(--cc-border-1);
  border-left: 3px solid var(--cc-fg-3);
  border-radius: 4px;
  font-family: var(--cc-mono); font-size: 12px;
}
.cc-h2-setup.is-done    { border-left-color: var(--cc-pos); opacity: 0.85; }
.cc-h2-setup.is-stopped { border-left-color: var(--cc-neg); opacity: 0.7; }
.cc-h2-setup.is-open    { border-left-color: oklch(0.85 0.14 80); }
.cc-h2-setup.is-upcoming{ border-left-color: var(--cc-accent); }
.cc-h2-setup-pill {
  font-size: 9.5px; letter-spacing: 0.14em; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cc-bg-2); color: var(--cc-fg-2);
  text-align: center;
}
.cc-h2-setup.is-done    .cc-h2-setup-pill { background: color-mix(in oklch, var(--cc-pos) 18%, transparent); color: var(--cc-pos); }
.cc-h2-setup.is-stopped .cc-h2-setup-pill { background: color-mix(in oklch, var(--cc-neg) 18%, transparent); color: var(--cc-neg); }
.cc-h2-setup.is-open    .cc-h2-setup-pill { background: color-mix(in oklch, oklch(0.85 0.14 80) 18%, transparent); color: oklch(0.85 0.14 80); }
.cc-h2-setup.is-upcoming .cc-h2-setup-pill { background: color-mix(in oklch, var(--cc-accent) 18%, transparent); color: var(--cc-accent); }
.cc-h2-setup-sym { font-weight: 700; color: var(--cc-fg); }
.cc-h2-setup-meta { color: var(--cc-fg-2); font-size: 11px; }
.cc-h2-setup-r { color: var(--cc-fg-2); }
.cc-h2-setup-r.cc-pos { color: var(--cc-pos); }
.cc-h2-setup-r.cc-neg { color: var(--cc-neg); }

/* ── 5 · VOL framework row ── */
.cc-h2-vol-row {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1280px) { .cc-h2-vol-row { grid-template-columns: 1fr; } }
.cc-h2-vol-tag {
  font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
  margin-bottom: 4px; letter-spacing: 0.04em;
}
.cc-h2-vol-tag.is-crush { color: var(--cc-pos); }
.cc-h2-vol-tag.is-bid   { color: var(--cc-neg); }
.cc-h2-vol-tag.is-flat  { color: oklch(0.82 0.14 70); }
.cc-h2-vol-sub { font-size: 12px; color: var(--cc-fg-2); line-height: 1.5; }
.cc-h2-vol-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cc-h2-vol-grid b {
  font-family: var(--cc-mono); font-size: 14px; color: var(--cc-fg); font-weight: 700;
}
.cc-h2-vol-spark .cc-h2-card-head { justify-content: space-between; }
.cc-h2-vol-spark b {
  font-family: var(--cc-mono); font-size: 16px; color: var(--cc-fg); font-weight: 700; margin-left: auto;
}
.cc-h2-vol-verdict {
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px dashed var(--cc-border-1);
  font-size: 11.5px; line-height: 1.5; color: var(--cc-fg-2);
}

/* ════════════════════════════════════════════════════════════════════
   ANALYSIS TAB v2 · sectioned cards · plan strip · path canvas
   ════════════════════════════════════════════════════════════════════ */
.cc-an-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
}
.cc-an-hero-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cc-an-eye {
  font-family: var(--cc-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--cc-accent); font-weight: 600;
}
.cc-an-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-fg-3);
}
.cc-an-meta-pill {
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in oklch, var(--cc-accent) 14%, transparent);
  color: var(--cc-accent);
  font-size: 10px; letter-spacing: 0.10em; font-weight: 600;
}
.cc-an-meta-conf b, .cc-an-meta-ts { color: var(--cc-fg-2); }
.cc-an-meta-sep { color: var(--cc-fg-3); opacity: 0.4; }
.cc-an-run-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--cc-accent); color: #0a0a0a;
  border: 1px solid var(--cc-accent);
  border-radius: 4px; cursor: pointer;
  font-family: var(--cc-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  transition: 0.16s ease;
}
.cc-an-run-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── PLAN strip ── */
.cc-an-plan {
  background: color-mix(in oklch, var(--cc-accent) 8%, var(--cc-bg-1));
  border: 1px solid color-mix(in oklch, var(--cc-accent) 35%, var(--cc-border-1));
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.cc-an-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cc-an-plan-side {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 999px;
  font-family: var(--cc-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  background: color-mix(in oklch, var(--cc-pos) 15%, transparent);
  color: var(--cc-pos);
  border: 1px solid color-mix(in oklch, var(--cc-pos) 35%, transparent);
}
.cc-an-plan-side.is-short {
  background: color-mix(in oklch, var(--cc-neg) 15%, transparent);
  color: var(--cc-neg);
  border-color: color-mix(in oklch, var(--cc-neg) 35%, transparent);
}
.cc-an-plan-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 1080px) { .cc-an-plan-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .cc-an-plan-row { grid-template-columns: repeat(2, 1fr); } }
.cc-an-plan-cell { display: flex; flex-direction: column; gap: 4px; }
.cc-an-plan-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-an-plan-v {
  font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
  color: var(--cc-fg);
}
.cc-an-plan-thesis {
  font-size: 13px; color: var(--cc-fg-2); line-height: 1.6;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in oklch, var(--cc-accent) 25%, var(--cc-border-1));
  margin: 0;
}

/* ── Section grid ── */
.cc-an-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1280px) { .cc-an-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .cc-an-grid { grid-template-columns: 1fr; } }
.cc-an-card-wide { grid-column: span 2; }
@media (max-width: 720px) { .cc-an-card-wide { grid-column: span 1; } }
.cc-an-body {
  padding: 14px 16px;
  font-size: 13px; color: var(--cc-fg-2);
  line-height: 1.65;
  white-space: pre-wrap;
}
.cc-an-body b { color: var(--cc-fg); font-weight: 600; }
.cc-an-em-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding: 14px 16px;
}
.cc-an-em-row > div { display: flex; flex-direction: column; gap: 4px; }
.cc-an-em-row b {
  font-family: var(--cc-mono); font-size: 18px; color: var(--cc-fg); font-weight: 700;
}
.cc-an-k {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-an-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  font-size: 11px; color: var(--cc-fg-2); line-height: 1.5;
  border-top: 1px dashed var(--cc-border-1);
}
.cc-an-legend > span { display: inline-flex; align-items: center; }

/* ── Data confluence card (2026-05-10) ──
   Eight-cell grid that summarises every data source feeding the AI
   thesis: macro, equity internals, correlation, carry, orderflow,
   ML votes, anomalies, news. Each cell is a compact pill of label +
   1-3 line dense value text. Populated by _renderConfluence() in
   dashboard-v2.js from /api/analysis/graph-data. */
.cc-an-conf-card { padding: 0; overflow: hidden; }
.cc-an-conf-card .cc-card-head { padding: 12px 16px; display: flex; align-items: center; }
.cc-an-conf-meta {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
  margin-left: auto;
}
.cc-an-conf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--cc-border-1);
  border-top: 1px solid var(--cc-border-1);
}
@media (max-width: 1080px) {
  .cc-an-conf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cc-an-conf-grid { grid-template-columns: 1fr; }
}
.cc-an-conf-cell {
  background: oklch(0.10 0.005 250);
  padding: 12px 14px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-an-conf-k {
  font-family: var(--cc-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--cc-fg-3);
}
.cc-an-conf-body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--cc-fg-1);
  font-family: var(--cc-mono);
  overflow: hidden;
}
.cc-an-conf-body .cc-conf-row { display: block; padding: 2px 0; }
.cc-an-conf-body .cc-conf-row b { color: var(--cc-fg-0); }
.cc-an-conf-body .cc-conf-row .cc-pos { color: oklch(0.78 0.18 145); }
.cc-an-conf-body .cc-conf-row .cc-neg { color: oklch(0.70 0.20 25); }
.cc-an-conf-body .cc-conf-row .cc-warn { color: oklch(0.82 0.16 75); }
.cc-an-conf-body em { font-style: normal; color: var(--cc-fg-3); }

/* ── GEX (Dealer Gamma) tab (2026-05-14) ──
   Five-card layout: regime strip on top, two-column body with key
   strikes + profile chart + expiration breakdown + dealer Greeks
   + charm cascade. All cards self-populate from /api/demo/snapshot
   and refresh post grab-all. */
section.cc-view[data-view="gex"] {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}
.cc-gex-regime { padding: 0; overflow: hidden; }
.cc-gex-regime .cc-card-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-gex-spot, .cc-gex-ts {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
}
.cc-gex-ts { margin-left: auto; }
.cc-gex-regime-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--cc-border-1);
  border-top: 1px solid var(--cc-border-1);
}
@media (max-width: 1080px) { .cc-gex-regime-row { grid-template-columns: repeat(2, 1fr); } }
.cc-gex-regime-cell {
  background: oklch(0.10 0.005 250);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.cc-gex-regime-cell[data-tone-target="totalGex"][data-tone="long"] b { color: oklch(0.78 0.18 145); }
.cc-gex-regime-cell[data-tone-target="totalGex"][data-tone="short"] b { color: oklch(0.70 0.20 25); }
.cc-gex-k {
  font-family: var(--cc-mono); font-size: 9px;
  letter-spacing: 0.14em; color: var(--cc-fg-3);
}
.cc-gex-regime-cell b {
  font-family: var(--cc-mono); font-size: 22px;
  color: var(--cc-fg-0); font-weight: 600;
}
.cc-gex-regime-cell small {
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-3);
}

.cc-gex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) { .cc-gex-grid { grid-template-columns: 1fr; } }
.cc-gex-card-wide { grid-column: 1 / -1; }
.cc-gex-card { padding: 0; overflow: hidden; }
.cc-gex-card .cc-card-head { padding: 12px 16px; display: flex; align-items: center; }
.cc-gex-chart-meta {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
  margin-left: auto;
}

.cc-gex-levels-body {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cc-border-1);
}
.cc-gex-level-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px;
  gap: 10px;
  padding: 10px 16px;
  align-items: baseline;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-gex-level-row:last-child { border-bottom: none; }
.cc-gex-level-k {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--cc-fg-3);
}
.cc-gex-level-v {
  font-family: var(--cc-mono); font-size: 18px;
  font-weight: 600; color: var(--cc-fg-0);
}
.cc-gex-level-d {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3); text-align: right;
}
.cc-gex-narrative {
  font-size: 12px; line-height: 1.55;
  padding: 12px 16px;
  border-top: 1px solid var(--cc-border-1);
  color: var(--cc-fg-2);
  margin: 0;
}

.cc-gex-chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 8px 16px;
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-3);
  border-top: 1px dashed var(--cc-border-1);
}
.cc-gex-swatch {
  display: inline-block; width: 10px; height: 10px;
  margin-right: 6px; vertical-align: middle; border-radius: 1px;
}
.cc-gex-swatch.cc-pos { background: oklch(0.78 0.18 145); }
.cc-gex-swatch.cc-neg { background: oklch(0.70 0.20 25); }
.cc-gex-swatch.cc-spot { background: oklch(0.85 0.16 240); }

.cc-gex-exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--cc-border-1);
  border-top: 1px solid var(--cc-border-1);
}
.cc-gex-exp-cell {
  background: oklch(0.10 0.005 250);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 84px;
}
.cc-gex-exp-cell .cc-gex-exp-date {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
}
.cc-gex-exp-cell .cc-gex-exp-gex {
  font-family: var(--cc-mono); font-size: 16px;
  font-weight: 600;
}
.cc-gex-exp-cell .cc-gex-exp-tag {
  font-family: var(--cc-mono); font-size: 9px;
  color: var(--cc-fg-3);
}
.cc-gex-exp-empty {
  grid-column: 1 / -1;
  background: oklch(0.10 0.005 250);
  padding: 24px;
  text-align: center;
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3);
}

.cc-gex-greeks-body {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cc-border-1);
}
.cc-gex-greek-row {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 8px 16px;
  border-bottom: 1px dashed var(--cc-border-1);
  align-items: baseline;
}
.cc-gex-greek-row:last-child { border-bottom: none; }
.cc-gex-greek-k {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
}
.cc-gex-greek-row b {
  font-family: var(--cc-mono); font-size: 14px;
  text-align: right; color: var(--cc-fg-0);
}

.cc-gex-charm-body {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--cc-border-1);
}
.cc-gex-charm-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 10px; align-items: baseline;
}
.cc-gex-charm-row b {
  font-family: var(--cc-mono); font-size: 14px;
  color: var(--cc-fg-0);
}

/* ── Knowledge graph card ── */
.cc-an-graph-card { padding: 0; overflow: hidden; }
.cc-an-graph-card .cc-card-head { padding: 12px 16px; }
.cc-an-graph-meta {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--cc-fg-3);
  margin-left: auto;
}
.cc-an-graph-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
}
@media (max-width: 1080px) { .cc-an-graph-row { grid-template-columns: 1fr; } }
.cc-an-graph-side {
  padding: 14px 16px;
  border-left: 1px dashed var(--cc-border-1);
  background: color-mix(in oklch, var(--cc-bg-1) 35%, transparent);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 540px;
}
.cc-an-graph-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-an-graph-side-head .cc-eyebrow {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.22em; color: var(--cc-fg-3); font-weight: 600;
}
.cc-an-graph-side-close {
  appearance: none; background: transparent; border: 0;
  color: var(--cc-fg-3); font-size: 18px; cursor: pointer;
  width: 22px; height: 22px; line-height: 1;
  transition: 0.14s ease;
}
.cc-an-graph-side-close:hover { color: var(--cc-fg); }
.cc-an-graph-side-body {
  flex: 1; overflow-y: auto;
  font-size: 12px; color: var(--cc-fg-2); line-height: 1.55;
}
.cc-an-node-detail {
  display: flex; flex-direction: column; gap: 8px;
}
.cc-an-node-pill {
  display: inline-block; padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.14em; font-weight: 700;
  align-self: flex-start;
}
.cc-an-node-label {
  font-size: 14px; color: var(--cc-fg); font-weight: 600;
  line-height: 1.4;
}
.cc-an-node-section {
  padding-top: 10px; border-top: 1px dashed var(--cc-border-1);
}
.cc-an-node-section-h {
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.20em; color: var(--cc-fg-3);
  margin-bottom: 6px; font-weight: 600;
}
.cc-an-node-link {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: color-mix(in oklch, var(--cc-bg-1) 80%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer; transition: 0.14s ease;
  font-size: 11.5px;
}
.cc-an-node-link:hover {
  border-color: var(--cc-accent);
  transform: translateX(2px);
}
.cc-an-node-link-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: none;
}
.cc-an-node-link-kind {
  margin-left: auto;
  font-family: var(--cc-mono); font-size: 9px;
  letter-spacing: 0.12em; color: var(--cc-fg-3);
  text-transform: uppercase;
}

/* ── Raw output expander ── */
.cc-an-raw {
  border: 1px dashed var(--cc-border-1);
  border-radius: 4px;
  background: color-mix(in oklch, var(--cc-bg-0) 30%, transparent);
}
.cc-an-raw > summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; cursor: pointer; list-style: none;
}
.cc-an-raw > summary::-webkit-details-marker { display: none; }
.cc-an-raw > summary::before {
  content: "▶"; font-size: 9px; color: var(--cc-fg-3);
  transition: transform 0.16s ease;
}
.cc-an-raw[open] > summary::before { transform: rotate(90deg); }
.cc-an-raw-hint { font-size: 11px; color: var(--cc-fg-3); flex: 1; }
.cc-an-raw .cc-analysis-output {
  margin: 0; padding: 14px 16px;
  font-family: var(--cc-mono); font-size: 11.5px;
  line-height: 1.65; color: var(--cc-fg-2);
  white-space: pre-wrap;
}

/* ════════════════════════════════════════════════════════════════════
   ORDERFLOW v2 · TOOLBAR + FOOTPRINT CHART + SETTINGS PANEL
   ════════════════════════════════════════════════════════════════════ */
.cc-of-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: color-mix(in oklch, var(--cc-bg-1) 60%, transparent);
  border: 1px solid var(--cc-border-1);
  border-radius: 4px;
  font-family: var(--cc-mono);
  font-size: 11px;
}
.cc-of-toolbar-l { display: flex; align-items: center; gap: 12px; }
.cc-of-toolbar-c { display: flex; align-items: center; gap: 10px; justify-content: center; }
.cc-of-toolbar-r { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cc-of-conn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklch, var(--cc-pos) 16%, transparent);
  color: var(--cc-pos);
  border: 1px solid color-mix(in oklch, var(--cc-pos) 30%, transparent);
  font-weight: 700; letter-spacing: 0.10em;
}
.cc-of-conn::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-pos);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-pos) 25%, transparent);
}
.cc-of-toolbar-meta { color: var(--cc-fg-3); letter-spacing: 0.10em; }
.cc-of-toolbar-meta b { color: var(--cc-fg); }
.cc-of-tf-label {
  font-size: 9.5px; color: var(--cc-fg-3); letter-spacing: 0.18em;
}
.cc-of-tfs {
  display: inline-flex;
  border: 1px solid var(--cc-border-1);
  border-radius: 999px;
  padding: 2px;
}
.cc-of-tf {
  appearance: none; background: transparent; color: var(--cc-fg-2);
  border: 0; padding: 4px 12px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; border-radius: 999px;
  transition: 0.16s ease;
}
.cc-of-tf:hover { color: var(--cc-fg); }
.cc-of-tf.is-active {
  background: var(--cc-bg-2); color: var(--cc-fg);
}
.cc-of-tool-btn {
  appearance: none; background: transparent;
  border: 1px solid var(--cc-border-1); color: var(--cc-fg-2);
  width: 30px; height: 30px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: 0.16s ease;
}
.cc-of-tool-btn:hover { color: var(--cc-fg); border-color: var(--cc-fg-3); }
.cc-of-gear:hover { transform: rotate(45deg); }

.cc-of-chart-card { padding: 0; overflow: hidden; }
.cc-of-chart-card .cc-card-head { padding: 10px 14px; }
.cc-of-chart-meta { font-size: 10px; color: var(--cc-fg-3); letter-spacing: 0.10em; }

.cc-of-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* align-items: start prevents cards from stretching to match the tallest
     sibling. Microstructure has many rows, the others didn't, so the rest
     were left with empty halves. Now each card takes its own height. */
  align-items: start;
  gap: 10px;
  margin-top: 12px;
}
/* Microstructure quick-edge horizontal strip
   ───────────────────────────────────────────
   Was a 9-row vertical stack inside the microstructure card, which made
   that card 3-4× taller than its siblings. Now a flat 4-up grid (2 rows
   × 4 cells) at the bottom of a full-width microstructure strip. */
.cc-of-qedge-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cc-border-2);
  padding: 1px;
}
@media (max-width: 1280px) { .cc-of-qedge-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cc-of-qedge-strip { grid-template-columns: repeat(2, 1fr); } }
.cc-of-qedge-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px;
  background: oklch(0.07 0.005 250 / 0.85);
  font-family: var(--cc-mono);
}
.cc-of-qedge-cell-k {
  font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--cc-fg-3); font-weight: 600;
  text-transform: uppercase;
}
.cc-of-qedge-cell-v {
  font-size: 14px; font-weight: 700; color: var(--cc-fg);
  line-height: 1.2;
}
.cc-of-qedge-cell-v.cc-pos { color: var(--cc-pos); }
.cc-of-qedge-cell-v.cc-neg { color: var(--cc-neg); }
.cc-of-qedge-cell-sub {
  font-size: 9.5px; color: var(--cc-fg-3); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   MICROSTRUCTURE — visual rebuild
   Was a row of plain stat tiles + plain text. Now: three visual
   blocks at the top (stress meter, aggressor balance, VPIN gauge)
   and a 9-cell quick-edge grid where each cell has icon + magnitude
   bar + value, not just text.
   ═══════════════════════════════════════════════════════════════════ */
.cc-micro-card { padding: 0; }

/* Top three-up — stress meter | aggressor balance | VPIN gauge */
.cc-micro-headline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--cc-border-2);
  background: linear-gradient(180deg, oklch(0.07 0.005 250 / 0.55), oklch(0.05 0.002 250 / 0.30));
}
@media (max-width: 1100px) { .cc-micro-headline { grid-template-columns: 1fr; gap: 10px; } }

.cc-micro-block { display: flex; flex-direction: column; gap: 7px; }
.cc-micro-block-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--cc-mono);
}
.cc-micro-block-k {
  font-size: 9.5px; letter-spacing: 0.20em; color: var(--cc-fg-3); font-weight: 700;
}
.cc-micro-block-v { font-size: 13px; font-weight: 700; color: var(--cc-fg); }
.cc-micro-block-v.is-stress { color: var(--cc-neg); }
.cc-micro-block-v.is-warn   { color: oklch(0.85 0.14 70); }
.cc-micro-block-v.is-calm   { color: var(--cc-pos); }

/* Horizontal stress / VPIN meter ── 3 zones + sliding marker */
.cc-micro-meter { position: relative; height: 22px; }
.cc-micro-meter-track {
  display: flex; height: 8px;
  border: 1px solid var(--cc-border-2);
  background: oklch(0.10 0.005 250 / 0.6);
  overflow: hidden;
}
.cc-micro-meter-zone-quiet {
  flex: 0 0 50%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--cc-pos) 22%, transparent),
    color-mix(in oklch, var(--cc-pos) 8%, transparent));
}
.cc-micro-meter-zone-mid {
  flex: 0 0 25%;
  background: linear-gradient(90deg,
    color-mix(in oklch, oklch(0.85 0.14 70) 12%, transparent),
    color-mix(in oklch, oklch(0.85 0.14 70) 24%, transparent));
}
.cc-micro-meter-zone-stress {
  flex: 0 0 25%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--cc-neg) 24%, transparent),
    color-mix(in oklch, var(--cc-neg) 42%, transparent));
}
.cc-micro-meter-marker {
  position: absolute; top: -2px;
  width: 3px; height: 14px;
  background: var(--cc-fg);
  box-shadow: 0 0 8px oklch(1 0 0 / 0.45), 0 0 0 1px oklch(0.05 0 0 / 0.85);
  transition: left 0.4s cubic-bezier(.2,.8,.2,1);
  transform: translateX(-50%);
}
.cc-micro-meter-labels {
  display: flex; justify-content: space-between;
  margin-top: 2px;
  font-family: var(--cc-mono); font-size: 8.5px;
  letter-spacing: 0.16em; color: var(--cc-fg-3);
}

/* Aggressor balance — split bid/ask bar */
.cc-micro-bisplit {
  display: flex; height: 8px;
  border: 1px solid var(--cc-border-2);
  background: oklch(0.10 0.005 250 / 0.6);
  overflow: hidden;
}
.cc-micro-bisplit-bid {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--cc-pos) 18%, transparent),
    color-mix(in oklch, var(--cc-pos) 65%, transparent));
  transition: flex-basis 0.4s cubic-bezier(.2,.8,.2,1);
}
.cc-micro-bisplit-mid {
  flex: 0 0 1px; background: var(--cc-fg);
  opacity: 0.45;
}
.cc-micro-bisplit-ask {
  background: linear-gradient(270deg,
    color-mix(in oklch, var(--cc-neg) 18%, transparent),
    color-mix(in oklch, var(--cc-neg) 65%, transparent));
  transition: flex-basis 0.4s cubic-bezier(.2,.8,.2,1);
}
.cc-micro-bisplit-labels {
  display: flex; justify-content: space-between;
  margin-top: 2px;
  font-family: var(--cc-mono); font-size: 9.5px;
  letter-spacing: 0.06em;
}
.cc-micro-bisplit-labels b { color: var(--cc-fg); margin-left: 3px; font-weight: 700; }

/* Narrative line */
.cc-micro-narr {
  padding: 10px 14px;
  font-family: var(--cc-mono); font-size: 11.5px;
  line-height: 1.65; color: var(--cc-fg-2);
  border-bottom: 1px solid var(--cc-border-2);
  min-height: 36px;
  background: oklch(0.05 0.002 250 / 0.20);
}

/* 9-cell quick-edge grid (the visual replacement of the old vertical
   stack of plain rows). Each cell: icon + name on top, big value, then
   a magnitude bar, then a sub-text descriptor. */
.cc-micro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cc-border-2);
  padding: 1px;
}
@media (max-width: 1100px) { .cc-micro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cc-micro-grid { grid-template-columns: 1fr; } }
.cc-micro-cell {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 13px;
  background: oklch(0.07 0.005 250 / 0.92);
  font-family: var(--cc-mono);
  position: relative; overflow: hidden;
  transition: background 0.3s ease;
}
.cc-micro-cell:hover { background: oklch(0.10 0.005 250 / 0.95); }
.cc-micro-cell.is-active {
  background: linear-gradient(135deg,
    oklch(0.10 0.06 25 / 0.40),
    oklch(0.07 0.005 250 / 0.92));
}
.cc-micro-cell.is-active::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--cc-neg);
  box-shadow: 0 0 10px var(--cc-neg);
}
.cc-micro-cell.is-positive::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--cc-pos);
}
.cc-micro-cell.is-negative::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--cc-neg);
}
.cc-micro-cell-head {
  display: flex; align-items: center; gap: 6px;
}
.cc-micro-cell-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 11px;
  color: var(--cc-fg-3);
  font-weight: 700;
}
.cc-micro-cell-icon.is-up   { color: var(--cc-pos); }
.cc-micro-cell-icon.is-down { color: var(--cc-neg); }
.cc-micro-cell-icon.is-warn { color: oklch(0.85 0.14 70); }
.cc-micro-cell-icon.is-active {
  color: var(--cc-neg);
  animation: cc-micro-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-micro-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.65; }
}
.cc-micro-cell-k {
  font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--cc-fg-3); font-weight: 700;
  text-transform: uppercase;
}
.cc-micro-cell-v {
  font-size: 16px; font-weight: 700; color: var(--cc-fg);
  line-height: 1.2;
  margin-left: 22px;     /* indent under the icon */
}
.cc-micro-cell-v.cc-pos { color: var(--cc-pos); }
.cc-micro-cell-v.cc-neg { color: var(--cc-neg); }
.cc-micro-cell-v.cc-warn { color: oklch(0.85 0.14 70); }
/* Magnitude bar — horizontal fill, color-tinted by sign */
.cc-micro-cell-bar {
  position: relative;
  height: 3px;
  background: oklch(0.10 0.005 250 / 0.6);
  border-radius: 2px;
  margin-left: 22px;
  overflow: hidden;
}
.cc-micro-cell-bar-fill {
  position: absolute; top: 0; left: 50%;
  height: 100%;
  width: 0%;
  background: var(--cc-fg-3);
  transition: width 0.4s cubic-bezier(.2,.8,.2,1), left 0.4s cubic-bezier(.2,.8,.2,1), background 0.3s;
}
.cc-micro-cell-bar-fill.is-up {
  background: linear-gradient(90deg, var(--cc-pos), color-mix(in oklch, var(--cc-pos) 50%, transparent));
}
.cc-micro-cell-bar-fill.is-down {
  background: linear-gradient(270deg, var(--cc-neg), color-mix(in oklch, var(--cc-neg) 50%, transparent));
}
.cc-micro-cell-bar-fill.is-warn {
  background: linear-gradient(90deg, oklch(0.85 0.14 70), color-mix(in oklch, oklch(0.85 0.14 70) 50%, transparent));
}
.cc-micro-cell-sub {
  font-size: 9.5px; color: var(--cc-fg-3); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 4px;
  margin-left: 22px;
}
@media (max-width: 1280px) { .cc-of-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .cc-of-grid-4 { grid-template-columns: 1fr; } }
.cc-of-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 1280px) { .cc-of-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .cc-of-grid-3 { grid-template-columns: 1fr; } }
.cc-of-meta { font-size: 10.5px; color: var(--cc-fg-3); letter-spacing: 0.14em; }
.cc-of-sig-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; max-height: 280px; overflow-y: auto;
}
.cc-of-scroll {
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

/* ── FOOTPRINT SETTINGS slide-in panel ── */
.cc-fp-settings {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  z-index: 60;
  background: color-mix(in oklch, var(--cc-bg-1) 95%, transparent);
  backdrop-filter: blur(18px) saturate(0.9);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
  border-left: 1px solid var(--cc-border-2, var(--cc-border-1));
  box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
  transform: translateX(0);
  animation: cc-fp-slide-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.05);
}
.cc-fp-settings[hidden] { display: none; }
@keyframes cc-fp-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.cc-fp-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-fp-settings-head .cc-eyebrow {
  font-family: var(--cc-mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--cc-accent); font-weight: 600;
}
.cc-fp-close {
  appearance: none; background: transparent;
  border: 0; color: var(--cc-fg-3); font-size: 22px;
  width: 28px; height: 28px; cursor: pointer; line-height: 1;
  transition: 0.16s ease;
}
.cc-fp-close:hover { color: var(--cc-fg); }
.cc-fp-settings-body {
  flex: 1; overflow-y: auto;
  padding: 12px 18px 18px;
}
.cc-fp-group { margin-bottom: 22px; }
.cc-fp-grouphead {
  font-family: var(--cc-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--cc-fg-3);
  margin-bottom: 10px;
  font-weight: 600;
}
.cc-fp-segs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  border: 1px solid var(--cc-border-1);
  border-radius: 4px; padding: 3px;
}
.cc-fp-segs button {
  appearance: none; background: transparent; color: var(--cc-fg-2);
  border: 0; padding: 6px 8px; cursor: pointer;
  font-family: var(--cc-sans); font-size: 11.5px;
  border-radius: 3px;
  transition: 0.14s ease;
}
.cc-fp-segs button:hover { color: var(--cc-fg); }
.cc-fp-segs button.is-active {
  background: color-mix(in oklch, var(--cc-accent) 22%, var(--cc-bg-2));
  color: var(--cc-fg);
}
.cc-fp-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 12.5px; color: var(--cc-fg-2);
  cursor: pointer; user-select: none;
}
.cc-fp-toggle input { accent-color: var(--cc-accent); }
.cc-fp-num {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 11.5px; color: var(--cc-fg-2);
}
.cc-fp-num input[type="range"] { accent-color: var(--cc-accent); width: 100%; }
.cc-fp-numv {
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg); text-align: right; font-weight: 600;
}
.cc-fp-preset-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.cc-fp-preset-btn {
  appearance: none; background: var(--cc-bg-2); color: var(--cc-fg);
  border: 1px solid var(--cc-border-1); padding: 7px 10px;
  border-radius: 4px; cursor: pointer;
  font-family: var(--cc-sans); font-size: 11.5px;
  transition: 0.14s ease;
}
.cc-fp-preset-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); }

/* ── Tick flash - tints + briefly highlights a price element when
   its value changes. Keep the duration short (450ms) so it feels
   like a market datafeed and not a lava lamp.                       */
.cc-tick-up   { animation: cc-tick-up 0.45s ease-out; }
.cc-tick-down { animation: cc-tick-down 0.45s ease-out; }
@keyframes cc-tick-up {
  0%   { background: color-mix(in oklch, var(--cc-pos) 35%, transparent); color: var(--cc-pos); }
  100% { background: transparent; }
}
@keyframes cc-tick-down {
  0%   { background: color-mix(in oklch, var(--cc-neg) 35%, transparent); color: var(--cc-neg); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-tick-up, .cc-tick-down { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CARD PICKER — for the Customised tab
   ═══════════════════════════════════════════════════════════════════ */
.cc-picker-panel { width: 760px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; }
.cc-picker-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-picker-search { flex: 1; }
.cc-picker-count {
  font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.10em;
  color: var(--cc-fg-2); white-space: nowrap;
}
.cc-picker-cats {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--cc-border-1);
}
.cc-picker-cat {
  padding: 4px 10px; border-radius: 12px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.04);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--cc-fg-2); cursor: pointer; text-transform: uppercase;
  transition: all 0.15s ease;
}
.cc-picker-cat:hover { color: var(--cc-fg); border-color: var(--cc-accent); }
.cc-picker-cat.is-active {
  background: var(--cc-accent); color: oklch(0.10 0.02 var(--cc-accent-h));
  border-color: var(--cc-accent);
}
.cc-picker-list {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 4px 0; min-height: 200px; max-height: 50vh;
}
.cc-picker-row {
  display: grid; grid-template-columns: 22px 60px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.02);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cc-picker-row:hover { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06); border-color: var(--cc-border-2); }
.cc-picker-row.is-checked { background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); border-color: var(--cc-accent); }
.cc-picker-row input[type="checkbox"] { accent-color: var(--cc-accent); width: 16px; height: 16px; cursor: pointer; }
.cc-picker-row-cat {
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--cc-fg-3); text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.06);
  text-align: center;
}
.cc-picker-row-label {
  font-family: var(--cc-mono); font-size: 11.5px;
  color: var(--cc-fg); font-weight: 600; letter-spacing: 0.04em;
}
.cc-picker-row-from {
  font-family: var(--cc-mono); font-size: 9.5px; letter-spacing: 0.10em;
  color: var(--cc-fg-3); text-transform: uppercase;
}
.cc-picker-actions {
  display: flex; align-items: center; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--cc-border-1);
}
.cc-picker-empty {
  padding: 32px 12px; text-align: center;
  font-family: var(--cc-mono); font-size: 11px;
  color: var(--cc-fg-3);
}

/* Customised-tab clones — each cloned card grows a small remove button. */
.cc-mt-clone-host { position: relative; margin: 0 0 10px; }
.cc-mt-clone-remove {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  padding: 3px 8px; border-radius: 10px;
  background: oklch(0.20 0.02 var(--cc-accent-h) / 0.85);
  border: 1px solid var(--cc-border-2);
  font-family: var(--cc-mono); font-size: 9.5px; letter-spacing: 0.10em;
  color: var(--cc-fg-2); cursor: pointer;
}
.cc-mt-clone-remove:hover { color: var(--cc-neg); border-color: var(--cc-neg); }

/* ═══════════════════════════════════════════════════════════════════
   AI USAGE BAR (top header)
   Discreet single-line meter: track + fill + label. Sits between the
   ANALYSE button and the LIVE pill. Click opens a tooltip with full
   breakdown. Color shifts at 70% and 90%. Replaces the AI USAGE card
   that was in the right rail.
   ═══════════════════════════════════════════════════════════════════ */
.cc-ai-usage {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px;
  background: oklch(0.10 0.004 var(--cc-accent-h) / 0.65);
  border: 1px solid var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-2);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.cc-ai-usage:hover { border-color: var(--cc-border-3); background: oklch(0.13 0.005 var(--cc-accent-h) / 0.85); }
.cc-ai-usage-track {
  display: inline-block;
  width: 56px; height: 5px;
  background: oklch(0.04 0.003 var(--cc-accent-h) / 0.65);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.cc-ai-usage-fill {
  display: block;
  height: 100%;
  background: oklch(0.78 0.10 var(--cc-accent-h));
  border-radius: 999px;
  transition: width 0.32s cubic-bezier(.2,.8,.2,1), background 0.22s;
}
.cc-ai-usage-label {
  font-weight: 700; letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
  color: var(--cc-fg);
}
/* Tier color shifts. amber at >=70, red at >=90, plus a soft pulse on
   the bar itself once we cross 70 so the user notices in their
   peripheral vision. */
.cc-ai-usage[data-tier="warn"] { border-color: oklch(0.70 0.16 70 / 0.45); }
.cc-ai-usage[data-tier="warn"] .cc-ai-usage-fill {
  background: oklch(0.78 0.16 70);
  animation: cc-aiusage-pulse 2.4s ease-in-out infinite;
}
.cc-ai-usage[data-tier="warn"] .cc-ai-usage-label { color: oklch(0.85 0.14 70); }
.cc-ai-usage[data-tier="crit"] { border-color: oklch(0.65 0.20 25 / 0.55); }
.cc-ai-usage[data-tier="crit"] .cc-ai-usage-fill {
  background: oklch(0.72 0.20 25);
  animation: cc-aiusage-pulse 1.4s ease-in-out infinite;
}
.cc-ai-usage[data-tier="crit"] .cc-ai-usage-label { color: oklch(0.78 0.18 25); }
@keyframes cc-aiusage-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (max-width: 900px) {
  /* On phones, hide the track (label only) to save space. */
  .cc-ai-usage-track { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE-OPS NOTIFICATION STACK (top-right, fixed, persistent)
   New trade-setup pipeline: PENDING → ACTIVE → RESULT.
   ═══════════════════════════════════════════════════════════════════ */
.cc-livenotif-stack {
  position: fixed;
  top: calc(var(--top-h) + 12px);
  right: 16px;
  z-index: 110;
  display: flex; flex-direction: column; gap: 8px;
  width: 340px; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.cc-livenotif {
  pointer-events: auto;
  position: relative;
  padding: 12px 14px 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    oklch(0.18 0.005 var(--cc-accent-h) / 0.94),
    oklch(0.10 0.004 var(--cc-accent-h) / 0.96));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--cc-border-2);
  box-shadow: 0 14px 36px -12px oklch(0 0 0 / 0.65);
  animation: cc-livenotif-in 0.34s cubic-bezier(.2,.85,.3,1.05);
  overflow: hidden;
}
@keyframes cc-livenotif-in {
  from { opacity: 0; transform: translateX(20px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.cc-livenotif.is-leaving { animation: cc-livenotif-out 0.28s ease forwards; }
@keyframes cc-livenotif-out {
  to { opacity: 0; transform: translateX(20px) scale(0.95); }
}
.cc-livenotif-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.cc-livenotif-tag {
  font-family: var(--cc-mono); font-size: 9px; letter-spacing: 0.20em;
  font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10);
  color: var(--cc-fg-2);
}
.cc-livenotif-sym {
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700;
  color: var(--cc-fg); letter-spacing: 0.04em;
  margin-right: auto;
}
.cc-livenotif-eta {
  font-family: var(--cc-mono); font-size: 10px;
  color: var(--cc-fg-3); letter-spacing: 0.06em;
}
.cc-livenotif-close {
  appearance: none; background: transparent; border: 0;
  color: var(--cc-fg-3); font-size: 14px; line-height: 1;
  width: 18px; height: 18px; cursor: pointer;
  border-radius: 4px;
  transition: 0.14s ease;
}
.cc-livenotif-close:hover { color: var(--cc-fg); background: oklch(0.95 0.003 var(--cc-accent-h) / 0.10); }
.cc-livenotif-body {
  font-family: var(--cc-mono); font-size: 11.5px; line-height: 1.55;
  color: var(--cc-fg-2);
}
.cc-livenotif-body b { color: var(--cc-fg); font-weight: 700; }
.cc-livenotif-plan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--cc-border-1);
  font-family: var(--cc-mono); font-size: 10px;
}
.cc-livenotif-plan span {
  color: var(--cc-fg-3); display: block; letter-spacing: 0.10em;
}
.cc-livenotif-plan b {
  color: var(--cc-fg); font-size: 11px; display: block; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Per-state styling */
.cc-livenotif[data-state="pending"] {
  border-left: 3px solid oklch(0.78 0.10 var(--cc-accent-h));
}
.cc-livenotif[data-state="pending"] .cc-livenotif-tag {
  color: oklch(0.85 0.10 var(--cc-accent-h));
  background: oklch(0.55 0.16 var(--cc-accent-h) / 0.20);
}
.cc-livenotif[data-state="active"] {
  border-left: 3px solid oklch(0.78 0.16 70);
  animation: cc-livenotif-in 0.34s, cc-livenotif-pulse 1.6s ease-in-out infinite 0.5s;
}
.cc-livenotif[data-state="active"] .cc-livenotif-tag {
  color: oklch(0.85 0.16 70);
  background: oklch(0.55 0.18 70 / 0.20);
}
.cc-livenotif[data-state="result-win"]  { border-left: 3px solid var(--cc-pos); }
.cc-livenotif[data-state="result-loss"] { border-left: 3px solid var(--cc-neg); }
.cc-livenotif[data-state="result-win"]  .cc-livenotif-tag {
  color: var(--cc-pos);
  background: oklch(0.55 0.16 145 / 0.20);
}
.cc-livenotif[data-state="result-loss"] .cc-livenotif-tag {
  color: var(--cc-neg);
  background: oklch(0.55 0.18 25 / 0.20);
}
@keyframes cc-livenotif-pulse {
  0%, 100% { box-shadow: 0 14px 36px -12px oklch(0 0 0 / 0.65),
                         0 0 0   0  oklch(0.78 0.16 70 / 0); }
  50%      { box-shadow: 0 14px 36px -12px oklch(0 0 0 / 0.65),
                         0 0 28px 4px oklch(0.78 0.16 70 / 0.45); }
}
/* ETA progress bar within a pending notification */
.cc-livenotif-progress {
  margin-top: 6px;
  height: 3px;
  background: oklch(0.04 0.003 var(--cc-accent-h) / 0.55);
  border-radius: 999px;
  overflow: hidden;
}
.cc-livenotif-progress > span {
  display: block; height: 100%;
  background: oklch(0.78 0.10 var(--cc-accent-h));
  transition: width 0.6s ease;
}

@media (max-width: 720px) {
  .cc-livenotif-stack { right: 8px; left: 8px; width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   AI MARKDOWN RENDER (cc-md-*) — used by safeRender() across every
   AI text surface (macro briefing, macro followup chat, AI Chat tab,
   analysis briefing). Was a single <br>-joined blob before, which
   displayed `**bold**` and bullet lists as literal characters. The
   new renderer produces structured HTML; these classes style it to
   match the dashboard's institutional aesthetic.
   ═══════════════════════════════════════════════════════════════════ */
.cc-md-p {
  margin: 0 0 8px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cc-fg);
}
.cc-md-p:last-child { margin-bottom: 0; }
.cc-md-p b {
  color: var(--cc-fg);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cc-md-p i { color: var(--cc-fg-2); font-style: italic; }
.cc-md-p code,
.cc-md-block code {
  background: oklch(0.05 0.002 var(--cc-accent-h) / 0.55);
  border: 1px solid var(--cc-border-1);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--cc-mono);
  font-size: 11.5px;
  color: var(--cc-fg);
}
.cc-md-h {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-accent);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--cc-border-1);
}
.cc-md-h:first-child { margin-top: 0; }
.cc-md-ul, .cc-md-ol {
  margin: 4px 0 10px 4px;
  padding-left: 20px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cc-fg-2);
}
.cc-md-ul li, .cc-md-ol li {
  margin: 3px 0;
  padding-left: 4px;
}
.cc-md-ul li::marker {
  color: var(--cc-accent);
  content: '▸  ';
  font-weight: 700;
}
.cc-md-ol li::marker {
  color: var(--cc-fg-3);
  font-family: var(--cc-mono);
  font-weight: 700;
}
.cc-md-ul li b, .cc-md-ol li b { color: var(--cc-fg); font-weight: 600; }
.cc-md-spacer { height: 4px; }
.cc-md-block {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
/* Tighten when nested inside a chat bubble - the bubble already has
   padding, so first/last paragraphs shouldn't double-up. */
.cc-msg .cc-md-p:first-child,
.cc-msg .cc-md-block .cc-md-p:first-child { margin-top: 0; }
.cc-msg .cc-md-p:last-child,
.cc-msg .cc-md-block .cc-md-p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   TERMINAL — non-admin coming-soon gate
   The Terminal view streams a live orderflow ladder + footprint that
   isn't fully wired yet. Until the live feed is GA, all non-admin
   accounts see the panels blurred behind a coming-soon overlay with a
   Discord link and a route back to the marketing site. The .cc-not-admin
   class is set on <body> by the auth-resolve path in dashboard-v2.js.
   ════════════════════════════════════════════════════════════════════ */
.cc-tx-soon-overlay { display: none; }
body.cc-not-admin .cc-tx-soon-wrap { position: relative; }
body.cc-not-admin .cc-tx-soon-wrap > .cc-tx { filter: blur(8px) saturate(0.6); pointer-events: none; user-select: none; }
body.cc-not-admin .cc-tx-soon-overlay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 5;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(8,8,14,0.55), rgba(8,8,14,0.85) 80%);
  text-align: center;
}
.cc-tx-soon-card {
  max-width: 540px;
  background: linear-gradient(180deg, rgba(20,20,28,0.95), rgba(8,8,14,0.98));
  border: 1px solid var(--cc-border-1, oklch(0.95 0.003 250 / 0.10));
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
}
.cc-tx-soon-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--cc-accent, oklch(0.78 0.13 60));
  margin-bottom: 8px;
}
.cc-tx-soon-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--cc-fg, oklch(0.95 0.003 250));
  margin: 0 0 8px;
}
.cc-tx-soon-body {
  font-size: 13.5px; line-height: 1.6;
  color: var(--cc-fg-2, oklch(0.65 0.005 250));
  margin: 0 0 18px;
}
.cc-tx-soon-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.cc-tx-soon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  border: 1px solid transparent;
}
.cc-tx-soon-btn:hover { transform: translateY(-1px); }
.cc-tx-soon-btn-primary {
  background: var(--cc-accent, oklch(0.78 0.13 60));
  color: #1a1208;
  border-color: var(--cc-accent, oklch(0.78 0.13 60));
}
.cc-tx-soon-btn-secondary {
  background: oklch(0.10 0.005 250 / 0.6);
  color: var(--cc-fg, oklch(0.95 0.003 250));
  border-color: oklch(0.95 0.003 250 / 0.18);
}
.cc-tx-soon-btn-secondary:hover { border-color: var(--cc-accent, oklch(0.78 0.13 60)); }