:root {
  --bg: #f4f1ee;
  --surface: #fcfbf9;
  --surface-2: #efebe7;
  --ink: #252120;
  --muted: #89817c;
  --line: rgba(61, 47, 41, 0.10);
  --accent: #c96f69;
  --accent-dark: #a94f4b;
  --accent-soft: #f0d5d1;
  --sage: #6f7e74;
  --shadow: 0 18px 50px rgba(75, 58, 49, 0.09);
  --serif: "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, input, textarea { outline: none; }
button > svg { display: block; flex: none; }
img { display: block; max-width: 100%; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.grain { position: fixed; inset: 0; opacity: .026; pointer-events: none; z-index: 99; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.glass { background: rgba(250, 248, 246, .74); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 248px; display: flex; flex-direction: column; padding: 30px 22px 22px; border-right: 1px solid rgba(255,255,255,.65); box-shadow: 10px 0 35px rgba(59,49,44,.035); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; border: 0; background: transparent; text-align: left; }
.brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 14px; background: var(--ink); color: white; box-shadow: 0 8px 18px rgba(50,41,38,.18); font: 600 12px/1 var(--serif); }
.brand-mark i { width: 3px; height: 3px; background: var(--accent-soft); border-radius: 50%; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font:700 18px/1.2 var(--serif); letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 15px; background: transparent; color: #77706c; transition: background .2s ease, color .2s ease, transform .15s ease; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.nav-item:active { transform: scale(.98); }
.nav-item.active { background: var(--ink); color: white; box-shadow: 0 9px 22px rgba(57,47,43,.14); }
.nav-item.active svg { color: #f2c1bd; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: white; font-size: 11px; }
.nav-badge[hidden] { display: none; }
.storage-card { margin-top: auto; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.35); }
.storage-heading { display: flex; justify-content: space-between; font-size: 12px; }
.storage-heading strong { color: var(--accent-dark); }
.storage-track { height: 5px; margin: 12px 0 7px; overflow: hidden; border-radius: 5px; background: #dfdad6; }
.storage-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #dca09a); transition: width .3s ease; }
.storage-card p { margin: 0; color: var(--muted); font-size: 11px; }
.storage-card button { width: 100%; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; padding: 8px; border: 0; border-radius: 10px; background: rgba(255,255,255,.65); font-size: 11px; line-height: 1.2; text-align: center; }
.storage-card button span { margin-left: 5px; color: var(--accent); }
.couple-chip { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 8px 2px; }
.avatar-stack { display: flex; flex: 0 0 48px; width: 48px; }
.avatar-stack.is-single { flex-basis: 30px; width: 30px; }
.avatar-stack img { width: 30px; height: 30px; object-fit: cover; border: 2px solid var(--surface); border-radius: 50%; }
.avatar-stack img + img { margin-left: -10px; }
.couple-chip-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.couple-chip strong { overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.couple-chip small { min-width: 0; display: grid; gap: 1px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.couple-chip small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.couple-chip > .icon-btn { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; }
.main { min-width: 0; flex: 1; margin-left: 248px; }
.topbar { position: sticky; top: 0; z-index: 30; height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(28px, 4vw, 66px); background: linear-gradient(to bottom, rgba(244,241,238,.97) 58%, rgba(244,241,238,.72) 78%, transparent); backdrop-filter: blur(12px); }
.mobile-brand { display: none; }
.search-wrap { width: min(430px, 43vw); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.55); transition: box-shadow .2s ease, background .2s ease; }
.search-wrap:focus-within { background: var(--surface); box-shadow: 0 0 0 3px rgba(201,111,105,.12); }
.search-wrap svg { width: 18px; color: var(--muted); }
.search-wrap input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-wrap input::placeholder { color: #aaa29d; }
.search-wrap kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.6); font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.mobile-account-button { display:none; }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.6); line-height: 1; text-align: center; transition: transform .15s ease, background .2s ease; }
.icon-btn:hover { background: white; }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.subtle { border: 0; background: transparent; }
.notification-btn i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1.5px solid var(--surface); border-radius: 50%; background: var(--accent); }
.primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 13px; line-height: 1.2; text-align: center; transition: transform .15s ease, box-shadow .2s ease; }
.primary-button { background: var(--ink); color: white; box-shadow: 0 8px 20px rgba(46,38,35,.15); font-size: 12px; }
.primary-button:hover { box-shadow: 0 11px 26px rgba(46,38,35,.22); transform: translateY(-1px); }
.primary-button:active, .secondary-button:active { transform: scale(.97); }
.primary-button .plus { width: 1.1em; height: 1.1em; display: inline-grid; place-items: center; color: #f2c0bc; font-size: 20px; font-weight: 300; line-height: 1; }
.secondary-button { background: var(--surface); color: var(--ink); font-size: 11px; }
.ghost-button { border: 1px solid var(--line); background: transparent; }
.views { min-height: calc(100vh - 82px); }
.view { display: none; opacity: 0; }
.view.active { display: block; animation: viewEnter .36s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes viewEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-pad { padding-left: clamp(28px, 4vw, 66px); padding-right: clamp(28px, 4vw, 66px); }
.greeting-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 30px; }
.eyebrow { margin: 0 0 7px; color: var(--accent-dark); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.greeting-row h1, .page-heading h1, .map-heading h1 { margin: 0; font: 600 clamp(30px, 3.5vw, 44px)/1.14 var(--serif); letter-spacing: -.035em; }
.greeting-row h1 span { color: var(--accent-dark); }
.intro { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.weather-chip { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.4); }
.weather-icon { font-size: 22px; color: #d69a4b; }
.weather-chip > span:last-child { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 7px; }
.weather-chip strong { font: 600 20px/1 var(--serif); }
.weather-chip small { color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(290px, .76fr); gap: 19px; }
.card { overflow: hidden; border: 1px solid rgba(255,255,255,.56); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.anniversary-hero { position: relative; min-height: 393px; color: white; }
.hero-photo, .anni-photo { position: absolute; inset: 0; background: url("../images/memories/huangshan.jpg") center 58%/cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.anniversary-hero.is-empty .hero-photo,
.anniversary-feature.is-empty .anni-photo { background: radial-gradient(circle at 72% 28%, rgba(213,175,153,.55), transparent 29%), linear-gradient(135deg, #5b514b, #867268 54%, #aba094); }
.anniversary-hero:hover .hero-photo { transform: scale(1.025); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,20,19,.82) 0%, rgba(34,27,25,.25) 58%, rgba(22,19,18,.1) 100%), linear-gradient(to top, rgba(17,15,14,.62), transparent 60%); }
.hero-topline { position: absolute; inset: 24px 24px auto; display: flex; align-items: center; justify-content: space-between; }
.soft-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); color: white; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-align: center; }
.round-glass { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.12); color: white; font-size: 16px; }
.hero-copy { position: absolute; inset: auto 30px 27px; }
.hero-copy > p { margin: 0 0 2px; color: rgba(255,255,255,.65); font-size: 12px; }
.hero-copy h2 { margin: 0; font:600 clamp(24px,3vw,35px)/1.2 var(--serif); letter-spacing: -.03em; }
.countdown { display: flex; align-items: center; gap: 13px; margin: 20px 0 18px; }
.countdown div { display: flex; align-items: baseline; gap: 5px; }
.countdown strong { font: 600 32px/1 var(--serif); font-variant-numeric: tabular-nums; }
.countdown span { color: rgba(255,255,255,.62); font-size: 11px; }
.countdown i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.44); }
.hero-date { display: flex; gap: 24px; color: rgba(255,255,255,.63); font-size: 11px; }
.hero-date span:first-child { color: white; }
.memory-today { padding: 24px; }
.card-heading, .section-heading, .page-heading, .asset-toolbar, .asset-date-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.card-heading h3, .memory-today h3 { margin: 0; font: 600 20px/1.2 var(--serif); }
.year-pill { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; line-height: 1; text-align: center; }
.memory-photo { position: relative; width: 100%; height: 202px; margin: 19px 0 14px; overflow: hidden; padding: 0; border: 0; border-radius: 17px; background: #ddd; }
.memory-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.memory-today.is-empty .memory-photo { cursor: default; background: radial-gradient(circle at 32% 36%, rgba(255,255,255,.72), transparent 24%), linear-gradient(135deg, #eee7df, #d8c9bf); }
.memory-today.is-empty .memory-photo img { display: none; }
.memory-photo:hover img { transform: scale(1.04); }
.photo-location { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 9px; background: rgba(24,20,18,.52); backdrop-filter: blur(10px); color: white; font-size: 11px; }
.memory-caption { min-height: 38px; margin: 0; font: 600 13px/1.7 var(--serif); }
.memory-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 11px; }
.memory-meta button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--accent-dark); font-size: 11px; line-height: 1.2; text-align: center; }
.recent-section { padding-top: 42px; }
.section-heading h2 { margin: 0; font: 600 24px/1.2 var(--serif); letter-spacing: -.025em; }
.text-button span { margin-left: 4px; }
.memory-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.memory-tile { position: relative; min-height: 222px; overflow: hidden; padding: 0; border: 0; border-radius: 18px; background: #d7d0ca; text-align: left; color: white; }
.memory-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.memory-tile:hover img { transform: scale(1.045); }
.media-preview-placeholder { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; background: radial-gradient(circle at 50% 36%, rgba(230,190,177,.78), rgba(74,58,53,.96)); color: white; text-align: center; }
.media-preview-placeholder > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(22,18,17,.3); font-size: 17px; backdrop-filter: blur(8px); }
.media-preview-placeholder > small { color: rgba(255,255,255,.78); font-size: 11px; }
.memory-tile::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(to top, rgba(22,19,18,.72), transparent); }
.tile-copy { position: absolute; z-index: 2; inset: auto 15px 14px; }
.tile-copy strong { display: block; margin-bottom: 4px; font: 600 13px/1.4 var(--serif); }
.tile-copy span { color: rgba(255,255,255,.7); font-size: 11px; }
.video-badge, .favorite-badge { position: absolute; z-index: 2; top: 11px; right: 11px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(24,20,18,.45); backdrop-filter: blur(8px); color: white; font-size: 11px; }
.journey-banner { padding-top: 40px; padding-bottom: 52px; }
.journey-inner { display: flex; align-items: center; gap: 18px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(110deg, rgba(225,216,207,.68), rgba(237,231,225,.85)); }
.journey-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 16px; background: var(--sage); color: white; }
.journey-inner h3 { margin: 0 0 3px; font:600 15px/1.4 var(--serif); }
.journey-inner p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }
.journey-stats { display: flex; align-items: center; gap: clamp(13px, 2vw, 27px); margin-left: auto; }
.journey-stats span { display: flex; flex-direction: column; gap: 2px; }
.journey-stats strong { font:600 17px/1.2 var(--serif); }
.journey-stats small { color: var(--muted); font-size: 11px; }
.journey-stats i { width: 1px; height: 24px; background: var(--line); }
.journey-inner .secondary-button { margin-left: 12px; white-space: nowrap; }

