/* ================================================================
   THEME — 5 cores principais. Editar aqui ou injetar via backend
   (str_replace, ou <style> antes de </head>) para white-label
   por domínio.
   ================================================================ */

/* Ícones — Phosphor Icons (webfont via CDN). Uso: <i class="ph ph-nome"></i>
   (outline) ou <i class="ph-fill ph-nome"></i> (preenchido). Tamanho via
   font-size, cor via color. @import precisa vir antes das demais regras. */
@import url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css");
@import url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css");

:root{
  --color-primary:   #00ff03;
  --color-secondary: #00b300;
  --color-bg:        #f5f7f5;
  --color-surface:   #ffffff;
  --color-text:      #0a0f0a;

  /* derivadas — não precisam ir ao banco */
  --c-on-primary: #000;
  --c-accent:     var(--color-secondary);
  --c-text-muted: color-mix(in srgb, var(--color-text) 45%, transparent);
  --c-text-soft:  color-mix(in srgb, var(--color-text) 72%, transparent);
  --c-border:     color-mix(in srgb, var(--color-text) 9%, transparent);
  --c-surface-2:  color-mix(in srgb, var(--color-bg) 60%, var(--color-surface) 40%);
  --c-primary-hover: color-mix(in srgb, var(--color-primary) 85%, var(--color-text) 15%);
  --c-primary-soft:  color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  --c-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  --c-success: #10b981;
  --c-danger:  #ef4444;

  /* PIX — cor oficial da marca; fixa, NÃO muda por tenant */
  --c-pix:      #32bcad;
  --c-pix-dark: #279d90;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 6px 22px -10px rgba(0,0,0,.14);
  --shadow-lg: 0 20px 50px -16px rgba(0,0,0,.16);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* "only light" = PROIBIR o navegador de mexer nas nossas cores (o "only" existe
     exatamente pra isso). Sem isso, o modo escuro do navegador/aparelho re-escurece
     a tela clara e ela vira um cinza ilegível — medido: luminância caindo de 242
     pra 32. Antes tentei "light dark"; funciona contra o force-dark do Chromium,
     mas deixa os controles nativos seguindo o aparelho. Com "only" o app manda
     sozinho: quem escolhe a paleta é o data-theme (boot script do v3render). */
  color-scheme: only light;
}

/* Samsung Internet não desliga o modo escuro dele pelo color-scheme: ele procura
   um bloco prefers-color-scheme no CSS pra saber se o site TEM tema escuro
   próprio. O nosso é aplicado por JS (data-theme), então pra ele o site parecia
   não ter — e o filtro entrava por cima. Só o color-scheme aqui dentro não
   bastou: o detector quer regra que TROQUE COR de verdade. As regras abaixo
   são isso — e como o boot seta data-theme antes do paint, :root:not([data-theme])
   nunca pinta com JS ligado (vale só como fallback sem JS). Não atropela quem
   escolheu Claro em Minha Conta > Aparência.
   Limite conhecido: no modo escuro PADRÃO do Samsung Internet o filtro entra
   mesmo assim (não há opt-out por site); isto atende o Labs "usar tema escuro
   do site" e o Adaptive Force Dark (v25+), que respeitam a declaração. */
@media (prefers-color-scheme: dark){
  :root[data-theme="dark"]{ color-scheme: only dark; }
  :root:not([data-theme]){
    color-scheme: dark;
    --color-bg:#0e0f13; --color-surface:#191b21; --color-text:#f2f3f5;
  }
  :root:not([data-theme]) body{ background-color:#0e0f13; color:#f2f3f5; }
}

/* Aviso "reinstale o app" (bindPwaUpdateNote no app.js): só aparece dentro
   do app instalado no iOS quando o ícone/manifest mudou de versão. */
.pwa-note{
  position:fixed; left:12px; right:12px;
  bottom:calc(86px + env(safe-area-inset-bottom));
  z-index:60; display:flex; gap:10px; align-items:center;
  padding:12px 14px; border-radius:14px;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--c-border); box-shadow:var(--shadow-lg);
  font-size:13.5px; line-height:1.35;
}
.pwa-note .act{
  margin-left:auto; flex-shrink:0; border:0; cursor:pointer;
  background:var(--color-primary); color:var(--c-on-primary);
  font:700 13px var(--font-sans); padding:9px 12px; border-radius:10px;
}
.pwa-note .x{
  flex-shrink:0; border:0; background:none; color:inherit;
  opacity:.6; font-size:16px; cursor:pointer; padding:4px;
}

