/* ═══════════════════════════════════════════════════════════════
   ROMANTIC SCRAPBOOK — style.css
   Watercolor · Polaroid · Handwritten · Dreamy
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Variables & Reset ── */
:root {
    --bg: #fdf0eb;
    --accent: #c4706b;
    --accent-dark: #a85550;
    --secondary: #e8b4b0;
    --text: #3d1f1f;
    --text-light: #6b4040;
    --card-bg: #fff8f5;
    --deco-color: #d4908c;
    --border: rgba(196,112,107,0.2);
    --font-display: 'Playfair Display', Georgia, serif;
    --font-hand: 'Dancing Script', cursive;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --ease: cubic-bezier(0.25,1,0.5,1);
    --transition-theme: 0.6s ease-in-out;
}

body.midnight-mode {
    --bg: #0b1226;
    --accent: #c8a96e;
    --accent-dark: #a08040;
    --secondary: rgba(200,169,110,0.3);
    --text: #a8b8d8;
    --text-light: #8898b8;
    --card-bg: rgba(255,255,255,0.06);
    --deco-color: #c8a96e;
    --border: rgba(200,169,110,0.15);
}

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

html{
    scroll-behavior:smooth;
    font-size:16px;
    background:var(--bg);
}

body{
    font-family:var(--font-body);
    color:var(--text);
    background:var(--bg);
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.7;
    transition:background var(--transition-theme),color var(--transition-theme);
}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--deco-color);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ── 2. Watercolor Background ── */
.scrapbook-bg{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    z-index:-2;overflow:hidden;pointer-events:none;
}

