:root {
  --bg-page: #f5f7fc;
  --bg-page-accent: #dfe7ff;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #f8fafc;
  --bg-subtle: #eef2f7;
  --bg-panel: rgba(255, 255, 255, 0.95);
  --text-primary: #162033;
  --text-secondary: #475569;
  --text-muted: #6b7280;
  --border-default: #d9e2ec;
  --border-strong: #cbd5e1;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #e6ebff;
  --success: #059669;
  --success-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --overlay: rgba(15, 23, 42, 0.48);
  --shadow-rgb: 15, 23, 42;
  --page-gradient: linear-gradient(135deg, var(--bg-page-accent) 0%, var(--bg-page) 100%);
  --surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  --header-gradient: linear-gradient(135deg, #667eea 0%, #7c3aed 100%);
}

html[data-theme="dark"] {
  --bg-page: #0a1220;
  --bg-page-accent: #111d34;
  --bg-surface: #101b2d;
  --bg-elevated: #14233a;
  --bg-muted: #162437;
  --bg-subtle: #1d2d45;
  --bg-panel: rgba(16, 27, 45, 0.94);
  --text-primary: #edf3ff;
  --text-secondary: #b7c4db;
  --text-muted: #8ea1c0;
  --border-default: #2b3c59;
  --border-strong: #3d4f6e;
  --accent: #8a95ff;
  --accent-hover: #a5b0ff;
  --accent-soft: rgba(138, 149, 255, 0.18);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.16);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.18);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.18);
  --overlay: rgba(2, 6, 23, 0.72);
  --shadow-rgb: 2, 6, 23;
  --page-gradient: linear-gradient(135deg, var(--bg-page) 0%, #121b31 100%);
  --surface-gradient: linear-gradient(180deg, rgba(16, 27, 45, 0.98) 0%, rgba(20, 35, 58, 0.98) 100%);
  --header-gradient: linear-gradient(135deg, #283f71 0%, #47265f 100%);
  background: var(--bg-page);
}

html[data-theme="dark"] body.theme-page {
  background: var(--page-gradient) !important;
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] body.theme-page,
html[data-theme="dark"] body.theme-page input,
html[data-theme="dark"] body.theme-page select,
html[data-theme="dark"] body.theme-page textarea {
  color: var(--text-primary);
}

html[data-theme="dark"] body.theme-page ::selection {
  background: rgba(79, 70, 229, 0.28);
}

html[data-theme="dark"] body.theme-page a {
  color: var(--accent);
}

html[data-theme="dark"] body.theme-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] body.theme-page select,
html[data-theme="dark"] body.theme-page textarea {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-default);
  caret-color: var(--accent);
}

html[data-theme="dark"] body.theme-page input::placeholder,
html[data-theme="dark"] body.theme-page textarea::placeholder {
  color: var(--text-muted);
}

html[data-theme="dark"] body.theme-page input:focus,
html[data-theme="dark"] body.theme-page select:focus,
html[data-theme="dark"] body.theme-page textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16) !important;
}

html[data-theme="dark"] body.theme-page .container,
html[data-theme="dark"] body.theme-page .wrap,
html[data-theme="dark"] body.theme-page .main-content,
html[data-theme="dark"] body.theme-page .main-panel-wrapper,
html[data-theme="dark"] body.theme-page .login-container,
html[data-theme="dark"] body.theme-page .card,
html[data-theme="dark"] body.theme-page .item,
html[data-theme="dark"] body.theme-page .section,
html[data-theme="dark"] body.theme-page .sidebar,
html[data-theme="dark"] body.theme-page .content,
html[data-theme="dark"] body.theme-page .content-area,
html[data-theme="dark"] body.theme-page .post-card,
html[data-theme="dark"] body.theme-page .module,
html[data-theme="dark"] body.theme-page .folder-card,
html[data-theme="dark"] body.theme-page .audio-folder,
html[data-theme="dark"] body.theme-page .comment-form,
html[data-theme="dark"] body.theme-page .comments-section,
html[data-theme="dark"] body.theme-page .recording-section,
html[data-theme="dark"] body.theme-page .recording-status,
html[data-theme="dark"] body.theme-page .upload-section,
html[data-theme="dark"] body.theme-page .file-preview,
html[data-theme="dark"] body.theme-page .vocab-item,
html[data-theme="dark"] body.theme-page .small-ex-card,
html[data-theme="dark"] body.theme-page .sentence-card,
html[data-theme="dark"] body.theme-page .review-tree-l1-header,
html[data-theme="dark"] body.theme-page .review-tree-l2-header,
html[data-theme="dark"] body.theme-page .review-tree-l3,
html[data-theme="dark"] body.theme-page .review-tree-record {
  border-color: var(--border-default);
}

html[data-theme="dark"] body.theme-page .modal,
html[data-theme="dark"] body.theme-page #textModal,
html[data-theme="dark"] body.theme-page #uploadModal,
html[data-theme="dark"] body.theme-page .image-lightbox,
html[data-theme="dark"] body.theme-page .image-modal,
html[data-theme="dark"] body.theme-page .review-overlay,
html[data-theme="dark"] body.theme-page .modal-overlay {
  background: var(--overlay);
}

