/* Each palette covers the complete space and its miniature preview. */
:root,
:root[data-theme="sage"],
[data-palette="sage"] {
  color-scheme: light;
  --bg: #f7f9f3; --surface: #ffffff; --sidebar: #fcfdf9;
  --surface-alt: #f1f5eb; --tint: #e7efde; --line: #e1e7da; --line-strong: #b8cba7;
  --ink: #35432e; --text: #596a4e; --muted: #647159; --faint: #8b967f;
  --accent: #577247; --accent-hover: #425e33; --on-accent: #ffffff;
  --secondary: #b7836a; --warm-soft: #f8eee2; --warm-line: #e9dac5; --warm-ink: #876f52;
  --glow: #e7efdc55; --shadow: 0 10px 32px #40532b0a; --panel-radius: 18px;
}
:root[data-theme="rose"],
[data-palette="rose"] {
  color-scheme: light;
  --bg: #fcf6f6; --surface: #fffdfd; --sidebar: #fffbfb;
  --surface-alt: #faf0f1; --tint: #f4e2e6; --line: #eedfe3; --line-strong: #dbacb8;
  --ink: #50383f; --text: #805d67; --muted: #876570; --faint: #a88a94;
  --accent: #975066; --accent-hover: #844158; --on-accent: #ffffff;
  --secondary: #bd816d; --warm-soft: #fcf0e8; --warm-line: #efdccc; --warm-ink: #9b7159;
  --glow: #f4dbe655; --shadow: 0 10px 32px #8d405b0a; --panel-radius: 22px;
}
:root[data-theme="ocean"],
[data-palette="ocean"] {
  color-scheme: light;
  --bg: #f2f8fb; --surface: #fcfeff; --sidebar: #f9fcfe;
  --surface-alt: #eaf4f9; --tint: #dceef6; --line: #d9e8ef; --line-strong: #9ec6d9;
  --ink: #294557; --text: #4d6e82; --muted: #537085; --faint: #809baa;
  --accent: #2e708f; --accent-hover: #245d77; --on-accent: #ffffff;
  --secondary: #b98b6e; --warm-soft: #f6f1e7; --warm-line: #e7decc; --warm-ink: #8b7959;
  --glow: #d6ecf855; --shadow: 0 10px 32px #285d7a0a; --panel-radius: 16px;
}
:root[data-theme="lavender"],
[data-palette="lavender"] {
  color-scheme: light;
  --bg: #f7f5fc; --surface: #fefcff; --sidebar: #fcfaff;
  --surface-alt: #f0ebf8; --tint: #e9e1f5; --line: #e5def0; --line-strong: #c1abdc;
  --ink: #443652; --text: #715886; --muted: #78618e; --faint: #9d8bae;
  --accent: #775699; --accent-hover: #624382; --on-accent: #ffffff;
  --secondary: #b9859e; --warm-soft: #f9edf3; --warm-line: #ecd9e5; --warm-ink: #94647d;
  --glow: #e7dbf855; --shadow: 0 10px 32px #6742850a; --panel-radius: 22px;
}
:root[data-theme="apricot"],
[data-palette="apricot"] {
  color-scheme: light;
  --bg: #fcf8f0; --surface: #fffdf8; --sidebar: #fffdf7;
  --surface-alt: #faf0df; --tint: #f5e5cd; --line: #eee3d0; --line-strong: #dcb887;
  --ink: #51402c; --text: #7d603d; --muted: #806844; --faint: #aa9478;
  --accent: #89602c; --accent-hover: #795126; --on-accent: #ffffff;
  --secondary: #bb8170; --warm-soft: #f9e9e0; --warm-line: #edd7c8; --warm-ink: #9c6f57;
  --glow: #f5dfba55; --shadow: 0 10px 32px #805b2d0a; --panel-radius: 20px;
}
:root[data-theme="midnight"],
[data-palette="midnight"] {
  color-scheme: dark;
  --bg: #161c2a; --surface: #20293b; --sidebar: #1b2232;
  --surface-alt: #273247; --tint: #323e5d; --line: #333f56; --line-strong: #6d7fa9;
  --ink: #e5eaf7; --text: #bac6df; --muted: #a1afca; --faint: #8b9ab9;
  --accent: #a6b6e8; --accent-hover: #c0ccf3; --on-accent: #1b2540;
  --secondary: #dfb897; --warm-soft: #352f3b; --warm-line: #514457; --warm-ink: #e5c6d1;
  --glow: #34457044; --shadow: 0 10px 32px #080e201f; --panel-radius: 18px;
}
:root {
  --green: var(--accent); --green-dark: var(--accent-hover); --green-soft: var(--tint);
  --rose: var(--secondary); --rose-soft: var(--warm-soft);
}

