/* The same surfaces and contrast rules apply to all three colour palettes. */
:root{--ink:#422b32;--rose:#823f55;--cream:#fbf7f1;--muted:#806670;--line:#e7dad4;--surface:#fffdf9;--surface-soft:#f3e9e4;--shadow:0 6px 24px #4c243508;--focus:#b37754;color-scheme:light}
:root[data-theme="sage"]{--ink:#263f36;--rose:#426b55;--cream:#f4f6ef;--muted:#64796b;--line:#d7e0d4;--surface:#fcfdf9;--surface-soft:#e9eee3;--shadow:0 6px 24px #264d2f08}
:root[data-theme="night"]{--ink:#f2e6ed;--rose:#e4a4bb;--cream:#211d29;--muted:#baa6b5;--line:#493b4b;--surface:#2c2533;--surface-soft:#382d3d;--shadow:0 6px 24px #0002;color-scheme:dark}
body{background:var(--cream);color:var(--ink);line-height:1.6}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button,a{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
h1,h2,h3{letter-spacing:-.025em;text-wrap:pretty}
.brand{display:flex;align-items:center;gap:12px;font-size:24px;line-height:1.3}.brand img{flex-shrink:0;border-radius:11px}.brand span{min-width:0}
header{padding-block:24px;gap:18px}header nav{gap:5px}header nav button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--muted)}
.ui-icon{display:inline-block;width:21px;height:21px;flex-shrink:0;vertical-align:middle}.nav-label{min-width:0;line-height:1.7}
.feature-nav{padding-block:15px;gap:8px}.feature-nav button{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:10px 14px;border-radius:14px;color:var(--muted);background:var(--surface)}
.feature-nav button:hover,.mobile-page-grid button:hover{border-color:var(--rose);color:var(--rose);background:var(--surface-soft)}
.feature-nav button.active,.mobile-page-grid button.active{background:var(--rose);color:var(--surface);border-color:var(--rose)}
header nav button.active{background:var(--surface-soft);color:var(--rose)}
.identity-bar{padding-block:12px}.identity-bar select{background:var(--surface);font-size:13px}.sync-status{letter-spacing:0}
.primary{background:var(--rose);color:var(--surface);box-shadow:0 3px 10px color-mix(in srgb,var(--rose) 12%,transparent);font-size:14px;font-weight:500}
.primary:hover{background:color-mix(in srgb,var(--rose) 88%,var(--ink));box-shadow:0 5px 18px color-mix(in srgb,var(--rose) 18%,transparent)}
[data-theme="night"] .primary,[data-theme="night"] .feature-nav button.active,[data-theme="night"] .mobile-page-grid button.active,[data-theme="night"] .heart-action.liked,[data-theme="night"] .album-filters .active{color:#281b25}
[data-theme="night"] input[type="file"]::file-selector-button{color:#281b25}
.text-btn{color:var(--rose)}.text-btn:hover{background:var(--surface-soft);border-radius:12px}
.field,[data-theme="night"] .field{background:var(--surface);color:var(--ink);border-color:var(--line);line-height:1.7}.field::placeholder{color:var(--muted);opacity:.8}
.field:focus{border-color:var(--rose)}textarea.field{line-height:1.9}.field[type="date"]{min-height:52px}
.panel,.card,[data-theme="night"] .card,[data-theme="night"] .panel,.occasion-card,.our-story,.timeline-page{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.letter,[data-theme="night"] .letter{background:var(--surface-soft)}
.social-card{background:var(--surface);box-shadow:var(--shadow);border-color:var(--line)}.social-card>.card{box-shadow:none}
.card-content{padding:26px}.card h3{font-size:27px;line-height:1.5}.card p{line-height:1.95}.badge{font-size:11px;line-height:1.8;color:var(--muted)}
.social-actions{background:color-mix(in srgb,var(--surface-soft) 45%,var(--surface));gap:8px}.heart-action{border-color:var(--line);background:var(--surface)}.heart-action.liked{background:var(--rose);color:var(--surface)}
.occasion-card{border-radius:20px}.countdown>div{background:var(--cream);border-color:var(--line)}.countdown strong{line-height:1.2}.countdown span{letter-spacing:0}
.home-feature-grid button{background:var(--surface);border-color:var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:15px;position:relative;padding:24px;box-shadow:var(--shadow);font-weight:400}
.home-feature-grid button>.ui-icon{width:40px;height:40px;padding:8px;background:var(--surface-soft);color:var(--rose);border-radius:12px}
.home-feature-grid .nav-label{font-size:16px;color:var(--ink);margin:0;line-height:1.6}.tile-caption{font-size:11px;color:var(--muted)}
.home-feature-grid button:hover{background:var(--surface-soft);border-color:color-mix(in srgb,var(--rose) 40%,var(--line))}
.section-title h1{display:flex;align-items:center;gap:18px;font-size:clamp(34px,5vw,58px);line-height:1.5}.page-symbol{display:grid;place-items:center;background:var(--surface-soft);border:1px solid var(--line);color:var(--rose);border-radius:20px;flex-shrink:0;width:64px;height:64px}.page-symbol .ui-icon{width:30px;height:30px}
.emblem .ui-icon{width:38px;height:38px;stroke-width:1.1}.envelope-symbol{display:flex;justify-content:center;align-items:center;min-height:85px}.envelope-symbol .ui-icon{width:64px;height:64px;stroke-width:1}.symbol .ui-icon{width:32px;height:32px}
.envelope{background:linear-gradient(150deg,var(--surface-soft),var(--surface))}.envelope button{display:block;margin:22px auto 10px}.envelope .song-heart{display:inline-flex}
.special-strip{border-color:var(--line)}.hero-art,[data-theme="night"] .hero-art{background:radial-gradient(ellipse,color-mix(in srgb,var(--rose) 15%,transparent),transparent 70%)}.orbit{border-color:color-mix(in srgb,var(--rose) 42%,var(--line))}.big-heart{font-weight:400}
.gate{background:radial-gradient(ellipse at 15% 20%,var(--surface-soft),transparent 55%),radial-gradient(ellipse at 90% 85%,color-mix(in srgb,var(--rose) 10%,var(--cream)),transparent 55%),var(--cream)}
.pin{background:var(--surface);border-color:var(--line)}.gate h1{line-height:1.4}.gate .emblem{border-color:var(--line);background:var(--surface);color:var(--rose);box-shadow:var(--shadow)}
.error,.form-feedback,.danger{color:#a3324b}[data-theme="night"] .error,[data-theme="night"] .form-feedback,[data-theme="night"] .danger{color:#ffabc0}
.comment,.trip-map,.dream-progress,.mobile-pages,.mood-options label{border-color:var(--line);background:var(--surface)}.comment{box-shadow:none}.mood-options label:has(:checked){background:var(--surface-soft)}
.music-bar{background:var(--surface);box-shadow:var(--shadow);border-color:var(--line)}.music-bar .primary{white-space:nowrap}.music-bar>span{display:flex;align-items:center;gap:10px}
.our-story{border-radius:24px}.story-prose{padding:42px}.story-text{color:var(--ink)}.story-cover-placeholder{background:radial-gradient(ellipse,var(--surface-soft),var(--surface))}
.lightbox{background:var(--surface);border-color:var(--line);box-shadow:0 24px 80px #0004}.lightbox>.text-btn{background:var(--surface)}.lightbox .detail-card{box-shadow:none}
.loading{font-size:15px;color:var(--muted)}footer{border-color:var(--line);line-height:1.9;padding-block:32px}
#toast{background:var(--ink);color:var(--cream);box-shadow:0 8px 30px #0002}
@media(min-width:761px) and (max-width:1180px){header{flex-wrap:wrap}.brand{flex:1}header nav{order:3;flex-basis:100%;justify-content:center}.home-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 header{padding:14px 0 10px;gap:12px}.brand{font-size:21px;gap:9px}.brand img{width:33px;height:33px;border-radius:10px}
 header>nav{gap:4px}header>nav button{flex-direction:column;gap:3px;font-size:11px;padding:7px 3px;min-height:58px;border-radius:12px}header>nav .ui-icon{width:19px;height:19px}
 header>nav button.active{background:var(--surface-soft);color:var(--rose)}header #logout{font-size:11px;min-height:40px}
 .mobile-pages{margin-top:14px;border-radius:15px}.mobile-pages summary{font-size:13px;padding:14px 15px}.mobile-pages summary>span:first-child{display:flex;align-items:center;gap:10px}.mobile-pages summary .ui-icon{width:20px;height:20px}
 .mobile-page-grid button{display:flex;align-items:center;gap:9px;background:var(--cream);font-size:12px;min-height:55px;padding:11px 10px}.mobile-page-grid button .ui-icon{width:19px;height:19px}
 .identity-bar{gap:8px;padding-block:12px}.identity-bar select{font-size:16px}.sync-status{font-size:10px;max-width:55%}
 .hero{padding-top:32px}.hero h1{font-size:clamp(34px,8.8vw,46px)}.hero p{font-size:14px}.stat{background:var(--surface);box-shadow:var(--shadow)}
 .section-title h1{font-size:29px;gap:12px}.page-symbol{width:47px;height:47px;border-radius:15px}.page-symbol .ui-icon{width:24px;height:24px}.section-title h2{font-size:25px}
 .home-feature-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.home-feature-grid button{padding:18px 15px;min-height:155px;gap:12px;border-radius:17px}.home-feature-grid .nav-label{font-size:14px;margin:0}.home-feature-grid .tile-caption{font-size:10px}.home-feature-grid button>.ui-icon{width:36px;height:36px;padding:7px;border-radius:11px}
 .card-content{padding:22px 18px}.card h3{font-size:26px}.panel{padding:22px 17px}.panel h3{font-size:24px}.badge{font-size:11px}
 .occasion-card{padding:22px 17px}.countdown>div{padding:15px 2px}.story-prose{padding:28px 20px}.story-prose h2{font-size:29px}
 .gate-card{padding:12px 0}.gate h1{font-size:37px}.gate .emblem .ui-icon{width:34px;height:34px}.gate .pin{font-size:27px}
 .envelope-symbol .ui-icon{width:56px;height:56px}.lightbox{padding:14px}.lightbox>.text-btn{background:var(--surface)}
 html{scroll-padding-top:170px}.trip-map{scroll-margin-top:170px}
}
@media(max-width:359px){.brand{font-size:18px}.brand img{width:29px;height:29px}.home-feature-grid button{padding:17px 12px}.home-feature-grid .nav-label{font-size:13px}.section-title h1{font-size:26px}header>nav button{font-size:10px}.sync-status{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.grouped-nav{display:flex;gap:10px;padding:15px 0;border-bottom:1px solid var(--line);position:relative;z-index:15}.nav-group{position:relative;flex:1;min-width:0}.nav-group>summary{display:flex;align-items:center;justify-content:center;gap:9px;list-style:none;cursor:pointer;padding:13px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13px;min-height:49px}.nav-group>summary::-webkit-details-marker,.home-category>summary::-webkit-details-marker{display:none}.nav-group>summary.current-group,.nav-group[open]>summary{background:var(--surface-soft);border-color:var(--rose);color:var(--rose)}.group-dropdown{position:absolute;inset-inline-start:0;top:calc(100% + 8px);min-width:230px;max-width:90vw;display:grid;gap:5px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 35px #0002;z-index:25}.nav-group:last-child .group-dropdown{inset-inline-start:auto;inset-inline-end:0}.group-dropdown button{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 13px;text-align:right;border-radius:10px;color:var(--ink)}.group-dropdown button:hover,.group-dropdown button.active{background:var(--surface-soft);color:var(--rose)}.mobile-nav-group{padding-top:6px}.mobile-nav-group h3{display:flex;align-items:center;gap:8px;font:13px Tahoma,sans-serif;color:var(--rose);padding:10px 15px;margin:0}.home-grouped-pages{display:grid;gap:14px}.home-category{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}.home-category>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:20px;cursor:pointer;color:var(--rose);min-height:64px}.home-category>summary>span:first-of-type{flex:1;font-size:18px}.home-category>summary small{font-size:11px;color:var(--muted)}.home-category[open]>.home-feature-grid{padding:0 16px 16px}.home-category[open]>summary .menu-chevron{transform:rotate(180deg)}.home-next-occasion{padding:25px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--surface-soft),var(--surface));margin:5px 0 25px;box-shadow:var(--shadow)}.home-next-occasion>.section-title{margin:0 0 8px}.home-next-occasion>.muted{font-size:12px}.home-next-occasion .occasion-grid{display:block}.home-next-occasion .occasion-card{background:transparent;border:0;box-shadow:none;padding:8px 0}.home-next-occasion .countdown{max-width:550px}.all-occasions{margin-top:12px;font-size:12px;border:1px solid var(--line);border-radius:12px}.back-to-top{position:fixed;inset-inline-end:24px;bottom:max(24px,env(safe-area-inset-bottom));width:47px;height:47px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--rose);box-shadow:0 6px 25px #0002;z-index:25;font-size:25px;line-height:1}.back-to-top:hover{background:var(--surface-soft)}@media(max-width:760px){.grouped-nav{display:none}.home-category>summary{padding:16px;gap:9px}.home-category>summary>span:first-of-type{font-size:16px}.home-category[open]>.home-feature-grid{padding:0 12px 12px}.home-next-occasion{padding:20px 17px;border-radius:20px;margin-top:0}.home-next-occasion .section-title h2{font-size:24px}.home-next-occasion .countdown{max-width:none}.back-to-top{inset-inline-end:16px;bottom:max(18px,env(safe-area-inset-bottom));width:44px;height:44px;border-radius:14px}}@media print{.grouped-nav,.back-to-top{display:none!important}}
.home-memory-grid{display:block;columns:3;column-gap:22px;padding-bottom:30px}.home-memory-grid>.social-card{display:inline-flex;width:100%;vertical-align:top;margin:0 0 22px;break-inside:avoid;overflow:hidden;height:auto;box-shadow:0 5px 22px color-mix(in srgb,var(--ink) 5%,transparent);transition:transform .25s,box-shadow .25s,border-color .25s}.home-memory-grid>.social-card>.card{flex:none;animation:none}.home-memory-grid .card-content>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden;line-height:1.95}.home-memory-grid .home-read-more{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;margin-top:16px;border-top:1px solid var(--line);border-radius:0;font-size:12px}.home-memory-grid .home-read-more span{transition:transform .2s}.home-memory-grid .home-read-more:hover span{transform:translateX(-5px)}.home-memory-grid .social-actions{padding:10px 15px}.home-memory-grid>.empty{column-span:all}.home-memory-grid .card>img,.home-memory-grid .image-button img{height:auto;max-height:none;object-fit:contain}.soft-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s,box-shadow .25s,border-color .25s}.soft-reveal[data-reveal-order="1"]{transition-delay:60ms}.soft-reveal[data-reveal-order="2"]{transition-delay:120ms}.soft-reveal.has-appeared{opacity:1;transform:translateY(0)}@media(hover:hover) and (prefers-reduced-motion:no-preference){.home-memory-grid>.social-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rose) 40%,var(--line));box-shadow:0 12px 30px color-mix(in srgb,var(--rose) 10%,transparent)}.home-feature-grid>button:hover>.ui-icon{transform:rotate(-6deg) scale(1.08)}.home-feature-grid>button>.ui-icon{transition:transform .25s}}@media(min-width:761px) and (max-width:1050px){.home-memory-grid{columns:2}}@media(max-width:760px){.home-memory-grid{columns:1;column-gap:0;padding-bottom:15px}.home-memory-grid>.social-card{margin-bottom:18px;border-radius:20px}.home-memory-grid .card-content{padding:22px 20px}.home-memory-grid .card-content>p{-webkit-line-clamp:5;line-clamp:5}.home-memory-grid .card h3{font-size:26px}.home-memory-grid .social-actions{padding:10px 16px}}@media(prefers-reduced-motion:reduce){.soft-reveal,.soft-reveal.has-appeared{opacity:1;transform:none}}
.keep-card> .image-button img{height:auto;object-fit:contain;display:block}.keep-card p{white-space:pre-wrap;overflow-wrap:anywhere}#keep-preview{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;margin:15px 0;border-radius:12px}.ocr-tools{border:1px solid var(--line);border-radius:15px;padding:18px;margin-block:15px}.ocr-tools p{font-size:12px;line-height:1.9}.plan-votes{border-top:1px solid var(--line);padding-top:15px}.plan-votes>.badge{display:block;margin:8px 0}.quiz-panel{max-width:720px;margin:auto}.quiz-panel>img{width:100%;max-height:440px;object-fit:contain;height:auto;border-radius:15px}.quiz-panel h2{font-size:28px;line-height:1.6}#quiz-result{color:var(--rose);font-size:16px;line-height:1.9}.month-header{text-align:center;padding:40px 20px}.month-header>span{font-size:10px;color:var(--muted);letter-spacing:3px}.month-header h2{font-size:35px;font-weight:400}.month-header h3{font-size:25px;font-weight:400}#month-report img{width:100%;height:auto;object-fit:contain}#month-report p{white-space:pre-wrap;overflow-wrap:anywhere}#search-results p{white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto}#search-count{font-size:14px;color:var(--muted)}@media print{body{background:white!important;color:#222!important}.shell{max-width:none;padding:0}.shell>header,.feature-nav,.mobile-pages,.identity-bar,footer,.music-bar,#toast,#content>.section-title,#month-picker{display:none!important}#month-report .notes-grid{display:block}#month-report .card{break-inside:avoid;background:white!important;color:#222!important;box-shadow:none;margin-bottom:20px;border-color:#ccc}#month-report .badge{color:#555!important}#month-report img{max-height:18cm}#month-report .month-header{break-after:avoid}.month-header{padding:20px 0}#keeps-content{padding:0}}