:root{
  --bg:#0d0f13; --panel:#0f1522; --panel-2:#0f1116; --stroke:#1a2433;
  --text:#eaf1ff; --muted:#a9b5c9; --brand:#1f6feb; --brand-2:#00b7ff;
  --danger:#ff6b6b; --glass: rgba(17,23,35,.55);
  --shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 18px 50px -24px rgba(0,183,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font: 15px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1400px 700px at 70% -20%, rgba(0,183,255,.08), transparent 60%), var(--bg);
}
.auth{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth .right{ width:100%; display:grid; place-items:center; }
.card{
  width:min(460px, 92vw);
  background: linear-gradient(180deg, rgba(18,24,38,.65), rgba(12,16,24,.55));
  backdrop-filter: blur(10px);
  border:1px solid var(--stroke);
  border-radius:18px; padding:22px 22px 18px; box-shadow: var(--shadow);
}
.head{ text-align:center; margin:8px 0 14px }
.title{ font-weight:900; font-size:26px; letter-spacing:.2px; margin:0 0 4px }
.sub{ color:var(--muted); font-size:13.5px; margin:0 }
.field{ margin:12px 0 }
label{ display:block; font-weight:700; font-size:13px; margin-bottom:6px }
.input{
  width:100%; border-radius:12px; outline:0; background:#0e121a; color:var(--text);
  border:1px solid #202c3f; padding:12px 14px; transition:border-color .18s, box-shadow .18s, background .18s;
}
.input:focus{ border-color:#2a86ff; box-shadow: 0 0 0 3px rgba(42,134,255,.25); }
.pw-wrap{ position:relative }
.pw-toggle{
  position:absolute; right:8px; top:70%; transform:translateY(-50%);
  border:1px solid #273247; background:#111727; color:#bfe0ff;
  border-radius:10px; padding:4px 8px; font-size:12px; cursor:pointer;
}
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--muted) }
a.link{ color:#9fd8ff; text-decoration:none }
a.link:hover{ text-decoration:underline }
.btn{
  width:100%; border:1px solid #2c5fb4; cursor:pointer; color:#fff; font-weight:800;
  background: linear-gradient(180deg, #8dd5ff, #53c7ff);
  border-radius:12px; padding:11px 14px; transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,183,255,.28); filter:saturate(1.05) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.alert{
  padding:10px 12px; border-radius:12px; margin:10px 0 6px;
  border:1px solid #2a2e3a; background:#121722; color:#dfeaff;
}
.alert.error{ border-color:#44262c; background:#1a1012; color:#ffd6db }
.alert.info { border-color:#22324d; background:#0e1726; color:#d7e7ff }
.bottom{ margin-top:10px; text-align:center; color:var(--muted); font-size:13px; }
.switch{ text-align:center; margin-top:10px; color:#a9b5c9; }
@media (max-width: 980px){
  .auth{ grid-template-columns: 1fr; }
  .card{ width:min(520px, 94vw); margin-top:-40px }
}