/* ═══════════════════════════════════════════════════════════════════
   ASCP EXAM PREP — Clinical Lab UI
   White/steel surfaces + plum-violet accent + IBM Plex Sans/Mono
   CSS-only visual pass — no id/class renames
   ═══════════════════════════════════════════════════════════════════ */

/* ─── LOCAL FONTS — Cairo (sans) + JetBrains Mono (mono) ───────────── */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Cairo-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Cairo-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Cairo-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Cairo-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Cairo-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Bold.ttf') format('truetype');
}

/* ─── TOKENS — define once, reference everywhere ───────────────────── */
:root {
  /* Signature accent — pulled from Wright-Giemsa stain violet */
  --color-accent: #5B2A5E;
  --color-accent-dark: #3E1D40;
  --color-accent-pale: #F4E9F2;
  --color-accent-border: #E0C3DA;

  /* Neutral scale — cool clinical steel/glass grays */
  --gray-50:  #F8F9FB;
  --gray-100: #F1F3F6;
  --gray-200: #E4E7EC;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;

  /* Semantic — reserved ONLY for answer feedback + destructive actions */
  --color-success: #12805C;
  --color-success-pale: #E3F5EE;
  --color-error: #C0293D;
  --color-error-pale: #FBE8E9;
  --color-warning: #B5750A;
  --color-warning-pale: #FBF0DC;

  /* Legacy aliases — point old names at new tokens */
  --primary-color: var(--color-accent);
  --primary-light: var(--color-accent-dark);
  --primary-dark: var(--color-accent-dark);
  --secondary-color: var(--color-accent);
  --success-color: var(--color-success);
  --correct-color: var(--color-success);
  --error-color: var(--color-error);
  --incorrect-color: var(--color-error);
  --warning-color: var(--color-warning);
  --medium-gray: var(--gray-300);
  --dark-gray: var(--gray-700);
  --white: #FFFFFF;
  --gray-50-var: var(--gray-50);
  --card-background: #FFFFFF;
  --text-color: var(--gray-800);
  --background-color: var(--gray-50);

  /* Surfaces */
  --bg-app: var(--gray-50);
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;

  /* Type */
  --font-sans: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Scale */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
}

/* ─── BASE / RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg-app) !important;
  color: var(--gray-800) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  line-height: 1.6;
}
::selection { background: var(--color-accent-pale); color: var(--color-accent-dark); }
html { scrollbar-width: thin; scrollbar-color: var(--gray-300) var(--gray-50); }
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: var(--gray-50); }
html::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ─── SIDEBAR ────────────────────────────────────────────────────── */
.sidebar, .sidebar-filters {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
}
.sidebar-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-3) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}
.sidebar-header h3 {
  color: var(--gray-900) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.01em !important;
}
.sidebar-header::before {
  content: '';
  display: inline-block;
  width: 3px; height: 18px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-right: 2px;
}
/* Section labels: CATEGORY, SUBCATEGORY, DIFFICULTY */
.sidebar-filters label,
.sidebar-filters .filter-label,
.sidebar-filters > div > label {
  color: var(--gray-500) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: var(--font-sans) !important;
  margin-bottom: var(--space-2) !important;
  display: block;
}
.sidebar-filters { padding: var(--space-4) !important; }
.sidebar-filters > div,
.sidebar-filters .filter-group { margin-bottom: var(--space-5) !important; }

/* Filter selects — consistent enabled/disabled states */
.filter-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 12px !important;
  margin: 0 0 var(--space-4) 0 !important;
}
@media (min-width: 768px) {
  .filter-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    padding: 16px !important;
  }
}

.filter-select,
#categoryFilter, #subcategoryFilter1, #subcategoryFilter2,
#subcategoryFilter3, #difficultyFilter {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-800) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 10px 36px 10px 12px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
.filter-select:hover,
#categoryFilter:hover, #subcategoryFilter1:hover,
#subcategoryFilter2:hover, #subcategoryFilter3:hover, #difficultyFilter:hover {
  border-color: var(--gray-400) !important;
}
.filter-select:focus,
#categoryFilter:focus, #subcategoryFilter1:focus,
#subcategoryFilter2:focus, #subcategoryFilter3:focus, #difficultyFilter:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-pale) !important;
  outline: none !important;
}
.filter-select:disabled,
#subcategoryFilter2:disabled, #subcategoryFilter3:disabled,
#subcategoryFilter1:disabled {
  background: var(--gray-100) !important;
  color: var(--gray-400) !important;
  border-color: var(--gray-200) !important;
  cursor: not-allowed !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Search input + button — joined control */
.search-container, .sidebar .search-container {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: var(--space-3) !important;
}
.search-input, #searchInput {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-300) !important;
  border-right: none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  color: var(--gray-800) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  height: 44px !important;
  padding: 0 var(--space-3) !important;
  flex: 1 !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.search-input:focus, #searchInput:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-pale) !important;
}
.search-input::placeholder, #searchInput::placeholder { color: var(--gray-400) !important; }
.search-button, #searchButton, .sidebar-search-button {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 var(--space-5) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
.search-button:hover, #searchButton:hover, .sidebar-search-button:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

/* Clear Filters — secondary ghost */
.sidebar-clear-button, #clearFiltersButton {
  background: transparent !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  font-weight: 500 !important;
  width: 100% !important;
  box-shadow: none !important;
}
.sidebar-clear-button:hover, #clearFiltersButton:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-400) !important;
}

/* Collapse / expand — ghost icon buttons */
.sidebar-collapse-btn, .sidebar-expand-btn, #sidebarCollapseBtn, #sidebarExpandBtn {
  background: transparent !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--gray-500) !important;
  width: 32px !important; height: 32px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-collapse-btn:hover, .sidebar-expand-btn:hover,
#sidebarCollapseBtn:hover, #sidebarExpandBtn:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-700) !important;
}
.sidebar-overlay, #sidebarOverlay {
  background: rgba(16,24,40,0.4) !important;
}

/* ─── TOP HEADER BAR ─────────────────────────────────────────────── */
.header, header, .header-content {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
}
header h1, .header h1, .logo h1, .header-title {
  color: var(--gray-900) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.logo-icon { color: var(--color-accent) !important; }
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.logo i {
  font-size: 1.4rem !important;
}
.header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
  gap: 16px !important;
}
.header-actions, #header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  flex-wrap: wrap !important;
}
.menu-icon {
  font-size: 1em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.2em !important;
  flex-shrink: 0 !important;
}
.theme-toggle, #theme-toggle, #themeToggle, #themeToggleBtn, #themeToggleButton, #dropdownThemeToggle {
  background: transparent !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 10px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
  box-shadow: none !important;
}
.theme-toggle:hover, #theme-toggle:hover, #themeToggle:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-400) !important;
  color: var(--gray-900) !important;
}
body.dark-mode .theme-toggle, body.dark-mode #theme-toggle {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #E5E7EB !important;
}
body.dark-mode .theme-toggle:hover, body.dark-mode #theme-toggle:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* Timer — mono data readout in a pill */
#timerDisplay, .timer-display, #timer {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-full) !important;
  padding: 6px 14px !important;
  letter-spacing: 0.02em !important;
}
#timerDisplay.warning, .timer-display.warning, #timer.warning {
  color: var(--color-warning) !important;
  background: var(--color-warning-pale) !important;
  border-color: var(--color-warning) !important;
}
#timerDisplay.critical, .timer-display.critical, #timer.critical {
  color: var(--color-error) !important;
  background: var(--color-error-pale) !important;
  border-color: var(--color-error) !important;
}

