/* rs.css — GERADO por _claude_qa/work/painel_v2/B_tools/rscss.js a partir de
   tokens.css + rs-base.css + rs-painel.css (nesta ordem). NÃO edite aqui: edite a fonte e gere de novo. */

/* ===== tokens.css ===== */
/* painel_v2 (Agente B): cópia fiel de site reetfps/v2/css/tokens.css. Não editar aqui;
   ao mudar o site, copiar de novo. Fontes: Barlow Condensed hospedada em assets/rs/fonts
   (@font-face no rs-base.css) + Inter (Google Fonts, já no <head> das páginas). */
/* =============================================================================
   tokens.css — reetfps.com v2 (Agente A — Fundação)
   Mesma família visual do app (ReetFPS-Premium-HTML/dist/styles.css + inicio2.css).
   Prefixo --rs-*. NÃO renomear: secoes-a/b/c.css dependem destes nomes.

   Fontes: Barlow Condensed (display, caixa alta, itálico 800 no destaque) + Inter (texto).
   Carregadas por <link> do Google Fonts no <head> do index_v2.php.

   Regras herdadas do app:
   - roxo é a cor principal; dourado = marca premium (kicker, selo de plano);
     verde = ligado/ok/ao vivo. Brilho só no que é ação principal ou ativo.
   - raio entre 5 e 7 px em todo componente (fora círculo, pílula e barrinhas de 2–3 px).
   - cartão sem borda de repouso: profundidade = 3 camadas de sombra; borda só para estado.
   ============================================================================= */
:root {
  /* ---------- fundo e superfícies ---------- */
  --rs-bg:            #060a1a;                 /* fundo da página (= --bg do app) */
  --rs-bg-2:          #0d122d;                 /* faixa alternada de seção */
  --rs-bg-deep:       #04060f;                 /* rodapé, fundo de overlay */
  --rs-surface:       rgba(13, 18, 45, .9);    /* cartão */
  --rs-surface-2:     rgba(24, 21, 76, .92);   /* cartão elevado / hover */
  --rs-surface-3:     rgba(34, 26, 91, .92);   /* cartão ativo */
  --rs-surface-solid: #0d122d;                 /* cartão opaco (sobre imagem) */
  --rs-glass:         rgba(8, 10, 28, .74);    /* header rolado, vidro */
  --rs-line:          rgba(108, 105, 144, .3); /* divisória neutra */
  --rs-line-soft:     rgba(255, 255, 255, .06);
  --rs-line-strong:   rgba(94, 36, 240, .58);  /* borda de estado (ativo/selecionado) */
  --rs-line-accent:   rgba(167, 139, 250, .24);/* contorno de botão secundário */

  /* ---------- roxo da marca ---------- */
  --rs-purple:        #5e24f0;
  --rs-purple-bright: #7135ff;
  --rs-purple-light:  #905fe5;
  --rs-purple-soft:   #c8beec;
  --rs-purple-pale:   #c9bbff;   /* fim do degradê do título */
  --rs-purple-deep:   #33119e;
  --rs-violet:        #8b5cf6;   /* topo do botão principal */
  --rs-violet-dark:   #6d28d9;   /* base do botão principal */
  --rs-violet-line:   rgba(167, 139, 250, .52);

  /* ---------- texto ---------- */
  --rs-text:          #f4f2fb;
  --rs-text-2:        #c9c5dc;   /* texto secundário forte (AA sobre --rs-bg) */
  --rs-muted:         #9c98b4;   /* subtítulo, descrição (AA: 7.0:1 sobre --rs-bg) */
  --rs-muted-2:       #827e96;   /* legenda pequena; só >= 14px */
  --rs-on-accent:     #ffffff;

  /* ---------- semânticas ---------- */
  --rs-gold:          #f7bd32;   /* premium, kicker, preço riscado em destaque */
  --rs-gold-soft:     rgba(247, 189, 50, .14);
  --rs-green:         #18d77c;   /* ok / ligado */
  --rs-green-ui:      #3fdc97;   /* verde de interface (contador, "ao vivo") */
  --rs-green-text:    #4be3a0;   /* texto verde em selo */
  --rs-danger:        #fb7185;
  --rs-discord:       #5865f2;
  --rs-whatsapp:      #25d366;

  /* ---------- cores por grupo (= inicio2.css --in2-c-*) ----------
     Use em um cartão com style="--c: var(--rs-c-pc)" ou classe; .rs-icon e
     .rs-card--group derivam tudo de --c com color-mix. */
  --rs-c-pb:   #7135ff;  /* Point Blank / marca */
  --rs-c-pc:   #4a7dff;  /* desempenho do PC */
  --rs-c-limp: #2fcb8c;  /* limpeza */
  --rs-c-rede: #e9a53c;  /* rede */
  --rs-c-com:  #d9509f;  /* comunidade */
  --rs-c-ferr: #8a6bff;  /* ferramentas e suporte */

  /* ---------- degradês ---------- */
  --rs-grad-btn:   linear-gradient(180deg, var(--rs-violet), var(--rs-violet-dark));
  --rs-grad-title: linear-gradient(90deg, var(--rs-purple-bright), var(--rs-purple-pale));
  --rs-grad-gold:  linear-gradient(90deg, #f7bd32, #ffe08a);
  /* linha do topbar do app: apagada à esquerda, acende à direita */
  --rs-grad-rule:  linear-gradient(90deg, transparent 0%, transparent 40%, rgba(139,92,246,.18) 62%, rgba(167,139,250,.55) 100%);
  --rs-grad-page:
    radial-gradient(1100px 560px at 80% -10%, rgba(70, 28, 196, .2), transparent 62%),
    radial-gradient(800px 520px at 12% 108%, rgba(40, 30, 112, .14), transparent 60%),
    linear-gradient(160deg, #070b1d 0%, #060a1a 48%, #090d24 100%);

  /* ---------- tipografia ---------- */
  --rs-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rs-font-ui:      Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* escala fluida 360 px → 1440 px */
  --rs-fs-hero:  clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);  /* h1 do hero */
  --rs-fs-h2:    clamp(2.1rem, 1.55rem + 2.4vw, 3.5rem);   /* título de seção */
  --rs-fs-h3:    clamp(1.35rem, 1.2rem + .6vw, 1.75rem);   /* título de cartão */
  --rs-fs-h4:    clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --rs-fs-num:   clamp(2.4rem, 1.8rem + 2.6vw, 4.25rem);   /* número grande (preço, FPS) */
  --rs-fs-lead:  clamp(1rem, .95rem + .3vw, 1.2rem);       /* subtítulo */
  --rs-fs-body:  1rem;
  --rs-fs-sm:    .875rem;
  --rs-fs-xs:    .8125rem;
  --rs-fs-label: .8125rem;   /* eyebrow, selo grande (Barlow, caixa alta) */
  --rs-fs-micro: .6875rem;   /* selo pequeno */

  --rs-lh-tight: .95;
  --rs-lh-title: 1.05;
  --rs-lh-body:  1.65;
  --rs-ls-label: .16em;      /* espaçamento de eyebrow/kicker */
  --rs-ls-title: .01em;

  /* ---------- espaçamento (base 4 px) ---------- */
  --rs-sp-1: .25rem;
  --rs-sp-2: .5rem;
  --rs-sp-3: .75rem;
  --rs-sp-4: 1rem;
  --rs-sp-5: 1.25rem;
  --rs-sp-6: 1.5rem;
  --rs-sp-8: 2rem;
  --rs-sp-10: 2.5rem;
  --rs-sp-12: 3rem;
  --rs-sp-16: 4rem;
  --rs-sp-20: 5rem;
  /* ritmo (ref. ExitLag 72/48): 48 px em 390 -> 80 px em 1440; 96/160 entre seções */
  --rs-sp-section: clamp(3rem, 2.25rem + 3.05vw, 5rem);  /* padding vertical de seção */
  --rs-sp-head:    clamp(2rem, 1.625rem + 1.52vw, 3rem); /* cabeçalho de seção -> conteúdo (32 -> 48) */
  --rs-gutter:     clamp(1rem, .6rem + 1.8vw, 2rem);     /* respiro lateral do container */
  --rs-gap:        clamp(1rem, .8rem + .8vw, 1.5rem);    /* gap padrão de grade */
  --rs-pad-card:    clamp(1.25rem, 1.16rem + .38vw, 1.5rem); /* padding de cartão padrão (20 -> 24) */
  --rs-pad-card-lg: clamp(1.5rem, 1.31rem + .76vw, 2rem);    /* cartão grande: plano, canal, quadro (24 -> 32) */
  --rs-container:  1240px;
  --rs-container-narrow: 860px;
  --rs-header-h:   72px;

  /* ---------- raios (app: 5–7 px) ---------- */
  --rs-r-xs:   4px;    /* selo */
  --rs-r-sm:   5px;    /* botão, campo */
  --rs-r-md:   6px;    /* cartão */
  --rs-r-lg:   7px;    /* painel, quadrado de ícone */
  --rs-r-pill: 999px;
  --rs-r-round: 50%;

  /* ---------- sombras (= --sh-* do app) ---------- */
  --rs-sh-card:  0 1px 2px rgba(0,0,0,.45), 0 6px 14px -8px rgba(0,0,0,.55), 0 18px 38px -24px rgba(0,0,0,.75);
  --rs-sh-panel: 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.6), 0 30px 60px -34px rgba(0,0,0,.85);
  --rs-sh-hover: 0 1px 3px rgba(0,0,0,.55), 0 14px 30px -16px rgba(0,0,0,.7), 0 36px 70px -34px rgba(113,53,255,.6);
  --rs-sh-glow:  0 0 24px rgba(124, 58, 237, .28);
  --rs-sh-btn:   inset 0 1px 0 rgba(255,255,255,.19), 0 0 17px rgba(124,58,237,.34);
  --rs-sh-btn-hover: inset 0 1px 0 rgba(255,255,255,.24), 0 0 28px rgba(124,58,237,.55), 0 10px 24px -12px rgba(113,53,255,.8);
  --rs-sh-modal: 0 40px 120px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(167,139,250,.18);

  /* ---------- movimento ---------- */
  --rs-ease:      cubic-bezier(.2, .8, .2, 1);   /* = --ease-card */
  --rs-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --rs-dur-fast:  .15s;
  --rs-dur:       .22s;
  --rs-dur-slow:  .45s;
  --rs-dur-reveal:.7s;

  /* ---------- camadas ---------- */
  --rs-z-base:    1;
  --rs-z-raised:  10;
  --rs-z-sticky:  50;
  --rs-z-drawer:  999;    /* abaixo do header */
  --rs-z-header:  1000;
  --rs-z-modal:   2000;
  --rs-z-popup:   2100;
  --rs-z-toast:   2200;
}