html[data-theme="dark"] body.theme-page .modal-content,
html[data-theme="dark"] body.theme-page #textModal .modal-content,
html[data-theme="dark"] body.theme-page .export-menu,
html[data-theme="dark"] body.theme-page .image-lightbox img,
html[data-theme="dark"] body.theme-page .challenge-alert,
html[data-theme="dark"] body.theme-page #vocabPopover,
html[data-theme="dark"] body.theme-page .login-container,
html[data-theme="dark"] body.theme-page .main-panel-wrapper,
html[data-theme="dark"] body.theme-page .review-overlay-body,
html[data-theme="dark"] body.theme-page .review-overlay-header,
html[data-theme="dark"] body.theme-page .review-overlay-tabs,
html[data-theme="dark"] body.theme-page .highlights-panel,
html[data-theme="dark"] body.theme-page #playerBar,
html[data-theme="dark"] body.theme-page #topBar,
html[data-theme="dark"] body.theme-page .theme-surface {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), 0.28);
}

html[data-theme="dark"] body.theme-page code,
html[data-theme="dark"] body.theme-page pre,
html[data-theme="dark"] body.theme-page .hljs {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.theme-page ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark"] body.theme-page ::-webkit-scrollbar-track {
  background: transparent;
}

html[data-theme="dark"] body.theme-page ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.theme-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), 0.2);
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .theme-switcher {
  background: rgba(16, 27, 45, 0.78);
  border-color: rgba(61, 79, 110, 0.85);
}

.theme-switcher__btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-switcher__btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.theme-switcher__btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.22);
}

#themeSwitcherMount {
  display: flex;
  justify-content: flex-end;
}

body.page-modules #themeSwitcherMount .theme-switcher {
  margin-top: 10px;
}

.app-shell-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), 0.08);
  backdrop-filter: blur(16px);
}

body.has-app-shell {
  padding-top: 56px !important;
}

html[data-theme="dark"] .app-shell-nav {
  background: rgba(16, 27, 45, 0.92);
}

.app-shell-brand {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0;
}

.app-shell-links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-shell-links::-webkit-scrollbar {
  display: none;
}

.app-shell-link {
  flex: 0 0 auto;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 8px;
}

.app-shell-link:hover,
.app-shell-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.app-shell-user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.app-shell-logout {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.app-shell-logout:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ielts-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.ielts-toast {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), 0.18);
  font-size: 13px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ielts-toast--success {
  border-color: var(--success);
  background: var(--success-soft);
}

.ielts-toast--error {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.ielts-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

@media (max-width: 640px) {
  .app-shell-nav {
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .app-shell-user__name {
    display: none;
  }

  #themeSwitcherMount {
    justify-content: flex-start;
  }

  body.page-modules #themeSwitcherMount .theme-switcher {
    margin-top: 8px;
    transform: scale(0.96);
    transform-origin: top left;
  }
}

html[data-theme="dark"] body.theme-page.page-writing-practice {
  --bg: var(--bg-page);
  --card: var(--bg-surface);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-muted);
  --accent: var(--accent);
  --accent-light: var(--accent-soft);
  --accent-hover: var(--accent-hover);
  --green: var(--success);
  --green-light: var(--success-soft);
  --amber: var(--warning);
  --amber-light: var(--warning-soft);
  --red: var(--danger);
  --red-light: var(--danger-soft);
  --shadow: 0 6px 24px rgba(var(--shadow-rgb), 0.18);
  --shadow-lg: 0 18px 42px rgba(var(--shadow-rgb), 0.26);
  --progress-bg-start: rgba(59, 130, 246, 0.12);
  --progress-bg-end: rgba(14, 165, 233, 0.18);
  --progress-border: rgba(96, 165, 250, 0.42);
  --surface-soft: #162437;
  --surface-soft-border: #2b3c59;
  --surface-soft-hover: #1b304b;
  --tag-blue-bg: rgba(59, 130, 246, 0.18);
  --tag-blue-text: #bfdbfe;
  --tag-orange-bg: rgba(249, 115, 22, 0.18);
  --tag-orange-text: #fdba74;
  --tag-green-bg: rgba(16, 185, 129, 0.18);
  --tag-green-text: #86efac;
  --tag-pink-bg: rgba(236, 72, 153, 0.18);
  --tag-pink-text: #f9a8d4;
  --tag-indigo-bg: rgba(99, 102, 241, 0.18);
  --tag-indigo-text: #c7d2fe;
  --tag-yellow-bg: rgba(245, 158, 11, 0.18);
  --tag-yellow-text: #fcd34d;
  --tag-purple-bg: rgba(168, 85, 247, 0.18);
  --tag-purple-text: #e9d5ff;
  --tag-teal-bg: rgba(20, 184, 166, 0.18);
  --tag-teal-text: #99f6e4;
  --tag-sky-bg: rgba(14, 165, 233, 0.18);
  --tag-sky-text: #bae6fd;
  --tag-rose-bg: rgba(244, 63, 94, 0.18);
  --tag-rose-text: #fecdd3;
  --tag-lime-bg: rgba(132, 204, 22, 0.18);
  --tag-lime-text: #bef264;
  --tag-fuchsia-bg: rgba(217, 70, 239, 0.18);
  --tag-fuchsia-text: #f5d0fe;
}