/* Header icon buttons — unified 40x40 ghost */
#themeToggleButton, .nav-button,
#headerPrevButton, #headerNextButton,
.header-toggle, #headerToggle {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--gray-600) !important;
  width: 40px !important; height: 40px !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#themeToggleButton:hover,
.nav-button:hover, #headerPrevButton:hover, #headerNextButton:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
}
#themeToggleButton:disabled, #headerPrevButton:disabled,
#headerNextButton:disabled, .nav-button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Menu button — text button with hamburger */
#menuButton, .menu-button {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  min-height: 36px !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
#menuButton:hover, .menu-button:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
  box-shadow: var(--shadow-md) !important;
}
#menuButton:active, .menu-button:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* Dropdown menu */
#dropdownMenu, .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 220px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06) !important;
  padding: 6px !important;
  z-index: 1000 !important;
  display: none !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
}
#dropdownMenu.show-dropdown, .dropdown-menu.show-dropdown {
  display: block !important;
  animation: dropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#dropdownMenu a, #dropdownMenu button,
.dropdown-menu a, .dropdown-menu button,
#dropdownThemeToggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--gray-700) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  box-shadow: none !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  letter-spacing: -0.005em !important;
}
#dropdownMenu a:hover, #dropdownMenu button:hover,
.dropdown-menu a:hover, .dropdown-menu button:hover,
#dropdownThemeToggle:hover {
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
}
.dropdown-menu a:last-child, .dropdown-menu button:last-child,
#dropdownMenu a:last-child, #dropdownMenu button:last-child {
  border-bottom: none !important;
}
#logoutButton, .dropdown-menu .logout, #dropdownMenu a:has(.fa-door) {
  border-top: 1px solid var(--gray-200) !important;
  margin-top: 4px !important;
  padding-top: 9px !important;
}
#logoutButton:hover, .dropdown-menu .logout:hover {
  color: var(--color-error) !important;
  background: var(--color-error-pale) !important;
}
.dropdown-menu .menu-icon {
  font-size: 1em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.2em !important;
  flex-shrink: 0 !important;
}
.dropdown-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: transparent !important;
  z-index: 999 !important;
  display: none !important;
}
.dropdown-overlay.show-overlay,
.dropdown-overlay.show-dropdown { display: block !important; }

/* ─── QUESTION CARD HEADER ───────────────────────────────────────── */
.question-header {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  box-shadow: none !important;
}
.question-header h2, .question-header .question-number,
.question-header .question-title {
  color: var(--gray-900) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
}
/* "Question X of Y" — numerals in mono */
.question-header .question-number,
#currentQuestionNum, #totalQuestions,
.nav-current-total, .nav-current-badge {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}

/* Difficulty meter — 9-segment bar */
.question-difficulty, .difficulty-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: transparent !important;
  border: none !important;
  color: var(--gray-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}
.question-difficulty .difficulty-meter,
.question-difficulty .difficulty-bar {
  display: inline-flex !important;
  gap: 3px !important;
}
.question-difficulty .difficulty-meter span,
.question-difficulty .difficulty-bar span,
.difficulty-segment {
  display: inline-block !important;
  width: 8px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: var(--gray-200) !important;
}
.question-difficulty .difficulty-meter span.filled,
.question-difficulty .difficulty-bar span.filled,
.difficulty-segment.filled {
  background: var(--color-accent) !important;
}
.question-difficulty .difficulty-value,
.question-difficulty .difficulty-num {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
}

/* ─── CATEGORY / SUBCATEGORY TAGS — breadcrumb ──────────────────── */
.category-tags, .category-path {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: var(--space-3) 0 !important;
}
.category-tag {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  margin: 0 var(--space-1) 0 0 !important;
  text-decoration: none !important;
}
.category-tags .category-tag:not(:last-child)::after,
.category-tags .category-tag + .category-tag::before {
  content: '›';
  color: var(--gray-400) !important;
  margin: 0 var(--space-1) !important;
  font-weight: 400 !important;
}
.subcategory-tag, .category-tag.final, .category-tag:last-child {
  background: var(--color-accent-pale) !important;
  color: var(--color-accent-dark) !important;
  border: 1px solid var(--color-accent-border) !important;
}
.subcategory-tag::before, .category-tag:last-child::before { display: none !important; }

/* ─── ANSWER OPTIONS ─────────────────────────────────────────────── */
.options-container { display: flex !important; flex-direction: column !important; gap: var(--space-3) !important; margin-top: var(--space-4) !important; }
.option {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-800) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  padding: var(--space-3) var(--space-4) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  box-shadow: none !important;
}
.option:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-pale) !important;
}
.option.selected, .option:has(input:checked) {
  border: 2px solid var(--color-accent) !important;
  background: var(--color-accent-pale) !important;
  font-weight: 500 !important;
}
.option.correct, .option.show-correct {
  border-color: var(--color-success) !important;
  background: var(--color-success-pale) !important;
  color: var(--color-success) !important;
}
.option.incorrect, .option.show-incorrect {
  border-color: var(--color-error) !important;
  background: var(--color-error-pale) !important;
  color: var(--color-error) !important;
}
.option:disabled, .option.disabled, .option.locked { cursor: default !important; }

/* Custom radio circle */
.option input[type="radio"], .option .radio {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  border: 2px solid var(--gray-300) !important;
  border-radius: 50% !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.option input[type="radio"]:checked, .option .radio:checked {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
}
.option input[type="radio"]:checked::after, .option .radio:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
.option.correct input[type="radio"], .option.incorrect input[type="radio"] { border-color: currentColor !important; }

/* ─── BUTTON SYSTEM ──────────────────────────────────────────────── */
.btn, .btn-approve, .btn-warning, .btn-info, .btn-success,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-sm,
.nav-button, .show-answer-btn, .nav-button-enhanced,
.submit-button, .results-button, .filter-btn, .home-button,
.pagination-btn, .view-full-question-btn,
#startRandomSessionButton, #startPracticeMode, #resetScoreButton,
#endSessionButton, #confirmNicknameButton, #cancelNicknameButton,
.score-button, .sidebar-clear-button, #clearFiltersButton {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: 10px var(--space-5) !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  box-shadow: var(--shadow-sm) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  min-height: 44px !important;
  min-width: 120px !important;
  box-sizing: border-box !important;
}

