/* ==========================================================================
   Dark mode for the dictionary page (/lexicon).

   Everything here is scoped to html[data-theme="dark"], so the light theme is
   byte-for-byte unchanged when the toggle is off. The attribute is set before
   first paint by the inline script in dictionary.html, so there is no flash.

   Tuned for long reading sessions rather than maximum contrast: the page is a
   soft charcoal instead of pure black and the text is a warm off-white instead
   of pure white. Pure #fff on pure #000 is what causes halation and eye strain
   after an hour of research, which is the problem this is here to solve.

   NOTE ON !important: the dictionary result markup is built in scripts.js and
   flashcards.js with hard-coded inline styles (background:#fff, color:black,
   ...). Inline styles beat stylesheet rules, so the only way to re-colour them
   without rewriting the renderers is !important. The strategy inside the two
   generated regions (#result-container, #search-dropdown) and inside the
   generated modals is:

     1. neutralise every inline colour at once with a `*` reset, then
     2. re-assert the meaningful colours with id-scoped (higher specificity)
        rules below.

   That way a colour added to the renderers later degrades to "inherits the
   dark foreground" instead of "unreadable black on charcoal".
   ========================================================================== */

html[data-theme="dark"] {
    /* Surfaces, lightest layer last */
    --dm-bg: #15181d;
    --dm-surface: #1b1f26;
    --dm-surface-2: #212630;
    --dm-surface-3: #272d38;

    --dm-border: #2c323c;
    --dm-border-strong: #3b4350;

    /* Text: off-white, deliberately not #fff */
    --dm-fg: #d5d9df;
    --dm-fg-strong: #e8ebef;
    --dm-muted: #9aa1ac;
    --dm-faint: #767e8a;

    /* Accents: desaturated so they don't glow against the dark surface */
    --dm-blue: #7fa8e0;
    --dm-blue-deep: #4d6a94;
    --dm-green: #7fbf8a;
    --dm-purple: #bd9ad0;
    --dm-amber: #d9b45c;
    --dm-red: #e08585;

    /* Tinted surfaces (the "yellow container", verb examples, badges) */
    --dm-amber-surface: #241f14;
    --dm-green-surface: #17251b;
    --dm-blue-surface: #172231;

    /* Search-term highlight: was #ffff00, which is blinding on dark */
    --dm-hl-bg: #4d3f12;
    --dm-hl-fg: #f6e6ae;

    --dm-shadow: rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* ==========================================================================
   1. Page shell
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--dm-bg);
    color: var(--dm-fg);
}

html[data-theme="dark"] .app-container {
    background-color: var(--dm-bg);
}

/* Inline background:white on the overlay, so it needs !important or the page
   flashes white for the ~300ms before scripts.js fades it out. */
html[data-theme="dark"] #loading-overlay {
    background: var(--dm-bg) !important;
}

html[data-theme="dark"] #loading-overlay .spinner {
    border-color: var(--dm-surface-3) !important;
    border-top-color: var(--dm-green) !important;
}

html[data-theme="dark"] #loading-overlay p {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] ::selection {
    background: #3a4a63;
    color: var(--dm-fg-strong);
}

/* Scrollbars — a light scrollbar against a dark page is a bright strip that
   defeats the point of the theme. */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dm-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dm-surface-3);
    border-radius: 6px;
    border: 2px solid var(--dm-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-border-strong);
}

/* ==========================================================================
   2. Header
   ========================================================================== */

html[data-theme="dark"] .title,
html[data-theme="dark"] h1.title {
    color: var(--dm-muted);
}

html[data-theme="dark"] .title .subtitle,
html[data-theme="dark"] .title span.subtitle {
    color: var(--dm-faint);
}

/* The "Includes Hans Wehr and Al Mawrid" strapline is an inline-styled <p>. */
html[data-theme="dark"] .header-container p {
    color: var(--dm-faint) !important;
}

html[data-theme="dark"] .hub-bubble-header,
html[data-theme="dark"] .about-btn-header {
    background: var(--dm-surface-2);
    color: var(--dm-fg);
}

