@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --rose:#C4727A;--blush:#F5E6E8;--cream:#FBF7F0;--gold:#B8965A;--gold-light:#E8D5A8;
  --ink:#2A1F1A;--muted:#7A6B62;--border:rgba(184,150,90,0.25);--section-bg:#FFFCF8;
  --sidebar-w:460px;
}

body{font-family:'Jost',sans-serif;background:#F0EAE2;color:var(--ink);min-height:100vh}

/* ── LAYOUT ── */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{background:#fff;border-right:1px solid var(--border);overflow-y:auto;padding-bottom:3rem;position:relative}
.sidebar-header{padding:1.6rem 2rem 1.4rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#FBF7F0,#fff);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.sidebar-header h1{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:400;color:var(--ink);letter-spacing:.02em}
.sidebar-header p{font-size:.72rem;color:var(--muted);margin-top:3px;letter-spacing:.09em;text-transform:uppercase}

/* Tab nav */
.tab-nav{display:flex;border-bottom:1px solid var(--border);background:#FDFAF7;position:sticky;top:88px;z-index:19}
.tab-btn{flex:1;padding:.7rem .5rem;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:500;border:none;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold);background:#fff}
.tab-btn:hover:not(.active){color:var(--ink)}

.tab-panel{display:none}.tab-panel.active{display:block}

/* Sections */
.section{padding:1.4rem 2rem;border-bottom:1px solid var(--border)}
.section-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:var(--gold-light)}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:.71rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=date],input[type=time],input[type=url],input[type=tel],textarea,select{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;
  font-family:'Jost',sans-serif;font-size:.87rem;color:var(--ink);background:var(--section-bg);
  outline:none;transition:border-color .2s,box-shadow .2s
}
input:focus,textarea:focus,select:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(184,150,90,.1)}
textarea{resize:vertical;min-height:70px}

/* Upload */
.upload-zone{border:1.5px dashed var(--gold-light);border-radius:8px;padding:1.4rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative;overflow:hidden;background:var(--cream)}
.upload-zone:hover{border-color:var(--gold);background:var(--blush)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:1.5rem;margin-bottom:6px;display:block;color:var(--gold)}
.upload-zone p{font-size:.78rem;color:var(--muted)}
.upload-zone strong{color:var(--rose);font-weight:500}
.upload-preview{width:100%;height:130px;object-fit:cover;border-radius:6px;display:none;margin-top:10px}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.gallery-thumb{aspect-ratio:1;object-fit:cover;border-radius:4px;width:100%;cursor:pointer;transition:opacity .2s}
.gallery-thumb:hover{opacity:.75}
.gallery-add{aspect-ratio:1;border:1.5px dashed var(--gold-light);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;color:var(--gold);transition:background .2s;position:relative;overflow:hidden;background:var(--cream)}
.gallery-add input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Theme selector */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.theme-btn{aspect-ratio:3/4;border-radius:8px;cursor:pointer;border:2px solid transparent;overflow:hidden;transition:border-color .2s,transform .2s;position:relative}
.theme-btn:hover{transform:scale(1.05)}
.theme-btn.active{border-color:var(--rose);box-shadow:0 0 0 2px rgba(196,114,122,.3)}
.theme-btn span{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.t-rose{background:linear-gradient(160deg,#F5E6E8,#E8C4CA)}.t-rose span{color:#8B4A52}
.t-garden{background:linear-gradient(160deg,#D4E8C2,#F5E6D0)}.t-garden span{color:#4a7c4e}
.t-royal{background:linear-gradient(160deg,#E8E0F8,#C4B8E8)}.t-royal span{color:#4A3880}
.t-golden{background:linear-gradient(160deg,#FBF7E8,#E8D4A0)}.t-golden span{color:#7A5C1A}
.t-midnight{background:linear-gradient(160deg,#1A1A2E,#16213E)}.t-midnight span{color:#E8D5A8}

/* Event timeline builder */
.event-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.event-item{background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:12px;position:relative}
.event-item-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.event-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.event-name-input{flex:1;font-size:.82rem;font-weight:500;border:none;background:transparent;color:var(--ink);outline:none;padding:0}
.event-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 4px;line-height:1}
.event-remove:hover{color:var(--rose)}
.event-details{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.event-details input{font-size:.8rem;padding:7px 10px}
.add-event-btn{display:flex;align-items:center;gap:6px;border:1.5px dashed var(--gold-light);border-radius:8px;padding:10px 14px;background:transparent;color:var(--gold);font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.06em;cursor:pointer;width:100%;transition:all .2s}
.add-event-btn:hover{border-color:var(--gold);background:var(--cream)}

/* WhatsApp / Music / Map */
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.toggle-label{font-size:.82rem;color:var(--ink)}
.toggle{position:relative;width:40px;height:22px}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ddd;border-radius:22px;cursor:pointer;transition:.3s}
.slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
input:checked+.slider{background:var(--gold)}
input:checked+.slider::before{transform:translateX(18px)}

/* Buttons */
.generate-btn{display:block;width:calc(100% - 4rem);margin:1.5rem 2rem 0;padding:14px;background:linear-gradient(135deg,var(--rose),#B05A62);color:#fff;border:none;border-radius:8px;font-family:'Jost',sans-serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px rgba(196,114,122,.3)}
.generate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(196,114,122,.4)}
.btn-row{display:flex;gap:10px;margin:0.75rem 2rem 0}
.download-btn,.share-btn{flex:1;padding:12px;border-radius:8px;font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .2s}
.download-btn{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.download-btn:hover{background:var(--gold);color:#fff}
.share-btn{background:#25D366;color:#fff;border:none;box-shadow:0 2px 10px rgba(37,211,102,.3)}
.share-btn:hover{background:#1ebe5c;transform:translateY(-1px)}

/* ── PREVIEW ── */
.preview-panel{padding:2rem;overflow-y:auto;display:flex;flex-direction:column;align-items:center;background:#E8E0D5;position:relative}
.preview-top-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:680px;margin-bottom:1.5rem}
.preview-label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.preview-device-toggle{display:flex;gap:6px}
.device-btn{padding:5px 12px;font-size:.7rem;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;font-family:'Jost',sans-serif;transition:all .2s}
.device-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── INVITE CARD ── */
.invite-card{width:100%;max-width:640px;background:#FBF8F3;box-shadow:0 12px 60px rgba(42,31,26,.18),0 2px 10px rgba(42,31,26,.08);position:relative;overflow:hidden;border-radius:3px;transition:max-width .3s}
.invite-card.mobile-view{max-width:375px}
.invite-card::before{content:'';position:absolute;inset:10px;border:1px solid var(--gold-light);pointer-events:none;z-index:2}
.invite-card::after{content:'';position:absolute;inset:13px;border:.5px solid rgba(184,150,90,.15);pointer-events:none;z-index:2}

/* Corner decor */
.corner-decor{position:absolute;z-index:3;opacity:.35}
.corner-decor.tl{top:6px;left:6px}
.corner-decor.tr{top:6px;right:6px;transform:scaleX(-1)}
.corner-decor.bl{bottom:6px;left:6px;transform:scaleY(-1)}
.corner-decor.br{bottom:6px;right:6px;transform:scale(-1)}

/* Hero */
.invite-hero{width:100%;height:320px;object-fit:cover;display:block}
.invite-hero-placeholder{width:100%;height:320px;background:linear-gradient(160deg,var(--blush),var(--gold-light));display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;height:130px;background:linear-gradient(to top,rgba(251,248,243,.95),transparent)}
.hero-wrapper{position:relative}

/* Invite body */
.invite-body{padding:2.5rem 3rem;text-align:center;position:relative;z-index:1}
.invite-top-text{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;margin-bottom:1.2rem}
.invite-names{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;line-height:1.1;color:var(--ink);letter-spacing:.01em}
.invite-ampersand{font-family:'Cormorant Garamond',serif;font-size:2rem;font-style:italic;color:var(--rose);display:block;margin:.3rem 0;font-weight:300}
.divider{display:flex;align-items:center;gap:12px;margin:1.5rem 0;justify-content:center}
.divider::before,.divider::after{content:'';flex:1;max-width:80px;height:.5px;background:var(--gold-light)}
.invite-poem{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:1.5rem;min-height:20px}
.invite-details{display:grid;grid-template-columns:1fr .5px 1fr;gap:0;margin:1.5rem 0}
.detail-sep{background:var(--gold-light);height:100%}
.detail-block{padding:0 1.5rem}
.detail-block:first-child{padding-left:0}
.detail-block:last-child{padding-right:0}
.detail-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;margin-bottom:6px}
.detail-value{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--ink);font-weight:400}
.detail-sub{font-size:.75rem;color:var(--muted);margin-top:2px;font-family:'Jost',sans-serif}

/* ── MULTI-EVENT TIMELINE ── */
.events-section{padding:2rem 2.5rem;background:#FDFAF5;border-top:1px solid var(--gold-light)}
.events-section-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;text-align:center;margin-bottom:1.8rem}
.timeline{position:relative;padding-left:0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gold-light);transform:translateX(-50%)}
.timeline-item{display:flex;align-items:flex-start;gap:0;margin-bottom:2rem;position:relative}
.timeline-item:nth-child(odd){flex-direction:row-reverse}
.tl-content{flex:1;padding:0 2rem}
.tl-content-inner{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px 18px;position:relative;box-shadow:0 2px 12px rgba(42,31,26,.06)}
.tl-dot{position:absolute;left:50%;top:18px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 2px var(--gold-light);transform:translateX(-50%);z-index:1}
.tl-event-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:4px}
.tl-event-time{font-size:.73rem;color:var(--gold);font-family:'Jost',sans-serif;letter-spacing:.06em}
.tl-event-venue{font-size:.78rem;color:var(--muted);margin-top:3px;font-family:'Jost',sans-serif}

/* ── COUNTDOWN ── */
.countdown-section{background:var(--ink);padding:1.8rem 2rem;position:relative}
.countdown-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);font-family:'Jost',sans-serif;text-align:center;margin-bottom:1.2rem}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:360px;margin:0 auto}
.count-block{text-align:center}
.count-num{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;color:#fff;line-height:1;display:block}
.count-unit{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);font-family:'Jost',sans-serif;margin-top:4px;display:block;opacity:.7}

/* ── MAP ── */
.map-section{padding:0 2.5rem 2rem}
.map-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;text-align:center;margin-bottom:1rem}
.map-wrapper{border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative}
.map-wrapper iframe{display:block;width:100%;height:220px;border:none}
.map-placeholder{width:100%;height:180px;background:linear-gradient(135deg,#e8e0d0,#d8d0c8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:.78rem;letter-spacing:.06em;border-radius:8px}
.map-placeholder-icon{font-size:2rem}
.map-directions-btn{display:block;text-align:center;margin-top:10px;padding:10px;background:transparent;border:1px solid var(--gold);border-radius:6px;color:var(--gold);font-family:'Jost',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:all .2s}
.map-directions-btn:hover{background:var(--gold);color:#fff}

/* ── MUSIC PLAYER ── */
.music-player{background:linear-gradient(135deg,rgba(42,31,26,.95),rgba(58,42,10,.9));padding:14px 20px;display:flex;align-items:center;gap:14px;border-top:1px solid rgba(184,150,90,.2)}
.music-disc{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#B8965A,#E8D5A8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;animation:spin 4s linear infinite;animation-play-state:paused;flex-shrink:0}
.music-disc.playing{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.music-info{flex:1;min-width:0}
.music-title{font-size:.8rem;color:#E8D5A8;font-family:'Jost',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-artist{font-size:.68rem;color:rgba(232,213,168,.6);margin-top:1px}
.music-controls{display:flex;align-items:center;gap:8px}
.music-play-btn{width:32px;height:32px;border-radius:50%;background:var(--gold);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .2s;flex-shrink:0}
.music-play-btn:hover{background:#D4A870;transform:scale(1.1)}

/* ── GALLERY ── */
.gallery-section{padding:2rem 2.5rem}
.gallery-section-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;text-align:center;margin-bottom:1.2rem}
.inv-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.gallery-placeholder{width:100%;aspect-ratio:4/3;background:var(--blush);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--muted);letter-spacing:.06em}

/* ── VIDEO ── */
.video-section{padding:0 2.5rem 2.5rem}
.video-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif;text-align:center;margin-bottom:1rem}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:6px;background:var(--ink)}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-placeholder{aspect-ratio:16/9;background:var(--ink);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:rgba(255,255,255,.4);font-size:.75rem;letter-spacing:.06em}
.play-icon{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ── RSVP / WHATSAPP CTA ── */
.rsvp-section{padding:1.8rem 2.5rem 2rem;text-align:center;border-top:1px solid var(--gold-light)}
.rsvp-text{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-style:italic;color:var(--muted);margin-bottom:1rem}
.rsvp-contact{font-size:.8rem;color:var(--ink);font-family:'Jost',sans-serif;letter-spacing:.04em;margin-bottom:1.2rem}
.wa-rsvp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#25D366;color:#fff;border-radius:30px;font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .2s;box-shadow:0 4px 14px rgba(37,211,102,.3)}
.wa-rsvp-btn:hover{background:#1ebe5c;transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,211,102,.4)}
.wa-rsvp-btn svg{width:18px;height:18px}

.invite-footer{padding:1.2rem;text-align:center;background:var(--cream);border-top:.5px solid var(--gold-light)}
.invite-footer p{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-family:'Jost',sans-serif}

/* ── THEME OVERRIDES ── */
.theme-garden .countdown-section{background:#2D4A2A}
.theme-garden .invite-names{color:#2D3A20}
.theme-garden .invite-ampersand,.theme-garden .invite-top-text{color:#5C8B4A}
.theme-garden .detail-label,.theme-garden .gallery-section-label,.theme-garden .events-section-label,.theme-garden .map-label,.theme-garden .video-label,.theme-garden .invite-footer p{color:#5C8B4A}
.theme-garden .wa-rsvp-btn{background:#3A7A30}
.theme-royal .countdown-section{background:#2A1F4A}
.theme-royal .invite-names{color:#1A1230}
.theme-royal .invite-ampersand,.theme-royal .invite-top-text{color:#7B5EA7}
.theme-royal .detail-label,.theme-royal .gallery-section-label,.theme-royal .events-section-label,.theme-royal .map-label,.theme-royal .video-label,.theme-royal .invite-footer p{color:#7B5EA7}
.theme-golden .countdown-section{background:#3A2A0A}
.theme-golden .invite-names{color:#3A2A0A}
.theme-golden .invite-ampersand,.theme-golden .invite-top-text{color:#B8821A}
.theme-golden .detail-label,.theme-golden .gallery-section-label,.theme-golden .events-section-label,.theme-golden .map-label,.theme-golden .video-label,.theme-golden .invite-footer p{color:#B8821A}
.theme-midnight{background:#0D0D1A}
.theme-midnight .invite-body,.theme-midnight .invite-card,.theme-midnight .rsvp-section,.theme-midnight .gallery-section,.theme-midnight .events-section,.theme-midnight .map-section,.theme-midnight .video-section,.theme-midnight .invite-footer{background:#0D0D1A}
.theme-midnight .invite-names,.theme-midnight .tl-event-name,.theme-midnight .detail-value{color:#E8D5A8}
.theme-midnight .invite-poem,.theme-midnight .detail-sub,.theme-midnight .rsvp-text,.theme-midnight .rsvp-contact{color:rgba(232,213,168,.6)}
.theme-midnight .invite-top-text,.theme-midnight .detail-label,.theme-midnight .gallery-section-label,.theme-midnight .countdown-label,.theme-midnight .events-section-label,.theme-midnight .map-label,.theme-midnight .video-label,.theme-midnight .invite-footer p{color:#B8965A}
.theme-midnight .invite-ampersand{color:#9B7ED4}
.theme-midnight::before,.theme-midnight::after{border-color:rgba(184,150,90,.2)}
.theme-midnight .countdown-section{background:#050510}
.theme-midnight .tl-content-inner{background:#1A1A2E;border-color:rgba(184,150,90,.2)}
.theme-midnight .invite-hero-placeholder{background:linear-gradient(160deg,#1A1230,#2A1F4A)}

/* ── ENTRANCE ANIMATIONS ── */
@keyframes fadeInUp    {from{opacity:0;transform:translateY(32px)}       to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown  {from{opacity:0;transform:translateY(-24px)}      to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale {from{opacity:0;transform:scale(.88)}             to{opacity:1;transform:scale(1)}}
@keyframes fadeInLeft  {from{opacity:0;transform:translateX(-24px)}      to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight {from{opacity:0;transform:translateX(24px)}       to{opacity:1;transform:translateX(0)}}
@keyframes floatGently {0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
@keyframes rotateSoft  {from{transform:rotate(-4deg) scale(.95)} to{transform:rotate(0deg) scale(1)}}

/* Card itself */
.invite-card{animation:fadeInScale .75s cubic-bezier(.22,1,.36,1) both}

/* Header hero */
.hero-wrapper{animation:fadeInScale .7s ease .1s both}

/* Body stagger */
.invite-top-text{animation:fadeInDown .6s ease .3s both}
.invite-names   {animation:fadeInUp .9s cubic-bezier(.22,1,.36,1) .45s both}
.invite-ampersand{animation:fadeInScale .55s ease .75s both}
.divider        {animation:fadeInScale .5s ease .85s both}
.invite-poem    {animation:fadeInUp .65s ease .95s both}
.invite-details {animation:fadeInUp .65s ease 1.1s both}

/* Countdown blocks stagger via CSS custom props */
.count-block:nth-child(1){animation:fadeInUp .55s ease 1.15s both}
.count-block:nth-child(2){animation:fadeInUp .55s ease 1.28s both}
.count-block:nth-child(3){animation:fadeInUp .55s ease 1.41s both}
.count-block:nth-child(4){animation:fadeInUp .55s ease 1.54s both}

/* Timeline cards stagger */
.timeline-item:nth-child(1){animation:fadeInLeft  .55s ease 1.2s both}
.timeline-item:nth-child(2){animation:fadeInRight .55s ease 1.35s both}
.timeline-item:nth-child(3){animation:fadeInLeft  .55s ease 1.5s both}
.timeline-item:nth-child(4){animation:fadeInRight .55s ease 1.65s both}
.timeline-item:nth-child(5){animation:fadeInLeft  .55s ease 1.8s both}
.timeline-item:nth-child(6){animation:fadeInRight .55s ease 1.95s both}

/* Map / gallery / video / rsvp */
.map-section   {animation:fadeInUp .5s ease 1.3s both}
.gallery-section{animation:fadeInUp .5s ease 1.25s both}
.video-section {animation:fadeInUp .5s ease 1.35s both}
.rsvp-section  {animation:fadeInUp .5s ease 1.45s both}
.invite-footer {animation:fadeInUp .4s ease 1.55s both}

/* Music disc endless float */
.music-disc.playing{animation:floatGently 2.5s ease-in-out infinite,spin 4s linear infinite}

/* Sidebar header shimmer badge */
.sidebar-header h1::after{
  content:'✦';margin-left:8px;color:var(--gold);
  animation:floatGently 2s ease-in-out infinite;display:inline-block
}

/* ── RE-ANIMATE utility (applied by JS) ── */
.card-animate *{animation-play-state:running}
.invite-card.re-animate{animation:fadeInScale .6s cubic-bezier(.22,1,.36,1) both}

/* ── WEDDING PARTICLE SHOWER ── */
@keyframes particleFall{
  0%  {opacity:1;transform:translateY(-50px) rotate(0deg) translateX(0)}
  85% {opacity:.85}
  100%{opacity:0;transform:translateY(110vh) rotate(var(--spin,320deg)) translateX(var(--drift,30px))}
}
@keyframes particleWave{
  0%,100%{margin-left:0}
  25%{margin-left:12px}
  75%{margin-left:-12px}
}
.wedding-particle{
  position:fixed;top:-60px;pointer-events:none;z-index:9999;
  user-select:none;line-height:1;animation:particleFall linear forwards;
  will-change:transform,opacity;
}

/* Shower button in preview bar */
.shower-btn{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose),var(--gold));
  border:none;cursor:pointer;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(196,114,122,.35);transition:all .22s;
  flex-shrink:0
}
.shower-btn:hover{transform:scale(1.18) rotate(12deg);box-shadow:0 4px 16px rgba(196,114,122,.5)}
.shower-btn:active{transform:scale(.95)}

/* ── PERSON CARDS (sidebar builder) ── */
.person-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.person-card-builder{background:var(--cream);border:1.5px solid var(--border);border-radius:12px;padding:14px 12px;position:relative;transition:border-color .2s}
.person-card-builder:hover{border-color:var(--gold-light)}
.person-card-badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-block;margin-bottom:10px}
.bride-badge{background:#F5E6E8;color:var(--rose)}
.groom-badge{background:#E8F0F8;color:#3A6096}
.person-photo-ring{width:68px;height:68px;border-radius:50%;border:2px dashed var(--gold-light);position:relative;overflow:hidden;cursor:pointer;margin:0 auto 10px;background:var(--blush);display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s}
.person-photo-ring:hover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,90,.12)}
.person-photo-ring input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.person-photo-ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:none}
.person-ph{font-size:1.8rem;pointer-events:none}
.field-group{margin-bottom:8px}
.field-group label{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.field-group input,.field-group select{font-size:.8rem;padding:6px 9px}

/* ── COUPLE PROFILE SECTION (invitation card) ── */
.couple-profile-section{padding:1.6rem 2rem 0.8rem;border-top:1px solid var(--gold-light)}
.couple-profile-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
.profile-card{text-align:center;animation:fadeInUp .6s ease both}
.profile-card:first-child{animation-delay:1s}
.profile-card:last-child{animation-delay:1.1s}
.profile-photo-wrap{width:86px;height:86px;border-radius:50%;overflow:hidden;margin:0 auto 10px;border:2px solid var(--gold-light);background:linear-gradient(135deg,var(--blush),var(--gold-light));display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 16px rgba(196,114,122,.15)}
.profile-photo-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-photo-placeholder{font-size:2rem;line-height:1}
.profile-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--ink);margin-bottom:5px;line-height:1.2}
.profile-relation-tag{display:inline-block;padding:2px 9px;background:var(--gold);color:#fff;font-size:.58rem;border-radius:20px;letter-spacing:.1em;text-transform:uppercase;font-family:'Jost',sans-serif;margin-bottom:7px}
.profile-parents{font-size:.76rem;color:var(--muted);font-family:'Jost',sans-serif;line-height:1.65}
.profile-center-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:38px;gap:5px}
.pcd-line{width:1px;height:36px;background:var(--gold-light)}
.pcd-heart{font-size:1rem;color:var(--rose);animation:floatGently 2s ease-in-out infinite}

/* Theme overrides for profile section */
.theme-midnight .couple-profile-section{border-color:rgba(184,150,90,.15)}
.theme-midnight .profile-name{color:#E8D5A8}
.theme-midnight .profile-parents{color:rgba(232,213,168,.55)}
.theme-midnight .profile-photo-wrap{border-color:rgba(184,150,90,.3)}

/* ── SECTION HEADER TOGGLE ROW ── */
.section-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.section-label-row .section-label{margin-bottom:0}
.section-hint{font-size:.74rem;color:var(--muted);margin-bottom:12px;line-height:1.5}

/* ── VISIBILITY GRID (Design tab) ── */
.vis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vis-item{background:var(--section-bg);border:1px solid var(--border);border-radius:8px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .18s;user-select:none}
.vis-item:hover{border-color:var(--gold);background:var(--cream);transform:translateY(-1px)}
.vis-icon{display:block;font-size:1.3rem;margin-bottom:4px}
.vis-name{display:block;font-size:.65rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-family:'Jost',sans-serif;margin-bottom:5px}
.vis-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:'Jost',sans-serif;background:var(--gold);color:#fff;transition:all .2s}
.vis-badge.off{background:#ddd;color:#999}

/* ── SHARE MODAL ─────────────────────────────────────── */
.share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;backdrop-filter:blur(4px)}
.share-modal-box{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border-radius:16px;padding:2rem 1.8rem;width:min(480px,92vw);
  z-index:10001;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:fadeInScale .35s cubic-bezier(.22,1,.36,1) both
}
.share-modal-icon {font-size:2.8rem;margin-bottom:.6rem}
.share-modal-title{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;color:var(--ink);margin-bottom:.4rem}
.share-modal-sub  {font-size:.84rem;color:var(--muted);margin-bottom:1.2rem}
.share-link-row   {display:flex;gap:8px;margin-bottom:1.2rem}
.share-link-row input{
  flex:1;padding:10px 12px;border:1.5px solid var(--gold-light);border-radius:8px;
  font-family:'Jost',sans-serif;font-size:.82rem;color:var(--ink);background:var(--cream);outline:none
}
.copy-btn{
  padding:10px 16px;background:var(--gold);color:#fff;border:none;border-radius:8px;
  font-family:'Jost',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .2s
}
.copy-btn:hover{background:#9a7a44}
.share-modal-actions{display:flex;gap:10px;margin-bottom:1rem}
.share-wa-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;background:#25D366;color:#fff;border:none;border-radius:8px;
  font-family:'Jost',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .2s
}
.share-wa-btn:hover{background:#1ebe5c}
.share-native-btn{
  flex:1;padding:12px;border:1.5px solid var(--border);background:#fff;
  color:var(--ink);border-radius:8px;font-family:'Jost',sans-serif;
  font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s
}
.share-native-btn:hover{background:var(--cream);border-color:var(--gold)}
.share-modal-note {font-size:.74rem;color:var(--muted);margin-bottom:1rem}
.share-modal-close{
  width:100%;padding:11px;border:1.5px solid var(--border);background:transparent;
  border-radius:8px;font-family:'Jost',sans-serif;font-size:.8rem;color:var(--muted);
  cursor:pointer;transition:all .2s
}
.share-modal-close:hover{background:var(--cream);color:var(--ink)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){.app{grid-template-columns:1fr}.preview-panel{display:none}}
@media(max-width:600px){.sidebar-header h1{font-size:1.3rem}}