/* ============================================================
   JV — CTAs do topo (v1)
   Instalar / Jogar grátis / Criar / Login num sistema só:
   mesma altura, mesmo raio, mesma tipografia, uma cor por papel.
   ============================================================ */

:root{
  --cta-h: 34px;
  --cta-r: 10px;
  --cta-fs: 11.5px;
  --cta-green-1:#19e07e;
  --cta-green-2:#0fb863;
  --cta-violet-1:#a855f7;
  --cta-violet-2:#7c3aed;
  --cta-gold-1:#ffd34d;
  --cta-gold-2:#f0a800;
}

/* ---------- linha de ações do visitante ---------- */
.hub-auth-actions,
.hub-auth-actions:not(.hidden),
body.hub-guest .hub-auth-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-shrink:0 !important;
}
.hub-auth-actions > button{
  height:var(--cta-h) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:0 12px !important;
  border-radius:var(--cta-r) !important;
  font:800 var(--cta-fs)/1 'Poppins',system-ui,sans-serif !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  transition:transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  -webkit-tap-highlight-color:transparent;
}
.hub-auth-actions > button:active{ transform:scale(.965) !important }

/* Jogar grátis — ação primária */
.hub-btn-gratis,
button.hub-btn-gratis{
  background:linear-gradient(180deg,var(--cta-green-1),var(--cta-green-2)) !important;
  color:#03170d !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 14px -10px rgba(25,224,126,.9) !important;
}
.hub-btn-gratis::after{
  content:"\25B8";font-size:12px;line-height:1;opacity:.7;margin-left:1px;
}
.hub-btn-gratis:hover{
  background:linear-gradient(180deg,#2af08d,#12c96d) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset, 0 8px 18px -10px rgba(25,224,126,1) !important;
}

/* Criar conta — ação secundária forte */
.hub-btn-cadastro,
button.hub-btn-cadastro{
  background:linear-gradient(180deg,var(--cta-violet-1),var(--cta-violet-2)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 14px -10px rgba(168,85,247,.9) !important;
}
.hub-btn-cadastro:hover{
  background:linear-gradient(180deg,#b768ff,#8b46f5) !important;
}

/* Login — fantasma */
.hub-btn-login,
button.hub-btn-login{
  background:rgba(255,255,255,.04) !important;
  color:#cfe8db !important;
  border-color:rgba(255,255,255,.14) !important;
}
.hub-btn-login:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.26) !important;
  color:#fff !important;
}

/* rótulos: nunca os dois juntos */
.hub-btn-short{ display:none !important }
.hub-btn-full{ display:inline !important }
@media (max-width:640px){
  .hub-btn-full{ display:none !important }
  .hub-btn-short{ display:inline !important }
}
@media (max-width:380px){
  :root{ --cta-fs:11px }
  .hub-auth-actions > button{padding:0 10px !important}
}

/* ---------- barra de instalação ---------- */
.hub-install-bar{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 10px !important;
  padding-top:calc(8px + env(safe-area-inset-top,0px)) !important;
  background:#0a1210 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset !important;
}
.hub-install-close{
  width:22px !important;height:22px !important;
  flex:0 0 22px !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#7f9c8d !important;
  font-size:11px !important;line-height:1 !important;
  display:grid !important;place-items:center !important;
  padding:0 !important;
}
.hub-install-close:hover{background:rgba(255,255,255,.1) !important;color:#d8e9e0 !important}
.hub-install-icon{
  width:28px !important;height:28px !important;flex:0 0 28px !important;
  border-radius:7px !important;
  background:#0f1a15 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  object-fit:contain !important;
}
.hub-install-text{
  flex:1 1 auto !important;min-width:0 !important;margin:0 !important;
  font:700 11.5px/1.25 'Poppins',system-ui,sans-serif !important;
  color:#d6e8de !important;letter-spacing:0 !important;
}
.hub-install-text .hub-install-emoji{ display:none !important }

/* CTA Instalar: dourado discreto, sem pulso */
.hub-install-cta{
  flex:0 0 auto !important;
  height:30px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:5px !important;
  padding:0 11px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,211,77,.45) !important;
  background:linear-gradient(180deg,rgba(255,211,77,.16),rgba(240,168,0,.14)) !important;
  color:#ffd873 !important;
  font:800 11px/1 'Poppins',system-ui,sans-serif !important;
  letter-spacing:.02em !important;
  box-shadow:none !important;
  animation:none !important;
  white-space:nowrap !important;
  transition:background .16s ease,border-color .16s ease,transform .14s ease !important;
}
.hub-install-cta svg{width:13px !important;height:13px !important;flex:0 0 13px !important}
.hub-install-cta:hover{
  background:linear-gradient(180deg,rgba(255,211,77,.24),rgba(240,168,0,.2)) !important;
  border-color:rgba(255,211,77,.7) !important;
  color:#ffe89e !important;
}
.hub-install-cta:active{transform:scale(.97) !important}

/* topbar respira melhor quando a barra existe */
.hub-shell:has(.hub-install-bar:not([hidden])) .hub-topbar{
  padding-top:0 !important;
  min-height:52px !important;
}

@media (prefers-reduced-motion: reduce){
  .hub-auth-actions > button,.hub-install-cta{transition:none !important}
}


/* ============================================================
   JV — pílula de saldo no tema escuro (v2)
   A base usa fundo #f3fef8 (quase branco) e some no escuro virando
   um bloco luminoso. Aqui ela vira vidro escuro com o valor em verde.
   ============================================================ */
.hub-saldo-pill,
#hub-saldo-wrap.hub-saldo-pill{
  background:linear-gradient(180deg,rgba(25,224,126,.10),rgba(25,224,126,.04)) !important;
  border:1px solid rgba(25,224,126,.28) !important;
  border-radius:999px !important;
  padding:0 11px !important;
  height:32px !important;
  gap:6px !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 6px 16px -12px rgba(25,224,126,.9) !important;
  animation:none !important;
}
.hub-saldo-pill .hub-saldo-label{
  color:#7fbfa1 !important;
  font-size:8.5px !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
}
.hub-saldo-pill .hub-saldo-value,
#hub-saldo{
  color:#3df39a !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  text-shadow:0 0 12px rgba(25,224,126,.35) !important;
}
/* quando o saldo e zero, nao grita */
.hub-saldo-pill .hub-saldo-value[data-zero="1"]{
  color:#6f9a86 !important;text-shadow:none !important;
}
@media (max-width:380px){
  .hub-saldo-pill{padding:0 9px !important;height:30px !important}
  .hub-saldo-pill .hub-saldo-value{font-size:12px !important}
  .hub-saldo-pill .hub-saldo-label{font-size:8px !important}
}