:root {
  --color-bg: #0d0c0b;
  --color-bg-elevated: #1a1816;
  --color-card: #1c1c1c;
  --color-field: #252525;
  --color-border: #2e2e2e;
  --color-text: #faf6f0;
  --color-muted: rgba(255,255,255,.62);
  --color-faint: rgba(255,255,255,.64);
  --color-brand: #e8b830;
  --color-brand-hi: #f5cc40;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --radius-md: 16px;
  --space: 8px;
  --shadow-card: 0 8px 20px rgba(0,0,0,.25);
  --screen-max: 430px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #080808; color: var(--color-text); }
button { cursor: pointer; }
.visually-hidden { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.app-shell { width: min(100%, var(--screen-max)); min-height: 100svh; margin: auto; background: linear-gradient(180deg,var(--color-bg),var(--color-bg-elevated)); position: relative; overflow: hidden; }
.screen { min-height: 100svh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.status { height: 44px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { text-align: center; padding: 24px 0 0; }
.brand::after { content:""; display:block; width:32px; height:2px; background:var(--color-brand); margin:8px auto; border-radius:2px; }
.hero { min-height: 100svh; background-size: cover; background-position: center; position: relative; display:flex; flex-direction:column; justify-content:space-between; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,13,13,.05),rgba(13,13,13,.8) 64%,#0d0d0d),rgba(13,13,13,.25); }
.hero > * { position:relative; z-index:1; }
.hero-copy { padding: 24px 24px calc(32px + env(safe-area-inset-bottom)); }
.badge { display:inline-flex; border:1px solid rgba(255,255,255,.19); background:rgba(255,255,255,.08); color:var(--color-brand); padding:8px 16px; border-radius:var(--radius-pill); backdrop-filter:blur(8px); }
h1,h2,h3,p { margin:0; }
.display { margin:16px 0 8px; }
.subtitle { color:var(--color-brand); margin-bottom:8px; }
.body { color:var(--color-muted); }
.button { border:0; width:100%; padding:16px 24px; background:linear-gradient(90deg,var(--color-brand-hi),var(--color-brand)); color:#0d0d0d; margin-top:32px; }
.button.secondary { color:var(--color-text); border:1px solid rgba(255,255,255,.16); margin-top:16px; }
.button:active { transform:scale(.985); }
.page-header { position:sticky; top:0; z-index:5; background:rgba(26,26,26,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.back { color:var(--color-text); border:0; background:none; padding:0 16px 0 0; }
.content { padding:24px; }
.card { background:var(--color-card); border:1px solid var(--color-border); padding:24px; margin-bottom:16px; }
.eyebrow { color:var(--color-brand); }
label { display:block; color:var(--color-muted); margin:16px 0 8px; }
input { width:100%; color:white; background:var(--color-field); border:1px solid #333; border-radius:14px; padding:16px; outline:none; }
input:focus { border-color:var(--color-brand); }
.upload { display:grid; place-items:center; min-height:110px; border:1px dashed rgba(232,184,48,.65); border-radius:16px; color:var(--color-brand); text-align:center; overflow:hidden; }
.upload img { width:100%; height:160px; object-fit:cover; }
.microcopy { color:var(--color-faint); margin-top:16px; }
.camera-style-intro { color:var(--color-muted); margin:-8px 0 16px; }
.camera-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.camera-style { position:relative; padding:8px 8px 8px; overflow:hidden; border-radius:16px; border:1px solid var(--color-border); background:#151515; color:var(--color-text); text-align:left; }
.camera-style.selected { border-color:var(--color-brand); background:rgba(232,184,48,.07); box-shadow:0 0 0 1px rgba(232,184,48,.16); }
.camera-style-preview { display:block; height:104px; overflow:hidden; border-radius:12px; background:#222; }
.camera-style-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.camera-style-copy { display:block; padding:8px 8px 0; }
.camera-style-copy b,.camera-style-copy small { display:block; }
.camera-style-copy small { color:var(--color-faint); }
.camera-style-check { position:absolute; top:10px; right:10px; width:20px; height:20px; display:none; place-items:center; border-radius:50%; background:var(--color-brand); color:#111; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.camera-style.selected .camera-style-check { display:grid; }
/* Keep wedding settings fluid, including native mobile date controls. */
.settings-screen { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.settings-screen .page-header {
  padding:calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}
.settings-screen .page-header > div { min-width:0; overflow-wrap:anywhere; }
.settings-screen .content {
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  padding:16px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.settings-screen .card { min-width:0; padding:16px; margin:0; overflow-wrap:anywhere; }
.settings-screen .eyebrow { margin:0 0 16px; }
.settings-screen input:not([type="file"]) {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:52px;
  padding:16px 16px;
}
.settings-screen input:is([type="date"], [type="datetime-local"]) { appearance:none; -webkit-appearance:none; }
.settings-screen input::-webkit-date-and-time-value { min-width:0; text-align:left; }
.settings-screen input::-webkit-datetime-edit { min-width:0; padding:0; }
.settings-screen input::-webkit-calendar-picker-indicator { flex-shrink:0; margin-inline-start:8px; padding:0; }
.settings-screen .upload { width:100%; min-width:0; margin:0; min-height:120px; }
.settings-screen .upload img { max-width:100%; }
.settings-screen .camera-style-intro { margin:-8px 0 16px; }
.settings-screen .camera-style-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap:16px; }
.settings-screen .camera-style { min-width:0; }
.settings-screen .camera-style-copy { overflow-wrap:anywhere; }
.settings-screen .camera-style-copy small { margin-top:8px; }
.settings-screen .button { min-width:0; min-height:52px; margin:0; white-space:normal; }
.settings-screen :is(input,button):focus-visible { outline:2px solid var(--color-brand); outline-offset:3px; }
.settings-screen .card:has(#cover-input:focus-visible) .upload { outline:2px solid var(--color-brand); outline-offset:3px; }
@media (max-width:359px) {
  .settings-screen .camera-style-grid { grid-template-columns:minmax(0,1fr); }
  .settings-screen .camera-style { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; padding:8px; }
  .settings-screen .camera-style-preview { height:80px; }
  .settings-screen .camera-style-copy { padding:8px; }
  .settings-screen .camera-style-check { left:10px; right:auto; }
}
@media (min-width:700px) {
  .settings-screen .page-header { padding:16px 24px; }
  .settings-screen .content { padding:24px 24px 0; }
  .settings-screen .card { padding:24px; }
}
.camera-look-original img,.viewfinder.camera-look-original video { filter:none; }
.camera-look-y2k img,.viewfinder.camera-look-y2k video { filter:contrast(1.16) saturate(1.22) brightness(1.02) hue-rotate(-5deg); }
.camera-look-disposable img,.viewfinder.camera-look-disposable video { filter:contrast(1.12) saturate(.78) sepia(.16) brightness(.96); }
.camera-look-party img,.viewfinder.camera-look-party video { filter:contrast(1.12) saturate(1.16) brightness(1.03) sepia(.04); }
.hunt-header { padding:16px 24px; display:flex; justify-content:space-between; align-items:center; background:#171717; border-bottom:1px solid var(--color-border); }
.progress-copy { color:var(--color-brand); margin-top:8px; }
.shots { border:1px solid rgba(232,184,48,.35); color:var(--color-brand); padding:8px 16px; white-space:nowrap; }
.instruction { padding:16px 24px; color:var(--color-muted); background:#141414; }
.bingo { padding:16px; display:grid; grid-template-columns:1fr 1fr; }
.spot { min-height:136px; background:#1c1c1c; border:1px solid #2e2e2e; border-radius:20px; color:white; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; padding:16px; position:relative; box-shadow:0 6px 8px rgba(0,0,0,.38); }
.spot.done { border-color:rgba(232,184,48,.4); background:rgba(232,184,48,.08); box-shadow:0 2px 8px rgba(0,0,0,.38),0 6px 16px rgba(232,184,48,.2); }
.spot .name { width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; }
.spot.done .name { color:var(--color-brand); }
.progress-dots { display:flex; align-items:center; gap:8px; min-height:20px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.progress-dot { display:block; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:rgba(255,255,255,.42); }
.progress-dot.filled { background:var(--color-brand); box-shadow:0 0 5px rgba(232,184,48,.16); }
.spot .count { color:rgba(255,255,255,.72); margin-left:8px; }
.spot.done .count { color:var(--color-brand); }
.done-mark { color:var(--color-brand); padding-top:8px; }
.shots.gallery-live { color:#111; background:var(--color-brand); border-color:var(--color-brand); }
.bingo-locked .spot { min-height:144px; }
.view-spot { margin-top:8px; color:var(--color-brand); }
.bingo-locked .spot:has(.view-spot:last-child) { cursor:default; }
.tabs { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,var(--screen-max)); z-index:10; background:rgba(13,12,11,.96); backdrop-filter:blur(10px); border-top:1px solid #2a2825; padding:0 24px calc(24px + env(safe-area-inset-bottom)); display:flex; }
.tabs button { flex:1; height:56px; border:0; background:none; color:var(--color-faint); display:flex; align-items:center; justify-content:center; gap:8px; }
.tabs button.active { color:var(--color-brand); }
.tab-lock { position:relative; display:inline-block; flex:0 0 12px; width:12px; height:10px; margin-top:8px; border:1.4px solid currentColor; border-radius:2.5px; box-sizing:border-box; opacity:.82; }
.tab-lock::before { content:""; position:absolute; left:50%; top:-7px; width:7px; height:7px; border:1.4px solid currentColor; border-bottom:0; border-radius:7px 7px 0 0; box-sizing:border-box; transform:translateX(-50%); }
.tab-lock::after { content:""; position:absolute; left:50%; top:3px; width:2px; height:3px; border-radius:2px; background:currentColor; transform:translateX(-50%); }
.camera-screen { background:#10100f; }
.camera-meta { display:flex; padding:24px; justify-content:space-between; align-items:center; }
.viewfinder { --preview-vignette:.34; --preview-grain:.13; margin:32px 24px; aspect-ratio:1; border-radius:24px; overflow:hidden; position:relative; background:#222; border:1px solid #333; }
.viewfinder.camera-look-original { --preview-vignette:.08; --preview-grain:0; }
.viewfinder.camera-look-y2k { --preview-vignette:.16; --preview-grain:.055; }
.viewfinder.camera-look-disposable { --preview-vignette:.34; --preview-grain:.13; }
.viewfinder.camera-look-party { --preview-vignette:.08; --preview-grain:.12; }
.viewfinder img,.viewfinder video { width:100%; height:100%; object-fit:cover; display:block; }
.viewfinder video { transform:scaleX(1); background:#090909; }
.viewfinder::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at center,transparent 48%,rgba(0,0,0,var(--preview-vignette)) 100%); mix-blend-mode:multiply; }
.viewfinder::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--preview-grain); 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.camera-loading { position:absolute; inset:0; display:grid; place-content:center; gap:8px; text-align:center; padding:32px; color:var(--color-muted); background:radial-gradient(circle at center,#29251c,#111); }
.camera-loading strong { color:var(--color-text); }
.camera-loading.error strong { color:var(--color-brand); }
.crosshair { position:absolute; z-index:3; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:32px; height:32px; }
.crosshair::before,.crosshair::after { content:""; position:absolute; background:rgba(255,255,255,.8); }
.crosshair::before { width:32px; height:1px; top:15px; }.crosshair::after { width:1px; height:32px; left:15px; }
.camera-controls { min-height:156px; display:flex; align-items:flex-start; justify-content:space-between; padding:16px 40px 32px; position:relative; background:#131210; border-radius:24px 24px 0 0; }
.flash { position:static; width:56px; padding:0; background:none; border:0; color:rgba(255,255,255,.38); }
.flash .flash-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 8px; border-radius:50%; border:1px solid rgba(232,184,48,.19); background:rgba(255,255,255,.08); }
.flash .flash-icon img { width:24px; height:24px; display:block; opacity:.48; }
.flash.active { color:var(--color-brand); }.flash.active .flash-icon img { opacity:1; }
.camera-switch { width:56px; padding:0; background:none; border:0; color:var(--color-brand); }
.camera-switch span { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 8px; border-radius:50%; border:1px solid rgba(232,184,48,.19); background:rgba(255,255,255,.08); }
.camera-switch img { width:24px; height:24px; display:block; }
.camera-flash { position:fixed; inset:0; z-index:100; pointer-events:none; background:white; animation:camera-flash .72s ease-out both; }
@keyframes camera-flash { 0%{opacity:0} 12%{opacity:1} 58%{opacity:.92} 100%{opacity:0} }
.shutter { appearance:none; position:static; flex:0 0 84px; width:84px; height:84px; border-radius:50%; border:4px solid var(--color-brand); background:rgba(232,184,48,.13); padding:8px; display:grid; place-items:center; box-shadow:none; }
.shutter-inner { display:block; box-sizing:border-box; width:70px; height:70px; border-radius:50%; background:#fff; border:3px solid rgba(250,246,240,.5); box-shadow:0 0 0 1px rgba(13,12,11,.35); pointer-events:none; }
.shutter:disabled { opacity:1; cursor:not-allowed; }
.shutter:not(:disabled):active { transform:scale(.97); }.shutter:not(:disabled):active .shutter-inner { transform:scale(.9); }
.captured { margin:24px; border-radius:24px; padding:8px; background:linear-gradient(135deg,var(--color-brand),#6d5714); box-shadow:0 0 28px rgba(232,184,48,.25); }
.captured img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:20px; }
.celebration-layer { position:absolute; inset:105px 0 auto; height:520px; overflow:hidden; pointer-events:none; z-index:4; }
.celebration-emoji { position:absolute; left:50%; top:54%; opacity:0; filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); animation:emoji-pop 1.35s cubic-bezier(.15,.72,.2,1) var(--emoji-delay) both; }
@keyframes emoji-pop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0deg); }
  14% { opacity:1; }
  72% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--emoji-x)),calc(-50% + var(--emoji-y))) scale(1.08) rotate(var(--emoji-rotate)); }
}
.confirm { text-align:center; padding:8px 32px 32px; }
.reveal { min-height:calc(100svh - 90px); display:grid; place-content:center; text-align:center; padding:24px; }
.camera-badge { width:80px; height:80px; border-radius:50%; display:grid; place-items:center; background:rgba(232,184,48,.1); border:1px solid rgba(232,184,48,.35); color:var(--color-brand); margin:0 auto 24px; }
.reveal .couple { color:var(--color-brand); margin-bottom:8px; }
.countdown { width:max-content; max-width:100%; display:flex; align-items:center; justify-content:center; margin:24px auto 0; padding:8px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:inset 0 1px rgba(255,255,255,.035); }
.unit { width:38px; overflow:hidden; text-align:center; }
.unit b { display:block; color:var(--color-text); font-variant-numeric:tabular-nums; animation:number-roll .48s cubic-bezier(.22,.75,.25,1) both; }
.unit span { display:block; color:var(--color-faint); margin-top:8px; }
.countdown-separator { color:var(--color-brand); align-self:flex-start; opacity:.8; }
@keyframes number-roll { from{opacity:0;transform:translateY(-115%) rotateX(65deg)} 55%{opacity:1} to{opacity:1;transform:translateY(0) rotateX(0)} }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin:24px 0; }
.stat { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; }
.stat b { display:block; }.stat span { color:var(--color-faint); }
.filters { display:flex; overflow:auto; padding:8px 16px; scrollbar-width:none; }
.filter { flex:none; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.05); color:var(--color-faint); }
.filter.active { background:var(--color-brand); border-color:var(--color-brand); }
.gallery { padding:8px 16px 120px; }
.category { margin:16px 0 24px; }.category-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }.category-title span { color:var(--color-brand); }
.spot-gallery-head { padding:24px 24px 16px; text-align:center; }.spot-gallery-head .emoji { display:block; margin-bottom:8px; }.spot-gallery-head p { color:var(--color-brand); margin-top:8px; }
.personal-photo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:16px 16px 120px; }
.personal-photo-grid button { padding:0; border:0; overflow:hidden; border-radius:14px; background:#222; aspect-ratio:1; }
.personal-photo-grid img { width:100%; height:100%; display:block; object-fit:cover; }
.spot-empty { min-height:56svh; }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo-grid button { border:0; padding:0; aspect-ratio:.91; overflow:hidden; border-radius:12px; background:#222; }
.photo-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.viewer { min-height:100svh; padding-bottom:32px; display:flex; flex-direction:column; }
.viewer-head { padding:16px 24px; display:flex; justify-content:space-between; align-items:center; }.viewer-head p { color:var(--color-brand); }
.icon-btn { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:white; }
.viewer-main { flex:1; display:grid; place-items:center; position:relative; padding:8px 16px; overflow:hidden; touch-action:none; cursor:grab; user-select:none; }
.viewer-main:active { cursor:grabbing; }
.viewer-main::after { content:"Pinch to zoom · Swipe to browse"; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:max-content; padding:8px 8px; border-radius:999px; background:rgba(0,0,0,.52); color:rgba(255,255,255,.72); pointer-events:none; opacity:.78; transition:opacity .2s; }
.viewer-main.is-zoomed::after,.viewer-main.is-zoomed .arrow { opacity:0; pointer-events:none; }
.viewer-main > img { width:100%; max-height:55svh; object-fit:contain; border-radius:24px; transform-origin:center; transition:transform .12s ease-out; will-change:transform; }
.viewer-main.is-zoomed > img { transition:none; }
.arrow { position:absolute; top:50%; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.55); color:white; }.arrow.prev{left:28px}.arrow.next{right:28px}
.thumbs { display:flex; gap:8px; overflow:auto; padding:16px 24px; }.thumbs button { flex:none;width:50px;height:50px;border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;background:#222}.thumbs button.active{border-color:var(--color-brand)}.thumbs img{width:100%;height:100%;object-fit:cover}
.toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); background:#faf6f0; color:#111; border-radius:var(--radius-pill); padding:16px 16px; z-index:20; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.qr { width:180px; height:180px; background:white; padding:8px; border-radius:16px; display:block; margin:16px auto; }
.share-link { word-break:break-all; color:var(--color-muted); text-align:center; }
.active-camera-style { display:flex; justify-content:space-between; align-items:center; margin:8px 0 8px; padding:8px 16px; border-radius:12px; background:rgba(232,184,48,.08); border:1px solid rgba(232,184,48,.2); }
.active-camera-style span { color:var(--color-muted); }.active-camera-style b { color:var(--color-brand); }
.moderation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:8px; }
.moderation-head .eyebrow { margin-bottom:8px; }
.moderation-head > span { flex:none; color:var(--color-brand); border:1px solid rgba(232,184,48,.3); border-radius:999px; padding:8px 8px; }
.moderation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.moderation-grid button { position:relative; padding:0; border:0; border-radius:11px; overflow:hidden; aspect-ratio:1; background:#252525; }
.moderation-grid img { display:block; width:100%; height:100%; object-fit:cover; }
.moderation-grid span { position:absolute; inset:auto 0 0; padding:16px 8px 8px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.8)); }
.review-all { margin-top:16px; }
.moderation-empty { margin-top:16px; padding:24px 16px; border:1px dashed var(--color-border); border-radius:14px; color:var(--color-faint); text-align:center; }
.review-viewer .viewer-main { min-height:50svh; }
.review-actions { padding:16px 24px calc(32px + env(safe-area-inset-bottom)); text-align:center; }
.review-actions p { color:var(--color-faint); margin-bottom:16px; }
.delete-photo { width:100%; padding:16px 24px; border:1px solid rgba(255,105,105,.38); border-radius:999px; background:rgba(255,72,72,.09); color:#ff8c8c; }
.review-actions .button { margin-top:8px; }
.empty-review { min-height:75svh; display:grid; align-content:center; justify-items:center; text-align:center; padding:32px; }
.empty-review > span { margin-bottom:16px; }.empty-review h2 { margin-bottom:8px; }
@media (min-width:700px){ body{padding:24px}.app-shell{min-height:calc(100svh - 48px);border-radius:32px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.screen,.hero,.viewer{min-height:calc(100svh - 48px)}.tabs{bottom:24px;border-radius:0 0 32px 32px}.toast{bottom:130px} }
@media (prefers-reduced-motion:no-preference){ .screen{animation:appear .25s ease}.spot,.button{transition:.18s ease}@keyframes appear{from{opacity:.4;transform:translateY(4px)}} }
@media (prefers-reduced-motion:reduce){ .celebration-emoji{animation:none;opacity:.65}.celebration-emoji:nth-child(n+7){display:none}.unit b{animation:none} }

.moderation-empty strong { display:block; color:var(--color-text); margin-bottom:8px; }
.button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.couple-splash .display,.guest-splash .display { overflow-wrap:anywhere; }
.empty-review .body + .body { margin-top:16px; }

.couple-splash .google-login { width:100%; min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; margin-top:24px; color:#fff; overflow:visible; }
/* Google owns its iframe dimensions and focus margins. Never stretch or crop it. */

/* Shared mobile rhythm and viewport-aware action areas. */
:root {
  --text-body:1rem;
  --text-label:.875rem;
  --text-small:.75rem;
  --text-title:1.375rem;
  --page-pad:16px;
  --app-height:100svh;
  --bottom-safe:env(safe-area-inset-bottom,0px);
}
html { scroll-padding-bottom:calc(104px + var(--bottom-safe)); }
.app-shell { overflow:clip; }
.screen { padding-bottom:24px; }
.screen:has(> .tabs) { padding-bottom:calc(80px + var(--bottom-safe)); }
.page-header,.hunt-header,.viewer-head { padding:8px var(--page-pad); min-height:56px; gap:16px; }
.page-header > div { display:flex; align-items:center; min-width:0; }
.page-header h1,.hunt-header h1,.viewer-head h1,.settings-screen .page-header h1 { overflow-wrap:anywhere; }
.back { display:grid; place-items:center; flex:0 0 44px; min-height:44px; padding:0; margin-left:-8px; }
.content { padding:var(--page-pad); }
.card { padding:16px; border-radius:20px; }
.button,.delete-photo { min-height:48px; padding:16px 16px; margin-top:16px; }
.button.secondary { margin-top:8px; }
.eyebrow { margin-bottom:16px; }
.instruction { padding:8px var(--page-pad); }
.bingo { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.spot { min-height:124px; }
.tabs { padding:0 16px calc(8px + var(--bottom-safe)); }
.tabs button { min-height:48px; height:auto; padding:16px 8px; }
.hero { min-height:var(--app-height); }
.brand { padding-top:24px; }
.hero-copy { padding:24px var(--page-pad) calc(24px + var(--bottom-safe)); }
.couple-splash .display,.guest-splash .display { margin:16px 0; }
.hero .button { min-height:48px; }
.stats { margin:16px 0; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat { min-width:0; padding:16px 8px; overflow-wrap:anywhere; }
.reveal { min-height:calc(var(--app-height) - 80px - var(--bottom-safe)); padding:24px var(--page-pad); }
.camera-badge { width:64px; height:64px; margin-bottom:16px; }
.countdown { gap:8px; padding:8px; margin-top:16px; }
.unit { width:44px; }
.gallery,.personal-photo-grid { padding-bottom:16px; }
.filters { gap:8px; }
.filter { min-height:44px; padding:8px 16px; }
.category-title { gap:16px; flex-wrap:wrap; }
.category-title h2 { overflow-wrap:anywhere; }
.empty-review { min-height:calc(var(--app-height) - 140px - var(--bottom-safe)); padding:24px var(--page-pad); }
.viewer { min-height:var(--app-height); padding-bottom:var(--bottom-safe); }
.viewer-head > div { min-width:0; }
.viewer-head .icon-btn { flex-shrink:0; }
.viewer-main > img { max-height:calc(var(--app-height) - 180px - var(--bottom-safe)); }
.viewer-main::after { max-width:calc(100% - 32px); text-align:center; }
.review-viewer .viewer-main { min-height:160px; }
.review-actions { position:sticky; bottom:0; z-index:6; padding:16px var(--page-pad) calc(16px + var(--bottom-safe)); background:#131210; border-top:1px solid var(--color-border); }
.review-actions p { margin-bottom:8px; }
.review-actions .delete-photo { margin:0; }
.settings-screen { padding-bottom:0; animation:none; }
.settings-screen .page-header { padding:8px var(--page-pad); }
.settings-screen .content { padding:16px var(--page-pad) calc(96px + var(--bottom-safe)); }
.settings-screen .form-actions {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:6;
  width:min(100%,var(--screen-max)); margin:0;
  padding:16px var(--page-pad) calc(16px + var(--bottom-safe));
  background:#131210; border-top:1px solid var(--color-border);
}
.settings-screen .form-actions .button { min-height:48px; }
.settings-screen input { scroll-margin-block:72px 120px; }
/* A single footer owns both the shutter and tabs; neither can overlap the other. */
.camera-screen {
  height:var(--app-height); min-height:0; padding:0; display:grid;
  grid-template-rows:auto auto minmax(120px,1fr) auto;
  animation:none;
}
.camera-meta { padding:8px var(--page-pad); gap:16px; min-width:0; }
.camera-meta h2 { min-width:0; overflow-wrap:anywhere; }
.camera-meta .shots { flex-shrink:0; padding:8px 8px; }
.camera-stage { display:grid; place-items:center; padding:8px var(--page-pad); overflow:hidden; }
.camera-stage .viewfinder,.camera-stage .captured {
  width:min(100%, max(120px, calc(var(--app-height) - 18rem - var(--bottom-safe))));
  aspect-ratio:1; margin:0; border-radius:20px;
}
.camera-footer { position:sticky; z-index:8; background:#131210; }
.camera-controls { min-height:0; padding:8px 32px; align-items:center; border-radius:20px 20px 0 0; gap:16px; }
.flash,.camera-switch { width:64px; flex-shrink:0; }
.shutter { width:72px; height:72px; flex-basis:72px; }
.shutter-inner { width:58px; height:58px; }
.camera-footer .tabs { left:auto; bottom:auto; border-radius:0; }
.capture-confirm { grid-template-rows:auto auto minmax(120px,1fr) auto auto; }
.capture-confirm .captured { width:min(100%, max(120px, calc(var(--app-height) - 19rem - var(--bottom-safe)))); }
.capture-confirm .captured img { border-radius:16px; }
.confirm { padding:8px var(--page-pad) 16px; }
.confirm h2 { margin-bottom:8px; }
.capture-actions {
  position:sticky; bottom:0; z-index:8; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:16px var(--page-pad) calc(16px + var(--bottom-safe));
  background:#131210; border-top:1px solid var(--color-border);
}
.capture-actions .button { margin:0; }
.capture-actions #save-photo { grid-column:2; grid-row:1; }
.capture-actions #retake { grid-column:1; grid-row:1; }
.celebration-layer { max-height:calc(var(--app-height) - 200px); }
@media (max-width:359px) {
  .camera-meta { gap:8px; flex-wrap:wrap; }
}
@media (max-height:500px) {
  .hero { justify-content:flex-start; }
  .hero-copy { padding-top:16px; }
  .camera-screen { height:auto; min-height:var(--app-height); }
  .camera-stage { min-height:140px; }
}
@media (min-width:700px) {
  :root { --app-height:calc(100svh - 48px); }
  .settings-screen .content { padding:16px var(--page-pad) calc(96px + var(--bottom-safe)); }
  .settings-screen .form-actions,.review-actions { bottom:24px; }
}

@supports (width:1cqh) {
  .camera-stage { container-type:size; }
  .camera-stage .viewfinder,.camera-stage .captured { width:min(100cqw,100cqh); }
}

/* Keep splash content in the upper part of short mobile viewports. */
.hero { justify-content:flex-start; }
.hero-copy { margin-top:clamp(16px,6svh,48px); padding-bottom:calc(24px + var(--bottom-safe)); }
.hero .google-login { margin-top:24px; }
@media (max-height:500px) {
  .brand { padding-top:16px; }
  .hero-copy { margin-top:16px; padding-top:16px; }
}

.dashboard-screen { padding-bottom:calc(104px + var(--bottom-safe)); animation:none; }
.dashboard-actions {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,var(--screen-max));
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; z-index:8;
  padding:16px 16px calc(16px + var(--bottom-safe)); background:#131210; border-top:1px solid var(--color-border);
}
.dashboard-actions .button { margin:0; padding:8px 8px; min-height:52px; }
.screen:has(.reveal .button) { animation:none; }
.reveal:has(.button) { padding-bottom:104px; }
.reveal .button {
  position:fixed; bottom:calc(68px + var(--bottom-safe)); left:50%; transform:translateX(-50%);
  width:min(calc(100% - 32px),398px); z-index:9; margin:0;
}
@media (min-width:700px) {
  .dashboard-actions { bottom:24px; }
  .reveal .button { bottom:calc(92px + var(--bottom-safe)); }
}

/* QA: keyboard access, readable feedback and stable touch targets. */
:where(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--color-brand); outline-offset:3px; }
:where(h1):focus { outline:none; }
button { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; }
button:not(:disabled):active { filter:brightness(.9); }
.filter { color:#ccc5bc; }
.filter.active { color:#111; }
.share-link { overflow-wrap:anywhere; user-select:text; }
.toast { display:flex; align-items:center; gap:16px; width:min(398px,calc(100% - 32px)); border-radius:16px; }
.toast button { flex:none; min-width:52px; min-height:44px; border:1px solid #69645e; border-radius:10px; background:white; color:#111; }
.toast button:focus-visible { outline-color:#111; }
.arrow { min-width:44px; min-height:44px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .celebration-layer { display:none; }
}

/* Shared commerce and recovery screens use the same mobile rhythm. */
.commerce-screen .content { display:grid; gap:16px; }
.commerce-screen .content > .card { margin:0; }
.commerce-screen h2 { overflow-wrap:anywhere; }
.commerce-screen .body { margin:8px 0; overflow-wrap:anywhere; }
.commerce-screen .button { min-height:48px; }
select,textarea { width:100%; min-width:0; min-height:48px; color:var(--color-text,#f7f5f1); background:#242321; border:1px solid #625d55; border-radius:12px; padding:16px; }
select { text-overflow:ellipsis; }
textarea { resize:vertical; }
:where(select,textarea):focus-visible { outline:3px solid var(--color-brand); outline-offset:3px; }
.package-featured { border-color:#be9b39; }
.payment-state { display:inline-block; margin:16px 0; color:#f3d477; }
.payment-state.paid { color:#a9d6ad; }
.check-row { display:flex; align-items:center; gap:16px; min-height:48px; margin:16px 0; }
.check-row input { width:24px; min-width:24px; height:24px; margin:0; accent-color:#edc43f; }
.operator-order details { margin:16px 0; padding:16px; background:#20201c; border-radius:12px; }
.operator-order summary { cursor:pointer; min-height:44px; }
.book-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.book-photo { position:relative; display:block; aspect-ratio:1; cursor:pointer; margin:0; }
.book-photo img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.book-photo input { position:absolute; top:6px; right:6px; width:24px; height:24px; margin:0; accent-color:#edc43f; z-index:1; }
.book-photo:has(input:checked) img { outline:3px solid #edc43f; outline-offset:-3px; }
.pending-photo > img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; margin-bottom:16px; }
.text-button { min-height:44px; padding:8px 8px; background:transparent; color:#dfd9cc; border:0; text-decoration:underline; }
.capture-confirm .camera-stage { padding-block:8px; }
.capture-confirm .confirm { padding-block:8px; }
.sync-notice { display:block; width:calc(100% - 32px); margin:0 16px 16px; padding:16px; border:1px solid #8c7535; color:#f3d477; background:#282318; border-radius:12px; min-height:48px; text-align:left; }
.load-more { width:calc(100% - 32px); margin:0 16px 24px; }
.image-retry { display:block; width:100%; min-height:44px; border:1px solid #77643a; border-radius:8px; padding:8px; background:#252118; color:#f3d477; }
dialog { color:#f7f5f1; background:#191817; border:1px solid #655c46; border-radius:20px; width:min(400px,calc(100% - 32px)); max-height:calc(100svh - 64px); padding:24px; margin:auto; overflow:auto; }
dialog::backdrop { background:#000b; }
dialog h2 { margin-bottom:16px; }
dialog p { margin-bottom:16px; }
a.button { display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; }
.package-options { display:grid; gap:16px; min-width:0; padding:0; border:0; }
.plan-option { display:flex; align-items:flex-start; gap:16px; margin:0; padding:16px; cursor:pointer; }
.plan-option input { width:24px; min-width:24px; height:24px; margin:0; accent-color:#edc43f; }
.plan-option > span { min-width:0; }
.plan-option strong { color:#f7f5f1; }
.plan-option .body { display:block; margin:8px 0 0; }

.settings-screen input:is([type="radio"],[type="checkbox"]),.check-row input { flex:0 0 24px; width:24px; min-width:24px; max-width:24px; height:24px; min-height:24px; padding:0; border-radius:4px; }

.gallery-download { margin:0 16px 16px; }
.operator-order button[type="submit"] { position:sticky; bottom:16px; z-index:2; box-shadow:0 8px 20px #111; }

/* Spotted / the wedding edit — monochrome, paper, and editorial type. */
:root {
 --color-bg:#f8f8f6; --color-bg-elevated:#f8f8f6; --color-card:#fff;
 --color-field:#f3f3f1; --color-border:#d4d4d0; --color-text:#171717;
 --color-muted:#575754; --color-faint:#62625f; --color-brand:#171717; --color-brand-hi:#171717;
 --font-editorial:"Instrument Serif", "Iowan Old Style", "Baskerville", Georgia, serif;
 --shadow-card:0 6px 24px #00000005; --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-pill:999px;
}
html,body { background:#e9e9e6; }
.app-shell { background:var(--color-bg); }
.brand::after { width:40px; height:1px; background:currentColor; }
.page-header,.hunt-header { background:rgba(248,248,246,.96); border-bottom:0; }
.hero { filter:grayscale(1); color:#fff; }
.hero.couple-splash { filter:none; }
.hero::before { background:linear-gradient(180deg,#0004,#000b 60%,#000); }
.hero .body { color:#e5e5e5; }
.hero .button { background:#fff; color:#111; border-color:#fff; }
.hero .badge,.hero .subtitle { color:#fff; border-color:#ffffff66; background:transparent; }
.hero-copy { margin-top:clamp(16px,4svh,32px); }
.button { color:#fff; background:#171717; border-radius:var(--radius-pill); }
.button.secondary { color:#171717; background:transparent; border-color:#a8a8a3; }
.card { border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
input,select,textarea { background:var(--color-field); color:#171717; border-color:#8b8b85; border-radius:var(--radius-sm); color-scheme:light; }
.upload { border:0; border-radius:var(--radius-md); background:#eeeee9; }
.camera-style { background:#fff; border-color:transparent; border-radius:var(--radius-md); }
.camera-style.selected { background:#eeeee9; border-color:transparent; box-shadow:inset 0 0 0 2px #171717; }
.camera-style-preview,.camera-style-preview img { border-radius:14px; }
.camera-style-check { background:#171717; color:#fff; box-shadow:none; }
.instruction { background:transparent; }
.bingo { gap:16px; }
.spot { background:#fff; color:#171717; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.spot.done { background:#e9e9e3; box-shadow:none; }
.emoji,.camera-badge,.empty-review>span,.celebration-emoji { filter:none; font-variant-emoji:emoji; }
.progress-dot { background:#cececa; border:1px solid #777; width:9px; height:9px; flex-basis:9px; }
.progress-dot.filled { background:#171717; box-shadow:none; }
.spot .count,.view-spot,.done-mark { color:#3d3d3b; }
.shots { border:0; background:#eaeae5; border-radius:var(--radius-pill); }
.shots.gallery-live { background:#171717; color:#fff; }
.tabs,.camera-footer,.camera-controls,.capture-actions,.review-actions,.dashboard-actions,.settings-screen .form-actions { background:rgba(248,248,246,.97); border-color:#c9c9c5; }
.tabs button { color:#666660; }
.tabs button.active { color:#171717; position:relative; }
.tabs button.active::before { content:""; position:absolute; width:24px; height:2px; background:#171717; top:0; }
.camera-screen { background:#f8f8f6; }
.viewfinder,.camera-stage .viewfinder,.camera-stage .captured,.captured img,.capture-confirm .captured img { border:0; border-radius:28px; }
.camera-loading { color:#cfcfca; background:radial-gradient(circle at center,#242424,#111); }
.camera-loading strong,.camera-loading.error strong { color:#fff; }
.camera-loading .button { color:white; border-color:#999; }
.flash,.flash.active,.camera-switch { color:#171717; }
.flash .flash-icon,.camera-switch span { background:transparent; border-color:#969690; }
.flash .flash-icon img,.camera-switch img { filter:grayscale(1) brightness(.15); }
.shutter { border-color:#171717; background:#fff; }
.shutter-inner { background:#171717; border-color:#fff; box-shadow:none; }
.captured { background:transparent; padding:0; box-shadow:none; }
.camera-badge { background:#eeeee9; border:0; }
.countdown,.stat { background:#eeeee9; border:0; border-radius:var(--radius-md); box-shadow:none; }
.filter { border:0; color:#565652; background:#eeeee9; border-radius:var(--radius-pill); }
.filter.active { background:#171717; color:white; border-color:#171717; }
.icon-btn { color:#171717; background:#eaeae5; border:0; }
.viewer-head p { margin-top:8px; }
.viewer-main>img,.personal-photo-grid button,.moderation-grid button { border-radius:var(--radius-md); }
.thumbs button { border-radius:var(--radius-sm); }
.thumb,.thumbs button.active { border-color:#171717; }
.active-camera-style { border:0; background:#f1f1ee; border-radius:var(--radius-sm); }
.delete-photo { color:#171717; border-color:#171717; border-radius:var(--radius-pill); background:transparent; }
.moderation-empty { border:0; background:#f3f3ef; border-radius:var(--radius-md); }
.qr { border-radius:var(--radius-sm); }
.toast { background:#171717; color:white; border-radius:var(--radius-md); box-shadow:0 6px 24px #0003; }
.toast button { border-radius:var(--radius-pill); }
.package-featured { border-color:#171717; }
.plan-option strong { color:#171717; }
.plan-option input,.book-photo input,.check-row input { accent-color:#171717; }
.book-photo:has(input:checked) img { outline-color:#171717; }
.payment-state,.payment-state.paid { color:#171717; padding-bottom:8px; border-bottom:1px solid #777; }
.operator-order details { background:#f1f1ee; border-radius:var(--radius-md); }
.operator-order button[type=submit] { box-shadow:0 6px 16px #fff9; }
.text-button { color:#343431; }
.sync-notice,.image-retry { color:#171717; background:#ecece8; border:0; border-radius:var(--radius-md); }
dialog { background:#f8f8f6; color:#171717; border:0; border-radius:var(--radius-lg); box-shadow:0 20px 80px #0003; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline-color:#171717; }
.hero :focus-visible { outline-color:#fff; }
@media(min-width:700px){.app-shell{border-radius:32px;box-shadow:0 16px 50px #0001}.tabs{border-radius:0 0 32px 32px}}
/* Two ways to browse: a staggered photo edit or a compact contact sheet. */
.editorial-header { padding:24px 24px 0; }
.editorial-header .eyebrow { margin:0 0 16px; }
.editorial-couple { margin:16px 0; }
.editorial-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.editorial-meta .text-button { padding-inline:0; }
.gallery-tools { padding:16px 24px 0; }
.layout-switch { display:flex; gap:24px; }
.layout-switch button { background:none; color:#686862; border:0; border-bottom:1px solid transparent; padding:8px 0; min-height:44px; }
.layout-switch button[aria-pressed=true] { color:#171717; border-color:#171717; }
.gallery-tools p { margin:16px 0 8px; color:#575750; }
.editorial-gallery .filters { padding:16px 24px; }
.editorial-gallery .gallery { padding:0 24px 16px; }
.editorial-gallery .category { margin:16px 0 32px; }
.editorial-gallery .category-title { padding-top:16px; align-items:baseline; }
.chapter-number { margin-right:8px; vertical-align:middle; color:#6a6a65; }
.editorial-gallery .photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; align-items:start; }
.editorial-gallery .photo-card { display:block; text-align:left; border:0; border-radius:0; aspect-ratio:auto; background:transparent; overflow:visible; width:100%; min-width:0; }
.photo-window { display:block; overflow:hidden; border-radius:var(--radius-md); aspect-ratio:3/4; background:#e2e2dc; }
.photo-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .6s cubic-bezier(.2,.65,.2,1),filter .5s; }
.gallery-mosaic .photo-card:nth-child(4n+2) { margin-top:32px; }
.gallery-mosaic .photo-card:nth-child(3n) .photo-window { aspect-ratio:1; }
.photo-caption { display:flex; justify-content:space-between; padding:8px 0; color:#565651; }
.gallery-contact .photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 8px; }
.gallery-contact .photo-window { aspect-ratio:1; }
.photo-card:focus-visible img,.photo-card:active img { filter:grayscale(0); transform:scale(1.035); }
@media(hover:hover){.photo-card:hover img{filter:grayscale(0);transform:scale(1.045)}.photo-card:hover .photo-caption{color:#111}}
.photo-enter { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.2,1); }
.photo-enter.is-visible { opacity:1; transform:translateY(0); }
/* A confirmed removal burns away; the server and Undo stay authoritative. */
.viewer-main.is-burning::after,.viewer-main.is-burning .arrow { display:none; }
.photo-burning { animation:consume-photo 1.05s ease-in forwards!important; transform:none!important; }
.photo-removing-reduced { opacity:0; transition:opacity .1s linear; }
.burn-effect { position:absolute; pointer-events:none; z-index:5; overflow:hidden; }
.burn-line { position:absolute; bottom:0; left:0; right:0; height:65px; animation:burn-rise 1.05s ease-in both; }
.burn-line::after { content:""; position:absolute; bottom:0; height:6px; left:0; right:0; background:#fff1cc; box-shadow:0 0 8px #fc7e29,0 -3px 13px #ea4719; }
.burn-flame { position:absolute; left:var(--x); bottom:0; width:10%; height:var(--h); background:linear-gradient(0deg,#fff3cd 0%,#ffad37 20%,#eb4818 55%,transparent 100%); border-radius:55% 45% 20% 30%; transform-origin:bottom center; animation:flame-flicker .2s ease-in-out var(--delay) infinite alternate; filter:blur(1px); }
.burn-ember { position:absolute; left:var(--x); bottom:8px; width:3px; height:5px; border-radius:50%; background:#ffae4d; box-shadow:0 0 4px #ff4a16; animation:ember-rise 1.05s ease-out var(--delay) both; }
@keyframes burn-rise { to{transform:translateY(calc(-1 * var(--burn-travel)))} }
@keyframes flame-flicker { from{transform:scaleY(.65) skewX(-10deg);opacity:.85}to{transform:scaleY(1.15) skewX(13deg);opacity:1} }
@keyframes ember-rise { 0%{opacity:0}15%{opacity:1}100%{transform:translate(var(--drift),calc(-.85 * var(--burn-travel)));opacity:0} }
@keyframes consume-photo {
 0%{filter:grayscale(0);clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,60% 100%,40% 100%,20% 100%,0 100%)}
 25%{filter:grayscale(.3) contrast(1.2);clip-path:polygon(0 0,100% 0,100% 82%,80% 77%,60% 80%,40% 75%,20% 81%,0 78%)}
 60%{filter:grayscale(.7) brightness(.75);clip-path:polygon(0 0,100% 0,100% 45%,80% 39%,60% 43%,40% 37%,20% 42%,0 40%)}
 95%{opacity:1;filter:grayscale(1) brightness(.35);clip-path:polygon(0 0,100% 0,100% 7%,80% 3%,60% 5%,40% 1%,20% 6%,0 4%)}
 100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 0,80% 0,60% 0,40% 0,20% 0,0 0)}
}
@media(prefers-reduced-motion:reduce){.photo-enter{opacity:1;transform:none;transition:none}.photo-card img{transition:none}.burn-effect{display:none}.photo-burning{animation:none!important;opacity:0}}

.editorial-header { padding-top:16px; }
.editorial-header .eyebrow { margin-bottom:8px; }
.editorial-couple { margin:8px 0; }
.gallery-tools { padding-top:8px; }
.editorial-gallery .category-title { margin-bottom:16px; padding-top:8px; }

/* Google keeps its official colour logo; the couple photo stays in colour. */
.google-placeholder { display:flex; align-items:center; justify-content:center; gap:16px; margin:0!important; min-height:48px; }
.google-placeholder img { flex:0 0 20px; object-fit:contain; filter:none; }
.hero .google-placeholder:disabled { opacity:1; color:#555; }
.google-status { margin:8px 0 0; color:#eee; text-align:center; }
.google-login[aria-busy="true"] { pointer-events:none; opacity:.7; }
.splash-legal { display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0 0; }
.splash-legal a { color:#eee; padding:8px 8px; text-underline-offset:4px; }
.hero :is(a,button):focus-visible { outline:3px solid #fff; outline-offset:4px; }
/* Wedding workspaces and short onboarding share the editorial scale. */
:root{--app-height:100dvh}
html{scroll-padding-bottom:104px}
body{overflow-wrap:break-word}
.workspace-screen .content h1,.onboarding-screen .content>h1,.ready-screen .content>h1,.settings-screen .content>h1,.dashboard-title h1{margin:8px 0 16px;overflow-wrap:anywhere}
.workspace-screen .content,.ready-screen .content{padding:24px var(--page-pad) 104px}
.workspace-heading .text-button{margin-bottom:16px}
.choice-card{display:grid;grid-template-columns:1fr auto;text-align:left;width:100%;background:transparent;border:1px solid #888;color:#171717;padding:24px 16px;margin-top:16px;gap:8px}
.choice-card span{grid-column:1;color:#555}
.choice-card>b{grid-column:2;grid-row:1/3}
.choice-card:hover{background:#eee}
.account-notice{padding:16px;background:#eaeae5;border-left:2px solid #171717;margin:16px 0 24px}
.account-notice p{margin:0}.account-notice .text-button{padding:8px 0 0}
.slot-meter{border-block:1px solid #b5b5ae;padding:16px 0;margin-bottom:24px}.slot-meter p{color:#555;margin:8px 0 0}
.workspace-filters{padding:24px 0 8px;gap:8px}.workspace-filters .filter{min-height:44px;flex-shrink:0}
.wedding-card{border-bottom:1px solid #bbb;padding:24px 0}.wedding-card-top{display:flex;justify-content:space-between;gap:16px;color:#555}.wedding-card h2{margin:16px 0}.wedding-card .body{margin-bottom:16px}
.wedding-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.wedding-card-actions .button{flex:1 1 100%;margin:0}.wedding-card-actions .text-button{padding:8px 0}.empty-workspace{padding:32px 0}
.stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px var(--page-pad);border-bottom:1px solid #ccc}.stepper>span{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;color:#6d6d66}.stepper b{display:grid;place-items:center;border:1px solid #888;border-radius:50%;width:32px;height:32px}.stepper .complete b{background:#171717;color:#fff;border-color:#171717}.stepper [aria-current=step]{color:#171717}
.onboarding-screen .content{gap:0}.settings-screen label{display:block;margin:16px 0 8px}.settings-screen .optional{color:#666}.settings-screen .content>h2{margin-top:24px}.step-actions{display:flex!important;gap:8px}.step-actions .button{flex:1}.step-actions .secondary{flex:0 0 90px}
.permission-list{border-top:1px solid #bbb;margin:24px 0}.settings-screen .permission-row,.permission-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;margin:0;border-bottom:1px solid #bbb;cursor:pointer}.permission-row strong{display:block}.permission-row small{display:block;color:#555;margin-top:8px}.permission-row input{accent-color:#171717;flex:0 0 26px!important;width:26px!important;height:26px!important;min-height:26px!important;min-width:26px!important;margin:0;cursor:pointer}
.invitation-preview{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:1.7;background-size:cover;background-position:center;color:white;padding:16px;margin:16px 0}.invitation-preview strong{overflow-wrap:anywhere}.invitation-preview .eyebrow{margin:0;color:white}
.onboarding-screen .camera-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.onboarding-screen .camera-style-preview{height:84px}.onboarding-screen .camera-style-copy{padding:8px}
.button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.button-grid .button{margin:0;min-height:48px;padding:16px}
.sticky-primary{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--screen-max));z-index:9;padding:16px var(--page-pad) calc(16px + env(safe-area-inset-bottom));background:rgba(248,248,246,.98);border-top:1px solid #ccc}.sticky-primary .button{margin:0;min-height:48px}
.ready-screen .qr-card{margin:16px auto 0;background:white;padding:8px;width:min(100%,240px);border:1px solid #ccc;text-align:center}.ready-screen .qr{max-width:190px;width:100%;margin:auto}.ready-screen .qr-card .microcopy{margin:0}.ready-screen .share-link{overflow-wrap:anywhere;margin:16px 0}
.dashboard-title{margin-bottom:24px}.dashboard-screen .content{padding-bottom:112px}.dashboard-screen .stats{margin:24px 0}
.preview-banner{position:sticky;top:0;z-index:15;display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:#171717;color:#fff;padding:8px 16px}.preview-banner button{margin-left:auto;background:white;color:#171717;min-height:36px;border:0;padding:8px}.preview-banner+section .hero-copy{margin-top:0}.app-shell:has(.preview-banner){--app-height:calc(100dvh - 60px)}
.camera-upload{padding:8px 24px;text-align:center}.camera-upload .button{margin:0;min-height:44px}.camera-controls:has(.shutter[hidden]){justify-content:center}.camera-controls [hidden]{display:none!important}
@media(min-width:700px){:root{--app-height:calc(100dvh - 48px)}.sticky-primary{bottom:24px}.app-shell:has(.preview-banner){--app-height:calc(100dvh - 108px)}}
@media(max-height:640px){.stepper{padding-block:8px}.stepper b{width:26px;height:26px}.onboarding-screen .content{padding-top:16px}.onboarding-screen label{margin-top:16px}.hero .brand{padding-top:16px}.hero-copy{margin-top:16px;padding-top:16px}.couple-splash .google-login{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.choice-card,.wedding-card,.invitation-preview{transition:none}}
.camera-footer .camera-controls[hidden]{display:none}
.camera-stage{min-height:0}
/* Opacity-only page entrances never re-anchor fixed action bars. */
@keyframes appear{from{opacity:.4}to{opacity:1}}

/* Soft surfaces keep the editorial rhythm without outlining every section. */
.choice-card,.wedding-card { border:0; border-radius:var(--radius-lg); background:#fff; padding:24px; box-shadow:var(--shadow-card); }
.wedding-card { margin-bottom:16px; }
.choice-card:hover { background:#eeeee9; }
.account-notice { border:0; border-radius:var(--radius-md); }
.slot-meter { border:0; background:#eeeee9; padding:16px; border-radius:var(--radius-md); }
.stepper { border:0; }
.permission-list { border:0; }
.settings-screen .permission-row,.permission-row { border:0; border-radius:var(--radius-md); background:#fff; padding:16px; margin:8px 0; }
.invitation-preview { border-radius:var(--radius-lg); overflow:hidden; }
.ready-screen .qr-card { border:0; border-radius:var(--radius-lg); padding:16px; }
.tabs,.capture-actions,.review-actions,.dashboard-actions,.settings-screen .form-actions,.sticky-primary { border-top:0; box-shadow:0 -6px 24px #00000006; }
.flash .flash-icon,.camera-switch span { border:0; background:#eaeae5; }
.payment-state { border:0; }
.preview-banner button { border-radius:var(--radius-pill); }
.plan-option:has(input:checked) { box-shadow:inset 0 0 0 2px #171717; }
.choice-card,.spot,.camera-style,.button,.filter { transition:background-color .18s ease,box-shadow .18s ease; }

/* Navigation titles use the available width, wrapping only when necessary. */
.page-header>div,.hunt-header>div,.viewer-head>div { flex:1 1 auto; min-width:0; }
.page-header h1,.settings-screen .page-header h1,.hunt-header h1,.viewer-head h1 {
  margin:0; white-space:normal; text-wrap:wrap;
  word-break:normal; overflow-wrap:break-word; min-width:0;
}
.page-header h1 { flex:1; }
.page-header h1 br,.hunt-header h1 br,.viewer-head h1 br { display:none; }
.hunt-header { gap:8px; }
.hunt-header .shots { flex:0 0 auto; padding:8px 8px; }
.camera-meta { flex-wrap:nowrap; gap:8px; }
.camera-meta h2 { flex:1; word-break:normal; overflow-wrap:break-word; }
@media(prefers-reduced-motion:reduce){.choice-card,.spot,.camera-style,.button,.filter{transition:none}}

/* Camera and confirmation reserve space for their controls, without guest navigation. */
.camera-screen {
  --camera-footer-height:calc(10rem + var(--bottom-safe));
  padding-bottom:var(--camera-footer-height);
  grid-template-rows:auto auto minmax(120px,1fr);
  min-height:calc(var(--camera-footer-height) + 12rem);
}
.capture-confirm {
  --camera-footer-height:calc(5rem + var(--bottom-safe));
  grid-template-rows:auto auto minmax(120px,1fr) auto;
  min-height:calc(var(--camera-footer-height) + 21rem);
}
.capture-confirm .camera-stage { padding:8px 16px; }
.capture-confirm .captured { width:min(100%,max(120px,calc(var(--app-height) - var(--camera-footer-height) - 14rem))); }
@supports (width:100cqw) { .capture-confirm .captured { width:min(100cqw,100cqh); } }
.camera-footer {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100%,var(--screen-max)); z-index:12;
  box-shadow:0 -6px 24px #00000006;
}
.camera-footer .tabs { position:static; transform:none; width:100%; box-shadow:none; }
.confirmation-footer .capture-actions { position:static; padding-bottom:calc(16px + var(--bottom-safe)); box-shadow:none; }
.confirmation-footer .capture-actions>.button:only-child { grid-column:1 / -1; }
.capture-live { --camera-footer-height:calc(7rem + var(--bottom-safe)); }
.capture-live .camera-stage { padding:8px 16px; }
.capture-live .camera-controls { padding-bottom:calc(8px + var(--bottom-safe)); }
.capture-live .viewfinder { width:min(100%,max(120px,calc(var(--app-height) - var(--camera-footer-height) - 8rem))); aspect-ratio:1; }
@supports (width:100cqw) { .capture-live .viewfinder { width:min(100cqw,100cqh); } }
.has-guest-nav>section:not(.camera-screen) { padding-bottom:calc(5rem + var(--bottom-safe)); }
.has-guest-nav .viewer-main>img { max-height:calc(var(--app-height) - 16rem - var(--bottom-safe)); }
.has-guest-nav img { -webkit-touch-callout:none; user-select:none; }
.camera-footer .camera-controls { flex-wrap:wrap; }
@media(min-width:700px){.camera-footer{bottom:24px}}

.camera-recovery { padding:16px var(--page-pad); }
.camera-recovery[hidden] { display:none; }
.camera-recovery p { margin:0 0 8px; }
.camera-recovery>div { display:flex; flex-wrap:wrap; gap:8px; }
.camera-recovery .button { flex:1 1 130px; margin:0; }
.camera-loading { padding:16px; }
.viewfinder:has(.camera-loading) .crosshair { display:none; }
.camera-permission-steps details { padding:16px 0; }
.camera-permission-steps summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.camera-permission-steps p { margin:8px 0 0; }
.camera-controls .flash { width:76px; }

.camera-permission-dialog[open] { max-height:calc(100svh - 32px); }
.camera-permission-dialog .dialog-content { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; overflow:hidden; }
.camera-permission-dialog .permission-guide { overflow:auto; min-height:0; }
.camera-permission-dialog .dialog-content>.button { margin:0; }
.camera-permission-dialog h2 { margin:0 0 8px; }

.camera-permission-steps summary::after { content:'+'; margin-left:auto; padding-left:8px; }
.camera-permission-steps details[open] summary::after { content:'−'; }
/* Purchase reviews reuse the same five text roles and mobile-safe controls. */
.purchase-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.purchase-links a{color:inherit;text-underline-offset:3px;padding:8px 0}
.purchase-dialog[open]{max-height:calc(100svh - 32px)}
.purchase-dialog .dialog-content{display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
.purchase-dialog h2{margin:0}
#purchase-review{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;min-height:0}
.purchase-review-copy{display:grid;gap:16px;overflow:auto;min-height:0;overscroll-behavior:contain}
#purchase-review p{margin:0}
#purchase-review .check-row{align-items:start;gap:16px}
#purchase-review input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;margin:8px 0}
#purchase-review .button{position:static;margin:0}

/* Organizer dashboards: one title, one primary action, supporting tools on demand. */
.organizer-screen { padding-bottom:0; }
.organizer-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.organizer-header .text-button { min-height:44px; margin:0; padding:8px 0; }
.organizer-screen .content { padding:16px var(--page-pad) calc(104px + var(--bottom-safe)); }
.organizer-screen .sticky-primary { padding-top:8px; }
.organizer-screen .account-notice { margin:0 0 24px; }
.account-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; color:var(--color-muted); margin:0 0 16px; }
.account-status .text-button { min-height:44px; margin:0; padding:8px 0; }
.collection-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; margin:8px 0 16px; }
.collection-screen .collection-heading h1 { margin:0; overflow-wrap:break-word; }
.collection-heading .microcopy { color:var(--color-muted); }
.collection-screen .workspace-filters { display:flex; padding:0 0 16px; gap:8px; }
.collection-screen .workspace-filters .filter { padding:8px 16px; border:0; }
.collection-screen .workspace-filters .filter[aria-pressed="true"] { background:#171717; color:#fff; }
.wedding-list { display:grid; gap:16px; }
.compact-wedding { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; padding:16px; margin:0; box-shadow:none; }
.compact-wedding h2 { margin:0; }
.wedding-open { display:flex; align-items:baseline; gap:16px; text-align:left; border:0; background:none; color:inherit; width:100%; min-height:44px; padding:8px 0; overflow-wrap:anywhere; }
.wedding-open>span { flex:none; color:var(--color-muted); }
.wedding-open:disabled { cursor:default; }
.compact-wedding .microcopy { color:var(--color-muted); margin:8px 0 16px; }
.wedding-state { display:inline-flex; align-items:center; padding:8px 8px; border-radius:var(--radius-pill); color:#4d4d49; background:#eeeee9; }
.wedding-options>summary { display:grid; place-items:center; width:44px; min-height:44px; border-radius:50%; list-style:none; cursor:pointer; }
.wedding-options>summary::-webkit-details-marker { display:none; }
.wedding-options[open]>summary { background:#eeeee9; }
.wedding-options>div { position:absolute; top:62px; right:16px; z-index:8; min-width:190px; max-width:calc(100% - 32px); padding:8px; background:#fff; border-radius:18px; box-shadow:0 8px 28px #0002; }
.wedding-options .text-button { display:block; text-align:left; width:100%; min-height:44px; margin:0; padding:8px; }
.organizer-footer { display:flex; flex-wrap:wrap; gap:16px 24px; padding-top:24px; }
.organizer-footer .text-button { color:var(--color-muted); margin:0; min-height:44px; padding:8px 0; }
.organizer-screen .empty-workspace { padding:32px 8px; text-align:center; }
.empty-workspace h2 { margin-bottom:8px; }
.organizer-screen .dashboard-title { margin:8px 0 24px; }
.organizer-screen .dashboard-title h1 { margin:8px 0 8px; overflow-wrap:break-word; }
.dashboard-title .microcopy { color:var(--color-muted); }
.dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.dashboard-section-heading h2 { display:flex; align-items:center; gap:8px; }
.photo-total { color:var(--color-muted); }
.dashboard-section-heading p { color:var(--color-muted); }
.dashboard-photos .moderation-grid { margin-top:16px; gap:8px; }
.dashboard-photos .moderation-empty { display:grid; place-items:center; min-height:112px; margin:16px 0 0; padding:24px; }
.photo-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 16px; padding-top:8px; }
.photo-actions .text-button { margin:0; min-height:44px; padding:8px 0; }
.dashboard-tools { margin-top:24px; padding:8px 16px; background:#fff; border-radius:var(--radius-lg); }
.dashboard-row,.dashboard-disclosure>summary { display:flex; align-items:center; gap:16px; width:100%; min-height:56px; padding:16px 0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; list-style:none; }
.dashboard-row>span { margin-left:auto; }
.dashboard-disclosure>summary::-webkit-details-marker { display:none; }
.dashboard-disclosure>summary::after { content:'+'; margin-left:auto; color:var(--color-muted); }
.dashboard-disclosure[open]>summary::after { content:'−'; }
.dashboard-disclosure .disclosure-state { margin-left:auto; color:var(--color-muted); }
.dashboard-disclosure:has(.disclosure-state)>summary::after { margin-left:0; }
.disclosure-content { padding:0 0 16px; }
.disclosure-content>.button { margin-top:16px; }
.wedding-management { display:grid; gap:8px; }
.wedding-management .text-button { text-align:left; min-height:44px; margin:0; padding:8px 0; }
.organizer-screen .danger-action { color:#9a2525; }
.splash-nav { display:grid; place-items:center; min-height:72px; padding:16px var(--page-pad); background:#fff; color:#171717; }
.splash-nav .brand { padding:0; margin:0; }
.splash-nav .brand::after { display:none; }
.splash-nav+.hero { min-height:calc(var(--app-height) - 72px); }
.splash-nav+.hero .hero-copy { margin-top:clamp(16px,4svh,32px); }
.google-placeholder { width:100%; max-width:400px; }
.splash-legal { flex-wrap:wrap; }
.toast { align-items:flex-start; }
.toast-icon { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; }
.toast-message { flex:1; min-width:0; overflow-wrap:anywhere; }
.toast-success .toast-icon { color:#a3e5bf; }
.toast-error .toast-icon { color:#ffb8b8; }
dialog { padding:0; overflow:hidden; }
dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr); }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 16px 16px 24px; }
.dialog-header h2 { margin:0; padding-top:8px; min-width:0; overflow-wrap:break-word; }
.dialog-close { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#555; background:transparent; }
.dialog-close:hover { background:#eaeae6; }
.dialog-close:focus-visible { outline:2px solid #171717; outline-offset:2px; }
.dialog-content { min-height:0; overflow:auto; padding:0 24px 24px; overscroll-behavior:contain; }
.dialog-content label { display:block; margin:16px 0 8px; }
.dialog-content p:empty { display:none; }
.dialog-content>p:last-child { margin-bottom:0; }
.dialog-content>[role="alert"] { color:#9a2525; margin-top:16px; }
.organizer-screen summary:focus-visible,.wedding-open:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:8px; }
@media (hover:hover) { .wedding-open:hover,.dashboard-row:hover,.dashboard-disclosure>summary:hover { color:#666; } }

/* Compact account and three-step creation. */
.account-current{padding:8px 0 24px}.account-current .eyebrow{margin:0 0 8px}.account-current h1{margin:0 0 8px!important}.account-current .body{margin:0 0 8px}.account-plans{display:grid;gap:16px}.account-plans .card{margin:0}.plan-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.plan-heading h2{margin:0}.plan-price{margin:16px 0 8px}.plan-price span{color:var(--muted)}.account-payment-status{padding:0 0 24px}.account-payment-status p{margin:0 0 8px}.account-footer{padding:8px 0 max(16px,env(safe-area-inset-bottom))}.account-footer .danger-action{color:#b42318;min-height:48px}.account-screen .content{padding-bottom:24px}.account-plans .body,.account-plans .microcopy{margin:8px 0}.account-plans .button{margin-top:16px}
.onboarding-heading{margin:8px 0 16px}.onboarding-heading h1{margin:0 0 8px!important}.onboarding-heading .body{margin:0!important}.onboarding-screen .invitation-preview{position:relative;margin-top:8px;min-width:0;min-height:0;width:100%}.cover-edit{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:0;border-radius:24px;background:#fff;color:#171717;cursor:pointer}.cover-edit:focus-visible{outline:3px solid #171717;outline-offset:3px}.ready-screen .content>h2{margin:8px 0}.stepper small{max-width:none}

.dashboard-row.danger-action{color:#b42318}

.step-actions .button{margin:0;min-height:50px}.step-actions{align-items:stretch}

.dialog-content .check-row{display:flex}.dialog-header h2:focus{outline:none}

.account-plan-picker{margin:0 0 24px}.account-plan-picker>summary{width:fit-content;min-height:48px;display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer}.account-plan-picker>summary::-webkit-details-marker{display:none}.account-plan-picker[open]>summary span{transform:rotate(180deg)}.account-plan-picker .account-plans{margin-top:24px}.account-plan-picker>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}