/*
 * Fluency light appearance
 *
 * This is a designed light palette, not a visual inversion. Shared components
 * inherit the semantic surface/text variables below; the scoped rules handle
 * controls whose dark treatment intentionally used literal translucent white
 * or black because they sit on media, glass, or a full-screen scrim.
 */



:root[data-theme="light"] body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.96) 0%, transparent 48%),
        radial-gradient(ellipse at bottom right, rgba(var(--accent-primary-rgb, 200, 16, 46), 0.045) 0%, transparent 40%),
        linear-gradient(180deg, #f7f9fb 0%, #eef2f5 58%, #e9eef2 100%);
}

:root[data-theme="light"] .header {
    color: var(--text-primary);
}

:root[data-theme="light"] .card-face {
    box-shadow: 0 18px 48px rgba(27, 39, 51, 0.14), 0 2px 6px rgba(27, 39, 51, 0.08);
}

:root[data-theme="light"] .modal {
    background: rgba(23, 31, 39, 0.38);
}

:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .settings-modal-content > .settings-tabs-header {
    box-shadow: 0 24px 64px rgba(27, 39, 51, 0.18);
}

:root[data-theme="light"] .settings-modal-content > .settings-tabs-header {
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}

:root[data-theme="light"] .appearance-settings-card {
    border-color: var(--border-color);
    background: #f2f6f8;
}

/* Keep Fluency's existing rounded-panel grammar, but make the hierarchy read
   naturally in daylight: a cool canvas, white working surfaces, and quiet
   blue-grey depth instead of a page full of equally pale boxes. */
:root[data-theme="light"] .setup-step,
:root[data-theme="light"] .personal-coverage-wrapper,
:root[data-theme="light"] .offline-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 1px 2px rgba(27, 39, 51, 0.035), 0 8px 24px rgba(27, 39, 51, 0.045);
}

:root[data-theme="light"] .study-set-panel,
:root[data-theme="light"] .settings-defaults-card,
:root[data-theme="light"] .total-progress-grid .stat-row,
:root[data-theme="light"] .level-suggestion-toggle {
    background: #f3f6f8;
}

:root[data-theme="light"] .settings-default-row {
    border-top-color: var(--border-color);
}

:root[data-theme="light"] .resume-set-button {
    box-shadow: 0 8px 22px rgba(27, 39, 51, 0.1);
}

:root[data-theme="light"] .level-suggestion-toggle:hover {
    background: var(--bg-card-hover);
}

/* The grey fill is for New only; Known and Review keep the colours the set
   squares use, or the legend reads as three identical grey boxes. */
:root[data-theme="light"] .study-set-legend i {
    background: #dce4ea;
    box-shadow: inset 0 0 0 1px rgba(27, 39, 51, 0.08);
}
:root[data-theme="light"] .study-set-legend i.is-known {
    background: color-mix(in srgb, var(--success) 58%, var(--bg-card));
}
:root[data-theme="light"] .study-set-legend i.is-review {
    background: color-mix(in srgb, var(--warning) 66%, var(--bg-card));
}

:root[data-theme="light"] .study-set-dot {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--success) 58%, var(--bg-card)) 0 var(--set-known-end),
        color-mix(in srgb, var(--warning) 66%, var(--bg-card)) var(--set-known-end) var(--set-review-end),
        #e3e9ee var(--set-review-end) 100%
    );
}

:root[data-theme="light"] .appearance-selector .theme-preference-btn:hover:not(.selected) {
    background: rgba(23, 33, 43, 0.055);
}

