/* ============================================================================
 * 1MZ For Artists — Design System
 * 03-components.css — Componentes reutilizáveis
 *
 * SECÇÕES:
 *   §1  Button       .rmbz-btn
 *   §2  Input        .rmbz-input, .rmbz-input-group, .rmbz-textarea, .rmbz-select
 *   §3  Card         .rmbz-card
 *   §4  Stat         .rmbz-stat (saldos, KPIs)
 *   §5  Badge        .rmbz-badge (.--vip, .--success, etc)
 *   §6  Pill toggle  .rmbz-pill-group (Carteira ↔ Royalties, etc)
 *   §7  Modal        .rmbz-modal
 *   §8  Toast        .rmbz-toast
 *   §9  Empty state  .rmbz-empty
 *   §10 Skeleton     .rmbz-skeleton
 *   §11 Divider, etc
 * ============================================================================ */


/* ============================================================================
 * §1  BUTTON
 *
 * Variantes:
 *   .rmbz-btn--primary  (dourado, CTA principal)
 *   .rmbz-btn--ghost    (transparente, secundário)
 *   .rmbz-btn--outline  (borda, terciário)
 *   .rmbz-btn--danger   (vermelho)
 *   .rmbz-btn--success  (verde)
 *   .rmbz-btn--icon     (quadrado, só ícone)
 *
 * Tamanhos:
 *   .rmbz-btn--sm   .rmbz-btn--md (default)   .rmbz-btn--lg
 *
 * Modificadores:
 *   .rmbz-btn--full     (largura 100%)
 *   .rmbz-btn--loading  (mostra spinner, desactiva)
 * ============================================================================ */

.rmbz-btn {
  /* Reset */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--rmbz-font-body);
  font-weight: var(--rmbz-weight-semibold);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rmbz-space-2);
  padding: var(--rmbz-space-3) var(--rmbz-space-5);
  font-size: var(--rmbz-text-sm);
  line-height: 1;
  border-radius: var(--rmbz-radius-sm);
  min-height: 40px;

  /* Transição */
  transition: background-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              color           var(--rmbz-duration-fast) var(--rmbz-ease-out),
              border-color    var(--rmbz-duration-fast) var(--rmbz-ease-out),
              transform       var(--rmbz-duration-fast) var(--rmbz-ease-out),
              box-shadow      var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Ícone do botão — garante alinhamento vertical perfeito quer seja
 * SVG, emoji ou texto. SVGs herdam currentColor por defeito. */
.rmbz-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.rmbz-btn__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.rmbz-btn:disabled,
.rmbz-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tamanhos */
.rmbz-btn--sm { padding: var(--rmbz-space-2) var(--rmbz-space-3); font-size: var(--rmbz-text-xs); min-height: 32px; }
.rmbz-btn--lg { padding: var(--rmbz-space-4) var(--rmbz-space-6); font-size: var(--rmbz-text-base); min-height: 48px; }

/* Modificadores */
.rmbz-btn--full { width: 100%; }

/* Variante PRIMARY — dourado, CTA principal */
.rmbz-btn--primary {
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  box-shadow: var(--rmbz-shadow-brand-sm);
}
.rmbz-btn--primary:hover:not(:disabled) {
  background: var(--rmbz-brand-strong);
  box-shadow: var(--rmbz-shadow-brand-md);
}

/* Variante ACCENT — azul moderno, CTA secundária premium.
 * Pareada com primary para criar contraste sem competir pela mesma cor.
 * Usar quando precisas de duas CTAs lado-a-lado e quer hierarquia clara
 * (ex: Depositar [primary] + Levantar [accent]). */
.rmbz-btn--accent {
  background: var(--rmbz-accent);
  color: #ffffff;
  box-shadow: var(--rmbz-shadow-accent-sm);
}
.rmbz-btn--accent:hover:not(:disabled) {
  background: var(--rmbz-accent-strong);
  box-shadow: var(--rmbz-shadow-accent-md);
}

/* Variante GHOST — transparente */
.rmbz-btn--ghost {
  background: transparent;
  color: var(--rmbz-text-primary);
}
.rmbz-btn--ghost:hover:not(:disabled) {
  background: var(--rmbz-bg-hover);
}

/* Variante OUTLINE — borda visível, com toque subtil da marca por defeito.
 * O ícone tinge-se de dourado para dar carácter sem o ruído de uma borda
 * dourada permanente. Hover faz a borda inteira ganhar a marca. */
.rmbz-btn--outline {
  background: transparent;
  color: var(--rmbz-text-primary);
  border-color: var(--rmbz-border-strong);
}
.rmbz-btn--outline .rmbz-btn__icon {
  color: var(--rmbz-brand);
}
.rmbz-btn--outline:hover:not(:disabled) {
  border-color: var(--rmbz-brand);
  background: var(--rmbz-brand-soft);
  color: var(--rmbz-text-primary);
}

/* Variante LOCKED — botão visível mas inutilizável (bloqueado pelo admin).
 * Mostra estado "está aqui, mas não podes" sem a aparência genérica de
 * disabled cinza do browser. Cursor not-allowed + hint subtil de cadeado. */
.rmbz-btn--locked {
  background: transparent;
  color: var(--rmbz-text-muted);
  border-color: var(--rmbz-border-subtle);
  cursor: not-allowed;
  position: relative;
}
.rmbz-btn--locked .rmbz-btn__icon {
  color: var(--rmbz-text-muted);
}
.rmbz-btn--locked:hover {
  background: var(--rmbz-bg-input);
  transform: none;
}

/* Variante DANGER */
.rmbz-btn--danger {
  background: var(--rmbz-danger);
  color: #ffffff;
}
.rmbz-btn--danger:hover:not(:disabled) {
  background: var(--rmbz-danger-strong);
}

/* Variante SUCCESS */
.rmbz-btn--success {
  background: var(--rmbz-success);
  color: #ffffff;
}
.rmbz-btn--success:hover:not(:disabled) {
  background: var(--rmbz-success-strong);
}

/* Variante ICON — botão quadrado para fechar, etc */
.rmbz-btn--icon {
  padding: 0;
  min-height: 40px;
  width: 40px;
  background: transparent;
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-xl);
}
.rmbz-btn--icon:hover:not(:disabled) {
  background: var(--rmbz-bg-hover);
  color: var(--rmbz-text-primary);
}
.rmbz-btn--icon.rmbz-btn--sm { width: 32px; min-height: 32px; }
.rmbz-btn--icon.rmbz-btn--lg { width: 48px; min-height: 48px; }

/* Loading state — mostra spinner em vez do label */
.rmbz-btn--loading { color: transparent !important; pointer-events: none; position: relative; }
.rmbz-btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--rmbz-radius-full);
  color: var(--rmbz-text-on-brand);
  animation: rmbz-spin var(--rmbz-duration-slower) linear infinite;
}
.rmbz-btn--ghost.rmbz-btn--loading::after,
.rmbz-btn--outline.rmbz-btn--loading::after { color: var(--rmbz-text-primary); }

@keyframes rmbz-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
 * §2  INPUTS — text, number, tel, email, password, textarea, select
 *
 * Todos os inputs partilham .rmbz-input para visual consistente.
 * Para grupos com label/helper/error, usar .rmbz-field.
 *
 *   <div class="rmbz-field">
 *     <label class="rmbz-field__label" for="phone">Telemóvel</label>
 *     <input id="phone" class="rmbz-input" type="tel" />
 *     <span class="rmbz-field__hint">Comece com 84, 85, 86 ou 87</span>
 *   </div>
 * ============================================================================ */

.rmbz-input,
.rmbz-textarea,
.rmbz-select {
  /* Reset agressivo do styling do browser, especialmente para number */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background-clip: padding-box;
  background-image: none;

  /* Visual */
  width: 100%;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  color: var(--rmbz-text-primary);
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-base);
  line-height: var(--rmbz-leading-snug);
  padding: var(--rmbz-space-3) var(--rmbz-space-4);
  border-radius: var(--rmbz-radius-sm);
  min-height: 44px;

  transition: border-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              background-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-input::placeholder,
.rmbz-textarea::placeholder {
  color: var(--rmbz-text-muted);
}

.rmbz-input:hover:not(:disabled):not(:focus),
.rmbz-textarea:hover:not(:disabled):not(:focus),
.rmbz-select:hover:not(:disabled):not(:focus) {
  border-color: var(--rmbz-border-strong);
}

.rmbz-input:focus,
.rmbz-textarea:focus,
.rmbz-select:focus {
  outline: none;
  border-color: var(--rmbz-brand);
  box-shadow: var(--rmbz-ring-brand);
  background: var(--rmbz-bg-base);
}

.rmbz-input:disabled,
.rmbz-textarea:disabled,
.rmbz-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Esconde os spinners do input[type=number] em todos os browsers */
.rmbz-input[type="number"]::-webkit-outer-spin-button,
.rmbz-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Inputs monetários — fonte mono e tabular-nums */
.rmbz-input--money {
  font-family: var(--rmbz-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-medium);
  text-align: right;
  letter-spacing: 0.02em;
}

/* ───────── INPUT TYPE FILE ─────────
 * File inputs nativos têm largura intrínseca grande (texto "Nenhum ficheiro
 * selecionado..." pode chegar a 200px+) que ultrapassa o container em mobile.
 * Esta regra força o input a respeitar a largura disponível e estiliza o
 * botão "Explorar..." com a marca da app, sem precisar de inline styles.
 *
 * Aplica-se quando o input tem ambas as classes .rmbz-input + .rmbz-input--file
 * OU quando é simplesmente input[type="file"].rmbz-input. */
.rmbz-input[type="file"],
.rmbz-input--file {
  /* Forçar respeito ao container (file inputs ignoram width:100% sem isto) */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Permitir quebra do texto longo "Nenhum ficheiro selecionado" em vez de overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Visual coerente com inputs normais mas com pista visual de "drop zone" */
  border: 1px dashed var(--rmbz-border-strong);
  background: var(--rmbz-bg-input);
  color: var(--rmbz-text-secondary);
  padding: var(--rmbz-space-3);
  cursor: pointer;
  /* Tipografia ligeiramente mais pequena (a parte "Nenhum ficheiro" tende a ser longa) */
  font-size: var(--rmbz-text-sm);
}

/* Botão "Escolher/Explorar..." (parte clicável nativa do input) */
.rmbz-input[type="file"]::-webkit-file-upload-button,
.rmbz-input--file::-webkit-file-upload-button,
.rmbz-input[type="file"]::file-selector-button,
.rmbz-input--file::file-selector-button {
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  border: none;
  padding: var(--rmbz-space-2) var(--rmbz-space-4);
  border-radius: var(--rmbz-radius-sm);
  font-family: var(--rmbz-font-body);
  font-weight: var(--rmbz-weight-semibold);
  font-size: var(--rmbz-text-sm);
  cursor: pointer;
  margin-right: var(--rmbz-space-3);
  transition: background var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-input[type="file"]::-webkit-file-upload-button:hover,
.rmbz-input--file::-webkit-file-upload-button:hover,
.rmbz-input[type="file"]::file-selector-button:hover,
.rmbz-input--file::file-selector-button:hover {
  background: var(--rmbz-brand-strong);
}

/* Mobile (≤600px): file inputs precisam de tratamento especial.
 * O texto "Nenhum ficheiro selecionado" + botão pode ainda assim ser maior
 * que o container. Solução: empilhar (botão em cima, texto em baixo) via
 * display:block no botão, e reduzir tamanho do botão. */
@media (max-width: 600px) {
  .rmbz-input[type="file"],
  .rmbz-input--file {
    /* Padding mais apertado em mobile */
    padding: var(--rmbz-space-2);
    font-size: var(--rmbz-text-xs);
  }
  .rmbz-input[type="file"]::-webkit-file-upload-button,
  .rmbz-input--file::-webkit-file-upload-button,
  .rmbz-input[type="file"]::file-selector-button,
  .rmbz-input--file::file-selector-button {
    padding: var(--rmbz-space-2) var(--rmbz-space-3);
    font-size: var(--rmbz-text-xs);
    margin-right: var(--rmbz-space-2);
  }
}

/* Textarea */
.rmbz-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--rmbz-leading-normal);
}

/* Select — adiciona seta customizada */
.rmbz-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%238a8a92' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--rmbz-space-4) center;
  padding-right: var(--rmbz-space-10);
  cursor: pointer;
}

/* FIELD — wrapper completo com label + input + hint/error */
.rmbz-field {
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-2);
}

/* [DS 1.5.85] STACK utilities — espaçamento vertical consistente entre filhos.
 * Usado em forms para separar campos uns dos outros. Sem isto o hint de um
 * field cola-se ao label do field seguinte (bug visual reportado no perfil).
 *
 *   .rmbz-stack-sm  → gap pequeno  (12px) — listas densas
 *   .rmbz-stack-md  → gap médio    (20px) — forms standard
 *   .rmbz-stack-lg  → gap grande   (28px) — secções separadas
 */
.rmbz-stack-sm { display: flex; flex-direction: column; gap: var(--rmbz-space-3); }
.rmbz-stack-md { display: flex; flex-direction: column; gap: var(--rmbz-space-5); }
.rmbz-stack-lg { display: flex; flex-direction: column; gap: var(--rmbz-space-7); }

/* [DS 1.5.89] Título de secção dentro de forms.
 *
 * Substitui `<h6 style="margin:0">` que era frágil — alguns temas WordPress
 * sobrepõem com !important e o margin:0 inline não vence. Aplica-se a
 * qualquer elemento (h6, h5, div) e força tipografia + reset de margens
 * com !important defensivo.
 *
 * Uso:
 *   <h6 class="rmbz-form-section-title">Para qual operadora vai transferir?</h6>
 *
 * O .rmbz-stack-lg parent garante o gap de 28px ANTES e DEPOIS deste título —
 * mas só se as margens do título estiverem mesmo a 0 (que esta classe garante). */
.rmbz-form-section-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--rmbz-font-body) !important;
  font-size: var(--rmbz-text-sm) !important;
  font-weight: var(--rmbz-weight-semibold) !important;
  color: var(--rmbz-text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3 !important;
}

.rmbz-field__label {
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-medium);
  color: var(--rmbz-text-secondary);
}

.rmbz-field__hint {
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-muted);
}

.rmbz-field__error {
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-danger);
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-1);
}

