:root {
  --theme-page: #f3f6fb;
  --theme-surface: #ffffff;
  --theme-soft: #eaf0fa;
  --theme-text: #202735;
  --theme-muted: #626e82;
  --theme-accent: #475fc0;
  --theme-accent-hover: #34499f;
  --theme-border: #dfe5ef;
  --theme-chip: #eef1ff;
}
:root[data-theme="wine"] { --theme-page:#fff1f3; --theme-surface:#fffafb; --theme-soft:#f9dbe4; --theme-text:#46232f; --theme-muted:#805866; --theme-accent:#b44469; --theme-accent-hover:#91324f; --theme-border:#edc5d2; --theme-chip:#ffe8ef; }
:root[data-theme="delft"] { --theme-page:#f4f2e9; --theme-surface:#fffdf8; --theme-soft:#e7e9f0; --theme-text:#1e2a50; --theme-muted:#56658a; --theme-accent:#243d87; --theme-accent-hover:#17285e; --theme-border:#c4cce0; --theme-chip:#e8ecf7; }
:root[data-theme="stroopwafel"] { --theme-page:#fff6e8; --theme-surface:#fffdf7; --theme-soft:#fae9cc; --theme-text:#48341d; --theme-muted:#7b684d; --theme-accent:#bc7629; --theme-accent-hover:#955a1d; --theme-border:#e9d6b8; --theme-chip:#fff0d4; }
:root[data-theme="moss"] { --theme-page:#edf5ee; --theme-surface:#fbfffb; --theme-soft:#dcebdd; --theme-text:#263b2d; --theme-muted:#637769; --theme-accent:#4d805a; --theme-accent-hover:#376645; --theme-border:#cbdece; --theme-chip:#e6f2e6; }
:root[data-theme="lavender"] { --theme-page:#f4f0fa; --theme-surface:#fffafd; --theme-soft:#ebe2f4; --theme-text:#352a45; --theme-muted:#766a85; --theme-accent:#7959aa; --theme-accent-hover:#5c4088; --theme-border:#dcd0e8; --theme-chip:#f1eafa; }
:root[data-theme="oud-kaas"] { --theme-page:#fbf4d8; --theme-surface:#fffdf2; --theme-soft:#efe5b8; --theme-text:#413711; --theme-muted:#786f43; --theme-accent:#ab781d; --theme-accent-hover:#805511; --theme-border:#e5d59a; --theme-chip:#fff2bd; }
:root[data-theme="vangogh"] { color-scheme:dark; --theme-page:#08152f; --theme-surface:#10264d; --theme-soft:#17366f; --theme-text:#f5edcf; --theme-muted:#c4d1e4; --theme-accent:#f0c84b; --theme-accent-hover:#ffdc6b; --theme-border:#35548a; --theme-chip:#1b3c73; --theme-button-text:#152544; }
:root[data-theme="rembrandt"] { color-scheme:dark; --theme-page:#191613; --theme-surface:#26211c; --theme-soft:#332a22; --theme-text:#f2e7d7; --theme-muted:#c1ae96; --theme-accent:#d0a15f; --theme-accent-hover:#e1b875; --theme-border:#55483a; --theme-chip:#40352a; --theme-button-text:#241a11; }
:root[data-theme="tulips"] { --theme-page:#fff0ed; --theme-surface:#fffafb; --theme-soft:#f8d9d7; --theme-text:#48232f; --theme-muted:#835965; --theme-accent:#cf4960; --theme-accent-hover:#a93249; --theme-border:#efc0c7; --theme-chip:#ffe5e3; }
:root[data-theme="dutch-orange"] { --theme-page:#fff3e6; --theme-surface:#fffbf6; --theme-soft:#ffdfb8; --theme-text:#492d20; --theme-muted:#7d624e; --theme-accent:#b9541c; --theme-accent-hover:#8f3b11; --theme-border:#f0c99f; --theme-chip:#ffe9d0; }
:root[data-theme="focus"] { --theme-page:#111319; --theme-surface:#fffaf0; --theme-soft:#eee2c6; --theme-text:#2e291f; --theme-muted:#655d4d; --theme-accent:#ad7216; --theme-accent-hover:#7b500d; --theme-border:#d7c08a; --theme-chip:#fff0cb; }
html, body { background: var(--theme-page) !important; color: var(--theme-text); }
html[data-theme="vangogh"] { background-color: var(--theme-page) !important; background-image:
  radial-gradient(circle at 7% 12%, #fff1ae 0 1px, transparent 2px), radial-gradient(circle at 19% 28%, #f0c84b 0 2px, transparent 3px), radial-gradient(circle at 33% 9%, #d8e5ff 0 1px, transparent 2px), radial-gradient(circle at 48% 20%, #ffe991 0 2px, transparent 3px), radial-gradient(circle at 68% 11%, #e2eaff 0 1px, transparent 2px), radial-gradient(circle at 91% 17%, #f4d56c 0 5px, #e3b739 6px, transparent 27px), radial-gradient(circle at 83% 55%, #f9e7a0 0 1px, transparent 2px), radial-gradient(circle at 14% 68%, #e3ebff 0 1px, transparent 2px), radial-gradient(circle at 94% 77%, #f0c84b 0 2px, transparent 3px), radial-gradient(ellipse 27% 12% at 46% 39%, transparent 59%, #94abd055 61%, transparent 65%), radial-gradient(ellipse 34% 15% at 48% 39%, transparent 62%, #5577b755 64%, transparent 68%), linear-gradient(164deg, transparent 76%, #112750 76.5%, #08152f 91%), linear-gradient(180deg, #102a59, #08152f) !important; background-attachment: fixed !important; }
html[data-theme="vangogh"] body { background: transparent !important; }
html[data-theme="delft"] { background-color: var(--theme-page) !important; background-image: url("delft-pattern.svg"), linear-gradient(135deg, #faf9f2, #eeeff3) !important; background-repeat: repeat, no-repeat !important; background-size: 240px 240px, cover !important; background-attachment: fixed !important; }
html[data-theme="delft"] body { background: transparent !important; }
body { transition: background-color .2s ease, color .2s ease; }
select, input:not([type="radio"]), textarea { border-color: var(--theme-border) !important; background-color: var(--theme-surface) !important; color: var(--theme-text) !important; }
.site-tools { position: fixed; z-index: 50; top: 14px; right: max(16px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; gap: 8px; color: #202735; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.home-shell { padding-top: 72px !important; }
.page { padding-top: 76px !important; }
.story-shell { padding-top: 72px !important; }
.header-note { display: none; }
.site-tool-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--theme-border) !important; border-radius: 999px !important; background: var(--theme-surface) !important; box-shadow: 0 4px 16px #20273512; color: var(--theme-text) !important; font: 700 .85rem/1 Inter, ui-sans-serif, system-ui, sans-serif !important; cursor: pointer; }
.site-tool-button:hover { border-color: var(--theme-accent) !important; background: var(--theme-chip) !important; }
.theme-trigger { width: 40px; height: 40px; min-height: 40px; padding: 0; border: 2px solid var(--theme-surface) !important; border-radius: 50% !important; background: var(--theme-accent) !important; color: transparent !important; box-shadow: 0 0 0 1px var(--theme-border), 0 4px 16px #20273512; }
.theme-trigger:hover { background: var(--theme-accent-hover) !important; }
.profile-trigger { width: 40px; padding: 0; border-radius: 50% !important; font-size: 1rem !important; }
.site-popover { position: absolute; top: 50px; right: 0; width: min(340px, calc(100vw - 28px)); padding: 17px; border: 1px solid var(--theme-border); border-radius: 16px; background: var(--theme-surface); box-shadow: 0 18px 48px #17203326; color: var(--theme-text); }
.site-popover[hidden] { display: none; }
.site-popover h2 { margin: 0; color: var(--theme-text); font: 800 1.05rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.site-popover-note { margin: 4px 0 13px; color: var(--theme-muted); font: 400 .82rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.theme-options { display: grid; gap: 5px; max-height: min(60vh, 420px); overflow: auto; }
.theme-option { display: grid; grid-template-columns: 1fr; align-items: center; width: 100%; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--theme-text); text-align: left; cursor: pointer; }
.theme-option:hover, .theme-option[aria-pressed="true"] { border-color: var(--option-accent); background: var(--option-soft); }
.theme-option strong { display: block; }
.theme-option strong { color: var(--option-accent); font: 750 .85rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.profile-menu label { display: block; margin: 12px 0 5px; color: var(--theme-text); font: 700 .82rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.profile-menu input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-surface); color: var(--theme-text); font: 400 .9rem Inter, ui-sans-serif, system-ui, sans-serif; }
.site-tools .profile-save { width: 100%; min-height: 39px; margin-top: 9px; border: 0 !important; border-radius: 8px !important; background: var(--theme-accent) !important; color: var(--theme-button-text, white) !important; font: 750 .86rem Inter, ui-sans-serif, system-ui, sans-serif !important; cursor: pointer; }
.site-tools .profile-save:hover { background: var(--theme-accent-hover) !important; }
.profile-status { margin: 9px 0 0; color: var(--theme-muted); font: 400 .76rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }

/* Shared return link used at the upper-left of NT2nu practice pages. */
.home-link { display: inline-block; margin-bottom: 20px; color: var(--theme-accent) !important; font: 750 .92rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif; text-decoration: none; }
.home-link:hover { text-decoration: underline; }

/* Apply the selected palette to the shared surfaces used across all site pages. */
.hero, .practice-card, .default-list-card, .customized-list-dialog, .section-card, .empty-shelf, .reading-note, .word-row, .sentence-row, .upload-card { border-color: var(--theme-border) !important; background-color: var(--theme-surface) !important; color: var(--theme-text); }
.section-card-upcoming, .preposition-bank { background-color: var(--theme-soft) !important; }
.hero { background-image: radial-gradient(ellipse at 85% 5%, var(--theme-soft), transparent 42%), linear-gradient(135deg, var(--theme-surface) 2%, var(--theme-page) 100%) !important; }
.welcome { border-color: var(--theme-border) !important; background-image: radial-gradient(ellipse at 89% 17%, var(--theme-soft), transparent 37%), linear-gradient(135deg, var(--theme-surface), var(--theme-page)) !important; }
html[data-theme="vangogh"] .hero, html[data-theme="vangogh"] .welcome { background-image: radial-gradient(circle at 84% 20%, #f3cf5a 0 6px, #ecb83c 7px, transparent 44px), radial-gradient(ellipse 36% 27% at 50% 28%, transparent 57%, #9db2dc50 59%, transparent 63%), radial-gradient(ellipse 48% 31% at 53% 29%, transparent 62%, #5476b25c 64%, transparent 68%), linear-gradient(145deg, #142e60, #091832 80%) !important; }
.shelf-art { background: linear-gradient(155deg, var(--theme-soft), var(--theme-page) 70%) !important; }
button:not(.secondary):not(.preposition-chip):not(.drop-slot):not(.site-tool-button):not(.theme-option):not(.wordlist-choice):not(.choice-button) { background: var(--theme-accent) !important; color: var(--theme-button-text, #fff) !important; }
button:not(.secondary):not(.preposition-chip):not(.drop-slot):not(.site-tool-button):not(.theme-option):not(.wordlist-choice):not(.choice-button):hover { background: var(--theme-accent-hover) !important; }
button.custom-list-option { border-color: var(--theme-accent-hover) !important; background: var(--theme-accent-hover) !important; color: var(--theme-button-text, #fff) !important; }
button.custom-list-option:hover { background: var(--theme-accent-hover) !important; filter: brightness(.96); }
button.custom-list-option span { color: inherit !important; opacity: .96; }
button.secondary { border-color: var(--theme-border) !important; background: var(--theme-surface) !important; color: var(--theme-text) !important; }
button.secondary:hover { background: var(--theme-soft) !important; }
.default-wordlist-buttons .wordlist-choice:not(.selected) { border: 1px solid var(--theme-border) !important; background: color-mix(in srgb, var(--theme-accent) 13%, var(--theme-surface)) !important; color: var(--theme-text) !important; box-shadow: none !important; }
.default-wordlist-buttons .wordlist-choice:not(.selected):hover { background: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-surface)) !important; }
.default-wordlist-buttons .wordlist-choice.selected { border: 1px solid var(--theme-accent-hover) !important; background: var(--theme-accent-hover) !important; color: var(--theme-button-text, #fff) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-button-text, #fff) 30%, transparent) !important; }
.default-wordlist-buttons .wordlist-choice.selected:hover { background: var(--theme-accent) !important; }
button.choice-button:not(.right-answer):not(.wrong-answer) { border: 1px solid var(--theme-border) !important; background: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-accent) 18%) !important; color: var(--theme-text) !important; box-shadow: none !important; }
button.choice-button:not(.right-answer):not(.wrong-answer):hover { border-color: var(--theme-accent) !important; background: color-mix(in srgb, var(--theme-surface) 72%, var(--theme-accent) 28%) !important; }
.card-link, .home-link, .back-link, .brand, .upload-actions a { color: var(--theme-accent) !important; }
.eyebrow, .progress-label strong, .episode-parts b { color: var(--theme-accent) !important; }
.wordlist-choice.selected { background: var(--theme-accent-hover) !important; }
button.choice-button.right-answer:not(.secondary):not(.preposition-chip):not(.drop-slot):not(.site-tool-button):not(.theme-option) { background: #18734a !important; color: #fff !important; opacity: 1; }
button.choice-button.wrong-answer:not(.secondary):not(.preposition-chip):not(.drop-slot):not(.site-tool-button):not(.theme-option) { background: #b33e38 !important; color: #fff !important; opacity: 1; }
.level-badge, .preposition-chip, .drop-slot.filled, .episode-parts span, .topic-row span { border-color: var(--theme-border) !important; background-color: var(--theme-chip) !important; color: var(--theme-accent-hover) !important; }
.progress-fill { background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-hover)) !important; }
.progress-track { background: var(--theme-soft) !important; }
.drop-slot.over, .preposition-bank.over { border-color: var(--theme-accent) !important; background-color: var(--theme-chip) !important; }
.section-count, .episode-count { border-color: var(--theme-border) !important; background: var(--theme-surface) !important; color: var(--theme-muted) !important; }
.card-description, .welcome-copy, .reading-note, .shelf-copy > p:not(.episode-label), .hint, .level-note, .interaction-status, .storage-note, .intro > p:last-child, .default-list-card p, .upload-card p, .page-indicator, .progress-label, .card-kicker, .home-footer, footer { color: var(--theme-muted) !important; }
body.focus-theme-active::before { position: fixed; z-index: 20; inset: 0; background: rgb(4 6 11 / 82%); content: ""; pointer-events: none; }
html[data-theme="focus"] body.focus-theme-active .default-list-card,
html[data-theme="focus"] body.focus-theme-active .practice-card { position: relative; z-index: 21; border-color: var(--theme-accent) !important; background-color: var(--theme-surface) !important; box-shadow: 0 0 0 2px var(--theme-accent), 0 20px 65px #0009; }
@media print { body.focus-theme-active::before { display: none; } }
@media (max-width: 660px) { .home-shell, .story-shell { padding-top: 64px !important; } }
@media (max-width: 560px) { .page { padding-top: 68px !important; } .site-tools { top: 10px; right: 10px; } }
@media print { .site-tools { display: none !important; } .home-shell, .page, .story-shell { padding-top: 0 !important; } }