/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  color: var(--text-1, #1f2937);
  background: var(--bg-grad, linear-gradient(135deg,#E5E7EB 0%,#CBD5E1 100%));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout ===== */
.container-signup { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.signup-wrap { width: min(100%, 520px); }
.signup-card {
  background: var(--glass-bg, rgba(255,255,255,.88));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-brd, rgba(148,163,184,.35));
  border-radius: 1.5rem; padding: 2rem;
  box-shadow: 0 20px 40px rgba(2,132,199,0.12); /* steel shadow */
}

/* ===== Header ===== */
.signup-head { text-align: center; margin-bottom: 1.5rem; }
.head-icon {
  width: 64px; height: 64px; margin: 0 auto .75rem;
  border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(135deg, #E2E8F0, #D1D5DB); /* steel */
}
.icon { width: 32px; height: 32px; color: #0284C7; display:block; }
h1 { font-size: 1.6rem; margin: .25rem 0 .2rem; font-weight: 650; color: var(--text-1, #1E293B); }
.subtitle { margin: 0; font-size: .95rem; color: var(--text-2, #64748B); }

/* ===== Erros/alertas ===== */
.alert {
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
  color: #ef4444;
  padding: .75rem .9rem; border-radius: .8rem; margin-bottom: 1rem;
}
.field-error { margin-top: .35rem; }
.field-error small { color: #ef4444; }

/* ===== Form ===== */
.signup-form { display: grid; gap: 1rem; }

.label { display:block; font-size:.92rem; color:#374151; margin-bottom:.35rem; font-weight:500; }

.input-icon { position: relative; height: 48px; }
.input-icon .icon-left {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: #9ca3af; display:block; pointer-events:none;
}
.input-icon input {
  width: 100%; height: 48px;
  padding: 0 .9rem 0 2.6rem; /* espaço pro ícone */
  border: 1px solid #e5e7eb; border-radius: .9rem;
  background: rgba(249,250,251,.6);
  color:#111827; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-icon input::placeholder { color:#9ca3af; }
.input-icon input:focus {
  border-color:#7DD3FC; /* sky-300 */
  box-shadow: 0 0 0 4px rgba(14,165,233,.25); /* focus ring steel */
  background:#fff;
}

/* ===== Botão ===== */
.btn-gradient{
  width:100%; height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:none; border-radius:.9rem;
  background: linear-gradient(90deg, var(--brand-1,#0EA5E9), var(--brand-2,#0369A1));
  color:#0F172A; font-weight:600; cursor:pointer;
  box-shadow:0 6px 16px rgba(2,132,199,.22);
  transition: transform .1s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, opacity .2s ease;
}
.btn-gradient .icon-right{ width:20px; height:20px; color:#334155; display:inline-block; }
.btn-gradient:hover{
  background: linear-gradient(90deg, var(--brand-1-hover,#38BDF8), var(--brand-2-hover,#0EA5E9));
  box-shadow:0 10px 22px rgba(2,132,199,.28); filter:brightness(1.02);
}
.btn-gradient:active{ transform: translateY(1px); }
.btn-gradient:disabled{ opacity:.7; cursor:not-allowed; }

/* Loading */
.is-loading{ position:relative; }
.is-loading .icon-right{ opacity:0; }
.is-loading::after{
  content:""; position:absolute; right:14px; width:18px; height:18px;
  border:2px solid rgba(51,65,85,.35); border-top-color: rgba(51,65,85,.95);
  border-radius:999px; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* ===== Rodapé ===== */
.terms{ margin-top:.9rem; text-align:center; font-size:.75rem; color:#9ca3af; }

/* ===== Tema STEEL (mesmas variáveis do login) ===== */
.theme-steel{
  --bg-grad: linear-gradient(135deg, #E5E7EB 0%, #CBD5E1 100%);
  --glass-bg: rgba(255,255,255,0.88);
  --glass-brd: rgba(148,163,184,0.35);
  --text-1: #1E293B; /* slate-800 */
  --text-2: #64748B; /* slate-500 */

  --brand-1: #0EA5E9;
  --brand-2: #0369A1;
  --brand-1-hover: #38BDF8;
  --brand-2-hover: #0EA5E9;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}