/* Estado de erro propaga-se ao input */
.rmbz-field--error .rmbz-input,
.rmbz-field--error .rmbz-select,
.rmbz-field--error .rmbz-textarea {
  border-color: var(--rmbz-danger);
}
.rmbz-field--error .rmbz-input:focus,
.rmbz-field--error .rmbz-select:focus,
.rmbz-field--error .rmbz-textarea:focus {
  box-shadow: var(--rmbz-ring-danger);
}

/* INPUT GROUP — input com prefix/suffix (ex.: "MT" antes do montante) */
.rmbz-input-group {
  display: flex;
  align-items: stretch;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-sm);
  overflow: hidden;
  transition: border-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-input-group:focus-within {
  border-color: var(--rmbz-brand);
  box-shadow: var(--rmbz-ring-brand);
}

.rmbz-input-group .rmbz-input {
  border: none;
  background: transparent;
  border-radius: 0;
}
.rmbz-input-group .rmbz-input:focus {
  box-shadow: none;
  background: transparent;
}

.rmbz-input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 var(--rmbz-space-4);
  background: var(--rmbz-bg-elevated);
  color: var(--rmbz-text-muted);
  font-family: var(--rmbz-font-mono);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  border-right: 1px solid var(--rmbz-border-subtle);
}

.rmbz-input-group__addon--right {
  border-right: none;
  border-left: 1px solid var(--rmbz-border-subtle);
}


/* ============================================================================
 * §3  CARD
 * ============================================================================ */

.rmbz-card {
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  padding: var(--rmbz-space-6);
  transition: border-color var(--rmbz-duration-normal) var(--rmbz-ease-out),
              transform var(--rmbz-duration-normal) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

.rmbz-card--interactive { cursor: pointer; }
.rmbz-card--interactive:hover {
  border-color: var(--rmbz-brand);
  transform: translateY(-2px);
  box-shadow: var(--rmbz-shadow-md);
}

.rmbz-card--brand {
  border-color: var(--rmbz-border-brand);
  box-shadow: var(--rmbz-shadow-brand-sm);
}

.rmbz-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rmbz-space-4);
  margin-bottom: var(--rmbz-space-4);
  padding-bottom: var(--rmbz-space-4);
  border-bottom: 1px solid var(--rmbz-border-subtle);
}

.rmbz-card__title {
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  margin: 0;
}

.rmbz-card__body { /* placeholder — herda gap via .rmbz-stack */ }

.rmbz-card__footer {
  margin-top: var(--rmbz-space-4);
  padding-top: var(--rmbz-space-4);
  border-top: 1px solid var(--rmbz-border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rmbz-space-2);
}


/* ============================================================================
 * §3.5  FEATURE CARD — para hero cards do dashboard com identidade própria
 *
 * Anatomia uniforme com pequena barra colorida no topo para criar identidade
 * sem partir consistência. Padrão visto em Notion, Linear, Stripe.
 *
 *   <div class="rmbz-feature-card rmbz-feature-card--accent">
 *     <div class="rmbz-feature-card__body">
 *       <div class="rmbz-feature-card__head">
 *         <span class="rmbz-feature-card__icon">…</span>
 *         <div>
 *           <h3 class="rmbz-feature-card__title">Título</h3>
 *           <p class="rmbz-feature-card__subtitle">Subtítulo</p>
 *         </div>
 *       </div>
 *       <div class="rmbz-feature-card__action">…botão ou form…</div>
 *     </div>
 *   </div>
 *
 * Modifiers de cor (definem a barra no topo + tinte do ícone):
 *   .rmbz-feature-card--brand    (dourado)   — promoções, cupões
 *   .rmbz-feature-card--accent   (azul)      — acções, distribuição
 *   .rmbz-feature-card--success  (verde)     — ganhos, estado positivo
 *   .rmbz-feature-card--neutral  (cinza)     — informativo
 * ============================================================================ */

.rmbz-feature-card {
  position: relative;
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  overflow: hidden;
  margin-bottom: var(--rmbz-space-5);
  transition: border-color var(--rmbz-duration-normal) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

/* Barra colorida no topo (identidade do cartão) */
.rmbz-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rmbz-border-subtle);
}

.rmbz-feature-card:hover {
  border-color: var(--rmbz-border-strong);
}

/* Corpo do cartão */
.rmbz-feature-card__body {
  padding: var(--rmbz-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rmbz-space-5);
  flex-wrap: wrap;
}

/* Cabeçalho (ícone + título + subtítulo) */
.rmbz-feature-card__head {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-4);
  flex: 1;
  min-width: 0;
}

.rmbz-feature-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--rmbz-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rmbz-text-xl);
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  color: var(--rmbz-text-secondary);
}

.rmbz-feature-card__icon svg {
  width: 24px;
  height: 24px;
}

.rmbz-feature-card__title {
  margin: 0 0 var(--rmbz-space-1) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  line-height: var(--rmbz-leading-tight);
}

.rmbz-feature-card__subtitle {
  margin: 0;
  font-size: var(--rmbz-text-sm);
  color: var(--rmbz-text-muted);
  line-height: var(--rmbz-leading-snug);
}

/* Acção à direita (botão, link, form) */
.rmbz-feature-card__action {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Métrica destacada — ex: "Património Total: 2.548 MT" */
.rmbz-feature-card__metric {
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-1);
}

.rmbz-feature-card__metric-label {
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  color: var(--rmbz-text-muted);
}

.rmbz-feature-card__metric-value {
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-3xl);
  font-weight: var(--rmbz-weight-bold);
  color: var(--rmbz-text-primary);
  line-height: 1;
  letter-spacing: var(--rmbz-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.rmbz-feature-card__metric-unit {
  font-family: var(--rmbz-font-mono);
  font-size: var(--rmbz-text-base);
  color: var(--rmbz-text-muted);
  font-weight: var(--rmbz-weight-medium);
}

.rmbz-feature-card__metric-breakdown {
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-muted);
  margin-top: var(--rmbz-space-2);
  font-variant-numeric: tabular-nums;
}

.rmbz-feature-card__metric-breakdown strong {
  color: var(--rmbz-text-secondary);
  font-weight: var(--rmbz-weight-semibold);
}

/* Slot para form/inline content (cupão, referral) */
.rmbz-feature-card__form {
  display: flex;
  gap: var(--rmbz-space-3);
  flex: 1;
  min-width: 200px;
  flex-wrap: wrap;
}

.rmbz-feature-card__form .rmbz-input,
.rmbz-feature-card__form .rmbz-input-group {
  flex: 1;
  min-width: 150px;
}

/* === MODIFIERS DE COR (barra topo + ícone) === */

.rmbz-feature-card--brand::before    { background: var(--rmbz-brand); }
.rmbz-feature-card--brand .rmbz-feature-card__icon {
  background: var(--rmbz-brand-soft);
  border-color: rgba(240, 185, 11, 0.3);
  color: var(--rmbz-brand);
}

.rmbz-feature-card--accent::before   { background: var(--rmbz-accent); }
.rmbz-feature-card--accent .rmbz-feature-card__icon {
  background: var(--rmbz-accent-soft);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--rmbz-accent);
}

.rmbz-feature-card--success::before  { background: var(--rmbz-success); }
.rmbz-feature-card--success .rmbz-feature-card__icon {
  background: var(--rmbz-success-soft);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--rmbz-success);
}

.rmbz-feature-card--neutral::before  { background: var(--rmbz-border-strong); }

.rmbz-feature-card--danger::before   { background: var(--rmbz-danger); }
.rmbz-feature-card--danger .rmbz-feature-card__icon {
  background: var(--rmbz-danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--rmbz-danger);
}

/* Para o cartão Património: valor em destaque dourado quando é brand */
.rmbz-feature-card--brand .rmbz-feature-card__metric-value {
  color: var(--rmbz-brand);
}

/* [DS 1.5.53] === MODIFIER --saldo === Cartão Património Total
 *
 * Quando combinado com --brand (uso típico):
 *   <div class="rmbz-feature-card rmbz-feature-card--brand rmbz-feature-card--saldo">
 *
 * Aplica o navy clássico (#2c3e50) como background do cartão. Recupera
 * a estética do design antigo que o utilizador queria de volta no novo:
 * mais calor, mais "cartão" (separa-se claramente do fundo da página),
 * e contrasta lindamente com o número dourado e a barra dourada no topo.
 *
 * Mantém a barra dourada do --brand. Ajusta texto secundário para ficar
 * legível sobre o navy (texto-muted #8a8a92 já tem contraste AA mas
 * fica ainda melhor um pouco mais claro). */
.rmbz-feature-card--saldo {
  background: var(--rmbz-bg-saldo);
  /* Border subtil que aquece a aresta — fica menos plano */
  border-color: rgba(255, 255, 255, 0.06);
}
/* No hover, o border ganha um brilho subtil em vez de mudar de cor */
.rmbz-feature-card--saldo:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
/* Sub-elementos com legibilidade afinada para o navy */
.rmbz-feature-card--saldo .rmbz-feature-card__metric-label {
  color: rgba(255, 255, 255, 0.55);
}
.rmbz-feature-card--saldo .rmbz-feature-card__metric-breakdown {
  color: rgba(255, 255, 255, 0.65);
}
.rmbz-feature-card--saldo .rmbz-feature-card__metric-breakdown strong {
  color: rgba(255, 255, 255, 0.92);
}

/* [DS 1.5.54] === Sub-elementos partilhados de feature-card ===
 * Bloco de divisor + heading "O seu plano inclui:" — antes era inline
 * style longo no PHP. Tokenizado para classes (limpa código + permite
 * que modificadores como --vip sobreescrevam estilos sem !important). */
.rmbz-feature-card__perms {
  padding: 0 var(--rmbz-space-6) var(--rmbz-space-5);
  border-top: 1px dashed var(--rmbz-border-subtle);
}
.rmbz-feature-card__perms-heading {
  margin: var(--rmbz-space-4) 0 var(--rmbz-space-3) 0;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
}

/* [DS 1.5.54] === MODIFIER --vip === Cartão "Acesso Artista VIP Activo"
 *
 * Quando combinado com --success (uso típico):
 *   <div class="rmbz-feature-card rmbz-feature-card--success rmbz-feature-card--vip">
 *
 * Aplica gradiente diagonal verde-escuro vibrante → preto-esverdeado neutro.
 * Recupera a estética "verde radial VIP" do design antigo que o utilizador
 * queria de volta no novo. Sente-se mais premium, mais "diamante" — combina
 * com o ícone de diamante do título e a barra verde do --success no topo.
 *
 * Aplicado SÓ ao cartão VIP Activo. O outro cartão --success ("Ganhe Saldo
 * Extra" / referrals) continua como está, com background neutro do design
 * system. Decisão deliberada para preservar hierarquia: VIP é o cartão
 * "premium" da experiência e merece destaque próprio. */
.rmbz-feature-card--vip {
  background: linear-gradient(135deg,
    var(--rmbz-bg-vip-from) 0%,
    var(--rmbz-bg-vip-to) 100%
  );
  border-color: rgba(16, 185, 129, 0.15);
}
.rmbz-feature-card--vip:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* Sub-elementos: brancos com opacidade variada para contraste sobre verde-escuro */
.rmbz-feature-card--vip .rmbz-feature-card__title {
  color: rgba(255, 255, 255, 0.95);
}
.rmbz-feature-card--vip .rmbz-feature-card__subtitle {
  color: rgba(255, 255, 255, 0.65);
}
/* Bloco "O seu plano inclui": divisor mais subtil + heading mais claro */
.rmbz-feature-card--vip .rmbz-feature-card__perms {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.rmbz-feature-card--vip .rmbz-feature-card__perms-heading {
  color: rgba(255, 255, 255, 0.5);
}

/* [DS 1.5.58 → 1.5.59] === STAT PILL ===
 * Badge premium para destacar métricas no header de feature-cards.
 * Originalmente criado em 1.5.58 como `.rmbz-earnings-pill` (apenas para
 * ganhos), generalizado em 1.5.59 para suportar 3 variantes de cor:
 *   --brand   (dourado) — ganhos, valores monetários
 *   --accent  (azul)    — contadores neutros (músicas publicadas, etc.)
 *   --warning (laranja) — alertas/atenção (releases devolvidos, etc.)
 *
 * Substitui os antigos "<span> coloridos inline" no subtítulo de cartões.
 * Os spans inline confundiam-se com texto normal e não davam ênfase a
 * métricas que são o "porquê" do utilizador clicar no cartão.
 *
 * Uso típico (próximo a um subtítulo de feature-card):
 *   <span class="rmbz-stat-pill rmbz-stat-pill--brand"
 *         aria-label="Ganhos: 25 dólares e 14 cêntimos">
 *     <svg class="rmbz-stat-pill__icon">…cifrão…</svg>
 *     <span class="rmbz-stat-pill__value">$25.14</span>
 *     <span class="rmbz-stat-pill__label">ganhos</span>
 *   </span>
 *
 * Múltiplos pills em fila ficam dentro de .rmbz-stat-pills (wrapper flex
 * com gap + flex-wrap para mobile).
 *
 * BACKWARDS COMPAT: a classe antiga .rmbz-earnings-pill continua a
 * funcionar com aliases (mesmo CSS, redirect via mesmo selector). */
.rmbz-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rmbz-space-2);
  margin-top: var(--rmbz-space-3);
}

.rmbz-stat-pill,
.rmbz-earnings-pill { /* alias retrocompat */
  display: inline-flex;
  align-items: center;
  /* [DS 1.5.61] gap removido — espaçamento agora controlado por margin
   * nos sub-elementos para criar grupos visuais:
   *   ícone ↔ valor  = 4px (quase colados, formam o número monetário)
   *   valor ↔ label  = 8px (separação clara entre número e descrição)
   * Antes (1.5.60) usava gap:8px uniforme — ficava "$  25.14  ganhos"
   * com excesso de respiração entre o $ e o 25.14. */
  padding: var(--rmbz-space-1) var(--rmbz-space-3);
  border-radius: var(--rmbz-radius-pill);
  /* Cor base/border: cada modificador override --pill-color e --pill-bg.
   * Default = brand (mantém o comportamento da .rmbz-earnings-pill antiga). */
  --pill-color: var(--rmbz-brand);
  --pill-bg:    var(--rmbz-brand-soft);
  --pill-glow:  rgba(240, 185, 11, 0.12);
  background: var(--pill-bg);
  border: 1px solid var(--pill-color);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.08),
              0 2px 8px var(--pill-glow);
  transition: transform var(--rmbz-duration-fast) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-fast) var(--rmbz-ease-out);
}
.rmbz-stat-pill:hover,
.rmbz-earnings-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.15),
              0 4px 12px var(--pill-glow);
}

