*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:linear-gradient(135deg,#ffd9e8,#fff0f5);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

/* Floating Hearts */

.hearts{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.hearts span{
    position:absolute;
    bottom:-60px;
    color:#ff5b95;
    font-size:24px;
    opacity:.6;
    animation:float 12s linear infinite;
}

.hearts span:nth-child(1){left:5%;animation-delay:0s;}
.hearts span:nth-child(2){left:18%;animation-delay:2s;}
.hearts span:nth-child(3){left:30%;animation-delay:5s;}
.hearts span:nth-child(4){left:43%;animation-delay:1s;}
.hearts span:nth-child(5){left:56%;animation-delay:4s;}
.hearts span:nth-child(6){left:69%;animation-delay:7s;}
.hearts span:nth-child(7){left:82%;animation-delay:3s;}
.hearts span:nth-child(8){left:94%;animation-delay:6s;}

@keyframes float{

    from{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }

    20%{
        opacity:.7;
    }

    to{
        transform:translateY(-120vh) rotate(360deg);
        opacity:0;
    }

}

.page{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px;
}

.hidden{
    display:none;
}

.card,
.gallery{

    width:100%;
    max-width:430px;

    max-height:80vh;
    overflow-y:auto;
    overflow-x:hidden;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    border-radius:28px;

    padding:30px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    animation:fade .7s ease;
}

@keyframes fade{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.emoji{

    font-size:60px;
    margin-bottom:15px;

}

h1{

    color:#ff4f87;
    margin-bottom:15px;
    font-size:32px;

}

p{

    color:#666;
    line-height:1.8;
    margin-bottom:20px;

}

input{

    width:100%;

    padding:15px;

    border:2px solid #ffc8da;

    border-radius:12px;

    outline:none;

    font-size:16px;

    margin-bottom:18px;

}

input:focus{

    border-color:#ff4f87;

}

button{

    width:100%;

    padding: 14px 30px;

    border:none;

    border-radius:12px;

    background:#ff4f87;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:translateY(-3px);
    background:#ff2d73;

}

.cover{

    width:100%;
    height:340px;
    object-fit:cover;
    border-radius:20px;
    margin-bottom:20px;

}

.gallery img{

    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:20px;
    margin:20px 0;

}

#error{

    color:#ff2d55;
    margin-top:15px;
    min-height:20px;

}

@media(max-width:480px){

    .card,
    .gallery{

        padding:22px;

    }

    .cover,
    .gallery img{

        height:280px;

    }

    h1{

        font-size:26px;

    }

}