/* ═══════════════════════════════════════════
   AUTH — Login & Key Management styles
   ═══════════════════════════════════════════ */

/* ── Overlay de Login ──────────────────────── */
#auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

#auth-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.auth-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: slideUp 0.35s ease;
  position: relative;
}

/* ── Seletor de idioma (deslogado, header inacessível) ── */
.auth-locale {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
}
.auth-locale button {
  background: transparent;
  border: 1px solid var(--surface-3);
  border-radius: 6px;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
}
.auth-locale button.active {
  border-color: var(--primary);
  color: var(--text);
}
.auth-locale button:hover {
  color: var(--text);
}

@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.auth-logo {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 4px;
}

.auth-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.auth-subtitle {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-subtle);
  margin-bottom: 28px;
}

/* ── Formulário ────────────────────────────── */
.auth-form .field {
  margin-bottom: 16px;
}

.auth-form label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-form input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.auth-form input:focus {
  border-color: var(--primary);
}

.auth-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  margin-bottom: 16px;
  display: none;
}

.auth-error.show { display: block; }

/* ── Seletor de conta (usuário em +de 1 conta) ── */
.auth-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.auth-account-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 13px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.auth-account-option:hover,
.auth-account-option:focus-visible {
  border-color: var(--primary);
  background: var(--surface-3);
  outline: none;
}
.auth-account-option span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account-option i { width: 18px; height: 18px; flex: none; color: var(--text-subtle); }
.auth-account-option:hover i:first-child { color: var(--primary-fg); }

/* ── Senha: mostrar/ocultar + medidor de força ── */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-subtle);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle i { width: 17px; height: 17px; }

.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-strength-bar {
  flex: 1;
  height: 5px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
/* Preenche via scaleX (origem à esquerda) — sem animar layout. */
.pw-strength-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s, background 0.2s;
}
.pw-strength-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* score 0/1 fraco, 2 razoável, 3 boa, 4 forte */
.pw-strength.s0 .pw-strength-bar i,
.pw-strength.s1 .pw-strength-bar i { transform: scaleX(0.3); background: var(--danger); }
.pw-strength.s2 .pw-strength-bar i { transform: scaleX(0.6); background: var(--warning); }
.pw-strength.s3 .pw-strength-bar i { transform: scaleX(0.8); background: var(--info); }
.pw-strength.s4 .pw-strength-bar i { transform: scaleX(1); background: var(--success); }

/* Hint de confirmação de senha */
.field-hint.is-ok  { color: var(--success); }
.field-hint.is-err { color: var(--danger); }

/* ── Botões ─────────────────────────────────── */
.btn-auth {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  border: none;
  border-radius: 8px;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  margin-top: 4px;
}

.btn-auth:hover  { opacity: 0.9; }
.btn-auth:active { transform: scale(0.98); }
.btn-auth:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-subtle);
  margin-top: 20px;
}

.auth-switch a {
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Tabs de formulário (Login / Cadastro) ─── */
.auth-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}

.auth-tabs button {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-subtle);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tabs button.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════
   KEY MANAGEMENT MODAL
   ═══════════════════════════════════════════ */

#keys-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8888;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

#keys-modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 16px;
  padding: 32px 28px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: slideUp 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: color 0.2s;
}

.modal-close:hover { color: var(--text); }

/* ── Provider Key Cards ─────────────────────── */
.key-provider-card {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.key-provider-card.has-key {
  border-color: rgba(52,211,153,0.35);
}

.key-provider-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.key-provider-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.key-provider-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  flex: 1;
}

