/* Load after the component styles. Artwork and saved custom colors stay intact. */
:root {
  --ink: #203b30;
  --muted: #526758;
  --line: #d2ddca;
  --blue: #287548;
  --surface: #fffef9;
  --surface-soft: #edf2df;
  --surface-raised: #ffffff;
  --accent: #287548;
  --accent-soft: #dceecb;
  --accent-ink: #245536;
  --on-accent: #ffffff;
  --success: #157445;
  --warning: #8a4618;
  --danger: #b5314a;
  --focus: #287548;
  --theme-bg: var(--app-background, #f5f1e5);
  --theme-border-strong: #8aa96e;
  --theme-warning-bg: #ffe3af;
  --theme-danger-bg: #ffe5e9;
  --theme-overlay: #18251c88;
  --shadow: 0 7px 24px #294b2510;
}

.theme-settings { padding: 20px 0 22px; margin: 18px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme-settings > h3 { margin-bottom: 16px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.theme-settings .field { color: var(--ink); margin-bottom: 12px; }
.theme-settings select, .theme-settings input { min-height: 46px; background: var(--surface); color: var(--ink); border-color: var(--line); }
.theme-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 17px; }
.theme-time-fields .field { min-width: 0; }
.theme-settings .theme-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
.theme-schedule[hidden] { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #171e19;
  --surface: #203128;
  --surface-soft: #294333;
  --surface-raised: #33513e;
  --ink: #eef2e6;
  --muted: #c4d4bc;
  --line: #405c48;
  --blue: #7bdd9c;
  --accent: #7bdd9c;
  --accent-soft: #244d35;
  --accent-ink: #b8f3be;
  --on-accent: #173820;
  --success: #7fdea3;
  --warning: #ffc676;
  --danger: #ffabb9;
  --focus: #93e6a6;
  --theme-border-strong: #7c9476;
  --theme-warning-bg: #403725;
  --theme-danger-bg: #452b32;
  --theme-overlay: #050a07bb;
  --shadow: 0 8px 30px #00000020;
  background: var(--theme-bg);
  color: var(--ink);
  scrollbar-color: #6a7c67 var(--theme-bg);
}
html[data-theme="dark"] :is(body, .layout, .main) { background: var(--theme-bg); color: var(--ink); }
html[data-theme="dark"] ::selection { background: var(--accent); color: var(--on-accent); }

/* Surfaces, separators, navigation, and modal chrome. */
html[data-theme="dark"] :is(.sidebar, .mobile-nav) { background: #202922f5; border-color: var(--line); }
html[data-theme="dark"] :is(.summary-card, .side-card, .goal-card, .stat, .stage, .calendar-panel, .group-card, .task-row, .empty, .goals-groups, .modal, .suggestion-row, .template-stage, .notification-settings.side-card) {
  background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow);
}
html[data-theme="dark"] :is(.profile-button, .mini-goal, .goal-card footer, .tree-row, .stage-tools, .table-line, .custom-controls, .tab-row) { border-color: var(--line); }
html[data-theme="dark"] :is(.task-row:hover, .goal-card:hover, .daily-step-option:hover, .animal-choice:hover, .background-option:hover) { border-color: var(--theme-border-strong); }
html[data-theme="dark"] :is(.sidebar-quote, .avatar, .detail-description, .form-intro, .goal-preview, .appearance-picker, .task-reminder-box, .background-option, .daily-step-option) {
  background: var(--surface-soft); border-color: var(--line); color: var(--muted);
}
html[data-theme="dark"] :is(.nav-item, .mobile-nav button) { color: var(--muted); }
html[data-theme="dark"] .nav-item:hover { background: var(--surface-soft); }
html[data-theme="dark"] :is(.nav-item.active, .chip.active, .mobile-nav button.active) { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--theme-border-strong); }
html[data-theme="dark"] :is(.nav-item .count, .goals-groups > summary > small, .stage-num, .date-pill, .avatar) { background: var(--surface-raised); color: var(--accent-ink); }
html[data-theme="dark"] .goals-groups > summary { color: var(--ink); }
html[data-theme="dark"] .modal-overlay { background: var(--theme-overlay); }
html[data-theme="dark"] .modal { box-shadow: 0 24px 90px #0008; }
html[data-theme="dark"] #toast { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--theme-border-strong); box-shadow: 0 8px 35px #0007; }

/* Typography overrides the existing light palette without changing text size. */
html[data-theme="dark"] :is(.main, .modal) :is(h1, h2, h3) { color: var(--ink); }
html[data-theme="dark"] :is(.brand-caption, .profile-button small, .sidebar-quote, .eyebrow, .page-subtitle, .summary-label, .summary-note, .summary-value span, .task-meta, .task-time, .gentle-note, .inspiration p, .legend, .demo-notice, .goal-card .goal-count, .goal-card footer, .goal-card .card-top .look-name, .empty p, .info-item > span, .stat > span, .stat small, .settings-grid p, .field small, .explanation, .suggestion-row small, .color-custom, .palette-label, .safari-summary .summary-counts, .goal-preview small, .appearance-note, .appearance-title span, .appearance-status, .custom-color-input, .hex-field, .color-slider-label, .stage-tools small, .detail-page-head .eyebrow, .chart-col > span, .chart-col > small, .preferences-note, .daily-step-note, .daily-step-body small, .daily-step-empty p, .daily-step-option small, .goal-kind-note, .completion-copy p, .notification-note, .notification-toggle small, .notification-fields .field small, .task-reminder-fields .field small, .settings-status) { color: var(--muted); }
html[data-theme="dark"] :is(.sidebar-quote strong, .summary-value, .daily-summary .summary-value, .goal-card .goal-percent, .safari-summary .big-percent, .safari-summary .summary-counts b, .daily-step-body strong, .daily-step-option strong, .stage-progress, .preference-toggle, .notification-toggle, .preference-fields .field, .notification-fields .field, .task-reminder-fields .field, .appearance-settings > h2, .notification-settings > h2) { color: var(--ink); }
html[data-theme="dark"] :is(.task-row.done .task-title, .tree-row.done > .node-title, .daily-step-card.done .daily-step-body strong) { color: var(--muted); text-decoration-color: #8fa087; }
html[data-theme="dark"] :is(.mini-goal .percent, .table-line > b) { color: var(--accent-ink) !important; }
html[data-theme="dark"] :is(.tree-row .schedule, .schedule) { color: var(--accent-ink) !important; }

/* Controls use native dark menus, date/time pickers, and browser scrollbars. */
html[data-theme="dark"] :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea) {
  background: var(--surface-soft); border-color: var(--theme-border-strong); color: var(--ink); color-scheme: dark;
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #a8b7a0; opacity: 1; }
html[data-theme="dark"] select option { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] input[type="checkbox"] { accent-color: var(--accent); }
html[data-theme="dark"] input[type="color"] { background: var(--surface-raised); border-color: var(--line); }
html[data-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface-soft) inset; }
html[data-theme="dark"] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus); }
html[data-theme="dark"] :is(.icon-btn, .secondary, .chip) { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] :is(.icon-btn:hover, .secondary:hover) { background: var(--surface-raised); border-color: var(--theme-border-strong); color: var(--accent-ink); }
html[data-theme="dark"] :is(.primary, .daily-step-empty .primary, .goal-lifecycle .primary, .completion-actions .primary, .notification-actions .primary) { background: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-theme="dark"] :is(.primary:hover, .daily-step-empty .primary:hover, .goal-lifecycle .primary:hover, .completion-actions .primary:hover, .notification-actions .primary:hover) { background: #9aefb4; color: var(--on-accent); }
html[data-theme="dark"] :is(.text-button, .look-caption, .stage-add, .add-task, .demo-notice button, .daily-step > .section-head .text-button, .goal-lifecycle .text-button, .notification-note a) { color: var(--accent-ink); }
html[data-theme="dark"] .add-task { border-color: var(--theme-border-strong); }
html[data-theme="dark"] .add-task:hover { background: var(--surface-soft); }
html[data-theme="dark"] .danger { color: var(--danger); background: var(--theme-danger-bg); }
html[data-theme="dark"] :is(.check, .daily-step-card > .check) { background: var(--surface); border-color: #94aa89; }
html[data-theme="dark"] :is(.check.checked, .daily-step-card > .check.checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-theme="dark"] :is(.task-arrow, .daily-step-card > .task-arrow, .stage-expand) { color: var(--muted); }

/* Today and progress: rich forest surfaces with legible contrast. */
html[data-theme="dark"] .hero { background: linear-gradient(125deg, #294f31, #203e34); border-color: #527b42; }
html[data-theme="dark"] .hero :is(.hero-kicker, p) { color: var(--muted); }
html[data-theme="dark"] .hero h2 span { color: var(--accent); }
html[data-theme="dark"] .inspiration { background: var(--theme-warning-bg); border-color: #625437; }
html[data-theme="dark"] .inspiration .icon { color: var(--warning); }
html[data-theme="dark"] :is(.flame, .daily-summary .flame) { background: var(--theme-warning-bg); color: var(--warning); }
html[data-theme="dark"] :is(.summary-progress-icon, .daily-summary .summary-progress-icon) { background: var(--accent-soft); color: var(--accent); }
html[data-theme="dark"] :is(.daily-step-card, .daily-step-card.done, .daily-step-empty) { background: #254832; border-color: #63964e; }
html[data-theme="dark"] .daily-step-empty h3 { color: var(--ink); }
html[data-theme="dark"] :is(.ring-number, .daily-summary .ring-number) { color: var(--accent-ink); }
html[data-theme="dark"] .ring > svg > circle:first-child { stroke: var(--line); stroke-opacity: 1; }
html[data-theme="dark"] :is(.bar, .safari-stage .bar, .safari-summary .progress-track) { background: var(--line); }
html[data-theme="dark"] .stage-status { background: #60705f; color: #f6ffef; }
html[data-theme="dark"] .stage-status.green { background: var(--accent); color: var(--on-accent); }
html[data-theme="dark"] .stage-status.orange { background: #ffbc67; color: #3b2c14; }
html[data-theme="dark"] .detail-main .tab-row, html[data-theme="dark"] .appearance-tabs { background: var(--surface-soft); }
html[data-theme="dark"] :is(.detail-main .tab-row button, .appearance-tabs button) { color: var(--muted); }
html[data-theme="dark"] :is(.detail-main .tab-row button.active, .appearance-tabs button.active) { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--theme-border-strong); }

/* Keep animal artwork and color chips unfiltered; darken their surroundings. */
html[data-theme="dark"] :is(.goal-card-art, .safari-summary) { background: radial-gradient(ellipse at 50% 60%, #394530 0, transparent 70%); }
html[data-theme="dark"] .animal-choice { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .animal-choice.selected, html[data-theme="dark"] .background-option[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] :is(.animal-choice small, .field .appearance-picker .animal-choice small, .nature-choice, .background-option) { color: var(--muted); }
html[data-theme="dark"] :is(.animal-choice .selection-check, .nature-choice.selected) { color: var(--accent); }
html[data-theme="dark"] :is(.swatch, .nature-choice .color-tile) { border-color: var(--surface-soft); }
html[data-theme="dark"] .nature-choice .color-tile { box-shadow: 0 0 0 1px var(--theme-border-strong); }
html[data-theme="dark"] .nature-choice.selected .color-tile { box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="dark"] .background-option[aria-pressed="true"] .background-swatch::after { background: var(--accent); color: var(--on-accent); border-color: var(--accent-soft); }
html[data-theme="dark"] .color-slider input[type="range"] { border-color: var(--theme-border-strong); }
html[data-theme="dark"] .color-slider input[type="range"]::-webkit-slider-thumb { border-color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .color-slider input[type="range"]::-moz-range-thumb { border-color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .tag { background: color-mix(in srgb, var(--color) 17%, var(--surface)); color: var(--ink); }

/* Calendar and statistics. */
html[data-theme="dark"] :is(.week-day, .week-day b, .calendar-weekday, .mini-calendar, .calendar-cell) { color: var(--muted); }
html[data-theme="dark"] :is(.calendar-cell, .mini-calendar .day-box) { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] :is(.calendar-cell.productive, .mini-calendar .day-box.productive) { background: var(--accent-soft); color: var(--accent-ink); border-color: #607b50; }
html[data-theme="dark"] .calendar-cell.selected { border-color: var(--accent); background: #405635; color: var(--ink); }
html[data-theme="dark"] .calendar-cell.today b { border-color: var(--accent); }
html[data-theme="dark"] .mini-calendar .day-box.current { outline-color: var(--accent); }
html[data-theme="dark"] :is(.week-day.active, .week-day.active b) { background: var(--accent); color: var(--on-accent); }
html[data-theme="dark"] .week-day.active .dot { background: var(--on-accent); }
html[data-theme="dark"] .week-day.productive:not(.active) .dot { background: var(--accent); }
html[data-theme="dark"] .stats-layout .chart-col > div { background: var(--accent); }
html[data-theme="dark"] .legend::before { background: var(--accent); }

/* Lifecycle banners, notification configuration, and validation feedback. */
html[data-theme="dark"] :is(.goal-lifecycle, .goal-lifecycle.completed, .notification-preview, .notification-status[data-state="enabled"], .ontrack) { background: var(--accent-soft); border-color: #607b50; color: var(--accent-ink); }
html[data-theme="dark"] :is(.goal-lifecycle h2, .goal-lifecycle.completed h2, .completion-copy h3, .notification-preview h3, .notification-preview strong) { color: var(--accent-ink); }
html[data-theme="dark"] :is(.goal-lifecycle p, .goal-lifecycle.completed p, .notification-preview p, .notification-preview small) { color: var(--muted); }
html[data-theme="dark"] :is(.goal-lifecycle .lifecycle-icon, .goal-lifecycle.completed .lifecycle-icon) { background: #435b36; color: var(--accent-ink); }
html[data-theme="dark"] :is(.goal-kind-badge, .reminder-badge) { background: var(--accent-soft); color: var(--accent-ink); border-color: #607b50; }
html[data-theme="dark"] :is(.goal-lifecycle.archived, .overdue-banner, .offtrack, .notification-status[data-state="blocked"]) { background: var(--theme-warning-bg); border-color: #685a3e; color: var(--warning); }
html[data-theme="dark"] :is(.goal-lifecycle.archived h2, .goal-lifecycle.archived p, .goal-lifecycle.archived .text-button, .overdue-banner button) { color: var(--warning); }
html[data-theme="dark"] .goal-lifecycle.archived .lifecycle-icon { background: #59492c; color: var(--warning); }
html[data-theme="dark"] :is(.goal-lifecycle .secondary, .goal-lifecycle.archived .secondary, .completion-actions .secondary, .notification-actions .secondary) { background: var(--surface-soft); border-color: var(--theme-border-strong); color: var(--ink); }
html[data-theme="dark"] :is(.goal-lifecycle .secondary:hover, .completion-actions .secondary:hover, .notification-actions .secondary:hover) { background: var(--surface-raised); }
html[data-theme="dark"] :is(.notification-status, .notification-status[data-state="unavailable"]) { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .notification-status[data-state="enabled"] { background: var(--accent-soft); color: var(--accent-ink); border-color: #607b50; }
html[data-theme="dark"] .notification-status[data-state="blocked"] { background: var(--theme-warning-bg); color: var(--warning); border-color: #685a3e; }
html[data-theme="dark"] .notification-status p { color: inherit; }
html[data-theme="dark"] .notification-preview .icon { color: var(--accent); }
html[data-theme="dark"] :is(.storage-warning, .form-error) { background: var(--theme-danger-bg); color: var(--danger); border-color: #7a4d58; }
html[data-theme="dark"] .notification-toggle:has(input:disabled) { color: var(--muted); }

/* Shared tokens also cover upcoming achievements and reorder panels. */
html[data-theme="dark"] :is(.award-card, .award-panel, .award-summary, .reorder-panel, .reorder-list, .reorder-item, .reorder-row) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.award-note, .award-description, .award-date, .reorder-note, .reorder-description, .reorder-hint) { color: var(--muted); }
html[data-theme="dark"] :is(.reorder-handle, .reorder-controls button) { color: var(--accent-ink); }
html[data-theme="dark"] :is(.award-icon, .award-badge, .reorder-item.selected) { background: var(--accent-soft); color: var(--accent-ink); }

@media (max-width: 480px) {
  .theme-time-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .theme-settings select, .theme-settings input { font-size: 16px; }
}

/* Saturated safari accents; keep saved artwork colors and layout intact. */
html:not([data-theme="dark"]) :is(.sidebar, .mobile-nav) { background: #fffdf5f5; border-color: var(--line); }
html:not([data-theme="dark"]) :is(.summary-card, .side-card, .goal-card, .stat, .stage, .calendar-panel, .group-card, .task-row, .goals-groups) { border-color: var(--line); box-shadow: var(--shadow); }
html:not([data-theme="dark"]) :is(.nav-item.active, .chip.active, .detail-main .tab-row button.active, .appearance-tabs button.active) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html:not([data-theme="dark"]) .nav-item.active .count { background: #ffffff25; color: #fff; }
html:not([data-theme="dark"]) .mobile-nav button.active { background: var(--accent-soft); color: var(--accent-ink); border-radius: 14px; }
html:not([data-theme="dark"]) :is(.primary, .daily-step-empty .primary, .goal-lifecycle .primary, .completion-actions .primary, .notification-actions .primary) { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px #28754824; }
html:not([data-theme="dark"]) :is(.primary:hover, .daily-step-empty .primary:hover, .goal-lifecycle .primary:hover, .completion-actions .primary:hover, .notification-actions .primary:hover) { background: #1e6039; }
html:not([data-theme="dark"]) :is(.secondary, .icon-btn) { border-color: #bbcdb0; color: var(--accent-ink); }
html:not([data-theme="dark"]) :is(.secondary:hover, .icon-btn:hover, .chip:hover) { background: var(--accent-soft); border-color: var(--accent); }
html:not([data-theme="dark"]) .chip.active:hover { background: #1e6039; color: #fff; }
html:not([data-theme="dark"]) :is(.text-button, .look-caption, .stage-add, .add-task, .demo-notice button, .daily-step > .section-head .text-button) { color: var(--accent); }
html:not([data-theme="dark"]) .hero { background: linear-gradient(115deg, #dceaa8, #f2d994); border-color: #bac978; box-shadow: 0 8px 28px #6d7e1812; }
html:not([data-theme="dark"]) .hero h2 { color: #28462b; }
html:not([data-theme="dark"]) .hero h2 span { color: #27733e; }
html:not([data-theme="dark"]) .hero :is(.hero-kicker, p) { color: #42592d; }
html:not([data-theme="dark"]) .sidebar-quote { background: #efdfb7; border-color: #deca96; color: #65522b; }
html:not([data-theme="dark"]) .sidebar-quote strong { color: #4e4f29; }
html:not([data-theme="dark"]) :is(.inspiration, .flame, .daily-summary .flame) { background: var(--theme-warning-bg); border-color: #e9c37a; color: var(--warning); }
html:not([data-theme="dark"]) .inspiration :is(h3, p, .icon) { color: var(--warning); }
html:not([data-theme="dark"]) :is(.flame, .daily-summary .flame) { background: #f5b64f; color: #67360d; }
html:not([data-theme="dark"]) :is(.summary-progress-icon, .daily-summary .summary-progress-icon) { color: #fff; background: var(--accent); }
html:not([data-theme="dark"]) :is(.summary-value, .daily-summary .summary-value, .goal-card .goal-percent, .safari-summary .big-percent) { color: var(--ink); }
html:not([data-theme="dark"]) :is(.ring-number, .daily-summary .ring-number) { color: var(--accent); }
html:not([data-theme="dark"]) .daily-summary .ring > svg > circle:last-child { stroke: var(--accent); }
html:not([data-theme="dark"]) :is(.daily-summary .summary-label, .daily-summary .summary-note, .daily-summary .summary-value span, .daily-step-note, .daily-step-body small, .daily-step-empty p, .preferences-note, .appearance-settings > p) { color: var(--muted); }
html:not([data-theme="dark"]) :is(.daily-step-card, .daily-step-empty) { background: linear-gradient(120deg, #d7ecc6, #e6f1cf); border-color: #9fc47e; box-shadow: 0 6px 22px #496b2010; }
html:not([data-theme="dark"]) .daily-step-card.done { background: #e0eed0; border-color: #a6c889; }
html:not([data-theme="dark"]) :is(.daily-step-body strong, .daily-step-empty h3) { color: #254c2d; }
html:not([data-theme="dark"]) .daily-step-card.done .daily-step-body strong { color: #526848; }
html:not([data-theme="dark"]) :is(.check, .daily-step-card > .check) { border-color: #709861; }
html:not([data-theme="dark"]) :is(.check.checked, .daily-step-card > .check.checked, .stage-status.green) { background: #23804c; border-color: #23804c; color: #fff; }
html:not([data-theme="dark"]) .stage-status.orange { background: #eaa044; color: #503017; }
html:not([data-theme="dark"]) :is(.week-day.active, .week-day.active b) { background: var(--accent); color: #fff; }
html:not([data-theme="dark"]) .week-day.active .dot { background: #fff; }
html:not([data-theme="dark"]) .week-day.productive:not(.active) .dot { background: #308844; }
html:not([data-theme="dark"]) :is(.calendar-cell.productive, .mini-calendar .day-box.productive) { background: #cde5b4; border-color: #a4c284; color: #345b26; }
html:not([data-theme="dark"]) .calendar-cell.selected { background: #bcdc9e; border-color: #608a3c; color: #294a22; }
html:not([data-theme="dark"]) .legend::before { background: var(--accent); }
html:not([data-theme="dark"]) :is(.ontrack, .detail-description, .date-pill, .stage-num, .form-intro) { background: var(--accent-soft); color: var(--accent-ink); }
html:not([data-theme="dark"]) .goal-card-art { background: radial-gradient(ellipse at 50% 65%, #efdeb2 0, transparent 68%); }
html:not([data-theme="dark"]) .new-goal-card { background: #f0f5e4; border-color: #92b275; color: var(--accent-ink); }
html:not([data-theme="dark"]) :is(.appearance-picker, .goal-preview) { background: #f2f0df; border-color: #d3d9b9; }
html:not([data-theme="dark"]) :is(.detail-main .tab-row, .appearance-tabs) { background: #e3e8d5; }
html:not([data-theme="dark"]) :is(.animal-choice.selected, .background-option[aria-pressed="true"]) { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-ink); }
html:not([data-theme="dark"]) :is(.animal-choice .selection-check, .nature-choice.selected) { color: var(--accent); }
html:not([data-theme="dark"]) .nature-choice.selected .color-tile { box-shadow: 0 0 0 2px var(--accent); }
html:not([data-theme="dark"]) .background-option[aria-pressed="true"] .background-swatch::after { background: var(--accent); border-color: var(--accent-soft); }
html:not([data-theme="dark"]) .preference-toggle input[type="checkbox"] { accent-color: var(--accent); }
html:not([data-theme="dark"]) :is(.preferences-note, .background-option, .preference-toggle, .preference-fields .field) { color: var(--muted); }
html:not([data-theme="dark"]) .tag { background: color-mix(in srgb, var(--color) 27%, #fffdf5); }
html:not([data-theme="dark"]) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus); }

/* Progress remains vivid in both themes without filtering user artwork. */
.bar > span, .safari-summary .progress-track span { background: linear-gradient(90deg, #18804d, #47b968); }
.safari-stage .bar.orange > span { background: linear-gradient(90deg, #de7b25, #f4b44a); }
html[data-theme="dark"] .bar > span, html[data-theme="dark"] .safari-summary .progress-track span { background: linear-gradient(90deg, #37ae6a, #81de8a); }
html:not([data-theme="dark"]) .stats-layout .chart-col > div { background: var(--accent); }