:root { --ink: #1d302b; --muted: #71827a; --line: #e4ebe5; --green: #245b49; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f8f5; color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14px; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 10; padding: 10px; background: white; color: var(--ink); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #8dbd69; outline-offset: 3px; }
.login-story { position: relative; overflow: hidden; min-height: 100vh; padding: 40px 48px 35px; background: #183d32; color: #eef5ed; }
.login-story::after { content: ''; position: absolute; right: -160px; bottom: -210px; width: 460px; height: 460px; border: 1px solid rgba(209, 237, 177, .13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(209, 237, 177, .035), 0 0 0 140px rgba(209, 237, 177, .025); pointer-events: none; }
.login-brand { position: relative; z-index: 1; display: inline-block; width: 210px; }
.login-brand img, .mobile-brand img { display: block; width: 100%; height: auto; }
.story-content { position: relative; z-index: 1; width: min(100%, 430px); margin: auto 0; padding: 65px 0; }
.story-eyebrow, .eyebrow, .story-footer, .login-footer span { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.story-eyebrow { color: #b6cebd; }
.story-eyebrow span { color: #d3ed9d; margin-right: 9px; font-size: 15px; }
.story-content h2 { margin: 22px 0 18px; font: 800 clamp(36px, 3.4vw, 50px)/1.14 Manrope, sans-serif; letter-spacing: -.05em; }
.story-content h2 span { color: #cbe89a; }
.story-content > p { max-width: 340px; margin: 0; color: #c1d4c8; font-size: 16px; line-height: 1.7; }
.story-card { display: flex; align-items: center; gap: 15px; margin-top: 46px; padding: 18px; max-width: 350px; background: #2b5547; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.story-card-icon, .login-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.story-card-icon { background: #416c58; color: #d6edaa; font-size: 24px; }
.story-card strong, .story-card small { display: block; }
.story-card strong { font-size: 13px; }
.story-card small { margin-top: 5px; color: #bad0c0; font-size: 12px; }
.story-footer { position: relative; z-index: 1; color: #9ab5a4; }
.story-footer span { margin-left: 8px; color: #cbe89a; }
.login-main { min-height: 100vh; padding: 34px 54px; }
.login-content { padding: 55px 0; }
.login-panel { width: 100%; max-width: 420px; }
.login-icon { background: #eaf3e4; color: #527b53; font-size: 22px; margin-bottom: 26px; }
.eyebrow { color: #84968b; }
.eyebrow span { color: #81af66; margin-left: 3px; }
h1 { margin: 12px 0 12px; font: 800 clamp(30px, 3vw, 39px)/1.2 Manrope, sans-serif; letter-spacing: -.05em; }
.heading-dot { color: #8cb65d; }
.login-intro { margin: 0 0 30px; color: #64786d; font-size: 15px; line-height: 1.7; }
.login-label { margin-bottom: 8px; color: #405c4e; font-weight: 700; font-size: 13px; }
.login-input.form-control { min-height: 52px; padding: 13px 15px; border: 1px solid #d8e3d9; border-radius: 8px; color: var(--ink); background: #fff; font-size: 15px; }
.login-input.form-control::placeholder { color: #9dada3; }
.login-input.form-control:focus { border-color: #6b9d75; box-shadow: 0 0 0 3px rgba(107,157,117,.16); }
.login-code { letter-spacing: .2em; font-weight: 700; }
.field-help { margin: 9px 0 0; color: #667b6e; font-size: 12px; }
.login-button.btn { position: relative; min-height: 52px; margin-top: 18px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-size: 14px; font-weight: 700; }
.login-button.btn:hover, .login-button.btn:focus-visible { background: #183f32; color: #fff; }
.login-button span { position: absolute; right: 18px; font-size: 19px; top: 11px; }
.login-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 27px; padding: 16px; border: 1px solid #e1ebdf; border-radius: 10px; background: #f1f6ed; color: #58745f; }
.login-note span { color: #739c62; font-size: 17px; line-height: 1; }
.login-note p { margin: 0; font-size: 12px; line-height: 1.6; }
.login-alert, .login-success { padding: 13px 15px; margin-bottom: 20px; border-radius: 8px; line-height: 1.5; }
.login-alert { background: #fbe9e4; color: #8e352b; }
.login-success { background: #e4f4e7; color: #28683d; }
.back-link { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 23px; color: #416f50; font-size: 13px; font-weight: 700; text-decoration: none; }
.back-link:hover { color: #183f32; text-decoration: underline; }
.login-footer { display: flex; justify-content: space-between; gap: 16px; color: #75887c; font-size: 11px; }
.login-footer span { color: #81958a; font-size: 9px; }
.mobile-brand { width: 180px; }
@media (max-width: 991.98px) { .login-story { display: none !important; } .login-main { padding: 30px 28px; } .login-content { padding: 70px 0; } }
@media (max-width: 575.98px) { .login-main { padding: 26px 22px; } .mobile-brand { width: 160px; } .login-content { padding: 55px 0; align-items: flex-start !important; } .login-panel { max-width: 100%; } .login-footer span { display: none; } }