*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:         #0A1628;
      --blue:         #2563EB;
      --sky:          #60A5FA;
      --glass-bg:     rgba(255,255,255,0.10);
      --glass-border: rgba(255,255,255,0.20);
      --glass-inner:  rgba(255,255,255,0.06);
      --white:        #FFFFFF;
      --muted:        rgba(255,255,255,0.55);
      --error:        #F87171;
      --success:      #34D399;
      --amber:        #FBBF24;
    }

    html, body { min-height:100%; font-family:'Poppins',sans-serif; overflow-x:hidden; }

    body {
      background:linear-gradient(135deg, var(--navy) 0%, #0D2456 45%, #132E6B 100%);
      min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      padding:28px 16px;
      position:relative;
    }

    /* ── Blobs ── */
    .blob { position:fixed; border-radius:50%; filter:blur(80px); opacity:0.18; animation:drift 12s ease-in-out infinite alternate; pointer-events:none; z-index:0; }
    .blob-1 { width:520px; height:520px; background:radial-gradient(circle,#3B82F6,transparent); top:-140px; left:-120px; animation-duration:14s; }
    .blob-2 { width:380px; height:380px; background:radial-gradient(circle,#6366F1,transparent); bottom:-80px; right:-100px; animation-duration:18s; animation-delay:-6s; }
    .blob-3 { width:260px; height:260px; background:radial-gradient(circle,#0EA5E9,transparent); top:50%; left:55%; animation-duration:10s; animation-delay:-3s; }
    @keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,30px) scale(1.08)} }

    /* ── Dots ── */
    .dots-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .dot { position:absolute; border-radius:50%; background:rgba(255,255,255,.55); animation:floatUp linear infinite; }
    @keyframes floatUp { 0%{transform:translateY(0) scale(1);opacity:0} 10%{opacity:1} 90%{opacity:.6} 100%{transform:translateY(-110vh) scale(.6);opacity:0} }

    /* ── Card ── */
    .card {
      position:relative; z-index:10;
      width:100%; max-width:430px;
      background:var(--glass-bg);
      backdrop-filter:blur(28px) saturate(160%);
      -webkit-backdrop-filter:blur(28px) saturate(160%);
      border:1px solid var(--glass-border);
      border-radius:24px;
      padding:38px 36px 34px;
      box-shadow:0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
      animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes cardIn { from{opacity:0;transform:translateY(36px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

    /* ── Illustration ── */
    .illus-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:22px; }
    .scene-svg { width:180px; height:80px; animation:sceneFade .9s .2s ease both; }
    @keyframes sceneFade { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
    .key-spin { animation:keySpin 5s ease-in-out infinite; transform-origin:50% 50%; }
    @keyframes keySpin { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(8deg) translateY(-4px)} }
    .shield-pulse { animation:shieldPulse 3s ease-in-out infinite; }
    @keyframes shieldPulse { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:0.85;transform:scale(1.05)} }

    .brand-block { text-align:center; animation:fadeUp .7s .35s ease both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    .brand-eyebrow { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sky); margin-bottom:3px; }
    .brand-title { font-size:20px; font-weight:700; color:var(--white); line-height:1.2; }
    .brand-title span { color:var(--sky); }

    /* ── Progress dots ── */
    .progress-dots { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; animation:fadeUp .7s .4s ease both; }
    .prog-dot { width:32px; height:4px; border-radius:2px; background:var(--glass-border); transition:background .4s, width .3s; }
    .prog-dot.active { background:var(--blue); width:40px; }
    .prog-dot.done   { background:var(--success); }

    /* ── Step headings ── */
    .step-heading { text-align:center; margin-bottom:18px; animation:fadeUp .5s ease both; }
    .step-heading h2 { font-size:17px; font-weight:600; color:var(--white); margin-bottom:4px; }
    .step-heading p  { font-size:12.5px; color:var(--muted); line-height:1.5; }
    .step-heading p strong { color:var(--sky); font-weight:600; }

    /* ── Form steps ── */
    .form-step { display:none; flex-direction:column; gap:14px; animation:fadeUp .4s ease both; }
    .form-step.active { display:flex; }

    /* ── Fields ── */
    .field { position:relative; }
    .field-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); display:flex; align-items:center; pointer-events:none; transition:color .2s; }
    .field input {
      width:100%; background:var(--glass-inner); border:1px solid var(--glass-border);
      border-radius:12px; padding:14px 16px 14px 46px;
      color:var(--white); font-family:'Poppins',sans-serif; font-size:14px; font-weight:400;
      outline:none; transition:border-color .25s, background .25s, box-shadow .25s;
    }
    .field input::placeholder { color:rgba(255,255,255,.35); }
    .field input:focus { border-color:var(--sky); background:rgba(255,255,255,.10); box-shadow:0 0 0 3px rgba(96,165,250,.18); }
    .field:focus-within .field-icon { color:var(--sky); }
    .toggle-pw { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); padding:0; display:flex; align-items:center; transition:color .2s; width:auto; margin:0; }
    .toggle-pw:hover { color:var(--sky); background:none; }
    .field.has-error input { border-color:var(--error); box-shadow:0 0 0 3px rgba(248,113,113,.15); }
    .field-error-msg { font-size:11.5px; color:var(--error); margin-top:5px; padding-left:4px; display:none; }
    .field.has-error .field-error-msg { display:block; }

    /* OTP boxes */
    .otp-row { display:flex; gap:10px; justify-content:center; }
    .otp-box {
      width:52px; height:56px;
      background:var(--glass-inner); border:1px solid var(--glass-border);
      border-radius:12px; color:var(--white);
      font-family:'Poppins',sans-serif; font-size:22px; font-weight:700;
      text-align:center; outline:none;
      transition:border-color .25s, box-shadow .25s;
      caret-color:var(--sky);
    }
    .otp-box:focus { border-color:var(--sky); box-shadow:0 0 0 3px rgba(96,165,250,.2); }
    .otp-box.filled { border-color:var(--sky); background:rgba(96,165,250,.08); }

    /* Password strength */
    .pw-strength { margin-top:6px; }
    .strength-bar { display:flex; gap:4px; margin-bottom:4px; }
    .strength-seg { height:3px; flex:1; border-radius:2px; background:var(--glass-border); transition:background .3s; }
    .strength-label { font-size:11px; color:var(--muted); text-align:right; transition:color .3s; }

    /* ── Buttons ── */
    .btn-primary {
      width:100%; padding:14px;
      background:linear-gradient(135deg,var(--blue) 0%,#3B82F6 100%);
      border:none; border-radius:12px; color:var(--white);
      font-family:'Poppins',sans-serif; font-size:15px; font-weight:600;
      cursor:pointer; position:relative; overflow:hidden;
      transition:transform .18s, box-shadow .18s;
      box-shadow:0 4px 20px rgba(37,99,235,.45);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#3B82F6 0%,var(--blue) 100%); opacity:0; transition:opacity .22s; }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,99,235,.55); }
    .btn-primary:hover::before { opacity:1; }
    .btn-primary:active { transform:translateY(0); }
    .btn-primary span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
    .btn-primary.loading .btn-text { display:none; }
    .btn-primary .btn-spinner { display:none; }
    .btn-primary.loading .btn-spinner { display:inline-block; }
    .spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg)} }

    .btn-ghost {
      width:100%; padding:13px;
      background:var(--glass-inner); border:1px solid var(--glass-border); border-radius:12px;
      color:var(--muted); font-family:'Poppins',sans-serif; font-size:14px; font-weight:500;
      cursor:pointer; transition:background .2s, color .2s, border-color .2s;
      display:flex; align-items:center; justify-content:center; gap:6px;
    }
    .btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--white); border-color:rgba(255,255,255,.35); }

    .btn-row { display:flex; gap:10px; }
    .btn-row .btn-ghost { flex:0 0 auto; width:auto; padding:13px 18px; }
    .btn-row .btn-primary { flex:1; }

    /* OTP resend */
    .otp-resend { text-align:center; font-size:12.5px; color:var(--muted); }
    .otp-resend button { background:none; border:none; color:var(--sky); font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; }
    .otp-resend button:disabled { color:var(--muted); cursor:default; }

    /* Success screen */
    .success-screen { display:none; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:8px 0; animation:fadeUp .5s ease both; }
    .success-screen.show { display:flex; }
    .success-icon-wrap { width:72px; height:72px; background:rgba(52,211,153,.12); border:2px solid rgba(52,211,153,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .success-screen h3 { font-size:19px; font-weight:700; color:var(--white); }
    .success-screen p  { font-size:13px; color:var(--muted); line-height:1.6; max-width:280px; }

    /* ── Message ── */
    #message { margin-top:10px; font-size:13px; font-weight:500; text-align:center; min-height:18px; }
    #message.success { color:var(--success); }
    #message.error   { color:var(--error); }

    /* ── Footer ── */
    .back-login { text-align:center; margin-top:16px; font-size:13.5px; color:var(--muted); animation:fadeUp .7s .65s ease both; }
    .back-login a { color:var(--sky); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:4px; transition:opacity .2s; }
    .back-login a:hover { opacity:.75; }

    @media (max-width:480px) {
      .card { padding:28px 20px 26px; }
      .otp-box { width:44px; height:50px; font-size:18px; }
      .brand-title { font-size:18px; }
    }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; } }