.watercolor-blob{
    position:absolute;border-radius:50%;
    filter:blur(80px);opacity:0.18;
    animation:floatSlow 20s infinite alternate ease-in-out;
    transition:background var(--transition-theme),opacity var(--transition-theme);
}
.blob-1{top:-10%;left:-5%;width:55vw;height:55vw;background:radial-gradient(circle,#f0c4c0 0%,transparent 70%);animation-duration:22s;}
.blob-2{bottom:-15%;right:-10%;width:50vw;height:50vw;background:radial-gradient(circle,#e8b4b0 0%,transparent 70%);animation-duration:28s;animation-direction:alternate-reverse;}
.blob-3{top:40%;left:60%;width:35vw;height:35vw;background:radial-gradient(circle,#fde8e0 0%,transparent 70%);animation-duration:25s;opacity:0.12;}
.blob-4{top:20%;right:40%;width:40vw;height:40vw;background:radial-gradient(circle,#d4908c 0%,transparent 70%);animation-duration:30s;opacity:0.08;}

body.midnight-mode .blob-1{background:radial-gradient(circle,rgba(45,27,78,0.5) 0%,transparent 70%);}
body.midnight-mode .blob-2{background:radial-gradient(circle,rgba(10,37,96,0.5) 0%,transparent 70%);}
body.midnight-mode .blob-3{background:radial-gradient(circle,rgba(200,169,110,0.15) 0%,transparent 70%);}
body.midnight-mode .blob-4{background:radial-gradient(circle,rgba(100,130,200,0.1) 0%,transparent 70%);}

/* Star map */
.star-map-container{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:95vw;height:95vh;max-width:1100px;max-height:1100px;
    pointer-events:none;z-index:-2;opacity:0;visibility:hidden;
    transition:opacity 0.8s,visibility 0.8s;
}
body.midnight-mode .star-map-container{opacity:0.7;visibility:visible;}
.star-map-svg{width:100%;height:100%;}

.nebula-layer{
    position:absolute;top:0;left:0;width:100%;height:100%;
    pointer-events:none;opacity:0;transition:opacity var(--transition-theme);
}
body.midnight-mode .nebula-layer{opacity:0.35;}
.nebula-layer::before,.nebula-layer::after{
    content:'';position:absolute;border-radius:50%;filter:blur(120px);
    mix-blend-mode:screen;pointer-events:none;
}
.nebula-layer::before{top:15%;left:20%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(45,27,78,0.6) 0%,transparent 70%);}
.nebula-layer::after{bottom:10%;right:15%;width:50vw;height:50vw;background:radial-gradient(circle,rgba(10,37,96,0.6) 0%,transparent 70%);}

/* Corner flowers */
.corner-flower{
    position:fixed;width:120px;height:120px;z-index:-1;pointer-events:none;
    opacity:0.35;animation:floatSlow 14s infinite alternate ease-in-out;
    transition:opacity var(--transition-theme);
}
.corner-tl{top:0;left:0;}
.corner-tr{top:0;right:0;animation-delay:-3s;}
.corner-bl{bottom:0;left:0;animation-delay:-6s;}
.corner-br{bottom:0;right:0;animation-delay:-9s;}
body.midnight-mode .corner-flower{opacity:0.12;}

/* ── 3. Floating Hearts, Sparkles, Petals ── */
.floating-hearts-container,.falling-texts-container,.sparkles-container,.petal-container{
    position:fixed;top:0;left:0;width:100%;height:100%;
    z-index:1;pointer-events:none;overflow:hidden;
}

.floating-heart{
    position:absolute;bottom:-30px;font-size:1rem;
    animation:heartFloat var(--dur,20s) linear forwards;
    opacity:0.6;
}

.falling-text{
    position:absolute;top:-40px;
    font-family:var(--font-hand);font-style:italic;
    font-weight:500;color:var(--accent);white-space:nowrap;
    pointer-events:none;
    animation:textFall var(--dur,20s) linear forwards;
}

.sparkle-dot{
    position:absolute;width:3px;height:3px;border-radius:50%;
    background:var(--accent);
    animation:twinkle var(--dur,3s) ease-in-out forwards;
}

.petal{
    position:absolute;top:-20px;
    background:var(--card-bg);
    border-radius:50% 0 50% 50%;opacity:0.7;
    animation:petalFall var(--fall-dur,18s) linear infinite;
    will-change:transform;
}
body.midnight-mode .petal{background:rgba(200,169,110,0.3);}

/* ── 4. Login Overlay ── */
#loginOverlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    z-index:9999;display:flex;align-items:center;justify-content:center;
    background:var(--bg);
    transition:opacity 0.8s ease,visibility 0.8s ease;
}
#loginOverlay.hidden{opacity:0;pointer-events:none;visibility:hidden;}

.login-scene{
    position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2rem;
    width:100%;height:100%;
}

/* Background flowers */
.login-bg-flowers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;}
.bg-flower{position:absolute;font-size:1.5rem;opacity:0.3;animation:floatSlow 12s infinite alternate ease-in-out;}
.f1{top:10%;left:8%;animation-delay:0s;}
.f2{top:15%;right:12%;animation-delay:-2s;font-size:1.2rem;}
.f3{bottom:20%;left:15%;animation-delay:-4s;}
.f4{bottom:12%;right:8%;animation-delay:-6s;font-size:1rem;}
.f5{top:50%;left:5%;animation-delay:-3s;font-size:1rem;}
.f6{top:40%;right:6%;animation-delay:-5s;font-size:1.3rem;}

/* Soft clouds */
.soft-cloud{
    position:absolute;border-radius:50%;pointer-events:none;
    background:rgba(232,180,176,0.15);
    animation:cloudDrift 30s linear infinite;
}
body.midnight-mode .soft-cloud{background:rgba(100,130,200,0.08);}
.cloud-a{width:200px;height:80px;top:20%;left:-100px;box-shadow:60px -20px 0 20px rgba(232,180,176,0.12),120px 10px 0 10px rgba(232,180,176,0.08);animation-duration:35s;}
.cloud-b{width:160px;height:60px;top:60%;left:-80px;box-shadow:40px -15px 0 15px rgba(232,180,176,0.1);animation-duration:45s;animation-delay:-15s;}
.cloud-c{width:180px;height:70px;top:35%;left:-90px;box-shadow:50px -10px 0 18px rgba(232,180,176,0.1),100px 5px 0 8px rgba(232,180,176,0.06);animation-duration:40s;animation-delay:-25s;}

/* ── 4. 3D Envelope & Login Form ── */
.envelope-wrapper {
    position: relative;
    width: 220px;
    height: 160px;
    perspective: 1000px;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s var(--ease);
}
.envelope-wrapper:hover {
    transform: scale(1.03);
}
.envelope-wrapper:not(.opened) {
    animation: envelopeFloat 3s infinite ease-in-out alternate;
}

.envelope {
    position: relative;
    width: 220px;
    height: 160px;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease);
}

.envelope-back-3d {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.env-back-svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.envelope-letter {
    position: absolute;
    top: 10px; left: 15px;
    width: 190px; height: 140px;
    background: #fffdfb;
    border: 1px solid rgba(196, 112, 107, 0.12);
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(0) rotate(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.letter-content {
    text-align: center;
}
.letter-flower {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 2px;
}
.letter-title {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--accent);
    line-height: 1.2;
    margin-bottom: 2px;
}
.letter-text {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-light);
    font-style: italic;
    opacity: 0.8;
}

.envelope-front-3d {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none;
}
.env-front-svg {
    width: 100%; height: 100%;
    display: block;
}

.envelope-flap-3d {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: top center;
    z-index: 4;
    transform-style: preserve-3d;
    pointer-events: none;
}
.env-flap-svg {
    width: 100%; height: 100%;
    display: block;
}

.wax-seal-3d {
    position: absolute;
    top: 62px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    z-index: 5;
    cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
    transition: transform 0.3s;
}
.seal-svg {
    width: 100%; height: 100%;
}
.seal-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
}
.envelope-wrapper:not(.opened) .seal-glow {
    animation: sealGlowShine 3s infinite ease-in-out;
}

.envelope-front-names {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-hand);
    font-size: 0.95rem;
    color: var(--card-bg);
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: opacity 0.4s;
}
.envelope-wrapper.opened .envelope-front-names {
    opacity: 0;
}

.light-glow {
    position: absolute;
    top: 40px; left: 20px;
    width: 180px; height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 80%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.envelope-hint {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--text-light);
    margin-top: 1rem;
    text-align: center;
    animation: fadeInOut 2.5s infinite ease-in-out;
    transition: opacity 0.4s;
}
.envelope-wrapper.opened .envelope-hint {
    opacity: 0;
}

/* --- Clicking Animations (CSS Keyframe Driven) --- */
.envelope-wrapper.opened {
    pointer-events: none;
    animation: envelopeShrinkOut 0.7s 1.3s forwards ease-in;
}

.envelope-wrapper.opened .wax-seal-3d {
    animation: sealDissolve 0.3s forwards ease-out;
}

.envelope-wrapper.opened .envelope-flap-3d {
    animation: flapOpen 0.5s 0.3s forwards ease-in-out;
}

.envelope-wrapper.opened .light-glow {
    animation: glowFlash 0.8s 0.3s ease-out forwards;
}

.envelope-wrapper.opened .envelope-letter {
    animation: letterOut 0.6s 0.8s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes envelopeFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

@keyframes sealGlowShine {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1.3); }
}

@keyframes sealDissolve {
    0% { transform: translateX(-50%) scale(1); opacity: 1; filter: brightness(1.5) drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
    100% { transform: translateX(-50%) scale(0); opacity: 0; }
}

@keyframes flapOpen {
    0% {
        transform: rotateX(0deg);
        z-index: 4;
    }
    49% {
        z-index: 4;
    }
    50% {
        transform: rotateX(-90deg);
        z-index: 1;
    }
    100% {
        transform: rotateX(-180deg);
        z-index: 1;
    }
}

@keyframes glowFlash {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.5); }
}

@keyframes letterOut {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        z-index: 2;
    }
    100% {
        transform: translateY(-115px) scale(1.06) rotate(-4deg);
        z-index: 5;
        box-shadow: 0 10px 25px rgba(196, 112, 107, 0.25);
    }
}

