/**
 * Poupex Play 4.0 — Rede e Carreira
 * Namespace: .pp4-* / --pp4-*
 * Escopos: .pp4-network (comum) · .pp4-net-team · .pp4-net-career
 *
 * Sprint 9 do redesign visual.
 *
 * ------------------------------------------------------------------
 * O QUE ESTE ARQUIVO **NÃO** DEFINE, DE PROPÓSITO
 * ------------------------------------------------------------------
 * A instrução do Sprint foi "não criar novos componentes quando um
 * existente puder atender". Estes vieram prontos de outros arquivos e
 * são usados na marcação de team.php / carreira.php sem cópia local:
 *
 *   tabs.css      .task-tabs / .task-tab        abas Equipe|Convidar
 *   activity.css  .pp4-act-stats / .pp4-act-stat   métricas por nível
 *   activity.css  .pp4-act-progress + __bar/__fill barras de meta
 *   activity.css  .pp4-act-empty                nível sem membros
 *   activity.css  .pp4-act-alert                aviso "como funciona"
 *   activity.css  .pp4-act-grid                 grade dos 3 critérios
 *   profile.css   .pp4-settings-group           não usado: as seções de
 *                 carreira não são configuráveis, só informativas.
 *
 * O que sobra aqui é o que de fato não existia: acordeão de níveis,
 * escada de graduações, linha de copiar convite e a rampa de cor N1→N5.
 *
 * ------------------------------------------------------------------
 * RAMPA DE NÍVEIS
 * ------------------------------------------------------------------
 * O tema antigo pintava N1 e N2 em dourado (`--logo-gold*`), fora da
 * identidade oficial. A rampa passa a ir do Azul Royal ao Verde Neon,
 * que são as duas cores da marca — a profundidade da rede fica legível
 * sem introduzir uma terceira família de cor.
 *
 * ------------------------------------------------------------------
 * ESPECIFICIDADE
 * ------------------------------------------------------------------
 * Regras herdadas que precisam de espelho, todas em brand-theme.css:
 *   :67  `.team-summary`                banner + sombra   0,1,0 !important
 *   :103 `.carreira-hero`               gradiente         0,1,0 !important
 *   :172 `.invite-copy`                 CTA dourado       0,1,0 !important
 *   :179+ `.team-tier--n1` … `--n5`     gradientes ouro   0,1,0 !important
 *   :212 `.team-levels-strip__item--N`  borda dourada     0,1,0 !important
 *   :430 `.invite-tier__lv`             texto dourado     0,1,0 !important
 *   :768 `.card:not()×4` sob .shell--app                  0,6,0 !important
 * Um nível de escopo (`.pp4-network`) já vence as de 0,1,0. A de 0,6,0
 * exige a mesma cadeia `:not()` — repetida abaixo onde há `.card`.
 */

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

.pp4-network {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-6);
  width: 100%;
  min-width: 0;
}

/* `.shell--app .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary)`
   = 0,6,0 !important. Aqui a cadeia é idêntica mais `.pp4-network`: 0,7,0. */
.pp4-network .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
html[data-theme] .pp4-network .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  padding: var(--pp4-space-6) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* `.shell--app p` = 0,1,1; `.shell--app .card p` = 0,2,1. Aqui 0,3,1. */
.pp4-network .card p,
.pp4-network .card li,
.pp4-network p {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-md);
  line-height: var(--pp4-leading-normal);
}

.pp4-network .card strong,
.pp4-network strong { color: var(--pp4-color-text); }

.pp4-network [hidden] { display: none !important; }

/* ============================================================
   2 · HERÓI DA EQUIPE
   ============================================================

   `.team-summary` está na lista de exceções da regra 0,6,0, então
   nunca recebeu o fundo preto — mas recebe o banner de `:67`. */

.pp4-net-hero,
.pp4-network .team-summary,
.pp4-network .team-summary--v2,
html[data-theme] .pp4-network .team-summary--v2 {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  padding: var(--pp4-space-6) !important;
  margin: 0 !important;
  border: 1px solid rgba(91, 140, 255, 0.28) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%) !important;
  background-image: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* app.css:2761/2773 usam ::before e ::after decorativos no herói antigo. */
