*{box-sizing:border-box}body{margin:0;font-family:sans-serif;background:#faf8f6;color:#1f2937}

/* Topic suggestion chips */
.topic-chip { background: #fff7f2; border: 1px solid #f5d9b8; color: #9a6218; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.topic-chip:hover { background: #dc9435; color: #fff; border-color: #dc9435; }

/* Hide reCAPTCHA badge - Google allows this if you include attribution text */
.grecaptcha-badge { visibility: hidden !important; }

/**
 * CSS Custom Properties for Grade Badge Colors
 * Single source of truth - also referenced in index.html inline script
 * @see script.js GRADE BADGE COLOR SYSTEM documentation
 */
:root {
  --badge-default: #dc9435;      /* Orange - neutral first-visit state */
  --badge-not-started: #ef4444;  /* Red - no scopes known or focused */
  --badge-in-progress: #f59e0b;  /* Yellow - at least 1 scope known/focused */
  --badge-mastered: #22c55e;     /* Green - all scopes mastered */
}

/* Accessibility: Focus States */
:focus {
  outline: 3px solid #dc9435;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid #dc9435;
  outline-offset: 2px;
}

/* Skip Link - Hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #dc9435;
  color: white;
  padding: 12px 24px;
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ff8a3d;
  outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
} .container{max-width:900px;margin:20px auto;padding:0 16px} .card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;margin:16px 0;box-shadow:0 4px 12px rgba(0,0,0,.06)} .section-title{margin:12px 0;font-size:18px} .panel{background:#fff7f2;border:1px solid #ffd9c9;padding:12px;border-radius:8px;margin:12px 0} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;row-gap:20px} .field{display:flex;flex-direction:column;margin-bottom:8px} label{font-weight:600} .muted{color:#777;font-weight:400} input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:6px;font-family:sans-serif} textarea{resize:vertical;width:100%;margin-top:8px} .btn{background:#ff8a3d;color:#fff;border:none;border-radius:6px;padding:10px 16px;cursor:pointer;font-weight:600;transition:all 0.2s} .btn:disabled{background:#ccc;cursor:not-allowed;opacity:0.5} .btn--ghost{background:#f3f3f3;color:#333;border:1px solid #ccc} pre{white-space:pre-wrap}
.scope-advanced {
  display: none;
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(250, 248, 246, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-screen[hidden] {
  display: none !important;
}

/* ==========================================================================
   AUTH & CONTENT VISIBILITY
   
   Content visibility on authenticated pages is managed by:
   - auth-guard.js: Redirects to /login if no auth cookie (synchronous)
   - body.page-loading: Hides content until globalHeaderReady fires
   - page-ready.js: Removes page-loading class on globalHeaderReady (8s timeout)
   - page-loading-shimmer: Shows skeleton UI while loading
   
   Legacy auth-verifying/auth-verified classes removed in v7.20.79.
   ========================================================================== */

.loading-content {
  text-align: center;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff8a3d;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-content h2 {
  color: #333;
  font-size: 24px;
  margin: 0 0 8px 0;
}

.loading-content p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 3-State Toggle Styles */
.subscope-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.subscope-label {
  font-weight: 700;
  font-size: 15px;
  color: #374151;
  margin-bottom: 4px;
  text-align: center;
}

.toggle-group {
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  min-width: 0;
}

.toggle-option {
  padding: 8px 6px;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.toggle-option:hover {
  color: #374151;
  transform: translateX(2px);
}

.toggle-option.active-mastered {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.toggle-option.active-focus {
  background: linear-gradient(135deg, #f59e0b 0%, #dc9435 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(220, 148, 53, 0.3);
}

.toggle-option.active-notlearned {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Disabled bulk focus button when would exceed 4 limit */
.bulk-toggle-btn.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: #e5e7eb !important;
  filter: grayscale(100%);
}

/* Tab Navigation Styles */
.tab-navigation {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 3px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tab-button {
  flex: 1;
  padding: 16px 24px;
  background: #f3f4f6;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: #6b7280;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  bottom: -3px;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.tab-button:hover {
  color: #374151;
  background: #e5e7eb;
  transform: translateY(-2px);
}

.tab-button.active {
  color: #dc9435;
  background: #ffffff;
  border-bottom-color: #dc9435;
  box-shadow: 0 -2px 8px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.tab-button:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

/* Disabled tab button */
.tab-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #9ca3af;
  background: #f9fafb;
  position: relative;
}

.tab-button.disabled:hover {
  color: #9ca3af;
  background: #f9fafb;
  transform: none;
}

/* Coming Soon badge */
.coming-soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fbbf24;
  color: #78350f;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Tab switch animation */
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: tabFadeIn 0.3s ease-out;
}

/* Phonics Focus Mode - PhonoLogic Brand Red/Pink (#c1535f) - Subtle */
.panel.phonics-mode {
  background: linear-gradient(135deg, #fffbfc 0%, #fff5f7 100%);
  border: 1px solid rgba(193, 83, 95, 0.3);
  box-shadow: 0 1px 3px rgba(193, 83, 95, 0.08);
}

/* Fluency Review Mode - PhonoLogic Brand Red-Orange (#dc7043) - Subtle */
.panel.fluency-mode {
  background: linear-gradient(135deg, #fffbf7 0%, #fff6f0 100%);
  border: 1px solid rgba(220, 112, 67, 0.3);
  box-shadow: 0 1px 3px rgba(220, 112, 67, 0.08);
}

/* Description sections - Unified accent style */
.description-section.phonics-mode {
  background: #e8eaf0;
  border-left: 4px solid #dc9435 !important;
}

.description-section.fluency-mode {
  background: #e8eaf0;
  border-left: 4px solid #dc9435 !important;
}

/* Toggle State Legend — Horizontal strip */
.toggle-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: var(--color-bg-subtle, #f3f4f6);
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e7eb);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}

.legend-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.legend-icon svg {
  width: 24px;
  height: 24px;
}

.legend-unknown .legend-icon { color: #dc2626; }
.legend-focus .legend-icon { color: #dc9435; }
.legend-known .legend-icon { color: #059669; }

.legend-label {
  font-weight: 600;
  font-size: 13px;
}

.legend-unknown .legend-label { color: #dc2626; }
.legend-focus .legend-label { color: #dc9435; }
.legend-known .legend-label { color: #059669; }

.legend-sep {
  color: #9ca3af;
  font-size: 12px;
}

.legend-description {
  color: #6b7280;
  font-size: 12px;
}

/* Bulk Toggle Buttons */
.bulk-toggle-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bulk-toggle-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bulk-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.bulk-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.bulk-unknown {
  color: #dc2626;
  border-color: #fca5a5;
}

.bulk-unknown:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

.bulk-focus {
  color: #dc9435;
  border-color: #fcd9a5;
}

.bulk-focus:hover {
  background: #fff7f2;
  border-color: #dc9435;
}

.bulk-known {
  color: #059669;
  border-color: #6ee7b7;
}

.bulk-known:hover {
  background: #f0fdf4;
  border-color: #10b981;
}

@media (max-width: 768px) {
  .toggle-legend {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
  }
  
  .legend-sep {
    display: none;
  }
  
  /* Mobile-friendly header layout */
  .site-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center;
  }
  
  #userAccountSection {
    width: 100%;
    justify-content: center !important;
  }
}

/* ============================================
   SCOPE SELECTOR UTILITY CLASSES
   Extracted from inline styles in app.html
   ============================================ */

/* Subscope example text (e.g. "cat, bed, pig") — 167 occurrences */
.subscope-examples {
  font-size: 13px;
  color: #6366f1;
  font-weight: 500;
}

/* "Set all:" label text — 34 occurrences */
.set-all-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

/* Scope section header layout — 34 occurrences */
.scope-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Set all button group container — 35 occurrences */
.set-all-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .subscope-examples {
  color: #818cf8;
}

[data-theme="dark"] .set-all-label {
  color: var(--color-text-muted, #9ca3af);
}

/* ============================================
   PROFILE MANAGEMENT STYLES
   ============================================ */

/* Profile Modal Overlay */
.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.profile-modal {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Profile Select Grid */
.profile-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.profile-select-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-select-item:hover {
  border-color: #dc9435;
  background: #f8f9ff;
}

.profile-select-add {
  border-style: dashed;
  color: #6b7280;
}

.profile-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc9435 0%, #c1535e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.profile-select-add .profile-avatar-large {
  background: #e5e7eb;
  color: #6b7280;
}

.profile-select-name {
  font-weight: 600;
  color: #374151;
}

/* Manage Profiles List */
.manage-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.manage-profile-item .profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc9435 0%, #c1535e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

/* Profile Switcher Dropdown */
#profileSection {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

#profileSwitcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

#profileSwitcher:hover {
  background: #e5e7eb;
}

#profileSwitcher .profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc9435 0%, #c1535e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

#currentProfileName {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

#profileDropdownMenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  display: none;
  z-index: 1000;
}

#profileDropdownMenu.show {
  display: block;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.profile-dropdown-item:hover {
  background: #f3f4f6;
}

.profile-dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.profile-dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.profile-dropdown-item.active {
  background: #eff6ff;
}

.profile-dropdown-item .profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc9435 0%, #c1535e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.profile-dropdown-item .profile-check {
  margin-left: auto;
  color: #dc9435;
  font-weight: 600;
}

.profile-dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

.profile-add-icon, .profile-manage-icon {
  width: 28px;
  text-align: center;
}

/* Story Length Slider - Custom styling for fill effect */
#storyLengthSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e5e7eb;
  outline: none;
}

#storyLengthSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc9435;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin-top: -6px;
}

#storyLengthSlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc9435;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#storyLengthSlider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #dc9435 0%, #dc9435 var(--slider-progress, 50%), #e5e7eb var(--slider-progress, 50%), #e5e7eb 100%);
}

#storyLengthSlider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: #e5e7eb;
}

#storyLengthSlider::-moz-range-progress {
  height: 8px;
  border-radius: 4px 0 0 4px;
  background: #dc9435;
}

/* ===========================================
   Collapsible Level Sections
   =========================================== */

.level-section {
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}

.level-header:hover {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.level-header:focus-visible {
  outline: 3px solid #dc9435;
  outline-offset: -3px;
}

.level-section.expanded .level-header {
  border-bottom-color: #e5e7eb;
}

.level-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--badge-default);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.2s;
}

.level-badge.not-started {
  background: var(--badge-not-started);
}

.level-badge.in-progress {
  background: var(--badge-in-progress);
}

.level-badge.mastered {
  background: var(--badge-mastered);
}

.level-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

.level-toggle-icon {
  transition: transform 0.2s;
  font-size: 18px;
}

.level-section.expanded .level-toggle-icon {
  transform: rotate(180deg);
}

.level-content {
  display: none;
  padding: 16px;
}

.level-section.expanded .level-content {
  display: block;
}

.level-content .panel {
  margin-bottom: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.level-content .panel h3 {
  margin-top: 0;
}

.level-content .panel:last-child {
  margin-bottom: 0;
}

/* ===========================================
   BETA NOTICE - Shared across policy pages
   =========================================== */
.beta-notice {
  background: linear-gradient(135deg, #fef3cd 0%, #fff3cd 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 32px;
}

.beta-notice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.beta-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.beta-notice-title {
  font-size: 18px;
  font-weight: 600;
  color: #92400e;
  margin: 0;
}

.beta-notice p {
  color: #78350f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.beta-notice ul {
  color: #78350f;
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0 0;
  padding-left: 20px;
}

.beta-notice li {
  margin-bottom: 6px;
}

/* Toast notification animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Foundation Warning - v7.0.6 vocabulary guard rail */
.foundation-warning {
  color: #b45309;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
}

/* ===========================================
   Mobile Responsive - Tablet (≤768px)
   =========================================== */

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    row-gap: 16px;
  }

  .tab-button {
    padding: 12px 16px;
    font-size: 15px;
  }

  .level-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }

  .level-toggle span:first-child {
    display: none;
  }

  .level-content {
    padding: 12px;
  }

  .panel h3 {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===========================================
   Mobile Responsive - Phone (≤480px)
   =========================================== */

@media (max-width: 480px) {
  .container {
    padding: 0 10px;
    margin: 12px auto;
  }

  .card {
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 8px;
    row-gap: 12px;
  }

  .tab-button {
    padding: 10px 8px;
    font-size: 14px;
  }

  .level-header {
    padding: 10px 12px;
  }

  .level-title {
    font-size: 14px;
    gap: 6px;
  }

  .level-content {
    padding: 8px;
  }

  .panel {
    padding: 10px;
    margin: 8px 0;
  }

  .panel h3 {
    font-size: 15px;
  }

  .subscope-label {
    font-size: 14px;
  }

  .toggle-option {
    padding: 12px 8px;
    font-size: 13px;
    min-height: 44px;
  }

  .bulk-toggle-buttons {
    gap: 4px;
  }

  .bulk-toggle-btn {
    width: 44px;
    height: 44px;
  }

  .bulk-toggle-btn svg {
    width: 20px;
    height: 20px;
  }

  .beta-notice {
    padding: 14px 16px;
  }
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] .card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .panel {
  background: var(--color-bg-cream);
  border-color: var(--color-border-cream);
}

[data-theme="dark"] .topic-chip {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .topic-chip:hover {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

[data-theme="dark"] .loading-screen {
  background: rgba(18, 18, 18, 0.98);
}

[data-theme="dark"] .loading-content h2 {
  color: var(--color-text);
}

[data-theme="dark"] .loading-content p {
  color: var(--color-text-muted);
}

[data-theme="dark"] .spinner {
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
}

[data-theme="dark"] #authLoadingOverlay .auth-loading-card {
  background: var(--color-bg-card);
}

[data-theme="dark"] #authLoadingOverlay .auth-spinner {
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
}

[data-theme="dark"] #authLoadingOverlay p {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .subscope-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .toggle-group {
  background: var(--color-bg-subtle);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toggle-option {
  color: var(--color-text-muted);
}

[data-theme="dark"] .toggle-option:hover {
  color: var(--color-text);
}

[data-theme="dark"] .tab-navigation {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tab-button {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

[data-theme="dark"] .tab-button:hover {
  color: var(--color-text);
  background: var(--color-border);
}

[data-theme="dark"] .tab-button.active {
  color: var(--color-primary);
  background: var(--color-bg-card);
  border-bottom-color: var(--color-primary);
}

[data-theme="dark"] .tab-button.disabled {
  color: var(--color-text-placeholder);
  background: var(--color-bg-muted);
}

[data-theme="dark"] .toggle-legend {
  background: var(--color-bg-card, #1e1e1e) !important;
  border-color: var(--color-border, #333) !important;
}

[data-theme="dark"] .legend-item {
  color: var(--color-text-secondary, #d1d1d1);
}

[data-theme="dark"] .legend-sep {
  color: var(--color-text-muted, #9ca3af);
}

[data-theme="dark"] .legend-description {
  color: var(--color-text-muted, #9ca3af) !important;
}

[data-theme="dark"] .bulk-toggle-btn {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .bulk-unknown:hover {
  background: #2e1a1a;
}

[data-theme="dark"] .bulk-focus:hover {
  background: #2e1f1a;
}

[data-theme="dark"] .bulk-known:hover {
  background: #1a2e1a;
}

[data-theme="dark"] .profile-modal {
  background: var(--color-bg-card);
  color: var(--color-text);
}

[data-theme="dark"] .profile-select-item {
  border-color: var(--color-border);
}

[data-theme="dark"] .profile-select-item:hover {
  background: var(--color-bg-subtle);
}

[data-theme="dark"] .profile-select-name {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .profile-select-add {
  color: var(--color-text-muted);
}

[data-theme="dark"] .manage-profile-item {
  background: var(--color-bg-subtle);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .muted {
  color: var(--color-text-muted);
}

[data-theme="dark"] .btn--ghost {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .section-title {
  color: var(--color-text);
}

[data-theme="dark"] .panel.phonics-mode {
  background: linear-gradient(135deg, #1a1518 0%, #1a1215 100%);
  border-color: rgba(193, 83, 95, 0.4);
}

[data-theme="dark"] .panel.fluency-mode {
  background: linear-gradient(135deg, #1a1510 0%, #1a1208 100%);
  border-color: rgba(220, 112, 67, 0.4);
}

[data-theme="dark"] .description-section.phonics-mode,
[data-theme="dark"] .description-section.fluency-mode {
  background: var(--color-bg-subtle) !important;
  border-left-color: var(--color-primary) !important;
}

[data-theme="dark"] .description-section summary {
  color: var(--color-text) !important;
}

[data-theme="dark"] .description-section summary span {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .description-section p {
  color: var(--color-text-secondary) !important;
}

/* Level sections — completely missing dark overrides */
[data-theme="dark"] .level-section {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .level-header {
  background: var(--color-bg-subtle);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .level-header:hover {
  background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
}

[data-theme="dark"] .level-section.expanded .level-header {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .level-title span {
  color: var(--color-text);
}

[data-theme="dark"] .level-scopes {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .level-toggle {
  color: var(--color-text-muted);
}

[data-theme="dark"] .level-toggle-icon {
  color: var(--color-text-muted);
}

[data-theme="dark"] .level-content {
  background: var(--color-bg-card);
}

[data-theme="dark"] .level-content .panel {
  border-color: var(--color-border);
}

[data-theme="dark"] .level-content .panel h3 {
  color: var(--color-text);
}

[data-theme="dark"] .level-content .panel h3 span[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* Beta welcome box — inline background needs !important */
[data-theme="dark"] #betaWelcomeBox {
  background: var(--color-bg-subtle) !important;
  border-left-color: var(--color-primary) !important;
}

[data-theme="dark"] #betaWelcomeToggle h3 {
  color: var(--color-text) !important;
}

[data-theme="dark"] #betaWelcomeContent p {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] #betaWelcomeContent a {
  color: var(--color-primary) !important;
}

/* Student/Client selector — inline white background */
[data-theme="dark"] #studentSelector {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] #studentSelector label {
  color: var(--color-text) !important;
}

[data-theme="dark"] #studentSelectorDropdown {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Generator empty state — inline white background */
[data-theme="dark"] #generatorEmptyState {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] #generatorEmptyState h2 {
  color: var(--color-text) !important;
}

[data-theme="dark"] #generatorEmptyState p {
  color: var(--color-text-secondary) !important;
}

/* Usage banner */
[data-theme="dark"] #usageBanner {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] #usageBar {
  background: var(--color-border) !important;
}

/* Usage limit reached blocker */
[data-theme="dark"] #usageLimitReached {
  background: #2e1a1a !important;
  border-color: #5c2020 !important;
}

[data-theme="dark"] #usageLimitReached p {
  color: var(--color-error) !important;
}

/* World mode banner */
[data-theme="dark"] #worldModeBanner {
  background: linear-gradient(135deg, #2e2510 0%, #2a2008 100%) !important;
  border-color: #a16207 !important;
}

[data-theme="dark"] #worldModeBanner p {
  color: var(--color-text) !important;
}

[data-theme="dark"] #worldModeBanner #exitWorldBtn {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
  border-color: #a16207 !important;
}

/* Card header — form wrapper */
[data-theme="dark"] .card__header {
  background: var(--color-bg-card);
}

/* Subscope label example text — inline purple color */
[data-theme="dark"] .subscope-label span[style*="color: #6366f1"] {
  color: #a5b4fc !important;
}

/* Global fix: inline text colors that don't work on dark backgrounds */
[data-theme="dark"] .card [style*="color: #1f2937"],
[data-theme="dark"] .card [style*="color: #374151"],
[data-theme="dark"] .card [style*="color: #4b5563"] {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .card [style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .card [style*="color: #92400e"],
[data-theme="dark"] .card [style*="color: #a16207"] {
  color: var(--color-warning) !important;
}

[data-theme="dark"] .card [style*="color: #7f1d1d"] {
  color: var(--color-error) !important;
}

/* Teacher prompt tip box — green gradient inline style */
[data-theme="dark"] .panel [style*="background: linear-gradient(135deg, #ecfdf5"] {
  background: var(--color-success-light) !important;
  border-color: #065f46 !important;
}

[data-theme="dark"] .panel [style*="background: linear-gradient(135deg, #ecfdf5"] p {
  color: var(--color-success-dark) !important;
}

/* Story length slider section — gray gradient inline style */
[data-theme="dark"] .panel[style*="background: linear-gradient(135deg, #f8fafc"] {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] #storyLengthLabel {
  background: var(--color-bg-card) !important;
  color: var(--color-primary) !important;
}

/* Loading screen — timer and quips */
[data-theme="dark"] #loadingTimer {
  color: #a5b4fc !important;
}

[data-theme="dark"] #loadingMessage {
  color: var(--color-text-muted) !important;
}

/* Mobile warning on loading screen */
[data-theme="dark"] #mobileWarning {
  background: #2e2510 !important;
  border-color: #a16207 !important;
  color: var(--color-warning) !important;
}

/* Fluency description section — same pattern as phonics */
[data-theme="dark"] .description-section.fluency-mode summary {
  color: var(--color-text) !important;
}

[data-theme="dark"] .description-section.fluency-mode p {
  color: var(--color-text-secondary) !important;
}

/* Teacher prompt label — inline dark text */
[data-theme="dark"] .panel label[for="teacherInput"],
[data-theme="dark"] .panel label[for="teacherInputFluency"] {
  color: var(--color-text) !important;
}

/* Version footer */
[data-theme="dark"] #version-display {
  color: var(--color-text-muted) !important;
}

/* Fluency vocab selector panel — inline light background */
[data-theme="dark"] .fluency-vocab-selector {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .fluency-vocab-selector h3 {
  color: var(--color-text) !important;
}

[data-theme="dark"] .fluency-checkbox-label {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .fluency-checkbox-label span[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] .fluency-checkbox-label span[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* Fluency customize toggle button */
[data-theme="dark"] #fluencyCustomizeToggle {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* Focus warning text */
[data-theme="dark"] #focusWarning {
  color: var(--color-error) !important;
}

/* ============================================================
   PROGRESS PAGE — Dark Mode Overrides for inline styles
   Covers progress.html + JS-generated content in progress.js
   ============================================================ */

/* --- Dashboard Guide (teacher onboarding box) --- */
[data-theme="dark"] #dashboardGuide {
  background: linear-gradient(135deg, #2a2008 0%, #2e2510 100%) !important;
  border-color: #a16207 !important;
}

[data-theme="dark"] #dashboardGuide h3 {
  color: var(--color-text) !important;
}

[data-theme="dark"] #dashboardGuide div {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] #dashboardGuide a {
  color: var(--color-primary) !important;
}

[data-theme="dark"] #dismissGuideBtn {
  color: var(--color-text-muted) !important;
}

/* --- Import Students Modal --- */
[data-theme="dark"] #importStudentsModal {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] #importStudentsModal h3 {
  color: var(--color-text) !important;
}

[data-theme="dark"] #closeImportModal {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #importStudentsModal p {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #importStudentsModal h4 {
  color: var(--color-text-secondary) !important;
}

/* --- Roster / Tutor Sub-tabs --- */
[data-theme="dark"] .roster-sub-tab,
[data-theme="dark"] .tutor-sub-tab {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .roster-sub-tab.active,
[data-theme="dark"] .tutor-sub-tab.active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

/* --- Class / Client empty states --- */
[data-theme="dark"] #classEmptyState,
[data-theme="dark"] #clientEmptyState {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #classEmptyState h2,
[data-theme="dark"] #clientEmptyState h2 {
  color: var(--color-text) !important;
}

[data-theme="dark"] #classEmptyState a,
[data-theme="dark"] #clientEmptyState a {
  background: var(--color-primary) !important;
}

/* --- Selected student indicator --- */
[data-theme="dark"] #classSelectedStudent,
[data-theme="dark"] #clientSelectedStudent {
  color: var(--color-text-muted) !important;
}

/* --- Breadcrumb (JS-generated) --- */
[data-theme="dark"] .progress-breadcrumb a {
  color: var(--color-primary) !important;
}

[data-theme="dark"] .progress-breadcrumb strong {
  color: var(--color-text) !important;
}

/* --- Assessment section details/summary --- */
[data-theme="dark"] .progress-section details summary {
  color: var(--color-text) !important;
}

[data-theme="dark"] .progress-section details > div {
  color: var(--color-text-secondary) !important;
}

/* --- Assessment readiness labels (blue=mastered, amber=focus) --- */
[data-theme="dark"] .progress-section [style*="color: #1e40af"] {
  color: #93c5fd !important;
}

[data-theme="dark"] .progress-section [style*="color: #92400e"] {
  color: var(--color-warning) !important;
}

/* --- Assessment history count --- */
[data-theme="dark"] #assessmentHistoryCount {
  color: var(--color-text-muted) !important;
}

/* --- Offline results link --- */
[data-theme="dark"] a[href="/offline-results"] {
  color: var(--color-text-muted) !important;
}

/* --- Bulk Set Levels section --- */
[data-theme="dark"] #bulkSetLevelsSection p[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #bulkSetLevelsSection div[style*="background: #fff7f2"] {
  background: #2e2510 !important;
  border-color: #a16207 !important;
}

[data-theme="dark"] #bulkSetLevelsSection label[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] #bulkSetLevelsSection h3[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] #bulkSetLevelsSection div[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Bulk set student rows (JS-generated) --- */
[data-theme="dark"] #bulkSetLevelsSection span[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] #bulkSetLevelsSection span[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #bulkSetLevelsSection span[style*="background: #f3f4f6"] {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #bulkSetLevelsSection a[style*="color: #dc9435"] {
  color: var(--color-primary) !important;
}

/* --- Bulk preview details row --- */
[data-theme="dark"] .bulk-preview-details,
[data-theme="dark"] div[style*="background: #f9fafb"] {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .bulk-preview-details span[style*="color: #dc9435"] {
  color: var(--color-primary) !important;
}

[data-theme="dark"] .bulk-preview-details span[style*="color: #374151"] {
  color: var(--color-text) !important;
}

/* --- Level-up readiness panel (JS-generated green box) --- */
[data-theme="dark"] div[style*="background: #ecfdf5"] {
  background: #0d2818 !important;
  border-color: #065f46 !important;
}

[data-theme="dark"] div[style*="background: #ecfdf5"] strong[style*="color: #059669"] {
  color: #34d399 !important;
}

[data-theme="dark"] div[style*="background: #ecfdf5"] p[style*="color: #065f46"] {
  color: #6ee7b7 !important;
}

/* --- Level mastery bar --- */
[data-theme="dark"] span[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] div[style*="background: #e5e7eb"][style*="height: 10px"] {
  background: var(--color-border) !important;
}

/* --- Mastered pattern chips (green) --- */
[data-theme="dark"] span[style*="background: #dcfce7"] {
  background: #052e16 !important;
  color: #6ee7b7 !important;
}

/* --- Focus pattern chips (amber) --- */
[data-theme="dark"] span[style*="background: #fef3c7"] {
  background: #451a03 !important;
  color: #fbbf24 !important;
}

/* --- Green success text (JS-generated) --- */
[data-theme="dark"] span[style*="color: #059669"],
[data-theme="dark"] div[style*="color: #059669"],
[data-theme="dark"] strong[style*="color: #059669"] {
  color: #34d399 !important;
}

/* --- Recommendation panel (blue box) --- */
[data-theme="dark"] div[style*="background: #f0f9ff"] {
  background: #0c1929 !important;
  border-color: #1e3a5f !important;
  color: #7dd3fc !important;
}

/* --- Recommendation items --- */
[data-theme="dark"] div[style*="background: #fafafa"][style*="border-radius: 8px"] {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] div[style*="background: #fafafa"] span[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Teaching tips (amber box) --- */
[data-theme="dark"] div[style*="background: #fffbeb"] {
  background: #2e2510 !important;
  border-color: #a16207 !important;
}

[data-theme="dark"] div[style*="background: #fffbeb"] strong[style*="color: #92400e"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] div[style*="background: #fffbeb"] p[style*="color: #78350f"] {
  color: #fcd34d !important;
}

/* --- Data confidence / muted text (JS-generated) --- */
[data-theme="dark"] p[style*="color: #9ca3af"],
[data-theme="dark"] span[style*="color: #9ca3af"] {
  color: var(--color-text-muted) !important;
}

/* --- Flashcard deck word count --- */
[data-theme="dark"] span[style*="color: #dc9435"] {
  color: var(--color-primary) !important;
}

/* --- No students found (JS table empty) --- */
[data-theme="dark"] #bulkSetLevelsSection div[style*="padding: 16px"][style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- No assessment meta text --- */
[data-theme="dark"] .meta-container span[style*="color: #9ca3af"] {
  color: var(--color-text-muted) !important;
}

/* --- Assessment prompt warning --- */
[data-theme="dark"] p[style*="color: #92400e"] {
  color: var(--color-warning) !important;
}

/* --- Error fallback messages --- */
[data-theme="dark"] p[style*="color: #9ca3af"][style*="font-size: 14px"] {
  color: var(--color-text-muted) !important;
}

/* --- Gibberish/flashcard breakdown cards (already use CSS vars with fallback) --- */
[data-theme="dark"] div[style*="background: var(--color-bg-subtle"] {
  background: var(--color-bg-subtle) !important;
}

/* --- Purple dot note text --- */
[data-theme="dark"] p[style*="color: #9ca3af"][style*="font-size: 11px"] {
  color: var(--color-text-muted) !important;
}

/* ============================================================
   SETTINGS PAGE — Dark Mode Overrides for inline styles
   Covers settings.html + JS-generated content in settings.js
   ============================================================ */

/* --- Avatar display --- */
[data-theme="dark"] #avatarDisplay {
  background: var(--color-primary) !important;
}

/* --- Curriculum toggle label --- */
[data-theme="dark"] #curriculumEnabledLabel {
  color: var(--color-text-muted) !important;
}

/* --- Curriculum grade checkboxes --- */
[data-theme="dark"] label[style*="border: 1px solid #e5e7eb"] {
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* --- Curriculum status box --- */
[data-theme="dark"] #curriculumStatus {
  background: #0d2818 !important;
}

[data-theme="dark"] #curriculumStatusText {
  color: #6ee7b7 !important;
}