@keyframes envelopeShrinkOut {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }
}

/* ── 5. Minimal 3D Glass Login Card ── */
.login-card-3d {
    position: absolute;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
    text-align: center;
    max-width: 320px;
    width: 90%;
    background: rgba(255, 248, 245, 0.7);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(196, 112, 107, 0.15);
    padding: 2.2rem 1.8rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(196, 112, 107, 0.12);
    z-index: 5;
}

body.midnight-mode .login-card-3d {
    background: rgba(11, 18, 38, 0.65);
    border-color: rgba(200, 169, 110, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

#loginOverlay.envelope-opened .login-card-3d {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 1.5s;
}

.card-flower-decor {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.login-card-3d h2 {
    font-family: var(--font-hand);
    font-size: 2.3rem;
    color: var(--accent);
    margin-bottom: 0.1rem;
}

.card-subtitle {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-style: italic;
    opacity: 0.8;
}

.login-card-3d .login-input-group {
    margin-bottom: 1rem;
}

.login-card-3d .login-input {
    width: 100%;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
}

body.midnight-mode .login-card-3d .login-input {
    background: rgba(255, 255, 255, 0.04);
}

.login-card-3d .login-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.85);
}

body.midnight-mode .login-card-3d .login-input:focus {
    background: rgba(255, 255, 255, 0.08);
}

.login-card-3d .login-input::placeholder {
    color: var(--text-light);
    opacity: 0.5;
}

.login-submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

.login-error {
    color: #c0392b;
    font-size: 0.8rem;
    min-height: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s;
    margin-bottom: 0.5rem;
}
.login-error.show {
    opacity: 1;
}

.login-card-3d.shake-animation {
    animation: cardShake 0.5s ease;
}

@keyframes cardShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ── 5. Scrapbook Button ── */
.scrapbook-btn{
    padding:0.75rem 2rem;background:var(--accent);
    color:#fff;border:none;border-radius:999px;
    font-family:var(--font-body);font-size:0.9rem;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;
    box-shadow:0 4px 15px rgba(196,112,107,0.3);
    transition:transform 0.3s,box-shadow 0.3s;
    position:relative;overflow:hidden;
}
.scrapbook-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(196,112,107,0.4);}
.scrapbook-btn:active{transform:translateY(0);}

body.midnight-mode .scrapbook-btn{
    background:rgba(200,169,110,0.15);color:var(--accent);
    border:1px solid var(--accent);
    box-shadow:0 4px 15px rgba(200,169,110,0.2);
}

/* ── 6. Theme Toggle ── */
.theme-toggle-btn{
    position:fixed;top:1.5rem;right:1.5rem;
    width:44px;height:44px;border-radius:50%;
    background:var(--card-bg);border:1px solid var(--border);
    color:var(--accent);display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;cursor:pointer;z-index:200;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    transition:transform 0.3s,background var(--transition-theme),color var(--transition-theme);
}
.theme-toggle-btn:hover{transform:scale(1.1) rotate(15deg);}


/* ── 8. User Greeting ── */
.user-greeting-float{
    position:fixed;top:1.5rem;left:1.5rem;z-index:200;
    background:var(--card-bg);border:1px solid var(--border);
    padding:0.4rem 1rem;border-radius:999px;
    font-size:0.8rem;color:var(--text);
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    display:inline-flex;align-items:center;gap:0.5rem;
}
.logout-btn{
    background:none;border:none;color:var(--text-light);
    font-size:0.75rem;cursor:pointer;opacity:0.7;
    transition:opacity 0.3s;
}
.logout-btn:hover{opacity:1;color:var(--accent);}

/* ── 9. Page Wrapper ── */
.page-wrapper{
    position:relative;z-index:10;
    opacity:0;animation:pageFadeInUp 1.5s var(--ease) forwards;
}

/* ── 10. Hero Section ── */
.hero-section{
    min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:4rem 1.5rem 2rem;position:relative;
}

.hero-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;}

.hero-lock{animation:envelopePulse 4s infinite ease-in-out;}
.heart-lock-svg{width:90px;height:auto;filter:drop-shadow(0 5px 15px rgba(196,112,107,0.3));}

.hero-since{
    font-family:var(--font-hand);font-size:1.3rem;font-style:italic;
    color:var(--text-light);
}

.hero-names-container{
    text-align:center;margin-top:1.5rem;
}
.hero-names{
    font-family:var(--font-hand);font-size:2.2rem;
    color:var(--accent);margin-bottom:0.1rem;
}
.hero-names-sub{
    font-family:var(--font-body);font-style:italic;
    font-size:0.8rem;color:var(--text-light);opacity:0.8;
}

.counter-grid{
    display:flex;gap:0.8rem;flex-wrap:wrap;justify-content:center;
}

