@font-face{font-family:Bodoni;src:url('/assets/fonts/BodoniModa-normal-400-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Bodoni;src:url('/assets/fonts/BodoniModa-italic-400-latin.woff2') format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Hanken;src:url('/assets/fonts/HankenGrotesk-normal-400-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Hanken;src:url('/assets/fonts/HankenGrotesk-normal-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}

/* Same sunny palette as the classic page (contrast table lives in /style.css). */
:root{
  --base:#FFFDF6;--lemon:#FFF6CF;--powder:#E4F3FF;--paper:#FFFFFF;
  --ink:#1E3A56;--muted:#4F6B85;--blue:#2B6CA3;--line:#2488BF;--hairline:#CFE8FA;
  --baby:#8ACBF5;--sun:#FFD45C;--gold:#A66A00;--error:#C23B3B;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-sheet:cubic-bezier(.32,.72,0,1);
  --tabbar:64px;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;height:100%}
body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--base);color:var(--ink);font:16px/1.5 Hanken,sans-serif}
::selection{background:var(--sun);color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,label{touch-action:manipulation}
button,.button,.answer,.tab,.chip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:1.5px solid var(--line);border-radius:28px;background:var(--paper);color:var(--blue);font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,transform .12s var(--ease-out)}
button:active,.button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){button:hover,.button:hover{background:var(--lemon)}}
.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.primary:hover{background:#15293D}}
button:disabled{opacity:.55;cursor:default}
a{color:var(--blue);text-underline-offset:4px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1:focus,h2:focus{outline:none}
input,textarea,select{width:100%;min-width:0;min-height:50px;padding:11px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);font-size:16px;caret-color:var(--blue)}
input::placeholder,textarea::placeholder{color:#6A8299}
textarea{resize:none;min-height:84px}
h1,h2{font-family:Bodoni,Georgia,serif;font-weight:400;line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hint{font-size:13px;color:var(--muted);margin-top:8px}
.error{color:var(--error);font-size:14px;margin-top:10px}
.error:empty{display:none}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border:0;background:none;color:var(--blue);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){.linkbtn:hover{background:none}}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

/* ---------- App shell: fixed to the visible viewport, three rows ---------- */
.app{position:fixed;inset:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:linear-gradient(180deg,var(--powder) 0%,#F6FBFF 38%,var(--base) 70%)}
.bar-top{display:flex;align-items:center;justify-content:space-between;padding:calc(6px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right)) 6px max(18px,env(safe-area-inset-left))}
.monogram{font:22px Bodoni,serif;display:flex;gap:7px;align-items:center}
.monogram i{color:var(--gold);font-style:italic}
.languages{display:flex;gap:2px;background:rgba(255,255,255,.6);border-radius:22px;padding:2px}
.languages button{min-width:44px;min-height:40px;padding:4px 10px;border:0;background:transparent;font-size:13px;border-radius:20px}
.languages [aria-pressed=true]{background:var(--sun);color:var(--ink)}
.stage{position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -20px;padding:4px 20px 24px;scrollbar-width:none;-webkit-mask:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 18px),transparent)}
.scroll::-webkit-scrollbar{display:none}

/* ---------- Tab bar with a sliding ink pill ---------- */
.tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,253,246,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--hairline);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left));--tab:0}
.tab-ink{position:absolute;top:6px;left:max(8px,env(safe-area-inset-left));width:calc((100% - 2 * max(8px,env(safe-area-inset-left))) / 4);height:52px;padding:0 min(10px,1.6vw);transform:translateX(calc(var(--tab) * 100%));transition:transform .42s var(--ease-out);pointer-events:none}
.tab-ink::before{content:"";display:block;height:100%;border-radius:18px;background:var(--lemon);box-shadow:inset 0 0 0 1.5px var(--sun)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.01em;transition:color .25s}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out)}
.tab[aria-current=page]{color:var(--ink)}
.tab[aria-current=page] svg{transform:translateY(-1px) scale(1.06)}
.tab:active svg{transform:scale(.9)}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--paper);font:700 11px/18px Hanken,sans-serif;text-align:center;animation:pop .4s var(--ease-out)}