/* ================================================================
   MODO ESCURO — ativado por [data-theme="dark"] no <html> (o boot
   script do v3render decide claro/escuro por plataforma/dispositivo).
   Só troca os NEUTROS (bg/surface/text) + sombras: todos os tokens
   derivados (bordas, textos suaves, surface-2, primary-soft, scrollbar)
   recalculam sozinhos via color-mix. primary/secondary seguem a marca.
   Um tenant pode injetar a própria paleta escura ('dark' no themes.php);
   sem ela, valem estes defaults.
   ================================================================ */
:root[data-theme="dark"]{
  --color-bg:      #0e0f13;
  --color-surface: #191b21;
  --color-text:    #f2f3f5;
  --c-border:  color-mix(in srgb, var(--color-text) 14%, transparent);
  --shadow:    0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 55px -18px rgba(0,0,0,.66);
  /* only: idem ao claro — o navegador não re-escurece o que já é escuro */
  color-scheme: only dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

/* base dos ícones Phosphor: alinham como os SVGs antigos */
i.ph, i.ph-fill{display:inline-block; line-height:1; vertical-align:-.125em}
html{overscroll-behavior-y:none}

button,input,select,textarea{font-family:inherit}
a,button{-webkit-tap-highlight-color:transparent}

::selection{
  background:color-mix(in srgb, var(--color-primary) 30%, transparent);
  color:var(--color-text);
}

/* foco por teclado visível e consistente em todo o app */
:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
  border-radius:4px;
}

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

/* ================================================================
   Scrollbar personalizada (combina com o tema)
   ================================================================ */
*{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--color-primary) 45%, var(--c-border)) transparent;
}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--color-primary) 38%, var(--c-border));
  border:2px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--color-primary) 65%, var(--c-border));
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{background:transparent}
body{
  min-height:100vh; min-height:100dvh;
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative; overflow-x:hidden;
  padding-top:78px;
  /* 84px cobria só a barra do nav; a FAB do PIX sobe -28px (margin-top) e
     ficava por cima do último conteúdo. ~104px libera a barra + a FAB + folga. */
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
}
body::before{
  content:""; position:fixed; pointer-events:none; z-index:0;
  width:120vw; height:55vh; top:-30vh; left:-10vw;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 65%);
  filter:blur(70px); opacity:.55;
}
body::after{
  content:""; position:fixed; pointer-events:none; z-index:0;
  width:90vw; height:40vh; bottom:-25vh; right:-20vw;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 65%);
  filter:blur(80px); opacity:.4;
}

.shell{
  position:relative; z-index:1;
  max-width:480px; margin:0 auto;
  padding:18px 18px 18px;
  display:flex; flex-direction:column; gap:18px;
}

/* ================================================================
   HEADER FIXO (logo + saldo + ações)
   ================================================================ */
.topbar-fixed{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--c-border);
  box-shadow:0 4px 16px -10px rgba(0,0,0,.18);
}

/* hanging tab — extensão do header com a Unidade do usuário */
.unit-tag{
  position:absolute;
  top:100%; right:0;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 14px 5px 12px;
  background:color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:var(--color-text);
  border:1px solid var(--c-border);
  border-top:0; border-right:0;
  border-radius:0 0 0 12px;
  font-size:11px; font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  z-index:1;
}
.unit-tag .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.unit-tag b{color:var(--c-accent); font-weight:800; margin-left:2px}

/* Em telas >= 481px o app fica num "card" 480px central:
   a unit-tag deixa de tocar a borda direita da tela,
   então ganha border-right e radius nos dois cantos inferiores. */
