/* Fonts: Manrope + Unbounded from Google Fonts with display=swap (stylesheet link in HTML). */

:root {
  --bg: #060a16;
  --bg-soft: #0d1328;
  --surface: rgba(14, 20, 40, 0.7);
  --surface-solid: #0e1428;
  --surface-hover: rgba(20, 28, 56, 0.8);
  --border: rgba(110, 165, 255, 0.15);
  --border-accent: rgba(110, 165, 255, 0.35);
  --text: #edf2ff;
  --muted: #94aed4;
  --accent: #6ea5ff;
  --accent-2: #5cf0cb;
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --orange: #f59e0b;
  --gray: #6b7280;
  /* Reports / Premiumdarkuianimation-aligned tokens */
  --report-mint: #5cf0cb;
  --report-warn: #f0c45c;
  --report-muted: #7b90b8;
  --report-trend-up: #5cf0cb;
  --report-trend-down: #f06868;
  --report-surface: rgba(13, 17, 34, 0.55);
  --report-border: rgba(110, 165, 255, 0.06);
  --report-row-hover: rgba(20, 28, 52, 0.55);
  --radius: 16px;
  --radius-sm: 10px;
  /* Motion — smooth decel (premium dark UI feel) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.18s var(--ease-premium);
  --transition: 0.28s var(--ease-premium);
  --transition-slow: 0.42s var(--ease-premium);
  --motion-fast: 0.18s;
  --motion-medium: 0.4s;
  --motion-slow: 0.7s;
  /* App v2 semantic surface + rim tokens (theme-aware via --cb-rim-r/g/b + --surface-solid).
     Use these instead of hardcoded rgba(13,21,48,X) so cards adapt to all accent presets. */
  --surface-glass: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.30)), var(--surface-solid);
  --surface-glass-stronger: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.40)), var(--surface-solid);
  --rim-soft: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.12);
  --rim-medium: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.22);
  --rim-strong: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.36);
  --rim-glow: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.55);
  --bg-aurora-tint: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.18);
  /* Hero landing preview card — follows html[data-accent] via --accent / --accent-2 */
  --hero-preview-accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --hero-preview-accent-mid: color-mix(in srgb, var(--accent) 22%, transparent);
  --hero-preview-accent-strong: color-mix(in srgb, var(--accent) 38%, transparent);
  --hero-preview-accent-2-soft: color-mix(in srgb, var(--accent-2) 10%, transparent);
  --hero-preview-accent-2-mid: color-mix(in srgb, var(--accent-2) 45%, transparent);
  --hero-preview-rim-a: color-mix(in srgb, var(--accent) 55%, transparent);
  --hero-preview-rim-b: color-mix(in srgb, var(--accent-2) 50%, transparent);
  --hero-preview-rim-c: color-mix(in srgb, var(--accent) 35%, transparent);
  /* Shared UI tints (landing + app); mono presets remap --cb-* in their html[data-accent] blocks */
  --cb-rim-r: 110;
  --cb-rim-g: 165;
  --cb-rim-b: 255;
  --cb-mint-r: 92;
  --cb-mint-g: 240;
  --cb-mint-b: 203;
  --cb-purple-r: 139;
  --cb-purple-g: 92;
  --cb-purple-b: 246;
  --cb-lilac-r: 167;
  --cb-lilac-g: 139;
  --cb-lilac-b: 250;
  --cb-green-r: 34;
  --cb-green-g: 197;
  --cb-green-b: 94;
  --cb-sky-r: 59;
  --cb-sky-g: 130;
  --cb-sky-b: 246;
  /* Hero chart / wear bar — prime keeps rainbow; mono accents override */
  --float-0: #22c55e;
  --float-1: #eab308;
  --float-2: #f97316;
  --float-3: #ef4444;
  --chart-up: #34d399;
  --chart-down: #f87171;
  --chart-hold: #fbbf24;
  --focus-ring-r: 92;
  --focus-ring-g: 240;
  --focus-ring-b: 203;
}

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

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.chip:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(92, 240, 203, 0.2);
}