html[data-theme="dark"] body.page-writing-practice .main-panel-wrapper,
html[data-theme="dark"] body.page-audio-transcription .container,
html[data-theme="dark"] body.page-login .login-container,
html[data-theme="dark"] body.page-modules .wrap,
html[data-theme="dark"] body.page-speaking .container,
html[data-theme="dark"] body.page-combined .container,
html[data-theme="dark"] body.page-reading .container,
html[data-theme="dark"] body.page-vocabulary .main-content,
html[data-theme="dark"] body.page-intensive .container,
html[data-theme="dark"] body.page-intensive-new .container,
html[data-theme="dark"] body.page-vocab-summary .container,
html[data-theme="dark"] body.page-message-board .container,
html[data-theme="dark"] body.page-study-techniques .container {
  background: var(--surface-gradient) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  box-shadow: 0 20px 48px rgba(var(--shadow-rgb), 0.26);
}

html[data-theme="dark"] body.page-vocabulary .word-card,
html[data-theme="dark"] body.page-vocabulary .subcategory-link,
html[data-theme="dark"] body.page-vocabulary .quick-add,
html[data-theme="dark"] body.page-vocabulary .quick-input,
html[data-theme="dark"] body.page-vocabulary .sort-select,
html[data-theme="dark"] body.page-vocabulary .sort-label,
html[data-theme="dark"] body.page-vocabulary .word-title,
html[data-theme="dark"] body.page-vocabulary .word-meaning,
html[data-theme="dark"] body.page-vocabulary .word-meta,
html[data-theme="dark"] body.page-vocabulary .audio-status,
html[data-theme="dark"] body.page-vocabulary .subcategory-name,
html[data-theme="dark"] body.page-vocabulary .subcategory-count,
html[data-theme="dark"] body.page-vocabulary .subcategory-action,
html[data-theme="dark"] body.page-vocabulary .word-action-btn {
  color: var(--text-primary);
}

html[data-theme="dark"] body.page-modules h1,
html[data-theme="dark"] body.page-speaking h2,
html[data-theme="dark"] body.page-reading h2,
html[data-theme="dark"] body.page-combined .header h2,
html[data-theme="dark"] body.page-login .login-title,
html[data-theme="dark"] body.page-intensive h2,
html[data-theme="dark"] body.page-intensive-new h2,
html[data-theme="dark"] body.page-vocab-summary .header .title,
html[data-theme="dark"] body.page-study-techniques .header h1,
html[data-theme="dark"] body.page-message-board .header h1 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-modules .card,
html[data-theme="dark"] body.page-speaking .audio-folder,
html[data-theme="dark"] body.page-combined .folder-card,
html[data-theme="dark"] body.page-reading .card,
html[data-theme="dark"] body.page-reading .item,
html[data-theme="dark"] body.page-vocabulary .sidebar,
html[data-theme="dark"] body.page-vocabulary .tab.active,
html[data-theme="dark"] body.page-vocabulary .word-item-card,
html[data-theme="dark"] body.page-intensive .section,
html[data-theme="dark"] body.page-intensive .viewer,
html[data-theme="dark"] body.page-intensive .viewer .header,
html[data-theme="dark"] body.page-intensive .viewer-body .content > .reader,
html[data-theme="dark"] body.page-intensive .highlights-panel,
html[data-theme="dark"] body.page-vocab-summary .sidebar,
html[data-theme="dark"] body.page-vocab-summary .content,
html[data-theme="dark"] body.page-vocab-summary .article-item,
html[data-theme="dark"] body.page-vocab-summary .vocab-item,
html[data-theme="dark"] body.page-message-board .post-card,
html[data-theme="dark"] body.page-message-board .comments-section,
html[data-theme="dark"] body.page-message-board .comment-form,
html[data-theme="dark"] body.page-study-techniques .module,
html[data-theme="dark"] body.page-study-techniques .item,
html[data-theme="dark"] body.page-audio-transcription .mode-selector,
html[data-theme="dark"] body.page-audio-transcription .recording-section,
html[data-theme="dark"] body.page-audio-transcription .recording-status,
html[data-theme="dark"] body.page-audio-transcription .audio-preview,
html[data-theme="dark"] body.page-audio-transcription .upload-section,
html[data-theme="dark"] body.page-listening #playerBar,
html[data-theme="dark"] body.page-listening #topBar,
html[data-theme="dark"] body.page-listening #vocabPopover {
  background: var(--bg-surface) !important;
  color: var(--text-primary);
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-modules .card,
html[data-theme="dark"] body.page-speaking .audio-folder,
html[data-theme="dark"] body.page-reading .card,
html[data-theme="dark"] body.page-reading .item,
html[data-theme="dark"] body.page-intensive .card,
html[data-theme="dark"] body.page-study-techniques .module,
html[data-theme="dark"] body.page-study-techniques .item {
  background: var(--bg-muted) !important;
}