.counter-polaroid{
    background:var(--card-bg);padding:1.2rem 0.8rem 0.7rem;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);border-radius:2px;
    text-align:center;width:78px;
    transition:transform 0.3s,box-shadow 0.3s;
}
.counter-polaroid:hover{
    transform:rotate(0deg) translateY(-4px) !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.counter-value{
    font-family:var(--font-display);font-size:2.2rem;font-weight:600;
    color:var(--accent);display:block;line-height:1;
}
.counter-label{
    font-family:var(--font-body);font-size:0.65rem;
    text-transform:uppercase;letter-spacing:1.5px;
    color:var(--text-light);margin-top:0.3rem;display:block;
}

.scroll-indicator{
    position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:0.4rem;
    opacity:0.7;
}
.scroll-text{
    font-family:var(--font-hand);font-size:0.8rem;
    color:var(--text-light);letter-spacing:1px;
}
.arrow-bounce{color:var(--accent);font-size:0.8rem;animation:arrowBounce 2s infinite;}

/* ── 11. Floral Divider ── */
.floral-divider{
    width:100%;max-width:500px;margin:2.5rem auto;
    text-align:center;padding:0 1.5rem;
}
.floral-divider svg{width:100%;height:auto;}

/* ── 12. Page Sections ── */
.page-section{
    max-width:800px;margin:0 auto;padding:2rem 1.5rem;
}

.reveal-section{
    opacity:0;transform:translateY(40px);
    transition:opacity 0.9s ease-out,transform 0.9s var(--ease);
}
.reveal-section.revealed{opacity:1;transform:translateY(0);}

.section-intro{text-align:center;margin-bottom:1.5rem;}
.section-title-handwritten{
    font-family:var(--font-hand);font-size:2.2rem;
    color:var(--accent);transform:rotate(-2deg);
    display:inline-block;
}
.section-subtitle{
    font-family:var(--font-body);font-style:italic;
    font-size:0.95rem;color:var(--text-light);margin-top:0.2rem;
}
.garden-owner-text{
    font-family:var(--font-hand);font-size:1.3rem;
    color:var(--accent);margin-top:0.4rem;
}
.section-tagline{
    font-family:var(--font-body);font-style:italic;font-size:0.85rem;
    color:var(--text-light);text-align:center;margin-bottom:1rem;
}

/* ── 13. Garden Scene — Studio Blossom ── */
.garden-scene{
    position:relative;width:100%;min-height:420px;height:420px;
    border-radius:20px;overflow:hidden;
    box-shadow:0 8px 40px rgba(180,140,200,0.18);
    background:#e8dff0;
    transition:background 1s ease;
}
body.midnight-mode .garden-scene{
    background:#1a1230;
    box-shadow:0 8px 40px rgba(0,0,0,0.3);
}

.garden-sky-svg{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:1;
}

/* Flower Bed */
.flower-bed{
    position:absolute;bottom:0;left:0;width:100%;height:55%;
    display:flex;align-items:flex-end;justify-content:center;
    gap:8px;padding:0 20px 10px;
    z-index:3;
}

.flower-slot{
    display:flex;flex-direction:column;align-items:center;
    transition:all 0.8s cubic-bezier(0.25,1,0.5,1);
    flex-shrink:0;
}
.flower-slot.flower-active{
    transform:scale(1);
}
.flower-slot.flower-completed{
    transform:scale(0.55);
    opacity:0.75;
    filter:brightness(0.95);
}
.flower-slot.flower-completed:hover{
    transform:scale(0.65);
    opacity:1;
}

.flower-slot svg{
    transition:all 1s cubic-bezier(0.25,1,0.5,1);
}

/* Back row for 4+ flowers */
.flower-bed.has-back-row{
    flex-wrap:wrap;
    align-content:flex-end;
}

/* Watering Can */
.watering-can-wrap{
    position:absolute;top:25%;right:12%;z-index:5;
    width:60px;height:55px;
    opacity:0;pointer-events:none;
    transform:rotate(0deg);
    transition:opacity 0.3s;
}
.watering-can-wrap.pouring{
    opacity:1;
    animation:pourWater 1.2s ease-in-out forwards;
}
.watering-can-svg{width:100%;height:100%;}

/* Water Droplets */
.garden-water-drops{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:4;pointer-events:none;
}
.garden-drop{
    position:absolute;width:4px;height:10px;
    background:linear-gradient(180deg,#a8d8ea,#64b5f6);
    border-radius:50% 50% 50% 50%;
    opacity:0.8;
    animation:gardenDropFall 0.9s ease-in forwards;
}

/* Butterfly */
.garden-butterfly{
    position:absolute;top:22%;left:18%;
    width:32px;height:24px;
    z-index:4;opacity:0;pointer-events:none;
    transition:opacity 0.8s;
}
.garden-butterfly.visible{
    opacity:1;
    animation:butterflyOrbit 12s infinite linear;
}
.gwing-left,.gwing-right{
    animation:gWingFlap 0.18s infinite alternate;
}

/* Sparkles */
.garden-sparkles{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:4;pointer-events:none;
}
.garden-sparkle-dot{
    position:absolute;width:4px;height:4px;
    border-radius:50%;
    background:radial-gradient(circle,#fff 0%,#f0d0f0 60%,transparent 100%);
    animation:gardenSparkle 2s ease-in-out forwards;
}

/* Quote Overlay */
.garden-quote-overlay{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:6;opacity:0;pointer-events:none;
    transition:opacity 0.6s ease;
}
.garden-quote-overlay.show{opacity:1;}
.gq-text{
    font-family:var(--font-hand);font-size:1.1rem;color:#5a3d6a;
    background:rgba(255,255,255,0.88);padding:0.6rem 1.4rem;
    border-radius:16px;text-align:center;
    box-shadow:0 4px 20px rgba(180,140,200,0.2);
    backdrop-filter:blur(4px);
}
body.midnight-mode .gq-text{
    background:rgba(26,18,48,0.88);color:#d4b8e8;
}

/* Confetti Particles */
.garden-particles{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:7;pointer-events:none;overflow:hidden;
}
.garden-leaf-particle{
    position:absolute;top:-10px;
    width:8px;height:8px;
    border-radius:50% 0 50% 50%;
    opacity:0.8;
    animation:leafConfetti 2s ease-out forwards;
}

/* ── 14. Garden Actions ── */
.garden-actions{
    display:flex;flex-direction:column;align-items:center;
    margin-top:1.5rem;gap:0.6rem;
}

.garden-water-btn{
    padding:0.8rem 2.2rem;
    background:linear-gradient(135deg,#c8a0d8,#a8d8ea);
    color:#fff;border:none;border-radius:999px;
    font-family:var(--font-body);font-size:0.95rem;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;
    box-shadow:0 4px 20px rgba(180,140,200,0.35);
    transition:transform 0.3s,box-shadow 0.3s;
    position:relative;overflow:hidden;
}
.garden-water-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(180,140,200,0.45);
}
.garden-water-btn:active{transform:translateY(0);}
.garden-water-btn .water-btn-icon{
    font-size:1.1rem;
    animation:waterBtnPulse 2s infinite ease-in-out;
}

body.midnight-mode .garden-water-btn{
    background:linear-gradient(135deg,rgba(180,140,200,0.2),rgba(140,180,220,0.2));
    border:1px solid rgba(200,160,216,0.4);
    color:#d4b8e8;
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
}

.garden-water-status{
    font-size:0.8rem;font-style:italic;color:var(--text-light);
}

/* ── 15. New Garden Watering Panel & Stats Table ── */
.watering-status-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 1.25rem;
    width: 100%;
    max-width: 320px;
    margin: 1rem auto 0;
    box-shadow: 0 8px 32px 0 rgba(196, 112, 107, 0.08);
    transition: all 0.5s ease;
}

body.midnight-mode .watering-status-panel {
    background: rgba(26, 18, 48, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

.watering-status-panel.both-watered {
    border-color: rgba(241, 196, 15, 0.5);
    box-shadow: 0 8px 32px 0 rgba(241, 196, 15, 0.18), inset 0 0 12px rgba(241, 196, 15, 0.05);
}

.wsp-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text);
    text-align: center;
    letter-spacing: 0.5px;
}

.wsp-users {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wsp-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.03);
    color: var(--text-light);
    transition: all 0.5s ease;
}

body.midnight-mode .wsp-user-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.02);
}

