/* Veluve guest app — black & white "editorial" theme, mobile-first PWA.
   Palette is intentionally monochrome for a premium feel; guest PHOTOS stay in
   full colour (the feed is the star). Variable NAMES are kept from the old plum
   theme so the whole app re-skins from these values. */
/* Base = clean light app chrome (white bg, black buttons): code entry, capture.
   The INVITATION screens (welcome / RSVP / details / greeting) are wrapped in
   .inv-theme and re-skin to the host-chosen theme (warm editorial by default).
   The live feed keeps its own immersive near-black background. */
:root{
  --ink:#17161A; --plum:#17161A; --plum-deep:#17161A; --plum-glow:#17161A;
  --gold:#8B8A87; --ivory:#FFFFFF; --rose:#F5F5F3; --rose-line:#E7E6E3;
  --muted:#8B8A87; --card:#FFFFFF; --danger:#B4443A; --onplum:#FFFFFF;
  --serif:"Hoefler Text","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.45;
  background:var(--ivory);
  min-height:100dvh; -webkit-tap-highlight-color:transparent;
}
button{font-family:var(--sans); cursor:pointer}
img{display:block}
.hide{display:none !important}
.boot{padding:80px 20px; text-align:center; color:var(--muted)}

/* centered mobile column */
.shell{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}