@media (min-width:481px){
  .unit-tag{
    border-right:1px solid var(--c-border);
    border-radius:0 0 12px 12px;
  }
}

.topbar-inner{
  max-width:480px; margin:0 auto;
  padding:8px 14px;
  display:flex; flex-direction:column; gap:4px;
  position:relative;             /* pra .unit-tag se ancorar aqui (e não na tela inteira) */
}
.topbar-row{
  display:flex; align-items:center; gap:8px;
}
.topbar-row .logo{flex-shrink:1; min-width:0; line-height:0; transition:opacity .15s}
.topbar-row .logo:hover{opacity:.85}
/* height via max-height + max-width:100% → encolhe proporcional em telas estreitas
   (com o toggle de tema o header ganhou +1 botão) sem distorcer a logo. */
.topbar-row .logo img{height:auto; max-height:30px; max-width:100%; width:auto; display:block}
/* Troca de logo por tema. A .logo-dark (clara) fica escondida por padrão de DUAS
   formas (redundância proposital contra cache/deploy parcial): style="display:none"
   inline no header + esta regra CSS. No escuro invertemos — precisa de !important
   pra vencer o inline. */
.topbar-row .logo .logo-dark{display:none}
:root[data-theme="dark"] .topbar-row .logo .logo-light{display:none !important}
:root[data-theme="dark"] .topbar-row .logo .logo-dark{display:block !important}
.topbar-row .right-group{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  min-width:0;
}

/* Card do saldo = botão do olhinho (o olho vive DENTRO do card).
   Economiza os ~42px que o .icon-btn separado ocupava no header. */
.topbar-inner .bal-card{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 8px 6px 11px;      /* mantém a altura original do header */
  background:linear-gradient(135deg, var(--c-primary-soft), var(--c-surface-2) 70%);
  border:1px solid var(--c-border);
  border-radius:12px;
  white-space:nowrap;
  min-width:0; max-width:100%;
  font-family:inherit; color:var(--color-text);
  text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s, transform .1s;
}
.topbar-inner .bal-card:hover{border-color:var(--color-primary)}
.topbar-inner .bal-card:active{transform:scale(.97)}
.topbar-inner .bal-card:focus-visible{outline:2px solid var(--color-primary); outline-offset:2px}
.topbar-inner .bal-card .bal-vals{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:0;
}
.topbar-inner .bal-card .bal{
  font-size:15px; font-weight:800;
  letter-spacing:-.015em; color:var(--color-text);
  font-variant-numeric:tabular-nums;
  line-height:1;
  transition:filter .2s;
}
/* Saldo grande diminui a fonte em vez de estourar a largura do header.
   Classes aplicadas pelo setBalance() do app.js conforme nº de dígitos. */
.topbar-inner .bal-card .bal.bal-long{font-size:13.5px}
.topbar-inner .bal-card .bal.bal-xlong{font-size:12px; letter-spacing:-.03em}
.topbar-inner .bal-card .bal .curr{font-size:10px; opacity:.6; margin-right:2px; font-weight:700}
.topbar-inner .bal-card .bal.hidden{filter:blur(7px); user-select:none}
.topbar-inner .bal-card .bal-bonus{
  font-size:11px; font-weight:700;
  color:var(--c-accent);
  font-variant-numeric:tabular-nums;
  line-height:1;
  transition:filter .2s;
}
.topbar-inner .bal-card .bal-bonus.hidden{filter:blur(5px); user-select:none}
/* olhinho integrado: alvo de toque cresce pelo padding do próprio card */
.topbar-inner .bal-card .bal-eye{
  flex-shrink:0;
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:7px;
  color:var(--c-accent);
  background:color-mix(in srgb, var(--color-text) 7%, transparent);
  transition:background .15s;
}
.topbar-inner .bal-card:hover .bal-eye{background:color-mix(in srgb, var(--color-primary) 22%, transparent)}
.topbar-inner .bal-card .bal-eye .ph{font-size:14px}