html[data-theme="dark"] .hub-bubble-header:hover,
html[data-theme="dark"] .about-btn-header:hover {
    background: var(--dm-surface-3);
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .settings-btn {
    color: var(--dm-muted);
}

html[data-theme="dark"] .settings-btn:hover {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .notification-badge {
    background: var(--dm-green);
    color: #10231a;
    border-color: var(--dm-bg);
}

html[data-theme="dark"] .study-now-header {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .study-now-header:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

html[data-theme="dark"] .study-now-count {
    background: var(--dm-surface-3);
    color: var(--dm-fg);
}

/* The upgrade controls are black-on-white by design; a black pill vanishes on a
   dark page, so invert them to a light pill instead of tinting them. */
html[data-theme="dark"] .upgrade-btn-header,
html[data-theme="dark"] .upgrade-inline-btn {
    background: var(--dm-fg);
    border-color: var(--dm-fg);
    color: var(--dm-bg);
}

html[data-theme="dark"] .upgrade-btn-header:hover,
html[data-theme="dark"] .upgrade-inline-btn:hover {
    background: var(--dm-fg-strong);
    border-color: var(--dm-fg-strong);
}

/* ==========================================================================
   3. Settings dropdown (including the dark-mode row itself)
   ========================================================================== */

html[data-theme="dark"] .dropdown-menu {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    box-shadow: 0 8px 24px var(--dm-shadow);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--dm-fg);
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--dm-surface-3);
}

html[data-theme="dark"] .dropdown-badge {
    background: var(--dm-fg);
    color: var(--dm-bg);
}

/* ==========================================================================
   4. Search box, language / mode toggles, search options panel
   ========================================================================== */

html[data-theme="dark"] #search-input {
    background-color: var(--dm-surface-2);
    color: var(--dm-fg-strong);
    box-shadow: 0 0 0 1px var(--dm-border);
}

html[data-theme="dark"] #search-input:hover {
    background-color: var(--dm-surface-3);
}

html[data-theme="dark"] #search-input:disabled,
html[data-theme="dark"] #root-search-toggle:disabled {
    background-color: var(--dm-surface);
}

html[data-theme="dark"] #search-hint {
    color: var(--dm-faint);
}

html[data-theme="dark"] #search-clear-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dm-muted);
}

html[data-theme="dark"] #search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--dm-fg-strong);
}

/* Segmented pills: the sliding bubble is #111 on #efefef in light mode, so it
   inverts to a light bubble on a dark track. */
html[data-theme="dark"] #lang-toggle,
html[data-theme="dark"] #mode-toggle {
    background: var(--dm-surface-2);
}

html[data-theme="dark"] #lang-bubble,
html[data-theme="dark"] #mode-bubble {
    background: var(--dm-fg);
}

html[data-theme="dark"] .lang-opt {
    color: var(--dm-muted);
}

html[data-theme="dark"] .lang-opt.active {
    color: var(--dm-bg);
}

/* Collapsed language chip inside the search bar (same inversion). */
html[data-theme="dark"] #search-input-wrap #lang-toggle .lang-opt.active {
    background: var(--dm-fg);
    color: var(--dm-bg);
}