/* Shared surfaces and readable text, including controls and private pages. */
body { background: radial-gradient(ellipse at 80% 0, var(--glow), transparent 700px), var(--bg); }
.sidebar { background: var(--sidebar); }
.topbar { background: color-mix(in srgb, var(--bg) 93%, transparent); }
.brand-name, .breadcrumb strong, .page-intro h1 { color: var(--ink); }
.brand-mark { color: var(--accent); background: var(--tint); }
.nav-caption, .brand-sub, .sidebar-poem, .poem-leaf, .rail-footnote, .page-footer,
.small-label, .section-title .en, .profile-status, .intro-sub, .breadcrumb,
.eyebrow, .header-date, .header-actions .separator, .nav-item, .sidebar-profile > .icon,
.memory-meta, .memory-author, .memory-content p, .wish-small-sub, .album-info p,
.entry-time, .entry-location, .timeline-date small, .timeline-quote, .wish-card p,
.wish-card.done h3, .letter-bottom, .letter-top, .field-hint, .data-info, .storage-state,
.avatar-help, .avatar-reset, .avatar-crop-hint, .avatar-zoom, .guest-strip,
.guest-strip > span:last-child, .mood-description, .mood-status, .guest-mood,
.together-label, .together-since, .together-met, .day-number small { color: var(--muted); }
.nav-item:hover, .icon-button:hover { color: var(--accent-hover); background: var(--surface-alt); }
.nav-item.active { background: var(--tint); color: var(--accent); }
.nav-item.active:after, .profile-status:before, .storage-state:before { background: var(--accent); }
.sidebar-profile, .memory-card, .wish-small, .wish-check, .rail-card,
.simple-card, .timeline-entry, .album-card, .wish-card, .anniversary-card,
.secondary-button, .search-field input, .mobile-page-links button, dialog { background: var(--surface); border-color: var(--line); }
.simple-card, .rail-card, .album-card, .wish-card, .anniversary-card, .timeline-entry { border-radius: var(--panel-radius); }
.primary-button { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button, .icon-button, .text-button, .like-button, .letter-actions button { color: var(--text); }
.secondary-button:hover, .tab:hover { border-color: var(--line-strong); color: var(--accent); background: var(--surface-alt); }
.memory-card:hover { border-color: var(--line-strong); }
.memory-bottom, .rail-separator, .stats-line, .wish-card-foot, .member-row,
.mood-status, .guest-strip { border-color: var(--line); }
.rail-separator, .header-actions .separator { background: var(--line); }
.tab { color: var(--muted); }
.tab.active, .tag, .count-chip, .account-login, .account-pill, .member-badge,
.tag-option.selected { color: var(--accent); background: var(--tint); border-color: var(--line-strong); }
.account-login:hover, .account-pill:hover { background: var(--surface-alt); }
.image-tag { color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.wish-check { border-color: var(--line-strong); }
.wish-check:hover, .wish-card.done, .settings-link, .signed-author, .profile-preview,
.avatar-edit-trigger, .search-result, .modal-heading .icon-button { background: var(--surface-alt); color: var(--text); }
.wish-check.checked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.wish-small > .icon, .rail-head h2 .icon, .rail-head > .icon, .settings-card h2 .icon,
.profile-preview .avatar-editor p, .profile-preview p, .avatar-change, .settings-link,
.search-result .icon, .stats-line b, .rail-inline strong, .empty-state h3 { color: var(--accent); }
.like-button.liked, .notification-dot, .footer-heart, .profile-preview > .icon,
.couple-avatars > .icon, .invite-couple > .icon { color: var(--secondary); }
.like-button.liked .icon { fill: color-mix(in srgb, var(--secondary) 25%, transparent); }
.notification-dot { background: var(--secondary); }
.together-card, .wish-summary { background: linear-gradient(140deg, var(--surface-alt), var(--tint)); border-color: var(--line); }
.together-card:before, .together-card:after { border-color: var(--line-strong); opacity: .5; }
.couple-names, .day-number, .wish-summary h2 { color: var(--accent); }
.tiny-heart, .wish-summary > .icon { color: var(--accent); }
.wish-summary p, .progress-label, .rail-inline, .anniversary-meta { color: var(--text); }
.progress-track { background: var(--tint); }
.progress-fill { background: var(--accent); }
.date-tile { background: var(--warm-soft); }
.date-tile span { background: var(--secondary); color: var(--bg); }
.date-tile strong, .anniversary-meta b { color: var(--secondary); }
.mood-button { color: var(--text); }
.mood-button.selected { color: var(--accent); background: var(--surface-alt); border-color: var(--line-strong); }
.timeline-list { border-color: var(--line-strong); }
.timeline-entry:before { background: var(--accent); }
.entry-text, .search-field input, .search-result small { color: var(--text); }
.search-field > .icon, .field > label, .field-label, .search-field input::placeholder { color: var(--muted); }
.album-new, .empty-state { color: var(--text); background: var(--surface-alt); border-color: var(--line-strong); }
.photo-grid button { background: var(--surface-alt); }
.anniversary-card:nth-child(3n+1), .letter-card, .note-card { background: var(--warm-soft); border-color: var(--warm-line); }
.anniversary-card:nth-child(3n+2), .letter-card:nth-child(3n+2) { background: var(--surface-alt); border-color: var(--line); }
.anniversary-card:nth-child(3n), .letter-card:nth-child(3n) { background: var(--tint); border-color: var(--line); }
.anniversary-count, .anniversary-card .date-label, .anniversary-card .remaining-label { color: var(--text); }
.note-copy, .note-card .rail-head h2, .note-card .rail-head .icon { color: var(--warm-ink); }
.note-sign, .note-card .text-button { color: var(--warm-ink); opacity: .8; }
.note-card:before { background: color-mix(in srgb, var(--secondary) 27%, transparent); }
.letter-card .note-copy { color: var(--ink); }
.letter-reply { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text); }
.field input, .field textarea, .field select { color: var(--ink); background: var(--surface-alt); border-color: var(--line); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--accent); }
.upload-zone, .inline-note { background: var(--surface-alt); color: var(--text); border-color: var(--line-strong); }
.upload-zone:hover, .upload-zone.dragover, .avatar-change:hover { background: var(--tint); }
.tag-option { color: var(--text); border-color: var(--line); }
.avatar-camera { background: var(--accent); border-color: var(--surface-alt); color: var(--on-accent); }
.avatar-crop-frame { background: var(--surface-alt); box-shadow: 0 0 0 7px var(--surface-alt), 0 0 0 8px var(--line-strong); }
.avatar-crop-frame:focus-within { outline-color: var(--accent); }
.member-badge.waiting { background: var(--warm-soft); color: var(--warm-ink); }
.invite-couple img { border-color: var(--tint); }
.toast, .saving:after { background: var(--surface); color: var(--accent); border-color: var(--line-strong); box-shadow: var(--shadow); }
.toast.error, .inline-error { color: #c7786d; }
.boot-state { color: var(--text); }
.mobile-nav { background: color-mix(in srgb, var(--sidebar) 95%, transparent); border-color: var(--line); }
.mobile-nav button { color: var(--muted); }
.mobile-nav button.active { color: var(--accent); }
.mobile-nav button.active:before { background: var(--tint); }

/* Theme gallery: previews remain in their own palette while the page changes. */
.theme-settings { overflow: hidden; }
.settings-stack, .settings-card, .field { min-width: 0; }
.field input, .field textarea, .field select { min-width: 0; }
.theme-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-eyebrow { font-size: 8px; letter-spacing: 2.5px; color: var(--muted); margin-bottom: 7px; }
.theme-settings h2 { margin-bottom: 0; font-size: 17px; }
.theme-count { padding: 4px 9px; border: 1px solid var(--line); border-radius: 20px; font-size: 9px; color: var(--muted); white-space: nowrap; }
.theme-intro { color: var(--muted); font-size: 11px; margin: 13px 0 20px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-option { display: block; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 13px; text-align: left; background: var(--surface); color: var(--ink); position: relative; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease), background .2s; }
.theme-option:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.theme-option.selected { border-color: var(--accent); background: var(--surface-alt); box-shadow: 0 0 0 1px var(--accent); }
.theme-option:focus-visible { outline-offset: 4px; }
.theme-option:disabled { cursor: progress; opacity: .78; }
.theme-option-copy { display: block; padding: 10px 5px 7px; }
.theme-option-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.theme-option-heading strong { font-size: 11px; font-weight: 500; white-space: nowrap; }
.theme-description { display: block; font-size: 9px; color: var(--muted); margin-top: 4px; letter-spacing: .4px; }
.theme-check { display: grid; place-items: center; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s var(--ease); }
.theme-check .icon { width: 10px; height: 10px; stroke-width: 2.5; }
.theme-option.selected .theme-check { opacity: 1; transform: scale(1); }
.theme-preview { display: flex; height: 100px; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); pointer-events: none; }
.mini-sidebar { flex: 0 0 24%; display: flex; flex-direction: column; gap: 7px; padding: 10px 7px; background: var(--sidebar); border-right: 1px solid var(--line); }
.mini-logo { color: var(--accent); margin-bottom: 4px; }
.mini-logo .icon { width: 13px; height: 13px; }
.mini-sidebar > i { display: block; height: 3px; width: 90%; background: var(--line); border-radius: 2px; }
.mini-sidebar > i:first-of-type { background: var(--accent); }
.mini-content { flex: 1; min-width: 0; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.mini-toolbar { display: flex; justify-content: space-between; align-items: center; }
.mini-toolbar i { width: 35%; height: 3px; background: var(--text); border-radius: 2px; opacity: .7; }
.mini-toolbar i:last-child { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mini-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 9px; flex: 1; overflow: hidden; border-radius: 5px; background: linear-gradient(130deg, var(--tint), var(--surface-alt)); }
.mini-hero:after { content: ''; position: absolute; border: 1px solid var(--line-strong); width: 50px; height: 50px; border-radius: 50%; top: -25px; right: -15px; opacity: .7; }
.mini-hero > span { color: var(--accent); }
.mini-hero .icon { width: 17px; height: 17px; stroke-width: 1.2; }
.mini-hero b { color: var(--accent); font-family: Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1; z-index: 1; }
.mini-hero small { font-family: var(--sans); font-size: 5px; margin-left: 2px; }
.mini-cards { display: flex; gap: 4px; height: 17px; }
.mini-cards i { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.mini-cards i:last-child { background: var(--warm-soft); border-color: var(--warm-line); }
.theme-current { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 14px; background: var(--surface-alt); border-radius: 11px; }
.theme-current-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--tint); margin: 0 4px; flex-shrink: 0; }
.theme-current p { color: var(--text); font-size: 10px; }
.theme-current strong { color: var(--accent); font-weight: 500; }
.theme-current div > span { color: var(--muted); font-size: 10px; display: block; margin-top: 2px; }
.theme-current > .icon { color: var(--secondary); margin-left: auto; width: 16px; height: 16px; }
.theme-sync { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 9px; line-height: 1.8; margin-top: 13px; }
.theme-sync .icon { width: 13px; height: 13px; margin-top: 2px; }

/* Only persistent chrome and panels animate, without delaying form feedback. */
body, .sidebar, .topbar, .mobile-nav, .simple-card, .rail-card, .together-card,
.memory-card, .timeline-entry, .wish-card, .anniversary-card, .letter-card,
.nav-item, .theme-current { transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .35s var(--ease); }
@media (max-width: 1200px) and (min-width: 1051px) {
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .theme-preview { height: 96px; }
  .theme-option-copy { padding: 9px 4px 6px; }
  .theme-option-heading strong { font-size: 12px; }
  .theme-description { font-size: 10px; }
  .theme-settings h2 { font-size: 16px; }
  .theme-current { padding: 13px 10px; }
  .theme-current div > span { font-size: 9px; }
  .theme-sync { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-option:hover { transform: none; }
}