:root {
  --text-main: #f8fafc;
  --accent: #a78bfa;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --cursor-glow: rgba(255,255,255,0.12);
  --clock-glow: rgba(167,139,250,0.25);
}

/* ---------- PRE-DAWN (04-05) ---------- */
.theme-pre-dawn {
  --text-main: #e2e8f0;
  --accent: #818cf8;
  --glass-bg: rgba(15,23,42,0.35);
  --glass-border: rgba(129,140,248,0.25);
  --glass-shadow: 0 8px 32px rgba(15,23,42,0.4);
  --cursor-glow: rgba(129,140,248,0.18);
  --clock-glow: rgba(129,140,248,0.3);
  background: radial-gradient(ellipse at 50% 120%, #312e81 0%, #1e293b 45%, #0f172a 100%);
  color: var(--text-main);
}
.theme-pre-dawn #bg-orb {
  background: radial-gradient(circle, rgba(129,140,248,0.35) 0%, transparent 65%);
  top: 10%; right: 15%; width: 180px; height: 180px;
  filter: blur(18px);
  animation: orbPulse 5s infinite ease-in-out;
}

/* ---------- SUNRISE (06-09) ---------- */
.theme-sunrise {
  --text-main: #431407;
  --accent: #ea580c;
  --glass-bg: rgba(255,255,255,0.32);
  --glass-border: rgba(255,237,213,0.55);
  --glass-shadow: 0 8px 32px rgba(234,88,12,0.18);
  --cursor-glow: rgba(251,146,60,0.25);
  --clock-glow: rgba(234,88,12,0.25);
  background: linear-gradient(160deg, #fff7ed 0%, #fdba74 35%, #fb7185 75%, #fecaca 100%);
  color: var(--text-main);
}
.theme-sunrise #bg-orb {
  background: radial-gradient(circle, rgba(251,191,36,0.6) 0%, rgba(251,146,60,0.25) 45%, transparent 70%);
  top: 12%; left: 12%; width: 220px; height: 220px;
  filter: blur(10px);
  animation: sunRise 8s infinite ease-in-out alternate;
}

/* ---------- DAY (10-15) ---------- */
.theme-day {
  --text-main: #0c4a6e;
  --accent: #0284c7;
  --glass-bg: rgba(255,255,255,0.42);
  --glass-border: rgba(255,255,255,0.55);
  --glass-shadow: 0 8px 32px rgba(2,132,199,0.15);
  --cursor-glow: rgba(125,211,252,0.3);
  --clock-glow: rgba(2,132,199,0.2);
  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%);
  color: var(--text-main);
}
.theme-day #bg-orb {
  background: radial-gradient(circle, rgba(253,224,71,0.5) 0%, rgba(253,224,71,0.15) 40%, transparent 70%);
  top: 8%; right: 10%; width: 160px; height: 160px;
  filter: blur(8px);
  animation: orbPulse 6s infinite ease-in-out;
}