html[data-theme="dark"] .search-settings-btn {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .search-settings-btn:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

html[data-theme="dark"] .search-settings-panel {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .search-settings-panel.open {
    border-top-color: var(--dm-border);
}

html[data-theme="dark"] .setting-item {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .setting-item > label:first-child {
    color: var(--dm-fg);
}

html[data-theme="dark"] .setting-item label i {
    color: var(--dm-muted);
}

html[data-theme="dark"] .setting-help {
    color: var(--dm-faint);
}

/* Toggle switches (search options + the dark-mode row) */
html[data-theme="dark"] .toggle-slider {
    background-color: var(--dm-surface-3);
}

html[data-theme="dark"] .toggle-slider:hover {
    background-color: var(--dm-border-strong);
}

html[data-theme="dark"] .toggle-slider:before {
    background-color: var(--dm-fg);
}

html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider,
html[data-theme="dark"] input:checked + .toggle-slider {
    background-color: var(--dm-green);
}

html[data-theme="dark"] input:checked + .toggle-slider:hover {
    background-color: #6dae78;
}

html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider:before {
    background-color: #10231a;
}

/* Free-search counter under the search bar */
html[data-theme="dark"] .free-searches-status {
    color: var(--dm-muted);
}

html[data-theme="dark"] .free-searches-count-text {
    color: var(--dm-fg);
}


html[data-theme="dark"] .free-searches-upgrade-link {
    color: var(--dm-amber);
}

html[data-theme="dark"] .free-searches-upgrade-link {
    border-bottom-color: rgba(217, 180, 92, 0.45);
}

html[data-theme="dark"] .free-searches-upgrade-link:hover {
    color: #e8c877;
    border-bottom-color: #e8c877;
}

/* Locked-state card under the search bar */
html[data-theme="dark"] .fs-lock-card {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 10px 28px var(--dm-shadow);
}

html[data-theme="dark"] .fs-lock-rotator {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .fs-lock-btn {
    background: var(--dm-fg);
    color: var(--dm-bg);
}

html[data-theme="dark"] .fs-lock-btn:hover {
    background: var(--dm-fg-strong);
    color: var(--dm-bg);
}

html[data-theme="dark"] .fs-lock-more {
    color: var(--dm-fg);
    border-bottom-color: var(--dm-border-strong);
}

html[data-theme="dark"] .fs-lock-extra {
    border-top-color: var(--dm-border);
}

html[data-theme="dark"] .fs-lock-inst {
    border-top-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .fs-lock-inst a {
    color: var(--dm-fg);
    border-bottom-color: var(--dm-border-strong);
}

html[data-theme="dark"] .fs-lock-seen {
    color: var(--dm-muted);
    border-bottom-color: var(--dm-border-strong);
}

html[data-theme="dark"] .fs-lock-seen:hover {
    color: var(--dm-fg-strong);
    border-bottom-color: var(--dm-fg-strong);
}

/* Brand colours, with the dark ones lifted so they read on the dark card */
html[data-theme="dark"] .fs-lock-pay .fa-apple-pay {
    color: #fff;
}

html[data-theme="dark"] .fs-lock-gpay {
    color: #e8eaed;
}

html[data-theme="dark"] .fs-lock-pay .fa-paypal {
    color: #009cde;
}

html[data-theme="dark"] .fs-lock-pay .fa-cc-visa {
    color: #fff;
}

html[data-theme="dark"] .fs-lock-pay .fa-stripe {
    color: #8b85ff;
}

html[data-theme="dark"] .fs-lock-terms {
    color: var(--dm-muted);
}

html[data-theme="dark"] .fs-lock-proof {
    color: var(--dm-muted);
}

/* Upgrade pill (free plan) — inline <style> in the template, class-scoped */
html[data-theme="dark"] .upgrade-pill {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .upgrade-pill:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

html[data-theme="dark"] .upgrade-pill.is-exhausted {
    background: var(--dm-fg);
    border-color: var(--dm-fg);
    color: var(--dm-bg);
}

html[data-theme="dark"] .upgrade-pill.is-exhausted:hover {
    background: var(--dm-fg-strong);
    border-color: var(--dm-fg-strong);
}

/* Sample "Try:" chips */
html[data-theme="dark"] .sample-words-label,
html[data-theme="dark"] .sample-root-words-label {
    color: var(--dm-faint);
}

html[data-theme="dark"] .sample-word-bubble,
html[data-theme="dark"] .sample-root-word-bubble {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .sample-word-bubble:hover,
html[data-theme="dark"] .sample-root-word-bubble:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

html[data-theme="dark"] .eng-search-dots span {
    color: var(--dm-faint);
}

/* ==========================================================================
   5. Roots card (#roots-container)
   Class-driven markup, so no blanket reset is needed here.
   ========================================================================== */

html[data-theme="dark"] #roots-container {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-fg);
    box-shadow: 0 4px 14px var(--dm-shadow);
}

html[data-theme="dark"] #roots-container .root-word {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .section-divider {
    color: var(--dm-faint);
}

html[data-theme="dark"] .section-divider::before,
html[data-theme="dark"] .section-divider::after {
    background: var(--dm-border);
}

html[data-theme="dark"] .headword-item {
    color: var(--dm-fg);
}

html[data-theme="dark"] .headword-item:hover {
    color: var(--dm-green);
}

html[data-theme="dark"] .itype {
    color: var(--dm-muted);
}

html[data-theme="dark"] .itype-search {
    color: var(--dm-fg);
}

html[data-theme="dark"] .toggle-arrow {
    color: var(--dm-faint);
}

html[data-theme="dark"] .roots-toggle-btn,
html[data-theme="dark"] .mawrid-chip {
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .roots-toggle-btn:hover,
html[data-theme="dark"] .mawrid-chip:hover {
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

html[data-theme="dark"] .label,
html[data-theme="dark"] .badge {
    background-color: var(--dm-green-surface);
    color: var(--dm-green);
}

/* Selected headword. The light theme paints a pale chip via !important in the
   template's critical CSS, so these have to be at least as specific. */
html[data-theme="dark"] #roots-container .headword-item.selected-word,
html[data-theme="dark"] #roots-container .headword-item.clicked-hans-wehr-noun {
    color: var(--dm-fg-strong) !important;
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] #roots-container .headword-item.selected-word:hover,
html[data-theme="dark"] #roots-container .headword-item.clicked-hans-wehr-noun:hover {
    color: var(--dm-fg-strong) !important;
}

html[data-theme="dark"] #roots-container .headword-item.hans-wehr-noun.selected-word,
html[data-theme="dark"] #roots-container .headword-item.clicked-hans-wehr-noun {
    background: var(--dm-blue-surface) !important;
    border-color: #2f4a6b !important;
    color: #a8c6ea !important;
}

html[data-theme="dark"] .selected-word,
html[data-theme="dark"] .headword-item.selected-word {
    text-decoration-color: var(--dm-green);
}

/* Hans Wehr headwords + tags (injected as a <style> block by scripts.js) */
html[data-theme="dark"] .hans-wehr-noun {
    color: var(--dm-blue) !important;
}

html[data-theme="dark"] .hans-wehr-noun.selected-word,
html[data-theme="dark"] .hans-wehr-noun:hover,
html[data-theme="dark"] .clicked-hans-wehr-noun {
    color: var(--dm-green) !important;
}

/* ==========================================================================
   6. Results (#result-container) and search dropdown
   Step 1: neutralise the inline colours produced by scripts.js.
   ========================================================================== */

html[data-theme="dark"] #result-container,
html[data-theme="dark"] #search-dropdown {
    color: var(--dm-fg);
}

html[data-theme="dark"] #result-container {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 4px 14px var(--dm-shadow);
}

html[data-theme="dark"] #result-container *,
html[data-theme="dark"] #search-dropdown * {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
}

/* Step 2: re-assert the colours that carry meaning. Every rule below is
   id-scoped so it outranks the reset above. */

html[data-theme="dark"] #result-container .arabic-text,
html[data-theme="dark"] #search-dropdown .arabic-text {
    color: var(--dm-blue) !important;
}