.pp4-network .team-summary::before,
.pp4-network .team-summary::after { display: none !important; content: none !important; }

.pp4-network .team-summary__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
}

.pp4-network .team-summary__title,
html[data-theme] .pp4-network .team-summary__title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-2xl);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
}

.pp4-network .team-summary__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--pp4-space-3);
  border-radius: var(--pp4-radius-pill);
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
}

/* --- Métricas do herói ------------------------------------------------
   Não usam `.pp4-act-stat`: aquele componente tem fundo `surface` e aqui
   as células ficam sobre o banner azul. Vidro translúcido em vez disso. */

.pp4-network .team-summary__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-3);
}

.pp4-network .team-summary__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--pp4-space-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--pp4-radius-md);
  background: rgba(255, 255, 255, 0.08);
}

.pp4-network .team-summary__metric strong {
  color: #ffffff !important;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pp4-network .team-summary__metric span,
.pp4-network .team-summary__metric > span {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: var(--pp4-text-sm);
}

/* --- Faixa de níveis N1…N5 ------------------------------------------- */

.pp4-network .team-levels-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pp4-space-2);
}

.pp4-network .team-levels-strip__item,
html[data-theme] .pp4-network .team-levels-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--pp4-space-3) var(--pp4-space-1);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-bottom-width: 3px !important;
  border-radius: var(--pp4-radius-sm);
  background: rgba(255, 255, 255, 0.06) !important;
  /* O item está na lista de exceções do seletor genérico de links do
     shell, então nada definia sua cor e ele herdava o dourado de
     brand-theme.css:644. Os filhos cobriam o texto, mas `outline-color`
     e `caret-color` derivam de `color` — o anel de foco saía dourado. */
  color: #ffffff !important;
  text-decoration: none;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .team-levels-strip__item:hover { background: rgba(255, 255, 255, 0.14) !important; }

