/**
 * Poupex Play 4.0 — Perfil e Configurações
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-profile
 *
 * Sprint 7 do redesign.
 *
 * Perfil e Configurações vivem no mesmo arquivo (`perfil.php`) — as
 * Configurações são a âncora `#conta-config`. Em vez de separá-las em
 * duas telas (o que exigiria rota nova), foram organizadas em categorias
 * dentro da mesma página.
 *
 * Ganchos de JS preservados: `.profile-copy`, `data-copy`, classe
 * `copied`, e o `onclick="location.reload()"` do botão de atualizar.
 * Campos do formulário de senha intocados.
 */

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

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

.pp4-profile-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.02em;
  color: var(--pp4-color-text);
}

/* ============================================================
   2 · CABEÇALHO DE IDENTIDADE
   ============================================================ */

.pp4-profile .profile-header,
html[data-theme] .pp4-profile .profile-header {
  position: relative;
  overflow: hidden;
  padding: var(--pp4-space-6) !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: var(--pp4-elev-1) !important;
}

/* Camada de bolhas decorativas do tema antigo. */
.pp4-profile .profile-header__bg { display: none !important; }

.pp4-profile .profile-header__main {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-5);
  flex-wrap: wrap;
  position: relative;
}

/* —— Avatar —— */
.pp4-profile .profile-avatar { position: relative; flex-shrink: 0; }

.pp4-profile .profile-avatar__ring,
html[data-theme] .pp4-profile .profile-avatar__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding: 0 !important;
  border: 2px solid var(--pp4-color-border-blue) !important;
  border-radius: var(--pp4-radius-pill);
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-profile .profile-avatar__inner,
html[data-theme] .pp4-profile .profile-avatar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.02em;
}

.pp4-profile .profile-avatar__star,
html[data-theme] .pp4-profile .profile-avatar__star {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--pp4-color-surface) !important;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-success) !important;
  background-image: none !important;
  color: var(--pp4-color-success-ink) !important;
  box-shadow: none !important;
}

.pp4-profile .profile-avatar__star svg { width: 14px; height: 14px; }

/* —— Identificação —— */
.pp4-profile .profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  min-width: 0;
  flex: 1 1 260px;
}

.pp4-profile .profile-info__name {
  margin: 0;
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--pp4-color-text) !important;
}

.pp4-profile .profile-info__id {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
  font-family: var(--pp4-font-mono);
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-profile .profile-copy,
html[data-theme] .pp4-profile .profile-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: var(--pp4-radius-sm);
  background: transparent !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-profile .profile-copy svg { width: 16px; height: 16px; }
.pp4-profile .profile-copy:hover { background: var(--pp4-color-surface-2) !important; color: var(--pp4-color-text) !important; }

/* Estado alternado pelo JS existente. */
.pp4-profile .profile-copy.copied,
html[data-theme] .pp4-profile .profile-copy.copied {
  background: var(--pp4-color-success-soft) !important;
  color: var(--pp4-color-success) !important;
}

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

/* —— Selos —— */
.pp4-profile .profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp4-space-2);
}

.pp4-profile .badge,
html[data-theme] .pp4-profile .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text-secondary) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
}

.pp4-profile .badge svg { width: 14px; height: 14px; }