html[data-theme="dark"] #result-container .arabic-text-tense {
    color: var(--dm-green) !important;
}

html[data-theme="dark"] #result-container .arrow,
html[data-theme="dark"] #result-container .arabic-text-arrow {
    color: var(--dm-purple) !important;
}

html[data-theme="dark"] #result-container .display-word,
html[data-theme="dark"] #result-container .masdar-form,
html[data-theme="dark"] #result-container .bold-black,
html[data-theme="dark"] #search-dropdown .display-word {
    color: var(--dm-fg-strong) !important;
}

html[data-theme="dark"] #result-container .itype {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .circle {
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #result-container .circle-a {
    background-color: var(--dm-blue-deep) !important;
    color: var(--dm-fg-strong) !important;
}

html[data-theme="dark"] #result-container .circle-verb {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-fg-strong) !important;
}

/* Search-term highlight — the light theme uses #fff3cd */
html[data-theme="dark"] #result-container .search-highlight,
html[data-theme="dark"] #result-container mark,
html[data-theme="dark"] #search-dropdown .search-highlight {
    background-color: var(--dm-hl-bg) !important;
    color: var(--dm-hl-fg) !important;
}

html[data-theme="dark"] #result-container .clickable-ref,
html[data-theme="dark"] #result-container .clickable-search-ref,
html[data-theme="dark"] #result-container .clickable-headword-ref {
    text-decoration-color: var(--dm-border-strong);
}

