/* ============================================================
   CIBERSEGURIDAD 360° — Design System
   Modern CSS with color-scheme, light-dark(), CSS custom props
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Color Scheme & Tokens ─────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Brand Palette */
  --cyber-50: #f0f9ff;
  --cyber-100: #e0f2fe;
  --cyber-200: #bae6fd;
  --cyber-400: #38bdf8;
  --cyber-500: #0ea5e9;
  --cyber-600: #0284c7;
  --cyber-700: #0369a1;
  --cyber-800: #075985;
  --cyber-900: #0c4a6e;
  --cyber-950: #082f49;

  /* Semantic Tokens — Light Mode */
  --bg-base:       #f1f5f9;
  --bg-surface:    #ffffff;
  --bg-surface-2:  #f8fafc;
  --bg-header:     linear-gradient(135deg, #082f49 0%, #0f172a 50%, #0c4a6e 100%);
  --bg-footer:     #0f172a;
  --border-color:  #e2e8f0;
  --border-subtle: rgba(226,232,240,0.8);
  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --text-on-dark:  #f8fafc;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-glow:   0 0 20px rgba(14,165,233,0.15);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-2xl:    24px;

  /* Answer option colors */
  --opt-yes-bg:       #ecfdf5;
  --opt-yes-border:   #a7f3d0;
  --opt-yes-text:     #065f46;
  --opt-yes-active:   #10b981;

  --opt-partial-bg:   #fffbeb;
  --opt-partial-border:#fde68a;
  --opt-partial-text: #78350f;
  --opt-partial-active:#f59e0b;

  --opt-no-bg:        #fff1f2;
  --opt-no-border:    #fecdd3;
  --opt-no-text:      #881337;
  --opt-no-active:    #f43f5e;

  --opt-na-bg:        #f8fafc;
  --opt-na-border:    #e2e8f0;
  --opt-na-text:      #64748b;
  --opt-na-active:    #64748b;

  /* Gap / Risk colors */
  --gap-high-bg:      rgba(254,241,242,0.6);
  --gap-high-border:  #fecdd3;
  --gap-med-bg:       rgba(255,251,235,0.6);
  --gap-med-border:   #fde68a;

  /* Transitions */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode Overrides ──────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:       #070d19;
  --bg-surface:    #0d1829;
  --bg-surface-2:  #111e30;
  --bg-header:     linear-gradient(135deg, #030a14 0%, #040c1a 50%, #020b19 100%);
  --bg-footer:     #030810;
  --border-color:  rgba(56,189,248,0.12);
  --border-subtle: rgba(56,189,248,0.07);
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #475569;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-glow:   0 0 30px rgba(14,165,233,0.25);

  --opt-yes-bg:       rgba(6,78,59,0.25);
  --opt-yes-border:   rgba(16,185,129,0.3);
  --opt-yes-text:     #34d399;

  --opt-partial-bg:   rgba(120,53,15,0.25);
  --opt-partial-border:rgba(245,158,11,0.3);
  --opt-partial-text: #fbbf24;

  --opt-no-bg:        rgba(136,19,55,0.25);
  --opt-no-border:    rgba(244,63,94,0.3);
  --opt-no-text:      #fb7185;

  --opt-na-bg:        rgba(30,41,59,0.5);
  --opt-na-border:    rgba(100,116,139,0.2);
  --opt-na-text:      #64748b;

  --gap-high-bg:      rgba(136,19,55,0.15);
  --gap-high-border:  rgba(244,63,94,0.25);
  --gap-med-bg:       rgba(120,53,15,0.15);
  --gap-med-border:   rgba(245,158,11,0.25);
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-slow), color var(--transition-slow);
  -webkit-font-smoothing: antialiased;
}

/* ── Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-surface-2);
}
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-500);
}

/* ── Glassmorphism Utility ─────────────────────────────────── */
.glass {
  background: color-mix(in oklab, var(--bg-surface) 80%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .glass {
  background: color-mix(in oklab, #0d1829 60%, transparent);
  border-color: rgba(56,189,248,0.12);
}

/* ── Animated Gradient Text ─────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg in oklch, var(--cyber-400) 0%, #818cf8 50%, var(--cyber-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Neon Glow Effects (dark only) ────────────────────────── */
[data-theme="dark"] .glow-cyan {
  box-shadow: 0 0 20px rgba(6,182,212,0.3), 0 0 60px rgba(6,182,212,0.1);
}
[data-theme="dark"] .glow-emerald {
  box-shadow: 0 0 20px rgba(16,185,129,0.3), 0 0 60px rgba(16,185,129,0.1);
}

/* ── Surfaces ─────────────────────────────────────────────── */
.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-slow), border-color var(--transition-slow);
}
.surface:hover {
  box-shadow: var(--shadow-md);
}

/* ── Answer Option Cards ─────────────────────────────────── */
.opt-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 2px solid;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  user-select: none;
  text-align: center;
}
.opt-btn:hover { transform: translateY(-2px); }
.opt-btn:active { transform: translateY(0) scale(0.97); }