/* Variante --brand (dourado). É o default mas explicitamos para clareza. */
.rmbz-stat-pill--brand {
  --pill-color: var(--rmbz-brand);
  --pill-bg:    var(--rmbz-brand-soft);
  --pill-glow:  rgba(240, 185, 11, 0.18);
}

/* Variante --accent (azul). Para contadores neutros (músicas, faixas, etc.) */
.rmbz-stat-pill--accent {
  --pill-color: var(--rmbz-accent);
  --pill-bg:    var(--rmbz-accent-soft);
  --pill-glow:  rgba(59, 130, 246, 0.18);
}
.rmbz-stat-pill--accent {
  /* Box-shadow já usa --pill-glow, mas o ring 1px ainda está hard-coded em
   * dourado lá em cima. Override explícito. */
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1),
              0 2px 8px var(--pill-glow);
}
.rmbz-stat-pill--accent:hover {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18),
              0 4px 12px var(--pill-glow);
}

/* Variante --warning (laranja). Para alertas/atenção. */
.rmbz-stat-pill--warning {
  --pill-color: var(--rmbz-warning);
  --pill-bg:    var(--rmbz-warning-soft);
  --pill-glow:  rgba(245, 158, 11, 0.22);
}
.rmbz-stat-pill--warning {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1),
              0 2px 8px var(--pill-glow);
  /* Pulse subtil para chamar atenção a coisas que requerem acção */
  animation: rmbz-stat-pill-pulse 2.5s var(--rmbz-ease-in-out) infinite;
}
.rmbz-stat-pill--warning:hover {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2),
              0 4px 12px var(--pill-glow);
  animation-play-state: paused;
}
@keyframes rmbz-stat-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1),
                          0 2px 8px rgba(245, 158, 11, 0.22); }
  50%      { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2),
                          0 2px 14px rgba(245, 158, 11, 0.4); }
}
/* Respeitar prefers-reduced-motion — não pulsar para utilizadores
 * que pediram para reduzir movimento (vestibulares, epilepsia, etc.) */
@media (prefers-reduced-motion: reduce) {
  .rmbz-stat-pill--warning {
    animation: none;
  }
}

.rmbz-stat-pill__icon,
.rmbz-earnings-pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* [DS 1.5.61] Espaçamento curto entre ícone e valor (4px) — formam uma
   * unidade visual ($25.14, ♪12, ⚠1). Margem maior só entre valor e label. */
  margin-right: var(--rmbz-space-1);
  color: var(--pill-color);
}

.rmbz-stat-pill__value,
.rmbz-earnings-pill__value {
  font-family: var(--rmbz-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-bold);
  color: var(--pill-color);
  line-height: 1;
}

.rmbz-stat-pill__label,
.rmbz-earnings-pill__label {
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-muted);
  font-weight: var(--rmbz-weight-medium);
  /* [DS 1.5.61] Margem normal antes do label para o separar do valor.
   * Este :not() evita aplicar margem se o pill só tiver valor (sem label). */
  margin-left: var(--rmbz-space-2);
}

/* Mobile: pills mais compactos, espaçamento reduzido */
@media (max-width: 640px) {
  .rmbz-stat-pills {
    gap: var(--rmbz-space-1);
    margin-top: var(--rmbz-space-2);
  }
  .rmbz-stat-pill,
  .rmbz-earnings-pill {
    padding: var(--rmbz-space-1) var(--rmbz-space-2);
  }
  /* [DS 1.5.61] Mobile reduz ainda mais os gaps internos para pills
   * compactos. Ícone-valor: 2px (quase colados). Valor-label: 4px. */
  .rmbz-stat-pill__icon,
  .rmbz-earnings-pill__icon {
    margin-right: 2px;
  }
  .rmbz-stat-pill__label,
  .rmbz-earnings-pill__label {
    margin-left: var(--rmbz-space-1);
  }
  .rmbz-stat-pill__value,
  .rmbz-earnings-pill__value {
    font-size: var(--rmbz-text-xs);
  }
  .rmbz-stat-pill__label,
  .rmbz-earnings-pill__label {
    font-size: var(--rmbz-text-2xs);
  }
}

/* Responsivo: stack em mobile */
@media (max-width: 640px) {
  .rmbz-feature-card__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rmbz-space-4);
  }
  .rmbz-feature-card__action {
    width: 100%;
    justify-content: stretch;
  }
  .rmbz-feature-card__action .rmbz-btn {
    flex: 1;
  }
  .rmbz-feature-card__head {
    width: 100%;
  }
}


/* ============================================================================
 * §3.6  PRICE CARD — cartão de plano/pacote (pricing grid)
 *
 * Padrão visto em Stripe, Wise, Vercel. Anatomia:
 *   • Header: nome do plano em caixa alta
 *   • Hero price: valor grande + unidade + ciclo ("MT · 30 dias")
 *   • Lista de features (via .rmbz-perm-list)
 *   • CTA full-width no rodapé
 *
 * Modifier --popular: borda dourada + badge "Mais Popular" sobre o cartão.
 * Mesmo padrão dos 4 feature-cards — fundo neutro, identidade por
 * cor de detalhe (borda + badge), não por paleta inteira.
 *
 *   <div class="rmbz-price-card">
 *     <div class="rmbz-price-card__header">
 *       <h4 class="rmbz-price-card__name">Pro</h4>
 *       <div class="rmbz-price-card__price">
 *         <span class="rmbz-price-card__amount">1500,00</span>
 *         <span class="rmbz-price-card__unit">MT</span>
 *       </div>
 *       <span class="rmbz-price-card__period">Válido por 30 dias</span>
 *     </div>
 *     <div class="rmbz-price-card__body">…perm-list…</div>
 *     <div class="rmbz-price-card__footer">…botão…</div>
 *   </div>
 * ============================================================================ */

.rmbz-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  overflow: hidden;
  transition: border-color var(--rmbz-duration-normal) var(--rmbz-ease-out),
              transform var(--rmbz-duration-normal) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

.rmbz-price-card:hover {
  border-color: var(--rmbz-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--rmbz-shadow-md);
}

/* Header com nome + preço */
.rmbz-price-card__header {
  padding: var(--rmbz-space-6);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  text-align: center;
}

.rmbz-price-card__name {
  margin: 0 0 var(--rmbz-space-3) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-brand);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-widest);
}

.rmbz-price-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--rmbz-space-2);
  margin-bottom: var(--rmbz-space-2);
}

.rmbz-price-card__amount {
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-4xl);
  font-weight: var(--rmbz-weight-bold);
  color: var(--rmbz-text-primary);
  line-height: 1;
  letter-spacing: var(--rmbz-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.rmbz-price-card__unit {
  font-family: var(--rmbz-font-mono);
  font-size: var(--rmbz-text-base);
  font-weight: var(--rmbz-weight-medium);
  color: var(--rmbz-text-muted);
}

.rmbz-price-card__period {
  display: inline-block;
  padding: var(--rmbz-space-1) var(--rmbz-space-3);
  background: var(--rmbz-success-soft);
  color: var(--rmbz-success);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  border-radius: var(--rmbz-radius-pill);
}

/* Body com lista de features */
.rmbz-price-card__body {
  padding: var(--rmbz-space-6);
  flex: 1;
}

/* Footer com CTA */
.rmbz-price-card__footer {
  padding: 0 var(--rmbz-space-6) var(--rmbz-space-6);
}

/* Modifier --popular: destaque visual para o plano recomendado */
.rmbz-price-card--popular {
  border-color: var(--rmbz-brand);
  box-shadow: var(--rmbz-shadow-brand-sm);
}

.rmbz-price-card--popular::before {
  content: attr(data-badge, 'Mais Popular');
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--rmbz-space-1) var(--rmbz-space-3);
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  border-radius: 0 0 var(--rmbz-radius-sm) var(--rmbz-radius-sm);
}

/* Grid para pricing cards (responsivo, auto-fit) */
.rmbz-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rmbz-space-5);
  margin-top: var(--rmbz-space-5);
}


/* ============================================================================
 * §3.7  PERM LIST — lista de permissões/features com estado activo/ausente
 *
 * Para mostrar o que um plano/subscrição inclui. Filosofia: ausente é
 * INFORMAÇÃO, não erro. Por isso usa cinza riscado em vez de vermelho.
 * Padrão Stripe/Wise/Notion.
 *
 * Suporta 2 layouts:
 *   • Vertical (default) — itens empilhados, um por linha (dentro de
 *     price-card)
 *   • Inline (--inline) — chips horizontais, wrap (dentro de feature-card)
 *
 *   <ul class="rmbz-perm-list">
 *     <li class="rmbz-perm-list__item is-active">Distribuir Músicas</li>
 *     <li class="rmbz-perm-list__item">Publicar no Site</li>  ← ausente
 *   </ul>
 * ============================================================================ */

.rmbz-perm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-3);
}

.rmbz-perm-list__item {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-3);
  font-size: var(--rmbz-text-sm);
  color: var(--rmbz-text-muted);
  text-decoration: line-through;
  opacity: 0.55;
  transition: opacity var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-perm-list__item::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  position: relative;
}

/* Item activo — sem riscado, check verde */
.rmbz-perm-list__item.is-active {
  color: var(--rmbz-text-primary);
  text-decoration: none;
  opacity: 1;
}

.rmbz-perm-list__item.is-active::before {
  background: var(--rmbz-success-soft);
  border-color: rgba(16, 185, 129, 0.4);
}

.rmbz-perm-list__item.is-active::after {
  content: '';
  position: absolute;
  left: 5px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--rmbz-success);
  border-bottom: 2px solid var(--rmbz-success);
  transform: rotate(-45deg);
  margin-top: -2px;
}

/* Variante inline (chips) — para uso dentro de feature-card VIP activo */
.rmbz-perm-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--rmbz-space-2);
}

.rmbz-perm-list--inline .rmbz-perm-list__item {
  padding: var(--rmbz-space-1) var(--rmbz-space-3);
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-pill);
  font-size: var(--rmbz-text-xs);
  font-weight: var(--rmbz-weight-medium);
}

.rmbz-perm-list--inline .rmbz-perm-list__item.is-active {
  background: var(--rmbz-success-soft);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--rmbz-success);
}

/* Nas variantes inline não precisamos do círculo ::before */
.rmbz-perm-list--inline .rmbz-perm-list__item::before,
.rmbz-perm-list--inline .rmbz-perm-list__item::after {
  display: none;
}


/* ============================================================================
 * §4  STAT — Saldos, KPIs, métricas
 *
 *   <div class="rmbz-stat">
 *     <span class="rmbz-stat__label">Saldo Carteira</span>
 *     <div class="rmbz-stat__value">
 *       <span class="rmbz-stat__amount">1,250.00</span>
 *       <span class="rmbz-stat__unit">MT</span>
 *     </div>
 *     <span class="rmbz-stat__trend rmbz-stat__trend--up">+12% este mês</span>
 *   </div>
 * ============================================================================ */

.rmbz-stat {
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-2);
  padding: var(--rmbz-space-5);
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  position: relative;
  overflow: hidden;
}

/* Stat de destaque — usa o dourado para o saldo principal */
.rmbz-stat--brand {
  background: linear-gradient(135deg, var(--rmbz-bg-elevated) 0%, var(--rmbz-bg-surface) 100%);
  border-color: var(--rmbz-border-brand);
}
.rmbz-stat--brand::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, var(--rmbz-brand-soft) 0%, transparent 70%);
  pointer-events: none;
}

.rmbz-stat__label {
  font-size: var(--rmbz-text-xs);
  font-weight: var(--rmbz-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  color: var(--rmbz-text-muted);
}

.rmbz-stat__value {
  display: flex;
  align-items: baseline;
  gap: var(--rmbz-space-2);
}

.rmbz-stat__amount {
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-3xl);
  font-weight: var(--rmbz-weight-bold);
  color: var(--rmbz-text-primary);
  line-height: 1;
  letter-spacing: var(--rmbz-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.rmbz-stat--brand .rmbz-stat__amount { color: var(--rmbz-brand); }

.rmbz-stat__unit {
  font-family: var(--rmbz-font-mono);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-medium);
  color: var(--rmbz-text-muted);
  text-transform: uppercase;
}

.rmbz-stat__trend {
  font-size: var(--rmbz-text-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-1);
}

.rmbz-stat__trend--up   { color: var(--rmbz-success); }
.rmbz-stat__trend--down { color: var(--rmbz-danger); }
.rmbz-stat__trend--flat { color: var(--rmbz-text-muted); }

.rmbz-stat__action {
  margin-top: var(--rmbz-space-3);
}


/* ============================================================================
 * §4.5  TABS — navegação horizontal de painéis (underline tabs)
 *
 * Padrão visto em GitHub, Linear, Stripe — minimalista, com sublinhado
 * dourado animado que desliza entre tabs (não pisca). Retro-compatível
 * com o markup antigo (.account-tabs > .tab-link, .account-tab-content)
 * para o JS de switching continuar a funcionar sem alterações.
 *
 *   <div class="rmbz-tabs account-tabs" role="tablist">
 *     <button class="rmbz-tab tab-link active" data-tab="x" role="tab">
 *       <span class="rmbz-tab__icon">…SVG…</span>
 *       <span class="rmbz-tab__label">Envios</span>
 *       <span class="rmbz-tab__badge">3</span>  ← opcional
 *     </button>
 *   </div>
 *   <div id="x" class="account-tab-content active">…</div>
 * ============================================================================ */

.rmbz-tabs,
.account-tabs {
  display: flex;
  gap: var(--rmbz-space-1);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  margin-top: var(--rmbz-space-6);
  margin-bottom: var(--rmbz-space-5);
  padding: 0;
  /* Scroll horizontal em mobile — padrão moderno (iOS, Android, web) */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.rmbz-tabs::-webkit-scrollbar,
.account-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.rmbz-tab,
.tab-link {
  /* Reset */
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
  text-decoration: none;

  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-2);
  padding: var(--rmbz-space-3) var(--rmbz-space-4);
  flex-shrink: 0;
  position: relative;

  /* Tipografia */
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-medium);
  color: var(--rmbz-text-muted);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;

  /* Underline animado: começa invisível, slide via transform */
  transition: color var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-tab::after,
.tab-link::after {
  content: '';
  position: absolute;
  left: var(--rmbz-space-3);
  right: var(--rmbz-space-3);
  bottom: -1px;
  height: 2px;
  background: var(--rmbz-brand);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--rmbz-duration-normal) var(--rmbz-ease-spring);
}

