*{box-sizing:border-box}
:root{--blue:#2563eb;--blue2:#1d4ed8;--sky:#38bdf8;--text:#0f172a;--muted:#64748b;--line:#dbe3ef}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#eef3f9;color:var(--text)}
body{min-height:100dvh;display:grid;place-items:center;padding:28px}
.shell{width:min(1120px,96vw);min-height:660px;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 35px 100px rgba(15,23,42,.18)}
.left{display:flex;align-items:center;padding:54px;background:linear-gradient(180deg,#fff,#f8fbff)}
.card{width:100%;max-width:460px;margin:auto}
.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#fff);color:#1d4ed8;font-size:27px;box-shadow:0 15px 35px rgba(37,99,235,.17);margin-bottom:22px}
h1{font-size:38px;line-height:1.05;letter-spacing:-.045em;margin:0 0 11px;font-weight:900}
.sub{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 28px}
.steps{display:flex;gap:8px;margin-bottom:25px}
.dot{height:7px;flex:1;border-radius:999px;background:#e2e8f0}
.dot.active{background:linear-gradient(90deg,var(--blue),var(--sky))}
.field{margin:16px 0}
.field label{display:block;font-size:12px;font-weight:900;margin-bottom:9px}
.input{position:relative}
.input input{width:100%;height:55px;border:1px solid #d6deea;border-radius:14px;padding:0 48px 0 15px;outline:none;font-size:14px;font-weight:600;background:#fff}
.input input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.11)}
.input i{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#64748b}
.otp{font-size:28px!important;letter-spacing:12px;text-align:center;font-weight:900!important}
.btn{width:100%;height:55px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 17px 34px rgba(37,99,235,.27);margin-top:12px}
.btn:disabled{opacity:.7;cursor:not-allowed}
.btn.secondary{background:#eef2f7;color:#334155;box-shadow:none}
.back{display:inline-flex;gap:8px;align-items:center;margin-top:20px;color:#1d4ed8;text-decoration:none;font-size:13px;font-weight:900}
.right{position:relative;overflow:hidden;display:flex;align-items:center;padding:62px;background:#050d18;color:#fff}
.right:before,.right:after{content:"";position:absolute;border-radius:50%;border:110px solid rgba(148,163,184,.075)}
.right:before{width:510px;height:510px;left:-220px;top:-240px}
.right:after{width:540px;height:540px;right:-230px;bottom:-260px}
.hero{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);font-size:12px;color:#bfdbfe;font-weight:800}
.hero h2{font-size:50px;line-height:1.02;letter-spacing:-.05em;margin:27px 0 18px}
.hero p{color:#94a3b8;line-height:1.75;max-width:560px}
.secure{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.box{padding:17px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}
.box b{display:block;font-size:15px}
.box span{display:block;margin-top:4px;font-size:11px;color:#94a3b8}
.swal2-popup{border-radius:24px!important;font-family:Inter,sans-serif!important}
@media(max-width:900px){
 body{padding:0}
 .shell{width:100%;min-height:100dvh;border-radius:0;grid-template-columns:1fr}
 .right{display:none}
 .left{padding:30px 20px}
}
@media(max-width:480px){
 .left{padding:22px 16px}
 h1{font-size:31px}
 .otp{letter-spacing:7px}
}