/* Shared inner pages */
.page-heading { padding-top: 24px; padding-bottom: 31px; }
.page-heading > div:first-child > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.anniversary-layout { display: grid; grid-template-columns: 1.25fr .85fr; gap: 19px; }
.anniversary-feature { position: relative; min-height: 376px; color: white; }
.anniversary-feature .anni-photo { background-image: url("../images/memories/shanghai.jpg"); }
.anni-content { position: absolute; inset: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.anni-content h2 { margin: 14px 0 3px; font: 600 30px/1.2 var(--serif); }
.anni-content p { margin: 0; color: rgba(255,255,255,.66); font-size: 11px; }
.anni-content > strong { margin: 25px 0 8px; font: 600 52px/1 var(--serif); }
.anni-content > strong small { font: 700 11px/1 var(--sans); letter-spacing: .14em; }
.progress-line { width: min(410px, 80%); height: 3px; margin: 8px 0; border-radius: 3px; background: rgba(255,255,255,.26); }
.progress-line i { display: block; width: 83%; height: 100%; background: white; }
.anni-content > span:last-child { color: rgba(255,255,255,.62); font-size: 11px; }
.calendar-card { padding: 24px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; }
.calendar-head h3 { margin: 0; font:600 17px/1.2 var(--serif); }
.calendar-grid, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.calendar-grid { margin-top: 21px; color: var(--muted); font-size: 11px; }
.calendar-days { margin-top: 10px; }
.calendar-days > button, .calendar-days > span { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; font-size: 11px; }
.calendar-days > span { color: #bbb3ae; }
.calendar-days button:hover { background: var(--surface-2); }
.calendar-days button.is-selected { background: var(--surface-2); box-shadow: inset 0 0 0 2px rgba(37,33,32,.28), 0 5px 13px rgba(54,42,37,.12); transform: translateY(-1px); }
.calendar-days button.is-today { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-dark); font-weight: 700; }
.calendar-days button.has-event { position: relative; background: var(--accent-soft); color: var(--accent-dark); }
.calendar-days button.has-event.is-today { background: var(--accent); color: white; box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 5px 12px rgba(201,111,105,.22); }
.calendar-days button.has-event.is-selected { z-index: 1; box-shadow: none; transform: translateY(-1px) scale(1.03); }
.calendar-days button.has-event.is-selected::before { content: ""; position: absolute; z-index: 0; inset: -8px; pointer-events: none; background: var(--accent-dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 58'%3E%3Cpath d='M32 52C27 47 8 35 8 20C8 9 21 5 32 16C43 5 56 9 56 20C56 35 37 47 32 52Z' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 58'%3E%3Cpath d='M32 52C27 47 8 35 8 20C8 9 21 5 32 16C43 5 56 9 56 20C56 35 37 47 32 52Z' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.calendar-day-number { position: relative; z-index: 1; }
.calendar-event-badges { position: absolute; z-index: 2; top: -9px; right: -6px; display: flex; flex-direction: row-reverse; }
.calendar-event-badges i { min-width: 19px; max-width: 38px; height: 19px; display: grid; place-items: center; overflow: hidden; padding: 0 3px; border: 2px solid var(--surface); border-radius: 10px; background: var(--ink); color: white; font: 600 10px/1 var(--sans); font-style: normal; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 8px rgba(37,33,32,.18); }
.calendar-event-badges i + i { margin-right: -6px; }
.calendar-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px; border-radius: 13px; background: var(--surface-2); }
.calendar-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.calendar-note i.muted { background: #bbb3ae; }
.calendar-note > span { display: flex; flex: 1; flex-direction: column; }
.calendar-note strong { font-size: 11px; }
.calendar-note small { color: var(--muted); font-size: 11px; }
.mid-heading { margin-top: 42px; margin-bottom: 18px; }
.filter-pills { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.34); }
.filter-pills button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1.2; text-align: center; }
.filter-pills button.active { background: var(--surface); color: var(--ink); box-shadow: 0 4px 12px rgba(57,45,41,.08); }
.event-list { display: grid; gap: 10px; padding-bottom: 54px; }
.event-item { display: grid; grid-template-columns: 65px 1fr auto; align-items: center; gap: 17px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.43); }
.event-date { display: flex; flex-direction: column; align-items: center; padding-right: 15px; border-right: 1px solid var(--line); }
.event-date strong { font: 600 22px/1 var(--serif); }
.event-date span { color: var(--muted); font-size: 11px; }
.event-copy strong { display: block; font: 600 13px/1.4 var(--serif); }
.event-copy span { color: var(--muted); font-size: 11px; }
.event-end { display: flex; align-items: center; gap: 11px; }
.event-end > span { padding: 5px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; }