.pp4-profile .badge--level,
html[data-theme] .pp4-profile .badge--level {
  background: var(--pp4-color-blue-soft) !important;
  border-color: var(--pp4-color-border-blue) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-profile .badge--carreira,
html[data-theme] .pp4-profile .badge--carreira {
  background: var(--pp4-color-success-soft) !important;
  border-color: var(--pp4-color-border-success) !important;
  color: var(--pp4-color-success) !important;
}

/* —— Ações —— */
/* O tema antigo empilhava as duas ações em coluna. */
.pp4-profile .profile-actions,
html[data-theme] .pp4-profile .profile-actions {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: var(--pp4-space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.pp4-profile .profile-action,
html[data-theme] .pp4-profile .profile-action {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-4);
  border: 0 !important;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-profile .profile-action svg { width: 18px; height: 18px; color: inherit !important; }
.pp4-profile .profile-action span { color: inherit !important; }
.pp4-profile .profile-action:hover { background: #0f2ea8 !important; }

.pp4-profile .profile-action--ghost,
html[data-theme] .pp4-profile .profile-action--ghost {
  background: var(--pp4-color-surface-2) !important;
  border: 1px solid var(--pp4-color-border) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-profile .profile-action--ghost:hover { background: var(--pp4-color-surface-3) !important; }

/* ============================================================
   3 · FAIXA DE NÍVEL
   ============================================================ */

.pp4-profile .profile-level-strip,
html[data-theme] .pp4-profile .profile-level-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
  padding: var(--pp4-space-4) var(--pp4-space-5) !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;
}

.pp4-profile .profile-level-strip__left {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
}

.pp4-profile .profile-level-strip__lv,
html[data-theme] .pp4-profile .profile-level-strip__lv {
  padding: 4px 10px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-profile .profile-level-strip__name {
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text) !important;
}

.pp4-profile .profile-level-strip__pct {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-success) !important;
}

.pp4-profile .profile-level-strip__right {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   4 · SALDO E PROGRESSÃO
   ============================================================ */

.pp4-profile .balance-card,
html[data-theme] .pp4-profile .balance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.2fr);
  align-items: center;
  gap: var(--pp4-space-5);
  padding: var(--pp4-space-5) !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;
}

.pp4-profile .balance-divider {
  width: 1px;
  height: 100%;
  min-height: 56px;
  background: var(--pp4-color-border);
}

.pp4-profile .balance-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pp4-profile .balance-col__label {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-profile .balance-col__value {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
  font-size: 1.75rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--pp4-color-text) !important;
}

.pp4-profile .balance-col__value--small { font-size: var(--pp4-text-base); }

.pp4-profile .balance-refresh,
html[data-theme] .pp4-profile .balance-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0 !important;
  border-radius: var(--pp4-radius-sm);
  background: transparent !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  cursor: pointer;
}

.pp4-profile .balance-refresh svg { width: 16px; height: 16px; }
.pp4-profile .balance-refresh:hover { background: var(--pp4-color-surface-2) !important; color: var(--pp4-color-text) !important; }

.pp4-profile .balance-progress-bar,
html[data-theme] .pp4-profile .balance-progress-bar {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  height: 8px !important;
  margin: var(--pp4-space-1) 0 !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  overflow: hidden;
}

.pp4-profile .balance-progress-bar__fill,
html[data-theme] .pp4-profile .balance-progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--pp4-color-success) !important;
  background-image: none !important;
  transition: width var(--pp4-duration-slow) var(--pp4-ease);
}

.pp4-profile .balance-progress-bar__pct {
  font-size: var(--pp4-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   5 · ESTATÍSTICAS
   ============================================================ */

.pp4-profile .stats-card,
html[data-theme] .pp4-profile .stats-card {
  padding: var(--pp4-space-5) !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;
}

.pp4-profile .stats-card__head,
.pp4-profile .account-settings-card__head,
.pp4-profile .perfil-redes-card__head {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  margin-bottom: var(--pp4-space-4);
}

.pp4-profile .stats-card__icon,
html[data-theme] .pp4-profile .stats-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  flex-shrink: 0;
}

.pp4-profile .stats-card__icon svg { width: 20px; height: 20px; }

.pp4-profile .stats-card h3,
.pp4-profile .account-settings-card h3,
.pp4-profile .perfil-redes-card h3 {
  margin: 0;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  color: var(--pp4-color-text) !important;
}

.pp4-profile .account-settings-card__head p,
.pp4-profile .perfil-redes-card__head p {
  margin: 2px 0 0;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

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

/* As 7 estatísticas tinham 7 cores decorativas (--orange, --purple,
   --yellow, --blue, --red, --orange-2, --green). Na 4.0 o card é neutro
   e só o total recebe destaque — a cor passou a significar hierarquia. */
.pp4-profile .stat,
html[data-theme] .pp4-profile .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  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-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-profile .stat__label {
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-profile .stat__value {
  font-size: var(--pp4-text-xl);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--pp4-color-text) !important;
}

.pp4-profile .stat--full { grid-column: 1 / -1; }

.pp4-profile .stat--green,
html[data-theme] .pp4-profile .stat--green {
  background: var(--pp4-color-success-soft) !important;
  border-color: var(--pp4-color-border-success) !important;
}

.pp4-profile .stat--green .stat__value { color: var(--pp4-color-success) !important; }

/* ============================================================
   6 · CONFIGURAÇÕES POR CATEGORIA
   ============================================================ */

.pp4-settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
}

.pp4-settings-group__title {
  margin: 0;
  padding: 0 var(--pp4-space-1);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-profile .account-settings-card,
.pp4-profile .perfil-redes-card,
.pp4-profile .config-card,
html[data-theme] .pp4-profile .config-card {
  padding: var(--pp4-space-5) !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;
}

.pp4-profile .config-card { padding: var(--pp4-space-2) !important; }

/* —— Blocos de conta —— */
.pp4-profile .account-settings-card__block { padding: 0; }

.pp4-profile .account-settings-card__block--sep {
  margin-top: var(--pp4-space-5);
  padding-top: var(--pp4-space-5);
  border-top: 1px solid var(--pp4-color-border);
}

.pp4-profile .account-settings-card__label {
  display: block;
  margin-bottom: var(--pp4-space-2);
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-profile .account-settings-card__email {
  margin: 0;
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text) !important;
}

/* —— Formulário de senha —— */
.pp4-profile .account-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
}

.pp4-profile .account-settings-form__field { display: block; }

.pp4-profile .account-settings-form input,
html[data-theme] .pp4-profile .account-settings-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 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-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  caret-color: var(--pp4-color-blue-bright) !important;
  font-family: inherit;
  font-size: var(--pp4-text-base);
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none;
}

