@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

/* ===================================================================
   BRDATA DESIGN SYSTEM — tokens extraídos da prancha anexada
=================================================================== */
:root{
  /* Paleta */
  --brd-blue:        #0057B8;  /* Azul Brasil · Primária */
  --brd-navy:         #062B5C;  /* Azul Marinho · Escuro */
  --brd-yellow:       #FFCC00;  /* Amarelo Brasil · Destaque */
  --brd-green:        #009C3B;  /* Verde Campo · Sucesso */
  --brd-white:        #FFFFFF;  /* Branco · Superfície */
  --brd-gray-50:      #F5F7FA;  /* Cinza 50 · Fundo */
  --brd-gray-200:     #E2E7ED;  /* Cinza 200 · Borda */
  --brd-gray-600:     #5B6573;  /* Cinza 600 · Texto secundário */
  --brd-red:          #D92D20;  /* Vermelho · Perigo */
  --brd-info:         #2F80ED;  /* Azul · Info */
  --brd-warn:         #FFC107;  /* Amarelo · Aviso */
  --brd-positive:     #20B866;  /* Verde claro · Positivo */

  /* Tipografia (Sora) */
  --font: 'Sora', system-ui, sans-serif;
  --fs-h1: 32px; --fw-h1: 700;
  --fs-h2: 24px; --fw-h2: 700;
  --fs-h3: 18px; --fw-h3: 600;
  --fs-body: 14px; --fw-body: 400;
  --fs-caption: 12px;

  /* Tema claro (default) */
  --bg-app:        var(--brd-gray-50);
  --bg-surface:    var(--brd-white);
  --bg-sidebar:    var(--brd-navy);
  --border:        var(--brd-gray-200);
  --text-0:        #10182B;
  --text-1:        var(--brd-gray-600);
  --text-2:        #8892A0;
  --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(16,24,43,.04), 0 8px 24px -12px rgba(16,24,43,.10);
  --sidebar-w: 248px;
  --topbar-h: 64px;
}

