/**
 * TelccFree — Dark mode exercise contrast layer (MUST load last)
 * Eradicates harsh white surfaces across B1/B2 exercises — visual only.
 */

:root {
  --telc-dark-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --telc-dark-motion: all 300ms var(--telc-dark-ease);
  --telc-fb-glow: 0 0 15px rgba(24, 119, 242, 0.25);
  --telc-dark-capsule-bg: rgba(15, 23, 42, 0.8);
  --telc-dark-capsule-border: rgba(51, 65, 85, 0.5);
  --telc-dark-glass: rgba(30, 41, 59, 0.6);
  --telc-dark-glass-border: rgba(51, 65, 85, 0.6);
  --telc-dark-glass-hover: rgba(51, 65, 85, 0.8);
  --telc-dark-text: #f1f5f9;
  --telc-dark-text-soft: #e2e8f0;
  --telc-dark-muted: #94a3b8;
}

/* ── Protocol 4: global dark transitions ── */
html.dark .telc-exercise-header__frame,
html.dark .telc-exercise-header__title,
html.dark .header-frame,
html.dark .header-title,
html.dark .main-header,
html.dark .quiz-header h1,
html.dark .letter,
html.dark .choices,
html.dark .container,
html.dark .page-wrap,
html.dark .quiz-page,
html.dark .quiz-scroll-container,
html.dark .right-column-content,
html.dark .question-box,
html.dark .drop-target,
html.dark .draggable,
html.dark body .option,
html.dark body label.option,
html.dark input,
html.dark select,
html.dark textarea,
html.dark .blank,
html.dark .row-container,
html.dark .task-side,
html.dark .writing-side,
html.dark .ad-full,
html.dark .yellow-box,
html.dark .correction-panel,
html.dark .audio-card,
html.dark .instructions,
html.dark .quiz-footer,
html.dark #homeBtn,
html.dark .quiz-button-link {
  transition:
    background-color 300ms var(--telc-dark-ease),
    background 300ms var(--telc-dark-ease),
    color 300ms var(--telc-dark-ease),
    border-color 300ms var(--telc-dark-ease),
    box-shadow 300ms var(--telc-dark-ease),
    opacity 300ms var(--telc-dark-ease) !important;
}

/* ── Protocol 1: exercise headers & title capsules ── */
html.dark .telc-exercise-header__frame,
html.dark .header-frame,
html.dark .main-header,
html.dark .quiz-header h1,
html.dark body.telc-exercise-chrome-ready .telc-audio-title-capsule,
html.dark body.telc-exercise-chrome-ready h2.audio-title,
html.dark body.telc-exercise-chrome-ready .telc-quiz-header--capsule h1 {
  background: var(--telc-dark-capsule-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--telc-dark-capsule-border) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35) !important;
  color: var(--telc-dark-text) !important;
}

html.dark .telc-exercise-header__title,
html.dark .header-title,
html.dark .main-header,
html.dark .quiz-header h1,
html.dark .quiz-header .subtitle {
  color: var(--telc-dark-text) !important;
}

html.dark .quiz-header .subtitle {
  color: var(--telc-dark-muted) !important;
}

/* ── Protocol 2: MCQ options (Sprachbausteine + universal) ── */
html.dark body .option,
html.dark body label.option,
html.dark body button.option {
  background: var(--telc-dark-glass) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid var(--telc-dark-glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--telc-dark-text-soft) !important;
}