html[data-accent="aqua"] a:focus-visible,
html[data-accent="aqua"] button:focus-visible,
html[data-accent="aqua"] input:focus-visible,
html[data-accent="aqua"] select:focus-visible,
html[data-accent="aqua"] textarea:focus-visible,
html[data-accent="aqua"] summary:focus-visible,
html[data-accent="aqua"] .chip:focus-visible,
html[data-accent="aqua"] .dropdown-item:focus-visible,
html[data-accent="fuchsia"] a:focus-visible,
html[data-accent="fuchsia"] button:focus-visible,
html[data-accent="fuchsia"] input:focus-visible,
html[data-accent="fuchsia"] select:focus-visible,
html[data-accent="fuchsia"] textarea:focus-visible,
html[data-accent="fuchsia"] summary:focus-visible,
html[data-accent="fuchsia"] .chip:focus-visible,
html[data-accent="fuchsia"] .dropdown-item:focus-visible,
html[data-accent="amber"] a:focus-visible,
html[data-accent="amber"] button:focus-visible,
html[data-accent="amber"] input:focus-visible,
html[data-accent="amber"] select:focus-visible,
html[data-accent="amber"] textarea:focus-visible,
html[data-accent="amber"] summary:focus-visible,
html[data-accent="amber"] .chip:focus-visible,
html[data-accent="amber"] .dropdown-item:focus-visible,
html[data-accent="crimson"] a:focus-visible,
html[data-accent="crimson"] button:focus-visible,
html[data-accent="crimson"] input:focus-visible,
html[data-accent="crimson"] select:focus-visible,
html[data-accent="crimson"] textarea:focus-visible,
html[data-accent="crimson"] summary:focus-visible,
html[data-accent="crimson"] .chip:focus-visible,
html[data-accent="crimson"] .dropdown-item:focus-visible,
html[data-accent="emerald"] a:focus-visible,
html[data-accent="emerald"] button:focus-visible,
html[data-accent="emerald"] input:focus-visible,
html[data-accent="emerald"] select:focus-visible,
html[data-accent="emerald"] textarea:focus-visible,
html[data-accent="emerald"] summary:focus-visible,
html[data-accent="emerald"] .chip:focus-visible,
html[data-accent="emerald"] .dropdown-item:focus-visible,
html[data-accent="sapphire"] a:focus-visible,
html[data-accent="sapphire"] button:focus-visible,
html[data-accent="sapphire"] input:focus-visible,
html[data-accent="sapphire"] select:focus-visible,
html[data-accent="sapphire"] textarea:focus-visible,
html[data-accent="sapphire"] summary:focus-visible,
html[data-accent="sapphire"] .chip:focus-visible,
html[data-accent="sapphire"] .dropdown-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--focus-ring-r), var(--focus-ring-g), var(--focus-ring-b), 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  .chip:focus-visible,
  .dropdown-item:focus-visible {
    box-shadow: none;
  }
}

[hidden] { display: none !important; }

html {
  color-scheme: dark;
}



/* Accent presets — ids: prime, aqua, fuchsia, amber, crimson, emerald, sapphire (see script ACCENT_LEGACY) */
html[data-accent="prime"] {
  --accent: #6ea5ff;
  --accent-2: #5cf0cb;
  --border: rgba(110, 165, 255, 0.15);
  --border-accent: rgba(110, 165, 255, 0.35);
}

