:root{--page-gutter:clamp(18px,3.5vw,80px);font-family:Inter,"Microsoft YaHei",Arial,sans-serif;color:#302e2a;background:#f6f3ec;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ad7966;outline-offset:3px}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.site-header,.site-footer,.page{width:100%;margin-inline:0}
.site-header{height:92px;display:flex;align-items:center;gap:30px;padding-inline:var(--page-gutter);border-bottom:1px solid #d9d1c5}
.brand{border:0;background:none;display:flex;align-items:center;gap:11px;color:#332d29;font-family:Georgia,"Noto Serif SC",serif;font-size:23px;text-align:left;white-space:nowrap;padding:0}
.brand-mark{font-size:30px;color:#a66f5d}
.brand small{display:block;font-family:Arial,sans-serif;font-size:9px;letter-spacing:2.2px;margin-top:4px;color:#8c7a6b}
.main-nav{display:flex;align-items:center;gap:7px;margin:auto}
.main-nav button{border:0;background:transparent;color:#6e675d;padding:11px 14px;border-radius:999px;font-size:13px;white-space:nowrap}
.main-nav button.active,.main-nav button:hover{background:#e7dfd2;color:#413930}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn,.user-button{height:38px;min-width:38px;border:1px solid #d7cec0;border-radius:50%;background:#fbf9f4;color:#5b534b}
.icon-btn{font-size:24px;line-height:1}
.user-button{font-size:13px;font-weight:600}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border-radius:8px;border:1px solid #cbbfac;background:#fffdf8;color:#55473d;text-decoration:none;font-size:13px;font-weight:600}
.button:hover{background:#f1eadf}
.button-primary{background:#935d4b;border-color:#935d4b;color:#fff}
.button-primary:hover{background:#7f4f3f}
.button-subtle{border-color:transparent;background:#ebe4d8}
.button-danger{border-color:#d8b9ae;color:#9b4f3a;background:#fff9f5}
.button-small{min-height:34px;padding:7px 11px;font-size:12px}
.link-button{border:0;background:none;padding:0;color:#8d5d4b;text-decoration:underline;text-underline-offset:4px;font-size:13px}
#app{flex:1}
.page{padding:38px var(--page-gutter) 78px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:29px}
.eyebrow{font-size:10px;letter-spacing:2.7px;color:#a2765d;font-weight:700;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1,h2,.serif{font-family:Georgia,"Noto Serif SC","SimSun",serif;font-weight:400}
h1{font-size:clamp(29px,4vw,49px);line-height:1.3;letter-spacing:.4px;margin:8px 0 0}
h2{font-size:25px;margin:0}
h3{font-size:18px;margin:0}
.muted{color:#837b72}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px}
.section-title h2{font-size:24px}
.hero{display:grid;grid-template-columns:1.18fr .82fr;min-height:335px;background:#eae2d5;border-radius:16px;overflow:hidden}
.hero-copy{padding:58px 54px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero-copy h1{max-width:530px;margin:19px 0}
.hero-copy p{color:#665e54;font-size:14px;line-height:1.8;margin-bottom:26px}
.hero-art{position:relative;overflow:hidden;background:linear-gradient(165deg,#c3b4a0 0%,#e4c8a8 48%,#8d8c79 49%,#53685c 100%)}
.hero-art:before{content:"";position:absolute;width:125px;height:125px;border-radius:50%;background:#f3dfb8;top:58px;right:28%;box-shadow:0 0 60px #f3dfb8aa}
.hero-art:after{content:"";position:absolute;width:130%;height:110px;left:-15%;bottom:-18px;border-radius:50% 50% 0 0;background:#425a50}
.hero-art span{position:absolute;z-index:1;bottom:18px;left:22px;color:#fbf4e8;font-family:Georgia,serif;font-size:12px;letter-spacing:2px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 43px}
.stat{border:1px solid #ded7cb;border-radius:12px;padding:20px 22px;background:#fbf9f4}
.stat strong{display:block;font:30px Georgia,serif;color:#8e5d4b;margin-bottom:5px}
.stat span{font-size:12px;color:#756e64}
.home-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:42px}
.memory-list{display:grid;gap:12px}
.memory-card{display:grid;grid-template-columns:130px 1fr auto;gap:17px;align-items:center;width:100%;text-align:left;border:1px solid #e1d9cf;background:#fffdf8;padding:12px;border-radius:12px;color:#3c3530}
.memory-card:hover,.album-card:hover,.photo-tile:hover{border-color:#b99d89;transform:translateY(-1px)}
.memory-cover{height:88px;border-radius:7px;background:linear-gradient(145deg,#d4c5ae,#958d76 55%,#52685d 56%);overflow:hidden}
.memory-cover img{width:100%;height:100%;object-fit:cover}
.memory-card .meta{font-size:11px;color:#a07059;letter-spacing:1px}
.memory-card strong{display:block;font:19px Georgia,"Noto Serif SC",serif;margin:7px 0}
.memory-card p{font-size:12px;color:#797168;margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.memory-card .arrow{font-size:20px;color:#a37761;padding:0 9px}
.mini-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mini-photo-grid button{border:0;padding:0;border-radius:7px;overflow:hidden;background:#e6ded0;aspect-ratio:1}
.mini-photo-grid img{width:100%;height:100%;object-fit:cover}
.todo-preview{margin-top:31px}
.todo-preview li{padding:11px 0;border-bottom:1px solid #ddd4c7;color:#5c554d;font-size:13px;list-style:none}
.todo-preview ul{padding:0;margin:5px 0}
.empty{border:1px dashed #cdbfae;border-radius:12px;padding:34px 28px;color:#776e63;background:#fbf9f4;text-align:center;font-size:13px;line-height:1.8}
.empty strong{display:block;font:21px Georgia,"Noto Serif SC",serif;color:#4a4038;margin-bottom:7px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #d8ccbd;background:#fcfaf5;border-radius:999px;color:#756b60;padding:9px 17px;font-size:12px}
.chip.active,.chip:hover{background:#8c5b49;border-color:#8c5b49;color:#fff}
.timeline-layout{display:grid;grid-template-columns:170px 1fr;gap:35px}
.year-rail{border-right:1px solid #d6cbbd;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:16px}
.year-rail button{border:0;background:transparent;color:#8b8072;padding:10px 8px;font:20px Georgia,serif}
.year-rail button.active{color:#8c5b49;font-weight:600}
.timeline-items{position:relative;padding-left:27px;border-left:1px solid #d4c6b5}
.timeline-item{position:relative;margin-bottom:22px}
.timeline-item:before{content:"";position:absolute;left:-33px;top:22px;width:11px;height:11px;border-radius:50%;background:#a87860;border:3px solid #f6f3ec}
.timeline-item .memory-card{grid-template-columns:140px 1fr auto;padding:13px}
.timeline-item .memory-cover{height:106px}
.detail-back{margin-bottom:23px}
.detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.detail-title h1{font-size:43px}
.detail-intro{font:17px/1.9 Georgia,"Noto Serif SC",serif;max-width:760px;margin:22px 0 36px;color:#5a514a;white-space:pre-wrap}
.detail-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.tag{display:inline-flex;align-items:center;padding:5px 9px;background:#e9e1d6;color:#816451;border-radius:999px;font-size:11px}
.memory-story{margin:35px 0 45px;padding:30px;border:1px solid #ddd2c3;border-radius:12px;background:#fffdf8}
.memory-story p{line-height:2;font-size:15px;white-space:pre-wrap;color:#574d45;margin:18px 0 0}
.detail-delete{margin-top:45px}
.detail-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.photo-tile{position:relative;border:1px solid transparent;background:#e7dfd4;padding:0;border-radius:9px;overflow:hidden;aspect-ratio:1}
.photo-tile img{width:100%;height:100%;object-fit:cover}
.photo-tile span{position:absolute;bottom:0;left:0;right:0;padding:15px 8px 7px;background:linear-gradient(transparent,#0008);color:#fff;font-size:11px;text-align:left}
.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 33px}
.album-card{border:1px solid #dfd4c7;background:#fffdf8;border-radius:11px;overflow:hidden;text-align:left;padding:0;color:#3b332e}
.album-cover{height:140px;background:linear-gradient(145deg,#d8cab9,#897d73 58%,#52655a 59%)}
.album-cover img{width:100%;height:100%;object-fit:cover}
.album-card div:last-child{padding:13px}
.album-card strong{display:block;font-size:14px;margin-bottom:5px}
.album-card small{font-size:11px;color:#8c8176}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.dropzone{border:1px dashed #bcae9e;background:#f1ebe0;border-radius:12px;padding:21px;text-align:center;color:#76685c;font-size:12px;margin:17px 0}
.dropzone.dragover{background:#e7d8c4;border-color:#8d5b49}
.upload-progress{color:#8d5b49;font-size:12px;margin:8px 0}
.load-more{text-align:center;margin-top:25px}
.todo-form{display:flex;gap:10px;margin:24px 0}
.todo-form input{flex:1}
.field,input[type="text"],input[type="password"],input[type="search"],textarea,select{width:100%;padding:11px 12px;border:1px solid #d2c7b9;border-radius:8px;background:#fffefb;color:#3c342e;font-size:14px}
textarea{min-height:105px;resize:vertical;line-height:1.7}
label.field-label{display:grid;gap:7px;font-size:12px;font-weight:600;color:#655b51}
label.field-label small{font-size:12px;font-weight:400;color:#8c8176}
input[type="file"]{width:100%;padding:12px;border:1px dashed #bcae9e;border-radius:8px;background:#f1ebe0;color:#655b51;font-size:12px}
input[type="file"]::file-selector-button{margin-right:12px;padding:8px 12px;border:1px solid #bcae9e;border-radius:6px;background:#fffdf8;color:#655b51;cursor:pointer}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.form-stack{display:grid;gap:15px}
.checkbox-label{display:flex;gap:9px;align-items:center;font-size:13px}
.checkbox-label input{width:auto}
.memory-attached-photos{min-width:0;margin:0;padding:15px;border:1px solid #d2c7b9;border-radius:9px}
.memory-attached-photos legend{padding:0 5px;font-size:12px;font-weight:700}
.memory-attached-photos p{margin:0 0 13px;color:#8c8176;font-size:12px;line-height:1.6}
.memory-attached-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.memory-attached-photo{display:grid;gap:7px;min-width:0;padding:6px;border:1px solid #d2c7b9;border-radius:8px;background:#fffdf8;cursor:pointer;font-size:11px}
.memory-attached-photo img{width:100%;height:85px;object-fit:cover;border-radius:4px}
.memory-attached-photo span{display:flex;align-items:center;gap:5px}
.memory-attached-photo input{width:16px;height:16px;margin:0;accent-color:#8f604f}
.memory-attached-photo:has(input:checked){border-color:#a65d50;background:#fff0e9}
.todo-list{display:grid;gap:10px}
.section-spaced{margin-top:38px}
.todo-item{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid #dfd5c8;border-radius:10px;background:#fffdf8}
.todo-item>input{width:18px;height:18px;accent-color:#8f604f}
.todo-item .todo-text{flex:1;min-width:0}
.todo-item strong{display:block;font-size:14px;font-weight:500}
.todo-item.done strong{text-decoration:line-through;color:#91877c}
.todo-item small{color:#93897e}
.todo-item-actions{display:flex;gap:8px;flex-wrap:wrap}
.search-box{display:flex;gap:10px;max-width:700px;margin:25px 0 35px}
.search-results section{margin-top:30px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.settings-card{border:1px solid #ded4c7;background:#fffdf8;padding:23px;border-radius:12px}
.settings-card p{font-size:13px;line-height:1.8;color:#756b60}
.trash-section{margin-top:18px}
.trash-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e4dbcf;padding:11px 0;font-size:13px}
.auth-wrap{width:100%;min-height:100svh;margin:0;display:grid;grid-template-columns:1fr 1fr;background:#fffdf8;border:0;overflow:hidden}
.auth-aside{padding:55px;background:#e6dbcb;display:flex;flex-direction:column;justify-content:space-between}
.auth-aside .brandline{font:29px Georgia,"Noto Serif SC",serif}
.auth-aside h1{font-size:33px;line-height:1.5}
.auth-aside p{font-size:13px;line-height:1.9;color:#716153}
.auth-form{padding:clamp(32px,5vw,110px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.auth-form>*{width:min(100%,520px)}
.auth-form h2{font-size:27px;margin-bottom:11px}
.auth-form p{font-size:13px;color:#83786b;line-height:1.7;margin-bottom:27px}
.auth-form form{display:grid;gap:16px}
.auth-form .button{width:100%;margin-top:4px}
dialog{width:min(620px,calc(100% - 28px));max-height:calc(100vh - 32px);border:1px solid #d5c9ba;border-radius:13px;padding:0;background:#fffdf8;color:#3b332d;box-shadow:0 24px 90px #382b2240}
dialog::backdrop{background:#231c19aa}
.modal-inner{padding:27px;overflow:auto;max-height:calc(100vh - 32px)}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:23px}
.modal-head h2{font-size:25px}
.modal-close{border:0;background:#efe9df;color:#66584b;width:31px;height:31px;border-radius:50%;font-size:19px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}
.modal-photo{max-height:53vh;width:100%;object-fit:contain;background:#eee6da;border-radius:7px}
.photo-form{margin-top:18px}
.choice-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:140px;overflow:auto;border:1px solid #e2d8cb;border-radius:8px;padding:9px}
.choice-list label{font-size:12px;display:flex;gap:6px;align-items:center}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#403831;color:#fff;border-radius:8px;padding:10px 15px;box-shadow:0 8px 30px #0002;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.toast.show{opacity:1}
.site-footer{display:flex;justify-content:space-between;padding:25px var(--page-gutter);border-top:1px solid #d9d1c5;color:#988b7d;font:11px Georgia,serif;letter-spacing:1px}
@media(max-width:900px){.site-header{gap:15px}.main-nav{gap:0}.main-nav button{padding:9px}.header-add{font-size:0;width:38px;min-width:38px;padding:0}.header-add::first-letter{font-size:17px}.home-grid{gap:22px}.album-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.site-header,.site-footer,.page{width:100%}.site-header{height:auto;min-height:80px;flex-wrap:wrap;padding:13px var(--page-gutter)}.brand{font-size:20px}.brand small{font-size:8px}.main-nav{order:3;width:100%;justify-content:space-between;overflow:auto}.main-nav button{font-size:12px;padding:9px 5px}.header-actions{margin-left:auto}.page{padding:27px var(--page-gutter) 50px}.hero{grid-template-columns:1fr}.hero-copy{padding:35px 28px}.hero-art{height:140px}.hero-art:before{width:85px;height:85px;top:20px}.stat-row{gap:8px}.stat{padding:14px}.stat strong{font-size:24px}.home-grid{grid-template-columns:1fr}.page-head{align-items:flex-start}.page-head .button{white-space:nowrap}.timeline-layout{grid-template-columns:1fr;gap:16px}.year-rail{border:0;flex-direction:row;overflow:auto;padding:0}.year-rail button{font-size:16px}.timeline-items{margin-left:7px}.detail-title h1{font-size:32px}.perspective-grid{grid-template-columns:1fr}.detail-photos,.gallery-grid{grid-template-columns:repeat(3,1fr)}.album-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}.auth-wrap{grid-template-columns:1fr;margin:0}.auth-aside{padding:25px;min-height:170px}.auth-aside h1{font-size:25px;margin:8px 0}.auth-form{padding:30px 25px}.site-footer{font-size:9px}}
@media(max-width:470px){.page-head{display:block}.page-head .button{margin-top:16px}.memory-card,.timeline-item .memory-card{grid-template-columns:78px 1fr auto;gap:9px;padding:8px}.memory-cover,.timeline-item .memory-cover{height:82px}.memory-card strong{font-size:15px}.memory-card p{display:none}.memory-card .arrow{padding:0;font-size:15px}.detail-photos,.gallery-grid{grid-template-columns:repeat(2,1fr)}.album-grid{gap:8px}.album-cover{height:110px}.todo-item{align-items:flex-start}.todo-item-actions{flex-direction:column}.form-grid{grid-template-columns:1fr}.choice-list{grid-template-columns:1fr}.modal-inner{padding:18px}}