/* --- Toggle sliders --- */
[data-theme="dark"] .toggle-slider {
  background: #4b5563 !important;
}

/* --- Export rate limit note --- */
[data-theme="dark"] small[style*="color: #888"] {
  color: var(--color-text-muted) !important;
}

/* --- Subscription change / cancel descriptions --- */
[data-theme="dark"] .settings-section p[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Delete account warning --- */
[data-theme="dark"] p[style*="color: #dc2626"] {
  color: #f87171 !important;
}

[data-theme="dark"] ul[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Delete confirmation label --- */
[data-theme="dark"] label[style*="color: #374151"] {
  color: var(--color-text) !important;
}

/* --- Change password section --- */
[data-theme="dark"] #changePasswordError {
  background: #2e1a1a !important;
  border-color: #5c2020 !important;
  color: #f87171 !important;
}

[data-theme="dark"] #changePasswordSuccess {
  background: #0d2818 !important;
  border-color: #065f46 !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] label[for="currentPassword"],
[data-theme="dark"] label[for="newPassword"],
[data-theme="dark"] label[for="confirmNewPassword"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] div[style*="color: #6b7280"][style*="font-size: 12px"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] label[for="logoutAfterChange"] {
  color: var(--color-text-muted) !important;
}

/* --- Sessions table (JS-generated) --- */
[data-theme="dark"] p[style*="color: #6b7280"][style*="text-align: center"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] tr[style*="border-bottom: 1px solid #e5e7eb"] {
  border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] th[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] tr[style*="border-bottom: 1px solid #f3f4f6"] {
  border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] td[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Subscription payment issue --- */
[data-theme="dark"] span[style*="color:#dc2626"] {
  color: #f87171 !important;
}

/* ============================================================
   RESULTS PAGE — Dark Mode Overrides for inline styles
   Covers results.html (results.js has no inline styles)
   ============================================================ */

/* --- Generation time display --- */
[data-theme="dark"] #generationTimeDisplay {
  color: var(--color-text-muted) !important;
}

/* --- Failure banner --- */
[data-theme="dark"] #failureBanner {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
  border-color: #a16207 !important;
}