/* --- Hans Wehr definition cards (inline background:#fff / #f8f9fa / #fff9e6) */
html[data-theme="dark"] #result-container .hans-wehr-definitions {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

/* The "yellow container" (similar words) keeps a warm tint so the visual cue
   the copy refers to still exists. */
html[data-theme="dark"] #result-container .hans-wehr-definitions[style*="fff9e6"] {
    background-color: var(--dm-amber-surface) !important;
    border-color: #3a3223 !important;
}

html[data-theme="dark"] #result-container .hans-wehr-definition {
    background-color: var(--dm-surface-3) !important;
    border-left-color: var(--dm-blue) !important;
}

html[data-theme="dark"] #result-container .hans-wehr-definition[style*="ff6b35"] {
    border-left-color: #d98a5a !important;
}

html[data-theme="dark"] #result-container .hans-wehr-source-label {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .hans-wehr-definition-text {
    color: var(--dm-fg) !important;
}

/* --- "Modern meaning" card, matching the Hans Wehr one --- */
html[data-theme="dark"] #result-container .modern-gloss {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #result-container .modern-gloss-text {
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #result-container .modern-gloss-label {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .verb-form-example {
    background-color: var(--dm-green-surface) !important;
    border-left-color: var(--dm-green) !important;
}

/* --- AraTools block --- */
html[data-theme="dark"] #result-container .aratools-results {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #result-container .aratools-tag {
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .aratools-result-item {
    background-color: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
}

html[data-theme="dark"] #result-container .aratools-main-line {
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #result-container .aratools-sub-line,
html[data-theme="dark"] #result-container .aratools-results .no-results {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .aratools-sub-line strong {
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #result-container .form-bubble {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #result-container .pos-bubble {
    background-color: var(--dm-blue-surface) !important;
    color: var(--dm-blue) !important;
    border-color: #2f4a6b !important;
}

/* --- English search results --- */
html[data-theme="dark"] #result-container #english-result-list .english-row {
    border-bottom-color: var(--dm-border) !important;
}

/* The row a clicked "Also:" pill just opened: the same brief flash, in dark tones */
html[data-theme="dark"] #result-container #english-result-list .english-row.is-opened {
    animation-name: enOpenedFlashDark;
}

@keyframes enOpenedFlashDark {
    0%, 50% { box-shadow: inset 0 0 0 100vmax #3a3016, inset 3px 0 0 #d9b45c; }
    100%    { box-shadow: inset 0 0 0 100vmax rgba(58, 48, 22, 0), inset 3px 0 0 rgba(217, 180, 92, 0); }
}

html[data-theme="dark"] #result-container .en-results-head strong,
html[data-theme="dark"] #result-container .en-headword {
    color: var(--dm-fg-strong) !important;
}

html[data-theme="dark"] #result-container .en-results-head {
    color: var(--dm-muted) !important;
}

/* The blanket reset above clears backgrounds, so the source dots need theirs back */
html[data-theme="dark"] #result-container .syn-chip-dot-hw {
    background-color: var(--dm-blue) !important;
}

html[data-theme="dark"] #result-container .syn-chip-dot-lanes {
    background-color: var(--dm-green) !important;
}

html[data-theme="dark"] #result-container .en-source-hw {
    color: var(--dm-blue) !important;
}

html[data-theme="dark"] #result-container .en-source-lanes {
    color: var(--dm-green) !important;
}