.key-status-badge {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.key-status-badge.ok  {
  background: rgba(52,211,153,0.15);
  color: var(--success);
}

.key-status-badge.missing {
  background: rgba(107,114,128,0.15);
  color: var(--text-subtle);
}

.key-input-row {
  display: flex;
  gap: 8px;
}

.key-input-row input {
  flex: 1;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  font-family: monospace;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.key-input-row input:focus { border-color: var(--primary); }

.btn-save-key {
  padding: 9px 14px;
  background: var(--primary);
  border: none;
  border-radius: 7px;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-save-key:hover { opacity: 0.85; }

.btn-remove-key {
  padding: 9px 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 7px;
  color: var(--danger);
  font-size: 0.8rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-remove-key:hover { opacity: 0.75; }

.key-hint {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ── Header user info ───────────────────────── */
#user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

#user-greeting {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.btn-header {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-header:hover {
  border-color: var(--primary);
  color: var(--text);
}

.btn-header.primary {
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  border-color: transparent;
  color: var(--white);
}

/* ── Menu do usuário (dropdown no canto superior direito) ── */
.user-menu { position: relative; }
.user-menu[hidden] { display: none; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.user-menu-trigger:hover { border-color: var(--primary); }
.user-menu-trigger .user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  font-size: 0.8rem;
}
.user-menu-caret { color: var(--text-subtle); font-size: 0.7rem; }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  padding: 6px;
}
.user-menu-panel[hidden] { display: none; }

.user-menu-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}
.user-menu-name { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.user-menu-org  { font-size: 0.78rem; color: var(--text-muted); }
.user-menu-role {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface-muted, rgba(127,127,127,0.15));
  color: var(--text-muted);
}

.user-menu-section {
  border-top: 1px solid var(--surface-3);
  padding: 12px;
}

/* Controles reaproveitados — empilhados dentro do painel */
.user-menu-panel .top-settings {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  justify-content: flex-start;
}
.user-menu-panel .locale-switcher,
.user-menu-panel .currency-switcher,
.user-menu-panel .currency-rate {
  justify-content: space-between;
  width: 100%;
}
.user-menu-panel .theme-toggle { align-self: flex-start; }

.user-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-menu-actions .btn-header { width: 100%; text-align: center; }

/* ── Divider ──────────────────────────────────── */
.modal-divider {
  border: none;
  border-top: 1px solid var(--surface-3);
  margin: 20px 0;
}

/* ── Success toast ────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-2);
  border: 1px solid rgba(52,211,153,0.4);
  color: var(--success);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.error {
  border-color: rgba(239,68,68,0.4);
  color: var(--danger);
}

/* ═══════════════════════════════════════════
   HEADER — janela de carga + sync + recarregar
   ═══════════════════════════════════════════ */

  /* Grupo de controles de dados — escondido nas abas de gestão */
  .header-data-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .header-data-controls.hidden { display: none; }

  /* Período compacto no header (mesmos IDs do antigo painel) */
  .header-period {
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .header-period .period-field {
    min-width: 0;
  }
  .header-period input,
  .header-period select {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 7px;
  }
  /* No modo custom, o mês sai de cena para caber início/fim */
  .period-bar.custom #period-month-wrap { display: none; }

  /* Indicador de sincronização (clicável → aba Sincronização) */
  .sync-indicator {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-subtle);
    white-space: nowrap;
    padding: 5px 6px;
    border-radius: 7px;
  }
  .sync-indicator:hover { background: var(--surface-3); color: var(--text); }
  .sync-indicator.stale { color: var(--warning); }
  .sync-indicator.never { color: var(--text-faint); }

  /* Recarregar compacto */
  #btn-reload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
  }
  #btn-reload:hover    { opacity: 0.88; }
  #btn-reload:active   { transform: scale(0.97); }
  #btn-reload:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════
   PROVIDERS CENTER
   ═══════════════════════════════════════════ */

.providers-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,10,18,0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 24px;
}

.providers-modal.open { display: flex; }

.providers-panel-card,
.provider-chooser-card,
.provider-connect-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.58);
  width: min(760px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 24px;
}

.provider-connect-card { width: min(680px, 100%); }
.provider-chooser-card { width: min(560px, 100%); }

.providers-panel-header,
.providers-panel-actions,
.provider-row,
.provider-row-main,
.provider-row-actions,
.connect-actions,
.connect-key-row {
  display: flex;
  align-items: center;
}

.providers-panel-header {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.providers-panel-header h2,
.provider-chooser-card h2,
.provider-connect-card h2 {
  color: var(--text);
  font-size: 1.05rem;
  margin: 0;
}

.providers-panel-header p {
  color: var(--text-subtle);
  font-size: 0.82rem;
  margin-top: 5px;
}

.providers-panel-actions {
  gap: 10px;
}

.btn-connect-provider,
.btn-secondary {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
}

.btn-connect-provider {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.providers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.provider-row {
  justify-content: space-between;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 16px;
}

.provider-row-main { gap: 14px; min-width: 0; align-items: flex-start; }
.provider-logo-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.provider-logo-box img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.provider-row-kicker {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.provider-row-title {
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.provider-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-subtle);
}
.provider-status {
  color: var(--success);
  font-size: 0.76rem;
  font-weight: 700;
}
.provider-row-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 8px; }
.provider-row-added { color: var(--text-subtle); font-size: 0.78rem; margin-top: 14px; }

.provider-row-actions {
  gap: 8px;
  flex-shrink: 0;
}

.provider-row-actions button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
}

