/**
 * Poupex Play 4.0 — Dashboard do Cliente (Fase 2)
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-dash
 *
 * Reconstrói a composição visual do Dashboard para a referência
 * oficial. Carregado depois de `dashboard.css`.
 *
 * ------------------------------------------------------------------
 * A COMPOSIÇÃO DA REFERÊNCIA
 * ------------------------------------------------------------------
 *   Linha 1   saudação à esquerda · card de nível à direita
 *   Linha 2   card de saldo em gradiente azul · quatro ações coloridas
 *   Linha 3   blocos de atividade e ganhos
 *   Linha 4   faixa de exploração
 *
 * Nenhum dado novo foi criado. O que mudou foi a POSIÇÃO e o PESO
 * visual de blocos que já existiam: o card de nível subiu para a linha
 * da saudação, o saldo virou o cartão dominante em azul, e as quatro
 * ações ganharam a cor que cada uma tem na referência.
 */

/* ============================================================
   1 · HERO — saudação + nível na mesma linha
   ============================================================ */

.pp4-dash .pp-painel-head { display: none !important; }

.pp4-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  gap: var(--pp4-space-5);
  margin-bottom: var(--pp4-space-5);
}

.pp4-hero__greet { min-width: 0; }

.pp4-dash .pp4-hero__title,
html[data-theme] .pp4-dash .pp4-hero__title {
  margin: 0 0 4px !important;
  color: #f5f7fa !important;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pp4-dash .pp4-hero__sub,
html[data-theme] .pp4-dash .pp4-hero__sub {
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 0.9rem;
}

/* --- Card de nível ---------------------------------------------------
   Na referência: fundo escuro, moeda à esquerda, nome do nível, barra
   de progresso e um botão claro à direita. */

.pp4-dash .pp4-dash-level,
html[data-theme] .pp4-dash .pp4-dash-level {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  padding: var(--pp4-space-4) var(--pp4-space-5) !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: 16px !important;
  background: #111827 !important;
  background-image: none !important;
  box-shadow: none !important;
}

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

.pp4-dash .pp4-dash-level__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f5c451, #d99a1e);
  font-size: 1.15rem;
  line-height: 1;
}

.pp4-dash .pp4-dash-level__label {
  display: block;
  color: #64748b !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pp4-dash .pp4-dash-level__name {
  display: block;
  color: #f5f7fa !important;
  font-size: 1rem;
  font-weight: 700;
}

.pp4-dash .pp4-dash-level__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 247, 250, 0.1) !important;
  overflow: hidden;
}

.pp4-dash .pp4-dash-level__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00e676, #00b45c) !important;
}

.pp4-dash .pp4-dash-level__meta,
html[data-theme] .pp4-dash .pp4-dash-level__meta {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.75rem;
}

.pp4-dash .pp4-dash-level__meta strong { color: #94a3b8 !important; }

.pp4-shell .content .pp4-dash a.pp4-dash-level__link {
  align-self: flex-start;
  padding: 6px var(--pp4-space-4);
  border-radius: 999px;
  background: rgba(245, 247, 250, 0.08);
  color: #f5f7fa !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .content .pp4-dash a.pp4-dash-level__link:hover { background: rgba(245, 247, 250, 0.14); }

/* ============================================================
   2 · SALDO + AÇÕES
   ============================================================

   Na referência o saldo é um retângulo em gradiente azul, e as quatro
   ações são quadrados coloridos ao lado — não botões neutros. */

.pp4-dash .pp4-dash-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp4-space-4);
  margin-bottom: var(--pp4-space-5);
}

.pp4-dash .pp-painel-hero,
html[data-theme] .pp4-dash .pp-painel-hero {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--pp4-space-4);
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --- Cartão de saldo -------------------------------------------------- */

