:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #10232f; background: #edf4f6; }
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 10% 0%, #caedeb 0, transparent 60%); }
.login-card { width: min(100%, 440px); background: #fff; border: 1px solid #dce7eb; border-radius: 20px; padding: 40px; box-shadow: 0 20px 70px #16334512; }
.brand-mark { width: 48px; height: 48px; background: #0e9f9a; display: grid; place-items: center; border-radius: 12px; font-size: 26px; }
.eyebrow { color: #0b817d; font-size: 10px; font-weight: 700; letter-spacing: 2px; margin-top: 24px; }
h1 { font-size: 25px; margin: 8px 0; }
.intro { color: #627986; font-size: 13px; line-height: 1.8; margin-bottom: 28px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
input { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid #c9d8df; border-radius: 8px; font: inherit; font-size: 16px; }
input:focus { outline: 3px solid #0e9f9a24; border-color: #0e9f9a; }
.password-field { position: relative; }
.password-field input { padding-right: 60px; }
button { cursor: pointer; font: inherit; border: 0; }
#toggle-password { position: absolute; right: 8px; top: 6px; height: 34px; background: transparent; color: #39727a; font-size: 12px; }
#login-error { color: #bb3030; min-height: 20px; font-size: 13px; line-height: 1.5; margin: 12px 0; }
#login-submit { color: #fff; background: #0b928e; width: 100%; border-radius: 8px; min-height: 46px; font-weight: 600; }
#login-submit:hover { background: #087874; }
#login-submit:disabled { opacity: .6; cursor: wait; }
.footnote { text-align: center; color: #83959f; font-size: 11px; margin: 24px 0 0; }
@media (max-width: 480px) { .login-card { padding: 28px 22px; } h1 { font-size: 22px; } }