/* Trilho de saúde do sync à esquerda da linha — qual conta precisa de ação num relance */
.provider-row { --rail: var(--border-strong); box-shadow: inset 3px 0 0 var(--rail); }
.provider-row.is-ok     { --rail: var(--success); }
.provider-row.is-warn   { --rail: var(--warning); }
.provider-row.is-danger { --rail: var(--danger); }

/* KPI de gasto/tokens por conta (gateado por view.costs) */
.provider-row-kpis { display: flex; gap: 24px; margin-top: 12px; }
.provider-kpi { display: flex; flex-direction: column; gap: 2px; }
.provider-kpi span {
  color: var(--text-subtle); font-size: 0.62rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.provider-kpi strong { color: var(--text); font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Barra de ferramentas (seletor Grade ↔ Lista), alinhada à direita acima da lista */
.accounts-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* Ponto de saúde na coluna de status da Lista */
.acc-health-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--text-faint);
}
.acc-health-dot.is-ok     { background: var(--success); }
.acc-health-dot.is-warn   { background: var(--warning); }
.acc-health-dot.is-danger { background: var(--danger); }

/* ─── Detalhe da conta de provedor (PÁGINA com abas, drill-down na aba Contas) ─── */
#accounts-list-view[hidden],
#account-detail-view[hidden] { display: none; }

.account-detail-bar { margin-bottom: 14px; }
.account-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.84rem;
  padding: 6px 11px;
}
.account-detail-back:hover { border-color: var(--primary); color: var(--text); }
.account-detail-back i { width: 15px; height: 15px; }

.account-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.account-detail-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.account-detail-id h2 {
  font-size: 1.15rem;
  margin: 0;
  word-break: break-word;
}
.account-detail-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-subtle);
  font-size: 0.82rem;
  margin-top: 3px;
}

/* Card de saúde do sync — sinal mais importante da conta, legível sob o header.
   Ícone + headline colorida pelo estado + linha de apoio (quando/o que sincronizou ou erro). */
.account-health-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.account-health-card > i { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.account-health-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-health-text strong { font-size: 0.9rem; font-weight: 700; }
.account-health-text span { color: var(--text-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.account-health-card.is-ok     { border-color: var(--success-border); background: var(--success-bg); }
.account-health-card.is-ok     > i, .account-health-card.is-ok strong     { color: var(--success); }
.account-health-card.is-warn   { border-color: var(--warning-border); background: var(--warning-bg); }
.account-health-card.is-warn   > i, .account-health-card.is-warn strong   { color: var(--warning); }
.account-health-card.is-danger { border-color: var(--danger-border);  background: var(--danger-bg); }
.account-health-card.is-danger > i, .account-health-card.is-danger strong { color: var(--danger); }

/* Entidades sincronizadas — bloco no fim da aba Identidade, com subabas por tipo */
.account-entities-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-3);
}
.account-entities-title {
  color: var(--text-subtle);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.account-entities-note {
  color: var(--text-subtle);
  font-size: 0.78rem;
  margin: 0 0 14px;
}
.account-entities-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.account-entity-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.account-entity-subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 999px;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
}
.account-entity-subtab:hover { color: var(--text); }
.account-entity-subtab.active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: var(--primary);
  color: var(--text);
}
.account-entity-subtab i { width: 15px; height: 15px; flex: none; }
.account-entity-subtab .provider-detail-pill { font-size: 0.68rem; padding: 0 7px; }

.account-entity-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.account-entity-card-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  min-width: 0;
}
.account-entity-item-name {
  color: var(--text);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.account-entity-item-meta {
  color: var(--text-subtle);
  font-size: 0.74rem;
  text-align: right;
  white-space: nowrap;
  flex: none;
}
.account-entity-card-list li.provider-detail-muted {
  display: block;
  border-style: dashed;
  background: transparent;
  color: var(--text-subtle);
  font-size: 0.78rem;
}

.account-entity-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.account-entity-pager span {
  color: var(--text-subtle);
  font-size: 0.72rem;
}
.account-entity-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}
.account-entity-pager button:hover:not(:disabled) { border-color: var(--primary); color: var(--text); }
.account-entity-pager button:disabled { opacity: 0.4; cursor: default; }
.account-entity-pager button i { width: 15px; height: 15px; }

