:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; color: #13253a; background: #edf3f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 10%, #d9eef1 0, transparent 35%), linear-gradient(145deg, #f7fafc, #e7eef4); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); padding: 38px; background: rgba(255,255,255,.95); border: 1px solid #d8e2e9; border-radius: 22px; box-shadow: 0 24px 70px rgba(37,61,82,.16); }
.login-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 36px; }
.login-brand > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #123149; color: white; font-weight: 800; }
.login-brand div { display: grid; gap: 2px; }
.login-brand strong { letter-spacing: .08em; }
.login-brand small, .eyebrow { color: #658092; letter-spacing: .14em; font-size: 11px; }
h1 { margin: 6px 0 10px; font-size: 30px; }
.intro { color: #607687; line-height: 1.6; }
form { display: grid; gap: 17px; margin-top: 26px; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
input { width: 100%; padding: 13px 14px; border: 1px solid #c9d6df; border-radius: 10px; font: inherit; font-size: 16px; outline: none; }
input:focus { border-color: #178e8e; box-shadow: 0 0 0 3px rgba(23,142,142,.13); }
button { padding: 14px; border: 0; border-radius: 10px; background: #127f81; color: white; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
#loginError { min-height: 20px; margin: 0; color: #bd3434; font-size: 13px; }
.security-note { display: block; margin-top: 22px; color: #718391; line-height: 1.6; }
@media (max-width: 520px) { .login-card { padding: 28px 22px; border-radius: 16px; } }