.opt-btn.yes {
  background: var(--opt-yes-bg);
  border-color: var(--opt-yes-border);
  color: var(--opt-yes-text);
}
.opt-btn.yes.selected,
.opt-btn.yes:hover {
  background: var(--opt-yes-active);
  border-color: var(--opt-yes-active);
  color: white;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}

.opt-btn.partial {
  background: var(--opt-partial-bg);
  border-color: var(--opt-partial-border);
  color: var(--opt-partial-text);
}
.opt-btn.partial.selected,
.opt-btn.partial:hover {
  background: var(--opt-partial-active);
  border-color: var(--opt-partial-active);
  color: white;
  box-shadow: 0 4px 14px rgba(245,158,11,0.4);
}

.opt-btn.no {
  background: var(--opt-no-bg);
  border-color: var(--opt-no-border);
  color: var(--opt-no-text);
}
.opt-btn.no.selected,
.opt-btn.no:hover {
  background: var(--opt-no-active);
  border-color: var(--opt-no-active);
  color: white;
  box-shadow: 0 4px 14px rgba(244,63,94,0.4);
}

.opt-btn.na {
  background: var(--opt-na-bg);
  border-color: var(--opt-na-border);
  color: var(--opt-na-text);
}
.opt-btn.na.selected,
.opt-btn.na:hover {
  background: var(--opt-na-active);
  border-color: var(--opt-na-active);
  color: white;
  box-shadow: 0 4px 14px rgba(100,116,139,0.4);
}

/* ── Question Card ─────────────────────────────────────────── */
.question-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-slow);
}
.question-card:has(.opt-btn.yes.selected) {
  border-color: rgba(16,185,129,0.4);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.1);
}
.question-card:has(.opt-btn.partial.selected) {
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.1);
}
.question-card:has(.opt-btn.no.selected) {
  border-color: rgba(244,63,94,0.4);
  box-shadow: 0 0 0 1px rgba(244,63,94,0.1);
}
.question-card:has(.opt-btn.na.selected) {
  border-color: rgba(100,116,139,0.3);
}

/* ── Sidebar Nav Item ─────────────────────────────────────── */
.sidebar-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
}
.sidebar-item:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.sidebar-item.active {
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.35);
  color: var(--cyber-600);
  font-weight: 600;
}
[data-theme="dark"] .sidebar-item.active {
  background: rgba(14,165,233,0.12);
  border-color: rgba(14,165,233,0.3);
  color: var(--cyber-400);
}
.sidebar-item.done {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.2);
  color: #059669;
}
[data-theme="dark"] .sidebar-item.done {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.2);
  color: #34d399;
}

/* ── Sidebar mini progress ring ─────────────────────────── */
.progress-ring {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.progress-ring circle {
  transition: stroke-dashoffset 0.5s ease;
}

/* ── Maturity Timeline ───────────────────────────────────── */
.maturity-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 1rem 0 0;
  gap: 0;
}
.maturity-timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 32px;
  right: 32px;
  height: 3px;
  background: var(--border-color);
  border-radius: 99px;
}
.maturity-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  cursor: default;
}
.maturity-stage-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  background: var(--bg-surface);
  transition: all var(--transition-base);
  z-index: 1;
}
.maturity-stage.reached .maturity-stage-dot {
  border-color: var(--cyber-500);
  background: var(--cyber-500);
  box-shadow: 0 0 12px rgba(14,165,233,0.5);
}
.maturity-stage.current .maturity-stage-dot {
  border-color: var(--cyber-400);
  background: var(--cyber-400);
  box-shadow: 0 0 20px rgba(14,165,233,0.7), 0 0 6px rgba(14,165,233,1);
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(14,165,233,0.6), 0 0 4px rgba(14,165,233,1); }
  50%       { box-shadow: 0 0 24px rgba(14,165,233,0.9), 0 0 8px rgba(14,165,233,1); }
}
.maturity-stage-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  max-width: 60px;
  line-height: 1.2;
}
.maturity-stage.current .maturity-stage-label,
.maturity-stage.reached .maturity-stage-label {
  color: var(--cyber-600);
}
[data-theme="dark"] .maturity-stage.current .maturity-stage-label,
[data-theme="dark"] .maturity-stage.reached .maturity-stage-label {
  color: var(--cyber-400);
}

