:root { color-scheme: light; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #17221e; background: #edf1ec; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 5%, #f8faf6 0 16%, transparent 48%), #edf1ec; }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid #d8e0da; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px #173b321a; }
.login-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 14px; color: #173b32; background: #dcefdc; font-size: 32px; font-weight: 700; }
.login-kicker { margin: 0 0 7px; color: #4e7466; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; color: #173b32; font-size: clamp(26px, 7vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.login-copy { margin: 15px 0 27px; color: #69766f; font-size: 14px; line-height: 1.55; }
label { display: block; margin-bottom: 7px; color: #44574f; font-size: 12px; font-weight: 750; }
input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #ccd7d0; border-radius: 10px; color: #17221e; background: #fbfcfb; font: inherit; outline: none; }
input:focus { border-color: #4c8a73; box-shadow: 0 0 0 3px #4c8a7326; }
button { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 10px; color: #fff; background: #225b4b; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
button:hover { background: #194b3e; }
button:focus-visible { outline: 3px solid #8ab8a7; outline-offset: 2px; }
.login-error { margin: 9px 0 0; color: #b44137; font-size: 12px; }
.login-note { margin: 22px 0 0; color: #94a099; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 480px) { .login-card { padding: 28px 22px; } }