:root{
  --bg:#0e2224; --bg2:#0a1a1c; --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12); --text:#eaf3f3; --muted:#b6c6c6;
  --accent:#4f80ff; --accent2:#ff7a59;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:radial-gradient(1200px 600px at 50% -100px,#12383a 0%, var(--bg) 60%, var(--bg2) 100%);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.auth-wrap{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:32px 16px;
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:22px 20px 20px; backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.auth-title{ margin:0 0 10px; font-weight:800; letter-spacing:.2px; font-size:26px; }
.auth-sub{ margin:-2px 0 16px; color:var(--muted); font-size:14px; }

.input{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
        background:#0b1f21; color:var(--text); outline:none; }
.input::placeholder{color:#8aa3a3}
.input + .input{ margin-top:10px }
.btn{
  width:100%; margin-top:12px; padding:12px 14px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#4f80ff,#375fd9); color:#fff; border-radius:12px; font-weight:700;
  box-shadow:0 6px 18px rgba(79,128,255,.25);
}
.btn:active{ transform:translateY(1px) }

.links{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:14px; }
a.link{ color:#9bd9ff; text-decoration:none }
a.link:hover{ text-decoration:underline }

.err{ margin:0 0 12px; color:#ffb3b3; background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3);
      padding:8px 10px; border-radius:10px; font-size:14px; }

/* Mobile tweaks */
@media (max-width:420px){
  .auth-card{ padding:18px 16px; border-radius:14px; }
  .auth-title{ font-size:24px }
}