/**
 * Poupex Play 4.0 — Dashboard do Cliente
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-dash
 *
 * Sprint 2 do redesign.
 *
 * ESTRATÉGIA
 * ----------
 * O bloco de vídeos (`.bo-video-*`, IDs `boVideo*`) é dirigido por ~950
 * linhas de JavaScript em dashboard.php. Esse markup NÃO foi tocado —
 * apenas reestilizado por aqui.
 *
 * O painel (`pp-painel-*`) foi reorganizado no PHP porque tem um único
 * gancho de JS (o botão de copiar), adaptado junto.
 *
 * Especificidade: `.pp4-dash <alvo>` para superar app.css e
 * dashboard-painel.css sem !important, salvo onde o legado usa !important.
 */

/* ============================================================
   1 · CONTÊINER
   ============================================================ */

.pp4-dash {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-6);
  color: var(--pp4-color-text);
}

.pp4-dash .bo-painel-only {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ============================================================
   2 · CABEÇALHO — saudação
   ============================================================ */

.pp4-dash .pp-painel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}

.pp4-dash .pp-painel-head__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: var(--pp4-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pp4-color-text);
}

.pp4-dash .pp-painel-head__sub {
  margin: 4px 0 0;
  font-size: var(--pp4-text-md);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-head__actions {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex-shrink: 0;
}

.pp4-dash .pp-painel-head__icon,
.pp4-dash .header-theme-toggle,
html[data-theme] .pp4-dash .header-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pp4-control-md);
  height: var(--pp4-control-md);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pp4-color-text-muted);
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-dash .pp-painel-head__icon svg,
.pp4-dash .header-theme-toggle svg {
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
}

/* O botão de tema traz borda e ícone dourados do tema legado. */
html[data-theme] .pp4-dash .header-theme-toggle {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pp4-color-text-muted) !important;
}

html[data-theme] .pp4-dash .header-theme-toggle svg,
html[data-theme] .pp4-dash .header-theme-toggle svg * {
  color: currentColor !important;
  stroke: currentColor;
  fill: none;
}

.pp4-dash .pp-painel-head__icon:hover,
.pp4-dash .header-theme-toggle:hover {
  background: rgba(245, 247, 250, 0.06);
  color: var(--pp4-color-text);
}

/* ============================================================
   3 · TOPO — saldo + ações · nível
   ============================================================ */

.pp4-dash-top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--pp4-space-4);
  align-items: stretch;
}

/* —— Card de saldo e ações ——
   `dashboard-painel.css` usa `html[data-theme="dark"] .pp-painel-hero`
   (especificidade 0,2,1) para o gradiente azul. Repetimos a forma com
   `html[data-theme]` para chegar a 0,3,1 e vencer sem !important. */
.pp4-dash .pp-painel-hero,
html[data-theme] .pp4-dash .pp-painel-hero {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  padding: var(--pp4-space-6);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  background-image: none;
  color: var(--pp4-color-text);
  box-shadow: var(--pp4-elev-1);
  margin-bottom: 0;
}

.pp4-dash .pp-painel-hero__balance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
}

.pp4-dash .pp-painel-hero__balance > span {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-medium);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-hero__balance > strong {
  font-size: 2.25rem;
  font-weight: var(--pp4-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text);
}

.pp4-dash-delta {
  font-style: normal;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-success) !important;
}

/* —— Quatro ações —— */
.pp4-dash .pp-painel-hero__cta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pp4-space-3);
  padding: 0;
  background: none;
}

/* `html[data-theme="dark"] .pp-painel-btn--light` força fundo branco
   em 0,2,1. Mesma forma aqui para 0,3,1. */
.pp4-dash .pp4-dash-act,
html[data-theme] .pp4-dash .pp4-dash-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pp4-space-2);
  min-height: 92px;
  padding: var(--pp4-space-3);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
  font-family: inherit;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform var(--pp4-duration-fast) var(--pp4-ease),
    border-color var(--pp4-duration) var(--pp4-ease),
    background var(--pp4-duration) var(--pp4-ease);
}

/* O ícone tem tamanho próprio; `.pp-painel-btn--light svg { 16px }` do
   legado o encolheria. */
.pp4-dash .pp4-dash-act .pp4-dash-act__ico svg,
html[data-theme] .pp4-dash .pp4-dash-act .pp4-dash-act__ico svg {
  width: 20px;
  height: 20px;
}

.pp4-dash .pp4-dash-act:hover {
  transform: translateY(-2px);
  border-color: var(--pp4-color-border-strong);
}

.pp4-dash .pp4-dash-act:active { transform: translateY(0); }

