/* Dark & Creepy Theme */
:root {
  --bg-0: #0a0b0f;
  --bg-1: #0e0f14;
  --fg-0: #e6e6e6;
  --fg-dim: #b9bcc6;
  --accent: #8a2be2; /* eldritch purple */
  --accent-2: #19e3a8; /* eerie green */
  --danger: #ff3b3b;
  --glow: 0 0 18px rgba(138, 43, 226, 0.35), 0 0 40px rgba(25, 227, 168, 0.15);
}

html, body {
  background: radial-gradient(1200px 800px at 10% 0%, #0d0f15 0%, var(--bg-0) 35%, var(--bg-1) 100%);
  color: var(--fg-0);
}

/* Subtle noise overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: overlay;
}

/* Typography */
.spooky-title {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #000, 0 0 20px rgba(138,43,226,0.35);
}

.muted {
  color: var(--fg-dim) !important;
}

/* Navbar */
.navbar-dark {
  background: linear-gradient(180deg, rgba(10,11,15,0.9) 0%, rgba(10,11,15,0.6) 100%);
  border-bottom: 1px solid rgba(138, 43, 226, 0.25);
  box-shadow: var(--glow);
}

/* Buttons */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.btn-primary:hover { filter: brightness(1.05) saturate(1.05); }

.btn-outline-secondary {
  color: var(--fg-0);
  border-color: rgba(255,255,255,0.25);
}
.btn-outline-secondary:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.btn-success {
  background-color: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 0 18px rgba(25, 227, 168, 0.25);
}

/* Cards/forms */
.card-dark, .form-dark {
  background: rgba(12, 13, 18, 0.8);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 14px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.55), var(--glow);
  backdrop-filter: blur(3px);
}

.form-dark input, .form-dark select, .form-dark textarea {
  background: #0f1218;
  color: var(--fg-0);
  border: 1px solid rgba(255,255,255,0.12);
}
.form-dark input:focus, .form-dark select:focus, .form-dark textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 0.2rem rgba(25,227,168,0.15);
}

/* Hero */
.hero {
  padding: 6rem 0 4rem;
}
.hero .display-5 {
  color: #fafafa;
  text-shadow: 0 0 35px rgba(138,43,226,0.35), 0 0 8px rgba(25,227,168,0.2);
}

.flicker {
  animation: flicker 3.8s infinite both;
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% { opacity: 0.6; }
  28% { opacity: 0.85; }
  60% { opacity: 0.75; }
}

/* Links */
a { color: var(--accent-2); }
a:hover { color: #33f1be; }

/* Utilities */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138,43,226,0.4), transparent);
}

.text-purple {
  color: var(--accent) !important;
}

.display-6.text-purple {
  text-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}

/* Dropdown Menu Styling */
.dropdown-menu {
  background: rgba(12, 13, 18, 0.95);
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(138, 43, 226, 0.2);
  backdrop-filter: blur(10px);
}

.dropdown-item {
  color: var(--fg-0);
  transition: all 0.2s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(138, 43, 226, 0.15);
  color: var(--accent-2);
}

.dropdown-item i {
  opacity: 0.7;
}

.dropdown-divider {
  border-color: rgba(138, 43, 226, 0.2);
}

.dropdown-toggle::after {
  border-top-color: var(--fg-dim);
}