*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0B1E3D;--navy-mid:#132A52;--gold:#C8942A;--gold-lt:#E2B04D;
  --gold-pale:#F5E6C4;--gold-faint:#FBF4E8;--green:#1A7A4A;
  --red:#C0392B;--cream:#FAF8F4;--slate:#5C6B84;--slate-lt:#8A9BB5;
  --border:rgba(11,30,61,0.1);--white:#fff;
  --font-d:'Cormorant Garamond',serif;--font-b:'DM Sans',sans-serif;
}
html,body{height:100%;font-family:var(--font-b)}
body{
  min-height:100%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  padding:28px 16px;overflow-y:auto;position:relative;
}
body::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse 55% 50% at 85% 15%,rgba(28,58,110,.8) 0%,transparent 65%),
             radial-gradient(ellipse 60% 55% at 10% 85%,rgba(200,148,42,.14) 0%,transparent 60%);
  pointer-events:none;
}
.grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}

.wrap{position:relative;z-index:1;width:100%;max-width:440px;margin:auto}

/* Brand */
.brand{text-align:center;margin-bottom:28px}
.brand-logo{width:52px;height:52px;background:var(--gold);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 12px;box-shadow:0 6px 24px rgba(200,148,42,.4)}
.brand-name{font-family:var(--font-d);font-size:1.35rem;font-weight:700;color:var(--white);line-height:1.25}
.brand-sub{font-size:.68rem;color:rgba(255,255,255,.38);margin-top:4px;letter-spacing:.05em;text-transform:uppercase}

/* Steps row */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-bottom:28px}
.step-col{display:flex;flex-direction:column;align-items:center;gap:5px}
.step-circle{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;font-family:var(--font-b);
  border:2px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.3);background:transparent;
  transition:all .3s;flex-shrink:0;
}
.step-circle.active{background:var(--gold);border-color:var(--gold);color:var(--white)}
.step-circle.done{background:var(--green);border-color:var(--green);color:var(--white)}
.step-lbl{font-size:.65rem;color:rgba(255,255,255,.3);transition:color .3s;white-space:nowrap}
.step-lbl.active{color:var(--gold-lt)}
.step-lbl.done{color:rgba(255,255,255,.55)}
.step-line{width:52px;height:2px;background:rgba(255,255,255,.12);margin:0 4px;margin-top:17px;flex-shrink:0;transition:background .3s}
.step-line.done{background:var(--green)}

/* Card */
.card{background:var(--white);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.card-top{background:var(--navy);padding:26px 28px 20px;border-bottom:3px solid var(--gold);position:relative}
.card-top::after{content:'';position:absolute;right:0;top:0;bottom:0;width:80px;background:radial-gradient(ellipse at 100% 50%,rgba(200,148,42,.1),transparent 70%)}
.card-ico{width:46px;height:46px;background:rgba(200,148,42,.18);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:12px}
.card-title{font-family:var(--font-d);font-size:1.35rem;font-weight:700;color:var(--white);margin-bottom:4px}
.card-sub{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.6;max-width:320px}
.card-body{padding:24px 28px}

/* Forms */
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.fg label{font-size:.74rem;font-weight:600;color:var(--navy)}
.fg label span{color:var(--red)}
.fg input,.fg select{
  padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;
  font-size:.875rem;font-family:var(--font-b);color:var(--navy);
  background:var(--white);outline:none;width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.fg input:focus,.fg select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,148,42,.11)}
.fg .hint{font-size:.7rem;color:var(--slate-lt)}

/* OTP boxes */
.otp-row{display:flex;gap:10px;justify-content:center;margin:6px 0 18px}
.otp-box{
  width:50px;height:58px;border:1.5px solid var(--border);border-radius:10px;
  font-size:1.5rem;font-weight:700;font-family:var(--font-d);
  color:var(--navy);text-align:center;outline:none;background:var(--white);
  transition:border-color .18s,box-shadow .18s;caret-color:var(--gold);
}
.otp-box:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,148,42,.11)}
.otp-box.filled{border-color:var(--green);background:#f0faf5}
.otp-box.error{border-color:var(--red);background:#fdeaea}

/* Strength bar */
.strength-row{display:flex;gap:4px;margin-top:5px}
.seg{height:4px;flex:1;border-radius:2px;background:rgba(11,30,61,.08);transition:background .25s}
.seg.weak{background:var(--red)}
.seg.fair{background:#C87A00}
.seg.strong{background:var(--green)}
.strength-hint{font-size:.7rem;color:var(--slate-lt);margin-top:4px}

/* Info box */
.info-note{background:var(--gold-faint);border:1px solid var(--gold-pale);border-radius:8px;padding:11px 14px;font-size:.78rem;color:var(--slate);line-height:1.65;margin-bottom:16px}

/* Error */
.err-msg{font-size:.76rem;color:var(--red);margin-bottom:12px;display:none}
.err-msg.show{display:block}

/* Buttons */
.btn{
  width:100%;padding:12px;border:none;border-radius:9px;
  font-size:.875rem;font-weight:600;font-family:var(--font-b);
  cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-gold{background:var(--gold);color:var(--white)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-mid)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:#218f57}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Links */
.link-row{text-align:center;margin-top:14px;font-size:.78rem;color:var(--slate)}
.link-btn{background:none;border:none;color:var(--gold);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-b);text-decoration:underline}
.link-btn:hover{color:var(--gold-lt)}

/* Resend row */
.resend-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.timer-txt{font-size:.74rem;color:var(--slate-lt)}
.timer-txt strong{color:var(--gold)}
.resend-btn{background:none;border:none;color:var(--gold);font-size:.74rem;font-weight:600;cursor:pointer;font-family:var(--font-b);text-decoration:underline}
.resend-btn:disabled{opacity:.4;cursor:not-allowed}

/* Success */
.success-box{text-align:center;padding:12px 0}
.success-ico{width:72px;height:72px;background:#E3F5EC;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 16px}
.success-title{font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.success-text{font-size:.84rem;color:var(--slate);line-height:1.75;margin-bottom:22px}

/* Screens */
.screen{display:none}
.screen.active{display:block}

/* Back button */
.back-row{margin-bottom:20px;display:none}
.back-btn{background:none;border:none;color:rgba(255,255,255,.5);font-size:.78rem;cursor:pointer;font-family:var(--font-b);display:flex;align-items:center;gap:5px;padding:0;transition:color .18s}
.back-btn:hover{color:rgba(255,255,255,.85)}

.foot-note{text-align:center;font-size:.7rem;color:rgba(255,255,255,.22);margin-top:18px}

@media(max-width:480px){
  .card-body,.card-top{padding:20px 18px}
  .otp-box{width:42px;height:52px;font-size:1.3rem}
  .otp-row{gap:7px}
  .step-line{width:36px}
}