* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:28px; font-family:Inter,Segoe UI,Arial,sans-serif; color:#172033; background:radial-gradient(circle at top left,#e7efff 0,transparent 36%),linear-gradient(150deg,#f7f9fc,#edf2f9); }
.login-shell { width:min(430px,100%); }
.login-brand { display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:20px; color:#16243a; }
.login-brand>span { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff; background:#16243a; font-weight:900; }
.login-brand strong { font-size:17px; }
.login-card { padding:34px; border:1px solid #dce4ef; border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(28,45,72,.13); }
.login-kicker { margin-bottom:8px; color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0 0 8px; font-size:29px; letter-spacing:-.03em; }
p { margin:0 0 25px; color:#68758a; font-size:14px; line-height:1.45; }
label { display:block; margin:15px 0 7px; font-size:13px; font-weight:800; }
input { width:100%; height:48px; padding:0 13px; border:1px solid #cbd6e5; border-radius:11px; outline:none; font:inherit; }
input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
button { width:100%; height:49px; margin-top:23px; border:0; border-radius:11px; color:#fff; background:#2563eb; font-size:15px; font-weight:800; cursor:pointer; }
button:hover { background:#1d4ed8; }
.login-error { margin:0 0 14px; padding:11px 13px; border:1px solid #fecdd3; border-radius:10px; color:#a31515; background:#fff1f2; font-size:13px; }
.login-note { margin:18px 0 0; text-align:center; font-size:12px; }
@media (max-width:520px) { body{padding:18px}.login-card{padding:26px 22px} }