:root{
  --bg1:#0a3d91; --bg2:#0d5bd1; --panel:#ffffff; --ink:#0b1020; --btn:#1d64f2; --btn-ink:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body.auth-body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;color:#111}
.auth-wrapper{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:980px;max-width:95vw;display:grid;grid-template-columns:1.1fr 1fr;background:var(--panel);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden}
.auth-left{background:radial-gradient(1200px 600px at -10% 110%, rgba(255,255,255,.08), transparent), radial-gradient(700px 500px at 120% -10%, rgba(255,255,255,.06), transparent), linear-gradient(160deg, #0b3fa1, #0a56cf);display:flex;align-items:center;justify-content:center;padding:40px;color:#eaf2ff;position:relative}
.brand{text-align:center}
.brand h1{margin:16px 0 6px;font-size:36px;letter-spacing:.5px}
.brand p{margin:0;opacity:.9}
.planet{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #e6f0ff, #8ab4ff 60%, #3a6ae0);box-shadow:0 0 0 12px rgba(255,255,255,.06);margin:0 auto 8px;position:relative}
.planet:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(200px 40px at 50% 70%, rgba(255,255,255,.7), transparent 60%)}
.auth-right{padding:36px 40px}
.auth-header h2{margin:8px 0 20px;color:#1d2b4d;font-weight:700}
.alert{background:#ffe6e6;border:1px solid #ffb3b3;color:#711212;padding:10px;border-radius:8px;margin-bottom:12px}
.auth-form{display:flex;flex-direction:column;gap:18px}
.field span{display:block;font-size:13px;color:#405070;margin-bottom:6px}
.field input{width:100%;border:none;border-bottom:2px solid #e5e9f2;padding:10px 4px 10px 0;font-size:15px;outline:none}
.field input:focus{border-bottom-color:#2a6df5}
.btn-primary{background:var(--btn);color:var(--btn-ink);border:none;padding:12px 14px;border-radius:8px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(29,100,242,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.aux{display:flex;justify-content:space-between;margin-top:6px}
.muted{color:#6b7a90;text-decoration:none}
.muted:hover{text-decoration:underline}
@media (max-width:860px){
  .auth-card{grid-template-columns:1fr}
  .auth-left{display:none}
}