.wsp-user-row.watered {
    background: rgba(46, 204, 113, 0.15) !important;
    border-color: rgba(46, 204, 113, 0.4) !important;
    color: #27ae60 !important;
    font-weight: 600;
}

body.midnight-mode .wsp-user-row.watered {
    background: rgba(46, 204, 113, 0.12) !important;
    border-color: rgba(46, 204, 113, 0.25) !important;
    color: #2ecc71 !important;
}

.wsp-user-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wsp-user-status {
    font-size: 0.8rem;
}

.wsp-footer {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-light);
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    transition: all 0.3s ease;
}

.watering-status-panel.both-watered .wsp-footer {
    color: #b7950b;
    font-weight: 600;
    background: rgba(241, 196, 15, 0.12);
    padding: 0.4rem;
    border-radius: 8px;
    border-top: none;
}

body.midnight-mode .watering-status-panel.both-watered .wsp-footer {
    color: #ffd700;
    background: rgba(241, 196, 15, 0.08);
}

/* BAHÇEMİZ TABLOSU */
.garden-table-container {
    width: 100%;
    margin-top: 1.5rem;
    overflow-x: auto;
}

.garden-stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
}

.gst-cell {
    padding: 0.85rem 0.4rem;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.gst-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.cell-pink {
    background: linear-gradient(135deg, #fff0f5, #ffd9e6);
    border: 1px solid #ffccd9;
}
.cell-blue {
    background: linear-gradient(135deg, #f0f8ff, #d9ebff);
    border: 1px solid #cce0ff;
}
.cell-green {
    background: linear-gradient(135deg, #f5fffa, #dbffe6);
    border: 1px solid #ccffd9;
}
.cell-teal {
    background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
    border: 1px solid #80cbc4;
}
.cell-purple {
    background: linear-gradient(135deg, #f8f0ff, #edd9ff);
    border: 1px solid #e2ccff;
}
.cell-orange {
    background: linear-gradient(135deg, #fff5e6, #ffdbb8);
    border: 1px solid #ffcc99;
}

body.midnight-mode .cell-pink {
    background: linear-gradient(135deg, rgba(255, 217, 230, 0.08), rgba(255, 217, 230, 0.03));
    border: 1px solid rgba(255, 204, 217, 0.12);
}
body.midnight-mode .cell-blue {
    background: linear-gradient(135deg, rgba(217, 235, 255, 0.08), rgba(217, 235, 255, 0.03));
    border: 1px solid rgba(204, 224, 255, 0.12);
}
body.midnight-mode .cell-green {
    background: linear-gradient(135deg, rgba(219, 255, 230, 0.08), rgba(219, 255, 230, 0.03));
    border: 1px solid rgba(204, 255, 217, 0.12);
}
body.midnight-mode .cell-teal {
    background: linear-gradient(135deg, rgba(178, 223, 219, 0.08), rgba(178, 223, 219, 0.03));
    border: 1px solid rgba(128, 203, 196, 0.12);
}
body.midnight-mode .cell-purple {
    background: linear-gradient(135deg, rgba(237, 217, 255, 0.08), rgba(237, 217, 255, 0.03));
    border: 1px solid rgba(226, 204, 255, 0.12);
}
body.midnight-mode .cell-orange {
    background: linear-gradient(135deg, rgba(255, 219, 184, 0.08), rgba(255, 219, 184, 0.03));
    border: 1px solid rgba(255, 204, 153, 0.12);
}

.gst-emoji {
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.15rem;
}

.gst-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-light);
    display: block;
    margin-bottom: 0.1rem;
}

.gst-value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    display: block;
}

body.midnight-mode .gst-value {
    color: #e8c5fa;
}

/* CELEBRATION OVERLAY */
.celebration-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(253, 240, 235, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

body.midnight-mode .celebration-overlay {
    background: rgba(11, 18, 38, 0.85);
}

.celebration-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.celebration-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(196, 112, 107, 0.25);
    transform: scale(0.7);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebration-overlay.active .celebration-card {
    transform: scale(1);
}

.celebration-flower-icon {
    font-size: 4rem;
    display: inline-block;
    margin-bottom: 1.25rem;
    animation: heartPulseCelebration 2s infinite ease-in-out;
}

.celebration-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.85rem;
}

.celebration-quote {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.4;
}

@keyframes heartPulseCelebration {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
}

/* ── 16. Secret Box ── */
.secret-box-visual{text-align:center;padding:1.5rem 0;}
.gift-box-container{display:inline-block;animation:giftBounce 3s infinite ease-in-out;}
.gift-box-svg{width:140px;height:auto;}

.box-count-text{
    font-family:var(--font-hand);font-size:1.3rem;
    color:var(--text);margin-top:1rem;
}
.box-countdown-wrapper{
    margin-top:0.8rem;display:flex;flex-direction:column;
    align-items:center;gap:0.3rem;
}
.countdown-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);}
.countdown-value{font-family:var(--font-display);font-size:1.1rem;color:var(--accent);}

/* ── 17. Secret Form ── */
.secret-form-panel{
    background:var(--card-bg);border-radius:12px;
    padding:1.5rem;margin-top:1.5rem;
    box-shadow:0 4px 18px rgba(0,0,0,0.06);
}

.secret-add-tabs{display:flex;gap:0.5rem;margin-bottom:1rem;}
.secret-tab-btn{
    padding:0.5rem 1rem;border-radius:999px;
    border:1px solid var(--border);background:transparent;
    font-family:var(--font-body);font-size:0.85rem;
    color:var(--text-light);cursor:pointer;transition:all 0.3s;
}
.secret-tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.secret-input-area{
    width:100%;min-height:100px;padding:0.8rem;
    border:1.5px dashed var(--border);border-radius:8px;
    background:transparent;color:var(--text);
    font-family:var(--font-body);font-size:0.9rem;
    resize:vertical;outline:none;transition:border-color 0.3s;
}
.secret-input-area:focus{border-color:var(--accent);}
.secret-input-area::placeholder{color:var(--text-light);opacity:0.5;}

.secret-file-wrapper{
    border:2px dashed var(--border);border-radius:12px;
    padding:1.5rem;text-align:center;margin-bottom:1rem;
    cursor:pointer;transition:border-color 0.3s;
}
.secret-file-wrapper:hover{border-color:var(--accent);}
.secret-file-label{
    display:flex;flex-direction:column;align-items:center;gap:0.5rem;
    cursor:pointer;color:var(--text-light);font-size:0.9rem;
}
.secret-file-label i{font-size:1.5rem;color:var(--accent);}
.secret-file-input{display:none;}

.image-preview-container{display:none;position:relative;margin-bottom:1rem;}
.image-preview{width:100%;max-height:300px;object-fit:cover;border-radius:8px;}
.remove-preview-btn{
    position:absolute;top:8px;right:8px;
    width:28px;height:28px;border-radius:50%;
    background:rgba(0,0,0,0.6);color:#fff;border:none;
    cursor:pointer;font-size:0.9rem;display:flex;
    align-items:center;justify-content:center;
}

.seal-btn{width:100%;margin-top:1rem;justify-content:center;}

/* ── 18. Archive ── */
.archive-section{margin-top:2rem;}
.archive-title{
    font-family:var(--font-hand);font-size:1.3rem;
    color:var(--text);text-align:center;margin-bottom:1rem;
}

.archive-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:1rem;
}