/* ─── Aqua — teal monochrome ─── */
html[data-accent="aqua"] {
  --accent: #00c9b8;
  --accent-2: #5eead4;
  --border: rgba(0, 201, 184, 0.22);
  --border-accent: rgba(0, 201, 184, 0.45);
  --bg: #030807;
  --bg-soft: #061210;
  --surface: rgba(8, 22, 22, 0.76);
  --surface-solid: #0a1816;
  --surface-hover: rgba(12, 36, 32, 0.85);
  --text: #f0fffc;
  --muted: #8fb8b3;
  --green: #99f6e4;
  --yellow: #2dd4bf;
  --red: #0d9488;
  --orange: #14b8a6;
  --gray: #5f7a76;
  --report-mint: #ccfbf1;
  --report-warn: #5eead4;
  --report-muted: #729a94;
  --report-trend-up: #ecfdf5;
  --report-trend-down: #115e59;
  --report-border: rgba(0, 201, 184, 0.1);
  --report-row-hover: rgba(6, 40, 36, 0.45);
  --cb-rim-r: 0;
  --cb-rim-g: 180;
  --cb-rim-b: 168;
  --cb-mint-r: 94;
  --cb-mint-g: 234;
  --cb-mint-b: 212;
  --cb-purple-r: 8;
  --cb-purple-g: 90;
  --cb-purple-b: 84;
  --cb-lilac-r: 20;
  --cb-lilac-g: 120;
  --cb-lilac-b: 110;
  --cb-green-r: 153;
  --cb-green-g: 246;
  --cb-green-b: 228;
  --cb-sky-r: 20;
  --cb-sky-g: 184;
  --cb-sky-b: 166;
  --float-0: #042f2c;
  --float-1: #0f766e;
  --float-2: #14b8a6;
  --float-3: #2dd4bf;
  --chart-up: #99f6e4;
  --chart-down: #0d9488;
  --chart-hold: #5eead4;
  --focus-ring-r: 45;
  --focus-ring-g: 212;
  --focus-ring-b: 191;
}

/* ─── Fuchsia — magenta monochrome ─── */
html[data-accent="fuchsia"] {
  --accent: #e879f9;
  --accent-2: #f0abfc;
  --border: rgba(232, 121, 249, 0.24);
  --border-accent: rgba(232, 121, 249, 0.46);
  --bg: #0a030c;
  --bg-soft: #120818;
  --surface: rgba(28, 10, 32, 0.78);
  --surface-solid: #180a1c;
  --surface-hover: rgba(42, 14, 48, 0.88);
  --text: #fdf4ff;
  --muted: #c4a3c8;
  --green: #f5d0fe;
  --yellow: #e879f9;
  --red: #c026d3;
  --orange: #a21caf;
  --gray: #8f6b92;
  --report-mint: #fae8ff;
  --report-warn: #e879f9;
  --report-muted: #a78b96;
  --report-trend-up: #fdf4ff;
  --report-trend-down: #86198f;
  --report-border: rgba(232, 121, 249, 0.12);
  --report-row-hover: rgba(50, 10, 56, 0.5);
  --cb-rim-r: 232;
  --cb-rim-g: 121;
  --cb-rim-b: 249;
  --cb-mint-r: 240;
  --cb-mint-g: 171;
  --cb-mint-b: 252;
  --cb-purple-r: 134;
  --cb-purple-g: 25;
  --cb-purple-b: 143;
  --cb-lilac-r: 176;
  --cb-lilac-g: 40;
  --cb-lilac-b: 188;
  --cb-green-r: 245;
  --cb-green-g: 208;
  --cb-green-b: 254;
  --cb-sky-r: 217;
  --cb-sky-g: 70;
  --cb-sky-b: 239;
  --float-0: #3b0764;
  --float-1: #701a75;
  --float-2: #a21caf;
  --float-3: #c026d3;
  --chart-up: #f5d0fe;
  --chart-down: #c026d3;
  --chart-hold: #e879f9;
  --focus-ring-r: 232;
  --focus-ring-g: 121;
  --focus-ring-b: 249;
}

