:root{
  --bg0:#07060d; --bg1:#0d0b18;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --purple:#5b2cff; --purple2:#9b7bff;
}



*{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

html, body {
  max-width: 100%!important;
  overflow-x: hidden!important;
}



body{
  background: radial-gradient(1100px 700px at 20% 0%, rgba(91,44,255,.35), transparent 60%),
              radial-gradient(1000px 700px at 80% 10%, rgba(155,123,255,.25), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
.bg-orb{ position: fixed; width: 420px; height: 420px; filter: blur(60px); opacity:.35; pointer-events:none; z-index:0; }
.orb-1{ top:-120px; left:-140px; background: var(--purple); }
.orb-2{ top:120px; right:-160px; background: var(--purple2); }
.orb-3{ bottom:-140px; left:30%; background: rgba(43,231,164,.7); opacity:.18; }
main, nav{ position: relative; z-index: 1; }
.glass-nav{ background: rgba(0,0,0,.25); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-dot{ width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--purple2)); box-shadow: 0 0 14px rgba(155,123,255,.6); display:inline-block; }
.badge-soft{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-weight: 500; }
.glass-card{ background: var(--card); border: 1px solid var(--stroke); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.btn-primary{ background: linear-gradient(135deg, var(--purple), var(--purple2)); border: none; box-shadow: 0 10px 28px rgba(91,44,255,.35); }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--text); }
.btn-ghost:hover{ background: rgba(255,255,255,.10); color: var(--text); }
.glass-alert{ background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12) !important; color: var(--text); backdrop-filter: blur(10px); }
.form-control, .form-select{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--text); border-radius: 14px; }
.form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .25rem rgba(91,44,255,.25); border-color: rgba(155,123,255,.55); background: rgba(255,255,255,.08); color: var(--text); }
.text-muted, .form-text{ color: var(--muted) !important; }
.code-pill{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: orangered; border: 1px solid rgba(155,123,255,.35); padding: 4px 8px; border-radius: 999px; color: var(--text); }
.hr-glow{ border:0; height:1px; background: linear-gradient(90deg, transparent, rgba(155,123,255,.55), transparent); margin: 20px 0; }
.kpi{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; }
.kpi .label{ color: var(--muted); font-size: 12px; }
.kpi .value{ font-size: 18px; font-weight: 600; }
.q-card{ border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); padding: 14px; }
.option-row{ display:flex; gap:10px; align-items:center; }
.timer-chip{ display:inline-flex; gap:10px; align-items:center; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); font-weight: 600; }
a{ color: rgba(210,200,255,.92); } a:hover{ color:#fff; }



/* ===== GLOBAL SELECT VISIBILITY FIX ===== */
select.form-select,
.form-select{
  background-color: #ffffff !important;
  color: #0e0c1c !important;
  border: 1px solid rgba(32,24,72,.18) !important;
  border-radius: 12px;
}

/* Dropdown options (critical for Windows + Chrome/Edge) */
select option{
  background-color: #ffffff !important;
  color: #0e0c1c !important;
}

/* Focus state */
select.form-select:focus,
.form-select:focus{
  background-color: #ffffff !important;
  color: #0e0c1c !important;
  border-color: rgba(91,44,255,.35) !important;
  box-shadow: 0 0 0 .25rem rgba(91,44,255,.18) !important;
}

/* Disabled select */
select.form-select:disabled,
.form-select:disabled{
  background-color: #f1f1f6 !important;
  color: rgba(14,12,28,.55) !important;
}




/* ✅ Keep Bootstrap alert colors exactly like default */
.alert{
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}

/* Optional: make sure links inside alerts still look right */
.alert a{
  color: inherit !important;
  font-weight: 800;
  text-decoration: underline;
}