/* Cabal Latino - login / registro. Tema escuro + laranja da marca. */
:root{
  --bg:#0c0c11; --bg2:#14141c; --card:#17171f; --line:#2a2a36;
  --txt:#e9e9f0; --muted:#9a9aa8; --brand:#ff9b2e; --brand2:#ff6b00;
  --ok:#2ecc71; --err:#ff5a5a; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--txt);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,107,0,.18), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:center;padding:22px 16px}
.brand{font-weight:800;letter-spacing:2px;font-size:20px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.card h1{margin:0 0 4px;font-size:22px}
.card .sub{margin:0 0 22px;color:var(--muted);font-size:14px}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:#0f0f16;color:var(--txt);font-size:15px;outline:none;transition:border .15s
}
.field input:focus{border-color:var(--brand)}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}

.row-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:16px}
.row-check input{width:16px;height:16px;accent-color:var(--brand)}

.turnstile{margin:6px 0 16px;min-height:65px;display:flex;justify-content:center}

.btn{
  width:100%;padding:13px;border:0;border-radius:10px;cursor:pointer;font-size:15px;font-weight:700;
  color:#1a1a1a;background:linear-gradient(135deg,var(--brand),var(--brand2));transition:filter .15s
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.links{display:flex;justify-content:space-between;margin-top:16px;font-size:13px}

.msg{display:none;padding:11px 13px;border-radius:10px;font-size:14px;margin-bottom:16px}
.msg.error{display:block;background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.4);color:#ffb0b0}
.msg.success{display:block;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4);color:#a8f0c8}

/* OTP */
.otp-inputs{display:flex;gap:8px;justify-content:center;margin:6px 0 14px}
.otp-inputs input{
  width:46px;height:56px;text-align:center;font-size:24px;font-weight:700;
  border-radius:10px;border:1px solid var(--line);background:#0f0f16;color:var(--txt);outline:none
}
.otp-inputs input:focus{border-color:var(--brand)}
.otp-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:14px}
.otp-meta button{background:none;border:0;color:var(--brand);cursor:pointer;font-size:13px;padding:0}
.otp-meta button:disabled{color:var(--muted);cursor:not-allowed}

.footer{padding:18px;text-align:center;color:var(--muted);font-size:12px}
[hidden]{display:none!important}

@media (max-width:480px){
  .card{padding:22px 18px}
  .otp-inputs input{width:40px;height:50px;font-size:20px}
}