/* ============================================================
   sprafo-theme.css — Site-wide Light / Dark theme layer
   ------------------------------------------------------------
   • Light mode is the DEFAULT and is left completely untouched:
     this file only defines overrides scoped under
     html[data-theme="dark"]. Removing the attribute restores light.
   • Dark mode leans on Bootstrap 5.3 `data-bs-theme="dark"` for all
     standard components (cards, dropdowns, tables, forms, modals,
     borders, .text-muted, .bg-body*). We remap Bootstrap's surface
     tokens to a navy-not-black palette and add overrides for the
     handful of hardcoded / utility surfaces BS cannot reach.
   • Exercise / exam answer surfaces are ALSO themed dark (Task 15C):
     their --t1-*/--hoe-* token systems are remapped below and hardcoded
     light values overridden, with answer-state (correct/incorrect/
     selected) legibility preserved via dark green/red/blue tints.
   ============================================================ */

/* Toggle button (cosmetic only — safe in both themes) */
.dl-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dl-theme-toggle i { font-size: 1rem; }

/* ---------------- DARK PALETTE ---------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Legacy DL tokens (body, student shell, admin shell) */
    --dl-bg:      #0f1620;
    --dl-text:    #e7edf4;
    --dl-shadow:  0 2px 16px rgba(0, 0, 0, .5);

    /* SF design-system neutrals (public pages + new components) */
    --sf-bg:            #0f1620;
    --sf-bg-subtle:     #131c28;
    --sf-surface:       #1a2432;
    --sf-surface-muted: #151e2a;
    --sf-text:          #e7edf4;
    --sf-text-muted:    #a3b2c4;
    --sf-text-subtle:   #7f8fa3;
    --sf-text-invert:   #0f1620;
    --sf-border:        #2a3647;
    --sf-border-strong: #3a495c;
    --sf-primary-soft:  #16233a;
    --sf-primary-tint:  #16233a;

    /* Bootstrap surface remap → navy, not pure black */
    --bs-body-bg:                 #0f1620;
    --bs-body-bg-rgb:             15, 22, 32;
    --bs-body-color:              #e7edf4;
    --bs-body-color-rgb:          231, 237, 244;
    --bs-secondary-bg:            #1a2432;
    --bs-secondary-bg-rgb:        26, 36, 50;
    --bs-secondary-color:         rgba(231, 237, 244, .72);
    --bs-tertiary-bg:             #151e2a;
    --bs-tertiary-bg-rgb:         21, 30, 42;
    --bs-tertiary-color:          rgba(231, 237, 244, .5);
    --bs-emphasis-color:          #ffffff;
    --bs-emphasis-color-rgb:      255, 255, 255;
    --bs-heading-color:           #f2f6fb;
    --bs-border-color:            #2a3647;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-card-bg:                 #1a2432;
    --bs-card-cap-bg:             #1a2432;
    --bs-dropdown-bg:             #1a2432;
    --bs-dropdown-border-color:   #2a3647;
    --bs-dropdown-link-color:     #d8e0ea;
    --bs-dropdown-link-hover-bg:  #243141;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-header-color:   #a3b2c4;
    --bs-modal-bg:                #141d29;
    --bs-list-group-bg:           #1a2432;
}

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

/* ---------------- UTILITY SURFACE FLIPS ----------------
   Bootstrap background utilities carry !important, so overrides must
   too. Colored badges (bg-light/etc. on a .badge) are excluded so
   status chips keep their meaning. */
html[data-theme="dark"] .bg-white:not(.badge) { background-color: var(--sf-surface) !important; }
html[data-theme="dark"] .bg-light:not(.badge) { background-color: var(--sf-bg-subtle) !important; }
html[data-theme="dark"] .bg-primary-soft      { background-color: var(--sf-primary-soft) !important; }

/* ---------------- HARDCODED CUSTOM SURFACES ---------------- */
html[data-theme="dark"] .auth-card-footer {
    background: var(--sf-bg-subtle);
    border-top-color: var(--sf-border);
}
html[data-theme="dark"] .checkout-summary-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .student-sidebar,
html[data-theme="dark"] .student-sidebar-inner,
html[data-theme="dark"] .sidebar-profile-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .feature-card {
    background: var(--sf-surface);
}

/* ---------------- EXERCISE / EXAM: DARK ANSWER SURFACES (Task 15C) ----------------
   Previously pinned to a light "paper" look; now themed dark with readable
   light text. Bootstrap form tokens stay dark (data-bs-theme="dark"), so nested
   radios/checkboxes/inputs render correctly ON the dark surface. Answer-state
   (correct/incorrect/selected) legibility is handled in the Task 15C block below. */
html[data-theme="dark"] .se-question-card,
html[data-theme="dark"] .t1-text-card,
html[data-theme="dark"] .t1-headings-panel {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}

/* ============================================================
   COMPLETE STUDENT + PUBLIC DARK MODE
   ------------------------------------------------------------
   The classes below hardcode LIGHT backgrounds / borders / text
   in style.css, which Bootstrap's data-bs-theme cannot reach, so
   they stayed white in dark mode. Re-skin them to the navy
   surface palette. Admin selectors are intentionally NOT
   referenced. Exercise/exam surfaces (.se-* / .t1-*) are themed
   dark (Task 15C) with answer-state legibility preserved.
   ============================================================ */
html[data-theme="dark"] {
    --sf-surface-hover: #202d3f;
    --sf-shadow:        0 10px 28px rgba(0, 0, 0, .45);
}

/* ---- Washed-out utility badges: locked "Basic/Modified" chips,
        neutral list pills, etc. (.bg-light/.bg-white carry !important) ---- */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-white {
    background-color: var(--sf-surface-muted) !important;
    color: var(--sf-text-muted) !important;
    border-color: var(--sf-border) !important;
}

/* ============ DASHBOARD ============ */
html[data-theme="dark"] .dash-section-title { color: var(--sf-text); }

html[data-theme="dark"] .dash-next {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    box-shadow: var(--sf-shadow);
}
html[data-theme="dark"] .dash-next__label { color: var(--sf-text-subtle); }
html[data-theme="dark"] .dash-next__title { color: var(--sf-text); }
html[data-theme="dark"] .dash-next__desc  { color: var(--sf-text-muted); }

html[data-theme="dark"] .dash-module-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .dash-module-card:hover {
    background: var(--sf-surface-hover);
    border-color: var(--sf-border-strong);
    box-shadow: var(--sf-shadow);
    color: var(--sf-text);
}
html[data-theme="dark"] .dash-module-card__title { color: var(--sf-text); }
html[data-theme="dark"] .dash-module-card__sub   { color: var(--sf-text-muted); }
html[data-theme="dark"] .dash-module-card__chev  { color: var(--sf-text-subtle); }
html[data-theme="dark"] .dash-empty { color: var(--sf-text-muted); }