.rmbz-tab:hover,
.tab-link:hover {
  color: var(--rmbz-text-primary);
}

.rmbz-tab:hover::after,
.tab-link:hover::after {
  transform: scaleX(0.4);
  background: var(--rmbz-text-muted);
}

.rmbz-tab.is-active,
.rmbz-tab.active,
.tab-link.is-active,
.tab-link.active {
  color: var(--rmbz-brand);
  font-weight: var(--rmbz-weight-semibold);
}

.rmbz-tab.is-active::after,
.rmbz-tab.active::after,
.tab-link.is-active::after,
.tab-link.active::after {
  transform: scaleX(1);
  background: var(--rmbz-brand);
}

/* Focus-visible para acessibilidade (teclado) */
.rmbz-tab:focus-visible,
.tab-link:focus-visible {
  outline: 2px solid var(--rmbz-brand);
  outline-offset: -2px;
  border-radius: var(--rmbz-radius-sm);
}

/* Ícone — SVG ou emoji, alinhado verticalmente */
.rmbz-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.85;
}

.rmbz-tab__icon svg {
  width: 100%;
  height: 100%;
}

.rmbz-tab.is-active .rmbz-tab__icon,
.rmbz-tab.active .rmbz-tab__icon,
.tab-link.is-active .rmbz-tab__icon,
.tab-link.active .rmbz-tab__icon {
  opacity: 1;
}

.rmbz-tab__label {
  /* Para esconder o label em mobile (só ícone) se necessário */
}

/* Badge opcional dentro da tab (ex: contador de não-lidas) */
.rmbz-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--rmbz-space-1);
  background: var(--rmbz-brand-soft);
  color: var(--rmbz-brand);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: var(--rmbz-radius-pill);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Conteúdo das tabs — fade gentil ao entrar */
.rmbz-tab-content,
.account-tab-content {
  display: none;
  animation: rmbz-tab-fade var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

.rmbz-tab-content.is-active,
.rmbz-tab-content.active,
.account-tab-content.active {
  display: block;
}

@keyframes rmbz-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────────────────
 * MOBILE: tabs viram dropdown (≤768px)
 *
 * Padrão UX: em telas pequenas, uma fila de tabs ocupa demasiado espaço
 * vertical (especialmente quando embrulha em 2x2). A solução standard
 * (Material, iOS, GitHub mobile) é colapsar num dropdown que mostra
 * apenas a tab activa, e abre a lista quando tocada.
 *
 * Funciona SEM mexer no markup PHP. O JS patch (account-page.js secção 4b)
 * apenas adiciona/remove a classe `.is-open` no container.
 *
 * EXCEÇÃO: .rmbz-tabs--auth (login/registo) NÃO vira dropdown — é um
 * segmented control de 2 opções (Entrar | Criar Conta) que já é óptimo
 * em mobile e usa onclick="switchAuthTab(...)" em vez de data-tab.
 * Por isso usamos :not(.rmbz-tabs--auth) em todas as regras abaixo.
 *
 * Acessibilidade: a tab activa fica com role="tab" + aria-expanded gerido
 * pelo JS quando em modo mobile. Em desktop (>768px), tudo volta ao normal.
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Container vira posicionamento relativo (para o dropdown absoluto) */
  .rmbz-tabs:not(.rmbz-tabs--auth),
  .account-tabs:not(.rmbz-tabs--auth) {
    display: block;
    position: relative;
    overflow: visible;             /* anula o overflow-x:auto do desktop */
    border-bottom: none;
    margin-top: var(--rmbz-space-5);
    margin-bottom: var(--rmbz-space-5);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    /* Container precisa de z-index para o dropdown ficar acima do conteúdo */
    z-index: var(--rmbz-z-dropdown);
  }

  /* Por defeito, escondemos TODAS as tabs */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link {
    display: none;
  }

  /* A tab ACTIVA é o "trigger" do dropdown — sempre visível */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active,
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.is-active,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.active,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.is-active,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.active {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: var(--rmbz-space-3);
    padding: var(--rmbz-space-4) var(--rmbz-space-4);
    background: var(--rmbz-bg-elevated);
    border: 1px solid var(--rmbz-border-strong);
    border-radius: var(--rmbz-radius-md);
    font-size: var(--rmbz-text-sm);
    color: var(--rmbz-text-primary);
    font-weight: var(--rmbz-weight-semibold);
    min-height: 52px;              /* alvo de toque confortável */
    position: relative;            /* para o chevron ::after */
    z-index: 2;                    /* acima do painel */
    transition:
      background var(--rmbz-duration-fast) var(--rmbz-ease-out),
      border-color var(--rmbz-duration-fast) var(--rmbz-ease-out);
  }

  /* Underline dourado do desktop NÃO aparece em mobile (substituído por chevron) */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active::after,
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active::after,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.is-active::after,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.active::after,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active::after,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active::after,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.is-active::after,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.active::after {
    content: '';
    position: absolute;
    right: var(--rmbz-space-4);
    top: 50%;
    left: auto;
    bottom: auto;
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 0;
    border-right: 2px solid var(--rmbz-brand);
    border-bottom: 2px solid var(--rmbz-brand);
    transform: translateY(-75%) rotate(45deg);
    transform-origin: center;
    transition: transform var(--rmbz-duration-normal) var(--rmbz-ease-out);
  }

  /* Hover/focus na tab activa (trigger) */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active:hover,
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active:hover,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.is-active:hover,
  .rmbz-tabs:not(.rmbz-tabs--auth) .tab-link.active:hover,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.is-active:hover,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab.active:hover,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.is-active:hover,
  .account-tabs:not(.rmbz-tabs--auth) .tab-link.active:hover {
    background: var(--rmbz-bg-hover);
    border-color: var(--rmbz-brand);
  }

  /* ESTADO ABERTO: container ganha .is-open via JS */

  /* Trigger fica com cantos inferiores quadrados quando aberto */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.is-active,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.active,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.is-active,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.is-active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.is-active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.active {
    border-color: var(--rmbz-brand);
    border-bottom-color: var(--rmbz-border-subtle);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--rmbz-bg-elevated);
  }

  /* Chevron rota para cima quando aberto */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.is-active::after,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.active::after,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.is-active::after,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.active::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.is-active::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab.active::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.is-active::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link.active::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  /* As OUTRAS tabs (não activas) aparecem como itens do dropdown */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: var(--rmbz-space-3);
    padding: var(--rmbz-space-4);
    background: var(--rmbz-bg-surface);
    border-left: 1px solid var(--rmbz-brand);
    border-right: 1px solid var(--rmbz-brand);
    border-bottom: 1px solid var(--rmbz-border-subtle);
    border-top: none;
    border-radius: 0;
    font-size: var(--rmbz-text-sm);
    color: var(--rmbz-text-secondary);
    font-weight: var(--rmbz-weight-medium);
    min-height: 48px;
    /* animação subtle de entrada */
    animation: rmbz-tab-dropdown-in var(--rmbz-duration-fast) var(--rmbz-ease-out) both;
  }

  /* Última tab fecha o dropdown com cantos arredondados em baixo */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:last-child,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:last-child,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:last-child,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:last-child {
    border-bottom: 1px solid var(--rmbz-brand);
    border-bottom-left-radius: var(--rmbz-radius-md);
    border-bottom-right-radius: var(--rmbz-radius-md);
  }

  /* Hover/touch nos itens do dropdown */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active):hover,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active):active,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active):hover,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active):active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active):hover,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active):active,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active):hover,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active):active {
    background: var(--rmbz-bg-hover);
    color: var(--rmbz-text-primary);
  }

  /* Itens do dropdown não devem mostrar o underline ::after */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active)::after,
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active)::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active)::after,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active)::after {
    display: none;
  }

  /* Ícones ligeiramente maiores em mobile (alvo visual) */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab__icon,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab__icon {
    width: 20px;
    height: 20px;
    opacity: 1;
  }

  /* Label sempre visível em mobile (não ocultar) */
  .rmbz-tabs:not(.rmbz-tabs--auth) .rmbz-tab__label,
  .account-tabs:not(.rmbz-tabs--auth) .rmbz-tab__label {
    flex: 1;
    text-align: left;
    /* Evita que labels longos esmaguem o chevron */
    padding-right: var(--rmbz-space-6);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Itens do dropdown: label sem padding-right (não há chevron) */
  .rmbz-tabs.is-open:not(.rmbz-tabs--auth) .rmbz-tab:not(.is-active):not(.active) .rmbz-tab__label,
  .account-tabs.is-open:not(.rmbz-tabs--auth) .tab-link:not(.is-active):not(.active) .rmbz-tab__label {
    padding-right: 0;
  }
}

/* Animação de entrada dos itens do dropdown */
@keyframes rmbz-tab-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
 * §5  BADGE
 * ============================================================================ */

.rmbz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-1);
  padding: 0.2em 0.65em;
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  border-radius: var(--rmbz-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.rmbz-badge--neutral { background: var(--rmbz-bg-hover); color: var(--rmbz-text-secondary); border-color: var(--rmbz-border-subtle); }
.rmbz-badge--brand   { background: var(--rmbz-brand-soft); color: var(--rmbz-brand); border-color: var(--rmbz-brand); }
.rmbz-badge--success { background: var(--rmbz-success-soft); color: var(--rmbz-success); }
.rmbz-badge--danger  { background: var(--rmbz-danger-soft); color: var(--rmbz-danger); }
.rmbz-badge--warning { background: var(--rmbz-warning-soft); color: var(--rmbz-warning); }
.rmbz-badge--info    { background: var(--rmbz-info-soft); color: var(--rmbz-info); }

/* Badge VIP — dourado com gradient sutil */
.rmbz-badge--vip {
  background: var(--rmbz-brand-gradient);
  color: var(--rmbz-text-on-brand);
  box-shadow: var(--rmbz-shadow-brand-sm);
  border: none;
}


/* ============================================================================
 * §6  PILL TOGGLE — para Carteira ↔ Royalties, Single/EP/Álbum, etc
 *
 *   <div class="rmbz-pill-group" role="tablist">
 *     <button class="rmbz-pill is-active" role="tab">Carteira</button>
 *     <button class="rmbz-pill" role="tab">Royalties</button>
 *   </div>
 * ============================================================================ */

.rmbz-pill-group {
  display: inline-flex;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-pill);
  padding: var(--rmbz-space-1);
  gap: var(--rmbz-space-1);
}

.rmbz-pill-group--full {
  display: flex;
  width: 100%;
}
.rmbz-pill-group--full .rmbz-pill {
  flex: 1;
  text-align: center;
  justify-content: center;
}

.rmbz-pill {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--rmbz-text-muted);
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-medium);
  padding: var(--rmbz-space-2) var(--rmbz-space-4);
  border-radius: var(--rmbz-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-2);
  transition: background-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              color var(--rmbz-duration-fast) var(--rmbz-ease-out);
  white-space: nowrap;
}

.rmbz-pill:hover:not(.is-active) {
  color: var(--rmbz-text-primary);
  background: var(--rmbz-bg-hover);
}

.rmbz-pill.is-active {
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  font-weight: var(--rmbz-weight-semibold);
}


/* ============================================================================
 * §6.5  RADIO PILL GROUP — versão à prova de bugs JS
 *
 * Para situações onde o picker é submetido em forms (como operadora
 * M-Pesa/E-Mola), usar radios nativos garante que NUNCA falha — o browser
 * faz todo o trabalho. A pill toggle anterior (.rmbz-pill-group) é melhor
 * para tabs que só mostram/escondem painéis no cliente.
 *
 *   <div class="rmbz-radio-group rmbz-radio-group--full" role="radiogroup">
 *     <label class="rmbz-radio-pill">
 *       <input type="radio" name="op" value="M-Pesa" required>
 *       <span class="rmbz-radio-pill__label">🔴 M-Pesa</span>
 *     </label>
 *     <label class="rmbz-radio-pill">
 *       <input type="radio" name="op" value="E-Mola" required>
 *       <span class="rmbz-radio-pill__label">🟢 E-Mola</span>
 *     </label>
 *   </div>
 * ============================================================================ */

.rmbz-radio-group {
  display: inline-flex;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  /* [DS 1.5.86] Cantos suaves (radius-md) em vez de pill — utilizadores
   * acharam o "estádio" arredondado feio. radius-md fica mais limpo e
   * coerente com o resto do design system (cards, alerts, etc). */
  border-radius: var(--rmbz-radius-md);
  padding: var(--rmbz-space-1);
  gap: var(--rmbz-space-1);
}

.rmbz-radio-group--full {
  display: flex;
  width: 100%;
  /* Permitir embrulho automático quando labels não cabem na largura disponível.
     Combinado com flex-basis dinâmico abaixo, faz com que pills com labels
     longos (ex. "TENHO CUPÃO", "ID TRANSACÇÃO") empilhem verticalmente em
     mobile em vez de sair fora do container. */
  flex-wrap: wrap;
}

.rmbz-radio-pill {
  /* [DS 1.5.88] !important nas propriedades flex críticas para vencer
   * cache agressivo de plugins de optimização (W3 Total Cache, WP Rocket,
   * etc). Sem isto, alguns ambientes mantinham o CSS antigo que tinha
   * `display:inline-flex` + `flex:1`, fazendo o pill activo encolher
   * ao tamanho do conteúdo (visualmente: M-PESA/ID DA TRANSAÇÃO ficavam
   * com 30% da largura em vez de 50%).
   *
   * Estas 3 propriedades são as que controlam a distribuição de espaço:
   *   - flex: 1 1 0   → cada pill cresce igualmente do basis 0
   *   - display: flex → respeita o flex-grow (inline-flex ignorava-o)
   *   - min-width: 0  → permite encolher abaixo do tamanho do conteúdo
   *                     (defesa contra overflow com labels longos) */
  flex: 1 1 0 !important;
  display: flex !important;
  min-width: 0 !important;
  position: relative;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: var(--rmbz-space-2);
  padding: var(--rmbz-space-2) var(--rmbz-space-4);
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-medium);
  color: var(--rmbz-text-muted);
  /* [DS 1.5.86] radius-sm dentro do container — visualmente o pill activo
   * fica como um "card" subtil dentro da moldura, em vez de cápsula. */
  border-radius: var(--rmbz-radius-sm);
  transition: background-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              color var(--rmbz-duration-fast) var(--rmbz-ease-out);
  user-select: none;
  white-space: nowrap;
  /* Garantir que o conteúdo do label centra mesmo sob conteúdos curtos */
  text-align: center;
  box-sizing: border-box;
}

