/* wiasis.com — site theme overlay: DARK (2026-10-29, family56 bundle D).
   ORIGINAL look = LIGHT (index.html inline <style> 45~1046: body purple gradient #667eea→#764ba2, white <main> card,
   header.simple-header #2c3e50, category-menu purple gradient + white chips; NO :root tokens, 129 hard-coded hex).
   Live files untouched. Every rule is scoped to html[data-theme="dark"], so with nothing saved the page renders exactly
   as before. Load at the END of <head> (line 1062 `</head>`, after the inline <style> and the 6 external css links).
   color-scheme: engine, not here.

   ★ /shared/wia-components/wia_init.js forces html[data-theme] = localStorage.wia_theme || 'light' on DOMContentLoaded
   (see NOTES ④) — the engine must write the resolved theme into the legacy key `wia_theme`, otherwise this overlay is
   switched off 100 ms after every load. The shared language modal (wia_modal.js) already ships its own
   `[data-theme="dark"]` rules (dark card #1a1a2e, inputs #2d3a5f) — they turn on together with this file; the
   leftovers inside that modal are patched below (our selectors are html[data-theme] + class = higher specificity, and
   the kit's <style id="wia-modal-styles"> is appended at runtime, i.e. after this file, so specificity decides).

   Dark palette (contrast vs page #0b0d12 / card #14161f / band #1b1e2a)
   ─ page   #0b0d12 (body keeps a faint purple gradient #0f1020→#160f24)   card #14161f   band #1b1e2a   line #2a2d3d
   ─ text   #e9ecf2 (16.9 / 15.5)   muted #a3abbd (8.6 / 7.9)   dim #8b93a7 (6.4)
   ─ brand purple as TEXT/ICON #8ea0f7 (7.1 on card) · link #9fb0ff (8.5)
   ─ brand FILL (buttons, back-to-top) linear-gradient(135deg,#5563d6,#6a3f93) + white text (5.2 / 6.5)
   ─ control border #7b879c (5.0 on card) — lang button, category chips, inputs
   ─ blue active chip #2563eb + white (5.2)   ok green #4ade80   warn/err #f87171 (6.9)
   Kept on purpose: donation band (deep purple #2b1a4d→#4a2a8a, white text), coffee button (orange), modal header
   gradient (white text), 🔬/❤ emoji, Font Awesome icons (inherit). */

