:root { --navy:#0b2545; --navy-mid:#133e6e; --blue:#1a56db; --blue-glow:rgba(26,86,219,.18); --bg:#eef3fb; --surface:#fff; --border:#d6e4f7; --text:#0f1f3d; --muted:#607590; --danger:#dc2626; --danger-bg:#fee2e2; --info:#0284c7; --info-bg:#e0f2fe; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; font-family:'Outfit',sans-serif; background:radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 24%), var(--bg); }
.auth-card { width:min(460px,100%); overflow:hidden; border-radius:18px; background:var(--surface); box-shadow:0 24px 64px rgba(11,37,69,.16); }
.card-top { padding:34px 34px 28px; text-align:center; background:linear-gradient(145deg, var(--navy), var(--navy-mid)); }
.card-icon { width:58px; height:58px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:16px; color:#fff; font-size:25px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.card-heading { color:#fff; font-size:22px; font-weight:700; margin-bottom:6px; }
.card-sub { color:rgba(255,255,255,.72); font-size:14px; line-height:1.7; }
.card-body { padding:30px 34px 34px; }
.alert { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid transparent; margin-bottom:18px; font-size:13px; }
.alert-error { color:var(--danger); background:var(--danger-bg); border-color:#fecaca; }
.fg { margin-bottom:18px; }
.fg label { display:block; margin-bottom:6px; color:var(--text); font-size:13px; font-weight:600; }
.input-wrap { position:relative; }
.input-wrap .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; }
.input-wrap input { width:100%; border:1.5px solid var(--border); border-radius:10px; padding:12px 14px 12px 40px; font:inherit; color:var(--text); outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.input-wrap input:focus { border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-glow); }
.input-wrap input::placeholder { color:#9fb1c8; }
.hint { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.6; }
.btn-submit { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; border:0; border-radius:10px; background:linear-gradient(135deg, var(--blue), #1e40af); color:#fff; font:inherit; font-weight:700; cursor:pointer; box-shadow:0 10px 24px rgba(26,86,219,.22); }
.back-link { margin-top:18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; color:var(--muted); text-decoration:none; font-size:13px; }