.pp4-profile .account-settings-form input::placeholder {
  color: var(--pp4-color-text-muted) !important;
  opacity: 1;
}

.pp4-profile .account-settings-form input:focus {
  border-color: var(--pp4-color-border-blue) !important;
  box-shadow: 0 0 0 3px var(--pp4-color-blue-soft) !important;
}

.pp4-profile .account-settings-form__btn,
html[data-theme] .pp4-profile .account-settings-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-5) !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  cursor: pointer;
  box-shadow: none !important;
  align-self: flex-start;
}

.pp4-profile .account-settings-form__btn:hover { background: #0f2ea8 !important; }
.pp4-profile .account-settings-form__btn:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* —— Linhas de navegação —— */
.pp4-profile .config-row,
html[data-theme] .pp4-profile .config-row {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 56px;
  padding: 0 var(--pp4-space-3) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-md) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-profile .config-row:hover { background: var(--pp4-color-surface-2) !important; }
.pp4-profile .config-row:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: -2px;
}

/* Ícone neutro — as 4 cores (blue/green/purple/red) eram decorativas. */
.pp4-profile .config-row__icon,
html[data-theme] .pp4-profile .config-row__icon,
.pp4-profile [class*="config-row__icon--"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  flex-shrink: 0;
}

.pp4-profile .config-row__icon svg { width: 18px; height: 18px; color: currentColor !important; }

.pp4-profile .config-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-medium);
  color: var(--pp4-color-text) !important;
}

.pp4-profile .config-row__chev {
  display: inline-flex;
  color: var(--pp4-color-text-muted) !important;
  flex-shrink: 0;
}

.pp4-profile .config-row__chev svg { width: 16px; height: 16px; }

/* Sair: vermelho só no hover — vermelho permanente num item de menu
   é alarme sem causa. */
.pp4-profile .config-row--danger .config-row__label { color: var(--pp4-color-text) !important; }
.pp4-profile .config-row--danger:hover { background: var(--pp4-color-danger-soft) !important; }
.pp4-profile .config-row--danger:hover .config-row__label,
.pp4-profile .config-row--danger:hover .config-row__icon { color: var(--pp4-color-danger) !important; }

/* ============================================================
   7 · REDES OFICIAIS
   ============================================================ */

.pp4-profile .perfil-redes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--pp4-space-3);
}

.pp4-profile .perfil-redes-item,
html[data-theme] .pp4-profile .perfil-redes-item {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 56px;
  padding: 0 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-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: border-color var(--pp4-duration) var(--pp4-ease);
}

.pp4-profile .perfil-redes-item:hover { border-color: var(--pp4-color-border-strong) !important; }

.pp4-profile .perfil-redes-item__icon,
html[data-theme] .pp4-profile .perfil-redes-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--pp4-color-text-muted) !important;
  flex-shrink: 0;
}

.pp4-profile .perfil-redes-item__icon svg { width: 18px; height: 18px; color: currentColor !important; fill: currentColor; }

.pp4-profile .perfil-redes-item__label {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-medium);
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   8 · BOTÃO FLUTUANTE DE SUPORTE
   ============================================================ */

