/* Four complete atmospheres: palette, light, botanical details and photography. */
body[data-design-theme]{--page:#fbedeb;--surface:#fff5f1;--panel:#fff7f4;--soft:#f6dfe2;--pale:#efd0d7;--line:#e9cdd1;--ink:#382b30;--muted:#79616b;--accent:#b45d74;--accent-dark:#91455d;--card-shadow:0 8px 28px #9d53600a;--theme-cover:url('assets/cover-romantic-photo.jpg');--theme-background:url('assets/reference-romantic-background.webp');--theme-decoration:url('assets/reference-romantic-blossoms.webp');--theme-light:url('assets/reference-sunlight.webp');--light-opacity:.12;background:radial-gradient(ellipse at 100% 15%,#f5cfd3 0,transparent 56%),linear-gradient(145deg,#fff5f1,var(--page));color-scheme:light}
body[data-design-theme=minimal]{--page:#f3f0eb;--surface:#fcfaf6;--panel:#faf8f4;--soft:#e9e4dd;--pale:#e1dad0;--line:#ded8d0;--ink:#302e2b;--muted:#706a62;--accent:#80766b;--accent-dark:#62594f;--card-shadow:0 8px 28px #62513e08;--theme-cover:url('assets/cover-minimal-photo.jpg');--theme-background:url('assets/reference-minimal-background.webp');--theme-decoration:url('assets/reference-minimal-shadows.webp');--theme-light:url('assets/reference-sunlight.webp');--light-opacity:.16;background:linear-gradient(125deg,#fcfaf7,var(--page))}
body[data-design-theme=nature]{--page:#e6ecdf;--surface:#f5f7ee;--panel:#f1f5eb;--soft:#dce6d1;--pale:#cad9bc;--line:#ccd7c2;--ink:#2c392b;--muted:#5f6d55;--accent:#63844f;--accent-dark:#426238;--card-shadow:0 8px 28px #3e5b3110;--theme-cover:url('assets/cover-nature-photo.jpg');--theme-background:url('assets/reference-nature-background.webp');--theme-decoration:url('assets/reference-nature-leaves.webp');--theme-light:url('assets/reference-sunlight.webp');--light-opacity:.08;background:radial-gradient(ellipse at 100% 5%,#d0debf 0,transparent 55%),linear-gradient(135deg,#f4f6ee,var(--page))}
body[data-design-theme=evening]{--page:#1d1c30;--surface:#2b293e;--panel:#242236;--soft:#43324c;--pale:#55405c;--line:#4d4159;--ink:#fff3f3;--muted:#cdc0d1;--accent:#cc8ca6;--accent-dark:#efb5cc;--card-shadow:0 8px 28px #08071530;--theme-cover:url('assets/cover-evening-photo.jpg');--theme-background:url('assets/reference-evening-background.webp');--theme-decoration:url('assets/reference-evening-moon.webp');--theme-light:none;--light-opacity:0;background:radial-gradient(ellipse at 100% 28%,#71415866 0,transparent 48%),linear-gradient(135deg,#252337,var(--page));color-scheme:dark}
/* Original supplied artwork, encoded losslessly with the original transparency. */
body[data-design-theme=nature]{--background-veil:34%}
body[data-design-theme=romantic]{--background-veil:6%}
body[data-design-theme=minimal],body[data-design-theme=evening]{--background-veil:0%}
body[data-design-theme]{background-image:linear-gradient(color-mix(in srgb,var(--page) var(--background-veil,0%),transparent),color-mix(in srgb,var(--page) var(--background-veil,0%),transparent)),var(--theme-background);background-color:var(--page);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat}
body[data-design-theme] .main-shell{position:relative;isolation:isolate}
body[data-design-theme] .main-shell:before{content:'';position:absolute;z-index:-1;pointer-events:none;top:0;right:0;width:min(62%,580px);height:280px;background-image:var(--theme-decoration);background-size:100% auto;background-position:left top;background-repeat:no-repeat;opacity:.9;transform:scaleX(-1);mask-image:linear-gradient(130deg,#000 28%,transparent 72%)}
body[data-design-theme] .main-shell:after{content:'';position:absolute;z-index:-1;pointer-events:none;top:0;right:0;width:min(75%,700px);height:500px;background:var(--theme-light) right top/contain no-repeat;opacity:var(--light-opacity)}
body[data-design-theme=minimal] .main-shell:before{width:min(72%,700px);height:480px;opacity:.6;transform:none}
body[data-design-theme=evening] .main-shell:before{width:300px;height:300px;opacity:.9;transform:none;mask-image:none}
body.has-photo .main-shell:before,body.has-photo .main-shell:after{display:none}
body[data-design-theme] :is(.sidebar,.bottom-nav){background:color-mix(in srgb,var(--panel) 94%,transparent)}
body[data-design-theme] :is(.card,.event-item,.note-item,.memory){box-shadow:var(--card-shadow)}
body[data-design-theme] :is(.wishes-card,.mood-card,.garden-widget,.notes-shortcut){background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 65%,var(--soft)))}
body[data-design-theme] :is(.wish-row,.mood,.answer-item,.info-strip){background:var(--soft);color:var(--ink);border-color:var(--line)}
body[data-design-theme] :is(.wish-symbol,.wish-row i,.memory-strip>.add-memory){background:var(--pale);color:var(--accent-dark);border-color:var(--line)}
body[data-design-theme] :is(.settings-section+.settings-section,.cover-setting,footer,.chat-top){border-color:var(--line)}
body[data-design-theme] .ritual-card{background:linear-gradient(120deg,var(--soft),var(--surface));border-color:var(--line);box-shadow:var(--card-shadow)}
body[data-design-theme] .date-hero{border-color:var(--line);box-shadow:var(--card-shadow);background:var(--soft)}
body[data-design-theme] .date-hero:after{background:linear-gradient(90deg,#19151fd1 0,#19151f60 55%,#19151f08)}
body[data-design-theme] .date-hero-copy{max-width:calc(100% - 60px)}
body[data-design-theme] .date-hero h2{max-width:560px}
body[data-design-theme] .date-hero .btn{box-shadow:0 4px 18px #0002}
body[data-design-theme=evening] .garden-art{filter:hue-rotate(265deg) saturate(.8)}
body[data-design-theme=romantic] .garden-art{filter:hue-rotate(295deg) saturate(.75)}
body[data-design-theme=evening] .nav-btn.active{background:linear-gradient(120deg,#70465d,#44334f);color:#fff0f4}
body[data-design-theme=evening] :is(.btn:not(.secondary):not(.outline):not(.danger-outline),.day.today){color:#282132}
body[data-design-theme] .preview-canvas{background-image:var(--theme-decoration),var(--theme-background);background-size:100% auto,cover;background-repeat:no-repeat;background-position:top right,center}
/* Theme tiles preview the actual artwork and all four reference palette colors. */
.theme-tile{overflow:hidden;position:relative;transition:border-color .18s,box-shadow .18s}
.theme-tile.selected{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent-dark)}
.theme-sample{height:125px;gap:7px;background-image:url('assets/reference-romantic-blossoms.webp'),url('assets/reference-romantic-background.webp');background-size:cover;background-position:center}
.theme-sample i{width:23px;height:23px;flex-shrink:0;box-shadow:0 1px 5px #0002;background:#b45d74}
.theme-sample i:nth-child(2){background:#d99eab}.theme-sample i:nth-child(3){background:#fff6ee}.theme-sample i:nth-child(4){background:#f0d6d7}
.theme-sample[data-palette=minimal]{background-image:url('assets/reference-minimal-shadows.webp'),url('assets/reference-minimal-background.webp')}
.theme-sample[data-palette=minimal] i{background:#e4ded5}.theme-sample[data-palette=minimal] i:nth-child(2){background:#a59b8e}.theme-sample[data-palette=minimal] i:nth-child(3){background:#8c8276}.theme-sample[data-palette=minimal] i:nth-child(4){background:#faf6ef}
.theme-sample[data-palette=nature]{background-image:url('assets/reference-nature-leaves.webp'),url('assets/reference-nature-background.webp')}
.theme-sample[data-palette=nature] i{background:#9db88e}.theme-sample[data-palette=nature] i:nth-child(2){background:#45633d}.theme-sample[data-palette=nature] i:nth-child(3){background:#c4cfb8}.theme-sample[data-palette=nature] i:nth-child(4){background:#faf5e8}
.theme-sample[data-palette=evening]{background-image:url('assets/reference-evening-moon.webp'),url('assets/reference-evening-background.webp')}
.theme-sample[data-palette=evening] i{background:#504666}.theme-sample[data-palette=evening] i:nth-child(2){background:#cb8ea8}.theme-sample[data-palette=evening] i:nth-child(3){background:#a76386}.theme-sample[data-palette=evening] i:nth-child(4){background:#cbbbc9}
@media(max-width:600px){body[data-design-theme] .main-shell:before{width:72%;height:140px;opacity:.75}body[data-design-theme=evening] .main-shell:before{width:180px;height:180px}body[data-design-theme=minimal] .main-shell:before{width:85%;height:300px}body[data-design-theme] .main-shell:after{height:300px}.theme-sample{height:105px;padding:10px;gap:5px}.theme-sample i{width:21px;height:21px}body[data-design-theme] .date-hero-copy{max-width:calc(100% - 42px)}}
/* Explicit background presets remain independent of the selected atmosphere. */
body[data-design-theme][data-background-preset=linen]{background:repeating-linear-gradient(95deg,transparent 0 7px,#ac987b0a 7px 9px),var(--page)}
body[data-design-theme][data-background-preset=blush]{background:radial-gradient(ellipse at top left,#c47d8a40,transparent 65%),var(--page)}
body[data-design-theme][data-background-preset=leaves]{background:radial-gradient(ellipse at top right,#779b6c40,transparent 60%),var(--page)}

/* Mobile browsers resize their visible viewport as the address bar moves.
   Paint the artwork once on a composited layer sized to the stable large
   viewport instead of repainting a fixed body background while scrolling. */
@media(max-width:800px),(hover:none) and (pointer:coarse){
 body[data-design-theme]{isolation:isolate;background-attachment:scroll}
 body[data-design-theme]:not(.has-photo){background:var(--page)}
 body[data-design-theme] #custom-background{display:block;position:fixed;inset:0 0 auto;height:100vh;height:100lvh;z-index:-1;pointer-events:none;transform:translateZ(0);backface-visibility:hidden;contain:paint;background-image:var(--theme-background);background-color:var(--page);background-size:cover;background-repeat:no-repeat;background-attachment:scroll}
 body[data-design-theme]:not(.has-photo) #custom-background:after{background:color-mix(in srgb,var(--page) var(--background-veil,0%),transparent);opacity:1}
 body[data-design-theme][data-background-preset=linen]:not(.has-photo) #custom-background{background-image:repeating-linear-gradient(95deg,transparent 0 7px,#ac987b0a 7px 9px)}
 body[data-design-theme][data-background-preset=blush]:not(.has-photo) #custom-background{background-image:radial-gradient(ellipse at top left,#c47d8a40,transparent 65%)}
 body[data-design-theme][data-background-preset=leaves]:not(.has-photo) #custom-background{background-image:radial-gradient(ellipse at top right,#779b6c40,transparent 60%)}
 body[data-design-theme][data-background-preset]:not([data-background-preset=theme]):not(.has-photo) #custom-background:after{background:transparent}
}