/* ---- typography + buttons ---- */
h1,h2,h3{font-family:var(--serif); color:var(--plum-deep); margin:0}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700}
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:15px; border-radius:13px; border:0; font-size:15px; font-weight:700; letter-spacing:.01em}
.btn-plum{background:var(--plum); color:var(--onplum)}
.btn-gold{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn-outline{background:transparent; color:var(--plum); border:1.5px solid var(--rose-line)}
.btn:disabled{opacity:.55}
.btn:focus-visible,input:focus-visible{outline:2px solid var(--plum-glow); outline-offset:2px}
.field{width:100%; padding:14px 15px; border-radius:12px; border:1px solid var(--rose-line); background:var(--card); font-size:16px; color:var(--ink)}
.field::placeholder{color:var(--muted)}
.err{color:var(--danger); font-size:13px; min-height:18px; text-align:center}
.link-btn{background:none; border:0; color:var(--plum); font-weight:600; font-size:14px; padding:8px}

/* ---- code entry / welcome (centered card) ---- */
.center{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px 26px; text-align:center}
.wordmark{font-family:var(--serif); font-size:34px; letter-spacing:.14em; text-transform:uppercase; color:var(--plum-deep); margin-bottom:4px}
.wordmark .v{color:var(--plum)}
.sub{color:var(--muted); font-size:14px; margin-bottom:26px}
.center form{width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px}
.code-input{text-align:center; letter-spacing:.32em; text-transform:uppercase; font-family:"SF Mono",ui-monospace,monospace; font-size:19px}

/* monogram */
.mono{font-family:var(--serif); color:#fff; display:flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(150deg, var(--plum), var(--plum-deep)); font-size:34px; letter-spacing:.02em;
  box-shadow:0 16px 34px -18px rgba(62,23,48,.8); border:2px solid rgba(255,255,255,.15)}
.welcome h1{font-size:27px; line-height:1.2; margin-bottom:6px}
.welcome .prompt{color:var(--muted); font-size:14.5px; margin-bottom:22px; max-width:320px}

/* RSVP cover-photo hero — graphic invitation lead-in (couple/cover image). */
.center.has-hero{justify-content:flex-start; padding-top:0; padding-left:0; padding-right:0}
.center.has-hero > *:not(.rsvp-hero){padding-left:26px; padding-right:26px}
.center.has-hero .prompt{margin-top:18px}
.rsvp-hero{position:relative; width:100%; aspect-ratio:4/5; max-height:440px;
  background-size:cover; background-position:center; overflow:hidden;
  border-radius:0 0 26px 26px; box-shadow:0 20px 46px -20px rgba(0,0,0,.5)}
.rsvp-hero-grad{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.06) 52%, rgba(0,0,0,0))}
.rsvp-hero-cap{position:absolute; left:0; right:0; bottom:0; padding:22px 24px 24px; text-align:center}
.eyebrow-on-photo{color:#fff; opacity:.94}
.rsvp-hero-title{color:#fff; font-family:var(--serif); font-size:31px; line-height:1.06;
  margin-top:7px; text-shadow:0 2px 20px rgba(0,0,0,.55)}
.rsvp-hero-when{color:#fff; opacity:.92; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; margin-top:9px}

/* ---- invitation themes: host-chosen palette, scoped to the invite screens ---
   The app chrome stays B&W; only screens wrapped in .inv-theme re-skin via these
   variable overrides. classic-bw uses the root (B&W) values. */
.inv-theme{background:var(--ivory)}
.inv-theme{--onplum:#FBF8F0}
.inv-theme--classic-bw{--onplum:#FFFFFF}
.inv-theme--sage-floral{
  --ink:#3B3F33; --plum:#6E7B5E; --plum-deep:#414A38; --plum-glow:#8A9678; --onplum:#FBF8F0;
  --gold:#93996F; --ivory:#F6F3EA; --rose:#EAE7D8; --rose-line:#DED9C6; --muted:#7E8270; --card:#FFFDF7}
.inv-theme--ivory-gold{
  --ink:#3A322A; --plum:#B0904E; --plum-deep:#7A5E2E; --plum-glow:#C9B583; --onplum:#2A2118;
  --gold:#A98F52; --ivory:#FBF7EF; --rose:#F0E9DC; --rose-line:#E6DCC6; --muted:#948873; --card:#FFFDF7}
.inv-theme--romantic-plum{
  --ink:#2A1622; --plum:#7C2F55; --plum-deep:#3E1730; --plum-glow:#A6497A; --onplum:#FBF5EF;
  --gold:#B98A47; --ivory:#FBF5EF; --rose:#EBD3DA; --rose-line:#E3C6D0; --muted:#8A7580; --card:#FFFFFF}
/* Warm editorial — the modern default: ivory + sage + a brass hairline accent. */
.inv-theme--warm-editorial{
  --ink:#2A281F; --plum:#5E6B4C; --plum-deep:#3E4733; --plum-glow:#8A9678; --onplum:#FBF8F0;
  --gold:#A6853F; --ivory:#EDE7D8; --rose:#F5F0E4; --rose-line:#E1D9C6; --muted:#8B856F; --card:#FBF8F0}

/* ---- refined invitation components (apply within any theme) ---- */
.inv-theme .btn{border-radius:13px; padding:16px; letter-spacing:.02em}
.inv-theme .field{border-radius:12px; padding:14px 15px; background:#FFFDF7}
.inv-theme .rsvp-form .name-lab{letter-spacing:.16em}
/* segmented Yes / Maybe / No */
.inv-theme .rsvp-choices{gap:5px; background:var(--rose); border:1px solid var(--rose-line);
  border-radius:14px; padding:5px}
.inv-theme .rsvp-choice{border:0; background:transparent; border-radius:10px; padding:12px 0;
  color:var(--plum-deep); font-weight:600; transition:.18s}
.inv-theme .rsvp-choice.on{background:var(--plum); color:#FBF8F0; border-color:var(--plum);
  box-shadow:0 6px 16px -9px var(--plum-deep)}
/* elegant countdown units */
.inv-count{display:flex; justify-content:center; gap:22px; margin-top:16px}
.inv-count .u{text-align:center}
.inv-count .n{font-family:var(--serif); font-size:26px; line-height:1; color:var(--plum-deep); font-variant-numeric:tabular-nums}
.inv-count .l{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.rsvp-hero .inv-count .n{color:#fff}
.rsvp-hero .inv-count .l{color:rgba(255,255,255,.85)}
/* a hairline above the eyebrow reads as "considered" */
.inv-theme .welcome > .eyebrow:first-of-type{position:relative}

/* invitation content cards (Our story / Dress code) shown on the RSVP */
.inv-card{width:100%; max-width:340px; margin:16px auto 0; text-align:left; background:var(--card);
  border:1px solid var(--rose-line); border-radius:16px; padding:16px 18px}
.inv-card-ey{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center}
.inv-card-sub{font-family:var(--serif); font-size:17px; color:var(--plum-deep); text-align:center; margin-top:6px}
.inv-story .inv-card-sub{font-style:italic}
.inv-card-body{font-size:14px; color:var(--ink); line-height:1.6; margin-top:8px; white-space:pre-wrap}
/* Invitation gallery thumbnails (photos stay full colour). */
.inv-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.inv-thumb{padding:0; border:0; background:none; cursor:pointer; display:block; border-radius:12px; overflow:hidden; line-height:0}
.inv-thumb img{width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block; border-radius:12px; background:var(--rose)}
@supports not (aspect-ratio:1/1){.inv-thumb img{height:96px}}
.inv-dress-imgs{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.inv-dress-imgs .inv-thumb{width:76px}
.inv-dress-imgs .inv-thumb img{aspect-ratio:1/1; border-radius:10px}
/* Lightbox overlay — full-screen, tap to close. */
.inv-lightbox{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; transition:opacity .2s ease}
.inv-lightbox.show{opacity:1}
.inv-lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.5)}

.welcome .actions{width:100%; max-width:340px; display:flex; flex-direction:column; gap:11px}
.welcome .name-field{margin-bottom:16px; text-align:center}
.name-lab{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:7px}
.view-feed-link{margin-top:20px}

/* ---- RSVP (shareable invite) ---- */
.rsvp-form{width:100%; max-width:340px; text-align:left; margin-top:6px}
.rsvp-form .name-lab{display:block; margin:14px 0 6px}
.rsvp-form textarea.field{resize:none; min-height:64px; font-family:var(--sans)}
.rsvp-form .btn{margin-top:18px}
.rsvp-choices{display:flex; gap:8px}
.rsvp-choice{flex:1; padding:12px 0; border-radius:12px; border:1.5px solid var(--rose-line);
  background:#fff; color:var(--plum); font-size:14px; font-weight:700}
.rsvp-choice.on{background:var(--plum); color:#fff; border-color:var(--plum)}

/* ---- capture / confirm ---- */
.cap{flex:1; display:flex; flex-direction:column; padding:20px 22px calc(24px + env(safe-area-inset-bottom))}
.cap .cap-h{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.backbtn{border:0; background:transparent; color:var(--plum); font-size:15px; font-weight:600; padding:6px 2px; display:flex; align-items:center; gap:6px}
.preview-wrap{position:relative; border-radius:18px; overflow:hidden; background:var(--plum-deep);
  aspect-ratio:3/4; max-height:52vh; margin:0 auto 16px; width:100%; display:flex; align-items:center; justify-content:center}
.preview-wrap img,.preview-wrap video{width:100%; height:100%; object-fit:contain; background:#161616}
.cap-cap{margin-bottom:14px}
.cap textarea.field{resize:none; min-height:64px; font-family:var(--sans)}
.dl-row{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); margin-bottom:16px; padding:2px}
.dl-row input{width:18px; height:18px; accent-color:var(--plum)}
.progress{height:8px; border-radius:99px; background:var(--rose); overflow:hidden; margin:6px 0 14px}
.progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--plum),var(--gold)); transition:width .2s}
.moderation-note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:12px; display:flex; gap:7px; justify-content:center; align-items:center}

/* sent confirmation */
.sent{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px 28px; text-align:center}
.sent .check{width:74px; height:74px; border-radius:50%; background:#F0EFEC; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:38px; margin-bottom:18px}
.sent h2{font-size:23px; margin-bottom:8px}
.sent p{color:var(--muted); font-size:14px; margin-bottom:24px; max-width:300px}
.sent .actions{width:100%; max-width:320px; display:flex; flex-direction:column; gap:11px}

/* ---- THE FEED — full-screen vertical swipe ---- */
.feed{position:fixed; inset:0; background:#0b0b0b; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch}
.slide{position:relative; height:100dvh; width:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.slide .bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(30px) brightness(.4); transform:scale(1.15)}
.slide img.media,.slide video.media{position:relative; max-width:100%; max-height:100dvh; width:100%; height:100%; object-fit:contain; z-index:1}
.slide .grad{position:absolute; left:0; right:0; bottom:0; height:42%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.82), rgba(10,10,10,0))}
.slide .overlay{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px 20px calc(28px + env(safe-area-inset-bottom)); color:#fff}
.slide .uploader{font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.01em; margin-bottom:4px; text-shadow:0 2px 8px rgba(0,0,0,.5)}
.slide .uploader .badge{font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-left:8px; vertical-align:middle}
.slide .caption{font-size:14.5px; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.6); max-width:88%}
.slide .playhint{position:absolute; z-index:2; width:70px; height:70px; border-radius:50%;
  background:rgba(0,0,0,.4); backdrop-filter:blur(2px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; pointer-events:none}
.slide .playhint.gone{display:none}

/* feed top monogram + progress dots */
.feed-top{position:fixed; top:0; left:0; right:0; z-index:20; padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  display:flex; align-items:center; gap:10px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,10,10,.6), rgba(10,10,10,0))}
.feed-top .fm{width:34px; height:34px; border-radius:50%; background:linear-gradient(150deg,var(--plum),var(--plum-deep));
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:#fff; font-size:14px; flex:0 0 34px; border:1px solid rgba(255,255,255,.2)}
.feed-top .ft-name{color:#fff; font-size:14px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dots{position:fixed; top:0; left:0; right:0; z-index:19; display:flex; gap:3px; padding:calc(6px + env(safe-area-inset-top)) 12px 0}
.dots i{flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.28); max-width:60px}
.dots i.on{background:var(--gold)}
.dots.many i{max-width:none}

/* floating Add button */
.fab{position:fixed; right:18px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:30;
  width:60px; height:60px; border-radius:50%; border:0; background:var(--gold); color:#ffffff;
  font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6)}
.fab:active{transform:scale(.94)}

/* feed empty state */
.feed-empty{position:fixed; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:rgba(255,255,255,.85); padding:30px}
.feed-empty .fe-mono{width:88px; height:88px; border-radius:50%; background:linear-gradient(150deg,var(--plum),var(--plum-deep));
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:#fff; font-size:30px; margin-bottom:20px; border:2px solid rgba(255,255,255,.14)}
.feed-empty h2{color:#fff; font-size:22px; margin-bottom:8px}
.feed-empty p{color:rgba(255,255,255,.65); font-size:14px; margin-bottom:24px}
.feed-empty .btn{max-width:260px}

/* ---- unified feed: per-slide rail + uploader avatar + header chips ---- */
.slide .overlay{right:74px} /* leave room for the action rail */
.slide .uploader{display:flex; align-items:center; gap:9px; margin-bottom:5px; font-family:var(--sans); font-weight:400}
.up-av{width:34px; height:34px; border-radius:50%; flex:none; background-size:cover; background-position:center;
  background-color:var(--plum-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:15px; border:1.5px solid rgba(231,201,138,.6)}
.up-name{font-family:var(--serif); font-size:18px; font-weight:600; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5)}
.up-name .badge{font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-left:8px; vertical-align:middle}

.slide-rail{position:absolute; right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:15px}
.slide-act{border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px}
.slide-act .ic{width:46px; height:46px; border-radius:50%; background:rgba(20,10,16,.5); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px; backdrop-filter:blur(4px); transition:transform .12s}
.slide-act:active .ic{transform:scale(.88)}
.slide-act .n{font-size:11px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); font-variant-numeric:lining-nums}
.slide-act.liked .ic{color:var(--rose); background:rgba(235,211,218,.22)}
.slide-act.add .ic{background:var(--gold); color:#ffffff; font-weight:700}
.slide-act.add .n{color:var(--gold)}
/* reactions: the react button shows your chosen emoji; tapping opens a picker */
.slide-act.react.reacted .ic{background:rgba(255,255,255,.22)}
.react-pop{position:absolute; right:56px; top:0; display:flex; gap:4px; z-index:6;
  background:rgba(20,10,16,.72); backdrop-filter:blur(8px); border-radius:999px; padding:6px 8px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); animation:reactpop .16s ease-out}
@keyframes reactpop{from{opacity:0; transform:translateY(4px) scale(.94)}to{opacity:1; transform:none}}
.react-opt{border:0; background:transparent; font-size:23px; line-height:1; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s}
.react-opt:active{transform:scale(.82)}
.react-opt.on{background:rgba(255,255,255,.22)}

/* header: countdown pill + profile chip */
.feed-top .ft-name{flex:0 1 auto}
.ft-countdown{margin-left:auto; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  background:rgba(20,10,16,.5); padding:5px 10px; border-radius:14px; font-weight:700; white-space:nowrap}
.ft-me{pointer-events:auto; width:34px; height:34px; border-radius:50%; flex:none; margin-left:8px;
  border:1.5px solid rgba(255,255,255,.55); background:linear-gradient(150deg,var(--plum),var(--plum-deep));
  background-size:cover; background-position:center; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center}
.ft-me.has-photo{border-color:var(--gold)}

/* welcome + comment avatars that carry a photo */
.mono.has-photo{background-size:cover; background-position:center; background-color:var(--plum-deep)}
.crow .cav{background-size:cover; background-position:center}

/* profile editor (reuses the comment sheet chrome) */
.prof-body{padding:16px 24px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:12px}
.prof-av{width:96px; height:96px; border-radius:50%; border:2px dashed var(--rose-line); background:var(--ivory);
  background-size:cover; background-position:center; color:var(--plum); font-size:32px; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.prof-av.has-photo{border-style:solid; border-color:var(--gold)}
.prof-av-lab{font-size:12px; color:var(--muted); margin-top:-4px}
.prof-body .field{width:100%; text-align:center}
.prof-body .btn{width:100%}
.prof-note{font-size:12px; color:var(--muted); text-align:center; line-height:1.4}

/* ---- PRE-EVENT STORY REEL (full-screen, IG/TikTok-story style) ---- */
.reel{position:fixed; inset:0; background:#141414; overflow:hidden; touch-action:pan-y}
.reel-photo{position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .35s ease}
.reel-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#141414}
.reel-scrim-top{position:absolute; top:0; left:0; right:0; height:36%; z-index:1;
  background:linear-gradient(180deg, rgba(21,10,18,.65), transparent)}
.reel-scrim-bottom{position:absolute; bottom:0; left:0; right:0; height:58%; z-index:1;
  background:linear-gradient(0deg, rgba(21,10,18,.9), transparent)}
/* segment progress bars */
.reel-segs{position:absolute; top:calc(14px + env(safe-area-inset-top)); left:14px; right:14px; z-index:6; display:flex; gap:5px}
.reel-segs i{flex:1; height:3px; border-radius:3px; background:rgba(251,245,239,.3); overflow:hidden; position:relative}
.reel-segs i.done{background:rgba(251,245,239,.9)}
.reel-segs i.cur{background:rgba(251,245,239,.35)}
.reel-segs i.cur::after{content:""; position:absolute; inset:0; width:var(--seg,0%); background:var(--gold); border-radius:3px}
.reel-segs.many i{min-width:4px}
.reel-top{position:absolute; top:calc(28px + env(safe-area-inset-top)); left:16px; right:16px; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:10px}
.reel-mono{font-family:var(--serif); font-size:21px; color:#fff; letter-spacing:.03em; text-shadow:0 2px 8px rgba(0,0,0,.5); white-space:nowrap}
.reel-mono span{color:var(--rose); margin:0 3px; font-size:15px}
.reel-count{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  background:rgba(20,10,16,.55); padding:6px 12px; border-radius:16px; font-weight:700; white-space:nowrap; flex:none}
/* tap zones for prev/next */
.reel-nav{position:absolute; top:0; bottom:0; width:34%; z-index:4}
.reel-nav.prev{left:0} .reel-nav.next{right:0}
/* right-side action rail */
.reel-rail{position:absolute; right:12px; bottom:calc(118px + env(safe-area-inset-bottom)); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:15px}
.reel-act{border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px}
.reel-act .ic{width:46px; height:46px; border-radius:50%; background:rgba(20,10,16,.5); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px; backdrop-filter:blur(4px); transition:transform .12s}
.reel-act:active .ic{transform:scale(.88)}
.reel-act .n{font-size:11px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); font-variant-numeric:lining-nums}
.reel-act.liked .ic{color:var(--rose); background:rgba(235,211,218,.22)}
.reel-act.add .ic{background:var(--gold); color:#ffffff; font-weight:700}
.reel-act.add .n{color:var(--gold)}
/* uploader + caption */
.reel-meta{position:absolute; left:16px; right:76px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:6}
.reel-who{display:flex; align-items:center; gap:9px}
.reel-av{width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; flex:none;
  border:1.5px solid rgba(231,201,138,.6); background-color:var(--plum-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:14px}
.reel-name{font-size:14px; font-weight:700; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.6)}
.reel-cap{margin:9px 0 0; font-size:13.5px; line-height:1.42; color:rgba(251,245,239,.94); text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* bottom comment bar */
.reel-commentbar{position:absolute; left:14px; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:6;
  display:flex; align-items:center; gap:9px; background:rgba(20,10,16,.5); border:.5px solid rgba(251,245,239,.22);
  border-radius:24px; padding:12px 16px; color:rgba(251,245,239,.62); font-size:13.5px; backdrop-filter:blur(6px)}
/* empty pre-event state */
.reel-empty{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; color:#fff}
.reel-empty .rc{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700;
  background:rgba(20,10,16,.5); padding:7px 14px; border-radius:18px; margin-bottom:22px}
.reel-empty h2{color:#fff; font-size:24px; margin-bottom:10px}
.reel-empty p{color:rgba(255,255,255,.7); font-size:14px; margin-bottom:26px; max-width:300px}
.reel-empty .btn{max-width:260px}

/* comment sheet (reel + feed) */
.csheet-scrim{position:fixed; inset:0; z-index:120; background:rgba(10,4,8,.55); opacity:0; transition:opacity .2s}
.csheet-scrim.show{opacity:1}
.csheet{position:fixed; left:0; right:0; bottom:0; z-index:121; background:var(--ivory);
  border-radius:20px 20px 0 0; max-height:76dvh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.25,1); padding-bottom:env(safe-area-inset-bottom)}
.csheet.show{transform:translateY(0)}
.csheet-grab{width:40px; height:4px; border-radius:99px; background:var(--rose-line); margin:10px auto 4px}
.csheet-h{font-family:var(--serif); color:var(--plum-deep); font-size:17px; padding:6px 20px 10px; border-bottom:1px solid var(--rose-line)}
.csheet-list{flex:1; overflow-y:auto; padding:8px 20px; -webkit-overflow-scrolling:touch}
.csheet-empty{color:var(--muted); font-size:14px; text-align:center; padding:30px 10px}
.crow{display:flex; gap:10px; padding:9px 0}
.crow .cav{width:30px; height:30px; border-radius:50%; background:linear-gradient(150deg,var(--plum),var(--plum-deep));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:13px; flex:none}
.crow .cbody .cn{font-size:13px; font-weight:700; color:var(--plum-deep)}
.crow .cbody .ct{font-size:14px; color:var(--ink)}
.csheet-compose{display:flex; gap:9px; padding:12px 16px; border-top:1px solid var(--rose-line); background:#fff}
.csheet-compose input{flex:1; padding:12px 14px; border-radius:22px; border:1px solid var(--rose-line); font-size:16px; background:var(--ivory)}
.csheet-compose button{border:0; background:var(--plum); color:#fff; border-radius:22px; padding:0 18px; font-weight:700; font-size:14px}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:11px 18px; border-radius:12px; font-size:13.5px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); z-index:200; opacity:0; transition:opacity .2s; pointer-events:none}
.toast.show{opacity:1}

/* "Powered by Veluve" — free-event branding (Premium hides it in JS) */
.powered-by{margin-top:22px; font-size:11px; letter-spacing:.06em; color:var(--muted); opacity:.85}
.powered-by .pv-mark{font-family:var(--serif); color:var(--plum); letter-spacing:.1em; text-transform:uppercase; font-weight:600}
/* On the dark feed: a tiny top-left corner mark, clear of caption + rail. */
.feed-powered{position:fixed; z-index:18; top:calc(52px + env(safe-area-inset-top)); left:16px;
  font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.62); text-shadow:0 1px 4px rgba(0,0,0,.55); pointer-events:none}
.feed-powered b{font-family:var(--serif); font-weight:600; color:var(--gold); letter-spacing:.1em; text-transform:uppercase}

/* ---- seating: "your table" pill ---- */
.tp-host:empty{display:none}
.tp-host{margin:12px 0 0; display:flex; justify-content:center}
.table-pill{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--plum-deep); background:rgba(195,154,91,.16); border:1px solid rgba(195,154,91,.45);
  border-radius:999px; padding:7px 14px; line-height:1.2}
.table-pill b{font-weight:800; color:var(--plum)}
.table-pill .tp-ic{font-size:14px}
.table-pill.pending{color:var(--plum); background:rgba(124,47,85,.1); border-color:rgba(124,47,85,.28)}
/* On the feed, float it centered just under the top bar, over the media. */
.tp-feed{position:fixed; z-index:19; left:0; right:0; top:calc(56px + env(safe-area-inset-top));
  margin:0; pointer-events:none}
.tp-feed .table-pill{background:rgba(20,10,16,.62); border-color:rgba(255,255,255,.18); color:#fff;
  backdrop-filter:blur(4px); text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tp-feed .table-pill b{color:var(--gold)}

/* ---- event details (schedule / info / FAQ) ---- */
.details{flex:1; display:flex; flex-direction:column; padding:16px 22px calc(40px + env(safe-area-inset-bottom))}
.dt-head{display:flex; align-items:center; margin-bottom:6px}
.dt-hero{text-align:center; padding:6px 4px 22px}
.dt-hero .mono{width:76px; height:76px; font-size:28px; margin-bottom:14px}
.dt-title{font-size:26px; line-height:1.2; margin-top:6px}
.dt-venue{color:var(--muted); font-size:14px; margin-top:8px}
.dt-card{background:var(--card); border:1px solid var(--rose-line); border-radius:16px;
  padding:20px 20px; margin-bottom:16px; box-shadow:0 10px 30px -22px rgba(62,23,48,.5)}
.dt-h{font-family:var(--serif); color:var(--plum-deep); font-size:19px; margin-bottom:14px}
.dt-sub{font-family:var(--serif); color:var(--plum); font-size:16px; margin:0 0 6px}
.dt-info + .dt-info{margin-top:18px; padding-top:18px; border-top:1px solid var(--rose-line)}
.dt-text{color:var(--ink); font-size:14.5px; line-height:1.55; margin:0; white-space:pre-wrap}

/* schedule timeline */
.sched-row{display:flex; gap:14px; padding:10px 0; position:relative}
.sched-row + .sched-row{border-top:1px solid var(--rose-line)}
.sched-time{flex:0 0 74px; font-family:var(--serif); font-size:14px; font-weight:700; color:var(--plum); padding-top:1px}
.sched-body{flex:1}
.sched-title{font-size:15px; font-weight:700; color:var(--plum-deep)}
.sched-note{font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.45}
.sched-private{display:inline-block; margin-left:8px; vertical-align:middle; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; color:var(--muted); background:var(--rose);
  border:1px solid var(--rose-line); border-radius:99px; padding:2px 8px}

/* ---- cohesive invitation "The details" section (RSVP screen) ---- */
.inv-details-sec{width:100%; max-width:340px; margin:26px auto 0; text-align:left;
  border-top:1px solid var(--rose-line); padding-top:6px}
.inv-sec-ey{font-family:var(--serif); font-size:20px; color:var(--plum-deep);
  text-align:center; margin:18px 0 4px}
/* cards inside flow together with a tighter, consistent rhythm */
.inv-details-sec .inv-card{margin-top:14px}
.inv-details-sec .link-btn{display:block; margin:18px auto 0}
.inv-rsvp-card .inv-card-ey{margin-bottom:2px}
.inv-rsvp-card .rsvp-form{margin-top:4px}

/* schedule grouped by date (used on both the RSVP details + the details screen) */
.inv-sched{margin-top:12px}
.inv-sched-day{font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding-bottom:8px; margin-top:16px;
  border-bottom:1px solid var(--rose-line)}
.inv-sched-day:first-child{margin-top:0}
.inv-sched-row{display:flex; gap:14px; padding:11px 0; align-items:baseline}
.inv-sched-row + .inv-sched-row{border-top:1px solid var(--rose-line)}
.inv-sched-time{flex:0 0 68px; font-family:var(--serif); font-size:14px; font-weight:700;
  color:var(--plum); white-space:nowrap}
.inv-sched-main{flex:1}
.inv-sched-title{font-size:15px; font-weight:700; color:var(--plum-deep)}
.inv-sched-note{font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.45}

/* FAQ */
.faq-row{padding:12px 0}
.faq-row + .faq-row{border-top:1px solid var(--rose-line)}
.faq-q{font-size:15px; font-weight:700; color:var(--plum-deep); margin-bottom:5px}
.faq-a{font-size:14px; color:var(--ink); line-height:1.5; white-space:pre-wrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}