/* ===== rs-base.css ===== */
/* =============================================================================
   rs-base.css — painel_v2 (Agente B)
   Componentes .rs-* do design system do site/app, copiados de
   site reetfps/v2/css/base.css (seções 2 a 10 + prefers-reduced-motion).
   Documentação dos componentes: topo do base.css do site.
   FICOU DE FORA de propósito: o reset de elemento (body, h1–h6, img, p, a) — o painel
   usa Bootstrap e CSS próprio por página, e mudar elemento global quebraria layout —
   e header/hero/footer/modal do site. Depende de tokens.css.
   ============================================================================= */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-800-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

::selection { background: rgba(113, 53, 255, .55); color: #fff; }
:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: 3px; }




/* ---------------------------------------------------------------------------
   3. Cabeçalho de seção
   --------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------
   4. Botões
   --------------------------------------------------------------------------- */






/* ---------------------------------------------------------------------------
   5. Cartão
   --------------------------------------------------------------------------- */




/* ---------------------------------------------------------------------------
   6. Selo
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   7. Quadrado de ícone "vivo"
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   8. Peças pequenas
   --------------------------------------------------------------------------- */



/* retícula: a cantoneira da aba ativa do app (lilás em cima, dourada embaixo) */


/* tooltip do botão de conta */

/* ---------------------------------------------------------------------------
   9. Entrada (.fade-up é a classe que o JS da página observa)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   10. Compatibilidade do .btn (o legacy.css saiu da página)
   Alguns partials mantêm a classe .btn ao lado de .rs-btn só porque o JS da página
   aplica o ripple do clique em '.btn'. Aqui fica o mínimo que o legado dava a esses
   botões: recorte do ripple e a onda do hover (secoes-*.css pode trocar a cor ou
   desligar com content: none).
   --------------------------------------------------------------------------- */


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ===== rs-painel.css ===== */
/* =============================================================================
   rs-painel.css — painel_v2 (Agente B — Design)
   Aplica o design system do site/app (tokens.css + rs-base.css) ao painel SEM mexer
   em markup, PHP ou JS. Carregado por <link> logo antes de </head>, DEPOIS do <style>
   inline da página — por isso, com a mesma especificidade, estas regras vencem.
   Só usa !important onde o <style> inline da página já usa (sidebar, main).

   Como funciona
   1. Ponte de variáveis: as páginas desenham tudo com --rfps-*; aqui elas passam a
      apontar para --rs-* (mesmo roxo, mesmas superfícies, raios de 5–7 px, sombras
      em 3 camadas). Isso sozinho recolore as 25 páginas.
   2. Fonte: 'Orbitron' vira apelido da Barlow Condensed (mesmos arquivos), então todo
      título que pedia Orbitron passa a sair na fonte de exibição do app.
   3. Componentes compartilhados (.rfps-sidebar, .rfps-topbar, .menu-item, .rfps-btn,
      .rfps-card, .rfps-plan-card, .rfps-input, .rfps-tab, .rfps-status…) ganham o
      visual de .nav-item / .rs-btn / .rs-card / .rs-badge do app.
   4. Telas de acesso (login, register, recuperar_senha: #login-reg) no fim.

   Nenhuma regra muda display/position/visibility de algo que o JS liga ou desliga
   (.open, .active, .show, .fade-out, .disabled continuam com o CSS da página).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. Orbitron -> Barlow Condensed (mesmos arquivos do rs-base.css).
   Declarado depois do link do Google Fonts: para o mesmo peso/estilo, a última
   @font-face vence, então a Orbitron do Google deixa de ser usada.
   --------------------------------------------------------------------------- */
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 800; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 900; font-display: swap; size-adjust: 112%; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); }

