/* Visual prototype v3: rounded photo cards, circular controls and a floating dock. */
:root{--ink:#191918;--muted:#848480;--primary:#191918;--soft:#eae9e5;--line:#e6e5e1;--header-height:0px;background:#e9e5df;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body{background:radial-gradient(ellipse at 6% 10%,#e7dcd3 0,transparent 55%),radial-gradient(ellipse at 100% 90%,#e2e6e3 0,transparent 52%),#ede8e3}
.app-shell{max-width:480px;background:#f3f2ef;padding:10px 0 calc(114px + env(safe-area-inset-bottom));min-height:100dvh}
.app-header{position:relative;top:auto;border:0;background:#f3f2ef;padding-top:env(safe-area-inset-top)}
.people-strip{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 21px 5px}
.person-bubble{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;min-height:82px;padding:0;color:#858580;font-size:11px;line-height:1.5}
.bubble-portrait{display:grid;place-items:center;width:57px;height:57px;border-radius:50%;border:3px solid #f3f2ef;background-color:#fff;background-image:url('../assets/moments.png');background-size:300% auto;outline:1.5px solid transparent;outline-offset:1px}
.person-bubble.selected{color:#262624;font-weight:600}
.person-bubble.selected .bubble-portrait{outline-color:#5087ff}
.all-bubble .bubble-portrait{background-image:radial-gradient(circle at 75% 82%,#71d5f8 0,transparent 51%),linear-gradient(145deg,#5084ff,#348bff);color:#fff}
.all-bubble .bubble-portrait svg{width:25px;height:25px;fill:#ffffff33;stroke-width:1.6}
.more-bubble .bubble-portrait{background:#ffffffd9;font-size:22px;letter-spacing:2px;color:#292927}
.header-line{height:auto;min-height:85px;padding:9px 19px 13px;gap:10px;align-items:center}
.album-heading{flex:1;min-width:0}
.brand{display:flex;align-items:center;gap:8px;color:#858580;font-weight:500;font-size:12px;letter-spacing:0;min-height:22px;padding:0}
.brand span{font-size:10px;opacity:.8}
.album-select{font-size:25px;line-height:1.35;font-weight:600;letter-spacing:-1px;min-height:41px;gap:6px;max-width:100%;text-align:left}
.album-select #child-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-select .chevron{font-size:14px;font-weight:400;color:#9a9a94;letter-spacing:0}
.header-actions{gap:7px;margin:0}
.header-actions .icon-button{width:46px;height:46px;border-radius:50%;background:#fff;color:#1b1b1a}
.header-actions .add-button{background:#171716;color:#fff}
.header-actions svg{width:21px;height:21px;stroke-width:1.6}
.quick-filters{display:flex;align-items:center;gap:6px;padding:0 18px 13px;min-width:0}
.filter-round{position:relative;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#fff;flex-shrink:0}
.filter-round svg{width:19px;height:19px}
.filter-count{position:absolute;top:-3px;right:-1px;background:#ef6666;color:#fff;border:2px solid #f3f2ef;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:500}
.filter-pill{display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;padding:0 13px;min-height:43px;border-radius:24px;font-size:12px;white-space:nowrap;color:#696964}
.filter-pill.selected{background:#212120;color:#fff}
.filter-pill svg{width:14px;height:14px}
.date-pill{width:43px;padding:0;margin-left:auto;flex-shrink:0}
.date-pill svg{width:18px;height:18px}
.search-line{padding:0 19px 13px}
.search-line input{background:#fff;border-radius:24px;padding:13px 17px}
.search-line .text-button{color:#5c5c57}
.album-layout,.album-layout .overview{background:#f3f2ef}
.day-header{top:0;min-height:45px;border:0;background:#f3f2eff5;backdrop-filter:blur(16px);padding:0 17px;box-shadow:none}
.date-button{font-weight:600;font-size:15px;gap:6px;letter-spacing:-.3px}
.date-button small{font-size:11px;color:#96968f}
.day-actions{gap:2px}
.day-count{font-size:11px;color:#9b9b95;margin-right:4px}
.filter-button{min-width:38px;min-height:44px;color:#888880;border-radius:22px}
.filter-button.applied{background:#e5e4df;color:#272725;padding:0 9px}
.layout-button{min-width:48px;min-height:44px;color:#7d7d76;font-size:10px}
.layout-button svg{width:14px;height:14px}
.overview,.album-layout .overview{padding:3px 19px 9px;border:0}
.overview-toggle{gap:6px;min-height:31px;align-items:flex-start}
.overview-toggle>svg{width:13px;height:13px;margin-top:4px;color:#96968e}
.overview-toggle span{font-size:12px;color:#6f6f67;line-height:1.65;-webkit-line-clamp:2}
.overview-toggle small{font-size:10px;color:#6b6b64;padding-top:1px}
.overview-details{padding-left:20px}
.overview-details button{color:#55554f}
.overview-details button strong{color:#92928a}
.overview-label{color:#92928a}
.view-note,.album-layout .view-note{background:#f3f2ef;border:0;padding:5px 19px 8px;color:#8b8b83;font-size:11px}
.records.is-grid{grid-auto-rows:4px;gap:12px;padding:4px 15px 14px}
.records.is-grid .record-row{border-radius:24px;box-shadow:none;background:#fff;position:relative}
.records.is-grid .thumb{border-radius:23px 23px 17px 17px;aspect-ratio:var(--cover-ratio,1.08)}
.records.is-grid .record-copy{padding:10px 11px 9px}
.records.is-grid .record-copy h3{font-size:13px;line-height:1.45;letter-spacing:-.3px;font-weight:600;color:#20201e;-webkit-line-clamp:2}
.records.is-grid .record-summary{font-size:12px;line-height:1.6;color:#76766e;margin-top:5px;-webkit-line-clamp:2}
.records.is-grid .record-bottom{margin-top:7px;min-height:17px}
.records.is-grid .record-meta{font-size:10px;color:#92928b;gap:6px}
.records.is-grid .record-tag{font-size:10px;color:#a2a29b}
.records.is-grid .save-button{position:absolute;top:8px;right:8px;width:37px;height:37px;min-height:37px;z-index:2;margin:0;border-radius:50%;background:#ffffff35;border:1px solid #ffffff30;backdrop-filter:blur(10px);color:#fff;filter:drop-shadow(0 1px 2px #30291d20)}
.records.is-grid .save-button:before{inset:-3px}
.records.is-grid .save-button svg{width:21px;height:21px;stroke-width:1.7}
.records.is-grid .save-button.saved{background:#ffffffe6;color:#292925;border-color:#ffffffe6}
.records.is-grid .save-button.saved svg{fill:#292925}
.records.is-grid .cover-duration{left:8px;right:auto;bottom:8px;background:#33342e40;backdrop-filter:blur(8px);padding:3px 6px;border-radius:8px;font-size:10px;gap:3px}
.records.is-grid .seen-chip{left:8px;right:auto;top:9px;background:#ffffffe3;border-radius:9px;color:#6c6c64;font-size:9px;padding:3px 6px}
.records.is-grid .record-meta .person-name{font-size:10px;color:#64645d;gap:4px}
.records.is-grid .mini-avatar{width:17px;height:17px;background-image:url('../assets/moments.png');background-size:300% auto;border:1px solid #fff}
.records.is-grid .seen .record-copy h3{color:#606059}
.records.is-list{padding:0 18px}
.records.is-list .record-row{border-color:#e5e4df}
.records.is-list .thumb{border-radius:17px;width:70px;height:70px}
.records.is-list .record-copy h3{color:#282825}
.records.is-list .record-summary{color:#7a7a72}
.records.is-list .record-meta{color:#96968d}
.records.is-list .save-button{color:#8e8e84}
.records.is-list .save-button.saved{color:#242421}
.records.is-list .save-button.saved svg{fill:#242421}
.bottom-nav{bottom:calc(14px + env(safe-area-inset-bottom));width:calc(100% - 30px);max-width:440px;height:72px;border:1px solid #ffffffc7;border-radius:39px;padding:6px 10px;background:#ffffffb0;box-shadow:0 6px 32px #4e473517;backdrop-filter:blur(22px) saturate(1.2)}
.bottom-nav>button{gap:3px;font-size:9px;color:#90908a;min-height:56px}
.bottom-nav [data-icon]{width:35px;height:35px;display:grid;place-items:center;border-radius:50%}
.bottom-nav svg{width:22px;height:22px;stroke-width:1.5}
.bottom-nav>button.active{color:#262622;font-weight:500}
.bottom-nav>button.active [data-icon]{background:#171716;color:#fff;width:38px;height:38px}
.bottom-nav .upload-nav [data-icon]{background:transparent;color:#282825;width:35px;height:35px;border-radius:50%}
.bottom-nav .upload-nav svg{width:25px;height:25px;stroke-width:1.4}
.feed-end{padding:14px 16px 0;font-size:10px;color:#a1a198}
.sheet{border-radius:30px 30px 0 0;padding-inline:22px;background:#faf9f6}
.sheet-handle{background:#ddddd5;width:34px;margin-top:8px}
.sheet-head{margin:4px 0 10px;gap:8px}
.sheet-head h2{font-size:19px;font-weight:600;color:#262623}
.sheet-head .icon-button{border-radius:50%;background:#fff}
.sheet-description,.help-note{color:#85857c}
.primary-button,.secondary-button{border-radius:25px;min-height:48px}
.primary-button{background:#1f1f1c;color:#fff}
.secondary-button{background:#eae9e2;color:#66665e}
.filter-chips button{border-radius:24px;border-color:#e7e6dd;background:#fff}
.filter-chips button[aria-pressed=true]{border-color:#252522;background:#252522;color:#fff}
.favorite-filter input{accent-color:#282824}
.child-choice{border-color:#e7e6dd}
.child-avatar{background:#eae9e2;color:#727267}
.child-choice .check{color:#292925}
.child-choice small{color:#909087}
.calendar-cell.selected{background:#252522;color:#fff}
.calendar-cell.selected small{color:#d8d8cc}
.calendar-cell.today:before{background:#4d87ff}
.calendar-cell{border-radius:18px;color:#45453d}
.calendar-note,.calendar-cell small,.section-label{color:#95958b}
.calendar-nav strong{font-size:16px}
.recent-days button{border-radius:20px;background:#eae9e2;color:#6d6d62}
.upload-example{border-radius:20px;background:#eae9e2;color:#64645c}
.upload-example svg{color:#6d6d62}
.detail-backdrop{background:#e8e5df}
.detail{background:#faf9f6}
.detail-header{background:#faf9f6;border:0;min-height:76px;gap:9px;padding-inline:14px}
.detail-header>.icon-button{background:#fff;border-radius:50%;width:42px;height:42px;flex-shrink:0}
.detail-header strong{color:#282825}
.detail-header small{color:#939389}
.detail-save{color:#69695f}
.detail-save.saved{color:#292925}
.detail-save.saved svg{fill:#292925}
.detail-picture{height:290px;margin:0 14px;border-radius:29px}
.detail-picture .frame-caption{border-radius:15px;background:#292b2450;backdrop-filter:blur(10px);font-size:10px;padding:6px 10px}
.detail-content{padding:23px 23px 16px}
.detail-content h1{font-size:23px;line-height:1.4;letter-spacing:-.6px;font-weight:600;color:#282825}
.detail-content p{color:#7e7e72;font-size:14px;line-height:1.85}
.detail-tags{margin:13px 0 23px}
.detail-tags span{background:#ecebe4;color:#878779;border-radius:16px;padding:5px 10px}
.detail-content h3{color:#57574e}
.event-button{border-color:#e7e6dd;color:#69695e;gap:12px}
.event-button span{border-radius:18px;background:#ebeae2;color:#777767}
.event-button svg{color:#9a9a8c}
.event-button.active{color:#282824}
.detail-location{background:#eeede7;color:#929284;border-radius:18px}
.detail-nav{bottom:calc(14px + env(safe-area-inset-bottom));width:calc(100% - 30px);max-width:440px;gap:7px;background:#ffffffbb;backdrop-filter:blur(20px);border:1px solid #ffffffc7;border-radius:36px;padding:7px;box-shadow:0 6px 30px #4e473514}
.detail-nav button{border-radius:28px;background:#edede6;color:#737367;font-size:13px;min-height:48px}
.detail-nav button:last-child{background:#21211e;color:#fff}
.toast{background:#282823ee;border-radius:22px;bottom:108px}
@media(max-width:360px){.people-strip{padding-inline:17px;gap:7px}.bubble-portrait{width:50px;height:50px}.person-bubble{min-height:77px}.header-line{padding-inline:16px}.album-select{font-size:23px}.header-actions .icon-button{width:42px;height:42px}.quick-filters{padding-inline:15px;gap:5px}.filter-pill{padding-inline:11px;font-size:11px}.filter-round,.date-pill{width:39px;min-height:41px}.records.is-grid{gap:10px;padding-left:12px;padding-right:12px}.records.is-grid .record-copy{padding:9px 10px}.records.is-grid .record-copy h3{font-size:12px}.records.is-grid .record-summary{font-size:11px}.records.is-grid .record-tag{display:none}.day-header{padding-inline:14px}.overview,.album-layout .overview{padding-inline:16px}}
@media(min-width:600px){.app-shell{margin:24px auto;border-radius:38px 38px 0 0;box-shadow:0 18px 85px #58433312;padding-top:14px}.detail{border-radius:34px}.detail-nav{border-radius:36px;bottom:29px}}