.pp4-network .team-levels-strip__item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.pp4-network .team-levels-strip__n {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .team-levels-strip__c {
  color: #ffffff !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  line-height: 1.1;
}

/* Rampa Azul Royal → Verde Neon. Substitui `--logo-gold*` de :212. */
.pp4-network .team-levels-strip__item--1 { border-bottom-color: #123bf9 !important; }
.pp4-network .team-levels-strip__item--2 { border-bottom-color: #3a63fb !important; }
.pp4-network .team-levels-strip__item--3 { border-bottom-color: #5b8cff !important; }
.pp4-network .team-levels-strip__item--4 { border-bottom-color: #35c98d !important; }
.pp4-network .team-levels-strip__item--5 { border-bottom-color: #00e676 !important; }

/* --- Atalhos do rodapé do herói -------------------------------------- */

.pp4-network .team-summary__fin-link,
html[data-theme] .pp4-network .team-summary__fin-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp4-space-2);
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: var(--pp4-text-sm);
}

.pp4-shell .content .pp4-network .team-summary__fin-link a:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
  font-weight: var(--pp4-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   3 · INTRODUÇÃO E ABAS
   ============================================================ */

.pp4-network .team-intro,
html[data-theme] .pp4-network .team-intro {
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-md);
}

.pp4-network .team-tabs { margin: 0 !important; }

/* ============================================================
   4 · ACORDEÃO DE NÍVEIS
   ============================================================

   A marcação do acordeão é controlada por JavaScript
   (`.team-tier-card__toggle--v2`, `aria-expanded`, `.team-tier-card--open`
   e `panel.hidden`). Nada aqui renomeia ou remove essas âncoras. */

.pp4-network .team-list,
.pp4-network .team-list--v2 {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .team-tier-card,
.pp4-network .team-tier-card--v2,
html[data-theme] .pp4-network .team-tier-card--v2 {
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .team-tier-card--v2:not(.team-tier-card--empty):hover,
.pp4-network .team-tier-card--v2.team-tier-card--open {
  border-color: var(--pp4-color-blue-bright) !important;
}

.pp4-network .team-tier-card--empty { opacity: 0.72; }

/* --- Cabeçalho clicável ---------------------------------------------- */

.pp4-network .team-tier-card__toggle,
.pp4-network .team-tier-card__toggle--v2,
html[data-theme] .pp4-network .team-tier-card__toggle--v2 {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  width: 100%;
  padding: var(--pp4-space-4) var(--pp4-space-5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .team-tier-card__toggle--v2:not([disabled]):hover {
  background: var(--pp4-color-surface-2) !important;
}

.pp4-network .team-tier-card__toggle--v2[disabled] { cursor: default; }

.pp4-network .team-tier-card__toggle--v2:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: -2px;
}

/* Selo do nível — rampa azul→verde, no lugar dos gradientes dourados. */
.pp4-network .team-tier-badge,
html[data-theme] .pp4-network .team-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 72px;
  padding: 6px var(--pp4-space-3);
  border-radius: var(--pp4-radius-pill);
  color: #ffffff !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none !important;
}

.pp4-network .team-tier--n1 { background: #123bf9 !important; }
.pp4-network .team-tier--n2 { background: #2f57fa !important; }
.pp4-network .team-tier--n3 { background: #5b8cff !important; }
.pp4-network .team-tier--n4 { background: #1f9e6d !important; color: #ffffff !important; }
.pp4-network .team-tier--n5 { background: #00e676 !important; color: var(--pp4-color-success-ink) !important; }

.pp4-network .team-tier-card__mid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.pp4-network .team-tier-card__label {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .team-tier-card__stats-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pp4-space-2);
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
}

.pp4-network .team-tier-card__stats-inline strong { color: var(--pp4-color-text) !important; }
.pp4-network .team-tier-card__dot { color: var(--pp4-color-border-strong) !important; }

.pp4-network .team-tier-card__end {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex: 0 0 auto;
}

.pp4-network .team-tier-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3) !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .team-tier-card__empty-tag {
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-medium);
}

.pp4-network .team-tier-card__chevron,
html[data-theme] .pp4-network .team-tier-card__chevron {
  width: 20px;
  height: 20px;
  color: var(--pp4-color-text-muted) !important;
  transition: transform var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .team-tier-card--open .team-tier-card__chevron,
html[data-theme] .pp4-network .team-tier-card--v2.team-tier-card--open .team-tier-card__chevron {
  transform: rotate(180deg);
  color: var(--pp4-color-blue-bright) !important;
}

/* --- Métricas do nível — reaproveita .pp4-act-stat -------------------- */

.pp4-network .team-tier-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-3);
  padding: 0 var(--pp4-space-5) var(--pp4-space-5);
}

/* `.pp4-act-stat` já entrega caixa, borda, raio e a coluna flex. Falta só
   desfazer o `text-align: center` de app.css:3342 — em Tarefas o mesmo
   componente alinha à esquerda, e duas telas com o indicador em
   alinhamentos diferentes é exatamente o que a consolidação evita. */
.pp4-network .team-tier-metric { min-width: 0; text-align: left; }

.pp4-network .team-tier-metric__label {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp4-network .team-tier-metric__value {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  overflow-wrap: anywhere;
}

/* brand-theme.css:218 pinta `--gold` de verde-claro; alinhado ao token. */
.pp4-network .team-tier-metric__value--gold,
html[data-theme] .pp4-network .team-tier-metric__value--gold {
  color: var(--pp4-color-success) !important;
}

/* --- Membros --------------------------------------------------------- */

.pp4-network .team-tier-members,
.pp4-network .team-tier-members--v2 {
  padding: var(--pp4-space-4) var(--pp4-space-5) var(--pp4-space-5) !important;
  border-top: 1px solid var(--pp4-color-border) !important;
  background: var(--pp4-color-bg-elevated) !important;
  margin: 0 !important;
}

.pp4-network .team-tier-members__list {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .team-tier-member { margin: 0 !important; }

.pp4-network .team-tier-member__link,
html[data-theme] .pp4-network .team-tier-member__link {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-3) var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: border-color var(--pp4-duration) var(--pp4-ease), background var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .team-tier-member__link:hover,
html[data-theme] .pp4-network .team-tier-member__link:hover {
  border-color: var(--pp4-color-blue-bright) !important;
  background: var(--pp4-color-surface-2) !important;
  box-shadow: none !important;
}

.pp4-network .team-tier-member__link:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-network .team-tier-member__avatar,
html[data-theme] .pp4-network .team-tier-member__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  box-shadow: none !important;
}

.pp4-network .team-tier-member__avatar--n1 { background: #123bf9 !important; }
.pp4-network .team-tier-member__avatar--n2 { background: #2f57fa !important; }
.pp4-network .team-tier-member__avatar--n3 { background: #5b8cff !important; }
.pp4-network .team-tier-member__avatar--n4 { background: #1f9e6d !important; }
.pp4-network .team-tier-member__avatar--n5 { background: #00e676 !important; color: var(--pp4-color-success-ink) !important; }

.pp4-network .team-tier-member__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.pp4-network .team-tier-member__name {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-network .team-tier-member__meta {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
}

/* --- Selo de situação ------------------------------------------------
   `_team_status_badge.php` é outro parcial compartilhado: aparece aqui e
   no detalhe de membro dentro da Carteira. Escopado em `.pp4-shell` (e
   não em `.pp4-network`) para as duas telas mostrarem o mesmo selo.

   "Não ativo" era vermelho (`app.css:3997`). Vermelho comunica erro, e
   um indicado que ainda não depositou não é um erro — é ausência de
   atividade. Passa a neutro; só "Ativo" recebe cor. */
.pp4-shell .team-status-badge,
html[data-theme] .pp4-shell .team-status-badge {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px var(--pp4-space-2) !important;
  border-radius: var(--pp4-radius-pill) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pp4-shell .team-status-badge--ativo,
html[data-theme] .pp4-shell .team-status-badge--ativo {
  border: 1px solid rgba(0, 230, 118, 0.4) !important;
  background: rgba(0, 230, 118, 0.14) !important;
  color: var(--pp4-color-success) !important;
}

.pp4-shell .team-status-badge--inativo,
html[data-theme] .pp4-shell .team-status-badge--inativo {
  border: 1px solid var(--pp4-color-border-strong) !important;
  background: var(--pp4-color-surface-3) !important;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-network .team-tier-member__chev {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--pp4-color-text-subtle) !important;
}

/* ============================================================
   5 · CONVITE
   ============================================================ */

.pp4-network .invite-card,
.pp4-network .invite-card--v2 {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
}

.pp4-network .invite-card__title,
html[data-theme] .pp4-network .invite-card__title {
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .invite-card__subtitle { margin: 0 !important; }

.pp4-network .invite-row {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-3) var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-bg-elevated) !important;
  margin: 0 !important;
}

.pp4-network .invite-row__label {
  flex: 0 0 auto;
  min-width: 48px;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp4-network .invite-row__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--pp4-color-text) !important;
  font-family: var(--pp4-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--pp4-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-network .invite-row__value--link { direction: ltr; }

/* brand-theme.css:172 dá gradiente dourado ao `.invite-copy` (0,1,0). */
.pp4-network .invite-copy,
html[data-theme] .pp4-network .invite-copy {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--pp4-space-4) !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-sm) !important;
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-network .invite-copy:hover { background: var(--pp4-color-blue-bright) !important; }

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

/* Estado pós-clique: o JS adiciona `.copied` e troca o texto. */
.pp4-network .invite-copy.copied,
html[data-theme] .pp4-network .invite-copy.copied {
  background: var(--pp4-color-success) !important;
  color: var(--pp4-color-success-ink) !important;
}

.pp4-network .invite-tiers,
.pp4-network .invite-tiers--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pp4-space-2);
  padding: 0 !important;
  margin: 0 !important;
}

.pp4-network .invite-tier {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-width: 0;
  padding: var(--pp4-space-3);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-sm);
  background: var(--pp4-color-bg-elevated);
}

/* brand-theme.css:430 pinta o rótulo de dourado (0,1,0). */
.pp4-network .invite-tier__lv,
html[data-theme] .pp4-network .invite-tier__lv {
  flex: 0 0 auto;
  color: var(--pp4-color-blue-bright) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .invite-tier__txt {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   6 · CARREIRA — HERÓI
   ============================================================ */

/* `.carreira-hero` também é `.card`, então a regra de 0,7,0 da seção 1
   deste arquivo pintava o herói de `surface` e apagava o gradiente. A
   cadeia `:not()` é repetida aqui para empatar em 0,7,0 e vencer por
   ordem — sem ela o herói renderiza chapado. */
.pp4-network .carreira-hero.card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
html[data-theme] .pp4-network .carreira-hero.card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-network .carreira-hero {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-5);
  padding: var(--pp4-space-6) !important;
  border: 1px solid rgba(91, 140, 255, 0.28) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%) !important;
  background-image: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%) !important;
  box-shadow: none !important;
}

.pp4-network .carreira-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 2rem;
  line-height: 1;
}

.pp4-network .carreira-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  align-items: flex-start;
  min-width: 0;
}

.pp4-network .carreira-hero__kicker,
html[data-theme] .pp4-network .carreira-hero__kicker {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pp4-network .carreira-hero__title,
html[data-theme] .pp4-network .carreira-hero__title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-2xl);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
}

.pp4-network .carreira-hero__desc,
html[data-theme] .pp4-network .carreira-hero__desc {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--pp4-text-md);
}

.pp4-network .carreira-hero__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--pp4-space-3);
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-success) !important;
  color: var(--pp4-color-success-ink) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-bold);
}

/* ============================================================
   7 · CARREIRA — COMO FUNCIONA
   ============================================================ */

.pp4-network .carreira-help {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
}

.pp4-network .carreira-help__title,
html[data-theme] .pp4-network .carreira-help__title {
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .carreira-help__intro { margin: 0 !important; }

.pp4-network .carreira-help__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-3);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .carreira-help__item {
  display: flex;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-bg-elevated);
}

.pp4-network .carreira-help__icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Só o `<strong>` que é filho direto do bloco é o título do critério.
   Sem o `>`, os `<strong>` dentro do `<p>` ("você", "1 depósito novo")
   também viravam bloco e picotavam o parágrafo em cinco linhas. */
.pp4-network .carreira-help__item > div > strong {
  display: block;
  margin-bottom: 2px;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .carreira-help__item p strong {
  display: inline;
  color: var(--pp4-color-text) !important;
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .carreira-help__item p,
html[data-theme] .pp4-network .carreira-help__item p {
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
}

/* ============================================================
   8 · CARREIRA — PROGRESSO
   ============================================================

   A barra grande e as barras de meta usam `.pp4-act-progress__bar` /
   `__fill` de activity.css. Aqui só o arranjo em volta. */

.pp4-network .carreira-progress-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
}

.pp4-network .carreira-progress-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
}

.pp4-network .carreira-progress-card__head h3,
html[data-theme] .pp4-network .carreira-progress-card__head h3 {
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .carreira-progress-card__pct {
  color: var(--pp4-color-success) !important;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* app.css:11595 dá `margin-bottom: 14px` à barra; o espaçamento agora vem
   do `gap` do cartão, senão sobra folga dupla antes da lista de metas. */
.pp4-network .carreira-progress-card__bar { margin: 0 !important; }

.pp4-network .carreira-metas {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .carreira-meta {
  display: flex;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-bg-elevated) !important;
  margin: 0 !important;
}

.pp4-network .carreira-meta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--pp4-color-border-strong);
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .carreira-meta--ok { border-color: rgba(0, 230, 118, 0.35) !important; }

.pp4-network .carreira-meta--ok .carreira-meta__icon {
  border-color: transparent;
  background: var(--pp4-color-success);
  color: var(--pp4-color-success-ink) !important;
}

.pp4-network .carreira-meta__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.pp4-network .carreira-meta__body strong {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .carreira-meta__val {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  font-variant-numeric: tabular-nums;
}

.pp4-network .carreira-meta--ok .carreira-meta__val { color: var(--pp4-color-success) !important; }

/* A barra interna da meta é `<div class="carreira-meta__bar"><span></span></div>`,
   marcação que o PHP já produzia — mantida, com a aparência de progresso. */
.pp4-network .carreira-meta__bar {
  height: 6px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3) !important;
  overflow: hidden;
}

.pp4-network .carreira-meta__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pp4-color-blue-bright) !important;
  transition: width var(--pp4-duration-slow, 320ms) var(--pp4-ease);
}

