:root { --ink:#14221d; --muted:#77827d; --line:#dfe5df; --green:#123e32; --green-light:#9ed0b3; --canvas:#f4f5f0; }
* { box-sizing:border-box; }
body { background:var(--canvas); color:var(--ink); font-family:"DM Sans",system-ui,sans-serif; margin:0; min-height:100vh; }
button,input { font:inherit; }
.login-shell { display:grid; grid-template-columns:minmax(360px,.9fr) 1.1fr; min-height:100vh; }
.login-visual { background:var(--green); color:white; display:flex; flex-direction:column; min-height:100vh; overflow:hidden; padding:42px 52px; position:relative; }
.login-visual::before { border:1px solid rgba(255,255,255,.07); border-radius:50%; content:""; height:550px; position:absolute; right:-250px; top:-160px; width:550px; }
.login-visual::after { border:1px solid rgba(255,255,255,.06); border-radius:50%; bottom:-330px; content:""; height:620px; left:-250px; position:absolute; width:620px; }
.login-brand { align-items:center; color:white; display:flex; font-family:Manrope,sans-serif; font-size:22px; font-weight:800; gap:10px; letter-spacing:-.8px; position:relative; text-decoration:none; z-index:1; }
.login-brand b,.mobile-logo b { color:var(--green-light); }
.brand-mark { align-items:center; background:#d9eddf; border-radius:10px; display:flex; height:38px; justify-content:center; width:38px; }
.brand-mark svg { height:26px; stroke:var(--green); stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:26px; }
.visual-copy { margin:auto 0; max-width:520px; position:relative; z-index:1; }
.spark { color:var(--green-light); display:block; font-size:29px; margin-bottom:20px; }
.visual-copy h1 { font-family:Manrope,sans-serif; font-size:clamp(35px,4vw,56px); letter-spacing:-2.3px; line-height:1.08; margin:0 0 20px; }
.visual-copy p { color:rgba(255,255,255,.58); font-size:15px; line-height:1.7; max-width:390px; }
.visual-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:16px; display:grid; gap:5px; padding:18px 20px; position:relative; width:240px; z-index:1; }
.visual-card > span { color:var(--green-light); font-size:8px; font-weight:800; letter-spacing:1.4px; }
.visual-card strong { font-family:Manrope,sans-serif; font-size:13px; }
.visual-card div { align-items:flex-end; display:flex; gap:5px; height:24px; margin-top:5px; }
.visual-card i { background:var(--green-light); border-radius:2px; display:block; height:35%; opacity:.35; width:21px; }
.visual-card i:nth-child(2){height:65%}.visual-card i:nth-child(3){height:48%}.visual-card i:nth-child(4){height:88%;opacity:.7}.visual-card i:nth-child(5){height:72%;opacity:.55}
.login-form-area { align-items:center; background:#fff; display:flex; justify-content:center; padding:45px; }
.form-wrap { max-width:410px; width:100%; }
.eyebrow { color:#2e8063; font-size:9px; font-weight:800; letter-spacing:1.8px; margin:0 0 9px; }
.form-wrap h2 { font-family:Manrope,sans-serif; font-size:31px; letter-spacing:-1.1px; margin:0 0 9px; }
.subtitle { color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 28px; }
.login-error { align-items:center; background:#fff0ec; border:1px solid #f3d3cb; border-radius:10px; color:#9a4938; display:flex; font-size:11px; gap:9px; margin-bottom:18px; padding:11px 12px; }
.login-error span { align-items:center; background:#f5d9d2; border-radius:50%; display:flex; flex:0 0 auto; font-size:9px; font-weight:800; height:20px; justify-content:center; width:20px; }
.login-success { align-items:center; background:#edf7f0; border:1px solid #cfe8d7; border-radius:10px; color:#276548; display:flex; font-size:11px; gap:9px; margin-bottom:18px; padding:11px 12px; }
.login-success span { align-items:center; background:#d8eddf; border-radius:50%; display:flex; flex:0 0 auto; font-size:9px; font-weight:800; height:20px; justify-content:center; width:20px; }
form { display:grid; gap:15px; }
label { color:#53605b; display:grid; font-size:10px; font-weight:700; gap:7px; }
input { background:#fafbf9; border:1px solid var(--line); border-radius:10px; color:var(--ink); height:46px; outline:none; padding:0 13px; transition:.18s; width:100%; }
input:focus { background:white; border-color:#7db496; box-shadow:0 0 0 3px rgba(46,128,99,.12); }
.password-field { position:relative; }
.password-field input { padding-right:63px; }
.show-password { background:none; border:0; color:#2e8063; cursor:pointer; font-size:9px; font-weight:800; padding:10px; position:absolute; right:5px; top:50%; transform:translateY(-50%); }
.login-button { align-items:center; background:var(--green); border:0; border-radius:10px; box-shadow:0 9px 20px rgba(18,62,50,.16); color:white; cursor:pointer; display:flex; font-size:12px; font-weight:800; height:47px; justify-content:center; margin-top:4px; transition:.2s; }
.login-button span { font-size:17px; margin-left:8px; }
.login-button:hover { background:#19513f; transform:translateY(-1px); }
.auth-switch { color:var(--muted); font-size:10px; margin:18px 0 0; text-align:center; }
.auth-switch a { color:#2e8063; font-weight:800; margin-left:3px; text-decoration:none; }
.auth-switch a:hover { text-decoration:underline; }
.privacy-note { color:#9ba49f; font-size:9px; margin:20px 0 0; text-align:center; }
.privacy-note span { color:#2e8063; margin-right:4px; }
.mobile-logo { display:none; }
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-form-area{min-height:100vh;padding:28px 22px}.mobile-logo{display:block;font-family:Manrope,sans-serif;font-size:20px;font-weight:800;margin-bottom:50px}.form-wrap{max-width:430px}.form-wrap h2{font-size:27px}}