[data-theme="dark"] #failureTitle {
  color: #fbbf24 !important;
}

[data-theme="dark"] #failureBanner p[style*="color: #78350f"] {
  color: #fcd34d !important;
}

/* --- Back to edit button --- */
[data-theme="dark"] #backToEditBtn {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* --- Text size controls --- */
[data-theme="dark"] div[style*="background: #f5f5f5"][style*="border-radius: 8px"][style*="padding: 4px"] {
  background: var(--color-bg-subtle) !important;
}

[data-theme="dark"] #decreaseTextBtn,
[data-theme="dark"] #increaseTextBtn {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #textSizeDisplay {
  color: var(--color-text-muted) !important;
}

/* --- Edit button --- */
[data-theme="dark"] #editBtn {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* --- Comprehension question buttons --- */
[data-theme="dark"] #addQuestionBtn {
  border-color: #34d399 !important;
  color: #34d399 !important;
}

[data-theme="dark"] #editQuestionsBtn {
  border-color: #f472b6 !important;
  color: #f472b6 !important;
}

/* --- Disallowed words heading --- */
[data-theme="dark"] h4[style*="color: #000"] {
  color: var(--color-text) !important;
}

/* --- PDF options --- */
[data-theme="dark"] span[style*="color: #374151"][style*="font-size: 14px"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] label[style*="color: #4b5563"] {
  color: var(--color-text-secondary) !important;
}