/* Primary — filled accent */
.btn-primary, .btn.btn-primary, #startRandomSessionButton,
#confirmNicknameButton, .submit-button, .score-button.primary {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--color-accent) !important;
}
.btn-primary:hover, .btn.btn-primary:hover, #startRandomSessionButton:hover,
#confirmNicknameButton:hover, .submit-button:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
  box-shadow: var(--shadow-md) !important;
}
.btn-primary:active, .btn.btn-primary:active, #startRandomSessionButton:active {
  transform: translateY(1px) !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:disabled, #startRandomSessionButton:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Secondary — outline */
.btn-secondary, .btn.btn-secondary, .nav-button, .show-answer-btn,
#startPracticeMode, #cancelNicknameButton, .filter-btn, .home-button,
.pagination-btn, .view-full-question-btn, .btn {
  background: transparent !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-300) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover, .nav-button:hover,
.show-answer-btn:hover, #startPracticeMode:hover, #cancelNicknameButton:hover,
.filter-btn:hover, .home-button:hover, .pagination-btn:hover,
.view-full-question-btn:hover, .btn:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
  color: var(--gray-900) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Destructive — End Session, Logout, Delete, Reset Score */
#endSessionButton, .btn-danger, .btn.btn-danger, .btn-delete, .delete-btn,
#resetScoreButton, #logoutButton {
  background: transparent !important;
  color: var(--color-error) !important;
  border: 1px solid var(--color-error) !important;
  box-shadow: none !important;
}
#endSessionButton:hover, .btn-danger:hover, .btn-delete:hover,
.delete-btn:hover, #resetScoreButton:hover, #logoutButton:hover {
  background: var(--color-error) !important;
  color: #FFFFFF !important;
  border-color: var(--color-error) !important;
}
.filter-btn.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}

/* Approve — success outline */
.btn-approve {
  background: transparent !important;
  color: var(--color-success) !important;
  border: 1px solid var(--color-success) !important;
  box-shadow: none !important;
}
.btn-approve:hover {
  background: var(--color-success) !important;
  color: #FFFFFF !important;
  border-color: var(--color-success) !important;
}

/* Warning — amber outline */
.btn-warning {
  background: transparent !important;
  color: var(--color-warning) !important;
  border: 1px solid var(--color-warning) !important;
  box-shadow: none !important;
}
.btn-warning:hover {
  background: var(--color-warning) !important;
  color: #FFFFFF !important;
  border-color: var(--color-warning) !important;
}

/* Info — accent outline */
.btn-info, .btn-outline-primary {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: none !important;
}
.btn-info:hover, .btn-outline-primary:hover {
  background: var(--color-accent-pale) !important;
  border-color: var(--color-accent) !important;
}

/* Success — filled green */
.btn-success {
  background: var(--color-success) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--color-success) !important;
}
.btn-success:hover {
  background: #0E6B4D !important;
  border-color: #0E6B4D !important;
  box-shadow: var(--shadow-md) !important;
}

/* Outline variants — secondary/danger ghosts */
.btn-outline-secondary {
  background: transparent !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
}
.btn-outline-secondary:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
}
.btn-outline-danger {
  background: transparent !important;
  color: var(--color-error) !important;
  border: 1px solid var(--color-error) !important;
  box-shadow: none !important;
}
.btn-outline-danger:hover {
  background: var(--color-error) !important;
  color: #FFFFFF !important;
  border-color: var(--color-error) !important;
}