html[data-theme="dark"] #result-container .en-source-mawrid {
    color: var(--dm-amber) !important;
}

/* --- Free-user paywall state --- */
html[data-theme="dark"] #result-container .english-premium {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #lanes-blur-message {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
}

html[data-theme="dark"] #lanes-blur-message .blur-message-title {
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #lanes-blur-message .blur-subscribe-btn {
    background: var(--dm-fg) !important;
    border-color: var(--dm-fg) !important;
    color: var(--dm-bg) !important;
}

html[data-theme="dark"] #lanes-blur-message .blur-subscribe-btn:hover {
    background: var(--dm-fg-strong) !important;
}

/* --- Search dropdown --- */
html[data-theme="dark"] #search-dropdown a {
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #search-dropdown a:hover {
    background-color: var(--dm-surface-2) !important;
}

html[data-theme="dark"] #search-dropdown .display-word.xml-match {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #search-dropdown .source {
    background-color: var(--dm-green-surface) !important;
    color: var(--dm-green) !important;
}

html[data-theme="dark"] #search-dropdown .source.lanes-lexicon-source {
    background-color: var(--dm-blue-surface) !important;
    color: var(--dm-blue) !important;
}

html[data-theme="dark"] #search-dropdown .item-wrapper:has(.source) .type-tag {
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-fg) !important;
}

/* ==========================================================================
   7. Reader mode
   ========================================================================== */

