/* ─── PERFORMANCE FIX: reduce heavy blur on iPhone Safari ─── */
@supports (-webkit-touch-callout: none) {
  .welcome-cinema-brand,
  .welcome-cinema-note,
  .n-body,
  .mode-row,
  .cam-ico,
  .peek,
  .cam-album-btn,
  .cap-boom-badge,
  .cap-boom-badge-top,
  .cap-who,
  .cap-field,
  .gal-top,
  .bottom-nav,
  .photo-detail-close,
  .photo-detail-download,
  .photo-nav-btn,
  .photo-detail-counter {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  #sw:not(.out) .welcome-cinema-brand,
  #sw:not(.out) .welcome-cinema-topcopy,
  #sw:not(.out) .welcome-cinema-note,
  #sw:not(.out) .welcome-cinema-actions {
    filter: none !important;
  }
}

/* reduce motion for smoother camera/gallery */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ─── RESET & BASE ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  width:100%; height:100%; overflow:hidden;
  font-family:'Poppins',sans-serif; font-weight:300;
  background:#0d0804; color:rgba(248,238,215,.95);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img, video { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
canvas { display:none; }

/* ─── TOKENS ─── */
:root {
  --bg:#0d0804; --bg2:#120f06; --bg3:#1a1408;
  --gold:#c6a254; --gold2:#dfc07a; --gold3:#f0d89a;
  --gd:rgba(198,162,84,.12); --gb:rgba(198,162,84,.28);
  --t1:rgba(248,238,215,.95); --t2:rgba(248,238,215,.6);
  --t3:rgba(248,238,215,.3);
  --g1:rgba(255,255,255,.04); --g2:rgba(255,255,255,.08);
  --gb2:rgba(255,255,255,.09);
  --rs:8px; --rm:14px; --rl:20px; --pill:999px;
  --safe-top:max(env(safe-area-inset-top,0px),14px);
  --safe-bot:max(env(safe-area-inset-bottom,0px),14px);
}

