/* meow_dark_pages.css — full dark-theme coverage for page CHROME (non-game surfaces).
 * Complements meow_dark_games.css (which owns the .gh-* game runtimes + library files + modals).
 * Goal: zero white/gray/beige/purple blocks or buttons. Keep orange + light-blue accents.
 * Palette (matches meow_dark_games.css):
 *   page #0f1115  card #1a1f2b  elevated #232a38  raised #2a3346
 *   text #eaecef  muted #b6bcc6  border #2a3142  accent-border #3a4458
 *   orange-txt #f0c98d  orange-brd #d99a46  blue #74b9ff
 *   good bg #15352a brd #1fbf94 txt #4fe6b4    bad bg #3a1f24 brd #ff6b6b txt #ff9aa2
 */

html[data-theme="dark"] {
  --kpd-page:#0f1115; --kpd-card:#1a1f2b; --kpd-elev:#232a38; --kpd-raise:#2a3346;
  --kpd-text:#eaecef; --kpd-muted:#b6bcc6; --kpd-border:#2a3142; --kpd-accent:#3a4458;
  --kpd-orange:#f0c98d; --kpd-orange-brd:#d99a46; --kpd-blue:#74b9ff;
}

/* ============================================================
 * 1. SURFACES — cards / panels / forms / notices / details
 * ============================================================ */
html[data-theme="dark"] :is(
  main.legal-card, .learn-panel, .plan-card, .study-card, .schedule-panel,
  .promo-card, .session-card, .room-card, .quiz-card, .folder-body, .source-card,
  .flow-card, .mission-card, .schedule-bucket, .bucket-card, .journal-bulk,
  .plan-section, .hero-stat, .seller-details-content, .method-note, .mistake-journal,
  .day-plan, .today-board, .month-panel, .event-form, .calendar-grid,
  .cal-card, .view-tabs, .filters, .empty, .advanced-start, .payment-legal,
  .more, details.folder, .privacy-row, .privacy-consent, .user-id-value, .id-value,
  .room-code, .progress-footer, .reviewSchedulePanel, .schedule-total,
  .battle-preview, .library-archive-notice,
  .live-preview-note, .notice, p.notice, .streak-box, .live-section, .flow,
  .source, .plan-item, .schedule-card
) {
  background-color: var(--kpd-card) !important;
  background-image: none !important;
  color: var(--kpd-text);
  border-color: var(--kpd-border) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
}
/* generic .card only outside game runtimes (settings/analytics/feedback panels) */
html[data-theme="dark"] body:not(.game-root) > * .card,
html[data-theme="dark"] .meow-page .card {
  background-color: var(--kpd-card) !important; background-image: none !important;
  color: var(--kpd-text); border-color: var(--kpd-border) !important;
}
/* tables (learn schedule) */
html[data-theme="dark"] :is(.learn-panel, .schedule-panel, .mistake-journal) :is(table, tr, td, th) {
  background-color: transparent !important; color: var(--kpd-text); border-color: var(--kpd-border) !important;
}
html[data-theme="dark"] tr { background-color: transparent !important; }

/* ============================================================
 * 2. HEROES / HEADERS — beige gradients -> dark gradient (+subtle orange glow)
 * ============================================================ */