/* ─── Amber — gold monochrome ─── */
html[data-accent="amber"] {
  --accent: #f0b90b;
  --accent-2: #fcd34d;
  --border: rgba(240, 185, 11, 0.26);
  --border-accent: rgba(240, 185, 11, 0.48);
  --bg: #0a0802;
  --bg-soft: #141006;
  --surface: rgba(32, 26, 8, 0.8);
  --surface-solid: #1c1608;
  --surface-hover: rgba(48, 38, 10, 0.88);
  --text: #fffbeb;
  --muted: #c4b89a;
  --green: #fde68a;
  --yellow: #fbbf24;
  --red: #d97706;
  --orange: #b45309;
  --gray: #8a7f62;
  --report-mint: #fff7ed;
  --report-warn: #fcd34d;
  --report-muted: #a89a78;
  --report-trend-up: #fffbeb;
  --report-trend-down: #92400e;
  --report-border: rgba(240, 185, 11, 0.12);
  --report-row-hover: rgba(48, 32, 6, 0.5);
  --cb-rim-r: 240;
  --cb-rim-g: 185;
  --cb-rim-b: 11;
  --cb-mint-r: 252;
  --cb-mint-g: 211;
  --cb-mint-b: 77;
  --cb-purple-r: 146;
  --cb-purple-g: 64;
  --cb-purple-b: 14;
  --cb-lilac-r: 180;
  --cb-lilac-g: 83;
  --cb-lilac-b: 9;
  --cb-green-r: 253;
  --cb-green-g: 230;
  --cb-green-b: 138;
  --cb-sky-r: 217;
  --cb-sky-g: 119;
  --cb-sky-b: 6;
  --float-0: #422006;
  --float-1: #78350f;
  --float-2: #b45309;
  --float-3: #f59e0b;
  --chart-up: #fde68a;
  --chart-down: #d97706;
  --chart-hold: #fbbf24;
  --focus-ring-r: 251;
  --focus-ring-g: 191;
  --focus-ring-b: 36;
}

/* ─── Crimson — red monochrome ─── */
html[data-accent="crimson"] {
  --accent: #dc2323;
  --accent-2: #e34f4f;
  --border: rgba(220, 35, 35, 0.22);
  --border-accent: rgba(220, 35, 35, 0.45);
  --bg: #050303;
  --bg-soft: #0c0606;
  --surface: rgba(24, 10, 10, 0.76);
  --surface-solid: #140808;
  --surface-hover: rgba(36, 14, 14, 0.85);
  --text: #fdf5f5;
  --muted: #c4a0a0;
  --green: #f1a7a7;
  --yellow: #ea7b7b;
  --red: #dc2323;
  --orange: #b01c1c;
  --gray: #8a7070;
  --report-mint: #fce9e9;
  --report-warn: #e34f4f;
  --report-muted: #9e7676;
  --report-trend-up: #fdf5f5;
  --report-trend-down: #841515;
  --report-border: rgba(220, 35, 35, 0.08);
  --report-row-hover: rgba(44, 7, 7, 0.5);
  --cb-rim-r: 220;
  --cb-rim-g: 35;
  --cb-rim-b: 35;
  --cb-mint-r: 227;
  --cb-mint-g: 79;
  --cb-mint-b: 79;
  --cb-purple-r: 132;
  --cb-purple-g: 21;
  --cb-purple-b: 21;
  --cb-lilac-r: 176;
  --cb-lilac-g: 28;
  --cb-lilac-b: 28;
  --cb-green-r: 241;
  --cb-green-g: 167;
  --cb-green-b: 167;
  --cb-sky-r: 220;
  --cb-sky-g: 35;
  --cb-sky-b: 35;
  --float-0: #2c0707;
  --float-1: #580e0e;
  --float-2: #b01c1c;
  --float-3: #dc2323;
  --chart-up: #f1a7a7;
  --chart-down: #dc2323;
  --chart-hold: #ea7b7b;
  --focus-ring-r: 220;
  --focus-ring-g: 35;
  --focus-ring-b: 35;
}