html[data-theme="dark"] body.page-modules .card.speaking,
html[data-theme="dark"] body.page-modules .card.reading,
html[data-theme="dark"] body.page-modules .card.combined,
html[data-theme="dark"] body.page-combined .category-title,
html[data-theme="dark"] body.page-intensive .hp-item,
html[data-theme="dark"] body.page-speaking .audio-text-content,
html[data-theme="dark"] body.page-speaking .audio-question,
html[data-theme="dark"] body.page-reading .tag,
html[data-theme="dark"] body.page-reading .badge,
html[data-theme="dark"] body.page-vocab-summary .article-item.active,
html[data-theme="dark"] body.page-vocab-summary .challenge-header,
html[data-theme="dark"] body.page-audio-transcription .mode-btn.active,
html[data-theme="dark"] body.page-study-techniques .category-tab.active,
html[data-theme="dark"] body.page-message-board .header,
html[data-theme="dark"] body.page-audio-transcription .header {
  background: var(--accent-soft) !important;
}

html[data-theme="dark"] body.page-message-board .header,
html[data-theme="dark"] body.page-audio-transcription .header,
html[data-theme="dark"] body.page-vocabulary .header,
html[data-theme="dark"] body.page-vocab-summary .challenge-header,
html[data-theme="dark"] body.page-login .logo,
html[data-theme="dark"] body.page-combined .category-btn.active,
html[data-theme="dark"] body.page-study-techniques .category-tab.active,
html[data-theme="dark"] body.page-combined .generate-btn,
html[data-theme="dark"] body.page-audio-transcription .record-btn.primary {
  background-image: var(--header-gradient) !important;
}

html[data-theme="dark"] body.page-vocabulary .header,
html[data-theme="dark"] body.page-vocabulary .header h1,
html[data-theme="dark"] body.page-vocabulary .header p,
html[data-theme="dark"] body.page-vocabulary .header kbd,
html[data-theme="dark"] body.page-vocabulary .back-btn,
html[data-theme="dark"] body.page-audio-transcription .header,
html[data-theme="dark"] body.page-audio-transcription .header h1,
html[data-theme="dark"] body.page-audio-transcription .header p,
html[data-theme="dark"] body.page-audio-transcription .back-btn,
html[data-theme="dark"] body.page-message-board .header,
html[data-theme="dark"] body.page-message-board .header h1,
html[data-theme="dark"] body.page-message-board .user-info,
html[data-theme="dark"] body.page-message-board .new-post-btn,
html[data-theme="dark"] body.page-message-board .back-btn {
  color: #fff !important;
}

html[data-theme="dark"] body.page-vocabulary .back-btn,
html[data-theme="dark"] body.page-message-board .new-post-btn,
html[data-theme="dark"] body.page-message-board .back-btn,
html[data-theme="dark"] body.page-audio-transcription .back-btn {
  border-color: rgba(255, 255, 255, 0.32) !important;
}

html[data-theme="dark"] body.page-audio-transcription .mode-btn.active {
  background-image: var(--header-gradient) !important;
  color: #fff !important;
}

html[data-theme="dark"] body.page-modules .title,
html[data-theme="dark"] body.page-modules .desc,
html[data-theme="dark"] body.page-modules #userDisplay span,
html[data-theme="dark"] body.page-speaking label,
html[data-theme="dark"] body.page-speaking .audio-list h3,
html[data-theme="dark"] body.page-speaking .audio-file span,
html[data-theme="dark"] body.page-combined .folder-name,
html[data-theme="dark"] body.page-combined .folder-info,
html[data-theme="dark"] body.page-reading .user-info,
html[data-theme="dark"] body.page-reading .card h3,
html[data-theme="dark"] body.page-reading .btn.outline,
html[data-theme="dark"] body.page-vocabulary .sort-subcategories-select,
html[data-theme="dark"] body.page-vocabulary .tab,
html[data-theme="dark"] body.page-vocabulary .sidebar *,
html[data-theme="dark"] body.page-intensive .muted,
html[data-theme="dark"] body.page-intensive .muted,
html[data-theme="dark"] body.page-intensive .viewer .title,
html[data-theme="dark"] body.page-vocab-summary .article-meta,
html[data-theme="dark"] body.page-vocab-summary .vocab-meaning,
html[data-theme="dark"] body.page-message-board .post-time,
html[data-theme="dark"] body.page-message-board .post-content,
html[data-theme="dark"] body.page-study-techniques .module-title,
html[data-theme="dark"] body.page-study-techniques .word-primary,
html[data-theme="dark"] body.page-study-techniques .word-group-title,
html[data-theme="dark"] body.page-audio-transcription .recording-text,
html[data-theme="dark"] body.page-audio-transcription .recording-hint,
html[data-theme="dark"] body.page-listening .translation-line {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-modules .title,
html[data-theme="dark"] body.page-speaking h2,
html[data-theme="dark"] body.page-reading .card h3,
html[data-theme="dark"] body.page-vocabulary .header h1,
html[data-theme="dark"] body.page-intensive h2,
html[data-theme="dark"] body.page-intensive .viewer .title,
html[data-theme="dark"] body.page-vocab-summary .article-title,
html[data-theme="dark"] body.page-vocab-summary .vocab-word,
html[data-theme="dark"] body.page-message-board .user-name,
html[data-theme="dark"] body.page-study-techniques .module-title,
html[data-theme="dark"] body.page-audio-transcription .header h1,
html[data-theme="dark"] body.page-listening .lyrics-line.active .line-text {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-listening .lyrics-line .line-text {
  color: var(--text-secondary);
}

html[data-theme="dark"] body.page-listening .lyrics-line.active {
  background: rgba(55, 120, 255, 0.18);
  border-left-color: var(--accent);
}

html[data-theme="dark"] body.page-listening .lyrics-line.starred:not(.active) {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), transparent 60%);
}