.pp4-dash .pp4-dash-act:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-dash .pp4-dash-act__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #ffffff;
}

.pp4-dash .pp4-dash-act__ico svg { width: 20px; height: 20px; }

/* Uma cor por ação — a mesma leitura da referência oficial. */
.pp4-dash .pp4-dash-act--dep .pp4-dash-act__ico { background: var(--pp4-color-blue); }
.pp4-dash .pp4-dash-act--saq .pp4-dash-act__ico { background: var(--pp4-color-success); color: var(--pp4-color-success-ink); }
.pp4-dash .pp4-dash-act--gan .pp4-dash-act__ico { background: var(--pp4-color-purple); }
.pp4-dash .pp4-dash-act--conv .pp4-dash-act__ico { background: var(--pp4-color-warning); color: #3d2a00; }

/* —— Card de nível —— */
.pp4-dash-level {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: var(--pp4-elev-1);
}

.pp4-dash-level__head {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
}

.pp4-dash-level__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pp4-color-surface-2);
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.pp4-dash-level__label {
  display: block;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted);
}

.pp4-dash-level__name {
  display: block;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  line-height: 1.25;
  color: var(--pp4-color-text);
}

.pp4-dash-level__rank {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue-soft);
  border: 1px solid var(--pp4-color-border-blue);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  color: var(--pp4-color-text);
  white-space: nowrap;
}

.pp4-dash-level__bar {
  height: 8px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2);
  overflow: hidden;
}

.pp4-dash-level__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pp4-color-success);
  transition: width var(--pp4-duration-slow) var(--pp4-ease);
}

.pp4-dash-level__meta {
  margin: 0;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
  font-variant-numeric: tabular-nums;
}

.pp4-dash-level__meta strong { color: var(--pp4-color-text); }

/* Sem `margin-top: auto`: num card mais alto que o conteúdo isso abria
   um vão morto entre a legenda e o link. */
.pp4-dash-level__link {
  align-self: flex-start;
  margin-top: var(--pp4-space-1);
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-blue-bright) !important;
  text-decoration: none;
}

.pp4-dash-level__link:hover { text-decoration: underline; }

/* ============================================================
   4 · CONTA E INDICAÇÃO
   ============================================================ */

.pp4-dash .pp4-dash-account {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  flex-wrap: wrap;
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-dash .pp-painel-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue);
  color: #ffffff;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  flex-shrink: 0;
}

.pp4-dash .pp-painel-hero__user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pp4-dash .pp-painel-hero__label {
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-hero__user strong {
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text);
}

.pp4-dash .pp-painel-hero__tel {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
  font-variant-numeric: tabular-nums;
}

.pp4-dash .pp-painel-hero__status {
  padding: 4px 10px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-success-soft);
  color: var(--pp4-color-success) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  white-space: nowrap;
}

.pp4-dash .pp-painel-hero__invite {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
}

.pp4-dash .pp-painel-hero__invite p {
  margin: 0;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-hero__invite strong {
  font-family: var(--pp4-font-mono);
  font-size: var(--pp4-text-md);
  color: var(--pp4-color-text) !important;
  letter-spacing: 0.04em;
}

/* ============================================================
   5 · KPIs
   ============================================================ */

.pp4-dash .pp-painel-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-4);
  padding: 0;
  background: none;
}

.pp4-dash .pp-painel-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-dash .pp-painel-stat > span {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-stat > strong {
  font-size: 1.375rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--pp4-color-text);
}

/* ============================================================
   6 · RESUMO FINANCEIRO — anéis
   ============================================================ */

.pp4-dash .bo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-4);
  padding: 0;
  background: none;
  border: 0;
}

.pp4-dash .bo-stat {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: none;
}

.pp4-dash .bo-stat--highlight { border-color: var(--pp4-color-border-success); }

.pp4-dash .bo-stat__ring { width: 48px; height: 48px; flex-shrink: 0; }
.pp4-dash .bo-stat__ring svg { width: 100%; height: 100%; }
.pp4-dash .bo-stat__ring-track { stroke: var(--pp4-color-surface-3); }
.pp4-dash .bo-stat__ring-fill { stroke: var(--pp4-color-blue-bright); stroke-linecap: round; }
.pp4-dash .bo-stat--highlight .bo-stat__ring-fill { stroke: var(--pp4-color-success); }

.pp4-dash .bo-stat__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pp4-dash .bo-stat__body span {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-stat__body strong {
  font-size: 1.25rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text);
}

/* ============================================================
   7 · PROGRESSÃO DO TETO
   ============================================================ */

.pp4-dash .bo-earnings-cap {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: none;
}

.pp4-dash .bo-earnings-cap__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  flex-wrap: wrap;
}

