:root { --ink:#17201d; --green:#155f4d; --cream:#f3f5f1; --muted:#74807b; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--cream); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(480px, .95fr); }
.login-story { position: relative; padding: 42px clamp(42px, 6vw, 92px); color: #eef5f1; background: radial-gradient(circle at 75% 20%, rgba(110,173,143,.22), transparent 32%), linear-gradient(145deg, #18352b 0%, #10231d 72%); overflow: hidden; display: flex; flex-direction: column; }
.login-story::after { content:""; position:absolute; width:420px; height:420px; right:-190px; bottom:-170px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 65px rgba(255,255,255,.018),0 0 0 130px rgba(255,255,255,.012); }
.login-brand { color:white; text-decoration:none; display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.login-brand > span { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:#d6e9ae; color:#173028; font:800 13px Manrope; }
.login-brand strong { font:800 18px Manrope; }
.login-brand small { display:block; margin-top:2px; color:#91aaa0; font:500 10px "DM Sans"; }
.story-copy { margin:auto 0; max-width:590px; position:relative; z-index:1; }
.kicker { font-size:10px; font-weight:700; letter-spacing:.18em; color:#9cb5aa; }
.story-copy h1 { margin:18px 0; font:800 clamp(43px,5vw,69px)/1.02 Manrope; letter-spacing:-.055em; }
.story-copy h1 em { color:#bddc91; font-style:normal; }
.story-copy > p { max-width:510px; color:#aabdb5; font-size:15px; line-height:1.7; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; border-top:1px solid rgba(255,255,255,.13); padding-top:21px; }
.feature-row div { display:flex; gap:11px; align-items:flex-start; }
.feature-row b { color:#c7e2a2; font-size:10px; }
.feature-row span { font-size:11px; line-height:1.45; color:#a9bbb4; }
.story-foot { color:#627a70; font-size:9px; letter-spacing:.08em; position:relative; z-index:1; }
.login-panel { display:grid; place-items:center; padding:45px; background:#f7f8f5; }
.login-card { width:min(100%, 410px); }
.secure-label { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:99px; color:#497064; background:#e5eee9; font-size:9px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.secure-label i { width:6px; height:6px; border-radius:50%; background:#49a374; }
.login-card h2 { margin:25px 0 5px; font:800 35px Manrope; letter-spacing:-.04em; }
.login-card > p { margin:0 0 30px; color:var(--muted); font-size:13px; }
.login-card form { display:grid; gap:17px; }
.login-card label { color:#4d5a55; font-size:11px; font-weight:700; }
.login-card input[type=email], .login-card input[type=password], .login-card input[type=text] { width:100%; margin-top:7px; border:1px solid #d8dfdb; border-radius:9px; background:white; padding:13px 14px; font:500 13px "DM Sans"; outline:none; }
.login-card input:focus { border-color:#3e856c; box-shadow:0 0 0 3px rgba(41,113,87,.1); }
.password-field { position:relative; }
.password-field input { padding-right:62px!important; }
.password-field button { position:absolute; right:6px; top:13px; bottom:6px; border:0; background:transparent; color:var(--green); font-size:10px; font-weight:700; cursor:pointer; }
.remember { display:flex; align-items:center; gap:8px; cursor:pointer; }
.remember input { width:15px; height:15px; accent-color:var(--green); }
.remember span { font-weight:500; color:#697570; }
.login-button { border:0; border-radius:9px; padding:14px 17px; background:var(--green); color:white; font:700 13px "DM Sans"; display:flex; justify-content:space-between; cursor:pointer; box-shadow:0 8px 20px rgba(21,95,77,.18); }
.login-button:hover { background:#104d3e; }
.security-note { display:flex; gap:11px; align-items:flex-start; border-top:1px solid #dde3df; margin-top:28px; padding-top:20px; color:#8a9590; font-size:10px; line-height:1.55; }
.security-note span { color:#608778; }
.security-note p { margin:0; }.security-note strong { color:#65736d; }
.login-alert { margin-bottom:18px; padding:11px 13px; border-radius:8px; font-size:11px; }
.login-alert.error { background:#f6e3e3; color:#993f3f; }.login-alert.success { background:#dff0e8; color:#17604b; }
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-story{min-height:330px;padding:30px}.story-copy{margin:55px 0 30px}.story-copy h1{font-size:42px}.story-copy>p,.feature-row,.story-foot{display:none}.login-panel{padding:45px 22px}}