/* ============================================================
   Vértice — páginas de autenticação
   ============================================================ */

html {
  background: var(--bg);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
}

.auth-main {
  display: flex;
  flex-direction: column;
  padding: 26px clamp(22px, 4vw, 54px);
  min-height: 100vh;
}

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-content {
  width: 100%;
  max-width: 404px;
  margin: auto;
  padding: 44px 0 56px;
}

.auth-content .eyebrow {
  color: var(--accent-strong);
}

.auth-content h1 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.2vw, 38px);
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.auth-sub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 42ch;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.auth-form .btn {
  margin-top: 4px;
}

.auth-form .input {
  height: 46px;
}

.auth-form .field-hint {
  margin-top: -2px;
}

.auth-alt {
  margin-top: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.auth-alt a {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease);
}

.auth-alt a:hover {
  border-color: var(--accent-line);
}

.auth-support {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--faint);
  font-size: 12px;
}

.auth-support a {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.auth-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--faint);
  font-size: 11.5px;
}

.auth-foot a {
  color: var(--muted);
}

.auth-foot a:hover {
  color: var(--text);
}

.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-notice strong {
  color: var(--text);
  font-weight: 550;
}

.auth-notice.is-error {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

.auth-notice.is-success {
  border-color: color-mix(in srgb, var(--positive) 30%, transparent);
  background: var(--positive-soft);
  color: var(--positive);
}

.auth-loading {
  display: grid;
  gap: 12px;
  padding: 8px 0;
}

/* ---------------- painel de marca ---------------- */

.auth-brand {
  --brand-ink: var(--text);
  --brand-muted: var(--muted);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 54px);
  background:
    radial-gradient(700px 420px at 78% 8%, var(--auth-panel-glow), transparent 62%),
    radial-gradient(600px 400px at 8% 100%, var(--auth-panel-glow-alt), transparent 60%),
    var(--auth-panel-bg);
  border-left: 1px solid var(--auth-panel-border);
  color: var(--brand-ink);
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

.auth-brand-mark {
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 420px;
  height: 420px;
  opacity: 0.06;
  pointer-events: none;
}

.auth-brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.auth-brand .brand {
  color: var(--brand-ink);
}

.auth-brand .brand-mark {
  color: var(--brand-ink);
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.auth-brand-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  display: grid;
  gap: 24px;
  padding: 24px 0;
}

.auth-brand-content .eyebrow {
  color: var(--accent-strong);
}

.auth-brand h2 {
  color: var(--brand-ink);
  font-size: clamp(29px, 3.3vw, 44px);
  letter-spacing: -0.05em;
  line-height: 1.03;
  max-width: 16ch;
}

.auth-benefits {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.auth-benefits li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.auth-benefits span {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}

.auth-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.auth-specs span {
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.01em;
}

.auth-brand-card {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(6px);
  padding: 14px 16px;
  display: grid;
  gap: 2px;
  max-width: 420px;
}

.auth-brand-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  font-size: 10.5px;
  color: var(--brand-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border-faint);
  font-size: 11.5px;
  color: var(--text-soft);
}

.auth-brand-row code {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
  font-size: 10px;
}

.auth-brand-row .ok {
  color: var(--positive);
  font-size: 10px;
  font-family: var(--font-mono);
}

.auth-brand-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--faint);
  font-size: 10.5px;
}

.auth-brand-foot a {
  color: var(--muted);
}

.auth-brand-foot a:hover {
  color: var(--text);
}