/* ─── SCORE PANEL ────────────────────────────────────────────────── */
.score-panel, #scorePanel {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--space-5) !important;
}
.score-item, .score-stats .score-item {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-1) !important;
}
.score-label, .score-stats .score-label {
  color: var(--gray-500) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.score-value, .score-stats .score-value {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  line-height: 1.1 !important;
}
.score-value.correct, #correctCount { color: var(--color-success) !important; }
.score-value.wrong, #wrongCount { color: var(--color-error) !important; }
#currentScore { color: var(--color-accent) !important; }
.score-actions, .score-button { gap: var(--space-2) !important; }

/* ─── CARDS (generic) ────────────────────────────────────────────── */
.card, .dash-card, .stat-card, .question-card, .session-card,
.profile-overview-card, .account-status-card, .actions-card,
.badges-card, .password-change-card, .profile-edit-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.15s !important;
}
.card:hover, .dash-card:hover, .stat-card:hover, .question-card:hover {
  box-shadow: var(--shadow-md) !important;
}
.card-header {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  color: var(--gray-700) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-body { padding: var(--space-4) !important; }

/* ─── FORMS & INPUTS ─────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], input[type="time"], textarea, select,
.form-control, #sessionNickname {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-800) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus, #sessionNickname:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-pale) !important;
}
input::placeholder, textarea::placeholder { color: var(--gray-400) !important; }
label, .form-label, .form-group label {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-700) !important;
  margin-bottom: var(--space-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.form-group { margin-bottom: var(--space-4) !important; }

/* Nickname modal — kill hardcoded blues */
#sessionNickname, .nickname-input { border-color: var(--gray-300) !important; }
#sessionNickname:focus { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px var(--color-accent-pale) !important; }

/* ─── TABLES ─────────────────────────────────────────────────────── */
.data-tables-container, .table-wrapper, .table-responsive {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  overflow-x: auto !important;
}
table, .data-table, .leaderboard-table {
  font-family: var(--font-sans) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
th, thead th, .table-header {
  background: var(--gray-50) !important;
  color: var(--gray-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 12px 16px !important;
}
td, tbody td {
  border-bottom: 1px solid var(--gray-200) !important;
  color: var(--gray-800) !important;
  padding: 12px 16px !important;
}
tbody tr:hover { background: var(--gray-50) !important; }
tbody tr:last-child td { border-bottom: none !important; }

/* Rank badges */
.rank-badge, .podium-rank {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  background: var(--color-accent-pale) !important;
  color: var(--color-accent-dark) !important;
  border: 1px solid var(--color-accent-border) !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
}
.rank-badge.rank-1, .podium-rank.first { background: var(--color-accent) !important; color: #FFFFFF !important; border-color: var(--color-accent) !important; }
.podium-name { font-family: var(--font-sans) !important; color: var(--gray-900) !important; font-weight: 600 !important; }
.podium-score, .score-value { font-family: var(--font-mono) !important; color: var(--color-accent) !important; font-weight: 600 !important; }
.podium-avatar, .user-avatar {
  background: var(--color-accent-pale) !important; color: var(--color-accent) !important;
  border: 1px solid var(--color-accent-border) !important; border-radius: 50% !important;
}

/* ─── MODALS ─────────────────────────────────────────────────────── */
.modal, .modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  font-family: var(--font-sans) !important;
  color: var(--gray-900) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: var(--space-4) var(--space-5) !important;
}
.modal-body { color: var(--gray-700) !important; font-family: var(--font-sans) !important; padding: var(--space-5) !important; }
.modal-actions { gap: var(--space-2) !important; padding: 0 var(--space-5) var(--space-4) !important; }
.modal-close { color: var(--gray-400) !important; background: none !important; border: none !important; font-size: 24px !important; cursor: pointer !important; }
.modal-close:hover { color: var(--gray-700) !important; }

/* ─── PAGINATION ─────────────────────────────────────────────────── */
.pagination, .pagination-container { display: flex !important; gap: var(--space-1) !important; align-items: center !important; }
.pagination button, .pagination-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pagination button:hover, .pagination-btn:hover { background: var(--gray-50) !important; border-color: var(--gray-400) !important; }
.pagination button.active, .pagination-btn.active { background: var(--color-accent) !important; color: #FFFFFF !important; border-color: var(--color-accent) !important; }
.pagination button:disabled, .pagination-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.pagination-info { color: var(--gray-500) !important; font-family: var(--font-sans) !important; font-size: 13px !important; }

/* ─── NOTIFICATIONS ──────────────────────────────────────────────── */
.notification, #userNotification {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-700) !important;
  font-family: var(--font-sans) !important;
  padding: var(--space-3) var(--space-4) !important;
  box-shadow: var(--shadow-md) !important;
  position: relative !important;
}
.notification:empty, #userNotification:empty,
.notification:not(.error):not(.success):not(.info):not(.warning) {
  display: none !important;
}
.notification.success { border-left: 3px solid var(--color-success) !important; }
.notification.error { border-left: 3px solid var(--color-error) !important; }
.notification.info, .notification.warning { border-left: 3px solid var(--color-warning) !important; }

/* Floating toast variant (profile.html dynamically appends to body with .show) */
.notification.show {
  position: fixed !important;
  top: var(--space-5, 20px) !important;
  right: var(--space-5, 20px) !important;
  z-index: 9999 !important;
  min-width: 280px !important;
  max-width: 420px !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2, 8px) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: toast-slide-in 0.25s ease-out !important;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notification.show i.fas,
.notification.show i.fa-check-circle,
.notification.show i.fa-exclamation-circle,
.notification.show i.fa-info-circle { flex-shrink: 0; }
.notification.success.show i { color: var(--color-success) !important; }
.notification.error.show   i { color: var(--color-error)   !important; }
.notification.info.show    i,
.notification.warning.show i { color: var(--color-warning) !important; }

/* ─── LOGIN / SIGNUP PAGE ─────────────────────────────────────────── */
.login-container {
  max-width: 460px !important;
  margin: 40px auto !important;
  padding: var(--space-6) var(--space-5) !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
}
.login-header {
  text-align: center !important;
  margin-bottom: var(--space-5) !important;
}
.login-header h1 {
  font-family: var(--font-sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  margin: 0 0 var(--space-2) 0 !important;
}
.login-header .subtitle {
  font-size: 15px !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
}
.nav {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: var(--space-5) !important;
  border-bottom: 2px solid var(--gray-200) !important;
}
.nav button {
  flex: 1 !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin-bottom: -2px !important;
}
.nav button.active {
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent) !important;
}
.nav button:hover {
  color: var(--gray-700) !important;
}
.nav button.active:hover {
  color: var(--color-accent) !important;
}
.form-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: var(--space-4) !important;
  position: relative !important;
}
.form-group > i {
  color: var(--gray-400) !important;
  font-size: 14px !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  flex: 1 !important;
  padding: 10px 12px 10px 36px !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--gray-800) !important;
  background: var(--bg-card) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.form-group input:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(184, 51, 106, 0.1) !important;
}
.form-group textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--gray-800) !important;
  background: var(--bg-card) !important;
  resize: vertical !important;
  min-height: 120px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-pale) !important;
}
.form-group textarea::placeholder {
  color: var(--gray-400) !important;
  font-style: italic !important;
}
.form-group.remember-me {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--gray-600) !important;
}
.form-group.remember-me input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--color-accent) !important;
  cursor: pointer !important;
}
.form-group.remember-me label {
  cursor: pointer !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.extra-links {
  text-align: center !important;
  margin-top: var(--space-5) !important;
  font-size: 13px !important;
  color: var(--gray-500) !important;
}
.extra-links p {
  margin: var(--space-2) 0 !important;
}
.extra-links a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.extra-links a:hover {
  text-decoration: underline !important;
}
.whatsapp-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: var(--space-4) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #25D366 !important;
  text-decoration: none !important;
  border: 1px solid #25D366 !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s !important;
}
.whatsapp-link:hover {
  background: #25D366 !important;
  color: white !important;
}
.whatsapp-icon {
  font-size: 18px !important;
}

/* ─── LOGIN PAGE EXTRAS ─────────────────────────────────────────── */
.toggle-password {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: var(--gray-400) !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
  z-index: 2 !important;
}
.toggle-password:hover { color: var(--color-accent) !important; }

#submit-btn {
  width: 100% !important;
  padding: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-accent) !important;
  color: white !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
  margin-top: var(--space-2) !important;
}
#submit-btn:hover { background: var(--color-accent-dark) !important; }
#submit-btn:active { transform: translateY(1px) !important; }
#submit-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }

#forgotPasswordLink {
  font-size: 13px !important;
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
#forgotPasswordLink:hover { text-decoration: underline !important; }

