/* === CUSTOM STYLES === */
        /* Fallback when Tailwind CDN is unavailable. */
        .hidden { display: none !important; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #2a0202; }
        ::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 4px; }

        .particle { position: fixed; pointer-events: none; z-index: 1; opacity: 0; }
        .petal {
            position: fixed;
            pointer-events: none;
            z-index: 45;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.75;
            will-change: transform;
        }
        .sparkle { position: fixed; width: 8px; height: 8px; background: #d4af37; border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 10px #fadd80, 0 0 20px #c5a028; mix-blend-mode: screen; }
        .cursor-heart {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            line-height: 1;
            text-shadow: none;
            filter: none;
            will-change: transform, opacity;
        }
        .locked-no-select {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        .locked-no-select input,
        .locked-no-select textarea,
        .locked-no-select select,
        .locked-no-select button {
            -webkit-user-select: text;
            -moz-user-select: text;
            user-select: text;
        }
        .admin-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.28);
            border-radius: 0.75rem;
            padding: 0.9rem;
        }
        .admin-value {
            font-family: 'Playfair Display', serif;
            color: #fadd80;
            font-size: clamp(1.35rem, 2.3vw, 1.9rem);
            line-height: 1.05;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        #statTotalAmount {
            font-size: clamp(1.2rem, 2vw, 1.7rem);
            line-height: 1.05;
        }

        /* PRELOADER */
        #preloader { position: fixed; inset: 0; background: #2a0202; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: opacity 0.22s ease; }
        .heartbeat { animation: heartbeat 1.5s infinite; color: #d4af37; font-size: 4rem; }
        @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

        /* TEXT SHIMMER EFFECT */
        .shimmer-text {
            background: linear-gradient(to right, #d4af37 20%, #fff 50%, #d4af37 80%);
            background-size: 200% auto;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
            animation: shine 4s linear infinite;
        }
        @keyframes shine { to { background-position: 200% center; } }

        /* AUDIO VISUALIZER */
        .bar { width: 3px; background: #2a0202; margin: 0 1px; animation: equalizer 1s infinite; }
        .bar:nth-child(1) { height: 10px; animation-delay: 0.1s; }
        .bar:nth-child(2) { height: 15px; animation-delay: 0.2s; }
        .bar:nth-child(3) { height: 20px; animation-delay: 0.3s; }
        .bar:nth-child(4) { height: 12px; animation-delay: 0.4s; }
        @keyframes equalizer { 0%, 100% { height: 10px; } 50% { height: 25px; } }

        /* CURTAIN & STAGE */
        .curtain-container { perspective: 1000px; }
        .curtain-panel {
            background-color: #4a0404;
            background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 15%, rgba(255,255,255,0.05) 25%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.5) 50%), url('https://www.transparenttextures.com/patterns/arabesque.png');
            background-size: 100% 100%, 200px 200px;
            box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
            transform-origin: top center; will-change: transform;
        }
        .curtain-hem { background: linear-gradient(to bottom, #b08d20, #fadd80, #b08d20); box-shadow: 0 0 15px rgba(212,175,55,0.4); }
        .stage-glow { background: radial-gradient(circle, rgba(212,175,55,0.4) 0%, rgba(74,4,4,0) 70%); mix-blend-mode: screen; opacity: 0; }

        /* TICKET & TOAST */
        .ticket-bg { background: radial-gradient(circle at center, #4a0404 0%, #2a0202 100%); border: 2px dashed #c5a028; position: relative; }
        .ticket-bg::before, .ticket-bg::after { content: ''; position: absolute; width: 30px; height: 30px; background-color: #2a0202; border-radius: 50%; top: 50%; transform: translateY(-50%); }
        .ticket-bg::before { left: -17px; } .ticket-bg::after { right: -17px; }
        
        .toast { visibility: hidden; min-width: 250px; background-color: #c5a028; color: #2a0202; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 9999; left: 50%; bottom: 30px; transform: translateX(-50%); font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
        .toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
        @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
        @keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

        .royal-photo-shell {
            position: relative;
            width: min(100%, 19.5rem);
            margin-inline: auto;
            padding: 0.95rem;
            border-radius: 1.35rem;
            background:
                linear-gradient(145deg, #fbe8ad 0%, #d9aa38 42%, #8c641f 100%),
                repeating-linear-gradient(-45deg, rgba(255,255,255,0.09) 0 7px, transparent 7px 14px);
            border: 2px solid rgba(255, 236, 177, 0.85);
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 25px rgba(212,175,55,0.45), inset 0 0 20px rgba(255,244,196,0.4);
            overflow: visible;
        }
        .royal-photo-shell::before {
            content: '';
            position: absolute;
            inset: -10px;
            border: 2px dashed rgba(255, 228, 141, 0.65);
            border-radius: 1.7rem;
            pointer-events: none;
        }
        .royal-photo-shell::after {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: -8px;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(to right, #ffd86b, #f4b71d, #ffd86b);
            box-shadow: 0 0 12px rgba(212,175,55,0.65);
            pointer-events: none;
        }
        
        .frame-flower {
            position: absolute;
            color: #f8d979;
            text-shadow: 0 0 12px rgba(212,175,55,0.65);
            z-index: 2;
            opacity: 0.98;
        }
        .frame-flower-top {
            left: -0.65rem;
            top: -0.95rem;
            font-size: 1.25rem;
            transform: rotate(-12deg);
        }
        .frame-flower-bottom {
            right: -0.7rem;
            bottom: -0.9rem;
            font-size: 1.2rem;
            transform: rotate(16deg);
        }
        .royal-photo-inner {
            position: relative;
            background: linear-gradient(to bottom right, #fff9e6, #f6e2ab);
            border: 3px solid rgba(255, 245, 210, 0.95);
            border-radius: 0.95rem;
            padding: 0.5rem;
            z-index: 1;
            box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5);
        }
        .royal-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.7rem;
            border: 4px solid #fff8df;
            box-shadow: 0 12px 26px rgba(42, 2, 2, 0.45);
            aspect-ratio: 4 / 5;
        }
        .admin-fab {
            position: fixed;
            left: 1rem;
            bottom: 1rem;
            width: 2.9rem;
            height: 2.9rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 225, 136, 0.7);
            background: radial-gradient(circle at 30% 30%, #ffe08b, #d4af37 70%);
            color: #2a0202;
            box-shadow: 0 10px 18px rgba(0,0,0,0.35), 0 0 15px rgba(212,175,55,0.4);
            z-index: 10000;
            pointer-events: auto;
        }
        .admin-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .admin-modal-card {
            width: min(100%, 52rem);
            max-height: 90vh;
            overflow: auto;
            background: #4a0404;
            border: 1px solid rgba(212, 175, 55, 0.5);
            border-radius: 0.95rem;
            padding: 1rem;
        }
        .location-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 1rem;
        }
        .celebrate-modal {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at center, rgba(255, 245, 205, 0.12), rgba(20, 0, 0, 0.72));
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10020;
            padding: 1rem;
            pointer-events: none;
        }
        .celebrate-card {
            width: min(100%, 34rem);
            border-radius: 1.25rem;
            background: transparent;
            border: 0;
            box-shadow: none;
            padding: 1.4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .celebrate-card.celebrate-fullscreen {
            width: 100%;
            height: 100%;
            max-width: none;
            border-radius: 0;
            padding: 2rem;
        }
        .celebrate-core {
            position: relative;
            z-index: 20;
            min-width: 20rem;
            max-width: min(92vw, 35rem);
            padding: 1.1rem 1.3rem;
            border: 1px solid rgba(255, 223, 127, 0.45);
            border-radius: 1rem;
            background: linear-gradient(145deg, rgba(42, 2, 2, 0.84), rgba(103, 14, 14, 0.56));
            box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5), 0 0 45px rgba(250, 221, 128, 0.34);
            backdrop-filter: blur(5px);
        }
        .celebrate-title {
            font-family: "Playfair Display", serif;
            color: #fbe7a8;
            letter-spacing: 0.08em;
            font-size: clamp(1.2rem, 2.2vw, 1.9rem);
            text-transform: uppercase;
            margin-bottom: 0.15rem;
        }
        .celebrate-subtitle {
            font-family: "Lato", sans-serif;
            color: #fff8de;
            font-size: clamp(0.9rem, 1.6vw, 1.15rem);
            margin-bottom: 0.2rem;
        }
        .celebrate-float {
            position: absolute;
            bottom: -80px;
            font-size: 1.35rem;
            pointer-events: none;
            opacity: 0.97;
            animation: floatUpSoft 2.7s cubic-bezier(0.18, 0.63, 0.25, 1) forwards;
        }
        .celebrate-thank {
            font-size: clamp(1.05rem, 2.4vw, 2.1rem);
            letter-spacing: 0.08em;
            font-weight: 800;
            color: #ffefc0;
            text-shadow: 0 0 16px rgba(212, 175, 55, 0.68), 0 0 28px rgba(255, 205, 58, 0.55);
            white-space: nowrap;
            animation-name: thankWave;
            animation-duration: 1.45s;
        }
        .celebrate-thank.from-top {
            top: -50px;
            bottom: auto;
            animation-name: thankWaveDown;
            animation-duration: 1.55s;
        }
        .celebrate-balloon {
            width: 34px;
            height: 45px;
            border-radius: 55% 55% 50% 50%;
            background: radial-gradient(circle at 34% 22%, #fff4cb 0%, #f7cb5f 32%, #d69218 68%, #9a5b09 100%);
            box-shadow: 0 0 14px rgba(255, 208, 88, 0.85);
            position: absolute;
            animation-name: balloonFloat;
            animation-duration: 2.5s;
        }
        .celebrate-balloon.rose {
            background: radial-gradient(circle at 34% 22%, #ffe2e2 0%, #ff9b9b 34%, #ef5858 70%, #9d1d1d 100%);
            box-shadow: 0 0 14px rgba(247, 137, 137, 0.75);
        }
        .celebrate-balloon.royal {
            background: radial-gradient(circle at 34% 22%, #f8f5ff 0%, #b89bff 38%, #6f4dcf 72%, #3e238f 100%);
            box-shadow: 0 0 14px rgba(154, 121, 244, 0.72);
        }
        .celebrate-balloon::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            width: 1.5px;
            height: 26px;
            transform: translateX(-50%);
            background: rgba(255, 253, 208, 0.8);
        }
        .celebrate-balloon::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translate(-50%, -35%);
            width: 7px;
            height: 8px;
            border-radius: 20%;
            background: #f2d495;
        }
        .celebrate-burst {
            font-size: 1.25rem;
            color: #ffe08f;
            opacity: 0;
            animation: burstOut 1s ease-out forwards;
        }
        .celebrate-pop {
            font-size: 1.55rem;
            color: #ffd66b;
            text-shadow: 0 0 10px rgba(255, 214, 107, 0.8);
            animation: popFlash 0.65s ease-out forwards;
        }
        .celebrate-emoji {
            font-size: clamp(1.7rem, 3.8vw, 2.5rem);
            animation-name: emojiRise;
            animation-duration: 1.9s;
        }
        @keyframes floatUpSoft {
            from { transform: translateY(0) scale(0.86); opacity: 0.95; }
            to { transform: translateY(-430px) scale(1.14); opacity: 0; }
        }
        @keyframes thankWave {
            0% { transform: translateY(0) scale(0.7); opacity: 0; }
            20% { transform: translateY(-40px) scale(1.04); opacity: 1; }
            100% { transform: translateY(-320px) scale(1.1); opacity: 0; }
        }
        @keyframes thankWaveDown {
            0% { transform: translateY(0) scale(0.72); opacity: 0; }
            20% { transform: translateY(35px) scale(1.02); opacity: 1; }
            100% { transform: translateY(310px) scale(1.08); opacity: 0; }
        }
        @keyframes balloonFloat {
            0% { transform: translateY(0) scale(0.84); opacity: 0; }
            18% { opacity: 1; }
            75% { transform: translateY(-230px) scale(1.06); opacity: 1; }
            100% { transform: translateY(-310px) scale(0.2); opacity: 0; }
        }
        @keyframes burstOut {
            0% { transform: scale(0.3); opacity: 0; }
            20% { transform: scale(1.2); opacity: 1; }
            100% { transform: translateY(-48px) scale(0.6); opacity: 0; }
        }
        @keyframes popFlash {
            0% { transform: scale(0.4); opacity: 0; }
            25% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1.45); opacity: 0; }
        }
        @keyframes emojiRise {
            0% { transform: translateY(0) scale(0.85) rotate(-4deg); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(-230px) scale(1.28) rotate(8deg); opacity: 0; }
        }
        .gallery-img-container {
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid rgba(212,175,55,0.35);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            position: relative;
        }
        .gallery-img-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(42,2,2,0.65), rgba(42,2,2,0));
            pointer-events: none;
        }
        .gallery-img {
            transition: transform 450ms ease;
        }
        .gallery-img-container:hover .gallery-img {
            transform: scale(1.08);
        }
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 60s linear infinite;
        }
        @media (max-width: 768px) {
            #entryContent > div { padding: 1.4rem; }
            #entryContent h1 { font-size: 2.05rem; line-height: 1.2; }
            #entryContent h2 { font-size: 1.8rem; }
            #openBtn { padding: 0.85rem 1.25rem; font-size: 0.95rem; letter-spacing: 0.12em; }
            .countdown-box { width: 4.4rem; padding: 0.65rem; }
            .countdown-box .text-3xl { font-size: 1.25rem; }
            .timeline-item h3 { font-size: 1.5rem; }
            .royal-photo-shell { width: min(100%, 17rem); }
        }
        @media (max-width: 480px) {
            #musicControl { bottom: 1rem; right: 1rem; }
            .countdown-box { width: 3.9rem; padding: 0.55rem; }
            .countdown-box .text-3xl { font-size: 1.05rem; }
            .timeline-item { margin-bottom: 2.5rem; }
            #rsvpContainer { padding: 1.15rem; }
            #ticketCard { padding: 1rem; }
            .admin-fab { left: 0.75rem; bottom: 0.75rem; width: 2.6rem; height: 2.6rem; }
            .admin-modal { align-items: center; padding: 0.6rem; }
            .admin-modal-card { width: 100%; border-radius: 0.95rem; max-height: 85vh; padding: 0.8rem; }
            #adminWidget .admin-card { padding: 0.75rem; }
            #adminWidget h3 { font-size: 1.35rem; }
            #adminWidget input, #adminWidget button { min-height: 2.75rem; }
        }