.provider-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.provider-detail-grid > div { min-width: 0; }
.provider-detail-grid dt {
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.provider-detail-grid dd {
  color: var(--text);
  font-size: 0.88rem;
  margin: 0;
  word-break: break-word;
}

.provider-detail-muted { color: var(--text-subtle); font-size: 0.85rem; }

.provider-detail-entity-group + .provider-detail-entity-group { margin-top: 16px; }
.provider-detail-entity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.provider-detail-entity-head strong { color: var(--text); font-size: 0.85rem; }
.provider-detail-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 9px;
}

.provider-detail-entity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.provider-detail-entity-list li {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 4px 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-detail-entity-list li.provider-detail-muted { border-style: dashed; }

.provider-detail-actions .provider-row-actions { flex-wrap: wrap; gap: 8px; }
.provider-detail-actions button:hover {
  border-color: var(--primary);
  color: var(--text);
}

.providers-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-subtle);
  padding: 28px;
  text-align: center;
}

.providers-empty .icon { font-size: 1.8rem; margin-bottom: 8px; }

.provider-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.provider-choice {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

.provider-choice:hover {
  border-color: var(--primary);
  background: rgba(99,102,241,0.12);
}

.provider-choice-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.provider-choice-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.connect-title-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 8px;
}

.provider-instructions {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.provider-instructions.collapsed ol,
.provider-instructions.collapsed p {
  display: none;
}

.instructions-title {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 8px;
}

.instructions-toggle {
  background: transparent;
  border: none;
  color: var(--primary-fg);
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}

.provider-instructions ol {
  padding-left: 20px;
  line-height: 1.7;
}

.provider-instructions p {
  margin-top: 12px;
  color: var(--text-subtle);
  line-height: 1.5;
}

.connect-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connect-form label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.connect-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  color: var(--text);
  padding: 11px 12px;
}

.connect-key-row { gap: 8px; }

.connect-key-row button {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  padding: 10px 12px;
  cursor: pointer;
}

.connect-actions {
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.btn-auth.compact {
  width: auto;
  padding: 10px 16px;
}

@media (max-width: 680px) {
  .provider-choice-grid { grid-template-columns: 1fr; }
  .providers-panel-header,
  .provider-row,
  .connect-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
  

/* ═══════════════════════════════════════════
   ONBOARDING WIZARD
   ═══════════════════════════════════════════ */

#onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: ob-fade-in 0.25s ease;
}

@keyframes ob-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-card {
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: ob-slide-up 0.28s ease;
}

@keyframes ob-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Progress ── */
.ob-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ob-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ob-dot-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--border-strong);
  color: var(--text-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ob-dot.active .ob-dot-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.ob-dot.done .ob-dot-circle {
  background: var(--success-strong);
  border-color: var(--success-strong);
  color: var(--white);
}

.ob-dot-label {
  font-size: 0.7rem;
  color: var(--text-subtle);
  white-space: nowrap;
}

.ob-dot.active .ob-dot-label { color: var(--primary-fg); }
.ob-dot.done  .ob-dot-label  { color: var(--success); }

.ob-dot-line {
  flex: 1;
  height: 2px;
  background: var(--surface-3);
  margin-bottom: 18px;
  min-width: 20px;
}

/* ── Step body ── */
.ob-step-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ob-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-strong);
}

.ob-step-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: -8px;
}

/* ── Provider cards ── */
.ob-provider-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}

.ob-provider-card.connected { border-color: var(--success-strong); }

.ob-provider-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ob-provider-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ob-provider-name {
  font-weight: 600;
  color: var(--text-strong);
  flex: 1;
  font-size: 0.9rem;
}

.ob-badge-ok {
  font-size: 0.72rem;
  background: var(--success-bg);
  color: var(--success);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.ob-badge-pending {
  font-size: 0.72rem;
  background: var(--surface-3);
  color: var(--text-subtle);
  padding: 2px 8px;
  border-radius: 20px;
}

.ob-provider-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ob-provider-form input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: monospace;
  outline: none;
}

.ob-provider-form input:focus { border-color: var(--primary); }

