/* Complete palettes share the site's existing semantic color tokens. */
:root[data-background=wine]{--bg:#271c25;--surface:#362833;--text:#f1e5e8;--muted:#c0a9b6;--gold:#d6b1bc;--gold-bright:#ebcdd5;--line:#59424f;--appearance-accent:#d6b1bc;--appearance-on-accent:#271c25;--appearance-tint:#49313f;--appearance-border:#9a7388;--page-background:radial-gradient(ellipse at 0 0,#74516030,transparent 65%),var(--bg)}
:root[data-background=haram]{--bg:#10110f;--surface:#1c1f19;--text:#ede9df;--muted:#b5b5a7;--gold:#d4b778;--gold-bright:#ebd9b0;--line:#414435;--appearance-accent:#d4b778;--appearance-on-accent:#181911;--appearance-tint:#2c2d21;--appearance-border:#8e8262;--page-background:radial-gradient(ellipse at 50% 0,#99804b12,transparent 65%),var(--bg)}
:root[data-background=navy]{--bg:#121d2d;--surface:#1c2b40;--text:#e8edf3;--muted:#a8b6c8;--gold:#b9cbdc;--gold-bright:#dce5f0;--line:#40556e;--appearance-accent:#b9cbdc;--appearance-on-accent:#152335;--appearance-tint:#2b3e55;--appearance-border:#7e96af;--page-background:radial-gradient(ellipse at 100% 0,#37577a38,transparent 60%),var(--bg)}
:root[data-theme=light][data-background=wine]{--bg:#f6eef1;--surface:#fff9fb;--text:#4c303f;--muted:#795d6c;--gold:#86566e;--gold-bright:#673c54;--line:#dbc5d0;--appearance-accent:#86566e;--appearance-on-accent:#fff9fb;--appearance-tint:#ecdbe4;--appearance-border:#ab8498;--light-field:#fff9fb;--page-background:radial-gradient(ellipse at 0 0,#b8799a12,transparent 65%),var(--bg)}
:root[data-theme=light][data-background=haram]{--bg:#f5f2ea;--surface:#fffcf5;--text:#353429;--muted:#6b6657;--gold:#806228;--gold-bright:#615020;--line:#d7ccb4;--appearance-accent:#806228;--appearance-on-accent:#fffcf5;--appearance-tint:#ece4d2;--appearance-border:#a89a78;--light-field:#fffcf5;--page-background:radial-gradient(ellipse at 50% 0,#c5aa6b16,transparent 65%),var(--bg)}
:root[data-theme=light][data-background=navy]{--bg:#eef2f7;--surface:#fafcff;--text:#273e58;--muted:#5c6e82;--gold:#476681;--gold-bright:#304d6b;--line:#c5d1df;--appearance-accent:#476681;--appearance-on-accent:#fafcff;--appearance-tint:#dfe7f1;--appearance-border:#889db6;--light-field:#fafcff;--page-background:radial-gradient(ellipse at 100% 0,#7295bc18,transparent 60%),var(--bg)}

/* Older sections used fixed green surfaces. Only the new palettes replace them. */
:root[data-palette] :is(.category-card,.reader-card,.dua-card,.surah-card,.verse-result,.account-stat,.cal-stats>div,.cal-reading,.custom-choice,.mushaf,.quran-player,.cal-dialog){background:var(--surface);border-color:var(--line)}
:root[data-palette] :is(.site-nav,.custom-panel,.verse-search-form,.account-card,.cal-panel,.cal-hasanat,.khatma-entry,.plan-today,.adhkar-listening){background:linear-gradient(140deg,var(--surface),var(--bg));border-color:var(--line);box-shadow:0 10px 30px #0000000d}
:root[data-palette] :is(.counter,.daily-count){background:radial-gradient(circle at 45% 20%,var(--appearance-tint),var(--surface));border-color:var(--appearance-border);box-shadow:0 0 0 8px var(--bg),0 0 0 9px var(--line),0 16px 35px #00000018}
:root[data-palette] :is(.counter:hover,.counter-wrap.complete .counter){border-color:var(--gold);box-shadow:0 0 0 8px var(--bg),0 0 0 9px var(--gold),0 16px 35px #00000018}
:root[data-palette] .daily-count.is-complete{background:var(--appearance-tint)}
:root[data-palette] :is(.count,.account-intro h1,.account-card h2,.account-stat strong,.cal-intro h1,.cal-guest h2,.cal-month-head h2,.cal-detail-head h2,.cal-hasanat h2,.cal-hasanat-total>strong,.cal-hasanat-periods strong,.cal-reading-head>strong,.cal-stats strong,.adhkar-listen-heading h2,.cal-explainer h2){color:var(--gold-bright)}
:root[data-palette] :is(.sound-toggle,.count-caption,.reset-button,.voice-transcript,.reading-note,.account-main label,.cal-section-title h2,.cal-icon-button,.cal-today,.cal-dhikr h3,.cal-reading h3,.cal-dialog legend,.cal-field,.cal-goal-checks label,.cal-manual-types label,.cal-tasbih,.adhkar-listen-selects label,.cal-hasanat-total>span,.cal-hasanat-periods span){color:var(--text)}
:root[data-palette] :is(.footer,.session-footer svg,kbd,.account-intro>p:last-child,.account-card p,.account-tabs button,.account-optional,.account-main small,.account-profile bdi,.account-stat,.cal-section-title>span,.cal-stats span,.cal-stats small,.cal-overline,.cal-weekdays,.cal-legend,.cal-month-note,.cal-goal-line,.cal-dhikr small,.cal-reading p,.cal-reading-record,.cal-empty,.cal-explainer p,.cal-dialog p,.cal-dialog small,.cal-hasanat-heading .cal-overline,.cal-hasanat h2 span,.cal-hasanat-total p,.cal-hasanat-periods small,.cal-hasanat-actions p,.cal-hasanat-method,.adhkar-listen-heading .section-kicker,.adhkar-listen-tag,.adhkar-listen-progress,.adhkar-listen-status p,.adhkar-listen-footer p){color:var(--muted)}
:root[data-palette] .account-footnote{color:var(--muted)!important}
:root[data-palette] :is(.account-main .quiet-link,.cal-intro .secondary-action,.cal-reading-link,.cal-inline-action,.cal-add,.cal-target-tag,.cal-hasanat-rate,.cal-hasanat-method summary,.cal-hasanat-method a,.adhkar-listen-status button,.adhkar-listen-icon){color:var(--gold)}
:root[data-palette] .cal-hasanat-method blockquote{color:var(--text)}
:root[data-palette] :is(.account-main input,.custom-panel textarea,.plan-fields input,.plan-dialog-field input,.cal-field input:not([type=checkbox]),.cal-field select,.adhkar-listen-selects select,.quran-search input,.quran-ayah-select select,.reciter-label select,.tafsir-picker select,.verse-search-input input,.bookmark-filter input,.bookmark-dialog input){background:var(--bg);color:var(--text);border-color:var(--appearance-border)}
:root[data-palette] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
:root[data-palette] :is(.duration-options span,.playback-modes span,#playerMode){border-color:var(--appearance-border)}
:root[data-palette] :is(.primary-action,.adhkar-listen-controls .primary-action,.voice-toggle[aria-pressed=true],.reset-button.restart,.site-nav a[aria-current]){background:var(--appearance-accent);color:var(--appearance-on-accent);border-color:var(--appearance-accent)}
:root[data-palette] :is(.primary-action:hover,.adhkar-listen-controls .primary-action:hover,.voice-toggle[aria-pressed=true]:hover,.reset-button.restart:hover){background:var(--gold-bright);color:var(--appearance-on-accent)}
:root[data-palette] :is(.site-nav .calendar-nav:not([aria-current]),.adhkar-listen-controls .secondary-action,.sound-toggle,kbd,.cal-day-state,.resume-link,.duas-entry,.category-icon,.bookmark-count){background:var(--appearance-tint);color:var(--gold-bright);border-color:var(--line)}
:root[data-palette] :is(.account-tabs button[aria-pressed=true],.cal-filters button[aria-pressed=true],.cal-day-state[data-state=complete],.cal-hasanat-actions button,.cal-dialog .cal-manual-estimate,.account-notice,.cal-notice,.favorite-button[aria-pressed=true],.ayah-action[data-saved=true],.playback-modes input:checked+span,.quran-ayah.is-playing){background:var(--appearance-tint);color:var(--gold-bright);border-color:var(--appearance-border)}
:root[data-palette] .cal-filters{background:var(--bg);border-color:var(--line)}
:root[data-palette] .cal-filters button{color:var(--muted)}
:root[data-palette] .cal-day{background:var(--surface);color:var(--text);border-color:var(--line)}
:root[data-palette] .cal-day[data-state=partial]{background:var(--appearance-tint);color:var(--text);border-color:var(--appearance-border)}
:root[data-palette] .cal-day[data-state=complete]{background:var(--appearance-accent);color:var(--appearance-on-accent);border-color:var(--appearance-accent)}
:root[data-palette] .cal-day[aria-current=date]:before{background:var(--gold)}
:root[data-palette] .cal-day[data-state=complete][aria-current=date]:before{background:var(--appearance-on-accent)}
:root[data-palette] .cal-day .cal-indicator{background:var(--gold)}
:root[data-palette] .cal-day[data-state=complete] .cal-indicator{background:transparent;color:var(--appearance-on-accent)}
:root[data-palette] :is(.cal-legend .is-partial,.cal-dhikr[data-done=true] .cal-status-mark){background:var(--appearance-tint);color:var(--gold);border-color:var(--appearance-border)}
:root[data-palette] .cal-legend .is-complete{background:var(--appearance-accent)}
:root[data-palette] .cal-legend .is-empty{border-color:var(--appearance-border)}
:root[data-palette] :is(progress,.cal-progress){background:var(--line)}
:root[data-palette] progress::-webkit-progress-bar{background:var(--line)}
:root[data-palette] progress::-webkit-progress-value{background:var(--gold)}
:root[data-palette] progress::-moz-progress-bar{background:var(--gold)}
:root[data-palette] :is(.adhkar-listen-progress input,.audio-progress input){accent-color:var(--gold)}
:root[data-palette] :is(.dial-track,.tick){stroke:var(--line)}
:root[data-palette] .tick.active{stroke:var(--gold-bright)}
:root[data-palette] :is(.appearance-dialog,.sunnah-dialog,dialog)::backdrop{background:#0009}
:root[data-palette] .quiet-reading .reader-card{background:var(--bg)}
:root[data-palette=wine] .category-card{border-radius:22px}
:root[data-palette=haram] .category-card{border-radius:24px 24px 12px 12px}
:root[data-palette=navy] .category-card{border-radius:14px;border-inline-start:2px solid var(--gold)}

/* Fixed, readable samples show each palette even before it is selected. */
.appearance-swatch[data-background-choice=wine]{--swatch-bg:#271c25;--swatch-panel:#362833;--swatch-accent:#d6b1bc;--swatch-line:#9a7388}
.appearance-swatch[data-background-choice=haram]{--swatch-bg:#10110f;--swatch-panel:#1c1f19;--swatch-accent:#d4b778;--swatch-line:#8e8262}
.appearance-swatch[data-background-choice=navy]{--swatch-bg:#121d2d;--swatch-panel:#1c2b40;--swatch-accent:#b9cbdc;--swatch-line:#7e96af}
:root[data-theme=light] .appearance-swatch[data-background-choice=wine]{--swatch-bg:#f6eef1;--swatch-panel:#fff9fb;--swatch-accent:#86566e;--swatch-line:#ab8498}
:root[data-theme=light] .appearance-swatch[data-background-choice=haram]{--swatch-bg:#f5f2ea;--swatch-panel:#fffcf5;--swatch-accent:#806228;--swatch-line:#a89a78}
:root[data-theme=light] .appearance-swatch[data-background-choice=navy]{--swatch-bg:#eef2f7;--swatch-panel:#fafcff;--swatch-accent:#476681;--swatch-line:#889db6}
.appearance-swatch[data-palette-preview],:root[data-theme=light] .appearance-swatch[data-palette-preview]{min-height:76px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--swatch-bg);border-color:var(--swatch-line)}
.appearance-preview-line{display:block;width:34%;height:3px;margin-inline-end:auto;background:var(--swatch-accent);border-radius:4px}
.appearance-preview-panels{display:flex;gap:8px}
.appearance-preview-panels>span{flex:1;display:block;height:27px;background:var(--swatch-panel);border:1px solid var(--swatch-line);border-radius:6px}
.appearance-swatch[data-background-choice=haram] .appearance-preview-panels>span{border-radius:12px 12px 4px 4px}
.appearance-swatch[data-background-choice=navy] .appearance-preview-panels>span{border-inline-start:2px solid var(--swatch-accent)}
.appearance-swatch[data-palette-preview] .appearance-check{color:var(--swatch-bg);background:var(--swatch-accent)}

/* The longer picker scrolls between a persistent title and its Done button. */
.appearance-dialog{overflow:hidden;max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.appearance-dialog[open]{display:flex;flex-direction:column}
.appearance-dialog>.appearance-heading,.appearance-dialog>.appearance-actions{flex-shrink:0}
.appearance-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:4px;margin-inline:-4px;scrollbar-width:thin}
.appearance-dialog>.appearance-actions{background:var(--surface);margin-top:6px}
@media(max-width:600px){.appearance-background:last-child{grid-column:auto}.appearance-background:last-child:nth-child(odd){grid-column:1/-1}.appearance-background:last-child .appearance-swatch{min-height:65px}}