/* --- Report button --- */
[data-theme="dark"] #reportBtn {
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}

/* --- Feedback section --- */
[data-theme="dark"] h3[style*="color: #374151"][style*="font-size: 18px"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] span[style*="color: #4b5563"][style*="font-weight: 500"] {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] #feedbackComment {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* --- Feedback thank you --- */
[data-theme="dark"] #feedbackThankYou h4[style*="color: #059669"] {
  color: #34d399 !important;
}

[data-theme="dark"] #feedbackThankYou p[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* --- Results footer --- */
[data-theme="dark"] footer[style*="color: #9ca3af"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] footer span[style*="color: #d1d5db"] {
  color: var(--color-border) !important;
}

/* --- Underline legend color reference --- */
[data-theme="dark"] u[style*="text-decoration-color: #dc9435"] {
  text-decoration-color: var(--color-primary) !important;
}

/* ============================================================
   ASSESSMENT V2 PAGE — Dark Mode Overrides for inline styles
   Covers assessment-v2.html + JS-generated content
   ============================================================ */

/* --- Save modal buttons --- */
[data-theme="dark"] #cancelNewBtn {
  background: #4b5563 !important;
}

/* --- Word rating popup info text --- */
[data-theme="dark"] .popup-info[style*="color: #9ca3af"] {
  color: var(--color-text-muted) !important;
}

