/* =========================
   ТЕМА 1: ГРОЗА (по умолчанию)
   тёмное небо + синяя молния + золотая искра
========================= */

:root,
[data-theme="storm"] {
  --bg-deep: #04060c;
  --bg-page: #060a14;
  --bg-card: #0c1220;
  --bg-card-hover: #101828;
  --text: #f0f4ff;
  --text-muted: #8b9cb8;
  --accent: #38bdf8;
  --accent-bright: #7dd3fc;
  --accent-hot: #fde047;
  --accent-hot-dim: #ca8a04;
  --accent-glow: rgba(56, 189, 248, 0.45);
  --accent-hot-glow: rgba(253, 224, 71, 0.35);
  --border: rgba(56, 189, 248, 0.28);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --title-gradient: linear-gradient(
    165deg,
    #ffffff 0%,
    #fde047 42%,
    #38bdf8 100%
  );
  --title-shadow: 0 0 40px rgba(253, 224, 71, 0.25), 0 0 80px rgba(56, 189, 248, 0.15);
  --connector-gradient: linear-gradient(90deg, var(--accent-hot), var(--accent), transparent);
  --grid-color: rgba(56, 189, 248, 0.06);
  --storm-glow: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(56, 189, 248, 0.18), transparent 55%);
  --stat-value-color: var(--accent-hot);
  --bullet-color: var(--accent-hot);
  --image-glow: drop-shadow(0 0 30px rgba(56, 189, 248, 0.4)) drop-shadow(0 0 60px rgba(253, 224, 71, 0.12));
}

/* =========================
   ТЕМА 2: ЭЛЕКТРО
   чистый чёрный + неоновый циан, высокое напряжение
========================= */

[data-theme="electric"] {
  --bg-deep: #000000;
  --bg-page: #020202;
  --bg-card: #0a0a0a;
  --bg-card-hover: #111111;
  --text: #f5feff;
  --text-muted: #6b8a90;
  --accent: #22d3ee;
  --accent-bright: #67e8f9;
  --accent-hot: #ffffff;
  --accent-hot-dim: #a5f3fc;
  --accent-glow: rgba(34, 211, 238, 0.55);
  --accent-hot-glow: rgba(255, 255, 255, 0.2);
  --border: rgba(34, 211, 238, 0.4);
  --border-subtle: rgba(34, 211, 238, 0.1);
  --title-gradient: linear-gradient(180deg, #ffffff 0%, #22d3ee 100%);
  --title-shadow: 0 0 30px rgba(34, 211, 238, 0.5), 0 0 60px rgba(34, 211, 238, 0.2);
  --connector-gradient: linear-gradient(90deg, #22d3ee, rgba(34, 211, 238, 0.2));
  --grid-color: rgba(34, 211, 238, 0.08);
  --storm-glow: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(34, 211, 238, 0.12), transparent 60%);
  --stat-value-color: #22d3ee;
  --bullet-color: #22d3ee;
  --image-glow: drop-shadow(0 0 40px rgba(34, 211, 238, 0.5));
}

/* =========================
   ТЕМА 3: ПЛАЗМА
   фиолетовая буря + бело-горячее ядро
========================= */

[data-theme="plasma"] {
  --bg-deep: #080512;
  --bg-page: #0c0818;
  --bg-card: #130f22;
  --bg-card-hover: #1a142e;
  --text: #f5f0ff;
  --text-muted: #9d8fc0;
  --accent: #a78bfa;
  --accent-bright: #c4b5fd;
  --accent-hot: #f0abfc;
  --accent-hot-dim: #e879f9;
  --accent-glow: rgba(167, 139, 250, 0.45);
  --accent-hot-glow: rgba(240, 171, 252, 0.35);
  --border: rgba(167, 139, 250, 0.35);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --title-gradient: linear-gradient(
    160deg,
    #ffffff 0%,
    #f0abfc 35%,
    #818cf8 70%,
    #a78bfa 100%
  );
  --title-shadow: 0 0 50px rgba(240, 171, 252, 0.3), 0 0 80px rgba(129, 140, 248, 0.2);
  --connector-gradient: linear-gradient(90deg, #f0abfc, #818cf8, transparent);
  --grid-color: rgba(167, 139, 250, 0.07);
  --storm-glow: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(167, 139, 250, 0.2), transparent 55%);
  --stat-value-color: #f0abfc;
  --bullet-color: #c4b5fd;
  --image-glow: drop-shadow(0 0 35px rgba(167, 139, 250, 0.45));
}

/* =========================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМ (только экран)
========================= */

.theme-picker {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.theme-picker button {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-picker button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.theme-picker button.active {
  color: var(--accent-hot, #fde047);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
}

@media print {
  .theme-picker {
    display: none !important;
  }
}