.pp4-network .carreira-meta--ok .carreira-meta__bar span { background: var(--pp4-color-success) !important; }

.pp4-network .carreira-progress-card__reward,
html[data-theme] .pp4-network .carreira-progress-card__reward {
  margin: 0 !important;
  padding: var(--pp4-space-3) var(--pp4-space-4);
  border-left: 3px solid var(--pp4-color-success);
  border-radius: var(--pp4-radius-sm);
  background: rgba(0, 230, 118, 0.08);
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-sm);
}

.pp4-network .carreira-max,
html[data-theme] .pp4-network .carreira-max {
  margin: 0 !important;
  color: var(--pp4-color-success) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-semibold);
  text-align: center;
}

/* ============================================================
   9 · CARREIRA — ESCADA DE GRADUAÇÕES
   ============================================================ */

.pp4-network .carreira-graduacoes {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
}

.pp4-network .carreira-graduacoes__title,
html[data-theme] .pp4-network .carreira-graduacoes__title {
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .carreira-graduacoes__sub { margin: 0 !important; }

/* 200px permite as cinco colunas caberem em 1144px (5×200 + 4×12 = 1048).
   Com 240px o auto-fit parava em quatro e a quinta graduação caía sozinha
   numa segunda linha, quebrando a leitura da escada 1→5. */
.pp4-network .carreira-graduacoes__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pp4-space-3);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .carreira-graduacoes__item {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-bg-elevated) !important;
  margin: 0 !important;
}