/* ─── LOGIN PAGE DARK MODE ───────────────────────────────────────── */
body.dark-mode .login-container {
  background: var(--bg-card-dark) !important;
  border-color: var(--gray-700) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .login-header h1 { color: var(--gray-100) !important; }
body.dark-mode .login-header .subtitle { color: var(--gray-400) !important; }
body.dark-mode .nav { border-bottom-color: var(--gray-700) !important; }
body.dark-mode .nav button { color: var(--gray-400) !important; }
body.dark-mode .nav button:hover { color: var(--gray-200) !important; }
body.dark-mode .nav button.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; }
body.dark-mode .form-group > i { color: var(--gray-500) !important; }
body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="email"],
body.dark-mode .form-group input[type="password"] {
  background: var(--gray-800) !important;
  border-color: var(--gray-700) !important;
  color: var(--gray-100) !important;
}
body.dark-mode .form-group input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(184, 51, 106, 0.2) !important;
}
body.dark-mode .form-group.remember-me { color: var(--gray-300) !important; }
body.dark-mode .extra-links { color: var(--gray-400) !important; }
body.dark-mode .extra-links a { color: var(--color-accent) !important; }
body.dark-mode .whatsapp-link { border-color: #25D366 !important; }

/* ─── AUTH PAGE (reset-password, signup) ────────────────────────── */
.auth-page {
  min-height: 100vh !important;
  background: var(--gray-50) !important;
}
body.dark-mode .auth-page { background: var(--bg-card-dark) !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.message-close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  color: var(--gray-500) !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.message-close:hover {
  color: var(--gray-800) !important;
}

/* ─── ADMIN / TABS ───────────────────────────────────────────────── */
.admin-page, .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
}
.admin-tabs, .tab-navigation {
  border-bottom: 1px solid var(--gray-200) !important;
  background: var(--bg-card) !important;
  gap: 0 !important;
  display: flex !important;
}
.tab-button {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--gray-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 10px var(--space-4) !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.tab-button:hover { color: var(--gray-900) !important; background: var(--gray-50) !important; }
.tab-button.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; font-weight: 700 !important; }
.tab-content { padding: 12px 0 0 0 !important; }
.tab-pane { padding: 0 !important; }
.status-badge {
  font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 600 !important;
  padding: 2px 8px !important; border-radius: var(--radius-full) !important; letter-spacing: 0.02em !important;
}
.status-badge.active, .status-badge.approved { background: var(--color-success-pale) !important; color: var(--color-success) !important; border: 1px solid var(--color-success) !important; }
.status-badge.pending { background: var(--color-warning-pale) !important; color: var(--color-warning) !important; border: 1px solid var(--color-warning) !important; }
.status-badge.rejected, .status-badge.expired { background: var(--color-error-pale) !important; color: var(--color-error) !important; border: 1px solid var(--color-error) !important; }

/* ─── BADGES / GAMIFICATION ──────────────────────────────────────── */
.badges-grid, .achievements-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: var(--space-4) !important; }
.badge-item, .achievement-badge {
  background: var(--bg-card) !important; border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important; padding: var(--space-4) !important; text-align: center !important;
  transition: box-shadow 0.15s !important;
}
.badge-item:hover, .achievement-badge:hover { box-shadow: var(--shadow-md) !important; }
.badge-icon, .badge-icon .fas { color: var(--color-accent) !important; font-size: 24px !important; }
.badge-name, .badge-info { font-family: var(--font-sans) !important; font-weight: 600 !important; color: var(--gray-800) !important; font-size: 13px !important; }
.badge-description { color: var(--gray-500) !important; font-size: 12px !important; }
.empty-badges { color: var(--gray-400) !important; font-style: italic !important; }
.stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: var(--space-4) !important; }
.stat-icon, .stat-icon .fas { color: var(--color-accent) !important; }
.account-status-card { border-left: 3px solid var(--color-accent) !important; }
.account-type-badge { font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 600 !important; }

/* ─── PROFILE PAGE ──────────────────────────────────────────────── */
.profile-container { max-width: 1000px !important; padding: var(--space-6) var(--space-4) !important; }
.profile-header {
  text-align: center !important;
  margin-bottom: var(--space-6) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}
.profile-header h1 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: var(--gray-900) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: var(--space-2) !important;
}
.profile-header p {
  color: var(--gray-500) !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
}

/* Profile overview card (avatar + basic info) */
.profile-overview-card {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-5) !important;
  padding: var(--space-6) !important;
  margin-bottom: var(--space-5) !important;
  flex-wrap: wrap !important;
}
.profile-basic-info { flex: 1 !important; min-width: 200px !important; }
.profile-username {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--gray-900) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.01em !important;
}
.profile-email {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: var(--gray-600) !important;
  margin: 0 0 6px 0 !important;
}
.profile-join-date, .profile-location, .profile-website {
  font-size: 13px !important;
  color: var(--gray-500) !important;
  margin: 4px 0 !important;
  font-family: var(--font-sans) !important;
}
.profile-join-date i, .profile-location i { color: var(--color-accent) !important; margin-right: 6px !important; }
.profile-website a { color: var(--color-accent) !important; text-decoration: none !important; }
.profile-website a:hover { text-decoration: underline !important; }
.profile-bio {
  color: var(--gray-700) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: var(--space-2) 0 0 0 !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--gray-200) !important;
  font-family: var(--font-sans) !important;
}
.profile-bio i { color: var(--color-accent) !important; margin-right: 6px !important; }
.profile-expiry-date {
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
  color: var(--color-warning) !important;
  margin: 4px 0 !important;
}
.profile-expiry-date.expired { color: var(--color-error) !important; }
.profile-expiry-date i { margin-right: 6px !important; }

/* Statistics grid (4 cards) */
.profile-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--space-4) !important;
  margin-bottom: var(--space-5) !important;
}
.profile-stats-grid .stat-card {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  padding: var(--space-5) !important;
}
.profile-stats-grid .stat-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-accent-pale) !important;
  border-radius: var(--radius-md) !important;
  font-size: 22px !important;
  color: var(--color-accent) !important;
}
.profile-stats-grid .stat-icon .fas { color: var(--color-accent) !important; font-size: 22px !important; }
.profile-stats-grid .stat-info { flex: 1 !important; min-width: 0 !important; }
.profile-stats-grid .stat-info .stat-value {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.1 !important;
}
.profile-stats-grid .stat-info .stat-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
}

/* Grade icon (Average Score card) */
.grade-icon { font-family: var(--font-mono) !important; font-weight: 700 !important; }
.grade-display {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.grade-icon.grade-a { background: var(--color-success-pale) !important; color: var(--color-success) !important; }
.grade-icon.grade-b { background: rgba(18,128,92,0.10) !important; color: var(--color-success) !important; }
.grade-icon.grade-c { background: var(--color-warning-pale) !important; color: var(--color-warning) !important; }
.grade-icon.grade-d { background: rgba(192,41,61,0.10) !important; color: var(--color-error) !important; }
.grade-icon.grade-f { background: var(--color-error-pale) !important; color: var(--color-error) !important; }
.grade-icon.grade-a .grade-display,
.grade-icon.grade-b .grade-display { color: var(--color-success) !important; }
.grade-icon.grade-c .grade-display { color: var(--color-warning) !important; }
.grade-icon.grade-d .grade-display,
.grade-icon.grade-f .grade-display { color: var(--color-error) !important; }

/* Dark mode for profile overview + stats */
body.dark-mode .profile-username,
body.dark-mode .profile-stats-grid .stat-info .stat-value { color: #F9FAFB !important; }
body.dark-mode .profile-email,
body.dark-mode .profile-join-date,
body.dark-mode .profile-location,
body.dark-mode .profile-website,
body.dark-mode .profile-stats-grid .stat-info .stat-label { color: #9CA3AF !important; }
body.dark-mode .profile-bio { color: #D1D5DB !important; border-top-color: #1F2937 !important; }
body.dark-mode .profile-stats-grid .stat-icon { background: rgba(140,90,142,0.15) !important; }

/* Mobile: stats grid collapses */
@media (max-width: 768px) {
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .profile-overview-card { padding: var(--space-4) !important; gap: var(--space-3) !important; }
  .profile-username { font-size: 18px !important; }
  .profile-stats-grid .stat-card { padding: var(--space-4) !important; gap: 10px !important; }
  .profile-stats-grid .stat-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .profile-stats-grid .stat-info .stat-value { font-size: 20px !important; }
}
@media (max-width: 480px) {
  .profile-stats-grid { grid-template-columns: 1fr !important; }
}

/* Gamification panel */
.gamification-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
  margin-top: var(--space-5) !important;
  box-shadow: var(--shadow-sm) !important;
}
.gamification-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.gamification-title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--gray-900) !important;
  margin: 0 !important;
}
.streak-display {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--color-accent-pale) !important;
  color: var(--color-accent-dark) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-full) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
}
.streak-icon { font-size: 16px !important; line-height: 1 !important; }

