/*
This page renders inside base.html (its own dark theme, navbar
and background already apply to ), so this file only
styles the login card itself — the centering wrapper is the
inline-styled div in login.html.
*/
.card{
width:92%;
max-width:380px;
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), #12161f;
border:1px solid #232a38;
border-radius:18px;
padding:32px 28px;
box-shadow:
0 24px 60px -18px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.02) inset;
animation:card-in 320ms cubic-bezier(.4,0,.2,1);
}
@keyframes card-in{
from{ opacity:0; transform:translateY(10px) scale(.985); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
.brand-badge{
width:46px;
height:46px;
margin:0 auto 18px auto;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
background:linear-gradient(135deg, #22d3ee, #0891b2);
color:#04141a;
font-size:22px;
box-shadow:0 8px 24px -6px rgba(34,211,238,.45);
}
h2{
color:#e8ecf4;
text-align:center;
font-weight:700;
font-size:1.35rem;
letter-spacing:.01em;
margin-bottom:6px;
}
.subtitle{
text-align:center;
color:#8b93a8;
font-size:.82rem;
margin-bottom:26px;
}
label{
display:block;
margin-bottom:6px;
color:#8b93a8;
font-size:.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
}
input{
width:100%;
padding:12px 14px;
margin-bottom:18px;
background:#1c2230;
color:#e8ecf4;
border:1px solid #2f3849;
border-radius:10px;
font-size:15px;
font-family:inherit;
transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input::placeholder{
color:#5b6479;
}
input:focus{
outline:none;
border-color:#22d3ee;
box-shadow:0 0 0 3px rgba(34,211,238,.16);
}
button{
width:100%;
padding:13px;
border:none;
border-radius:10px;
background:linear-gradient(135deg, #22d3ee, #0891b2);
color:#04141a;
font-size:15px;
font-weight:700;
letter-spacing:.02em;
cursor:pointer;
transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
button:hover{
filter:brightness(1.05);
transform:translateY(-1px);
box-shadow:0 10px 28px -8px rgba(34,211,238,.5);
}
button:active{
transform:translateY(0);
filter:brightness(.97);
}
.error{
color:#ff8080;
background:rgba(255,92,92,.1);
border:1px solid rgba(255,92,92,.3);
border-radius:10px;
text-align:center;
padding:10px;
font-size:.85rem;
margin-bottom:18px;
}
.footer{
margin-top:22px;
text-align:center;
color:#5b6479;
font-size:12px;
letter-spacing:.02em;
}