:root { --navy:#151d31; --navy2:#202b45; --green:#00a651; --green2:#008640; --yellow:#ffd400; --muted:#627083; --line:#dce6e0; --red:#b42318; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 5% 5%,rgba(255,212,0,.12),transparent 28rem),radial-gradient(circle at 95% 8%,rgba(0,166,81,.11),transparent 28rem),#f4f7f5; color:#182235; font-family:Inter,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--yellow) 0 34%,var(--green) 34%); z-index:20; }
header { min-height:74px; padding:12px clamp(18px,5vw,64px); background:linear-gradient(110deg,var(--navy),var(--navy2)); display:flex; align-items:center; justify-content:space-between; }
header>a { color:#fff; text-decoration:none; font-size:13px; font-weight:750; }
.brand { display:flex; gap:12px; align-items:center; }.brand>span { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:var(--green); border:2px solid var(--yellow); font-weight:900; }
.brand b,.brand small { display:block; }.brand small { color:#b8c6d7; font-size:11px; margin-top:2px; }
main { width:min(980px,calc(100% - 30px)); margin:64px auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:38px; align-items:start; }
.eyebrow { color:var(--green2); letter-spacing:1.5px; font-size:10px; font-weight:900; }
h1 { color:var(--navy); font-size:clamp(34px,5vw,50px); line-height:1.08; letter-spacing:-1.4px; margin:12px 0 17px; }.intro>p:not(.eyebrow) { color:var(--muted); line-height:1.65; }
.notice { margin-top:28px; padding:15px; border:1px solid #efd55c; border-radius:12px; background:#fff9cf; display:grid; gap:5px; font-size:12px; }.notice span { color:#5e6c79; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(24px,4vw,38px); box-shadow:0 16px 46px rgba(21,29,49,.09); position:relative; overflow:hidden; }
.card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--yellow) 0 34%,var(--green) 34%); }
form { display:grid; gap:16px; }.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:grid; gap:7px; color:#344b61; font-size:12px; font-weight:750; }
input { width:100%; padding:12px; border:1px solid #c9d5e1; border-radius:9px; color:#18344f; font:500 14px inherit; outline:none; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,166,81,.14); }
button { min-height:47px; padding:10px 17px; border:0; border-radius:9px; background:var(--green); color:#fff; font-weight:850; cursor:pointer; box-shadow:0 8px 20px rgba(0,166,81,.2); }
button:hover { background:var(--green2); }button:disabled { opacity:.6; cursor:wait; }
.alert { padding:11px 13px; border-radius:9px; font-size:13px; }.error { background:#fff0ef; border:1px solid #f1c7c3; color:var(--red); }
.hidden { display:none !important; }.success { text-align:center; }.check { margin:auto; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--navy); font-size:26px; font-weight:900; }
.link-button { width:100%; margin-top:10px; padding:9px; background:transparent; color:var(--green2); box-shadow:none; font-weight:700; font-size:13px; }
.link-button:hover { background:rgba(0,166,81,.08); }
.muted { color:var(--muted); font-size:13px; margin:6px 0 16px; }
.legacy-recovery { margin-top:22px; }
.legacy-recovery summary { cursor:pointer; color:var(--muted); font-size:13px; font-weight:700; padding:10px 0; }
.legacy-recovery[open] summary { margin-bottom:14px; }
.success h2 { font-size:28px; color:var(--navy); margin-bottom:7px; }.success p { color:var(--muted); line-height:1.55; }
.success code { display:block; margin:22px 0 14px; padding:14px; border:1px solid #efd55c; border-radius:10px; background:#fff9cf; color:var(--navy); font-weight:900; font-size:16px; overflow-wrap:anywhere; }
.login-links { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px; }.login-links a { color:var(--green2); font-size:12px; font-weight:800; text-decoration:none; }
@media(max-width:760px){main{grid-template-columns:1fr;margin-top:34px}.grid{grid-template-columns:1fr}}