:root { --brand:#4f46e5; --brand-dark:#3730a3; --ink:#172033; --muted:#68738a; }
body { min-height:100vh; background:radial-gradient(circle at 15% 10%,#dbeafe 0,transparent 33%),linear-gradient(135deg,#f8fafc,#eef2ff); color:var(--ink); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.auth-card { width:min(100%,430px); border:0; border-radius:1.5rem; box-shadow:0 24px 65px rgba(30,41,59,.14); overflow:hidden; }
.auth-card .card-body { padding:2.3rem; }
.brand-mark { width:3.25rem; height:3.25rem; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand),#7c3aed); border-radius:1rem; font-size:1.45rem; box-shadow:0 10px 24px rgba(79,70,229,.3); }
.form-control { border-radius:.8rem; padding:.8rem 1rem; border-color:#d9dfeb; }
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 .22rem rgba(79,70,229,.14); }
.btn-primary { background:var(--brand); border-color:var(--brand); border-radius:.8rem; padding:.8rem; font-weight:600; }
.btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.subtle { color:var(--muted); }
@media (max-width:480px) { .auth-shell{padding:.8rem}.auth-card .card-body{padding:1.5rem} }