.ob-btn-connect {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.ob-btn-connect:hover { background: var(--primary-active); }

.ob-provider-hint {
  font-size: 0.72rem;
  color: var(--text-subtle);
  line-height: 1.4;
}

/* ── Form ── */
.ob-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-form label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}

.ob-form input,
.ob-form select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.ob-form input:focus,
.ob-form select:focus { border-color: var(--primary); }

.ob-required { color: var(--danger); }

/* ── Budget ── */
.ob-budget-project {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}

.ob-budget-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ob-currency {
  color: var(--text-subtle);
  font-size: 1rem;
}

.ob-budget-input-row input {
  flex: 1;
}

.ob-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ob-alert-row input[type=range] { flex: 1; }
.ob-alert-row span {
  min-width: 36px;
  text-align: right;
  color: var(--primary-fg);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Tip / warn / success ── */
.ob-tip {
  font-size: 0.78rem;
  color: var(--text-subtle);
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
}

.ob-warn {
  font-size: 0.8rem;
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
}

.ob-success {
  font-size: 0.82rem;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  padding: 10px 12px;
  border-radius: 8px;
}

/* ── Step 4 final ── */
.ob-step-final {
  align-items: center;
  text-align: center;
}

.ob-final-icon {
  font-size: 2.5rem;
}

.ob-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-summary li {
  font-size: 0.85rem;
  color: var(--success-fg);
  padding: 8px 12px;
  background: var(--success-bg);
  border-radius: 6px;
  border-left: 3px solid var(--success);
}

.ob-summary li.skip {
  color: var(--text-subtle);
  background: var(--surface-2);
  border-left-color: var(--border-strong);
}

.ob-btn-go {
  margin-top: 8px;
  width: 100%;
  font-size: 0.95rem;
  padding: 13px;
}

/* ── Footer ── */
.ob-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ob-btn-skip {
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ob-btn-skip:hover { color: var(--text-muted); }

.ob-btn-primary {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ob-btn-primary:hover:not(:disabled) { background: var(--primary-active); }
.ob-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Error ── */
.ob-error {
  font-size: 0.8rem;
  color: var(--danger-fg);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  padding: 9px 12px;
  border-radius: 8px;
  margin-top: -8px;
}

/* ── Passo 1: persona ── */
.ob-welcome { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 6px; }
.ob-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 14px;
}
.ob-choice {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.ob-choice:hover, .ob-choice:focus-visible {
  border-color: var(--primary);
  background: var(--surface-3);
  transform: translateY(-2px);
  outline: none;
}
.ob-choice > i { width: 24px; height: 24px; color: var(--primary-fg); }
.ob-choice-title { font-size: 0.95rem; font-weight: 600; color: var(--text-strong); }
.ob-choice-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

.ob-link-btn {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.84rem;
  padding: 4px 0;
}
.ob-link-btn:hover { color: var(--text); }
.ob-link-btn.accent { color: var(--primary-fg); font-weight: 600; }

/* ── Passo 2: confiança + provedor + limite de plano ── */
.ob-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border));
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 16px;
}
.ob-trust i { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 1px; }

/* Reassurance: pode prosseguir (sync roda em segundo plano + auto-refresh do dashboard). */
.ob-proceed-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.ob-proceed-hint i { width: 16px; height: 16px; color: var(--primary-fg); flex: none; margin-top: 1px; }

.ob-provider-status { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-muted); }
.ob-provider-status.done { color: var(--success); }
.ob-provider-status i { width: 15px; height: 15px; }
.ob-provider-status .spin { animation: ob-spin 0.9s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob-provider-status .spin { animation: none; } }

.ob-provider-card.blocked { opacity: 0.6; }

/* Card colapsado: a faixa do topo é clicável (revela o input ao escolher o provedor). */
.ob-provider-card.selectable { padding: 0; }
.ob-provider-card.selectable .ob-provider-top {
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0;
}
.ob-provider-card.selectable:hover { border-color: var(--primary); }
.ob-provider-card.selectable:hover .ob-provider-top,
.ob-provider-card.selectable .ob-provider-top:focus-visible { background: var(--surface-3); outline: none; }
.ob-provider-chev { margin-left: auto; width: 18px; height: 18px; color: var(--text-subtle); }
.ob-provider-card.selectable:hover .ob-provider-chev { color: var(--primary-fg); }
.ob-provider-card.selected { border-color: var(--primary); }
.ob-badge-locked {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-subtle);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
}
.ob-badge-locked i { width: 12px; height: 12px; }