/* ---------- 1. Invitation: the couple's photo fills the screen; the card is set on it, over a navy shade ---------- */
/* Photo layer spans the whole app (under both bars) and fades out on the other tabs. */
.bg-photo{position:absolute;z-index:0;inset:0;overflow:hidden;transition:opacity .5s var(--ease-out),visibility .5s;pointer-events:none;background:#11243A}
.bg-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* a light wash at the very top keeps the monogram and language switch readable */
.bg-photo::before{content:"";position:absolute;inset:0 0 auto;height:calc(96px + env(safe-area-inset-top,0px));background:linear-gradient(180deg,rgba(255,253,246,.72),rgba(255,253,246,0));z-index:1}
.app:not([data-screen=invite]) .bg-photo{opacity:0;visibility:hidden}
.bar-top,.stage,.tabs{position:relative;z-index:1}
.invite{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.invite::-webkit-scrollbar{display:none}
#s-invite{padding:0}
/* The shade starts at the card's own top edge, so it always sits exactly behind the text. */
.invite-card{--shade:17,36,58;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1dvh,9px);padding:120px max(20px,env(safe-area-inset-right)) clamp(12px,2.2dvh,20px) max(20px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(var(--shade),0) 0,rgba(var(--shade),.45) 70px,rgba(var(--shade),.74) 150px,rgba(var(--shade),.86) 100%);
  color:#fff;text-shadow:0 1px 2px rgba(8,20,34,.45),0 2px 18px rgba(8,20,34,.4)}
.invite-card :focus-visible{outline-color:#fff}
.invited{font:italic clamp(18px,2.6dvh,23px)/1.2 Bodoni,Georgia,serif;color:#FFF6CF}
.invite h1{font-size:clamp(40px,6.6dvh,58px);letter-spacing:-.03em;line-height:.95;color:#fff}
.invite h1 span{font-style:italic;color:var(--sun);font-size:.7em}
.occasion{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#D6EBFA;font-weight:600}
.when p{font-size:15px;margin-bottom:2px}
.when p>*{white-space:nowrap}
.when{max-width:330px}
.venue-link{display:inline;padding:8px 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
.venue-link svg{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:4px;fill:none;stroke:var(--sun);stroke-width:1.8}
.countdown{display:inline-block;font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px;color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.countdown:empty{display:none}
.invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px;margin-top:clamp(2px,1dvh,8px)}
.invite-actions .primary{background:var(--sun);border-color:var(--sun);color:var(--ink);text-shadow:none}
.invite-actions button:not(.primary){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){.invite-actions .primary:hover{background:#FFE08A}.invite-actions button:not(.primary):hover{background:rgba(255,255,255,.2)}}
.invite-foot{display:flex;gap:6px;justify-content:center;align-items:center}
.invite-foot .linkbtn{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
/* Short phones (iPhone SE 1st gen and similar): drop the decorative line, tighten the rhythm. */
@media (max-height:620px) and (orientation:portrait){
  .invited{display:none}
  .invite-card{gap:3px;padding-top:84px}
  .bar-top{padding-top:calc(2px + env(safe-area-inset-top,0px));padding-bottom:2px}
  .tab{min-height:46px}
  .tab-ink{height:46px}
  .invite h1{font-size:clamp(32px,6.4dvh,40px)}
  .invite-actions .button,.invite-actions button{min-height:44px}
}
/* Phone on its side: the photo fills the left, the card is set over a shade on the right. */
@media (orientation:landscape) and (max-height:540px){
  /* photo on the left 68%; the shade lives on the photo layer so it runs the full height, bars included */
  .bg-photo img{width:68%;object-position:50% 25%}
  .bg-photo::before{width:100%}
  .bg-photo::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(17,36,58,0) 34%,rgba(17,36,58,.7) 50%,#11243A 66%)}
  .invite{justify-content:center;align-items:flex-end}
  .invite-card{width:54%;justify-content:center;gap:4px;padding:6px max(20px,env(safe-area-inset-right)) 6px 12px;background:none}
  .invited{display:none}
  .invite h1{font-size:clamp(28px,9dvh,40px)}
  .invite-actions .button,.invite-actions button{min-height:44px}
  .tab{flex-direction:row;gap:8px;min-height:44px}
  .tab-ink{height:44px}
  .bar-top{padding-top:calc(2px + env(safe-area-inset-top,0px));padding-bottom:2px}
}
/* First reveal: the photo settles in, then the pieces of the card rise one after another. */
.app.ready .bg-photo img{animation:drift 1.8s var(--ease-out) both}
.app.ready #s-invite .st{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms + 260ms)}

/* ---------- 2. RSVP steps ---------- */
.steps,.done{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:14px}
.steps-head{display:flex;align-items:center;gap:12px;min-height:48px}
.icon-btn{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border-color:var(--hairline)}
.icon-btn svg,.close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;gap:6px;flex:1;justify-content:center}
.dots i{width:22px;height:6px;border-radius:3px;background:var(--hairline);transition:background .3s,width .4s var(--ease-out)}
.dots i.on{background:var(--ink);width:30px}
.step-count{min-width:44px;text-align:right;font-size:13px;color:var(--muted)}
.step{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:clamp(8px,3dvh,28px)}
.step h2{font-size:clamp(30px,4.6dvh,40px);margin-bottom:8px}
.lead{color:var(--muted);font-size:15px;margin-bottom:18px}
.lead.small{font-size:14px;margin:4px 0 0}
.answers{display:grid;gap:10px}
.answer{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;margin:0;padding:12px 18px;border:1.5px solid var(--line);border-radius:18px;background:var(--paper);font-size:17px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,transform .15s var(--ease-out)}
.answer:active{transform:scale(.98)}
.answer input{width:22px;height:22px;min-height:22px;flex:none;margin:0;accent-color:var(--ink)}
.answer:has(input:checked){background:var(--sun);border-color:var(--sun)}
.answer:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.party{display:flex;justify-content:center;margin:clamp(10px,3dvh,26px) 0 8px}
.party.inline{justify-content:space-between;align-items:center;gap:12px;margin:16px 0 4px}
.party.inline label{margin:0}
.stepper{display:flex;align-items:center;gap:8px;flex:none}
.stepper button{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:20px}
.stepper input{width:48px;border:0;text-align:center;padding:0;appearance:textfield;-moz-appearance:textfield;background:transparent;font-weight:600}
.stepper input::-webkit-inner-spin-button{appearance:none}
.stepper.big button{width:60px;height:60px;font-size:26px}
.stepper.big input{width:84px;font:56px/1 Bodoni,serif;min-height:64px}
.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;min-height:44px;margin:6px 0 0}
.check input{width:20px;height:20px;min-height:20px;flex:none;accent-color:var(--ink)}
.steps-foot{padding-top:10px}
.steps-foot button{width:100%}
.done{align-items:center;justify-content:center;text-align:center;gap:10px}
.done h2{font-size:clamp(30px,4.6dvh,40px)}
.done>p{color:var(--muted);max-width:34ch}
.done dl{width:100%;max-width:340px;margin:8px 0}
.done dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--hairline);padding:8px 0;font-size:15px}
.done dt{color:var(--muted)}.done dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.done .button{width:100%;max-width:340px}

svg.done-check{width:72px;height:72px;fill:none;stroke-width:3}
svg.done-check circle{stroke:var(--sun);fill:var(--lemon)}
svg.done-check path{stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.done.play svg.done-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease-out) forwards}
.done.play svg.done-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .45s .45s var(--ease-out) forwards}
.done.play>:not(svg){animation:rise .6s var(--ease-out) both;animation-delay:.35s}

/* ---------- 3. Gifts: fixed header + chips, the grid scrolls inside ---------- */
.gifts-head{padding-top:4px}
.gifts-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gifts-title h2{font-size:clamp(30px,4.4dvh,38px)}
.mine-pill{min-height:40px;padding:6px 14px;font-size:13px;background:var(--sun);border-color:var(--sun);color:var(--ink);animation:pop .45s var(--ease-out)}
.available{font-size:13px;color:var(--muted);margin:2px 0 6px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:4px 20px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:6px 15px;font-size:14px;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.gift{color:var(--ink);text-align:left;border:1.5px solid var(--hairline);border-radius:18px;background:var(--paper);padding:8px 8px 10px;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;font-weight:400;box-shadow:0 12px 24px -18px rgba(30,58,86,.4)}
@media (hover:hover) and (pointer:fine){.gift:hover{background:var(--paper);border-color:var(--line)}}
.gift img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--powder);border-radius:12px;padding:6px}
.gift-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.gift-price{margin-top:auto;padding-top:2px;font-size:14px;font-weight:600}
.gift-state{font-size:12px;color:var(--muted)}
.gift.taken{background:#F1F7FC;box-shadow:none}
.gift.taken img{opacity:.6}
.gift.mine{border-color:var(--sun);box-shadow:0 12px 24px -18px rgba(166,106,0,.45)}
.gift.mine .gift-state{align-self:flex-start;background:var(--sun);color:var(--ink);font-weight:700;padding:2px 10px;border-radius:20px}
.gift-grid.pop .gift{animation:rise .55s var(--ease-out) both;animation-delay:calc(var(--i) * 35ms)}
.gift-empty{color:var(--muted);font-size:15px;margin-top:18px}
.covered{margin-top:22px;border-top:1px solid var(--hairline)}
.covered>summary,.find-box>summary{min-height:48px;padding:12px 0;cursor:pointer;font-weight:600;font-size:15px}
.find-box{margin-top:8px;border-bottom:1px solid var(--hairline)}
.find-box>p{font-size:14px;color:var(--muted)}
.find-box .primary{width:100%;margin:12px 0}

/* ---------- 4. Guest book ---------- */
#wishesTitle{font-size:clamp(30px,4.4dvh,38px);margin:4px 0 18px}
.guestbook blockquote{margin:0 0 14px;padding:16px 18px;background:var(--paper);border:1.5px solid var(--hairline);border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere;animation:rise .6s var(--ease-out) both;animation-delay:calc(var(--i) * 60ms)}
.guestbook p{font:19px/1.45 Bodoni,serif}
.guestbook cite{display:block;margin-top:8px;font:600 13px Hanken,sans-serif;color:var(--muted);font-style:normal}

/* ---------- Bottom sheets ---------- */
dialog.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,560px);max-width:100%;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:26px 26px 0 0;padding:16px max(22px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left));background:var(--paper);color:var(--ink);box-shadow:0 -18px 40px -20px rgba(30,58,86,.35)}
dialog.sheet[open]{animation:sheet-in .48s var(--ease-sheet)}
dialog.sheet.closing{animation:sheet-out .26s ease-in forwards}
dialog.sheet::backdrop{background:rgba(30,58,86,.38);backdrop-filter:blur(2px)}
dialog.sheet[open]::backdrop{animation:fade .3s ease-out}
dialog.sheet.closing::backdrop{animation:fade .26s ease-in reverse forwards}
.close{position:sticky;top:0;float:right;z-index:2;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border-color:var(--hairline);background:var(--paper);color:var(--ink);margin:0 -6px 0 10px}
.sheet-title{font-size:28px;margin:6px 0 4px}
.sheet-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;margin-top:4px}
.sheet-thumb{width:72px;height:72px;object-fit:contain;background:var(--lemon);border-radius:14px;padding:6px}
.sheet-head h2{font-size:21px;line-height:1.2;margin-bottom:4px}
.sheet-price{font-weight:600;font-size:15px}
.sheet-note{margin-top:16px;font-size:15px;color:var(--muted)}
.as-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:18px;font-size:15px}
dialog .primary{width:100%;margin-top:14px}
.reserved{display:flex;align-items:center;gap:10px;margin:18px 0 0;font:22px/1.25 Bodoni,Georgia,serif}
.tick{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);position:relative}
.tick::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.reserved.play .tick{animation:pop .5s var(--ease-out) both}
.reserved.play{animation:rise .5s var(--ease-out) both}
.send{background:var(--powder);border-radius:18px;padding:6px 16px 14px;margin:16px 0}
.send-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-top:10px}
.send-opt{padding:12px 0 4px;border-top:1px solid var(--hairline)}
.send-title+.send-opt{border-top:0}
.send-opt p{margin-top:4px;font-size:15px}
address{font-style:normal;margin:4px 0 10px;line-height:1.45}
.send-opt button{min-height:44px;padding:8px 16px;font-size:14px}
.copy-status{margin-left:10px;font-size:13px;color:var(--muted)}
.surprise{background:var(--lemon);border-radius:12px;padding:10px 12px;margin-top:12px!important;font-size:14px!important}
.reminder label{margin-top:4px}
.reminder .hint{margin:0 0 10px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.actions>*{flex:1;min-width:130px}
.actions .primary{margin:0}
.reminder .button{font-size:14px}
a.button[aria-disabled=true]{opacity:.45;pointer-events:none}
.release{margin-top:10px}
.release-confirm{padding-top:12px}
.mine-list{list-style:none;padding:0;margin:8px 0 0}
.mine-list li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--hairline);padding:4px 0}
.mine-row{flex:1;min-width:0;justify-content:flex-start;gap:12px;border:0;padding:6px 0;background:none;color:var(--ink);text-align:left;font-size:15px}
@media (hover:hover) and (pointer:fine){.mine-row:hover{background:none;text-decoration:underline}}
.mine-thumb{width:48px;height:48px;flex:none;object-fit:contain;background:var(--lemon);border-radius:10px;padding:4px}
.cal-list{display:grid;gap:10px;margin-top:14px}
#shareUrl{margin-bottom:4px}