/* [DS 1.5.86] Bolinhas de cor das operadoras de pagamento moçambicanas.
 * Substituem os emojis 🔴/🟢 por elementos CSS controláveis — assim
 * podemos atribuir a cor exacta que queremos e manter consistência
 * visual entre todos os pontos do plugin (depositar, levantar, etc).
 *
 *   --mpesa  → vermelho Vodacom (cor real da marca)
 *   --emola  → dourado da nossa marca (preferência do utilizador)
 *   --mkesh  → azul (Movitel — marca real, reservado para uso futuro)
 */
.rmbz-op-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Pequena sombra interna para profundidade (parece um botão pequeno) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
              0 0 0 1px rgba(0,0,0,0.15);
}
.rmbz-op-dot--mpesa { background: #e60012; }   /* vermelho Vodacom */
.rmbz-op-dot--emola { background: var(--rmbz-brand); } /* dourado da marca */
.rmbz-op-dot--mkesh { background: #00a4e4; }   /* azul Movitel */

/* ───────── TABLET / TELEMÓVEIS GRANDES (601px–768px): wrap automático ─────────
 * Mantemos pills lado-a-lado, mas se algum label for longo (ex. "TENHO CUPÃO")
 * o flex-wrap arruma, evitando que saia do container. */
@media (min-width: 601px) and (max-width: 768px) {
  .rmbz-radio-group--full .rmbz-radio-pill {
    flex: 1 1 45%;
    white-space: normal;
    text-align: center;
    min-height: 40px;
  }
}

/* ───────── TELEMÓVEL (≤600px): empilhamento real ─────────
 * Um por linha. O grupo perde a forma de cápsula (que ficava feia em itens
 * largos empilhados) e vira uma stack de cards rectangulares limpos com
 * cantos suaves. O item activo destaca-se com background dourado mas mantém
 * a mesma forma e tamanho dos inactivos — visual coerente, sem "comprimido".
 *
 * NOTA: usamos !important nas propriedades críticas de forma para garantir
 * que vencem (a) a regra base .rmbz-radio-group que tem mesma specificity
 * e (b) eventual cache agressivo de plugins de optimização. O comportamento
 * desktop não é afectado porque tudo está dentro de @media (max-width: 600px). */
@media (max-width: 600px) {
  .rmbz-radio-group--full {
    flex-direction: column !important;
    /* Sem padding no container — cada pill é um card autónomo */
    padding: 0 !important;
    /* Sem background nem borda no container — cada pill tem a sua própria */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    gap: var(--rmbz-space-2) !important;
    /* Garantir que o container nunca ultrapassa o pai */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .rmbz-radio-group--full .rmbz-radio-pill {
    flex: 0 0 auto !important;
    width: 100% !important;
    /* Garantir que padding/border são contabilizados na largura — sem isto
       um padding de 16px em ambos os lados + border 1px faz o pill ficar
       width:100% + 34px = ultrapassa o pai por 34px (causa o "sair fora"). */
    box-sizing: border-box !important;
    max-width: 100% !important;
    /* Cantos suaves (não pill) — visualmente consistente entre activo e inactivo */
    border-radius: var(--rmbz-radius-md) !important;
    /* Cada pill ganha a sua própria moldura — o container já não a fornece */
    background: var(--rmbz-bg-input);
    border: 1px solid var(--rmbz-border-subtle);
    /* Tipografia + alvo de toque confortável (sem ser exagerado) */
    min-height: 44px;
    padding: var(--rmbz-space-3) var(--rmbz-space-4);
    font-size: var(--rmbz-text-sm);
    font-weight: var(--rmbz-weight-medium);
    /* Permite quebra de label em casos extremos */
    white-space: normal !important;
    text-align: center;
    /* Transições mais ricas (background + border) */
    transition:
      background-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
      border-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
      color var(--rmbz-duration-fast) var(--rmbz-ease-out);
  }

  /* Hover/touch: mostra que o card é clicável */
  .rmbz-radio-group--full .rmbz-radio-pill:hover,
  .rmbz-radio-group--full .rmbz-radio-pill:active {
    background: var(--rmbz-bg-hover);
    border-color: var(--rmbz-border-strong);
  }

  /* Estado activo: dourado, com forma e tamanho idênticos ao inactivo */
  .rmbz-radio-group--full .rmbz-radio-pill:has(input[type="radio"]:checked) {
    background: var(--rmbz-brand) !important;
    border-color: var(--rmbz-brand-strong) !important;
    color: var(--rmbz-text-on-brand) !important;
    /* Ligeira sombra para reforçar a hierarquia visual sem mudar o tamanho */
    box-shadow: var(--rmbz-shadow-brand-sm);
  }
}

/* Esconde o radio nativo, mantém-no acessível para teclado/screen readers */
.rmbz-radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
}

.rmbz-radio-pill__label {
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-2);
  pointer-events: none; /* clicks vão para o <label> pai */
}

.rmbz-radio-pill:hover {
  color: var(--rmbz-text-primary);
  background: var(--rmbz-bg-hover);
}

/* Estado checked — irmã directa via :has(), com fallback para :checked + */
.rmbz-radio-pill:has(input[type="radio"]:checked) {
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  font-weight: var(--rmbz-weight-semibold);
}

/* Focus visível por teclado */
.rmbz-radio-pill:has(input[type="radio"]:focus-visible) {
  box-shadow: var(--rmbz-ring-brand);
}


/* ============================================================================
 * §7  MODAL — sistema único partilhado por todos os modais do plugin
 *
 *   <div class="rmbz-modal" id="my-modal" data-rmbz-modal hidden>
 *     <div class="rmbz-modal__overlay" data-rmbz-action="close"></div>
 *     <div class="rmbz-modal__panel" role="dialog" aria-modal="true">
 *       <header class="rmbz-modal__header">
 *         <h3 class="rmbz-modal__title">Título</h3>
 *         <button class="rmbz-btn rmbz-btn--icon" data-rmbz-action="close">×</button>
 *       </header>
 *       <div class="rmbz-modal__body">…</div>
 *       <footer class="rmbz-modal__footer">…botões…</footer>
 *     </div>
 *   </div>
 * ============================================================================ */

.rmbz-modal {
  position: fixed;
  inset: 0;
  z-index: var(--rmbz-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rmbz-space-4);
  /* O atributo `hidden` faz o display: none.
   * !important aqui é defesa profunda — vence style="display:flex" inline
   * que possa ter sido gravado por código antigo (opener legacy). */
}

.rmbz-modal[hidden] { display: none !important; }

.rmbz-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: rmbz-fade-in var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

.rmbz-modal__panel {
  position: relative;
  background: var(--rmbz-bg-surface);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--rmbz-space-8));
  display: flex;
  flex-direction: column;
  box-shadow: var(--rmbz-shadow-xl);
  animation: rmbz-modal-in var(--rmbz-duration-normal) var(--rmbz-ease-spring);
}

.rmbz-modal--lg .rmbz-modal__panel { max-width: 720px; }
.rmbz-modal--sm .rmbz-modal__panel { max-width: 360px; }

.rmbz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rmbz-space-5) var(--rmbz-space-6);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  flex-shrink: 0;
}

.rmbz-modal__title {
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  margin: 0;
}

/* Botão × do header — SVG centrado, sem dependência de font-size do tema. */
.rmbz-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rmbz-text-secondary);
}
.rmbz-modal__close:hover { color: var(--rmbz-text-primary); }
.rmbz-modal__close svg { display: block; }

.rmbz-modal__body {
  padding: var(--rmbz-space-6);
  overflow-y: auto;
  flex: 1;
}

.rmbz-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rmbz-space-3);
  padding: var(--rmbz-space-5) var(--rmbz-space-6);
  border-top: 1px solid var(--rmbz-border-subtle);
  flex-shrink: 0;
}

@keyframes rmbz-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rmbz-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Em mobile: modal vira "sheet" (vem de baixo) */
@media (max-width: 640px) {
  .rmbz-modal { padding: 0; align-items: flex-end; }
  .rmbz-modal__panel {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--rmbz-radius-lg) var(--rmbz-radius-lg) 0 0;
    animation: rmbz-sheet-up var(--rmbz-duration-normal) var(--rmbz-ease-out);
  }
  @keyframes rmbz-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ============================================================================
 * §7.5 DIALOG (alert/confirm modais)
 *
 * [DS 1.5.62] Substituem alert() e confirm() nativos. Construídos sobre o
 * .rmbz-modal mas com estrutura simplificada: ícone grande no topo +
 * mensagem central + 1 ou 2 botões. Sem header/footer separados.
 *
 * Uso (via JS): window.rmbz.alert(msg) / window.rmbz.confirm(msg)
 * O markup é gerado dinamicamente em runtime — não há template estático.
 * ============================================================================ */

.rmbz-dialog__panel {
  text-align: center;
  /* [1.5.189] Padding generoso — modal de confirmação importante merece
   * respiração. Aumentado de space-7 para space-8 (40px) no top e bottom,
   * para dar mais peso visual e não parecer "feito de qualquer maneira". */
  padding: var(--rmbz-space-8) var(--rmbz-space-7) var(--rmbz-space-7);
  max-width: 460px;
  align-items: center;
  /* [1.5.189] Profundidade extra: gradient subtil dark theme + border
   * suave. Antes tinha só bg-surface flat. Agora o painel tem nuance. */
  background: linear-gradient(180deg, #1c1c20 0%, #18181c 100%);
  border: 1px solid #2a2a2e;
  /* [1.5.189] Sombra mais dramática para o painel "flutuar" */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Ícone grande circular no topo */
.rmbz-dialog__icon {
  /* [1.5.189] Ícone maior e com mais presença — 64px em vez de 56px */
  width: 64px;
  height: 64px;
  margin: 0 auto var(--rmbz-space-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  min-width: 64px;
  min-height: 64px;
  /* [1.5.189] Animação subtil de entrada — pulsa ao aparecer */
  animation: rmbz-dialog-icon-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rmbz-dialog__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

@keyframes rmbz-dialog-icon-in {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Variantes de cor — soft background + ring exterior mais marcado */
.rmbz-dialog__icon--info {
  background: var(--rmbz-info-soft);
  color: var(--rmbz-info);
  /* [1.5.189] Ring exterior mais visível (2 layers) para destacar */
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.25),
    0 0 0 6px rgba(59, 130, 246, 0.08);
}
.rmbz-dialog__icon--warning {
  background: var(--rmbz-warning-soft);
  color: var(--rmbz-warning);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.3),
    0 0 0 6px rgba(245, 158, 11, 0.08);
}
.rmbz-dialog__icon--danger {
  background: var(--rmbz-danger-soft);
  color: var(--rmbz-danger);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.3),
    0 0 0 6px rgba(239, 68, 68, 0.08);
}
.rmbz-dialog__icon--success {
  background: var(--rmbz-success-soft);
  color: var(--rmbz-success);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.3),
    0 0 0 6px rgba(16, 185, 129, 0.08);
}

/* [1.5.189] Border-top colorido REFORÇADO — passou de 3px para 4px e
 * com glow leve, para reforçar a variant mesmo de relance. */
.rmbz-dialog__panel--info {
  border-top: 4px solid var(--rmbz-info);
  box-shadow:
    0 -2px 16px -4px rgba(59, 130, 246, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rmbz-dialog__panel--warning {
  border-top: 4px solid var(--rmbz-warning);
  box-shadow:
    0 -2px 16px -4px rgba(245, 158, 11, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rmbz-dialog__panel--danger {
  border-top: 4px solid var(--rmbz-danger);
  box-shadow:
    0 -2px 16px -4px rgba(239, 68, 68, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rmbz-dialog__panel--success {
  border-top: 4px solid var(--rmbz-success);
  box-shadow:
    0 -2px 16px -4px rgba(16, 185, 129, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Título — maior e com mais peso visual */
.rmbz-dialog__title {
  /* [1.5.189] text-lg → text-xl (20px) e weight-semibold → weight-bold.
   * Modal merece um título com peso. */
  margin: 0 0 var(--rmbz-space-3) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-xl);
  font-weight: var(--rmbz-weight-bold);
  color: var(--rmbz-text-primary);
  letter-spacing: var(--rmbz-tracking-tight);
  line-height: var(--rmbz-leading-tight);
  width: 100%;
}

/* Mensagem — texto mais legível */
.rmbz-dialog__message {
  /* [1.5.189] text-sm (13px) → text-base (15px) — texto mais legível
   * em modal importante. Margem inferior maior também. */
  margin: 0 0 var(--rmbz-space-6) 0;
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-base);
  line-height: 1.65;
  text-align: center; /* [1.5.189] Center porque modal é compacto e
                       * texto curto fica melhor centrado. Override no
                       * :has() abaixo se houver listas/parágrafos longos. */
  max-height: 60vh;
  overflow-y: auto;
  width: 100%;
}
.rmbz-dialog__message p {
  margin: 0 0 var(--rmbz-space-3) 0;
}
.rmbz-dialog__message p:last-child {
  margin-bottom: 0;
}
/* [1.5.189] Se há múltiplos parágrafos ou listas, alinhar à esquerda
 * (mais legível para texto longo). */
.rmbz-dialog__message:has(p + p),
.rmbz-dialog__message:has(ul),
.rmbz-dialog__message:has(ol) {
  text-align: left;
}
.rmbz-dialog__message strong {
  color: var(--rmbz-text-primary);
  font-weight: var(--rmbz-weight-semibold);
}
.rmbz-dialog__message ul,
.rmbz-dialog__message ol {
  margin: var(--rmbz-space-2) 0;
  padding-left: var(--rmbz-space-5);
}
.rmbz-dialog__message li {
  margin-bottom: var(--rmbz-space-1);
}

/* [1.5.189] Botões dos modais com mais peso visual.
 *   - Primary mantém-se forte (já é amarelo brand, fica bem)
 *   - Cancel passa de "ghost" para "outline" — agora tem border visível
 *     em vez de ser quase invisível (que era o problema na imagem reportada
 *     pelo Jaime: "parece que deixaram de qualquer maneira"). */
.rmbz-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--rmbz-space-3);
  flex-wrap: wrap;
  margin-top: var(--rmbz-space-2);
  width: 100%;
}
.rmbz-dialog__actions:has(.rmbz-btn:only-child) {
  justify-content: center;
}
.rmbz-dialog__actions .rmbz-btn {
  min-width: 130px;
  /* [1.5.189] Botões maiores: padding mais generoso, font weight mais forte */
  padding: 12px 20px;
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
}

/* [1.5.189] Override do botão "ghost" dentro de dialogs — fica com
 * border subtil para ser visível. O ghost por defeito é demasiado
 * discreto neste contexto. */
.rmbz-dialog__actions .rmbz-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--rmbz-text-secondary);
  transition: all 0.15s ease;
}
.rmbz-dialog__actions .rmbz-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--rmbz-text-primary);
}

/* [1.5.189] Botão primary com shadow + hover lift sutil */
.rmbz-dialog__actions .rmbz-btn--primary {
  box-shadow: 0 4px 12px rgba(240, 185, 11, 0.25);
  transition: all 0.15s ease;
}
.rmbz-dialog__actions .rmbz-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240, 185, 11, 0.35);
}
.rmbz-dialog__actions .rmbz-btn--primary:active {
  transform: translateY(0);
}