/* ---------------------------------------------------------------------------
   1. Ponte --rfps-* -> --rs-*
   --------------------------------------------------------------------------- */
:root {
  --rfps-bg: var(--rs-bg);
  --rfps-bg-alt: var(--rs-bg-2);
  --rfps-surface: rgba(16, 20, 50, .92);
  --rfps-surface-hover: var(--rs-surface-2);
  --rfps-primary: var(--rs-purple-bright);
  --rfps-primary-dark: var(--rs-purple);
  --rfps-primary-light: #a78bfa;
  --rfps-accent: var(--rs-gold);
  --rfps-text: var(--rs-text);
  --rfps-text-secondary: var(--rs-text-2);
  --rfps-text-muted: var(--rs-muted);
  --rfps-border: rgba(167, 139, 250, .16);
  --rfps-success: var(--rs-green);
  --rfps-warning: var(--rs-c-rede);
  --rfps-danger: var(--rs-danger);
  --rfps-info: var(--rs-c-pc);
  --rfps-radius-sm: var(--rs-r-sm);
  --rfps-radius-md: var(--rs-r-md);
  --rfps-radius-lg: var(--rs-r-lg);
  --rfps-radius-xl: var(--rs-r-lg);
  --rfps-shadow-sm: var(--rs-sh-card);
  --rfps-shadow-md: var(--rs-sh-card);
  --rfps-shadow-lg: var(--rs-sh-panel);
  --rfps-shadow-glow: var(--rs-sh-hover);
  --rfps-transition: all var(--rs-dur) var(--rs-ease);
}
/* telas de acesso: lá o "accent" é o verde de "criar conta"/cupom, não o dourado */
:root:has(#login-reg) { --rfps-accent: var(--rs-green); }

/* ---------------------------------------------------------------------------
   2. Página
   --------------------------------------------------------------------------- */
body {
  font-family: var(--rs-font-ui);
  color: var(--rs-text);
  background: var(--rs-grad-page);
  background-color: var(--rs-bg);
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar-track { background: var(--rs-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--rs-purple-light); border-radius: 3px; }
#canvas-bg { opacity: .55; }

/* ---------------------------------------------------------------------------
   3. Barra lateral (= .sidebar / .nav-item do app)
   --------------------------------------------------------------------------- */
.rfps-sidebar {
  border-right: 1px solid rgba(139, 92, 246, .28) !important;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(94, 36, 240, .12), transparent 70%),
    linear-gradient(180deg, #0c1028, #070a1b) !important;   /* opaco: no celular a sidebar abre por cima do conteúdo */
  box-shadow: 18px 0 50px rgba(0, 0, 0, .22) !important;
  scrollbar-width: none;
}
.rfps-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 42%;
  background: linear-gradient(var(--rs-purple), transparent);
  opacity: .65;
  pointer-events: none;
}
/* marca: logo centralizada na horizontal e na vertical, com o respiro do painel original
   (padding 32/24, bloco ~108 px, logo 180 px) e, embaixo, o separador da sidebar do app
   (.nav-divider: 1 px, degradê lilás que some nas pontas, 12 px de margem lateral). */
.rfps-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border-bottom: 0;
}
.rfps-brand::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .25), transparent);
  pointer-events: none;
}
.rfps-brand__logo {
  width: min(100%, 180px);
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  object-position: center;
  filter: drop-shadow(0 4px 14px rgba(94, 36, 240, .35));
}