.pp4-dash .pp-painel-hero__balance,
html[data-theme] .pp4-dash .pp-painel-hero__balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: var(--pp4-space-5) var(--pp4-space-6) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #1b4dff 0%, #123bf9 45%, #0b2ec4 100%) !important;
  background-image: linear-gradient(135deg, #1b4dff 0%, #123bf9 45%, #0b2ec4 100%) !important;
  box-shadow: 0 10px 30px rgba(18, 59, 249, 0.22) !important;
}

.pp4-dash .pp-painel-hero__balance > span:first-child {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.82rem;
  font-weight: 500;
}

.pp4-dash .pp-painel-hero__balance strong {
  color: #ffffff !important;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pp4-dash .pp-painel-hero__balance .pp4-dash-delta,
html[data-theme] .pp4-dash .pp-painel-hero__balance .pp4-dash-delta {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 230, 118, 0.2) !important;
  color: #6dffb0 !important;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
}

/* --- Quatro ações coloridas -------------------------------------------
   Depositar azul · Sacar verde · Ganhos roxo · Convidar laranja, como
   na referência. Continuam sendo os mesmos <a> e <button>, com os
   mesmos destinos e o mesmo `data-copy` que o JS lê. */

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

.pp4-dash .pp4-dash-act,
.pp4-shell .content .pp4-dash a.pp4-dash-act,
.pp4-dash button.pp4-dash-act {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pp4-space-2);
  min-height: 118px;
  padding: var(--pp4-space-4) var(--pp4-space-2) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), filter 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-dash .pp4-dash-act:hover { transform: translateY(-2px); filter: brightness(1.08); }