html[data-theme="dark"] :is(
  section.top, .adventures-hero, .library-title-block, section.study-card,
  aside#gamesOverviewSpotlight.promo-card, .hero, .page-hero
) {
  background-image:
    radial-gradient(circle at 88% 16%, rgba(217,154,70,.18), rgba(0,0,0,0) 38%),
    linear-gradient(135deg, #1a1f2b 0%, #232a38 60%, #1a1f2b 100%) !important;
  background-color: #1a1f2b !important;
  color: var(--kpd-text);
  border-color: var(--kpd-border) !important;
}
/* summary headers (collapsible cards) */
html[data-theme="dark"] summary {
  background-image: linear-gradient(135deg, #222938, #1f2735) !important;
  background-color: #222938 !important;
  color: var(--kpd-text) !important;
  border-color: var(--kpd-border) !important;
}
html[data-theme="dark"] details {
  background-color: var(--kpd-card) !important; border-color: var(--kpd-border) !important; color: var(--kpd-text);
}
html[data-theme="dark"] .avatar-wrap {
  background-image: linear-gradient(135deg, #2a3346, #232a38) !important;
  background-color: #2a3346 !important; border-color: var(--kpd-accent) !important;
}

/* ============================================================
 * 3. PILLS / BADGES / CHIPS / COUNTS
 * ============================================================ */
/* neutral amber/cream chips -> dark raised chip with orange text */
html[data-theme="dark"] :is(
  .policy-pill, .deck-pill, .streak-pill, .section-count, .schedule-total,
  .journal-selected-count, .count, .game-icon, .topic, .battle-preview-badge,
  .schedule-chevron, .hero-badge, .stat-icon, .bucket-count
) {
  background-color: var(--kpd-raise) !important;
  background-image: none !important;
  color: var(--kpd-orange) !important;
  border-color: var(--kpd-accent) !important;
}
/* mint/green semantic badges -> dark green */
html[data-theme="dark"] :is(.priority-badge, .folder-category, .pill.green, .badge.green, button.cal-btn.green) {
  background-color: #15352a !important; background-image: none !important;
  color: #4fe6b4 !important; border-color: #1fbf94 !important;
}
/* pink/red semantic badges -> dark red */
html[data-theme="dark"] :is(.journal-count, .pill.danger, .badge.danger) {
  background-color: #3a1f24 !important; background-image: none !important;
  color: #ff9aa2 !important; border-color: #ff6b6b !important;
}
/* warn/amber pills */
html[data-theme="dark"] :is(.pill, .pill.warn, .deck-pill, .journal-game, .plan-tag) {
  background-color: var(--kpd-raise) !important; background-image: none !important;
  color: var(--kpd-orange) !important; border-color: var(--kpd-accent) !important;
}
/* progress bars / fills */
html[data-theme="dark"] :is(.progress, .progress-track) {
  background-color: var(--kpd-elev) !important; background-image: none !important; border-color: var(--kpd-border) !important;
}
html[data-theme="dark"] .achievement-fill {
  background-image: linear-gradient(90deg, #d99a46, #f0c98d) !important; background-color: #d99a46 !important;
}

/* ============================================================
 * 4. CALENDAR day cells + tabs
 * ============================================================ */
html[data-theme="dark"] :is(button.cal-day, .cal-day) {
  background-image: linear-gradient(180deg, #1f2735, #1a1f2b) !important;
  background-color: #1a1f2b !important; color: var(--kpd-text) !important; border-color: var(--kpd-border) !important;
}
html[data-theme="dark"] .cal-day.empty { background-image: none !important; background-color: #14181f !important; }
html[data-theme="dark"] .cal-day.is-today,
html[data-theme="dark"] button.cal-day.tone-plain.is-today {
  background-image: linear-gradient(135deg, #3a2c12, #2a3346) !important;
  background-color: #3a2c12 !important; border-color: var(--kpd-orange-brd) !important; color: var(--kpd-orange) !important;
}
html[data-theme="dark"] :is(.view-tabs, .tabs) {
  background-color: var(--kpd-elev) !important; background-image: none !important; border-color: var(--kpd-border) !important;
}
html[data-theme="dark"] :is(a.tab, .tab) { color: var(--kpd-muted) !important; }
html[data-theme="dark"] :is(a.tab.active, .tab.active) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important; background-color: #d99a46 !important;
  color: #1a1206 !important; border-color: var(--kpd-orange-brd) !important;
}

/* ============================================================
 * 5. INPUTS / CHECKBOXES / SELECT-MARKS
 * ============================================================ */
html[data-theme="dark"] :is(
  .search-wrap, .file-select, .select-pill, label.setting, label.setting.timer,
  label.setting.timer-mode, label.privacy-row, label.privacy-consent
) {
  background-color: var(--kpd-elev) !important; background-image: none !important;
  color: var(--kpd-text); border-color: var(--kpd-accent) !important;
}
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
  background-color: var(--kpd-elev) !important; color: var(--kpd-text) !important; border-color: var(--kpd-accent) !important;
}
/* small white square markers / check dots / icons */
html[data-theme="dark"] :is(
  .select-dot, .select-files-icon, .file-select-mark, .chevron, .check, .cross,
  .privacy-consent-mark, .journal-check, .friend-check, input.journal-check, input.friend-check
) {
  background-color: var(--kpd-raise) !important; background-image: none !important; border-color: var(--kpd-accent) !important;
}

/* ============================================================
 * 6. SECONDARY BUTTONS (cream -> dark)
 * ============================================================ */
html[data-theme="dark"] :is(
  button.ghost, button.author, button.journal-action, button.lib-gear,
  button#galFiltersToggle, button.focus-delete, a.today-link, a.month-nav, a.game-card.has-game-video
) {
  background-color: var(--kpd-raise) !important; background-image: none !important;
  color: var(--kpd-orange) !important; border-color: var(--kpd-accent) !important;
}

/* ============================================================
 * 7. PURPLE KILL -> orange/blue
 * ============================================================ */
html[data-theme="dark"] :is(a.active, .tab.active, .seg.active, .pill.active) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important; background-color: #d99a46 !important;
  color: #1a1206 !important; border-color: var(--kpd-orange-brd) !important;
}
html[data-theme="dark"] .stat-icon { background-color: var(--kpd-raise) !important; background-image: none !important; color: var(--kpd-blue) !important; }
html[data-theme="dark"] .event-form.cal-card { background-image: none !important; }

/* ============================================================
 * 8. HEATMAP scale (home) -> dark green ramp
 * ============================================================ */
/* orange intensity ramp (fits palette; bright end stays saturated-orange) */
html[data-theme="dark"] i.heat-swatch.s0 { background-color: #1c2230 !important; }
html[data-theme="dark"] i.heat-swatch.s1 { background-color: #5a3a14 !important; }
html[data-theme="dark"] i.heat-swatch.s2 { background-color: #9c6322 !important; }
html[data-theme="dark"] i.heat-swatch.s3 { background-color: #d99a46 !important; }
html[data-theme="dark"] i.heat-swatch.s4 { background-color: #f0b75e !important; }

/* ============================================================
 * 9. TEXT — genuinely dark text -> muted light; status dot
 * ============================================================ */
html[data-theme="dark"] :is(
  p.adventures-kicker, p.eyebrow, .stat-label, .bucket-empty, .star-text,
  .muted, .setting-desc, .folder-title, .setting-title, .bucket-label
) { color: var(--kpd-muted) !important; }
/* dark titles/labels now sitting on dark cards -> light */
html[data-theme="dark"] :is(
  .live-section-title, .source-title, .flow-title, .plan-title-text, .plan-meta,
  .title, .progress-count, .section-title, .card-title, .item-title, .day-title,
  .source-name, .flow-name, .bucket-title
) { color: var(--kpd-text) !important; }
/* form labels (no class) inside dark page cards */
html[data-theme="dark"] :is(.account-card, .settings-card, form, .form, .field, .form-row) > label,
html[data-theme="dark"] label.field-label { color: var(--kpd-muted) !important; }
/* amber/orange small-print on dark cards -> light orange */
html[data-theme="dark"] :is(.plan-card, .pricing-shell, .seller-details-content) :is(.plan-tag, p, span, strong):not(.kp-btn) {
  /* only recolor if too dark: handled per-class above; keep readable */
}
html[data-theme="dark"] .plan-card .plan-tag { color: var(--kpd-orange) !important; }
/* legal contact button-links */
html[data-theme="dark"] .legal-card a { background-color: transparent !important; background-image: none !important; color: var(--kpd-blue) !important; }
html[data-theme="dark"] .legal-card a.btn, html[data-theme="dark"] .legal-card .btn {
  background-color: var(--kpd-raise) !important; color: var(--kpd-orange) !important; border-color: var(--kpd-accent) !important;
}
html[data-theme="dark"] :is(.legal-card, .learn-panel, .schedule-panel) p:not([class]) { color: var(--kpd-muted) !important; }
html[data-theme="dark"] .library-archive-notice,
html[data-theme="dark"] .library-archive-notice * { color: var(--kpd-text) !important; }
html[data-theme="dark"] summary { color: var(--kpd-text) !important; }
html[data-theme="dark"] .status-dot { background-color: #4b5568 !important; }
html[data-theme="dark"] .header-icon { color: #1a1206 !important; }

/* default label text readable on dark (specific surface rules above still win) */
html[data-theme="dark"] label { color: var(--kpd-text); }
/* pricing card body copy + seller details -> light/muted */
html[data-theme="dark"] :is(.plan-card, .seller-details-content, .payment-legal) :is(p, li, strong, .plan-desc, .plan-note, .plan-sub) {
  color: var(--kpd-text) !important;
}
html[data-theme="dark"] :is(.plan-card, .seller-details-content) :is(.muted, small, .fine) { color: var(--kpd-muted) !important; }
/* calendar day numbers / labels on dark cells */
html[data-theme="dark"] .cal-day, html[data-theme="dark"] .cal-day :is(span, time, .cal-day-num) { color: var(--kpd-text) !important; }
html[data-theme="dark"] .cal-day.is-today, html[data-theme="dark"] .cal-day.is-today * { color: var(--kpd-orange) !important; }
/* streak badge text on dark streak-box */
html[data-theme="dark"] .streak-box, html[data-theme="dark"] .streak-box * { color: var(--kpd-text) !important; }

/* ============================================================
 * 10. PAGE-SPECIFIC STRAGGLERS
 * ============================================================ */
/* friends list rows (social_friends.html inline <style>: background:white) */
html[data-theme="dark"] :is(.friend, .request) {
  background-color: var(--kpd-card) !important; background-image: none !important;
  border-color: var(--kpd-border) !important; color: var(--kpd-text) !important;
}
html[data-theme="dark"] :is(.friend, .request) :is(.name, .person-text, .achievement-name) { color: var(--kpd-text) !important; }
html[data-theme="dark"] :is(.friend, .request) .meta { color: var(--kpd-muted) !important; }
html[data-theme="dark"] .dot { background-color: #4b5568 !important; border-color: var(--kpd-card) !important; }
html[data-theme="dark"] .dot.online { background-color: #31c48d !important; }

/* teacher_live inline <style>: select,input{background:#fffdf8} + .setting:has(input:checked){bg light} */
html[data-theme="dark"] :is(select, input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background-color: var(--kpd-elev) !important; color: var(--kpd-text) !important; border-color: var(--kpd-accent) !important;
}
html[data-theme="dark"] .setting:has(input:checked) {
  background-image: linear-gradient(135deg, #15352a, #1a1f2b) !important; background-color: #15352a !important; border-color: #1fbf94 !important;
}

/* library primary (orange) button -> dark readable text instead of white */
html[data-theme="dark"] :is(.library-action-primary, button#topCreateFolderBtn) { color: #1a1206 !important; }

/* small-print strong inside darkened notice/consent boxes -> light */
html[data-theme="dark"] :is(.live-preview-note, .privacy-consent, .privacy-row, .payment-legal) :is(strong, b, span, p, label) {
  color: var(--kpd-text) !important;
}

/* hub / adventures subtitle paragraphs (muted purple-grey hardcoded) */
html[data-theme="dark"] :is(.games-hub, .games-overview, .hub, .mode-hub, .adventures-page,
  .adventures-hero, .mission, .battle-preview, .promo-card, .overview, .section-head,
  .hero-copy, .hero-card, .mission-card) p,
html[data-theme="dark"] :is(.hub-sub, .overview-sub, .section-sub, .lead, .subtitle, .page-sub) {
  color: var(--kpd-muted) !important;
}

/* native checkboxes/radios -> dark with orange accent (teacher_live inline <style> left them cream) */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  background-color: var(--kpd-elev) !important;
  border-color: var(--kpd-accent) !important;
  accent-color: #d99a46;
}
/* streak-badge sits on an orange chip -> dark readable text (override the streak-box light rule) */
html[data-theme="dark"] .streak-badge { color: #1a1206 !important; }

/* ============================================================
 * 11. GAME BUILDER / QUIZ STUDIO / LIBRARY PICKER / ERROR CARD
 * ============================================================ */

/* ---- 11a. UltraSet Builder (ultra_set_builder.html inline <style>) ---- */

/* review section (cream panel) */
html[data-theme="dark"] section.review {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* muted sub-text (purple #6f6178) */
html[data-theme="dark"] p.sub {
  color: #b6bcc6 !important;
}

/* game-choice label (unselected, cream #fffdf8) */
html[data-theme="dark"] label.game-choice {
  background-color: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* game-choice label hover */
html[data-theme="dark"] label.game-choice:hover {
  background-color: #323d54 !important;
  border-color: #d99a46 !important;
}

/* game-choice SELECTED state (orange-tinted dark) */
html[data-theme="dark"] label.game-choice.is-selected {
  background-color: #3a2c12 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #d99a46 !important;
}

/* check-box square (unchecked = cream; checked inside .is-selected keeps orange -> handled by specificity) */
html[data-theme="dark"] span.check-box {
  background-color: #2a3346 !important;
  background-image: none !important;
  border-color: #3a4458 !important;
  color: #f0c98d !important;
}
/* checked state: keep the orange fill from .is-selected context */
html[data-theme="dark"] label.game-choice.is-selected span.check-box {
  background-color: #d99a46 !important;
  border-color: #d99a46 !important;
  color: #1a1206 !important;
}

/* game-help span (cream "?") */
html[data-theme="dark"] span.game-help {
  background-color: #2a3346 !important;
  background-image: none !important;
  border-color: #3a4458 !important;
  color: #f0c98d !important;
}

/* bold text inside game-choice */
html[data-theme="dark"] label.game-choice b {
  color: #eaecef !important;
}

/* game-editor section (cream, on/off states) */
html[data-theme="dark"] section.game-editor,
html[data-theme="dark"] section.game-editor.is-on {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* mode-tabs bar (cream background strip) */
html[data-theme="dark"] div.mode-tabs {
  background-color: #232a38 !important;
  background-image: none !important;
  border-color: #2a3142 !important;
}

/* tab buttons inside mode-tabs (cream) */
html[data-theme="dark"] div.mode-tabs button.tab {
  background-color: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* ACTIVE tab (orange) */
html[data-theme="dark"] div.mode-tabs button.tab.is-active {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important;
  color: #1a1206 !important;
  border-color: #d99a46 !important;
}

/* hint / inline hint text */
html[data-theme="dark"] span.hint {
  color: #b6bcc6 !important;
}

/* generator warning + AI daily notice (muted text on light) */
html[data-theme="dark"] p.generator-warning,
html[data-theme="dark"] #ultraSetAiDailyNotice {
  color: #b6bcc6 !important;
  background-color: #232a38 !important;
  background-image: none !important;
  border-color: #3a4458 !important;
}

/* headings inside builder (h2) */
html[data-theme="dark"] section.review h2,
html[data-theme="dark"] section.game-editor h2,
html[data-theme="dark"] div.mode-tabs h2 {
  color: #eaecef !important;
}

/* ---- 11b. Quiz Studio (quiz_studio.html inline <style>) ---- */

/* props aside (cream side panel) */
html[data-theme="dark"] aside.props {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* canvas section (light gradient background) */
html[data-theme="dark"] section.canvas {
  background-color: #232a38 !important;
  background-image: linear-gradient(135deg, #1a1f2b, #232a38) !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* preview area (light gradient) */
html[data-theme="dark"] div.preview {
  background-color: #232a38 !important;
  background-image: linear-gradient(135deg, #1a1f2b, #232a38) !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* prop-section (white panel) */
html[data-theme="dark"] section.prop-section,
html[data-theme="dark"] section#answerPanel.prop-section {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* topbar header (cream) */
html[data-theme="dark"] header.topbar {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* sidebar (cream) */
html[data-theme="dark"] aside.sidebar {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* thumb buttons (cream) */
html[data-theme="dark"] button.thumb {
  background-color: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* ACTIVE thumb (orange) */
html[data-theme="dark"] button.thumb.active {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important;
  color: #1a1206 !important;
  border-color: #d99a46 !important;
}

/* studio-hint div (cream) */
html[data-theme="dark"] div.studio-hint {
  background-color: #2a3346 !important;
  background-image: none !important;
  color: #b6bcc6 !important;
  border-color: #3a4458 !important;
}

/* media-empty placeholder (cream) */
html[data-theme="dark"] div.media-empty {
  background-color: #232a38 !important;
  background-image: none !important;
  color: #b6bcc6 !important;
  border-color: #2a3142 !important;
}

/* answer row (cream) */
html[data-theme="dark"] div.answer {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* correct answer row (light green -> dark green) */
html[data-theme="dark"] div.answer.is-correct {
  background-color: #15352a !important;
  background-image: none !important;
  color: #4fe6b4 !important;
  border-color: #1fbf94 !important;
}

/* question-card / preview title slide (cream) */
html[data-theme="dark"] div.question-card,
html[data-theme="dark"] #previewTitle.question-card.slide-part {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* secondary label/buttons (cream -> dark, orange text) */
html[data-theme="dark"] label.secondary,
html[data-theme="dark"] button.secondary {
  background-color: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* color text input (white bg) */
html[data-theme="dark"] input#qTextColor {
  background-color: #232a38 !important;
  color: #eaecef !important;
  border-color: #3a4458 !important;
}

/* muted div (gray text, was low-contrast on light; on dark card set explicitly) */
html[data-theme="dark"] div.muted {
  color: #b6bcc6 !important;
}

/* ---- 11c. Library Picker (meow_library_picker.js injected styles) ---- */

/* root group header — cream #fff7e8 (both default and open state) */
html[data-theme="dark"] .mp-group-head.root,
html[data-theme="dark"] .mp-group-head.root.open {
  background-color: #1f2735 !important;
  background-image: none !important;
  border-color: #2a3142 !important;
}

/* group count pill (gray #888) */
html[data-theme="dark"] .mp-group-count {
  background-color: #2a3346 !important;
  color: #b6bcc6 !important;
  border-color: #3a4458 !important;
}

/* group name and group icon (muted text) */
html[data-theme="dark"] .mp-group-name,
html[data-theme="dark"] .mp-group-ic {
  color: #b6bcc6 !important;
}

/* file extension badge (light bg + light text -> dark chip) */
html[data-theme="dark"] .mp-file-ext {
  background-color: #2a3346 !important; background-image: none !important;
  color: #b6bcc6 !important; border-color: #3a4458 !important;
}

/* ---- 11c-extra. Quiz Studio stragglers ---- */
html[data-theme="dark"] a.secondary {
  background-color: #2a3346 !important; background-image: none !important;
  color: #f0c98d !important; border-color: #3a4458 !important;
}
/* color / range / opacity inputs in the studio toolbar */
html[data-theme="dark"] :is(input[type="color"], input#qTextColor, input#qTextBgColor) {
  background-color: #232a38 !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(input[type="range"], input#qTextBgOpacity) {
  accent-color: #d99a46; background-color: #232a38 !important;
}
html[data-theme="dark"] small { color: #b6bcc6 !important; }
/* light-red danger icon button -> dark red */
html[data-theme="dark"] button.danger {
  background-color: #3a1f24 !important; background-image: none !important;
  color: #ff9aa2 !important; border-color: #ff6b6b !important;
}
/* cream answer-shape chip -> dark raised */
html[data-theme="dark"] span.shape {
  background-color: #2a3346 !important; background-image: none !important; border-color: #3a4458 !important;
  color: #f0c98d !important;
}
/* active thumbnail is orange -> all its text dark/readable */
html[data-theme="dark"] button.thumb.active, html[data-theme="dark"] button.thumb.active * { color: #1a1206 !important; }
/* bright-mint correct mark -> palette green (darker so it reads as accent, not a light block) */
html[data-theme="dark"] span.mark { background-color: #1fbf94 !important; color: #06281e !important; }

/* ---- 11d. Error / 404 page card ---- */
/* .card already handled by lines 40-44 for .meow-page / non-game-root contexts;
   add a direct body .card rule for bare error pages that may lack those ancestor classes */
html[data-theme="dark"] body .card {
  background-color: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}

/* ============================================================
 * 12. GAME SETUP SCREENS (.meow-game-setup — light in meow.css, no dark variant)
 *     Scoped generically so every game's setup screen is covered.
 * ============================================================ */
html[data-theme="dark"] .meow-game-setup {
  background-image:
    radial-gradient(circle at 90% 0%, rgba(217,154,70,.16), transparent 34%),
    linear-gradient(135deg, #1a1f2b, #232a38) !important;
  background-color: #1a1f2b !important;
  border-color: #2a3142 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .meow-game-setup .meow-format-box {
  background-image: linear-gradient(135deg, #1f2735, #232a38) !important;
  background-color: #1f2735 !important; border-color: #3a4458 !important; color: #eaecef !important;
}
html[data-theme="dark"] .meow-game-setup-title { color: #eaecef !important; }
html[data-theme="dark"] :is(.meow-game-setup-desc, .meow-game-instructions-body, .meow-game-input-label) { color: #b6bcc6 !important; }
/* secondary setup buttons (cream -> dark raised, orange text) */
html[data-theme="dark"] :is(.meow-game-action-library, .meow-game-action-save, .meow-save-lib-btn) {
  background-color: #2a3346 !important; background-image: none !important; color: #f0c98d !important; border-color: #3a4458 !important;
}
/* primary orange CTAs (keep orange gradient, dark readable text) */
html[data-theme="dark"] :is(.meow-game-action-example, .meow-game-action-template, .meow-game-play) {
  color: #1a1206 !important;
}
html[data-theme="dark"] .meow-game-setup textarea {
  background-color: #232a38 !important; color: #eaecef !important; border-color: #3a4458 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* runtime text that was hardcoded dark on these pages */
html[data-theme="dark"] :is(.quiz, .deck, .matching-game-sequence, #cardArea) { color: #eaecef !important; }
html[data-theme="dark"] :is(.quiz > .topbar, .deck > .topbar, .matching-question-nav) { border-color: #2a3142 !important; }

/* ============================================================
 * 13. GAME MODE PICKERS / RUNNER WIDGET / CODING MODE TABS / FLOATING MENUS
 * ============================================================ */
/* flashcards/matching mode-selection cards (white) */
html[data-theme="dark"] :is(.mode, .mode.premium-mode, .mode-card, .game-mode) {
  background-color: #1a1f2b !important; background-image: none !important;
  color: #eaecef !important; border-color: #2a3142 !important;
}
/* "Открыть режим" launch links (light-blue text on light) -> orange CTA */
html[data-theme="dark"] :is(a.start, .start.match, .start.mult, .start.cards, .mode .start) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}
/* runner / progress widgets (white) */
html[data-theme="dark"] :is(.meow-runner, #progressContainer, .meow-mode-walk, #progressMan, #runnerToggle, .runner, .progress-container) {
  background-color: #1a1f2b !important; background-image: none !important;
  color: #eaecef !important; border-color: #2a3142 !important;
}
/* video poster fallback (white) */
html[data-theme="dark"] video { background-color: #1a1f2b !important; }
/* coding mode tabs: inactive dark, active orange (kill purple) */
html[data-theme="dark"] :is(.mode-btn, button.mode-btn) {
  background-color: #2a3346 !important; background-image: none !important;
  color: #f0c98d !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(.mode-btn.active, button.mode-btn.active) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}
/* floating action menus (library file/folder gear, kp-floating-menu) */
html[data-theme="dark"] :is(.kp-floating-menu, .folder-actions, .file-actions, .context-menu, .action-menu) {
  background-color: #1a1f2b !important; background-image: none !important;
  color: #eaecef !important; border-color: #2a3142 !important; box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] :is(.folder-action-btn, .file-action-btn, .menu-action) {
  background-color: #232a38 !important; background-image: none !important;
  color: #eaecef !important; border-color: #2a3142 !important;
}
html[data-theme="dark"] :is(.folder-action-btn:hover, .file-action-btn:hover) { background-color: #2a3346 !important; }
html[data-theme="dark"] :is(.btn-delete, .folder-action-btn.btn-delete, .action-delete) { color: #ff9aa2 !important; }

/* 13-extra: game-page descriptions / create buttons / runner percent */
html[data-theme="dark"] :is(.mode, .mode-card, .grid) p.desc,
html[data-theme="dark"] p.desc { color: #b6bcc6 !important; }
html[data-theme="dark"] :is(a.create-btn, .create-btn) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}
html[data-theme="dark"] :is(#progressPct, .progress-pct, .runner-pct) { color: #eaecef !important; }

/* ============================================================
 * 14. FOLDER SETTINGS page (/library/folder_settings/*)
 * ============================================================ */
html[data-theme="dark"] :is(.preview-card, #previewCard) {
  background-color: #1a1f2b !important; background-image: none !important;
  color: #eaecef !important; border-color: #2a3142 !important;
}
html[data-theme="dark"] :is(.preview-name, .preview-icon, .preview-category, #previewIcon, #previewCategory) { color: #eaecef !important; }
html[data-theme="dark"] :is(.category-preset, .icon-option, .preset-btn) {
  background-color: #232a38 !important; background-image: none !important;
  color: #eaecef !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(.category-preset.is-active, .icon-option.is-active, .category-preset.active, .icon-option.active) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}
/* save / submit buttons that were white -> orange CTA */
html[data-theme="dark"] :is(.submit-btn, .save-btn, button.submit-btn.save-btn) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}

/* folder-settings stragglers */
html[data-theme="dark"] :is(.preview-description, #previewDescription) { color: #b6bcc6 !important; }
html[data-theme="dark"] :is(.preview-category, #previewCategory) {
  background-color: #2a3346 !important; background-image: none !important; color: #f0c98d !important; border-color: #3a4458 !important;
}

/* ============================================================
 * 15. MODAL INTERNALS (move modal, create-folder modal, generic dialogs)
 *     meow_dark_games.css covers the outer .modal but not these inner parts.
 * ============================================================ */
html[data-theme="dark"] :is(.modal-header, .move-modal-header) {
  background-image: linear-gradient(135deg, #1f2735, #232a38) !important;
  background-color: #1f2735 !important; color: #eaecef !important; border-color: #2a3142 !important;
}
html[data-theme="dark"] :is(.move-modal-footer, .move-modal-body, .modal-body, .modal-footer, .modal-section) {
  background-color: #1a1f2b !important; background-image: none !important; color: #eaecef !important; border-color: #2a3142 !important;
}
html[data-theme="dark"] :is(.folder-tree, .folder-tree-item, .move-tree, .tree-node, .tree-row, .move-tree-item) {
  background-color: #1f2735 !important; background-image: none !important; color: #eaecef !important; border-color: #2a3142 !important;
}
html[data-theme="dark"] :is(.folder-tree-item.is-selected, .tree-node.active, .tree-row.is-selected, .move-tree-item.active) {
  background-color: #2c3550 !important; border-color: #74b9ff !important;
}
html[data-theme="dark"] :is(.move-breadcrumb, .move-source-pill, .moving-pill, .move-source, .destination-pill) {
  background-color: #232a38 !important; background-image: none !important; color: #eaecef !important; border-color: #3a4458 !important;
}
/* secondary modal buttons (cancel) */
html[data-theme="dark"] :is(.move-cancel-btn, .folder-create-cancel, .modal-cancel, .cancel-btn) {
  background-color: #2a3346 !important; background-image: none !important; color: #eaecef !important; border-color: #3a4458 !important;
}
/* primary modal buttons (create/submit) -> orange, dark readable text */
html[data-theme="dark"] :is(.move-create-folder-btn, #moveCreateFolderBtn, .folder-create-submit, .move-confirm-btn, .modal-confirm, .folder-create-btn) {
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-color: #d99a46 !important; color: #1a1206 !important; border-color: #d99a46 !important;
}
/* custom-shortcut preview icon (white) + shortcut section labels */
html[data-theme="dark"] :is(.shortcut-preview, .custom-shortcut-icon, .shortcut-icon) {
  background-color: #2a3346 !important; background-image: none !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(.shortcut-label, .shortcuts-title, .quick-shortcuts-title, .section-label) { color: #b6bcc6 !important; }

/* 15-extra: create-folder modal fields/icons + move-modal pill/tree label */
html[data-theme="dark"] :is(.folder-create-field, .folder-create-grid, .folder-create-field.full) { color: #eaecef !important; }
html[data-theme="dark"] :is(.folder-create-field label, .folder-create-field > span, .folder-icon-options > span, .folder-create-field b) { color: #b6bcc6 !important; }
html[data-theme="dark"] :is(.folder-icon-option, .folder-icon-options .folder-icon-option) {
  background-color: #232a38 !important; background-image: none !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] .folder-icon-option > span { background-color: transparent !important; color: #eaecef !important; }
html[data-theme="dark"] :is(.folder-icon-option.is-active, .folder-icon-option.active, .folder-icon-option[aria-pressed="true"]) {
  background-color: #3a2c12 !important; border-color: #d99a46 !important;
}
html[data-theme="dark"] .move-item-pill {
  background-color: #2a3346 !important; background-image: none !important; color: #f0c98d !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(.tree-label, .folder-tree .tree-label, .move-tree .tree-label) { color: #eaecef !important; }

/* ============================================================
 * 16. GAME-WINDOW LAUNCH ("Открыть игру") + close + template-picker buttons
 *     (meow_game_setup.js injects these light with no dark variant)
 * ============================================================ */
html[data-theme="dark"] .meow-game-window-open,
html[data-theme="dark"] .meow-game-window-open:hover {
  background-color: #2a3346 !important; background-image: none !important;
  color: #f0c98d !important; border-color: #d99a46 !important;
  box-shadow: 0 3px 0 #0f172a, 0 12px 22px rgba(0,0,0,.32) !important;
}
html[data-theme="dark"] .meow-game-window-open:hover { background-color: #323d54 !important; }
html[data-theme="dark"] .meow-game-window-launch-title { color: #f4f0ff !important; }
html[data-theme="dark"] .meow-game-window-close {
  background-color: #2a3346 !important; background-image: none !important;
  color: #eaecef !important; border-color: #3a4458 !important;
}
html[data-theme="dark"] :is(.meow-template-remove, .meow-template-btn-soft) {
  background-color: #2a3346 !important; background-image: none !important;
  color: #f0c98d !important; border-color: #3a4458 !important;
}

/* ============ 17. GAME-RUNTIME SUB-ELEMENTS (uncovered by meow_dark_games) ============ */

/* --- 17a. CSS variables: flip var()-based runtimes (formula/listen/parsons/matching cards) --- */
html[data-theme="dark"] {
  --meow-bg-card: #1a1f2b !important;
  --meow-border: #2a3142 !important;
  --flash-muted: #b6bcc6 !important;
}

/* --- 17b. Neutral cards / panels / faces / summaries / empties / prompts --- */
html[data-theme="dark"] :is(
  .gh-flash-top,
  .gh-flash-face,
  .gh-flash-face.front,
  .gh-flash-face.back,
  .gh-flash-standalone-top,
  .gh-flash-standalone-stage-card,
  .gh-flash-standalone-summary,
  .gh-flash-standalone-empty,
  .gh-formula-card,
  .gh-listen-card,
  .gh-listen-status,
  .gh-listen-reveal,
  .gh-match-panel,
  .gh-match-nav,
  .gh-match-dock,
  .gh-parsons-card,
  .gh-parsons-summary-stat,
  .gh-snake-card,
  .gh-snake-intro,
  .gh-snake-question,
  .gh-text-card,
  .gh-text-prompt,
  .gh-text-chunk,
  .gh-text-explain,
  .qm-shuf-card,
  .qm-shuf-zone,
  .us-code-card,
  .us-code-note,
  .gh-math-solve,
  .gh-math-solve-note,
  .gh-math-solve-notes,
  .gh-sw-result,
  .gh-sw-result-global
) {
  background: #1a1f2b !important;
  background-image: none !important;
  border-color: #2a3142 !important;
  color: #eaecef !important;
}

/* --- 17c. Inputs / textareas --- */
html[data-theme="dark"] :is(
  .gh-listen-input,
  .gh-text-recall,
  .gh-math-solve textarea,
  .us-code-answer input
) {
  background: #232a38 !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #3a4458 !important;
}

/* --- 17d. Feedback states on inputs (correct / wrong) --- */
html[data-theme="dark"] :is(
  .gh-listen-input.wrong,
  .gh-text-recall.wrong
) {
  background: #3a1f24 !important;
  border-color: #ff6b6b !important;
  color: #ff9aa2 !important;
}

/* --- 17e. Neutral pills / badges / chips / status bases --- */
html[data-theme="dark"] :is(
  .gh-snake-pill,
  .gh-snake-control,
  .qm-shuf-card .grip,
  .qm-shuf-controls .secondary,
  .gh-cli-status
) {
  background: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* gh-snake-btn neutral base (close variant handled separately below) */
html[data-theme="dark"] .gh-snake-btn {
  background: #2a3346 !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #3a4458 !important;
}

/* --- 17f. Feedback states: bad / wrong / error surfaces --- */
html[data-theme="dark"] :is(
  .gh-cli-status.bad,
  .gh-units-status.bad,
  .gh-math-choice-status.bad,
  .gh-text-status.bad,
  .gh-sw-empty,
  .gh-snake-btn.close,
  .gh-listen-reveal.show
) {
  background: #3a1f24 !important;
  background-image: none !important;
  border-color: #ff6b6b !important;
  color: #ff9aa2 !important;
}

/* --- 17g. Purple -> palette (pills / timers / progress / trail) --- */

/* standalone pill (bg #f2ecff, text #5b3bc1) -> raised chip, orange text */
html[data-theme="dark"] .gh-flash-standalone-pill {
  background: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
}

/* progress bar track (#efe9df) -> elevated dark */
html[data-theme="dark"] .gh-flash-standalone-bar {
  background: #232a38 !important;
}

/* progress fill gradient (#7c5cf0 -> #17a8e6) -> blue palette gradient */
html[data-theme="dark"] .gh-flash-standalone-bar span {
  background: linear-gradient(90deg, #74b9ff, #0984e3) !important;
  background-image: linear-gradient(90deg, #74b9ff, #0984e3) !important;
}

/* text-card timer (bg #f2ecff, text hardcoded dark) -> raised chip */
html[data-theme="dark"] .gh-text-timer {
  background: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
}

/* time-selector options (neutral white base, purple text) */
html[data-theme="dark"] .gh-text-timesel .tsel {
  background: #2a3346 !important;
  background-image: none !important;
  color: #f0c98d !important;
  border-color: #3a4458 !important;
}

/* active time-selector option (purple #6c5ce7 -> orange) */
html[data-theme="dark"] .gh-text-timesel .tsel.is-active {
  background: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  background-image: linear-gradient(135deg, #d99a46, #f0c98d) !important;
  color: #1a1206 !important;
  border-color: #d99a46 !important;
}

/* snake trail (purple gradient rgba(245,239,255..)) -> dark raised */
html[data-theme="dark"] .gh-snake-trail {
  background: #232a38 !important;
  background-image: none !important;
  border-color: #3a4458 !important;
}

/* text-option buttons (white bg, purple-tinted border, dark text) */
html[data-theme="dark"] .gh-text-option {
  background: #1a1f2b !important;
  background-image: none !important;
  color: #eaecef !important;
  border-color: #3a4458 !important;
}

/* matching dock second override (purple border rgba(121,81,200,.32)) -- consolidate border */
html[data-theme="dark"] .gh-match-dock {
  border-color: #3a4458 !important;
}

/* --- 17h. Dark text on now-dark cards -> light --- */

/* snake counter digit (color #15110d) */
html[data-theme="dark"] .gh-snake-counter b {
  color: #eaecef !important;
  text-shadow: none !important;
}

/* standalone-empty text (#7b4d1e) */
html[data-theme="dark"] .gh-flash-standalone-empty {
  color: #b6bcc6 !important;
}

/* math-solve body color (#251a36) + note warm text (#704414) */
html[data-theme="dark"] .gh-math-solve { color: #eaecef !important; }
html[data-theme="dark"] .gh-math-solve-notes { color: #f0c98d !important; }

/* text-card / text-recall dark body text (#251a36, #20162f) */
html[data-theme="dark"] :is(.gh-text-card, .gh-text-recall, .gh-text-option) { color: #eaecef !important; }

/* code-card body text (#20162f) */
html[data-theme="dark"] :is(.us-code-card, .us-code-note) { color: #eaecef !important; }
/* note warm text (#6f4215) */
html[data-theme="dark"] .us-code-note { color: #f0c98d !important; }

/* qm-shuf-card body text (#20162f) */
html[data-theme="dark"] .qm-shuf-card { color: #eaecef !important; }
/* grip icon text (#9b6726) */
html[data-theme="dark"] .qm-shuf-card .grip { color: #f0c98d !important; }

/* --- 17i. Snake hold / result overlays (cream rgba) --- */
html[data-theme="dark"] :is(.gh-snake-hold, .gh-snake-result, .gh-snake-intro) {
  background: rgba(15, 17, 21, 0.88) !important;
  background-image: none !important;
}

/* --- 17j. Snake board food (already uses --snake-option CSS var; border/bg via skin; skip heavy override) --- */
/* gh-snake-food.wrong: keep its animation variable-driven; only ensure text is readable */
html[data-theme="dark"] .gh-snake-food.wrong {
  color: #fff !important;
}

/* --- 17k. qm-shuf-controls primary button (blue-green gradient) — keep gradient, ensure text readable --- */
/* (Already #fff text, no change needed per rule 9 — left as-is) */

/* --- 17l. gh-flash-standalone-btn: keep border visible on dark background --- */
html[data-theme="dark"] .gh-flash-standalone-btn {
  border-color: #d99a46 !important;
}

/* ============================================================
 * 18. GAME-WINDOW BODY CARD + flashcards-game-page game cards
 *     (meow.css:397 paints these cream with high-specificity !important;
 *      need >=(0,4,x) specificity to beat it)
 * ============================================================ */
html[data-theme="dark"] body.flashcards-game-page .meow-game-window-body > .card,
html[data-theme="dark"] body.flashcards-game-page .flip-card,
html[data-theme="dark"] body.flashcards-game-page #cardArea,
html[data-theme="dark"] body.flashcards-game-page .matching-game-sequence .block,
html[data-theme="dark"] .meow-game-window-body > .card,
html[data-theme="dark"] .meow-game-window-body .card {
  background: #1a1f2b !important;
  background-image: none !important;
  border-color: #2a3142 !important;
  color: #eaecef !important;
}

/* ============================================================
 * 19. KaTeX / formula text must be light in dark (was black -> invisible)
 *     applies to variable-match, formula cloze, multiple-choice math, etc.
 *     Keep green/red feedback contexts.
 * ============================================================ */
html[data-theme="dark"] :is(.katex, mjx-container, [data-raw-math], .math-tex, .formula) ,
html[data-theme="dark"] :is(.katex, mjx-container) * {
  color: #eaecef !important;
}
html[data-theme="dark"] :is(.correct, .is-correct, .gh-formula-status.ok, .feedback.is-ok) :is(.katex, mjx-container) ,
html[data-theme="dark"] :is(.correct, .is-correct) :is(.katex, mjx-container) * { color: #4fe6b4 !important; }
html[data-theme="dark"] :is(.wrong, .is-wrong, .gh-formula-status.bad, .feedback.is-bad) :is(.katex, mjx-container) ,
html[data-theme="dark"] :is(.wrong, .is-wrong) :is(.katex, mjx-container) * { color: #ff9aa2 !important; }
/* gallery game-card cover: darken only the background-COLOR (placeholder beige -> dark);
   never set background-image:none, so an actual cover image (img or inline bg-image) still shows on top */
html[data-theme="dark"] .card-cover { background-color:#1a1f2b !important; }
/* calendar/any view-toggle active tab: dark readable text on the orange active state */
html[data-theme="dark"] :is(.view-tabs, .view-toggle, .seg, .tabs) :is(button.active, .tab.active, .is-active) {
  color:#1a1206 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   AI task generator modal (meow_task_generator.js). The JS injects a <style>
   with light surfaces (.meow-taskgen-modal #fffaf3, -close #f4eadc, field
   inputs #fff). Earlier defensive guesses (.meow-tg-*, task-gen, ai-modal) did
   NOT match the real prefix `meow-taskgen-`, so the generator stayed white.
   html[data-theme=dark] .meow-taskgen-* (0,2,1) beats the injected (0,1,0). */
html[data-theme="dark"] .meow-taskgen-backdrop { background: rgba(0,0,0,.68) !important; }
html[data-theme="dark"] .meow-taskgen-modal {
  background:#1a1f2b !important; color:#eaecef !important; border-color:#2a3142 !important;
}
html[data-theme="dark"] .meow-taskgen-head { background:#232a38 !important; border-bottom-color:#2a3142 !important; }
html[data-theme="dark"] .meow-taskgen-title { color:#f3f5f8 !important; }
html[data-theme="dark"] :is(.meow-taskgen-sub, .meow-taskgen-note, .meow-taskgen-counter,
  .meow-taskgen-file-name, .meow-taskgen-limit-list) { color:#b6bcc6 !important; }
html[data-theme="dark"] :is(.meow-taskgen-field label, .meow-taskgen-limit-title) { color:#cfd4dc !important; }
html[data-theme="dark"] .meow-taskgen-close {
  background:#2a3346 !important; color:#eaecef !important; border-color:#3a4458 !important;
}
html[data-theme="dark"] :is(.meow-taskgen-field select, .meow-taskgen-field textarea,
  .meow-taskgen-field input, .meow-taskgen-file-input) {
  background:#101722 !important; color:#eaecef !important; border-color:#3a4458 !important;
}
html[data-theme="dark"] :is(.meow-taskgen-limits, .meow-taskgen-pdf, .meow-taskgen-file-row) {
  background:#1e2433 !important; border-color:#2a3142 !important;
}
html[data-theme="dark"] .meow-taskgen-file-btn {
  background:#2a3346 !important; color:#eaecef !important; border-color:#3a4458 !important;
}
/* taskgen modal: complete the dark coverage (cancel/generate buttons, notes, errors, the page generator button) */
html[data-theme="dark"] .meow-taskgen-secondary {
  background:#2a3346 !important; color:#eaecef !important; border-color:#3a4458 !important;
}
html[data-theme="dark"] .meow-taskgen-secondary:hover { background:#323d54 !important; }
html[data-theme="dark"] .meow-taskgen-primary,
html[data-theme="dark"] .meow-taskgen-btn {
  background:linear-gradient(135deg, #d99a46, #f0c98d) !important; color:#1a1206 !important;
  border-color:#d99a46 !important; box-shadow:0 3px 0 #8b5a1f, 0 12px 22px rgba(0,0,0,.32) !important;
}
html[data-theme="dark"] .meow-taskgen-primary:hover,
html[data-theme="dark"] .meow-taskgen-btn:hover {
  background:linear-gradient(135deg, #e6a954, #f5d494) !important;
}
html[data-theme="dark"] .meow-taskgen-note {
  background:#232a38 !important; color:#f0c98d !important; border-color:#3a4458 !important;
}
html[data-theme="dark"] .meow-taskgen-error {
  background:#3a1f24 !important; color:#ff9aa2 !important; border-color:#ff6b6b !important;
}