/* --- Loading screens --- */
[data-theme="dark"] .assessment-loading h2[style*="color: #374151"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] .assessment-loading p[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #loadingTimer {
  color: var(--color-primary) !important;
}

[data-theme="dark"] p[style*="color: #9ca3af"][style*="font-style: italic"] {
  color: var(--color-text-muted) !important;
}

/* --- Assessment slow warning (JS-generated) --- */
[data-theme="dark"] p[style*="color: #92400e"][style*="font-size: 13px"] {
  color: var(--color-warning) !important;
}

/* --- Results summary counts --- */
[data-theme="dark"] span[style*="color: #22c55e"] {
  color: #4ade80 !important;
}

[data-theme="dark"] span[style*="color: #f59e0b"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] span[style*="color: #ef4444"] {
  color: #f87171 !important;
}

/* --- Results advice text --- */
[data-theme="dark"] p[style*="color: #64748b"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] p[data-show-for][style*="color: #374151"] {
  color: var(--color-text-secondary) !important;
}

/* --- Share results modal --- */
[data-theme="dark"] p[style*="color:#6b7280"] {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] #shareResultsContent {
  border-color: var(--color-border) !important;
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] #closeShareModalBtn {
  color: var(--color-text-muted) !important;
}

/* --- Share content (JS-generated) --- */
[data-theme="dark"] p[style*="color:#111827"] {
  color: var(--color-text) !important;
}

