/* ==========================================================================
   Tipografia de passo (escala densa real do produto)
   ========================================================================== */
.step { outline: none; animation: it-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.step[hidden] { display: none; }
.step-title {
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 600;
  letter-spacing: -0.015em; margin-bottom: 6px;
}
.step-sub {
  font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground);
  margin-bottom: 16px;
}
@keyframes it-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes it-spin { to { transform: rotate(360deg); } }

.overline {
  font-family: var(--font-mono); font-size: 0.625rem; line-height: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
.mono { font-family: var(--font-mono); }
.note { font-size: 0.75rem; color: var(--muted-foreground); }
.note-mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }

/* ==========================================================================
   Controles
   ========================================================================== */
.label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-desc { font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }

.input {
  width: 100%; height: 36px;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: transparent; padding: 0 12px; font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible { border-color: var(--ring); }
.input:disabled { opacity: 0.55; }
.input-mono { font-family: var(--font-mono); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .in-icon {
  position: absolute; left: 12px; display: flex;
  color: var(--muted-foreground); pointer-events: none;
}
.input-wrap > .in-icon svg { width: 16px; height: 16px; }
.input-wrap.has-icon .input { padding-left: 36px; }

.select-wrap { position: relative; display: flex; align-items: center; }
.select {
  appearance: none; width: 100%; height: 36px;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: transparent; padding: 0 34px 0 12px; font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer;
}
.select:focus-visible { border-color: var(--ring); }
.select-wrap > svg {
  position: absolute; right: 11px; width: 16px; height: 16px;
  color: var(--muted-foreground); pointer-events: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn svg { width: 16px; height: 16px; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.btn-lg { height: 40px; padding: 0 24px; }
.btn-sm { height: 32px; padding: 0 12px; gap: 6px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }
.btn-outline {
  border: 1px solid var(--input); background: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.spinner {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  border: 2px solid color-mix(in oklch, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: it-spin 0.7s linear infinite;
}

.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 0.625rem; font-weight: 500;
  white-space: nowrap; flex: none;
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline {
  border-color: var(--border);
  background: color-mix(in oklch, var(--input) 20%, transparent);
  color: var(--foreground);
}

/* --- linha selecionável (prompts, modelos, planos) --- */
.row {
  display: flex; width: 100%; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 12px; text-align: left; background: var(--card);
  transition: background-color 0.15s, border-color 0.15s;
}
.row:hover { background: var(--accent); }
.row.on { border-color: var(--primary); background: var(--accent); }
.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-label { flex: 1; min-width: 0; cursor: pointer; font-size: 0.875rem; }
/* Linhas de modelo de IA (tela 08). Bloqueada = badge e
   texto comunicam o gate; sem opacity, por decisão da auditoria A-09 real. */
.row-title { display: block; font-size: 0.75rem; font-weight: 500; }
.row-meta { display: block; font-size: 0.75rem; }
.row-locked, .row-locked .row-label { cursor: not-allowed; }
.row-locked:hover { background: var(--card); }
.row-logo { flex: none; }
.row-logo svg { width: 28px; height: 28px; }
.row-locked .row-logo { filter: grayscale(1); }

/* --- checkbox / radio (skin canônico shadcn) --- */
.check, .radio {
  appearance: none; flex: none; width: 16px; height: 16px; cursor: pointer;
  /* O contorno do controle DESMARCADO é a única pista de que existe um controle
     ali; border-input dá 1,26:1 sobre o card, abaixo dos 3:1 da SC 1.4.11. */
  border: 1px solid var(--muted-foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.12s, border-color 0.12s;
  position: relative;
}
.check { border-radius: 4px; }
.radio { border-radius: 999px; }
.check:checked, .radio:checked { background: var(--primary); border-color: var(--primary); }
.check:checked::after {
  content: ''; position: absolute; inset: 0;
  background: var(--primary-foreground);
  clip-path: polygon(20% 52%, 38% 70%, 79% 27%, 87% 36%, 38% 86%, 12% 60%);
}
.radio:checked::after {
  content: ''; position: absolute; inset: 4px; border-radius: 999px;
  background: var(--primary-foreground);
}

/* --- chip de concorrente (aria-pressed) --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; min-width: 0; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.625;
  font-weight: 500; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { background: var(--accent); }
.chip[aria-pressed='true'] {
  border-color: var(--primary); background: var(--accent); color: var(--foreground);
}
.chip svg { width: 12px; height: 12px; flex: none; color: var(--primary); }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .chk { display: none; }
.chip[aria-pressed='true'] .chk { display: block; }

/* --- ChipAdder --- */
.adder-row { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.adder-row .input { height: 32px; padding-left: 36px; padding-right: 124px; }
.adder-row .in-icon { position: absolute; left: 12px; display: flex; color: var(--muted-foreground); pointer-events: none; }
.adder-row .in-icon svg { width: 16px; height: 16px; }
.adder-row .btn { position: absolute; right: 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--muted);
  border-radius: 999px; padding: 4px 4px 4px 12px;
  font-size: 0.75rem; line-height: 1.625; white-space: nowrap;
}
.pill > span { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
.pill button {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  color: var(--muted-foreground); transition: background-color 0.15s, color 0.15s;
}
.pill button:hover { background: var(--accent); color: var(--foreground); }
.pill button svg { width: 13px; height: 13px; }

/* --- aviso da análise por IA --- */
.ai-hint {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid color-mix(in oklch, var(--primary) 40%, transparent);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 16px;
}
.ai-hint svg { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--primary); }
.ai-hint p { font-size: 0.75rem; line-height: 1.625; }

/* --- marca d'água do nome (fallback do FaviconMark: monograma) --- */
.favicon {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: var(--radius-sm); background: var(--muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  color: var(--muted-foreground);
}

/* --- ToggleGroup de ciclo --- */
.toggle-group { display: inline-flex; align-items: center; gap: 8px; }
.toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--radius-md);
  font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.toggle:hover { background: var(--muted); }
.toggle[aria-pressed='true'] { background: var(--primary); color: var(--primary-foreground); }
.toggle[aria-pressed='true'] .badge-secondary {
  background: color-mix(in oklch, var(--primary-foreground) 22%, transparent);
  color: var(--primary-foreground);
}

/* --- linha de plano --- */
.plan-groups { display: flex; flex-direction: column; gap: 20px; }
.plan-head { display: flex; width: 100%; min-width: 0; align-items: baseline; gap: 8px; }
.plan-name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-price { margin-left: auto; display: flex; flex: none; align-items: baseline; gap: 2px; font-size: 0.75rem; color: var(--muted-foreground); }
.plan-price b { font-size: 0.875rem; font-weight: 600; color: var(--foreground); font-family: var(--font-mono); }
.plan-specs {
  display: flex; width: 100%; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; margin-top: 4px;
  font-size: 0.6875rem; color: var(--muted-foreground);
}
.plan-specs .v { font-family: var(--font-mono); color: var(--foreground); }
/* 16px e gap 3: com 18px os planos de 5–6 motores quebravam a linha de specs e a
   lista ficava com linhas de alturas diferentes. */
.plan-engines { margin-left: auto; display: flex; flex: none; align-items: center; gap: 2px; }
.plan-engines svg { width: 16px; height: 16px; }