/* ---------- GOLDEN HOUR (16-17) ---------- */
.theme-golden-hour {
  --text-main: #451a03;
  --accent: #d97706;
  --glass-bg: rgba(255,255,255,0.22);
  --glass-border: rgba(255,243,199,0.45);
  --glass-shadow: 0 8px 32px rgba(217,119,6,0.25);
  --cursor-glow: rgba(251,191,36,0.35);
  --clock-glow: rgba(217,119,6,0.35);
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 30%, #f97316 70%, #fff7ed 100%);
  color: var(--text-main);
}
.theme-golden-hour #bg-orb {
  background: radial-gradient(circle, rgba(251,191,36,0.85) 0%, rgba(249,115,22,0.35) 45%, transparent 70%);
  bottom: 15%; left: 50%; transform: translateX(-50%); width: 280px; height: 280px;
  filter: blur(6px);
  animation: goldenPulse 5s infinite ease-in-out;
}
.theme-golden-hour #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 90%, rgba(251,191,36,0.18), transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* ---------- PURPLE SUNSET (18-20) ---------- */
.theme-purple-sunset {
  --text-main: #faf5ff;
  --accent: #f472b6;
  --glass-bg: rgba(0,0,0,0.28);
  --glass-border: rgba(244,114,182,0.3);
  --glass-shadow: 0 8px 32px rgba(76,29,149,0.35);
  --cursor-glow: rgba(244,114,182,0.25);
  --clock-glow: rgba(244,114,182,0.35);
  background: linear-gradient(150deg, #2e1065 0%, #4c1d95 25%, #7c3aed 55%, #db2777 100%);
  color: var(--text-main);
}
.theme-purple-sunset #bg-orb {
  background: radial-gradient(circle, rgba(251,113,133,0.45) 0%, rgba(124,58,237,0.2) 45%, transparent 70%);
  bottom: 20%; right: 8%; width: 240px; height: 240px;
  filter: blur(14px);
  animation: orbPulse 7s infinite ease-in-out;
}
.theme-purple-sunset #app::before {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0; height: 35vh;
  background: linear-gradient(to top, rgba(15,23,42,0.55), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ---------- NIGHT (21-23) ---------- */
.theme-night {
  --text-main: #e0e7ff;
  --accent: #6366f1;
  --glass-bg: rgba(15,23,42,0.4);
  --glass-border: rgba(99,102,241,0.25);
  --glass-shadow: 0 8px 32px rgba(2,6,23,0.5);
  --cursor-glow: rgba(99,102,241,0.2);
  --clock-glow: rgba(99,102,241,0.35);
  background: radial-gradient(ellipse at 50% 10%, #172554 0%, #020617 60%, #0f172a 100%);
  color: var(--text-main);
}
.theme-night #bg-orb {
  background: radial-gradient(circle, rgba(226,232,240,0.9) 0%, rgba(226,232,240,0.2) 30%, transparent 65%);
  top: 10%; right: 20%; width: 120px; height: 120px;
  filter: blur(2px);
  border-radius: 50%;
  box-shadow: 0 0 60px 20px rgba(226,232,240,0.15);
  animation: moonGlow 6s infinite ease-in-out;
}

/* ---------- MIDNIGHT (00-03) ---------- */
.theme-midnight {
  --text-main: #f8fafc;
  --accent: #a78bfa;
  --glass-bg: rgba(0,0,0,0.45);
  --glass-border: rgba(167,139,250,0.2);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.55);
  --cursor-glow: rgba(167,139,250,0.18);
  --clock-glow: rgba(167,139,250,0.35);
  background: radial-gradient(ellipse at 30% 20%, #312e81 0%, #0f172a 45%, #000000 100%);
  color: var(--text-main);
}
.theme-midnight #bg-orb {
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 60%);
  top: 25%; left: 20%; width: 300px; height: 300px;
  filter: blur(40px);
  animation: auroraShift 10s infinite ease-in-out alternate;
}
.theme-midnight #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(139,92,246,0.12) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,0.1) 0%, transparent 35%);
  pointer-events: none;
  z-index: -1;
  animation: auroraPulse 8s infinite ease-in-out;
}

#bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: all 1.2s ease;
}

#clock {
  text-shadow: 0 0 40px var(--clock-glow), 0 4px 30px rgba(0,0,0,0.2);
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes sunRise {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-12px) scale(1.05); }
}

@keyframes goldenPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

@keyframes moonGlow {
  0%, 100% { box-shadow: 0 0 60px 20px rgba(226,232,240,0.12); }
  50% { box-shadow: 0 0 80px 30px rgba(226,232,240,0.22); }
}

@keyframes auroraShift {
  0% { transform: translate(-30px, -20px); }
  100% { transform: translate(30px, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  #bg-orb, .theme-midnight #app::before, .theme-golden-hour #app::before, .theme-purple-sunset #app::before {
    animation: none !important;
  }
}