/* ── Chart Toggle Button ─────────────────────────────────── */
.chart-toggle-btn {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}
.chart-toggle-btn.active {
  background: var(--cyber-600);
  border-color: var(--cyber-600);
  color: white;
}
[data-theme="dark"] .chart-toggle-btn.active {
  background: var(--cyber-500);
  border-color: var(--cyber-500);
}

/* ── Gap Item Status Badge ────────────────────────────────── */
.gap-status-select {
  appearance: none;
  padding: 3px 22px 3px 8px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath d='M2 4 L5 7 L8 4' stroke='%2394a3b8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;
  transition: all var(--transition-base);
  color: var(--text-secondary);
}
.gap-status-select:focus { outline: none; }
.gap-status-select[data-status="Pendiente"] { border-color: #fca5a5; color: #b91c1c; background-color: #fff1f2; }
.gap-status-select[data-status="Mitigando"] { border-color: #fde68a; color: #92400e; background-color: #fffbeb; }
.gap-status-select[data-status="Resuelto"]  { border-color: #a7f3d0; color: #065f46; background-color: #ecfdf5; }
[data-theme="dark"] .gap-status-select[data-status="Pendiente"] { background-color: rgba(185,28,28,0.15); border-color: rgba(248,113,113,0.3); color: #f87171; }
[data-theme="dark"] .gap-status-select[data-status="Mitigando"] { background-color: rgba(146,64,14,0.15); border-color: rgba(252,211,77,0.3); color: #fbbf24; }
[data-theme="dark"] .gap-status-select[data-status="Resuelto"]  { background-color: rgba(6,78,59,0.15);  border-color: rgba(52,211,153,0.3); color: #34d399; }

/* ── Mesh / Grid Background Overlay (onboarding) ──────────── */
.mesh-bg {
  position: relative;
  overflow: hidden;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(14,165,233,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(99,102,241,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Dot Grid Background (onboarding card) ─────────────────── */
.dot-grid-bg {
  background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ── Framework Badges ──────────────────────────────────────── */
.framework-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  transition: all var(--transition-base);
  cursor: default;
}
.framework-badge:hover {
  border-color: var(--cyber-400);
  color: var(--cyber-600);
  background: rgba(14,165,233,0.06);
}

/* ── Industry Card Selector ─────────────────────────────── */
.industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  user-select: none;
}
.industry-card:hover {
  border-color: var(--cyber-400);
  color: var(--cyber-600);
  transform: translateY(-2px);
}
.industry-card.selected {
  border-color: var(--cyber-500);
  background: rgba(14,165,233,0.08);
  color: var(--cyber-700);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
[data-theme="dark"] .industry-card.selected {
  color: var(--cyber-400);
  background: rgba(14,165,233,0.12);
}
.industry-card i {
  font-size: 1.4rem;
  color: var(--cyber-500);
}

/* ── Theme Toggle ───────────────────────────────────────── */
#theme-toggle {
  width: 40px;
  height: 22px;
  border-radius: 99px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  padding: 2px;
}
#theme-toggle::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform var(--transition-base);
  transform: translateX(0);
}
[data-theme="dark"] #theme-toggle::after {
  transform: translateX(18px);
  background: var(--cyber-400);
}
[data-theme="dark"] #theme-toggle {
  background: rgba(14,165,233,0.2);
  border-color: rgba(14,165,233,0.4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg in oklch, var(--cyber-600), var(--cyber-700));
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(2,132,199,0.35);
  transition: all var(--transition-base);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,132,199,0.45);
}
.btn-primary:active {
  transform: scale(0.98) translateY(0);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-base);
}
.btn-secondary:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* ── Animate On Enter (fade-slide-up) ────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-enter {
  animation: fadeSlideUp 0.35s ease both;
}
.anim-enter-delay-1 { animation-delay: 0.05s; }
.anim-enter-delay-2 { animation-delay: 0.10s; }
.anim-enter-delay-3 { animation-delay: 0.15s; }

/* ── Keyboard Shortcut Hint Badge ─────────────────────────── */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Reduced Motion ────────────────────────────────────── */
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Main Nav Header only (NOT inner article headers) ─── */
body > header {
  background: var(--bg-header) !important;
  transition: background var(--transition-slow);
}

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--bg-footer) !important;
  transition: background var(--transition-slow);
}

/* ── Tailwind class overrides for dark mode ──────────────── */
[data-theme="dark"] .bg-white {
  background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-50\/60 {
  background-color: var(--bg-surface-2) !important;
}
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600 {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-slate-400 {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200\/80 {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .bg-slate-100 {
  background-color: rgba(30,41,59,0.6) !important;
}
[data-theme="dark"] .divide-slate-50 > * + * {
  border-color: var(--border-subtle) !important;
}

/* ── Statistic Counter Cards ─────────────────────────────── */
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(6,78,59,0.2) !important; }
[data-theme="dark"] .bg-amber-50   { background-color: rgba(120,53,15,0.2) !important; }
[data-theme="dark"] .bg-rose-50    { background-color: rgba(136,19,55,0.2) !important; }
[data-theme="dark"] .bg-sky-50     { background-color: rgba(3,105,161,0.15) !important; }
[data-theme="dark"] .border-emerald-100 { border-color: rgba(16,185,129,0.2) !important; }
[data-theme="dark"] .border-amber-100   { border-color: rgba(245,158,11,0.2) !important; }
[data-theme="dark"] .border-rose-100    { border-color: rgba(244,63,94,0.2) !important; }
[data-theme="dark"] .border-sky-100     { border-color: rgba(14,165,233,0.2) !important; }
[data-theme="dark"] .text-emerald-600   { color: #34d399 !important; }
[data-theme="dark"] .text-amber-600     { color: #fbbf24 !important; }
[data-theme="dark"] .text-rose-600      { color: #fb7185 !important; }
[data-theme="dark"] .text-sky-600,
[data-theme="dark"] .text-sky-700       { color: var(--cyber-400) !important; }

/* ── Domain Banner (dark bg decorative number) ──────────── */
[data-theme="dark"] #domain-bg-num {
  color: rgba(56,189,248,0.05) !important;
}

/* ── Gap Item Dark ────────────────────────────────────────── */
[data-theme="dark"] .gap-item-no {
  background-color: var(--gap-high-bg);
  border-color: var(--gap-high-border);
}
[data-theme="dark"] .gap-item-partial {
  background-color: var(--gap-med-bg);
  border-color: var(--gap-med-border);
}

/* ── Export / Import Buttons ──────────────────────────────── */
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}
.btn-export:hover {
  border-color: var(--cyber-500);
  color: var(--cyber-600);
  background: rgba(14,165,233,0.05);
}

/* ── Results header banner dark mode ─────────────────────── */
[data-theme="dark"] #results-dashboard .bg-gradient-to-br {
  background: linear-gradient(135deg, #030a14, #040d1c, #020b1a) !important;
  border-color: rgba(56,189,248,0.1) !important;
}

/* ── Keyboard shortcut hint section ──────────────────────── */
.kbd-help-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

/* ── Domain header: ID-based overrides (beat Tailwind CDN) ── */
/* Specificity of #id (1,0,0) always beats .class (0,1,0)    */
#active-domain-title {
  color: #0f172a; /* slate-950 — near black, AAA contrast on white */
}
#active-domain-desc,
#active-domain-counter {
  color: #475569; /* slate-600 — readable secondary text */
}

[data-theme="dark"] #active-domain-title {
  color: #e2e8f0 !important; /* slate-200 — light on dark bg */
}
[data-theme="dark"] #active-domain-desc {
  color: #94a3b8 !important; /* slate-400 */
}
[data-theme="dark"] #active-domain-counter {
  color: var(--cyber-400) !important;
  background-color: rgba(14,165,233,0.1) !important;
  border-color: rgba(14,165,233,0.2) !important;
}

/* ── Question card text: explicit fallback ────────────────── */
/* Ensures JS-injected question text is readable in both modes */
.question-card p {
  color: #0f172a;
}
[data-theme="dark"] .question-card p {
  color: #e2e8f0;
}
.question-card .text-xs {
  color: #475569;
}
[data-theme="dark"] .question-card .text-xs {
  color: #94a3b8;
}

/* ── Sidebar domain names ────────────────────────────────── */
[data-theme="dark"] .sidebar-item span {
  color: inherit;
}