[data-theme="dark"] p[style*="color:#374151"] {
  color: var(--color-text-secondary) !important;
}

/* --- No results placeholder text (JS-generated) --- */
[data-theme="dark"] .mastered-container span[style*="color: #6b7280"],
[data-theme="dark"] .focus-container span[style*="color: #6b7280"] {
  color: var(--color-text-muted) !important;
}

/* ============================================================
   REMAINING PAGES — Minor inline style overrides
   story-view (shares IDs with results), library, world, referrals
   ============================================================ */

/* --- Library story count --- */
[data-theme="dark"] #storyCount {
  color: var(--color-text-muted) !important;
}

/* --- Library empty state CTA button --- */
[data-theme="dark"] .library-empty a[style*="background: #dc9435"] {
  background: var(--color-primary) !important;
}

/* --- World custom words editor --- */
[data-theme="dark"] #customWordsEditor {
  border-color: var(--color-border) !important;
  background: var(--color-bg-subtle) !important;
}

[data-theme="dark"] #customWordsEditor + p[style*="color: #6b7280"],
[data-theme="dark"] p[style*="color: #6b7280"][style*="font-size: 13px"] {
  color: var(--color-text-muted) !important;
}

/* --- Referrals leaderboard loading --- */
[data-theme="dark"] .referrals-section p[style*="color: #9ca3af"] {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   High-Contrast Color Blind Mode — Progress & App UI
   ========================================================================== */

/* Level badge colors: green→blue, red kept but darkened */
[data-a11y="high-contrast"] {
  --badge-not-started: #b91c1c;
  --badge-mastered: #2563eb;
}

/* Toggle buttons: mastered green→blue, not-learned red→magenta */
[data-a11y="high-contrast"] .toggle-option.active-mastered {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

[data-a11y="high-contrast"] .toggle-option.active-notlearned {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
  box-shadow: 0 2px 4px rgba(190, 24, 93, 0.3);
}

/* Bulk action buttons */
[data-a11y="high-contrast"] .bulk-unknown:hover {
  border-color: #be185d;
  background: #fce7f3;
}

[data-a11y="high-contrast"] .bulk-known:hover {
  border-color: #2563eb;
  background: #dbeafe;
}

/* Mastered pattern chips (green→blue) */
[data-a11y="high-contrast"] span[style*="background: #dcfce7"] {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

/* Trouble word chips (red→magenta) */
[data-a11y="high-contrast"] span[style*="background: #fef2f2"],
[data-a11y="high-contrast"] span[style*="background: #fee2e2"] {
  background: #fce7f3 !important;
  color: #9d174d !important;
  border-color: #f9a8d4 !important;
}

/* Assessment status colors */
[data-a11y="high-contrast"] span[style*="color: #10b981"],
[data-a11y="high-contrast"] span[style*="color: #22c55e"] {
  color: #2563eb !important;
}

[data-a11y="high-contrast"] span[style*="color: #ef4444"],
[data-a11y="high-contrast"] span[style*="color: #dc2626"] {
  color: #be185d !important;
}

/* --- Legend icons/labels: green→blue, red→magenta --- */
[data-a11y="high-contrast"] .legend-unknown .legend-icon,
[data-a11y="high-contrast"] .legend-unknown .legend-label {
  color: #be185d;
}
[data-a11y="high-contrast"] .legend-known .legend-icon,
[data-a11y="high-contrast"] .legend-known .legend-label {
  color: #2563eb;
}

/* --- Bulk buttons: base state colors --- */
[data-a11y="high-contrast"] .bulk-unknown {
  color: #be185d;
  border-color: #f9a8d4;
}
[data-a11y="high-contrast"] .bulk-known {
  color: #2563eb;
  border-color: #93c5fd;
}

/* --- JS-generated green success text (all element types) --- */
[data-a11y="high-contrast"] span[style*="color: #059669"],
[data-a11y="high-contrast"] div[style*="color: #059669"],
[data-a11y="high-contrast"] strong[style*="color: #059669"],
[data-a11y="high-contrast"] p[style*="color: #059669"] {
  color: #2563eb !important;
}
[data-a11y="high-contrast"] span[style*="color: #16a34a"],
[data-a11y="high-contrast"] strong[style*="color: #16a34a"] {
  color: #2563eb !important;
}
[data-a11y="high-contrast"] span[style*="color: #166534"] {
  color: #1e40af !important;
}
[data-a11y="high-contrast"] p[style*="color: #065f46"] {
  color: #1e3a5f !important;
}

/* --- JS-generated red error/danger text --- */
[data-a11y="high-contrast"] p[style*="color: #dc2626"],
[data-a11y="high-contrast"] span[style*="color: #dc2626"],
[data-a11y="high-contrast"] a[style*="color: #dc2626"] {
  color: #be185d !important;
}
[data-a11y="high-contrast"] p[style*="color: #ef4444"],
[data-a11y="high-contrast"] span[style*="color: #ef4444"] {
  color: #be185d !important;
}
[data-a11y="high-contrast"] span[style*="color:#dc2626"] {
  color: #be185d !important;
}

/* --- Level-up readiness panel (green box → blue) --- */
[data-a11y="high-contrast"] div[style*="background: #ecfdf5"] {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}
[data-a11y="high-contrast"] div[style*="background: #ecfdf5"] strong[style*="color: #059669"] {
  color: #1d4ed8 !important;
}
[data-a11y="high-contrast"] div[style*="background: #ecfdf5"] p[style*="color: #065f46"] {
  color: #1e3a5f !important;
}

/* --- Teacher prompt tip box (green gradient → blue) --- */
[data-a11y="high-contrast"] .panel [style*="background: linear-gradient(135deg, #ecfdf5"] {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: #2563eb !important;
}
[data-a11y="high-contrast"] .panel [style*="background: linear-gradient(135deg, #ecfdf5"] p {
  color: #1e3a5f !important;
}

/* --- Progress bar fills (green→blue, red→magenta) --- */
[data-a11y="high-contrast"] div[style*="background: #10b981"] {
  background: #2563eb !important;
}
[data-a11y="high-contrast"] div[style*="background: #ef4444"] {
  background: #be185d !important;
}

/* --- Curriculum status backgrounds (green→blue, red→magenta) --- */
[data-a11y="high-contrast"] div[style*="background: #ecfdf5"],
[data-a11y="high-contrast"] td[style*="background: #ecfdf5"] {
  background: #eff6ff !important;
}
[data-a11y="high-contrast"] td[style*="background: #fef2f2"] {
  background: #fff1f2 !important;
}

/* --- Curriculum border colors (green→blue) --- */
[data-a11y="high-contrast"] div[style*="border-color: #10b981"],
[data-a11y="high-contrast"] div[style*="border: 1px solid #10b981"],
[data-a11y="high-contrast"] div[style*="border: 2px solid #10b981"] {
  border-color: #2563eb !important;
}

/* --- Curriculum reset button (red→magenta) --- */
[data-a11y="high-contrast"] button[style*="background: #ef4444"] {
  background: #be185d !important;
}

/* --- Red error text in curriculum/matrix --- */
[data-a11y="high-contrast"] button[style*="color: #ef4444"],
[data-a11y="high-contrast"] button[style*="border: 1px solid #fca5a5"] {
  color: #be185d !important;
  border-color: #f9a8d4 !important;
}

/* --- Results summary counts (green/red → blue/magenta) --- */
[data-a11y="high-contrast"] span[style*="color: #4ade80"] {
  color: #60a5fa !important;
}
[data-a11y="high-contrast"] span[style*="color: #f87171"] {
  color: #f472b6 !important;
}

/* --- Feedback thank you green → blue --- */
[data-a11y="high-contrast"] #feedbackThankYou h4[style*="color: #059669"] {
  color: #2563eb !important;
}

/* --- Password change error (red→magenta) --- */
[data-a11y="high-contrast"] #changePasswordError {
  background: #fce7f3 !important;
  border-color: #be185d !important;
  color: #9d174d !important;
}

/* --- Delete account warning (red→magenta) --- */
[data-a11y="high-contrast"] p[style*="color: #b91c1c"] {
  color: #9d174d !important;
}

/* ==========================================================================
   Dark + High-Contrast Combined — Progress & App UI
   ========================================================================== */

[data-theme="dark"][data-a11y="high-contrast"] div[style*="background: #ecfdf5"] {
  background: #172554 !important;
  border-color: #3b82f6 !important;
}
[data-theme="dark"][data-a11y="high-contrast"] div[style*="background: #ecfdf5"] strong[style*="color: #059669"] {
  color: #60a5fa !important;
}
[data-theme="dark"][data-a11y="high-contrast"] div[style*="background: #ecfdf5"] p[style*="color: #065f46"] {
  color: #93c5fd !important;
}

[data-theme="dark"][data-a11y="high-contrast"] span[style*="background: #dcfce7"] {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}

[data-theme="dark"][data-a11y="high-contrast"] div[style*="background: #10b981"] {
  background: #3b82f6 !important;
}
[data-theme="dark"][data-a11y="high-contrast"] div[style*="background: #ef4444"] {
  background: #ec4899 !important;
}

[data-theme="dark"][data-a11y="high-contrast"] span[style*="color: #059669"],
[data-theme="dark"][data-a11y="high-contrast"] strong[style*="color: #059669"],
[data-theme="dark"][data-a11y="high-contrast"] div[style*="color: #059669"] {
  color: #60a5fa !important;
}

[data-theme="dark"][data-a11y="high-contrast"] #changePasswordError {
  background: #4a1942 !important;
  border-color: #ec4899 !important;
  color: #f472b6 !important;
}

[data-theme="dark"][data-a11y="high-contrast"] td[style*="background: #ecfdf5"] {
  background: #172554 !important;
}
[data-theme="dark"][data-a11y="high-contrast"] td[style*="background: #fef2f2"] {
  background: #4a1942 !important;
}