*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --p:#2563eb;--pd:#1d4ed8;--pl:#3b82f6;--p-tint:#eff6ff;--p-border:#bfdbfe;
  --bg:#eef2f7;--card:#ffffff;--card2:#f8fafc;
  --txt:#0d1117;--txt2:#4b5563;--txt3:#9ca3af;
  --bdr:#e2e8f0;--ok:#10b981;--err:#ef4444;--err-bg:#fef2f2;--err-txt:#991b1b;
  --r:10px;--r2:14px;
}
[data-theme="dark"]{
  --p:#3b82f6;--pd:#2563eb;--pl:#60a5fa;--p-tint:#0f2040;--p-border:#2d5fa8;
  --bg:#0b1220;--card:#111d2e;--card2:#162336;
  --txt:#e8f0fc;--txt2:#94aecf;--txt3:#5a7898;
  --bdr:#1e3248;--ok:#10b981;--err:#f87171;--err-bg:#200a0a;--err-txt:#fca5a5;
}
html,body{height:100%;font-family:'Inter',-apple-system,sans-serif;font-size:13px;background:var(--bg);color:var(--txt);display:flex;align-items:center;justify-content:center}
.wrap{width:100%;max-width:400px;padding:20px}
.card{background:var(--card);border:1px solid var(--bdr);border-radius:20px;padding:36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.logo{text-align:center;margin-bottom:28px;position:relative}
.logo::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:160px;height:70px;background:radial-gradient(ellipse,rgba(124,58,237,.45) 0%,rgba(124,58,237,0) 70%);filter:blur(14px);pointer-events:none;z-index:0}
.logo > *{position:relative;z-index:1}.logo-sub{font-size:12px;color:var(--txt3);margin-top:8px}
.step{display:none}
.step.active{display:block}
h2{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px}
p.sub{font-size:12px;color:var(--txt3);margin-bottom:24px;line-height:1.5}
label{display:block;font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
input{width:100%;height:42px;background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--r);padding:0 14px;font-family:inherit;font-size:13px;color:var(--txt);outline:none;transition:border-color .15s}
input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
input::placeholder{color:var(--txt3)}
.btn{width:100%;height:44px;background:var(--p);border:none;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:all .15s;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--pd)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.err{background:var(--err-bg);border:1px solid var(--err);border-radius:var(--r);padding:10px 14px;font-size:12px;color:var(--err-txt);margin-top:12px;display:none}
.err.show{display:block}
.back{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--txt3);cursor:pointer;margin-bottom:20px;border:none;background:none;font-family:inherit;padding:0;transition:color .15s}
.back:hover{color:var(--p)}
.back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.otp-hint{font-size:11px;color:var(--txt3);margin-top:10px;text-align:center}
.otp-hint span{color:var(--p);cursor:pointer;font-weight:600}
.otp-hint span:hover{text-decoration:underline}
/* OTP digit input row */
.otp-row{display:flex;gap:8px;justify-content:center;margin:20px 0}
.otp-digit{width:44px;height:52px;text-align:center;font-size:22px;font-weight:800;background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--r);color:var(--txt);outline:none;transition:border-color .15s;font-family:inherit}
.otp-digit:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.theme-toggle{position:fixed;top:16px;right:16px;width:36px;height:36px;border-radius:10px;border:1px solid var(--bdr);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt3);transition:all .15s}
.theme-toggle:hover{color:var(--p);border-color:var(--p-border);background:var(--p-tint)}
.theme-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.success-icon{text-align:center;margin-bottom:20px}
.success-icon div{width:56px;height:56px;border-radius:50%;background:var(--ok);display:inline-flex;align-items:center;justify-content:center}
.success-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Logo block: center the image on the same axis as the subtitle */
.logo svg{height:32px;width:auto;display:inline-block}/* Resend countdown */
.otp-hint span.disabled{color:var(--txt3);cursor:not-allowed;text-decoration:none;font-weight:500}
.otp-hint span.disabled:hover{text-decoration:none}
/* Captcha modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(3px)}
.modal-backdrop.show{display:flex}
.modal{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);width:100%;max-width:340px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:modalIn .2s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-icon{width:44px;height:44px;border-radius:50%;background:var(--err-bg);border:1px solid var(--err);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.modal-icon svg{width:22px;height:22px;stroke:var(--err);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.modal-icon.ok{background:rgba(16,185,129,.12);border-color:var(--ok)}
.modal-icon.ok svg{stroke:var(--ok);stroke-width:2.5}
.modal h3{font-size:15px;font-weight:700;color:var(--txt);text-align:center;margin-bottom:6px}
.modal p{font-size:12px;color:var(--txt2);text-align:center;margin-bottom:18px;line-height:1.5}
.captcha-row{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.captcha-q{flex:1;font-size:16px;font-weight:700;color:var(--txt);background:var(--bg);border:1.5px dashed var(--bdr);border-radius:var(--r);padding:0 12px;height:42px;display:flex;align-items:center;justify-content:center;letter-spacing:1px;font-family:'Courier New',monospace;user-select:none}
.captcha-row input{height:42px;width:90px;text-align:center;font-weight:700;font-size:14px}
.captcha-refresh{height:42px;width:42px;border:1.5px solid var(--bdr);background:var(--bg);border-radius:var(--r);cursor:pointer;color:var(--txt2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.captcha-refresh:hover{color:var(--p);border-color:var(--p)}
.captcha-refresh svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.modal .err{margin-top:0;margin-bottom:12px}
.modal .btn{margin-top:0}