html.dark body .option:hover,
html.dark body label.option:hover,
html.dark body button.option:hover {
  background: var(--telc-dark-glass-hover) !important;
  border-color: rgba(100, 116, 139, 0.75) !important;
  box-shadow: var(--telc-fb-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: var(--telc-dark-text) !important;
}

html.dark body .option.selected,
html.dark body label.option.selected,
html.dark body button.option.selected {
  background: rgba(24, 119, 242, 0.24) !important;
  border-color: rgba(24, 119, 242, 0.65) !important;
  color: var(--telc-dark-text) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

html.dark body .option.correct,
html.dark body label.option.correct,
html.dark body button.option.correct {
  background: rgba(22, 101, 52, 0.45) !important;
  border-color: rgba(74, 222, 128, 0.55) !important;
  color: #ecfdf5 !important;
}

html.dark body .option.incorrect,
html.dark body label.option.incorrect,
html.dark body button.option.incorrect {
  background: rgba(127, 29, 29, 0.45) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  color: #fef2f2 !important;
}

/* ── Protocol 2: drag cards & drop zones ── */
html.dark body .draggable,
html.dark body .right-column .draggable,
html.dark body .right-column-content .draggable,
html.dark body #teil1-answers .draggable,
html.dark body .answer-column .draggable,
html.dark .drop-target .draggable {
  background: var(--telc-dark-glass) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid var(--telc-dark-glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--telc-dark-text-soft) !important;
}

html.dark body .draggable:hover,
html.dark body .right-column .draggable:hover,
html.dark body .right-column-content .draggable:hover,
html.dark body #teil1-answers .draggable:hover {
  background: var(--telc-dark-glass-hover) !important;
  border-color: rgba(100, 116, 139, 0.75) !important;
  box-shadow: var(--telc-fb-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: var(--telc-dark-text) !important;
}

html.dark .draggable.selected,
html.dark .draggable.dragging,
html.dark .draggable.dragging-style {
  background: rgba(30, 58, 95, 0.75) !important;
  border-color: rgba(24, 119, 242, 0.55) !important;
  color: var(--telc-dark-text) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

html.dark .drop-target {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
}

html.dark .drop-target:hover,
html.dark .drop-target.drag-over,
html.dark .right-column-content.drag-over {
  background: rgba(24, 119, 242, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

html.dark .drop-target:not(.empty-drop-target) {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(71, 85, 105, 0.75) !important;
}

html.dark .drop-target.empty-drop-target::before {
  color: rgba(147, 197, 253, 0.78) !important;
}

html.dark .exam-graded .drop-target.graded-slot.correct .draggable {
  background: rgba(6, 78, 59, 0.55) !important;
  color: #a7f3d0 !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
}

html.dark .exam-graded .drop-target.graded-slot.incorrect:not(.distractor-error) .draggable,
html.dark .exam-graded .drop-target.graded-slot.distractor-error .draggable {
  background: rgba(88, 28, 28, 0.55) !important;
  color: #fecdd3 !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

html.dark .exam-graded .drop-target.graded-slot.correct:not(:has(.draggable)) {
  background: rgba(6, 78, 59, 0.35) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
}

html.dark .exam-graded .drop-target.graded-slot.incorrect:not(.distractor-error):not(:has(.draggable)) {
  background: rgba(88, 28, 28, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
}

html.dark .exam-graded .drop-target.graded-slot.neutral-valid,
html.dark .exam-graded .drop-target.graded-slot.distractor-error {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(71, 85, 105, 0.75) !important;
}

html.dark .wrong-flag {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(232, 69, 117, 0.45) !important;
}

html.dark .wrong-flag:checked {
  background: rgba(61, 31, 53, 0.75) !important;
  border-color: rgba(232, 69, 117, 0.65) !important;
}

/* ── Panel / column surfaces ── */
html.dark .quiz-scroll-container,
html.dark .right-column-content,
html.dark .question-box,
html.dark .results-panel-inner,
html.dark .letter,
html.dark .choices,
html.dark .container,
html.dark .page-wrap,
html.dark .quiz-page,
html.dark .row-container,
html.dark .audio-card,
html.dark .instructions,
html.dark .question-card,
html.dark .feedback-msg,
html.dark .task-side,
html.dark .writing-side,
html.dark .ad-full,
html.dark .correction-panel,
html.dark .textarea-container,
html.dark .main-content,
html.dark .text-section {
  background-color: rgba(15, 23, 42, 0.72) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(51, 65, 85, 0.55) !important;
  color: var(--telc-dark-text-soft) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

html.dark body[data-level="b1"] .letter,
html.dark body[data-level="b1"] .choices {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
}

html.dark body[data-level="b1"] .row-container {
  background: rgba(30, 41, 59, 0.65) !important;
  border-color: rgba(51, 65, 85, 0.45) !important;
}

html.dark .quiz-footer {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top-color: rgba(51, 65, 85, 0.55) !important;
}

html.dark .yellow-box {
  background: rgba(51, 65, 85, 0.85) !important;
  border-color: rgba(100, 116, 139, 0.65) !important;
  color: #fde68a !important;
}

html.dark .column-label {
  color: var(--telc-dark-muted) !important;
}

html.dark .question-text,
html.dark .question-text h4,
html.dark .statement,
html.dark .instructions,
html.dark .score-line {
  color: var(--telc-dark-text-soft) !important;
}

html.dark .question-text h4 {
  color: #93c5fd !important;
}

/* ── Protocol 3: inputs, selects, blanks ── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="password"],
html.dark input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
html.dark select,
html.dark textarea {
  background: rgba(15, 23, 42, 0.92) !important;
  color: var(--telc-dark-text) !important;
  border: 1px solid rgba(51, 65, 85, 0.65) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html.dark select option {
  background: #0f172a;
  color: var(--telc-dark-text);
}

html.dark .blank {
  background: rgba(24, 119, 242, 0.35) !important;
  color: var(--telc-dark-text) !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
}

html.dark body input[type="button"],
html.dark body input[type="submit"]:not([disabled]) {
  background: var(--telc-dark-glass) !important;
  color: var(--telc-dark-text-soft) !important;
  border-color: var(--telc-dark-glass-border) !important;
}

html.dark body input[type="button"]:hover,
html.dark body input[type="submit"]:not([disabled]):hover {
  background: var(--telc-dark-glass-hover) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

/* Secondary / home buttons — remove white fills */
html.dark body #homeBtn,
html.dark body .quiz-button-link,
html.dark body a.quiz-button-link,
html.dark body .quiz-button-link.secondary,
html.dark body .btn-blue {
  background: var(--telc-dark-glass) !important;
  color: var(--telc-dark-text-soft) !important;
  border: 1px solid var(--telc-dark-glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.dark body #homeBtn:hover,
html.dark body .quiz-button-link:hover,
html.dark body a.quiz-button-link:hover,
html.dark body .btn-blue:hover {
  background: var(--telc-dark-glass-hover) !important;
  border-color: rgba(24, 119, 242, 0.45) !important;
  color: var(--telc-dark-text) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

/* Hören / listening option buttons */
html.dark .option-btn,
html.dark .choices .option {
  background: var(--telc-dark-glass) !important;
  color: var(--telc-dark-text-soft) !important;
  border-color: var(--telc-dark-glass-border) !important;
}

html.dark .option-btn:hover {
  background: var(--telc-dark-glass-hover) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

html.dark .option-btn.selected {
  background: rgba(24, 119, 242, 0.24) !important;
  border-color: rgba(24, 119, 242, 0.65) !important;
  box-shadow: var(--telc-fb-glow) !important;
}

/* Catch residual inline white backgrounds (non-destructive) */
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background-color: white"] {
  background-color: rgba(30, 41, 59, 0.85) !important;
}

html.dark [style*="background-color: #f2f3f7"],
html.dark [style*="background-color:#f2f3f7"],
html.dark [style*="background-color: #e9eaec"],
html.dark [style*="background-color:#e9eaec"] {
  background-color: rgba(15, 23, 42, 0.72) !important;
}

/* ── Theme toggle: purge legacy blue blocks sitewide ── */
body button#telcThemeToggle.telc-theme-capsule,
body button#telcThemeToggle.telc-theme-toggle,
#telcThemeToggle,
.telc-theme-capsule,
.telc-theme-toggle,
.telc-exercise-topbar #telcThemeToggle,
.telc-exercise-toolbar #telcThemeToggle,
.navbar-actions #telcThemeToggle,
.auto-nav-wrap #telcThemeToggle {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
}

html.dark #telcThemeToggle,
html.dark .telc-theme-capsule,
html.dark .telc-theme-toggle {
  background: transparent !important;
  border: none !important;
}

#telcThemeToggle .telc-theme-capsule__track,
.telc-theme-capsule .telc-theme-capsule__track {
  background: rgba(241, 245, 249, 0.8) !important;
  border: 1px solid #e2e8f0 !important;
}

html.dark #telcThemeToggle .telc-theme-capsule__track,
html.dark .telc-theme-capsule .telc-theme-capsule__track {
  background: rgba(2, 6, 23, 0.4) !important;
  border-color: #1e293b !important;
}

@media (prefers-reduced-motion: reduce) {
  html.dark .telc-exercise-header__frame,
  html.dark body .option,
  html.dark body label.option,
  html.dark body button.option,
  html.dark .draggable,
  html.dark .drop-target {
    transition: none !important;
  }
}

/* Learner Arabic body text — do not inherit muted question-text tokens. */
html.dark .question-text .t1-ar,
html.dark .t1-ar,
html.dark .t3exp-translation {
  color: var(--translation-text, #e2e8f0) !important;
  opacity: 1 !important;
}