/* --- tela de login (fora do wizard) --- */
/* Botão do Google: `google-button.tsx` — 46px, borda, superfície `background`,
   selo colorido numa pastilha branca. Fica secundário para não disputar com o
   "Entrar" sólido logo abaixo. */
.btn-google {
  display: flex; width: 100%; height: 46px; align-items: center; justify-content: center;
  gap: 10px; border: 1px solid var(--border); background: var(--background);
  border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background-color 0.15s;
}
.btn-google:hover { background: var(--accent); }
.btn-google > span {
  display: flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border-radius: 5px; background: oklch(1 0 0);
}
.btn-google svg { width: 14px; height: 14px; }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.auth-divider > i { height: 1px; flex: 1; background: var(--border); }
.auth-divider > span {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted-foreground);
}

.link-muted {
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  transition: color 0.15s;
}
.link-muted:hover { color: var(--foreground); }
.link-primary { font-weight: 600; color: var(--primary); }

/* Toggle mostrar/ocultar senha, no rightSlot do Field. */
.input-wrap > .in-toggle {
  position: absolute; right: 4px; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; transition: color 0.15s;
}
.input-wrap > .in-toggle:hover { color: var(--foreground); }
.input-wrap > .in-toggle svg { width: 16px; height: 16px; }
.input-wrap.has-toggle .input { padding-right: 40px; }

/* --- criar conta: badge de trial, seletor de perfil, disclosure da empresa --- */
.badge-primary {
  background: var(--primary); color: var(--primary-foreground);
  font-family: var(--font-mono); font-size: 0.656rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.title-row .step-title { margin-bottom: 0; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 419px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-card {
  cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--muted); padding: 14px; text-align: left;
  transition: border-color 0.15s, background-color 0.15s;
}
.profile-card:hover { border-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.profile-card[aria-pressed='true'] {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
}
.profile-card b { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.profile-card span { display: block; font-size: 0.75rem; line-height: 1.375; color: var(--muted-foreground); }

/* --- verifique seu e-mail --- */
.verify-mark {
  display: flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  margin-bottom: 18px; border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: var(--primary);
}
.verify-mark svg { width: 24px; height: 24px; }
.hl { font-weight: 600; word-break: break-all; color: var(--foreground); }

/* Rótulo de grupo dentro do passo (legend/label leve, sem moldura). */
.group-label { font-size: 0.75rem; line-height: 1.625; font-weight: 500; margin-bottom: 8px; }
.group-label .soft { font-weight: 400; color: var(--muted-foreground); }

/* --- prompts (tela 06): sugeridos marcáveis + personalizados removíveis ---
   Mesma linha selecionável dos modelos (.row/.check); badge "Sugerido" à
   direita, como o PromptsStep real. O adder/contador/nota do CSV vêm ANTES
   da lista: só ela desce além da dobra. O padding-bottom é o respiro do fim
   da lista — no bloco rolável (padding é honrado no fim do scroll), não como
   margem no último card, para ele não morrer colado no rodapé fixo. */
.prompt-suggested { margin-top: 20px; padding-bottom: 24px; }
.prompt-list { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.prompt-list .row-label { font-size: 0.8125rem; line-height: 1.5; font-weight: 400; }
.prompt-list .row-x {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  color: var(--muted-foreground); transition: background-color 0.15s, color 0.15s;
}
.prompt-list .row-x:hover { background: var(--accent); color: var(--foreground); }
.prompt-list .row-x svg { width: 13px; height: 13px; }

/* --- escape do grupo de planos (tela 07): link discreto para o outro tier --- */
.plan-switch {
  margin-top: 14px; font-size: 0.75rem; font-weight: 500;
  color: var(--muted-foreground); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s;
}
.plan-switch:hover { color: var(--foreground); }

/* --- bloco "Volume da coleta" (tela de modelos) — no topo, antes da lista --- */
.volume-panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); padding: 16px; margin-bottom: 20px;
}
.volume-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted-foreground);
}
.volume-row .v { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--foreground); }
.volume-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-top: 12px; font-size: 0.75rem; color: var(--muted-foreground);
}
.volume-total b { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--foreground); }
.volume-note { margin-top: 10px; font-size: 0.6875rem; line-height: 1.5; color: var(--muted-foreground); }

/* --- resumo --- */
.summary-list { display: flex; flex-direction: column; }
.summary-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.summary-row:first-child { border-top: 1px solid var(--border); }
.summary-row > dt {
  flex: none; width: 132px; font-size: 0.75rem; color: var(--muted-foreground);
}
.summary-row > dd { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--foreground); }
.summary-row .mono { font-size: 0.75rem; }
.summary-engines { display: inline-flex; align-items: center; gap: 4px; vertical-align: text-bottom; }
.summary-engines svg { width: 16px; height: 16px; }

/* --- passo 5: seleção de modelos de IA (tela 08) --- */
.engines-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.engines-block > legend { padding: 0; margin-bottom: 4px; }
/* Empilhado: a coluna estreita (424px) não comporta descrição + botão lado a
   lado — a descrição fica em uma linha de leitura própria e a ação alinha à
   esquerda logo abaixo (margem negativa compensa o padding do btn-ghost). */
.engines-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; margin-bottom: 10px;
}
.engines-head .btn { margin-left: -12px; }
/* --- rodapé de ações --- */
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.foot-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.foot-hint { margin-top: 14px; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); }

/* A tela de sucesso saiu do split: casca própria em styles/success.css. */