/* ===== page ===== */
html[data-theme="dark"] body {
  background: linear-gradient(135deg, #0f1020 0%, #160f24 100%);
  color: #e9ecf2;
}
html[data-theme="dark"] ::selection { background: rgba(142, 160, 247, .35); }

/* ===== header (static <header class="simple-header">, line 1090) ===== */
html[data-theme="dark"] .simple-header {
  background: #14161f;
  color: #e9ecf2;
  box-shadow: none;
  border-bottom: 1px solid #2a2d3d;
}
html[data-theme="dark"] .logo-section .subtitle { opacity: 1; color: #a3abbd; }
/* 🌐 Language — transparent button with rgba(255,255,255,.3) border → control border 3:1 */
html[data-theme="dark"] .header-lang-btn { color: #e9ecf2; border-color: #7b879c; background: #1b1e2a; }
html[data-theme="dark"] .header-lang-btn:hover { background: #242838; border-color: #9fb0ff; }
html[data-theme="dark"] .header-lang-btn:focus-visible { outline: 2px solid #9fb0ff; outline-offset: 2px; }

/* ===== category menu (sticky, purple gradient + white chips) ===== */
html[data-theme="dark"] .category-menu {
  background: #0f1117;
  border-bottom-color: #2a2d3d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .category-btn { background: #1b1e2a; border-color: #7b879c; color: #c9d0dc; }
html[data-theme="dark"] .category-btn:hover { background: #242838; color: #e9ecf2; border-color: #9fb0ff; }
html[data-theme="dark"] .category-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="dark"] .category-btn:focus-visible { outline: 2px solid #e9ecf2; outline-offset: 2px; }

/* ===== <main> white card → dark card ===== */
html[data-theme="dark"] main {
  background: #14161f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  border: 1px solid #2a2d3d;
}

/* hero (#2c3e50 band with gradient-text title) */
html[data-theme="dark"] .hero-section { background: #1b1e2a; color: #e9ecf2; border-bottom: 1px solid #2a2d3d; }
html[data-theme="dark"] .hero-title { background: linear-gradient(45deg, #9fb0ff, #c084fc); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .hero-subtitle { opacity: 1; color: #c9d0dc; }

/* upload */
html[data-theme="dark"] .upload-section { border-bottom-color: #2a2d3d; }
html[data-theme="dark"] .upload-section h2 { color: #e9ecf2; }
html[data-theme="dark"] .upload-zone { border-color: #8ea0f7; background: linear-gradient(45deg, #181b26, #14161f); }
html[data-theme="dark"] .upload-zone:hover { border-color: #c084fc; background: linear-gradient(45deg, #1b1e2a, #181b26); }
html[data-theme="dark"] .upload-zone.dragover { border-color: #9fb0ff; background: linear-gradient(45deg, #20243a, #1b1e2a); }
html[data-theme="dark"] .upload-icon { color: #8ea0f7; }
html[data-theme="dark"] .upload-text { color: #a3abbd; }
/* line 1210: <p style="color: #999">or</p> — #999 is 6.4:1 on the card, left as is */

/* buttons (purple gradient + white text; the gradient is deepened so white stays ≥ 4.5:1 on both stops) */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-secondary { background: linear-gradient(135deg, #5563d6 0%, #6a3f93 100%); color: #fff; }
html[data-theme="dark"] .btn-secondary { border-color: #3a3f55; }
html[data-theme="dark"] .btn-secondary:hover { background: linear-gradient(135deg, #6572e0 0%, #7a4ca6 100%); border-color: #9fb0ff; }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 5px 15px rgba(85, 99, 214, .45); }
html[data-theme="dark"] .btn:focus-visible { outline: 2px solid #e9ecf2; outline-offset: 2px; }

/* examples band (purple gradient) + white cards */
html[data-theme="dark"] .examples-section { background: linear-gradient(135deg, #1a1733 0%, #231a3a 100%); border-top: 1px solid #2a2d3d; border-bottom: 1px solid #2a2d3d; }
html[data-theme="dark"] .examples-section h2 { color: #e9ecf2; }
html[data-theme="dark"] .example-card { background: #14161f; border: 1px solid #2a2d3d; box-shadow: 0 4px 15px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .example-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, .5); border-color: #8ea0f7; }
html[data-theme="dark"] .example-title { color: #e9ecf2; }
html[data-theme="dark"] .example-description { color: #a3abbd; }

/* 150 functions list */
html[data-theme="dark"] .functions-title { color: #e9ecf2; }
html[data-theme="dark"] .functions-subtitle { color: #a3abbd; }
html[data-theme="dark"] .category-title { color: #e9ecf2; border-bottom-color: #8ea0f7; }
/* the 150 purple-gradient tiles would be very loud on a dark page → quiet cards, brand edge on hover
   (original hover turns the tile white with #2c3e50/#666 text — overridden here, both states) */
html[data-theme="dark"] .function-card { background: #1b1e2a; border-color: #2a2d3d; }
html[data-theme="dark"] .function-card:hover { background: #20243a; border-color: #8ea0f7; box-shadow: 0 4px 12px rgba(142, 160, 247, .25); }
html[data-theme="dark"] .function-name,
html[data-theme="dark"] .function-card:hover .function-name { color: #e9ecf2; }
html[data-theme="dark"] .function-description,
html[data-theme="dark"] .function-card:hover .function-description { color: #a3abbd; }
/* line ~1517: <p style="…color: #667eea…"> preview note — #667eea is 4.5:1 borderline on #14161f → inline needs !important */
html[data-theme="dark"] .functions-section p[style*="color: #667eea"] { color: #9fb0ff !important; }

/* ===== donation band (outside <main>, on the page gradient) ===== */
html[data-theme="dark"] .donation-section { background: linear-gradient(135deg, #2b1a4d 0%, #4a2a8a 100%); border: 1px solid #3a2f63; }
html[data-theme="dark"] .stat-bubble { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .support-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .support-btn:hover { background: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .benefits-card { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
html[data-theme="dark"] .thank-you-note { opacity: 1; color: #d9d2f0; }

/* ===== footer (#2c3e50) ===== */
html[data-theme="dark"] .wiki-footer { background-color: #0f1117; color: #c9d0dc; border-top: 1px solid #2a2d3d; }
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .address { color: #a3abbd; }
html[data-theme="dark"] .footer-link { color: #9fb0ff; }
html[data-theme="dark"] .footer-link:hover { color: #c7d2ff; }
html[data-theme="dark"] .powered-by { color: #8b93a7; }
html[data-theme="dark"] .powered-by a { color: #9fb0ff; }
/* .motto #f1c40f (10:1) and .divider #7f8c8d (5.4:1) are fine on #0f1117 — left as they are */
/* line ~1570: A11Y self-audit caption <div style="font-size:10px;color:#94a3b8"> is 6:1 on #0f1117 — left as is */

/* ===== back-to-top ===== */
html[data-theme="dark"] .back-to-top { background: linear-gradient(135deg, #5563d6 0%, #6a3f93 100%); box-shadow: 0 5px 15px rgba(0, 0, 0, .55); }

/* ===== JS-rendered analysis results inside <main> (inline styles from the page scripts / sections/<name>.html) =====
   Only the colour spots that vanish on a dark card; table cells with inline #dee2e6 borders + purple gradient heads
   stay as they are (white text on purple, readable). !important: inline style. */
html[data-theme="dark"] main [style*="color: #2c3e50"] { color: #e9ecf2 !important; }
html[data-theme="dark"] main [style*="color: #333"] { color: #e9ecf2 !important; }
html[data-theme="dark"] main [style*="color: #666"] { color: #a3abbd !important; }
html[data-theme="dark"] main [style*="color: #1976d2"] { color: #8ab4ff !important; }
html[data-theme="dark"] main [style*="color: #2e7d32"] { color: #4ade80 !important; }
html[data-theme="dark"] main [style*="background: #e3f2fd"] { background: #15223a !important; border-left-color: #60a5fa !important; }
html[data-theme="dark"] main [style*="border: 1px solid #dee2e6"]:not([style*="background"]) { border-color: #3a3f55 !important; }
/* safety net for the fetched tool sections (sections/analysis/<name>.html: .form-control ×95, .card ×12, .btn-secondary …) */
html[data-theme="dark"] main .form-control,
html[data-theme="dark"] main select,
html[data-theme="dark"] main input[type="text"],
html[data-theme="dark"] main input[type="number"],
html[data-theme="dark"] main textarea { background: #0f1117; color: #e9ecf2; border: 1px solid #7b879c; }
html[data-theme="dark"] main .form-control:focus,
html[data-theme="dark"] main select:focus,
html[data-theme="dark"] main input:focus,
html[data-theme="dark"] main textarea:focus { border-color: #9fb0ff; box-shadow: 0 0 0 3px rgba(159, 176, 255, .25); outline: none; }
html[data-theme="dark"] main .card,
html[data-theme="dark"] main .option-group,
html[data-theme="dark"] main .file-preview { background: #1b1e2a; border-color: #2a2d3d; color: #e9ecf2; }
html[data-theme="dark"] main .section-description,
html[data-theme="dark"] main .checkbox-label { color: #a3abbd; }

/* ===== shared language modal (wia_modal.js injects #wia-language-modal; its own [data-theme="dark"] rules give the
   dark card #1a1a2e + #2d3a5f inputs — these are the bits it forgot) ===== */
html[data-theme="dark"] .language-modal { background: rgba(0, 0, 0, .7); }
html[data-theme="dark"] .modal-content { border: 1px solid #3a4a6b; }
html[data-theme="dark"] .section-title { color: #fff; }
html[data-theme="dark"] .clear-search { color: #b8c5d6; }
html[data-theme="dark"] .stats-section { border-top-color: #3a4a6b; }
html[data-theme="dark"] .stat-number { color: #8ab4ff; }      /* #4285f4 was 2.6:1 on #2d3a5f */
html[data-theme="dark"] .stat-label { color: #b8c5d6; }       /* #666 was 2.4:1 on #2d3a5f */
html[data-theme="dark"] .language-item { color: #fff; border-color: #3a4a6b; }
html[data-theme="dark"] .language-item:hover { border-color: #8ab4ff; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
html[data-theme="dark"] #wia-language-search::placeholder { color: #b8c5d6; }

/* ===== Ask-AI modal (/ask-ai-modal.css: white card, #f8f9fa tabs) — shell only ===== */
html[data-theme="dark"] .ai-modal-content { background: #14161f; color: #e9ecf2; border: 1px solid #2a2d3d; }
html[data-theme="dark"] .ai-tabs,
html[data-theme="dark"] .ai-api-setup,
html[data-theme="dark"] .ai-quick-actions,
html[data-theme="dark"] .ai-input-area,
html[data-theme="dark"] .ai-stats-context { background: #1b1e2a; border-color: #2a2d3d; }
html[data-theme="dark"] .ai-tab { color: #a3abbd; }
html[data-theme="dark"] .ai-tab.active { background: #14161f; color: #9fb0ff; border-bottom-color: #9fb0ff; }
html[data-theme="dark"] .ai-tab:hover:not(.active) { background: #242838; }
html[data-theme="dark"] .ai-action-btn { background: #14161f; color: #c9d0dc; border-color: #3a3f55; }
html[data-theme="dark"] .ai-messages { background: #14161f; }
html[data-theme="dark"] .ai-message.assistant .ai-message-content { background: #1b1e2a; color: #e9ecf2; border-color: #2a2d3d; }
html[data-theme="dark"] .ai-message-input,
html[data-theme="dark"] .ai-api-input { background: #0f1117; color: #e9ecf2; border-color: #7b879c; }
html[data-theme="dark"] .ai-api-help { color: #a3abbd; }

/* ===== PWA install modal / sidebar box (/pwa-install.css) — shell only ===== */
html[data-theme="dark"] .pwa-modal,
html[data-theme="dark"] .pwa-sidebar-box { background: #14161f; color: #e9ecf2; border: 1px solid #2a2d3d; }
html[data-theme="dark"] .pwa-modal-desc,
html[data-theme="dark"] .pwa-sidebar-box .pwa-box-desc { color: #a3abbd; }
html[data-theme="dark"] .pwa-modal-close { color: #a3abbd; }

/* ===== language selector <select> (static/css/language-menu.css: white-ish on purple header — now on a dark header) ===== */
html[data-theme="dark"] .language-selector select { background: #1b1e2a; border-color: #7b879c; color: #e9ecf2; }
html[data-theme="dark"] .language-selector select:hover { background: #242838; border-color: #9fb0ff; }

/* ===== generic focus ring for the header controls the engine will add next to .header-lang-btn ===== */
html[data-theme="dark"] .simple-header button:focus-visible { outline: 2px solid #9fb0ff; outline-offset: 2px; }