:root[data-theme="light"] .appearance-selector .theme-preference-btn:focus-visible {
    outline-color: color-mix(in srgb, var(--accent-primary) 62%, #17212b);
}

:root[data-theme="light"] .stacked-exit-btn,
:root[data-theme="light"] .card-top-banner button,
:root[data-theme="light"] .card-link-btn,
:root[data-theme="light"] .card-icon-btn {
    border-color: rgba(23, 33, 43, 0.18);
}

:root[data-theme="light"] .stacked-exit-btn {
    background: rgba(23, 33, 43, 0.07);
    color: var(--text-secondary);
}

:root[data-theme="light"] .stacked-exit-btn:hover {
    background: rgba(23, 33, 43, 0.12);
    color: var(--text-primary);
}

/* Desktop study chrome lives outside the card and therefore follows the page
   foreground in light appearance. Correct/incorrect discs keep white glyphs
   because their fills are deliberately darkened semantic colours. */
:root[data-theme="light"] .desktop-nav-btn-outside .nav-icon,
:root[data-theme="light"] .answer-hint kbd {
    border-color: rgba(23, 33, 43, 0.16);
    background: rgba(23, 33, 43, 0.07);
    color: var(--text-secondary);
}

:root[data-theme="light"] .desktop-answer-btn-outside:hover,
:root[data-theme="light"] .desktop-nav-btn-outside:hover,
:root[data-theme="light"] .desktop-nav-btn-outside:hover .nav-icon {
    background: rgba(23, 33, 43, 0.08);
    color: var(--text-primary);
}

:root[data-theme="light"] .desktop-answer-btn-outside.incorrect .answer-icon,
:root[data-theme="light"] .desktop-answer-btn-outside.correct .answer-icon {
    color: #fff;
}

:root[data-theme="light"] .side-nav-chevron,
:root[data-theme="light"] .side-nav-zone:hover:not(:disabled) .side-nav-chevron {
    color: var(--text-muted);
}

/* Metadata and audit sheets use the same light modal grammar as Settings. */
:root[data-theme="light"] .card-meta-popover,
:root[data-theme="light"] .flag-menu {
    background: rgba(23, 31, 39, 0.38);
    color: var(--text-secondary);
}

:root[data-theme="light"] .card-meta-modal-content,
:root[data-theme="light"] .flag-menu .card-meta-modal-content {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 24px 64px rgba(27, 39, 51, 0.2);
}

:root[data-theme="light"] .card-meta-header,
:root[data-theme="light"] .card-meta-footer {
    border-color: var(--border-color);
}

:root[data-theme="light"] .card-meta-title,
:root[data-theme="light"] .card-meta-close,
:root[data-theme="light"] .card-meta-kv dd,
:root[data-theme="light"] .flag-menu-pairing,
:root[data-theme="light"] .flag-pairing-target,
:root[data-theme="light"] .flag-pairing-example,
:root[data-theme="light"] .flag-menu-note {
    color: var(--text-primary);
}

:root[data-theme="light"] .card-meta-close:hover {
    color: var(--accent-primary);
}

:root[data-theme="light"] .card-meta-section h4,
:root[data-theme="light"] .flag-simple-note-section h3,
:root[data-theme="light"] .card-meta-kv dt,
:root[data-theme="light"] .card-meta-ex,
:root[data-theme="light"] .card-meta-empty,
:root[data-theme="light"] .flag-menu-hint,
:root[data-theme="light"] .flag-menu-section-label,
:root[data-theme="light"] .flag-pairing-context,
:root[data-theme="light"] .flag-menu-note-label,
:root[data-theme="light"] .flag-menu-note-label span {
    color: var(--text-muted);
}

:root[data-theme="light"] .card-meta-tag,
:root[data-theme="light"] .flag-menu-pairing.is-secondary {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

:root[data-theme="light"] .flag-menu-note {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

:root[data-theme="light"] .flag-menu-note::placeholder {
    color: var(--text-muted);
}

/* Progress and choice controls use a quiet ink tint on their unselected half;
   language/artist colour still owns the selected and filled states. */
:root[data-theme="light"] .level-btn:hover,
:root[data-theme="light"] .group-size-btn:hover:not(.selected),
:root[data-theme="light"] .settings-tab:hover:not(.active),
:root[data-theme="light"] .card-btn-pill:hover {
    background: rgba(23, 33, 43, 0.055);
}

:root[data-theme="light"] .range-btn-new:not(.study-set-start):not(.has-progress):not(:hover) {
    background-color: rgba(255, 255, 255, 0.78);
}

/* Card content had several dark-only literal surfaces because the original
   application had a single palette. These are remapped by role rather than
   inverted, leaving semantic and language accents intact. */
:root[data-theme="light"] .card-back-scrubber,
:root[data-theme="light"] .cbs-strip,
:root[data-theme="light"] .cbs-gear,
:root[data-theme="light"] .deck-progress-track .study-menu-btn {
    color: var(--text-secondary);
}

:root[data-theme="light"] .cbs-gear {
    border: none;
    background: transparent;
}

:root[data-theme="light"] .deck-progress-track .study-menu-btn:hover,
:root[data-theme="light"] .deck-progress-track .study-menu-btn:focus-visible {
    color: var(--text-primary);
    background: rgba(23, 33, 43, 0.055);
}

:root[data-theme="light"] .back-pos-legend .card-pos,
:root[data-theme="light"] .back-pos-unit .card-pos,
:root[data-theme="light"] .back-pos-legend .back-pos-tab {
    border-color: color-mix(in srgb, currentColor 34%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

:root[data-theme="light"] .meaning-pos-section .meaning-row {
    border-color: var(--border-color);
    background: var(--bg-secondary) !important;
}

:root[data-theme="light"] .meaning-row.is-current-sense {
    background: rgba(var(--sense-match-rgb), 0.24) !important;
}

:root[data-theme="light"] .sense-prominence-badge.prominence-dominant,
:root[data-theme="light"] .sense-prominence-badge.prominence-common,
:root[data-theme="light"] .sense-prominence-badge.prominence-uncommon,
:root[data-theme="light"] .sense-prominence-badge.prominence-rare {
    /* One ink for every level, as in dark mode: the number of filled bars is
       the scale, and a colour per level read as a second one. */
    background: transparent;
    color: var(--text-primary);
    border: 0;
}

:root[data-theme="light"] .phrase-kind-badge.badge-rare {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(217, 119, 6, 0.4);
    color: #b45309;
}
:root[data-theme="light"] .rare-child-back-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1f2937;
}
:root[data-theme="light"] .rare-child-back-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .dictionary-provenance-badge,
:root[data-theme="light"] .example-source-chip {
    color: var(--text-secondary);
}

:root[data-theme="light"] #backContent > .meanings-scroll,
:root[data-theme="light"] .card-replica .card-details > .meanings-scroll {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
:root[data-theme="light"] #backContent > .meanings-scroll::-webkit-scrollbar-thumb,
:root[data-theme="light"] .card-replica .card-details > .meanings-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] .meaning-row-sub {
    color: #596779;
}
:root[data-theme="light"] .meaning-pos-section .meaning-row.is-current-sense {
    border-color: transparent;
    border-left-color: rgb(var(--sense-match-rgb));
}
:root[data-theme="light"] .meaning-row.is-current-sense .meaning-row-sub {
    color: #2b394a;
}
:root[data-theme="light"] .meaning-row.is-current-sense .meaning-row-gloss {
    color: #111827;
}

:root[data-theme="light"] .mwe-expression,
:root[data-theme="light"] .card-details .special-meaning-copy strong,
:root[data-theme="light"] .card-word,
:root[data-theme="light"] .front-meaning-text,
:root[data-theme="light"] .back-headword,
:root[data-theme="light"] .meaning-text,
:root[data-theme="light"] .meaning-pos,
:root[data-theme="light"] .phrase-expression,
:root[data-theme="light"] .clitic-row-translation,
:root[data-theme="light"] .wild-target,
:root[data-theme="light"] .phrase-example-target,
:root[data-theme="light"] .card-stat-value,
:root[data-theme="light"] .front-meaning-pos,
:root[data-theme="light"] .front-morph-analysis strong,
:root[data-theme="light"] .morph-pop-subject,
:root[data-theme="light"] .morph-pop-form,
:root[data-theme="light"] .morph-pop-more-sign {
    color: var(--text-primary);
}

:root[data-theme="light"] .front-morph-analysis {
    border-color: color-mix(in srgb, rgb(var(--card-pos-rgb)) 34%, transparent);
    background: color-mix(in srgb, rgb(var(--card-pos-rgb)) 8%, transparent);
    color: var(--text-secondary);
}

:root[data-theme="light"] .front-production-hint-toggle {
    border-color: var(--border-color);
    background: rgba(23, 33, 43, 0.035);
    color: var(--text-secondary);
}

:root[data-theme="light"] .front-production-hint-toggle.is-open {
    border-color: rgba(var(--card-pos-rgb), 0.42);
    background: rgba(var(--card-pos-rgb), 0.09);
    color: var(--text-primary);
}

:root[data-theme="light"] .front-production-cloze {
    border-color: rgba(var(--card-pos-rgb), 0.3);
    background: rgba(255, 255, 255, 0.97);
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(27, 39, 51, 0.14);
}

:root[data-theme="light"] .card-rank-label,
:root[data-theme="light"] .card-freq-label,
:root[data-theme="light"] .card-freq-btn,
:root[data-theme="light"] .reverse-example-form,
:root[data-theme="light"] .phrase-context,
:root[data-theme="light"] .clitic-row-detail {
    color: var(--text-muted);
}

:root[data-theme="light"] .card-freq-btn:hover {
    color: var(--text-primary);
}

:root[data-theme="light"] .phrase-translation,
:root[data-theme="light"] .wild-english,
:root[data-theme="light"] .phrase-example-translation {
    color: var(--text-secondary);
}

:root[data-theme="light"] .other-uses-gloss,
:root[data-theme="light"] .phrase-expression {
    color: var(--text-primary);
}

:root[data-theme="light"] .rarer-uses-cluster {
    background: rgba(23, 33, 43, 0.04);
}

:root[data-theme="light"] .rarer-uses-pager {
    color: var(--text-secondary);
}

:root[data-theme="light"] .rarer-uses-pager button {
    background: rgba(23, 33, 43, 0.06);
    color: var(--text-primary);
}

:root[data-theme="light"] .phrase-example {
    border-color: var(--border-color);
    border-left-color: #087b70;
    background: #f2f6f8;
}

:root[data-theme="light"] .wild-row {
    border-color: var(--border-color);
    background: rgba(23, 33, 43, 0.025);
}

:root[data-theme="light"] .wild-row:hover {
    background: rgba(23, 33, 43, 0.055);
}

:root[data-theme="light"] .wild-row.is-revealed {
    border-color: rgba(var(--accent-phrases-rgb), 0.4);
    background: rgba(var(--accent-phrases-rgb), 0.075);
}

:root[data-theme="light"] .phrase-kind-badge {
    border-color: rgba(8, 123, 112, 0.4);
    background: rgba(20, 184, 166, 0.11);
    color: #087b70;
}

:root[data-theme="light"] .clitic-group-suffix,
:root[data-theme="light"] .clitic-row-key,
:root[data-theme="light"] .clitic-more-toggle,
:root[data-theme="light"] .clitic-form-hit {
    color: #a9490b;
}

:root[data-theme="light"] .clitic-more-toggle {
    border-color: rgba(169, 73, 11, 0.4);
    background: rgba(249, 115, 22, 0.09);
}

:root[data-theme="light"] .bilingual-meaning-copy .mwe-translation,
:root[data-theme="light"] .translation {
    border-color: var(--border-color);
}

:root[data-theme="light"] .surface-relation-cue {
    color: color-mix(in srgb, rgb(var(--card-pos-rgb)) 56%, #17212b);
}

:root[data-theme="light"] .card-exclusion-label {
    color: color-mix(in srgb, var(--accent-secondary) 65%, #17212b);
}

:root[data-theme="light"] .card-exclusion-label--examples {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
}

:root[data-theme="light"] .morph-popover {
    background: var(--bg-card);
    box-shadow: 0 10px 28px rgba(27, 39, 51, 0.16);
}

:root[data-theme="light"] .sentence,
:root[data-theme="light"] .sentence.example-is-matched {
    border-color: var(--border-color);
    border-left-color: rgb(var(--sense-match-rgb));
    background: #f2f6f8;
    color: var(--text-primary);
}

:root[data-theme="light"] .translation,
:root[data-theme="light"] .ref-tile,
:root[data-theme="light"] .ref-tile-label {
    color: var(--text-secondary);
}

:root[data-theme="light"] .example-word-highlight,
:root[data-theme="light"] .example-related-highlight {
    color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 56%, #17212b);
}

:root[data-theme="light"] .example-usage-highlight {
    color: color-mix(in srgb, var(--accent-secondary) 62%, #17212b);
}

:root[data-theme="light"] .sense-target-collocation {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.38);
    color: #047857;
}

:root[data-theme="light"] .sense-target-collocation.is-optional {
    background: rgba(5, 150, 105, 0.08);
}

:root[data-theme="light"] .example-vocalist-credit {
    color: var(--text-muted);
}

:root[data-theme="light"] .example-autoplay-btn,
:root[data-theme="light"] .example-cycle-btn,
:root[data-theme="light"] .mwe-cycle-btn,
:root[data-theme="light"] .nav-btn-inline,
:root[data-theme="light"] .card-action-small {
    border-color: rgba(23, 33, 43, 0.16);
    background: rgba(23, 33, 43, 0.06);
    color: var(--text-secondary);
}

:root[data-theme="light"] .example-cycle-btn:hover,
:root[data-theme="light"] .mwe-cycle-btn:hover,
:root[data-theme="light"] .nav-btn-inline:hover,
:root[data-theme="light"] .card-action-small:hover {
    background: rgba(23, 33, 43, 0.1);
    color: var(--text-primary);
}

:root[data-theme="light"] .example-autoplay-btn.is-active {
    color: #fff;
}

:root[data-theme="light"] .lookup-sheet-icon,
:root[data-theme="light"] .lookup-sheet-icon .outbound-leave-btn,
:root[data-theme="light"] .card-control-btn,
:root[data-theme="light"] #reverseLangBtn .reverse-swap-glyph {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(27, 39, 51, 0.13);
}

:root[data-theme="light"] .card-control-btn:hover {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
    box-shadow: 0 4px 12px rgba(27, 39, 51, 0.1);
}

:root[data-theme="light"] .control-action-btn {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

:root[data-theme="light"] .control-action-btn:hover {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
    box-shadow: 0 4px 12px rgba(27, 39, 51, 0.1);
}

:root[data-theme="light"] .control-action-btn:active {
    background: var(--bg-secondary);
}

:root[data-theme="light"] .card-control-btn:active {
    background: var(--bg-secondary);
}

:root[data-theme="light"] .freq-tooltip {
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: 0 8px 24px rgba(27, 39, 51, 0.14);
}

:root[data-theme="light"] .freq-tooltip-forms {
    border-top-color: var(--border-color);
}

:root[data-theme="light"] .freq-tooltip-surface {
    color: var(--text-primary);
}

/* Light POS colours use the same semantic hue families with darker ink and a
   lower-opacity wash. This keeps each part of speech distinct without the
   neon-on-charcoal treatment of the dark cards. */
:root[data-theme="light"] .pos-noun { background: rgba(74, 158, 255, 0.12); border-color: rgba(23, 100, 168, 0.36); color: #1764a8 !important; }
:root[data-theme="light"] .pos-propn { background: rgba(34, 211, 238, 0.12); border-color: rgba(14, 116, 144, 0.36); color: #0e7490 !important; }
:root[data-theme="light"] .pos-verb { background: rgba(0, 212, 170, 0.12); border-color: rgba(8, 127, 104, 0.36); color: #087f68 !important; }
:root[data-theme="light"] .pos-aux { background: rgba(0, 212, 170, 0.12); border-color: rgba(8, 127, 104, 0.36); color: #087f68 !important; }
:root[data-theme="light"] .pos-adj { background: rgba(245, 166, 35, 0.12); border-color: rgba(138, 90, 0, 0.36); color: #8a5a00 !important; }
:root[data-theme="light"] .pos-adv { background: rgba(192, 90, 245, 0.12); border-color: rgba(133, 39, 184, 0.36); color: #8527b8 !important; }
:root[data-theme="light"] .pos-prep { background: rgba(236, 72, 153, 0.12); border-color: rgba(168, 45, 107, 0.36); color: #a82d6b !important; }
:root[data-theme="light"] .pos-conj { background: rgba(34, 197, 94, 0.12); border-color: rgba(21, 125, 56, 0.36); color: #157d38 !important; }
:root[data-theme="light"] .pos-cconj { background: rgba(34, 197, 94, 0.12); border-color: rgba(21, 125, 56, 0.36); color: #157d38 !important; }
:root[data-theme="light"] .pos-sconj { background: rgba(34, 197, 94, 0.12); border-color: rgba(21, 125, 56, 0.36); color: #157d38 !important; }
:root[data-theme="light"] .pos-pron { background: rgba(108, 92, 246, 0.12); border-color: rgba(74, 63, 196, 0.36); color: #4a3fc4 !important; }
:root[data-theme="light"] .pos-det { background: rgba(239, 68, 68, 0.12); border-color: rgba(179, 38, 38, 0.36); color: #b32626 !important; }
:root[data-theme="light"] .pos-int { background: rgba(250, 224, 50, 0.12); border-color: rgba(118, 96, 0, 0.36); color: #766000 !important; }
:root[data-theme="light"] .pos-num { background: rgba(163, 230, 53, 0.12); border-color: rgba(82, 124, 13, 0.36); color: #527c0d !important; }
:root[data-theme="light"] .pos-mwe { background: rgba(245, 166, 35, 0.12); border-color: rgba(138, 90, 0, 0.36); color: #8a5a00 !important; }
:root[data-theme="light"] .pos-clitic { background: rgba(205, 130, 60, 0.12); border-color: rgba(143, 90, 30, 0.36); color: #8f5a1e !important; }
:root[data-theme="light"] .pos-part { background: rgba(217, 70, 239, 0.12); border-color: rgba(154, 45, 176, 0.36); color: #9a2db0 !important; }
:root[data-theme="light"] .pos-prefix { background: rgba(125, 211, 252, 0.12); border-color: rgba(11, 106, 150, 0.36); color: #0b6a96 !important; }
:root[data-theme="light"] .pos-suffix { background: rgba(252, 165, 165, 0.12); border-color: rgba(163, 58, 58, 0.36); color: #a33a3a !important; }
:root[data-theme="light"] .pos-contraction { background: rgba(251, 120, 50, 0.12); border-color: rgba(176, 74, 8, 0.36); color: #b04a08 !important; }
:root[data-theme="light"] .pos-abbr { background: rgba(176, 148, 120, 0.12); border-color: rgba(122, 92, 58, 0.36); color: #7a5c3a !important; }
:root[data-theme="light"] .pos-other { background: rgba(148, 163, 184, 0.12); border-color: rgba(82, 97, 112, 0.36); color: #526170 !important; }

:root[data-theme="light"] .pos-info-overlay {
    background: rgba(23, 31, 39, 0.38);
}

:root[data-theme="light"] .resume-entry-modal,
:root[data-theme="light"] .knowledge-overview-modal,
:root[data-theme="light"] .step-info-tooltip {
    background: rgba(23, 31, 39, 0.38);
}

:root[data-theme="light"] .step-info-tooltip-inner {
    box-shadow: 0 18px 50px rgba(27, 39, 51, 0.18);
}

:root[data-theme="light"] .spotify-autoplay-popover {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 10px 26px rgba(27, 39, 51, 0.16);
}

:root[data-theme="light"] .spotify-autoplay-popover-text,
:root[data-theme="light"] .spotify-autoplay-toggle {
    color: var(--text-secondary);
}

:root[data-theme="light"] .spotify-autoplay-toggle {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

:root[data-theme="light"] .spotify-autoplay-toggle-dot {
    background: var(--text-muted);
}

:root[data-theme="light"] .breakdown-trigger {
    text-decoration-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

:root[data-theme="light"] .breakdown-trigger:hover {
    text-decoration-color: var(--text-secondary);
}

:root[data-theme="light"] .pos-info-popover {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 18px 50px rgba(27, 39, 51, 0.18);
}

:root[data-theme="light"] .pos-info-close:hover,
:root[data-theme="light"] .pos-info-close:focus-visible {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
}

:root[data-theme="light"] .flip-circle {
    border-color: var(--border-color);
}

:root[data-theme="light"] .flip-circle:hover {
    border-color: var(--border-light);
    background: rgba(23, 33, 43, 0.025);
}

:root[data-theme="light"] .direction-popover {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 10px 26px rgba(27, 39, 51, 0.16);
}

:root[data-theme="light"] .direction-popover-text,
:root[data-theme="light"] .direction-popover-btn {
    color: var(--text-secondary);
}

:root[data-theme="light"] .back-lemma {
    text-shadow: none;
}

:root[data-theme="light"] .back-lemma-chip {
    text-shadow: none;
}

:root[data-theme="light"] .back-derivation-line strong,
:root[data-theme="light"] .reverse-example-form strong {
    color: color-mix(in srgb, rgb(var(--sense-match-rgb, var(--accent-primary-rgb))) 58%, #17212b);
}

/* The About walkthrough embeds real card grammar, so it follows the same
   surfaces rather than remaining a dark miniature inside a light modal. */
:root[data-theme="light"] .about-demo-back-word,
:root[data-theme="light"] .about-demo-card-inner .about-demo-example-target {
    color: var(--text-primary);
}

:root[data-theme="light"] .about-demo-card-inner .meaning-row-regular {
    background: var(--bg-secondary);
}

:root[data-theme="light"] .about-demo-pos-legend .card-pos {
    border-color: color-mix(in srgb, currentColor 34%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

:root[data-theme="light"] .about-demo-highlight {
    background: rgba(23, 33, 43, 0.08);
    color: var(--text-primary);
}

:root[data-theme="light"] .about-demo-spotify-row {
    border-color: var(--border-color);
}

@media (max-width: 767px) {
    :root[data-theme="light"] .nav-row-icon {
        color: var(--text-secondary);
    }
}

:root[data-theme="light"] .keyboard-guide-key,
:root[data-theme="light"] .card-ranking,
:root[data-theme="light"] .card-hint {
    color: var(--text-muted);
}

:root[data-theme="light"] .swipe-indicator.correct {
    color: #059669;
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

:root[data-theme="light"] .swipe-indicator.incorrect {
    color: #e11d48;
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

:root[data-theme="light"] .swipe-indicator.correct.visible {
    color: #ffffff;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(16, 185, 129, 0.9);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.32), 0 0 0 4px rgba(16, 185, 129, 0.14);
}

:root[data-theme="light"] .swipe-indicator.incorrect.visible {
    color: #ffffff;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border-color: rgba(244, 63, 94, 0.9);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3), 0 0 0 4px rgba(244, 63, 94, 0.13);
}

/* Album art remains atmospheric. A cool translucent scrim keeps the card
   genuinely light while leaving enough image to identify the release. */
:root[data-theme="light"] body.artist-mode .card-face::after {
    background: rgba(250, 252, 253, 0.91);
}

:root[data-theme="light"] body.artist-mode .card-face {
    box-shadow: 0 16px 44px rgba(27, 39, 51, 0.16), 0 1px 2px rgba(27, 39, 51, 0.08);
}

/* Artwork thumbnails and branded Spotify controls still sit directly on
   saturated media, so their local white foreground remains intentional. */
:root[data-theme="light"] .artist-source-image,
:root[data-theme="light"] .artist-radial-disc--fallback,
:root[data-theme="light"] .spotify-play-btn,
:root[data-theme="light"] .spotify-icon {
    color: #fff;
}

:root[data-theme="light"] .artist-source-image {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46), 0 3px 12px rgba(27, 39, 51, 0.15);
}

/* Full-screen pickers keep a readable sense of depth without turning into a
   dark-mode island. Their picture labels retain an on-image shadow. */
:root[data-theme="light"] .artist-radial-overlay {
    background: rgba(23, 31, 39, 0.32);
}

:root[data-theme="light"] .artist-radial-hub {
    box-shadow: 0 8px 24px rgba(27, 39, 51, 0.16);
}

:root[data-theme="light"] .artist-radial-disc {
    box-shadow: 0 7px 18px rgba(27, 39, 51, 0.2);
}

:root[data-theme="light"] .study-radial-picker {
    background: rgba(238, 242, 245, 0.86);
}

:root[data-theme="light"] .study-radial-picker .artist-radial-hub {
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(27, 39, 51, 0.15);
}

:root[data-theme="light"] .study-radial-picker .artist-radial-disc,
:root[data-theme="light"] .study-radial-picker .artist-radial-label {
    color: var(--text-secondary);
    text-shadow: none;
}

:root[data-theme="light"] .study-radial-picker .artist-radial-thumb:hover .artist-radial-disc,
:root[data-theme="light"] .study-radial-picker .artist-radial-thumb:focus-visible .artist-radial-disc {
    border-color: var(--border-color);
    background: rgba(23, 33, 43, 0.055);
}

/* Authentication is a first-class app surface, not a dark splash laid over a
   light application. */
:root[data-theme="light"] #authModal {
    background:
        radial-gradient(circle at 50% 10%, rgba(var(--accent-primary-rgb), 0.11), transparent 38%),
        rgba(238, 242, 245, 0.94);
}

:root[data-theme="light"] .auth-modal-content {
    background:
        linear-gradient(145deg, rgba(var(--accent-primary-rgb), 0.055), transparent 44%),
        var(--bg-card);
    box-shadow: 0 26px 70px rgba(27, 39, 51, 0.18);
}

:root[data-theme="light"] .auth-modal-content .auth-btn {
    background: #f3f6f8;
}

/* Contrast repair for components whose original dark-only rules used literal
   white foregrounds or translucent-white chrome. These selectors are kept
   explicit so media-backed white glyphs and filled status buttons remain
   untouched. */
:root[data-theme="light"] .flag-menu-sense {
    border-color: var(--border-color);
    background: #f3f6f8;
}

:root[data-theme="light"] .flag-menu-sense:hover {
    background: var(--bg-tertiary);
}

:root[data-theme="light"] .flag-menu-sense .fm-gloss,
:root[data-theme="light"] .flag-pairing-sense {
    color: var(--text-primary);
}

:root[data-theme="light"] .flag-menu-sense .fm-pos,
:root[data-theme="light"] .flag-menu-sense .fm-pct,
:root[data-theme="light"] .flag-pairing-example small {
    color: var(--text-muted);
}

:root[data-theme="light"] .flag-menu-status {
    color: var(--success);
}

:root[data-theme="light"] .flag-menu-status.is-error {
    color: var(--error);
}

:root[data-theme="light"] .cbs-strip {
    border: none;
    background: transparent;
}

:root[data-theme="light"] .cbs-return {
    border: none;
    background: transparent;
    color: var(--text-primary);
}

:root[data-theme="light"] .cbs-return:hover,
:root[data-theme="light"] .cbs-return:active {
    background: var(--bg-tertiary);
}

:root[data-theme="light"] .cbs-return-arrow,
:root[data-theme="light"] .cbs-return-label {
    color: var(--text-primary);
}

:root[data-theme="light"] .cbs-return-kicker {
    color: var(--text-muted);
}

:root[data-theme="light"] .cbs-track {
    background: #cbd5dd;
}

:root[data-theme="light"] .cbs-fill {
    background: color-mix(in srgb, var(--accent-primary) 55%, #cbd5dd);
}

:root[data-theme="light"] .cbs-thumb {
    background: var(--accent-primary);
    color: var(--accent-primary-text);
    box-shadow: 0 1px 4px rgba(23, 33, 43, 0.18);
}

:root[data-theme="light"] .cbs-thumb.is-phrases {
    background: var(--accent-phrases);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--accent-phrases-rgb), 0.24);
}

:root[data-theme="light"] .swipe-legend-sep,
:root[data-theme="light"] .pos-info-divider {
    background: var(--border-color);
}

:root[data-theme="light"] .desktop-kbd {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

:root[data-theme="light"] .deck-progress-segment.is-current {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 70%, #17212b);
    text-shadow: none;
}

:root[data-theme="light"] .deck-progress-segment[data-pair-pos]::after {
    border-color: rgba(23, 33, 43, 0.22);
}

:root[data-theme="light"] .deck-progress-segment.is-pair-active[data-pair-pos]::after {
    border-color: color-mix(in srgb, var(--accent-primary) 70%, transparent);
}

:root[data-theme="light"] .deck-progress-segment.is-current.is-phrases {
    color: #33235c;
    border-color: color-mix(in srgb, var(--accent-phrases) 72%, #17212b);
    text-shadow: none;
}

:root[data-theme="light"] .knowledge-overview-sheet {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(27, 39, 51, 0.2);
}

:root[data-theme="light"] .knowledge-overview-close,
:root[data-theme="light"] .knowledge-overview-mark,
:root[data-theme="light"] .knowledge-overview-section h3 span {
    border-color: var(--border-color);
    background: #f3f6f8;
}

:root[data-theme="light"] .knowledge-overview-summary,
:root[data-theme="light"] .knowledge-overview-row {
    border-color: var(--border-color);
    background: #f3f6f8;
}

:root[data-theme="light"] .knowledge-overview-tabs {
    background: #eef2f5;
}

:root[data-theme="light"] .knowledge-overview-tab.is-active {
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(27, 39, 51, 0.12);
}

:root[data-theme="light"] .knowledge-overview-row.is-known {
    border-color: rgba(8, 127, 104, 0.34);
    background: rgba(8, 127, 104, 0.07);
}

:root[data-theme="light"] .knowledge-overview-row.is-review {
    border-color: rgba(189, 56, 71, 0.32);
    background: rgba(189, 56, 71, 0.065);
}

:root[data-theme="light"] .knowledge-overview-mark.mark-known:hover,
:root[data-theme="light"] .knowledge-overview-mark.mark-known.is-active {
    border-color: var(--success);
    background: rgba(8, 127, 104, 0.12);
    color: var(--success);
}

:root[data-theme="light"] .knowledge-overview-mark.mark-review:hover,
:root[data-theme="light"] .knowledge-overview-mark.mark-review.is-active {
    border-color: var(--error);
    background: rgba(189, 56, 71, 0.1);
}

:root[data-theme="light"] .knowledge-overview-summary-review,
:root[data-theme="light"] .knowledge-overview-mark.mark-review:hover,
:root[data-theme="light"] .knowledge-overview-mark.mark-review.is-active {
    color: var(--error);
}

:root[data-theme="light"] .syn-header,
:root[data-theme="light"] .conj-header,
:root[data-theme="light"] .conj-nonfinite {
    border-color: var(--border-color);
}

:root[data-theme="light"] .syn-headword {
    color: var(--text-primary);
}

:root[data-theme="light"] .syn-tab,
:root[data-theme="light"] .syn-item,
:root[data-theme="light"] .syn-close-btn,
:root[data-theme="light"] .conj-close-btn,
:root[data-theme="light"] .conj-nf-item,
:root[data-theme="light"] .conj-sd-link,
:root[data-theme="light"] .provenance-panel .prov-close,
:root[data-theme="light"] .provenance-panel .prov-meta code {
    border-color: var(--border-color);
    background: #f3f6f8;
    color: var(--text-primary);
}

:root[data-theme="light"] .syn-tab.selected {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.12);
    color: var(--text-primary);
}

:root[data-theme="light"] .syn-tab-count {
    background: rgba(27, 39, 51, 0.08);
}

:root[data-theme="light"] .syn-item.syn-strong {
    border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-primary) 8%, #f3f6f8);
}

:root[data-theme="light"] .syn-item:hover,
:root[data-theme="light"] .syn-item:focus-visible {
    border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-color));
    background: rgba(var(--accent-primary-rgb), 0.1);
}

:root[data-theme="light"] .syn-item:hover .syn-go,
:root[data-theme="light"] .conj-close-btn:hover,
:root[data-theme="light"] .conj-sd-link:hover {
    color: var(--text-primary);
}

:root[data-theme="light"] .syn-close-btn:hover,
:root[data-theme="light"] .conj-close-btn:hover,
:root[data-theme="light"] .provenance-panel .prov-close:hover {
    background: var(--bg-tertiary);
}

:root[data-theme="light"] .provenance-panel .prov-proposal,
:root[data-theme="light"] .model-proposed-marker {
    color: #6240a6;
}

:root[data-theme="light"] .provenance-panel .prov-release-box {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .provenance-panel .prov-wsd-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .provenance-panel .prov-wsd-stage {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .provenance-panel .prov-badge--overlay {
    background: rgba(147, 51, 234, 0.1);
    color: #7e22ce;
    border-color: rgba(147, 51, 234, 0.25);
}
:root[data-theme="light"] .provenance-panel .prov-badge--entity {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
:root[data-theme="light"] .provenance-panel .prov-badge--dict {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}
:root[data-theme="light"] .provenance-panel .prov-badge--auto {
    background: rgba(100, 116, 139, 0.1);
    color: #334155;
    border-color: rgba(100, 116, 139, 0.25);
}
:root[data-theme="light"] .provenance-panel .prov-badge--ai {
    background: rgba(217, 119, 6, 0.1);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.25);
}
:root[data-theme="light"] .provenance-panel .prov-ex-item {
    background: rgba(0, 0, 0, 0.02);
}
:root[data-theme="light"] .provenance-panel .prov-tech-details {
    border-top-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .spanish-dict-panel .sd-meta-sense,
:root[data-theme="light"] .spanish-dict-panel .sd-meta-example,
:root[data-theme="light"] .spanish-dict-panel .sd-meta-empty,
:root[data-theme="light"] .spanish-dict-panel .sd-meta-candidates code {
    border-color: var(--border-color);
    background: #f3f6f8;
}

:root[data-theme="light"] .spanish-dict-panel .sd-meta-usage {
    background: rgba(var(--accent-primary-rgb), 0.07);
}

:root[data-theme="light"] .conj-type-badge,
:root[data-theme="light"] .conj-ending {
    color: #087f68;
}

:root[data-theme="light"] .conj-nf-item.is-active {
    border-color: rgba(8, 127, 104, 0.4);
    background: rgba(8, 127, 104, 0.1);
    box-shadow: inset 0 0 0 1px rgba(8, 127, 104, 0.12);
}

:root[data-theme="light"] .conj-mood-toggle-btn.conj-mood-toggle-active,
:root[data-theme="light"] .conj-tense-btn.conj-tense-active,
:root[data-theme="light"] .conj-nf-item.is-active .conj-nf-form,
:root[data-theme="light"] .conj-table tr.conj-active .conj-pronoun,
:root[data-theme="light"] .conj-table tr.conj-active .conj-stem,
:root[data-theme="light"] .conj-table tr.conj-active .conj-ending {
    color: #123b33;
    text-shadow: none;
}

:root[data-theme="light"] .conj-table tr:nth-child(even) td {
    background: #f6f8fa;
}

:root[data-theme="light"] .link-btn,
:root[data-theme="light"] .breakdown-btn,
:root[data-theme="light"] .homograph-chip {
    border-color: var(--border-color);
    background: #edf2f5;
    color: var(--text-primary);
}

:root[data-theme="light"] .homograph-chip:active,
:root[data-theme="light"] .breakdown-btn:hover {
    background: var(--bg-tertiary);
}

:root[data-theme="light"] .ref-conj-btn svg rect {
    fill: #f3f6f8;
    stroke: #c1ccd6;
}

:root[data-theme="light"] #reverseLangBtn:hover .reverse-swap-glyph {
    color: var(--accent-primary-text);
    border-color: color-mix(in srgb, var(--accent-primary) 65%, #17212b);
}

:root[data-theme="light"] .nav-btn-inline:disabled {
    color: var(--text-muted);
}

:root[data-theme="light"] .vocabulary-import-actions button:not(.secondary-btn),
:root[data-theme="light"] .song-set-footer #applySongSetBtn {
    color: var(--accent-primary-text);
}

:root[data-theme="light"] .deck-complete-btn.exit-btn.has-next-set:hover {
    color: var(--accent-secondary-text);
}

:root[data-theme="light"] .deck-stat.correct-stat {
    background: rgba(8, 127, 104, 0.1);
}

:root[data-theme="light"] .deck-stat.incorrect-stat {
    background: rgba(189, 56, 71, 0.1);
}

/* Native fields and dynamically-created inputs should agree with the light
   document even when they have no component-specific class. */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    color-scheme: light;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

:root[data-theme="light"] input:-webkit-autofill,
:root[data-theme="light"] input:-webkit-autofill:hover,
:root[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--bg-tertiary) inset;
}

/* Toasts intentionally float above both the light page and album artwork. */
:root[data-theme="light"] .toast,
:root[data-theme="light"] .external-toast,
:root[data-theme="light"] .flag-toast {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: 0 10px 30px rgba(23, 31, 39, 0.22);
}

/* Modern segmented pill toggles in light mode */
:root[data-theme="light"] .group-size-selector,
:root[data-theme="light"] .group-size-selector.settings-toggle,
:root[data-theme="light"] .group-size-selector.header-toggle {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .group-size-btn:hover:not(.selected),
:root[data-theme="light"] .settings-toggle .group-size-btn:hover:not(.selected),
:root[data-theme="light"] .header-toggle .group-size-btn:hover:not(.selected),
:root[data-theme="light"] .lemma-toggle-btn:hover:not(.selected),
:root[data-theme="light"] .cognate-toggle-btn:hover:not(.selected),
:root[data-theme="light"] .grammar-toggle-btn:hover:not(.selected),
:root[data-theme="light"] .slang-toggle-btn:hover:not(.selected),
:root[data-theme="light"] .entity-toggle-btn:hover:not(.selected) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .lsw-segments:not(.lsw-scrubber) {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .lsw-segments:not(.lsw-scrubber) .lsw-seg {
    background: rgba(0, 0, 0, 0.07);
}

:root[data-theme="light"] .dictionary-provenance-badge {
    color: var(--text-secondary);
}

:root[data-theme="light"] .sentence.canonical-example {
    border-left-color: rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] .deck-score-ring-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .deck-score-number {
    color: var(--text-primary);
}

:root[data-theme="light"] .deck-score-label {
    color: var(--text-muted);
}

:root[data-theme="light"] .spotify-music-visualizer {
    background: rgba(240, 243, 246, 0.88);
}

:root[data-theme="light"] .find-word-spotlight {
    background: color-mix(in srgb, #ffffff 92%, #e2e8f0);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
:root[data-theme="light"] #findWordModal.find-word-overlay {
    background: rgba(248, 250, 252, 0.48);
}

:root[data-theme="light"] .find-word-filter-btn {
    background: #f1f5f9;
    color: var(--text-muted);
    border-color: #cbd5e1;
}

:root[data-theme="light"] .find-word-filter-btn.is-active {
    background: var(--accent-primary);
    color: var(--accent-primary-text, #ffffff);
    border-color: var(--accent-primary);
}

:root[data-theme="light"] body.artist-mode #flashcardMode::before {
    opacity: 0.45;
    filter: blur(36px);
}

:root[data-theme="light"] .choice-sheet-icon {
    background: color-mix(in srgb, var(--choice-accent) 86%, #15202b);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}


:root[data-theme="light"] .sense-prominence-badge[aria-expanded="true"] {
    background: transparent;
    box-shadow: none;
}




/* Conjugation-mode entry point in the conjugate drawer. */
:root[data-theme="light"] .conj-drill-link {
    border-color: rgba(var(--accent-primary-rgb), 0.4);
    background: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--text-primary);
}
:root[data-theme="light"] .conj-drill-link:hover {
    background: rgba(var(--accent-primary-rgb), 0.18);
    border-color: rgba(var(--accent-primary-rgb), 0.6);
}

:root[data-theme="light"] .meaning-row .group-card-varying-cell.is-active-subsense {
    background: rgba(var(--sense-match-rgb), 0.18) !important;
    box-shadow: inset 0 0 0 1.5px rgba(var(--sense-match-rgb), 0.5), inset 3px 0 0 rgb(var(--sense-match-rgb)), inset -3px 0 0 rgb(var(--sense-match-rgb)) !important;
}

/* Same saturated status colours as the dark theme; the bar outline frames white new cards. */
:root[data-theme="light"] #step4,
:root[data-theme="light"] #levelColoursTooltip {
    --set-known: #06a557;
    --set-review: #ffcc00;
    --set-new: #ffffff;
    --set-skipped: #64748b;
    --set-estimated: #9f7aea;
}

:root[data-theme="light"] .meanings-scroll.inline-sense-rows .meaning-pos-section .meaning-row:not(.is-current-sense):not(.selected):not(:hover):not(#_) {
    background: transparent !important;
    border-color: transparent;
}