[data-theme="dark"]{
  --bg-app:        #0B1220;
  --bg-surface:    #121B2E;
  --bg-sidebar:    #060B17;
  --border:        #223049;
  --text-0:        #F2F5F9;
  --text-1:        #A9B4C4;
  --text-2:        #6B7688;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
html{ background:var(--brd-gray-50); }
[data-theme="dark"] html{ background:#0B1220; }
body{
  margin:0; font-family:var(--font); font-size:var(--fs-body); font-weight:var(--fw-body);
  color:var(--text-0); background-color:var(--bg-app);
  transition:background .25s ease, color .25s ease;
  /* Rede de segurança: nada deveria estourar a largura da página —
     os pontos que geravam scroll horizontal foram corrigidos na
     origem (grid, tabelas, SVG), isso aqui é só um fallback. */
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ margin:0; }
::selection{ background:var(--brd-yellow); color:#1a1a1a; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:100px; }

/* ================= SHELL ================= */
.shell{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--bg-sidebar); color:#EAF0FB;
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
  overflow-y:auto; z-index:50; transition:transform .3s ease;
}
/* AJUSTE (pedido do usuário): logo era pequena demais (34px) pro
   espaço que tinha — sidebar de 248px de largura sobrava espaço de
   sobra. Header da marca ganhou mais destaque + borda inferior
   separando visualmente do menu (era só um espaço em branco antes,
   sem nenhuma âncora visual de "isso aqui é o cabeçalho").

   AJUSTE 3 (pedido do usuário: "a logo... visualmente parece torta,
   imagem e texto") — a AJUSTE 2 usava "BR DATA" já desenhado dentro
   da imagem do usuário (img/brand-horizontal.png); o texto em si
   media reto pixel a pixel, mas o ÍCONE daquela imagem é bem mais
   alto que o texto (silhueta de escudo, não um retângulo), e não dava
   pra realinhar isso com precisão numa imagem já teria fundida —
   sobrava um desequilíbrio vertical entre ícone e texto que lia como
   "torto". Voltou a ser ícone (img/brand-icon.png — só a peça do
   escudo/seta da mesma imagem do usuário, recorte limpo) + "BR DATA"
   em TEXTO DE VERDADE (.brand-word, fonte Sora do resto do app):
   texto renderizado nunca fica torto (não é pixel de imagem), e
   align-items:center do flexbox centraliza o ícone de verdade em vez
   de depender de recorte manual. 64px de altura no ícone — mesmo
   tamanho de destaque já pedido antes ("dá pra aumentar e dar mais
   destaque"), só a técnica de composição que mudou. */
.sidebar-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:14px 8px 20px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-lockup{ display:flex; align-items:center; gap:10px; }
.brand-icon{ height:44px; width:auto; flex-shrink:0; }
.brand-word{
  font-family:var(--font); font-weight:800; font-size:26px; letter-spacing:.2px;
  color:#fff; line-height:1;
}
.brand-tagline{ font-size:9.5px; color:#8FA3C7; letter-spacing:.8px; text-transform:uppercase; font-weight:600; white-space:nowrap; }

.side-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:#7E90B3; font-weight:600; margin:16px 10px 8px; }
.side-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  color:#C7D3E8; font-size:13.5px; font-weight:500; cursor:pointer; border:none; background:transparent; width:100%; text-align:left;
}
.side-link svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.side-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-link.active{ background:var(--brd-blue); color:#fff; }
.side-link.disabled{ opacity:.4; cursor:not-allowed; }
.side-link .badge-new{ margin-left:auto; font-size:8.5px; font-weight:700; background:var(--brd-green); color:#fff; padding:2px 6px; border-radius:100px; letter-spacing:.3px; }
.side-link .badge-pro{ margin-left:auto; font-size:8.5px; font-weight:700; background:var(--brd-yellow); color:#3b2c00; padding:2px 6px; border-radius:100px; letter-spacing:.3px; }
.side-link .heart{ margin-left:auto; cursor:pointer; opacity:.8; }
.side-link .heart:hover{ opacity:1; }

.menu-link{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 10px;
  border:none; background:transparent; border-bottom:1px solid var(--border); color:var(--text-0);
  font-size:13.5px; font-weight:500; cursor:pointer;
}
.menu-link:last-child{ border-bottom:none; }
.menu-link:hover{ background:var(--bg-app); }
.menu-link.disabled{ opacity:.4; cursor:not-allowed; }
.menu-link.active{ color:var(--brd-blue); font-weight:700; }
.menu-link .badge-new{ margin-left:auto; font-size:8.5px; font-weight:700; background:var(--brd-green); color:#fff; padding:2px 6px; border-radius:100px; }
.menu-link .badge-pro{ margin-left:auto; font-size:8.5px; font-weight:700; background:var(--brd-yellow); color:#3b2c00; padding:2px 6px; border-radius:100px; letter-spacing:.3px; }

.side-support{
  margin-top:auto; padding:14px; border-radius:var(--radius-md);
  background:linear-gradient(155deg, rgba(255,204,0,.14), rgba(255,204,0,.03));
  border:1px solid rgba(255,204,0,.25);
}
.side-support b{ font-size:13px; display:block; margin-bottom:4px; }
.side-support p{ font-size:11.5px; color:#B9C6DE; margin:0 0 10px; line-height:1.5; }

.theme-switch{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px 4px; margin-top:10px; }
.theme-switch span{ font-size:12px; color:#B9C6DE; }
.switch{ width:38px; height:22px; border-radius:100px; background:#26365A; position:relative; cursor:pointer; border:none; }
.switch::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .25s ease; }
.switch.on{ background:var(--brd-blue); }
.switch.on::after{ transform:translateX(16px); }

/* ---------- Topbar ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; gap:18px;
  padding:0 22px; background:var(--bg-surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.hamburger{ display:none; background:none; border:none; color:var(--text-0); cursor:pointer; }
.top-tabs{ display:flex; gap:4px; flex:1; overflow-x:auto; }
.top-tab{
  padding:9px 13px; border-radius:9px; border:none; background:transparent; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-1); white-space:nowrap;
}
.top-tab.active{ color:var(--brd-blue); background:rgba(0,87,184,.08); }
.top-actions{ display:flex; align-items:center; gap:12px; }
.top-search{
  display:flex; align-items:center; gap:8px; background:var(--bg-app); border:1px solid var(--border);
  border-radius:100px; padding:7px 12px; width:180px;
}
.top-search input{ border:none; background:none; outline:none; font-size:12.5px; color:var(--text-0); width:100%; font-family:inherit; }
.top-search svg{ width:15px; height:15px; color:var(--text-2); flex-shrink:0; }
.icon-btn{ position:relative; width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--bg-surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-1); }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .dot{ position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:var(--brd-red); border:2px solid var(--bg-surface); }
.avatar{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.avatar .circ{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.avatar span{ font-size:13px; font-weight:600; }
.mobile-only{ display:none; }
/* Mesmo lockup ícone+texto do sidebar (ver AJUSTE 3 lá). */
.topbar-brand{ align-items:center; gap:8px; margin-right:auto; }
.topbar-brand .brand-icon{ height:32px; width:auto; }
.topbar-brand .brand-word{ font-size:19px; }

.search-results{
  position:absolute; top:56px; right:220px; width:260px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card); z-index:60; overflow:hidden; display:none;
}
.search-results.open{ display:block; }
.search-results .sr-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-size:13px; }
.search-results .sr-item:hover{ background:var(--bg-app); }

/* ---------- Content ---------- */
.content{ padding:22px; max-width:1400px; }
.page{ display:none; }
.page.active{ display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.page-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.page-head h1{ font-size:var(--fs-h1); font-weight:var(--fw-h1); }
.page-head .sub{ font-size:12.5px; color:var(--text-1); margin-top:2px; }
/* Emblema "Brasileirão 2026" (Dashboard) — brasão estilizado (cores da
   bandeira, já usadas no resto do app) + o wordmark no lugar do texto
   solto que existia antes. O <h1> continua herdando o tamanho/peso de
   .page-head h1 acima (inclusive o ajuste mobile), só ganha cor/tracking. */
.brasileirao-brand{ display:flex; align-items:center; gap:10px; }
.brasileirao-emblem{ height:38px; width:auto; flex-shrink:0; }
.brasileirao-emblem-flag{ font-size:32px; line-height:1; flex-shrink:0; }
.brasileirao-word{ letter-spacing:.3px; white-space:nowrap; }
.brasileirao-word span{ color:var(--brd-blue); }
@media (max-width:1024px){ .brasileirao-emblem{ height:26px; } .brasileirao-emblem-flag{ font-size:24px; } }
.select-pill{
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px;
  background:var(--bg-surface); border:1px solid var(--border); font-size:12.5px; font-weight:600; cursor:pointer;
}

/* ================= GRID / CARDS ================= */
/* minmax(0, Nfr) em vez de Nfr "pelado": por padrão uma trilha de
   grid não encolhe abaixo do min-content do que tem dentro (tabela
   larga, SVG com width fixo etc.) — isso empurrava a página inteira
   e gerava scroll horizontal. minmax(0, ...) remove esse piso e
   devolve o controle de encolher pro conteúdo (que já tem seu
   próprio overflow-x:auto quando precisa, ver .table-std abaixo). */
.grid{ display:grid; gap:16px; min-width:0; }
.grid-kpi{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
/* Página do Time: 4 KPIs (Posição/Pontos/Gols marcados/Gols sofridos,
   sem o "Saldo" que existia antes) — coluna fixa em vez de herdar as
   5/3 colunas do .grid-kpi do Dashboard, senão sobra um espaço vazio. */
#teamPageKpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
/* Página do Jogador: mesmo motivo -- 4 KPIs (Jogos/Gols/Assistências/
   Cartões; Nota média saiu daqui, pedido do usuário: já tem o badge
   circular dela no hero, ficava repetida -- ver playerKpisHTML). */
#playerPageKpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.grid-3{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items:start; }
.grid-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); align-items:start; }
.grid-2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; }
.grid-2b{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; }
.grid-main-side{ grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr); align-items:start; }
.dash-layout{ display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:16px; align-items:start; min-width:0; }
.dash-main, .dash-rail{ min-width:0; }
/* Cards do Dashboard com mesma altura x largura dentro de cada linha
   (.grid-3 aqui usa 3 colunas iguais — nas outras páginas .grid-3
   continua com a 1ª coluna mais larga, isso é só pro Dashboard). */
#page-dashboard .grid-2, #page-dashboard .grid-3{ align-items:stretch; }
#page-dashboard .grid-2 > .card, #page-dashboard .grid-3 > .card{ display:flex; flex-direction:column; }
/* 3 colunas iguais só na largura em que .grid-3 já está com 3
   colunas por padrão (>1180px) — abaixo disso, deixa o colapso
   responsivo normal do .grid-3 (2 col -> 1 col) funcionar sozinho,
   senão trava 3 colunas espremidas até no mobile. */
@media (min-width:1181px){ #page-dashboard .grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.dash-rail .card{ margin-bottom:16px; }
.card{ min-width:0; }
.promo-card{
  background:linear-gradient(155deg, var(--brd-blue), var(--brd-navy)); border:none; color:#fff;
  padding:20px; border-radius:var(--radius-lg);
}
.promo-card b{ display:flex; align-items:center; gap:8px; font-size:14px; }
.promo-card p{ font-size:12px; color:rgba(255,255,255,.8); line-height:1.5; margin:8px 0 14px; }

/* Recurso bloqueado por plano (Comparador/Probabilidades/Simulador —
   só Pro/Enterprise). Ver planAllowsAdvanced()/lockedFeatureHTML() em
   app.js. */
.locked-feature{ text-align:center; padding:36px 20px; }
.locked-feature .locked-feature-icon{ font-size:30px; margin-bottom:10px; }
.locked-feature h3{ font-size:15px; font-weight:800; color:var(--text-0); text-transform:none; letter-spacing:0; margin-bottom:6px; }
.locked-feature p{ font-size:12.5px; color:var(--text-1); line-height:1.5; max-width:380px; margin:0 auto 16px; }

/* Modal de anúncio em vídeo (Freemium) — ver startAdTimer()/
   showAdModal() em app.js. Google AdSense de verdade (adsbygoogle.js)
   desde que ADSENSE_CLIENT_ID/ADSENSE_AD_SLOT_FREEMIUM_MODAL estejam
   configurados no host (ver server.js) — #adModalMedia recebe um
   <ins class="adsbygoogle"> novo a cada exibição (ver
   freshAdInsElement em app.js), não um player controlado por nós.
   Regras de negócio: só fecha quando o tempo mínimo (AD_DURATION_S)
   passa (sem pular) — ou fecha na hora, sem cobrar espera nenhuma, se
   o AdSense não tiver anúncio pra mostrar (data-ad-status="unfilled").
   No mobile, ocupa a tela inteira (formato "stories"). */
.ad-modal-overlay{
  position:fixed; inset:0; background:rgba(3,13,30,.82); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.ad-modal-box{
  background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  width:100%; max-width:420px; padding:18px; text-align:center;
  display:flex; flex-direction:column; position:relative;
}
.ad-modal-progress-track{ height:3px; border-radius:100px; background:var(--border); overflow:hidden; margin-bottom:12px; flex-shrink:0; }
.ad-modal-progress-fill{ height:100%; width:0%; background:var(--brd-blue); transition:width .2s linear; }
.ad-modal-label{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-2); margin-bottom:12px; }
.ad-modal-media{
  aspect-ratio:16/9; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#fff; position:relative; overflow:hidden;
}
.ad-modal-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  background-size:250% 100%; animation:adShimmer 2.8s linear infinite;
}
@keyframes adShimmer{ from{ background-position:150% 0; } to{ background-position:-150% 0; } }
.ad-modal-media-icon{ font-size:26px; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.ad-modal-media-text{ font-size:12px; font-weight:600; opacity:.9; position:relative; z-index:1; }
.ad-modal-close{
  padding:10px 16px; border-radius:9px; border:1px solid var(--border); background:var(--bg-app);
  color:var(--text-1); font-weight:700; font-size:12.5px; cursor:pointer; width:100%;
}
.ad-modal-close:disabled{ opacity:.55; cursor:not-allowed; }
.ad-modal-upsell{ font-size:11.5px; color:var(--text-2); margin:12px 0 0; }
.ad-modal-upsell-link{ color:var(--brd-blue); font-weight:700; cursor:pointer; }
.ad-modal-footer.locked .ad-modal-upsell-link{ opacity:.5; pointer-events:none; cursor:default; }

/* Mobile: vídeo ocupa a tela inteira, formato "stories" (barra de
   progresso e ações sobrepostas ao vídeo, não em cards separados). */
@media (max-width:1024px){
  .ad-modal-overlay{ padding:0; background:#000; }
  .ad-modal-box{
    max-width:none; width:100%; height:100dvh; height:100vh;
    border-radius:0; padding:0; box-shadow:none; background:#000;
  }
  .ad-modal-progress-track{
    position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); left:12px; right:12px; z-index:2;
    margin:0; background:rgba(255,255,255,.3);
  }
  .ad-modal-progress-fill{ background:#fff; }
  .ad-modal-label{
    position:absolute; top:calc(22px + env(safe-area-inset-top, 0px)); left:16px; z-index:2;
    margin:0; color:rgba(255,255,255,.85);
  }
  .ad-modal-media{ flex:1; aspect-ratio:auto; border-radius:0; margin-bottom:0; height:100%; }
  .ad-modal-footer{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  }
  .ad-modal-close{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff; }
  .ad-modal-close:disabled{ opacity:.75; }
  .ad-modal-upsell{ color:rgba(255,255,255,.85); }
  .ad-modal-upsell-link{ color:#fff; text-decoration:underline; }
}
@media (max-width:1180px){ .grid-kpi{ grid-template-columns:repeat(3, minmax(0, 1fr));} .grid-3, .grid-2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);} .grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr));} .grid-main-side{ grid-template-columns:minmax(0, 1fr);} .dash-layout{ grid-template-columns:minmax(0, 1fr);} }
@media (max-width:720px){ .grid-kpi{ grid-template-columns:repeat(2, minmax(0, 1fr));} .grid-3, .grid-2b, .grid-2, .grid-4{ grid-template-columns:minmax(0, 1fr);} }
.mobile-only-col{ display:none; }
@media (max-width:1024px){ .desktop-only{ display:none !important; } .mobile-only-col{ display:table-cell; } .only-desktop{ display:none; } }

.card{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:18px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-head h3{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-1); }
.card-link{ font-size:11.5px; font-weight:700; color:var(--brd-blue); display:flex; align-items:center; gap:4px; cursor:pointer; }

/* KPI tiles */
.kpi{ display:flex; align-items:center; gap:12px; }
.kpi .ico{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi .ico.blue{ background:rgba(0,87,184,.1); color:var(--brd-blue); }
.kpi .ico.green{ background:rgba(32,184,102,.12); color:var(--brd-positive); }
.kpi .ico.yellow{ background:rgba(255,204,0,.16); color:#946E00; }
.kpi .ico.navy{ background:rgba(6,43,92,.1); color:var(--brd-navy); }
.kpi .lbl{ font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; }
.kpi .val{ font-size:20px; font-weight:800; line-height:1.15; }
.kpi .val small{ font-size:12px; font-weight:600; color:var(--text-1); }

/* Clube Favorito (Dashboard) */
.fav-club-hint{ font-size:11.5px; color:var(--text-2); margin:0 0 10px; line-height:1.5; max-width:640px; }
.fav-club-select{ display:block; width:100%; max-width:340px; }
/* Estado "com favorito selecionado" — o card inteiro vira as cores do
   clube (ver renderFavoriteClubCard em app.js), então o texto aqui é
   sempre branco, independente do tema claro/escuro do resto do app. */
.fav-club-active{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.fav-club-active-info{ display:flex; align-items:center; gap:12px; min-width:0; }
.fav-club-active-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.8); font-weight:700; }
.fav-club-active-name{ font-size:19px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.fav-club-active-meta{ font-size:12px; font-weight:600; color:rgba(255,255,255,.85); margin-top:2px; }
/* Fundo escuro fixo (não translúcido) — precisa contrastar com o
   texto branco em qualquer cor de clube, inclusive as claras (ex:
   Botafogo tem branco como 2ª cor). */
.fav-club-remove{
  background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.5); color:#fff;
  padding:8px 14px; border-radius:9px; font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; font-family:inherit; transition:background .15s ease;
}
.fav-club-remove:hover{ background:rgba(0,0,0,.48); }

/* Elenco: campo de busca por nome (ver renderRosterRows em app.js) --
   mesmo visual de .top-search (busca de time na barra superior), mas
   classe própria de propósito: .top-search fica display:none no
   mobile (ver @media max-width:1024px), e essa busca deve continuar
   visível lá — é onde a maioria dos usuários deste app está. */
.roster-search{
  display:flex; align-items:center; gap:8px; background:var(--bg-app); border:1px solid var(--border);
  border-radius:100px; padding:7px 12px; margin-bottom:12px;
}
.roster-search input{ border:none; background:none; outline:none; font-size:12.5px; color:var(--text-0); width:100%; font-family:inherit; }
.roster-search svg{ width:15px; height:15px; color:var(--text-2); flex-shrink:0; }

/* Elenco: botão "ver todos" (ver renderRosterRows em app.js) */
.roster-toggle-wrap{ text-align:center; margin-top:12px; }
.roster-toggle-btn{ display:inline-block; padding:8px 16px; font-size:11.5px; font-weight:700; border-radius:9px; border:1px solid var(--border); background:var(--bg-app); color:var(--brd-blue); cursor:pointer; font-family:inherit; }
.roster-toggle-btn:hover{ background:var(--border); }
.lider-rank{ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.75); margin:-3px 0 6px; }

/* Tabela */
/* Tabelas com muitas colunas (ex: classificação completa) não
   encolhem abaixo do conteúdo mesmo com .card já do tamanho certo —
   table-layout:auto respeita o min-content de cada célula. Em vez de
   deixar isso estourar a página inteira, a tabela rola sozinha
   dentro do card. */
.table-scroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.table-std{ width:100%; border-collapse:collapse; font-size:12.5px; }
.table-std th{ text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2); padding:6px 8px; border-bottom:1px solid var(--border); }
.table-std td{ padding:9px 8px; border-bottom:1px solid var(--border); }
.table-std tr:last-child td{ border-bottom:none; }
.table-std tr.clickable-player:hover{ background:var(--bg-app); }
.table-std .num{ text-align:center; font-variant-numeric:tabular-nums; color:var(--text-1); }
.table-std td:first-child{ padding-left:10px; font-weight:700; color:var(--text-0); }
/* Tabela de classificação (Dashboard e página Tabela): nome do time
   nunca quebra linha — trunca com reticências se precisar, garante
   que todas as linhas fiquem com a mesma altura (times com nome longo
   como "Athletico Paranaense"/"Vasco da Gama" quebravam em 2 linhas
   antes disso, mesmo já com menos colunas).
   table-layout:fixed + larguras fixas nas colunas estreitas (#, brasão,
   Pts, J, SG) — "Time" fica sem largura declarada e herda o resto do
   espaço da tabela. Sem isso, table-layout:auto "esmaga" a coluna do
   nome pra caber as outras, e o texto trunca quase todo (ex: só "Ju"
   de "Juventude") em vez de mostrar o nome quase inteiro. */
.table-standings{ table-layout:fixed; }
.table-standings th:nth-child(1), .table-standings td:nth-child(1){ width:22px; }
.table-standings th:nth-child(2), .table-standings td:nth-child(2){ width:34px; }
.table-standings th:nth-child(4), .table-standings td:nth-child(4){ width:46px; }
.table-standings th:nth-child(5), .table-standings td:nth-child(5){ width:34px; }
.table-standings th:nth-child(6), .table-standings td:nth-child(6){ width:50px; }
/* Tabela completa da página "Tabela" (#fullStandings) — colunas extras
   (V/E/D/GP/GC) além de Pts/J/SG da versão reduzida da home acima.
   min-width dá uma largura mínima decente pra cada coluna numérica e
   deixa o nome do time (única coluna sem width fixo) ocupar o resto;
   com tantas colunas a tabela passa a rolar horizontalmente no celular
   (.table-scroll já cuida disso). */
.table-standings-full{ table-layout:fixed; min-width:560px; }
.table-standings-full th:nth-child(1), .table-standings-full td:nth-child(1){ width:22px; }
.table-standings-full th:nth-child(2), .table-standings-full td:nth-child(2){ width:34px; }
.table-standings-full th:nth-child(n+4), .table-standings-full td:nth-child(n+4){ width:38px; }
.table-standings-full th:nth-child(4), .table-standings-full td:nth-child(4){ width:44px; }
/* dashStandings: .team-cell é o próprio <td> (texto puro) — dá pra
   truncar direto nele.
   fullStandings: .team-cell é um <div style="display:flex"> (só o
   nome agora, sem coração de favorito) — flex não trunca com ellipsis
   sozinho, então o nome fica num <span> à parte (.tname-ellipsis) que
   recebe o corte. */
#dashStandings .team-cell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#fullStandings .team-cell{ min-width:0; }
#fullStandings .tname-ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.table-std tr[data-zone]{ box-shadow:none; }
.table-std tr[data-zone] td:first-child{ border-left:3px solid transparent; }
.table-std tr[data-zone="campeao"] td:first-child,
.table-std tr[data-zone="libertadores"] td:first-child{ border-left-color:var(--brd-positive); }
.table-std tr[data-zone="sulamericana"] td:first-child{ border-left-color:var(--brd-warn); }
.table-std tr[data-zone="rebaixamento"] td:first-child{ border-left-color:var(--brd-red); }

/* Clube Favorito em destaque — negrito nas listas com vários times
   (tabela de classificação, chance de título, próximos jogos etc.) */
.table-std tr.fav-row td{ font-weight:800; background:rgba(255,204,0,.08); }
.table-std tr.fav-row-pinned td{ border-top:2px dashed var(--border); }
.tname-fav{ font-weight:800; }

.pos{ font-weight:700; }
.team-cell{ display:flex; align-items:center; gap:8px; font-weight:600; }
.crest{ border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); object-fit:contain; }
.fav-heart{ cursor:pointer; color:var(--text-2); flex-shrink:0; }
.fav-heart.active{ color:var(--brd-red); }

/* Time/jogador clicáveis (abrem a página de detalhe) */
.clickable-team, .clickable-player{ cursor:pointer; }
.team-link{ display:inline-flex; align-items:center; gap:6px; }
.clickable-team:hover .tname, .clickable-team:hover, .clickable-player:hover{ text-decoration:underline; }

/* Página de detalhe (Time / Jogador) -- AJUSTE (pedido do usuário:
   "não estou contente com o voltar entre as páginas esteticamente")
   -- era só texto azul sublinhado no hover, meio perdido logo acima
   do hero colorido novo. Virou um botão de verdade (pill, com fundo/
   borda/sombra, igual aos outros botões secundários do app --
   .roster-toggle-btn é a referência mais próxima), com um ícone de
   seta (SVG, não mais o caractere "←") -- fica mais fácil de bater o
   olho e reconhecer como botão, não só um link de texto solto. */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:100px;
  color:var(--text-0); font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit;
  padding:8px 14px 8px 10px; box-shadow:var(--shadow-card);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  /* AJUSTE (pedido do usuário: "ajusta o espaçamento do voltar e da
     mais margem pra ele com relação ao header e o hero") -- antes
     não tinha margem nenhuma própria: colava direto no hero logo
     abaixo (só a folga natural de layout inline separava os dois) e
     dependia só do padding-top de .content pra respirar da topbar. */
  margin:6px 0 20px;
}
.back-link svg{ width:15px; height:15px; flex-shrink:0; }
.back-link:hover{ background:var(--bg-app); border-color:var(--brd-blue); color:var(--brd-blue); }