/* Login: approved logo-only brand panel. Shared auth forms keep their owners. */
.auth-brand--logo {
  display: grid;
  place-items: center;
  place-content: center;
  isolation: isolate;
  gap: 0;
  padding: 0;
  background: var(--auth-panel-bg);
}
.auth-brand--logo::before { content: none; }
.auth-logo-atmosphere {
  position: absolute;
  width: min(72%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%);
  opacity: .7;
  filter: blur(26px);
  animation: auth-logo-ambient 9s ease-in-out 2s infinite alternate;
  pointer-events: none;
}
.auth-logo-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text);
  transform-origin: center;
  animation: auth-logo-enter 1400ms cubic-bezier(.16, 1, .3, 1) both,
    auth-logo-float 8s ease-in-out 2s infinite;
}
.auth-logo-symbol { width: 126px; height: 126px; overflow: visible; }
.auth-logo-symbol path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: auth-logo-draw 1300ms cubic-bezier(.22, 1, .36, 1) 250ms forwards;
}
.auth-logo-symbol circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: auth-logo-dot 900ms cubic-bezier(.16, 1, .3, 1) 650ms both;
}
.auth-logo-word {
  font-family: var(--font-display, var(--font-sans));
  font-size: 70px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -4px;
  animation: auth-logo-word 1200ms cubic-bezier(.16, 1, .3, 1) 600ms both;
}
.auth-logo-slogan {
  margin: 6px 20px 0;
  font: 400 15px/1.6 var(--font-sans);
  letter-spacing: .15px;
  text-align: center;
  color: var(--muted);
  animation: auth-logo-word 1200ms cubic-bezier(.16, 1, .3, 1) 1000ms both;
}
@keyframes auth-logo-enter {
  from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes auth-logo-draw { to { stroke-dashoffset: 0; } }
@keyframes auth-logo-dot {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes auth-logo-word {
  from { opacity: 0; transform: translateY(9px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes auth-logo-ambient {
  from { opacity: .45; transform: scale(.96); }
  to { opacity: .85; transform: scale(1.04); }
}
@keyframes auth-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand.auth-brand--logo * { animation: none; filter: none; }
  .auth-logo-symbol path { stroke-dashoffset: 0; }
}

/* ---------------- responsivo ---------------- */

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-brand {
    display: none;
  }

  .auth-main {
    padding: 20px 22px;
  }

  .auth-content {
    padding: 36px 0 48px;
  }
}

@media (max-width: 520px) {
  .auth-main {
    padding: 16px 18px;
  }

  .auth-content {
    padding: 28px 0 36px;
  }

  .auth-content h1 {
    font-size: 29px;
  }

  .auth-form .input {
    height: 44px;
  }

  .auth-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------- cartão de convite ---------------- */

.invite-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px;
  margin: 24px 0 26px;
  box-shadow: var(--shadow-sm);
}

.invite-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invite-card-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.invite-card-head strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.invite-meta {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--border-faint);
}

.invite-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 12.5px;
}

.invite-meta > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.invite-meta dt {
  color: var(--faint);
}

.invite-meta dd {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared security challenge: maintains auth spacing, theme and retry feedback. */
.turnstile-gate { display:grid;gap:8px;min-width:0;margin:0; }
.turnstile-gate[hidden] { display:none; }
.turnstile-widget { min-height:65px;min-width:0; }
.turnstile-message { margin:0;font-size:12px;line-height:1.5;color:var(--muted); }
.turnstile-gate[data-error=true] .turnstile-message { color:var(--danger); }
.turnstile-gate [data-turnstile-retry] { justify-self:start; }

/* Cadastro em etapas, mesmos campos e foco do shell de autenticação. */
.signup-progress { display:flex; gap:12px; padding:0; margin:24px 0; list-style:none; color:var(--muted); font-size:12px; flex-wrap:wrap; }
.signup-progress [aria-current="step"] { color:var(--text); font-weight:600; border-bottom:2px solid var(--accent-strong); padding-bottom:6px; }
.auth-form fieldset { border:0; padding:0; margin:0; min-width:0; display:grid; gap:18px; }
.auth-form fieldset[hidden] { display:none; }
.signup-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; min-width:0; }
.signup-row .field { min-width:0; }
.signup-code { font-family:var(--font-mono,monospace); letter-spacing:.35em; font-size:24px; }
@media(max-width:420px) { .signup-row { grid-template-columns:1fr; } }

/* Cadastro: uma única superfície central, sem painel de marca lateral. */
.registration-page .auth-shell--registration { display:flex; min-height:100dvh; }
.registration-page .auth-main { width:100%; min-height:100dvh; padding:18px 28px 12px; }
.registration-page .auth-top { width:100%; max-width:1080px; margin:0 auto; min-height:32px; }
.registration-page .auth-top .brand-mark { width:28px; height:28px; }
.registration-page .auth-content { width:100%; max-width:720px; margin:auto; padding:22px 28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.registration-page .auth-content h1 { margin-top:8px; font-size:32px; line-height:1.12; }
.registration-page .auth-sub { margin-top:8px; max-width:none; font-size:13px; line-height:1.45; }
.registration-page .eyebrow { font-size:10px; }
.registration-page .signup-progress { gap:18px; margin:16px 0; padding-bottom:12px; border-bottom:1px solid var(--border); font-size:12px; }
.registration-page .signup-progress [aria-current] { padding-bottom:0; border-bottom:0; color:var(--accent-strong); }
.registration-page .auth-form { margin-top:0; gap:10px; }
.registration-page .auth-form fieldset { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 20px; }
.registration-page .auth-form .field { min-width:0; gap:6px; }
.registration-page .auth-form .input { height:40px; min-width:0; font-size:14px; }
.registration-page .auth-form label:not(.checkbox) { font-size:11px; }
.registration-page .auth-form .input[hidden] { display:none; }
.registration-page .signup-wide, .registration-page [data-signup-step=verify] > * { grid-column:1/-1; }
.registration-page .checkbox { font-size:12px; line-height:1.45; margin-top:2px; }
.registration-page .form-error:empty { display:none; }
.registration-page .auth-form .btn { margin-top:0; min-height:38px; }
.registration-page .auth-form .btn--lg { min-height:42px; padding:11px 18px; }
.registration-page #signup-back { justify-self:center; min-height:28px; padding:4px 12px; }
.registration-page .auth-alt { margin-top:12px; font-size:12px; }
.registration-page .auth-foot { margin:12px auto 0; padding:0; width:100%; max-width:720px; font-size:11px; }
.registration-page .postal-status { min-height:16px; font-size:11px; line-height:1.4; }
.registration-page .turnstile-gate { justify-items:center; gap:4px; }
.registration-page .turnstile-message:empty { display:none; }
.registration-page .signup-code { text-align:center; }
@media(min-width:601px) and (max-height:760px) {
 .registration-page .auth-main { padding:10px 24px; }
 .registration-page .auth-content { padding:16px 24px; }
 .registration-page .auth-content h1 { font-size:28px; }
 .registration-page .signup-progress { margin:12px 0; padding-bottom:10px; }
 .registration-page .auth-form fieldset { gap:10px 18px; }
 .registration-page .auth-form .input { height:36px; }
 .registration-page .auth-alt { margin-top:8px; }
}
@media(max-width:600px) {
 .registration-page .auth-main { padding:14px 16px; gap:14px; }
 .registration-page .auth-content { border:0; padding:12px 0; }
 .registration-page .auth-content h1 { font-size:28px; }
 .registration-page .auth-form fieldset { gap:12px; }
 .registration-page .auth-form [data-signup-step=personal] > .field:nth-of-type(-n+2) { grid-column:1/-1; }
 .registration-page .signup-progress { gap:12px; font-size:11px; }
 .registration-page .auth-foot { margin-top:0; }
}

.registration-page .auth-content h1 { margin-top:0; }
.registration-page .auth-form .field { align-content:start; }
.registration-page .signup-actions { display:flex; align-items:center; gap:12px; }
.registration-page .signup-actions #signup-next { flex:1; min-width:0; height:42px; padding:0 18px; }
.registration-page .signup-actions #signup-back { order:-1; min-height:42px; padding:8px 12px; }

/* O SDK decide se precisa exibir um desafio; não ocultar seu iframe por CSS. */
.registration-page .turnstile-gate[data-appearance=interaction-only] .turnstile-widget { min-height:0; }