/* ---------- Toast: above the tab bar ---------- */
#toast{position:fixed;z-index:20;left:16px;right:16px;bottom:calc(var(--tabbar) + 16px + env(safe-area-inset-bottom,0px));margin:auto;max-width:460px;background:var(--ink);color:var(--paper);padding:14px 16px;border-radius:16px;font-size:14px;box-shadow:0 14px 30px -10px rgba(30,58,86,.5);animation:rise .4s var(--ease-out)}

/* ---------- Launch splash: envelope frames, then a soft zoom-through into the app ---------- */
.splash{position:fixed;inset:0;z-index:50;background:#EFE9DF;display:grid;place-items:center;overflow:hidden}
.splash img{width:100%;height:100%;object-fit:cover}
.splash.out{animation:through .85s var(--ease-out) forwards;pointer-events:none}
.skip-intro{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom,0px));min-height:44px;padding:8px 18px;background:rgba(255,255,255,.75);border-color:transparent;color:var(--ink);font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drift{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-out{to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes through{to{opacity:0;transform:scale(1.12);filter:blur(6px)}}

/* Large screens (not a phone on its side): keep it a phone-shaped app, centred. */
@media (min-width:700px) and (min-height:640px){
  body{background:radial-gradient(ellipse at 50% 0%,var(--powder),var(--base) 70%)}
  .app{left:50%;right:auto;width:440px;transform:translateX(-50%);top:24px;bottom:24px;height:auto;border-radius:32px;border:1px solid var(--hairline);box-shadow:0 30px 70px -30px rgba(30,58,86,.45);overflow:hidden}
  .tabs{border-radius:0 0 32px 32px}
}

.invite-actions .button{padding:10px 12px;white-space:nowrap;font-size:15px}
.guestbook p.gift-empty{font:15px/1.5 Hanken,sans-serif;color:var(--muted)}

/* Small phones: tab labels fit their highlight; the gifts header gives the grid more room. */
@media (max-width:360px){
  .tab{font-size:10.5px}
  .tab-ink{padding:0 2px}
}
@media (max-height:700px){
  .gifts-title h2{font-size:26px}
  .available{margin:0 0 2px;font-size:12.5px}
  .chips{padding-top:2px;padding-bottom:4px;gap:6px}
  .chip{min-height:40px;padding:4px 13px;font-size:13.5px}
  .gift-grid{margin-top:8px}
}

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