/* Amber affiliate balance pill → dark amber chip */
html[data-theme="dark"] .dash-affiliate-pill {
    background: linear-gradient(135deg, rgba(180, 83, 9, .22), rgba(217, 119, 6, .12));
    border-color: rgba(217, 119, 6, .45);
    color: #f4d9a8;
}
html[data-theme="dark"] .dash-affiliate-pill:hover,
html[data-theme="dark"] .dash-affiliate-pill:focus-visible {
    background: linear-gradient(135deg, rgba(217, 119, 6, .30), rgba(180, 83, 9, .18));
    border-color: rgba(245, 197, 122, .60);
    color: #ffe9c2;
}
html[data-theme="dark"] .dash-affiliate-pill__icon   { color: #f0b866; }
html[data-theme="dark"] .dash-affiliate-pill__amount { color: #ffe0a6; }

/* ============ GENERIC PUBLIC / STUDENT PANELS ============ */
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .stats-band,
html[data-theme="dark"] .pricing-teaser,
html[data-theme="dark"] .dl-community-card,
html[data-theme="dark"] .profile-sub-block,
html[data-theme="dark"] .profile-history-placeholder,
html[data-theme="dark"] .testimonial-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .step-card { border-color: var(--sf-border); }
html[data-theme="dark"] .testimonial-card .testimonial-quote { color: var(--sf-text); }
html[data-theme="dark"] .profile-history-placeholder { color: var(--sf-text-muted); }
html[data-theme="dark"] .avatar-circle { background: var(--sf-primary-soft); }
html[data-theme="dark"] .sidebar-profile-card .profile-name { color: var(--sf-text); }

/* ============ PERFORMANCE ============ */
html[data-theme="dark"] .reading-stat-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .reading-stat-icon { background: var(--sf-primary-soft); }
html[data-theme="dark"] .reading-stat-label { color: var(--sf-text-muted); }
html[data-theme="dark"] .perf-history-table th,
html[data-theme="dark"] .billing-history-table th {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .billing-history-table tr:hover { background: var(--sf-surface-hover); }

/* ============ PROFILE TABS ============ */
html[data-theme="dark"] .profile-tabs .nav-link.active {
    background: var(--sf-surface);
    color: var(--bs-primary);
}

/* ============ SIDEBAR (nav hover/active, v1 + v2) ============ */
html[data-theme="dark"] .sidebar-nav .nav-link:hover,
html[data-theme="dark"] .sidebar-nav-v2 .nav-link:hover {
    background: var(--sf-surface-hover);
}
html[data-theme="dark"] .sidebar-nav .nav-link.active,
html[data-theme="dark"] .sidebar-nav-v2 .nav-link.active {
    background: var(--sf-primary-soft);
}
html[data-theme="dark"] .sidebar-footer-v2 {
    color: var(--sf-text-muted);
    border-color: var(--sf-border);
}

/* ============ PRICING ============ */
html[data-theme="dark"] .pricing-include-card,
html[data-theme="dark"] .pricing-faq,
html[data-theme="dark"] .pricing-faq .pricing-faq-item,
html[data-theme="dark"] .pricing-card-meta {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .pricing-include-title,
html[data-theme="dark"] .pricing-wa-title,
html[data-theme="dark"] .pricing-faq .pricing-faq-title { color: var(--sf-text); }
html[data-theme="dark"] .pricing-include-sub,
html[data-theme="dark"] .pricing-wa-sub { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-include-medallion { background: var(--sf-primary-soft); }
html[data-theme="dark"] .pricing-faq-chevron {
    background: var(--sf-surface-muted);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .pricing-faq .pricing-faq-item:has(.accordion-button[aria-expanded="true"]) {
    background: var(--sf-surface-hover);
    border-color: var(--sf-border-strong);
}
html[data-theme="dark"] .pricing-faq .accordion-button { color: var(--sf-text) !important; }
html[data-theme="dark"] .pricing-faq .accordion-button:not(.collapsed) {
    color: #93c5fd !important;
    background: transparent;
}
html[data-theme="dark"] .pricing-faq .accordion-body { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-faq #pricingFaq { background: transparent; }
html[data-theme="dark"] .pricing-wa-card {
    background: linear-gradient(135deg, rgba(37, 211, 102, .14), rgba(26, 36, 50, .65));
    border-color: rgba(37, 211, 102, .32);
}
html[data-theme="dark"] .pricing-currency-toggle {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .pricing-currency-item { color: var(--sf-text); }
html[data-theme="dark"] .device-pills {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .device-help-btn {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .pricing-page .pricing-sticky-cta {
    background: rgba(20, 29, 41, .96);
    border-top-color: var(--sf-border);
}
html[data-theme="dark"] .pricing-sticky-msg { color: var(--sf-text); }
html[data-theme="dark"] .pricing-sticky-meta { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-after-pay-card {
    background: linear-gradient(180deg, var(--sf-surface), var(--sf-bg-subtle));
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .pricing-faq-more-btn {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .pricing-upgrade-banner,
html[data-theme="dark"] .checkout-upgrade-note,
html[data-theme="dark"] .billing-upgrade-context-note {
    background: linear-gradient(180deg, rgba(37, 99, 235, .12), rgba(22, 35, 58, .6));
    border-color: rgba(59, 130, 246, .35);
    color: var(--sf-text);
}
html[data-theme="dark"] .billing-upgrade-card {
    background: linear-gradient(180deg, var(--sf-surface), var(--sf-bg-subtle));
    border-color: var(--sf-border-strong);
}

/* ============ CHECKOUT ============ */
html[data-theme="dark"] .checkout-bank-card,
html[data-theme="dark"] .checkout-mobile-summary,
html[data-theme="dark"] .payment-return-card,
html[data-theme="dark"] .checkout-reassure-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .checkout-status-page {
    background: linear-gradient(180deg, var(--sf-bg-subtle), var(--sf-bg));
}
html[data-theme="dark"] .checkout-section-title,
html[data-theme="dark"] .checkout-summary-list .csl-value,
html[data-theme="dark"] .checkout-summary-total .cst-label,
html[data-theme="dark"] .checkout-reassure-card .reassure-title { color: var(--sf-text); }
html[data-theme="dark"] .checkout-summary-list .csl-label,
html[data-theme="dark"] .checkout-reassure-card .reassure-sub { color: var(--sf-text-muted); }
html[data-theme="dark"] .checkout-summary-list li { border-bottom-color: var(--sf-border); }
html[data-theme="dark"] .checkout-summary-total { border-top-color: var(--sf-border); }
html[data-theme="dark"] .checkout-reassure-card .reassure-chips li,
html[data-theme="dark"] .checkout-reassure-card .reassure-steps li {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
/* Bank logo tile keeps a light background for logo legibility. */

/* ============ ALERTS (.dl-alert) ============ */
html[data-theme="dark"] .dl-alert {
    background: var(--sf-surface);
    color: var(--sf-text);
}
html[data-theme="dark"] .dl-alert--info {
    background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35);
    border-inline-start-color: #3b82f6; color: #cfe0ff;
}
html[data-theme="dark"] .dl-alert--warning {
    background: rgba(217, 119, 6, .14); border-color: rgba(217, 119, 6, .40);
    border-inline-start-color: #f59e0b; color: #f5d199;
}
html[data-theme="dark"] .dl-alert--danger {
    background: rgba(220, 38, 38, .14); border-color: rgba(220, 38, 38, .40);
    border-inline-start-color: #ef4444; color: #f6b8b8;
}
html[data-theme="dark"] .dl-alert--success {
    background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .40);
    border-inline-start-color: #22c55e; color: #a7e3bd;
}

/* ============ AUTH FORMS ============ */
html[data-theme="dark"] .auth-wrapper {
    background: linear-gradient(160deg, var(--sf-bg-subtle) 0%, var(--sf-bg) 60%);
}
html[data-theme="dark"] .auth-label { color: var(--sf-text-muted); }
html[data-theme="dark"] .auth-input { border-color: var(--sf-border); }

/* ============ FAQ / ACCORDIONS (home + affiliate) ============ */
html[data-theme="dark"] .home-faq .accordion-item {
    border-color: var(--sf-border);
    background: var(--sf-surface);
}
/* Expanded home FAQ button hardcodes navy text (#003d80) → light on dark tint. */
html[data-theme="dark"] .sf-public .home-faq .accordion-button:not(.collapsed) {
    background: var(--sf-primary-soft);
    color: #bfdbfe;
}
/* Home/affiliate hero "glass" exam card: inline rgba(255,255,255,.1) reads as a
   light surface. The hero is always dark, so use a dark glass to stay premium
   (inline style requires !important to override). */
html[data-theme="dark"] .sf-public .hero-exam-card,
html[data-theme="dark"] .hero-exam-card {
    background: rgba(15, 23, 42, .38) !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

/* ============ EXERCISE VARIANT PICKER (chrome, not answer paper) ============ */
html[data-theme="dark"] .variant-picker {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .variant-picker-item {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}

/* ============ AFFILIATE COMMISSION TABLE ============ */
html[data-theme="dark"] .tier-table tbody tr:hover { background: var(--sf-surface-hover); }

/* ============ LESEN HUB CARDS ============
   student_exercise.css hardcodes `.se-lesen-card{background:#fff}` + light
   border, which wins over Bootstrap's token-driven `.card` background. These
   are navigation/hub cards (NOT answer "paper"), so they must go dark. */
html[data-theme="dark"] .se-lesen-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .se-lesen-card:hover {
    border-color: var(--sf-border-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .se-lesen-upsell {
    background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05));
    border-color: rgba(245, 158, 11, .35);
}

/* ============ SIDEBAR PROFILE BLOCK ============
   style.css hardcodes `.sidebar-profile-block{background:#fff}`. The sidebar
   shell is already dark, so let it show through. */
html[data-theme="dark"] .sidebar-profile-block { background: transparent; }

/* ============ PERFORMANCE HUB ============
   performance.css defines its own light `--perf-*` token system on :root and
   hardcodes several light surfaces/chips. Remap the tokens and re-tint the
   semantic chips for a premium dark analytics look. */
html[data-theme="dark"] {
    --perf-surface:      var(--sf-surface);
    --perf-bg:           var(--sf-surface-muted);
    --perf-border:       var(--sf-border);
    --perf-text:         var(--sf-text);
    --perf-text-soft:    var(--sf-text-muted);
    --perf-primary-soft: rgba(59, 130, 246, .16);
    --perf-shadow-sm:    0 1px 2px rgba(0, 0, 0, .40);
    --perf-shadow:       0 4px 16px rgba(0, 0, 0, .45);
    --perf-shadow-md:    0 10px 30px rgba(0, 0, 0, .50);
}
html[data-theme="dark"] .perf-section-total-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .perf-recent-item:hover { background: var(--sf-surface-hover); }
html[data-theme="dark"] .perf-criteria-bar { background: rgba(255, 255, 255, .12); }
/* icon tiles */
html[data-theme="dark"] .perf-card--accent  .perf-card-icon { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
html[data-theme="dark"] .perf-card--success .perf-card-icon { background: rgba(16, 185, 129, .18); color: #4ade80; }
html[data-theme="dark"] .perf-card--warning .perf-card-icon { background: rgba(245, 158, 11, .18); color: #fbbf24; }
/* mini-card semantic variants */
html[data-theme="dark"] .perf-mini-card--success { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .32); }
html[data-theme="dark"] .perf-mini-card--warn    { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .32); }
/* pills / badges / chips */
html[data-theme="dark"] .perf-badge-soon { background: rgba(245, 158, 11, .16); color: #fbbf24; border-color: rgba(245, 158, 11, .38); }
html[data-theme="dark"] .perf-trend-chip { background: rgba(59, 130, 246, .16); color: #93c5fd; }
html[data-theme="dark"] .perf-trend--up   { background: rgba(16, 185, 129, .16); color: #4ade80; }
html[data-theme="dark"] .perf-trend--mid  { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
html[data-theme="dark"] .perf-trend--down { background: rgba(239, 68, 68, .16); color: #f87171; }
html[data-theme="dark"] .perf-status--ok      { background: rgba(16, 185, 129, .16); color: #4ade80; }
html[data-theme="dark"] .perf-status--pending { background: rgba(245, 158, 11, .16); color: #fbbf24; }
html[data-theme="dark"] .perf-status--fail    { background: rgba(239, 68, 68, .16); color: #f87171; }
html[data-theme="dark"] .perf-module-badge--exam      { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
html[data-theme="dark"] .perf-module-badge--reading   { background: rgba(59, 130, 246, .16); color: #93c5fd; }
html[data-theme="dark"] .perf-module-badge--hoeren    { background: rgba(16, 185, 129, .16); color: #4ade80; }
html[data-theme="dark"] .perf-module-badge--schreiben { background: rgba(245, 158, 11, .16); color: #fbbf24; }
html[data-theme="dark"] .perf-module-badge--all       { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
html[data-theme="dark"] .perf-priority-chip--high   { background: rgba(239, 68, 68, .16); color: #f87171; }
html[data-theme="dark"] .perf-priority-chip--medium { background: rgba(245, 158, 11, .16); color: #fbbf24; }
html[data-theme="dark"] .perf-priority-chip--low    { background: rgba(16, 185, 129, .16); color: #4ade80; }

/* ============ PRICING (public) — after-pay steps / guarantee ribbon / includes band ============
   style.css hardcodes light backgrounds and near-black text on these. */
html[data-theme="dark"] .after-pay-step { background: var(--sf-surface); border-color: var(--sf-border); }
html[data-theme="dark"] .after-pay-step .after-pay-title { color: var(--sf-text); }
html[data-theme="dark"] .after-pay-step .after-pay-sub   { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-guarantee-ribbon { background: var(--sf-surface-muted); border-color: rgba(59, 130, 246, .28); }
html[data-theme="dark"] .pricing-includes-section { background: var(--sf-surface-muted); }

/* ============================================================================
   TASK 15C — FULL DARK-MODE FINALIZATION (student + public)
   Exercise/lesson "paper" cards now dark; per-feature token systems remapped;
   remaining hardcoded light surfaces overridden; premium scrollbars added.
   Every rule scoped html[data-theme="dark"] EXCEPT the scrollbar base (which
   is an intentional cross-theme upgrade, clearly marked). Admin untouched.
   ============================================================================ */

/* ---- Safety net: any Bootstrap .card in dark → navy surface ---- */
html[data-theme="dark"] .card {
    background-color: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}

/* ---- Level cards: soft-pastel icon boxes (--level-color-soft) leak as
   light surfaces in dark. Re-tint the accent over the navy surface and
   lighten the accent text. Fallbacks first for browsers without color-mix. */
html[data-theme="dark"] .level-icon-box {
    background-color: rgba(59, 130, 246, .18);
    background-color: color-mix(in srgb, var(--level-color, #3b82f6) 22%, var(--sf-surface));
    color: #cbd5e1;
    color: color-mix(in srgb, var(--level-color, #3b82f6) 55%, #ffffff);
}

/* ============ EXERCISE TOKEN SYSTEM (--t1-*) → DARK ============
   teil1.css / student_exercise.css drive most reading/exam answer surfaces off
   these tokens; remapping flips text, tints, borders and token-based fills. */
html[data-theme="dark"] {
    --t1-ink:          #e7edf4;
    --t1-text:         #e7edf4;
    --t1-text-muted:   #a3b2c4;
    --t1-text-subtle:  #7f8fa3;
    --t1-border:       #2a3647;
    --t1-border-soft:  #2a3647;
    --t1-bg-surface:   #1a2432;
    --t1-bg-canvas:    #151e2a;
    --t1-bg-tint:      rgba(255, 255, 255, .07);
    --t1-accent-soft:  rgba(59, 130, 246, .16);
    --t1-accent-tint:  rgba(59, 130, 246, .10);
    --t1-success-soft: rgba(34, 197, 94, .18);
    --t1-success-tint: rgba(34, 197, 94, .10);
    --t1-success-text: #86efac;
    --t1-danger-soft:  rgba(239, 68, 68, .18);
    --t1-danger-tint:  rgba(239, 68, 68, .10);
    --t1-danger-text:  #fca5a5;
}
/* Hardcoded #fff exercise surfaces the tokens don't reach */
html[data-theme="dark"] .se-text-card,
html[data-theme="dark"] .se-mcq-option,
html[data-theme="dark"] .se-chip { background: var(--sf-surface); color: var(--sf-text); }
html[data-theme="dark"] .se-controls-bar { background: var(--sf-surface-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .se-mcq-option:hover { background: var(--sf-surface-hover); }
html[data-theme="dark"] .se-mcq-option.is-checked { background: rgba(59, 130, 246, .18); border-color: #3b82f6; }
html[data-theme="dark"] .se-mcq-option.is-checked:active,
html[data-theme="dark"] .se-mcq-option:active { background: rgba(59, 130, 246, .24); border-color: #60a5fa; }
/* answer-state result colours (must stay legible on dark) */
html[data-theme="dark"] .se-mcq-option.list-group-item-success { background: rgba(34, 197, 94, .18); border-color: rgba(34, 197, 94, .5); color: #d1fae5; }
html[data-theme="dark"] .se-mcq-option.list-group-item-danger  { background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .5); color: #fecaca; }
/* cloze blanks + word bank tiles */
html[data-theme="dark"] .blank-slot { background: var(--sf-surface-muted); }
html[data-theme="dark"] .blank-slot.filled { background: rgba(59, 130, 246, .18); color: #bfdbfe; }
html[data-theme="dark"] .blank-slot.selected,
html[data-theme="dark"] .blank-slot.filled.selected { background: rgba(253, 126, 20, .20); color: #fdba74; border-color: #fd7e14; }
html[data-theme="dark"] #word-bank .word-btn.word-active { background: rgba(253, 126, 20, .20) !important; color: #fdba74 !important; }

/* ============ LISTENING TOKEN SYSTEM (--hoe-*) → DARK ============
   hoeren.css defines these tokens ON .hoeren-page (a closer ancestor than
   :root/html), so the remap MUST also target .hoeren-page — otherwise the
   light values set on .hoeren-page win by inheritance over an html-level remap. */
html[data-theme="dark"] .hoeren-page {
    --hoe-border:        #2a3647;
    --hoe-border-strong: #3a495c;
    --hoe-text:          #e7edf4;
    --hoe-text-muted:    #a3b2c4;
    --hoe-bg-soft:       #151e2a;
    --hoe-bg-tint:       rgba(255, 255, 255, .07);
    --hoe-accent-soft:   rgba(59, 130, 246, .16);
    --hoe-info-soft:     rgba(2, 132, 199, .20);
    --hoe-success-soft:  rgba(34, 197, 94, .18);
    --hoe-warning-soft:  rgba(245, 158, 11, .18);
    --hoe-danger-soft:   rgba(239, 68, 68, .18);
    --hoe-premium-gold-soft: rgba(176, 137, 0, .20);
}
/* Neutral white/gray surfaces (hoeren.css hardcodes many #fff/#ffffff cards,
   panels, pills, chips and buttons that the tokens don't reach). */
html[data-theme="dark"] .hoeren-page [class*="hoeren-"][class*="card"],
html[data-theme="dark"] .hoeren-page [class*="hoeren-"][class*="panel"],
html[data-theme="dark"] .hoeren-page .hoeren-theme-card,
html[data-theme="dark"] .hoeren-page .hoeren-variant-card,
html[data-theme="dark"] .hoeren-page .hoeren-stmt,
html[data-theme="dark"] .hoeren-page .hoeren-pill,
html[data-theme="dark"] .hoeren-page .hoeren-chip,
html[data-theme="dark"] .hoeren-page .hoeren-answer-option,
html[data-theme="dark"] .hoeren-page .hoeren-explanations__chip,
html[data-theme="dark"] .hoeren-page .hoeren-btn--solution,
html[data-theme="dark"] .hoeren-page .hoeren-btn--ghost {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .hoeren-page .hoeren-hero {
    background: linear-gradient(135deg, var(--sf-surface) 0%, var(--sf-bg-subtle) 60%, var(--sf-bg) 100%);
}
html[data-theme="dark"] .hoeren-page .hoeren-audio-panel,
html[data-theme="dark"] .hoeren-page .hoeren-audio-panel--noaudio,
html[data-theme="dark"] .hoeren-page .hoeren-noaudio-panel {
    /* !important so the premium gradient beats the wildcard [class*="panel"]
       surface catch-all above (which has higher specificity). */
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-surface-muted) 100%) !important;
    border-color: var(--sf-border);
    color: var(--sf-text);
}
/* muted sub-surfaces + audio controls */
html[data-theme="dark"] .hoeren-page .hoeren-answer-group--segmented,
html[data-theme="dark"] .hoeren-page .hoeren-audio-speed-btn,
html[data-theme="dark"] .hoeren-page .hoeren-audio-speed-btn.is-active,
html[data-theme="dark"] .hoeren-page .hoeren-audio-scrubber {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
/* answer-option interaction + result states (must stay legible on dark) */
html[data-theme="dark"] .hoeren-page .hoeren-answer-option:hover {
    background: var(--sf-surface-hover);
    color: var(--sf-text);
    border-color: var(--sf-border-strong);
}
html[data-theme="dark"] .hoeren-page .hoeren-answer-group input[type="radio"]:checked + .hoeren-answer-option {
    background: rgba(59, 130, 246, .22);
    border-color: #3b82f6;
    color: #dbeafe;
}
html[data-theme="dark"] .hoeren-page .hoeren-answer-option--chosen-correct {
    background: rgba(34, 197, 94, .20) !important;
    border-color: rgba(34, 197, 94, .55) !important;
    color: #bbf7d0 !important;
}
html[data-theme="dark"] .hoeren-page .hoeren-answer-option--chosen-incorrect {
    background: rgba(239, 68, 68, .20) !important;
    border-color: rgba(239, 68, 68, .55) !important;
    color: #fecaca !important;
}
/* hardcoded dark-blue "no audio" text → light */
html[data-theme="dark"] .hoeren-page .hoeren-noaudio-panel__body strong,
html[data-theme="dark"] .hoeren-page .hoeren-noaudio-panel__body span,
html[data-theme="dark"] .hoeren-page .hoeren-noaudio-panel__icon,
html[data-theme="dark"] .hoeren-page .hoeren-state-badge--noaudio { color: #93c5fd; }
/* hardcoded semantic state text (dark greens/blues) → light, legible on dark tints */
html[data-theme="dark"] .hoeren-page .hoeren-state-badge--open,
html[data-theme="dark"] .hoeren-page .hoeren-state-badge--free,
html[data-theme="dark"] .hoeren-page .hoeren-state-badge--score,
html[data-theme="dark"] .hoeren-page .hoeren-reveal-chip--correct,
html[data-theme="dark"] .hoeren-page .hoeren-progress-mini--checked,
html[data-theme="dark"] .hoeren-page .hoeren-progress-pill--completed,
html[data-theme="dark"] .hoeren-page .hoeren-progress-saved,
html[data-theme="dark"] .hoeren-page .hoeren-progress-saved__body strong,
html[data-theme="dark"] .hoeren-page .hoeren-progress-saved__chip--complete { color: #86efac !important; }
html[data-theme="dark"] .hoeren-page .hoeren-state-badge--solution,
html[data-theme="dark"] .hoeren-page .hoeren-progress-mini--solution { color: #93c5fd !important; }

/* ============ WRITING (schreiben) — no token system, explicit ============ */
html[data-theme="dark"] .schreiben-card,
html[data-theme="dark"] .sw-block,
html[data-theme="dark"] .sw-editor,
html[data-theme="dark"] .sw-ai-panel,
html[data-theme="dark"] .sr-panel,
html[data-theme="dark"] .sw-locked-card {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .sw-textarea {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .sw-textarea::placeholder { color: var(--sf-text-subtle); }
html[data-theme="dark"] .sr-panel--de,
html[data-theme="dark"] .sr-error-group__head { background: var(--sf-surface-muted); color: var(--sf-text); }
html[data-theme="dark"] .sr-error-group__head:hover { background: var(--sf-surface-hover); }
html[data-theme="dark"] .sr-panel--motivation {
    background: linear-gradient(180deg, rgba(234, 179, 8, .14), rgba(234, 179, 8, .06));
    border-color: rgba(234, 179, 8, .30);
}
html[data-theme="dark"] .schreiben-signal--new,
html[data-theme="dark"] .sr-jump { background: var(--sf-surface-muted); color: var(--sf-text-muted); }
html[data-theme="dark"] .schreiben-card__title,
html[data-theme="dark"] .sw-block__de,
html[data-theme="dark"] .sw-locked-card__title,
html[data-theme="dark"] .sr-de-text,
html[data-theme="dark"] .sr-verb__de,
html[data-theme="dark"] .sr-phrase__de,
html[data-theme="dark"] .sr-bar__val,
html[data-theme="dark"] .sr-onboard__title { color: var(--sf-text); }
html[data-theme="dark"] .sr-bar__band--med { background: rgba(245, 158, 11, .18); color: #fbbf24; }
html[data-theme="dark"] .sw-block__collapse:hover,
html[data-theme="dark"] .sr-copy-btn:hover { background: var(--sf-surface-hover); color: var(--sf-text); }
html[data-theme="dark"] .sw-result-failed--premium {
    background: linear-gradient(180deg, rgba(239, 68, 68, .12), rgba(239, 68, 68, .04));
    border-color: rgba(239, 68, 68, .30);
}

/* ============ PRÜFUNG / EXAM ============ */
html[data-theme="dark"] .exam-card { background: var(--sf-surface); border-color: var(--sf-border); color: var(--sf-text); }
html[data-theme="dark"] .exam-start-box { background: var(--sf-surface-muted); border-color: var(--sf-border); }

/* ============ PERFORMANCE — remaining hardcoded ============ */
html[data-theme="dark"] .perf-next-action {
    background: linear-gradient(135deg, var(--sf-surface) 0%, var(--sf-primary-soft) 100%);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .perf-subnav a.active { background: var(--sf-primary-soft); color: var(--sf-text); }
html[data-theme="dark"] .perf-table th { background: var(--sf-surface-muted); color: var(--sf-text-muted); border-color: var(--sf-border); }

/* ============ PRICING CARDS + BADGES ============ */
html[data-theme="dark"] .pricing-card { background: var(--sf-surface); border-color: var(--sf-border); color: var(--sf-text); }
html[data-theme="dark"] .sf-public .pricing-card.featured,
html[data-theme="dark"] .pricing-card.featured {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-primary-soft) 100%);
    border-color: rgba(59, 130, 246, .55);
}
html[data-theme="dark"] .pricing-billed-once,
html[data-theme="dark"] .pricing-price-was,
html[data-theme="dark"] .pricing-per-month { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-features li { color: var(--sf-text); border-color: var(--sf-border); }

/* ── Pricing card accent bar (.pricing-card-accent): brighter blue for dark backgrounds */
html[data-theme="dark"] .sf-public .pricing-card-accent {
    background: rgba(93, 167, 255, 0.35);
}
html[data-theme="dark"] .sf-public .pricing-card:not(.featured):hover .pricing-card-accent {
    background: rgba(93, 167, 255, 0.90);
}
html[data-theme="dark"] .sf-public .pricing-card.featured .pricing-card-accent {
    background: rgba(93, 167, 255, 0.70);
    opacity: 0.85;
}
html[data-theme="dark"] .sf-public .pricing-card.featured:hover .pricing-card-accent {
    background: rgba(93, 167, 255, 0.95);
    opacity: 1;
}
/* Feature icon color on dark surfaces */
html[data-theme="dark"] .pricing-feat-icon { color: #93c5fd; opacity: 1; }
/* Standard card border color in dark — ensure it's visible on dark surfaces */
html[data-theme="dark"] .sf-public .pricing-card:not(.featured) {
    border-color: var(--sf-border-strong);
}

/* ============ AFFILIATE DASHBOARD ============ */
html[data-theme="dark"] .aff-tier-block,
html[data-theme="dark"] .aff-promo-textbox,
html[data-theme="dark"] .aff-promo-lang-pill {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .aff-saved-card { background: var(--sf-surface-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .aff-promo-card {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-bg-subtle) 100%);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .aff-stat-value { color: var(--sf-text); }
html[data-theme="dark"] .aff-payout-banner-cta .btn:hover { background: var(--sf-surface-hover); }

/* ============================================================================
   PREMIUM SCROLLBARS — intentional CROSS-THEME upgrade (light + dark)
   Replaces the large default gray scrollbars with a thin, subtle, premium bar.
   The base rules apply in BOTH themes (task requirement); the dark block below
   only re-tints them for the navy surface. Per-component scrollbar rules in
   other files remain more specific and continue to win where defined.
   ============================================================================ */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .75);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html[data-theme="dark"] * { scrollbar-color: rgba(122, 143, 163, .5) transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(122, 143, 163, .45); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, .75); }

/* ============================================================
   Hören True/False answer table (Task 16) — dark palette.
   Remaps the self-contained .hoeren-tf component tokens onto the
   --sf-* dark surface system. Applies in Lernen and Prüfung.
   All row tints / dot colours derive from these tokens, so they
   adapt automatically without per-rule dark overrides.
   ============================================================ */
html[data-theme="dark"] .hoeren-tf {
    --tf-surface:       var(--sf-surface);
    --tf-surface-alt:   var(--sf-surface-muted);
    --tf-text:          var(--sf-text);
    --tf-muted:         var(--sf-text-muted);
    --tf-border:        var(--sf-border);
    --tf-border-strong: var(--sf-border-strong);
    --tf-accent:        #3b82f6;
    --tf-accent-soft:   rgba(59, 130, 246, .20);
    --tf-success:       #22c55e;
    --tf-success-soft:  rgba(34, 197, 94, .20);
    --tf-danger:        #ef4444;
    --tf-danger-soft:   rgba(239, 68, 68, .20);
    --tf-info:          #38bdf8;
    --tf-info-soft:     rgba(56, 189, 248, .18);
    --tf-ok-row:        rgba(34, 197, 94, .10);
    --tf-bad-row:       rgba(239, 68, 68, .10);
    --tf-info-row:      rgba(56, 189, 248, .10);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -20px rgba(0, 0, 0, .75);
}
html[data-theme="dark"] .hoeren-tf-audio {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
}

/* ============================================================================
   TASK #1 — LESSON/EXERCISE DARK MODE REPAIR
   Closes remaining hardcoded-#fff gaps inside Lesen/Sprachbausteine/Hören/
   Schreiben/Prüfung "paper" surfaces that Task 15C/16 didn't reach. CSS-only,
   scoped to html[data-theme="dark"]; no logic, markup, or Light Mode changes.
   ============================================================================ */

/* ---- Lesen: result/review breakdown row (teil1/2/3 post-check summary) ---- */
html[data-theme="dark"] .se-result-breakdown-row {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .se-result-breakdown-part { color: var(--sf-text); }

/* ---- Lesen Teil 2: heading-match slot chrome (clear btn + count pill) ---- */
html[data-theme="dark"] .t1-slot-clear {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .t1-headings-count {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--t1-accent-dk, #93c5fd);
}

/* ---- Prüfung: stepper pills (preparation/step navigation chrome) ---- */
html[data-theme="dark"] .exam-stepper a,
html[data-theme="dark"] .exam-stepper span {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-stepper a.active,
html[data-theme="dark"] .exam-stepper span.active {
    background: rgba(59, 130, 246, .20);
    border-color: #3b82f6;
    color: #dbeafe;
}

/* ---- Schreiben: remaining hardcoded #fff "paper" surfaces ---- */
html[data-theme="dark"] .sw-actions,
html[data-theme="dark"] .sw-result-failed,
html[data-theme="dark"] .sw-header__nav-btn,
html[data-theme="dark"] .sr-error-group,
html[data-theme="dark"] .sr-skeleton__card,
html[data-theme="dark"] .sr-empty-structure__example,
html[data-theme="dark"] .sw-aufgabe__item,
html[data-theme="dark"] .sr-focus__icon,
html[data-theme="dark"] .sr-onboard__icon,
html[data-theme="dark"] .sr-progress__breakdown li {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .sr-view-tab[aria-selected="true"] {
    background: var(--sf-surface);
    color: var(--sf-text);
}
html[data-theme="dark"] .sw-focus-toggle,
html[data-theme="dark"] .schreiben-jump-btn,
html[data-theme="dark"] .sw-char-btn {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .sw-char-btn:hover { background: var(--sf-surface-hover); }
html[data-theme="dark"] .sw-editor__title,
html[data-theme="dark"] .sr-panel--feedback { color: var(--sf-text); }
html[data-theme="dark"] .sr-panel--feedback { background: var(--sf-surface); border-color: var(--sf-border); }
/* word-count chip/hint pills: keep semantic tint, lift text for contrast */
html[data-theme="dark"] .sr-wc-hint--good  { background: rgba(34, 197, 94, .16); color: #86efac; border-color: rgba(34, 197, 94, .35); }
html[data-theme="dark"] .sr-wc-hint--short { background: rgba(245, 158, 11, .16); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
html[data-theme="dark"] .sr-wc-hint--long  { background: rgba(249, 115, 22, .16); color: #fdba74; border-color: rgba(249, 115, 22, .35); }

/* ---- Sprachbausteine (word bank / cloze) — extra legibility pass ---- */
html[data-theme="dark"] #word-bank .word-btn,
html[data-theme="dark"] .word-bank .word-btn {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] #word-bank .word-btn:hover,
html[data-theme="dark"] .word-bank .word-btn:hover { background: var(--sf-surface-hover); }
html[data-theme="dark"] .blank-slot { color: var(--sf-text-muted); }
html[data-theme="dark"] .blank-slot.filled { color: #bfdbfe; }

/* ---- Lesen Teil1/2/3: reading-text panel (found via QA — hardcoded
   cream/white backgrounds not covered by earlier passes) ---- */
html[data-theme="dark"] .se-text-panel,
html[data-theme="dark"] .se-text-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .se-text-panel-head {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-surface-muted) 100%);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .se-text-panel-icon { background: var(--sf-primary-soft); }
html[data-theme="dark"] .se-text-panel-title,
html[data-theme="dark"] .se-text-card-head,
html[data-theme="dark"] .se-question-card-head { color: var(--sf-text); }
html[data-theme="dark"] .se-text-panel-count,
html[data-theme="dark"] .se-text-card-tag {
    background: var(--sf-surface-muted);
    color: var(--sf-text-muted);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .se-text-passage {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
}
html[data-theme="dark"] .se-feedback-item { background: var(--sf-surface); border-color: var(--sf-border); }
html[data-theme="dark"] .se-feedback-item.is-correct { background: rgba(34, 197, 94, .14); }
html[data-theme="dark"] .se-feedback-item.is-wrong   { background: rgba(239, 68, 68, .14); }

/* ---- Lesen Teil3 (drag/tap situations & statements) ---- */
html[data-theme="dark"] .t3-ad,
html[data-theme="dark"] .t3-stmt,
html[data-theme="dark"] .t3-chip,
html[data-theme="dark"] .t3-ans-pill,
html[data-theme="dark"] .t3-slot {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .t3-ad-head,
html[data-theme="dark"] .t3-heading-count,
html[data-theme="dark"] .t3-stmt-status,
html[data-theme="dark"] .t3-ad-body--none .t3-ad-head {
    background: var(--sf-surface-muted);
    color: var(--sf-text-muted);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .t3-keyword-note,
html[data-theme="dark"] .t3-board,
html[data-theme="dark"] .t3-ad-assigned,
html[data-theme="dark"] .t3-stmt.is-active {
    background: var(--sf-primary-soft);
    color: var(--sf-text);
}
html[data-theme="dark"] .t3-heading-icon,
html[data-theme="dark"] .t3-stmt-num,
html[data-theme="dark"] .t3-slot.is-dropTarget,
html[data-theme="dark"] .t3-stmt-status.is-set { background: var(--sf-surface-hover); color: #93c5fd; }
html[data-theme="dark"] .t3-stmt.is-assigned { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .4); }
html[data-theme="dark"] .t3-stmt-verdict.is-wrong,
html[data-theme="dark"] .t3-ans-pill.is-wrong,
html[data-theme="dark"] .t3-slot-clear:hover,
html[data-theme="dark"] .t3-chip-remove:hover,
html[data-theme="dark"] .t3-stmt-clear:hover { background: rgba(239, 68, 68, .16); color: #fecaca; }
html[data-theme="dark"] .t3-board--exam { background: var(--sf-border); }

/* ============================================================
   Task 1B correction pass — remaining hardcoded light surfaces
   found across Lesen / Sprachbausteine / Hören / Schreiben /
   Prüfung exercise pages (student_exercise.css, teil1.css,
   hoeren.css, schreiben.css, exam.css). These selectors were
   confirmed via static literal-hex audit + browser QA to still
   render white/light against the dark shell.
   ============================================================ */

/* ---- Lesen Teil 1 (teil1.css) — reading-passage "paper" card ---- */
html[data-theme="dark"] .t1-text-card-head,
html[data-theme="dark"] .t1-headings-head {
    background: var(--t1-bg-surface);
    border-color: var(--t1-border-soft);
}
html[data-theme="dark"] .t1-text-content {
    background: var(--t1-bg-canvas);
    border-color: var(--t1-border);
    color: var(--t1-text);
}
html[data-theme="dark"] .t1-summary,
html[data-theme="dark"] .t1-answered-count,
html[data-theme="dark"] .t1-heading-tile.is-locked,
html[data-theme="dark"] .t1-tile-num,
html[data-theme="dark"] .t1-static-num {
    background: var(--t1-bg-canvas);
    border-color: var(--t1-border-soft);
    color: var(--t1-text-muted);
}
html[data-theme="dark"] .t1-heading-tile.is-locked .t1-tile-num {
    background: var(--t1-border);
}
html[data-theme="dark"] .t1-show-solution-link:hover,
html[data-theme="dark"] .t1-show-solution-link:focus-visible {
    background: var(--t1-bg-canvas);
}
html[data-theme="dark"] .t1-title-kws-marks mark {
    background: var(--t1-accent-soft);
    color: var(--t1-text);
}

/* ---- Lesen / Sprachbausteine shared panels (student_exercise.css) ---- */
html[data-theme="dark"] .se-divider,
html[data-theme="dark"] .se-chip-group[data-se-chip-group]::before {
    background: var(--t1-border);
}
html[data-theme="dark"] .se-answered-count,
html[data-theme="dark"] .se-result-strip--empty .se-result-strip-icon {
    background: var(--t1-bg-canvas);
    color: var(--t1-text-muted);
}
html[data-theme="dark"] .se-question-head,
html[data-theme="dark"] .se-wordbank-head {
    background: var(--t1-bg-surface);
    border-color: var(--t1-border-soft);
}
html[data-theme="dark"] .se-banner--warning {
    background: linear-gradient(180deg, rgba(245, 158, 11, .16) 0%, rgba(180, 83, 9, .12) 100%);
    border-color: rgba(245, 158, 11, .35);
    color: var(--t1-text);
}
html[data-theme="dark"] .se-banner--warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
html[data-theme="dark"] .se-timer-card.is-warning {
    background: linear-gradient(135deg, var(--t1-bg-surface) 0%, rgba(245, 158, 11, .14) 100%);
}
html[data-theme="dark"] .se-timer-card.is-warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
html[data-theme="dark"] .se-timer-card.is-warning .se-timer-card-icon,
html[data-theme="dark"] .se-landing-card--resume .se-landing-icon {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}
html[data-theme="dark"] .se-landing-card--resume::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
html[data-theme="dark"] .t3-ad-badge--x {
    background: var(--sf-surface-hover);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .sb-cloze-blank.sb-drop-ok {
    background: var(--t1-success-soft);
}
html[data-theme="dark"] .sb-cloze-blank.sb-drop-bad {
    background: var(--t1-danger-soft);
}

/* ---- Hören divider (hoeren.css) ---- */
html[data-theme="dark"] .hoeren-stmt-divider__line {
    background: linear-gradient(90deg, transparent, var(--hoe-border-strong), transparent);
}

/* ---- Schreiben editor + AI panel (schreiben.css) ---- */
html[data-theme="dark"] .sw-block__tr,
html[data-theme="dark"] .sw-feedback-lang,
html[data-theme="dark"] .sw-ai-step,
html[data-theme="dark"] .sw-shimmer,
html[data-theme="dark"] .sw-chip,
html[data-theme="dark"] .sw-show-task {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .sw-feedback-lang__btn:hover,
html[data-theme="dark"] .sw-ai-step__mark {
    background: var(--sf-surface-hover);
}
html[data-theme="dark"] .sw-ai-orb__icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(59, 130, 246, .2));
}
html[data-theme="dark"] .sw-ai-orb__dot {
    background: #818cf8;
}
html[data-theme="dark"] .sw-ai-step.is-done .sw-ai-step__mark {
    background: #10b981;
}
html[data-theme="dark"] .sw-toast {
    background: #0b1220;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}
html[data-theme="dark"] .sw-in-progress {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}
html[data-theme="dark"] .sw-in-progress:hover {
    background: rgba(245, 158, 11, .28);
}
html[data-theme="dark"] .sw-wordring__track {
    background: var(--sf-border);
}
html[data-theme="dark"] .sw-wordring__fill {
    background: var(--sf-text-subtle);
}
html[data-theme="dark"] .sw-wordring.is-low .sw-wordring__fill {
    background: #fcd34d;
}
html[data-theme="dark"] .sw-wordring.is-ok .sw-wordring__fill {
    background: #34d399;
}
html[data-theme="dark"] .sw-wordring.is-over .sw-wordring__fill {
    background: #fb923c;
}
html[data-theme="dark"] .sw-ai-btn--premium,
html[data-theme="dark"] .sw-aufgabe__num {
    background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 100%);
}
html[data-theme="dark"] .schreiben-upgrade-notice {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .35);
    color: var(--sf-text);
}

/* ---- Schreiben result / AI-score page (.sr-*) ---- */
html[data-theme="dark"] .sr-score {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-surface-muted) 100%);
}
html[data-theme="dark"] .sr-score__hero,
html[data-theme="dark"] .sr-summary__score {
    background: #1d4ed8;
}
html[data-theme="dark"] .sr-score__hero--low {
    background: linear-gradient(135deg, #7f1d1d 0%, #6b1616 100%);
}
html[data-theme="dark"] .sr-score__hero--med {
    background: linear-gradient(135deg, #78350f 0%, #5c3a10 100%);
}
html[data-theme="dark"] .sr-score__hero--strong {
    background: linear-gradient(135deg, #065f46 0%, #0e3a24 100%);
}
html[data-theme="dark"] .sr-bar__track,
html[data-theme="dark"] .sr-bar__track.sr-bar__track {
    background: var(--sf-border) !important;
}
html[data-theme="dark"] .sr-bar__fill,
html[data-theme="dark"] .sr-bar__fill.sr-bar__fill {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
}
html[data-theme="dark"] .sr-bar--low .sr-bar__fill {
    background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
}
html[data-theme="dark"] .sr-bar--med .sr-bar__fill {
    background: linear-gradient(90deg, #f59e0b, #b45309) !important;
}
html[data-theme="dark"] .sr-bar--strong .sr-bar__fill {
    background: linear-gradient(90deg, #10b981, #047857) !important;
}
html[data-theme="dark"] .sr-bar__band--low {
    background: rgba(239, 68, 68, .16);
}
html[data-theme="dark"] .sr-bar__band--strong {
    background: rgba(16, 185, 129, .16);
}
html[data-theme="dark"] .sr-panel--tips {
    background: linear-gradient(180deg, rgba(16, 185, 129, .12) 0%, rgba(16, 185, 129, .06) 100%);
}
html[data-theme="dark"] .sr-verb,
html[data-theme="dark"] .sr-phrase,
html[data-theme="dark"] .sr-lang-hint,
html[data-theme="dark"] .sr-panel--views .sr-views,
html[data-theme="dark"] .sr-howto,
html[data-theme="dark"] .sr-focus,
html[data-theme="dark"] .sr-onboard,
html[data-theme="dark"] .sw-result-failed__icon-wrap,
html[data-theme="dark"] .sw-result-failed__ref code {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
}
html[data-theme="dark"] del.sr-diff__del,
html[data-theme="dark"] .sr-diff__del {
    background: var(--t1-danger-soft);
}
html[data-theme="dark"] ins.sr-diff__ins,
html[data-theme="dark"] .sr-diff__ins {
    background: var(--t1-success-soft);
}
html[data-theme="dark"] .sr-tips__icon {
    background: var(--t1-success-soft);
}
html[data-theme="dark"] .sr-skeleton__hero,
html[data-theme="dark"] .sr-skeleton__bar,
html[data-theme="dark"] .sr-skeleton__line,
html[data-theme="dark"] .sr-skeleton__block {
    background: linear-gradient(90deg, var(--sf-surface-muted) 0%, var(--sf-surface-hover) 50%, var(--sf-surface-muted) 100%);
}
html[data-theme="dark"] .sr-progress__delta--up,
html[data-theme="dark"] .sr-progress__num--up {
    background: var(--t1-success-soft);
}
html[data-theme="dark"] .sr-progress__delta--down,
html[data-theme="dark"] .sr-progress__num--down {
    background: rgba(251, 146, 60, .16);
}
html[data-theme="dark"] .sr-progress__num--flat {
    background: var(--sf-surface-hover);
}

/* ---- Prüfung / exam.css ---- */
html[data-theme="dark"] .exam-topbar {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .exam-timer {
    background: rgba(2, 132, 199, .18);
    color: #7dd3fc;
    border-color: rgba(2, 132, 199, .35);
}
html[data-theme="dark"] .exam-timer.is-warning {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .35);
}
html[data-theme="dark"] .exam-timer.is-danger {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .35);
}
html[data-theme="dark"] .exam-result-hero {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
}

/* ============================================================
   Task #1C — Full-site Dark Mode audit fixes
   Additional gaps found by selector-aware static audit + manual
   browser QA that were not covered by the Task #1B exercise pass.
   All rules scoped under html[data-theme="dark"].
   ============================================================ */

/* ── Sidebar (public/student shared shell) ─────────────────── */
html[data-theme="dark"] .sidebar-outer {
    background: var(--sf-surface);
}
html[data-theme="dark"] .sidebar-collapse-btn {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .sidebar-collapse-btn:hover {
    background: var(--sf-primary-soft);
    border-color: rgba(59, 130, 246, .4);
    color: #93c5fd;
}
@media (max-width: 991.98px) {
    html[data-theme="dark"] .sidebar-outer {
        background: var(--sf-surface);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
}

/* ── Lesen Teil 1 title chips / heading-matching slots (style.css) ── */
html[data-theme="dark"] .t1-title-chip,
html[data-theme="dark"] .t1-card-chip {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] #t1-panel .t1-title-chip:hover {
    background: var(--sf-surface-hover);
}
html[data-theme="dark"] .t1-chip-num {
    background: var(--sf-surface-muted);
    color: var(--sf-text);
}
html[data-theme="dark"] .t1-title-chip-picked .t1-chip-num,
html[data-theme="dark"] .t1-card-chip-selected .t1-chip-num {
    background: rgba(59, 130, 246, .3) !important;
    color: #fff !important;
}
html[data-theme="dark"] .t1-slot {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border-strong);
}
html[data-theme="dark"] .t1-slot:hover {
    background: rgba(59, 130, 246, .1);
}
html[data-theme="dark"] .t1-text-block .card-header {
    background: var(--sf-surface) !important;
    border-bottom-color: var(--sf-border) !important;
    color: var(--sf-text);
}

/* ── Exercise result / completion cards (student_exercise.css) ── */
html[data-theme="dark"] .se-result-strip--strong {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--t1-success-tint) 100%);
}
html[data-theme="dark"] .se-result-strip--medium {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--t1-accent-tint) 100%);
}
html[data-theme="dark"] .se-result-strip--weak {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--t1-danger-tint) 100%);
}
html[data-theme="dark"] .se-landing-card--celebration {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--t1-success-tint) 100%);
}

/* ── Schreiben result page (schreiben.css .sr-*) ─────────────── */
html[data-theme="dark"] .sr-error {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .sr-summary {
    background: rgba(26, 36, 50, .92);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .sr-error-group__head:hover {
    background: var(--sf-surface-hover);
}
html[data-theme="dark"] .sr-progress {
    background: var(--sf-surface-muted);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .sr-progress__breakdown li {
    background: var(--sf-surface);
}
html[data-theme="dark"] .sr-progress__delta,
html[data-theme="dark"] .sr-progress__num {
    background: var(--sf-surface) !important;
    color: var(--sf-text) !important;
}
html[data-theme="dark"] .sr-progress__delta--up,
html[data-theme="dark"] .sr-progress__num--up {
    background: rgba(34, 197, 94, .16) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, .35) !important;
}
html[data-theme="dark"] .sr-progress__delta--down,
html[data-theme="dark"] .sr-progress__num--down {
    background: rgba(245, 158, 11, .16) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, .35) !important;
}
html[data-theme="dark"] .sr-progress__num--flat {
    background: rgba(148, 163, 184, .16) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, .3) !important;
}
html[data-theme="dark"] .sr-error__cell--orig {
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
}
html[data-theme="dark"] .sr-error__cell--corr {
    background: rgba(16, 185, 129, .14);
    color: #86efac;
}
html[data-theme="dark"] .sr-error__exp {
    color: var(--sf-text-muted);
}

/* ── Public site: pricing / checkout / guarantee cards ───────── */
html[data-theme="dark"] .pricing-include-chip,
html[data-theme="dark"] .pricing-hero-cta-wa,
html[data-theme="dark"] .checkout-bank-logo,
html[data-theme="dark"] .checkout-method-picker > button,
html[data-theme="dark"] .guarantee-card .guarantee-icon,
html[data-theme="dark"] .guarantee-card-compact .guarantee-icon {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .checkout-method-picker > button.is-selected {
    background: linear-gradient(180deg, var(--sf-surface-hover), var(--sf-primary-soft));
    color: #fff;
}
html[data-theme="dark"] .pricing-currency-sym,
html[data-theme="dark"] .checkout-section-icon {
    background: color-mix(in oklab, var(--bs-primary, #0d6efd) 24%, var(--sf-surface));
    color: #fff;
}
html[data-theme="dark"] .billing-plan-preview-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .billing-modal .form-control {
    background-color: var(--sf-surface-muted);
    color: var(--sf-text);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .subscription-progress {
    background: var(--sf-surface-muted);
}
html[data-theme="dark"] .dl-community-section {
    background: var(--sf-bg-subtle);
}

/* ── Premium sitewide scrollbars ─────────────────────────────── */
html[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: var(--sf-border-strong) var(--sf-bg-subtle);
}
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--sf-bg-subtle);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--sf-border-strong);
    border-radius: 8px;
    border: 2px solid var(--sf-bg-subtle);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a5a70;
}
html[data-theme="dark"] .t1-card-chips-grid::-webkit-scrollbar-thumb {
    background: var(--sf-border-strong);
}

/* ============================================================
   TASK #1D — Dark Mode Remaining Defects Fix
   ============================================================ */

/* ---- 1. Sidebar: shell, text, icons, badges, collapse toggle ---- */
html[data-theme="dark"] .student-sidebar {
    background: var(--sf-surface) !important;
}
html[data-theme="dark"] .sidebar-nav .nav-link,
html[data-theme="dark"] .student-sidebar .sidebar-nav .nav-link {
    color: var(--sf-text);
}
html[data-theme="dark"] .sidebar-nav .nav-link i,
html[data-theme="dark"] .student-sidebar .sidebar-nav .nav-link i {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .sidebar-nav .nav-link.active i,
html[data-theme="dark"] .student-sidebar .sidebar-nav .nav-link.active i {
    color: #fff;
}
html[data-theme="dark"] .sidebar-nav .nav-link.text-danger {
    color: #f87171;
}
html[data-theme="dark"] .sidebar-nav .nav-link.text-danger i {
    color: #f87171;
}
html[data-theme="dark"] .profile-email {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .sidebar-collapse-btn {
    background: var(--sf-surface) !important;
    border-color: var(--sf-border) !important;
    color: var(--sf-text-muted) !important;
}
html[data-theme="dark"] .sidebar-collapse-btn:hover {
    background: var(--sf-primary-soft) !important;
    border-color: rgba(59, 130, 246, .4) !important;
    color: #93c5fd !important;
}

/* ---- 2. Lesen Teil 1 — "Your Answer" card (Lernen + Prüfung) ---- */
html[data-theme="dark"] .t1-answer-display {
    background: var(--t1-bg-canvas);
    border-color: var(--t1-border);
}
html[data-theme="dark"] .t1-answer-pill,
html[data-theme="dark"] .t1-answer-correct {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
}
html[data-theme="dark"] .t1-answer-pill.is-wrong {
    background: var(--t1-danger-soft);
    color: var(--t1-danger-text);
}
html[data-theme="dark"] .t1-answer-arrow,
html[data-theme="dark"] .t1-answer-arrow .bi {
    color: var(--t1-text-muted);
}
html[data-theme="dark"] .se-feedback-badge {
    background: var(--sf-primary-soft);
    color: #93c5fd;
}

/* ---- 3. Lesen Teil 3 — ads/situations/Anzeige/chips black text (Lernen + Prüfung) ---- */
html[data-theme="dark"] .t3-ad-body,
html[data-theme="dark"] .t3-ad-body.german-text,
html[data-theme="dark"] .t3-stmt-text,
html[data-theme="dark"] .t3-ad-name,
html[data-theme="dark"] .t3-board .t3-ad-body,
html[data-theme="dark"] .t3-board .t3-ad-body.german-text,
html[data-theme="dark"] .t3-board .t3-stmt-text,
html[data-theme="dark"] .t3-board .t3-ad-name,
html[data-theme="dark"] .t3-board .se-question-text,
html[data-theme="dark"] .t3-board .se-question-text.german-text,
html[data-theme="dark"] .t3-board--exam .se-chip-title,
html[data-theme="dark"] .t3-board--exam .se-chip-preview {
    color: var(--t1-text) !important;
}
html[data-theme="dark"] .t3-chip-title {
    color: #93c5fd !important;
}
html[data-theme="dark"] .t3-chip-text,
html[data-theme="dark"] .t3-ad-grip {
    color: var(--t1-text-muted) !important;
}
html[data-theme="dark"] .t3-chip {
    background: var(--t1-bg-surface);
    border-color: var(--t1-border);
}
html[data-theme="dark"] .t3-board--exam .t3-ad--none .t3-ad-head {
    background: var(--t1-accent-tint);
}

/* ---- 4. Sprachbausteine Teil 1 — Reading Text + Tasks (Lernen + Prüfung) ---- */
html[data-theme="dark"] .se-text-passage {
    background: var(--t1-bg-canvas);
    border-color: var(--t1-border);
    color: var(--t1-text);
}
html[data-theme="dark"] .sb-cloze {
    color: var(--t1-text) !important;
}

/* ---- 5-9. Prüfung / Sprachbausteine — "Time Remaining" / "Time Spent" cards ----
   Root cause: pruefung_step.php renders the exam timer/answer UI with the
   .se-timer-card component (student_exercise.css), not .exam-timer
   (exam.css, used only by /student/exam/session.php). Only the .is-warning /
   .is-danger variants of .se-timer-card had dark overrides — the base/normal
   state (most of the countdown) was left with its hardcoded white gradient. */
html[data-theme="dark"] .se-timer-card {
    background: linear-gradient(135deg, var(--t1-bg-surface) 0%, var(--t1-accent-tint) 100%);
    border-color: var(--t1-border);
}
html[data-theme="dark"] .se-timer-card-icon {
    background: var(--t1-accent-soft);
    color: #93c5fd;
}
html[data-theme="dark"] .se-timer-card-label {
    color: var(--t1-text-muted);
}
html[data-theme="dark"] .se-timer-card-value {
    color: var(--t1-text);
}

/* ---- 11. /student/hoeren — "Your Hören progress" card ---- */
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary {
    background: linear-gradient(135deg, var(--hoe-bg-soft) 0%, var(--sf-surface-muted) 100%);
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__title,
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__metric-value,
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__stat {
    color: var(--hoe-text);
}
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__metric-label,
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__stat--muted {
    color: var(--hoe-text-muted, #a3b2c4);
}
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__empty strong {
    color: var(--hoe-text);
}
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__empty p {
    color: var(--hoe-text-muted, #a3b2c4);
}
html[data-theme="dark"] .hoeren-page .hoeren-progress-summary__chip--muted {
    background: var(--hoe-bg-tint);
    color: var(--hoe-text-muted, #a3b2c4);
}

/* ---- 12-14. Hören Teil 1/2/3 — Back button, flow shell, stepper, audio actions ---- */
html[data-theme="dark"] .hoeren-page .hoeren-flow {
    background: var(--hoe-bg-tint);
}
html[data-theme="dark"] .hoeren-page .hoeren-flow__step {
    background: var(--hoe-bg-soft);
    border-color: var(--hoe-border);
    color: var(--hoe-text);
}
html[data-theme="dark"] .hoeren-page .hoeren-flow__step.is-active {
    background: var(--hoe-accent-soft);
    color: #93c5fd;
}
html[data-theme="dark"] .hoeren-page .hoeren-flow__helper {
    color: var(--hoe-text-muted, #a3b2c4);
}
html[data-theme="dark"] .hoeren-page .hoeren-variant-stepper {
    background: var(--hoe-bg-soft);
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .hoeren-page .hoeren-variant-stepper__item {
    color: var(--hoe-text-muted, #a3b2c4);
}
html[data-theme="dark"] .hoeren-page .hoeren-variant-stepper__item.is-active {
    background: var(--hoe-accent-soft);
    color: #93c5fd;
}
html[data-theme="dark"] .hoeren-page .hoeren-audio-actions {
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .hoeren-page .hoeren-audio-seek-btn {
    background: var(--hoe-bg-soft);
    border-color: var(--hoe-border);
    color: var(--hoe-text);
}
html[data-theme="dark"] .hoeren-page .hoeren-audio-seek-btn:hover {
    background: var(--hoe-accent-soft);
    color: #93c5fd;
}
html[data-theme="dark"] .hoeren-page .hoeren-audio-speed {
    background: var(--hoe-bg-tint);
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .hoeren-page a.btn-outline-secondary,
html[data-theme="dark"] .hoeren-page .btn-outline-secondary {
    background: transparent;
    border-color: var(--hoe-border-strong, var(--sf-border));
    color: var(--hoe-text, var(--sf-text));
}
html[data-theme="dark"] .hoeren-page a.btn-outline-secondary:hover,
html[data-theme="dark"] .hoeren-page .btn-outline-secondary:hover {
    background: var(--sf-surface-hover);
    color: var(--sf-text);
}

/* ============================================================
   TASK #2 — /student/exam B1/B2 landing redesign — Dark Mode
   ============================================================ */
html[data-theme="dark"] .exam-level-switch {
    background: var(--sf-bg-subtle);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .exam-level-switch__btn {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-level-switch__btn:hover {
    color: var(--sf-text);
    background: var(--sf-surface);
}
html[data-theme="dark"] .exam-level-switch__btn.is-active {
    background: var(--sf-surface);
    color: #9db2ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .exam-stat-card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .exam-card__title,
html[data-theme="dark"] .exam-stat-card__value,
html[data-theme="dark"] .exam-active-panel__title {
    color: var(--sf-text);
}
html[data-theme="dark"] .exam-stat-card__label,
html[data-theme="dark"] .exam-stat-card__unit,
html[data-theme="dark"] .exam-sections__heading {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-stat-card__icon {
    background: rgba(157, 178, 255, .16);
    color: #9db2ff;
}
html[data-theme="dark"] .exam-level-badge {
    background: #4f46e5;
    color: #fff;
}

html[data-theme="dark"] .exam-chip {
    background: var(--sf-bg-subtle);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-chip--warn {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .45);
    color: #f5b95c;
}

html[data-theme="dark"] .exam-active-panel {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .4);
}
html[data-theme="dark"] .exam-active-panel--other {
    background: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .4);
}
html[data-theme="dark"] .exam-active-panel__icon {
    color: #9db2ff;
}
html[data-theme="dark"] .exam-active-panel--other .exam-active-panel__icon {
    color: #f5b95c;
}
html[data-theme="dark"] .exam-active-panel__body p {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-missing-list {
    color: #f5b95c;
}
html[data-theme="dark"] .exam-back-link {
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .exam-back-link:hover {
    color: var(--sf-text);
}

/* ============================================================
   EXAM HÖREN AUDIO PLAYER — Dark Mode
   (.exam-render--hoeren scope, parallel to .hoeren-page dark rules)
   ============================================================ */
html[data-theme="dark"] .exam-render--hoeren {
    --hoe-border:        #2a3647;
    --hoe-border-strong: #3a495c;
    --hoe-text:          #e7edf4;
    --hoe-text-muted:    #a3b2c4;
    --hoe-bg-soft:       #151e2a;
    --hoe-bg-tint:       rgba(255, 255, 255, .07);
    --hoe-accent-soft:   rgba(59, 130, 246, .16);
    --exam-hoe-track:    #2a3647;
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-panel,
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-panel--noaudio {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-surface-muted) 100%) !important;
    border-color: var(--sf-border);
    color: var(--sf-text);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-panel__head { color: #93c5fd; }
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-actions {
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-seek-btn {
    background: var(--hoe-bg-soft);
    border-color: var(--hoe-border);
    color: var(--hoe-text);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-seek-btn:hover {
    background: var(--hoe-accent-soft);
    color: #93c5fd;
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-speed {
    background: var(--hoe-bg-tint);
    border-color: var(--hoe-border);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-speed-btn { color: var(--hoe-text-muted); }
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-speed-btn.is-active {
    background: var(--sf-surface-muted);
    color: #93c5fd;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-seek {
    background: linear-gradient(90deg, var(--hoe-accent, #2563eb) 0%, var(--hoe-accent, #2563eb) 0%, var(--exam-hoe-track, #2a3647) 0%) !important;
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-seek::-webkit-slider-thumb {
    background: var(--sf-surface);
    border-color: var(--hoe-accent, #3b82f6);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-seek::-moz-range-thumb {
    background: var(--sf-surface);
    border-color: var(--hoe-accent, #3b82f6);
}
html[data-theme="dark"] .exam-render--hoeren .hoeren-noaudio-panel__body strong,
html[data-theme="dark"] .exam-render--hoeren .hoeren-noaudio-panel__body span,
html[data-theme="dark"] .exam-render--hoeren .hoeren-noaudio-panel__icon { color: #93c5fd; }
html[data-theme="dark"] .exam-render--hoeren .hoeren-audio-hint { color: var(--hoe-text-muted); }

/* ============================================================================
   COMPONENT DARK MODE — select dropdowns + pricing page fixes
   These rules need to load AFTER Bootstrap to win specificity.
   ============================================================================ */

/* Select dropdown options readable in dark mode (Chromium) */
html[data-theme="dark"] select.form-select option,
html[data-theme="dark"] select option {
    background-color: #1a2432;
    color: #e7edf4;
}

/* Currency selector text */
html[data-theme="dark"] .pricing-currency-toggle select,
html[data-theme="dark"] .currency-selector select,
html[data-theme="dark"] select.currency-select {
    color: var(--sf-text) !important;
    background-color: var(--sf-surface) !important;
}
html[data-theme="dark"] .pricing-currency-toggle select option,
html[data-theme="dark"] .currency-selector select option,
html[data-theme="dark"] select.currency-select option {
    background-color: #1a2432 !important;
    color: #e7edf4 !important;
}

/* Pricing page text visibility */
html[data-theme="dark"] .pricing-header,
html[data-theme="dark"] .pricing-page .section-title,
html[data-theme="dark"] .pricing-page .section-subtitle,
html[data-theme="dark"] .pricing-page .lead,
html[data-theme="dark"] .pricing-page p.text-muted,
html[data-theme="dark"] .pricing-page .text-muted {
    color: var(--sf-text-muted) !important;
}
html[data-theme="dark"] .pricing-page h1,
html[data-theme="dark"] .pricing-page h2,
html[data-theme="dark"] .pricing-page h3 {
    color: var(--sf-text) !important;
}

html[data-theme="dark"] .pricing-card .text-muted,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .pricing-subtitle {
    color: var(--sf-text-muted) !important;
}

html[data-theme="dark"] .pricing-popular-ribbon--value {
    background: linear-gradient(135deg, #92400e 0%, #b45309 55%, #92400e 100%);
    color: #fde68a;
}

html[data-theme="dark"] .pricing-card .btn-primary,
html[data-theme="dark"] .pricing-card .sf-btn--primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
html[data-theme="dark"] .pricing-card .btn-primary:hover,
html[data-theme="dark"] .pricing-card .sf-btn--primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Terms checkbox wrapper dark mode reinforcement */
html[data-theme="dark"] .sf-terms-checkbox-wrapper .form-check-label a {
    color: #93c5fd;
}
html[data-theme="dark"] .sf-terms-checkbox-wrapper .form-check-label a:hover {
    color: #bfdbfe;
}

/* ============================================================
   TASK 3 — Dark Mode Remaining Defects Fix
   ============================================================ */

/* ---- 1. Pricing intro / section lead text ---- */
html[data-theme="dark"] .pricing-lead,
html[data-theme="dark"] .pricing-intro-text,
html[data-theme="dark"] .pricing-section-lead { color: var(--sf-text-muted); }

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

/* ---- 2. Currency selector ---- */
html[data-theme="dark"] .pricing-currency-toggle {
    background: var(--sf-surface);
    border-color: var(--sf-border-strong);
    color: var(--sf-text);
}
html[data-theme="dark"] .pricing-currency-toggle:hover,
html[data-theme="dark"] .pricing-currency-toggle:focus {
    background: var(--sf-surface-muted);
    border-color: #60a5fa;
}
html[data-theme="dark"] .pricing-currency-note { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-currency-sym  { color: var(--sf-text); }
html[data-theme="dark"] .pricing-currency-code { color: var(--sf-text-muted); }

/* ---- 3. Pricing card body text ---- */
html[data-theme="dark"] .pricing-card.card {
    background: var(--sf-surface);
    border-color: var(--sf-border);
}
html[data-theme="dark"] .pricing-card.featured {
    background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-primary-soft) 100%);
    border-color: #3b82f6;
}
html[data-theme="dark"] .pricing-eyebrow-card   { color: var(--sf-text-subtle); }
html[data-theme="dark"] .pricing-best-for       { color: var(--sf-text-muted); }
html[data-theme="dark"] .pricing-per-month,
html[data-theme="dark"] .pricing-billed-once    { color: var(--sf-text-subtle); }
html[data-theme="dark"] .pricing-features li    { color: var(--sf-text-muted); }

/* ---- 4. Gold savings badge (pricing) ---- */
html[data-theme="dark"] .pricing-savings-badge {
    background: rgba(217,119,6,.16);
    color: #fcd34d;
    border-color: rgba(217,119,6,.35);
}

/* ---- 5. Disabled buttons ---- */
html[data-theme="dark"] .sf-btn:disabled,
html[data-theme="dark"] .sf-btn.disabled,
html[data-theme="dark"] .plan-cta:disabled {
    opacity: 0.42;
    filter: grayscale(0.3);
}
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled {
    opacity: 0.42;
}

/* ---- 6. Focus-within on plan cards (dark mode) ---- */
/* Activates when the CTA/link/button inside the card receives keyboard focus.
   No tabindex on the card itself — child control retains its own visible focus ring. */
html[data-theme="dark"] .pricing-card:focus-within {
    box-shadow: 0 16px 40px rgba(15,23,42,.28), 0 0 0 3px rgba(96,165,250,.45);
    border-color: #60a5fa;
}
html[data-theme="dark"] .billing-plan-preview-card:focus-within {
    box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 0 3px rgba(96,165,250,.40);
    border-color: rgba(96,165,250,.55);
}
/* ---- 6b. Dark mode text — guarantee ribbon, currency notice, per-card microcopy ---- */
/* The guarantee ribbon sits above the plan cards and inherits light text from an
   ancestor rule; override to white in dark mode for all child content. */
html[data-theme="dark"] .pricing-guarantee-ribbon,
html[data-theme="dark"] .pricing-guarantee-ribbon span,
html[data-theme="dark"] .pricing-guarantee-ribbon .dot,
html[data-theme="dark"] .pricing-guarantee-ribbon i { color: #fff; }
/* Currency notice: override the muted token to white for full legibility. */
html[data-theme="dark"] .pricing-currency-note,
html[data-theme="dark"] .pricing-currency-note span,
html[data-theme="dark"] .pricing-currency-note strong { color: #fff; }
/* Per-card CTA microcopy separators and text (text-success icons retain their own color). */
html[data-theme="dark"] .pricing-cta-microcopy,
html[data-theme="dark"] .pricing-cta-microcopy span,
html[data-theme="dark"] .pricing-cta-microcopy .sep { color: #fff; }

/* Pagination dark mode — Bootstrap data-bs-theme="dark" handles most cases;
   supplement for any unstyled Bootstrap instances (affiliate pages etc.) */
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text-muted);
}
html[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--sf-surface-muted);
    border-color: var(--sf-border-strong);
    color: var(--sf-text);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--sf-surface-muted);
    border-color: var(--sf-border);
    color: var(--sf-text-subtle);
}
html[data-theme="dark"] .pagination .page-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(96,165,250,.35);
}

/* ---- 7. Billing-plan-preview card accents in dark mode ---- */
html[data-theme="dark"] .billing-plan-preview-card.sf-plan-card--gold    { border-top-color: #f59e0b; }
html[data-theme="dark"] .billing-plan-preview-card.sf-plan-card--purple  { border-top-color: #a78bfa; }
html[data-theme="dark"] .billing-plan-preview-card.sf-plan-card--blue    { border-top-color: #60a5fa; }
html[data-theme="dark"] .billing-plan-preview-card.sf-plan-card--default { border-top-color: var(--sf-border-strong); }
html[data-theme="dark"] .billing-plan-preview-name   { color: var(--sf-text); }
html[data-theme="dark"] .billing-plan-preview-price-value { color: var(--sf-text); }
html[data-theme="dark"] .billing-plan-preview-price-label { color: var(--sf-text-subtle); }
html[data-theme="dark"] .billing-plan-preview-duration {
    background: rgba(96,165,250,.12);
    color: #93c5fd;
}

/* ---- 8. Empty states ---- */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .affiliate-empty-state,
html[data-theme="dark"] .pricing-empty { color: var(--sf-text-muted); }
html[data-theme="dark"] .empty-state i { color: var(--sf-text-subtle); }

/* ---- 9. Affiliate table dark mode ---- */
html[data-theme="dark"] .affiliate-table th { color: var(--sf-text-muted); }
html[data-theme="dark"] .affiliate-table td { color: var(--sf-text); }
html[data-theme="dark"] .affiliate-table tr:hover td { background: var(--sf-surface-muted); }

/* ---- 10. RTL: plan badges preserve readability with Arabic text ---- */
html[data-theme="dark"] .sf-plan-badge--sm { font-size: 0.7rem; }

/* ---- 11. Pricing-card border plan accent — dark mode override ---- */
html[data-theme="dark"] .pricing-card.sf-plan-card--gold    { border-top-color: #f59e0b !important; }
html[data-theme="dark"] .pricing-card.sf-plan-card--purple  { border-top-color: #a78bfa !important; }
html[data-theme="dark"] .pricing-card.sf-plan-card--blue    { border-top-color: #60a5fa !important; }
html[data-theme="dark"] .pricing-card.sf-plan-card--default { border-top-color: var(--sf-border-strong) !important; }

/* ---- 12. Profile-tab billing section muted text ---- */
html[data-theme="dark"] .billing-history-table .text-muted { color: var(--sf-text-muted) !important; }
html[data-theme="dark"] .billing-history-table .text-success { color: #86efac !important; }
html[data-theme="dark"] .billing-history-table .text-danger  { color: #fca5a5 !important; }

/* ---- 13. Mobile nav / sidebar profile text ---- */
html[data-theme="dark"] .nav-profile-name { color: var(--sf-text); }
html[data-theme="dark"] .nav-profile-role { color: var(--sf-text-muted); }

/* ============================================================
   TASK #6 — Dark Mode Site-wide Fix: remaining defects
   ============================================================ */

/* ── 1. Admin body background ───────────────────────────────
   .admin-body { background: #f4f6f9 } has higher specificity
   (class selector) than html[data-theme="dark"] body (element),
   so it wins and produces a light-grey page in dark mode.
   Override here with a matching specificity. */
html[data-theme="dark"] .admin-body {
    background: var(--sf-bg-subtle, #0b101a);
}

/* ── 2. Admin content editor (lc-editor) dark tokens ────────
   admin-content-editor.css defines --ace-surface / --ace-surface-2
   as hardcoded #ffffff / #f8fafc inside .lc-editor. These are
   more specific than anything Bootstrap sets, so form fields and
   card surfaces in the content editor remain white in dark mode.
   Remap the full token set under html[data-theme="dark"]. */
html[data-theme="dark"] .lc-editor {
    --ace-surface:        var(--sf-surface,      #151e2a);
    --ace-surface-2:      var(--sf-surface-muted, #1a2432);
    --ace-ink:            var(--sf-text,          #e7edf4);
    --ace-muted:          var(--sf-text-muted,    #a3b2c4);
    --ace-border:         var(--sf-border,        #2a3647);
    --ace-accent-soft:    rgba(99, 102, 241, .18);
    --ace-accent-border:  rgba(99, 102, 241, .4);
}

/* ── 3. Subscription expiry banner ──────────────────────────
   Inline styles removed from PHP; colors now live in style.css
   (light mode) and here (dark mode). Two CSS variants:
     .expiry-banner--expiring  (warm yellow)
     .expiry-banner--expired   (soft red)                       */
html[data-theme="dark"] .expiry-banner--expiring,
html[data-theme="dark"] .expiry-banner--expiring:not([style]) {
    background:         rgba(60, 30, 0, .80);
    border-bottom-color: rgba(180, 100, 0, .45);
    color:              #f5d9a0;
}
html[data-theme="dark"] .expiry-banner--expiring i {
    color: #f5a623;
}
html[data-theme="dark"] .expiry-banner--expired {
    background:         rgba(60, 10, 10, .82);
    border-bottom-color: rgba(180, 40, 40, .40);
    color:              #f5caca;
}
html[data-theme="dark"] .expiry-banner--expired i {
    color: #f57a7a;
}
html[data-theme="dark"] .expiry-banner .text-muted {
    color: #c8a87a;
}

/* ── 4. Email verification banner ───────────────────────────
   Inline styles removed from PHP; colors now live in style.css. */
html[data-theme="dark"] .verify-banner {
    background:         rgba(40, 35, 5, .85);
    border-bottom-color: rgba(160, 120, 0, .4);
    color:              #f5d9a0;
}
html[data-theme="dark"] .verify-banner i {
    color: #f5c97a;
}
html[data-theme="dark"] .verify-banner .text-muted {
    color: #c8a87a;
}