.archive-card{
    background:var(--card-bg);padding:1rem;text-align:center;
    border-radius:2px;box-shadow:0 3px 12px rgba(0,0,0,0.07);
    cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;
}
.archive-card:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 8px 25px rgba(0,0,0,0.12);}
.archive-card i{font-size:1.3rem;color:var(--accent);margin-bottom:0.3rem;}
.archive-card h4{font-family:var(--font-hand);font-size:0.95rem;margin:0.3rem 0 0.2rem;}
.archive-card p{font-size:0.75rem;color:var(--text-light);}

/* ── 19. Box Opened ── */
.box-opened-state{margin-top:2rem;border-top:1px dashed var(--border);padding-top:2rem;}
.box-opened-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.box-opened-title{font-family:var(--font-hand);font-size:1.2rem;color:var(--text);}
.close-box-btn{
    background:none;border:1px solid var(--border);
    padding:0.3rem 0.8rem;border-radius:999px;
    font-size:0.8rem;color:var(--text-light);cursor:pointer;
    transition:border-color 0.3s,color 0.3s;
}
.close-box-btn:hover{border-color:var(--accent);color:var(--accent);}

.secrets-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:1.2rem;
}

.note-card{
    background:var(--card-bg);padding:1.2rem;border-radius:2px;
    box-shadow:0 3px 12px rgba(0,0,0,0.07);
    font-size:0.9rem;line-height:1.6;position:relative;
}
.note-card p{color:var(--text);}
.note-author{
    display:block;font-family:var(--font-hand);font-size:0.8rem;
    color:var(--text-light);margin-top:0.6rem;text-align:right;
}