.pp4-network .carreira-graduacoes__item--done { border-color: rgba(0, 230, 118, 0.3) !important; }

.pp4-network .carreira-graduacoes__item--current {
  border-color: var(--pp4-color-blue-bright) !important;
  background: var(--pp4-color-surface-2) !important;
}

.pp4-network .carreira-graduacoes__head {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-width: 0;
}

.pp4-network .carreira-graduacoes__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pp4-color-surface-3);
  font-size: 1.25rem;
  line-height: 1;
}

.pp4-network .carreira-graduacoes__head strong {
  display: block;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
}

.pp4-network .carreira-ladder__tag,
html[data-theme] .pp4-network .carreira-ladder__tag {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px var(--pp4-space-2);
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue) !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .carreira-ladder__tag--done,
html[data-theme] .pp4-network .carreira-ladder__tag--done {
  background: rgba(0, 230, 118, 0.16) !important;
  color: var(--pp4-color-success) !important;
}

.pp4-network .carreira-graduacoes__metas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-network .carreira-graduacoes__metas li,
html[data-theme] .pp4-network .carreira-graduacoes__metas li {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  margin: 0 !important;
}

.pp4-network .carreira-graduacoes__metas li span {
  color: var(--pp4-color-text) !important;
  font-weight: var(--pp4-weight-semibold);
}