/* ─── SCREEN SYSTEM ─── */
body { position:fixed; inset:0; display:block; }
.screen {
  position:fixed; inset:0;
  width:100vw; height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; overflow:hidden;
  transition:opacity .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1);
}
.screen.out { opacity:0; pointer-events:none; transform:translateY(14px); }
@media (min-width:431px) {
  body { background:#120c07; display:flex; justify-content:center; }
  .screen {
    left:50% !important; width:430px !important; max-width:430px !important;
    transform:translate3d(-50%,0,0) !important;
    box-shadow:0 0 0 1px rgba(198,162,84,.14),0 30px 90px rgba(0,0,0,.45);
  }
  .screen.out { transform:translate3d(-50%,14px,0) !important; }
}

/* ─── SPLASH ─── */
#sl { background:#f8f1e8; justify-content:center; align-items:center; }
.splash {
  width:100%; max-width:430px; height:100dvh;
  position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  background:linear-gradient(rgba(255,250,244,.55),rgba(255,250,244,.9));
  background-size:cover; background-position:center;
}
.splash::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(255,255,255,.10),rgba(255,244,232,.70)); z-index:1; }
.logo-box { position:relative; z-index:3; animation:fadeUp 1.4s ease forwards; }
.logo-icon { width:120px; height:120px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.logo-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.logo-icon-fallback { width:120px; height:120px; border-radius:24px; border:1.5px solid rgba(196,158,95,.45); background:rgba(255,255,255,.48); color:#c49e5f; display:none; align-items:center; justify-content:center; font-size:34px; }
.logo-text { font-family:'Playfair Display',serif; font-size:43px; line-height:.95; letter-spacing:.06em; color:#15110d; font-weight:700; }
.tagline { margin-top:20px; font-size:11px; letter-spacing:.24em; color:#bd9251; font-weight:600; }
.loading { position:absolute; bottom:64px; left:50%; transform:translateX(-50%); width:120px; z-index:4; }
.loading-bar { width:100%; height:4px; border-radius:20px; background:rgba(196,158,95,.25); overflow:hidden; }
.loading-bar span { display:block; height:100%; width:40%; border-radius:20px; background:#c49e5f; animation:loadingSlide 1.6s infinite ease-in-out; }
.loading-text { margin-top:18px; font-size:10px; letter-spacing:.22em; color:#c49e5f; font-weight:600; }
.splash-petal { position:absolute; width:18px; height:28px; background:rgba(214,184,143,.45); border-radius:80% 20% 80% 20%; z-index:2; animation:splashFall 8s linear infinite; }
.splash-petal:nth-child(1){left:12%;animation-delay:0s}
.splash-petal:nth-child(2){left:28%;animation-delay:2s}
.splash-petal:nth-child(3){left:68%;animation-delay:1s}
.splash-petal:nth-child(4){left:82%;animation-delay:3s}
.splash-petal:nth-child(5){left:48%;animation-delay:4s}
@keyframes fadeUp { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:translateY(0)} }
@keyframes loadingSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(260%)} }
@keyframes splashFall { 0%{top:-50px;opacity:0;transform:translateX(0) rotate(0deg)} 20%{opacity:1} 100%{top:110%;opacity:0;transform:translateX(60px) rotate(180deg)} }

/* ─── WELCOME PAGE ─── */
#sw { background:#f8f1e8; justify-content:flex-start; align-items:center; overflow:hidden; }
.welcome-cinema-page {
  width:100%; max-width:430px; height:100vh; height:100dvh;
  margin:0 auto; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) 16px max(8px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.96),transparent 34%),radial-gradient(circle at 90% 18%,rgba(230,195,126,.38),transparent 30%),linear-gradient(180deg,#fffdf9 0%,#fbf3e8 58%,#efe0ca 100%);
}
.welcome-cinema-brand { position:relative; z-index:5; flex-shrink:0; margin:4px auto 5px; display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(184,145,75,.17); box-shadow:0 14px 30px rgba(95,62,28,.075),inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.welcome-cinema-logo { width:34px; height:34px; border-radius:14px; border:1px solid rgba(178,139,74,.28); background:rgba(255,255,255,.72); overflow:hidden; display:grid; place-items:center; flex:0 0 auto; }
.welcome-cinema-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.welcome-cinema-logo span { display:none; font-family:'Playfair Display',serif; color:#b8914b; font-size:13px; font-weight:800; }
.welcome-cinema-brand h3 { font-family:'Playfair Display',serif; font-style:italic; font-size:10px; letter-spacing:.22em; color:#7d6030; font-weight:500; white-space:nowrap; }
.welcome-cinema-brand p { margin-top:3px; font-family:'Playfair Display',serif; font-style:italic; font-size:6px; letter-spacing:.14em; color:#b8914b; font-weight:500; text-transform:uppercase; white-space:nowrap; }
.welcome-cinema-main { position:relative; z-index:3; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; width:100%; padding:0 14px 8px; gap:7px; overflow:hidden; }
.welcome-cinema-topcopy { position:relative; z-index:4; width:100%; text-align:center; flex-shrink:0; }
.welcome-cinema-small { min-height:15px; margin:0 auto 3px; font-family:'Playfair Display',serif; font-style:italic; font-size:12.5px; color:#b8914b; }
.welcome-cinema-kicker { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:3px; }
.welcome-cinema-kicker span { width:36px; height:1px; background:linear-gradient(90deg,transparent,rgba(184,145,75,.58),transparent); }
.welcome-cinema-kicker b { max-width:238px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9f793d; font-family:'Playfair Display',serif; font-style:italic; font-size:8.5px; letter-spacing:.10em; font-weight:500; }
.welcome-cinema-title { width:100%; max-width:390px; margin:2px auto 5px; font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(30px,10.5vw,54px); line-height:1.05; color:#b8914b; font-weight:500; letter-spacing:.01em; text-shadow:0 12px 28px rgba(184,145,75,.16); text-align:center; white-space:normal; overflow-wrap:break-word; word-break:normal; text-wrap:balance; -webkit-hyphens:none; hyphens:none; }
.welcome-cinema-title.double-couple { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; line-height:1.12; }
.welcome-cinema-title.double-couple .dc-line { display:block; max-width:100%; overflow-wrap:break-word; word-break:normal; text-wrap:balance; padding:0 .1em; }
.welcome-cinema-title.double-couple .dc-divider { font-size:.4em; line-height:1.25; color:#b8914b; opacity:.9; letter-spacing:.12em; }
.welcome-cinema-title.corporate { font-family:'Poppins',sans-serif; font-size:clamp(24px,7.2vw,34px); line-height:1.05; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#1e1712; }
.welcome-cinema-subtitle { font-family:'Playfair Display',serif; font-size:clamp(18px,5.2vw,25px); color:#b8914b; margin:0 0 4px; line-height:1.08; }
.welcome-cinema-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; font-family:'Poppins',sans-serif; font-size:8.2px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; color:#1e1712; margin-bottom:6px; }
.welcome-cinema-meta span { display:inline-flex; align-items:center; gap:5px; }
.welcome-cinema-meta b { width:18px; height:18px; display:inline-grid; place-items:center; border-radius:50%; color:#b8914b; font-size:9px; background:rgba(255,255,255,.62); border:1px solid rgba(184,145,75,.24); }
.welcome-cinema-meta i { width:1px; height:15px; background:rgba(184,145,75,.34); }
.welcome-cinema-note { display:block; width:min(88%,318px); margin:0 auto 2px; padding:7px 12px; border-radius:16px; background:rgba(255,255,255,.56); border:1px solid rgba(184,145,75,.18); color:#2d2118; font-family:'Playfair Display',serif; font-style:italic; font-size:11.5px; font-weight:400; letter-spacing:.02em; line-height:1.27; box-shadow:inset 0 1px 0 rgba(255,255,255,.64),0 10px 22px rgba(86,54,22,.04); backdrop-filter:blur(10px); }
.welcome-cinema-photo { position:relative; flex:1 1 auto; width:min(94%,365px); min-height:0; height:auto; margin:0 auto; border-radius:34px 34px 12px 12px; overflow:hidden; background:#eadcc7; border:1.5px solid rgba(184,145,75,.34); box-shadow:0 20px 46px rgba(86,54,22,.16); }
.welcome-cinema-photo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; animation:none !important; transform:none !important; filter:saturate(1.04) contrast(1.02); }
.welcome-cinema-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#b8914b; background:radial-gradient(circle at 50% 38%,#fff6e8,#e4cfad); }
.welcome-cinema-fallback span { font-size:42px; }
.welcome-cinema-fallback p { font-size:9px; letter-spacing:.24em; font-weight:800; }
.welcome-cinema-shade { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.02),transparent 68%,rgba(255,250,244,.18) 100%); pointer-events:none; }
.welcome-cinema-bottom { position:relative; z-index:5; width:100%; flex-shrink:0; padding:0 4px; }
.welcome-cinema-actions { width:min(88%,350px); margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.welcome-cinema-btn { width:100%; min-height:45px; border-radius:999px; display:grid; grid-template-columns:42px 1fr 24px; align-items:center; padding:0 16px; font-family:'Playfair Display',serif; font-size:12px; letter-spacing:.13em; font-weight:700; text-transform:uppercase; position:relative; overflow:hidden; transition:transform .16s ease,opacity .16s ease; }
.welcome-cinema-btn:active { transform:scale(.982); opacity:.9; }
.welcome-cinema-btn span { width:31px; height:31px; border-radius:13px; display:grid; place-items:center; justify-self:start; color:#b8914b; font-size:16px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,209,166,.66)); border:1px solid rgba(184,145,75,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.welcome-cinema-btn b { justify-self:center; white-space:nowrap; font-weight:700; }
.welcome-cinema-btn em { justify-self:end; color:#b8914b; font-size:25px; font-weight:300; font-style:normal; }
.welcome-cinema-btn.main { background:linear-gradient(135deg,#15120e,#28251d 58%,#0f0f0c); color:#fff8ec; border:1px solid rgba(220,186,119,.75); box-shadow:0 18px 36px rgba(42,31,18,.20),inset 0 1px 0 rgba(255,255,255,.10); }
.welcome-cinema-btn.soft { background:rgba(255,255,255,.78); color:#1f130c; border:1px solid rgba(184,145,75,.22); box-shadow:0 12px 26px rgba(86,54,22,.09),inset 0 1px 0 rgba(255,255,255,.76); }
.welcome-cinema-btn.ghost { background:rgba(255,255,255,.38); color:#6d4c28; border:1px solid rgba(184,145,75,.16); }
/* ── Voice | Notes Memory chooser ── */
.vn-chooser{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(23,17,11,.5); backdrop-filter:blur(3px); }
.vn-chooser.open{ display:flex; }
.vn-chooser-card{ width:min(84%,340px); background:#fffdf8; border:1px solid rgba(184,145,75,.35); border-radius:22px; padding:1.4rem 1.2rem; text-align:center; box-shadow:0 24px 70px rgba(62,39,24,.2); }
.vn-chooser-title{ font-family:'Playfair Display',serif; font-size:22px; color:#17110b; margin-bottom:1rem; }
.vn-chooser-btn{ width:100%; margin-top:.55rem; padding:.8rem 1rem; border-radius:999px; border:1px solid rgba(184,145,75,.3); background:linear-gradient(135deg,#15120e,#28251d); color:#fff8ec; font-family:'Poppins',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.vn-chooser-btn.ghost{ background:transparent; color:#8a7468; border-color:rgba(184,145,75,.25); }
#sw:not(.out) .welcome-cinema-brand,#sw:not(.out) .welcome-cinema-topcopy,#sw:not(.out) .welcome-cinema-note,#sw:not(.out) .welcome-cinema-actions { opacity:0; filter:blur(8px); transform:translateY(12px); animation:cinReveal .75s ease forwards; }
#sw:not(.out) .welcome-cinema-photo { opacity:0; transform:translateY(12px); animation:cinPhotoReveal .72s ease forwards; }
#sw:not(.out) .welcome-cinema-brand { animation-delay:.06s; }
#sw:not(.out) .welcome-cinema-topcopy { animation-delay:.14s; }
#sw:not(.out) .welcome-cinema-photo { animation-delay:.34s; }
#sw:not(.out) .welcome-cinema-note { animation-delay:.48s; }
#sw:not(.out) .welcome-cinema-actions { animation-delay:.56s; }
@keyframes cinReveal { to{opacity:1;filter:blur(0);transform:translateY(0)} }
@keyframes cinPhotoReveal { to{opacity:1;transform:translateY(0)} }
@media(max-height:760px) {
  .welcome-cinema-brand { margin-bottom:4px; padding:5px 11px; }
  .welcome-cinema-main { gap:5px; }
  .welcome-cinema-small { font-size:11.5px; margin-bottom:2px; }
  .welcome-cinema-title { font-size:clamp(35px,10.3vw,48px); margin:1px auto 3px; }
  .welcome-cinema-note { font-size:9.8px; padding:5px 10px; margin-bottom:1px; }
  .welcome-cinema-actions { gap:6px; }
  .welcome-cinema-btn { min-height:38px; font-size:9.3px; }
}
@media(max-height:670px) {
  .welcome-cinema-note { display:none; }
  .welcome-cinema-btn { min-height:36px; }
}

/* ─── GUEST NAME ─── */
#sn { background:#f8f1e8; justify-content:center; padding:2rem 1.8rem; color:#17110b; }
#sn::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#fffaf5 0%,#fbf3ea 58%,#f8efe4 100%); }
.n-body { position:relative; z-index:2; width:100%; max-width:330px; padding:2rem 1.35rem; border-radius:28px; background:rgba(255,255,255,.62); border:1px solid rgba(184,145,75,.22); box-shadow:0 22px 55px rgba(88,58,30,.14),inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; }
.n-badge { width:58px; height:58px; border-radius:20px; border:1px solid rgba(184,145,75,.38); background:linear-gradient(145deg,#fffaf4,#efe0c9); box-shadow:0 12px 25px rgba(88,58,30,.10); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.18rem; color:#b8914b; }
.n-title { font-family:'Playfair Display',serif; font-size:2rem; font-weight:500; font-style:italic; color:#17110b; line-height:1.15; }
.n-sub { font-size:.76rem; color:#5b4a39; line-height:1.8; max-width:230px; }
.n-input { width:100%; padding:.95rem 1.25rem; background:rgba(255,255,255,.82); border:1.5px solid rgba(184,145,75,.26); border-radius:16px; font-family:'Playfair Display',serif; font-style:italic; font-size:1.08rem; color:#17110b; text-align:center; outline:none; }
.n-input::placeholder { color:rgba(80,60,40,.35); }
.n-input:focus { border-color:rgba(184,145,75,.65); box-shadow:0 0 0 4px rgba(184,145,75,.10); }
.btn-gold { position:relative; overflow:hidden; width:100%; padding:.95rem 1rem; background:linear-gradient(135deg,#17110b,#3b2a18); color:#fff; border-radius:16px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 14px 30px rgba(48,32,18,.18); }
.btn-text { padding:.7rem 1.8rem; color:#17110b; border:1px solid rgba(184,145,75,.22); border-radius:999px; background:rgba(255,255,255,.58); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; }
.btn-gold:active, .btn-text:active { transform:scale(.985); opacity:.88; }

/* ─── CAMERA ─── */
#sc { background:#000; padding:0; justify-content:stretch; overflow:hidden; }
#video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:0; background:#000; transform:none; }
body.front-cam #video { transform:scaleX(-1); }
/* Real-time fisheye preview (Canvas 2D) — same barrel transform as capture */
#fisheye-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  z-index:1; pointer-events:none; display:none; background:transparent;
}
/* ── FILM FX overlays (per-filter: highlight glow, grain, vignette) ── */
#fx-glow { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(circle at 50% 28%, rgba(255,235,205,.85), rgba(255,235,205,0) 62%);
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen; }
#fx-vignette { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%); }
#fx-grain { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:0; transition:opacity .25s ease;
  mix-blend-mode:overlay; -webkit-mix-blend-mode:overlay; }
/* ── HUJI disposable-camera extras (only active when the HUJI filter is on) ── */
#fx-huji-pink, #fx-huji-leak {
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
}
#fx-huji-pink {
  background:radial-gradient(circle at 50% 22%, rgba(255,150,190,.55), rgba(255,150,190,0) 58%);
}
#fx-huji-leak {
  background:radial-gradient(circle, rgba(255,150,60,.9), rgba(255,150,60,0) 62%);
}
#fx-huji-stamp {
  position:absolute; right:3.5%; bottom:46%; z-index:5; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  font-family:"Courier New",Consolas,monospace; font-weight:700;
  font-size:18px; letter-spacing:2.5px; color:#ff9b00;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
/* ── Film Grain analog extras (only active when the Film Grain filter is on) ── */
#fx-fg-halation {
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(circle at 50% 18%, rgba(255,120,70,.5), rgba(255,120,70,0) 55%);
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
}
#fx-grain.soft { mix-blend-mode:soft-light; -webkit-mix-blend-mode:soft-light; }

/* ── OPTICAL FX overlays (per-filter recipes) — prism / light leak / dream
   bloom / vintage falloff / starburst / wide-angle. Subtle, lens-like. ── */
#fx-opt-prism, #fx-opt-leak, #fx-opt-bloom, #fx-opt-softvignette {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; opacity:0; transition:opacity .25s ease;
}
#fx-opt-prism {
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(255,80,120,.10), rgba(255,80,120,0) 38%),
    radial-gradient(130% 130% at 100% 0%, rgba(80,200,255,.08), rgba(80,200,255,0) 38%),
    radial-gradient(130% 130% at 50% 100%, rgba(180,120,255,.07), rgba(180,120,255,0) 42%);
}
#fx-opt-leak { mix-blend-mode:screen; -webkit-mix-blend-mode:screen; }
#fx-opt-bloom {
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,244,224,.34), rgba(255,244,224,0) 62%);
}
#fx-opt-softvignette {
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 48%, rgba(0,0,0,.10) 82%, rgba(0,0,0,.26) 100%);
}
#fx-opt-starburst {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; object-fit:cover; object-position:center center;
}
#wide-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  z-index:1; pointer-events:none; display:none; background:transparent;
}

/* ── TOP ROW: CSS-only filters ──
   The saved photo is always the ORIGINAL (photos.filter_style stores the
   filter NAME). The gallery applies the look below via .filter-<id> on the
   <img>. The live camera preview uses the SAME strings on the <video>
   element (filters.js FILTER_CSS) so preview == gallery. */
#filter-view { display:none; }   /* old pipeline canvas — no longer used */

/* CSS-only filter classes (must mirror filters.js FILTER_CSS; suffix = filter cls) */
.filter-iphone4     { filter:saturate(1.02) contrast(.96) sepia(.06) hue-rotate(9deg) brightness(1.06); }
.filter-cool-ccd    { filter:sepia(.35) hue-rotate(170deg) saturate(1.20) contrast(1.10) brightness(1.03); }
.filter-disposable  { filter:saturate(1.15) contrast(1.10) brightness(1.18) hue-rotate(6deg) sepia(.06); }
.filter-y2k         { filter:sepia(.30) saturate(1.40) contrast(1.06) hue-rotate(-14deg) brightness(1.06); }
.filter-vintage     { filter:sepia(.42) saturate(.80) contrast(.80) brightness(1.10) hue-rotate(-8deg); }
.filter-huji        { filter:sepia(.34) saturate(1.15) contrast(1.06) brightness(1.10) hue-rotate(-9deg); }
.filter-film-grain  { filter:saturate(.80) contrast(.81) brightness(1.07) sepia(.09) hue-rotate(-3deg); }
.filter-35mm        { filter:saturate(.95) contrast(1.06) hue-rotate(12deg) brightness(1.02) sepia(.10); }
.filter-lomo        { filter:saturate(1.60) contrast(1.20) brightness(.96) hue-rotate(-8deg); }
.filter-kodak-gold  { filter:sepia(.24) saturate(1.28) contrast(1.08) hue-rotate(-12deg) brightness(1.05); }
.filter-dazz        { filter:saturate(1.30) contrast(1.12) hue-rotate(10deg) brightness(1.12); }
.filter-polaroid    { filter:sepia(.26) saturate(1.08) contrast(.86) brightness(1.14) hue-rotate(-6deg); }
.filter-bw          { filter:grayscale(1) contrast(1.32) brightness(.96); }

/* ── LENS (Fish Eye) — separate from colour filters ── */
.lens-row { display:flex; align-items:center; gap:.55rem; margin-top:.45rem; padding:0 1rem; }
.lens-strip { display:flex; gap:.45rem; }
.lens-btn {
  border:1px solid rgba(201,169,110,.4);
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.72);
  border-radius:999px;
  padding:.34rem .72rem;
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-family:'Poppins',sans-serif;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.lens-btn.active { background:rgba(201,169,110,.30); border-color:#c9a96e; color:#f0d89a; }

/* Fisheye PREVIEW — CSS-only (zoom + curved vignette + lens ring). Always
   works on any device and never covers the camera. The REAL barrel distortion
   is baked into the capture (filters.js applyFisheye) before saving. */
body.fisheye-lens:not(.front-cam) #video { transform:none; }
body.fisheye-lens.front-cam #video        { transform:scaleX(-1); }
#lens-vignette {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  opacity:0; transition:opacity .25s ease;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 78%, rgba(0,0,0,.09) 90%, rgba(0,0,0,.20) 97%, rgba(0,0,0,.62) 100%);
}
#lens-barrel {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  opacity:0; transition:opacity .25s ease;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.16), rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 60%);
  mix-blend-mode:screen; -webkit-mix-blend-mode:screen;
}
body.fisheye-lens #lens-vignette { opacity:1; }
body.fisheye-lens #lens-barrel { opacity:1; }
/* ── BOTTOM ROW: PNG FRAME OVERLAY (#frame-overlay — GPU-composited div) ── */
#frame-overlay {
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .22s ease;
}

/* ── FILTER ACTIVE BADGE ── */
#filter-active-badge {
  position:absolute;
  bottom:calc(var(--safe-bot) + 210px);
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.52);
  border:1px solid rgba(240,216,154,.32);
  color:#f0d89a;
  font-family:'Poppins',sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none; white-space:nowrap;
}
#filter-active-badge.show { opacity:1; }

.cam-head { position:absolute; top:0; left:0; right:0; z-index:3; padding:calc(env(safe-area-inset-top,0px) + 14px) 1rem .6rem; display:flex; flex-direction:column; align-items:center; gap:.22rem; text-align:center; background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,0)); }
.cam-brand { font-family:'Playfair Display',serif; font-size:.72rem; font-style:italic; color:rgba(255,255,255,.72); }
.cam-couple { font-family:'Playfair Display',serif; font-size:.9rem; font-style:italic; color:rgba(255,255,255,.92); text-shadow:0 2px 12px rgba(0,0,0,.35); }
.cam-guest-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .62rem; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); border-radius:var(--pill); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.cam-back-btn { position:absolute; top:calc(var(--safe-top) + 2px); left:1rem; z-index:12; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.boom-status { position:absolute; top:calc(var(--safe-top) + 8px); right:1rem; z-index:10; display:flex; align-items:center; gap:.42rem; pointer-events:none; opacity:0; transition:opacity .3s; }
.boom-status.on { opacity:1; }
.video-timer { position:absolute; top:calc(var(--safe-top) + 8px); left:50%; transform:translateX(-50%); z-index:12; color:#ff5a5a; font-size:13px; font-weight:800; letter-spacing:.14em; background:rgba(23,17,11,.55); padding:4px 12px; border-radius:999px; border:1px solid rgba(255,90,90,.45); pointer-events:none; }
.video-timer.hidden { display:none; }
.boom-dot { width:7px; height:7px; border-radius:50%; background:#dc3c3c; animation:recPulse .65s ease-in-out infinite; }
.boom-label { font-size:.54rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(220,60,60,.9); }
@keyframes recPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(.85)} }

.cam-foot {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  padding:.5rem 1.3rem calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  background:linear-gradient(to top,rgba(0,0,0,.52) 0%,rgba(0,0,0,.24) 62%,transparent 100%);
}
.mode-row { display:flex; align-items:center; gap:.28rem; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.18); border-radius:var(--pill); padding:.22rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mode-btn { padding:.25rem .72rem; border-radius:var(--pill); font-family:'Poppins',sans-serif; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); transition:all .22s; }
.mode-btn.active { background:rgba(255,255,255,.18); color:#fff; }

/* ── TWO-ROW FILTER CONTROLS ── */
.filter-row, .frame-row {
  display:flex; flex-direction:column; align-items:center; gap:3px; width:100%;
}
.strip-label {
  font-family:'Poppins',sans-serif; font-size:8px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(240,216,154,.55); font-weight:700;
}
.frame-row { margin-top:2px; }

/* ── FILTER STRIP (colour filters — top row) ── */
.filter-strip {
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 18px 2px;
  width:100%;
  transition:opacity .22s ease;
}
.filter-strip::-webkit-scrollbar { display:none; }

.filter-thumb {
  flex:0 0 auto; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer;
  transition:transform .18s ease;
}
.filter-thumb:active { transform:scale(.91); }
.filter-thumb-swatch {
  width:72px; height:72px; border-radius:13px;
  border:2.5px solid rgba(255,255,255,.18);
  overflow:hidden; background:#1a1a1a; position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.38);
  transition:border-color .18s, box-shadow .18s;
}
.filter-thumb-swatch canvas { width:100%; height:100%; display:block; }
.filter-thumb-swatch.is-none {
  background:linear-gradient(135deg,#2a1d13,#3b2a1a);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.filter-thumb-label {
  font-family:'Poppins',sans-serif; font-size:8.5px;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55); white-space:nowrap; font-weight:600;
  transition:color .18s;
}
.filter-thumb.active .filter-thumb-swatch {
  border-color:#f0d89a;
  box-shadow:0 0 0 2px rgba(240,216,154,.5), 0 6px 18px rgba(0,0,0,.4);
}
.filter-thumb-desc {
  font-family:'Poppins',sans-serif; font-size:6.6px; line-height:1.35;
  color:rgba(255,255,255,.42); text-align:center; max-width:84px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-weight:500; transition:color .18s;
}
.filter-thumb.active .filter-thumb-label { color:#f0d89a; }
.filter-thumb.active .filter-thumb-desc { color:rgba(240,216,154,.85); }

/* Filter strip hidden in boomerang/video (no filter applied to those) */
.filter-strip-locked-msg {
  display:none; width:100%; text-align:center; padding:4px 0 2px;
  font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,216,154,.45); font-weight:700;
}
body.boomerang-mode .filter-strip-locked-msg { display:block; }
body.boomerang-mode .filter-strip { display:none; }

.cam-count { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78); text-shadow:0 2px 10px rgba(0,0,0,.25); }
.shutter-row { display:flex; align-items:center; justify-content:center; gap:2.4rem; position:relative; }
.shutter { width:78px; height:78px; border-radius:50%; background:transparent; border:5px solid rgba(255,255,255,.78); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(0,0,0,.28); transition:all .11s; }
.shutter::after { content:''; display:block; width:58px; height:58px; border-radius:50%; background:#fff; transition:all .1s; }
.shutter:active::after { width:50px; height:50px; background:rgba(255,255,255,.5); }
.shutter:disabled { opacity:.22; }
.shutter.recording { border-color:rgba(220,60,60,.9); }
.shutter.recording::after { background:rgba(220,60,60,.75); animation:recPulse .7s ease-in-out infinite; }
.boom-ring { position:absolute; width:80px; height:80px; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:4; }
.boom-ring circle { fill:none; stroke:rgba(220,60,60,.72); stroke-width:3; stroke-dasharray:226; stroke-dashoffset:226; stroke-linecap:round; transform-origin:center; transform:rotate(-90deg); transition:stroke-dashoffset .08s linear; }
.cam-ico { width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:1.05rem; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.peek { width:42px; height:42px; border-radius:8px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); overflow:hidden; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.64rem; backdrop-filter:blur(10px); }
.peek img, .peek video { width:100%; height:100%; object-fit:cover; display:block; }
.cam-album-btn { padding:.5rem 1.8rem; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.22); border-radius:var(--pill); color:#fff; font-family:'Poppins',sans-serif; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; backdrop-filter:blur(10px); }

/* ─── CAPTURE REVIEW ─── */
#scp { background:#000; }
/* FIX #12: .cap-bg dead code fully removed from CSS and HTML */
#cap-photo-crisp {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  display:none; background:#000;
}
#cap-photo-crisp img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
#cap-photo-crisp.show { display:block; }
.cap-boom-preview {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#000; overflow:hidden;
}
.cap-boom-preview video {
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:none !important; animation:none !important; background:#000;
}
.cap-boom-badge {
  position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:5;
  padding:6px 14px; border-radius:999px;
  background:rgba(0,0,0,.55); border:1px solid rgba(240,216,154,.3);
  color:#f0d89a; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.cap-body {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.1rem 1.15rem var(--safe-bot); gap:.65rem;
  /* Gradient ensures UI is readable over both photo and boomerang video */
  background:linear-gradient(to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,.08) 68%,
    transparent 100%);
}
/* Boomerang badge — now inside cap-body, top-center */
.cap-boom-badge-top {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:999px;
  background:rgba(0,0,0,.52); border:1px solid rgba(240,216,154,.32);
  color:#f0d89a; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  white-space:nowrap;
}
.cap-label { font-family:'Playfair Display',serif; font-style:italic; font-size:.98rem; color:rgba(248,238,215,.92); text-align:center; }
.cap-who { background:rgba(0,0,0,.32); border:1px solid rgba(198,162,84,.22); border-radius:16px; padding:.58rem .8rem; backdrop-filter:blur(8px); display:flex; align-items:center; gap:.55rem; }
.cap-av { font-size:1.15rem; flex-shrink:0; }
.cap-nm { font-family:'Poppins',sans-serif; font-size:.82rem; font-weight:500; color:rgba(248,238,215,.92); }
.cap-field { background:rgba(0,0,0,.38); border:1px solid rgba(198,162,84,.18); border-radius:16px; padding:.72rem .85rem; backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05); }
textarea.cap-ta { width:100%; min-height:58px; background:transparent; border:none; outline:none; resize:none; font-family:'Poppins',sans-serif; font-size:.86rem; line-height:1.55; color:rgba(248,238,212,.92); }
textarea.cap-ta::placeholder { color:rgba(255,255,255,.38); }
.cap-char { font-size:.55rem; color:rgba(255,255,255,.3); margin-top:4px; }
.cap-actions { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:.55rem; }
.btn-retake, .btn-save, .btn-share { min-height:42px; border-radius:13px; font-size:.55rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.btn-retake { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.55); }
.btn-save { background:rgba(255,255,255,.08); border:1px solid rgba(198,162,84,.24); color:rgba(248,238,212,.82); }
.btn-share { background:linear-gradient(135deg,#c6a254,#f0d89a); color:#17110b; border:none; box-shadow:0 12px 28px rgba(198,162,84,.22); }
.btn-retake:active, .btn-save:active, .btn-share:active { transform:scale(.97); opacity:.86; }

/* ─── GALLERY ─── */
#sg { background:radial-gradient(circle at 12% 7%,rgba(255,255,255,.96),transparent 27%),radial-gradient(circle at 90% 14%,rgba(230,195,126,.28),transparent 28%),linear-gradient(180deg,#fffaf3 0%,#f6ecdf 52%,#eadcc7 100%); padding:0; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden; color:#17110b; align-items:stretch; }
.gal-scroll { flex:1 1 0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; width:100%; }
.gal-app { width:100%; max-width:430px; padding-bottom:24px; margin:0 auto; }
.gal-top { position:sticky; top:0; z-index:30; padding:max(14px,env(safe-area-inset-top)) 16px 12px; background:rgba(255,250,245,.72); border-bottom:1px solid rgba(184,145,75,.13); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:space-between; box-shadow:0 10px 28px rgba(88,58,30,.06); }
.gal-menu, .gal-back-new { width:40px; height:40px; border-radius:16px; background:rgba(255,255,255,.76); border:1px solid rgba(184,145,75,.18); color:#17110b; font-size:18px; box-shadow:0 8px 18px rgba(88,58,30,.07); }
.gal-logo { text-align:center; }
.gal-logo h2 { font-family:'Playfair Display',serif; font-size:18px; letter-spacing:.18em; font-weight:600; color:#17110b; }
.gal-logo p { margin-top:4px; font-family:'Poppins',sans-serif; font-size:7px; letter-spacing:.22em; color:#b8914b; font-weight:700; }
.gal-tabs-new { display:flex; gap:8px; padding:0 16px 16px; overflow-x:auto; scrollbar-width:none; }
.gal-tabs-new::-webkit-scrollbar { display:none; }
.gal-tabs-new button { padding:10px 14px; border-radius:999px; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; background:rgba(255,255,255,.72); border:1px solid rgba(184,145,75,.16); color:#5f4b35; white-space:nowrap; box-shadow:0 8px 18px rgba(88,58,30,.05); }
.gal-tabs-new button.active { background:linear-gradient(135deg,#17110b,#3b2a18); color:#fffaf3; border-color:rgba(198,162,84,.45); }
/* ── Guest Stories strip (Instagram/Snapchat style) ── */
.aj-stories { padding:6px 16px 0; }
.aj-stories-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 10px; }
.aj-stories-head h3 { font-family:'Playfair Display',serif; font-size:15px; letter-spacing:.02em; color:#17110b; margin:0; }
.aj-stories-head small { font-family:'Poppins',sans-serif; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#b8914b; font-weight:600; white-space:nowrap; }
.aj-story-strip { display:flex; gap:14px; overflow-x:auto; padding:4px 0 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
/* ── Guest Stories "Add" indicator (Snap Capture review) ── */
.cap-story-ind { margin:12px 0 2px; padding:9px 14px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(240,216,154,.3); font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:.04em; font-weight:600; color:#f0d89a; text-align:center; }
.cap-story-ind.hidden { display:none; }
.aj-story-strip::-webkit-scrollbar { display:none; }
.aj-story { flex:0 0 82px; text-align:center; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
.aj-story-link { display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:pointer; text-align:center; }
.aj-story-ring { position:relative; width:74px; height:74px; margin:0 auto; border-radius:50%; padding:3px; display:block; background:conic-gradient(#e8d5a8,#c6a254,#8a6a38,#e8d5a8,#f0d89a,#c6a254,#e8d5a8); box-shadow:0 6px 16px rgba(88,58,30,.20); }
.aj-story-ring::after { content:""; position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(255,250,245,.6); pointer-events:none; z-index:4; }
.aj-story-ring img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); border-radius:50%; object-fit:cover; z-index:2; display:block; }
.aj-story-ic { position:absolute; inset:3px; display:grid; place-items:center; font-size:26px; color:#e0bd77; background:linear-gradient(145deg,#24180d,#0d0804); border-radius:50%; z-index:1; }
.aj-story-add-badge { position:absolute; right:2px; bottom:2px; z-index:5; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; line-height:1; color:#17110b; background:linear-gradient(135deg,#f0d89a,#c6a254); border:2px solid #fffaf3; box-shadow:0 3px 8px rgba(88,58,30,.35); cursor:pointer; }
.aj-story-label { display:block; max-width:88px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Poppins',sans-serif; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#5f4b35; font-weight:700; }
.gal-grid-new { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 12px 20px; align-items:start; }
.memory-card { width:100%; height:auto; aspect-ratio:1/1; border-radius:16px; overflow:hidden; position:relative; background:#e8dcc8; box-shadow:0 12px 28px rgba(88,58,30,.11); }
.memory-card img, .memory-card video { width:100%; height:100%; object-fit:cover; display:block; }
.memory-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,12,7,.66),transparent 56%); pointer-events:none; }
.memory-info { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; color:white; }
.memory-info b { display:block; font-size:11.5px; }
.memory-info span { display:block; font-size:9.8px; opacity:.8; margin-top:3px; }
.memory-card.voice-memory-card { grid-column:1/-1; width:100%; height:auto; aspect-ratio:auto; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.memory-card.voice-memory-card::after { display:none; }
.voice-guestbook-card { position:relative; width:100%; border-radius:24px; padding:14px; background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.96),transparent 32%),linear-gradient(135deg,#fffaf3 0%,#f3e6d0 58%,#ead7ba 100%); border:1.4px solid rgba(198,162,84,.48); box-shadow:0 16px 38px rgba(88,58,30,.13),inset 0 1px 0 rgba(255,255,255,.88); color:#17110b; overflow:hidden; }
.voice-guestbook-card::before { content:''; position:absolute; inset:1px; border-radius:22px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
.voice-guestbook-card::after { content:'Audio Guestbook'; position:absolute; top:13px; right:16px; font-family:'Poppins',sans-serif; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:rgba(138,104,48,.58); font-weight:700; }
.voice-guestbook-top { position:relative; z-index:2; display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; margin-bottom:10px; }
.voice-guestbook-avatar { width:52px; height:52px; border-radius:19px; display:grid; place-items:center; background:linear-gradient(145deg,#fff4d8,#d2a34a 62%,#8a6830); color:#fffaf3; font-size:23px; box-shadow:0 10px 24px rgba(138,104,48,.22); }
.voice-guestbook-name { min-width:0; padding-right:92px; }
.voice-guestbook-name b { display:block; font-family:'Playfair Display',serif; font-size:17px; color:#17110b; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voice-guestbook-name span { display:block; margin-top:4px; font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#8a6830; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voice-player-row { position:relative; z-index:2; display:grid; grid-template-columns:46px 1fr auto; gap:10px; align-items:center; min-height:48px; padding:8px 10px 8px 8px; border-radius:999px; background:rgba(255,255,255,.52); border:1px solid rgba(184,145,75,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px rgba(88,58,30,.055); }
.voice-play-btn { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#f0d89a,#c69032 62%,#8a6830); color:#fff; font-size:14px; box-shadow:0 8px 18px rgba(138,104,48,.25); }
.voice-play-btn.playing { background:linear-gradient(145deg,#17110b,#3b2a18); color:#f0d89a; }
.voice-wave { display:flex; align-items:center; gap:3px; min-width:0; height:32px; overflow:hidden; }
.voice-wave span { flex:0 0 3px; height:calc(var(--h,12)*1px); border-radius:999px; background:linear-gradient(180deg,#d9ad55,#a97935); opacity:.80; }
.voice-play-btn.playing + .voice-wave span { animation:voiceWaveMove .8s ease-in-out infinite alternate; animation-delay:calc(var(--i,0)*.025s); }
.voice-duration { min-width:39px; padding:6px 8px; border-radius:999px; background:rgba(198,162,84,.12); color:#4f3821; font-size:10.5px; font-weight:700; text-align:center; }
.voice-native-audio { display:none; }
@keyframes voiceWaveMove { from{transform:scaleY(.72);opacity:.55} to{transform:scaleY(1.18);opacity:1} }
.gal-grid-new.notes-mode{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:0 16px 20px;
  width:100%;
}

/* ── NOTE GUESTBOOK CARD ── */
.note-wish-card{
  width:100%;
  max-width:100%;
  min-width:0;

  border-radius:20px;
  background:#fffdf9;
  border:1px solid rgba(184,145,75,.18);
  box-shadow:0 6px 22px rgba(88,58,30,.08);
  padding:14px;

  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:default;
}


.note-wish-body{
  flex:1;
  min-width:0;
}
.note-wish-avatar {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg,#f8eed8,#e8d5a8);
  border:1.5px solid rgba(184,145,75,.32);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:22px; font-weight:700;
  color:#9a7035; flex-shrink:0; position:relative; overflow:hidden;
}
.note-wish-avatar::after {
  content:''; position:absolute; bottom:-2px; right:-2px;
  width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z' fill='none' stroke='%23c6a254' stroke-width='1.2'/%3E%3C/svg%3E") center/cover;
  opacity:.45;
}
/* Floral accent overlay on avatar */
.note-wish-avatar span.note-initial { position:relative; z-index:2; }
.note-wish-body { min-width:0; }
.note-wish-header { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:5px; }
.note-wish-name { font-family:'Poppins',sans-serif; font-size:14px; font-weight:700; color:#17110b; }
.note-wish-time { font-family:'Poppins',sans-serif; font-size:11px; color:#b8914b; font-weight:500; }
.note-wish-time::before { content:'· '; }
.note-wish-msg{
  display:block;
  width:100%;

  font-family:'Poppins',sans-serif;
  font-size:14px;
  line-height:1.65;
  color:#3d2a14;

  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;

  margin-top:4px;
}
  

.note-wish-heart {
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#c6a254; cursor:pointer;
  transition:transform .16s ease, color .16s ease;
  padding:0; margin-top:2px;
}
.note-wish-heart:active { transform:scale(.84); }
.note-wish-heart.liked { color:#c0392b; }
/* Notes tab header banner */
.notes-banner {
  margin:0 16px 14px; padding:16px 18px 14px;
  border-radius:22px;
  background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.96),transparent 30%),linear-gradient(135deg,#fffaf3,#f3e6d0 58%,#ead7ba);
  border:1px solid rgba(184,145,75,.24);
  box-shadow:0 10px 28px rgba(88,58,30,.09);
  text-align:center; display:none;
}
.notes-banner.show { display:block; }
.notes-banner-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:#17110b; letter-spacing:.04em; }
.notes-banner-sub { margin-top:4px; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#b8914b; font-weight:700; }
.notes-banner-divider { margin:10px auto 0; width:80px; height:1px; background:linear-gradient(90deg,transparent,rgba(184,145,75,.55),transparent); }
.album-action-row { position:absolute; right:8px; bottom:8px; z-index:30; display:flex; align-items:center; gap:6px; }
.album-like-btn, .album-download-btn { height:34px; min-width:36px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid rgba(184,145,75,.25); color:#9b6a44; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:4px; text-decoration:none; box-shadow:0 8px 18px rgba(88,58,30,.12); }
button.album-download-btn { font: inherit; }
.album-like-btn small { font-size:10px; }
.album-like-btn.liked { background:#9b6a44; color:#fff; }
.album-video { width:100%; height:100%; object-fit:cover; display:block; background:#17110b; }
.video-badge { position:absolute; top:10px; left:10px; z-index:25; padding:6px 9px; border-radius:999px; background:rgba(23,17,11,.62); border:1px solid rgba(240,216,154,.20); color:#fff7ec; font-size:8.5px; letter-spacing:.14em; font-weight:800; backdrop-filter:blur(10px); }
.conv-badge { position:absolute; bottom:10px; right:10px; z-index:25; padding:6px 9px; border-radius:999px; background:rgba(23,17,11,.62); border:1px solid rgba(255,217,138,.30); color:#ffd98a; font-size:8.5px; letter-spacing:.14em; font-weight:800; backdrop-filter:blur(10px); }
.gal-empty-new { grid-column:1/-1; text-align:center; padding:54px 20px; color:#8a6830; font-family:'Playfair Display',serif; font-style:italic; font-size:17px; }
.bottom-nav { flex-shrink:0; position:relative; left:auto; bottom:auto; transform:none; width:100%; max-width:430px; margin:0 auto; height:72px; border-radius:30px 30px 0 0; background:rgba(255,255,255,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 -8px 28px rgba(88,58,30,.10); border-top:1px solid rgba(184,145,75,.14); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; z-index:40; padding-bottom:max(0px,env(safe-area-inset-bottom,0px)); }
.nav-item { text-align:center; font-size:9.5px; color:#3d3832; }
.nav-item span { display:block; font-size:19px; margin-bottom:3px; }
.nav-item.active { color:#b8914b; }
.capture-nav { width:62px; height:62px; border-radius:50%; background:#17110b; color:white; display:flex; align-items:center; justify-content:center; margin:-34px auto 0; border:4px solid #fffaf3; box-shadow:0 8px 24px rgba(88,58,30,.25); font-size:25px; }

/* ─── NOTES / MESSAGE ─── */
#sm { background:#fff8ee; justify-content:flex-start; align-items:center; padding:0; color:#4a3218; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.note-popup-bg { position:fixed; inset:0; z-index:0; background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.98) 0%,rgba(255,250,242,.84) 34%,rgba(248,232,205,.74) 100%); }
.note-mobile-wrap { position:relative; z-index:2; width:100%; max-width:430px; min-height:100dvh; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 18px); display:flex; flex-direction:column; align-items:center; }
.note-popup-close { position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); left:18px; z-index:8; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.88); border:1px solid rgba(184,145,75,.20); color:#b8914b; font-size:30px; font-weight:200; box-shadow:0 10px 24px rgba(88,58,30,.12); display:grid; place-items:center; }
.note-top-brand { width:100%; text-align:center; padding-top:10px; margin-bottom:12px; }
.note-couple-name { font-family:'Playfair Display',serif; font-size:clamp(34px,10vw,44px); line-height:.95; color:#5a3c1c; }
.note-thankyou { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:9px; font-family:'Poppins',sans-serif; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#8b6b44; }
.note-thankyou::before, .note-thankyou::after { content:'♥'; color:#d1a34f; font-size:13px; letter-spacing:0; }
.note-popup-card { position:relative; z-index:4; width:100%; margin-top:12px; border-radius:34px; padding:50px 18px 20px; text-align:center; background:rgba(255,252,246,.78); border:1.3px solid rgba(218,171,76,.58); box-shadow:0 20px 48px rgba(88,58,30,.16),inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter:blur(14px); animation:noteFloatIn .35s cubic-bezier(.2,.8,.2,1); }
.note-popup-mark { position:absolute; top:-34px; left:50%; transform:translateX(-50%); width:76px; height:76px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#fffdf7,#f6ead2 72%,#ead29e); border:1.8px solid rgba(218,171,76,.72); box-shadow:0 13px 28px rgba(88,58,30,.18); color:#b8914b; font-size:34px; }
.note-popup-title { margin-top:2px; font-family:'Playfair Display',serif; font-size:clamp(28px,9vw,38px); line-height:1; font-weight:700; color:#b8914b; }
.note-gold-divider { width:min(74%,260px); height:18px; margin:12px auto 14px; position:relative; }
.note-gold-divider::before, .note-gold-divider::after { content:""; position:absolute; top:50%; width:42%; height:1px; background:linear-gradient(90deg,transparent,rgba(184,145,75,.55)); }
.note-gold-divider::before { left:0; } .note-gold-divider::after { right:0; transform:scaleX(-1); }
.note-gold-divider span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#d1a34f; font-size:16px; }
.note-popup-sub { margin:0 auto 14px; max-width:300px; font-family:'Poppins',sans-serif; font-size:13px; font-weight:400; line-height:1.7; color:#7a664d; }
.note-textarea-wrap { position:relative; }
.note-gold-textarea { width:100%; min-height:170px; padding:22px 17px 32px; border-radius:22px; border:1.7px solid rgba(218,171,76,.64); outline:none; resize:none; background:linear-gradient(180deg,rgba(255,253,248,.98),rgba(253,243,226,.96)); color:#4a2a12; font-family:'Caveat','Playfair Display',serif; font-size:26px; font-weight:500; line-height:1.23; box-shadow:0 13px 30px rgba(88,58,30,.13),inset 0 1px 0 rgba(255,255,255,.92); }
.note-gold-textarea::placeholder { color:rgba(74,42,18,.84); }
.note-char-count { position:absolute; right:14px; bottom:10px; z-index:2; font-family:'Poppins',sans-serif; font-size:11px; color:#b8914b; font-weight:600; }
.note-name-label { margin:14px auto 8px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Poppins',sans-serif; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#b8914b; }
.note-name-label::before, .note-name-label::after { content:""; width:42px; height:1px; background:linear-gradient(90deg,transparent,rgba(184,145,75,.55)); }
.note-name-label::after { transform:scaleX(-1); }
.note-name-input { width:100%; height:50px; margin:0 0 12px; border-radius:17px; border:1px solid rgba(164,132,86,.28); background:rgba(255,255,255,.68); color:#4a3218; outline:none; text-align:left; padding:0 18px 0 52px; font-family:'Poppins',sans-serif; font-size:14px; box-shadow:0 8px 18px rgba(88,58,30,.08); }
.note-name-input::placeholder { color:rgba(74,50,24,.38); }
.note-name-field { position:relative; }
.note-name-field::before { content:'♙'; position:absolute; left:20px; top:12px; z-index:2; color:#b8914b; font-size:23px; }
.note-popup-meta { margin:5px auto 14px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px dashed rgba(184,145,75,.34); background:rgba(255,250,242,.54); font-family:'Poppins',sans-serif; font-size:11px; color:#b8914b; font-weight:500; }
.note-popup-meta::before { content:'◷'; font-size:15px; }
.note-send-btn { width:100%; min-height:54px; border-radius:22px; background:linear-gradient(135deg,#bd8730 0%,#e1bd62 52%,#b9852d 100%); color:#fffaf3; font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.20em; text-transform:uppercase; box-shadow:0 13px 28px rgba(184,145,75,.34),inset 0 1px 0 rgba(255,255,255,.38); }
.note-add-voice-btn { width:100%; min-height:44px; margin-top:10px; border-radius:999px; border:1px solid rgba(198,162,84,.30); background:rgba(255,250,243,.76); color:#8a6830; font-family:'Poppins',sans-serif; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 10px 22px rgba(88,58,30,.08); }
.note-safe-text { margin:14px 0 0; font-family:'Poppins',sans-serif; font-size:11px; line-height:1.55; color:#806c52; }
.note-safe-text b { color:#b8914b; font-weight:700; }
@keyframes noteFloatIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ─── PROFILE ─── */
#sp { background:linear-gradient(180deg,#fffaf3 0%,#f8efe3 58%,#ead8bd 100%); color:#17110b; display:flex; flex-direction:column; overflow:hidden; align-items:stretch; padding:0; }
.profile-scroll { flex:1 1 0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; width:100%; }
.profile-page { width:min(100%,430px); margin:0 auto; display:flex; flex-direction:column; gap:15px; padding:max(18px,env(safe-area-inset-top)) 16px 24px; }
.profile-hero-card { position:relative; overflow:hidden; border-radius:32px; padding:21px 18px 20px; background:linear-gradient(145deg,rgba(23,17,11,.96),rgba(64,42,24,.94)); border:1px solid rgba(240,216,154,.24); box-shadow:0 22px 55px rgba(88,58,30,.22); color:#fff7ec; }
.profile-mini-label { position:relative; z-index:1; width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; padding:0 18px; border-radius:999px; background:linear-gradient(135deg,#24150d 0%,#4d3724 58%,#755b3f 100%); border:1px solid rgba(240,216,154,.20); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:#f3d99e; font-weight:800; }
.profile-title { position:relative; z-index:1; margin:18px 0 8px; font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(42px,12vw,58px); line-height:.9; color:#fffaf3; font-weight:500; }
.profile-subtitle { position:relative; z-index:1; max-width:310px; font-size:12.5px; line-height:1.65; color:rgba(255,247,236,.74); font-weight:300; }
.profile-signature { position:relative; z-index:1; margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.profile-chip { padding:8px 11px; border-radius:999px; background:rgba(255,250,243,.09); border:1px solid rgba(240,216,154,.17); color:#f3d99e; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.profile-section-card { border-radius:30px; padding:18px; background:rgba(255,255,255,.62); border:1px solid rgba(184,145,75,.16); box-shadow:0 14px 34px rgba(88,58,30,.10); backdrop-filter:blur(16px); }
.profile-section-card h3 { margin:0 0 8px; font-family:'Playfair Display',serif; font-size:21px; font-style:italic; color:#111; font-weight:600; }
.profile-section-card p { margin:0; font-size:12px; line-height:1.7; color:#1f1f1f; }
.profile-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px; }
.profile-service-item { min-height:82px; border-radius:22px; padding:12px 11px; background:linear-gradient(180deg,rgba(255,250,243,.88),rgba(255,255,255,.54)); border:1px solid rgba(184,145,75,.13); }
.profile-service-item b { display:block; font-size:12px; color:#111; margin-bottom:5px; }
.profile-service-item span { display:block; font-size:10.5px; line-height:1.45; color:#1f1f1f; }
.profile-contact-list { display:grid; gap:10px; margin-top:13px; }
.profile-contact-btn { display:grid; grid-template-columns:42px 1fr auto; gap:11px; align-items:center; min-height:60px; padding:9px 12px 9px 9px; border-radius:999px; text-decoration:none; background:#17110b; color:#fffaf3; box-shadow:0 12px 26px rgba(88,58,30,.18); }
.profile-contact-btn.light { background:rgba(255,255,255,.70); border:1px solid rgba(184,145,75,.18); color:#111; }
.profile-contact-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#f0d89a,#b8914b); color:#fff; font-size:17px; }
.profile-contact-text b { display:block; font-size:12px; color:inherit; }
.profile-contact-text span { display:block; margin-top:3px; font-size:10px; color:inherit; opacity:.66; letter-spacing:.08em; text-transform:uppercase; }
.profile-arrow { font-size:20px; opacity:.65; color:inherit; }
.profile-footer-note { text-align:center; font-family:'Playfair Display',serif; font-style:italic; color:#8a6830; font-size:15px; padding:4px 18px 32px; }

/* ─── PHOTO DETAIL MODAL ─── */
.photo-detail-modal { position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.88); backdrop-filter:blur(9px); }
.photo-detail-modal.show { display:flex; }
.photo-detail-box { position:relative; width:min(94vw,430px); max-height:90vh; border-radius:26px; overflow:hidden; background:#070707; box-shadow:0 24px 70px rgba(0,0,0,.62); animation:photoPop .22s ease-out; display:block; }
@keyframes photoPop { from{opacity:0;transform:scale(.96) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.photo-detail-media-wrap { position:relative; width:100%; height:min(80vh,740px); overflow:hidden; background:#050505; }
#photoDetailImg, #photoDetailVideo { width:100%; height:100%; display:none; border-radius:0; background:#050505; }
#photoDetailImg { object-fit:contain; }
#photoDetailVideo { object-fit:cover; aspect-ratio:9/16; }
#photoDetailImg.active, #photoDetailVideo.active { display:block; }
.photo-detail-shadow { position:absolute; left:0; right:0; bottom:0; min-height:34%; padding:64px 18px 18px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.64) 48%,transparent 100%); color:#fff; pointer-events:none; }
.photo-detail-guest { font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:#f0d89a; }
.photo-detail-caption { margin-top:7px; font-family:'Poppins',sans-serif; font-size:13px; line-height:1.55; color:rgba(255,255,255,.94); max-height:96px; overflow:auto; pointer-events:auto; }
.photo-detail-date { margin-top:7px; font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.photo-detail-close { position:absolute; top:12px; right:12px; z-index:5; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:27px; display:grid; place-items:center; backdrop-filter:blur(10px); }
.photo-detail-download { position:absolute; left:12px; top:12px; z-index:5; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font-size:18px; backdrop-filter:blur(10px); }
.photo-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:8; width:46px; height:58px; border-radius:999px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:34px; display:grid; place-items:center; backdrop-filter:blur(10px); }
.photo-nav-prev { left:10px; } .photo-nav-next { right:10px; }
.photo-nav-btn:active { transform:translateY(-50%) scale(.94); opacity:.82; }
.photo-detail-counter { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:7; padding:7px 12px; border-radius:999px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.82); font-family:'Poppins',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; backdrop-filter:blur(10px); }
.memory-card:not(.voice-memory-card) { cursor:pointer; }

/* ─── UTILITIES ─── */
.flash { position:fixed; inset:0; background:white; z-index:600; opacity:0; pointer-events:none; transition:opacity .05s; }
.flash.on { opacity:1; }
.s-toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.84); background:rgba(13,8,4,.97); border:1px solid rgba(198,162,84,.2); border-radius:20px; padding:1.75rem 2.1rem 1.5rem; text-align:center; z-index:500; opacity:0; pointer-events:none; transition:all .36s cubic-bezier(.34,1.56,.64,1); backdrop-filter:blur(18px); min-width:205px; box-shadow:0 8px 44px rgba(0,0,0,.48); }
.s-toast.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.st-ico { font-size:1.85rem; margin-bottom:.32rem; }
.st-ttl { font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; color:rgba(248,228,196,.92); margin-bottom:.15rem; }
.st-sub { font-size:.57rem; font-weight:300; letter-spacing:.13em; text-transform:uppercase; color:rgba(248,238,215,.3); }
.e-bar { position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(8px); background:rgba(140,36,36,.9); color:rgba(255,255,255,.9); padding:.58rem 1.3rem; border-radius:999px; font-size:.7rem; z-index:400; opacity:0; pointer-events:none; transition:all .28s; white-space:nowrap; backdrop-filter:blur(8px); }
.e-bar.on { opacity:1; transform:translateX(-50%) translateY(0); }
.petal { position:fixed; top:-22px; pointer-events:none; z-index:5; opacity:0; animation:petalDrift linear infinite; }
@keyframes petalDrift { 0%{opacity:0;transform:translateY(0) rotate(0deg) translateX(0)} 8%{opacity:.2} 92%{opacity:.08} 100%{opacity:0;transform:translateY(112vh) rotate(640deg) translateX(26px)} }
.hidden { display:none !important; }

/* ── UPLOAD SIZE WARNING ── */
.size-warning { background:rgba(180,60,30,.18); border:1px solid rgba(220,80,40,.35); border-radius:12px; padding:8px 14px; font-family:'Poppins',sans-serif; font-size:.62rem; color:rgba(255,200,180,.92); letter-spacing:.06em; text-align:center; display:none; }
.size-warning.show { display:block; }

/* FORCE notes/message jadi straight comment style */
.gal-grid-new.notes-mode .memory-card.note-wish-card,
.gal-grid-new.notes-mode .note-wish-card{
  grid-column:1 / -1 !important;
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:76px !important;
  width:100% !important;

  border-radius:18px !important;
  padding:13px 14px !important;

  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
}

.gal-grid-new.notes-mode .note-wish-msg{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

/* FIX ONLY TEXT NOTES CARD */
.note-wish-card{
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:78px !important;

  display:flex !important;
  align-items:flex-start !important;

  width:100% !important;
  grid-column:1 / -1 !important;
}

.note-wish-msg{
  width:100% !important;
  line-height:1.6 !important;

  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

/* COMPACT MEMORY NOTE MODAL */
.note-modal-card,
.leave-memory-card,
.memory-note-sheet{
  max-height:92vh !important;
  padding:16px 16px 14px !important;
  border-radius:28px !important;
  overflow:hidden !important;
}

.note-modal-title,
.memory-note-title{
  font-size:42px !important;
  line-height:.95 !important;
  margin-bottom:6px !important;
}

.note-modal-sub,
.memory-note-sub{
  font-size:11px !important;
  margin-bottom:10px !important;
}

.note-modal textarea,
.memory-note-sheet textarea{
  min-height:110px !important;
  max-height:110px !important;

  padding:14px 16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

.note-modal input,
.memory-note-sheet input{
  height:46px !important;
  font-size:14px !important;
}

.note-modal-footer,
.memory-note-footer{
  margin-top:8px !important;
}

.note-modal .btn,
.memory-note-sheet .btn{
  height:46px !important;
}

.note-modal *,
.memory-note-sheet *{
  margin-bottom:0 !important;
}



/* REAL FIX: Compact Leave a Memory popup only */
#notePopup .note-mobile-wrap{
  min-height:100dvh !important;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 16px calc(env(safe-area-inset-bottom,0px) + 10px) !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

#notePopup .note-popup-close{
  top:calc(env(safe-area-inset-top,0px) + 10px) !important;
  left:16px !important;
  width:40px !important;
  height:40px !important;
  font-size:26px !important;
}

#notePopup .note-top-brand{
  padding-top:0 !important;
  margin-bottom:6px !important;
}

#notePopup .note-couple-name{
  font-size:clamp(30px,8.6vw,38px) !important;
  line-height:.9 !important;
}

#notePopup .note-thankyou{
  margin-top:8px !important;
  font-size:8.5px !important;
  letter-spacing:.18em !important;
  gap:7px !important;
}

#notePopup .note-popup-card{
  margin-top:8px !important;
  padding:36px 16px 14px !important;
  border-radius:28px !important;
  max-height:calc(100dvh - 112px) !important;
  overflow:hidden !important;
}

#notePopup .note-popup-mark{
  top:-28px !important;
  width:58px !important;
  height:58px !important;
  font-size:26px !important;
}

#notePopup .note-popup-title{
  font-size:clamp(26px,7.4vw,34px) !important;
  line-height:.95 !important;
  margin-top:0 !important;
}

#notePopup .note-gold-divider{
  height:12px !important;
  margin:8px auto 9px !important;
}

#notePopup .note-popup-sub{
  font-size:11px !important;
  line-height:1.45 !important;
  margin-bottom:10px !important;
}

#notePopup .note-gold-textarea{
  min-height:112px !important;
  height:112px !important;
  padding:14px 15px 26px !important;
  border-radius:18px !important;
  font-size:21px !important;
  line-height:1.25 !important;
}

#notePopup .note-char-count{
  right:12px !important;
  bottom:8px !important;
  font-size:10px !important;
}

#notePopup .note-name-label{
  margin:10px auto 6px !important;
  font-size:8.8px !important;
  letter-spacing:.14em !important;
}

#notePopup .note-name-input{
  height:44px !important;
  margin-bottom:8px !important;
  border-radius:15px !important;
  font-size:13px !important;
  padding-left:48px !important;
}

#notePopup .note-name-field::before{
  top:9px !important;
  font-size:21px !important;
}

#notePopup .note-popup-meta{
  margin:3px auto 10px !important;
  padding:7px 12px !important;
  font-size:10px !important;
}

#notePopup .note-send-btn{
  min-height:46px !important;
  border-radius:18px !important;
  font-size:10.5px !important;
  letter-spacing:.16em !important;
}

#notePopup .note-add-voice-btn{
  min-height:38px !important;
  margin-top:7px !important;
  font-size:9.8px !important;
}

#notePopup .note-safe-text{
  margin-top:8px !important;
  font-size:9.8px !important;
  line-height:1.35 !important;
}

@media(max-height:700px){
  #notePopup .note-couple-name{font-size:30px !important;}
  #notePopup .note-thankyou{display:none !important;}
  #notePopup .note-popup-card{max-height:calc(100dvh - 64px) !important; padding-top:32px !important;}
  #notePopup .note-popup-sub{display:none !important;}
  #notePopup .note-gold-textarea{min-height:96px !important; height:96px !important; font-size:19px !important;}
  #notePopup .note-safe-text{display:none !important;}
}


/* ── LIGHTBOX / SLIDESHOW (additive) ── */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,6,3,.96);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex}
.lb-stage{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;background:#000}
.lb-close{position:absolute;top:14px;right:16px;z-index:10;background:rgba(255,255,255,.08);border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.08);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-caption{color:rgba(248,238,215,.85);font-size:12px;text-align:center;padding:8px 50px;max-height:64px;overflow:auto;letter-spacing:.02em}
.lb-bar{display:flex;align-items:center;gap:10px;color:#c9a96e;font-size:11px;flex-wrap:wrap;justify-content:center}
.lb-btn{background:rgba(201,169,110,.14);border:1px solid rgba(201,169,110,.35);color:#e8d5a0;padding:6px 12px;border-radius:999px;font-size:11px;cursor:pointer;text-decoration:none}
.lb-btn.on{background:#c9a96e;color:#0a0800}
@media print{.lightbox{display:none !important}}
/* ── FRAME STRIP (additive) ── */
.frame-strip{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 18px;width:100%;transition:opacity .22s ease}
.frame-strip::-webkit-scrollbar{display:none}
.frame-thumb{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:transform .18s ease}
.frame-thumb:active{transform:scale(.91)}
.frame-thumb-img{width:54px;height:54px;border-radius:13px;border:2.5px solid rgba(255,255,255,.18);overflow:hidden;background:#1a1a1a;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.38);transition:border-color .18s, box-shadow .18s}
.frame-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.frame-thumb-img.is-none{background:linear-gradient(135deg,#2a1d13,#3b2a1a);display:flex;align-items:center;justify-content:center;font-size:20px}
.frame-thumb.active .frame-thumb-img{border-color:#c9a96e;box-shadow:0 0 0 2px rgba(201,169,110,.45), 0 6px 18px rgba(0,0,0,.4)}
.frame-thumb-label{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;white-space:nowrap}
.frame-thumb.active .frame-thumb-label{color:#f0d89a}
body.boomerang-mode .frame-strip, body.boomerang-mode #frame-overlay, body.boomerang-mode #filter-view, body.boomerang-mode .lens-row{display:none}
/* #frame-overlay is the PNG frame overlay (base styles live near the camera section) */