/* Mesma idea para danger button */
.rmbz-dialog__actions .rmbz-btn--danger {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transition: all 0.15s ease;
}
.rmbz-dialog__actions .rmbz-btn--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}
.rmbz-dialog__actions .rmbz-btn--danger:active {
  transform: translateY(0);
}

/* Mobile: botões full-width, ok em cima (mais à mão do polegar) */
@media (max-width: 480px) {
  .rmbz-dialog__panel {
    padding: var(--rmbz-space-7) var(--rmbz-space-5) var(--rmbz-space-6);
  }
  .rmbz-dialog__actions {
    flex-direction: column-reverse; /* ok em cima, cancel em baixo */
  }
  .rmbz-dialog__actions .rmbz-btn {
    width: 100%;
  }
}


/* ============================================================================
 * §8  TOAST
 * ============================================================================ */

.rmbz-toast-container {
  position: fixed;
  bottom: var(--rmbz-space-6);
  right: var(--rmbz-space-6);
  z-index: var(--rmbz-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-3);
  pointer-events: none;
  max-width: 380px;
}

@media (max-width: 640px) {
  .rmbz-toast-container {
    left: var(--rmbz-space-3);
    right: var(--rmbz-space-3);
    bottom: var(--rmbz-space-3);
    max-width: none;
  }
}

.rmbz-toast {
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-left: 3px solid var(--rmbz-brand);
  color: var(--rmbz-text-primary);
  padding: var(--rmbz-space-4) var(--rmbz-space-5);
  border-radius: var(--rmbz-radius-md);
  box-shadow: var(--rmbz-shadow-lg);
  font-size: var(--rmbz-text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--rmbz-space-3);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--rmbz-duration-normal) var(--rmbz-ease-out),
              transform var(--rmbz-duration-normal) var(--rmbz-ease-spring);
}

.rmbz-toast.is-visible { opacity: 1; transform: translateX(0); }
.rmbz-toast.is-leaving { opacity: 0; transform: translateX(20px); }

.rmbz-toast--success { border-left-color: var(--rmbz-success); }
.rmbz-toast--danger  { border-left-color: var(--rmbz-danger); }
.rmbz-toast--warning { border-left-color: var(--rmbz-warning); }
.rmbz-toast--info    { border-left-color: var(--rmbz-info); }

.rmbz-toast__icon { font-size: var(--rmbz-text-lg); flex-shrink: 0; line-height: 1; }
.rmbz-toast__body { flex: 1; line-height: var(--rmbz-leading-snug); }
.rmbz-toast__close {
  background: none;
  border: none;
  color: var(--rmbz-text-muted);
  cursor: pointer;
  padding: 0 0 0 var(--rmbz-space-2);
  font-size: var(--rmbz-text-lg);
  line-height: 1;
}
.rmbz-toast__close:hover { color: var(--rmbz-text-primary); }


/* ============================================================================
 * §9  EMPTY STATE
 * ============================================================================ */

.rmbz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--rmbz-space-12) var(--rmbz-space-6);
  color: var(--rmbz-text-muted);
}

.rmbz-empty__icon {
  font-size: var(--rmbz-text-4xl);
  margin-bottom: var(--rmbz-space-4);
  opacity: 0.6;
}

.rmbz-empty__title {
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-secondary);
  margin: 0 0 var(--rmbz-space-2) 0;
}

.rmbz-empty__description {
  font-size: var(--rmbz-text-sm);
  margin: 0 0 var(--rmbz-space-6) 0;
  max-width: 360px;
}


/* ============================================================================
 * §10 SKELETON — placeholder de loading
 * ============================================================================ */

.rmbz-skeleton {
  background: linear-gradient(
    90deg,
    var(--rmbz-bg-elevated) 0%,
    var(--rmbz-bg-hover) 50%,
    var(--rmbz-bg-elevated) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--rmbz-radius-sm);
  animation: rmbz-shimmer 1.4s ease-in-out infinite;
  display: block;
}

.rmbz-skeleton--text   { height: 0.85em; margin: 0.4em 0; }
.rmbz-skeleton--title  { height: 1.4em; width: 60%; margin: 0.5em 0; }
.rmbz-skeleton--circle { border-radius: var(--rmbz-radius-full); }
.rmbz-skeleton--button { height: 40px; width: 120px; border-radius: var(--rmbz-radius-sm); }

@keyframes rmbz-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================================================
 * §11 DIVIDER, LABELS, MISC
 * ============================================================================ */

.rmbz-divider {
  border: 0;
  border-top: 1px solid var(--rmbz-border-subtle);
  margin: var(--rmbz-space-6) 0;
}

.rmbz-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-3);
  border: none;
  color: var(--rmbz-text-muted);
  font-size: var(--rmbz-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
}
.rmbz-divider--labeled::before,
.rmbz-divider--labeled::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rmbz-border-subtle);
}

/* CHIP — para contactos guardados, tags */
.rmbz-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-2);
  padding: var(--rmbz-space-2) var(--rmbz-space-3);
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-sm);
  border-radius: var(--rmbz-radius-pill);
  cursor: pointer;
  transition: all var(--rmbz-duration-fast) var(--rmbz-ease-out);
}
.rmbz-chip:hover { border-color: var(--rmbz-brand); color: var(--rmbz-text-primary); }
.rmbz-chip.is-active {
  background: var(--rmbz-brand-soft);
  border-color: var(--rmbz-brand);
  color: var(--rmbz-brand);
  font-weight: var(--rmbz-weight-semibold);
}

/* ALERT — banner inline (não é toast) */
.rmbz-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--rmbz-space-3);
  padding: var(--rmbz-space-4);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-sm);
  background: var(--rmbz-bg-elevated);
  font-size: var(--rmbz-text-sm);
  color: var(--rmbz-text-secondary);
}

.rmbz-alert__icon { font-size: var(--rmbz-text-lg); line-height: 1; flex-shrink: 0; }
.rmbz-alert__body { flex: 1; }
.rmbz-alert__title {
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  margin: 0 0 var(--rmbz-space-1) 0;
}

.rmbz-alert--success { border-color: var(--rmbz-success); background: var(--rmbz-success-soft); }
.rmbz-alert--success .rmbz-alert__title { color: var(--rmbz-success); }
.rmbz-alert--danger  { border-color: var(--rmbz-danger);  background: var(--rmbz-danger-soft); }
.rmbz-alert--danger  .rmbz-alert__title { color: var(--rmbz-danger); }
.rmbz-alert--warning { border-color: var(--rmbz-warning); background: var(--rmbz-warning-soft); }
.rmbz-alert--warning .rmbz-alert__title { color: var(--rmbz-warning); }
.rmbz-alert--info    { border-color: var(--rmbz-info);    background: var(--rmbz-info-soft); }
.rmbz-alert--info    .rmbz-alert__title { color: var(--rmbz-info); }


/* ============================================================================
 * §10  HEADER COMPONENTS — avatar, sino com badge, dropdown de notificações
 *
 * Componentes específicos do header do dashboard. Reutilizáveis em qualquer
 * sítio que precise de um header de utilizador autenticado.
 * ============================================================================ */

/* --- §10.1 HEADER WRAPPER ---
 * Container do header inteiro. Layout flex com space-between, gap em mobile.
 *
 *   <header class="rmbz-header">
 *     <div class="rmbz-header__user">…avatar + nome…</div>
 *     <div class="rmbz-header__actions">…sino + sair…</div>
 *   </header>
 */
.rmbz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rmbz-space-4);
  flex-wrap: wrap;
  padding: var(--rmbz-space-5) var(--rmbz-space-6);
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  margin-bottom: var(--rmbz-space-6);
}

.rmbz-header__user {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-4);
  min-width: 0; /* permite truncate */
  flex: 1;
}

.rmbz-header__actions {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-3);
  position: relative;
  flex-shrink: 0;
}

.rmbz-header__greeting {
  margin: 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-xl);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  line-height: var(--rmbz-leading-tight);
  letter-spacing: var(--rmbz-tracking-tight);
}

.rmbz-header__meta {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-2);
  margin-top: var(--rmbz-space-2);
  flex-wrap: wrap;
}

/* [DS 1.5.57] Layout mobile do header — stack vertical limpa.
 *
 * Em PC, o header é uma linha: [avatar + nome | acções]. Em mobile o
 * `flex-wrap: wrap` default já fazia algum trabalho, mas dava um
 * resultado feio: o nome longo "Olá, Jaime Metano 👋" quebrava palavra
 * a palavra ("Olá," / "Jaime" / "Metano") porque o `__user` insistia em
 * ocupar `flex:1` e comprimia tudo lateralmente.
 *
 * Solução: em ≤640px, mudamos para `flex-direction: column` e separamos
 * o ID/Perfil do sino/Sair em duas linhas distintas — primeiro o
 * "quem é" (avatar + nome + ID), depois "o que faz" (Perfil + sino +
 * Sair).
 *
 * Reduzimos também a font-size do greeting de --text-xl para --text-lg
 * para o nome caber confortavelmente sem quebrar de forma agressiva.
 */
@media (max-width: 640px) {
  .rmbz-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rmbz-space-3);
    padding: var(--rmbz-space-4);
  }
  .rmbz-header__user {
    flex: none; /* não esticar — só o que precisa */
    width: 100%;
  }
  .rmbz-header__greeting {
    font-size: var(--rmbz-text-lg); /* era --text-xl, mais compacto em mobile */
  }
  .rmbz-header__actions {
    width: 100%;
    justify-content: flex-end;
    /* Em mobile o sino e o Sair têm de respirar — gap maior que em PC */
    gap: var(--rmbz-space-4);
    /* Separador visual subtil entre user e actions */
    padding-top: var(--rmbz-space-3);
    border-top: 1px solid var(--rmbz-border-subtle);
  }
  /* Avatar ligeiramente mais pequeno em mobile para não dominar visualmente */
  .rmbz-header__user .rmbz-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--rmbz-text-base);
  }
}


/* --- §10.2 AVATAR ---
 * Círculo com inicial do nome (ou foto futura).
 *   <div class="rmbz-avatar rmbz-avatar--lg">A</div>
 */
.rmbz-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-bold);
  letter-spacing: 0;
  user-select: none;
  /* [DS 1.5.56] Aro nítido + sombra de elevação. O avatar agora "flutua"
   * acima do fundo do header — sente-se como botão premium. Combina:
   *   1. border 2px sólido dourado puro — aro nítido (mantido da 1.5.55)
   *   2. ring exterior dourado 4px @ 22% — glow mais visível, "premium"
   *   3. sombra preta de elevação (offset Y + blur) — faz flutuar
   *   4. glow dourado largo 24px @ 18% — luz quente que se espalha
   * As 3 sombras compõem-se em sequência num único box-shadow. */
  border: 2px solid var(--rmbz-brand);
  box-shadow:
    0 0 0 4px rgba(240, 185, 11, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(240, 185, 11, 0.18);
  transition: box-shadow var(--rmbz-duration-normal) var(--rmbz-ease-out),
              transform var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

/* No hover: sombra ainda mais alta + glow dourado mais intenso. O avatar
 * "levanta" 1px e a luz que projecta intensifica — feedback subtil de
 * elemento "vivo" sem exagero. */
.rmbz-avatar:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 5px rgba(240, 185, 11, 0.3),
    0 10px 22px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(240, 185, 11, 0.3);
}

.rmbz-avatar--sm { width: 32px; height: 32px; font-size: var(--rmbz-text-sm); }
.rmbz-avatar--lg { width: 56px; height: 56px; font-size: var(--rmbz-text-2xl); }


/* --- §10.3 ID PILL ---
 * Pequena pílula que mostra ID/telemóvel ao lado do nome.
 *   <span class="rmbz-id-pill"><span class="rmbz-id-pill__label">ID:</span> 84xxx</span>
 */
.rmbz-id-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rmbz-space-1);
  padding: var(--rmbz-space-1) var(--rmbz-space-3);
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-pill);
  font-family: var(--rmbz-font-mono);
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-secondary);
  font-variant-numeric: tabular-nums;
}

.rmbz-id-pill__label {
  color: var(--rmbz-text-muted);
  font-family: var(--rmbz-font-body);
  font-weight: var(--rmbz-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  font-size: var(--rmbz-text-2xs);
}


/* --- §10.4 BELL (sino com badge) ---
 * Sino circular icon-button com badge vermelho de contador.
 *
 *   <button class="rmbz-bell" aria-label="Notificações" aria-expanded="false">
 *     <svg class="rmbz-bell__icon">…</svg>
 *     <span class="rmbz-bell__badge">3</span>
 *   </button>
 */
.rmbz-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: 50%;
  color: var(--rmbz-text-secondary);
  cursor: pointer;
  transition: background var(--rmbz-duration-fast) var(--rmbz-ease-out),
              border-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              color var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-bell:hover,
.rmbz-bell.is-open {
  background: var(--rmbz-bg-hover);
  border-color: var(--rmbz-border-strong);
  color: var(--rmbz-text-primary);
}

.rmbz-bell:focus-visible {
  outline: 2px solid var(--rmbz-brand);
  outline-offset: 2px;
}

.rmbz-bell__icon {
  width: 20px;
  height: 20px;
}

.rmbz-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--rmbz-space-1);
  background: var(--rmbz-danger);
  color: #ffffff;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-bold);
  font-variant-numeric: tabular-nums;
  border-radius: var(--rmbz-radius-pill);
  border: 2px solid var(--rmbz-bg-elevated);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  pointer-events: none;
}


