:root { color-scheme: light; --green:#0f5a36; --dark:#123326; --soft:#eef7f1; --line:#d5e2d9; --muted:#617267; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--dark); background: radial-gradient(circle at 50% 0, #d9efe2 0, #f5f8f6 46%, #edf3ef 100%); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.login-card { width: min(100%, 430px); padding: clamp(24px, 7vw, 40px); border: 1px solid rgba(15,90,54,.12); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 22px 70px rgba(24,72,48,.15); }
.brand { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 24px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #147346, #0c4b2d); box-shadow: 0 10px 28px rgba(15,90,54,.25); font-size: 1.25rem; font-weight: 900; letter-spacing: .08em; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; }
.intro { margin: 14px 0 24px; color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 17px; }
label span { display: block; margin: 0 0 7px; font-size: .84rem; font-weight: 800; }
input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--dark); background: #fff; font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: #2d8b5a; box-shadow: 0 0 0 4px rgba(45,139,90,.14); }
button { min-height: 52px; margin-top: 3px; border: 0; border-radius: 12px; color: #fff; background: var(--green); font: inherit; font-weight: 850; cursor: pointer; box-shadow: 0 8px 22px rgba(15,90,54,.22); }
button:active { transform: translateY(1px); }
.error { margin: -6px 0 18px; padding: 11px 13px; border: 1px solid #fecaca; border-radius: 10px; color: #991b1b; background: #fef2f2; font-size: .86rem; font-weight: 700; }
.privacy { margin: 22px 0 0; color: #78877e; font-size: .75rem; line-height: 1.45; text-align: center; }
@media (max-width: 380px) { .login-card { padding: 24px 20px; border-radius: 19px; } .brand { width: 58px; height: 58px; margin-bottom: 20px; border-radius: 17px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }