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

:root{
    --bg:#08111f;
    --card:rgba(22,32,52,.82);
    --border:rgba(255,255,255,.08);
    --primary:#3b82f6;
    --primary-hover:#2563eb;
    --text:#ffffff;
    --muted:#9ca3af;
    --input:#1f2b44;
    --shadow:0 30px 70px rgba(0,0,0,.45);
}

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

    background:
        radial-gradient(circle at top,#163a72 0%,transparent 45%),
        radial-gradient(circle at bottom,#10203b 0%,transparent 45%),
        var(--bg);

    overflow:hidden;

}

.header{

    position:absolute;

    top:40px;

    width:100%;

    text-align:center;

    color:white;

    font-size:30px;

    font-weight:300;

    letter-spacing:1px;

    line-height:1.35;

}

.card{

    width:430px;

    max-width:92%;

    padding:45px;

    border-radius:26px;

    background:var(--card);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.logo{

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:34px;

    font-weight:700;

    margin-bottom:28px;

    box-shadow:0 15px 40px rgba(37,99,235,.45);

}

h1{

    color:white;

    text-align:center;

    margin-bottom:10px;

    font-size:31px;

}

p{

    text-align:center;

    color:var(--muted);

    margin-bottom:28px;

    line-height:1.6;

}

input{

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    background:var(--input);

    color:white;

    font-size:18px;

    text-align:center;

    outline:none;

    transition:.25s;

}

input:focus{

    box-shadow:0 0 0 2px var(--primary);

    background:#263656;

}

button{

    width:100%;

    margin-top:18px;

    padding:17px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

    font-weight:600;

}

button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

#status{

    margin-top:18px;

    min-height:22px;

    text-align:center;

    color:#cbd5e1;

    font-size:15px;

}

.footer{

    position:absolute;

    bottom:22px;

    width:100%;

    text-align:center;

    color:#64748b;

    font-size:13px;

}

@media(max-width:600px){

.header{

    font-size:21px;

    padding:0 18px;

}

.card{

    padding:30px;

}

.logo{

    width:95px;
    height:95px;
    font-size:28px;

}

h1{

    font-size:26px;

}

}