html[data-theme="dark"] .reader-head {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .reader-head .reader-count,
html[data-theme="dark"] .reader-msg,
html[data-theme="dark"] .reader-result-note {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-sec-head,
html[data-theme="dark"] .reader-book-cat,
html[data-theme="dark"] .reader-page-num,
html[data-theme="dark"] .reader-book-meta {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-search-wrap > i {
    color: var(--dm-faint);
}

html[data-theme="dark"] .reader-search {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-search:focus {
    background: var(--dm-surface-3);
    border-color: var(--dm-amber);
}

html[data-theme="dark"] .reader-hl {
    color: var(--dm-blue);
}

html[data-theme="dark"] .reader-cat-row,
html[data-theme="dark"] .reader-book {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .reader-cat-row:hover,
html[data-theme="dark"] .reader-book:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
}

html[data-theme="dark"] .reader-cat-row.open {
    background: var(--dm-surface-3);
    border-color: var(--dm-amber);
}

html[data-theme="dark"] .reader-cat-chev {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-cat-name,
html[data-theme="dark"] .reader-book-name,
html[data-theme="dark"] .reader-book-title,
html[data-theme="dark"] .reader-book-head {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .reader-cat-count {
    background: var(--dm-amber-surface);
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-book-author {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-cont-book {
    background: var(--dm-amber-surface);
    border-color: #3a3223;
}

html[data-theme="dark"] .reader-cont-book:hover {
    border-color: var(--dm-amber);
}

html[data-theme="dark"] .reader-resume {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-bar {
    background: var(--dm-surface-3);
}

html[data-theme="dark"] .reader-bar span {
    background: var(--dm-amber);
}

html[data-theme="dark"] .reader-toolbar {
    background: var(--dm-bg);
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .reader-back-btn,
html[data-theme="dark"] .reader-toc-btn {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-back-btn:hover,
html[data-theme="dark"] .reader-toc-btn:hover {
    background: var(--dm-surface-3);
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-progress {
    background: var(--dm-amber-surface);
    border-color: #3a3223;
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-page,
html[data-theme="dark"] .reader-book-head {
    border-bottom-color: var(--dm-border);
}

/* Book text is the surface people stare at longest — keep it a touch softer
   than the strongest foreground. */
html[data-theme="dark"] .reader-page-text {
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-page-text span[data-type='title'] {
    color: var(--dm-amber);
}

/* Scanned page images are white paper. Dim them so a page turn isn't a flash. */
html[data-theme="dark"] .reader-img,
html[data-theme="dark"] #reader-pdf-canvas {
    filter: brightness(0.82) contrast(1.05);
}

html[data-theme="dark"] #reader-pdf-canvas {
    border-color: var(--dm-border);
}

html[data-theme="dark"] .reader-pdf-card {
    background: var(--dm-amber-surface);
    border-color: #3a3223;
}

html[data-theme="dark"] .reader-pdf-nav,
html[data-theme="dark"] .reader-pdf-zoom,
html[data-theme="dark"] #reader-pdf-page {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-pdf-nav:hover,
html[data-theme="dark"] .reader-pdf-zoom:hover {
    background: var(--dm-surface-3);
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-hint {
    background: var(--dm-amber-surface);
    border-color: #3a3223;
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-hint i {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-tr-btn {
    color: var(--dm-faint);
}

html[data-theme="dark"] .reader-tr-btn:hover,
html[data-theme="dark"] .reader-tr-btn.active {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-tr {
    background: var(--dm-surface-2);
    border-left-color: var(--dm-amber);
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-tr-msg {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-tr-lock {
    background: var(--dm-surface-3);
    border-left-color: var(--dm-fg);
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-tr-lock i,
html[data-theme="dark"] .reader-lookup-lock i {
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-tr-lock a,
html[data-theme="dark"] .reader-lookup-lock a {
    color: var(--dm-fg-strong);
    border-bottom-color: var(--dm-fg-strong);
}

html[data-theme="dark"] .reader-tr-left {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-tr-left a {
    color: var(--dm-amber);
    border-bottom-color: var(--dm-amber);
}

html[data-theme="dark"] .reader-lookup-lock {
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-toc {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    box-shadow: 0 8px 24px var(--dm-shadow);
}

html[data-theme="dark"] .reader-toc-item {
    color: var(--dm-fg);
}

html[data-theme="dark"] .reader-toc-item:hover {
    background: var(--dm-surface-3);
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .reader-toc-l2 {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-toc-l3,
html[data-theme="dark"] .reader-toc-l4 {
    color: var(--dm-faint);
}

html[data-theme="dark"] .reader-lookup {
    background: var(--dm-surface-2);
    border-color: var(--dm-border-strong);
    box-shadow: 0 10px 34px var(--dm-shadow);
}

html[data-theme="dark"] .reader-lookup-word {
    background: var(--dm-surface-3);
    border-bottom-color: var(--dm-border);
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .reader-lookup-close {
    color: var(--dm-faint);
}

html[data-theme="dark"] .reader-lookup-close:hover {
    background: var(--dm-surface-2);
    color: var(--dm-amber);
}

html[data-theme="dark"] .reader-lookup-msg,
html[data-theme="dark"] .reader-lookup-meta {
    color: var(--dm-muted);
}

html[data-theme="dark"] .reader-lookup-item {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .reader-lookup-gloss {
    color: var(--dm-fg);
}

/* ==========================================================================
   8. Hub / Contact modals
   ========================================================================== */

html[data-theme="dark"] .contact-modal {
    background-color: rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .contact-modal-content {
    background-color: var(--dm-surface-2);
    box-shadow: 0 10px 30px var(--dm-shadow);
}

html[data-theme="dark"] .contact-modal-header {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .contact-modal-header h3 {
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .contact-modal-close {
    color: var(--dm-muted);
}

html[data-theme="dark"] .contact-modal-close:hover {
    color: var(--dm-fg-strong);
    background-color: var(--dm-surface-3);
}

html[data-theme="dark"] .contact-modal-body,
html[data-theme="dark"] .contact-modal-body p {
    color: var(--dm-fg);
}

html[data-theme="dark"] .tab-bubble {
    background: var(--dm-surface-3);
    color: var(--dm-fg);
}

html[data-theme="dark"] .tab-bubble:hover {
    background: var(--dm-border-strong);
}

html[data-theme="dark"] .tab-bubble.active {
    background: var(--dm-blue-deep);
    border-color: var(--dm-blue-deep);
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .contact-email-container input {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border);
    color: var(--dm-fg);
}

html[data-theme="dark"] .contact-email-container input:focus {
    border-color: var(--dm-blue);
    box-shadow: 0 0 0 3px rgba(127, 168, 224, 0.15);
}

html[data-theme="dark"] .copy-btn {
    background-color: var(--dm-blue-deep);
    color: var(--dm-fg-strong);
}

html[data-theme="dark"] .copy-btn:hover {
    background-color: var(--dm-blue);
    color: var(--dm-bg);
}

html[data-theme="dark"] .copy-success {
    background-color: var(--dm-green-surface);
    border-color: #2b4433;
    color: var(--dm-green);
}

/* Hub update cards are built inline in dictionary.html — same reset/re-assert
   pattern as the results area. */
html[data-theme="dark"] #updatesContent * {
    color: inherit !important;
    background-color: transparent !important;
}

html[data-theme="dark"] #updatesContent {
    color: var(--dm-fg);
}

html[data-theme="dark"] #updatesContent > div > div {
    background-color: var(--dm-surface-3) !important;
    border-left-color: var(--dm-blue) !important;
}

html[data-theme="dark"] #updatesContent h4 {
    color: var(--dm-fg-strong) !important;
}

html[data-theme="dark"] #updatesContent small {
    color: var(--dm-muted) !important;
}

/* ==========================================================================
   9. Save-word UI (flashcards.js + the English-results save modal)
   ========================================================================== */

html[data-theme="dark"] #bookmark-btn,
html[data-theme="dark"] #note-edit-btn,
html[data-theme="dark"] #note-delete-btn {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #bookmark-note-display {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #note-edit-modal,
html[data-theme="dark"] #english-save-modal {
    background: rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] #note-edit-modal *,
html[data-theme="dark"] #english-save-modal * {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #note-edit-modal > div,
html[data-theme="dark"] #english-save-modal > div {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-fg) !important;
    box-shadow: 0 24px 80px var(--dm-shadow) !important;
}

html[data-theme="dark"] #note-edit-input,
html[data-theme="dark"] #english-save-note {
    background-color: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-fg) !important;
}

html[data-theme="dark"] #note-edit-input::placeholder,
html[data-theme="dark"] #english-save-note::placeholder {
    color: var(--dm-faint);
}

html[data-theme="dark"] #note-edit-save,
html[data-theme="dark"] #english-save-confirm {
    background-color: var(--dm-fg) !important;
    color: var(--dm-bg) !important;
}

html[data-theme="dark"] #note-edit-cancel,
html[data-theme="dark"] #english-save-cancel {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] #note-edit-error,
html[data-theme="dark"] #english-save-error {
    color: var(--dm-red) !important;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

html[data-theme="dark"] .mission-footer {
    border-top-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .mission-title,
html[data-theme="dark"] .mission-text {
    color: var(--dm-muted);
}

html[data-theme="dark"] .footer-copyright {
    color: var(--dm-faint);
}

/* Synonym pills under an English search result */
html[data-theme="dark"] .syn-chip-label {
    color: var(--dm-faint);
}

html[data-theme="dark"] .syn-chip {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

html[data-theme="dark"] .syn-chip:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
    color: var(--dm-fg);
}

/* "Show all" / "Hide all": filled, the other way round from the light theme. Id-scoped
   and !important because the results reset clears every fill inside the container. */
html[data-theme="dark"] #result-container .syn-chip.syn-chip-all,
html[data-theme="dark"] #result-container .syn-chip.syn-chip-all:hover {
    background-color: var(--dm-fg) !important;
    border-color: var(--dm-fg) !important;
    color: var(--dm-bg) !important;
}
html[data-theme="dark"] #result-container .syn-chip-all-count {
    background-color: rgba(0, 0, 0, 0.14) !important;
}

html[data-theme="dark"] .syn-chip-open,
html[data-theme="dark"] .syn-chip-open:hover {
    background: var(--dm-fg);
    border-color: var(--dm-fg);
    color: var(--dm-bg);
}


/* Unlock link on the blurred Mukhtar panel: the results reset clears its fill */
html[data-theme="dark"] #result-container .mukhtar-unlock {
    background-color: var(--dm-fg) !important;
    color: var(--dm-bg) !important;
}