html[data-theme="dark"] body.page-listening .lyrics-line.active.starred {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2) 0%, rgba(55, 120, 255, 0.18) 40%);
}

html[data-theme="dark"] body.page-listening #topBar,
html[data-theme="dark"] body.page-listening #playerBar {
  background: rgba(10, 18, 32, 0.82) !important;
  border-color: rgba(61, 79, 110, 0.65) !important;
}

html[data-theme="dark"] body.page-listening #uploadModal > div,
html[data-theme="dark"] body.page-listening #vocabPopover,
html[data-theme="dark"] body.page-listening #toast {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-listening #toast {
  background: #0f172a !important;
}

html[data-theme="dark"] body.page-listening #projectGrid > div,
html[data-theme="dark"] body.page-listening #lyricsContainer > div,
html[data-theme="dark"] body.page-listening .speed-btn,
html[data-theme="dark"] body.page-listening .modal-tab,
html[data-theme="dark"] body.page-listening #selectionBadge button {
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-listening #projectGrid > div {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-listening .text-slate-800,
html[data-theme="dark"] body.page-listening .text-slate-700,
html[data-theme="dark"] body.page-listening .text-slate-600,
html[data-theme="dark"] body.page-listening .text-slate-500,
html[data-theme="dark"] body.page-listening .text-slate-400 {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-listening .bg-white,
html[data-theme="dark"] body.page-listening .bg-slate-50,
html[data-theme="dark"] body.page-listening .bg-slate-100 {
  background: var(--bg-surface) !important;
}

html[data-theme="dark"] body.page-listening .border-slate-200,
html[data-theme="dark"] body.page-listening .border-slate-300 {
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-listening .hover\:bg-slate-100:hover,
html[data-theme="dark"] body.page-listening .hover\:bg-slate-200:hover,
html[data-theme="dark"] body.page-listening .hover\:bg-blue-50:hover {
  background: var(--bg-subtle) !important;
}

html[data-theme="dark"] body.page-listening .bg-blue-50,
html[data-theme="dark"] body.page-listening .bg-blue-100 {
  background: var(--accent-soft) !important;
}

html[data-theme="dark"] body.page-listening .bg-emerald-50 {
  background: rgba(52, 211, 153, 0.16) !important;
}

html[data-theme="dark"] body.page-listening .bg-amber-50 {
  background: rgba(245, 158, 11, 0.16) !important;
}

html[data-theme="dark"] body.page-listening .bg-red-50 {
  background: rgba(248, 113, 113, 0.16) !important;
}

html[data-theme="dark"] body.page-listening .bg-purple-50 {
  background: rgba(168, 85, 247, 0.16) !important;
}

html[data-theme="dark"] body.page-listening .text-emerald-600 {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body.page-listening .text-amber-600,
html[data-theme="dark"] body.page-listening .text-amber-500 {
  color: #fbbf24 !important;
}

html[data-theme="dark"] body.page-listening .text-red-600 {
  color: #fca5a5 !important;
}

html[data-theme="dark"] body.page-listening .text-purple-600 {
  color: #d8b4fe !important;
}

html[data-theme="dark"] body.theme-page [style*="background:#fff"],
html[data-theme="dark"] body.theme-page [style*="background: #fff"],
html[data-theme="dark"] body.theme-page [style*="background:white"],
html[data-theme="dark"] body.theme-page [style*="background: white"] {
  background: var(--bg-surface) !important;
}

html[data-theme="dark"] body.theme-page [style*="background:#f8fafc"],
html[data-theme="dark"] body.theme-page [style*="background: #f8fafc"],
html[data-theme="dark"] body.theme-page [style*="background:#fafafa"],
html[data-theme="dark"] body.theme-page [style*="background: #fafafa"],
html[data-theme="dark"] body.theme-page [style*="background:#f9fafb"],
html[data-theme="dark"] body.theme-page [style*="background: #f9fafb"],
html[data-theme="dark"] body.theme-page [style*="background:#f3f4f6"],
html[data-theme="dark"] body.theme-page [style*="background: #f3f4f6"],
html[data-theme="dark"] body.theme-page [style*="background:#f4f8ff"],
html[data-theme="dark"] body.theme-page [style*="background: #f4f8ff"] {
  background: var(--bg-muted) !important;
}

html[data-theme="dark"] body.theme-page [style*="background:#eef2ff"],
html[data-theme="dark"] body.theme-page [style*="background: #eef2ff"],
html[data-theme="dark"] body.theme-page [style*="background:#f0f9ff"],
html[data-theme="dark"] body.theme-page [style*="background: #f0f9ff"],
html[data-theme="dark"] body.theme-page [style*="background:#e0f2fe"],
html[data-theme="dark"] body.theme-page [style*="background: #e0f2fe"] {
  background: var(--accent-soft) !important;
}

html[data-theme="dark"] body.theme-page [style*="background:#fffbe6"],
html[data-theme="dark"] body.theme-page [style*="background: #fffbe6"],
html[data-theme="dark"] body.theme-page [style*="background:#fffbeb"],
html[data-theme="dark"] body.theme-page [style*="background: #fffbeb"],
html[data-theme="dark"] body.theme-page [style*="background:#fef3c7"],
html[data-theme="dark"] body.theme-page [style*="background: #fef3c7"] {
  background: var(--warning-soft) !important;
}

html[data-theme="dark"] body.theme-page [style*="background:#fef2f2"],
html[data-theme="dark"] body.theme-page [style*="background: #fef2f2"],
html[data-theme="dark"] body.theme-page [style*="background:#fee2e2"],
html[data-theme="dark"] body.theme-page [style*="background: #fee2e2"] {
  background: var(--danger-soft) !important;
}

html[data-theme="dark"] body.theme-page [style*="color:#111827"],
html[data-theme="dark"] body.theme-page [style*="color: #111827"],
html[data-theme="dark"] body.theme-page [style*="color:#1f2937"],
html[data-theme="dark"] body.theme-page [style*="color: #1f2937"],
html[data-theme="dark"] body.theme-page [style*="color:#374151"],
html[data-theme="dark"] body.theme-page [style*="color: #374151"],
html[data-theme="dark"] body.theme-page [style*="color:#333"],
html[data-theme="dark"] body.theme-page [style*="color: #333"],
html[data-theme="dark"] body.theme-page [style*="color:#2d3748"],
html[data-theme="dark"] body.theme-page [style*="color: #2d3748"] {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.theme-page [style*="color:#4a5568"],
html[data-theme="dark"] body.theme-page [style*="color: #4a5568"],
html[data-theme="dark"] body.theme-page [style*="color:#4b5563"],
html[data-theme="dark"] body.theme-page [style*="color: #4b5563"],
html[data-theme="dark"] body.theme-page [style*="color:#475569"],
html[data-theme="dark"] body.theme-page [style*="color: #475569"],
html[data-theme="dark"] body.theme-page [style*="color:#6b7280"],
html[data-theme="dark"] body.theme-page [style*="color: #6b7280"],
html[data-theme="dark"] body.theme-page [style*="color:#64748b"],
html[data-theme="dark"] body.theme-page [style*="color: #64748b"],
html[data-theme="dark"] body.theme-page [style*="color:#718096"],
html[data-theme="dark"] body.theme-page [style*="color: #718096"],
html[data-theme="dark"] body.theme-page [style*="color:#9ca3af"],
html[data-theme="dark"] body.theme-page [style*="color: #9ca3af"] {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.theme-page [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] body.theme-page [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] body.theme-page [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] body.theme-page [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] body.theme-page [style*="border: 1px solid #d1d5db"],
html[data-theme="dark"] body.theme-page [style*="border:1px solid #d1d5db"],
html[data-theme="dark"] body.theme-page [style*="border-left: 4px solid #4a90e2"],
html[data-theme="dark"] body.theme-page [style*="border-left:4px solid #4a90e2"] {
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-login .bg-circle {
  background: rgba(138, 149, 255, 0.1);
}

html[data-theme="dark"] body.page-login .register-link,
html[data-theme="dark"] body.page-login .form-input,
html[data-theme="dark"] body.page-modules .card,
html[data-theme="dark"] body.page-speaking .audio-text-content,
html[data-theme="dark"] body.page-speaking .audio-question,
html[data-theme="dark"] body.page-combined .folder-card,
html[data-theme="dark"] body.page-reading .card,
html[data-theme="dark"] body.page-reading .item,
html[data-theme="dark"] body.page-vocabulary .tabs,
html[data-theme="dark"] body.page-vocabulary .sidebar,
html[data-theme="dark"] body.page-intensive .card,
html[data-theme="dark"] body.page-intensive .section,
html[data-theme="dark"] body.page-vocab-summary .article-item,
html[data-theme="dark"] body.page-message-board .post-card,
html[data-theme="dark"] body.page-study-techniques .module,
html[data-theme="dark"] body.page-audio-transcription .recording-section {
  background: var(--bg-muted) !important;
}

html[data-theme="dark"] body.page-vocabulary .back-btn,
html[data-theme="dark"] body.page-message-board .write-comment-btn,
html[data-theme="dark"] body.page-study-techniques .back-btn,
html[data-theme="dark"] body.page-modules #userDisplay button,
html[data-theme="dark"] body.page-reading .btn.outline,
html[data-theme="dark"] body.page-speaking .view-text-btn,
html[data-theme="dark"] body.page-combined .back-btn,
html[data-theme="dark"] body.page-intensive .toolbar button,
html[data-theme="dark"] body.page-vocab-summary .btn,
html[data-theme="dark"] body.page-audio-transcription .record-btn.secondary {
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-vocabulary .tab.active,
html[data-theme="dark"] body.page-vocab-summary .btn.primary,
html[data-theme="dark"] body.page-intensive .toolbar .btn,
html[data-theme="dark"] body.page-intensive .action-btn.primary,
html[data-theme="dark"] body.page-intensive .vocab-btn.active,
html[data-theme="dark"] body.page-writing-practice .nav-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body.page-speaking audio,
html[data-theme="dark"] body.page-combined audio,
html[data-theme="dark"] body.page-intensive audio,
html[data-theme="dark"] body.page-audio-transcription audio {
  filter: brightness(0.9);
}

html[data-theme="dark"] body.page-vocabulary .subcategory-link {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 2px solid transparent !important;
}

html[data-theme="dark"] body.page-vocabulary .subcategory-link:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-muted) !important;
}

html[data-theme="dark"] body.page-vocabulary .subcategory-link.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
}

html[data-theme="dark"] body.page-vocabulary .subcategory-count,
html[data-theme="dark"] body.page-vocabulary .word-meta {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] body.page-vocabulary .quick-add {
  background: var(--bg-muted) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-vocabulary .quick-add:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] body.page-vocabulary .quick-input,
html[data-theme="dark"] body.page-vocabulary .sort-select {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
  box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.18) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 18px 36px rgba(var(--shadow-rgb), 0.24) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-card.playing {
  border-color: var(--success) !important;
  background: rgba(52, 211, 153, 0.12) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-card.favorited {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-card.favorited:hover {
  border-color: #fcd34d !important;
  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.18) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-meaning {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-vocabulary .word-action-btn {
  background: transparent !important;
}

html[data-theme="dark"] body.page-vocabulary .favorite-btn {
  color: #475569 !important;
}

html[data-theme="dark"] body.page-vocabulary .favorite-btn:hover {
  background: rgba(251, 191, 36, 0.16) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] body.page-vocabulary .favorite-btn.favorited {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.28) !important;
}

html[data-theme="dark"] body.page-vocabulary .delete-btn {
  color: #fca5a5 !important;
}

html[data-theme="dark"] body.page-vocabulary .delete-btn:hover {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] body.page-vocabulary .edit-subcategory-btn {
  background: #c2410c !important;
  color: #fff !important;
}

html[data-theme="dark"] body.page-vocabulary .edit-subcategory-btn:hover {
  background: #ea580c !important;
}

html[data-theme="dark"] body.page-vocabulary .delete-subcategory-btn {
  background: #b91c1c !important;
  color: #fff !important;
}

html[data-theme="dark"] body.page-vocabulary .delete-subcategory-btn:hover {
  background: #dc2626 !important;
}

html[data-theme="dark"] body.page-vocabulary .audio-status.audio-ready {
  color: #86efac !important;
}

html[data-theme="dark"] body.page-vocabulary .audio-status.audio-generating {
  color: #fbbf24 !important;
}

html[data-theme="dark"] body.page-writing-practice .review-fab {
  background: linear-gradient(135deg, #1d4ed8, #4338ca) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] body.page-writing-practice .image-upload-zone {
  background: var(--surface-soft) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .image-upload-zone:hover,
html[data-theme="dark"] body.page-writing-practice .image-upload-zone.dragover {
  background: var(--surface-soft-hover) !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] body.page-writing-practice .image-upload-zone.has-image {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] body.page-writing-practice .image-replace-btn {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
  box-shadow: 0 6px 16px rgba(var(--shadow-rgb), 0.12);
}

html[data-theme="dark"] body.page-writing-practice .image-replace-btn:hover {
  background: var(--surface-soft-hover) !important;
  color: var(--accent-hover) !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] body.page-writing-practice .chain-card {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface-soft-hover) 100%) !important;
  border-color: var(--progress-border) !important;
}

html[data-theme="dark"] body.page-writing-practice .chain-en {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-writing-practice .example-header {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] body.page-writing-practice .example-header:hover {
  background: var(--surface-soft-hover) !important;
  border-bottom-color: var(--progress-border) !important;
}

html[data-theme="dark"] body.page-writing-practice .example-header h4 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .example-hint,
html[data-theme="dark"] body.page-writing-practice .editor-context .ctx-hint {
  background: var(--surface-soft) !important;
  border: 1px solid var(--surface-soft-border) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-float-btn {
  background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.28) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-window {
  background: rgba(16, 27, 45, 0.9) !important;
  border-color: rgba(61, 79, 110, 0.85) !important;
  box-shadow: 0 20px 44px rgba(var(--shadow-rgb), 0.34) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-header {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.22) 0%, rgba(67, 56, 202, 0.18) 100%) !important;
  border-bottom-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-header-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-header-actions button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-header-actions button:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-dropzone {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--border-default) !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-dropzone.dragover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hover) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-dropzone.has-context {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: var(--progress-border) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-context-chip {
  background: var(--bg-elevated) !important;
  border-color: var(--progress-border) !important;
  color: #bfdbfe !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-context-chip .remove-ctx {
  background: rgba(59, 130, 246, 0.16) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-context-chip .remove-ctx:hover {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-msg.assistant {
  background: var(--surface-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-msg.assistant code,
html[data-theme="dark"] body.page-writing-practice .markdown-body code,
html[data-theme="dark"] body.page-writing-practice .practice-followup-response code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] body.page-writing-practice .markdown-body,
html[data-theme="dark"] body.page-writing-practice .markdown-body h1,
html[data-theme="dark"] body.page-writing-practice .markdown-body h2,
html[data-theme="dark"] body.page-writing-practice .markdown-body h3,
html[data-theme="dark"] body.page-writing-practice .markdown-body h4,
html[data-theme="dark"] body.page-writing-practice .markdown-body p,
html[data-theme="dark"] body.page-writing-practice .markdown-body li {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .markdown-body blockquote {
  background: rgba(59, 130, 246, 0.08) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-writing-practice .markdown-body th {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.page-writing-practice .markdown-body th,
html[data-theme="dark"] body.page-writing-practice .markdown-body td {
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-preset-btn {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-preset-btn:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-input-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-top-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-input {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-input::placeholder {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-send-btn {
  background: var(--accent) !important;
  color: #fff !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-send-btn:hover {
  background: var(--accent-hover) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-send-btn:disabled {
  background: #475569 !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-history-panel {
  background: rgba(16, 27, 45, 0.97) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-history-item {
  border-bottom-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-history-item:hover {
  background: var(--accent-soft) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-history-item .hist-ctx {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .ai-chat-history-item .hist-meta,
html[data-theme="dark"] body.page-writing-practice .ai-chat-history-item .hist-del {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] body.page-writing-practice .practice-followup {
  background: var(--surface-soft) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-writing-practice .practice-followup input {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-writing-practice .practice-followup-response {
  background: var(--surface-soft) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-message-board .comment-item {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-message-board .comment-avatar {
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-message-board .comment-user-name,
html[data-theme="dark"] body.page-message-board .comment-content,
html[data-theme="dark"] body.page-message-board .card-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body.page-message-board .comment-time,
html[data-theme="dark"] body.page-message-board .card-desc,
html[data-theme="dark"] body.page-message-board .card-meta {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] body.page-message-board .comment-delete-btn {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] body.page-message-board .comment-delete-btn:hover {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] body.page-message-board .audio-card,
html[data-theme="dark"] body.page-message-board .article-card {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.16) !important;
}

html[data-theme="dark"] body.page-message-board .audio-card:hover,
html[data-theme="dark"] body.page-message-board .article-card:hover {
  box-shadow: 0 16px 32px rgba(var(--shadow-rgb), 0.22) !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96) 0%, rgba(17, 24, 39, 0.98) 100%) !important;
  border-color: var(--border-default) !important;
  box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.2) !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card:hover {
  border-color: var(--accent) !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card .card-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card .card-desc,
html[data-theme="dark"] body.page-message-board .challenge-card .card-meta {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card [data-challenge-btn] {
  background: rgba(52, 211, 153, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: #86efac !important;
}

html[data-theme="dark"] body.page-message-board .challenge-card [data-challenge-btn] span,
html[data-theme="dark"] body.page-message-board .challenge-card .card-meta span[style] {
  color: inherit !important;
}

html[data-theme="dark"] body.page-intensive .audio-panel {
  background: linear-gradient(180deg, rgba(22, 36, 55, 0.98) 0%, rgba(16, 27, 45, 0.98) 100%) !important;
  border-top-color: var(--border-default) !important;
  box-shadow: 0 -8px 22px rgba(var(--shadow-rgb), 0.28) !important;
}

html[data-theme="dark"] body.page-intensive .audio-controls button,
html[data-theme="dark"] body.page-intensive #downloadAudioBtn,
html[data-theme="dark"] body.page-intensive .vocab-btn,
html[data-theme="dark"] body.page-intensive .close-btn {
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html[data-theme="dark"] body.page-intensive .audio-controls button:hover,
html[data-theme="dark"] body.page-intensive #downloadAudioBtn:hover,
html[data-theme="dark"] body.page-intensive .vocab-btn:hover,
html[data-theme="dark"] body.page-intensive .close-btn:hover {
  background: var(--bg-muted) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme="dark"] body.page-intensive #vocabToggle.active,
html[data-theme="dark"] body.page-intensive .vocab-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body.page-intensive .audio-controls audio,
html[data-theme="dark"] body.page-intensive #articleAudio {
  filter: brightness(0.88) contrast(1.05);
}