body { -webkit-font-smoothing: antialiased; background-color: #f8fafc; }
        html { scroll-behavior: smooth; }

        /* General Views */
        #view-landing, #view-builder, #view-success, #view-invitation-theme1, #view-invitation-theme2, #view-invitation-theme3, #view-invitation-theme4, #view-invitation-theme5, #view-admin { display: none; }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(24px); animation: reveal 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
        .d1 { animation-delay: .15s; } .d2 { animation-delay: .35s; } .d3 { animation-delay: .55s; }
        .d4 { animation-delay: .75s; } .d5 { animation-delay: .95s; } .d6 { animation-delay: 1.15s; }
        @keyframes reveal { to { opacity: 1; transform: translateY(0); } }

        /* Theme 1: Lux (Ivory & Sage) */
        .gold-foil { background: linear-gradient(100deg,#8a6d3b 0%,#d9c29a 25%,#b08d57 50%,#f2e4c6 62%,#a67c46 80%,#8a6d3b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .lux-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin: 1.5rem 0; }
        .lux-divider::before, .lux-divider::after { content:''; height:1px; width:60px; background: linear-gradient(90deg, transparent, #B08D57); }
        .lux-divider::after { background: linear-gradient(90deg, #B08D57, transparent); }
        .paper { background-color:#FFFDF9; background-image: radial-gradient(circle at 18% 12%, rgba(176,141,87,.05), transparent 55%), radial-gradient(circle at 82% 88%, rgba(62,86,65,.05), transparent 55%); }
        .cover-1 { background: radial-gradient(ellipse at top, rgba(176,141,87,.20), transparent 60%), linear-gradient(160deg, #33463a 0%, #263528 55%, #1e2a20 100%); }
        .cd-box-1 { background:rgba(255,255,255,.6); border:1px solid #E7DCC8; }

        /* Theme 2: Royal (Midnight & Gold) */
        .gold-foil-2 { background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .royal-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin: 2rem 0; }
        .royal-divider::before, .royal-divider::after { content:''; height:1px; width:80px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7)); }
        .royal-divider::after { background: linear-gradient(90deg, rgba(212,175,55,0.7), transparent); }
        .cover-2 { background: radial-gradient(circle at center, #0B1221 0%, #050914 100%); }
        .cd-box-2 { background:rgba(30,41,59,0.5); border:1px solid rgba(212,175,55,0.3); backdrop-filter: blur(4px); }
        .glass-panel { background: linear-gradient(145deg, rgba(11,18,33,0.8) 0%, rgba(5,9,20,0.9) 100%); border: 1px solid rgba(212,175,55,0.2); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); backdrop-filter: blur(8px); }

        /* Theme 3: Blush Romance (Dusty Rose & Champagne) */
        .rose-foil { background: linear-gradient(105deg,#9C5A66 0%,#C9A66B 28%,#B76E79 50%,#E8C9C1 66%,#C9A66B 82%,#9C5A66 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .blush-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin: 1.75rem 0; }
        .blush-divider::before, .blush-divider::after { content:''; height:1px; width:70px; background: linear-gradient(90deg, transparent, rgba(183,110,121,0.6)); }
        .blush-divider::after { background: linear-gradient(90deg, rgba(183,110,121,0.6), transparent); }
        .paper-3 { background-color:#FFFCFA; background-image: radial-gradient(circle at 15% 10%, rgba(183,110,121,.06), transparent 55%), radial-gradient(circle at 85% 90%, rgba(201,166,107,.07), transparent 55%); }
        .cover-3 { background: radial-gradient(ellipse at top, rgba(232,201,193,.55), transparent 60%), linear-gradient(160deg, #F3DDD5 0%, #EAC9C0 55%, #E4B9B0 100%); }
        .cd-box-3 { background:rgba(255,255,255,.65); border:1px solid #EAD9D2; box-shadow: 0 6px 18px -12px rgba(156,90,102,.35); }
        .ring-3 { box-shadow: 0 0 0 1px rgba(183,110,121,.25), 0 20px 45px -20px rgba(156,90,102,.45); }

        /* Theme 4: Garden Romance (Botanical & Floral) */
        .floral-foil { background: linear-gradient(100deg,#6B8F71 0%,#C9A55C 25%,#D1728C 50%,#E8C9A0 66%,#6B8F71 85%,#D1728C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .garden-divider { display:flex; align-items:center; justify-content:center; gap:12px; margin: 1.6rem 0; }
        .garden-divider::before, .garden-divider::after { content:''; height:1px; width:56px; background: linear-gradient(90deg, transparent, #D1728C); }
        .garden-divider::after { background: linear-gradient(90deg, #D1728C, transparent); }
        .paper-4 { background-color:#FFFFFF; background-image: radial-gradient(circle at 12% 8%, rgba(209,114,140,.07), transparent 50%), radial-gradient(circle at 88% 92%, rgba(107,143,113,.08), transparent 50%), radial-gradient(circle at 90% 10%, rgba(201,165,92,.06), transparent 45%); }
        .cover-4 { background: radial-gradient(ellipse at top, rgba(232,201,160,.35), transparent 60%), linear-gradient(160deg, #F3EFDD 0%, #EFE3D6 45%, #E9D9DE 100%); }
        .cd-box-4 { background:rgba(255,255,255,.75); border:1px solid #E7E1CE; box-shadow: 0 8px 24px -16px rgba(65,87,63,.35); }
        .ring-4 { box-shadow: 0 0 0 1px rgba(209,114,140,.2), 0 22px 50px -22px rgba(65,87,63,.35); }
        #view-invitation-theme4 .atc-row { border-color:#E7E1CE; }
        #view-invitation-theme4 .atc-time { color:#D1728C; }
        #view-invitation-theme4 .atc-act { color:#3B4A34; }
        .floral-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(209,114,140,.1); color:#D1728C; border:1px solid rgba(209,114,140,.25); }

        /* Floral SVG ornaments (theme4) */
        .floral-corner { color:#6B8F71; }
        .floral-corner .fc-pink { color:#D1728C; }
        .floral-corner .fc-gold { color:#C9A55C; }
        .petal-flower { position:fixed; top:-40px; pointer-events:none; z-index:5; animation:fall linear infinite; }

        /* ============ Theme 5: Modern Plum Elegance (minimalist geometric) ============ */
        .cover-5 { background: radial-gradient(ellipse at 50% 0%, rgba(178,152,193,.35), transparent 55%), linear-gradient(160deg, #F5F3F7 0%, #ECE6F0 55%, #E3DAEA 100%); }
        .paper-5 { background-color:#FDFCFE; background-image: radial-gradient(circle at 90% 8%, rgba(139,123,168,.07), transparent 45%), radial-gradient(circle at 10% 94%, rgba(184,160,126,.07), transparent 45%); }
        .cd-box-5 { background:rgba(253,252,254,.8); border:1px solid #E8E1ED; box-shadow: 0 8px 24px -16px rgba(93,78,109,.4); }
        /* Bingkai emas nipis - ganti corak bunga */
        .frame-5 { position:absolute; inset:14px; border:1px solid rgba(184,160,126,.55); border-radius:1.4rem; pointer-events:none; }
        .frame-5::before { content:''; position:absolute; inset:5px; border:1px solid rgba(139,123,168,.28); border-radius:1.1rem; }
        /* Pembahagi geometri: berlian kecil + garis emas */
        .plum-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin:1.6rem 0; }
        .plum-divider::before, .plum-divider::after { content:''; height:1px; width:52px; background:linear-gradient(90deg, transparent, #B8A07E); }
        .plum-divider::after { background:linear-gradient(90deg, #B8A07E, transparent); }
        .plum-diamond { width:9px; height:9px; transform:rotate(45deg); border:1px solid #8B7BA8; display:inline-block; }
        .plum-foil { background:linear-gradient(100deg,#5D4E6D 0%,#8B7BA8 30%,#B8A07E 52%,#8B7BA8 74%,#5D4E6D 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
        .petal-lavender { position:fixed; top:-40px; width:7px; height:7px; transform:rotate(45deg); background:#B298C1; opacity:.45; pointer-events:none; z-index:5; animation:fall linear infinite; }

        /* RSVP + Wish wall (theme4) */
        .wish-card { background:rgba(255,255,255,.85); border:1px solid #E7E1CE; }
        .wish-input { background:#FAF7EF; border:1px solid #E7E1CE; }
        .wish-input:focus { background:#fff; outline:none; box-shadow:0 0 0 2px rgba(209,114,140,.35); }
        .rsvp-pill { border:1px solid #E7E1CE; cursor:pointer; transition: all .2s; user-select:none; }
        .rsvp-pill.active-hadir { background:#6B8F71; color:#fff; border-color:#6B8F71; }
        .rsvp-pill.active-tidak { background:#D1728C; color:#fff; border-color:#D1728C; }
        .wish-item { border-bottom:1px dashed #E7E1CE; }
        .wish-item:last-child { border-bottom:none; }

        /* RSVP + Wish wall (theme5 - Lavender) */
        #view-invitation-theme5 .wish-card { background:rgba(253,252,254,.9); border:1px solid #E8E1ED; }
        #view-invitation-theme5 .wish-input { background:#F5F3F7; border:1px solid #E8E1ED; }
        #view-invitation-theme5 .wish-input:focus { background:#fff; box-shadow:0 0 0 2px rgba(139,123,168,.35); }
        #view-invitation-theme5 .rsvp-pill { border:1px solid #E8E1ED; }
        #view-invitation-theme5 .rsvp-pill.active-hadir { background:#8B7BA8; color:#fff; border-color:#8B7BA8; }
        #view-invitation-theme5 .rsvp-pill.active-tidak { background:#C395B0; color:#fff; border-color:#C395B0; }
        #view-invitation-theme5 .wish-item { border-bottom:1px dashed #E8E1ED; }

        /* Shared / Utilities */
        /* Elak huruf kaligrafi (nama pengantin) kena crop atas/bawah kerana background-clip:text + line-height ketat */
        .gold-foil, .gold-foil-2, .rose-foil { line-height: 1.35 !important; padding-bottom: 0.16em; }

        /* Aturcara Majlis (event program) */
        .atc-list { display:flex; flex-direction:column; gap:0.65rem; max-width:320px; margin:0 auto; text-align:left; }
        .atc-row { display:flex; align-items:baseline; gap:0.85rem; padding-bottom:0.6rem; border-bottom:1px solid transparent; }
        .atc-row:last-child { border-bottom:none; padding-bottom:0; }
        .atc-time { font-weight:600; white-space:nowrap; min-width:5rem; font-size:0.8rem; letter-spacing:0.02em; }
        .atc-act { flex:1; font-size:0.9rem; line-height:1.35; }
        #view-invitation-theme1 .atc-row { border-color:#E7DCC8; }
        #view-invitation-theme1 .atc-time { color:#B08D57; }
        #view-invitation-theme1 .atc-act { color:#2E3A32; }
        #view-invitation-theme2 .atc-row { border-color:rgba(212,175,55,0.22); }
        #view-invitation-theme2 .atc-time { color:#D4AF37; }
        #view-invitation-theme2 .atc-act { color:#E2E8F0; }
        #view-invitation-theme3 .atc-row { border-color:#EAD9D2; }
        #view-invitation-theme3 .atc-time { color:#B76E79; }
        #view-invitation-theme3 .atc-act { color:#5A4A47; }
        #view-invitation-theme4 .atc-row { border-color:#E7E1CE; }
        #view-invitation-theme4 .atc-time { color:#6B8F71; }
        #view-invitation-theme4 .atc-act { color:#3B4A34; }
        #view-invitation-theme5 .atc-row { border-color:#E8E1ED; }
        #view-invitation-theme5 .atc-time { color:#8B7BA8; }
        #view-invitation-theme5 .atc-act { color:#3A2F47; }
        .shimmer-btn { position:relative; overflow:hidden; }
        .shimmer-btn::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:shimmer 3.2s infinite; }
        @keyframes shimmer { 0%{left:-120%;} 60%{left:130%;} 100%{left:130%;} }
        .spinner { border:3px solid rgba(0,0,0,.1); border-radius:50%; border-top:3px solid #B08D57; width:40px; height:40px; animation:spin 1s linear infinite; }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        /* Particles */
        .petal { position:fixed; top:-40px; color:#D9C29A; opacity:.55; pointer-events:none; z-index:5; animation:fall linear infinite; }
        @keyframes fall { 0% { transform:translateY(-40px) rotate(0deg); opacity:0; } 10% { opacity:.6; } 100% { transform:translateY(105vh) rotate(360deg); opacity:0; } }
        .petal-rose { position:fixed; top:-40px; color:#C97F8A; opacity:.6; pointer-events:none; z-index:5; animation:fall linear infinite; }
        .star { position:fixed; background:#D4AF37; border-radius:50%; pointer-events:none; z-index:5; animation:floatUp linear infinite; box-shadow: 0 0 8px #D4AF37; }
        @keyframes floatUp { 0% { transform:translateY(105vh) scale(0); opacity:0; } 15% { opacity:0.8; scale:1; } 100% { transform:translateY(-10vh) scale(0.2); opacity:0; } }