/* ─── Emerald — green monochrome ─── */
html[data-accent="emerald"] {
  --accent: #22c55e;
  --accent-2: #4ade80;
  --border: rgba(34, 197, 94, 0.24);
  --border-accent: rgba(34, 197, 94, 0.46);
  --bg: #030806;
  --bg-soft: #06120a;
  --surface: rgba(8, 24, 14, 0.78);
  --surface-solid: #0a1810;
  --surface-hover: rgba(12, 40, 22, 0.88);
  --text: #ecfdf5;
  --muted: #96b8a8;
  --green: #bbf7d0;
  --yellow: #4ade80;
  --red: #15803d;
  --orange: #16a34a;
  --gray: #5f7a6c;
  --report-mint: #dcfce7;
  --report-warn: #4ade80;
  --report-muted: #72948a;
  --report-trend-up: #f0fdf4;
  --report-trend-down: #14532d;
  --report-border: rgba(34, 197, 94, 0.1);
  --report-row-hover: rgba(6, 40, 22, 0.48);
  --cb-rim-r: 34;
  --cb-rim-g: 197;
  --cb-rim-b: 94;
  --cb-mint-r: 74;
  --cb-mint-g: 222;
  --cb-mint-b: 128;
  --cb-purple-r: 6;
  --cb-purple-g: 78;
  --cb-purple-b: 59;
  --cb-lilac-r: 22;
  --cb-lilac-g: 101;
  --cb-lilac-b: 52;
  --cb-green-r: 187;
  --cb-green-g: 247;
  --cb-green-b: 208;
  --cb-sky-r: 22;
  --cb-sky-g: 163;
  --cb-sky-b: 74;
  --float-0: #052e16;
  --float-1: #14532d;
  --float-2: #15803d;
  --float-3: #22c55e;
  --chart-up: #bbf7d0;
  --chart-down: #15803d;
  --chart-hold: #4ade80;
  --focus-ring-r: 52;
  --focus-ring-g: 211;
  --focus-ring-b: 153;
}

/* ─── Sapphire — blue monochrome ─── */
html[data-accent="sapphire"] {
  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --border: rgba(59, 130, 246, 0.24);
  --border-accent: rgba(59, 130, 246, 0.46);
  --bg: #030712;
  --bg-soft: #060d1a;
  --surface: rgba(10, 18, 36, 0.78);
  --surface-solid: #0c1426;
  --surface-hover: rgba(16, 28, 52, 0.88);
  --text: #eff6ff;
  --muted: #9cb4d4;
  --green: #bfdbfe;
  --yellow: #60a5fa;
  --red: #2563eb;
  --orange: #1d4ed8;
  --gray: #6b7c93;
  --report-mint: #dbeafe;
  --report-warn: #60a5fa;
  --report-muted: #7b92ae;
  --report-trend-up: #f0f9ff;
  --report-trend-down: #1e40af;
  --report-border: rgba(59, 130, 246, 0.1);
  --report-row-hover: rgba(10, 28, 56, 0.5);
  --cb-rim-r: 59;
  --cb-rim-g: 130;
  --cb-rim-b: 246;
  --cb-mint-r: 96;
  --cb-mint-g: 165;
  --cb-mint-b: 250;
  --cb-purple-r: 30;
  --cb-purple-g: 64;
  --cb-purple-b: 175;
  --cb-lilac-r: 37;
  --cb-lilac-g: 99;
  --cb-lilac-b: 235;
  --cb-green-r: 191;
  --cb-green-g: 219;
  --cb-green-b: 254;
  --cb-sky-r: 37;
  --cb-sky-g: 99;
  --cb-sky-b: 235;
  --float-0: #172554;
  --float-1: #1e3a8a;
  --float-2: #1d4ed8;
  --float-3: #2563eb;
  --chart-up: #bfdbfe;
  --chart-down: #2563eb;
  --chart-hold: #60a5fa;
  --focus-ring-r: 96;
  --focus-ring-g: 165;
  --focus-ring-b: 250;
}

/* Accent switch ripple — js/chinabot-accent-transition.js (no View Transitions API) */
#chinabot-accent-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  border: none;
  padding: 0;
  margin: 0;
  background: radial-gradient(
    circle closest-side at var(--veil-x, 50%) var(--veil-y, 50%),
    color-mix(in srgb, var(--accent) 62%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 38%, transparent) 38%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(0.22);
  transform-origin: var(--veil-x, 50%) var(--veil-y, 50%);
  will-change: opacity, transform;
}