/* telas bem estreitas (iPhone SE / Galaxy antigos): aperta gaps e logo */
@media (max-width:359px){
  .topbar-inner{padding:8px 10px}
  .topbar-row{gap:6px}
  .topbar-row .right-group{gap:6px}
  .topbar-row .logo img{max-height:26px}
  .topbar-inner .bal-card{padding:6px 7px 6px 9px; gap:6px}
  .topbar-inner .icon-btn{width:32px; height:32px}
}

.topbar-inner .icon-btn{
  width:34px; height:34px; flex-shrink:0;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--c-border);
  border-radius:10px;
  color:var(--color-text); cursor:pointer; text-decoration:none;
  transition:border-color .15s, background .15s, transform .1s;
}
.topbar-inner .icon-btn:hover{border-color:var(--color-primary); background:var(--c-surface-2)}
.topbar-inner .icon-btn:active{transform:scale(.92)}
.topbar-inner .icon-btn svg{width:16px; height:16px}
.topbar-inner .icon-btn .ph{font-size:17px}

/* SINO — a bolinha de nao lidas ancora no canto do proprio botao.
   O `[hidden]` precisa do !important: `.sino-badge` define `display:grid`, e
   qualquer classe com `display` vence o `[hidden]{display:none}` do navegador
   por especificidade (foi assim que o X do popup de banner nao sumia, 04/09). */
.topbar-inner .icon-btn.sino{position:relative}
.sino-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  background:var(--c-danger, #d92d20); color:#fff;
  border:2px solid var(--color-surface);
  border-radius:999px;
  font-size:10px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.sino-badge[hidden]{display:none !important}
/* Sino com recado pendente chama atencao uma vez, sem ficar piscando pra
   sempre: o pulso roda 3 vezes e para. */
.icon-btn.sino.tem-novo{border-color:var(--color-primary); animation:sino-pulso .9s ease-in-out 3}
@keyframes sino-pulso{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.12)}
  70%{transform:scale(.98)}
}
@media (prefers-reduced-motion:reduce){
  .icon-btn.sino.tem-novo{animation:none}
}

/* ================================================================
   BOTTOM NAV — 5 itens, PIX no centro destacado (cor oficial Pix)
   ================================================================ */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--c-border);
  padding-bottom:env(safe-area-inset-bottom);
}
/* faixa escura atrás dos botões/gestos do sistema (celular, edge-to-edge):
   pinta só a área da safe-area inferior — combina com o theme-color #101010 */
.bottom-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:env(safe-area-inset-bottom);
  background:#101010;
}
.bottom-nav-inner{
  max-width:480px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5, 1fr);
  padding:8px 6px 6px;
}
.bottom-nav-inner a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:4px 2px 6px;
  color:var(--c-text-muted);
  text-decoration:none;
  font-size:10.5px; font-weight:600;
  letter-spacing:.01em;
  transition:color .15s;
}
.bottom-nav-inner a:hover,
.bottom-nav-inner a.active{color:var(--c-accent)}

/* ícone dentro de uma "pílula" — no ativo ela ganha fundo suave,
   sem deslocar o layout (o espaço já é reservado sempre) */
.bottom-nav-inner a:not(.nav-pix) svg,
.bottom-nav-inner a:not(.nav-pix) .ph,
.bottom-nav-inner a:not(.nav-pix) .ph-fill{
  width:22px; height:22px;
  box-sizing:content-box;
  padding:3px 12px;
  border-radius:999px;
  background:transparent;
  transition:background .18s, transform .18s var(--ease-out);
}
.bottom-nav-inner a:not(.nav-pix) .ph,
.bottom-nav-inner a:not(.nav-pix) .ph-fill{font-size:22px; width:auto; height:auto}
.bottom-nav-inner a:not(.nav-pix).active svg,
.bottom-nav-inner a:not(.nav-pix).active .ph,
.bottom-nav-inner a:not(.nav-pix).active .ph-fill{
  background:var(--c-primary-soft);
}
.bottom-nav-inner a:not(.nav-pix):active svg,
.bottom-nav-inner a:not(.nav-pix):active .ph,
.bottom-nav-inner a:not(.nav-pix):active .ph-fill{transform:scale(.88)}
.bottom-nav-inner a:not(.nav-pix).active span{font-weight:700}

