*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins, sans-serif;
}

body{
min-height:100vh;
background:
radial-gradient(circle at top left, rgba(56,189,248,0.10), transparent 30%),
linear-gradient(135deg,#020617,#0f172a 45%,#111827);
color:white;
}

/* NAVBAR */
.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 30px;
background:rgba(2,6,23,0.85);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(148,163,184,0.12);
position:sticky;
top:0;
z-index:100;
}

.nav h2{
margin:0;
font-size:22px;
font-weight:700;
color:#38bdf8;
}

.nav div{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
}

.nav a{
color:#e2e8f0;
text-decoration:none;
transition:0.3s;
padding:8px 10px;
border-radius:8px;
}

.nav a:hover{
color:#38bdf8;
background:rgba(56,189,248,0.08);
}

/* CENTER LOGIN */
.center{
display:flex;
justify-content:center;
align-items:center;
min-height:calc(100vh - 70px);
padding:20px;
}

/* LOGIN BOX */
.box{
background:rgba(2,6,23,0.82);
backdrop-filter:blur(14px);
padding:40px;
border-radius:20px;
width:100%;
max-width:380px;
text-align:center;
box-shadow:0 20px 40px rgba(0,0,0,0.45);
border:1px solid rgba(148,163,184,0.14);
}

/* TITLE */
.box h2{
margin-bottom:20px;
font-size:28px;
color:#f8fafc;
}

/* INPUT FIELDS */
input, select{
width:100%;
padding:13px 14px;
margin:10px 0;
border-radius:10px;
border:1px solid transparent;
outline:none;
font-size:14px;
background:#1e293b;
color:white;
transition:0.3s;
}

input::placeholder,
select{
color:#94a3b8;
}

/* INPUT FOCUS */
input:focus, select:focus{
border:1px solid #38bdf8;
background:#0f172a;
box-shadow:0 0 0 3px rgba(56,189,248,0.14);
}

/* BUTTON */
button{
background:linear-gradient(135deg,#38bdf8,#0ea5e9);
border:none;
padding:12px;
width:100%;
border-radius:10px;
cursor:pointer;
font-weight:700;
transition:0.3s;
color:#001018;
box-shadow:0 10px 22px rgba(56,189,248,0.22);
margin-top:8px;
}

button:hover{
background:linear-gradient(135deg,#0ea5e9,#0284c7);
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(56,189,248,0.30);
}

/* ERROR MESSAGE */
#error{
color:#ef4444;
margin-top:10px;
font-size:14px;
}

/* SMALL TEXT */
.small-text{
margin-top:16px;
font-size:14px;
color:#94a3b8;
line-height:1.6;
}

.small-text a{
color:#38bdf8;
text-decoration:none;
font-weight:600;
}

.small-text a:hover{
text-decoration:underline;
}

/* GOOGLE BUTTON */
.google-btn{
background:#ffffff;
color:#111827;
font-weight:700;
box-shadow:none;
}

.google-btn:hover{
background:#e5e7eb;
transform:translateY(-2px);
}

/* MOBILE */
@media (max-width:768px){
.nav{
padding:14px 18px;
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.center{
padding:18px;
min-height:calc(100vh - 90px);
}

.box{
padding:28px 22px;
border-radius:18px;
}

.box h2{
font-size:24px;
}
}