.pp4-network .carreira-graduacoes__premio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp4-space-2);
}

.pp4-network .carreira-graduacoes__badge,
html[data-theme] .pp4-network .carreira-graduacoes__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--pp4-space-3);
  border-radius: var(--pp4-radius-pill);
  background: rgba(18, 59, 249, 0.18) !important;
  color: var(--pp4-color-blue-bright) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
}

/* O sufixo `--gold` é herdado da marcação; a cor passa a ser Verde Neon. */
.pp4-network .carreira-graduacoes__badge--gold,
html[data-theme] .pp4-network .carreira-graduacoes__badge--gold {
  background: rgba(0, 230, 118, 0.16) !important;
  color: var(--pp4-color-success) !important;
}

.pp4-network .carreira-graduacoes__desc,
html[data-theme] .pp4-network .carreira-graduacoes__desc {
  margin: 0 !important;
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-sm);
}

/* ============================================================
   10 · COR DOS LINKS — espelhos das regras genéricas
   ============================================================

   Dois seletores herdados pintam de dourado todo `<a>` da área de
   conteúdo, e ambos são altos demais para um escopo simples vencer:

     brand-theme.css:644  `.shell--app a:not()×6`          0,7,1 !important
     brand-theme.css:808  `.shell--app .content a:not()×6` 0,8,1 !important

   `.pp4-network .team-levels-strip__item { color: … }` fica em 0,2,0 e
   perde. Os filhos (`__n`, `__c`) cobriam o texto, então nada aparecia
   errado na tela — mas `outline-color` e `caret-color` herdam de `color`,
   e o anel de foco saía dourado. Repetir a cadeia leva a 0,10,1. */