.polaroid-card{
    background:var(--card-bg);padding:0.6rem;border-radius:2px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    transition:transform 0.3s;
}
.polaroid-card:hover{transform:rotate(0deg) scale(1.02) !important;}
.polaroid-img-wrapper{aspect-ratio:1;overflow:hidden;border-radius:1px;}
.polaroid-img{width:100%;height:100%;object-fit:cover;}
.polaroid-caption{
    font-size:0.8rem;color:var(--text);margin-top:0.5rem;
    text-align:center;padding:0 0.3rem;
}
.polaroid-author{
    display:block;font-family:var(--font-hand);font-size:0.75rem;
    color:var(--text-light);text-align:right;margin-top:0.3rem;
}

/* ── 20. Spotify ── */
.spotify-add-container{
    display:flex;gap:0.8rem;align-items:center;
}
.spotify-input{
    flex:1;padding:0.7rem 1.2rem;
    border:1.5px dashed var(--border);border-radius:999px;
    background:transparent;color:var(--text);
    font-family:var(--font-body);font-size:0.9rem;
    outline:none;transition:border-color 0.3s;
}
.spotify-input:focus{border-color:var(--accent);}
.spotify-input::placeholder{color:var(--text-light);opacity:0.5;}

.spotify-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.2rem;margin-top:1.5rem;
}

.spotify-card{
    background:var(--card-bg);padding:0.8rem;border-radius:2px;
    box-shadow:0 3px 12px rgba(0,0,0,0.07);
    transition:transform 0.3s,box-shadow 0.3s;
}
.spotify-card:hover{transform:rotate(0deg) translateY(-3px) !important;box-shadow:0 8px 25px rgba(0,0,0,0.12);}

.spotify-card-header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:0.5rem;padding-bottom:0.4rem;
    border-bottom:1px dashed var(--border);
}
.spotify-card-user{
    font-family:var(--font-hand);font-size:0.85rem;color:var(--text);
    display:flex;align-items:center;gap:0.3rem;
}
.spotify-card-user i{color:var(--accent);font-size:0.7rem;}
.spotify-delete-btn{
    background:none;border:none;color:var(--text-light);
    cursor:pointer;font-size:0.8rem;opacity:0.5;transition:opacity 0.3s,color 0.3s;
}
.spotify-delete-btn:hover{opacity:1;color:#c0392b;}

.spotify-embed-container{border-radius:8px;overflow:hidden;}

/* ── 21. Footer ── */
.main-footer{text-align:center;padding:3rem 1.5rem 2rem;}
.footer-divider-line{
    height:1px;max-width:300px;margin:0 auto 1.5rem;
    background:linear-gradient(90deg,transparent,var(--deco-color),transparent);
}
.footer-text{
    font-family:var(--font-display);font-style:italic;
    font-size:0.9rem;color:var(--text-light);
}
.footer-subtext{font-size:0.75rem;color:var(--text-light);margin-top:0.3rem;opacity:0.7;}

/* ── 22. Loading Overlay ── */
.global-loading-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(253,240,235,0.85);backdrop-filter:blur(8px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
    z-index:99998;opacity:0;pointer-events:none;transition:opacity 0.3s;
}
body.midnight-mode .global-loading-overlay{background:rgba(11,18,38,0.85);}
.global-loading-overlay.show{opacity:1;pointer-events:auto;}

.loading-spinner{
    width:36px;height:36px;border:3px solid var(--border);
    border-top-color:var(--accent);border-radius:50%;
    animation:spinLoader 0.8s linear infinite;
}
.loading-text{font-family:var(--font-body);font-size:0.9rem;color:var(--text-light);}

/* ── 23. Empty & Misc ── */
.empty-placeholder{
    text-align:center;padding:2rem;color:var(--text-light);
    font-style:italic;font-size:0.9rem;
}

.confetti-particle{
    position:fixed;top:-20px;z-index:99999;pointer-events:none;
    animation:confettiFall 2.5s ease-in forwards;
}

/* ── 24. Keyframes ── */
@keyframes pageFadeInUp{
    0%{opacity:0;transform:translateY(45px);}
    100%{opacity:1;transform:translateY(0);}
}
@keyframes floatSlow{
    0%{transform:translateY(0);}
    100%{transform:translateY(-15px);}
}
@keyframes heartFloat{
    0%{transform:translateY(0) translateX(0);opacity:0.7;}
    50%{opacity:0.5;}
    100%{transform:translateY(-100vh) translateX(var(--sway,20px));opacity:0;}
}
@keyframes textFall{
    0%{transform:translateY(0) rotate(var(--rot-start,-5deg));opacity:0;}
    10%{opacity:var(--op,0.1);}
    90%{opacity:var(--op,0.1);}
    100%{transform:translateY(calc(100vh + 60px)) rotate(var(--rot-end,5deg));opacity:0;}
}
@keyframes twinkle{
    0%,100%{opacity:0.2;transform:scale(0.8);}
    50%{opacity:1;transform:scale(1.2);}
}
@keyframes arrowBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
}
@keyframes envelopePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.03);}
}
@keyframes giftBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}
@keyframes fadeInOut{
    0%,100%{opacity:0.4;}
    50%{opacity:1;}
}
@keyframes cloudDrift{
    0%{transform:translateX(0);}
    100%{transform:translateX(calc(100vw + 200px));}
}
@keyframes petalFall{
    0%{transform:translateY(-20px) rotate(0deg) translateX(0);opacity:0.7;}
    25%{transform:translateY(25vh) rotate(90deg) translateX(var(--sway-1,15px));}
    50%{transform:translateY(50vh) rotate(180deg) translateX(var(--sway-2,-10px));}
    75%{transform:translateY(75vh) rotate(270deg) translateX(var(--sway-1,15px));}
    100%{transform:translateY(100vh) rotate(360deg) translateX(0);opacity:0;}
}
@keyframes spinLoader{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes confettiFall{
    0%{transform:translateY(0) rotate(0);opacity:1;}
    100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}
@keyframes sway{
    0%,100%{transform:translateX(-50%) rotate(-1deg);}
    50%{transform:translateX(-50%) rotate(1deg);}
}
@keyframes shake{
    0%,100%{transform:translateX(-50%);}
    20%{transform:translateX(calc(-50% + 3px));}
    40%{transform:translateX(calc(-50% - 3px));}
    60%{transform:translateX(calc(-50% + 2px));}
    80%{transform:translateX(calc(-50% - 2px));}
}
@keyframes pourWater{
    0%{transform:rotate(0deg);opacity:1;}
    30%{transform:rotate(-35deg);}
    70%{transform:rotate(-35deg);}
    100%{transform:rotate(0deg);opacity:0;}
}
@keyframes gardenDropFall{
    0%{transform:translateY(0) scale(1);opacity:0.8;}
    100%{transform:translateY(140px) scale(0.5);opacity:0;}
}
@keyframes butterflyOrbit{
    0%{transform:translate(0,0) rotate(0deg);}
    25%{transform:translate(40px,-20px) rotate(5deg);}
    50%{transform:translate(80px,5px) rotate(-3deg);}
    75%{transform:translate(30px,15px) rotate(4deg);}
    100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes gWingFlap{
    0%{transform:scaleY(1);}
    100%{transform:scaleY(0.5);}
}
@keyframes gardenSparkle{
    0%{opacity:0;transform:scale(0);}
    50%{opacity:1;transform:scale(1.5);}
    100%{opacity:0;transform:scale(0);}
}
@keyframes leafConfetti{
    0%{transform:translateY(0) rotate(0deg) scale(1);opacity:0.8;}
    100%{transform:translateY(200px) rotate(360deg) scale(0.3);opacity:0;}
}
@keyframes waterBtnPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.15);}
}
@keyframes flowerSway{
    0%,100%{transform:rotate(-2deg);}
    50%{transform:rotate(2deg);}
}
@keyframes flowerShake{
    0%,100%{transform:rotate(0deg);}
    25%{transform:rotate(-4deg);}
    75%{transform:rotate(4deg);}
}
@keyframes dropFall{
    0%{transform:translateY(0);opacity:0.8;}
    100%{transform:translateY(120px);opacity:0;}
}
@keyframes sunRayPulse{
    0%,100%{opacity:0.2;height:40px;}
    50%{opacity:0.5;height:70px;}
}
@keyframes backgroundTwinkle{
    0%,100%{opacity:0.15;transform:scale(0.85);}
    50%{opacity:0.95;transform:scale(1.15);}
}
@keyframes sparkleGlow{
    0%,100%{opacity:0.3;transform:scale(0.8);}
    50%{opacity:1;transform:scale(1.5);}
}

