:root{
    --bg-dark:#0a0e17; --bg-darker:#050913; --card:#101826; --card-border:#1a2438;
    --fg:#e5ecf5; --muted:#93a3b6; --border:#1f2a3a;
    --neon:#0093FF; --neon-soft:#4db8ff; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
    --neon-gradient:linear-gradient(135deg, var(--neon), #0066cc);
    --neon-gradient-hover:linear-gradient(135deg, #00a2ff, #0055aa);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background:
      radial-gradient(ellipse at top left, rgba(0,147,255,.15), transparent 40%),
      radial-gradient(ellipse at bottom right, rgba(0,104,255,.15), transparent 40%),
      linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    color:var(--fg); min-height:100dvh; display:grid; place-items:center; padding:24px; line-height:1.6;
  }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  .card{
    width:min(700px,100%); background:rgba(16,24,38,.85); border:1px solid var(--card-border);
    border-radius:24px; padding:40px; box-shadow:0 25px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(0,147,255,.15);
    backdrop-filter:blur(12px); position:relative; overflow:hidden; animation:fadeIn .6s ease-out;
  }
  @keyframes fadeIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
  h1{
    font-size:32px; font-weight:800; margin-bottom:12px;
    background:linear-gradient(45deg, var(--neon), var(--neon-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 12px rgba(0,147,255,.4); letter-spacing:-.5px; position:relative; display:inline-block;
  }
  h1::after{content:''; position:absolute; bottom:-8px; left:0; width:60px; height:3px; background:var(--neon-gradient); border-radius:3px}
  .muted{color:var(--muted); font-size:16px; margin-bottom:24px}

  .progress-bar{height:4px; background:rgba(255,255,255,.08); border-radius:2px; margin:10px 0 24px; overflow:hidden}
  .progress-fill{height:100%; width:0%; background:var(--neon-gradient); transition:width .5s ease}

  .row{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px}
  .col{flex:1 1 260px; min-width:0}
  label{display:block; font-size:14px; color:var(--muted); margin:14px 0 8px; font-weight:500}
  input{
    width:100%; padding:16px 18px; border-radius:14px; border:1px solid var(--border);
    background:rgba(12,20,33,.7); color:var(--fg); font-size:16px; transition:all .25s ease;
  }
  input:focus{outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,147,255,.28); background:rgba(12,20,33,.92)}
  input::placeholder{color:#5a708a; opacity:.8}

  .actions{display:flex; gap:16px; margin-top:26px; flex-wrap:wrap}
  button{
    border:0; border-radius:14px; padding:16px 26px; font-weight:600; font-size:16px; cursor:pointer; transition:all .2s ease;
    display:inline-flex; align-items:center; justify-content:center; gap:10px; color:#fff;
  }
  .btn-primary{background:var(--neon-gradient); box-shadow:0 6px 16px rgba(0,147,255,.4)}
  .btn-primary:hover{transform:translateY(-2px); background:var(--neon-gradient-hover); box-shadow:0 10px 24px rgba(0,147,255,.5)}
  .btn-secondary{background:rgba(24,34,53,.65); color:var(--neon-soft); border:1px solid rgba(0,147,255,.25)}
  .btn-secondary:hover{transform:translateY(-2px); border-color:rgba(0,147,255,.45)}
  button:disabled{opacity:.6; cursor:not-allowed; transform:none!important}

  .divider{height:1px; margin:28px 0; background:linear-gradient(to right, transparent, rgba(0,147,255,.25), transparent)}

  .alert{display:none; padding:16px 18px; border-radius:14px; font-size:15px; margin:18px 0 0; border:1px solid transparent}
  .alert.show{display:block}
  .alert.ok{border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.14); color:#b7ffe3}
  .alert.err{border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.14); color:#ffd1d1}
  .alert.warn{border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.14); color:#ffe6b8}

  small.hint{color:var(--muted); display:block; margin-top:10px; font-size:14px}
  a.link{color:var(--neon); text-decoration:none}
  a.link:hover{text-shadow:0 0 8px rgba(0,147,255,.6)}

  .step-title{font-weight:700; margin:6px 0 16px; font-size:18px; color:var(--neon-soft); display:flex; align-items:center; gap:10px}
  .step-title::before{content:''; width:12px; height:12px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px rgba(0,147,255,.6)}

  .footer{margin-top:22px; font-size:14px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.08)}

  /* toggle ver senha */
  .pw-wrap{position:relative}
  .pw-wrap input{padding-right:50px}
  .pw-toggle{
    position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:var(--neon-soft);
    padding:8px; border-radius:10px; cursor:pointer;
  }
  .pw-toggle:hover{box-shadow:0 0 0 2px rgba(0,147,255,.25)}
  .pw-toggle svg{width:22px; height:22px; display:block}

  /* sucesso */
  #stepSuccess{text-align:center}
  .success-checkmark{display:none; width:80px; height:80px; margin:0 auto}
  .success-checkmark.show{display:block}
  .check-icon{
    width:80px; height:80px; border-radius:50%; border:4px solid var(--ok); display:flex; align-items:center; justify-content:center;
  }
  .check-icon::after{
    content:''; width:30px; height:60px; border:solid var(--ok); border-width:0 4px 4px 0; transform:rotate(45deg) translate(-5px,-10px);
  }

  @media (max-width: 680px){
    .card{padding:28px 20px}
    .row{gap:14px}
    .col{flex:1 1 100%}
    .actions{flex-direction:column}
    .btn-primary,.btn-secondary{width:100%}
    h1{font-size:28px}
  }