.ob-provider-hint a {
  color: var(--primary-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ob-provider-hint a:hover { text-decoration: underline; }
.ob-provider-hint a i { width: 12px; height: 12px; }

.ob-plan-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

/* ── Passo 3: pronto + próximos passos ── */
.ob-done { text-align: center; }
.ob-done-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 16%, var(--surface-2));
}
.ob-done-icon i { width: 28px; height: 28px; color: var(--success); }
.ob-next-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 22px 0 10px;
}
.ob-next-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.ob-next-card {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.88rem;
  transition: border-color 0.15s, background 0.15s;
}
.ob-next-card:hover, .ob-next-card:focus-visible { border-color: var(--primary); background: var(--surface-3); outline: none; }
.ob-next-card i { width: 18px; height: 18px; color: var(--primary-fg); flex: none; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .ob-card { padding: 20px 16px; }
  .ob-dot-line { min-width: 12px; }
  .ob-provider-form { flex-direction: column; }
  .ob-provider-form input { width: 100%; }
}

/* ── Forgot password & Reset ── */
.btn-forgot-link {
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  margin-top: -4px;
}
.btn-forgot-link:hover { color: var(--text-muted); }

.auth-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 4px;
}

.auth-success-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--success-fg);
  padding: 8px 0;
}
.auth-success-msg p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.auth-success-msg em { color: var(--primary-fg); font-style: normal; }

#reset-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.field-hint {
  font-size: 0.72rem;
  color: var(--text-subtle);
  line-height: 1.4;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════
   BILLING / PLANOS
   ═══════════════════════════════════════════ */
#plan-badge.plan-expired {
  background: var(--danger-border);
  color: var(--danger-fg);
}

.billing-trial-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 16px;
}
.billing-trial-banner.expired {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-fg);
}

.billing-usage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.billing-usage-row { display: flex; flex-direction: column; gap: 5px; }
.billing-usage-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text);
}
.billing-usage-head .warn   { color: var(--warning); font-weight: 600; }
.billing-usage-head .danger { color: var(--danger); font-weight: 600; }

.billing-bar {
  height: 7px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden;
}
.billing-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.3s;
}
.billing-bar-fill.warn   { background: var(--warning-strong); }
.billing-bar-fill.danger { background: var(--danger-strong); }

.billing-section-title {
  font-size: 0.95rem;
  color: var(--text-strong);
  margin: 8px 0 14px;
}

.billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.billing-plan-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.billing-plan-card.current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.billing-plan-name { font-weight: 700; color: var(--text-strong); font-size: 0.95rem; }
.billing-plan-price { color: var(--primary-fg); font-size: 1.1rem; font-weight: 700; }
.billing-plan-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.billing-plan-feats li {
  font-size: 0.76rem;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}
.billing-plan-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
}
.billing-plan-current-tag {
  text-align: center;
  font-size: 0.78rem;
  color: var(--primary-fg);
  font-weight: 600;
  padding: 8px 0;
}
.btn-auth.compact { padding: 8px 12px; font-size: 0.8rem; }
.btn-secondary.compact { padding: 7px 12px; font-size: 0.8rem; }
.billing-plan-period { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.billing-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.billing-sub.ok { background: var(--surface); border-color: var(--border); color: var(--text); }
.billing-checkout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
}
.billing-checkout .field { margin-bottom: 0; }
.billing-company { margin-top: 6px; min-height: 1.1em; font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.billing-company:empty { display: none; }
.billing-company svg { width: 14px; height: 14px; flex-shrink: 0; }
.billing-company.ok { color: var(--text); }
.billing-company.warn { color: var(--warning); }
.billing-checkout-hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.billing-checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Diálogo de confirmação reutilizável (substitui confirm() nativo) */
.ui-confirm-card {
  width: min(420px, 100%);
  max-height: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ui-confirm-msg {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
}
.ui-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ui-confirm-actions .btn-auth {
  flex: 1;
  width: auto;
  margin-top: 0;
}
.btn-auth.ghost {
  background: transparent;
  border: 1px solid var(--surface-3);
  color: var(--text);
}
.btn-auth.danger {
  background: var(--danger-strong);
  color: #fff;
}