.pp4-profile .floating-help,
html[data-theme] .pp4-profile .floating-help {
  position: fixed;
  right: var(--pp4-space-6);
  bottom: var(--pp4-space-6);
  z-index: var(--pp4-z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--pp4-color-border-strong) !important;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  box-shadow: var(--pp4-elev-3) !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-profile .floating-help svg { width: 22px; height: 22px; color: currentColor !important; }
.pp4-profile .floating-help:hover { background: var(--pp4-color-surface-2) !important; }

/* ============================================================
   9 · NEUTRALIZAÇÃO DO TEMA LEGADO
   ============================================================

   `brand-theme.css:768` usa a cadeia de 4 `:not()` (0,6,0) sobre `.card`,
   e `.profile-header` está entre as exclusões — mas `.balance-card`,
   `.stats-card`, `.account-settings-card`, `.config-card` e
   `.perfil-redes-card` não estão, então precisam do espelho. */

.pp4-profile .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-profile .balance-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-profile .stats-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-profile .account-settings-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-profile .config-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-profile .perfil-redes-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  background-color: var(--pp4-color-surface) !important;
  border-color: var(--pp4-color-border) !important;
}

.pp4-profile .config-card .config-row:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary) {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* `brand-theme.css` aplica `--logo-banner` a `.profile-header` e
   `.profile-level-strip` com !important. */
.pp4-profile .profile-header,
.pp4-profile .profile-level-strip {
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-profile .profile-header { box-shadow: var(--pp4-elev-1) !important; }

/* `.shell--app p` = 0,1,1 e `.shell--app .content h1/h2/h3` = 0,2,1. */
.pp4-profile .profile-header .profile-info__name,
.pp4-profile .stats-card h3,
.pp4-profile .account-settings-card h3,
.pp4-profile .perfil-redes-card h3 {
  color: var(--pp4-color-text) !important;
}

/* `.shell--app .card p` = 0,2,1 vence 0,2,0 — daí os três níveis. */
.pp4-profile .stats-card .stat__label,
.pp4-profile .account-settings-card .account-settings-card__head p,
.pp4-profile .perfil-redes-card .perfil-redes-card__head p,
.pp4-profile .balance-card .balance-col__label,
html[data-theme] .pp4-profile .pp4-settings-group .pp4-settings-group__title {
  color: var(--pp4-color-text-muted) !important;
}

html[data-theme] .pp4-profile .account-settings-card .account-settings-card__email {
  color: var(--pp4-color-text) !important;
}

/* Espelho da regra genérica de links (0,8,1) → 0,9,1. */
.pp4-shell .content .pp4-profile a.config-row:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-profile a.perfil-redes-item:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-profile a.floating-help: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-profile a.profile-action:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
}

.pp4-shell .content .pp4-profile a.profile-action--ghost:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-profile a.badge: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-profile a.badge--carreira:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-success) !important;
}

/* ============================================================
   10 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-profile .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-profile { gap: var(--pp4-space-4); }
  .pp4-profile-title { font-size: 1.5rem; }

  .pp4-profile .profile-header { padding: var(--pp4-space-5) !important; }
  .pp4-profile .profile-header__main { gap: var(--pp4-space-4); }
  .pp4-profile .profile-actions { margin-left: 0; width: 100%; }
  .pp4-profile .profile-action { flex: 1 1 0; justify-content: center; }

  /* Precisa do mesmo prefixo da regra base (0,3,1); sem ele a regra
     de desktop vence mesmo dentro do media query. */
  .pp4-profile .balance-card,
  html[data-theme] .pp4-profile .balance-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--pp4-space-4);
  }
  .pp4-profile .balance-divider { width: 100%; height: 1px; min-height: 0; }
  .pp4-profile .balance-col__value { font-size: 1.5rem; }

  .pp4-profile .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp4-profile .stats-card,
  .pp4-profile .account-settings-card,
  .pp4-profile .perfil-redes-card { padding: var(--pp4-space-4) !important; }

  .pp4-profile .perfil-redes-grid { grid-template-columns: minmax(0, 1fr); }

  .pp4-profile .floating-help {
    right: var(--pp4-space-4);
    bottom: calc(var(--pp4-space-4) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 479px) {
  .pp4-profile .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .pp4-profile .profile-info__name { font-size: var(--pp4-text-lg); }
}

/* ============================================================
   11 · MOVIMENTO REDUZIDO
   ============================================================ */

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

/* ============================================================
   N · ESTOURO A 320px NO CABEÇALHO DO PERFIL
   ============================================================

   `.profile-actions` é filho de flex com `min-width: auto` — a 320px
   os botões somam 234px numa faixa de 222px. Passa a poder encolher e
   quebrar linha. */

.pp4-profile .profile-header__main,
.pp4-profile .profile-actions {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pp4-profile .profile-actions { flex-wrap: wrap; }