body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  background: #121212;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#appWrapper {
  transition: box-shadow 0.4s ease-in-out;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  margin: 10px;
  overflow: hidden;
}
/* base do chip já existente */
/* .chip { ... } */

/* Tag de Confiabilidade (🎯) — base + cores por faixa */
.conf-tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1;
}
/* 50%  -> laranja | 60-79% -> amarelo | 80%+ -> verde */


/* Estados com neon */
.neon-pagando #appWrapper { box-shadow: 0 0 20px #00e676, 0 0 40px #00e676; animation: neonGreenPulse 1.5s infinite; }
.neon-recolhendo #appWrapper { box-shadow: 0 0 20px #ff5252, 0 0 40px #ff5252; animation: neonRedPulse 1.5s infinite; }
.neon-formando #appWrapper { box-shadow: 0 0 20px #ffc107, 0 0 40px #ffc107; animation: neonYellowPulse 1.5s infinite; }

@keyframes neonGreenPulse { 0%,100%{box-shadow:0 0 20px #00e676,0 0 40px #00e676} 50%{box-shadow:0 0 30px #00e676,0 0 60px #00e676} }
@keyframes neonRedPulse { 0%,100%{box-shadow:0 0 20px #ff5252,0 0 40px #ff5252} 50%{box-shadow:0 0 30px #ff5252,0 0 60px #ff5252} }
@keyframes neonYellowPulse { 0%,100%{box-shadow:0 0 20px #ffc107,0 0 40px #ffc107} 50%{box-shadow:0 0 30px #ffc107,0 0 60px #ffc107} }

.status-bar {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  text-align: center;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}
.neon-pagando .status-bar { color: #00e676; text-shadow: 0 0 8px #00e676; }
.neon-recolhendo .status-bar { color: #ff5252; text-shadow: 0 0 8px #ff5252; }
.neon-formando .status-bar { color: #ffc107; text-shadow: 0 0 8px #ffc107; }

/* Menu */
.menu {
  display: flex;
  justify-content: space-around;
  background: #1e1e1e;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333;
  position: relative;
}
.menu button {
  background: #2c2c2c;
  border: none;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.3s;
}
.menu button:hover { background: #444; }
.menu button.active {
  background: linear-gradient(to right, #00e676, #00c853);
  color: black;
  font-weight: bold;
}

iframe { width: 100%; flex-grow: 1; border: none; transition: opacity 0.4s ease; }

/* Toast interno */
.toast-pattern {
  position: fixed;
  top: 5rem;
  left: 1rem;
  padding: 10px 16px;
  border-radius: 10px;
  color: white;
  font-size: 0.9rem;
  max-width: 320px;
  background-color: rgba(255, 82, 82, 0.95);
  border-left: 4px solid #ff5252;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  animation: fadeIn 0.3s ease;
  z-index: 9999;
  display: none;
}
@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* Install overlay (inalterado) */
.install-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); color:white; z-index:10000; display:none; flex-direction:column; justify-content:center; align-items:center; padding:2rem 1rem; text-align:center; box-sizing:border-box; }
.install-overlay h2 { margin: 1rem 0 0.5rem; font-size: 1.5rem; }
.install-overlay p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.4; max-width: 320px; }
.install-overlay img { max-width: 90%; max-height: 200px; margin-bottom: 1rem; }
.install-overlay button { background: #00e676; color:#000; font-weight:bold; border:none; border-radius:8px; padding:0.7rem 1.4rem; font-size:1rem; }
.icon-placeholder { width: 48px; height: 48px; border-radius: 8px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); }
ul, li { text-align: left; }

/* ==== CARD DE SINAL ==== */
.signal-card {
  background: #181818;
  border-top: 1px solid #2a2a2a;
  padding: 12px 12px 8px;
}
.signal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-analise { background: #3a3a00; color: #ffc107; }
.badge-entrada { background: #003a1f; color: #00e676; }
.badge-cancelado { background: #3a0000; color: #ff5252; }
.signal-motivos { font-size: 0.85rem; color: #cfcfcf; margin-top: 6px; }

.conf-wrapper { width: 160px; min-width: 160px; }
.conf-label { font-size: 0.75rem; color: #bbb; margin-bottom: 4px; text-align: right; }
.conf-bar { background:#2a2a2a; height: 10px; border-radius: 8px; overflow:hidden; }
.conf-fill { background:#00e676; height: 100%; width: 0%; transition: width .4s ease; }
.conf-valor { text-align: right; font-size: 0.8rem; margin-top: 4px; color: #ddd; }

/* Ajuste comum para chips — mesma altura dos badges (Entrada Confirmada/RED/GREEN) */
.chip, .chip-alvo, .conf-tag, .chip-padrao {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1;
}

/* Classes de confiabilidade unificadas acima (conf-orange, conf-yellow, conf-green) */

.signal-body { margin-top: 10px; }
.signal-row { display: flex; gap: 14px; }
.signal-col { flex: 1; }
.label { font-size: 0.75rem; color: #aaa; }
.value { font-weight: 700; }

.signal-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.target {
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px;
}
.t-head { font-weight: 800; margin-bottom: 6px; }
.t-body .hint { font-size: 0.75rem; color: #aaa; margin-top: 2px; }

/* Drop-down remanescente */
.dropdown { position: relative; }
.dropdown-content { display:none; position:absolute; top:38px; left:0; background-color:#2a2a2a; border:1px solid #444; border-radius:8px; white-space:nowrap; padding:5px; z-index:1000; }
.dropdown-content button { background:none; border:none; color:white; padding:8px 14px; font-size:0.9rem; cursor:pointer; display:inline-block; }
.dropdown-content button:hover { background:#444; border-radius:6px; }

/* === Compact targets (Aposta 1/2) === */
.signal-targets .t-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.signal-targets .t-body .t-line {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.signal-strip{
  background:#121212; border-radius:16px; padding:12px; margin:12px 12px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.strip-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.sg-badge{
  font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px;
  letter-spacing:.3px;
}
.sg-analise{ background:#263238; color:#cfd8dc }
.sg-entrada{ background:#1b5e20; color:#c8e6c9 }
.sg-green  { background:#2e7d32; color:#e8f5e9 }
.sg-red    { background:#b71c1c; color:#ffebee }

.sg-chip{ background:#1f1f1f; color:#eee; border:1px solid #333;
  padding:4px 8px; border-radius:10px; font-size:12px; white-space:nowrap }

.sg-gales{ display:flex; align-items:center; gap:6px; margin-left:auto }
.sg-gales .step{
  width:7px; height:7px; border-radius:50%; background:#3a3a3a; display:inline-block
}
.sg-gales .step.active{ background:#6ee7b7 } /* verde claro */
.sg-gales-text{ font-size:12px; color:#ccc; margin-left:4px }

.sg-conf{ display:flex; align-items:center; gap:6px; margin-left:8px }
.sg-conf-bar{ width:56px; height:6px; background:#242424; border-radius:4px; overflow:hidden }
#sgConfFill{ height:100%; width:0%; background:#6ee7b7 }

.strip-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px }
.sg-action{
  font-weight:700; color:#f5f5f5; font-size:15px; line-height:1.2;
  max-width:65vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.sg-targets{ display:flex; gap:8px; }
.sg-targets .chip{
  background:#0f0f0f; border:1px solid #2a2a2a; color:#eaeaea;
  padding:4px 8px; border-radius:12px; font-size:12px; white-space:nowrap
}
@media (min-width:480px){
  .sg-action{ max-width:72vw }
}

/* Strip 3 linhas */
.signal-card { padding: 12px 14px; display: grid; gap: 8px; }
.sig-row { display: flex; align-items: center; gap: 8px; }

/* Linha 1 */

.stepper { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 6px; }
.conf-mini { font-weight: 700; font-size: 13px; }

/* Linha 2: ação completa, sem elipse */
.signal-acao { font-weight: 700; font-size: 18px; line-height: 1.25; white-space: normal; overflow: visible; }

/* Linha 3: chips de alvo menores, em duas colunas no mobile */
.sig-row-3 { gap: 10px; }
.chip-alvo { flex: 1 1 0; justify-content: center; text-align: center; padding: 4px 8px; font-size: 12px; border-radius: 12px; }
.chip-alvo b { font-weight: 700; }

/* === Gale stepper states === */
.stepper i{
  width: 7px; height: 7px; border-radius: 50%;
  background: #3a3b40; display: inline-block;
  transition: background .2s ease, opacity .2s ease;
}
.stepper .step.on        { background: #ffffff; } /* atual = branco */
.stepper .step.hit-green { background: #10b981; } /* verde (lucro)   */
.stepper .step.hit-blue  { background: #3b82f6; } /* azul (proteção) */
.stepper .step.hit-red   { background: #ef4444; } /* vermelho (red)  */
.stepper .step.disabled  { opacity: .25; }

/* ==== OVERRIDES – chips alinhados à altura da badge ==== */

/* mesma “altura visual” dos chips e da badge */
.badge,
.chip,
.conf-tag,
.chip-padrao,
.chip-alvo,
.sg-targets .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;      /* similar à .badge */
  min-height: 20px;       /* equaliza a altura */
  line-height: 1;         /* evita estourar verticalmente */
  border-radius: 12px;
  font-size: 12px;
}

/* visual padrão dos chips (padrão/alvos) */
.chip-padrao,
.sg-targets .chip,
.chip-alvo {
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  color: #eaeaea;
}

/* — Confiabilidade 🎯 —
   suporta tanto .conf-green/.conf-yellow/.conf-orange
   quanto .green/.yellow/.orange (fallback) */
.conf-tag { 
  background: #1f1f1f;
  /*border: 1px solid #2a2a2a; */
  color: #eaeaea;
}

.conf-tag.conf-green,
.conf-tag.green {
  background: #0f5132;
  color: #d1f3e0;
}

.conf-tag.conf-yellow,
.conf-tag.yellow {
  background: #664d03;
  color: #fff3cd;
}

.conf-tag.conf-orange,
.conf-tag.orange {
  background: #7c2d12;
  color: #ffd7ba;
}

/* stepper não muda; só garante que não “puxe” a linha */
.stepper { align-self: center; }



  #tierBadgeWrap { display: none !important; }



  :root{
    --bg: #0b0f14;
    --panel: #11161d;
    --panel-2: #0f141a;
    --stroke: #212a35;
    --text: #e8eef6;
    --muted: #9fb0c3;
    --brand: #3b82f6;
    --brand-2: #2563eb;
    --ok: #22c55e;
    --warn: #f59e0b;
    --err: #ef4444;
    --shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
    --radius-xl: 16px;
    --radius-lg: 12px;
    --radius-md: 10px;
  }
  html,body{ background: radial-gradient(1200px 800px at 80% -10%, #14345533, transparent 60%), var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .menu{
    position: sticky; top: 0; z-index: 10;
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px; margin: 10px 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid var(--stroke); border-radius: var(--radius-xl);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow);
  }
  .menu button{
    background: var(--panel); color: var(--text);
    border: 1px solid var(--stroke); border-radius: 999px;
    padding: 8px 14px; font-weight: 600; letter-spacing:.2px;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }
  .menu button:hover{ transform: translateY(-1px); }
  .menu button.active{ background: var(--brand); border-color: var(--brand-2); color: #fff; }

  /* Home */
  #viewHome h1{ font-size: 28px; letter-spacing:.2px; }
  #homeTierBadge{
    background: #0f1926; color: #cfe1ff; border: 1px solid #1d2a3a;
    border-radius: 999px !important; padding: 6px 12px !important; font-weight: 600;
  }
  #homeUpgrade{ background: #dfeaff; color: #1f4dbf; border-color: #b4ccff; font-weight:600; }
  #homeUpgrade:hover{ background:#cfe0ff; }
  #homeLogout{ background: #2a1212; color:#ffd7d7; border-color:#6b1b1b; }
  #homeLogout:hover{ background:#361515; }

  /* Home grid buttons */
  .home-btn{
    display:flex; align-items:center; gap:10px;
    background: linear-gradient(180deg, #121923, #0e141b);
    border: 1px solid var(--stroke);
    color: var(--text); border-radius: var(--radius-xl);
    padding: 16px 18px; font-weight: 600; letter-spacing:.2px;
    box-shadow: var(--shadow);
    transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .home-btn::before{
    content:''; width:10px; height:10px; border-radius:999px;
    background: #2a3442; box-shadow: 0 0 0 4px #1a2330 inset;
  }
  .home-btn:hover{ transform: translateY(-1px); border-color:#2e3a48; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
  .home-btn:active{ transform: translateY(0); }

  /* Status bar (Momento) */
  .status-bar{
    margin: 12px 10px 0; padding: 10px 12px;
    background: #0f141a; border: 1px solid var(--stroke); color: var(--muted);
    border-radius: var(--radius-lg);
  }

  /* Signal card */
  .signal-card{
    margin: 12px 10px; padding: 14px;
    background: linear-gradient(180deg, #121a23, #0e141b);
    border: 1px solid var(--stroke); border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
  }
  .badge{ font-weight:700; letter-spacing:.3px; }
  .badge-analise{ background:#16202b; color:#9cc3ff; border:1px solid #1d2b3d; }
  .badge-entrada{ background:#15301f; color:#aef3c3; border:1px solid #1f3c2a; }
  .badge-cancelado{ background:#321a1a; color:#ffd0d0; border:1px solid #4a2222; }

  .chip{ background:#101821; color:#d7e6f7; border:1px solid #243041; border-radius:999px; padding:6px 10px; font-weight:600; }
  .chip-padrao{ background:#141f2a; }
  .chip-alvo{ background:#172531; }
  .conf-mini{ opacity:.75; }

  .stepper .step{
    width:9px; height:9px; border-radius:999px; display:inline-block; margin-left:6px; background:#283445;
    box-shadow: 0 0 0 1px #3a485c inset;
  }
  .stepper .step.on{ background:#c6e2ff; }
  .stepper .step.hit-green{ background:#54ffa6; }
  .stepper .step.hit-blue{ background:#76b7ff; }
  .stepper .step.hit-red{ background:#ff6b6b; }

  /* Upgrade / Ferramentas cards */
  .upgCard{
    border:1px solid var(--stroke); background: var(--panel-2); color: var(--text);
    border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow);
  }
  .upgCard h3{ margin:0 0 6px; }
  .upgCard ul{ margin:0 0 10px 18px; color: var(--muted);}
  .upgHow{ font-size:13px; color: var(--muted); }

   /* dá um “estado ativo” nas tabs */
  #viewApp .menu button.active,
  #viewApp .sticky button.active{
    background: linear-gradient(180deg, #4f7cff, #3d67e8) !important;
    color:#fff !important; border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(79,124,255,.35);
  }

  /* ==== APP PRINCIPAL: layout em coluna + iframe fluido ==== */
#viewApp{
  display:flex;
  flex-direction:column;
  /* use a unidade “svh” para não cortar no iOS/Android */
  height:100svh;
}

/* status + card com margens menores */
#viewApp #statusBar{ margin:4px 6px 0; }
#viewApp #signalCard {
  border: 2px dotted #888;   /* borda pontilhada cinza */
  border-radius: 12px;       /* cantos arredondados opcionais */
  padding: 8px;              /* espaço interno para respirar */
}

/* o iframe cresce para preencher o que sobrar */
#viewApp #gameFrame{
  flex:1;              /* ocupa todo o espaço restante */
  min-height:0;        /* evita overflow em flex container */
  width:100%;
  border:0;
  border-radius:12px;  /* opcional, só estética */
  background:#0b0f14;  /* fallback enquanto carrega */
}

/* ==== MENU DO APP: SLIM + FIXO NO TOPO ==== */
#viewApp .menu{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 0;
  background: #11161d;              /* plano, sem vidro/sombra */
  border-bottom: 1px solid #1f2a36; /* linha fina separando do conteúdo */
  border-radius: 0;
  box-shadow: none;
}

#viewApp .menu button{
  background: transparent !important; /* sem caixas */
  color: #e8eef6;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600;
  transition: color .2s ease;
}

#viewApp .menu button:hover{
  color: #4f7cff;
}

#viewApp .menu button.active{
  background: transparent !important;  /* cancela gradiente antigo */
  box-shadow: none !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: 2px solid #4f7cff !important; /* indica aba ativa */
}

#viewApp #btnBackHome{
  margin-right: 8px;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 0 !important;
}

#viewApp .sticky .menu,
#viewApp .sticky > div{
  padding: 0 !important;
  margin: 0 !important;
}

/* Override defensivo: garante que o gradiente antigo não apareça no menu do App */
#viewApp .menu button.active,
#viewApp .menu button.active:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==== APP PRINCIPAL: MENU SLIM (para estrutura com .sticky do Tailwind) ==== */
#viewApp .sticky.top-0{
  top: 0;
  z-index: 20;
  padding: 0 !important;     /* anula px-3 pt-3 */
  margin: 0 !important;
}

#viewApp .sticky.top-0 > .flex{
  gap: 6px !important;
  padding: 4px 6px !important;     /* anula px-2 py-2 */
  margin: 0 !important;
  background: #11161d !important;  /* barra lisa */
  border: none !important;          /* remove border-stroke */
  border-bottom: 1px solid #1f2a36 !important;
  border-radius: 0 !important;      /* remove rounded-2xl */
  box-shadow: none !important;      /* remove shadow-soft */
  backdrop-filter: none !important; /* remove blur */
}

#viewApp .sticky.top-0 button{
  background: transparent !important;
  color: #e8eef6 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

#viewApp .sticky.top-0 button:hover{
  color: #4f7cff !important;
}

#viewApp .sticky.top-0 button.active{
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
}
#viewApp .sticky.top-0 button.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #4f7cff;
}

/* Override: desativa qualquer gradiente antigo aplicado a .sticky */
#viewApp .sticky button.active{
  background: transparent !important;
  box-shadow: none !important;
}

/* barra do app: underline só no ativo */
#viewApp .menu button { 
  border-bottom: 2px solid transparent !important; /* zera underline nos demais */
}
#viewApp .menu button.active {
  border-bottom-color: #4f7cff !important; /* mantém apenas no ativo */
}

/* evita “falso ativo” por foco do navegador */
#viewApp .menu button:focus,
#viewApp .menu button:focus-visible {
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Espaçamento vertical no título/ação central do card de sinal */
#signalCard .headline {
  margin: 10px 0;           /* cria respiro acima e abaixo */
  padding: 4px 0;           /* padding interno leve */
  display: flex;
  align-items: baseline;
  gap: 10px;
}
/* ===== HOME: progresso e benefícios ===== */
#homeProgress{
  height: 6px;
  background: #1e2a3a;
  border-radius: 999px;
  overflow: hidden;
}
#homeProgressFill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#4f7cff,#60a5fa);
  transition: width .35s ease;
}
#homeProgressText{
  color: #9fb0c3;
  font-size: 12px;
  margin-top: 6px;
}
#homeNextBenefits{
  margin: 6px 0 0 0;
  padding-left: 18px;
  color: #9fb0c3;
  font-size: 12px;
}


/* ===== UPGRADE VIEW: progresso e textos ===== */
#upgProgress{
  height: 6px;
  background: #1e2a3a;
  border-radius: 999px;
  overflow: hidden;
}
#upgProgressFill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#4f7cff,#60a5fa);
  transition: width .35s ease;
}
#upgProgressText{
  color: #9fb0c3;
  font-size: 12px;
  margin-top: 6px;
}
#upgNextBenefits{
  margin: 6px 0 0 0;
  padding-left: 18px;
  color: #9fb0c3;
  font-size: 12px;
}

/* === Upgrade: colunas === */
.cols { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:760px){ .cols{ grid-template-columns:1fr 1fr; } }
.box { border:1px solid var(--stroke, #1e2a3a); background: var(--panel, #0f1622); border-radius:12px; padding:14px; }
.box h3 { margin:0 0 8px 0; font-size:15px; font-weight:900; letter-spacing:.2px; }


/* === Upgrade hero / pitch === */
.hero {
  background: linear-gradient(180deg,#0f1520,#0b121a);
  border-radius:14px;
  border:1px solid var(--stroke, #1e2a3a);
  padding:16px;
  margin-top:14px;
}
.heroHead .badgeLvl {
  background:#0f1926;
  border:1px solid #1d2a3a;
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  color:#cfe1ff;
}
.heroHead .badgeLvl i{
  font-style:normal;
  background:#1a2740;
  border:1px solid #2b4164;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:8px;
}
.heroHead .pitch { color:#cfe1ff; font-weight:800; }

/* XP header (mock) */
.xpTxt{
  display:flex;
  justify-content:space-between;
  color:#cfe1ff;
  font-size:12px;
  margin:10px 0 6px;
  font-weight:700;
}

/* Colunas */
.cols { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:760px){ .cols{ grid-template-columns:1fr 1fr; } }
.box { border:1px solid var(--stroke, #1e2a3a); background: var(--panel, #0f1622); border-radius:12px; padding:14px; }
.box h3 { margin:0 0 8px; font-size:15px; font-weight:900; }

/* Itens de benefício com ícone + subtítulo */
.featList { list-style:none; margin:0; padding:0; }
.featList li { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; padding:10px 12px; border:1px solid rgba(34,51,74,.4); background:#0d141c; border-radius:10px; margin-top:8px; }
.featList li .ico { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#1a2740; border:1px solid #2b4164; }
.featList li .t { font-weight:800; }
.featList li .s { font-size:12px; color:#9fb0c3; margin-top:2px; }

/* Timeline */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tierItem { position:relative; border:1px solid rgba(34,51,74,.6); background:#0d141c; border-radius:10px; padding:10px; }
.tierItem.current { box-shadow:0 0 0 1px #4f7cff55 inset; border-color:#4f7cff; }
.tierItem h4 { margin:0 0 6px; font-weight:900; }
.tierItem ul { margin:0; padding-left:18px; font-size:12px; color:#9fb0c3; }
.tierItem .flag { position:absolute; top:-10px; right:10px; background:#1a2740; border:1px solid #2b4164; color:#cfe1ff; font-size:10px; padding:3px 6px; border-radius:999px; }
.tiers-note { margin-top:8px; font-size:12px; color:#9fb0c3; }

/* ===== SINAIS BLOQUEADOS (paywall suave) ===== */
.signal-card.locked {
  position: relative;
}
.signal-card.locked .lock-blur {
  filter: blur(4px) brightness(.85);
  pointer-events: none;             /* impede clique no conteúdo por baixo */
}
.signal-card.locked .lock-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,15,20,.65), rgba(10,15,20,.85));
  border-radius: inherit;
}
.lock-overlay .lock-box{
  display: grid; gap: 10px; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px; border-radius: 12px;
  text-align: center;
  max-width: 260px;
}
.lock-overlay .ico{
  width: 36px; height: 36px; border-radius: 10px;
  display:grid; place-items:center;
  background:#1a2740; border:1px solid #2b4164;
  font-size: 18px;
}
.lock-overlay .t{
  font-weight: 800;
}
.lock-overlay .s{
  font-size: 12px; color: #9fb0c3;
}
.lock-overlay .btn-upg{
  display:inline-block; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #4f7cff, #3d67e8);
  color:#fff; font-weight:700; letter-spacing:.2px; border: none;
  box-shadow: 0 6px 20px rgba(79,124,255,.35);
  cursor: pointer;
}
.lock-overlay .btn-upg:active { transform: translateY(1px); }

.signal-card.locked { position: relative; }
.lock-blur { filter: blur(6px) brightness(.92); pointer-events:none; user-select:none; }
.lock-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,15,20,.55); backdrop-filter:saturate(120%) blur(2px);
  border-radius: inherit;
}
.lock-box { text-align:center; padding:16px 18px; border:1px solid #1f2a36; background:#0f1520; border-radius:12px; max-width:320px }
.lock-box .ico{font-size:20px;margin-bottom:6px}
.lock-box .t{font-weight:800;margin-bottom:6px}
.lock-box .s{font-size:12px;opacity:.85;margin-bottom:10px}
.lock-box .btn-upg{font-weight:800;padding:8px 12px;border-radius:10px;border:1px solid #2b4164;background:#1a2740;color:#cfe1ff}

#signalCard.locked {
  border: 2px dotted #eab308;  /* dourado quando bloqueado */
}

#signalCard:not(.locked) {
  border: 2px dotted #22c55e;  /* verde quando sinal liberado */
}

 /* ---- UPGRADE: lista de benefícios (featList) ---- */
  .featList{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }
  @media (min-width:640px){ .featList{ grid-template-columns:1fr 1fr; } }
  .featList li{
    list-style:none; padding:14px 16px; border-radius:12px; line-height:1.35;
    background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.2);
    color:#e5e7eb; font-weight:600; white-space:normal; word-break:normal; overflow-wrap:break-word;
  }
  /* títulos das caixas */
  #viewUpgrade .cols .box h3{ margin:0 0 8px; font-weight:700; font-size:14px; color:#cbd5e1; }
  #viewUpgrade .cols .box{ padding:12px; border-radius:12px; background:rgba(148,163,184,.05); border:1px solid rgba(148,163,184,.15); }

  /* ==== FIX: Upgrade - lista de benefícios sem grid interno ==== */
#viewUpgrade .featList{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 640px){
  #viewUpgrade .featList{ grid-template-columns: 1fr 1fr; }
}
#viewUpgrade .featList li{
  /* cancela o grid antigo que causava a quebra vertical */
  display: block !important;
  grid-template-columns: unset !important;

  list-style: none;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.2);
  color: #e5e7eb;
  font-weight: 600;
  line-height: 1.35;

  /* garante quebra normal de palavras */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}