/* NexTags Parceiros — fundação visual do portal (tom escuro, como o Higgsfield Earn, com o
   ciano #00E9FF e os azuis da NexTags no lugar do verde-limão). Só variáveis e o básico; as
   telas ficam em portal.css. Fonte: Inter, como na NexTags (títulos com peso 650 e letras um
   pouco mais juntas; nada de fonte condensada). */
:root {
  color-scheme: dark;

  /* superfícies, do fundo para cima */
  --p-fundo: #0b0c0e;
  --p-lateral: #0e0f11;
  --p-cartao: #16171a;
  --p-cartao-2: #1c1d21;   /* cartão dentro de cartão, campos */
  --p-cartao-3: #24262b;   /* hover, ativo */
  --p-borda: rgba(255, 255, 255, 0.07);
  --p-borda-forte: rgba(255, 255, 255, 0.13);
  --p-veu: rgba(5, 6, 8, 0.72);  /* fundo das janelas */

  /* texto */
  --p-texto: #f3f4f6;
  --p-texto-2: #a7aab1;
  --p-texto-3: #8b8f98;   /* 5,5:1 sobre o cartão (texto pequeno precisa de 4,5:1) */

  /* destaque: ciano vibrante (botão principal, saldo, item ativo, foco) */
  --p-acento: #00e9ff;
  --p-acento-forte: #5cf3ff;     /* hover */
  --p-acento-escuro: #00c4d6;    /* pressionado */
  --p-acento-texto: #00161a;     /* texto em cima do ciano */
  --p-acento-fundo: rgba(0, 233, 255, 0.09);
  --p-acento-fundo-forte: rgba(0, 233, 255, 0.16);
  --p-acento-borda: rgba(0, 233, 255, 0.38);
  --p-acento-brilho: rgba(0, 233, 255, 0.26);

  /* os outros azuis (não é um azul só em tudo): o da NexTags para o secundário, um claro
     para links e textos de destaque, e o degradê ciano → azul para banner, barras e brilhos */
  --p-marca: #2e5bff;            /* azul NexTags: botão secundário cheio, selos, barras */
  --p-marca-forte: #4a72ff;      /* hover */
  --p-marca-fundo: rgba(46, 91, 255, 0.14);
  --p-marca-borda: rgba(74, 114, 255, 0.45);
  --p-azul-claro: #8fa8ff;       /* links e textos em azul sobre o escuro (contraste ok) */
  --p-degrade: linear-gradient(135deg, #00e9ff 0%, #2e8bff 48%, #2e5bff 100%);
  --p-degrade-suave: linear-gradient(135deg, rgba(0, 233, 255, 0.16), rgba(46, 91, 255, 0.16));

  /* estados (sempre com ícone e texto, nunca só a cor) */
  --p-ok: #4ade80;
  --p-ok-fundo: rgba(74, 222, 128, 0.12);
  --p-alerta: #fbbf24;
  --p-alerta-fundo: rgba(251, 191, 36, 0.12);
  --p-erro: #f87171;
  --p-erro-fundo: rgba(248, 113, 113, 0.12);
  --p-perigo: #ef4444;           /* botão destrutivo (desvincular, excluir) */

  /* gráficos: paleta categórica validada no escuro (superfície #141518, script do dataviz:
     faixa de luminosidade, croma, daltonismo e contraste ok), sempre nesta ordem */
  --p-serie-1: #0899c6;          /* vendas e renovações (ciano escuro) */
  --p-serie-2: #4561ff;          /* cliques (azul NexTags) */
  --p-serie-3: #c98500;          /* conteúdo (posts e visualizações) */
  --p-serie-4: #d9547f;          /* bônus e ajustes */
  --p-grafico-base: #2b2e35;     /* colunas sem destaque (o destaque é o --p-acento) */
  --p-grade: rgba(255, 255, 255, 0.06);

  /* tipografia */
  --p-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --p-fonte-titulo: var(--p-fonte);

  /* forma */
  --p-r-sm: 8px;
  --p-r: 12px;
  --p-r-lg: 16px;
  --p-r-xl: 22px;
  --p-sombra: 0 18px 50px rgba(0, 0, 0, 0.5);
  --p-sombra-janela: 0 30px 80px rgba(0, 0, 0, 0.65);
  --p-brilho: 0 0 0 1px var(--p-acento-borda), 0 0 28px var(--p-acento-brilho);
  --p-lateral-largura: 248px;
  --p-transicao: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--p-fundo);
  color: var(--p-texto);
  font: 400 14px/1.5 var(--p-fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--p-acento-fundo-forte);
}

:focus-visible {
  outline: 2px solid var(--p-acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}