#chinabot-accent-veil.chinabot-accent-veil--on {
  animation: chinabot-accent-veil-pulse 0.48s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}

@keyframes chinabot-accent-veil-pulse {
  0% {
    opacity: 0.94;
    transform: scale(0.18);
  }
  100% {
    opacity: 0;
    transform: scale(4.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  #chinabot-accent-veil,
  #chinabot-accent-veil.chinabot-accent-veil--on {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

/* Fixed top: scroll read progress (uses --accent / --accent-2, incl. data-accent presets) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10050;
  pointer-events: none;
  background: rgba(110, 165, 255, 0.14);
}



.scroll-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 14px rgba(92, 240, 203, 0.35);
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress__fill {
    will-change: auto;
  }
}

html[data-accent="aqua"] .scroll-progress,
html[data-accent="fuchsia"] .scroll-progress,
html[data-accent="amber"] .scroll-progress,
html[data-accent="crimson"] .scroll-progress,
html[data-accent="emerald"] .scroll-progress,
html[data-accent="sapphire"] .scroll-progress {
  background: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.16);
}

html[data-accent="aqua"] .scroll-progress__fill,
html[data-accent="fuchsia"] .scroll-progress__fill,
html[data-accent="amber"] .scroll-progress__fill,
html[data-accent="crimson"] .scroll-progress__fill,
html[data-accent="emerald"] .scroll-progress__fill,
html[data-accent="sapphire"] .scroll-progress__fill {
  box-shadow: 0 0 14px rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.38);
}

/* Mono accents: grid + glows + haze follow --cb-rim-* */
html[data-accent="aqua"] .bg-grid,
html[data-accent="fuchsia"] .bg-grid,
html[data-accent="amber"] .bg-grid,
html[data-accent="crimson"] .bg-grid,
html[data-accent="emerald"] .bg-grid,
html[data-accent="sapphire"] .bg-grid {
  background-image:
    linear-gradient(rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.034) 1px, transparent 1px);
}

html[data-accent="aqua"] .bg-glow--1,
html[data-accent="fuchsia"] .bg-glow--1,
html[data-accent="amber"] .bg-glow--1,
html[data-accent="crimson"] .bg-glow--1,
html[data-accent="emerald"] .bg-glow--1,
html[data-accent="sapphire"] .bg-glow--1 {
  background: radial-gradient(
    circle at 34% 32%,
    rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.22) 0%,
    rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.1) 38%,
    transparent 74%
  );
}

html[data-accent="aqua"] .bg-glow--2,
html[data-accent="fuchsia"] .bg-glow--2,
html[data-accent="amber"] .bg-glow--2,
html[data-accent="crimson"] .bg-glow--2,
html[data-accent="emerald"] .bg-glow--2,
html[data-accent="sapphire"] .bg-glow--2 {
  background:
    radial-gradient(
      circle at 70% 64%,
      rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.14) 0%,
      rgba(0, 0, 0, 0.1) 40%,
      transparent 72%
    ),
    radial-gradient(
      circle at 36% 24%,
      rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.1) 0%,
      transparent 38%
    );
}

html[data-accent="aqua"] .landing-bg-haze,
html[data-accent="fuchsia"] .landing-bg-haze,
html[data-accent="amber"] .landing-bg-haze,
html[data-accent="crimson"] .landing-bg-haze,
html[data-accent="emerald"] .landing-bg-haze,
html[data-accent="sapphire"] .landing-bg-haze {
  background:
    radial-gradient(
      58% 44% at 18% 14%,
      rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.16) 0%,
      transparent 72%
    ),
    radial-gradient(
      42% 34% at 78% 72%,
      rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.12) 0%,
      transparent 74%
    ),
    radial-gradient(
      26% 20% at 66% 24%,
      rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.08) 0%,
      transparent 76%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.12) 54%, rgba(0, 0, 0, 0.06) 100%);
}