.pp4-dash .pp4-dash-act__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.pp4-dash .pp4-dash-act__ico svg { width: 21px; height: 21px; color: #ffffff !important; }

.pp4-dash .pp4-dash-act > span:last-child { color: #ffffff !important; }

.pp4-dash .pp4-dash-act--dep,
.pp4-shell .content .pp4-dash a.pp4-dash-act--dep { background: linear-gradient(140deg, #2a5bff, #123bf9) !important; }

.pp4-dash .pp4-dash-act--saq,
.pp4-shell .content .pp4-dash a.pp4-dash-act--saq { background: linear-gradient(140deg, #00e676, #00a854) !important; }

.pp4-dash .pp4-dash-act--gan,
.pp4-shell .content .pp4-dash a.pp4-dash-act--gan { background: linear-gradient(140deg, #a855f7, #7c3aed) !important; }

.pp4-dash .pp4-dash-act--conv,
.pp4-dash button.pp4-dash-act--conv { background: linear-gradient(140deg, #fbbf24, #f59e0b) !important; }

/* ============================================================
   3 · RESPONSIVIDADE
   ============================================================ */

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

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

@media (max-width: 767px) {
  .pp4-dash .pp4-hero__title { font-size: 1.4rem; }
  .pp4-dash .pp-painel-hero__balance { padding: var(--pp4-space-4) var(--pp4-space-5) !important; }
  .pp4-dash .pp-painel-hero__balance strong { font-size: 1.75rem; }
  .pp4-dash .pp-painel-hero__cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp4-dash .pp4-dash-act { min-height: 100px; }
}

@media (max-width: 359px) {
  .pp4-dash .pp4-dash-act { min-height: 92px; }
  .pp4-dash .pp4-dash-act__ico { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp4-dash .pp4-dash-act,
  .pp4-shell .content .pp4-dash a.pp4-dash-level__link { transition: none !important; }
  .pp4-dash .pp4-dash-act:hover { transform: none; }
}

/* ============================================================
   4 · CORREÇÕES DA PRIMEIRA ITERAÇÃO
   ============================================================ */

/* O hero usava `align-items: center`: a saudação flutuava no meio da
   altura do card de nível, em vez de começar junto com ele no topo. */
.pp4-hero { align-items: start; }
.pp4-hero__greet { padding-top: 4px; }

/* "Convidar" é um <button>, não um <a>, e continuava cinza: o
   `.pp-painel-btn--light` de brand-theme.css vence um seletor de
   classe simples. A cadeia abaixo empata em especificidade e vence
   pela ordem de carregamento. */
.pp4-dash .pp-painel-hero__cta button.pp-painel-btn.pp4-dash-act--conv,
.pp4-dash .pp-painel-hero__cta .pp-painel-btn--light.pp4-dash-act--conv,
html[data-theme] .pp4-dash button.pp4-dash-act--conv {
  background: linear-gradient(140deg, #fbbf24, #f59e0b) !important;
  background-image: linear-gradient(140deg, #fbbf24, #f59e0b) !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* As demais também passam pelo `--light`; garante que nenhuma volte ao
   cinza quando a folha herdada mudar de ordem. */
.pp4-dash .pp-painel-hero__cta .pp-painel-btn--light.pp4-dash-act--dep { background: linear-gradient(140deg, #2a5bff, #123bf9) !important; }
.pp4-dash .pp-painel-hero__cta .pp-painel-btn--light.pp4-dash-act--saq { background: linear-gradient(140deg, #00e676, #00a854) !important; }
.pp4-dash .pp-painel-hero__cta .pp-painel-btn--light.pp4-dash-act--gan { background: linear-gradient(140deg, #a855f7, #7c3aed) !important; }

/* Na referência os quatro quadrados são mais compactos que o cartão de
   saldo; aqui estavam com a mesma altura dele. */
.pp4-dash .pp4-dash-act,
.pp4-shell .content .pp4-dash a.pp4-dash-act,
.pp4-dash button.pp4-dash-act { min-height: 104px; }

.pp4-dash .pp-painel-hero { align-items: start; }
.pp4-dash .pp-painel-hero__balance { min-height: 104px; }

/* ============================================================
   5 · CARD DE NÍVEL — formato horizontal da referência
   ============================================================

   Na referência o card é largo e baixo: moeda, nome e barra à
   esquerda, botão à direita, tudo em uma faixa. Empilhado em coluna
   ele ficava com o dobro da altura da saudação e abria um vão de
   ~120px antes da linha do saldo. Só o arranjo muda — os quatro
   elementos e o link são os mesmos. */

.pp4-dash .pp4-dash-level,
html[data-theme] .pp4-dash .pp4-dash-level {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head link"
    "bar  link"
    "meta link";
  align-items: center;
  gap: 6px var(--pp4-space-4);
  padding: var(--pp4-space-4) var(--pp4-space-5) !important;
}

.pp4-dash .pp4-dash-level__head { grid-area: head; }
.pp4-dash .pp4-dash-level__bar  { grid-area: bar; }
.pp4-dash .pp4-dash-level__meta { grid-area: meta; }
.pp4-shell .content .pp4-dash a.pp4-dash-level__link {
  grid-area: link;
  align-self: center;
  white-space: nowrap;
}

.pp4-dash .pp4-dash-level__ico { width: 34px; height: 34px; font-size: 1rem; }
.pp4-dash .pp4-dash-level__name { font-size: 0.95rem; }

/* Com o card mais baixo, o hero encosta na linha do saldo. */
.pp4-hero { margin-bottom: var(--pp4-space-4); }

/* ============================================================
   6 · ESTOUROS EM TELA ESTREITA
   ============================================================

   O grid `1fr auto` do card de nível reservava a largura inteira do
   botão "Ver minha carreira" (`white-space: nowrap`) e espremia a
   coluna do texto para 71px num cartão de 272px. Abaixo de 768px o
   card volta a empilhar, como na versão mobile da referência. */

.pp4-dash .pp4-dash-level > * { min-width: 0; }
.pp4-dash .pp4-dash-top,
.pp4-dash .pp-painel-hero,
.pp4-dash .pp-painel-hero__cta { min-width: 0; max-width: 100%; }

@media (max-width: 767px) {
  .pp4-dash .pp4-dash-level,
  html[data-theme] .pp4-dash .pp4-dash-level {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pp4-space-2);
  }

  .pp4-shell .content .pp4-dash a.pp4-dash-level__link {
    align-self: flex-start;
    white-space: normal;
  }

  .pp4-dash .pp4-dash-level__head { flex-wrap: wrap; }
}

/* O invólucro herdado do painel tem largura mínima própria. */
.pp4-dash .bo-painel-only,
.pp4-dash.bo-dashboard { min-width: 0; max-width: 100%; overflow-x: clip; }

/* A faixa de ações herdava `display: flex` de `dashboard.css`, que
   vence a declaração de grade sem `!important`. Os quatro botões
   ficavam com 16px de largura e o conteúdo transbordava. */
.pp4-dash .pp-painel-hero__cta,
html[data-theme] .pp4-dash .pp-painel-hero__cta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100%;
}

@media (max-width: 767px) {
  .pp4-dash .pp-painel-hero__cta,
  html[data-theme] .pp4-dash .pp-painel-hero__cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.pp4-dash .pp4-dash-act,
.pp4-shell .content .pp4-dash a.pp4-dash-act,
.pp4-dash button.pp4-dash-act { width: 100%; min-width: 0; }

/* ============================================================
   7 · RESPONSIVIDADE — declarada por último
   ============================================================

   As media queries das seções 3 e 6 estavam sendo vencidas pelas
   regras base das seções 4, 5 e 6: media query NÃO aumenta
   especificidade, então qualquer regra de mesmo peso declarada DEPOIS
   no arquivo prevalece. O resultado era o saldo e as quatro ações
   lado a lado em 390px, com os botões cortados na borda.

   Este bloco fecha o arquivo — nada o sobrepõe. */

@media (max-width: 1023px) {
  .pp4-hero,
  html[data-theme] .pp4-dash .pp4-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pp4-dash .pp-painel-hero,
  html[data-theme] .pp4-dash .pp-painel-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pp4-dash .pp-painel-hero__balance { min-height: 0 !important; }
}

@media (max-width: 767px) {
  .pp4-dash .pp-painel-hero__cta,
  html[data-theme] .pp4-dash .pp-painel-hero__cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pp4-dash .pp4-hero__title { font-size: 1.4rem !important; }
  .pp4-dash .pp-painel-hero__balance strong { font-size: 1.75rem !important; }
}

@media (max-width: 359px) {
  .pp4-dash .pp-painel-hero__cta,
  html[data-theme] .pp4-dash .pp-painel-hero__cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--pp4-space-2) !important;
  }
  .pp4-dash .pp4-dash-act { min-height: 92px !important; }
}

/* ============================================================
   8 · LINHA 3 — atividades · ganhos · promoção
   ============================================================

   Na referência esta linha tem três blocos lado a lado. Todos os
   números vêm de variáveis que o Dashboard já calculava. */

.pp4-dash-row3 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--pp4-space-4);
  margin-bottom: var(--pp4-space-5);
  align-items: stretch;
}

/* --- Cartão base compartilhado ---------------------------------------- */

.pp4-dash .pp4-card,
html[data-theme] .pp4-dash .pp4-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-5) !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: 16px !important;
  background: #111827 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-dash .pp4-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
}

.pp4-dash .pp4-card__title,
html[data-theme] .pp4-dash .pp4-card__title {
  margin: 0 !important;
  color: #f5f7fa !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pp4-shell .content .pp4-dash a.pp4-card__link {
  color: #5b8cff !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pp4-shell .content .pp4-dash a.pp4-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Atividades de hoje ----------------------------------------------
   Cinco células com ícone circular colorido, valor e rótulo, como na
   referência. As cores seguem a paleta oficial. */

.pp4-dash .pp4-atv__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pp4-space-2);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-dash .pp4-atv__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: var(--pp4-space-3) 4px;
  border-radius: 12px;
  background: rgba(245, 247, 250, 0.03);
  text-align: center;
}

.pp4-dash .pp4-atv__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff !important;
}

.pp4-dash .pp4-atv__ico svg { width: 19px; height: 19px; color: #ffffff !important; }

.pp4-dash .pp4-atv__item--videos  .pp4-atv__ico { background: linear-gradient(140deg, #2a5bff, #123bf9); }
.pp4-dash .pp4-atv__item--missoes .pp4-atv__ico { background: linear-gradient(140deg, #fbbf24, #f59e0b); }
.pp4-dash .pp4-atv__item--nivel   .pp4-atv__ico { background: linear-gradient(140deg, #a855f7, #7c3aed); }
.pp4-dash .pp4-atv__item--equipe  .pp4-atv__ico { background: linear-gradient(140deg, #00e676, #00a854); }
.pp4-dash .pp4-atv__item--invest  .pp4-atv__ico { background: linear-gradient(140deg, #38bdf8, #0284c7); }

.pp4-dash .pp4-atv__val {
  color: #f5f7fa !important;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.pp4-dash .pp4-atv__lbl {
  color: #64748b !important;
  font-size: 0.68rem;
  font-weight: 500;
}

/* --- Meus ganhos ------------------------------------------------------ */

.pp4-dash .pp4-earn__big,
html[data-theme] .pp4-dash .pp4-earn__big {
  margin: 0 !important;
  color: #00e676 !important;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pp4-dash .pp4-earn__cap,
html[data-theme] .pp4-dash .pp4-earn__cap {
  margin: -6px 0 0 !important;
  color: #64748b !important;
  font-size: 0.78rem;
}

.pp4-dash .pp4-earn__split {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  margin: auto 0 0 !important;
  list-style: none;
}

.pp4-dash .pp4-earn__split li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-2) 0;
  border-top: 1px solid rgba(245, 247, 250, 0.06);
}

.pp4-dash .pp4-earn__split span { color: #64748b !important; font-size: 0.8rem; }

.pp4-dash .pp4-earn__split strong {
  color: #f5f7fa !important;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Card promocional -------------------------------------------------
   Na referência é o bloco mais saturado da tela, em magenta/roxo, com
   um brilho radial atrás. Aponta para /roleta, rota que já existe. */

.pp4-shell .content .pp4-dash a.pp4-promo,
.pp4-dash .pp4-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: var(--pp4-space-5) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(150deg, #a21caf 0%, #7c3aed 55%, #4c1d95 100%) !important;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.24) !important;
  transition: transform 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-dash .pp4-promo:hover { transform: translateY(-2px); }

.pp4-dash .pp4-promo__glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  pointer-events: none;
}

.pp4-dash .pp4-promo__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
}

.pp4-dash .pp4-promo__ico svg { width: 24px; height: 24px; color: #ffffff !important; }

.pp4-dash .pp4-promo__title {
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.pp4-dash .pp4-promo__sub {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.78rem;
}

.pp4-dash .pp4-promo__cta {
  margin-top: auto;
  padding: 7px var(--pp4-space-4);
  border-radius: 999px;
  background: #ffffff;
  color: #7c3aed !important;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   9 · EXPLORE A POUPEX PLAY
   ============================================================

   Os mesmos nove atalhos que já existiam, agora como cartões com
   ícone colorido — não mais nove quadrados cinzas iguais. Todos os
   destinos são os originais. */

.pp4-dash .pp4-explore { margin-bottom: var(--pp4-space-5); }

.pp4-dash .pp4-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--pp4-space-3);
  margin-top: var(--pp4-space-3);
}

.pp4-shell .content .pp4-dash a.pp4-xp,
.pp4-dash .pp4-xp {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-4) !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: 16px !important;
  background: #111827 !important;
  background-image: none !important;
  color: #f5f7fa !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: border-color 160ms cubic-bezier(.4,0,.2,1), transform 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-dash .pp4-xp:hover { border-color: rgba(91, 140, 255, 0.5) !important; transform: translateY(-2px); }

.pp4-dash .pp4-xp__ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #ffffff !important;
}

.pp4-dash .pp4-xp__ico svg { width: 21px; height: 21px; color: #ffffff !important; }

.pp4-dash .pp4-xp__lbl {
  color: #f5f7fa !important;
  font-size: 0.88rem;
  font-weight: 600;
}

.pp4-dash .pp4-xp--play   .pp4-xp__ico { background: linear-gradient(140deg, #2a5bff, #123bf9); }
.pp4-dash .pp4-xp--tasks  .pp4-xp__ico { background: linear-gradient(140deg, #fbbf24, #f59e0b); }
.pp4-dash .pp4-xp--team   .pp4-xp__ico { background: linear-gradient(140deg, #00e676, #00a854); }
.pp4-dash .pp4-xp--wallet .pp4-xp__ico { background: linear-gradient(140deg, #38bdf8, #0284c7); }
.pp4-dash .pp4-xp--chart  .pp4-xp__ico { background: linear-gradient(140deg, #a855f7, #7c3aed); }
.pp4-dash .pp4-xp--star   .pp4-xp__ico { background: linear-gradient(140deg, #f472b6, #db2777); }
.pp4-dash .pp4-xp--games  .pp4-xp__ico { background: linear-gradient(140deg, #6366f1, #4338ca); }
.pp4-dash .pp4-xp--ball   .pp4-xp__ico { background: linear-gradient(140deg, #22d3ee, #0891b2); }
.pp4-dash .pp4-xp--gift   .pp4-xp__ico { background: linear-gradient(140deg, #fb923c, #ea580c); }

/* ============================================================
   10 · CORREÇÕES DA PRIMEIRA ITERAÇÃO DOS QUATRO BLOCOS
   ============================================================ */

/* Os ícones do "Explore" saíram cinzas: `dashboard.css` estiliza
   `.pp-painel-tile__icon` com `!important`, e a classe da variante
   sozinha não vencia. */
/* O reset original trazia `background-image: none !important`, que
   anulava os gradientes das variantes logo abaixo — mesmo peso de
   especificidade, e o reset ganhava por ordem em parte dos casos.
   Fica só o que não conflita. */
.pp4-dash .pp4-xp .pp4-xp__ico,
.pp4-dash .pp-painel-tile .pp-painel-tile__icon.pp4-xp__ico {
  border: 0 !important;
  box-shadow: none !important;
}

.pp4-dash .pp4-xp--play   .pp4-xp__ico,
.pp4-dash a.pp4-xp--play   .pp-painel-tile__icon { background: linear-gradient(140deg, #2a5bff, #123bf9) !important; }
.pp4-dash .pp4-xp--tasks  .pp4-xp__ico,
.pp4-dash a.pp4-xp--tasks  .pp-painel-tile__icon { background: linear-gradient(140deg, #fbbf24, #f59e0b) !important; }
.pp4-dash .pp4-xp--team   .pp4-xp__ico,
.pp4-dash a.pp4-xp--team   .pp-painel-tile__icon { background: linear-gradient(140deg, #00e676, #00a854) !important; }
.pp4-dash .pp4-xp--wallet .pp4-xp__ico,
.pp4-dash a.pp4-xp--wallet .pp-painel-tile__icon { background: linear-gradient(140deg, #38bdf8, #0284c7) !important; }
.pp4-dash .pp4-xp--chart  .pp4-xp__ico,
.pp4-dash a.pp4-xp--chart  .pp-painel-tile__icon { background: linear-gradient(140deg, #a855f7, #7c3aed) !important; }
.pp4-dash .pp4-xp--star   .pp4-xp__ico,
.pp4-dash a.pp4-xp--star   .pp-painel-tile__icon { background: linear-gradient(140deg, #f472b6, #db2777) !important; }
.pp4-dash .pp4-xp--games  .pp4-xp__ico,
.pp4-dash a.pp4-xp--games  .pp-painel-tile__icon { background: linear-gradient(140deg, #6366f1, #4338ca) !important; }
.pp4-dash .pp4-xp--ball   .pp4-xp__ico,
.pp4-dash a.pp4-xp--ball   .pp-painel-tile__icon { background: linear-gradient(140deg, #22d3ee, #0891b2) !important; }
.pp4-dash .pp4-xp--gift   .pp4-xp__ico,
.pp4-dash a.pp4-xp--gift   .pp-painel-tile__icon { background: linear-gradient(140deg, #fb923c, #ea580c) !important; }

.pp4-dash .pp4-xp .pp4-xp__ico svg,
.pp4-dash .pp4-xp .pp-painel-tile__icon svg { color: #ffffff !important; stroke: #ffffff !important; }

/* "R$ 103,00" quebrava em duas linhas na célula de investido: o valor
   monetário é mais longo que os contadores das outras quatro. */
.pp4-dash .pp4-atv__item--invest .pp4-atv__val { font-size: 0.8rem; }
.pp4-dash .pp4-atv__val { white-space: nowrap; }

/* O grid do Explore com `minmax(150px)` gerava 7 + 2 numa fileira
   desequilibrada. Cinco por linha, como na referência. */
@media (min-width: 1280px) {
  .pp4-dash .pp4-explore__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* Especificidade elevada: `dashboard.css` estiliza
   `.pp4-dash .pp-painel-tile .pp-painel-tile__icon` com `!important`,
   empatando com as variantes. A cadeia abaixo acrescenta o link. */
.pp4-dash .pp4-explore__grid a.pp4-xp--play   span.pp4-xp__ico { background: linear-gradient(140deg,#2a5bff,#123bf9) !important; background-image: linear-gradient(140deg,#2a5bff,#123bf9) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--tasks  span.pp4-xp__ico { background: linear-gradient(140deg,#fbbf24,#f59e0b) !important; background-image: linear-gradient(140deg,#fbbf24,#f59e0b) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--team   span.pp4-xp__ico { background: linear-gradient(140deg,#00e676,#00a854) !important; background-image: linear-gradient(140deg,#00e676,#00a854) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--wallet span.pp4-xp__ico { background: linear-gradient(140deg,#38bdf8,#0284c7) !important; background-image: linear-gradient(140deg,#38bdf8,#0284c7) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--chart  span.pp4-xp__ico { background: linear-gradient(140deg,#a855f7,#7c3aed) !important; background-image: linear-gradient(140deg,#a855f7,#7c3aed) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--star   span.pp4-xp__ico { background: linear-gradient(140deg,#f472b6,#db2777) !important; background-image: linear-gradient(140deg,#f472b6,#db2777) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--games  span.pp4-xp__ico { background: linear-gradient(140deg,#6366f1,#4338ca) !important; background-image: linear-gradient(140deg,#6366f1,#4338ca) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--ball   span.pp4-xp__ico { background: linear-gradient(140deg,#22d3ee,#0891b2) !important; background-image: linear-gradient(140deg,#22d3ee,#0891b2) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--gift   span.pp4-xp__ico { background: linear-gradient(140deg,#fb923c,#ea580c) !important; background-image: linear-gradient(140deg,#fb923c,#ea580c) !important; }
.pp4-dash .pp4-explore__grid a.pp4-xp--apps   span.pp4-xp__ico { background: linear-gradient(140deg,#22d3ee,#0891b2) !important; background-image: linear-gradient(140deg,#22d3ee,#0891b2) !important; }

/* ------------------------------------------------------------
   Bloco A · o card do Explore ganha linha de apoio
   ------------------------------------------------------------

   A referência mostra cinco cards com ícone, título e uma frase
   curta abaixo. Aqui o card tinha só o rótulo. O texto foi
   agrupado em `.pp4-xp__txt` para que título e apoio fiquem
   juntos quando o card cresce em altura.

   `min-width: 0` no wrapper porque ele é item de flex: sem isso o
   `overflow-wrap` do apoio não tem contra o que quebrar. */

.pp4-dash .pp4-xp--apps .pp4-xp__ico { background: linear-gradient(140deg, #22d3ee, #0891b2); }

.pp4-dash .pp4-xp__txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pp4-dash .pp4-xp__sub {
  color: var(--pp4-color-text-muted) !important;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ============================================================
   11 · RESPONSIVIDADE DOS QUATRO BLOCOS — declarada por último
   ============================================================

   Cinco células de atividade só cabem lado a lado a partir de 1440px:
   abaixo disso o valor monetário e os rótulos estouravam a grade. */

@media (max-width: 1439px) {
  .pp4-dash .pp4-atv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 1279px) {
  .pp4-dash-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .pp4-dash .pp4-promo { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--pp4-space-4); }
  .pp4-dash .pp4-promo__cta { margin-top: 0; margin-left: auto; }
  .pp4-dash .pp4-promo__ico { margin-bottom: 0; }
}

@media (max-width: 1023px) {
  .pp4-dash-row3 { grid-template-columns: minmax(0, 1fr) !important; }
  .pp4-dash .pp4-explore__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
}

@media (max-width: 767px) {
  .pp4-dash .pp4-atv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pp4-dash .pp4-earn__big { font-size: 1.65rem; }
  .pp4-dash .pp4-promo { flex-direction: column; align-items: flex-start; }
  .pp4-dash .pp4-promo__cta { margin-left: 0; margin-top: var(--pp4-space-2); }
  .pp4-dash .pp4-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 359px) {
  .pp4-dash .pp4-atv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .pp4-dash .pp4-atv__ico { width: 36px; height: 36px; }
  .pp4-dash .pp4-explore__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Nenhuma célula pode ser medida pelo conteúdo dentro de uma grade. */
.pp4-dash .pp4-atv__grid,
.pp4-dash .pp4-atv__item,
.pp4-dash .pp4-card,
.pp4-dash .pp4-card__head,
.pp4-dash .pp4-explore__grid,
.pp4-dash .pp4-xp { min-width: 0; }

.pp4-dash .pp4-atv__val { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pp4-dash .pp4-card__title { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   12 · CABEÇALHO DO CARD DE NÍVEL A 1024px
   ============================================================

   `.pp4-dash-level__head` é flex e seus filhos ficam com o
   `min-width: auto` que o flexbox dá por padrão — nessa largura o
   ícone (34px) mais o texto (81px) não encolhem e estouram a caixa
   em 8px.

   Defeito anterior ao Bloco A; apareceu agora porque o dashboard
   passou a ser medido com CSS em todas as sete larguras. A regra
   abaixo é a mesma correção de sempre: sem `min-width: 0` num item de
   flex, nem o encolhimento nem o `text-overflow` funcionam. */

.pp4-dash .pp4-dash-level__head { min-width: 0; }
.pp4-dash .pp4-dash-level__head > * { min-width: 0; }

/* A elipse resolvia o estouro truncando "Explorador" — trocar um
   defeito por outro. A causa real é o grid de duas colunas do card:
   entre 768px e 1279px o hero ainda é 2-col, o card fica com 318px e
   o botão "Ver minha carreira" (coluna `auto`) come a largura,
   sobrando 119px para o nome do nível.

   Nessa faixa o card empilha — o mesmo desenho que já valia abaixo de
   768px. A composição de duas colunas da referência continua valendo
   de 1280px para cima, que é onde ela cabe. */
@media (min-width: 768px) and (max-width: 1279px) {
  .pp4-dash .pp4-dash-level,
  html[data-theme] .pp4-dash .pp4-dash-level {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pp4-space-2);
  }
}

/* O selo de variação já era verde. Quando a variação é NEGATIVA ele
   precisa dizer isso — verde para queda seria mentir com cor. */
.pp4-dash .pp-painel-hero__balance .pp4-dash-delta--down,
html[data-theme] .pp4-dash .pp-painel-hero__balance .pp4-dash-delta--down {
  background: rgba(244, 63, 94, 0.22) !important;
  color: #ffb4c2 !important;
}