/* wiaacademy.com — site theme: DARK overlay (2026-10-29, family56 bundle D).
   ORIGINAL look = LIGHT (body #ffffff / #1a1a1a; other pages #f8f9fa·#f0f2f5). Every rule below is scoped to
   html[data-theme="dark"], so with nothing saved each page renders exactly as before. color-scheme is set by the engine.
   Load at the END of <head> (after each page's inline <style>; the engine wia-site-theme.js sets <html data-theme>
   before first paint). The kit /assets/site-kit/wia-academy-site-kit.js (NOT modified) draws header/footer by innerHTML
   on DOMContentLoaded and appends its own <style> to <head> at runtime — that style lands AFTER this file, so every
   kit rule here carries the extra `html[data-theme="dark"]` specificity (0,1,1 + …) and still wins.
   The kit also writes --wsk-primary / -primary-dark / -accent / -hero-* as INLINE style on <html> (per-branch colour) →
   those variables are deliberately NOT redefined (that would erase each branch's own colour); the places where the
   brand blue is used as TEXT (3.9:1 on dark) are re-pointed element by element to --t-link instead. Fills/gradients
   with white text keep the branch colour (white on #1B6FD8 = 5.1:1, same as the original).

   Pages: index (+ 6 branch subdomains that serve the same index.html, + 88 language copies with the same head),
   about · certificates · course · courses · exam-plan · instructors · my · privacy · refund · support · terms.
   certificates/instructors/my define their own :root tokens (--bg --bg-sec --text --text-sec --border …) → overridden
   in one token block (html[data-theme="dark"] beats :root). Everything else is hard-coded hex → element rules.

   Dark palette (ratios on page #0f1116 / card #181c26):
   ┌────────────────┬──────────┬────────────────────────────────────────────────────────────┐
   │ page bg        │ #0f1116  │ (soft band #141821)                                         │
   │ card           │ #181c26  │ header #12151c · tint (blue) #1b2638 · hover #222838        │
   │ text           │ #e9ecf2  │ 15.6:1 · 13.9:1                                             │
   │ text-soft      │ #a7afc0  │  8.4:1 ·  7.5:1                                             │
   │ text-muted     │ #8b94a7  │  6.1:1 ·  5.4:1                                             │
   │ line           │ #2a2f3d  │ hairline (decorative) — CONTROL borders use #6b7489 (3.4:1) │
   │ link (blue)    │ #7fb3f5  │  8.6:1 · 7.6:1  — replaces #1B6FD8 wherever it is text      │
   │ link-strong    │ #a9cdf8  │ 11.5:1 (hero badges, legal current)                         │
   │ accent (teal)  │ #4fd1c5  │ 10:1  — replaces #0E8F87 as text/icon                       │
   │ ok / warn / bad│ #34d399 / #fbbf24 / #f87171  (9.6 / 11.0 / 6.9)                        │
   │ gold tint      │ #2a2412 (note boxes)   red tint #2a1518   green tint #12301f           │
   └────────────────┴──────────┴────────────────────────────────────────────────────────────┘
   !important is used ONLY against inline style="…" (index DB-driven sections/cards, popups, kit auth strip, the
   EarOma section wrapper, kit language-modal search input which itself uses !important). Each says why. */

/* ===== overlay tokens + page tokens of certificates / instructors / my (their :root blocks are beaten by this) ===== */
html[data-theme="dark"] {
  --t-bg: #0f1116;
  --t-bg-soft: #141821;
  --t-card: #181c26;
  --t-head: #12151c;
  --t-tint: #1b2638;
  --t-hover: #222838;
  --t-line: #2a2f3d;
  --t-input-line: #6b7489;
  --t-text: #e9ecf2;
  --t-soft: #a7afc0;
  --t-muted: #8b94a7;
  --t-link: #7fb3f5;
  --t-link-strong: #a9cdf8;
  --t-accent: #4fd1c5;
  --t-ok: #34d399;
  --t-warn: #fbbf24;
  --t-bad: #f87171;
  --t-gold-tint: #2a2412;
  --t-red-tint: #2a1518;
  --t-green-tint: #12301f;
  /* certificates.html · instructors.html */
  --bg: #0f1116;
  --bg-sec: #141821;
  --text: #e9ecf2;
  --text-sec: #a7afc0;
  --border: #2a2f3d;
  --primary-light: #1b2638;       /* was #E8F1FC — used as a BACKGROUND tint (exam-card-code, instructor-card-top) */
  /* my.html */
  --bg-card: #181c26;
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] body { background: var(--t-bg); color: var(--t-text); }
html[data-theme="dark"] ::selection { background: rgba(127, 179, 245, .28); }

