:root { color-scheme: light; --forest:#123f32; --forest-dark:#0b2d24; --lime:#b8d94a; --ink:#173129; --muted:#667770; --line:#dce5e1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:#f4f7f5; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; }
button,input { font:inherit; }
button { cursor:pointer; }
.auth-layout { display:grid; grid-template-columns:minmax(330px,44%) minmax(0,1fr); min-height:100vh; }
.intro { display:flex; flex-direction:column; justify-content:space-between; padding:48px clamp(30px,5vw,84px); color:#fff; background:radial-gradient(circle at 15% 90%,rgba(184,217,74,.18),transparent 34%),linear-gradient(150deg,var(--forest-dark),var(--forest)); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; width:44px; height:44px; place-items:center; border-radius:13px; color:var(--forest-dark); background:var(--lime); font-weight:900; letter-spacing:-.06em; }
.brand strong,.brand small { display:block; }
.brand small { color:rgba(255,255,255,.65); font-size:.77rem; }
.intro-copy { max-width:510px; }
.eyebrow { margin:0 0 8px; color:#32825f; font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.intro .eyebrow { color:var(--lime); }
.intro h1 { margin:0 0 18px; font-size:clamp(2.7rem,5vw,4.8rem); letter-spacing:-.06em; line-height:1.04; }
.intro-copy>p:last-child { max-width:390px; color:rgba(255,255,255,.7); font-size:1rem; }
.intro-foot { color:rgba(255,255,255,.6); font-size:.78rem; }
.auth-side { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 20px; }
.auth-card { width:min(100%,440px); padding:36px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 24px 80px rgba(15,52,41,.09); }
.lock-icon { display:grid; width:44px; height:44px; margin-bottom:22px; place-items:center; border-radius:12px; color:var(--forest); background:#e5f2ea; font-size:1.4rem; }
h2 { margin:0; font-size:1.65rem; letter-spacing:-.04em; }
.help { margin:8px 0 24px; color:var(--muted); font-size:.88rem; }
label { display:block; margin:15px 0; color:var(--ink); font-size:.79rem; font-weight:750; }
input { display:block; width:100%; min-height:46px; margin-top:7px; padding:0 13px; border:1px solid #cfdcd5; border-radius:10px; color:var(--ink); background:#fff; outline:none; }
input:focus { border-color:#32825f; box-shadow:0 0 0 3px rgba(50,130,95,.13); }
button.primary,button.secondary { display:block; width:100%; min-height:47px; margin-top:24px; padding:8px 14px; border:0; border-radius:10px; font-weight:800; }
button.primary { color:#fff; background:var(--forest); }
button.primary:hover { background:#1f684f; }
button.secondary { margin-top:12px; color:var(--forest); background:#e5f2ea; }
button:disabled { opacity:.6; cursor:wait; }
.text-button { display:block; margin:18px auto 0; border:0; color:var(--forest); background:transparent; font-size:.82rem; font-weight:750; }
.message { min-height:1.3em; margin:20px 0 0; color:#b8433f; font-size:.83rem; }
.auth-note { color:var(--muted); font-size:.75rem; text-align:center; }
.qr { display:block; width:220px; height:220px; max-width:100%; margin:0 auto 16px; }
details { margin:10px 0 18px; color:var(--muted); font-size:.76rem; }
details p { margin-bottom:4px; }
code { display:block; padding:10px; overflow-wrap:anywhere; border-radius:8px; color:var(--ink); background:#f0f4f1; font-size:.75rem; }
.recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.recovery-codes code { text-align:center; }
@media (max-width:760px) { .auth-layout { grid-template-columns:1fr; } .intro { min-height:190px; padding:26px; } .intro-copy,.intro-foot { display:none; } .auth-side { justify-content:flex-start; margin-top:-60px; padding-bottom:32px; } .auth-card { position:relative; padding:25px; } }