:root { color-scheme:light; --accent:#166534; --danger:#b91c1c; --muted:#64748b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; background:#f1f5f2; font:15px/1.5 system-ui,sans-serif; color:#17221a; }
.card { width:min(440px,100%); padding:34px; border:1px solid #dce6dd; border-radius:18px; background:#fff; box-shadow:0 18px 55px #163a2015; }
h1 { margin:0 0 8px; font-size:27px; }
p { color:var(--muted); }
label { display:block; margin:16px 0 6px; font-weight:650; }
input,select { width:100%; padding:12px 13px; border:1px solid #cbd5ce; border-radius:10px; font:inherit; }
input:focus,select:focus { outline:3px solid #16a34a22; border-color:#16a34a; }
button,.button { display:inline-flex; justify-content:center; width:100%; margin-top:20px; padding:12px 16px; border:0; border-radius:10px; color:#fff; background:var(--accent); font:700 15px system-ui; cursor:pointer; text-decoration:none; }
.secondary { color:var(--accent); background:#ecfdf3; }
.errors,.errorlist { color:var(--danger); padding-left:20px; }
.actions { margin-top:18px; text-align:center; }
.actions a { color:var(--accent); }
.hint { padding:12px; border-radius:10px; background:#f6f8f6; font-size:13px; }
.otp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.otp-grid input { padding:12px 4px; text-align:center; font-size:22px; font-weight:750; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:72px; }
.toggle { position:absolute; right:8px; top:8px; width:auto; margin:0; padding:5px 8px; color:var(--accent); background:transparent; font-size:13px; }