:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #0b1f3a; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.login-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, #e7f3ff 0, transparent 35%), #f4f7fb; }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid #dce4ef; border-radius: 18px; background: white; box-shadow: 0 30px 80px rgba(16,43,76,.12); }
.brand { margin-bottom: 42px; display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .12em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #0b1f3a; color: white; letter-spacing: 0; }
.eyebrow { margin: 0 0 8px; color: #0673dd; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: 38px; line-height: 1.08; letter-spacing: -.04em; }
.subtitle { margin: 13px 0 26px; color: #687386; line-height: 1.55; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; }
label span { color: #52657a; font-size: 12px; font-weight: 750; }
input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid #c6d2e2; border-radius: 10px; font: inherit; color: #0b1f3a; }
input:focus { outline: none; border-color: #168bff; box-shadow: 0 0 0 4px rgba(22,139,255,.12); }
button { height: 52px; margin-top: 4px; border: 0; border-radius: 10px; background: #168bff; color: white; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 12px 26px rgba(22,139,255,.22); }
button:hover { background: #0673dd; }
button:disabled { opacity: .65; cursor: wait; }
.error { margin: 0; padding: 11px 12px; border-radius: 9px; background: #fff1f2; color: #b4232d; font-size: 13px; }
.secure-note { margin: 22px 0 0; display: flex; align-items: center; gap: 8px; color: #687386; font-size: 12px; }
.secure-note span { width: 8px; height: 8px; border-radius: 50%; background: #16a36a; box-shadow: 0 0 0 4px rgba(22,163,106,.1); }
@media (max-width: 520px) { .login-shell { padding: 14px; } .login-card { padding: 28px 22px; } .brand { margin-bottom: 32px; } }