/**
 * ╔═╗ ╔═╗ ╔╗  ╔══ ╔═╗ ╔═╗ ╔╦╗ ╔═╗
 * ╚═╗ ║ ║ ╠╩╗ ╠═  ╠╦╝ ╚═╗ ║║║ ╚═╗
 * ╚═╝ ╚═╝ ╚═╝ ╚══ ╩╚═ ╚═╝ ╩ ╩ ╚═╝
 * @author Dev Soberano
 * @project Padrão visual Sober
 */
/* ============================================================
   PADRÃO VISUAL SOBER (hostbot.fr) — camada final
   Preto puro · dourado quente · Plus Jakarta Sans · botões pill
   brancos. Vem por último de propósito: sobrepõe o tema antigo
   sem mexer em nenhuma regra de estrutura.
   ============================================================ */

:root {
  --bg: #000000;
  --bg-2: #0a0a0a;
  --surface: #121212;
  --surface-2: #181818;
  --surface-3: #202020;
  --border: rgba(212, 163, 78, 0.16);
  --border-strong: rgba(212, 163, 78, 0.36);
  --text: #f4f4f4;
  --text-dim: #a3a3a3;
  --text-faint: #6d6d6d;

  --gold: #e2b45f;
  --gold-bright: #f2cd86;

  /* O vermelho vira dourado: todo destaque do site passa a ser dourado */
  --red: #e2b45f;
  --red-bright: #f2cd86;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-price: "Plus Jakarta Sans", system-ui, sans-serif;
}

[data-theme="light"] {
  --bg: #f7f6f3;
  --bg-2: #efede8;
  --surface: #ffffff;
  --surface-2: #f6f4ef;
  --surface-3: #ebe7df;
  --border: rgba(120, 90, 30, 0.18);
  --border-strong: rgba(150, 110, 30, 0.40);
  --text: #171717;
  --text-dim: #5c5c5c;
  --text-faint: #8b8b8b;
  --gold: #a97c22;
  --gold-bright: #c69a3f;
  --red: #a97c22;
  --red-bright: #c69a3f;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ---------- Botões pill (branco no preto) ---------- */
.btn {
  border-radius: 999px;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.btn-primary {
  background: #ffffff;
  color: #101010;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.btn-primary:hover {
  background: #ffffff;
  color: #101010;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .btn-primary {
  background: #141414;
  color: #ffffff;
}
[data-theme="light"] .btn-primary:hover {
  background: #141414;
  color: #ffffff;
}
.btn-outline {
  border-color: var(--border-strong);
  color: var(--gold);
  background: transparent;
}
.btn-outline:hover {
  background: rgba(226, 180, 95, 0.12);
  color: var(--gold-bright);
}

/* ---------- Cartões com borda dourada sutil ---------- */
.panel,
.card,
.api-card,
.api-step,
.api-endpoint,
.api-state,
.api-stat,
.bot-card,
.stat {
  border-color: var(--border);
}

.panel,
.api-card,
.api-step {
  border-radius: 18px;
}

/* ---------- Erros continuam em vermelho de verdade ---------- */
.form-error,
.api-key-status.off,
.vencido,
.toast.err,
.btn-danger {
  color: #ef4444;
}
.btn-danger { border-color: rgba(239, 68, 68, 0.45); }
[data-theme="light"] .form-error,
[data-theme="light"] .btn-danger { color: #c62828; }

/* ---------- Destaques em dourado ---------- */
.badge-gold,
.api-eyebrow,
.panel-head h2 .num,
.api-step-num {
  background: rgba(226, 180, 95, 0.14);
  border-color: var(--border-strong);
  color: var(--gold);
}

.price strong,
.api-stat strong,
.big-percent,
.api-sandbox-price strong,
.balance-chip strong,
.stat strong {
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ---------- Terminal/textarea ---------- */
.terminal,
.api-newkey-row input {
  background: #0c0c0c;
  border-color: var(--border);
}
[data-theme="light"] .terminal { background: #1c1c1c; color: #eee; }

/* ---------- Contraste do código de ativação ----------
   A bolha de mensagem "SMS recebido" é dourada; o código dentro dela
   precisa ser ESCURO (era dourado sobre dourado — ilegível).
   No painel, o fundo do code-display é escurecido para o código
   dourado saltar aos olhos. */
.sim-msg.right {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: #17120a;
}
.sim-msg.right .sim-code {
  color: #17120a;
  text-shadow: none;
}
.code-display {
  background: #141109;
}
.code-display .code-value {
  color: var(--gold-bright);
  text-shadow: 0 0 34px rgba(226, 180, 95, 0.65);
}
.code-display .code-label {
  color: var(--text-dim);
}