/* ===== kit header (.wsk-*) — drawn by wia-academy-site-kit.js into #wia-header ===== */
html[data-theme="dark"] .wsk-header { background: var(--t-head); box-shadow: 0 1px 0 var(--t-line), 0 2px 12px rgba(0, 0, 0, .4); }
/* .wsk-rainbow-bar (4px animated gradient) stays — it is the family marker */
html[data-theme="dark"] .wsk-logo-main { color: var(--t-text); }      /* kit: color ${themeColor} — a dark branch colour would vanish on dark */
html[data-theme="dark"] .wsk-logo-sub { color: var(--t-muted); }
html[data-theme="dark"] .wsk-nav-link { color: var(--t-text); }
html[data-theme="dark"] .wsk-nav-link:hover { background: var(--t-tint); color: var(--t-link); }
/* .wsk-nav-highlight (WIA 360): gradient fill + white text, unchanged */
html[data-theme="dark"] .wsk-lang-btn { background: var(--t-card); border-color: var(--t-input-line); color: var(--t-text); }
html[data-theme="dark"] .wsk-lang-btn:hover { border-color: var(--t-link); color: var(--t-link); }
/* .wsk-login-btn: branch-colour fill + white text (5.1:1 on #1B6FD8) — unchanged */
html[data-theme="dark"] .wsk-admin-link { color: var(--t-muted); }
html[data-theme="dark"] .wsk-admin-link:hover { background: var(--t-hover); color: var(--t-link); }
html[data-theme="dark"] .wsk-hamburger span { background: var(--t-text); }
html[data-theme="dark"] .wsk-mobile-nav { background: var(--t-head); border-top-color: var(--t-line); }
html[data-theme="dark"] .wsk-mobile-link { color: var(--t-text); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .wsk-mobile-link:hover { background: var(--t-hover); color: var(--t-link); }
html[data-theme="dark"] .wsk-mobile-divider { background: var(--t-line); }
html[data-theme="dark"] .wsk-mobile-login { color: var(--t-link); }
/* logged-in strip (kit checkAuthState writes inline styles: name a color:#333, role span #888, 관리 pill #1B6FD8/#fff) */
html[data-theme="dark"] #wskAuthArea .wsk-auth-user > a[style*="color:#333"] { color: var(--t-text) !important; }       /* inline */
html[data-theme="dark"] #wskAuthArea .wsk-auth-user span[style*="color:#888"] { color: var(--t-muted) !important; }     /* inline */
html[data-theme="dark"] #wskAuthAreaMobile a[style*="color:#1B6FD8"] { color: var(--t-link) !important; }                /* inline, 3.9:1 */
/* index.html 1479: kaitrust user dropdown is already dark (#1e1e3a) — untouched */

/* ===== kit footer ===== */
/* main footer (.wsk-footer--main) is navy #0F2E4D→#0B2238 with white text — already dark; only its seam with the page */
html[data-theme="dark"] .wsk-footer--main { box-shadow: 0 -1px 0 var(--t-line); }
/* branch footer (.wsk-footer, animated rainbow + white text with shadow) is a brand element — left as it is */
/* Family modals inside the footer (#wskEduModal / #wskFamilyModal) are inline dark gradients — untouched */

/* ===== kit language modal (index only: /components/language-modal/language-modal.js, white card) ===== */
html[data-theme="dark"] .wia-nav-modal-content { background: var(--t-card); color: var(--t-text); }
/* .wia-nav-modal-header keeps its purple gradient + white text */
html[data-theme="dark"] .wia-nav-modal-tabs { background: var(--t-bg-soft); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .wia-nav-modal-tab { background: var(--t-card); border-color: var(--t-input-line); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-modal-tab:hover { background: var(--t-hover); }
html[data-theme="dark"] .wia-nav-modal-tab.active { border-color: #8b9cf5; }
html[data-theme="dark"] .wia-nav-lang-search { background: var(--t-bg-soft); color: var(--t-text); border-color: var(--t-input-line) !important; } /* kit rule is border:…!important */
html[data-theme="dark"] .wia-nav-lang-search::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .wia-nav-lang-search:focus { border-color: #8b9cf5 !important; box-shadow: 0 0 0 3px rgba(139, 156, 245, .25); }
html[data-theme="dark"] .wia-nav-lang-count { color: #b4c0ff; }
html[data-theme="dark"] .wia-nav-lang-item { background: var(--t-card); border-color: var(--t-input-line); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-lang-item:hover,
html[data-theme="dark"] .wia-nav-lang-item.selected { border-color: #8b9cf5; }
html[data-theme="dark"] .wia-nav-modal-footer { background: var(--t-bg-soft); border-top-color: var(--t-line); color: var(--t-soft); }
html[data-theme="dark"] .wia-nav-modal-footer [style*="color:#888"] { color: var(--t-soft) !important; }   /* inline */
html[data-theme="dark"] .wia-nav-modal-footer a { color: #b4c0ff; }

/* ===== wiabook promo banner (kit appends loader.js → <aside class="wia-promo-banner-region">, self-styled) ===== */
html[data-theme="dark"] .wia-promo-banner-region { border-top: 1px solid var(--t-line); }

/* ===================================================================================================== */
/* ===== index.html ===== */
/* hero: photo + white radial glow behind the headline → same photo, dark glow (JS may set background-color/-image
   inline from /lms/api/landing for branches — the ::before overlay below darkens whatever is behind it) */
html[data-theme="dark"] .hero { background-color: var(--t-bg); }
html[data-theme="dark"] .hero::before {
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%, rgba(15, 17, 22, .90) 0%, rgba(15, 17, 22, .74) 48%, rgba(15, 17, 22, .30) 78%, rgba(15, 17, 22, .08) 100%),
    linear-gradient(180deg, rgba(15, 17, 22, 0) 70%, rgba(15, 17, 22, .70) 100%);
}
@media (max-width: 760px) {
  html[data-theme="dark"] .hero::before { background: rgba(15, 17, 22, .80); }
}
html[data-theme="dark"] .hero h1 { color: var(--t-text); }
html[data-theme="dark"] .hero-subtitle { color: var(--t-soft); }
html[data-theme="dark"] .badge { background: rgba(24, 28, 38, .86); border-color: rgba(127, 179, 245, .38); color: var(--t-link-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .badge i { color: var(--t-accent); }
/* .cta-primary: branch fill + white — unchanged */
html[data-theme="dark"] .cta-secondary { background: rgba(24, 28, 38, .92); color: var(--t-link-strong); border-color: rgba(127, 179, 245, .45); }
html[data-theme="dark"] .cta-secondary:hover { background: var(--t-tint); border-color: var(--t-link); }
html[data-theme="dark"] .cta-primary:focus-visible,
html[data-theme="dark"] .cta-secondary:focus-visible { outline-color: var(--t-accent); }

/* banner slider (index 1022 inline <style>): caption gradient is branch-dark already; dots stay white-on-photo */

/* stats */
html[data-theme="dark"] .stats-section { background: var(--t-bg-soft); }
html[data-theme="dark"] .stat-card { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
/* .stat-number: gradient text (branch blue→teal), 2.5rem bold → large-text 3:1 holds even for #1B6FD8 (3.9:1) */
html[data-theme="dark"] .stat-label { color: var(--t-muted); }

/* EarOma band: the outer <section> is inline style="…background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%)" (mint)
   → inline, !important. The inner dark-green card (#1a3a2a→#4a8c5c, white/gold text) is kept as it is. */
html[data-theme="dark"] main > section[style*="#f0fdf4"] { background: var(--t-bg) !important; }
/* WIA 360 band: inline navy→branch gradient, white text — kept */

/* categories */
html[data-theme="dark"] .section-header p { color: var(--t-muted); }
/* .section-header h2: gradient text 2.8rem bold — kept */
html[data-theme="dark"] .category-card { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .category-card:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, .55); border-color: #3a4152; }
html[data-theme="dark"] .category-count { color: var(--t-muted); }
html[data-theme="dark"] .topic-tag { background: var(--t-hover); color: var(--t-soft); }
/* .category-header.* gradient tiles (emoji on colour) — kept */

/* features */
html[data-theme="dark"] .features-section { background: linear-gradient(180deg, var(--t-bg-soft) 0%, var(--t-bg) 100%); }
html[data-theme="dark"] .feature-card { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .feature-card:hover { box-shadow: 0 15px 50px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .feature-desc { color: var(--t-muted); }
/* .feature-icon / .stat-icon: 13 % colour-mix tints of the branch colours over transparent — fine on dark */

/* "플랫폼 강점" band: branch gradient + white text + inline white CTA — kept (identical contrast in both themes).
   .ai-creator-demo (white card) exists only in CSS, not in the markup. */
html[data-theme="dark"] .ai-creator-section { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Dynamic sections (#dynamicSections, /lms/api/landing-sections): every colour is inline from JS. Only the DEFAULTS
   are themed (section bg '#fff' / text '#1a1a1a', white cards, #666/#888 captions, #e2e8f0 faq borders);
   a section whose operator chose a custom bg_color is left exactly as designed. All inline → !important. */
html[data-theme="dark"] #dynamicSections > section[style*="background:#fff"] { background: var(--t-bg) !important; }
html[data-theme="dark"] #dynamicSections > section[style*="color:#1a1a1a"] { color: var(--t-text) !important; }
html[data-theme="dark"] #dynamicSections a[style*="background:#fff"],
html[data-theme="dark"] #dynamicSections div[style*="background:#fff;padding"] { background: var(--t-card) !important; border: 1px solid var(--t-line); }
html[data-theme="dark"] #dynamicSections a[style*="background:#fff;color:#333"] { color: var(--t-text) !important; border-color: var(--t-input-line) !important; }
html[data-theme="dark"] #dynamicSections [style*="color:#666"],
html[data-theme="dark"] #dynamicSections [style*="color:#888"] { color: var(--t-soft) !important; }
html[data-theme="dark"] #dynamicSections div[style*="border:1px solid #e2e8f0"] { border-color: var(--t-line) !important; }
html[data-theme="dark"] #dynamicSections div[style*="background:rgba(255"] { background: var(--t-card) !important; }   /* features tiles rgba(255,255,255,.06) */

/* Popups (/lms/api/popups → overlay + box.style.cssText 'background:#fff…') — inline → !important */
html[data-theme="dark"] [id^="popup-overlay-"] > div { background: var(--t-card) !important; color: var(--t-text); border: 1px solid var(--t-line); }
html[data-theme="dark"] [id^="popup-overlay-"] [style*="border-bottom:1px solid #eee"] { border-bottom-color: var(--t-line) !important; }
html[data-theme="dark"] [id^="popup-overlay-"] [style*="border-top:1px solid #eee"] { border-top-color: var(--t-line) !important; }
html[data-theme="dark"] [id^="popup-overlay-"] [style*="color:#444"] { color: var(--t-soft) !important; }
html[data-theme="dark"] [id^="popup-overlay-"] label[style*="color:#888"] { color: var(--t-muted) !important; }
/* close × is color:#999 inline — 6.8:1 on the dark card, left */

/* ===================================================================================================== */
/* ===== shared page shell (sub pages) ===== */
/* .page-hero: every variant is a branch/navy gradient with white text — kept. The kit's runtime .page-hero rule
   (hero photo under the gradient, !important) is also kept. */
html[data-theme="dark"] .breadcrumb { color: var(--t-muted); }                 /* about/courses #888, privacy #666 (3.6:1), course #718096 */
html[data-theme="dark"] .breadcrumb a { color: var(--t-link); }
html[data-theme="dark"] .breadcrumb .current { color: var(--t-text); }         /* support: #334155 */
html[data-theme="dark"] .breadcrumb span { color: var(--t-muted); }            /* course: separators #cbd5e0 */
/* my.html: its .breadcrumb sits INSIDE the branch-gradient .breadcrumb-area with white text — give that one back */
html[data-theme="dark"] .breadcrumb-area .breadcrumb,
html[data-theme="dark"] .breadcrumb-area .breadcrumb a { color: #fff; }
html[data-theme="dark"] .section-title { color: var(--t-text); }               /* about/exam-plan #1a1a2e; certificates/instructors inherit */
html[data-theme="dark"] .section-title i { color: var(--t-link); }
html[data-theme="dark"] .section-sub { color: var(--t-soft); }
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .loading-spinner,
html[data-theme="dark"] .loading-state { color: var(--t-muted); }
html[data-theme="dark"] .empty-state i { color: #3a4152; }

/* --- about.html --- */
html[data-theme="dark"] .sub-menu { border-color: var(--t-line); background: var(--t-card); }
html[data-theme="dark"] .sub-menu a { color: var(--t-soft); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .sub-menu a:hover,
html[data-theme="dark"] .sub-menu a.active { background: var(--t-tint); color: var(--t-link); }
@media (max-width: 768px) { html[data-theme="dark"] .sub-menu a { border-right-color: var(--t-line); } }
html[data-theme="dark"] .mv-card p { color: var(--t-soft); }
html[data-theme="dark"] .mv-card h4 { color: var(--t-link); }
html[data-theme="dark"] .mv-card.vision h4 { color: var(--t-ok); }
html[data-theme="dark"] .cv-label { color: var(--t-soft); }
html[data-theme="dark"] .director-info h3 { color: var(--t-text); }
html[data-theme="dark"] .director-info .title { color: var(--t-link); }
html[data-theme="dark"] .director-bio { color: var(--t-soft); }
html[data-theme="dark"] .greeting-text { background: var(--t-card); color: var(--t-soft); }
html[data-theme="dark"] .timeline-item::before { border-color: var(--t-bg); }
html[data-theme="dark"] .timeline-year { color: var(--t-link); }
html[data-theme="dark"] .timeline-text { color: var(--t-soft); }
html[data-theme="dark"] .location-info { background: var(--t-card); }
html[data-theme="dark"] .location-info p { color: var(--t-soft); }
html[data-theme="dark"] .location-info strong { color: var(--t-text); }
html[data-theme="dark"] .intro-banner,
html[data-theme="dark"] .map-container { box-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .cert-card h4 { color: var(--t-link); }
html[data-theme="dark"] .cert-card td { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .cert-card td:first-child { color: var(--t-soft); }

/* --- courses.html · exam-plan.html --- */
html[data-theme="dark"] .filter-tabs { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .filter-tab { background: var(--t-card); border-color: var(--t-input-line); color: var(--t-soft); }
html[data-theme="dark"] .filter-tab:hover { border-color: var(--t-link); color: var(--t-link); }
/* .filter-tab.active: gradient fill + white — kept */
html[data-theme="dark"] .stats-bar { color: var(--t-soft); }
html[data-theme="dark"] .stats-bar strong { color: var(--t-link); }
html[data-theme="dark"] .course-card { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .course-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .card-category { color: var(--t-link); }
html[data-theme="dark"] .card-instructor,
html[data-theme="dark"] .card-meta,
html[data-theme="dark"] .card-price small { color: var(--t-muted); }
html[data-theme="dark"] .card-price { color: var(--t-link); }
html[data-theme="dark"] .plan-card { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .plan-header { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .plan-header h2 { color: var(--t-text); }
html[data-theme="dark"] .plan-header .anno { color: var(--t-link); }
html[data-theme="dark"] .info-item { background: var(--t-bg-soft); }
html[data-theme="dark"] .info-item h4 { color: var(--t-muted); }
html[data-theme="dark"] .info-item p { color: var(--t-text); }
/* .fee-table th: branch fill + white — kept */
html[data-theme="dark"] .fee-table td,
html[data-theme="dark"] .cert-table td { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .fee-table tr:hover { background: var(--t-bg-soft); }
html[data-theme="dark"] .cert-table th { background: var(--t-tint); color: var(--t-link); }
html[data-theme="dark"] .note-box { background: var(--t-gold-tint); border-left-color: var(--t-warn); color: var(--t-soft); }
html[data-theme="dark"] .refund-box { background: var(--t-red-tint); border-left-color: var(--t-bad); color: var(--t-soft); }
html[data-theme="dark"] .badge-3 { color: var(--t-ok); }
html[data-theme="dark"] .badge-2 { color: var(--t-link); }
html[data-theme="dark"] .badge-1 { color: var(--t-bad); }

/* --- certificates.html · instructors.html (tokens above do bg/text/border; the rest) --- */
html[data-theme="dark"] .breadcrumb-inner,
html[data-theme="dark"] .breadcrumb-inner a { color: var(--t-soft); }
html[data-theme="dark"] .breadcrumb-inner a:hover { color: var(--t-link); }
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .instructor-card,
html[data-theme="dark"] .verify-box { background: var(--t-card); }
html[data-theme="dark"] .exam-card:hover,
html[data-theme="dark"] .instructor-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .exam-info-row { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .exam-card-code { color: var(--t-link); }
html[data-theme="dark"] .btn-exam.disabled { background: #3a4152; color: var(--t-soft); }
html[data-theme="dark"] .status-open { background: var(--t-green-tint); color: var(--t-ok); }
html[data-theme="dark"] .status-closed { background: var(--t-red-tint); color: var(--t-bad); }
html[data-theme="dark"] .status-scheduled { background: var(--t-gold-tint); color: var(--t-warn); }
html[data-theme="dark"] .verify-input { background: var(--t-bg-soft); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] .verify-input::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .verify-input:focus { border-color: var(--t-link); }
html[data-theme="dark"] .result-valid { background: var(--t-green-tint); border-color: #1f5a3a; }
html[data-theme="dark"] .result-invalid { background: var(--t-red-tint); border-color: #6b2a2a; }
html[data-theme="dark"] .result-valid .result-header { color: var(--t-ok); }
html[data-theme="dark"] .result-invalid .result-header { color: var(--t-bad); }
html[data-theme="dark"] .result-row { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .instructor-card-top { background: linear-gradient(135deg, var(--t-tint), #161b2a); }
html[data-theme="dark"] .instructor-stat,
html[data-theme="dark"] .stat-item .stat-number { color: var(--t-link); }
html[data-theme="dark"] .course-list li i { color: var(--t-link); }

/* --- course.html --- */
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .sidebar-card { background: var(--t-card); border-color: var(--t-line); box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .content-card h2,
html[data-theme="dark"] .course-header-text h1,
html[data-theme="dark"] .lesson-title,
html[data-theme="dark"] .sidebar-info-item .value { color: var(--t-text); }
html[data-theme="dark"] .content-card h2 i,
html[data-theme="dark"] .course-header-text .instructor i,
html[data-theme="dark"] .meta-tag i,
html[data-theme="dark"] .lesson-number,
html[data-theme="dark"] .sidebar-info-item .label i,
html[data-theme="dark"] .back-link { color: var(--t-link); }
html[data-theme="dark"] .course-header-text .instructor,
html[data-theme="dark"] .sidebar-info-item .label,
html[data-theme="dark"] .lesson-meta { color: var(--t-muted); }
html[data-theme="dark"] .meta-tag { background: var(--t-bg-soft); color: var(--t-soft); }
html[data-theme="dark"] .course-description { color: var(--t-soft); }
html[data-theme="dark"] .lesson-item,
html[data-theme="dark"] .sidebar-info-item { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .lesson-item:hover { background: var(--t-bg-soft); }
html[data-theme="dark"] .type-video { background: var(--t-tint); color: var(--t-link); }
html[data-theme="dark"] .type-document { background: var(--t-green-tint); color: var(--t-ok); }
html[data-theme="dark"] .type-quiz { background: var(--t-gold-tint); color: var(--t-warn); }
html[data-theme="dark"] .type-assignment { background: #3a1530; color: #f472b6; }
html[data-theme="dark"] .loading-state .spinner { border-color: var(--t-line); border-top-color: var(--t-link); }
html[data-theme="dark"] .error-state { color: var(--t-bad); }
/* .sidebar-price-area / .enroll-btn / .category-badge: branch gradient + white — kept. .toast #1a1a2e — already dark */

/* --- support.html --- */
html[data-theme="dark"] .tab-nav { background: var(--t-card); border-bottom-color: var(--t-line); box-shadow: 0 -4px 20px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .tab-btn { color: var(--t-soft); }
html[data-theme="dark"] .tab-btn:hover { background: var(--t-tint); color: var(--t-link); }
html[data-theme="dark"] .tab-btn.active { background: var(--t-card); color: var(--t-link); }
html[data-theme="dark"] .tab-content { background: var(--t-card); box-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .notice-item { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .notice-header:hover,
html[data-theme="dark"] .faq-question:hover { background: var(--t-tint); }
html[data-theme="dark"] .notice-title,
html[data-theme="dark"] .faq-q-text,
html[data-theme="dark"] .contact-card h3 { color: var(--t-text); }
html[data-theme="dark"] .notice-date,
html[data-theme="dark"] .notice-toggle,
html[data-theme="dark"] .faq-arrow { color: var(--t-muted); }
html[data-theme="dark"] .notice-body-inner { background: var(--t-bg-soft); color: var(--t-soft); }
html[data-theme="dark"] .faq-item { border-color: var(--t-line); background: var(--t-card); }
html[data-theme="dark"] .faq-item.open { border-color: var(--t-link); }
html[data-theme="dark"] .faq-a-text { background: var(--t-tint); color: var(--t-soft); }
html[data-theme="dark"] .faq-a-text::before { color: var(--t-link); }
html[data-theme="dark"] .contact-card { background: var(--t-card); border-color: var(--t-line); }
html[data-theme="dark"] .contact-card:hover { border-color: var(--t-link); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .contact-card p { color: var(--t-muted); }
html[data-theme="dark"] .contact-card a,
html[data-theme="dark"] .contact-card .contact-value,
html[data-theme="dark"] .contact-icon { color: var(--t-link); }
html[data-theme="dark"] .contact-card a:hover { color: var(--t-accent); }
html[data-theme="dark"] .loading-spinner i { color: var(--t-link); }

/* --- my.html (tokens above: --bg --bg-card --text --text-sec --border --shadow) --- */
html[data-theme="dark"] .my-container .tab-btn:hover,
html[data-theme="dark"] .card-title i,
html[data-theme="dark"] .noti-icon,
html[data-theme="dark"] .noti-item.unread .noti-content h4,
html[data-theme="dark"] .profile-role,
html[data-theme="dark"] .btn-read-all { color: var(--t-link); }
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table tr:hover td,
html[data-theme="dark"] .inquiry-form,
html[data-theme="dark"] .noti-item:hover,
html[data-theme="dark"] .profile-field { background: var(--t-bg-soft); }
html[data-theme="dark"] .noti-item.unread,
html[data-theme="dark"] .inquiry-reply { background: var(--t-tint); }
html[data-theme="dark"] .noti-item.unread:hover { background: var(--t-hover); }
html[data-theme="dark"] .progress-bar-wrap { background: var(--t-line); }
html[data-theme="dark"] .form-control { background: var(--t-bg); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] .form-control::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .form-control:focus { border-color: var(--t-link); }
html[data-theme="dark"] .status-active { background: var(--t-green-tint); color: var(--t-ok); }
html[data-theme="dark"] .status-expired { background: var(--t-red-tint); color: var(--t-bad); }
html[data-theme="dark"] .status-hold { background: var(--t-gold-tint); color: var(--t-warn); }
html[data-theme="dark"] .mileage-earn { color: var(--t-ok); }
html[data-theme="dark"] .mileage-use { color: var(--t-bad); }
html[data-theme="dark"] .inquiry-status-waiting { color: var(--t-warn); }
html[data-theme="dark"] .inquiry-status-answered { color: var(--t-ok); }
/* .breadcrumb-area / .mileage-balance / .course-card-icon / .tab-btn.active: branch gradient + white — kept */

/* --- privacy.html · refund.html · terms.html --- */
html[data-theme="dark"] .legal-nav a { border-color: var(--t-line); color: var(--t-text); background: var(--t-card); }
html[data-theme="dark"] .legal-nav a:last-child { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .legal-nav a[aria-current="page"] { background: var(--t-tint); color: var(--t-link-strong); }
html[data-theme="dark"] .legal h2 { color: var(--t-text); border-bottom-color: #2a3a52; }
html[data-theme="dark"] .legal th,
html[data-theme="dark"] .legal td { border-color: var(--t-line); }
html[data-theme="dark"] .legal th { background: var(--t-bg-soft); }
html[data-theme="dark"] .note { background: var(--t-bg-soft); }
html[data-theme="dark"] .meta { color: var(--t-soft); }
@media (max-width: 760px) { html[data-theme="dark"] .legal-nav a { border-color: var(--t-line); } }