/* Mesh-gradient background pulse — slow drift+breathe on .bg-glow layers (login, share, legal). */
@keyframes bgGlowPulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: var(--bg-glow-base-opacity, 0.7); }
  33%      { transform: translate3d(40px, -28px, 0) scale(1.08); opacity: calc(var(--bg-glow-base-opacity, 0.7) + 0.15); }
  66%      { transform: translate3d(-32px, 22px, 0) scale(0.96); opacity: calc(var(--bg-glow-base-opacity, 0.7) - 0.1); }
}

.bg-glow {
  animation: bgGlowPulse 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.bg-glow--2 {
  animation-duration: 18s;
  animation-delay: -7s;
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow {
    animation: none;
    will-change: auto;
  }
}

/* View Transitions API — smooth page-to-page fades (Chrome 111+, Edge, Opera). */
@keyframes cbPageOut {
  to { opacity: 0; transform: translateY(-8px) scale(0.995); }
}
@keyframes cbPageIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
}
::view-transition-old(root) {
  animation: cbPageOut 0.32s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
::view-transition-new(root) {
  animation: cbPageIn 0.42s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Custom cursor (dot + ring) — js/anim/cursor.js attaches html.cb-cursor-on. */
.cb-cursor-dot,
.cb-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483645;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform, width, height;
}
.cb-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #ffffff;
  border-radius: 50%;
}
.cb-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transition:
    width 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    height 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    margin 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    border-radius 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
html.cb-cursor-on,
html.cb-cursor-on *,
html.cb-cursor-on a,
html.cb-cursor-on button {
  cursor: none !important;
}
html.cb-cursor-on.cb-cursor-hover .cb-cursor-ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.95);
  background: rgba(var(--cb-rim-r), var(--cb-rim-g), var(--cb-rim-b), 0.12);
}
html.cb-cursor-on.cb-cursor-text .cb-cursor-ring {
  width: 4px;
  height: 26px;
  margin: -13px 0 0 -2px;
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.5);
}
@media (pointer: coarse) {
  .cb-cursor-dot,
  .cb-cursor-ring {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cb-cursor-ring {
    transition: none;
  }
}

/* Legal pages (privacy, terms) — minimal fade-in stagger for sections. */
body.legal-page,
body.legal-page-body main > section,
body.legal-page,
body.legal-page-body article > section,
body.legal-page,
body.legal-page-body .legal-body > section {
  opacity: 0;
  transform: translateY(14px);
  animation: cbLegalIn 0.65s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
body.legal-page,
body.legal-page-body main > section:nth-of-type(1),
body.legal-page,
body.legal-page-body article > section:nth-of-type(1),
body.legal-page,
body.legal-page-body .legal-body > section:nth-of-type(1) { animation-delay: 0.05s; }
body.legal-page,
body.legal-page-body main > section:nth-of-type(2),
body.legal-page,
body.legal-page-body article > section:nth-of-type(2),
body.legal-page,
body.legal-page-body .legal-body > section:nth-of-type(2) { animation-delay: 0.12s; }
body.legal-page,
body.legal-page-body main > section:nth-of-type(3),
body.legal-page,
body.legal-page-body article > section:nth-of-type(3),
body.legal-page,
body.legal-page-body .legal-body > section:nth-of-type(3) { animation-delay: 0.18s; }
body.legal-page,
body.legal-page-body main > section:nth-of-type(4),
body.legal-page,
body.legal-page-body article > section:nth-of-type(4),
body.legal-page,
body.legal-page-body .legal-body > section:nth-of-type(4) { animation-delay: 0.24s; }
body.legal-page,
body.legal-page-body main > section:nth-of-type(n+5),
body.legal-page,
body.legal-page-body article > section:nth-of-type(n+5),
body.legal-page,
body.legal-page-body .legal-body > section:nth-of-type(n+5) { animation-delay: 0.28s; }

@keyframes cbLegalIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.legal-page,
body.legal-page-body main > section,
  body.legal-page,
body.legal-page-body article > section,
  body.legal-page,
body.legal-page-body .legal-body > section {
    opacity: 1;
    transform: none;
    animation: none;
  }
}