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

body{
background:#020810;
font-family:Inter, sans-serif;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.auth-container{
width:100%;
max-width:420px;
padding:20px;
}

.auth-box{
background:#0b1118;
padding:40px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 40px rgba(0,0,0,0.7);
}

h1{
text-align:center;
margin-bottom:30px;
letter-spacing:3px;
font-weight:800;
}

.tabs{
display:flex;
margin-bottom:20px;
border-radius:6px;
overflow:hidden;
}

.tabs button{
flex:1;
padding:12px;
background:#111;
border:none;
color:#888;
cursor:pointer;
font-weight:600;
transition:0.2s;
}

.tabs button.active{
background:#1f2a36;
color:white;
}

input{
width:100%;
padding:12px;
margin-bottom:12px;
border:none;
border-radius:6px;
background:#111;
color:white;
outline:none;
border:1px solid rgba(255,255,255,0.05);
}

input:focus{
border:1px solid #1f6feb;
}

button{
width:100%;
padding:12px;
background:#1f6feb;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
font-weight:600;
transition:0.2s;
}

button:hover{
background:#388bfd;
}

.hidden{
display:none;
}

#authMessage{
margin-top:12px;
text-align:center;
font-size:14px;
color:#ff6b6b;
}