.sparkle{animation:sparkleGlow 2s infinite ease-in-out;}
.sparkle-glow{animation:sparkleGlow 1.5s infinite ease-in-out alternate;}

/* ── 25. Responsive ── */
@media(max-width:768px){
    .hero-section{padding:3rem 1rem 2rem;}
    .counter-grid{gap:0.5rem;}
    .counter-polaroid{width:68px;padding:0.8rem 0.5rem 0.5rem;}
    .counter-value{font-size:1.8rem;}
    .section-title-handwritten{font-size:1.8rem;}
    .garden-scene{min-height:320px;height:320px;}
    .gst-cell{padding:0.6rem 0.2rem;border-radius:12px;}
    .gst-emoji{font-size:1.1rem;margin-bottom:0.1rem;}
    .gst-label{font-size:0.55rem;letter-spacing:0.5px;}
    .gst-value{font-size:0.8rem;}
    .garden-water-btn{padding:0.7rem 1.8rem;font-size:0.85rem;}
    .spotify-add-container{flex-direction:column;}
    .spotify-add-container .scrapbook-btn{width:100%;justify-content:center;}
    .spotify-grid{grid-template-columns:1fr;}
    .corner-flower{width:80px;height:80px;opacity:0.2;}
    .envelope-wrapper{transform:scale(0.85);}
    .login-card-3d{padding:2rem 1.5rem;}
    .secrets-grid{grid-template-columns:1fr;}
    .page-section{padding:1.5rem 1rem;}
}

@media(max-width:480px){
    .counter-polaroid{width:62px;padding:0.7rem 0.4rem 0.4rem;}
    .counter-value{font-size:1.5rem;}
    .counter-label{font-size:0.55rem;}
    .section-title-handwritten{font-size:1.5rem;}
    .garden-scene{min-height:260px;height:260px;}
    .gst-cell{padding:0.4rem 0.1rem;border-radius:8px;}
    .gst-emoji{font-size:0.95rem;margin-bottom:0.05rem;}
    .gst-label{font-size:0.5rem;letter-spacing:0.2px;}
    .gst-value{font-size:0.7rem;}
    .hero-since{font-size:1.1rem;}
    .heart-lock-svg{width:70px;}
    .corner-flower{display:none;}
    .floral-divider{margin:1.5rem auto;}
    .archive-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

/* --- Premium Disabled Style for Garden Watering Button --- */
.garden-water-btn:disabled {
    background: #e2d9eb !important;
    color: var(--text-light) !important;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}
body.midnight-mode .garden-water-btn:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}