.pp4-dash .bo-earnings-cap__label {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-earnings-cap__value {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text);
}

.pp4-dash .bo-earnings-cap__meta {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-earnings-cap__meta strong {
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text) !important;
}

.pp4-dash .bo-earnings-cap__badge {
  font-style: normal;
  padding: 3px 9px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-warning-soft);
  color: var(--pp4-color-warning) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-dash .bo-earnings-cap__progress-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--pp4-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-earnings-cap__bar {
  height: 8px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2);
  overflow: hidden;
}

.pp4-dash .bo-earnings-cap__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--pp4-color-success);
  transition: width var(--pp4-duration-slow) var(--pp4-ease);
}

.pp4-dash .bo-earnings-cap__bar-fill--full { background: var(--pp4-color-warning); }

.pp4-dash .bo-earnings-cap__sub {
  margin: 8px 0 0;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   8 · REINVESTIR
   ============================================================ */

.pp4-dash .bo-reinvest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  flex-wrap: wrap;
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border-blue);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-blue-soft);
  box-shadow: none;
}

.pp4-dash .bo-reinvest-banner__body strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--pp4-text-base);
  color: var(--pp4-color-text);
}

.pp4-dash .bo-reinvest-banner__body p {
  margin: 0;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-secondary) !important;
}

.pp4-dash .bo-reinvest-banner__body p strong { color: var(--pp4-color-text) !important; }

/* ============================================================
   9 · ATALHOS
   ============================================================ */

/* 9 atalhos. Em 5 colunas ficam 5+4 com blocos de ~215px — a densidade
   da referência. `auto-fill` dava 7+2 em 1440, visualmente desequilibrado. */
.pp4-dash .pp-painel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pp4-space-3);
  padding: 0;
  background: none;
}

@media (max-width: 1279px) {
  .pp4-dash .pp-painel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .pp4-dash .pp-painel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pp4-dash .pp-painel-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp4-space-3);
  min-height: 108px;
  padding: var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  color: var(--pp4-color-text) !important;
  text-decoration: none;
  box-shadow: none;
  transition:
    transform var(--pp4-duration-fast) var(--pp4-ease),
    border-color var(--pp4-duration) var(--pp4-ease);
}

.pp4-dash .pp-painel-tile:hover {
  transform: translateY(-2px);
  border-color: var(--pp4-color-border-strong);
}

.pp4-dash .pp-painel-tile:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-dash .pp-painel-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-painel-tile__icon svg { width: 20px; height: 20px; }

.pp4-dash .pp-painel-tile:hover .pp-painel-tile__icon {
  background: var(--pp4-color-blue-soft) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-dash .pp-painel-tile__label {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   10 · BANNER
   ============================================================ */

.pp4-dash .bo-banner {
  border-radius: var(--pp4-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pp4-color-border);
  background: var(--pp4-color-surface);
  box-shadow: none;
  padding: 0;
}

.pp4-dash .bo-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   11 · SEÇÃO DE VÍDEOS — só reestilizada, markup intocado
   ============================================================ */

/* `auto` na coluna lateral: quando a barra de vídeos está vazia — membro
   sem plano ativo — ela não reserva 300px de vão morto. */
.pp4-dash .bo-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pp4-space-5);
  align-items: start;
}

.pp4-dash .bo-workspace__main { min-width: 0; order: 1; }
.pp4-dash .bo-workspace__side { min-width: 0; order: 2; position: sticky; top: 88px; }

.pp4-dash .bo-section {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: none;
}

.pp4-dash .bo-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-4);
  flex-wrap: wrap;
  padding: 0;
  border: 0;
}

.pp4-dash .bo-section__head h2 {
  margin: 0;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
  color: var(--pp4-color-text);
}

.pp4-dash .bo-section__head p {
  margin: 4px 0 0;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-section__head p strong { color: var(--pp4-color-text) !important; }

.pp4-dash .bo-section__badges { display: flex; gap: var(--pp4-space-2); flex-wrap: wrap; }

.pp4-dash .bo-badge {
  padding: 5px 11px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2);
  border: 1px solid var(--pp4-color-border);
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pp4-dash .bo-badge--gold {
  background: var(--pp4-color-blue-soft);
  border-color: var(--pp4-color-border-blue);
}

.pp4-dash .bo-platform-block {
  padding: var(--pp4-space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--pp4-color-border);
  background: none;
}

.pp4-dash .bo-platform-block:first-of-type { border-top: 0; padding-top: 0; }

.pp4-dash .bo-platform-block__head h3 {
  margin: 0;
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text);
}

