body{
    margin:0;
    padding:0;
    font-family: 'Segoe UI', sans-serif;
    background: url("/static/welcome_image.jpg") no-repeat center center/cover;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

body::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(10,15,30,0.75);
    backdrop-filter: blur(4px);
}

.box{
    position:relative;
    background: rgba(30, 41, 59, 0.6);
    padding:50px;
    border-radius:20px;
    width:500px;
    text-align:center;
    backdrop-filter: blur(20px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(99,102,241,0.3);
    animation: fadeIn 0.8s ease-in-out;
}

h1{
    color:#F1F5F9;
    margin-bottom:10px;
}

input{
    padding:15px;
    width:85%;
    border-radius:12px;
    border:none;
    margin-top:20px;
    outline:none;
    background:#0F172A;
    color:white;
    font-size:15px;
}

button{
    padding:14px 35px;
    margin-top:25px;
    border:none;
    border-radius:12px;
    background:#6366F1;
    color:white;
    font-size:16px;
    cursor:pointer;
    transition: all 0.3s ease;
}

button:hover{
    background:#4F46E5;
    transform: translateY(-3px);
    box-shadow:0 10px 25px rgba(99,102,241,0.5);
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform: translateY(30px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}

.credit{
position:fixed;
bottom:15px;
right:20px;
color:#aaa;
font-size:14px;
font-family:Arial;
opacity:0.8;
}

.credit:hover{
opacity:1;
color:white;
}