.pp4-shell .content .pp4-network a.team-levels-strip__item:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
}

.pp4-shell .content .pp4-network a.team-tier-member__link:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   11 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-network .carreira-help__grid { grid-template-columns: minmax(0, 1fr); }
  .pp4-network .team-tier-card__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-network { gap: var(--pp4-space-4); }

  .pp4-network .team-summary,
  .pp4-network .team-summary--v2 { padding: var(--pp4-space-5) !important; }

  .pp4-network .team-summary__title,
  .pp4-network .carreira-hero__title { font-size: var(--pp4-text-xl); }

  .pp4-network .team-summary__metrics { grid-template-columns: minmax(0, 1fr); }
  .pp4-network .team-summary__metric { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--pp4-space-3); }
  .pp4-network .team-summary__metric strong { font-size: var(--pp4-text-lg); }

  /* Os três blocos de métrica do nível empilham: a 390px cada um teria
     ~100px e "R$ 1.137,66" não cabe em uma linha. */
  .pp4-network .team-tier-card__metrics {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 var(--pp4-space-4) var(--pp4-space-4);
  }
  .pp4-network .team-tier-metric { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--pp4-space-3); }

  .pp4-network .team-tier-card__toggle,
  .pp4-network .team-tier-card__toggle--v2 { padding: var(--pp4-space-4) !important; gap: var(--pp4-space-3); }

  .pp4-network .team-tier-badge { min-width: 0; align-self: flex-start; margin-top: 2px; }

  /* Em 390px "28 membros · R$ 27,40 gerados" não cabe numa linha e o
     separador ficava pendurado no fim da primeira. Empilha e some. */
  .pp4-network .team-tier-card__stats-inline { flex-direction: column; gap: 0; }
  .pp4-network .team-tier-card__dot { display: none; }

  .pp4-network .team-tier-members,
  .pp4-network .team-tier-members--v2 { padding: var(--pp4-space-3) var(--pp4-space-4) var(--pp4-space-4) !important; }

  /* A linha do convite vira duas: o link ocupa a largura toda. */
  .pp4-network .invite-row { flex-wrap: wrap; }
  .pp4-network .invite-row__value { flex: 1 1 100%; order: 3; }

  /* Media query NÃO aumenta especificidade: a regra base do herói está em
     0,7,0 (cadeia `:not()×4`), então sem repetir a cadeia aqui o
     `align-items: center` dela continuava valendo e o emblema ficava
     centrado sobre um texto alinhado à esquerda. */
  .pp4-network .carreira-hero.card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
  html[data-theme] .pp4-network .carreira-hero.card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
  .pp4-network .carreira-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pp4-space-4);
    padding: var(--pp4-space-5) !important;
  }

  .pp4-network .carreira-graduacoes__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .pp4-network .team-levels-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .pp4-network .team-levels-strip__item { padding: var(--pp4-space-2) 2px; }
  .pp4-network .team-levels-strip__c { font-size: var(--pp4-text-md); }
  .pp4-network .team-tier-card__stats-inline { font-size: var(--pp4-text-xs); }
  .pp4-network .carreira-hero__badge { width: 56px; height: 56px; font-size: 1.5rem; }
}

/* ============================================================
   12 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-network .team-tier-card__chevron,
  .pp4-network .carreira-meta__bar span,
  .pp4-network .team-tier-member__link,
  .pp4-network .invite-copy { transition: none !important; }
}

/* ============================================================
   N · ESTOURO A 320px NO CARD DE NÍVEL DA EQUIPE
   ============================================================

   `.team-tier-card__label` fica com o `min-width: auto` que o flexbox
   dá por padrão: a 320px o rótulo tem 71px de conteúdo numa caixa de
   68px e não encolhe. `overflow-wrap: anywhere` só quebra quando não
   há alternativa, então não afeta as larguras maiores. */

.pp4-network .team-tier-card__mid,
.pp4-network .team-tier-card__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* O rótulo "Comissões" é um <span> sem classe dentro de
   `.team-summary__metric`, que é flex: herda `min-width: auto` e a
   320px fica 2px maior que a caixa. */
.pp4-network .team-summary__metric,
.pp4-network .team-summary__metric > * {
  min-width: 0;
  overflow-wrap: anywhere;
}