/* FAB central do PIX — sempre na cor da marca Pix, em qualquer tenant */
.bottom-nav-inner .nav-pix .pix-fab{
  width:56px; height:56px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, #3ecfbf, var(--c-pix) 55%, var(--c-pix-dark));
  color:#fff;
  border-radius:50%;
  margin-top:-28px;
  box-shadow:0 10px 24px -6px color-mix(in srgb, var(--c-pix) 75%, transparent),
             0 0 0 4px var(--color-surface);
  transition:transform .18s var(--ease-out), box-shadow .18s;
}
.bottom-nav-inner .nav-pix:hover .pix-fab{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -6px color-mix(in srgb, var(--c-pix) 85%, transparent),
             0 0 0 4px var(--color-surface);
}
.bottom-nav-inner .nav-pix:active .pix-fab{transform:translateY(0) scale(.94)}
.bottom-nav-inner .nav-pix.active .pix-fab{
  box-shadow:0 10px 24px -6px color-mix(in srgb, var(--c-pix) 75%, transparent),
             0 0 0 4px var(--color-surface),
             0 0 0 6px color-mix(in srgb, var(--c-pix) 45%, transparent);
}
.bottom-nav-inner .nav-pix .pix-fab svg{width:27px; height:27px}
.bottom-nav-inner .nav-pix span:last-child{
  color:var(--c-pix-dark); font-weight:800; margin-top:2px;
  letter-spacing:.03em;
}

/* ================================================================
   MODAL base (genérico)
   ================================================================ */
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-backdrop.open{display:flex; animation:v3fade .2s}
@keyframes v3fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;
  width:100%; max-width:440px;
  max-height:90vh; overflow-y:auto;          /* scroll só dentro do modal */
  -webkit-overflow-scrolling:touch;
  background:var(--color-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  box-shadow:var(--shadow-lg);
  animation:v3pop .25s var(--ease-out);
}
@keyframes v3pop{from{transform:scale(.94) translateY(10px); opacity:0} to{transform:scale(1) translateY(0); opacity:1}}
.modal h2{margin:0 0 4px; font-size:20px; font-weight:700}
.modal .sub{margin:0 0 20px; font-size:13.5px; color:var(--c-text-muted)}
.modal .close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--c-text-muted); border-radius:8px;
  transition:background .15s, color .15s;
}
.modal .close:hover{background:var(--c-surface-2); color:var(--color-text)}

/* ================================================================
   MODAL DE SUPORTE — lista de canais (#suporteModal, no bottom-nav.html)
   Aberto pelo item "Suporte" do menu em qualquer página e pelo card de
   suporte da home. Veio do inicio.html quando deixou de ser exclusivo dele.
   ================================================================ */
