:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; color: #17352b; background: #edf7f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 10% 12%, #fff 0, transparent 48%), radial-gradient(ellipse at 90% 90%, #c7ddc4 0, transparent 65%), #edf7f1; }
.login-card { width: 100%; max-width: 420px; padding: 36px 28px 28px; border: 1px solid #fff; border-radius: 30px; background: rgba(255,255,255,.87); box-shadow: 0 20px 60px rgba(38,75,51,.1); }
.eyebrow { margin: 0 0 20px; color: #4b6658; font-size: 12px; letter-spacing: 2px; font-weight: 700; }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; font-weight: 650; }
.intro { margin: 0 0 30px; color: #4b6658; font-size: 15px; line-height: 1.7; }
label { display: block; font-size: 16px; font-weight: 600; }
.password-field { display: flex; align-items: center; margin-top: 10px; border: 1px solid #8da897; border-radius: 14px; background: #fff; overflow: hidden; }
#password { min-width: 0; width: 100%; height: 54px; padding: 12px 14px; border: 0; background: transparent; font: inherit; font-size: 16px; color: inherit; }
.password-field:focus-within { outline: 3px solid #4c7d60; outline-offset: 3px; }
#password:focus { outline: none; }
button { font: inherit; cursor: pointer; min-height: 48px; }
.show-password { min-width: 60px; border: 0; background: #fff; color: #365c45; font-size: 14px; }
.show-password:hover { background: #edf7f1; }
.remember-row { min-height: 48px; display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer; font-size: 15px; }
#remember { width: 21px; height: 21px; accent-color: #3e694c; flex: none; }
.remember-row small { margin-left: 6px; font-weight: 400; color: #4b6658; }
.hint, .footnote { color: #4b6658; font-size: 13px; line-height: 1.7; }
.hint { margin: 0; }
.error { color: #9a3232; min-height: 22px; font-size: 14px; line-height: 1.6; margin: 14px 0; overflow-wrap: anywhere; }
.primary { width: 100%; padding: 14px; border: 0; border-radius: 16px; color: #fff; background: #3e694c; font-weight: 650; }
.primary:hover { background: #30543c; }
.primary:disabled { opacity: .65; cursor: wait; }
button:focus-visible, #remember:focus-visible { outline: 3px solid #315f47; outline-offset: 3px; }
.footnote { margin: 24px 0 0; }
@media (max-width: 360px) { .login-card { padding: 28px 20px; } }