/* Library */
.library-overview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 19px; }
.storage-overview { min-height: 215px; display: grid; grid-template-columns: 1.2fr auto .8fr; align-items: center; gap: 27px; padding: 26px; }
.storage-overview h3 { margin: 4px 0 8px; font:500 17px/1.2 var(--serif); }
.storage-overview h3 strong { font-size: 32px; }
.storage-overview p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.storage-ring { position: relative; width: 106px; height: 106px; }
.storage-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.storage-ring circle { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.storage-ring .used { stroke: var(--accent); stroke-dasharray: 314; stroke-dashoffset: 314; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.storage-ring strong { position: absolute; inset: 0; display: grid; place-items: center; font:600 18px/1 var(--serif); }
.storage-types { display: grid; gap: 12px; }
.storage-types span { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; color: var(--muted); font-size: 11px; }
.storage-types b { color: var(--ink); font-weight: 500; }
.dot { width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; }.dot.pink { background: var(--accent); }.dot.purple { background: #998da6; }.dot.sand { background: #c5ae91; }
.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 215px; border: 1px dashed rgba(86,67,59,.25); border-radius: 24px; background: rgba(255,255,255,.32); }
.upload-zone:hover { border-color: var(--accent); background: rgba(255,255,255,.6); }
.upload-zone .upload-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 14px; background: var(--ink); color: white; font-size: 18px; }
.upload-zone strong { font: 600 13px/1.4 var(--serif); }
.upload-zone small { margin: 5px 0 10px; color: var(--muted); font-size: 11px; }
.upload-zone em { color: var(--accent-dark); font-size: 11px; font-style: normal; }
.asset-toolbar { margin-top: 35px; }
.view-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; }
.view-switch button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.view-switch button.active { background: white; color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.06); }
.view-switch svg { width: 14px; height: 14px; }
.asset-date-row { margin-top: 24px; }
.asset-date-row h3 { margin: 0; font:600 16px/1.2 var(--serif); }
.asset-date-row span { color: var(--muted); font-size: 11px; }
.asset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 14px 0 55px; }
.asset-card { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 13px; background: #ddd; }
.asset-card.wide { grid-column: span 2; aspect-ratio: 2.03; }
.asset-preview { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }
.asset-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.asset-card:hover img, .asset-card:focus-within img { transform: scale(1.045); }
.asset-card::after { content: ""; position: absolute; z-index: 1; inset: 60% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(10,8,7,.38)); opacity: 0; transition: opacity .2s ease; }
.asset-card:hover::after, .asset-card:focus-within::after { opacity: 1; }
.asset-preview:focus-visible { outline: 3px solid rgba(255,255,255,.95); outline-offset: -5px; }
.asset-kind-badge { position: absolute; z-index: 2; top: 9px; left: 9px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; pointer-events: none; background: rgba(24,20,18,.48); backdrop-filter: blur(8px); color: white; font-size: 11px; }
.asset-uploader { position: absolute; z-index: 2; left: 9px; bottom: 9px; max-width: calc(100% - 18px); display:inline-flex; align-items:center; min-height:27px; padding:0 10px; overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:99px; pointer-events:none; background:rgba(25,20,18,.52); color:#fff; backdrop-filter:blur(9px); font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.asset-delete { position: absolute; z-index: 3; top: 9px; right: 9px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(255,249,246,.9); box-shadow: 0 5px 16px rgba(45,25,20,.18); color: #a0443d; opacity: .88; transform: translateY(0); backdrop-filter: blur(10px); transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease; }
.asset-delete svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.asset-delete:hover, .asset-delete:focus-visible { background: #a0443d; color: white; opacity: 1; transform: translateY(-1px) scale(1.04); }
.asset-delete:focus-visible { outline: 3px solid rgba(255,255,255,.95); outline-offset: 2px; }
.asset-delete:disabled { cursor: wait; opacity: .55; transform: none; }

/* Map */
.map-view { height: calc(100vh - 82px); overflow: hidden; }
.map-panel-wrap, #photoMap { position: relative; width: 100%; height: 100%; }
#photoMap { z-index: 1; background: #d9ded8; }
.leaflet-tile-pane { filter: saturate(.45) sepia(.08) brightness(1.05); }
.leaflet-control-container { display: block; }
.leaflet-control-attribution { padding: 4px 8px !important; border-radius: 10px 0 0 0; background: rgba(250,248,245,.82) !important; color: #655d58; font-size: 11px; backdrop-filter: blur(8px); }
.leaflet-control-attribution a { color: var(--accent-dark); }
.map-attribution { position: absolute; z-index: 4; right: 12px; bottom: 7px; padding: 3px 7px; border-radius: 7px; background: rgba(252,251,249,.78); color: #6e6763; font-size: 9px; backdrop-filter: blur(8px); }
.map-attribution a { color: inherit; text-decoration: none; }
.map-gradient { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,241,238,.95) 0%, rgba(244,241,238,.48) 25%, transparent 48%), linear-gradient(to bottom, rgba(244,241,238,.4), transparent 25%); }
.map-heading { position: absolute; z-index: 3; top: 36px; left: clamp(28px, 4vw, 66px); }
.map-heading > p:last-child { margin: 8px 0 0; color: #665f5b; font-size: 11px; }
.map-controls { position: absolute; z-index: 3; top: 37px; right: 38px; display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.6); border-radius: 14px; box-shadow: 0 10px 30px rgba(50,45,40,.11); }
.map-controls button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1.2; text-align: center; }
.map-controls button.active { background: var(--ink); color: white; }
.map-zoom { position: absolute; z-index: 3; top: 98px; right: 38px; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 12px; }
.map-zoom button { width: 38px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; font-size: 18px; line-height: 1; text-align: center; }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-summary { position: absolute; z-index: 3; right: 38px; bottom: 28px; display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.65); border-radius: 17px; box-shadow: 0 10px 32px rgba(50,45,40,.11); }
.map-summary span { display: flex; flex-direction: column; }
.map-summary strong { font:600 16px/1.2 var(--serif); }
.map-summary small { color: var(--muted); font-size: 11px; }
.map-summary i { width: 1px; height: 25px; background: var(--line); }
.place-card { position: absolute; z-index: 4; left: clamp(28px, 4vw, 66px); bottom: 29px; width: 335px; padding: 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 22px; box-shadow: 0 17px 45px rgba(58,49,44,.16); transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.place-card.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.close-place { position: absolute; z-index: 3; top: 18px; right: 18px; width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(20,17,16,.48); color: white; }
.place-collage { position: relative; width: 100%; height: 132px; overflow: hidden; padding: 0; border: 0; border-radius: 15px; background: var(--surface-2); text-align: left; }
.place-collage img { width: 100%; height: 100%; object-fit: cover; }
.place-collage.thumbnail-unavailable::before, .marker-image.thumbnail-unavailable::before { content: "♡"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-dark); font: 600 23px/1 var(--serif); background: linear-gradient(145deg,var(--accent-soft),var(--surface-2)); }
.place-collage span { position: absolute; bottom: 9px; padding: 5px 8px; border-radius: 8px; background: rgba(25,21,20,.58); color: white; font-size: 11px; backdrop-filter: blur(8px); }
.place-collage .place-count { right: 9px; }
.place-collage .place-open-hint { left: 9px; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.place-collage:hover .place-open-hint, .place-collage:focus-visible .place-open-hint { opacity: 1; transform: none; }
.place-collage:focus-visible { box-shadow: 0 0 0 3px rgba(201,111,105,.3); }
.place-card > div:last-child { padding: 14px 8px 7px; }
.place-card h3 { margin: 0 0 5px; font: 600 21px/1.2 var(--serif); }
.place-card > div > p:not(.eyebrow) { margin: 0 0 14px; color: var(--muted); font: 600 11px/1.65 var(--serif); }
.place-card .secondary-button { border: 1px solid var(--line); }
.photo-marker { position: relative; width: 50px; height: 57px; padding: 3px; border: 2px solid rgba(255,255,255,.94); border-radius: 15px 15px 15px 3px; background: #171d20; box-shadow: 0 10px 24px rgba(34,28,25,.28); transition: transform .2s ease, box-shadow .2s ease; }
.photo-marker:hover { z-index: 3; transform: translateY(-3px) scale(1.08); box-shadow: 0 14px 28px rgba(34,28,25,.34); }
.marker-image { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #e8e3df; }
.marker-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.marker-count { position: absolute; right: -8px; top: -8px; min-width: 22px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid white; border-radius: 10px; background: var(--ink); color: white; font: 700 11px/1 var(--sans); }

/* Wall */
.wall-view { width: 100%; height: calc(100dvh - 82px); min-height: 540px; overflow: hidden; }
.wall-3d-stage { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-top: 1px solid rgba(255,255,255,.7); outline: 0; background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.96) 0%, rgba(248,239,234,.82) 30%, rgba(226,207,198,.65) 68%, rgba(205,181,170,.72) 100%); box-shadow: inset 0 1px rgba(255,255,255,.84); perspective: 1300px; touch-action: pan-y; user-select: none; cursor: grab; }
.wall-3d-stage:focus-visible { box-shadow: 0 0 0 4px rgba(201,111,105,.2), 0 28px 75px rgba(82,57,47,.14); }
.wall-3d-stage.is-grabbed { cursor: grabbing; }
.wall-3d-stage::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,236,232,.92), transparent 16%, transparent 84%, rgba(224,207,199,.88)), linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%, rgba(80,52,43,.1)); }
.wall-ambient { position: absolute; z-index: 0; left: 50%; top: 37%; width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.94), rgba(238,203,193,.26) 43%, transparent 70%); filter: blur(8px); }
.wall-orbit { position: absolute; z-index: 1; left: 50%; bottom: 74px; width: 76%; height: 120px; border: 1px solid rgba(120,80,67,.12); border-radius: 50%; transform: translateX(-50%) rotateX(70deg); pointer-events: none; background: radial-gradient(ellipse, rgba(85,55,45,.18), transparent 66%); filter: blur(.2px); box-shadow: inset 0 18px 30px rgba(255,255,255,.22); }
.wall-carousel { position: absolute; z-index: 2; inset: 0; transform-style: preserve-3d; perspective: 1250px; }
.wall-flow-mark { position: absolute; z-index: 8; top: 28px; left: 30px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,255,255,.64); border-radius: 14px; box-shadow: 0 12px 32px rgba(70,46,37,.12); }
.wall-flow-mark > span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(201,111,105,.12); }
.wall-flow-mark strong { font: 600 14px/1 var(--serif); }
.wall-flow-mark small { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.wall-item { position: absolute; top: 44%; left: 50%; width: 384px; height: 480px; overflow: hidden; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.76); border-radius: 22px; background: #d8d2cd; box-shadow: 0 16px 35px rgba(66,43,34,.15); backface-visibility: hidden; transform-origin: center; transform-style: preserve-3d; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; will-change: transform, opacity; }
.wall-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.wall-item.is-current { box-shadow: 0 34px 70px rgba(60,38,30,.3), 0 0 0 1px rgba(255,255,255,.62); }
.wall-card-media { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; transform: scale(1.01); transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.wall-card-media.media-preview-placeholder { display: grid; }
.wall-item.is-current:hover .wall-card-media { transform: scale(1.045); }
.wall-item .wall-overlay { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; padding: clamp(48px, 12%, 74px) 18px 18px; background: linear-gradient(transparent, rgba(20,17,16,.78)); color: white; opacity: .38; transition: opacity .25s ease; text-align: left; }
.wall-item.is-current .wall-overlay, .wall-item:hover .wall-overlay { opacity: 1; }
.wall-overlay strong { display: block; font: 600 15px/1.45 var(--serif); letter-spacing: -.01em; }
.wall-overlay span span { display: block; margin-top: 3px; color: rgba(255,255,255,.76); font-size: 12px; }
.wall-overlay > i { font-size: 12px; font-style: normal; white-space: nowrap; }
.wall-stage-controls { position: absolute; z-index: 8; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(255,255,255,.64); border-radius: 17px; transform: translateX(-50%); box-shadow: 0 12px 34px rgba(70,46,37,.15); }
.wall-control, .wall-playback { height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink); }
.wall-control { width: 42px; font-size: 18px; }
.wall-playback { min-width: 142px; gap: 8px; padding: 0 15px; font-size: 12px; font-weight: 600; }
.wall-control:hover, .wall-playback:hover { background: rgba(255,255,255,.78); }
.wall-control:active, .wall-playback:active { transform: scale(.96); }
.wall-playback:disabled { cursor: default; opacity: .58; }
.wall-playback-icon { width: 16px; color: var(--accent-dark); font-size: 11px; letter-spacing: -.12em; }
.wall-gesture-hint { position: absolute; z-index: 7; top: 42px; right: 30px; margin: 0; color: rgba(70,54,48,.62); font-size: 11px; }
.wall-gesture-hint span { margin-right: 4px; color: var(--accent-dark); }
.wall-now { position: absolute; z-index: 8; left: 30px; bottom: 28px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 14px; min-height: 54px; padding: 7px 16px; border: 1px solid rgba(255,255,255,.64); border-radius: 16px; box-shadow: 0 12px 34px rgba(70,46,37,.13); }
.wall-now > span { min-width: 58px; color: var(--accent-dark); font: 700 12px/1 var(--serif); letter-spacing: .08em; }
.wall-now > div { display: flex; flex-direction: column; gap: 3px; }
.wall-now strong { font: 600 15px/1.3 var(--serif); }
.wall-now small { color: var(--muted); font-size: 12px; }
.wall-empty { position: absolute; top: 44%; left: 50%; width: min(360px, 80%); margin: 0; padding: 40px 24px; border: 1px dashed rgba(110,82,71,.2); border-radius: 20px; transform: translate(-50%,-50%); color: var(--muted); background: rgba(255,255,255,.32); font-size: 14px; text-align: center; }
.wall-3d-stage.is-empty .wall-orbit { opacity: .35; }

/* Modal, lightbox and feedback */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(31,26,24,.36); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-sheet { width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 27px; border: 1px solid rgba(255,255,255,.72); border-radius: 26px; background: var(--surface); box-shadow: 0 30px 90px rgba(30,24,22,.22); transform: translateY(20px) scale(.985); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.modal-backdrop.open .modal-sheet { transform: none; }
.confirm-backdrop { z-index: 130; }
.confirm-sheet { width: min(430px, 100%); overflow: visible; padding: 31px; text-align: center; }
.confirm-symbol { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 17px; background: var(--accent-soft); color: var(--accent-dark); font: 600 29px/1 var(--serif); }
.confirm-sheet .eyebrow { margin: 0 0 9px; }
.confirm-sheet h2 { margin: 0; font: 600 27px/1.25 var(--serif); }
.confirm-sheet > p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
.confirm-actions button { min-height: 48px; }
.confirm-accept[data-tone="danger"] { background: var(--accent-dark); }
.sheet-handle { display: none; }
.modal-head { display: flex; justify-content: space-between; }
.modal-head h2 { margin: 0; font: 600 24px/1.2 var(--serif); }
.modal-upload { position: relative; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 21px 0; border: 1px dashed rgba(98,79,70,.25); border-radius: 17px; background: var(--surface-2); }
.modal-upload-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-upload.has-preview { height: 210px; border-style: solid; }
.modal-upload.has-preview::after { content: ""; position: absolute; inset: 34% 0 0; background: linear-gradient(transparent,rgba(25,20,18,.68)); }
.modal-upload.has-preview > span, .modal-upload.has-preview > strong, .modal-upload.has-preview > small { position: relative; z-index: 2; color: white; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.modal-upload.has-preview > span { margin-top: auto; background: rgba(33,27,24,.64); backdrop-filter: blur(8px); }
.modal-upload.has-preview > small { margin-bottom: 15px; color: rgba(255,255,255,.78); }
.modal-upload.is-pending-preview.has-preview > span { display: none; }
.modal-upload.is-pending-preview.has-preview > strong { margin-top: auto; }
.modal-upload.is-pending-preview { cursor: default; }
.modal-upload > span { width: 33px; height: 33px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 11px; background: var(--ink); color: white; }
.modal-upload strong { font-size: 11px; }
.modal-upload small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.account-panel { display:grid; gap:16px; margin:21px 0 24px; padding:18px; border:1px solid var(--line); border-radius:19px; background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(247,238,233,.66)); }
.account-heading,.account-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.account-heading .eyebrow { margin-bottom:4px; }.account-heading h3 { margin:0; font:600 21px/1.2 var(--serif); }
.binding-pill { flex:none; min-height:29px; display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent-dark); font-size:11px; font-weight:700; line-height:1; text-align:center; }
.binding-pill.is-bound { background:rgba(101,139,94,.14); color:#5b7b55; }
.account-members { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:center; gap:5px; }
.account-person { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.55); }
.account-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--ink); color:#fff; object-fit:cover; font:600 17px/1 var(--serif); }.partner-avatar { background:var(--accent-soft); color:var(--accent-dark); }
.account-person.is-empty .partner-avatar { display:none; }
.account-person.is-empty::before { content:"?"; width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--accent-soft); color:var(--accent-dark); font:600 17px/1 var(--serif); }
.account-person>div { min-width:0; display:flex; flex-direction:column; gap:2px; }.account-person small,.account-person em { overflow:hidden; color:var(--muted); font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.account-person strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.account-heart { color:var(--accent-dark); font:600 20px/1 var(--serif); text-align:center; }
.avatar-settings { min-width:0; display:grid; grid-template-columns:76px minmax(0,1fr); gap:13px; padding:13px; border:1px solid rgba(169,79,75,.13); border-radius:16px; background:rgba(255,255,255,.48); }
.avatar-settings-preview { position:relative; width:76px; height:76px; }
.avatar-settings-preview img { width:76px; height:76px; display:block; border-radius:24px; object-fit:cover; box-shadow:0 8px 24px rgba(79,57,49,.13); }
.avatar-settings-preview span { position:absolute; right:-8px; bottom:-6px; max-width:104px; overflow:hidden; padding:5px 8px; border:2px solid var(--surface); border-radius:99px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.avatar-settings-copy { min-width:0; display:grid; align-content:center; gap:9px; }
.avatar-settings-copy>div:first-child { min-width:0; display:grid; gap:4px; }
.avatar-settings-copy strong { font-size:13px; }
.avatar-settings-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.avatar-settings-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.avatar-settings-actions button { min-height:44px; padding:0 14px; border-radius:11px; font-size:12px; cursor:pointer; transition:transform .1s ease-out,opacity .18s ease,background .18s ease; }
.avatar-settings-actions button:active { transform:scale(.97); }
.avatar-settings-actions button:focus-visible { outline:3px solid rgba(169,80,75,.24); outline-offset:2px; }
.avatar-settings-actions button:disabled { cursor:wait; opacity:.58; transform:none; }
.avatar-settings-actions .primary-button { min-height:44px; }
.avatar-reset-button { border:0; background:transparent; color:var(--accent-dark); font-weight:600; }
.avatar-reset-button:hover { background:var(--accent-soft); }
.avatar-reset-button[hidden],.avatar-settings-actions button[hidden] { display:none; }
.avatar-settings-status:empty { display:none; }
.avatar-settings-status.is-error { color:#994641; }
.avatar-settings.is-previewing { border-color:rgba(199,111,105,.34); background:rgba(255,255,255,.72); }
.binding-workspace { display:grid; gap:12px; padding-top:2px; }.binding-workspace>p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.binding-actions { display:grid; grid-template-columns:auto minmax(120px,1fr) auto; gap:8px; }.binding-actions label { margin:0; }.binding-actions input { width:100%; height:46px; padding:0 10px; border:1px solid var(--line); border-radius:11px; outline:0; background:rgba(255,255,255,.7); color:var(--ink); text-align:center; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.binding-actions input:focus { border-color:rgba(201,111,105,.65); box-shadow:0 0 0 3px rgba(201,111,105,.1); }.binding-actions .secondary-button,.binding-actions .primary-button { min-height:46px; padding-inline:13px; font-size:12px; }
.invite-code { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px dashed rgba(169,79,75,.32); border-radius:13px; background:var(--accent-soft); }.invite-code>div { min-width:0; display:grid; gap:3px; }.invite-code small,.invite-code em { color:var(--muted); font-size:10px; font-style:normal; }.invite-code strong { color:var(--accent-dark); font:700 20px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }.invite-code button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:0; border-radius:10px; background:var(--ink); color:#fff; font-size:11px; line-height:1.2; text-align:center; }
.account-footer { padding-top:12px; border-top:1px solid var(--line); }.account-footer>span { color:var(--muted); font-size:11px; }.account-footer .text-button { font-size:12px; }.account-footer-actions { display:flex; align-items:center; gap:15px; }.account-footer-actions a { text-decoration:none; }
form label { display: grid; gap: 7px; margin-bottom: 15px; }
form label > span { color: var(--muted); font-size: 11px; }
form input, form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.7); color: var(--ink); font-size: 11px; resize: none; }
form input:focus, form textarea:focus { border-color: rgba(201,111,105,.65); box-shadow: 0 0 0 3px rgba(201,111,105,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.location-assistant { display: grid; gap: 11px; margin: -2px 0 17px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.38); }
.location-status { min-height: 46px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; }
.location-status > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 16px; transition: background .2s ease, color .2s ease; }
.location-status > div { display: flex; flex-direction: column; gap: 3px; }
.location-status strong { font-size: 12px; }
.location-status small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.location-status[data-state="reading"] > span { color: #a8783d; animation: location-pulse 1s ease-in-out infinite; }
.location-status[data-state="located"] > span, .location-status[data-state="matched"] > span { background: rgba(111,143,105,.14); color: #5f8159; }
.location-status[data-state="missing"] > span { background: rgba(191,112,80,.13); color: #a85842; }
.location-status[data-state="manual"] > span { background: var(--accent-soft); color: var(--accent-dark); }
.coordinate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coordinate-row label { margin: 0; }
.coordinate-row input:valid:not(:placeholder-shown) { border-color: rgba(103,139,97,.48); }
.location-lookup-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--accent-dark); font-size: 12px; font-weight: 600; transition: background .2s ease, transform .15s ease; }
.location-lookup-button:hover { background: var(--accent-soft); }
.location-lookup-button:active { transform: scale(.985); }
.location-lookup-button:disabled { cursor: wait; opacity: .62; }
.location-geocode-credit { margin: -4px 0 0; color: var(--muted); font-size: 10px; text-align: right; }.location-geocode-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes location-pulse { 50% { opacity: .45; transform: scale(.9); } }
.upload-compression-option { min-height: 68px; display: flex; align-items: flex-start; gap: 11px; margin: 3px 0 4px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.42); cursor: pointer; }
.upload-compression-option[hidden] { display: none; }
.upload-compression-option > input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent-dark); }
.upload-compression-option > span { display: grid; gap: 4px; color: var(--ink); }
.upload-compression-option strong { font-size: 13px; }
.upload-compression-option small { color: var(--muted); font-size: 11px; line-height: 1.55; }
.upload-compression-option:has(input:checked) { border-color: rgba(201,111,105,.38); background: var(--accent-soft); }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.form-actions .discard-pending-button { margin-right: auto; border-color: rgba(169,79,75,.24); color: var(--accent-dark); }
.lightbox { position: fixed; z-index: 110; inset: 0; display: flex; align-items: center; justify-content: center; padding: 50px 90px; background: rgba(17,15,14,.9); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure { max-width: min(1000px, 80vw); max-height: 88vh; margin: 0; }
.lightbox figure img { display: block; width: auto !important; max-width: 100%; height: auto !important; max-height: 78vh; margin: auto; border-radius: 16px; aspect-ratio: var(--lightbox-image-ratio, auto); object-fit: contain; object-position: center; box-shadow: 0 25px 80px rgba(0,0,0,.35); transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.lightbox figure img.is-loading { filter: blur(5px); opacity: .78; transform: scale(.992); }
.lightbox figcaption { display: flex; justify-content: space-between; align-items: center; padding: 15px 3px 0; color: white; }
.lightbox figcaption div { display: flex; flex-direction: column; gap: 3px; }
.lightbox figcaption strong { font: 600 13px/1.4 var(--serif); }
.lightbox figcaption span { color: rgba(255,255,255,.58); font-size: 11px; }
.lightbox-copy { min-width: 0; max-width: min(720px, 70vw); }
.lightbox-copy #lightboxResolutionStatus { color: rgba(255,255,255,.52); font-size: 11px; line-height: 1.4; }
.lightbox-copy #lightboxNote { margin: 7px 0 0; color: rgba(255,255,255,.86); font: 400 14px/1.65 var(--serif); overflow-wrap: anywhere; }
.lightbox-copy #lightboxNote.is-empty { color: rgba(255,255,255,.42); }
.lightbox figcaption button { border: 0; background: transparent; color: white; font-size: 28px; }
.lightbox figcaption .lightbox-actions { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.lightbox figcaption .lightbox-original-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; backdrop-filter: blur(10px); }
.lightbox figcaption .lightbox-original-button:disabled { cursor: wait; opacity: .56; }
.lightbox figcaption #favoritePhoto { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; padding: 0; line-height: 1; text-align: center; }
.lightbox-close, .lightbox-nav { position: absolute; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: white; line-height: 1; text-align: center; }
.lightbox-close { top: 23px; right: 27px; width: 40px; height: 40px; font-size: 22px; }
.lightbox-nav { top: 50%; width: 44px; height: 44px; font-size: 30px; transform: translateY(-50%); }.lightbox-nav.prev { left: 25px; }.lightbox-nav.next { right: 25px; }
.toast { position: fixed; z-index: 120; right: 28px; bottom: 28px; display: flex; align-items: center; gap: 11px; min-width: 260px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: rgba(34,30,28,.92); color: white; box-shadow: 0 16px 45px rgba(30,25,22,.24); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.toast.show { opacity: 1; transform: none; }
.toast > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); }
.toast div { display: flex; flex-direction: column; }.toast strong { font-size: 11px; }.toast small { color: rgba(255,255,255,.58); font-size: 11px; }
.mobile-nav { display: none; }

/* Readability and mobile-inbox workflow */
.nav-item { font-size: 14px; font-weight: 500; }
.couple-chip { gap: 8px; padding: 8px 2px; }
.avatar-stack { width: 48px; }
.avatar-stack.is-single { width: 30px; }
.avatar-stack img { width: 30px; height: 30px; }
.couple-chip strong { font-size: 13px; }
.couple-chip small { font-size: 11px; }
.primary-button { min-height: 46px; padding-inline: 21px; font-size: 14px; }
.primary-button .plus { font-size: 24px; }
.page-heading h1 { font-size: clamp(38px, 4vw, 50px); }
.page-heading > div:first-child > p:last-child { max-width: 660px; font-size: 15px; line-height: 1.7; }
.page-heading > .primary-button { font-size: 15px; }
.memory-meta { font-size: 13px; }
.memory-meta button, .text-button { min-height: 36px; font-size: 15px; font-weight: 600; }
.section-heading h2 { font-size: 28px; }
.calendar-head h3 { font-size: 23px; }
.calendar-grid { font-size: 15px; font-weight: 600; }
.calendar-days > button, .calendar-days > span { font-size: 17px; font-weight: 600; }
.calendar-note { padding: 14px; }
.calendar-note strong { font-size: 16px; }
.calendar-note small { font-size: 15px; }
.filter-pills button { min-height: 38px; font-size: 13px; }
.event-item { min-height: 82px; padding: 17px 20px; }
.event-date strong { font-size: 27px; }
.event-date span, .event-copy span { font-size: 13px; }
.event-copy strong { font-size: 16px; }
.event-end > span { font-size: 12px; }
.upload-zone strong, .storage-overview h3, .asset-date-row h3 { font-size: 16px; }
.upload-zone small, .upload-zone em, .storage-overview p:last-child, .storage-types span, .asset-date-row span { font-size: 13px; }
.map-heading > p:last-child, .place-card > div > p:not(.eyebrow) { font-size: 14px; }
.modal-sheet { width: min(610px, 100%); padding: 32px; }
.modal-head h2 { font-size: 30px; }
.modal-upload { height: 146px; margin: 24px 0 14px; }
.modal-upload > span { width: 42px; height: 42px; font-size: 21px; }
.modal-upload strong { font-size: 15px; }
.modal-upload small { font-size: 13px; }
form label { gap: 9px; margin-bottom: 18px; }
form label > span { font-size: 14px; }
form input, form textarea { min-height: 48px; padding: 13px 14px; font-size: 16px; }
.location-assistant { padding: 15px; }
.location-status strong { font-size: 14px; }
.location-status small { font-size: 13px; }
.location-geocode-credit { font-size: 12px; }
.anniversary-badge-field { display: grid; gap: 10px; margin: -2px 0 18px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.38); }
.anniversary-badge-field[hidden] { display: none; }
.anniversary-badge-field label { margin: 0; }
.anniversary-badge-field > small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.badge-options { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-options button { min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.65); font-size: 19px; line-height: 1; text-align: center; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.badge-options button:hover { transform: translateY(-1px); }
.badge-options button.active { border-color: transparent; background: var(--ink); color: white; box-shadow: 0 6px 14px rgba(37,33,32,.18); }
.form-actions .ghost-button, .form-actions .primary-button { min-height: 46px; font-size: 14px; }
.mobile-inbox { padding-top: 10px; }
.mobile-inbox > button { width: 100%; min-height: 74px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(201,111,105,.2); border-radius: 18px; background: linear-gradient(110deg,rgba(240,213,209,.72),rgba(255,255,255,.55)); text-align: left; box-shadow: 0 10px 28px rgba(75,58,49,.07); }
.mobile-inbox-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--ink); color: white; font-size: 22px; }
.mobile-inbox > button > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.mobile-inbox strong { font: 600 16px/1.3 var(--serif); }
.mobile-inbox small { color: var(--muted); font-size: 13px; }
.mobile-inbox em { color: var(--accent-dark); font-size: 14px; font-style: normal; font-weight: 600; }
.mobile-scan-entry { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; margin-bottom: 22px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.46); text-align: left; }
.mobile-scan-entry > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); font-size: 18px; }
.mobile-scan-entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.mobile-scan-entry strong { font-size: 14px; }
.mobile-scan-entry small { color: var(--muted); font-size: 12px; }
.mobile-scan-entry em { color: var(--accent-dark); font-size: 12px; font-style: normal; font-weight: 600; }
.mobile-upload-sheet { width: min(490px, 100%); text-align: center; }
.mobile-upload-sheet .modal-head { text-align: left; }
.mobile-upload-qr { width: 270px; min-height: 270px; display: grid; place-items: center; margin: 25px auto 18px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fffaf7; }
.mobile-upload-qr svg { width: 100%; height: auto; fill: initial; stroke: initial; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; shape-rendering: crispEdges; }
.mobile-upload-qr svg path[stroke] { stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; }
.qr-loading { color: var(--muted); font-size: 14px; }
.mobile-network-options { margin: -2px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); text-align: left; }
.mobile-network-options[hidden] { display: none; }
.mobile-network-options > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.mobile-network-options > div { display: flex; flex-wrap: wrap; gap: 7px; }
.mobile-network-options button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.58); color: var(--ink); font-size: 12px; line-height: 1.2; text-align: center; }
.mobile-network-options button.active { border-color: transparent; background: var(--ink); color: white; box-shadow: 0 5px 12px rgba(37,33,32,.16); }