/* cartão da conta (= .account-card do app), com a margem e a altura do original (16 px, ~76 px) */
.rfps-user-card {
  margin: 16px;
  padding: 16px 16px 16px 18px;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: var(--rs-r-lg);
  background: linear-gradient(145deg, rgba(26, 26, 53, .87), rgba(10, 11, 27, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.rfps-user-card__avatar {
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: var(--rs-r-md);
  background: linear-gradient(150deg, #2b2660, #12112b);
}
.rfps-user-card__name {
  font-family: var(--rs-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
}
.rfps-user-card__status {
  margin-top: 3px;
  font-family: var(--rs-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* itens do menu */
/* itens: passo de ~52 px como no original (48 px + 4 px entre itens), texto e ícone maiores */
.rfps-sidebar .menu { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.rfps-sidebar .menu-item > a {
  position: relative;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-sm);
  color: #c3c0d3;
  font-family: var(--rs-font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.rfps-sidebar .menu-item > a > i {
  flex: 0 0 22px;
  width: 22px;
  color: #beb9dc;
  font-size: 1.05rem;
  text-align: center;
  transition: color var(--rs-dur) ease, filter var(--rs-dur) ease;
}
.rfps-sidebar .menu-item:hover > a {
  color: #fff;
  background: rgba(124, 58, 237, .08);
  border-color: transparent;
}
.rfps-sidebar .menu-item.current-item > a {
  color: #fff;
  border-color: rgba(94, 36, 240, .5);
  background: linear-gradient(90deg, rgba(51, 17, 158, .76), rgba(42, 38, 91, .68));
  box-shadow: 0 0 22px rgba(51, 17, 158, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.rfps-sidebar .menu-item.current-item > a::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--rs-purple-bright);
  box-shadow: 0 0 14px var(--rs-purple);
}
.rfps-sidebar .menu-item.current-item > a > i {
  color: var(--rs-purple-soft);
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .5));
}
.rfps-sidebar .menu-item-has-children { list-style: none; padding: 0 12px; }
.rfps-sidebar .sub-menu { margin-top: 3px; border-radius: var(--rs-r-sm); background: rgba(0, 0, 0, .18); }
.rfps-sidebar .sub-menu .menu-item a { min-height: 36px; padding-left: 2.6rem; font-size: .95rem; }
.rfps-sidebar a:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: -2px; }

/* ---------------------------------------------------------------------------
   4. Barra do topo (= .topbar/.window-bar do app)
   --------------------------------------------------------------------------- */
.rfps-topbar {
  height: 68px;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 7, 18, .55) 0%, rgba(11, 9, 25, .6) 30%, rgba(17, 12, 38, .78) 65%, rgba(30, 16, 65, .92) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.rfps-topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rs-grad-rule);
  pointer-events: none;
}
.rfps-btn-group { gap: 6px; padding: 0; border: 0; background: none; }
.rfps-icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(167, 139, 250, .14);
  border-radius: var(--rs-r-md);
  color: #aaa5bc;
  background: rgba(13, 12, 31, .62);
  font-size: 1rem;
}
.rfps-icon-btn:hover {
  color: #fff;
  border-color: rgba(139, 92, 246, .45);
  background: rgba(91, 33, 182, .22);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .22);
}
.rfps-icon-btn__badge {
  border-color: var(--rs-bg);
  border-radius: var(--rs-r-sm);
  background: var(--rs-danger);
  color: #fff;
  font-family: var(--rs-font-display);
  font-size: .75rem;
  box-shadow: 0 0 12px rgba(251, 113, 133, .5);
}
.rfps-menu-toggle { color: var(--rs-text-2); }

/* selo "Painel de Controle" (= .window-status do app) */
.live-badge {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(24, 215, 124, .24);
  border-radius: var(--rs-r-sm);
  color: #b8e6cf;
  background: rgba(24, 215, 124, .07);
  box-shadow: none;
  font-family: var(--rs-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   5. Cabeçalho de seção (= .rs-title / .rs-lead, em tamanho de painel)
   --------------------------------------------------------------------------- */
.rfps-section__title {
  font-family: var(--rs-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: var(--rs-lh-title);
  text-transform: uppercase;
}
.rfps-section__title > i { color: var(--rs-purple-soft); font-size: .8em; font-style: normal; filter: drop-shadow(0 0 8px rgba(113, 53, 255, .55)); }
.rfps-section__subtitle { color: var(--rs-muted); font-size: .95rem; }

/* ---------------------------------------------------------------------------
   6. Botões (= .rs-btn)
   --------------------------------------------------------------------------- */
.rfps-btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-sm);
  font-family: var(--rs-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.rfps-btn--primary {
  border-color: var(--rs-violet-line);
  color: #fff;
  background: var(--rs-grad-btn);
  box-shadow: var(--rs-sh-btn);
  text-shadow: 0 1px 0 rgba(30, 8, 80, .35);
}
.rfps-btn--primary:hover { filter: brightness(1.12); box-shadow: var(--rs-sh-btn-hover); transform: translateY(-1px); color: #fff; }
.rfps-btn--secondary {
  border-color: var(--rs-line-accent);
  color: #e5e1ef;
  background: rgba(10, 10, 25, .82);
}
.rfps-btn--secondary:hover { border-color: rgba(167, 139, 250, .5); background: rgba(76, 29, 149, .2); color: #fff; }
.rfps-btn--accent {
  border-color: rgba(255, 224, 138, .55);
  color: #1b1203;
  background: linear-gradient(180deg, #ffd666, var(--rs-gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px -4px rgba(247, 189, 50, .6);
  text-shadow: none;
}
.rfps-btn--accent:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 26px -4px rgba(247, 189, 50, .8); color: #1b1203; }
.rfps-btn--ghost { color: var(--rs-text-2); background: transparent; }
.rfps-btn--ghost:hover { color: #fff; background: rgba(113, 53, 255, .12); }
.rfps-btn--sm { min-height: 36px; font-size: .95rem; }
.rfps-btn:focus-visible,
.rfps-icon-btn:focus-visible,
.rfps-tab:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   7. Cartões (= .rs-card)
   --------------------------------------------------------------------------- */
.rfps-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--rs-r-md);
  background: linear-gradient(180deg, rgba(20, 24, 58, .92), rgba(10, 13, 34, .94));
  box-shadow: var(--rs-sh-card);
}
.rfps-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(139, 92, 246, .2) 65%, rgba(167, 139, 250, .5) 100%);
  opacity: .8;
  pointer-events: none;
}
.rfps-card:hover { border-color: rgba(167, 139, 250, .16); }
.rfps-card__header { border-bottom-color: var(--rs-line-soft); }
.rfps-card__title {
  font-family: var(--rs-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rfps-card__title > i { color: var(--rs-purple-soft); }

/* planos */
.rfps-plan-card {
  border: 1px solid transparent;
  border-radius: var(--rs-r-md);
  background: linear-gradient(180deg, rgba(20, 24, 58, .92), rgba(10, 13, 34, .94));
  box-shadow: var(--rs-sh-card);
}
.rfps-plan-card:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, .22); box-shadow: var(--rs-sh-hover); }
.rfps-plan-card.featured {
  border-color: var(--rs-line-strong);
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(113, 53, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(30, 22, 84, .95), rgba(10, 13, 34, .96));
  box-shadow: var(--rs-sh-panel), 0 0 40px -14px rgba(113, 53, 255, .7);
}
.rfps-plan-card__badge {
  border-radius: var(--rs-r-xs);
  color: #1b1203;
  background: var(--rs-gold);
  box-shadow: 0 0 14px -4px rgba(247, 189, 50, .7);
  font-family: var(--rs-font-display);
  letter-spacing: .1em;
}
.rfps-plan-card__title {
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.rfps-plan-card__subtitle { color: var(--rs-muted); }
.rfps-plan-card__current {
  font-size: clamp(2.4rem, 2rem + 1.2vw, 3.1rem);
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 24px rgba(113, 53, 255, .35);
}
.rfps-plan-card__old { color: var(--rs-muted-2); text-decoration-color: rgba(251, 113, 133, .8); }
.rfps-plan-card__discount,
.rfps-discount-badge {
  border: 0;
  border-radius: var(--rs-r-xs);
  color: #1b1203;
  background: var(--rs-gold);
  font-family: var(--rs-font-display);
  letter-spacing: .06em;
}

/* status (= .rs-badge) */
.rfps-status,
.rfps-status-badge,
.rfps-badge {
  border-radius: var(--rs-r-xs);
  font-family: var(--rs-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* listas, estatísticas, hardware */
.rfps-stat,
.rfps-hw-card,
.rfps-info-card,
.rfps-list__item { border-radius: var(--rs-r-md); }
.rfps-stat__value,
.rfps-countdown__value,
.rfps-hw-card__value { font-family: var(--rs-font-display); font-weight: 800; letter-spacing: .01em; }
.rfps-stat__label,
.rfps-countdown__label,
.rfps-hw-card__label {
  font-family: var(--rs-font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   8. Formulário
   --------------------------------------------------------------------------- */
.rfps-label {
  color: var(--rs-text-2);
  font-family: var(--rs-font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rfps-input {
  border: 1px solid rgba(167, 139, 250, .18);
  border-radius: var(--rs-r-sm);
  color: var(--rs-text);
  background: rgba(6, 8, 22, .8);
}
.rfps-input::placeholder { color: var(--rs-muted-2); }
.rfps-input:focus {
  border-color: var(--rs-violet);
  outline: none;
  box-shadow: 0 0 0 3px rgba(113, 53, 255, .22);
}

/* abas */
.rfps-tabs { border-bottom-color: var(--rs-line-soft); }
.rfps-tab {
  font-family: var(--rs-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rfps-tab.active { color: #fff; border-bottom-color: var(--rs-purple-bright); }

/* modais do Bootstrap */
.modal-content {
  border: 0;
  border-radius: var(--rs-r-lg);
  background: linear-gradient(180deg, rgba(20, 24, 58, .98), rgba(8, 11, 30, .99));
  box-shadow: var(--rs-sh-modal);
}
.modal-header { border-bottom-color: var(--rs-line-soft); }
.modal-footer { border-top-color: var(--rs-line-soft); }
.modal-title {
  font-family: var(--rs-font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   9. Telas de acesso: login, register, recuperar_senha (#login-reg)
   --------------------------------------------------------------------------- */
.back-home {
  border: 1px solid var(--rs-line-accent);
  border-radius: var(--rs-r-sm);
  color: #e5e1ef;
  background: rgba(10, 10, 25, .82);
  font-family: var(--rs-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.back-home:hover { border-color: rgba(167, 139, 250, .5); background: rgba(76, 29, 149, .2); color: #fff; }

#login-reg .login-reg-main {
  border: 1px solid rgba(167, 139, 250, .14);
  border-radius: var(--rs-r-lg);
  background:
    radial-gradient(460px 220px at 50% 0%, rgba(113, 53, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(20, 24, 58, .94), rgba(9, 12, 32, .96));
  box-shadow: var(--rs-sh-panel), 0 0 60px -30px rgba(113, 53, 255, .6);
}
#login-reg .login-reg-main::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 25%, rgba(139, 92, 246, .3) 60%, rgba(167, 139, 250, .7) 100%);
  background-size: auto;
  animation: none;
  box-shadow: none;
}
#login-reg .logo-container img { filter: drop-shadow(0 4px 14px rgba(94, 36, 240, .35)); }
#login-reg h4 {
  font-family: var(--rs-font-display);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: var(--rs-lh-tight);
  padding-right: .14em;
  background: linear-gradient(90deg, #fff 0%, #fff 45%, var(--rs-purple-pale) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: none;
}
#login-reg .subtitle { color: var(--rs-muted); }

#login-reg .field__input {
  border: 1px solid rgba(167, 139, 250, .18);
  border-radius: var(--rs-r-sm);
  background: rgba(6, 8, 22, .8);
}
#login-reg .field__input::placeholder { color: var(--rs-muted-2); }
#login-reg .field__input:focus {
  border-color: var(--rs-violet);
  background: rgba(6, 8, 22, .92);
  box-shadow: 0 0 0 3px rgba(113, 53, 255, .22);
}
#login-reg .field:focus-within { transform: none; }
#login-reg .field_v1::before,
#login-reg .field_v2::before,
#login-reg .field::before { color: var(--rs-muted-2); }
#login-reg .field:focus-within::before { color: var(--rs-purple-soft); transform: translateY(-50%); }
#login-reg .recover p { color: var(--rs-muted); }
#login-reg .recover a { color: var(--rs-purple-soft); }

#login-reg .cmn-btn {
  min-height: 52px;
  padding-block: 0;
  border: 1px solid var(--rs-violet-line);
  border-radius: var(--rs-r-sm);
  background: var(--rs-grad-btn);
  box-shadow: var(--rs-sh-btn);
  font-family: var(--rs-font-display);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(30, 8, 80, .35);
}
/* o login/register/recuperar_senha tinham um brilho branco que atravessava o botão no hover
   (.cmn-btn::before, rgba(255,255,255,.2) animado): somado ao brightness, o botão inteiro
   ficava quase branco. Aqui: sem o brilho, hover = um tom acima do roxo (como o .rs-btn--primary
   do app), texto sempre branco; foco visível com anel lilás. */
#login-reg .cmn-btn::before { content: none; display: none; }
#login-reg .cmn-btn:hover {
  filter: brightness(1.08);
  color: #fff;
  border-color: rgba(167, 139, 250, .7);
  box-shadow: var(--rs-sh-btn-hover);
  transform: translateY(-1px);
}
#login-reg .cmn-btn:active { filter: brightness(.98); transform: translateY(0); }

/* campo com senha salva (autopreenchido pelo navegador): o Chrome pinta o fundo de azul quase branco.
   A página escondia isso com a sombra interna de 1000px, mas o #login-reg .field__input:focus acima
   trocava a sombra no foco e o campo ficava claro com texto branco. Aqui a sombra escura volta em
   repouso, hover e foco (com o anel de foco junto). */
#login-reg .field__input:-webkit-autofill,
#login-reg .field__input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--rs-text);
  caret-color: var(--rs-text);
  -webkit-box-shadow: 0 0 0 1000px #0b0f26 inset;
  box-shadow: 0 0 0 1000px #0b0f26 inset;
  transition: background-color 9999s ease 0s;
}
#login-reg .field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--rs-text);
  -webkit-box-shadow: 0 0 0 1000px #0b0f26 inset, 0 0 0 3px rgba(113, 53, 255, .22);
  box-shadow: 0 0 0 1000px #0b0f26 inset, 0 0 0 3px rgba(113, 53, 255, .22);
}
#login-reg .cmn-btn:focus-visible {
  outline: 2px solid var(--rs-purple-soft);
  outline-offset: 3px;
  box-shadow: var(--rs-sh-btn), 0 0 0 5px rgba(113, 53, 255, .25);
}

#login-reg .or p {
  color: var(--rs-muted-2);
  font-family: var(--rs-font-display);
  font-weight: 700;
  letter-spacing: .22em;
}
#login-reg .account {
  border: 1px solid rgba(24, 215, 124, .18);
  border-radius: var(--rs-r-md);
  background: linear-gradient(180deg, rgba(24, 215, 124, .06), rgba(6, 10, 26, .5));
}
#login-reg .account p { color: var(--rs-text-2); }
#login-reg .account a {
  color: var(--rs-green-text);
  font-family: var(--rs-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* cupom ativo (= .rs-card--group na cor verde) */
#login-reg .coupon-banner-outer {
  border: 1px solid rgba(24, 215, 124, .24);
  border-top: 2px solid var(--rs-green);
  border-radius: var(--rs-r-md);
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(24, 215, 124, .14), transparent 70%),
    linear-gradient(180deg, rgba(14, 30, 40, .94), rgba(6, 10, 26, .94));
  box-shadow: var(--rs-sh-card);
}
#login-reg .coupon-icon { border-radius: var(--rs-r-lg); }
#login-reg .coupon-text strong {
  font-family: var(--rs-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#login-reg .coupon-code {
  border-radius: var(--rs-r-sm);
  font-family: var(--rs-font-display);
  font-size: 1.2rem;
  letter-spacing: .12em;
}
#id-rect-account { border-radius: var(--rs-r-sm); }

/* seletor de país do telefone (intl-tel-input, register): o .iti da página tem z-index:1 e
   vira um contexto de empilhamento ABAIXO dos ícones dos outros campos (.field::before,
   z-index:2), então a lista aberta ficava atrás deles. Aqui o .iti sobe acima e a lista fica opaca. */
#login-reg .iti { z-index: 20; }
#login-reg .iti__country-list {
  border-radius: var(--rs-r-md);
  background: var(--rs-surface-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--rs-sh-modal);
}
/* celular: a página centralizava a lista na caixinha da bandeira (left:50% + translateX(-50%)),
   e metade dela saía pela esquerda da tela; aqui ela alinha à esquerda do campo e cabe na tela */
@media (max-width: 640px) {
  #login-reg .iti__country-list {
    left: 0 !important;
    width: min(300px, calc(100vw - 48px));
    transform: none;
  }
}

/* toasts próprios das telas de acesso */
.reet-toast { border-radius: var(--rs-r-md); box-shadow: var(--rs-sh-panel); }
.reet-toast-title { font-family: var(--rs-font-display); letter-spacing: .06em; }
.reet-toast-icon, .reet-toast-close { border-radius: var(--rs-r-sm); }

/* ---------------------------------------------------------------------------
   10. Celular: a barra do topo (selo + Renovar + 3 ícones) passava de 390 px e
   criava rolagem horizontal em todas as páginas logadas; as abas também.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .rfps-topbar { padding: 0 12px; gap: 8px; }
  .rfps-topbar__left { gap: 8px; min-width: 0; }
  .rfps-topbar__left .live-badge { display: none; }
  .rfps-topbar__right { gap: 6px; min-width: 0; }
  .rfps-topbar__right > .rfps-btn { min-height: 36px; padding: 0 .7rem !important; font-size: .9rem !important; }
  .rfps-btn-group { gap: 4px; }
  .rfps-icon-btn { width: 36px; height: 36px; }
  .rfps-tabs { overflow-x: auto; scrollbar-width: none; }
  .rfps-tab { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   11. Cartões próprios das páginas que ainda usavam o degradê antigo
   (rgba(124,58,237,.1) -> rgba(18,8,33,.8), borda roxa sempre acesa).
   Só superfície, borda, raio e sombra: padding, grade e :hover/.active da
   página continuam valendo.
   afiliado: .affiliate-step .stat-card .obs-manager-card | keys: .rfps-key-card
   planos: .checkout-section .pay-summary .rfps-feature-category
   politica-reembolso: .term-block | terms: .term-item
   suporte-remoto: .rfps-support-card .support-center-card .rfps-info-card
   --------------------------------------------------------------------------- */
.affiliate-step,
.stat-card,
.obs-manager-card,
.rfps-key-card,
.checkout-section,
.pay-summary,
.rfps-feature-category,
.term-block,
.term-item,
.rfps-support-card,
.support-center-card,
.rfps-info-card {
  border-color: rgba(167, 139, 250, .1);
  border-radius: var(--rs-r-md);
  background: linear-gradient(180deg, rgba(20, 24, 58, .92), rgba(10, 13, 34, .94));
  box-shadow: var(--rs-sh-card);
}
.affiliate-step:hover,
.stat-card:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, .24); box-shadow: var(--rs-sh-hover); }

/* glifo grande do passo: cor de destaque do app */
.affiliate-step .icon { color: var(--rs-purple-soft); filter: drop-shadow(0 0 10px rgba(113, 53, 255, .55)); }
.affiliate-step h5,
.stat-card h5 {
  color: var(--rs-muted);
  font-family: var(--rs-font-display);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* quadrado do ícone da estatística = .rs-icon--lg */
.stat-card .icon {
  border-radius: var(--rs-r-lg);
  color: color-mix(in srgb, var(--rs-c-pb) 62%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rs-c-pb) 45%, #0a0d24), color-mix(in srgb, var(--rs-c-pb) 30%, #070a1c));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-c-pb) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .16),
              0 4px 12px -6px color-mix(in srgb, var(--rs-c-pb) 70%, transparent);
}
.stat-card:hover .icon { color: #fff; }

/* ---------------------------------------------------------------------------
   12. Contraste do botão dourado quando é <a>: várias páginas têm
   a.rfps-btn { color: inherit } (0,1,1), que vencia .rfps-btn--accent e deixava
   texto claro sobre o dourado (ex.: "Renovar" na topbar). Já era assim antes.
   --------------------------------------------------------------------------- */
a.rfps-btn--accent,
a.rfps-btn--accent:hover,
a.rfps-btn--accent:focus,
a.rfps-btn--accent:active,
a.rfps-btn--accent:visited { color: #1b1203; }

/* ---------------------------------------------------------------------------
   13. Banner promocional do profile (.rfps-promo-hero): era um degradê violeta
   saturado (#1a012e -> #4b00b3 -> roxo). Agora = destaque do app (.rs-card--featured):
   navy com brilho roxo, borda de estado e o dourado só no selo e no preço.
   --------------------------------------------------------------------------- */
.rfps-promo-hero {
  border: 1px solid var(--rs-line-strong);
  border-radius: var(--rs-r-lg);
  background:
    radial-gradient(620px 300px at 85% 0%, rgba(113, 53, 255, .34), transparent 70%),
    radial-gradient(420px 240px at 0% 100%, rgba(247, 189, 50, .08), transparent 70%),
    linear-gradient(180deg, rgba(30, 22, 84, .96), rgba(10, 13, 34, .97));
  box-shadow: var(--rs-sh-panel), 0 0 50px -16px rgba(113, 53, 255, .75);
}
.rfps-promo-hero::before { opacity: .25; }
.rfps-promo-hero__title {
  font-style: italic;
  font-weight: 800;
  line-height: var(--rs-lh-tight);
  text-transform: uppercase;
}
.rfps-promo-card {
  border: 1px solid rgba(167, 139, 250, .16);
  border-radius: var(--rs-r-md);
  background: linear-gradient(180deg, rgba(20, 24, 58, .9), rgba(8, 11, 30, .92));
  box-shadow: var(--rs-sh-card);
}
.rfps-promo-card__price { font-style: italic; }

/* ---------------------------------------------------------------------------
   14. SweetAlert2 no padrão do app (.rs-swal): use no Swal.fire
   customClass: { popup: 'rs-swal', icon: 'rs-swal__icon', title: 'rs-swal__title',
                  htmlContainer: 'rs-swal__text', actions: 'rs-swal__actions',
                  confirmButton: 'rs-swal__btn rs-swal__btn--primary', cancelButton: 'rs-swal__btn rs-swal__btn--secondary' },
   buttonsStyling: false e, para sucesso, iconHtml: '<i class="fa-solid fa-check"></i>'.
   Ícone = quadrado .rs-icon verde; título Barlow; texto Inter; fundo/raio/sombra dos tokens.
   --------------------------------------------------------------------------- */
.swal2-container:has(.rs-swal) { background: rgba(4, 6, 15, .8) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.swal2-popup.rs-swal {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  padding: 34px 32px 30px;
  border: 1px solid var(--rs-line-strong);
  border-radius: var(--rs-r-lg);
  color: var(--rs-text);
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(113, 53, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(30, 22, 84, .97), rgba(10, 13, 34, .98));
  box-shadow: var(--rs-sh-modal), 0 0 40px -14px rgba(113, 53, 255, .7);
  font-family: var(--rs-font-ui);
}
.swal2-popup.rs-swal::before {                 /* fio do topo, como no .rs-card */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(139, 92, 246, .2) 65%, rgba(167, 139, 250, .5) 100%);
  pointer-events: none;
}
.swal2-popup.rs-swal .swal2-icon.rs-swal__icon {
  --rs-c: var(--rs-green);
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border: 0;
  border-radius: var(--rs-r-lg);
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rs-c) 55%, #0a0d24), color-mix(in srgb, var(--rs-c) 32%, #070a1c));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-c) 60%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .16),
              0 4px 14px -6px color-mix(in srgb, var(--rs-c) 75%, transparent);
  font-size: 22px;
}
.swal2-popup.rs-swal .swal2-icon.rs-swal__icon .swal2-icon-content { font-size: 22px; }
.swal2-popup.rs-swal .swal2-title.rs-swal__title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--rs-text);
  font-family: var(--rs-font-display);
  font-size: 30px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.swal2-popup.rs-swal .swal2-html-container.rs-swal__text {
  margin: 0;
  padding: 0;
  color: var(--rs-muted);
  font-family: var(--rs-font-ui);
  font-size: 15px;
  line-height: 1.6;
}
.swal2-popup.rs-swal .swal2-html-container.rs-swal__text b,
.swal2-popup.rs-swal .swal2-html-container.rs-swal__text strong { color: var(--rs-text); }
.swal2-popup.rs-swal .swal2-actions.rs-swal__actions { display: flex; gap: 10px; width: 100%; margin: 26px 0 0; padding: 0; }
/* botões = .rs-btn do app (o componente saiu do rs-base na limpeza; aqui só o necessário) */
.swal2-popup.rs-swal .rs-swal__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  margin: 0;
  padding: 0 1.2em;
  border: 1px solid transparent;
  border-radius: var(--rs-r-sm);
  font-family: var(--rs-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--rs-dur) ease, box-shadow var(--rs-dur) ease, border-color var(--rs-dur) ease, color var(--rs-dur) ease;
}
.swal2-popup.rs-swal .rs-swal__btn--primary {
  border-color: var(--rs-violet-line);
  color: #fff;
  background: var(--rs-grad-btn);
  box-shadow: var(--rs-sh-btn);
  text-shadow: 0 1px 0 rgba(30, 8, 80, .35);
}
.swal2-popup.rs-swal .rs-swal__btn--primary:hover { filter: brightness(1.12); box-shadow: var(--rs-sh-btn-hover); }
.swal2-popup.rs-swal .rs-swal__btn--secondary { border-color: var(--rs-line-accent); color: #e5e1ef; background: rgba(10, 10, 25, .82); }
.swal2-popup.rs-swal .rs-swal__btn--secondary:hover { border-color: rgba(167, 139, 250, .5); color: #fff; }
.swal2-popup.rs-swal .rs-swal__btn:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: 3px; }
@media (max-width: 520px) {
  .swal2-popup.rs-swal { padding: 30px 22px 24px; }
  .swal2-popup.rs-swal .swal2-actions.rs-swal__actions { flex-direction: column; }
  .swal2-popup.rs-swal .rs-swal__btn { flex: 0 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------------------
   15. Toast "Download iniciado" (assets/js/painel-toast.js): não bloqueia, some em ~5 s.
   Cartão do app (navy, fio no topo, raio 6), quadrado de ícone verde, título Barlow.
   --------------------------------------------------------------------------- */
.rs-toast {
  position: fixed;
  right: 24px;
  bottom: 96px;          /* acima do botão do chat de suporte (canto inferior direito) */
  z-index: 10050;        /* acima da sidebar (9999) */
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 12px 14px 14px;
  border: 1px solid rgba(24, 215, 124, .24);
  border-radius: var(--rs-r-md);
  color: var(--rs-text);
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(24, 215, 124, .12), transparent 70%),
    linear-gradient(180deg, rgba(20, 24, 58, .98), rgba(8, 11, 30, .99));
  box-shadow: var(--rs-sh-panel), 0 0 30px -16px rgba(24, 215, 124, .6);
  font-family: var(--rs-font-ui);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--rs-dur) ease, transform var(--rs-dur) var(--rs-ease);
}
.rs-toast[hidden] { display: none; }
.rs-toast.is-visible { opacity: 1; transform: none; }
.rs-toast::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(24, 215, 124, .25) 65%, rgba(75, 227, 160, .6) 100%);
  pointer-events: none;
}
.rs-toast__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rs-r-lg);
  color: #fff;
  background: linear-gradient(180deg, rgba(24, 215, 124, .55), rgba(24, 215, 124, .3));
  box-shadow: inset 0 0 0 1px rgba(24, 215, 124, .55), inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 12px -6px rgba(24, 215, 124, .7);
}
.rs-toast__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.rs-toast__title {
  font-family: var(--rs-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}
.rs-toast__text { color: var(--rs-muted); font-size: .875rem; line-height: 1.45; }
.rs-toast__text a { color: var(--rs-green-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rs-toast__text a:hover { color: #fff; }
.rs-toast__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(167, 139, 250, .14);
  border-radius: var(--rs-r-sm);
  color: #aaa5bc;
  background: rgba(13, 12, 31, .62);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rs-toast__close:hover { color: #fff; border-color: rgba(139, 92, 246, .45); }
.rs-toast a:focus-visible,
.rs-toast__close:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: 2px; }
@media (max-width: 600px) {
  /* celular: no topo, longe do botão e do balão do chat de suporte */
  .rs-toast { top: 12px; right: 12px; bottom: auto; left: 12px; width: auto; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-toast { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   16. keys.php: card "Quer testar antes de comprar?" (key de teste pelo WhatsApp)
   Com 3 colunas, o "Como Ativar" (.rfps-key-card--steps) ocupa 2 linhas e o card novo
   (.rfps-key-card--trial) preenche o vazio embaixo da ativação; com menos colunas, os
   dois ocupam a linha inteira (sem buraco no grid).
   --------------------------------------------------------------------------- */
.rfps-keys-grid > .rfps-key-card--trial,
.rfps-keys-grid > .rfps-key-card--steps { grid-column: 1 / -1; }
@media (min-width: 1292px) {               /* 1292 = sidebar 280 + padding + 3 colunas de 300 */
  .rfps-keys-grid > .rfps-key-card--steps { grid-column: auto; grid-row: span 2; }
  .rfps-keys-grid > .rfps-key-card--trial { grid-column: span 2; }
}
.rs-trial { border-color: rgba(37, 211, 102, .2); }
.rs-trial::before { background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(37, 211, 102, .25) 65%, rgba(75, 227, 160, .6) 100%); }
.rs-trial__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rs-trial__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--rs-r-lg);
  color: #fff;
  background: linear-gradient(180deg, rgba(37, 211, 102, .55), rgba(37, 211, 102, .3));
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .55), inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 12px -6px rgba(37, 211, 102, .7);
  font-size: 24px;
}
.rs-trial__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--rs-green-text);
  font-family: var(--rs-font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rs-trial__title {
  margin: 0;
  color: var(--rs-text);
  font-family: var(--rs-font-display);
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.rs-trial__text { margin: 0 0 16px; color: var(--rs-muted); font-size: .95rem; line-height: 1.6; }
.rs-trial__code {
  padding: 2px 8px;
  border-radius: var(--rs-r-xs);
  color: var(--rs-text);
  background: rgba(37, 211, 102, .12);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .32);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  font-weight: 700;
  letter-spacing: .04em;
  user-select: all;           /* um clique seleciona a palavra inteira para copiar */
}
.rs-trial__steps { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: rstrial; }
.rs-trial__steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--rs-text-2);
  font-size: .925rem;
  line-height: 1.45;
  counter-increment: rstrial;
}
.rs-trial__steps li::before {
  content: counter(rstrial);
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rs-r-sm);
  color: var(--rs-green-text);
  background: rgba(37, 211, 102, .1);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .3);
  font-family: var(--rs-font-display);
  font-size: .9rem;
  font-weight: 700;
}
.rs-trial__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  min-height: 48px;
  padding: 0 1.2em;
  border: 1px solid rgba(37, 211, 102, .55);
  border-radius: var(--rs-r-sm);
  color: #fff;
  background: linear-gradient(180deg, #2fd772, #1ea957);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 18px -4px rgba(37, 211, 102, .55);
  font-family: var(--rs-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 40, 15, .35);
  transition: filter var(--rs-dur) ease, box-shadow var(--rs-dur) ease, transform var(--rs-dur) var(--rs-ease);
}
.rs-trial__btn:hover { color: #fff; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 26px -4px rgba(37, 211, 102, .75); transform: translateY(-1px); }
.rs-trial__btn:focus-visible { outline: 2px solid var(--rs-purple-soft); outline-offset: 3px; }