/* ===== GLOBAL ===== */
body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:linear-gradient(135deg,#020617,#0f172a);
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

/* ===== CARD ===== */
.auth-container{
background:#111827;
padding:45px;
width:420px;
border-radius:14px;
box-shadow:0 0 50px rgba(0,0,0,.6);
text-align:center;
animation:fade .6s ease;
}

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

/* ===== BRAND ===== */
.logo{
font-size:28px;
font-weight:700;
color:#3b82f6;
margin-bottom:5px;
}

.subtitle{
color:#94a3b8;
margin-bottom:30px;
}

/* ===== INPUTS ===== */
input{
width:100%;
padding:14px;
margin:12px 0;
border-radius:8px;
border:none;
background:#020617;
color:white;
font-size:15px;
}

input:focus{
outline:2px solid #3b82f6;
}

/* ===== BUTTON ===== */
button{
width:100%;
padding:14px;
background:linear-gradient(90deg,#3b82f6,#2563eb);
border:none;
border-radius:8px;
color:white;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(59,130,246,.4);
}

/* ===== LINKS ===== */
.switch{
margin-top:18px;
color:#cbd5e1;
}

.switch a{
color:#3b82f6;
text-decoration:none;
font-weight:600;
}

/* ===== THANK YOU ===== */
.success{
font-size:22px;
margin-bottom:15px;
color:#22c55e;
}

.home-btn{
display:inline-block;
margin-top:20px;
background:#3b82f6;
padding:12px 22px;
border-radius:8px;
text-decoration:none;
color:white;
}