.gamification-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-5) !important;
}
.gamification-stats .stat-item {
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  text-align: center !important;
}
.gamification-stats .stat-item .stat-value {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.gamification-stats .stat-item .stat-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gray-500) !important;
  font-family: var(--font-sans) !important;
}

/* Progress section */
.progress-section { margin-bottom: var(--space-5) !important; }
.progress-item { margin-bottom: var(--space-4) !important; }
.progress-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.progress-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-700) !important;
  font-family: var(--font-sans) !important;
}
.progress-text {
  font-size: 13px !important;
  font-family: var(--font-mono) !important;
  color: var(--gray-600) !important;
  font-weight: 600 !important;
}
.progress-bar {
  height: 8px !important;
  background: var(--gray-100) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}
.progress-fill {
  height: 100% !important;
  background: var(--color-accent) !important;
  border-radius: var(--radius-full) !important;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Achievements + badges section headings */
.achievements-section, .badges-section {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--gray-200) !important;
}
.achievements-section h3, .badges-section h3 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--gray-900) !important;
  margin: 0 0 var(--space-3) 0 !important;
}

/* Leaderboard preview */
.leaderboard-preview {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--gray-200) !important;
}
.leaderboard-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--space-3) !important;
}
.leaderboard-title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--gray-800) !important;
}
.leaderboard-rank {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
}
.leaderboard-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: var(--space-3) !important;
}
.leaderboard-stat {
  background: var(--gray-50) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) !important;
  text-align: center !important;
}
.leaderboard-stat-value {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}
.leaderboard-stat-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gray-500) !important;
}
.account-type-badge.admin { background: var(--color-accent-pale) !important; color: var(--color-accent-dark) !important; border: 1px solid var(--color-accent-border) !important; }
.expired-info { color: var(--color-error) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }

/* ─── ACCOUNT STATUS CARD ─────────────────────────────────────────── */
.account-status-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}
.account-status-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-4) !important;
  flex-wrap: wrap !important;
}
.account-status-header h3 {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gray-900) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}
.account-status-header h3 i {
  color: var(--color-accent) !important;
  font-size: 14px !important;
}
.account-type-badge {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.account-type-badge.admin {
  background: var(--color-accent-pale) !important;
  color: var(--color-accent-dark) !important;
  border: 1px solid var(--color-accent-border) !important;
}
.account-type-badge.trial {
  background: var(--color-warning-pale) !important;
  color: var(--color-warning) !important;
  border: 1px solid var(--color-warning) !important;
}
.account-type-badge.premium {
  background: var(--color-success-pale) !important;
  color: var(--color-success) !important;
  border: 1px solid var(--color-success) !important;
}
.account-type-badge.expired {
  background: var(--color-error-pale) !important;
  color: var(--color-error) !important;
  border: 1px solid var(--color-error) !important;
}
.account-status-content {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--gray-700) !important;
}
.account-status-content p {
  margin: 0 0 var(--space-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  line-height: 1.5 !important;
}
.account-status-content p i {
  color: var(--color-accent) !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}
.account-status-content p:last-child { margin-bottom: 0 !important; }

/* Days remaining states */
.days-remaining {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  margin-bottom: var(--space-3) !important;
}
.days-remaining.warning {
  background: var(--color-warning-pale) !important;
  color: var(--color-warning) !important;
}
.days-remaining.critical {
  background: var(--color-error-pale) !important;
  color: var(--color-error) !important;
}

/* Trial progress */
.trial-progress { margin-top: var(--space-3) !important; }
.trial-progress .progress-bar {
  background: var(--gray-200) !important;
  border-radius: var(--radius-full) !important;
  height: 6px !important;
  overflow: hidden !important;
  margin-bottom: var(--space-2) !important;
}
.trial-progress .progress-fill {
  background: var(--color-accent) !important;
  height: 100% !important;
  border-radius: var(--radius-full) !important;
  transition: width 0.4s ease !important;
}
.trial-progress .progress-fill.warning { background: var(--color-warning) !important; }
.trial-progress .progress-fill.critical { background: var(--color-error) !important; }
.trial-info {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: var(--gray-600) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}
.trial-info i { color: var(--color-accent) !important; margin-right: 4px !important; }

/* Premium info */
.premium-info p {
  font-size: 13px !important;
  color: var(--gray-700) !important;
}
.premium-info p i { color: var(--color-success) !important; }
.subscription-details, .days-detail {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--gray-600) !important;
}
.subscription-details i, .days-detail i { color: var(--color-accent) !important; }

/* Admin info */
.admin-info p {
  font-size: 13px !important;
  color: var(--gray-700) !important;
}
.admin-info p i { color: var(--color-accent) !important; }