.pp4-dash .bo-platform-block__head p {
  margin: 4px 0 var(--pp4-space-3);
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .bo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-10) var(--pp4-space-5);
  border: 1px dashed var(--pp4-color-border-strong);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface-2);
  text-align: center;
}

.pp4-dash .bo-empty p {
  margin: 0;
  font-size: var(--pp4-text-md);
  color: var(--pp4-color-text-muted) !important;
}

/* Botões da seção */
.pp4-dash .bo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp4-space-2);
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-5);
  border: 1px solid transparent;
  border-radius: var(--pp4-radius-md);
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-dash .bo-btn--gold {
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pp4-dash .bo-btn--gold:hover { background: #0f2ea8 !important; }

.pp4-dash .bo-btn--outline {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--pp4-color-border-strong) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-dash .bo-btn:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   12 · RODAPÉ E TROCA DE LAYOUT
   ============================================================ */

.pp4-dash .bo-footer {
  padding-top: var(--pp4-space-5);
  border-top: 1px solid var(--pp4-color-border);
  text-align: center;
}

.pp4-dash .bo-footer p {
  margin: var(--pp4-space-3) 0 0;
  font-size: var(--pp4-text-xs);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp-layout-switch {
  margin: 0;
  text-align: center;
  font-size: var(--pp4-text-xs);
}

.pp4-dash .pp-layout-switch a { color: var(--pp4-color-text-muted) !important; }

/* ============================================================
   13 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1279px) {
  .pp4-dash .bo-workspace { grid-template-columns: minmax(0, 1fr); }
  .pp4-dash .bo-workspace__side { position: static; order: 2; }
}

@media (max-width: 1023px) {
  .pp4-dash-top { grid-template-columns: minmax(0, 1fr); }
  .pp4-dash .pp-painel-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp4-dash .bo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-dash { gap: var(--pp4-space-5); }
  .pp4-dash .pp-painel-head__title { font-size: 1.5rem; }
  .pp4-dash .pp-painel-hero { padding: var(--pp4-space-5); }
  .pp4-dash .pp-painel-hero__balance > strong { font-size: 2rem; }

  /* Quatro ações em 2×2 — 4 colunas em 358px dariam alvos de 78px. */
  .pp4-dash .pp-painel-hero__cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pp4-dash .pp-painel-stats,
  .pp4-dash .bo-stats { grid-template-columns: minmax(0, 1fr); }

  .pp4-dash .pp4-dash-account { gap: var(--pp4-space-3); }
  .pp4-dash .pp-painel-hero__invite { margin-left: 0; width: 100%; }

  .pp4-dash .pp-painel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp4-dash .pp-painel-tile { min-height: 96px; }

  .pp4-dash .bo-section { padding: var(--pp4-space-4); }
  .pp4-dash .bo-earnings-cap__top { flex-direction: column; gap: var(--pp4-space-3); }
}

@media (max-width: 479px) {
  .pp4-dash .pp-painel-head { flex-direction: column; }
  .pp4-dash .pp-painel-head__actions { align-self: flex-end; margin-top: -44px; }
  .pp4-dash .pp4-dash-account { flex-direction: column; align-items: flex-start; }
  .pp4-dash .pp-painel-hero__status { align-self: flex-start; }
}

/* ============================================================
   14 · NEUTRALIZAÇÃO DO TEMA LEGADO (ouro)
   ============================================================

   Como no shell, `brand-theme.css` aplica a marca anterior com
   `!important` — que vence especificidade. Cada bloco abaixo
   corresponde a uma regra legada identificada por inspeção do
   DOM renderizado, não por leitura de arquivo.

   `brand-theme.css` não foi alterado: ele segue servindo as telas
   ainda não migradas. Esta camada age só dentro de `.pp4-dash`. */

/* brand-theme.css:86 — `.pp-painel-hero` com gradiente azul-marinho
   e sombra próprios. */
.pp4-dash .pp-painel-hero,
html[data-theme] .pp4-dash .pp-painel-hero {
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: var(--pp4-elev-1) !important;
  border: 1px solid var(--pp4-color-border) !important;
}

/* brand-theme.css:93 — `.pp-painel-hero__copy` (agora o botão Convidar).
   É um <button>, então as regras de `a.pp4-dash-act` não o alcançam;
   `.pp-painel-btn--light { color: var(--logo-green) }` o deixava
   azul-marinho sobre fundo escuro. */
.pp4-dash .pp-painel-hero__copy,
html[data-theme] .pp4-dash .pp-painel-hero__copy,
html[data-theme] .pp4-dash button.pp4-dash-act {
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--pp4-color-border) !important;
  color: var(--pp4-color-text) !important;
}

/* brand-theme.css:316 — gradiente verde→ouro nas barras e anéis. */
.pp4-dash .bo-earnings-cap__bar-fill,
.pp4-dash .bo-stat__ring-fill {
  background: var(--pp4-color-success) !important;
  background-image: none !important;
}

.pp4-dash .bo-earnings-cap__bar-fill--full {
  background: var(--pp4-color-warning) !important;
}

.pp4-dash .bo-stat__ring-fill {
  background: none !important;
  stroke: var(--pp4-color-blue-bright) !important;
}

.pp4-dash .bo-stat--highlight .bo-stat__ring-fill {
  stroke: var(--pp4-color-success) !important;
}

/* `.shell--app p` = 0,1,1 !important atinge todo parágrafo.
   Aqui 0,2,0, que vence por classe. */
.pp4-dash .pp4-dash-level__meta,
.pp4-dash .pp-layout-switch,
.pp4-dash .bo-earnings-cap__sub,
.pp4-dash .bo-platform-block__head p,
.pp4-dash .bo-section__head p,
.pp4-dash .bo-empty p {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-dash .pp4-dash-level__meta strong,
.pp4-dash .bo-section__head p strong {
  color: var(--pp4-color-text) !important;
}

/* brand-theme.css:808 — `.shell--app .content a:not()×6` = 0,8,1 com
   `!important`, e sua lista de exclusões NÃO cobre `.pp-painel-btn`.
   Espelhamos a mesma forma acrescentando `.pp4-dash`, o que dá 0,9,1.
   Um link colorido dentro de um botão preenchido é sempre erro. */
.pp4-shell .content .pp4-dash a.pp4-dash-act:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-dash a.pp-painel-tile:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-dash a.bo-btn--outline:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text) !important;
}

