:root{
    --bg: #ffffff;
    --card: #ffffff;
    --text: #002b5c;
    --muted: #335c85;
    --danger: #ff6b6b;
    --ok: #5ee1a6;
    /* Roxo luxuoso em degradê */
    --g1: #002b5c;
    --g2: #003f87;
    --g3: #335c85;
  }
  *{box-sizing:border-box}
  html{height:auto}
  body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background: transparent; /* não interfere no site hospedeiro */
  color: var(--text);
}
  .wrap{width:100%; max-width:720px; margin:24px auto; padding:0 16px}
  .card{
  background: #ffffff;
  border: 1px solid var(--g1);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
  header{
    padding:24px 24px 8px;
    position: relative;
  }
  h1{margin:0; font-size:26px; letter-spacing:.2px}
  p.lead{margin:6px 0 0; color:var(--muted)}
  
  .progress{
  height:6px; width:100%; background: rgba(0,43,92,.12); border-radius: 999px; overflow:hidden; margin:16px 0 0;
}
  .bar{height:100%; width:0%; background: linear-gradient(90deg, var(--g1), var(--g2)); transition: width .35s ease}
  
  form{padding:24px}
  .step{display:none; animation: fade .25s ease}
  .step.active{display:block}
  .step-title{margin:4px 0 14px}
  .step-title h2{margin:0 0 6px; font-size:20px; line-height:1.25; letter-spacing:.2px}
  .step-title p{margin:0; color:var(--muted); font-size:14px}
  
  @keyframes fade{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)}}
  
  .field{margin:16px 0}
  label{display:block; margin:0 0 8px; font-weight:600}
  input,select,textarea{
    width:100%; padding:14px 14px; border-radius:14px; border:1px solid var(--g1);
    background:#ffffff; color:var(--text); outline:none; transition: border .2s ease, box-shadow .2s ease;
  }
  input:focus, select:focus, textarea:focus{
  border-color: var(--g2);
  box-shadow: 0 0 0 4px rgba(0,63,135,.15);
}
  
  .hint{font-size:12px; color:var(--muted); margin-top:6px}
  
  .actions{display:flex; gap:12px; margin-top:8px}
  .btn{
  appearance:none; border:0; border-radius:14px; padding:12px 16px; font-weight:700; cursor:pointer;
  text-decoration: none;
  background: #28a745; color:white; box-shadow: 0 10px 24px rgba(40,167,69,.35);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
  .btn:hover{filter: brightness(1.05)}
  .btn:active{transform: translateY(1px)}
  .btn.secondary{background: transparent; color: var(--text); border:1px solid var(--text); box-shadow:none}
  .btn:disabled{opacity:.5; cursor:not-allowed}
  
  /* Botão Next maior e com animação */
  .btn[data-next],
  .btn[type="submit"]{
  padding:18px 26px;
  font-size:18px;
  border-radius:18px;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: #28a745;
  box-shadow: 0 14px 36px rgba(40,167,69,.45), 0 0 0 2px rgba(0,63,135,.08) inset;
}
  .btn[data-next]::after,
  .btn[type="submit"]::after{
    content:"→"; font-weight:700; transform: translateX(0); transition: transform .2s ease;
  }
  .btn[data-next]:hover::after,
  .btn[type="submit"]:hover::after{ transform: translateX(3px); }
  @media (max-width: 520px){
    .actions .btn[data-next],
    .actions .btn[type="submit"]{ width:100%; }
  }
  
  /* UX cues */
  .field.invalid input, .field.invalid select, .field.invalid textarea{
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(255,107,107,.18);
  }
  .field.valid input, .field.valid select, .field.valid textarea{
    border-color: #7ee3b3;
    box-shadow: 0 0 0 4px rgba(94,225,166,.18);
  }
  .shake{animation:shake .28s ease}
  @keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
  }
  .btn[data-next].ready, .btn[type="submit"].ready{
  transform: translateY(0);
  box-shadow: 0 16px 44px rgba(40,167,69,.55), 0 0 0 2px rgba(0,63,135,.10) inset;
  animation: pulseSoft .9s ease infinite;
}
  @keyframes pulseSoft{
    0%,100%{filter:brightness(1)}
    50%{filter:brightness(1.08)}
  }
  .bar.grow{ animation: barGlow .6s ease; }
  @keyframes barGlow{
  0%{box-shadow: 0 0 0 0 rgba(0,63,135,.0)}
  50%{box-shadow: 0 0 18px 4px rgba(0,63,135,.28)}
  100%{box-shadow: 0 0 0 0 rgba(0,63,135,.0)}
}
  
  /* Gamificação */
  #progressIndicator .pulse { animation: pulse .6s ease }
  @keyframes pulse {
    0% { transform: scale(1) }
    50% { transform: scale(1.15) }
    100% { transform: scale(1) }
  }
  .toast {
  position: absolute; right: 14px; top: 14px;
  background: rgba(0,16,32,.92); color: #fff;
  padding: 8px 12px; border-radius: 12px; font-size: 12px;
  border: 1px solid rgba(0,63,135,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  opacity: 0; transform: translateY(-6px);
  animation: toastIn .25s ease forwards, toastOut .3s ease 1.6s forwards;
  z-index: 5;
}
  .toast--xp { top: 6px; right: 12px; bottom: auto !important; }
  @keyframes toastIn { to { opacity: 1; transform: translateY(0) } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(-6px) } }
  .celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .celebrate span { position: absolute; top: -10px; font-size: 16px; animation: fall 1.2s ease-in forwards; }
  @keyframes fall { to { transform: translateY(140%); opacity: 0 } }
  #gamifyWrap { display: flex; align-items: center; gap: 10px; justify-content: space-between }
  #gamifyLeft { display: flex; align-items: center; gap: 10px }
  #gamifyMsg { color: var(--muted); font-size: 12px }
  #xpBadge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2));
    padding: 6px 10px; border-radius: 999px;
    position: relative;
  }
  #xpBadge .trophy { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) }
  
  /* Sucesso */
  .success-step{ text-align:center; }
  .success-step .big{ font-size:28px; margin:0 0 8px }
  .success-step .muted{ color: var(--muted); margin:0 0 14px }
  .success-step .ok{ font-weight:700; background:linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent }
  
  .error{ color: var(--danger); font-size: 13px; margin-top: 6px }
  .success{ color: var(--ok); font-size: 14px }
  
  .footer-note{padding:0 24px 24px; color:var(--muted); font-size:12px}
  .required::after{content:" *"; color:var(--g3)}
  
  noscript{display:block; margin-top: 12px; color: var(--danger)}