/* check.wiasis.com — site theme: DARK overlay (2026-10-29, family56 bundle E).
   ORIGINAL look = LIGHT (frontend/styles.css 2,462 lines, :root tokens + ~131 hard-coded hex; ask-ai-modal.css;
   pwa-install.css; language-modal.js injects its own <style>). None of those files is changed. Load this file LAST in
   <head> — index.html line 30, after styles.css / ask-ai-modal.css / pwa-install.css and before </head> — with the
   wia-site-theme engine setting <html data-theme="light|dark"> before first paint. Every rule below is scoped to
   html[data-theme="dark"] (or, for the two cyber pages, html[data-theme="light"] — see the last section), so the
   unsaved default renders exactly as before (0 px difference). color-scheme is set by the engine — not here.

   Pages: index.html (styles.css, header written in the file, LM = /components/language-modal/language-modal.js,
   Ask-AI modal = ask-ai-modal.css, PWA modal + floating 🌙 = pwa-install.js/.css) · privacy.html / terms.html
   (own inline <style>, "cyber" DARK #0a0a1a original — the dark overlay is a no-op there, so the last section gives
   them a LIGHT overlay instead; both pages share the same <style>, the diff is the <title> only).

   The stray `@media (prefers-color-scheme: dark){.braille-badge{…}}` (styles.css 1918) only recolours the 점자
   badge text (#34d399) and its tint when the OS is dark. It has specificity (0,1,0); the rule below for
   html[data-theme="dark"] .braille-badge is (0,1,1) and wins in both OS modes, so the badge is identical whatever
   the OS says. In the light theme that media rule still fires on OS-dark (original behaviour, untouched).

   Dark palette (ratios measured against page #0b0d12 / card #14161f / inner tint #1c1f2b):
   ┌──────────────────┬──────────┬─────────────────────────────────────────────────────────────────┐
   │ page bg          │ #0b0d12  │ body                                                            │
   │ header           │ #10131a  │ was --dark #2c3e50 (sticky), 1 px #2a2d3d edge                   │
   │ card             │ #14161f  │ .card, .summary-card, .loading-content, modals, option tiles     │
   │ inner tint       │ #1c1f2b  │ --gray-100 surfaces inside a card (options, stats, tabs, text)   │
   │ input            │ #0f1117  │ textarea / select / chat inputs; border #7b879c (5.0:1 on card)  │
   │ text             │ #e9ecf2  │ 16.4:1 page · 15.2:1 card · 13.9:1 tint                          │
   │ heading          │ #eef0f6  │ replaces --dark where it is used as a TEXT colour                │
   │ text-soft        │ #b4bccb  │ 9.4:1 card (was --gray-600 #666)                                 │
   │ text-muted       │ #a3abbd  │ 7.8:1 card                                                       │
   │ text-faint       │ #8f98ab  │ 6.2:1 card · 5.7:1 tint (was --gray-400 #999: counter, labels)   │
   │ line             │ #2a2d3d  │ hairline, decorative only (1.3:1)                                │
   │ primary          │ #667eea  │ KEPT — 4.9:1 on card, fine for icons/focus; gradients unchanged  │
   │ accent as text   │ #9fadf9  │ 8.4:1 card — links, "active" step, loading status               │
   │ success/warn     │ #5ad07f / #ffb74d (9.2:1 / 10.4:1)                                          │
   │ danger / info    │ #ff7b72 / #7fb3ff (7.2:1 / 8.4:1)                                           │
   │ risk low         │ #6fdc8c on #0f2a17 (9.0:1)   medium #ffb74d on #2e1f08 (9.2:1)              │
   │ risk high        │ #ff8a80 on #3a1215 (7.2:1)   critical #ff9aa2 on #3b0f14 (8.2:1)            │
   │ academic purple  │ #c4b5fd text (9.8:1 card) · tint #1e1532 · line #3b2f5e                      │
   └──────────────────┴──────────┴─────────────────────────────────────────────────────────────────┘
   !important appears only where the site itself uses !important in a stylesheet block (donate banner 1789–1800,
   .academic-citations 2058, LM search input) or where app.js writes an inline style — each rule says which. */

