:root{--dark:#04111F;--blue:#075BFF;--cyan:#00B8D9;--border:#DDE8F3;--muted:#64748B;--green:#16A34A;--red:#E11D48}
*{box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif}
body{margin:0;background:radial-gradient(circle at 15% 12%,rgba(0,184,217,.15),transparent 24%),linear-gradient(180deg,#F8FBFF,#EDF5FC);color:#081525}
.auth-wrap{width:min(1120px,94%);margin:34px auto 70px;display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:stretch}
.auth-hero{background:linear-gradient(135deg,#04111F,#082A4D);color:white;border-radius:34px;padding:36px;box-shadow:0 30px 80px rgba(4,17,31,.25);position:relative;overflow:hidden;min-height:520px}
.auth-logo{width:190px;height:76px;background:url('/ecommerces/assets/img/logo2.png?v=16') left center/contain no-repeat,url('/ecommerces/assets/img/favicon.png?v=16') left center/contain no-repeat;margin-bottom:34px}
.auth-hero h1{font-size:clamp(36px,4vw,56px);line-height:1.02;margin:0 0 18px;font-weight:950;letter-spacing:-1px}
.auth-hero p{font-size:17px;line-height:1.55;color:#DDEBFA;margin:0 0 24px}
.auth-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.auth-pills span{display:inline-flex;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);font-weight:850}
.auth-card{background:white;border:1px solid var(--border);border-radius:34px;padding:32px;box-shadow:0 22px 70px rgba(15,23,42,.12)}
.auth-card h2{font-size:34px;margin:0 0 8px;font-weight:950;letter-spacing:-.4px}
.sub{color:var(--muted);margin:0 0 22px}
.stepper{display:flex;gap:8px;margin:0 0 22px}
.step{height:8px;flex:1;border-radius:999px;background:#E8F0FA}
.step.active{background:linear-gradient(135deg,var(--blue),var(--cyan))}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.full{grid-column:1/-1}
label{display:block;margin-bottom:7px;font-weight:900;color:#132238}
input{width:100%;border:1px solid var(--border);border-radius:17px;padding:14px 15px;font-size:15px;outline:0;background:#FBFDFF}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,184,217,.13);background:white}
.btn-main{width:100%;border:0;border-radius:18px;padding:15px 18px;font-weight:950;color:white;background:linear-gradient(135deg,var(--blue),var(--cyan));cursor:pointer;font-size:16px;margin-top:10px}
.btn-dark{background:#04111F}
.notice{padding:14px 16px;border-radius:18px;margin:16px 0;font-weight:850;line-height:1.45}
.notice.ok{background:#ECFDF5;color:#047857;border:1px solid #BBF7D0}
.notice.err{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.otp-box{display:grid;place-items:center;text-align:center;border:1px dashed #8BDCF3;border-radius:26px;padding:24px;background:#F8FEFF;margin:18px 0}
.otp-code-input{text-align:center;font-size:28px;font-weight:950;letter-spacing:8px}
.auth-links{margin-top:16px;text-align:center;color:#64748B}
.auth-links a{color:#075BFF;font-weight:900;text-decoration:none}
@media(max-width:850px){.auth-wrap{grid-template-columns:1fr;margin-top:22px}.auth-hero{min-height:auto;padding:28px;border-radius:28px}}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}.auth-card{padding:22px;border-radius:26px}.auth-card h2{font-size:28px}}