/* ═══════════════════════════════════════════════════════
   neon.css — dark / neon theme for webexperiments.site
   ═══════════════════════════════════════════════════════ */

:root {
  --neon-cyan:   #00f5ff;
  --neon-pink:   #ff2d78;
  --neon-green:  #39ff14;
  --neon-purple: #bf5aff;
  --neon-yellow: #ffe600;
  --neon-orange: #ff6b35;
  --bg-base:     #08080f;
  --bg-surface:  #0c0c1a;
  --bg-card:     #101020;
  --border-dim:  #1c1c38;
  --text-main:   #d8d8f0;
  --text-dim:    #545478;

  /* Bootstrap 5 token overrides */
  --bs-body-bg: #08080f;
  --bs-body-color: #d8d8f0;
  --bs-secondary-color: #545478;
  --bs-border-color: #1c1c38;
  --bs-card-bg: #101020;
  --bs-card-border-color: #1c1c38;
  --bs-link-color: #00f5ff;
  --bs-link-hover-color: #5ff8ff;
  --bs-list-group-bg: #101020;
  --bs-list-group-border-color: #1c1c38;
  --bs-list-group-color: #d8d8f0;
  --bs-list-group-action-hover-bg: #13132a;
  --bs-list-group-action-hover-color: #d8d8f0;
}

/* ── Base ──────────────────────────────────────────────── */
body {
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse at 15% 40%, rgba(0, 245, 255, 0.035) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(191, 90, 255, 0.035) 0%, transparent 55%);
  color: var(--text-main);
  min-height: 100vh;
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar.bg-dark {
  background: #050510 !important;
  border-bottom: 1px solid rgba(0, 245, 255, 0.25);
  box-shadow: 0 2px 30px rgba(0, 245, 255, 0.07);
}

.navbar-brand {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 28px rgba(0, 245, 255, 0.4);
  font-family: monospace;
  letter-spacing: 0.03em;
}
.navbar-brand:hover {
  color: #fff !important;
  text-shadow: 0 0 14px var(--neon-cyan), 0 0 40px rgba(0, 245, 255, 0.6);
}

.nav-link {
  color: var(--text-dim) !important;
  transition: color 0.2s, text-shadow 0.2s;
}
.nav-link:hover {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 8px var(--neon-cyan);
}
.nav-link.active {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 8px var(--neon-cyan);
}

/* ── Typography ────────────────────────────────────────── */
.text-muted { color: var(--text-dim) !important; }
.text-success { color: var(--neon-green) !important; text-shadow: 0 0 6px rgba(57,255,20,0.5); }
.text-primary { color: var(--neon-cyan) !important; }
.text-danger  { color: var(--neon-pink) !important; }
.text-secondary { color: var(--text-dim) !important; }

/* ── List group (index page) ───────────────────────────── */
.list-group-item {
  background: var(--bg-card);
  border-color: var(--border-dim);
  color: var(--text-main);
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.list-group-item-action:hover {
  background: #12122a !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.12), inset 0 0 16px rgba(0, 245, 255, 0.04);
  color: var(--text-main) !important;
}
.list-group-item h5 {
  color: var(--neon-cyan);
  font-family: monospace;
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--bg-card) !important;
  border-color: var(--border-dim) !important;
  color: var(--text-main);
}
.card-body { color: var(--text-main); }

/* ── Buttons ───────────────────────────────────────────── */
.btn-outline-primary {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  transition: all 0.18s;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #000;
  box-shadow: 0 0 18px rgba(0, 245, 255, 0.5);
}

.btn-outline-success {
  color: var(--neon-green);
  border-color: var(--neon-green);
  transition: all 0.18s;
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background: var(--neon-green);
  border-color: var(--neon-green);
  color: #000;
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.5);
}

.btn-outline-danger {
  color: var(--neon-pink);
  border-color: var(--neon-pink);
  transition: all 0.18s;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 45, 120, 0.5);
}

.btn-outline-secondary {
  color: var(--text-dim);
  border-color: var(--border-dim);
  transition: all 0.18s;
}
.btn-outline-secondary:hover {
  background: #1a1a35;
  border-color: var(--neon-purple);
  color: var(--text-main);
}
.btn-outline-secondary.active, .btn-outline-secondary:active,
.btn-check:checked + .btn-outline-secondary {
  background: rgba(191, 90, 255, 0.18);
  border-color: var(--neon-purple);
  color: var(--neon-purple);
  box-shadow: 0 0 14px rgba(191, 90, 255, 0.4);
}

.btn-primary {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #000;
  font-weight: 600;
  transition: all 0.18s;
}
.btn-primary:hover, .btn-primary:focus {
  background: #00d4de;
  border-color: #00d4de;
  color: #000;
  box-shadow: 0 0 18px rgba(0, 245, 255, 0.5);
}

/* ── Form controls ─────────────────────────────────────── */
.form-control {
  background: var(--bg-base);
  border-color: var(--border-dim);
  color: var(--text-main);
}
.form-control:focus {
  background: var(--bg-surface);
  border-color: var(--neon-cyan);
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.12);
}
.form-control::placeholder { color: var(--text-dim); }

/* ── Progress bar ──────────────────────────────────────── */
.progress {
  background: var(--border-dim);
}
.progress-bar.bg-warning {
  background: linear-gradient(90deg, var(--neon-yellow), var(--neon-orange)) !important;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.5);
}

/* ── HR ────────────────────────────────────────────────── */
hr { border-color: var(--border-dim); opacity: 1; }

/* ── Badges ────────────────────────────────────────────── */
.badge.bg-secondary {
  background: var(--border-dim) !important;
  color: var(--text-dim) !important;
}

/* ── code ──────────────────────────────────────────────── */
code {
  color: var(--neon-cyan);
  background: rgba(0, 245, 255, 0.07);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}