/* ===== tokens (styles.css :root) ===== */
html[data-theme="dark"] {
  --dark: #eef0f6;              /* used as heading/stat/link TEXT in .card h2/h3, .stat-value, .source-title a;
                                   the two BACKGROUND uses (header, plain footer) are overridden below */
  --gray-800: #e9ecf2;          /* body text */
  --gray-600: #b4bccb;          /* score-details, stat-label, source-snippet, close-btn, LM section h4 */
  --gray-400: #8f98ab;          /* char-counter, option-icon, gauge-labels, source-meta, loading steps */
  --gray-200: #2a2d3d;          /* hairlines: spinner track, score ring bg, ai-metric, source-item, modal header */
  --gray-100: #1c1f2b;          /* inner surfaces: options-section, stat-item, highlighted-text, source-tab/icon */
  --success-color: #5ad07f;
  --warning-color: #ffb74d;
  --danger-color: #ff7b72;
  --info-color: #7fb3ff;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6);
  /* referenced but never defined in the light CSS (.upload-title/.upload-subtitle/.donate-text/ask-ai-modal.css
     fallbacks) — defining them here only affects the dark theme */
  --text-color: #e9ecf2;
  --text-muted: #a3abbd;
  --border-color: #2a2d3d;
  /* overlay-only tokens */
  --t-page: #0b0d12;
  --t-header: #10131a;
  --t-card: #14161f;
  --t-tint: #1c1f2b;
  --t-input: #0f1117;
  --t-input-line: #7b879c;      /* ≥ 3:1 UI boundary on card/input */
  --t-text: #e9ecf2;
  --t-soft: #b4bccb;
  --t-muted: #a3abbd;
  --t-faint: #8f98ab;
  --t-line: #2a2d3d;
  --t-accent-text: #9fadf9;
  --t-purple-text: #c4b5fd;
  --t-purple-tint: #1e1532;
  --t-purple-line: #3b2f5e;
}
html[data-theme="dark"] body { background: var(--t-page); color: var(--t-text); }

/* ===== header (index.html 35–57, static) ===== */
/* :not(.cyber-header) keeps the privacy/terms brand-gradient header out of this rule (it would otherwise win on
   specificity and flatten it to #10131a in the dark theme) */
html[data-theme="dark"] header:not(.cyber-header) { background: var(--t-header); box-shadow: 0 1px 0 var(--t-line), var(--shadow-md); }
/* .logo / .tagline / .nav-link are white on the header in both themes — unchanged; .logo i #667eea is 5.1:1 */
html[data-theme="dark"] .nav-link { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, .16); }
/* .language-btn keeps its brand gradient (same control in both themes); the engine button goes right after it */

/* ===== cards / headings ===== */
html[data-theme="dark"] .card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .loading-content { background: var(--t-card); box-shadow: var(--shadow-md), 0 0 0 1px var(--t-line); }
/* .card h2/h3, .stat-value, .source-title a → var(--dark) = #eef0f6 via the token; icons stay --primary-color */

/* ===== input card: textarea · counter · file drop · options · check button ===== */
html[data-theme="dark"] #inputText { background: var(--t-input); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] #inputText::placeholder { color: var(--t-muted); }
html[data-theme="dark"] #inputText:focus { border-color: var(--t-accent-text); box-shadow: 0 0 0 3px rgba(159, 173, 249, .25); }
/* app.js updateCharCount() writes counter.style.color = '#F44336' (over limit, 4.9:1) / '#FFC107' (near limit);
   inline → !important. Serialised as rgb(244, 67, 54). Amber is 11:1 and left alone. */
html[data-theme="dark"] #charCount[style*="244, 67, 54"] { color: var(--danger-color) !important; }