.pp4-shell .content .pp4-dash a.bo-btn--gold:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-dash a.bo-video-card__cta--boost:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
}

/* O rótulo dentro do botão herda; o ícone tem cor própria por ação. */
.pp4-dash .pp4-dash-act > span:last-child { color: inherit; }

/* Contadores e CTAs remanescentes da seção de vídeos. */
.pp4-dash .bo-video-sidebar__count {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-shell .content .pp4-dash a.bo-video-card__cta--boost,
.pp4-dash .bo-video-card__cta--boost {
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ============================================================
   15 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-dash *,
  .pp4-dash *::before,
  .pp4-dash *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .pp4-dash .pp4-dash-act:hover,
  .pp4-dash .pp-painel-tile:hover { transform: none; }
}

/* ============================================================
   BORDAS DOURADAS REMANESCENTES
   ============================================================

   Achado no Sprint 10, ao ampliar a varredura de cor para incluir
   `border-color` e `outline-color` — até então ela olhava só fundo e
   texto, e por isso estas passaram batido no Sprint 2.

   Todas vêm de componentes de vídeo que o Sprint 2 deliberadamente não
   migrou (`_dashboard_video_grid.php`, `_dashboard_video_sidebar.php`).
   A estrutura deles continua intocada: aqui só a cor da borda muda. */

.pp4-dash .bo-video-sidebar,
.pp4-dash .bo-video-card,
.pp4-dash .bo-section,
html[data-theme] .pp4-dash .bo-video-sidebar,
html[data-theme] .pp4-dash .bo-video-card,
html[data-theme] .pp4-dash .bo-section {
  border-color: var(--pp4-color-border) !important;
}

/* `.bolao-promo-modal__cta` é um link: a cor dourada vem da regra
   genérica de `brand-theme.css:808` (0,8,1). Cadeia completa → 0,10,1. */
.pp4-shell .content .bolao-promo-modal__cta,
.pp4-shell .content a.bolao-promo-modal__cta:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  border-color: var(--pp4-color-blue) !important;
  color: var(--pp4-color-blue-bright) !important;
}

/* Bloco A — correção de contraste.
   A regra acima nasceu para apagar o dourado que `brand-theme.css:808`
   pintava em todo <a> de conteúdo. Só que no modal de Mini Apps o CTA
   tem fundo próprio e claro — `app.css:12520` dá um gradiente
   ciano→verde→amarelo e escreve o texto em `#041016`. Forçar azul ali
   deixou letra azul sobre fundo amarelo, ilegível.

   Aqui o texto volta ao quase-preto que o fundo pede. A cadeia repete
   os seis `:not()` para empatar em especificidade e vencer por ordem. */
.pp4-shell .content .minis-apps-promo-modal .bolao-promo-modal__cta,
.pp4-shell .content .minis-apps-promo-modal a.bolao-promo-modal__cta:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: #041016 !important;
}