:root {
        --orange: #ff6b00;
        --yellow: #f5a623;
      }

      * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
      /* html, body { height:100%; overflow:hidden; } */
      body {
        font-family:'Oxanium',sans-serif;
        max-width:700px; margin:0 auto;
        height:100vh; display:flex; flex-direction:column;
      }


      .top-zone {
        flex-shrink: 0;
        padding-bottom: 10px;
      }

      /* HEADER */
      .header {
        display:flex; align-items:center; justify-content:center;
        padding:22px 16px 0; position:relative;
      }
      

      .header h1 {
        font-family:'Rajdhani',sans-serif;
        font-size:22px; font-weight:700;
        letter-spacing:3px; text-transform:uppercase;
        color:#fff;
      }

      /* ÁREA DO TÍTULO (ainda no lime) */
      .title-area {
        padding: 25px 28px 0;
      }
      .title-main {
        font-family:'Rajdhani',sans-serif;
        font-size:32px; font-weight:700;
        color:#00084d; letter-spacing:1px;
        line-height:1.1;
        margin-bottom:8px;
      }
      .title-main span {
        color:#fff;
        text-shadow: 0 2px 8px rgba(0,80,0,0.3);
      }
      .title-sub {
        font-size:13px; color:#fff;
        letter-spacing:0.3px; 
        line-height:1.3;
      }

    
      .form-zone {
        flex:1;
        /* background:#ffffff; */
        -webkit-overflow-scrolling:touch;
        padding:32px 24px 24px;
        display:flex; flex-direction:column;
      }
      .form-zone::-webkit-scrollbar{width:0;}

      /* ── CAMPO COM LINHA DIVISÓRIA ── */
      .field {
        display:flex; align-items:center;
        border-bottom:1px solid #ececec;
        gap:14px;
      }
      .field:first-of-type { border-top:1px solid #ececec; }

      .field-icon {
        font-size:20px; flex-shrink:0; width:26px; text-align:center;
      }
      .field input {
        flex:1; background:transparent; border:none; outline:none;
        font-family:'Oxanium',sans-serif; font-size:16px;
        color:#fff;letter-spacing: 5px; padding: 18px 0;
      }
      .field input::placeholder { color:#ccc; font-size:14px; letter-spacing: 2px; }

      .btn-eye {
        background:none; border:none; cursor:pointer;
        font-size:18px; opacity:0.45; padding:4px;
        transition:opacity 0.2s; flex-shrink:0;
      }
      .btn-eye.visible{opacity:0.9;}

      /* ── LINHA DE VERIFICAÇÃO (campo + botão lado a lado) ── */
      .field-verify {
        display:flex; align-items:center;
        padding:15px 0;
        border-bottom:1px solid #ececec;
        gap:14px;
      }
      .field-verify .field-icon { font-size:20px; flex-shrink:0; width:26px; text-align:center; }
      .field-verify input {
        flex:1; background:transparent; border:none; outline:none;
        font-family:'Oxanium',sans-serif; font-size:15px; color:#1a1a1a;
        min-width:0;
      }
      .field-verify input::placeholder { color:#ccc; font-size:14px; }
      .divider-v { width:1px; background:#ececec; height:22px; flex-shrink:0; }
      .btn-get-code {
        background:none; border:none; cursor:pointer; flex-shrink:0;
        font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
        color:var(--orange); letter-spacing:0.5px; white-space:nowrap;
        padding:0 4px; transition:opacity 0.2s;
      }
      .btn-get-code:disabled { color:#ccc; cursor:default; }

      /* Foco activo */
      .field.active      { border-bottom-color:var(--orange); }
      .field-verify.active { border-bottom-color:var(--orange); }

      /* ── BOTÃO REGISTAR ── */
      .btn-register {
        margin-top:30px; width:100%; padding:16px;
        background:linear-gradient(135deg,#ff6b00,#f5a623);
        color:#fff; border:none; border-radius:14px;
        font-family:'Rajdhani',sans-serif;
        font-size:18px; font-weight:700; letter-spacing:2px;
        text-transform:uppercase; cursor:pointer;
        box-shadow:0 4px 20px rgba(245,130,0,0.4);
        transition:transform 0.12s; position:relative; overflow:hidden;
      }
      .btn-register:active{transform:scale(0.97);}
      .btn-register::after {
        content:''; position:absolute; top:0; left:10%; right:10%; height:45%;
        background:rgba(255,255,255,0.15); border-radius:14px 14px 0 0;
      }

      /* ── LINK LOGIN ── */
      .login-link {
        margin-top:20px; text-align:center;
        font-size:13px; color:#ffffff;
      }
      .login-link span {
        color: #ff7513; font-weight:600; cursor:pointer;
      }

      /* ── TERMOS ── */
      .terms {
        margin-top:20px; text-align:center;
        font-size:11px; color:#ccc; line-height:1.7;
        padding-bottom:12px;
      }
      .terms span { color:#bbb; cursor:pointer; }

      /* ── MENSAGENS ── */
      .mensagem {
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 20px;
        text-align: center;
      }
      .sucesso {
        background: #2e7d32;
        color: white;
      }
      .erro {
        background: #c62828;
        color: white;
      }

      @keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

      /* contador reenvio */
      .countdown { color:#aaa; font-size:13px; font-weight:600; white-space:nowrap; padding:0 4px; }