/* --- §10.5 NOTIF DROPDOWN ---
 * Dropdown com lista de notificações. Position absolute por defeito,
 * fixed full-width em mobile.
 *
 *   <div class="rmbz-notif-dropdown" hidden>
 *     <div class="rmbz-notif-dropdown__header">…</div>
 *     <div class="rmbz-notif-dropdown__list">…items…</div>
 *   </div>
 */
.rmbz-notif-dropdown {
  position: absolute;
  top: calc(100% + var(--rmbz-space-2));
  right: 0;
  width: 360px;
  max-width: calc(100vw - 2 * var(--rmbz-space-4));
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-strong);
  border-radius: var(--rmbz-radius-md);
  box-shadow: var(--rmbz-shadow-lg);
  overflow: hidden;
  z-index: 100;
  animation: rmbz-notif-pop var(--rmbz-duration-normal) var(--rmbz-ease-spring);
}

.rmbz-notif-dropdown[hidden] {
  display: none !important;
}

@keyframes rmbz-notif-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rmbz-notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rmbz-space-4);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  background: var(--rmbz-bg-input);
}

.rmbz-notif-dropdown__title {
  margin: 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-base);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
}

.rmbz-notif-dropdown__clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--rmbz-danger);
  font-size: var(--rmbz-text-xs);
  font-weight: var(--rmbz-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-notif-dropdown__clear:hover {
  color: var(--rmbz-danger-strong);
  text-decoration: underline;
}

.rmbz-notif-dropdown__list {
  max-height: 400px;
  overflow-y: auto;
}

.rmbz-notif-dropdown__empty {
  padding: var(--rmbz-space-8) var(--rmbz-space-4);
  text-align: center;
  color: var(--rmbz-text-muted);
  font-size: var(--rmbz-text-sm);
}

.rmbz-notif-dropdown__empty-icon {
  display: block;
  font-size: var(--rmbz-text-3xl);
  opacity: 0.5;
  margin-bottom: var(--rmbz-space-3);
}


/* --- §10.6 NOTIF ITEM ---
 * Item individual da lista de notificações.
 *
 *   <button class="rmbz-notif-item" type="button">
 *     <span class="rmbz-notif-item__indicator"></span>
 *     <div class="rmbz-notif-item__content">
 *       <h5 class="rmbz-notif-item__subject">…</h5>
 *       <p class="rmbz-notif-item__snippet">…</p>
 *       <span class="rmbz-notif-item__date">…</span>
 *     </div>
 *   </button>
 */
.rmbz-notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--rmbz-space-3);
  width: 100%;
  padding: var(--rmbz-space-4);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rmbz-border-subtle);
  cursor: pointer;
  text-align: left;
  transition: background var(--rmbz-duration-fast) var(--rmbz-ease-out);
}

.rmbz-notif-item:hover {
  background: var(--rmbz-bg-hover);
}

.rmbz-notif-item:last-child {
  border-bottom: none;
}

.rmbz-notif-item.is-unread {
  background: var(--rmbz-brand-soft);
}

.rmbz-notif-item.is-unread:hover {
  background: rgba(240, 185, 11, 0.12);
}

.rmbz-notif-item__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rmbz-brand);
  margin-top: var(--rmbz-space-2);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--rmbz-brand-glow);
  visibility: hidden;
}

.rmbz-notif-item.is-unread .rmbz-notif-item__indicator {
  visibility: visible;
}

.rmbz-notif-item__content {
  flex: 1;
  min-width: 0;
}

.rmbz-notif-item__subject {
  margin: 0 0 var(--rmbz-space-1) 0;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  line-height: var(--rmbz-leading-snug);
}

.rmbz-notif-item__snippet {
  margin: 0;
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-muted);
  line-height: var(--rmbz-leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rmbz-notif-item__date {
  display: block;
  margin-top: var(--rmbz-space-2);
  font-size: var(--rmbz-text-2xs);
  color: var(--rmbz-text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}


/* Mobile: dropdown vira full-width fixed centered */
@media (max-width: 600px) {
  .rmbz-notif-dropdown {
    position: fixed;
    top: 80px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 2 * var(--rmbz-space-4));
    max-width: 400px;
  }

  @keyframes rmbz-notif-pop {
    from { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
}


/* ============================================================================
 * §11  AUTH CARD — cartão de login/registo/recuperação
 *
 * Container centrado com header + tabs + body. Padrão visto em
 * Stripe Dashboard, Vercel, Linear (auth screens). Layout vertical com
 * espaço respirável, foco visual claro.
 *
 *   <div class="rmbz-auth-wrapper">
 *     <div class="rmbz-auth-card">
 *       <div class="rmbz-auth-card__header">
 *         <span class="rmbz-auth-card__icon">…SVG…</span>
 *         <h2 class="rmbz-auth-card__title">…</h2>
 *         <p class="rmbz-auth-card__subtitle">…</p>
 *       </div>
 *       <div class="rmbz-tabs rmbz-tabs--auth">…tabs…</div>
 *       <div class="rmbz-auth-card__body">…forms…</div>
 *     </div>
 *   </div>
 * ============================================================================ */

.rmbz-auth-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  padding: var(--rmbz-space-5) var(--rmbz-space-4);
}

.rmbz-auth-card {
  background: var(--rmbz-bg-elevated);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--rmbz-shadow-lg);
  overflow: hidden;
  position: relative;
}

/* Barra dourada no topo (identidade — igual aos feature-cards) */
.rmbz-auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rmbz-brand);
}

.rmbz-auth-card__header {
  text-align: center;
  padding: var(--rmbz-space-8) var(--rmbz-space-6) var(--rmbz-space-5);
  background: linear-gradient(180deg, var(--rmbz-bg-input) 0%, var(--rmbz-bg-elevated) 100%);
  border-bottom: 1px solid var(--rmbz-border-subtle);
}

.rmbz-auth-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--rmbz-space-4);
  background: var(--rmbz-brand-soft);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: var(--rmbz-radius-md);
  color: var(--rmbz-brand);
}

.rmbz-auth-card__icon svg {
  width: 28px;
  height: 28px;
}

.rmbz-auth-card__title {
  margin: 0 0 var(--rmbz-space-2) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-2xl);
  font-weight: var(--rmbz-weight-bold);
  color: var(--rmbz-text-primary);
  line-height: var(--rmbz-leading-tight);
  letter-spacing: var(--rmbz-tracking-tight);
}

.rmbz-auth-card__subtitle {
  margin: 0;
  font-size: var(--rmbz-text-sm);
  color: var(--rmbz-text-muted);
  line-height: var(--rmbz-leading-relaxed);
}

.rmbz-auth-card__body {
  padding: var(--rmbz-space-6);
}

/* Tabs do auth: variante compacta, full-width, sem margin top extra */
.rmbz-tabs--auth {
  margin-top: 0;
  margin-bottom: 0;
  background: var(--rmbz-bg-input);
  border-bottom: 1px solid var(--rmbz-border-subtle);
}

.rmbz-tabs--auth .rmbz-tab,
.rmbz-tabs--auth .tab-link,
.rmbz-tabs--auth .onemz-auth-tab {
  flex: 1;
  justify-content: center;
  padding: var(--rmbz-space-4) var(--rmbz-space-4);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
}

/* Sub-secção dentro do auth-card (ex: "Activação VIP" no registo) */
.rmbz-auth-section {
  background: var(--rmbz-bg-input);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  padding: var(--rmbz-space-5);
  margin-top: var(--rmbz-space-5);
}

.rmbz-auth-section__title {
  margin: 0 0 var(--rmbz-space-4) 0;
  padding-bottom: var(--rmbz-space-3);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
}

/* Form switcher — guard genérico para forms múltiplos no mesmo container.
 * Cada form começa hidden; o que tiver .is-active aparece com animação. */
.rmbz-auth-form,
.onemz-auth-form {
  display: none;
}

.rmbz-auth-form.is-active,
.rmbz-auth-form.active,
.onemz-auth-form.active {
  display: block;
  animation: rmbz-auth-slide var(--rmbz-duration-normal) var(--rmbz-ease-out);
}

@keyframes rmbz-auth-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: cartão sem borda, full-bleed mais agradável */
@media (max-width: 480px) {
  .rmbz-auth-wrapper {
    padding: var(--rmbz-space-3);
  }
  .rmbz-auth-card {
    border-radius: var(--rmbz-radius-md);
  }
  .rmbz-auth-card__header {
    padding: var(--rmbz-space-6) var(--rmbz-space-4) var(--rmbz-space-4);
  }
  .rmbz-auth-card__body {
    padding: var(--rmbz-space-4);
  }
}


/* ============================================================================
 * §15  GATE / EMPTY STATE
 *
 * [DS 1.5.66] Componente para estados de "acesso restrito" / "estado vazio".
 * Substitui os blocos legacy "rmbz-login-warning" e similares com inline
 * styles que existiam no plugin (background:#1e1e1e; padding:40px; ...).
 *
 * Uso típico:
 *   <div class="rmbz-gate rmbz-gate--info">           ← login wall (azul)
 *   <div class="rmbz-gate rmbz-gate--danger">         ← bloqueio admin (vermelho)
 *   <div class="rmbz-gate rmbz-gate--warning">        ← aviso (laranja)
 *
 *   <div class="rmbz-gate rmbz-gate--info">
 *     <div class="rmbz-gate__icon">…SVG cadeado…</div>
 *     <h2 class="rmbz-gate__title">Acesso Restrito</h2>
 *     <p class="rmbz-gate__message">Faça login para...</p>
 *     <div class="rmbz-gate__actions">
 *       <a class="rmbz-btn rmbz-btn--primary" href="...">Fazer Login</a>
 *     </div>
 *   </div>
 *
 * Visual:
 *   - Cartão centrado com max-width 480px
 *   - Ícone grande circular no topo (64×64) — variante de cor
 *   - Título Bricolage display + mensagem secondary
 *   - 1 ou mais CTAs no fim
 *   - Border-top de 3px na cor da variante (reforça semântica)
 *   - Mobile: full-width, padding reduzido, ícone mais pequeno
 * ============================================================================ */

.rmbz-gate {
  position: relative;
  background: var(--rmbz-bg-surface);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  padding: var(--rmbz-space-8) var(--rmbz-space-6) var(--rmbz-space-7);
  max-width: 480px;
  margin: var(--rmbz-space-6) auto;
  text-align: center;
  overflow: hidden;
}

/* [DS 1.5.78] Gate com lista de features — tudo centralizado em PC e mobile.
 * Antes era grid 2 colunas com text-align:left que parecia desalinhado.
 * Agora: stack vertical centrado, max-width controlada, features em coluna
 * única com cards destacados. Comunica melhor a hierarquia: cadeado →
 * título → mensagem → CTA → "ESTES SÃO OS BENEFÍCIOS" → cards. */
.rmbz-gate:has(.rmbz-gate__features) {
  max-width: 560px;
  text-align: center;
  display: block;
  padding: var(--rmbz-space-8) var(--rmbz-space-6);
}
.rmbz-gate:has(.rmbz-gate__features) > .rmbz-gate__icon {
  margin-left: auto;
  margin-right: auto;
}
.rmbz-gate:has(.rmbz-gate__features) > .rmbz-gate__actions {
  justify-content: center;
}

/* Border-top colorido por variante — reforça semântica visualmente */
.rmbz-gate--info::before,
.rmbz-gate--warning::before,
.rmbz-gate--danger::before,
.rmbz-gate--success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.rmbz-gate--info::before    { background: var(--rmbz-info); }
.rmbz-gate--warning::before { background: var(--rmbz-warning); }
.rmbz-gate--danger::before  { background: var(--rmbz-danger); }
.rmbz-gate--success::before { background: var(--rmbz-success); }

/* Ícone grande circular no topo */
.rmbz-gate__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--rmbz-space-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.rmbz-gate__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.rmbz-gate--info    .rmbz-gate__icon {
  background: var(--rmbz-info-soft);
  color: var(--rmbz-info);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.rmbz-gate--warning .rmbz-gate__icon {
  background: var(--rmbz-warning-soft);
  color: var(--rmbz-warning);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}
.rmbz-gate--danger  .rmbz-gate__icon {
  background: var(--rmbz-danger-soft);
  color: var(--rmbz-danger);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}
.rmbz-gate--success .rmbz-gate__icon {
  background: var(--rmbz-success-soft);
  color: var(--rmbz-success);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

/* Título — Bricolage display, peso semibold, próximo do tighter */
.rmbz-gate__title {
  margin: 0 0 var(--rmbz-space-3) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-2xl);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  letter-spacing: var(--rmbz-tracking-tight);
  line-height: var(--rmbz-leading-tight);
}

/* Mensagem — Inter regular, secondary, line-height confortável */
.rmbz-gate__message {
  margin: 0 0 var(--rmbz-space-6) 0;
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-base);
  line-height: 1.6;
}
.rmbz-gate__message:last-child {
  margin-bottom: 0;
}

/* Mensagem secundária menor (ex: "isto pode ocorrer devido a..." ) */
.rmbz-gate__message-aux {
  margin: var(--rmbz-space-3) 0 0 0;
  color: var(--rmbz-text-muted);
  font-size: var(--rmbz-text-sm);
  line-height: 1.5;
}

/* Wrapper de CTAs — flex centrado */
.rmbz-gate__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rmbz-space-3);
}

/* CTAs com largura mínima generosa */
.rmbz-gate__actions .rmbz-btn {
  min-width: 160px;
}

/* [DS 1.5.78] === LISTA DE FEATURES (slot opcional) — REDESENHADA ===
 * Cada feature agora é um CARD com fundo dourado sutil, borda dourada
 * subtle, e ícone destacado em "pílula" sólida dourada. Visualmente
 * comunica "isto é um benefício premium" sem gritar. Stack vertical
 * sempre (PC e mobile) — centralizado dentro do gate. */
