/* ══════════════════════════════════════════════
   RainStress — Theme Definitions (10 themes)
   Load after app.css
══════════════════════════════════════════════ */

/* ── PATTERN OVERLAY BASE ───────────────────── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-image: var(--pattern-bg, none);
  background-size: var(--pattern-size, auto);
  animation: var(--pattern-anim, none);
}

/* Sidebar accent bar */
.sidebar { border-right: 1px solid var(--border); border-left: 3px solid var(--sidebar-accent, transparent); }

/* Active nav indicator uses accent color */
.nav-item.active::before { background: var(--accent) !important; }

/* Card hover uses theme glow */
.card:hover { border-color: var(--card-glow-border, #252525); box-shadow: var(--card-glow-shadow, none); }
.stat-card:hover { border-color: var(--card-glow-border, #2a2a2a); box-shadow: var(--card-glow-shadow, none); }
.stat-card.highlight { border-color: var(--accent-dim, rgba(255,255,255,0.1)) !important; box-shadow: var(--highlight-glow, none); }

/* Launch button theme glow */
.btn-launch:hover { box-shadow: var(--launch-glow, 0 0 24px rgba(255,255,255,0.06)); }

/* Scrollbar theming */
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #252525); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #333); }

/* Theme dot enhancements */
.theme-dot[data-theme="arctic"]  { background: #00d4ff; box-shadow: 0 0 4px #00d4ff; }
.theme-dot[data-theme="gold"]    { background: linear-gradient(135deg, #ffb300, #ffd54f); }
.theme-dot[data-theme="blood"]   { background: #cc0022; }
.theme-dot[data-theme="neon"]    { background: #ff00cc; box-shadow: 0 0 4px #ff00cc; }
.theme-dot[data-theme="ocean"]   { background: #00b8d4; }

.theme-dot-lg[data-theme="arctic"] { background: radial-gradient(circle, #00d4ff 0%, #0088bb 100%); }
.theme-dot-lg[data-theme="gold"]   { background: linear-gradient(135deg, #ffb300 0%, #ff8c00 100%); }
.theme-dot-lg[data-theme="blood"]  { background: radial-gradient(circle, #cc0022 0%, #7a0010 100%); }
.theme-dot-lg[data-theme="neon"]   { background: linear-gradient(135deg, #ff00cc 0%, #aa00ff 100%); }
.theme-dot-lg[data-theme="ocean"]  { background: radial-gradient(circle, #00b8d4 0%, #00607a 100%); }

/* ═══════════════════════════════════════════════
   1. VOID (default) — Enhanced
═══════════════════════════════════════════════ */
:root,
[data-theme="void"] {
  --glow: rgba(255,255,255,0.06);
  --accent-dim: rgba(255,255,255,0.08);
  --card-glow-border: #222;
  --card-glow-shadow: none;
  --highlight-glow: 0 0 20px rgba(255,255,255,0.04);
  --launch-glow: 0 0 28px rgba(255,255,255,0.08);
  --sidebar-accent: transparent;
  --scrollbar-thumb: #1e1e1e;
  --scrollbar-thumb-hover: #2a2a2a;
  --pattern-bg: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.015) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.01) 0%, transparent 60%);
  --pattern-size: 100% 100%;
  --pattern-anim: none;
}

/* ═══════════════════════════════════════════════
   2. CYBER — Electric Blue, Scanlines
═══════════════════════════════════════════════ */
[data-theme="cyber"] {
  --bg: #030810; --bg-card: #060d1a; --bg-hover: #0a1628; --bg-input: #04091a;
  --sidebar-bg: #020507; --border: #0c1e40; --border-dim: #07142a;
  --text: #b8d8ff; --text-dim: #4a80c0; --text-muted: #1e3a62;
  --accent: #3b9eff; --white: #6ec6ff; --danger: #ff4466;
  color-scheme: dark;

  --glow: rgba(59,158,255,0.15);
  --accent-dim: rgba(59,158,255,0.12);
  --card-glow-border: #0e2848;
  --card-glow-shadow: 0 0 20px rgba(59,158,255,0.06);
  --highlight-glow: 0 0 30px rgba(59,158,255,0.12);
  --launch-glow: 0 0 32px rgba(59,158,255,0.2);
  --sidebar-accent: #3b9eff;
  --scrollbar-thumb: #0e2040;
  --scrollbar-thumb-hover: #163060;
  --pattern-bg:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(59,158,255,0.018) 3px,
      rgba(59,158,255,0.018) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(59,158,255,0.012) 28px,
      rgba(59,158,255,0.012) 29px
    );
  --pattern-size: 100% 4px, 29px 100%;
  --pattern-anim: cyberScan 8s linear infinite;
}

[data-theme="cyber"] .dot.online { background: #3b9eff; box-shadow: 0 0 10px #3b9eff; }
[data-theme="cyber"] .landing-signin-btn,
[data-theme="cyber"] .hero-cta-primary,
[data-theme="cyber"] .btn-login { background: #3b9eff; color: #000; }
[data-theme="cyber"] .landing-signin-btn:hover,
[data-theme="cyber"] .hero-cta-primary:hover { background: #6db8ff; }
[data-theme="cyber"] .stat-card.highlight { background: rgba(59,158,255,0.04) !important; }
[data-theme="cyber"] .nav-item:hover { background: rgba(59,158,255,0.08); color: #3b9eff; }
[data-theme="cyber"] .btn-launch { border-color: rgba(59,158,255,0.2); background: rgba(59,158,255,0.06); }
[data-theme="cyber"] .btn-launch:hover { background: rgba(59,158,255,0.12); color: #6ec6ff; }
[data-theme="cyber"] .topbar { border-bottom-color: #0c1e40; box-shadow: 0 1px 0 rgba(59,158,255,0.06); }
[data-theme="cyber"] .sidebar { box-shadow: 4px 0 24px rgba(59,158,255,0.04); }

@keyframes cyberScan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 -100px, 0 0; }
}

/* ═══════════════════════════════════════════════
   3. INFERNO — Fire & Embers
═══════════════════════════════════════════════ */
[data-theme="inferno"] {
  --bg: #0e0200; --bg-card: #160400; --bg-hover: #200700; --bg-input: #110300;
  --sidebar-bg: #090100; --border: #3a0a00; --border-dim: #230600;
  --text: #ffe8d0; --text-dim: #c05820; --text-muted: #6a2808;
  --accent: #ff5500; --white: #ffa060; --danger: #ff2222;
  color-scheme: dark;

  --glow: rgba(255,85,0,0.15);
  --accent-dim: rgba(255,85,0,0.12);
  --card-glow-border: #4a1000;
  --card-glow-shadow: 0 0 20px rgba(255,85,0,0.07);
  --highlight-glow: 0 0 30px rgba(255,85,0,0.12);
  --launch-glow: 0 0 40px rgba(255,85,0,0.2);
  --sidebar-accent: #ff5500;
  --scrollbar-thumb: #3a0a00;
  --scrollbar-thumb-hover: #5a1400;
  --pattern-bg:
    radial-gradient(ellipse at 50% 100%, rgba(255,100,0,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(255,50,0,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 85%, rgba(255,120,0,0.04) 0%, transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 4px,
      rgba(255,60,0,0.015) 4px,
      rgba(255,60,0,0.015) 5px
    );
  --pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 5px;
  --pattern-anim: infernoFlicker 6s ease-in-out infinite alternate;
}

[data-theme="inferno"] .dot.online { background: #ff5500; box-shadow: 0 0 10px #ff5500; }
[data-theme="inferno"] .landing-signin-btn,
[data-theme="inferno"] .hero-cta-primary,
[data-theme="inferno"] .btn-login { background: linear-gradient(135deg, #ff3300, #ff7700); color: #fff; }
[data-theme="inferno"] .landing-signin-btn:hover,
[data-theme="inferno"] .hero-cta-primary:hover { background: linear-gradient(135deg, #ff5500, #ff9900); }
[data-theme="inferno"] .stat-card.highlight { background: rgba(255,85,0,0.04) !important; }
[data-theme="inferno"] .nav-item:hover { background: rgba(255,85,0,0.08); color: #ff5500; }
[data-theme="inferno"] .btn-launch { border-color: rgba(255,85,0,0.25); background: rgba(255,85,0,0.07); }
[data-theme="inferno"] .btn-launch:hover { background: rgba(255,85,0,0.14); color: #ffaa77; }
[data-theme="inferno"] .topbar { box-shadow: 0 1px 0 rgba(255,85,0,0.08); }
[data-theme="inferno"] .sidebar { box-shadow: 4px 0 24px rgba(255,85,0,0.05); }

@keyframes infernoFlicker {
  0%   { opacity: 0.8; }
  50%  { opacity: 1; }
  100% { opacity: 0.9; }
}

/* ═══════════════════════════════════════════════
   4. MATRIX — Terminal Green, Rain
═══════════════════════════════════════════════ */
[data-theme="matrix"] {
  --bg: #010b01; --bg-card: #031203; --bg-hover: #061a06; --bg-input: #020e02;
  --sidebar-bg: #010801; --border: #0a360a; --border-dim: #072207;
  --text: #a8ffa8; --text-dim: #30a830; --text-muted: #145014;
  --accent: #00ff41; --white: #77ff88; --danger: #ff3333;
  color-scheme: dark;

  --glow: rgba(0,255,65,0.12);
  --accent-dim: rgba(0,255,65,0.1);
  --card-glow-border: #0a3a0a;
  --card-glow-shadow: 0 0 20px rgba(0,255,65,0.07);
  --highlight-glow: 0 0 30px rgba(0,255,65,0.1);
  --launch-glow: 0 0 40px rgba(0,255,65,0.18);
  --sidebar-accent: #00ff41;
  --scrollbar-thumb: #0a360a;
  --scrollbar-thumb-hover: #104810;
  --pattern-bg:
    radial-gradient(ellipse at 50% 0%, rgba(0,255,65,0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 12px,
      rgba(0,255,65,0.02) 12px,
      rgba(0,255,65,0.02) 13px
    );
  --pattern-size: 100% 100%, 13px 100%;
  --pattern-anim: matrixRain 12s linear infinite;
}

[data-theme="matrix"] .dot.online { background: #00ff41; box-shadow: 0 0 10px #00ff41; }
[data-theme="matrix"] .landing-signin-btn,
[data-theme="matrix"] .hero-cta-primary,
[data-theme="matrix"] .btn-login { background: #00ff41; color: #000; font-family: 'JetBrains Mono', monospace; }
[data-theme="matrix"] .landing-signin-btn:hover,
[data-theme="matrix"] .hero-cta-primary:hover { background: #44ff77; }
[data-theme="matrix"] .stat-value,
[data-theme="matrix"] .plan-price .amount { font-family: 'JetBrains Mono', monospace; color: #00ff41; }
[data-theme="matrix"] .stat-card.highlight { background: rgba(0,255,65,0.03) !important; }
[data-theme="matrix"] .nav-item:hover { background: rgba(0,255,65,0.07); color: #00ff41; }
[data-theme="matrix"] .btn-launch { border-color: rgba(0,255,65,0.2); background: rgba(0,255,65,0.05); font-family: 'JetBrains Mono', monospace; }
[data-theme="matrix"] .btn-launch:hover { background: rgba(0,255,65,0.12); color: #77ff88; }
[data-theme="matrix"] .page-title,
[data-theme="matrix"] .sidebar-brand { font-family: 'JetBrains Mono', monospace; }
[data-theme="matrix"] .topbar { box-shadow: 0 1px 0 rgba(0,255,65,0.06); }
[data-theme="matrix"] .sidebar { box-shadow: 4px 0 24px rgba(0,255,65,0.04); }

@keyframes matrixRain {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 200px; }
}

/* ═══════════════════════════════════════════════
   5. PULSE — Deep Violet, Neon Waves
═══════════════════════════════════════════════ */
[data-theme="pulse"] {
  --bg: #060010; --bg-card: #0d021c; --bg-hover: #150330; --bg-input: #09011a;
  --sidebar-bg: #04000c; --border: #2c0660; --border-dim: #1c0440;
  --text: #e0c0ff; --text-dim: #9040d0; --text-muted: #481880;
  --accent: #bf00ff; --white: #d080ff; --danger: #ff3366;
  color-scheme: dark;

  --glow: rgba(191,0,255,0.15);
  --accent-dim: rgba(191,0,255,0.12);
  --card-glow-border: #2e0868;
  --card-glow-shadow: 0 0 20px rgba(191,0,255,0.08);
  --highlight-glow: 0 0 32px rgba(191,0,255,0.14);
  --launch-glow: 0 0 40px rgba(191,0,255,0.22);
  --sidebar-accent: #bf00ff;
  --scrollbar-thumb: #2c0660;
  --scrollbar-thumb-hover: #420a90;
  --pattern-bg:
    radial-gradient(ellipse at 50% 0%,   rgba(191,0,255,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(120,0,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 0%   80%,  rgba(220,0,255,0.04) 0%, transparent 40%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0px, transparent 60px, rgba(191,0,255,0.015) 60px, rgba(191,0,255,0.015) 61px);
  --pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  --pattern-anim: pulseSpin 20s linear infinite;
}

[data-theme="pulse"] .dot.online { background: #bf00ff; box-shadow: 0 0 12px #bf00ff; }
[data-theme="pulse"] .landing-signin-btn,
[data-theme="pulse"] .hero-cta-primary,
[data-theme="pulse"] .btn-login { background: linear-gradient(135deg, #9000cc, #e000ff); color: #fff; }
[data-theme="pulse"] .landing-signin-btn:hover,
[data-theme="pulse"] .hero-cta-primary:hover { background: linear-gradient(135deg, #aa00ff, #ff44ff); }
[data-theme="pulse"] .stat-card.highlight { background: rgba(191,0,255,0.04) !important; }
[data-theme="pulse"] .nav-item:hover { background: rgba(191,0,255,0.08); color: #bf00ff; }
[data-theme="pulse"] .btn-launch { border-color: rgba(191,0,255,0.25); background: rgba(191,0,255,0.07); }
[data-theme="pulse"] .btn-launch:hover { background: rgba(191,0,255,0.14); color: #e088ff; }
[data-theme="pulse"] .topbar { box-shadow: 0 1px 0 rgba(191,0,255,0.08); }
[data-theme="pulse"] .sidebar { box-shadow: 4px 0 28px rgba(191,0,255,0.06); }

@keyframes pulseSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════
   6. ARCTIC — Ice & Crystal
═══════════════════════════════════════════════ */
[data-theme="arctic"] {
  --bg: #010a12; --bg-card: #031420; --bg-hover: #062030; --bg-input: #020d1a;
  --sidebar-bg: #010810; --border: #0a2e46; --border-dim: #061d2e;
  --text: #c8f0ff; --text-dim: #3a98c0; --text-muted: #1a4e68;
  --accent: #00d4ff; --white: #80e8ff; --danger: #ff4466;
  color-scheme: dark;

  --glow: rgba(0,212,255,0.14);
  --accent-dim: rgba(0,212,255,0.1);
  --card-glow-border: #0c3050;
  --card-glow-shadow: 0 0 20px rgba(0,212,255,0.07);
  --highlight-glow: 0 0 30px rgba(0,212,255,0.12);
  --launch-glow: 0 0 40px rgba(0,212,255,0.2);
  --sidebar-accent: #00d4ff;
  --scrollbar-thumb: #0a2e46;
  --scrollbar-thumb-hover: #103e60;
  --pattern-bg:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 36px,
      rgba(0,212,255,0.025) 36px,
      rgba(0,212,255,0.025) 37px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 36px,
      rgba(0,180,255,0.018) 36px,
      rgba(0,180,255,0.018) 37px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.04) 0%, transparent 60%);
  --pattern-size: 37px 37px, 37px 37px, 100% 100%;
  --pattern-anim: none;
}

[data-theme="arctic"] .dot.online { background: #00d4ff; box-shadow: 0 0 10px #00d4ff; }
[data-theme="arctic"] .landing-signin-btn,
[data-theme="arctic"] .hero-cta-primary,
[data-theme="arctic"] .btn-login { background: linear-gradient(135deg, #0088cc, #00d4ff); color: #000; }
[data-theme="arctic"] .landing-signin-btn:hover,
[data-theme="arctic"] .hero-cta-primary:hover { background: linear-gradient(135deg, #00aaee, #44e4ff); }
[data-theme="arctic"] .stat-card.highlight { background: rgba(0,212,255,0.04) !important; }
[data-theme="arctic"] .nav-item:hover { background: rgba(0,212,255,0.08); color: #00d4ff; }
[data-theme="arctic"] .btn-launch { border-color: rgba(0,212,255,0.2); background: rgba(0,212,255,0.05); }
[data-theme="arctic"] .btn-launch:hover { background: rgba(0,212,255,0.12); color: #80e8ff; }
[data-theme="arctic"] .topbar { box-shadow: 0 1px 0 rgba(0,212,255,0.06); }
[data-theme="arctic"] .sidebar { box-shadow: 4px 0 24px rgba(0,212,255,0.04); }
[data-theme="arctic"] .stat-value { color: #80e8ff; }
[data-theme="arctic"] .card { backdrop-filter: blur(2px); }

/* ═══════════════════════════════════════════════
   7. GOLD — Luxury Amber
═══════════════════════════════════════════════ */
[data-theme="gold"] {
  --bg: #090600; --bg-card: #130c00; --bg-hover: #1e1200; --bg-input: #0e0800;
  --sidebar-bg: #060400; --border: #3a2600; --border-dim: #251800;
  --text: #fff0b8; --text-dim: #c09020; --text-muted: #685010;
  --accent: #ffb300; --white: #ffd060; --danger: #ff4444;
  color-scheme: dark;

  --glow: rgba(255,179,0,0.14);
  --accent-dim: rgba(255,179,0,0.1);
  --card-glow-border: #3e2a00;
  --card-glow-shadow: 0 0 20px rgba(255,179,0,0.07);
  --highlight-glow: 0 0 30px rgba(255,179,0,0.12);
  --launch-glow: 0 0 40px rgba(255,179,0,0.2);
  --sidebar-accent: #ffb300;
  --scrollbar-thumb: #3a2600;
  --scrollbar-thumb-hover: #504000;
  --pattern-bg:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 24px,
      rgba(255,179,0,0.03) 24px,
      rgba(255,179,0,0.03) 25px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 24px,
      rgba(255,210,0,0.02) 24px,
      rgba(255,210,0,0.02) 25px
    ),
    radial-gradient(ellipse at 50% 50%, rgba(255,179,0,0.03) 0%, transparent 70%);
  --pattern-size: 25px 25px, 25px 25px, 100% 100%;
  --pattern-anim: goldShimmer 8s ease-in-out infinite alternate;
}

[data-theme="gold"] .dot.online { background: #ffb300; box-shadow: 0 0 10px #ffb300; }
[data-theme="gold"] .landing-signin-btn,
[data-theme="gold"] .hero-cta-primary,
[data-theme="gold"] .btn-login { background: linear-gradient(135deg, #cc8800, #ffcc00); color: #000; }
[data-theme="gold"] .landing-signin-btn:hover,
[data-theme="gold"] .hero-cta-primary:hover { background: linear-gradient(135deg, #ddaa00, #ffdd44); }
[data-theme="gold"] .stat-card.highlight { background: rgba(255,179,0,0.04) !important; }
[data-theme="gold"] .nav-item:hover { background: rgba(255,179,0,0.08); color: #ffb300; }
[data-theme="gold"] .btn-launch { border-color: rgba(255,179,0,0.25); background: rgba(255,179,0,0.07); }
[data-theme="gold"] .btn-launch:hover { background: rgba(255,179,0,0.14); color: #ffd060; }
[data-theme="gold"] .topbar { box-shadow: 0 1px 0 rgba(255,179,0,0.08); }
[data-theme="gold"] .sidebar { box-shadow: 4px 0 24px rgba(255,179,0,0.04); }
[data-theme="gold"] .stat-value { color: #ffd060; }
[data-theme="gold"] .plan-badge { background: rgba(255,179,0,0.12); border: 1px solid rgba(255,179,0,0.2); color: #ffb300; }

@keyframes goldShimmer {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   8. BLOOD — Crimson Horror
═══════════════════════════════════════════════ */
[data-theme="blood"] {
  --bg: #0c0000; --bg-card: #180000; --bg-hover: #230000; --bg-input: #140000;
  --sidebar-bg: #080000; --border: #440000; --border-dim: #2c0000;
  --text: #ffc8c8; --text-dim: #c03030; --text-muted: #701010;
  --accent: #cc0022; --white: #ff8080; --danger: #ff0022;
  color-scheme: dark;

  --glow: rgba(204,0,34,0.15);
  --accent-dim: rgba(204,0,34,0.12);
  --card-glow-border: #4a0000;
  --card-glow-shadow: 0 0 20px rgba(204,0,34,0.08);
  --highlight-glow: 0 0 30px rgba(204,0,34,0.14);
  --launch-glow: 0 0 40px rgba(204,0,34,0.22);
  --sidebar-accent: #cc0022;
  --scrollbar-thumb: #440000;
  --scrollbar-thumb-hover: #660000;
  --pattern-bg:
    radial-gradient(ellipse at 50% 0%, rgba(180,0,20,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 20%, rgba(160,0,10,0.06) 0%, transparent 35%),
    radial-gradient(ellipse at 80% 80%, rgba(180,0,20,0.06) 0%, transparent 35%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 6px,
      rgba(180,0,0,0.018) 6px,
      rgba(180,0,0,0.018) 7px
    );
  --pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 7px;
  --pattern-anim: bloodDrip 10s ease-in-out infinite alternate;
}

[data-theme="blood"] .dot.online { background: #cc0022; box-shadow: 0 0 10px #cc0022; }
[data-theme="blood"] .landing-signin-btn,
[data-theme="blood"] .hero-cta-primary,
[data-theme="blood"] .btn-login { background: linear-gradient(180deg, #990011, #cc0022); color: #fff; }
[data-theme="blood"] .landing-signin-btn:hover,
[data-theme="blood"] .hero-cta-primary:hover { background: linear-gradient(180deg, #bb0018, #ff0033); }
[data-theme="blood"] .stat-card.highlight { background: rgba(204,0,34,0.05) !important; }
[data-theme="blood"] .nav-item:hover { background: rgba(204,0,34,0.1); color: #cc0022; }
[data-theme="blood"] .btn-launch { border-color: rgba(204,0,34,0.3); background: rgba(204,0,34,0.08); }
[data-theme="blood"] .btn-launch:hover { background: rgba(204,0,34,0.16); color: #ff8080; }
[data-theme="blood"] .topbar { box-shadow: 0 1px 0 rgba(204,0,34,0.1); }
[data-theme="blood"] .sidebar { box-shadow: 4px 0 24px rgba(204,0,34,0.06); }
[data-theme="blood"] .stat-value { color: #ff8080; }
[data-theme="blood"] .announce-dot { background: #cc0022; }

@keyframes bloodDrip {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 8px, 0 0, 0 0, 0 8px; }
}

/* ═══════════════════════════════════════════════
   9. NEON — Synthwave / Hot Pink
═══════════════════════════════════════════════ */
[data-theme="neon"] {
  --bg: #080008; --bg-card: #100014; --bg-hover: #1c0022; --bg-input: #0e000e;
  --sidebar-bg: #060006; --border: #380046; --border-dim: #24002e;
  --text: #ffc0ff; --text-dim: #d040c0; --text-muted: #801060;
  --accent: #ff00cc; --white: #ff88ee; --danger: #ff2244;
  color-scheme: dark;

  --glow: rgba(255,0,204,0.15);
  --accent-dim: rgba(255,0,204,0.12);
  --card-glow-border: #3c004a;
  --card-glow-shadow: 0 0 22px rgba(255,0,204,0.09);
  --highlight-glow: 0 0 32px rgba(255,0,204,0.16);
  --launch-glow: 0 0 44px rgba(255,0,204,0.24);
  --sidebar-accent: #ff00cc;
  --scrollbar-thumb: #380046;
  --scrollbar-thumb-hover: #540068;
  --pattern-bg:
    linear-gradient(rgba(255,0,204,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,204,0.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%,   rgba(255,0,204,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 0%   100%, rgba(170,0,255,0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 50%,  rgba(255,0,180,0.05) 0%, transparent 40%);
  --pattern-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%, 100% 100%;
  --pattern-anim: neonFlicker 4s steps(1) infinite;
}

[data-theme="neon"] .dot.online { background: #ff00cc; box-shadow: 0 0 12px #ff00cc, 0 0 24px rgba(255,0,204,0.4); }
[data-theme="neon"] .landing-signin-btn,
[data-theme="neon"] .hero-cta-primary,
[data-theme="neon"] .btn-login { background: linear-gradient(135deg, #cc0099, #ff00ee); color: #fff; box-shadow: 0 0 20px rgba(255,0,204,0.4); }
[data-theme="neon"] .landing-signin-btn:hover,
[data-theme="neon"] .hero-cta-primary:hover { background: linear-gradient(135deg, #ff00cc, #ff44ff); }
[data-theme="neon"] .stat-card.highlight { background: rgba(255,0,204,0.04) !important; }
[data-theme="neon"] .nav-item:hover { background: rgba(255,0,204,0.08); color: #ff00cc; }
[data-theme="neon"] .btn-launch { border-color: rgba(255,0,204,0.3); background: rgba(255,0,204,0.07); }
[data-theme="neon"] .btn-launch:hover { background: rgba(255,0,204,0.15); color: #ff88ee; box-shadow: 0 0 30px rgba(255,0,204,0.25); }
[data-theme="neon"] .topbar { box-shadow: 0 1px 0 rgba(255,0,204,0.1); }
[data-theme="neon"] .sidebar { box-shadow: 4px 0 28px rgba(255,0,204,0.07); }
[data-theme="neon"] .stat-value { color: #ff88ee; }
[data-theme="neon"] .page-title { text-shadow: 0 0 20px rgba(255,0,204,0.4); }
[data-theme="neon"] .agent-badge { border-color: rgba(255,0,204,0.2); }

@keyframes neonFlicker {
  0%, 95%, 100% { opacity: 1; }
  96%            { opacity: 0.92; }
  97%            { opacity: 1; }
  98%            { opacity: 0.94; }
}

/* ═══════════════════════════════════════════════
   10. OCEAN — Deep Teal Abyss
═══════════════════════════════════════════════ */
[data-theme="ocean"] {
  --bg: #000c0e; --bg-card: #011418; --bg-hover: #022028; --bg-input: #010e10;
  --sidebar-bg: #000a0c; --border: #083a46; --border-dim: #05262e;
  --text: #b8f0f0; --text-dim: #2898a8; --text-muted: #104850;
  --accent: #00b8d4; --white: #66ddee; --danger: #ff4455;
  color-scheme: dark;

  --glow: rgba(0,184,212,0.14);
  --accent-dim: rgba(0,184,212,0.1);
  --card-glow-border: #083a46;
  --card-glow-shadow: 0 0 20px rgba(0,184,212,0.07);
  --highlight-glow: 0 0 30px rgba(0,184,212,0.12);
  --launch-glow: 0 0 40px rgba(0,184,212,0.2);
  --sidebar-accent: #00b8d4;
  --scrollbar-thumb: #083a46;
  --scrollbar-thumb-hover: #104e5e;
  --pattern-bg:
    radial-gradient(ellipse at 50% 100%, rgba(0,184,212,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 0%   60%,  rgba(0,140,180,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 40%,  rgba(0,200,200,0.04) 0%, transparent 40%),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 40px,
      rgba(0,184,212,0.015) 40px,
      rgba(0,184,212,0.015) 41px
    );
  --pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 41px;
  --pattern-anim: oceanWave 14s ease-in-out infinite alternate;
}

[data-theme="ocean"] .dot.online { background: #00b8d4; box-shadow: 0 0 10px #00b8d4; }
[data-theme="ocean"] .landing-signin-btn,
[data-theme="ocean"] .hero-cta-primary,
[data-theme="ocean"] .btn-login { background: linear-gradient(135deg, #006e80, #00b8d4); color: #000; }
[data-theme="ocean"] .landing-signin-btn:hover,
[data-theme="ocean"] .hero-cta-primary:hover { background: linear-gradient(135deg, #0090aa, #00ccee); }
[data-theme="ocean"] .stat-card.highlight { background: rgba(0,184,212,0.04) !important; }
[data-theme="ocean"] .nav-item:hover { background: rgba(0,184,212,0.08); color: #00b8d4; }
[data-theme="ocean"] .btn-launch { border-color: rgba(0,184,212,0.2); background: rgba(0,184,212,0.05); }
[data-theme="ocean"] .btn-launch:hover { background: rgba(0,184,212,0.12); color: #66ddee; }
[data-theme="ocean"] .topbar { box-shadow: 0 1px 0 rgba(0,184,212,0.07); }
[data-theme="ocean"] .sidebar { box-shadow: 4px 0 24px rgba(0,184,212,0.04); }
[data-theme="ocean"] .stat-value { color: #66ddee; }

@keyframes oceanWave {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 20px, 0 -20px, 0 41px; }
}