html[data-theme="dark"] .file-drop-area {
  border-color: rgba(159, 173, 249, .45);
  background: linear-gradient(135deg, rgba(102, 126, 234, .09) 0%, rgba(118, 75, 162, .09) 100%);
}
html[data-theme="dark"] .file-drop-area:hover {
  border-color: var(--t-accent-text);
  background: linear-gradient(135deg, rgba(102, 126, 234, .16) 0%, rgba(118, 75, 162, .16) 100%);
}
html[data-theme="dark"] .file-drop-area.dragover {
  border-color: var(--t-accent-text);
  background: linear-gradient(135deg, rgba(102, 126, 234, .22) 0%, rgba(118, 75, 162, .22) 100%);
  box-shadow: 0 8px 30px rgba(102, 126, 234, .25);
}
@media (hover: none) {
  /* styles.css 1867–1877 uses !important for the touch no-hover state — same weight needed to recolour it */
  html[data-theme="dark"] .file-drop-area:hover { border-color: rgba(159, 173, 249, .45) !important; }
}
html[data-theme="dark"] .upload-icon { color: var(--t-accent-text); }
html[data-theme="dark"] .upload-title { color: var(--t-text); }
html[data-theme="dark"] .upload-subtitle { color: var(--t-muted); }
/* .upload-button keeps the brand gradient + white text (same as light) */
/* braille badge — hard-coded #059669 (3.4:1 on dark); this (0,1,1) rule beats the (0,1,0) prefers-color-scheme rule */
html[data-theme="dark"] .braille-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, .18) 0%, rgba(6, 182, 212, .18) 100%);
  border-color: rgba(52, 211, 153, .45);
  color: #34d399;                                                     /* 9.4:1 on card */
}
html[data-theme="dark"] .braille-badge::before { background: #34d399; }
html[data-theme="dark"] .file-loading-status { background: rgba(102, 126, 234, .16); color: var(--t-accent-text); }

html[data-theme="dark"] .options-section { background: var(--t-tint); }
html[data-theme="dark"] .options-section h3 { color: var(--t-text); }
html[data-theme="dark"] .option-item { background: var(--t-card); box-shadow: 0 0 0 1px var(--t-line); color: var(--t-text); }
html[data-theme="dark"] .option-item:hover { box-shadow: 0 0 0 1px var(--t-input-line); }
html[data-theme="dark"] .option-icon { color: var(--t-faint); }
html[data-theme="dark"] .depth-selector label { color: var(--t-text); }
html[data-theme="dark"] .depth-selector select { background: var(--t-input); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] .depth-selector select:focus { outline: 2px solid var(--t-accent-text); outline-offset: 1px; }
/* .check-btn keeps the brand gradient; its :hover shadow uses the darkened --shadow-lg token */
html[data-theme="dark"] .check-btn:disabled { opacity: .55; }

/* ===== loading ===== */
html[data-theme="dark"] .loading-content p { color: var(--t-text); }
html[data-theme="dark"] .loading-steps .step { color: var(--t-faint); }
html[data-theme="dark"] .loading-steps .step.active { background: rgba(102, 126, 234, .16); color: var(--t-accent-text); }
html[data-theme="dark"] .loading-steps .step.done { color: var(--success-color); }

/* ===== results: summary cards · badges · gauge ===== */
html[data-theme="dark"] .summary-card h3 { color: var(--dark); }
html[data-theme="dark"] .score-text { color: var(--t-text); }
/* app.js updatePlagiarismScore() sets progress.style.stroke inline — '#c62828' (critical) is 2.4:1 on the card;
   serialised rgb(198, 40, 40). '#F44336'/'#FFC107'/'#4CAF50' are ≥ 4.9:1 and left as written. */
html[data-theme="dark"] .score-circle .progress[style*="198, 40, 40"] { stroke: #ff7b72 !important; }
html[data-theme="dark"] .risk-badge.low,
html[data-theme="dark"] .verdict-badge.human { background: #0f2a17; color: #6fdc8c; }
html[data-theme="dark"] .risk-badge.medium,
html[data-theme="dark"] .verdict-badge.mixed { background: #2e1f08; color: #ffb74d; }
html[data-theme="dark"] .risk-badge.high,
html[data-theme="dark"] .verdict-badge.ai { background: #3a1215; color: #ff8a80; }
html[data-theme="dark"] .risk-badge.critical { background: #3b0f14; color: #ff9aa2; }
html[data-theme="dark"] .score-details { color: var(--t-soft); }
html[data-theme="dark"] .gauge { background: linear-gradient(90deg, #3fae63, #d99a2b, #d9534f); } /* darker stops so the needle reads */
html[data-theme="dark"] .gauge-fill { background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .gauge-labels { color: var(--t-faint); }
html[data-theme="dark"] .gauge-value { color: var(--t-text); }
html[data-theme="dark"] .ai-details { color: var(--t-text); }
html[data-theme="dark"] .ai-metric { border-bottom-color: var(--t-line); }

/* ===== results: statistics ===== */
html[data-theme="dark"] .stat-item { background: var(--t-tint); }
html[data-theme="dark"] .stat-item i { color: var(--t-accent-text); }
html[data-theme="dark"] .stat-label { color: var(--t-soft); }

/* ===== results: highlighted text (hard-coded pastel backgrounds would carry light text in dark) ===== */
html[data-theme="dark"] .legend { color: var(--t-text); }
html[data-theme="dark"] .legend-item.original span:first-child { background: #0f2a17; box-shadow: 0 0 0 1px #2f6b40; }
html[data-theme="dark"] .legend-item.medium span:first-child { background: #3a2a0c; box-shadow: 0 0 0 1px #b8862e; }
html[data-theme="dark"] .legend-item.high span:first-child { background: #3d1418; box-shadow: 0 0 0 1px #c65656; }
html[data-theme="dark"] .highlighted-text { background: var(--t-tint); color: var(--t-text); }
html[data-theme="dark"] .highlighted-text .plagiarized.medium { background: #3a2a0c; border-bottom-color: #ffb74d; } /* text 11.7:1 */
html[data-theme="dark"] .highlighted-text .plagiarized.high { background: #3d1418; border-bottom-color: #ff8a80; }  /* text 13.5:1 */

/* ===== results: sources (tabs are !important-sized in styles.css 1702–1719; colours are not, so plain rules win) ===== */
html[data-theme="dark"] .source-tab { background: var(--t-tint); color: var(--t-text); }
html[data-theme="dark"] .source-tab:hover { background: #262a3a; }
html[data-theme="dark"] .source-tab span { background: rgba(255, 255, 255, .1); }
/* .source-tab.active keeps the gradient + white; its count pill is already rgba(255,255,255,.2) */
html[data-theme="dark"] .source-item { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .source-item:hover { background: var(--t-tint); }
html[data-theme="dark"] .source-icon { background: var(--t-tint); }
html[data-theme="dark"] .source-icon.web { color: var(--info-color); }
html[data-theme="dark"] .source-icon.arxiv { color: #ff6b6b; }     /* was #b31b1b (2.4:1) → 6.5:1 */
html[data-theme="dark"] .source-icon.pubmed { color: #7fb3ff; }    /* was #326599 */
html[data-theme="dark"] .source-icon.semantic { color: #8fb4ff; }  /* was #1857b6 */
html[data-theme="dark"] .source-title a:hover { color: var(--t-accent-text); }
html[data-theme="dark"] .source-snippet { color: var(--t-soft); }
html[data-theme="dark"] .source-meta { color: var(--t-faint); }
html[data-theme="dark"] .no-sources { color: var(--t-muted); }

/* ===== results: academic DB card (styles.css 1928–2082, almost all hard-coded light purples) ===== */
html[data-theme="dark"] .academic-card { background: linear-gradient(135deg, #171226 0%, #1e1532 100%); border-color: var(--t-purple-line); }
html[data-theme="dark"] .academic-card h3 { color: var(--t-purple-text); }
/* .academic-badge keeps its violet gradient + white (6.4:1 on #8b5cf6 side, 5.4:1 on #a855f7) */
html[data-theme="dark"] .academic-stats { color: var(--t-muted); }
html[data-theme="dark"] .academic-stats code { background: rgba(196, 181, 253, .14); color: var(--t-purple-text); }
html[data-theme="dark"] .academic-item { background: var(--t-card); border-color: var(--t-purple-line); }
html[data-theme="dark"] .academic-item:hover { border-color: #a78bfa; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .academic-item-title { color: var(--t-text); }
html[data-theme="dark"] .academic-item-title a { color: var(--t-purple-text); }
html[data-theme="dark"] .academic-source-badge.semantic { background: #172554; color: #93c5fd; }  /* 8.2:1 */
html[data-theme="dark"] .academic-source-badge.openalex { background: #14532d; color: #86efac; }  /* 6.5:1 */
html[data-theme="dark"] .academic-source-badge.crossref { background: #422006; color: #fcd34d; }  /* 10.1:1 */
html[data-theme="dark"] .academic-item-meta { color: var(--t-muted); }
/* styles.css 2058 is `.academic-citations{color:#7c3aed !important}` (3.1:1 on dark) — only !important can beat it */
html[data-theme="dark"] .academic-citations { color: var(--t-purple-text) !important; }
html[data-theme="dark"] .academic-abstract { color: var(--t-soft); }
html[data-theme="dark"] .academic-loading { color: var(--t-purple-text); }

/* ===== results: actions · donate banner ===== */
/* .action-btn.primary = brand gradient (kept); .action-btn.secondary = slate gradient #64748b→#475569 with
   white !important (4.8:1 at the light end) — already fine on dark, untouched */
/* donate banner: styles.css 1750–1800 is an !important block (rgba gradient over the card is fine on dark, but
   h4 is #1f2937 !important = 1.2:1 and p is #6b7280 !important = 3.7:1 on the card → same weight needed) */
html[data-theme="dark"] .donate-banner { border-color: rgba(159, 173, 249, .35) !important; }
html[data-theme="dark"] .donate-text h4 { color: var(--t-text) !important; }
html[data-theme="dark"] .donate-text p { color: var(--t-muted) !important; }
/* .donate-icon / .donate-btn: coral gradient + white, same in both themes */

/* ===== footer (.wia-footer) ===== */
/* styles.css 2435–2462 forces a dark violet gradient (#1e1e3f→#2d1b4e !important) with white/violet text in BOTH
   themes — it is already dark, so only the social chips and badge pills are touched */
html[data-theme="dark"] .wia-footer { box-shadow: inset 0 1px 0 var(--t-line); }
html[data-theme="dark"] .footer-social a { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .footer-badges .badge { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .footer-badges .badge i { color: var(--t-accent-text); }
/* footer heart icon style="color:#ff6b6b" is 6.5:1 on the violet footer — left as it is */

/* ===== Ask-AI modal (ask-ai-modal.css; opened by the floating .wia-ai-btn which keeps its gradient) ===== */
html[data-theme="dark"] .wia-ai-modal { background: rgba(0, 0, 0, .78); }
html[data-theme="dark"] .wia-ai-modal .ai-modal-content { background: var(--t-card); box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 0 1px var(--t-line); }
/* .ai-modal-header keeps the brand gradient + white */
html[data-theme="dark"] .ai-selector { background: var(--t-tint); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .ai-tab { color: var(--t-soft); }
html[data-theme="dark"] .ai-tab.active { background: var(--t-card); border-bottom-color: var(--t-accent-text); color: var(--t-accent-text); }
html[data-theme="dark"] .ai-tab:hover:not(.active) { background: #262a3a; }
html[data-theme="dark"] .ai-tab .badge { background: #15803d; }
html[data-theme="dark"] .api-setup { background: var(--t-tint); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .api-input { background: var(--t-input); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] .api-input::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .api-input:focus { border-color: var(--t-accent-text); }
html[data-theme="dark"] .api-save-btn { background: #15803d; }
html[data-theme="dark"] .api-save-btn:hover { background: #166534; }
html[data-theme="dark"] .api-link { color: var(--t-accent-text); }
html[data-theme="dark"] .api-status.success { background: #0f2a17; color: #6fdc8c; }
html[data-theme="dark"] .api-status.error { background: #3b0f14; color: #ff9aa2; }
html[data-theme="dark"] .check-context { background: #172554; border-bottom-color: #1e3a8a; color: #bfdbfe; }
html[data-theme="dark"] .check-context strong { color: #dbeafe; }
html[data-theme="dark"] .ai-tools { background: linear-gradient(135deg, rgba(102, 126, 234, .1) 0%, rgba(118, 75, 162, .1) 100%); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .ai-tools-header { color: var(--t-accent-text); }
html[data-theme="dark"] .ai-tool-btn { background: var(--t-card); border-color: var(--t-input-line); color: var(--t-text); }
/* .ai-tool-btn:hover per-tool gradients (ask-ai-modal.css 515–537) are coloured fills with white text — kept;
   the `similar` one is pastel with #333 text, also kept (its own rule) */
html[data-theme="dark"] .chat-messages { background: var(--t-card); }
html[data-theme="dark"] .ai-message.assistant .ai-message-content { background: var(--t-tint); color: var(--t-text); }
html[data-theme="dark"] .ai-message-content code { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .ai-message.assistant .ai-message-content code { background: #262a3a; }
html[data-theme="dark"] .welcome-message { color: var(--t-muted); }
html[data-theme="dark"] .welcome-message i { color: var(--t-accent-text); }
html[data-theme="dark"] .welcome-message h4 { color: var(--t-text); }
html[data-theme="dark"] .message-input-area { background: var(--t-tint); border-top-color: var(--t-line); }
html[data-theme="dark"] .ai-message-input { background: var(--t-input); color: var(--t-text); border-color: var(--t-input-line); }
html[data-theme="dark"] .ai-message-input::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .ai-message-input:focus { border-color: var(--t-accent-text); }
html[data-theme="dark"] .ai-send-btn:disabled { background: #3a3f52; color: var(--t-muted); }
html[data-theme="dark"] .typing-indicator span { background: var(--t-accent-text); }

/* ===== language modal (language-modal.js injects #wia-nav-lang-modal-styles into <head> BEFORE this file is
   parsed only if the script ran first — it runs at the end of <body>, so its <style> lands AFTER this <link>;
   specificity (0,1,1) vs its (0,1,0) still wins regardless of order) ===== */
html[data-theme="dark"] .wia-nav-modal-content { background: var(--t-card); box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 0 1px var(--t-line); color: var(--t-text); }
/* .wia-nav-modal-header keeps the brand gradient + white */
html[data-theme="dark"] .wia-nav-modal-tabs { background: var(--t-tint); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .wia-nav-modal-tab { background: var(--t-card); border-color: var(--t-line); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-modal-tab:hover { background: #262a3a; }
/* .wia-nav-modal-tab.active keeps the gradient */
html[data-theme="dark"] .wia-nav-modal-body { background: var(--t-card); }
/* language-modal.js: `.wia-nav-lang-search{border:2px solid #e5e7eb !important …}` — same weight needed */
html[data-theme="dark"] .wia-nav-lang-search { background: var(--t-input); color: var(--t-text); border-color: var(--t-input-line) !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: var(--t-accent-text) !important; box-shadow: 0 0 0 3px rgba(159, 173, 249, .2); }
html[data-theme="dark"] .wia-nav-lang-count { background: linear-gradient(135deg, rgba(102, 126, 234, .2), rgba(118, 75, 162, .2)); color: var(--t-accent-text); }
html[data-theme="dark"] .wia-nav-lang-item { background: var(--t-card); border-color: #3a3f52; color: var(--t-text); }
html[data-theme="dark"] .wia-nav-lang-item:hover,
html[data-theme="dark"] .wia-nav-lang-item.selected { border-color: var(--t-accent-text); color: #ffffff; }
html[data-theme="dark"] .wia-nav-modal-footer { background: var(--t-tint); border-top-color: var(--t-line); color: var(--t-muted); }
html[data-theme="dark"] .wia-nav-modal-footer a { color: var(--t-accent-text); }
/* #lmApology is style="color:#888" (3.7:1 on tint) — inline → !important */
html[data-theme="dark"] #lmApology { color: var(--t-muted) !important; }

/* ===== PWA install modal (pwa-install.js injects it; pwa-install.css styles it white) ===== */
html[data-theme="dark"] .pwa-modal { background: var(--t-card); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--t-line); }
html[data-theme="dark"] .pwa-modal-title { color: var(--t-text); }
html[data-theme="dark"] .pwa-modal-desc { color: var(--t-muted); }
html[data-theme="dark"] .pwa-modal-close { background: #262a3a; color: var(--t-soft); }
html[data-theme="dark"] .pwa-modal-close:hover { background: #3a3f52; color: var(--t-text); }
/* pwa-install.css `body.dark-mode{…!important}` (its own 🌙 toggle, key kt-dark-mode) is a second, independent
   dark mode: page #1a1a2e, links #00BCD4, h1–h4 #fff. On top of THIS dark theme all of those are still legible
   (1.1:1 page shift, 7.9:1 links, headings on dark cards) so nothing is fought here — see NOTES ④ for the toggle. */

/* ===== high-contrast mode (styles.css 2411–2430, a11y FAB in app.js) already forces #000/#fff with !important —
   it wins over this overlay in both themes, as intended ===== */

/* ===== misc ===== */
html[data-theme="dark"] ::selection { background: rgba(159, 173, 249, .35); }
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible { outline: 2px solid var(--t-accent-text); outline-offset: 2px; }

/* =====================================================================================================================
   privacy.html / terms.html — the two "cyber" pages are DARK originals (own inline <style>: body #0a0a1a, cards
   rgba(20,20,40,.95), neon cyan headings, grey #c0c0c0 text). The dark overlay above is a no-op on them (their
   body/text colours are already within the palette), so this section gives them a LIGHT overlay for consistency.
   Scoping: these class names exist only on the cyber pages, except `.header-content`, `.logo` and `.container`
   (also in index.html) — those are reached only through `.cyber-header`/`body:has(> .cyber-header)` so nothing
   below can match index.html in the light theme. `:has()` is a no-op in browsers without it (pre-2023), in which
   case the two pages simply stay dark.
   Light palette: page #f7f8fb · card #fff · text #0f172a · soft #475569 · line #e2e8f0 · cyan #0e7490 · magenta #a21caf
   · indigo link #4338ca (8.4:1 on white). The brand-gradient header and its white text stay (same control as index).
   ===================================================================================================================== */
html[data-theme="light"] body:has(> header.cyber-header) { background: #f7f8fb; color: #0f172a; }
html[data-theme="light"] body:has(> header.cyber-header)::before {
  background:
    linear-gradient(90deg, rgba(67, 56, 202, .06) 1px, transparent 1px),
    linear-gradient(rgba(67, 56, 202, .06) 1px, transparent 1px);
  background-size: 50px 50px;
}
html[data-theme="light"] .cyber-header { box-shadow: 0 4px 24px rgba(67, 56, 202, .18); }
html[data-theme="light"] .cyber-header::after { background: linear-gradient(90deg, #0e7490, #a21caf, #0e7490); }
html[data-theme="light"] .cyber-header .logo i { filter: none; }
html[data-theme="light"] .cyber-header .logo-text { text-shadow: none; }
html[data-theme="light"] .cyber-header .back-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
html[data-theme="light"] .cyber-header .back-btn:hover { background: rgba(255, 255, 255, .26); box-shadow: none; }
html[data-theme="light"] .page-title h1 { background: linear-gradient(135deg, #0e7490, #a21caf); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
html[data-theme="light"] .page-title .subtitle { color: #475569; }
html[data-theme="light"] .content-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 6px 24px rgba(15, 23, 42, .08); }
html[data-theme="light"] .content-card::before { background: linear-gradient(90deg, #4338ca, #7e22ce, #0e7490); }
html[data-theme="light"] .section h2 { color: #0e7490; }                         /* was neon #00ffff */
html[data-theme="light"] .section p,
html[data-theme="light"] .section li { color: #1f2937; }                         /* was #c0c0c0 */
html[data-theme="light"] .section ul li::before { color: #4338ca; }
html[data-theme="light"] .highlight-box { background: #eef2ff; border-left-color: #4338ca; }
html[data-theme="light"] .highlight-box p { color: #0f172a; }
html[data-theme="light"] .cyber-footer { background: linear-gradient(180deg, transparent, #eef0f6); border-top-color: #e2e8f0; }
html[data-theme="light"] .cyber-footer p { color: #475569; }
html[data-theme="light"] .cyber-footer a { color: #4338ca; }
html[data-theme="light"] .cyber-footer a:hover { color: #0e7490; }
/* inline spots on both pages: "최종 수정일" <p style="…color:#888"> (3.0:1 on white) and the footer motto
   <p style="…color:#555"> — inline → !important */
html[data-theme="light"] .content-card > p[style*="color: #888"] { color: #475569 !important; }
html[data-theme="light"] .cyber-footer p[style*="color: #555"] { color: #475569 !important; }