:root { color-scheme: light; --deep:#102b22; --deep-2:#183a2e; --ink:#152019; --muted:#68736c; --line:#d9e2dc; --green:#1c7b49; --soft:#edf7f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.5 "Segoe UI", Arial, sans-serif; background: #f3f6f4; }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); }
.intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(28px,5vw,72px); overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(86,190,132,.22), transparent 34%), linear-gradient(145deg,var(--deep-2),var(--deep)); }
.intro::after { content:""; position:absolute; width:420px; height:420px; right:-170px; bottom:-150px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:11px; font-size:18px; font-weight:800; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:11px; background:rgba(255,255,255,.08); }
.intro-copy { position:relative; z-index:1; max-width:620px; margin:80px 0; }
.eyebrow { margin:0 0 10px; color:#7ca98f; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.intro .eyebrow { color:#9fcbb4; }
h1 { max-width:650px; margin:0; font-size:clamp(36px,5vw,68px); line-height:1.03; letter-spacing:-.035em; }
.intro-copy > p:last-child { max-width:580px; margin:24px 0 0; color:#c8d8d0; font-size:clamp(16px,2vw,20px); }
.safety { position:relative; z-index:1; display:flex; align-items:center; gap:12px; max-width:420px; padding:14px 16px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(255,255,255,.06); backdrop-filter:blur(10px); }
.safety-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:#63dc96; box-shadow:0 0 0 5px rgba(99,220,150,.12); }
.safety strong,.safety small { display:block; }
.safety small { margin-top:2px; color:#bcd0c6; }
.form-panel { display:grid; place-items:center; padding:40px; }
.form-card { width:min(440px,100%); padding:38px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(22,48,36,.09); }
h2 { margin:0; font-size:30px; letter-spacing:-.025em; }
.lead { margin:10px 0 26px; color:var(--muted); }
form { display:grid; gap:18px; }
label span { display:block; margin-bottom:6px; font-size:13px; font-weight:700; }
input { width:100%; min-height:48px; padding:11px 13px; border:1px solid #b9c7bf; border-radius:9px; color:var(--ink); outline:none; background:#fff; }
input:focus { border-color:#3f8562; box-shadow:0 0 0 4px rgba(63,133,98,.12); }
button { min-height:50px; margin-top:3px; border:0; border-radius:9px; background:var(--deep-2); color:#fff; font-weight:800; cursor:pointer; transition:.15s ease; }
button:hover { transform:translateY(-1px); background:#1e4939; box-shadow:0 8px 22px rgba(24,58,46,.18); }
.form-message { margin:0 0 18px; padding:11px 13px; border-radius:9px; font-size:13px; }
.form-message.error { color:#8d2e3a; background:#fdecef; }
.form-message.success { color:#17683d; background:var(--soft); }
.privacy { margin:22px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width: 860px) { .login-shell { grid-template-columns:1fr; } .intro { min-height:auto; padding:26px 22px 32px; } .intro-copy { margin:48px 0 38px; } h1 { font-size:clamp(34px,10vw,52px); } .form-panel { padding:28px 18px 42px; } }
@media (max-width: 480px) { .intro { padding:22px 18px 26px; } .intro-copy { margin:36px 0 30px; } .intro-copy > p:last-child { margin-top:16px; font-size:15px; } .form-panel { padding:18px 12px 30px; } .form-card { padding:25px 20px; border-radius:14px; } h2 { font-size:26px; } .safety { padding:12px; } }