#surprise-form{

    display:flex;

    flex-direction:column;

    gap:16px;

    max-width:550px;

    margin:auto;

}

#surprise-form input,
#surprise-form textarea{

    padding:14px;

    border:2px solid #eee;

    border-radius:12px;

    font-size:16px;

    font-family:inherit;

}

#surprise-form input:focus,
#surprise-form textarea:focus{

    outline:none;

    border-color:#ff5c7c;

}

#surprise-form button{

    margin-top:10px;

}

#status{

    margin-top:30px;

}

#created-link{

    width:100%;

    margin:15px 0;

}

/* ---------- Labels ---------- */

#surprise-form label{

    font-weight:600;

    text-align:left;

    margin-bottom:-8px;

}

/* ---------- Inputs ---------- */

#surprise-form input,
#surprise-form textarea{

    padding:15px 18px;

    border:2px solid #ececec;

    border-radius:14px;

    font-size:16px;

    transition:.25s;

    background:#fff;

}

#surprise-form textarea{

    resize:vertical;

    min-height:160px;

}

#surprise-form input:focus,
#surprise-form textarea:focus{

    outline:none;

    border-color:#ff5c7c;

    box-shadow:0 0 0 5px rgba(255,92,124,.12);

}

/* ---------- Create Button ---------- */

#surprise-form button{

    border:none;

    border-radius:14px;

    padding:15px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    background:linear-gradient(135deg,#ff5c7c,#ff8ca4);

    color:#fff;

    transition:.25s;

}

#surprise-form button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(255,92,124,.25);

}

#surprise-form button:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

/* ---------- Status ---------- */

#status{

    margin-top:35px;

}

/* ---------- Success Box ---------- */

.success-box{

    background:#fff7fa;

    border:2px solid #ffd4df;

    border-radius:18px;

    padding:25px;

    animation:fadeUp .35s ease;

}

.success-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:6px;

}

.success-subtitle{

    color:#777;

    margin-bottom:18px;

}

/* ---------- Generated Link ---------- */

#created-link{

    width:100%;

    padding:14px 16px;

    border:2px dashed #ffc3d0;

    border-radius:12px;

    background:#fff;

    font-size:15px;

    margin-bottom:16px;

}

/* ---------- Copy Button ---------- */

.copy-btn{

    width:100%;

    border:none;

    border-radius:12px;

    padding:14px;

    background:#222;

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.copy-btn:hover{

    background:#111;

    transform:translateY(-2px);

}

/* ---------- Animation ---------- */

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}