/* Dark mode — activated only when the visitor toggles it (html.dark). */
html.dark {
  --background: #0b1220;
  --foreground: #e8ecf5;
  --surface: #111a2e;
  --surface-soft: #0f172a;
  --card: #111a2e;
  --card-foreground: #e8ecf5;
  --muted: #1a2438;
  --muted-foreground: #94a3b8;
  --accent: #1a2438;
  --border: #1f2a44;
  --hero-bg: #0b1220;
  --grid-color: rgba(148, 163, 200, 0.12);
  --primary: #60a5fa;
  --primary-foreground: #08111f;
  --secondary: #c084fc;
  --ring: #60a5fa;
  --shadow-card: 0 8px 28px -14px rgba(0, 0, 0, 0.75);
  --frame-bg: radial-gradient(circle at 50% 55%, #6b4a2a 0%, #4a3320 45%, #2a1f14 100%);
  color-scheme: dark;
}

html.dark .glass-bar { border-color: rgba(232, 236, 245, 0.08); box-shadow: 0 8px 30px -12px rgba(0,0,0,.6); }
html.dark .cmp-kicker { background: #ffffff; color: #0f172a; }
html.dark .cmp-badge { background: rgba(2, 6, 23, .82); }
html.dark .cmp-like { background: rgba(17, 26, 46, .95); color: var(--foreground); }
html.dark .s-x { background: #e2e8f0; color: #0f172a; }
html.dark .cmp-browse-head .mark::after { background: rgba(251, 191, 36, .22); }
html.dark .cmp-card:hover { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .85); }