body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--beige);padding:2rem 1rem}

  .fp-card{
    width:100%;max-width:440px;
    background:#fff;
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
  }

  /* Cabeçalho do card */
  .fp-header{
    background:linear-gradient(135deg,#0D0608 0%,#1A0E0C 50%,#3D1F1A 100%);
    padding:2rem 2rem 1.6rem;
    position:relative;overflow:hidden;
  }
  .fp-header::before{
    content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events:none;
  }
  .fp-logo{
    font-family:var(--font-display);font-size:1.4rem;font-weight:400;
    color:#fff;letter-spacing:.06em;margin-bottom:1.2rem;
    position:relative;z-index:1;display:block;
  }
  .fp-logo em{font-style:italic;color:var(--p-light)}

  /* Indicador de etapas */
  .fp-steps{display:flex;gap:.4rem;position:relative;z-index:1}
  .fp-step-dot{
    height:3px;border-radius:2px;flex:1;
    background:rgba(255,255,255,.2);
    transition:background .4s;
  }
  .fp-step-dot.active{background:var(--p-light);flex:2}
  .fp-step-dot.done{background:rgba(255,255,255,.5)}

  .fp-header-title{
    font-family:var(--font-display);font-size:1.4rem;font-weight:300;
    color:#fff;margin-top:1rem;
    position:relative;z-index:1;
  }
  .fp-header-sub{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.2rem;position:relative;z-index:1}

  /* Corpo */
  .fp-body{padding:1.8rem 2rem 2rem}

  .fp-panel{display:none}
  .fp-panel.active{display:block;animation:fadeUp .35s var(--ease) both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

  /* Código OTP */
  .otp-wrap{display:flex;gap:.5rem;justify-content:center;margin:1.2rem 0}
  .otp-input{
    width:44px;height:52px;text-align:center;
    font-size:1.6rem !important;font-weight:700 !important;
    color:#1A1A1A !important;
    border:1.5px solid var(--border);border-radius:var(--r);
    outline:none;
    transition:border-color var(--t),box-shadow var(--t);
    font-family:var(--font-body);
    background:#fff !important;
    -webkit-text-fill-color:#1A1A1A !important;
    caret-color:var(--p);
    padding:0 !important;
    line-height:52px;
  }
  .otp-input:focus{
    border-color:var(--p);
    box-shadow:0 0 0 3px rgba(201,132,122,.12);
    background:#fff !important;
    color:#1A1A1A !important;
    -webkit-text-fill-color:#1A1A1A !important;
  }
  .otp-input.filled{
    border-color:var(--p);
    background:#fff !important;
    color:#1A1A1A !important;
    -webkit-text-fill-color:#1A1A1A !important;
  }
  .otp-input.error{
    border-color:var(--error);
    background:#FDF0EF !important;
    color:var(--error) !important;
    -webkit-text-fill-color:var(--error) !important;
  }

  /* Botão desabilitado */
  #btn-verify:disabled{
    background: rgba(201,132,122,0.35) !important;
    color: #fff !important;
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  #btn-verify:not(:disabled){
    background: var(--p);
    opacity: 1;
  }

  /* Reenviar */
  .resend-wrap{text-align:center;margin-top:.8rem;font-size:.82rem;color:var(--muted)}
  .resend-btn{color:var(--p);background:none;border:none;cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:500;padding:6px 0;min-height:44px;transition:opacity var(--t)}
  .resend-btn:disabled{opacity:.4;cursor:not-allowed}
  .resend-timer{color:var(--muted)}

  /* Força da senha */
  .strength-bar{height:3px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:5px}
  .strength-fill{height:100%;border-radius:2px;transition:width .4s,background .4s;width:0}
  .strength-label{font-size:.7rem;color:var(--muted);margin-top:3px}

  .btn-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:.9rem;padding:3px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:color var(--t)}
  .btn-eye:hover{color:var(--p)}

  /* Sucesso */
  .fp-success{text-align:center;padding:1rem 0}
  .fp-success-icon{font-size:3rem;margin-bottom:.8rem}
  .fp-success h3{font-family:var(--font-display);font-size:1.5rem;font-weight:300;color:var(--mid);margin-bottom:.4rem}
  .fp-success p{font-size:.85rem;color:var(--muted);line-height:1.7;margin-bottom:1.4rem}
  .fp-success-btn{display:inline-flex;margin:0 auto}

  /* Textos de apoio das etapas */
  .fp-lead{font-size:.85rem;color:var(--muted);margin-bottom:1rem;text-align:center}
  .fp-lead strong{color:var(--mid)}

  /* Rodapé */
  .fp-footer{text-align:center;margin-top:1.2rem;font-size:.82rem;color:var(--muted)}
  .fp-footer a{color:var(--p);font-weight:500}

  /* ── Responsivo ── */
  body{padding-left:max(2rem,env(safe-area-inset-left));padding-right:max(2rem,env(safe-area-inset-right))}
  @supports(padding:max(0px)){
    body{padding-top:max(2rem,env(safe-area-inset-top));padding-bottom:max(2rem,env(safe-area-inset-bottom))}
  }
  @media(max-width:768px){
    .fp-logo{min-height:44px;display:inline-flex;align-items:center}
    .fp-footer a{min-height:44px;display:inline-flex;align-items:center}
  }
  @media(max-width:520px){
    body{padding:1rem .8rem}
    .fp-card{border-radius:20px}
    .fp-header{padding:1.6rem 1.4rem 1.4rem}
    .fp-body{padding:1.4rem 1.2rem 1.6rem}
    .fp-logo{font-size:1.2rem;min-height:44px;display:inline-flex;align-items:center}
    .fp-footer a{min-height:44px;display:inline-flex;align-items:center}
    .fp-header-title{font-size:1.25rem}
    .fp-header-sub{font-size:.78rem}

    /* OTP — encolhe os 6 campos para caber sem scroll horizontal */
    .otp-wrap{gap:.4rem}
    .otp-input{flex:1;min-width:0;max-width:46px;width:auto;height:50px;font-size:1.4rem!important;line-height:50px}
  }
  @media(max-width:360px){
    .otp-wrap{gap:.3rem}
    .otp-input{height:46px;font-size:1.3rem!important;line-height:46px}
    .fp-body{padding:1.2rem .9rem 1.4rem}
  }