/* Dark mode */
body.dark-mode .account-status-card {
  background: var(--bg-card-dark) !important;
  border-color: var(--gray-700) !important;
  border-left-color: var(--color-accent) !important;
}
body.dark-mode .account-status-header h3 { color: var(--gray-100) !important; }
body.dark-mode .account-status-content { color: var(--gray-300) !important; }
body.dark-mode .account-status-content p { color: var(--gray-300) !important; }
body.dark-mode .admin-info p,
body.dark-mode .premium-info p { color: var(--gray-300) !important; }
body.dark-mode .days-remaining {
  background: var(--gray-800) !important;
  color: var(--gray-300) !important;
}
body.dark-mode .trial-progress .progress-bar { background: var(--gray-800) !important; }
body.dark-mode .trial-info { color: var(--gray-400) !important; }
body.dark-mode .subscription-details,
body.dark-mode .days-detail { color: var(--gray-400) !important; }
.streak-calendar { background: var(--bg-card) !important; border: 1px solid var(--gray-200) !important; border-radius: var(--radius-md) !important; }
.calendar-day { font-family: var(--font-mono) !important; font-size: 11px !important; }
.calendar-day.active { background: var(--color-accent) !important; color: #FFFFFF !important; }
.calendar-day.today { border: 1px solid var(--color-accent) !important; }
.progress-ring__circle { stroke: var(--color-accent) !important; }
.points-display, .points-score { font-family: var(--font-mono) !important; color: var(--color-accent) !important; font-weight: 600 !important; }
.motivational-quote { font-family: var(--font-sans) !important; color: var(--gray-700) !important; font-style: italic !important; }
.quote-author { color: var(--gray-500) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }

/* Dark-mode coverage for profile/gamification components */
body.dark-mode .gamification-panel,
body.dark-mode .gamification-stats .stat-item,
body.dark-mode .leaderboard-stat {
  background: #131826 !important;
  border-color: #1F2937 !important;
  color: #E5E7EB !important;
}
body.dark-mode .gamification-stats .stat-item,
body.dark-mode .leaderboard-stat { background: #0B0F1A !important; }
body.dark-mode .progress-bar { background: #1F2937 !important; }
body.dark-mode .progress-label,
body.dark-mode .leaderboard-title { color: #E5E7EB !important; }
body.dark-mode .gamification-title,
body.dark-mode .leaderboard-stat-value { color: #F9FAFB !important; }
body.dark-mode .profile-header h1 { color: #F9FAFB !important; }
body.dark-mode .profile-header p { color: #9CA3AF !important; }
body.dark-mode .gamification-header,
body.dark-mode .achievements-section,
body.dark-mode .badges-section,
body.dark-mode .leaderboard-preview { border-color: #1F2937 !important; }

/* Mobile: tighten gamification panel */
@media (max-width: 768px) {
  .gamification-panel { padding: var(--space-4) !important; }
  .gamification-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .profile-header h1 { font-size: 22px !important; }
  .gamification-title { font-size: 17px !important; }
}
@media (max-width: 480px) {
  .gamification-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .gamification-stats .stat-item .stat-value { font-size: 22px !important; }
  .leaderboard-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ─── LOADING / ERROR / EMPTY STATES ─────────────────────────────── */
.loading-spinner, .loading-container, .loading-status { color: var(--color-accent) !important; }
.loading-spinner { border-color: var(--gray-200) !important; border-top-color: var(--color-accent) !important; }
.error-state, .error-container, .empty-state, .no-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--gray-600) !important;
  font-family: var(--font-sans) !important;
  padding: var(--space-6) !important;
  text-align: center !important;
}
.error-icon { color: var(--color-error) !important; }

/* ─── LINKS & MISC ───────────────────────────────────────────────── */
a { color: var(--color-accent) !important; transition: color 0.15s !important; }
a:hover { color: var(--color-accent-dark) !important; }
h1, h2, h3 { font-family: var(--font-sans) !important; color: var(--gray-900) !important; }
h1 { color: var(--gray-900) !important; font-weight: 700 !important; }
footer {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--gray-200) !important;
  color: var(--gray-500) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  margin-top: auto !important;
  padding: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
footer .footer-content,
footer .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
footer .footer-content p,
footer .container p,
footer > p {
  margin: 0 !important;
  line-height: 1.5 !important;
  color: var(--gray-500) !important;
  font-size: 13px !important;
}
footer a { color: var(--color-accent) !important; text-decoration: none !important; }
footer a:hover { text-decoration: underline !important; }
.progress, .progress-bar { background: var(--gray-200) !important; border-radius: var(--radius-full) !important; }
.progress-bar, .progress-bar-inner, .progress-bar-fill { background: var(--color-accent) !important; }
.feedback-container { background: var(--bg-card) !important; border: 1px solid var(--gray-200) !important; border-radius: var(--radius-md) !important; padding: var(--space-4) !important; }
.feedback-container.show-feedback.correct, .feedback.correct { border-left: 3px solid var(--color-success) !important; }
.feedback-container.show-feedback.incorrect, .feedback.incorrect { border-left: 3px solid var(--color-error) !important; }
.feedback-container h3 { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--gray-700) !important; margin: 0 0 var(--space-2) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.question-text, .question-body { color: var(--gray-800) !important; font-family: var(--font-sans) !important; font-size: 16px !important; line-height: 1.7 !important; }
.question-image img { border-radius: var(--radius-md) !important; border: 1px solid var(--gray-200) !important; max-width: 100% !important; height: auto !important; }
.images-container { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 16px 0 !important; justify-content: center !important; align-items: flex-start !important; }
.images-container .question-image { flex: 1 1 auto !important; text-align: center !important; }
.images-container.image-count-1 .question-image { flex-basis: 80% !important; max-width: 80% !important; }
.images-container.image-count-2 { justify-content: space-around !important; }
.images-container.image-count-2 .question-image { flex-basis: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
.images-container.image-count-3 { justify-content: space-between !important; }
.images-container.image-count-3 .question-image { flex-basis: calc(33.33% - 10px) !important; max-width: calc(33.33% - 10px) !important; }
.images-container.image-count-many .question-image { flex-basis: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
.question-bullet-points { color: var(--gray-700) !important; }
.navigation-buttons, .session-controls { gap: var(--space-2) !important; display: flex !important; flex-wrap: wrap !important; }

/* ─── DARK MODE ──────────────────────────────────────────────────── */
body.dark-mode {
  --bg-app: #0B0F1A;
  --bg-card: #131826;
  --bg-sidebar: #131826;
  --gray-50:  #0B0F1A;
  --gray-100: #131826;
  --gray-200: #1F2937;
  --gray-300: #374151;
  --gray-400: #6B7280;
  --gray-500: #9CA3AF;
  --gray-600: #D1D5DB;
  --gray-700: #E5E7EB;
  --gray-800: #F3F4F6;
  --gray-900: #F9FAFB;
  --color-accent: #8C5A8E;
  --color-accent-dark: #A675A8;
  --color-accent-pale: rgba(140,90,142,0.15);
  --color-accent-border: rgba(140,90,142,0.30);
  --color-success-pale: rgba(18,128,92,0.15);
  --color-error-pale: rgba(192,41,61,0.15);
  --color-warning-pale: rgba(181,117,10,0.15);
  background: #0B0F1A !important;
  color: #F3F4F6 !important;
}
body.dark-mode .sidebar, body.dark-mode .header, body.dark-mode header,
body.dark-mode .card, body.dark-mode .dash-card, body.dark-mode .stat-card,
body.dark-mode .question-card, body.dark-mode .modal-content,
body.dark-mode .dropdown-menu, body.dark-mode .score-panel,
body.dark-mode .table-wrapper, body.dark-mode .data-tables-container,
body.dark-mode .badge-item, body.dark-mode .podium-section,
body.dark-mode .filter-controls, body.dark-mode .controls-section,
body.dark-mode footer, body.dark-mode .card-header {
  background: #131826 !important;
  border-color: #1F2937 !important;
  color: #E5E7EB !important;
}
body.dark-mode th, body.dark-mode thead th { background: #1F2937 !important; color: #9CA3AF !important; border-bottom-color: #374151 !important; }
body.dark-mode td { border-bottom-color: #1F2937 !important; color: #F3F4F6 !important; }
body.dark-mode tbody tr:hover { background: #1F2937 !important; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select,
body.dark-mode .form-control, body.dark-mode .filter-select,
body.dark-mode .search-input, body.dark-mode #searchInput {
  background: #1F2937 !important; color: #F3F4F6 !important; border-color: #374151 !important;
}
body.dark-mode .filter-select:disabled, body.dark-mode #subcategoryFilter2:disabled,
body.dark-mode #subcategoryFilter3:disabled {
  background: #0B0F1A !important; color: #6B7280 !important; border-color: #1F2937 !important;
}
body.dark-mode .btn, body.dark-mode .nav-button, body.dark-mode .show-answer-btn,
body.dark-mode .btn-secondary { background: #131826 !important; color: #E5E7EB !important; border-color: #374151 !important; }
body.dark-mode .btn:hover, body.dark-mode .nav-button:hover { background: #1F2937 !important; border-color: #6B7280 !important; }
body.dark-mode .option { background: #131826 !important; color: #F3F4F6 !important; border-color: #1F2937 !important; }
body.dark-mode .option:hover { border-color: var(--color-accent) !important; background: var(--color-accent-pale) !important; }
body.dark-mode .question-header { background: #0B0F1A !important; border-bottom-color: #1F2937 !important; }
body.dark-mode .feedback-container { background: #131826 !important; color: #E5E7EB !important; border-color: #1F2937 !important; }
body.dark-mode .score-value, body.dark-mode .score-label { color: #E5E7EB !important; }
body.dark-mode .category-tag { background: #1F2937 !important; color: #D1D5DB !important; border-color: #374151 !important; }
body.dark-mode .subcategory-tag { background: var(--color-accent-pale) !important; color: var(--color-accent-dark) !important; }
body.dark-mode .pagination button, body.dark-mode .pagination-btn { background: #131826 !important; color: #E5E7EB !important; border-color: #374151 !important; }
body.dark-mode .sidebar-header h3 { color: #F9FAFB !important; }
body.dark-mode .notification { background: #131826 !important; color: #E5E7EB !important; border-color: #1F2937 !important; }

/* ─── ACCESSIBILITY ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── RESPONSIVE — tap targets ───────────────────────────────────── */
@media (max-width: 768px) {
  .btn, .nav-button, .show-answer-btn, .filter-btn, .home-button,
  .pagination-btn, #startRandomSessionButton, #startPracticeMode,
  #resetScoreButton, #endSessionButton, #confirmNicknameButton,
  #cancelNicknameButton, .search-button, .sidebar-clear-button,
  .sidebar-collapse-btn, .sidebar-expand-btn {
    min-height: 44px !important;
  }
  .filter-select, .search-input, input, select, textarea { min-height: 44px !important; }

  /* Header: tighter padding + smaller gap on mobile */
  .header-content,
  header .header-content {
    padding: 10px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  header h1, .header h1, .header-title {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 60px) !important;
  }
  .logo { gap: 6px !important; }
  .logo i, .logo-icon { font-size: 1.2rem !important; }

  /* Menu button: full-width-friendly on mobile */
  #menuButton, .menu-button {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
  }

  /* Dropdown: wider on mobile, anchored to viewport right edge */
  #dropdownMenu, .dropdown-menu {
    min-width: 200px !important;
    max-width: calc(100vw - 28px) !important;
    right: 0 !important;
    left: auto !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
  }
  .dropdown-menu a, .dropdown-menu button, #dropdownThemeToggle {
    padding: 11px 14px !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .header-content,
  header .header-content {
    padding: 8px 12px !important;
  }
  header h1, .header h1, .header-title {
    font-size: 0.95rem !important;
    max-width: calc(100% - 52px) !important;
  }
  #dropdownMenu, .dropdown-menu {
    min-width: 180px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ─── PRINT ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .header, header, .sidebar-toggle, .sidebar-overlay,
  .nav-button, .show-answer-btn, .session-controls, #dropdownMenu,
  .menu-button, #themeToggleButton, #menuButton { display: none !important; }
  body { background: #FFFFFF !important; color: #000000 !important; }
  .question-card, .card { box-shadow: none !important; border: 1px solid #CCCCCC !important; }
}

/* ─── UNIFIED TYPOGRAPHIC SCALE ─────────────────────────────────── */
/* Enforce one consistent scale across all-questions page + all others.
   Only 5 sizes: body(15px), small(13px), label(11px), heading(20px), display(28px).
   Mono numerals inherit size from parent. */

/* Body + question text = 15px */
.question-text, .question-body, .question-bullet-points,
.option, .option label, .feedback-container, .feedback,
.modal-body, .notification, #userNotification,
td, tbody td, .score-label, .badge-description,
.motivational-quote, .quote-author, .admin-notes,
.question-explanation, .question-metadata, .question-details,
.search-input, #searchInput, .form-control, input, textarea, select,
.filter-select, #categoryFilter, #subcategoryFilter1,
#subcategoryFilter2, #subcategoryFilter3, #difficultyFilter,
.sidebar-clear-button, #clearFiltersButton,
.pagination-info, .empty-badges, .empty-state, .no-results,
.error-state, .error-container, footer, li, p, span, div {
  font-size: 15px !important;
}

/* Small text = 13px (captions, secondary, badges, tags) */
.category-tag, .subcategory-tag, .status-badge, .account-type-badge,
.calendar-day, .score-date, .score-info, .score-details,
.pagination button, .pagination-btn, .badge-name, .badge-info,
.card-header, .tab-button, .dropdown-menu a, .dropdown-menu button,
#dropdownMenu a, #dropdownMenu button, .sidebar-header h3,
.nav-current-badge, .nav-current-total, small, .small,
.subcategory-tag, .category-tag, .badge-item, .achievement-badge {
  font-size: 13px !important;
}

/* Labels = 11px (uppercase, tracked) */
.sidebar-filters label, .filter-label, .form-group label,
.score-label, .section-header, .section-title,
th, thead th, .table-header, label, .form-label {
  font-size: 11px !important;
}

/* Headings = 20px */
h2, .question-header h2, .question-header .question-number,
.question-header .question-title, .section-header, .section-title,
.leaderboard-header, h2 {
  font-size: 20px !important;
}

/* Page title / display = 28px */
h1, .admin-page h1, .leaderboard-container h1 {
  font-size: 28px !important;
}

/* Mono numerals — keep size from parent but ensure mono font */
#timerDisplay, .timer-display, #timer,
.question-header .question-number, #currentQuestionNum, #totalQuestions,
.nav-current-total, .nav-current-badge, .score-value, #currentScore,
#correctCount, #wrongCount, .score-value, .points-display, .points-score,
.podium-score, .rank-badge, .difficulty-value, .difficulty-num,
.pagination button, .pagination-btn {
  font-size: inherit !important;
}

/* Buttons — 14px */
.btn, .nav-button, .show-answer-btn, .nav-button-enhanced,
.submit-button, .results-button, .filter-btn, .home-button,
.search-button, #searchButton, .sidebar-search-button,
#startRandomSessionButton, #startPracticeMode, #resetScoreButton,
#endSessionButton, #confirmNicknameButton, #cancelNicknameButton,
.score-button, .view-full-question-btn {
  font-size: 14px !important;
}