/* Hero da página do Jogador (pedido do usuário: "destacar o atleta,
   sua foto, seu clube e suas estatísticas") -- fundo nas cores do
   CLUBE do jogador, preenchido via JS (ver playerHeroGradientCSS em
   app.js -- mesma técnica de degradê + camada escura de legibilidade
   já usada no card "Clube Favorito" do Dashboard, ver
   favClubGradientCSS); sem time resolvido, cai pro degradê azul/
   marinho padrão da marca (definido ali mesmo). Texto sempre branco
   de propósito, independente do tema claro/escuro -- mesma lógica do
   Clube Favorito: cor de time pode ser clara (ex: Botafogo tem branco
   como 2ª cor), e a camada escura por baixo já garante contraste. */
/* AJUSTE (pedido do usuário: "o hero do jogador pode ter o nome e o
   clube ao lado da imagem para diminuir a altura") -- antes tinha
   flex-wrap:wrap, então no mobile (onde foto+corpo não cabiam numa
   linha só) o corpo (nome/time) quebrava pra debaixo da foto,
   dobrando a altura do hero. Sem wrap, fica sempre lado a lado (foto
   | nome+time | nota), em qualquer largura de tela -- .player-hero-
   body tem min-width:0 (deixa encolher de verdade) e nome/time
   truncam com reticências se precisar, em vez de forçar quebra de
   linha. */