.rmbz-gate__features {
  display: flex;
  flex-direction: column;
  gap: var(--rmbz-space-3);
  margin-top: var(--rmbz-space-6);
  padding-top: var(--rmbz-space-6);
  border-top: 1px solid var(--rmbz-border-subtle);
}
.rmbz-gate__features-heading {
  margin: 0 0 var(--rmbz-space-3) 0;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-2xs);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--rmbz-tracking-wider);
  text-align: center;
}

/* Cada feature: card com fundo dourado sutil, borda subtle dourada,
 * hover sobe levemente e intensifica o dourado. */
.rmbz-gate__feature {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-4);
  text-align: left;
  padding: var(--rmbz-space-4);
  background: linear-gradient(
    135deg,
    rgba(240, 185, 11, 0.05) 0%,
    rgba(240, 185, 11, 0.02) 100%
  );
  border: 1px solid rgba(240, 185, 11, 0.15);
  border-radius: var(--rmbz-radius-md);
  transition:
    transform var(--rmbz-duration-normal) var(--rmbz-ease-out),
    border-color var(--rmbz-duration-normal) var(--rmbz-ease-out),
    background var(--rmbz-duration-normal) var(--rmbz-ease-out);
}
.rmbz-gate__feature:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 185, 11, 0.35);
  background: linear-gradient(
    135deg,
    rgba(240, 185, 11, 0.08) 0%,
    rgba(240, 185, 11, 0.04) 100%
  );
}

/* Ícone destacado: pílula sólida dourada com ícone preto em cima.
 * Antes era ícone dourado em fundo dourado-soft (pouco contraste).
 * Agora é fundo dourado SÓLIDO + ícone PRETO — impossível de não ver. */
.rmbz-gate__feature-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--rmbz-radius-md);
  background: var(--rmbz-brand);
  color: var(--rmbz-text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(240, 185, 11, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.rmbz-gate__feature-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 2;
}
.rmbz-gate__feature-text {
  flex: 1;
  min-width: 0;
  /* O gate tem text-align:center; precisamos resetar aqui para que título
   * e descrição da feature alinhem à esquerda dentro do card. */
  text-align: left;
}
.rmbz-gate__feature-title {
  margin: 0 0 2px 0;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  line-height: 1.3;
}
.rmbz-gate__feature-desc {
  margin: 0;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-secondary);
  line-height: 1.5;
}

/* Mobile: cartão full-width, padding reduzido, ícone menor */
@media (max-width: 768px) {
  .rmbz-gate:has(.rmbz-gate__features) {
    max-width: 100%;
    padding: var(--rmbz-space-6) var(--rmbz-space-4);
  }
  .rmbz-gate__features {
    margin-top: var(--rmbz-space-5);
    padding-top: var(--rmbz-space-5);
  }
  /* [DS 1.5.79] CTA full-width em mobile — antes o min-width:160px+padding
   * fazia o botão sair fora do gate em telas estreitas. Anulamos min-width
   * e forçamos box-sizing para que o botão respeite os limites do container. */
  .rmbz-gate__actions {
    flex-direction: column;
    width: 100%;
  }
  .rmbz-gate__actions .rmbz-btn {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 640px) {
  .rmbz-gate {
    padding: var(--rmbz-space-6) var(--rmbz-space-4) var(--rmbz-space-5);
    margin: var(--rmbz-space-4) auto;
    border-radius: var(--rmbz-radius-md);
    max-width: 100%;
  }
  .rmbz-gate__icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--rmbz-space-3);
  }
  .rmbz-gate__icon svg {
    width: 28px;
    height: 28px;
  }
  .rmbz-gate__title {
    font-size: var(--rmbz-text-xl);
  }
  .rmbz-gate__message {
    font-size: var(--rmbz-text-sm);
    margin-bottom: var(--rmbz-space-5);
  }
  /* Features em mobile: padding ajustado */
  .rmbz-gate__feature-icon {
    width: 28px;
    height: 28px;
  }
  .rmbz-gate__feature-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* [DS 1.5.66] Variante simplificada do gate para a "Área Artista" — em vez
 * de mostrar um CTA de login, EMBUTE o shortcode [rmbz_minha_conta] (form
 * de login completo) directamente dentro do wrapper. Por isso não usa o
 * .rmbz-gate padrão (que tem max-width restritivo e padding centrado para
 * CTA simples). Aqui queremos centrar a mensagem informativa em cima e
 * deixar o form respirar com largura confortável. */
.rmbz-area-artista-gate {
  background: var(--rmbz-bg-surface);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  padding: var(--rmbz-space-6) var(--rmbz-space-5);
  margin: var(--rmbz-space-5) auto;
  max-width: 720px;
}
.rmbz-area-artista-gate__msg {
  margin: 0 0 var(--rmbz-space-5) 0;
  text-align: center;
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-base);
  font-family: var(--rmbz-font-body);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .rmbz-area-artista-gate {
    padding: var(--rmbz-space-4) var(--rmbz-space-3);
    margin: var(--rmbz-space-3) auto;
    border-radius: var(--rmbz-radius-md);
  }
  .rmbz-area-artista-gate__msg {
    font-size: var(--rmbz-text-sm);
    margin-bottom: var(--rmbz-space-4);
  }
}


/* ============================================================================
 * §16  ÁREA DO ARTISTA — Painel de Envio
 *
 * [DS 1.5.68] Componentes para o template artist-upload-form.php (Área do
 * Artista, /area-artista/). Substituem progressivamente o markup legacy
 * com inline styles. Esta versão moderniza:
 *   - Container exterior (.rmbz-artist-dashboard)
 *   - Header (título + voltar)
 *   - Alerta de envio pendente (.rmbz-pending-alert)
 *   - Selector de tipo (3 cards Site/Social/Vídeo) (.rmbz-type-selector)
 *
 * O resto do formulário (campos, uploads, paywall) ainda usa <style>
 * legacy no fim do template — modernizado em versão futura. Co-existência
 * é deliberada: classes legacy mantidas em paralelo às novas para o JS
 * antigo (selectType) continuar a funcionar.
 * ============================================================================ */

/* === CONTAINER === */
.rmbz-artist-dashboard {
  background: var(--rmbz-bg-surface);
  border: 1px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-lg);
  padding: var(--rmbz-space-7) var(--rmbz-space-6);
  max-width: 800px;
  width: 100%;
  margin: var(--rmbz-space-5) auto;
  font-family: var(--rmbz-font-body);
  color: var(--rmbz-text-primary);
}

/* === HEADER === */
.rmbz-artist-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rmbz-space-3);
  border-bottom: 1px solid var(--rmbz-border-subtle);
  padding-bottom: var(--rmbz-space-4);
  margin-bottom: var(--rmbz-space-6);
  flex-wrap: wrap;
}
.rmbz-artist-dashboard__title {
  margin: 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-2xl);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  letter-spacing: var(--rmbz-tracking-tight);
  line-height: var(--rmbz-leading-tight);
}

/* === ALERTA DE ENVIO PENDENTE ===
 * Cartão warning quando o utilizador já tem submissão em revisão pela equipa.
 * Layout horizontal: ícone à esquerda, mensagens à direita. */
.rmbz-pending-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--rmbz-space-4);
  background: var(--rmbz-warning-soft);
  border: 1px solid var(--rmbz-warning);
  border-left: 4px solid var(--rmbz-warning);
  border-radius: var(--rmbz-radius-md);
  padding: var(--rmbz-space-5) var(--rmbz-space-5);
  margin-bottom: var(--rmbz-space-5);
  /* z-index alto para ficar por cima do form com filter:blur (legacy) */
  position: relative;
  z-index: 99;
}
.rmbz-pending-alert__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.18);
  color: var(--rmbz-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.rmbz-pending-alert__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}
.rmbz-pending-alert__body {
  flex: 1;
  min-width: 0;
}
.rmbz-pending-alert__title {
  margin: 0 0 var(--rmbz-space-2) 0;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  letter-spacing: var(--rmbz-tracking-tight);
  line-height: var(--rmbz-leading-tight);
}
.rmbz-pending-alert__msg {
  margin: 0 0 var(--rmbz-space-2) 0;
  color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-sm);
  line-height: 1.6;
}
.rmbz-pending-alert__msg strong {
  color: var(--rmbz-warning);
  font-weight: var(--rmbz-weight-semibold);
}
.rmbz-pending-alert__msg-aux {
  margin: 0;
  color: var(--rmbz-text-muted);
  font-size: var(--rmbz-text-xs);
  line-height: 1.5;
}

/* === SELECTOR DE TIPO ===
 * 3 cards grandes para escolher tipo de submissão. Em PC, fila de 3.
 * Em mobile, stack vertical com layout horizontal (ícone à esq, texto à dir).
 * Note: classes legacy .submission-type-selector / .type-buttons-grid /
 * .type-option / .type-icon mantidas em paralelo para JS antigo continuar
 * a funcionar (.type-option.active set por selectType()). */
.rmbz-type-selector {
  margin-bottom: var(--rmbz-space-5);
}
.rmbz-type-selector__heading {
  margin: 0 0 var(--rmbz-space-4) 0;
  text-align: center;
  font-family: var(--rmbz-font-display);
  font-size: var(--rmbz-text-lg);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  letter-spacing: var(--rmbz-tracking-tight);
}
.rmbz-type-selector__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rmbz-space-3);
  width: 100%;
}

/* === TYPE CARD === */
.rmbz-type-card {
  /* Reset de button (alguns são <button>, outros <div> para locked) */
  appearance: none;
  background: var(--rmbz-bg-elevated);
  border: 2px solid var(--rmbz-border-subtle);
  border-radius: var(--rmbz-radius-md);
  padding: var(--rmbz-space-5) var(--rmbz-space-4);
  cursor: pointer;
  text-align: center;
  width: 100%;
  font-family: var(--rmbz-font-body);
  color: var(--rmbz-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rmbz-space-2);
  transition: transform var(--rmbz-duration-fast) var(--rmbz-ease-out),
              border-color var(--rmbz-duration-fast) var(--rmbz-ease-out),
              background var(--rmbz-duration-fast) var(--rmbz-ease-out),
              box-shadow var(--rmbz-duration-fast) var(--rmbz-ease-out);
}
.rmbz-type-card:hover:not([aria-disabled="true"]) {
  border-color: var(--rmbz-brand);
  background: rgba(240, 185, 11, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(240, 185, 11, 0.15);
}

/* Estado activo (set por JS via classe .active legacy mantida) */
.rmbz-type-card.active,
.rmbz-type-card.is-active {
  border-color: var(--rmbz-brand);
  background: rgba(240, 185, 11, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--rmbz-brand);
}

/* Variante --special (Ganhar Vídeo) com cor laranja */
.rmbz-type-card.is-special.active,
.rmbz-type-card.is-special.is-active,
.rmbz-type-card.special-option.active {
  border-color: var(--rmbz-warning);
  background: rgba(245, 158, 11, 0.18);
  box-shadow: 0 0 0 1px var(--rmbz-warning);
}

.rmbz-type-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rmbz-brand-soft);
  color: var(--rmbz-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.rmbz-type-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
/* Variante --special — ícone laranja */
.rmbz-type-card.is-special .rmbz-type-card__icon,
.rmbz-type-card.special-option .rmbz-type-card__icon {
  background: var(--rmbz-warning-soft);
  color: var(--rmbz-warning);
}

.rmbz-type-card__title {
  display: block;
  font-family: var(--rmbz-font-body);
  font-size: var(--rmbz-text-sm);
  font-weight: var(--rmbz-weight-semibold);
  color: var(--rmbz-text-primary);
  line-height: 1.3;
}
.rmbz-type-card__subtitle {
  display: block;
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-text-muted);
  line-height: 1.3;
}

/* === CARD BLOQUEADO === */
.rmbz-type-card--locked {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: var(--rmbz-border-subtle);
  background: var(--rmbz-bg-elevated);
}
.rmbz-type-card--locked:hover {
  /* Anula o hover estado normal — locked não tem feedback visual */
  transform: none;
  border-color: var(--rmbz-border-subtle);
  box-shadow: none;
  background: var(--rmbz-bg-elevated);
}
.rmbz-type-card__icon--locked {
  background: var(--rmbz-bg-input);
  color: var(--rmbz-text-muted);
  box-shadow: 0 0 0 1px var(--rmbz-border-subtle);
}
.rmbz-type-card__lock-reason {
  display: block;
  font-size: var(--rmbz-text-xs);
  color: var(--rmbz-danger);
  font-weight: var(--rmbz-weight-semibold);
  line-height: 1.3;
}

/* === RESPONSIVO ===
 * Em mobile, o selector vira lista vertical com cards horizontais
 * (ícone à esq + texto à dir alinhado). Mais natural para tocar com dedo. */
@media (max-width: 640px) {
  .rmbz-artist-dashboard {
    padding: var(--rmbz-space-5) var(--rmbz-space-4);
    margin: var(--rmbz-space-3) auto;
    border-radius: var(--rmbz-radius-md);
  }
  .rmbz-artist-dashboard__header {
    padding-bottom: var(--rmbz-space-3);
    margin-bottom: var(--rmbz-space-4);
  }
  .rmbz-artist-dashboard__title {
    font-size: var(--rmbz-text-xl);
  }

  .rmbz-pending-alert {
    padding: var(--rmbz-space-4);
    gap: var(--rmbz-space-3);
  }
  .rmbz-pending-alert__icon {
    width: 40px;
    height: 40px;
  }
  .rmbz-pending-alert__icon svg {
    width: 22px;
    height: 22px;
  }
  .rmbz-pending-alert__title {
    font-size: var(--rmbz-text-base);
  }

  .rmbz-type-selector__grid {
    grid-template-columns: 1fr;
    gap: var(--rmbz-space-2);
  }
  .rmbz-type-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--rmbz-space-3) var(--rmbz-space-4);
    gap: var(--rmbz-space-3);
  }
  .rmbz-type-card__icon {
    width: 40px;
    height: 40px;
  }
  .rmbz-type-card__icon svg {
    width: 20px;
    height: 20px;
  }
  /* Em mobile, título e subtítulo viram coluna no body */
  .rmbz-type-card__title,
  .rmbz-type-card__subtitle,
  .rmbz-type-card__lock-reason {
    flex: 1;
    min-width: 0;
  }
}