:root{
  --bg:#0f172a; --card:rgba(0, 0, 0, 0.799); --text:#e5e7eb; --muted:#94a3b8;
  --accent:#10b981; --danger:#ef4444; --warn:#f59e0b; --ok:#22c55e; --border:#334155;
  --radius:16px; --shadow:0 10px 25px rgba(0,0,0,.25);

  /* Escalas fluidas */
  --space:clamp(16px, 2.5vw, 28px);
  --pad:clamp(16px, 3vw, 32px);
  --fs-1:clamp(16px, 1.6vw, 18px);
  --fs-2:clamp(18px, 2vw, 22px);
  --fs-3:clamp(22px, 2.4vw, 28px);
}
*{box-sizing:border-box}
html,body{height:100%}
html {
  background:
  linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), /* overlay */
  url('fundo_de_cerebros.jpg') center/cover no-repeat fixed;
  background-size: cover; 
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(15, 23, 42, 0.231);
  color: #e5e7eb;
}

.logo {
  height: min(10vw, 50px);      /* altura total da imagem renderizada */
  width: auto;
  display: block;
  --crop: 0%;        /* ajuste: quanto “entrar” do topo e base */
  clip-path: inset(var(--crop) 0 var(--crop) 0 round 0);
  margin: 0 auto; /* centraliza */
}
.site-header,.site-footer{display:flex; justify-content:space-between; align-items:center; padding:2px var(--pad); border-bottom:1px solid var(--border)}
.site-footer{border-top:1px solid var(--border); border-bottom:none}
.brand{font-weight:700; letter-spacing:.3px}
.top-nav a{color:var(--muted); margin-left:16px; text-decoration:none}
.top-nav a:hover{color:var(--text)}
.container{width:min(960px, 94vw); margin-inline:auto; padding:var(--pad)}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow)}
.card h2{font-size:var(--fs-3); margin-top:0}
.field{margin-bottom:var(--space)}
.field.inline{display:flex; gap:10px; align-items:center}
label{display:block; margin-bottom:6px; font-weight:600}
input[type="text"],input[type="email"],input[type="password"]{
  width:100%; padding:12px 14px; background:#0b1426; border:1px solid var(--border);
  border-radius:10px; color:var(--text); outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.02)
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.hint{color:var(--muted); font-size: 2px;}
.hint-cadastro{color:var(--muted); font-size: 8px; color: greenyellow;}
.error{color:var(--danger); margin:6px 0 0}
.status{color:var(--muted); font-size:.95em}
.form-status{margin-top:10px}
.btn{padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#14223a; color:var(--text); cursor:pointer; text-decoration: none;}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:var(--accent); color:#04130d; border-color:#08946b; font-weight:700}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-ghost{border:none; background:transparent; cursor:pointer; color:var(--muted)}
.password-input-wrap{display:flex; align-items:center; gap:8px}
.strength{margin-top:6px}
.strength-bar{height:8px; border-radius:999px; background:#1f2937; overflow:hidden}
.strength-bar > i{display:block; height:100%; width:0; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981)}
.strength-msg{margin-top:6px}
.captcha-placeholder{height:78px; border:1px dashed var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.help summary{cursor:pointer}
.sr-only{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.back{
  text-decoration:none; background:#334155; color:#e5e7eb;
  padding:8px 12px; border-radius:12px; font-weight:700
}

@media (prefers-reduced-motion:no-preference){
  .btn, input{transition:filter .15s ease, border-color .2s ease, box-shadow .2s ease}
}

/* --- feedback de carregamento nos botões --- */
.btn.loading {
  position: relative;
  opacity: .75;
  pointer-events: none;
}
.btn.loading::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 1em; height: 1em;
  border: .18em solid var(--muted);
  border-top-color: var(--text);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: btnspin 1s linear infinite;
}
@keyframes btnspin { to { transform: translateY(-50%) rotate(360deg); } }

/* mensagens de status (sucesso/erro/info) */
.status { display:block; margin-top:8px; color:var(--muted); min-height:1.2em; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.status.info { color: var(--muted); }

/* RESPONSIVIDADE TABLET */

@media (max-width: 1150px) {
  .logo{display: none;}
  .back{padding:4px 6px; font-size:clamp(12px,2vw,18px); border-radius: 5px;}
  .cadastro-links{padding:4px 6px; font-size:clamp(10px,2vw,18px);}
  .site-header{padding: 8px;}
}