.sup-opts{display:flex; flex-direction:column; gap:9px}
.sup-opt{display:flex; align-items:center; gap:13px; width:100%; padding:13px 14px; background:var(--color-surface); border:1px solid var(--c-border); border-radius:14px; cursor:pointer; text-decoration:none; text-align:left; font-family:inherit; transition:transform .12s ease, border-color .15s, background .15s}
.sup-opt:hover{transform:translateY(-1px); border-color:var(--color-primary); background:var(--c-surface-2)}
.sup-opt .so-ic{flex-shrink:0; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; font-size:20px}
.sup-opt .so-ic.so-chat{background:var(--c-accent)}
.sup-opt .so-ic.so-ticket{background:#6b57d6}
.sup-opt .so-ic.so-wa{background:#25D366}
.sup-opt .so-ic.so-tg{background:#229ED9}
.sup-opt .so-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.sup-opt .so-t{font:800 14.5px var(--font-sans); color:var(--color-text); display:inline-flex; align-items:center; flex-wrap:wrap}
.sup-opt .so-d{font-size:12px; color:var(--c-text-muted)}
.sup-opt .so-arrow{flex-shrink:0; color:var(--c-text-muted); font-size:16px}
.sup-opt.disabled{cursor:default; opacity:.6}
.sup-opt.disabled:hover{transform:none; border-color:var(--c-border); background:var(--color-surface)}
.sup-opt .so-soon{flex-shrink:0; font:800 10px var(--font-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); background:var(--c-surface-2); border:1px solid var(--c-border); padding:4px 8px; border-radius:999px}
/* canal em destaque (Chatwoot) */
.sup-opt.featured{border:1.5px solid var(--color-primary); background:var(--c-primary-soft); box-shadow:0 6px 18px -8px var(--color-primary)}
.sup-opt.featured:hover{background:var(--c-primary-soft); border-color:var(--color-primary)}
.sup-opt.featured .so-ic.so-chat{background:var(--color-primary); color:var(--c-on-primary)}
.so-badge{display:inline-flex; align-items:center; gap:3px; font:800 9.5px var(--font-sans); text-transform:uppercase; letter-spacing:.05em; color:var(--c-on-primary); background:var(--color-primary); padding:3px 7px; border-radius:999px; margin-left:7px; white-space:nowrap; vertical-align:middle}

/* Modal de confirmação de saída (#logoutModal — partial bottom-nav.html) */
.logout-actions{display:flex; gap:10px; margin-top:16px}
.logout-actions .lg-stay{flex:1; padding:13px; background:var(--color-surface); border:1.5px solid var(--c-border); border-radius:12px; font:800 14px var(--font-sans); color:var(--color-text); cursor:pointer}
.logout-actions .lg-stay:hover{border-color:var(--c-text-muted)}
.logout-actions .lg-leave{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px; background:var(--c-danger); border:0; border-radius:12px; font:800 14px var(--font-sans); color:#fff; text-decoration:none; cursor:pointer}
.logout-actions .lg-leave:hover{filter:brightness(1.06)}
.logout-actions .lg-leave .ph{font-size:16px}

/* Aviso de notificações não lidas (#notifAvisoModal — montado pelo app.js
   depois que o jogador fecha os banners da home). */
.notif-previa{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.notif-previa li{padding:11px 13px; background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:12px; text-align:left}
.notif-previa li b{display:block; font-size:13.5px; font-weight:800; color:var(--color-text)}
/* line-clamp: a mensagem pode ter 500 caracteres e a prévia não pode virar
   uma parede de texto — o texto inteiro está a um toque, na tela do sino. */
.notif-previa li span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:3px; font-size:12.5px; line-height:1.4; color:var(--c-text-muted)}
/* No aviso pós-login a mensagem sai INTEIRA: abrir o aviso já marca como lida
   (app.js), então cortar em 2 linhas seria dar por lido o que não foi mostrado.
   O .modal rola sozinho (max-height:90vh). */
.notif-previa.notif-inteira li span{display:block; -webkit-line-clamp:unset; overflow:visible; white-space:pre-line}
.notif-aviso-acoes{display:flex; gap:10px; margin-top:16px}
.notif-aviso-acoes .na-depois{flex:1; padding:13px; background:var(--color-surface); border:1.5px solid var(--c-border); border-radius:12px; font:800 14px var(--font-sans); color:var(--color-text); cursor:pointer}
.notif-aviso-acoes .na-depois:hover{border-color:var(--c-text-muted)}
.notif-aviso-acoes .na-ver{flex:1.4; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px; background:var(--color-primary); border:0; border-radius:12px; font:800 14px var(--font-sans); color:var(--c-on-primary); text-decoration:none; cursor:pointer}
.notif-aviso-acoes .na-ver:hover{filter:brightness(1.06)}
.notif-aviso-acoes .na-ver .ph{font-size:16px}

/* ================================================================
   Utils
   ================================================================ */
.section-title{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:600; color:var(--c-text-muted);
  text-transform:uppercase; letter-spacing:.08em;
  margin:6px 4px -6px;
}