.player-hero{ display:flex; align-items:center; gap:16px; position:relative; }
.player-hero-photo{
  width:100px; height:100px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:#fff;
}
.player-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.player-hero-body{ min-width:0; flex:1 1 auto; }
.player-hero-position{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:rgba(255,255,255,.2); color:#fff; padding:4px 10px; border-radius:100px; margin-bottom:8px;
}
.player-hero-name{
  font-size:26px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.25); line-height:1.15; margin:0 0 8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.player-hero-team{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; min-width:0; }
.player-hero-team .team-link{ min-width:0; } /* teamLinkHTML devolve um <span> inline-flex -- também precisa de min-width:0 pra deixar o .tname dentro dele encolher/truncar de verdade */
.player-hero-team .crest{ background:#fff; border-radius:50%; padding:2px; flex-shrink:0; }
.player-hero-team .tname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Nota média (rating), quando o fornecedor tem esse dado -- badge
   circular no canto, mesmo espírito visual do brasão do "Líder do
   campeonato" (ver .lider-hero .crest-wrap). Fica na própria linha
   do flex (não mais position:absolute) -- margin-left:auto empurra
   pro canto direito sozinha, sobrando espaço pro corpo encolher. */
.player-hero-rating{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%; flex-shrink:0; margin-left:auto;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.4);
}
.player-hero-rating .num{ font-size:18px; font-weight:800; color:#fff; line-height:1; }
.player-hero-rating .lbl{ font-size:7px; text-transform:uppercase; letter-spacing:.4px; color:rgba(255,255,255,.8); margin-top:2px; }
@media (max-width:640px){
  .player-hero{ padding:16px 14px; gap:12px; }
  .player-hero-photo{ width:56px; height:56px; font-size:18px; border-width:2px; }
  .player-hero-position{ font-size:8.5px; padding:3px 8px; margin-bottom:5px; }
  .player-hero-name{ font-size:16px; margin-bottom:4px; }
  .player-hero-team{ font-size:11px; }
  .player-hero-rating{ width:44px; height:44px; margin-left:8px; }
  .player-hero-rating .num{ font-size:13px; }
  .player-hero-rating .lbl{ display:none; }
}

/* Hero da página do Time (pedido do usuário: "refatorar a página dos
   times seguindo o modelo da página de jogadores com hero") -- mesmo
   molde do .player-hero acima (degradê nas cores do time + camada
   escura de legibilidade, texto sempre branco), só troca a foto pelo
   escudo. Escudo sobre fundo BRANCO sólido (não translúcido, ao
   contrário de .player-hero-photo) -- diferente de foto de jogador,
   escudo às vezes tem fundo transparente ou já é colorido (inclusive
   nas MESMAS cores do degradê de fundo, no fallback sem imagem de
   verdade — crestFallback() em app.js), então precisa de um fundo
   sólido neutro por trás pra continuar visível em qualquer time;
   mesma técnica já usada em .lider-hero .crest-wrap.

   AJUSTE (pedido do usuário: "o hero da página de times também pode
   ter as infos (imagem e conteúdo) lado a lado para diminuir a
   altura") -- mesmo motivo/fix do .player-hero acima: tirado o
   flex-wrap, escudo e conteúdo ficam sempre lado a lado (nunca
   quebra pra debaixo do escudo), nome/subtítulo truncam com
   reticências se precisar em vez de forçar quebra de linha. */
.team-hero{ display:flex; align-items:center; gap:16px; position:relative; }
.team-hero-crest{
  width:100px; height:100px; border-radius:50%; flex-shrink:0; padding:10px;
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.team-hero-crest .crest{ width:100% !important; height:100% !important; }
.team-hero-body{ min-width:0; flex:1 1 auto; }
.team-hero-badge{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:rgba(255,255,255,.2); color:#fff; padding:4px 10px; border-radius:100px; margin-bottom:8px;
}
.team-hero-name{
  font-size:26px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.25); line-height:1.15; margin:0 0 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.team-hero-sub{ font-size:13px; font-weight:600; color:rgba(255,255,255,.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){
  .team-hero{ padding:16px 14px; gap:12px; }
  .team-hero-crest{ width:56px; height:56px; padding:6px; }
  .team-hero-badge{ font-size:8.5px; padding:3px 8px; margin-bottom:5px; }
  .team-hero-name{ font-size:16px; margin-bottom:4px; }
  .team-hero-sub{ font-size:11px; }
}

/* Hero da página da Partida (pedido do usuário, 15/08/2026: "manter o
   destaque para as infos de horário e transmissão... mantenha o
   layout com heros, logos e cores"). Diferente do .team-hero/
   .player-hero acima (só 1 time pra colorir): aqui são 2 times, um de
   cada lado -- fundo é um degradê DIVIDIDO ao meio, metade nas cores
   do mandante, metade nas do visitante (ver matchHeroGradientCSS em
   app.js), pra carregar a identidade visual dos 2 clubes ao mesmo
   tempo, não só de um. Sempre em linha (crest | placar/vs | crest),
   mesmo espírito "nunca quebra pra baixo" do team-hero/player-hero
   (altura baixa em qualquer tela). */
.match-hero{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; }
.match-hero-side{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; min-width:0; }
.match-hero-side .crest{ background:#fff; border-radius:50%; padding:8px; }
.match-hero-team-name{
  font-size:14px; font-weight:800; color:#fff; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.25);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.match-hero-center{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; padding:0 6px; min-width:0; }
.match-hero-badge{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:rgba(255,255,255,.2); color:#fff; padding:3px 9px; border-radius:100px;
}
/* Jogo ao vivo na página da Partida (ver matchHeroHTML/app.js) --
   mesmo pulso do .live-tag da aba Jogos, adaptado pro fundo escuro do
   hero (fundo vermelho sólido em vez de translúcido branco). */
.match-hero-badge-live{ background:var(--brd-red); animation:liveTagPulse 1.8s ease-in-out infinite; }
.match-hero-score{ font-size:26px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.25); line-height:1.2; white-space:nowrap; }
.match-hero-score .dash{ opacity:.7; font-weight:600; margin:0 2px; }
.match-hero-vs{ font-size:16px; font-weight:800; color:rgba(255,255,255,.85); }
.match-hero-date{ font-size:11px; font-weight:600; color:rgba(255,255,255,.85); white-space:nowrap; }
@media (max-width:640px){
  .match-hero{ padding:16px 10px; gap:6px; }
  .match-hero-side .crest{ width:44px !important; height:44px !important; padding:5px; }
  .match-hero-team-name{ font-size:11px; }
  .match-hero-badge{ font-size:8px; padding:2px 7px; }
  .match-hero-score{ font-size:19px; }
  .match-hero-vs{ font-size:13px; }
  .match-hero-date{ font-size:9.5px; }
}

/* "Desempenho na temporada" (card ao lado de "Clube") -- 2 métricas
   derivadas (gols/jogo, participações em gol/jogo -- gols+assistências
   por jogo), só aparecem com pelo menos 1 jogo disputado (ver
   playerPerfHTML em app.js: sem "games", nem dá pra dividir por
   zero). */
.player-perf-stats{ display:flex; gap:28px; margin-top:14px; }
.player-perf-stats .v{ display:block; font-size:20px; font-weight:800; color:var(--text-0); }
.player-perf-stats .l{ display:block; font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* 5ª cor de ícone de KPI (só as 4 já existiam: blue/green/yellow/navy)
   -- Cartões (página do Jogador) usa vermelho por associação óbvia com
   cartão vermelho, ver renderPlayerPage. */
.kpi .ico.red{ background:rgba(217,45,32,.1); color:var(--brd-red); }

/* Elenco (lista de jogadores clicáveis na página do time, dentro de
   .table-std — ver playerRosterRowHTML em app.js) */
.roster-avatar-sm{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:11px; overflow:hidden; flex-shrink:0; }
.roster-avatar-sm img{ width:100%; height:100%; object-fit:cover; }
.rname{ font-size:12.5px; font-weight:700; color:var(--text-0); line-height:1.3; }
.rmeta{ font-size:10px; color:var(--text-2); }

/* Escalação titular do último jogo, estilo "jogo de botão" (campinho
   verde com os jogadores como discos redondos, um por posição/linha —
   ver formationPitchHTML em app.js) */
.formation-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.formation-coach{ font-size:11.5px; color:var(--text-2); font-weight:600; }
.button-pitch{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 1px, transparent 1px) 0 0/100% 33.4%,
    repeating-linear-gradient(180deg, #1E8F4E 0, #1E8F4E 11%, #1A7F45 11%, #1A7F45 22%);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-md);
  padding:18px 10px; display:flex; flex-direction:column-reverse; gap:14px;
  position:relative; overflow:hidden;
}
.button-pitch::before{ /* linha do meio-campo, decorativa */
  content:""; position:absolute; left:6%; right:6%; top:50%; height:1px; background:rgba(255,255,255,.35); transform:translateY(-50%);
}
.button-row{ display:flex; justify-content:center; align-items:flex-start; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.button-piece{ display:flex; flex-direction:column; align-items:center; gap:4px; width:58px; }
.button-disc{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12.5px;
  box-shadow:0 3px 0 rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.55);
}
.btn-name{ font-size:9.5px; font-weight:700; color:#fff; text-align:center; line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.btn-name.clickable-player{ cursor:pointer; }
.btn-name.clickable-player:hover{ text-decoration:underline; }
@media (max-width:520px){
  .button-piece{ width:48px; }
  .button-disc{ width:30px; height:30px; font-size:11px; }
  .btn-name{ font-size:8.8px; }
}
/* 2 campinhos de "jogo de botão" empilhados (mandante e visitante),
   ver "⚽ Jogo de botão" na página da Partida (matchLineupsSection em
   app.js) -- .button-pitch já é o campinho de 1 time só (reaproveitado
   sem alteração, mesmo usado na página do Time). */
.button-pitch-team-label{ font-size:11px; font-weight:800; color:var(--text-1); margin:0 0 8px; text-transform:uppercase; letter-spacing:.4px; }
.button-pitch-team-label:not(:first-child){ margin-top:20px; }

/* Barras de probabilidade */
.prob-row{ margin-bottom:12px; }
.prob-row:last-child{ margin-bottom:0; }
.prob-row .top-line{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.prob-row .top-line .team-cell, .prob-row .top-line .team-link{ font-size:12.5px; font-weight:600; }
.prob-row .top-line b{ font-size:12.5px; font-variant-numeric:tabular-nums; }
.prob-track{ height:6px; border-radius:100px; background:var(--bg-app); overflow:hidden; }
.prob-fill{ height:100%; border-radius:100px; transition:width .8s cubic-bezier(.22,.61,.36,1); }

/* Próximos jogos */
.fixture-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.fixture-row:last-child{ border-bottom:none; }
.fixture-when{ font-size:10.5px; color:var(--text-2); width:64px; flex-shrink:0; line-height:1.3; }
.fixture-teams{ flex:1; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; min-width:0; }
.fixture-teams .vs{ color:var(--text-2); font-weight:500; font-size:10.5px; }
.fixture-teams span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fixture-odds{ display:flex; gap:5px; flex-shrink:0; }
.fixture-odds .o{ font-size:11px; font-weight:700; padding:5px 7px; border-radius:7px; background:var(--bg-app); border:1px solid var(--border); font-variant-numeric:tabular-nums; min-width:34px; text-align:center; }

/* Badges V/E/D */
.form-dots{ display:flex; gap:6px; }
.form-dot{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:#fff; }
.form-dot.v{ background:var(--brd-positive); }
.form-dot.e{ background:var(--brd-warn); color:#5c4200; }
.form-dot.d{ background:var(--brd-red); }

/* Radar chart */
.radar-wrap{ display:flex; justify-content:center; min-width:0; }
.radar-wrap svg{ max-width:100%; height:auto; }

/* Comparativo entre times */
.compare-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.compare-select{ flex:1; min-width:0; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--bg-app); font-family:inherit; font-size:12px; font-weight:600; color:var(--text-0); }
/* Variante "encolhe pro conteúdo" (radar/comparador da página do
   time) — sem max-width, nomes bem mais longos que os do Brasileirão
   (ex.: "Brighton & Hove Albion" na Premier League) estouravam a
   largura da tela em mobile. Trunca com "…" em vez de estourar. */
.compare-select-fit{ flex:none; width:auto; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1024px){ .compare-select-fit{ max-width:130px; } }
.compare-vs{ font-size:11px; font-weight:800; color:var(--text-2); }
.compare-row{ margin-bottom:13px; }
.compare-row:last-child{ margin-bottom:0; }
.compare-vals{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.compare-track{ display:flex; height:6px; border-radius:100px; overflow:hidden; background:var(--bg-app); }
.compare-a{ background:var(--brd-blue); }
.compare-b{ background:var(--brd-green); }
.compare-label{ text-align:center; font-size:9.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; margin-top:5px; }

/* Odds card + afiliados */
.odds-hero{ text-align:center; margin-bottom:6px; }
.odds-hero .match{ font-size:13px; font-weight:700; margin-bottom:2px; }
.odds-hero .meta{ font-size:11px; color:var(--text-2); }
.odds-pills3{ display:flex; gap:8px; margin:12px 0; }
.odds-pill3{ flex:1; text-align:center; padding:10px 4px; border-radius:var(--radius-sm); background:var(--bg-app); border:1px solid var(--border); }
.odds-pill3 span{ display:block; font-size:9.5px; color:var(--text-2); text-transform:uppercase; }
.odds-pill3 b{ font-size:15px; font-weight:800; color:var(--brd-blue); }
/* justify-content:center funciona bem com poucos parceiros (hoje 3,
   ver AFFILIATE_OPERATORS em affiliates.js) — se um dia voltar a ter
   mais itens do que cabe na tela, overflow-x:auto ainda garante que dá
   pra rolar em vez de estourar o card. */
.affiliate-strip{ display:flex; justify-content:center; gap:8px; overflow-x:auto; margin-top:4px; }
/* Wrapper em si fica transparente/sem padding — quem desenha o visual
   é sempre um dos 2 filhos (nunca os dois ao mesmo tempo, ver
   affiliateLogoFallbackHandler em app.js), os dois no MESMO tamanho
   fixo (.affiliate-chip-btn) pra ficar uniforme entre parceiros com
   logo e o eventual parceiro ainda sem logo cadastrado:
   - .affiliate-chip-logo: a própria imagem vira o botão (fundo que ela
     já trouxer — cada marca manda com uma cor de fundo diferente,
     preto, verde, laranja... não tenta neutralizar isso), com borda +
     sombra em relevo (destaque claro em cima, sombra escura embaixo)
     pra parecer um botão de verdade, clicável.
   - .affiliate-chip-name: pill de texto de sempre (cor da marca, ver
     AFFILIATE_OPERATORS em affiliates.js), só aparece se a logo
     daquele parceiro ainda não tiver sido cadastrada — mesmo relevo,
     mesmo tamanho da logo. */
.affiliate-chip{ flex:none; display:flex; align-items:center; opacity:.95; }
.affiliate-chip-btn{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:84px; height:34px; border-radius:10px; border:1px solid rgba(0,0,0,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 3px 6px -2px rgba(0,0,0,.4);
}
.affiliate-chip-logo{ object-fit:cover; }
.affiliate-chip-name{
  display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px;
  font-size:11px; font-weight:700; color:#fff;
}
.affiliate-chip.disabled{ opacity:.35; cursor:not-allowed; }
.compliance-line{ font-size:9.5px; color:var(--text-2); margin-top:10px; line-height:1.5; text-align:center; }
.compliance-line a{ color:var(--brd-blue); font-weight:600; }

/* Odds + parceiros dentro do card de cada jogo (aba Jogos), antes do
   botão "Ver detalhes" — só em jogo pendente (ver matchOddsStripHTML). */
.match-odds-strip{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
.odds-pills3-compact{ margin:0 0 10px; gap:6px; }
.odds-pills3-compact .odds-pill3{ padding:6px 4px; }
.odds-pills3-compact .odds-pill3 span{ font-size:8.5px; }
.odds-pills3-compact .odds-pill3 b{ font-size:13px; }

/* Line chart (movimentação de odds) */
.range-tabs{ display:flex; gap:4px; }
.range-tab{ padding:5px 10px; border-radius:100px; font-size:10.5px; font-weight:700; border:1px solid var(--border); background:var(--bg-app); color:var(--text-1); cursor:pointer; }
.range-tab.active{ background:var(--brd-blue); color:#fff; border-color:transparent; }
.linechart-val{ font-size:20px; font-weight:800; }
.linechart-val small{ font-size:11px; font-weight:700; padding:2px 6px; border-radius:100px; margin-left:6px; }
.linechart-val small.up{ background:rgba(32,184,102,.14); color:var(--brd-positive); }
.linechart-val small.down{ background:rgba(217,45,32,.12); color:var(--brd-red); }

/* Simulador "E se" */
.stepper{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.stepper button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--bg-app); font-size:15px; font-weight:700; cursor:pointer; color:var(--text-0); }
.stepper b{ font-size:16px; min-width:20px; text-align:center; }
.stepper span{ font-size:12px; color:var(--text-1); }
.whatif-results{ display:flex; gap:10px; }
.whatif-tile{ flex:1; text-align:center; padding:12px 6px; border-radius:var(--radius-sm); background:var(--bg-app); border:1px solid var(--border); }
.whatif-tile .lbl{ font-size:9.5px; color:var(--text-2); text-transform:uppercase; }
.whatif-tile .val{ font-size:18px; font-weight:800; }
.whatif-tile .delta{ font-size:10px; font-weight:700; }
.whatif-tile .delta.up{ color:var(--brd-positive); }
.whatif-tile .delta.down{ color:var(--brd-red); }

/* Botões / inputs (do design system) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background:var(--brd-blue); color:#fff; }
.btn-secondary{ background:var(--bg-surface); color:var(--text-0); border-color:var(--border); }
.btn-accent{ background:var(--brd-yellow); color:#3b2c00; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.full{ width:100%; }
.input{ padding:9px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-surface); font-family:inherit; font-size:12.5px; color:var(--text-0); width:100%; }
.input:focus{ outline:2px solid var(--brd-blue); outline-offset:1px; }

/* Tags/badges genéricos */
.tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:100px; font-size:10px; font-weight:700; }
.tag-blue{ background:rgba(47,128,237,.12); color:var(--brd-info); }
.tag-green{ background:rgba(32,184,102,.14); color:var(--brd-positive); }
.tag-red{ background:rgba(217,45,32,.12); color:var(--brd-red); }
.tag-yellow{ background:rgba(255,193,7,.16); color:#8A6300; }
.tag-gray{ background:var(--bg-app); color:var(--text-1); border:1px solid var(--border); }

/* Match card completo (aba Jogos) */
.round-switcher{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.round-switcher button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--bg-surface); cursor:pointer; font-size:15px; color:var(--text-0); }
.round-switcher .label{ text-align:center; }
.round-switcher .label b{ display:block; font-size:14px; }
.round-switcher .label span{ font-size:10.5px; color:var(--text-2); }

/* Grid de jogos (aba Jogos > Rodadas) — mesmo tratamento do
   Simulador: 2 colunas por padrão, 3 em telas bem largas, 1 no
   mobile. Cards com detalhes expandidos ficam mais altos que os
   vizinhos fechados na mesma linha — normal em grid (não é masonry),
   align-items:start evita que isso estique os outros cards. */
#matchesList{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; min-width:0; }
@media (max-width:720px){ #matchesList{ grid-template-columns:minmax(0, 1fr); } }
@media (min-width:1500px){ #matchesList{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.match-card{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:18px; margin:0; }
.match-teams{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.match-team{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.match-team .tname{ font-size:11.5px; font-weight:600; color:var(--text-1); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match-score{ font-size:22px; font-weight:800; display:flex; align-items:center; gap:8px; min-width:70px; justify-content:center; font-variant-numeric:tabular-nums; }
.match-score .dash{ color:var(--text-2); font-size:14px; font-weight:500; }
.match-meta{ text-align:center; margin-top:8px; font-size:10.5px; color:var(--text-2); }
.pending-tag{ display:inline-block; margin-top:4px; font-size:10px; padding:3px 9px; border-radius:100px; background:rgba(47,128,237,.1); color:var(--brd-info); }
/* Badge "AO VIVO" -- jogo em andamento agora (ver `live:true` em
   getRoundMatches/app.js, pedido do usuário 26/08/2026: "página de
   jogos reflita os resultados ao vivo"). Mesmo formato de pílula do
   .pending-tag, cor de perigo (--brd-red) em vez de info, com um pulso
   sutil de opacidade pra chamar atenção sem ficar irritante. */
.live-tag{ display:inline-block; margin-top:4px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px; background:rgba(217,45,32,.12); color:var(--brd-red); animation:liveTagPulse 1.8s ease-in-out infinite; }
@keyframes liveTagPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* Botão "Ver detalhes" — card fechado por padrão, só carrega/mostra
   escalação, gols, estatísticas etc. quando o usuário expande. */
.match-toggle{
  display:block; width:100%; margin-top:12px; padding:8px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg-app); color:var(--text-1);
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; text-align:center;
}
.match-toggle:hover{ background:var(--border); }
.match-detail{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.detail-subtitle{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2); margin:14px 0 6px; }
.detail-subtitle:first-child{ margin-top:0; }

/* Escalações */
.lineups-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; }
@media (max-width:480px){ .lineups-grid{ grid-template-columns:minmax(0, 1fr); } }
.lineup-side{ min-width:0; }
.lineup-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.lineup-head b, .lineup-head .tname{ font-size:12px; font-weight:700; }
.lineup-formation{ margin-left:auto; font-size:10px; color:var(--text-2); font-weight:600; }
.lineup-coach{ font-size:10.5px; color:var(--text-2); margin-bottom:8px; }
.lineup-subtitle{ font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2); margin:10px 0 4px; }
.lineup-list{ display:flex; flex-direction:column; gap:2px; }
.lineup-player{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-1); padding:3px 0; }
.lineup-player .lp-num{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--bg-app); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:var(--text-2); }
.lineup-player .lp-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lineup-player .lp-pos{ flex-shrink:0; font-size:9.5px; color:var(--text-2); }
.lineup-subs .lineup-player{ opacity:.75; }

/* Substituições */
.subs-list{ font-size:11.5px; }
.sub-line{ padding:4px 0; color:var(--text-1); }
.sub-line b{ color:var(--text-0); display:inline-block; width:34px; }
.sub-out{ color:var(--brd-red); }
.sub-in{ color:var(--brd-positive); }

/* Onde e quando (jogo futuro) */
.venue-line, .tv-line{ font-size:11.5px; color:var(--text-1); padding:4px 0; }
.tv-source{ font-size:10px; color:var(--text-2); margin-top:2px; }

.goals-list{ margin-top:0; font-size:12px; }
.goal-line{ display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--text-1); }
.goal-line b{ color:var(--text-0); width:34px; }
.stat-bar-row{ margin-bottom:12px; }
.stat-bar-row .labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-1); margin-bottom:5px; font-variant-numeric:tabular-nums; }
.stat-bar-row .track{ display:flex; height:6px; border-radius:100px; overflow:hidden; background:var(--bg-app); }
.stat-bar-row .fill-a{ background:var(--brd-blue); }
.stat-bar-row .fill-b{ background:var(--brd-green); }
.stat-bar-row .name{ font-size:9.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; text-align:center; margin-top:6px; }
.watch-link{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11.5px; color:var(--brd-blue); font-weight:600; width:fit-content; }
.watch-link svg{ width:14px; height:14px; }

/* Simulador (aba completa) */
/* Grid de 3 colunas no desktop, em vez de uma lista empilhada de
   largura total — evita a sensação de tela vazia com poucos jogos
   por rodada. Segue os mesmos breakpoints (1180/720) usados no resto
   do layout pra cair pra 2 e depois 1 coluna. */
#simMatchesList{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; min-width:0; }
@media (max-width:720px){ #simMatchesList{ grid-template-columns:minmax(0, 1fr); } }
@media (min-width:1500px){ #simMatchesList{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* Tabela ao vivo na barra lateral do Simulador — fica grudada no
   topo (abaixo da topbar) enquanto a lista de jogos rola, e some da
   lateral pra empilhar embaixo assim que .dash-layout vira 1 coluna. */
@media (min-width:1181px){ .sim-table-card{ position:sticky; top:calc(var(--topbar-h) + 16px); } }
.sim-card{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px; margin:0; }
.sim-teams{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sim-inputs{ display:flex; align-items:center; gap:10px; }
.score-input{ width:44px; height:44px; text-align:center; border-radius:10px; background:var(--bg-app); border:1px solid var(--border); color:var(--text-0); font-size:16px; font-weight:700; font-family:inherit; }
.score-input:focus{ outline:2px solid var(--brd-blue); border-color:transparent; }
.sim-toolbar{ display:flex; gap:10px; margin:14px 0; }
.sim-toolbar .btn{ flex:1; }
.match-actions{ display:flex; gap:8px; margin-top:14px; }
.btn-sm{ flex:1; padding:8px 10px; font-size:11px; border-radius:9px; font-weight:700; cursor:pointer; text-align:center; border:1px solid var(--border); background:var(--bg-app); color:var(--text-0); }
.btn-sm.primary{ background:var(--brd-blue); color:#fff; border-color:transparent; }

/* Probabilidades (tubos) */
.tubes{ display:flex; gap:10px; align-items:flex-end; height:90px; margin-top:12px; }
.tube{ flex:1; position:relative; height:100%; border-radius:8px 8px 3px 3px; background:var(--bg-app); border:1px solid var(--border); overflow:hidden; }
.tube .liquid{ position:absolute; left:0; right:0; bottom:0; height:0%; transition:height 1s cubic-bezier(.22,.61,.36,1); }
.tube.campeao .liquid{ background:var(--brd-yellow); }
.tube.libertadores .liquid{ background:var(--brd-blue); }
.tube.sula .liquid{ background:var(--brd-info); }
.tube.rebaixamento .liquid{ background:var(--brd-red); }
.tube .pct{ position:absolute; top:6px; left:0; right:0; text-align:center; font-size:10.5px; font-weight:800; color:#10182B; text-shadow:0 1px 2px rgba(255,255,255,.4); }
.tube-labels{ display:flex; gap:10px; margin-top:8px; }
.tube-labels span{ flex:1; text-align:center; font-size:8.5px; color:var(--text-2); text-transform:uppercase; }
.sort-bar{ display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; }
.sort-chip{ flex:none; padding:8px 14px; border-radius:100px; font-size:11.5px; font-weight:600; background:var(--bg-app); border:1px solid var(--border); color:var(--text-1); cursor:pointer; }
.sort-chip.active{ background:var(--brd-blue); color:#fff; border-color:transparent; }

/* Notícias (placeholder) */
.news-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.news-item:last-child{ border-bottom:none; }
.news-thumb{ width:52px; height:52px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy)); }
.news-item h4{ font-size:12.5px; font-weight:700; margin:0 0 4px; line-height:1.35; }
.news-item .meta{ font-size:10.5px; color:var(--text-2); }

/* ================= BOTTOM NAV (mobile) ================= */
.bottom-nav{ display:none; }
@media (max-width:1024px){
  .top-tabs{ display:none; }
  .hamburger{ display:none; }
  .sidebar{ display:none; }
  .top-search{ display:none; }
  .avatar span{ display:none; }
  .content{ padding:14px 14px 100px; }
  .page-head h1{ font-size:20px; }
  .mobile-only{ display:flex; }

  .topbar{
    /* viewport-fit=cover (PWA em tela cheia) deixa o conteúdo se
       estender por baixo da status bar/notch/ilha dinâmica do
       aparelho — sem esse espaçamento extra, o topbar (logo, sino)
       ficava colado ali, se misturando com hora/bateria/sinal.
       env() volta 0 fora desse contexto (navegador normal), então
       isso não muda nada fora do app instalado. */
    padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top));
    gap:10px; height:auto;
    background:var(--brd-navy); border-bottom:none;
  }
  .topbar .icon-btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#fff; margin-left:auto; }
  .topbar .icon-btn .dot{ border-color:var(--brd-navy); }
  .avatar{ display:none; }

  .page-head{ padding:14px 2px 0; }

  .bottom-nav{
    display:flex; position:fixed; left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60;
    background:var(--brd-navy); border-radius:22px;
    padding:8px 6px; gap:2px;
    box-shadow:0 16px 32px -12px rgba(6,43,92,.45), 0 2px 8px rgba(0,0,0,.12);
  }
  .content{ padding:14px 14px 100px; }
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 2px; border:none; background:none; color:#8FA3C7; font-size:9px; font-weight:600;
    border-radius:16px; transition:background .2s ease, color .2s ease;
  }
  .bn-item svg{ width:19px; height:19px; }
  .bn-item.active{ color:#2A2200; background:var(--brd-yellow); }

  .kpi-hero{ display:none; } /* substituído pelo .lider-hero dedicado no mobile */

  .lider-hero{
    display:flex; align-items:center; gap:16px; padding:20px;
    background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy)); border-radius:var(--radius-lg);
    color:#fff; margin-bottom:14px;
  }
  .lider-hero .crest-wrap{ width:64px; height:64px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:6px; }
  .lider-hero .crest-wrap .crest{ width:100% !important; height:100% !important; }
  .lider-hero .lbl{ font-size:10.5px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.5px; }
  .lider-hero .team{ font-size:19px; font-weight:700; margin:2px 0 6px; }
  .lider-hero .pts{ font-size:30px; font-weight:800; line-height:1; }
  .lider-hero .pts small{ font-size:13px; font-weight:600; color:rgba(255,255,255,.7); }

  .grid-kpi{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .grid-kpi .kpi{ flex-direction:column; align-items:flex-start; gap:6px; }
  .grid-kpi .card{ padding:12px 10px; }
  .grid-kpi .ico{ width:24px; height:24px; border-radius:7px; font-size:12px; }
  .grid-kpi .lbl{ font-size:8.5px; line-height:1.25; }
  .grid-kpi .val{ font-size:15px; }
  .grid-kpi .val small{ display:none; }

  .odds-pills3, .odds3{ gap:8px; }
  .odds-pill3{ padding:14px 4px; }
  .odds-pill3 b{ font-size:18px; }
}

/* Próximos jogos (coluna lateral) */
.rail-fixture{ padding:12px 0; border-bottom:1px solid var(--border); }
.rail-fixture:last-child{ border-bottom:none; }
.rail-fixture .when{ font-size:10.5px; color:var(--text-2); margin-bottom:6px; }
.rail-fixture .teams{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; margin-bottom:8px; }
.rail-fixture .teams .vs{ color:var(--text-2); font-weight:500; font-size:10.5px; }
.rail-fixture .odds3{ display:flex; gap:6px; }
.rail-fixture .odds3 a, .rail-fixture .odds3 span{
  flex:1; text-align:center; padding:6px 4px; border-radius:8px; font-size:11px; font-weight:700;
  background:var(--bg-app); border:1px solid var(--border); color:var(--brd-blue);
}
/* Estado alternativo do espaço das odds ("A definir" / local do jogo)
   — ocupa a linha inteira sozinho (só 1 span em vez de 3), texto mais
   solto (sem negrito forçado) e sem quebrar/estourar com nome de
   estádio comprido — ver oddsSlotFallbackHTML em app.js. */
.rail-fixture .odds3 .odds-note{
  font-weight:600; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Notícias (mini, coluna lateral) */
.news-mini{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.news-mini:last-child{ border-bottom:none; }
.news-mini .thumb{ width:40px; height:40px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg, var(--brd-blue), var(--brd-navy)); }
.news-mini h4{ font-size:11.5px; font-weight:700; margin:0 0 3px; line-height:1.3; }
.news-mini .meta{ font-size:9.5px; color:var(--text-2); }

.empty{ text-align:center; padding:30px 16px; color:var(--text-2); font-size:12.5px; }
.mode-pill{ font-size:10px; font-weight:700; padding:4px 10px; border-radius:100px; }
.mode-pill.live{ background:rgba(32,184,102,.14); color:var(--brd-positive); }
.mode-pill.demo{ background:rgba(255,204,0,.18); color:#8A6300; }

/* ================= Assine o BR Data (planos + checkout) ================= */
.plans-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:16px;
}
.plan-card{
  position:relative; background:var(--bg-surface); border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; cursor:pointer; transition:border-color .15s ease, transform .1s ease; min-width:0;
}
.plan-card:hover{ border-color:var(--brd-blue); }
.plan-card.selected{ border-color:var(--brd-yellow); box-shadow:0 0 0 3px rgba(255,204,0,.18); }
.plan-card.highlight{ border-color:rgba(0,87,184,.4); }
.plan-card.highlight.selected{ border-color:var(--brd-yellow); }
.plan-badge{
  position:absolute; top:-11px; left:20px; background:var(--brd-blue); color:#fff; font-size:10px; font-weight:700;
  padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.4px;
}
.plan-image{ display:block; width:100%; max-height:110px; object-fit:cover; border-radius:10px; margin-bottom:12px; }
.plan-title{ font-size:17px; font-weight:800; color:var(--text-0); }
.plan-tagline{ font-size:12px; color:var(--text-1); margin:2px 0 14px; min-height:16px; }
.plan-price{ font-size:26px; font-weight:800; color:var(--brd-blue); margin-bottom:14px; }
.plan-price small{ font-size:11px; font-weight:600; color:var(--text-2); }
.plan-features{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.plan-features li{ font-size:12.5px; color:var(--text-1); padding-left:20px; position:relative; }
.plan-features li::before{ content:"✓"; position:absolute; left:0; color:var(--brd-positive); font-weight:800; }

.apoie-form-card{ max-width:520px; }
.apoie-selected-plan{ font-size:13px; color:var(--text-1); margin-bottom:16px; padding:10px 12px; background:var(--bg-app); border-radius:var(--radius-sm); }
.apoie-selected-plan b{ color:var(--text-0); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12px; font-weight:700; color:var(--text-1); }
.field input{
  padding:11px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-app);
  font-family:inherit; font-size:13.5px; color:var(--text-0); width:100%;
}
.field input:focus{ outline:none; border-color:var(--brd-blue); }
.apoie-form-error{ background:rgba(255,77,94,.1); color:#B3202F; border:1px solid rgba(255,77,94,.3); border-radius:9px; padding:10px 12px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
.apoie-disclaimer{ font-size:11px; color:var(--text-2); margin:14px 0 0; text-align:center; }

.apoie-status-banner{
  display:flex; align-items:flex-start; gap:12px; padding:16px; border-radius:var(--radius-lg); margin-bottom:16px; border:1px solid transparent;
}
.apoie-status-banner .icon{ font-size:22px; line-height:1; }
.apoie-status-banner b{ font-size:14px; display:block; margin-bottom:2px; }
.apoie-status-banner p{ font-size:12.5px; color:var(--text-1); margin:0; }
.apoie-status-banner.success{ background:rgba(32,184,102,.1); border-color:rgba(32,184,102,.3); }
.apoie-status-banner.pending{ background:rgba(255,204,0,.12); border-color:rgba(255,204,0,.35); }
.apoie-status-banner.error{ background:rgba(255,77,94,.1); border-color:rgba(255,77,94,.3); }

@media (max-width:1024px){
  .plans-grid{ grid-template-columns:1fr; }
  .apoie-form-card{ max-width:none; }
}

/* iOS Safari/WebKit: campos de formulário com font-size menor que 16px
   fazem o navegador dar zoom automático ao focar o campo — e em PWA
   instalado (sem chrome do navegador pra dar duplo-toque e desfazer)
   esse zoom pode "vazar" pro resto do app depois do login. Força 16px
   em telas mobile só nesses seletores, sem alterar a tipografia mais
   compacta do desktop. */
@media (max-width:1024px){
  .field input,
  .top-search input,
  .roster-search input,
  .compare-select,
  .input{
    font-size:16px;
  }
}

/* ================= Gate de login/cadastro (tela cheia) ================= */
.auth-gate{
  display:flex; flex-direction:column; align-items:center; min-height:100vh;
  padding:40px 16px 60px; background:linear-gradient(160deg, var(--brd-navy), #030d1e);
  overflow-y:auto;
}
.auth-gate-inner{ width:100%; max-width:920px; position:relative; }
/* Fecha o gate sob demanda (ver comentário no HTML) — some quando é
   #gatePendingView (mostrado via showGateView em app.js), esse não é
   dispensável. */
.auth-gate-close{
  position:absolute; top:0; right:0; background:none; border:none; color:rgba(255,255,255,.55);
  font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; font-family:inherit;
}
.auth-gate-close:hover{ color:#fff; }
@media (max-width:640px){ .auth-gate-close{ top:-8px; right:-4px; } }
/* Instalado como app (PWA): centraliza verticalmente. Usa margin:auto
   em vez de justify-content:center de propósito — com
   justify-content:center, conteúdo mais alto que a tela (a view de
   cadastro, com os 4 cards de plano) fica com a borda de cima
   inacessível mesmo rolando (flexbug #9); com margin:auto, quando não
   sobra espaço a margem some sozinha e volta a ficar 100% rolável. */
@media (display-mode: standalone){
  .auth-gate-inner{ margin-top:auto; margin-bottom:auto; }
}
.auth-gate-brand{ display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.auth-gate-logo{ height:120px; width:auto; }
@media (max-width:640px){ .auth-gate-logo{ height:88px; } }
.auth-gate-card{
  background:var(--bg-surface); border-radius:var(--radius-lg); padding:28px; max-width:460px; margin:0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.auth-gate-card:has(.gate-plans-grid){ max-width:920px; }
.auth-gate-card h2{ font-size:20px; font-weight:800; color:var(--text-0); margin:0 0 4px; text-align:center; }
.auth-gate-sub{ font-size:13px; color:var(--text-1); text-align:center; margin:0 0 20px; }
.gate-plans-grid{ margin-bottom:20px; }
.gate-plans-grid .plan-card{ padding:16px; }
.gate-plans-grid .plan-price{ font-size:21px; }
.auth-gate-form{ max-width:420px; margin:0 auto; }
.auth-gate-switch{ text-align:center; font-size:12.5px; color:var(--text-1); margin:16px 0 0; }
.auth-gate-switch a{ color:var(--brd-blue); font-weight:700; text-decoration:none; cursor:pointer; }
.auth-gate-switch a:hover{ text-decoration:underline; }
.auth-gate-disclaimer{ text-align:center; font-size:11px; color:rgba(255,255,255,.55); margin:24px 0 0; }
.auth-gate-disclaimer a{ color:var(--brd-yellow); text-decoration:underline; }

/* Faixa de convite pra instalar no celular (desktop) — ver comentário
   no HTML (#desktopBanner) e evaluateDesktopBanner em app.js. Fica no
   fluxo normal da página (sem position:fixed de propósito — mais
   simples, sem z-index/sobreposição pra gerenciar), empurra o resto
   do conteúdo pra baixo só enquanto estiver visível. */
.desktop-banner{ background:var(--brd-navy); border-bottom:1px solid rgba(255,255,255,.08); }
.desktop-banner-row{ display:flex; align-items:center; gap:12px; max-width:1400px; margin:0 auto; padding:10px 20px; }
.desktop-banner-icon{ font-size:16px; flex-shrink:0; }
.desktop-banner-text{ flex:1; font-size:12.5px; color:rgba(255,255,255,.85); }
.desktop-banner-toggle{
  flex-shrink:0; background:none; border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:6px 14px;
  font-size:11.5px; font-weight:700; color:#fff; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.desktop-banner-toggle:hover{ background:rgba(255,255,255,.08); }
.desktop-banner-close{
  flex-shrink:0; background:none; border:none; color:rgba(255,255,255,.6); font-size:20px; line-height:1;
  cursor:pointer; padding:2px 6px; font-family:inherit;
}
.desktop-banner-close:hover{ color:#fff; }
.desktop-banner-expand{ max-width:420px; margin:0 auto; padding:0 20px 20px; }

/* Conteúdo dentro da faixa expandida (QR + passo a passo de
   instalação) — mesmas classes de antes, reaproveitadas aqui dentro. */
.desktop-gate-qr{ display:flex; justify-content:center; margin:16px 0; }
.desktop-gate-qr svg{ width:150px; height:150px; border-radius:12px; display:block; }
.desktop-gate-url{ text-align:center; font-size:11.5px; color:var(--text-2); word-break:break-all; margin:0 0 16px; }
.desktop-gate-steps{ display:flex; flex-direction:column; gap:12px; padding:14px 16px; background:var(--bg-app); border-radius:var(--radius-md); margin-bottom:12px; }
.desktop-gate-steps div{ display:flex; flex-direction:column; gap:2px; }
.desktop-gate-steps b{ font-size:12.5px; color:var(--text-0); }
.desktop-gate-steps span{ font-size:12px; color:var(--text-1); }
.desktop-gate-soon{ text-align:center; font-size:11.5px; color:var(--text-2); margin:0; }

@media (max-width:640px){
  .gate-plans-grid{ grid-template-columns:1fr; }
  .auth-gate-card{ padding:20px; }
}

/* Menu do avatar (topbar) — abre "Sair" */
.avatar{ position:relative; cursor:pointer; }
.avatar-menu{
  position:absolute; top:calc(100% + 8px); right:0; width:200px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card); z-index:60; overflow:hidden; display:none; padding:10px;
}
.avatar-menu.open{ display:block; }
.avatar-menu-email{ font-size:11.5px; font-weight:700; color:var(--text-0); padding:4px 6px 2px; word-break:break-all; }
.avatar-menu-plan{ font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; padding:0 6px 8px; }
.avatar-menu-item{
  width:100%; text-align:left; padding:8px 6px; border:none; background:none; font-size:12.5px; font-weight:700;
  color:#B3202F; cursor:pointer; border-radius:8px; font-family:inherit;
}
.avatar-menu-item:hover{ background:rgba(255,77,94,.08); }

/* Página "Assine o BR Data" já logado (upgrade de plano) */
.apoie-current-plan{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.apoie-current-plan .lbl{ font-size:11px; color:var(--text-1); text-transform:uppercase; letter-spacing:.4px; }
.apoie-current-plan .val{ font-size:16px; font-weight:800; color:var(--text-0); }
.plan-card.current{ opacity:.75; cursor:default; }
.plan-card.current:hover{ border-color:var(--border); }

#btnForceRefresh.spinning svg{ animation:btn-refresh-spin .8s linear infinite; }
@keyframes btn-refresh-spin{ to{ transform:rotate(360deg); } }

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