/* Palettes and illustration masks are separate from the original day/night skin. */
:root[data-season-theme] {
  --season-art: none;
  --season-art-opacity: .12;
}
:root[data-theme-phase="day"] { --season-ok: #28784d; --season-care: #b23e4c; }
:root[data-theme-phase="night"] { --season-ok: #8fd9b5; --season-care: #f19aa5; }
:root[data-season-theme="spring"] { --season-art: url('../img/themes/spring.svg'); }
:root[data-season-theme="summer"] { --season-art: url('../img/themes/summer.svg'); }
:root[data-season-theme="autumn"] { --season-art: url('../img/themes/autumn.svg'); }
:root[data-season-theme="winter"] { --season-art: url('../img/themes/winter.svg'); }

:root[data-season-theme="spring"][data-theme-phase="day"] {
  --season-bg: #fbf6f8; --season-surface: #fffafd;
  --season-ink: #302831; --season-muted: #6f5c69;
  --season-accent: #854365; --season-secondary: #446d57; --season-glow: #e4bacb;
  --season-on-accent: #fff;
}
:root[data-season-theme="spring"][data-theme-phase="night"] {
  --season-bg: #17141e; --season-surface: #241f2e;
  --season-ink: #f3eaf2; --season-muted: #bfb0c3;
  --season-accent: #e7aec7; --season-secondary: #a2cab4; --season-glow: #7c5066;
  --season-on-accent: #211622;
}
:root[data-season-theme="summer"][data-theme-phase="day"] {
  --season-bg: #f0f8fa; --season-surface: #f9feff;
  --season-ink: #193b45; --season-muted: #4b6a72;
  --season-accent: #126779; --season-secondary: #286f58; --season-glow: #8fd8db;
  --season-on-accent: #fff;
}
:root[data-season-theme="summer"][data-theme-phase="night"] {
  --season-bg: #0e1d29; --season-surface: #172c38;
  --season-ink: #e3f4f6; --season-muted: #a4bdc7;
  --season-accent: #7dd4df; --season-secondary: #94cdb4; --season-glow: #206e80;
  --season-on-accent: #102530;
}
:root[data-season-theme="autumn"][data-theme-phase="day"] {
  --season-bg: #fbf5eb; --season-surface: #fffcf7;
  --season-ink: #3f3027; --season-muted: #79634f;
  --season-accent: #99512f; --season-secondary: #746132; --season-glow: #deb174;
  --season-on-accent: #fff;
}
:root[data-season-theme="autumn"][data-theme-phase="night"] {
  --season-bg: #211913; --season-surface: #30251d;
  --season-ink: #f7ebda; --season-muted: #c7b39c;
  --season-accent: #e8b47b; --season-secondary: #d9bd83; --season-glow: #966340;
  --season-on-accent: #2b1b10;
}
:root[data-season-theme="winter"][data-theme-phase="day"] {
  --season-bg: #f1f5fb; --season-surface: #fbfdff;
  --season-ink: #23364a; --season-muted: #576e85;
  --season-accent: #3c638f; --season-secondary: #486e79; --season-glow: #afc8df;
  --season-on-accent: #fff;
}
:root[data-season-theme="winter"][data-theme-phase="night"] {
  --season-bg: #121b2a; --season-surface: #1c2a3e;
  --season-ink: #e6effb; --season-muted: #afbfd3;
  --season-accent: #a3c6ed; --season-secondary: #a7d5da; --season-glow: #385f89;
  --season-on-accent: #172332;
}

html[data-season-theme]:not([data-season-theme="default"]) {
  background: var(--season-bg);
}
html[data-season-theme]:not([data-season-theme="default"]) body:not(.admin-mode) {
  --bg: var(--season-bg);
  --panel: color-mix(in srgb, var(--season-surface) 82%, transparent);
  --panel-strong: var(--season-surface);
  --text: var(--season-ink);
  --muted: var(--season-muted);
  --gold: var(--season-accent);
  --blue: var(--season-secondary);
  --line: color-mix(in srgb, var(--season-ink) 17%, transparent);
  --ok: var(--season-ok);
  --care: var(--season-care);
  isolation: isolate;
  color: var(--text);
  color-scheme: inherit;
  background:
    radial-gradient(ellipse at 4% 0%, color-mix(in srgb, var(--season-glow) 27%, transparent), transparent 40rem),
    radial-gradient(ellipse at 98% 90%, color-mix(in srgb, var(--season-secondary) 10%, transparent), transparent 46rem),
    var(--bg);
  background-attachment: fixed;
}
html[data-season-theme]:not([data-season-theme="default"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(155deg, var(--season-accent), var(--season-secondary));
  -webkit-mask: var(--season-art) right 82% / min(75vw, 920px) auto no-repeat;
  mask: var(--season-art) right 82% / min(75vw, 920px) auto no-repeat;
  opacity: var(--season-art-opacity);
}
:root[data-theme-phase="night"] { --season-art-opacity: .1; }

/* Cover each illustrated surface, including the entire page background. */
.season-effects-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.season-effects-layer.season-effects-background {
  position: fixed;
  border-radius: 0;
}
.season-particle {
  position: absolute;
  top: -24px;
  left: var(--particle-left);
  width: var(--particle-size);
  height: calc(100% + 48px);
  opacity: 0;
  animation: season-particle-fall var(--fall-duration) var(--fall-delay) linear infinite;
}
.season-particle-sway,
.season-particle-shape {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
.season-particle-sway {
  animation: season-particle-sway var(--sway-duration) var(--sway-delay) ease-in-out infinite alternate;
}
.season-particle-shape {
  background: var(--particle-color);
  -webkit-mask: var(--particle-art) center / contain no-repeat;
  mask: var(--particle-art) center / contain no-repeat;
  animation: season-particle-turn var(--turn-duration) var(--sway-delay) ease-in-out infinite alternate;
}
.season-particle:nth-child(3n) .season-particle-shape { background: var(--particle-color-alt, var(--particle-color)); }
:root[data-season-theme="spring"] {
  --particle-color: #c77b9a;
  --particle-color-alt: #d69bb3;
  --particle-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3C2 8 4 18 17 22C22 13 22 5 17 2L12 5L10 1Z'/%3E%3C/svg%3E");
}
:root[data-season-theme="summer"] {
  --particle-color: #4c8a60;
  --particle-color-alt: #82a66b;
  --particle-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 2C10 1 1 6 3 15C5 24 19 22 21 2ZM6 19L16 7' fill-rule='evenodd'/%3E%3Cpath d='M5 22L17 6' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}
:root[data-season-theme="autumn"] {
  --particle-color: #b77b43;
  --particle-color-alt: #bd9553;
  --particle-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L15 7L19 4L18 11L23 10L20 15L22 17L14 19L13 23H11L12 19L3 17L5 15L1 10L7 11L5 4L10 7Z'/%3E%3C/svg%3E");
}
:root[data-season-theme="winter"] {
  --particle-color: #789fc5;
  --particle-color-alt: #9cb8d3;
  --particle-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2V22M3.34 7L20.66 17M3.34 17L20.66 7M9 4L12 7L15 4M9 20L12 17L15 20M3.6 10.6L7.7 9.5L6.6 5.4M17.4 18.6L16.3 14.5L20.4 13.4M6.6 18.6L7.7 14.5L3.6 13.4M20.4 10.6L16.3 9.5L17.4 5.4'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-season-theme="spring"][data-theme-phase="night"] { --particle-color: #e2adc6; --particle-color-alt: #d8b8ce; }
:root[data-season-theme="summer"][data-theme-phase="night"] { --particle-color: #9cc59e; --particle-color-alt: #b4cc9b; }
:root[data-season-theme="autumn"][data-theme-phase="night"] { --particle-color: #dfb17c; --particle-color-alt: #d3bd91; }
:root[data-season-theme="winter"][data-theme-phase="night"] { --particle-color: #d3e5f5; --particle-color-alt: #b3d1ed; }
@keyframes season-particle-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10%, 85% { opacity: var(--particle-opacity); }
  100% { transform: translate3d(var(--fall-drift), 100%, 0); opacity: 0; }
}
@keyframes season-particle-sway {
  from { transform: translate3d(calc(-1 * var(--sway-distance)), 0, 0); }
  to { transform: translate3d(var(--sway-distance), 0, 0); }
}
@keyframes season-particle-turn {
  from { transform: rotate(var(--turn-start)) rotateY(-25deg); }
  to { transform: rotate(var(--turn-end)) rotateY(35deg); }
}

html[data-season-theme]:not([data-season-theme="default"]) body .user-top {
  isolation: isolate;
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  border-color: var(--line);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.user-top, .mobile-menu-panel, .bible-space-head, .prayer-space-head, .worship-space-head, .spiritual-space-head, .my-page-head, .meeting-head)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--season-accent), var(--season-secondary));
  -webkit-mask: var(--season-art) right center / 340px auto no-repeat;
  mask: var(--season-art) right center / 340px auto no-repeat;
  opacity: .14;
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.mobile-menu-panel, .bible-space-head, .prayer-space-head, .worship-space-head, .spiritual-space-head, .my-page-head, .meeting-head) {
  position: relative;
  isolation: isolate;
}
html[data-season-theme]:not([data-season-theme="default"]) body .glass {
  border-color: var(--line);
  background: linear-gradient(150deg, var(--panel), color-mix(in srgb, var(--panel-strong) 94%, transparent));
  box-shadow: 0 14px 38px color-mix(in srgb, var(--season-ink) 8%, transparent);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.mobile-menu-panel, .locale-extra) {
  background: var(--panel-strong);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.bible-space-head, .prayer-space-head, .worship-space-head, .spiritual-space-head, .my-page-head, .meeting-head) {
  background: linear-gradient(120deg, color-mix(in srgb, var(--season-glow) 16%, var(--panel-strong)), var(--panel-strong));
  border-color: var(--line);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.user-top nav a, .mobile-menu-panel nav a) {
  color: var(--muted);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.user-top nav a.active, .mobile-menu-panel nav a.active) {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--panel-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.user-top nav a.active, .mobile-menu-panel nav a.active)::before {
  background: var(--gold);
  box-shadow: none;
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(button, input, select, textarea) {
  color: var(--text);
}
/* These selected note tabs keep a gold background in every seasonal palette. */
html[data-season-theme]:not([data-season-theme="default"]) body #bibleNotesPanel :is(.word-note-reference-tabs, .word-note-result-tabs) button:is(.active, [aria-selected="true"]) {
  color: #241905;
}
/* Mobile view tabs use dark warm ink on gold, and their palette's contrasting ink elsewhere. */
html[data-season-theme] body #bibleNotesPanel .word-note-mobile-tabs button.active {
  color: var(--season-on-accent, #241905);
}
/* Score hit targets are transparent overlays, rather than visible buttons. */
html[data-season-theme]:not([data-season-theme="default"]) body :is(button:where(:not(.score-visual-hit):not(.score-workflow-measure)), input, select, textarea) {
  border-color: var(--line);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(input, select, textarea) {
  background-color: var(--panel-strong);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.gold, .dashboard-action.primary) {
  color: var(--season-on-accent);
  background: linear-gradient(120deg, var(--season-accent), var(--season-secondary));
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.scripture-text, .audio-row) {
  background: color-mix(in srgb, var(--bg) 72%, var(--panel-strong));
}
html[data-season-theme]:not([data-season-theme="default"]) body .verse-line {
  color: var(--text);
}
html[data-season-theme]:not([data-season-theme="default"]) body .verse-line.active {
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 12%, var(--panel-strong));
  box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
html[data-season-theme]:not([data-season-theme="default"]) body .verse-line.active > span {
  color: var(--season-on-accent);
  background: var(--gold);
}
html[data-season-theme]:not([data-season-theme="default"]) body .mobile-menu-overlay {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
}
html[data-season-theme]:not([data-season-theme="default"]) body .memory-share-shell {
  color: var(--text);
  background: transparent;
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.app-boot-fallback, .app-boot-retry) {
  color: var(--text);
  background: var(--bg);
}
html[data-season-theme]:not([data-season-theme="default"]) body .app-boot-mark { color: var(--gold); }
html[data-season-theme]:not([data-season-theme="default"]) body .app-boot-spinner {
  border-color: color-mix(in srgb, var(--gold) 20%, transparent);
  border-top-color: var(--gold);
}

/* Score conversion defines its own chrome tokens and portals sibling dialogs
   to body. Bridge every portal so open dialogs update with the live theme. */
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-workflow-modal, .score-workflow-panel-backdrop, .score-input-overlay, .score-upload-beat-list, .score-visual-note-picker) {
  color-scheme: inherit;
  --score-chrome: var(--season-bg);
  --score-chrome-raised: var(--season-surface);
  --score-chrome-soft: color-mix(in srgb, var(--season-accent) 5%, var(--season-surface));
  --score-chrome-ink: var(--season-ink);
  --score-chrome-muted: var(--season-muted);
  --score-chrome-line: color-mix(in srgb, var(--season-ink) 22%, var(--season-surface));
  --score-chrome-hover: color-mix(in srgb, var(--season-accent) 9%, var(--season-surface));
  --score-chrome-active: color-mix(in srgb, var(--season-accent) 14%, var(--season-surface));
  --score-accent: var(--season-accent);
  --score-accent-soft: var(--score-chrome-active);
  --score-on-accent: var(--season-on-accent);
  --score-notes: var(--season-accent);
  --score-code-soft: color-mix(in srgb, var(--score-code) 9%, var(--season-surface));
  --score-notes-soft: color-mix(in srgb, var(--season-secondary) 8%, var(--season-surface));
  --score-lyrics: var(--season-ok);
  --score-lyrics-soft: color-mix(in srgb, var(--season-ok) 8%, var(--season-surface));
  --score-action: var(--season-accent);
  --score-action-end: var(--season-secondary);
  --score-action-ink: var(--season-on-accent);
  --score-disabled: color-mix(in srgb, var(--season-ink) 8%, var(--season-surface));
  --score-disabled-ink: var(--season-muted);
  --score-shadow: #0003;
  --card: var(--score-chrome-raised);
  --border: var(--score-chrome-line);
  --accent: var(--score-accent);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-workflow-modal, .score-workflow-panel-backdrop, .score-input-overlay) {
  background: color-mix(in srgb, var(--season-bg) 72%, transparent);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-upload-beat-list {
  color: var(--score-chrome-ink);
  background: var(--score-chrome-raised);
  border-color: var(--score-chrome-line);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-input-viewport {
  background: var(--score-chrome-soft);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-workflow-head {
  color: var(--score-chrome-ink);
  background: linear-gradient(110deg, var(--score-chrome-raised), var(--score-chrome), var(--score-notes-soft));
  border-color: var(--score-chrome-line);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-workflow-statusbar {
  color: var(--score-chrome-muted);
  background: var(--score-chrome-soft);
  border-color: var(--score-chrome-line);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-input-shell > :is(header, footer) {
  color: var(--score-chrome-ink);
  background: linear-gradient(110deg, var(--score-chrome-raised), var(--score-chrome-soft));
  border-color: var(--score-chrome-line);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-workflow-info-dialog button[type="submit"], .score-visual-save:not(:disabled), .score-visual-picker-apply, .score-input-shell [data-input-apply-crop]) {
  color: var(--score-action-ink);
  background: linear-gradient(115deg, var(--score-action), var(--score-action-end));
  border-color: var(--score-action);
}
html[data-season-theme]:not([data-season-theme="default"]) body .score-visual-save:disabled {
  color: var(--score-disabled-ink);
  background: var(--score-disabled);
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-visual-note-picker, .score-visual-pitch-keys, .score-visual-actions, .score-input-toolbar) [aria-pressed="true"] {
  color: var(--score-accent);
  background: var(--score-accent-soft);
  border-color: var(--score-accent);
  outline-color: var(--score-accent);
}
/* These palettes already use !important for their selected-state colors. */
html[data-season-theme]:not([data-season-theme="default"]) body .score-workflow-modal :is(.score-visual-rhythm-palette, .score-visual-dot-palette) [aria-pressed="true"] {
  color: var(--score-accent) !important;
  background: var(--score-accent-soft) !important;
  border-color: var(--score-accent) !important;
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-workflow-head, .score-workflow-info-dialog > header, .score-input-shell > header) {
  position: relative;
  isolation: isolate;
}
html[data-season-theme]:not([data-season-theme="default"]) body :is(.score-workflow-head, .score-workflow-info-dialog > header, .score-input-shell > header)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--season-accent);
  -webkit-mask: var(--season-art) right center / 300px auto no-repeat;
  mask: var(--season-art) right center / 300px auto no-repeat;
  opacity: .1;
}

/* Keep the Bible guide's own components on the same seasonal palette. */
html[data-season-theme]:not([data-season-theme="default"]) body[data-path="/bible"].guide-v2-active {
  --guide-v2-ink: var(--text); --guide-v2-muted: var(--muted);
  --guide-v2-forest: var(--blue); --guide-v2-forest-soft: color-mix(in srgb, var(--blue) 10%, var(--panel-strong));
  --guide-v2-gold: var(--gold); --guide-v2-gold-soft: color-mix(in srgb, var(--gold) 10%, var(--panel-strong));
  --guide-v2-blue: var(--blue); --guide-v2-blue-soft: color-mix(in srgb, var(--blue) 10%, var(--panel-strong));
  --guide-v2-surface: var(--panel-strong); --guide-v2-surface-2: color-mix(in srgb, var(--bg) 65%, var(--panel-strong));
  --guide-v2-line: var(--line); --guide-v2-accent-solid: var(--blue);
  --guide-v2-on-accent: var(--season-on-accent); --guide-v2-warm-ink: var(--gold);
  --guide-v2-dialog-head: var(--panel-strong); --guide-v2-dialog-foot: var(--panel-strong);
  --guide-v2-action-bg: linear-gradient(120deg, var(--gold), var(--blue));
  --guide-v2-action-ink: var(--season-on-accent);
}

/* Native details keeps theme selection reachable by keyboard without a modal. */
.appearance-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-block: 12px;
}
body:not(.admin-mode) .appearance-settings > .appearance-picker { margin: 0; }
.appearance-settings > .appearance-picker > summary { gap: 8px; min-height: 70px; box-sizing: border-box; }
.appearance-settings .appearance-thumbnail { flex-basis: 32px; height: 32px; }
body .appearance-settings > .season-effects-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  height: var(--appearance-control-height, 72px);
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.season-effects-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.season-effects-track {
  display: block;
  width: 28px;
  height: 16px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 24%, var(--bg));
  transition: background-color .25s ease;
}
.season-effects-track::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .25s ease, background-color .25s ease;
}
[aria-checked="true"] > .season-effects-track { background: var(--gold); }
[aria-checked="true"] > .season-effects-track::before { background: var(--bg); transform: translateX(12px); }
[dir="rtl"] [aria-checked="true"] > .season-effects-track::before { transform: translateX(-12px); }
body:not(.admin-mode) .appearance-picker {
  width: 100%;
  min-width: 0;
  margin-block: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
}
.appearance-picker > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: inherit;
  list-style: none;
  cursor: pointer;
}
.appearance-picker > summary::-webkit-details-marker { display: none; }
.appearance-picker > summary:focus-visible,
body .appearance-picker button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.appearance-thumbnail {
  position: relative;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 22%, var(--bg)), color-mix(in srgb, var(--blue) 16%, var(--bg)));
}
.appearance-thumbnail::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--gold);
  -webkit-mask: var(--season-art) center / cover;
  mask: var(--season-art) center / cover;
  opacity: .65;
}
.appearance-summary { flex: 1; min-width: 0; }
.appearance-summary b,
.appearance-summary small { display: block; }
.appearance-summary b { font-size: 13px; }
.appearance-summary small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.appearance-chevron { width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-inline: 5px; }
.appearance-picker[open] .appearance-chevron { transform: rotate(225deg); }
.appearance-options { padding: 0 12px 12px; }
.season-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body .appearance-picker .season-theme-option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 5px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: none;
  text-align: center;
}
.season-theme-option[data-season-choice="auto"] { --option-color: #64896e; --option-soft: #dce9dc; --option-art: var(--season-art); }
.season-theme-option[data-season-choice="default"] { --option-color: #927133; --option-soft: #e8e3d4; --option-art: none; }
.season-theme-option[data-season-choice="spring"] { --option-color: #a36d87; --option-soft: #f2dfe7; --option-art: url('../img/themes/spring.svg'); }
.season-theme-option[data-season-choice="summer"] { --option-color: #268b9b; --option-soft: #c9e9ef; --option-art: url('../img/themes/summer.svg'); }
.season-theme-option[data-season-choice="autumn"] { --option-color: #a86a3e; --option-soft: #f0dfc7; --option-art: url('../img/themes/autumn.svg'); }
.season-theme-option[data-season-choice="winter"] { --option-color: #698cb0; --option-soft: #dce7f3; --option-art: url('../img/themes/winter.svg'); }
.season-theme-swatch {
  position: relative;
  display: block;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(130deg, var(--option-soft), color-mix(in srgb, var(--option-color) 35%, var(--option-soft)));
}
.season-theme-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--option-color);
  -webkit-mask: var(--option-art) center / cover;
  mask: var(--option-art) center / cover;
  opacity: .7;
}
.season-theme-label { padding-inline: 2px; font-size: 11px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
body .appearance-picker .season-theme-option[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.season-theme-check {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  line-height: 18px;
}
[aria-pressed="true"] > .season-theme-check { display: block; }
body .appearance-picker :is(.appearance-help, .appearance-time-help) {
  margin: 10px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
body .appearance-picker .appearance-time-help { margin-bottom: 0; }
.appearance-brightness { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.appearance-brightness > b { font-size: 12px; }
html[data-season-theme] body .appearance-picker .theme-switch { margin: 0; border-radius: 99px; }
html[data-season-theme] body .appearance-picker .theme-switch button { min-height: 34px; border-radius: 99px; padding-inline: 12px; background: transparent; color: var(--muted); box-shadow: none; }
html[data-season-theme] body .appearance-picker .theme-switch button.active-theme {
  color: var(--bg);
  background: var(--text);
  border-color: transparent;
  box-shadow: none;
}
html[data-season-theme] body .appearance-picker .theme-switch button.active-theme::after { content: none; }
html[data-theme-phase="night"] .season-theme-swatch { filter: brightness(.78) saturate(.8); }
@media (max-width: 400px) {
  .season-theme-options { gap: 6px; }
  .appearance-options { padding-inline: 10px; }
  .appearance-brightness { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-picker *, .appearance-picker *::after, .season-effects-toggle *, .season-effects-toggle *::before { transition: none; animation: none; }
  .season-effects-layer { display: none; }
}
@media (forced-colors: active) {
  body::before, body .user-top::after, body .mobile-menu-panel::after, .season-effects-layer { display: none; }
  body .appearance-picker .season-theme-option[aria-pressed="true"] { outline: 2px solid Highlight; }
  .season-effects-track { outline: 1px solid ButtonText; }
  .season-effects-track::before { background: ButtonText; }
}
@media print {
  body::before, body .user-top::after, body .mobile-menu-panel::after, .appearance-settings, .appearance-picker, .season-effects-layer { display: none; }
}