/* Dark theme */
body.dark { --bg: #1b1918; --surface: #252220; --surface-2: #302c2a; --ink: #f2eeea; --muted: #a9a09b; --line: rgba(255,255,255,.10); --accent-soft: #553b3a; --shadow: 0 18px 50px rgba(0,0,0,.2); color-scheme: dark; }
body.dark .glass { background: rgba(37,34,32,.8); }
body.dark .sidebar { border-right-color: rgba(255,255,255,.08); background: rgba(27,25,24,.94); }
body.dark .topbar { background: linear-gradient(to bottom, rgba(27,25,24,.99) 0%, rgba(27,25,24,.96) 68%, rgba(27,25,24,.72) 86%, transparent 100%); box-shadow: inset 0 1px rgba(255,255,255,.025); }
body.dark .search-wrap, body.dark .icon-btn { background: rgba(255,255,255,.06); }
body.dark .search-wrap:focus-within, body.dark .icon-btn:hover { background: rgba(255,255,255,.11); }
body.dark .search-wrap kbd { background: rgba(255,255,255,.07); }
body.dark .account-panel { background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
body.dark .account-person { background:rgba(255,255,255,.04); }
body.dark .avatar-settings { background:rgba(255,255,255,.035); }
body.dark .avatar-settings.is-previewing { background:rgba(255,255,255,.065); }
body.dark .avatar-settings-preview span { border-color:var(--surface); background:#eee8e2; color:#2d2825; }
body.dark .binding-actions input { background:rgba(255,255,255,.06); }
body.dark .brand-mark, body.dark .nav-item.active, body.dark .primary-button { background: #eee8e2; color: #26211f; }
body.dark .nav-item.active svg, body.dark .primary-button .plus { color: var(--accent-dark); }
body.dark .map-gradient { background: linear-gradient(90deg, rgba(27,25,24,.92), rgba(27,25,24,.35) 30%, transparent 50%); }
body.dark .leaflet-tile-pane { filter: saturate(.35) brightness(.55); }
body.dark .leaflet-control-attribution { background: rgba(28,25,24,.8) !important; color: #c9c1bc; }
body.dark .leaflet-control-attribution a { color: #e5aaa4; }
body.dark .wall-3d-stage { border-color: rgba(255,255,255,.12); background: radial-gradient(circle at 50% 34%, #4a403c 0%, #342d2a 38%, #201d1b 100%); box-shadow: 0 28px 75px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12); }
body.dark .wall-3d-stage::before { background: linear-gradient(90deg, rgba(29,25,24,.9), transparent 16%, transparent 84%, rgba(29,25,24,.88)), linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%, rgba(0,0,0,.18)); }
body.dark .wall-ambient { opacity: .25; }
body.dark .wall-gesture-hint { color: rgba(255,255,255,.55); }

@media (max-width: 1100px) {
  .sidebar { width: 214px; padding-left: 17px; padding-right: 17px; }
  .main { margin-left: 214px; }
  .dashboard-grid { grid-template-columns: 1.15fr .85fr; }
  .journey-stats { display: none; }
  .asset-grid { grid-template-columns: repeat(4, 1fr); }
  .storage-overview { grid-template-columns: 1fr auto; }
  .storage-types { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 820px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding-bottom: 72px; }
  body.wall-mode .main { padding-bottom: 0; }
  .topbar { height: 68px; padding: 0 18px; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; }
  .mobile-brand .brand-mark { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; }
  .mobile-brand strong { font:600 15px/1 var(--serif); }
  .search-wrap { display: none; }
  .top-actions .icon-btn:first-child, .top-actions .primary-button, #openMobileUpload { display: none; }
  .top-actions .mobile-account-button { display:grid; }
  .mobile-inbox { padding-top: 8px; }
  .wall-view { height: calc(100dvh - 68px); min-height: 560px; }
  .section-pad { padding-left: 18px; padding-right: 18px; }
  .greeting-row { align-items: center; padding-top: 17px; padding-bottom: 22px; }
  .weather-chip { padding: 8px; }.weather-chip small { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .anniversary-hero { min-height: 380px; }
  .memory-today { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .memory-today .card-heading, .memory-today .memory-meta { grid-column: 1/-1; }
  .memory-today .memory-photo { margin: 0; }
  .memory-caption { align-self: center; }
  .memory-strip { grid-template-columns: repeat(2, 1fr); }
  .journey-inner { align-items: flex-start; flex-wrap: wrap; }.journey-inner .secondary-button { margin-left: 66px; }
  .anniversary-layout, .library-overview { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: repeat(3,1fr); }
  .map-view { height: calc(100vh - 140px); }
  .map-heading { left: 18px; }
  .map-controls { top: auto; left: 18px; right: auto; bottom: 18px; }
  .map-zoom, .map-summary { display: none; }
  .place-card { left: auto; right: 18px; bottom: 18px; }
  .mobile-nav { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 9px; height: 61px; display: grid; grid-template-columns: 1fr 1fr 62px 1fr 1fr; align-items: center; padding: 4px 8px; border: 1px solid rgba(255,255,255,.68); border-radius: 21px; box-shadow: 0 12px 38px rgba(45,36,32,.17); }
  .mobile-nav > button { height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
  .mobile-nav svg { width: 18px; height: 18px; }
  .mobile-nav button.active { color: var(--accent-dark); }
  .mobile-nav .mobile-add { width: 48px; height: 48px; margin: -24px auto 0; border-radius: 16px; background: var(--ink); color: white; box-shadow: 0 8px 20px rgba(52,43,39,.2); font-size: 25px; }
}

@media (max-width: 560px) {
  .greeting-row h1, .page-heading h1, .map-heading h1 { font-size: 30px; }
  .greeting-row .eyebrow { display: none; }
  .intro { font-size: 11px; }
  .weather-chip { border: 0; background: transparent; }
  .dashboard-grid { padding-left: 0; padding-right: 0; }
  .anniversary-hero { min-height: 410px; border-radius: 0; }
  .hero-copy { inset: auto 20px 24px; }
  .hero-date { justify-content: space-between; gap: 8px; }
  .memory-today { margin: 0 18px; grid-template-columns: 1fr; }
  .memory-today .card-heading, .memory-today .memory-meta { grid-column: 1; }
  .memory-photo { height: 220px; }
  .memory-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  .memory-tile { min-width: 72vw; scroll-snap-align: start; }
  .journey-icon { display: none; }
  .journey-inner .secondary-button { margin-left: 0; }
  .journey-inner > div:nth-child(2) { width: 100%; }
  .page-heading { align-items: flex-start; }.page-heading > .primary-button { width: auto; min-width: 48px; padding: 0 13px; font-size: 13px; }.page-heading > .primary-button .plus { font-size: 22px; }
  .anniversary-feature { min-height: 410px; }
  .mid-heading { align-items: flex-start; flex-direction: column; }
  .filter-pills { max-width: 100%; overflow-x: auto; }
  .filter-pills button { white-space: nowrap; }
  .event-item { grid-template-columns: 52px 1fr auto; padding: 12px 10px; gap: 10px; }.event-end > span { display: none; }
  .storage-overview { grid-template-columns: 1fr auto; padding: 20px; }.storage-types { grid-template-columns: 1fr; }
  .asset-toolbar { align-items: flex-start; }.asset-filters button:first-child { display: none; }.asset-filters { width: calc(100vw - 90px); }
  .asset-grid { grid-template-columns: repeat(2,1fr); }.asset-card.wide { grid-column: span 2; }.asset-delete { width: 40px; height: 40px; opacity: 1; }
  .map-heading { top: 24px; }
  .map-heading > p:last-child { width: 180px; }
  .place-card { left: 14px; right: 14px; bottom: 74px; width: auto; display: grid; grid-template-columns: 115px 1fr; gap: 10px; padding: 9px; }
  .place-collage { height: 145px; }.place-card > div:last-child { padding: 8px 5px; }.place-card h3 { font-size: 18px; }.place-card .secondary-button { padding: 0 10px; min-height: 34px; }
  .map-controls { left: 14px; right: 14px; bottom: 14px; justify-content: center; }.map-controls button { flex: 1; padding-left: 4px; padding-right: 4px; }
  .wall-flow-mark { top: 18px; left: 18px; min-height: 42px; padding: 0 13px; }.wall-flow-mark small { display: none; }
  .wall-item { top: 43%; border-radius: 18px; }
  .wall-item .wall-overlay { display: flex; padding: 42px 14px 14px; }
  .wall-overlay strong { font-size: 13px; }.wall-overlay span span { font-size: 11px; }
  .wall-stage-controls { bottom: 76px; }.wall-playback { min-width: 126px; padding: 0 10px; }
  .wall-gesture-hint { display: none; }
  .wall-now { left: 18px; right: 18px; bottom: 136px; grid-template-columns: auto 1fr; gap: 11px; min-height: 60px; }.wall-now > span { min-width: 52px; }
  .lightbox { padding: 50px 15px; }.lightbox figure { max-width: 100%; }.lightbox-nav { display: none; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal-sheet { width: 100%; max-height: 92vh; padding: 20px; border-radius: 26px 26px 0 0; transform: translateY(100%); }
  .modal-head h2 { font-size: 26px; }
  .account-panel { margin-top:17px; padding:14px; }.account-members { grid-template-columns:1fr; }.account-heart { transform:rotate(90deg); }.avatar-settings{grid-template-columns:66px minmax(0,1fr);padding:12px}.avatar-settings-preview,.avatar-settings-preview img{width:66px;height:66px}.avatar-settings-preview img{border-radius:21px}.avatar-settings-actions button{min-height:44px}.binding-actions { grid-template-columns:1fr 1fr; }.binding-actions label { grid-column:1/-1; }.binding-actions .secondary-button,.binding-actions .primary-button { width:100%; }.invite-code strong { font-size:18px; }
  .mobile-inbox > button { grid-template-columns: 40px 1fr; }.mobile-inbox em { grid-column: 2; }.mobile-inbox small { font-size: 12px; }
  .mobile-scan-entry { grid-template-columns: 38px 1fr; }.mobile-scan-entry em { grid-column: 2; }
  .mobile-upload-qr { width: min(250px, 82vw); min-height: 250px; }
  .sheet-handle { display: block; width: 38px; height: 4px; margin: -8px auto 17px; border-radius: 4px; background: #d4ceca; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) { .glass, .topbar { backdrop-filter: none; background: var(--surface); } }

/* Email registration and delivery settings share this stylesheet so the
   dedicated authentication and administrator themes can remain self-contained. */
.auth-page .auth-email { display:grid; }
.auth-page .auth-email[hidden] { display:none !important; }
.auth-page .email-code-wrap { display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:9px; }
.auth-page .email-code-wrap button { min-height:52px; padding:0 12px; border:1px solid rgba(199,111,105,.25); border-radius:13px; background:var(--accent-soft); color:var(--accent-dark); font-size:13px; font-weight:700; cursor:pointer; transition:background .2s,transform .18s,opacity .18s; }
.auth-page .email-code-wrap button:hover { background:#efd2ce; transform:translateY(-1px); }
.auth-page .email-code-wrap button:disabled { cursor:not-allowed; opacity:.55; transform:none; }

.admin-page-root .admin-email-grid { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(290px,.58fr); align-items:start; gap:18px; }
.admin-page-root .admin-email-side { display:grid; gap:18px; }
.admin-page-root .admin-email-identity-grid { grid-template-columns:1fr 1fr; padding-bottom:22px; }
.admin-page-root .admin-email-identity-grid > label:last-child { grid-column:1 / -1; }
.admin-page-root .admin-template-grid { display:grid; gap:16px; padding:0 24px 24px; }
.admin-page-root .admin-template-grid label { display:grid; gap:8px; }
.admin-page-root .admin-template-grid label > span { color:#635852; font-size:12px; font-weight:600; }
.admin-page-root .admin-template-grid input,
.admin-page-root .admin-template-grid textarea,
.admin-page-root .admin-smtp-grid select { width:100%; border:1px solid var(--line); border-radius:12px; outline:0; background:rgba(255,255,255,.72); color:var(--ink); font-size:13px; transition:border-color .2s,box-shadow .2s,background .2s; }
.admin-page-root .admin-template-grid input { height:47px; padding:0 13px; }
.admin-page-root .admin-template-grid textarea { min-height:168px; padding:13px; resize:vertical; line-height:1.7; }
.admin-page-root .admin-template-grid input:focus,
.admin-page-root .admin-template-grid textarea:focus,
.admin-page-root .admin-smtp-grid select:focus { border-color:rgba(199,111,105,.68); background:#fff; box-shadow:0 0 0 4px rgba(199,111,105,.09); }
.admin-page-root .admin-template-grid small { color:var(--muted); font-size:10px; line-height:1.55; }
.admin-page-root .admin-template-grid code { padding:2px 5px; border-radius:5px; background:#eee7e2; color:var(--accent-dark); font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.admin-page-root .admin-smtp-details { border-top:1px solid var(--line); }
.admin-page-root .admin-smtp-details summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 24px; list-style:none; cursor:pointer; user-select:none; }
.admin-page-root .admin-smtp-details summary::-webkit-details-marker { display:none; }
.admin-page-root .admin-smtp-details summary > span { display:grid; gap:4px; }
.admin-page-root .admin-smtp-details summary strong { color:var(--ink); font:600 17px/1.25 var(--serif); }
.admin-page-root .admin-smtp-details summary small { color:var(--muted); font-size:10px; line-height:1.5; }
.admin-page-root .admin-smtp-details summary i { color:var(--muted); font-size:18px; font-style:normal; transition:transform .2s; }
.admin-page-root .admin-smtp-details[open] summary i { transform:rotate(180deg); }
.admin-page-root .admin-smtp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:3px; }
.admin-page-root .admin-smtp-grid select { height:47px; padding:0 36px 0 13px; }

@media (max-width:1120px) {
  .admin-page-root .admin-email-grid { grid-template-columns:1fr; }
  .admin-page-root .admin-email-side { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .admin-page-root .admin-email-identity-grid,
  .admin-page-root .admin-smtp-grid { grid-template-columns:1fr; }
  .admin-page-root .admin-email-identity-grid > label:last-child { grid-column:auto; }
  .admin-page-root .admin-template-grid { padding-inline:18px; }
  .admin-page-root .admin-smtp-details summary { padding-inline:18px; }
  .admin-page-root .admin-email-side { grid-template-columns:1fr; }
}

@media (max-width:460px) {
  .auth-page .email-code-wrap { grid-template-columns:minmax(0,1fr) 116px; }
  .auth-page .email-code-wrap button { padding-inline:8px; }
}