/* ============================================================
   ZÉ APOSTAS — APP / GUIA
   Etapa A: Identidade Premium Unificada (Design System)
   ============================================================ */

:root {
  --za-bg-top:#07111f;
  --za-bg-bottom:#0c1728;
  --za-bg-deep:#050d18;
  --za-surface:rgba(255,255,255,.045);
  --za-surface-2:rgba(255,255,255,.06);
  --za-surface-strong:rgba(255,255,255,.085);
  --za-line:rgba(148,163,184,.16);
  --za-line-strong:rgba(148,163,184,.24);
  --za-text:#f8fafc;
  --za-text-soft:#d7e2ef;
  --za-muted:#94a3b8;
  --za-coral:#ff6f61;
  --za-blue:#38bdf8;
  --za-blue-deep:#1d4ed8;
  --za-green:#22c55e;
  --za-yellow:#fbbf24;
  --za-red:#ef4444;
  --za-shadow:0 16px 42px rgba(0,0,0,.34);
  --za-shadow-soft:0 12px 28px rgba(0,0,0,.22);
  --za-radius-sm:14px;
  --za-radius-md:22px;
  --za-radius-lg:28px;
  --za-logo-mark:url('/app/assets/images/za-mark.png');
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ min-height:100%; }
body{ margin:0; min-height:100vh; font-family:'Roboto',Arial,sans-serif; color:var(--za-text); background: radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 24%), radial-gradient(circle at top right, rgba(255,111,97,.10), transparent 28%), radial-gradient(circle at bottom left, rgba(34,197,94,.08), transparent 24%), radial-gradient(circle at bottom right, rgba(251,191,36,.08), transparent 24%), linear-gradient(180deg,var(--za-bg-top),var(--za-bg-bottom)); transition:background .25s ease,color .25s ease; }
a, a:visited, a:hover, a:active{ text-decoration:none !important; color:inherit; }
img{ max-width:100%; display:block; }

.za-container{ width:100%; max-width:560px; margin:0 auto; padding:24px 16px 18px; display:flex; flex-direction:column; min-height:100vh; }
.za-content-wrapper{ flex-grow:1; }
@media (max-width:420px){ .za-container{ padding:20px 14px 18px; } }

/* ============================================================
   BOTÕES E BOTTOM NAV (Centralizados)
   ============================================================ */
.za-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:47px; padding:0 18px; border-radius:16px; border:1px solid transparent; text-align:center; font-size:13px; line-height:1.1; font-weight:780; letter-spacing:.01em; cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.za-btn:disabled, .za-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.za-btn:not(:disabled):active{ transform:translateY(1px) scale(.99); }
.za-btn-primary{ width:min(100%,360px); border-color:rgba(246,199,98,.28); color:#11100b; background:linear-gradient(180deg,#ffe08a 0%,#c99c3f 100%); box-shadow:0 16px 30px rgba(246,199,98,.20); }
.za-btn-secondary{ border-color:rgba(56,189,248,.18); color:#e0f2fe; background:rgba(56,189,248,.10); box-shadow:var(--za-shadow-soft); }
.za-btn-secondary.is-ghost{ border-color:var(--za-line); color:var(--za-text-soft); background:rgba(255,255,255,.05); box-shadow:none; }
.za-btn-context{ min-height:30px; padding:0 12px; border-radius:999px; border-color:rgba(56,189,248,.18); color:#7dd3fc; background:rgba(56,189,248,.08); font-size:11px; font-weight:760; box-shadow:none; }

.za-bottom-nav{ position:fixed; left:10px; right:10px; bottom:10px; z-index:1000; display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:8px 10px 10px; border-radius:26px; border:1px solid rgba(148,163,184,.12); background:rgba(5,13,24,.82); backdrop-filter:blur(18px); box-shadow:0 16px 38px rgba(0,0,0,.34); }
.za-bottom-link, .za-bottom-btn{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:64px; padding:4px 2px; border-radius:20px; color:rgba(215,226,239,.74); transition:transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease; }
.za-bottom-ico-wrap{ width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(148,163,184,.10); box-shadow:0 10px 20px rgba(0,0,0,.18); transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.za-bottom-ico{ font-size:20px; line-height:1; transition:transform .12s ease, color .12s ease; }
.za-bottom-label{ font-size:10px; font-weight:800; letter-spacing:.01em; line-height:1.05; transition:font-size .12s ease, font-weight .12s ease, color .12s ease; }
.za-bottom-link.is-active, .za-bottom-btn.is-active, .za-bottom-link:active, .za-bottom-btn:active{ transform:scale(1.02); z-index:3; color:#ffffff; box-shadow:0 4px 12px rgba(56,189,248,.14), 0 2px 5px rgba(0,0,0,.16); }
.za-bottom-link.is-active .za-bottom-ico-wrap, .za-bottom-btn.is-active .za-bottom-ico-wrap, .za-bottom-link:active .za-bottom-ico-wrap, .za-bottom-btn:active .za-bottom-ico-wrap{ background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); border-color:rgba(255,255,255,.14); box-shadow:0 12px 24px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.03) inset; transform:scale(1.04); }
.za-bottom-link.is-active .za-bottom-ico, .za-bottom-btn.is-active .za-bottom-ico, .za-bottom-link:active .za-bottom-ico, .za-bottom-btn:active .za-bottom-ico{ transform:scale(1.06); color:#ffffff; }
.za-bottom-link.is-active .za-bottom-label, .za-bottom-btn.is-active .za-bottom-label, .za-bottom-link:active .za-bottom-label, .za-bottom-btn:active .za-bottom-label{ font-size:11.5px; font-weight:800; }

/* ============================================================
   CABEÇALHOS, AVATARES E TOPBAR
   ============================================================ */
.za-header-hero-row{ display:flex; align-items:flex-start; gap:12px; }
.za-header-avatar-link, .za-header-avatar-static{ width:52px; height:52px; min-width:52px; border-radius:18px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(255,111,97,.12)); box-shadow:0 10px 22px rgba(0,0,0,.20); color:var(--za-text); font-size:22px; font-weight:900; line-height:1; }
.za-header-avatar-link img, .za-header-avatar-static img{ width:100%; height:100%; object-fit:cover; display:block; }
.za-hero-topbar{ width:100%; display:flex; align-items:center; padding:12px 16px; margin-bottom:8px; }
.za-topbar-user{ display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
.za-topbar-avatar, .za-topbar-avatar-fallback{ width:28px; height:28px; min-width:28px; border-radius:999px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.08); font-size:13px; }
.za-topbar-avatar img{ width:100%; height:100%; object-fit:cover; }
.za-topbar-text{ font-size:13px; font-weight:700; color:#fff; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.za-topbar-action{ width:28px; height:28px; min-width:28px; border-radius:999px; display:grid; place-items:center; margin-right:10px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); font-size:13px; }
@media (max-width: 420px){ .za-header-avatar-link, .za-header-avatar-static{ width:48px; height:48px; min-width:48px; border-radius:16px; font-size:20px; } }

/* ============================================================
   SUB NAV (Igualdade Absoluta) E CHIPS DE FILTRO
   ============================================================ */
.za-subnav{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; overflow:visible; }
.za-subnav-btn{ position:relative; overflow:visible; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:58px; padding:10px 8px; border-radius:18px; color:var(--za-text-soft); transition:transform .12s ease, box-shadow .12s ease, color .18s ease; }
.za-subnav-ico{ display:grid; place-items:center; font-size:18px; line-height:1; transition:transform .12s ease; }
.za-subnav-label{ font-size:11px; font-weight:800; line-height:1.1; text-align:center; transition:font-size .12s ease; }
.za-subnav-btn::after{ content:""; position:absolute; left:-4px; right:-4px; top:-4px; bottom:-4px; border-radius:18px; background:radial-gradient(circle, rgba(56,189,248,.12), transparent 72%); z-index:-1; opacity:0; transition:opacity .12s ease; }
.za-subnav-btn.is-active, .za-subnav-btn:active{ transform:scale(1.02); z-index:3; color:#ffffff; box-shadow:0 4px 12px rgba(56,189,248,.12), 0 2px 5px rgba(0,0,0,.14); }
.za-subnav-btn.is-active .za-subnav-ico, .za-subnav-btn:active .za-subnav-ico{ transform:scale(1.06); }
.za-subnav-btn.is-active .za-subnav-label, .za-subnav-btn:active .za-subnav-label{ font-size:11.5px; }
.za-subnav-btn.is-active::after, .za-subnav-btn:active::after{ opacity:1; }

.za-competition-nav{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; }
.za-competition-nav::-webkit-scrollbar{ display:none; }
.za-competition-chip{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.12); background:rgba(255,255,255,.04); color:rgba(226,232,240,.82); font-size:12px; font-weight:700; white-space:nowrap; box-shadow:0 10px 18px rgba(0,0,0,.12); }
.za-competition-chip.is-active{ background:linear-gradient(180deg, rgba(59,130,246,.26), rgba(37,99,235,.18)); border-color:rgba(96,165,250,.52); color:#dbeafe; box-shadow:0 10px 20px rgba(2,6,23,.18), 0 0 0 1px rgba(96,165,250,.18) inset; }

@media (max-width:420px){ .za-subnav{ gap:10px; } .za-subnav-btn{ min-height:54px; padding:9px 6px; border-radius:16px; } .za-subnav-ico{ font-size:17px; } .za-subnav-label{ font-size:10px; } .za-subnav-btn.is-active .za-subnav-label{ font-size:11px; } }


/* ============================================================
   O DESIGN SYSTEM UNIVERSAL DE CARDS E BADGES
   (Onde a mágica da unificação acontece)
   ============================================================ */

/* O Card Base (Apostas, Loterias, Histórico, Home) */
.za-tip-card{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:24px;
  border:1px solid rgba(148,163,184,.12);
  background: radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 26%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:0 14px 30px rgba(0,0,0,.20); overflow:hidden;
}
.za-tip-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 34%); opacity:.72; }
.za-tip-card > *{ position:relative; z-index:1; }

/* Variações Visuais dos Cards */
.za-tip-card.is-combo{ border-color:rgba(56,189,248,.16); }
.za-tip-card.is-strong{ border-color:rgba(251,146,60,.22); box-shadow:0 16px 34px rgba(0,0,0,.22), 0 0 0 1px rgba(251,146,60,.06) inset; }
.za-tip-card.is-good{ border-color:rgba(96,165,250,.22); box-shadow:0 15px 32px rgba(0,0,0,.21), 0 0 0 1px rgba(96,165,250,.05) inset; }
.za-tip-card.is-watch{ border-color:rgba(148,163,184,.16); }
.za-tip-card.is-unstable{ border-color:rgba(250,204,21,.16); background: radial-gradient(circle at top right, rgba(250,204,21,.05), transparent 26%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028)); }
.za-tip-card.is-zebra{ border-color:rgba(248,113,113,.26); box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(248,113,113,.06); }
.za-tip-card.is-featured-lottery{ background: radial-gradient(circle at top right, rgba(255,111,97,.12), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); }
.za-tip-card.is-zebra .za-tip-card__reason{ color:rgba(255,255,255,.88); }

/* O Botão de Favoritar Universal */
.za-tip-fav{
  position:absolute; top:14px; right:14px; z-index:10; width:30px; height:30px; display:grid; place-items:center;
  border:none; border-radius:999px; background:rgba(255,255,255,.04); color:rgba(248,250,252,.74); font-size:14px;
  cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.14); transition:transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease; pointer-events:auto; touch-action:manipulation;
}
.za-tip-fav:active{ transform:scale(.94); }
.za-tip-fav.is-saved{ background:rgba(251,191,36,.12); color:#fbbf24; }
.za-tip-fav.is-disabled, .za-tip-fav.is-locked, .za-tip-fav:disabled.is-locked{ opacity:.46; cursor:not-allowed; transform:none; box-shadow:none; filter:grayscale(.25); }
.za-tip-fav.is-loading{ opacity:.72; }

/* Cabeçalho do Card (Times e Meta) */
.za-tip-card__header{ padding-right:40px; display:flex; flex-direction:column; gap:12px; }
.za-tip-card__teams{ display:flex; align-items:center; justify-content:center; }
.za-tip-card__teams .za-team-badges{ margin:0; gap:18px; align-items:center; }
.za-tip-card__teams .za-team-badges__vs{ font-size:16px; font-weight:900; color:var(--za-muted); text-transform:uppercase; }
.za-tip-card__teams .za-team-badge--lg{ width:72px; height:72px; min-width:72px; }
.za-tip-card__teams .za-team-badge--lg .za-team-badge__text{ font-size:15px; }

.za-tip-card__team-names{ display:flex; justify-content:center; align-items:flex-start; gap:48px; margin-top:-6px; }
.za-team-name{ font-size:10px; line-height:1.1; font-weight:700; color:var(--za-text-soft); text-align:center; width:100%; max-width:84px; }
.za-tip-card__team-names .za-team-name{ width:72px; text-align:center; }

.za-tip-card__narrative{ display:flex; align-items:center; justify-content:center; }
.za-tip-card__narrative-line{ font-size:11px; font-weight:700; color:var(--za-text-soft); text-align:center; white-space:nowrap; opacity:.82; }

/* Corpo e Análise */
.za-tip-card__body{ display:flex; flex-direction:column; gap:14px; }
.za-tip-card__reason{ margin:0; font-size:15px; line-height:1.45; font-weight:400; color:var(--za-text); }
.za-tip-card__analysis-head{ display:flex; align-items:center; justify-content:flex-start; margin:0 0 7px; }
.za-tip-kicker{ margin:0; font-size:11px; font-weight:760; letter-spacing:.08em; text-transform:uppercase; color:#38bdf8; opacity:1; }

/* Badges Neon e Rótulos (A mágica do Arcade) */
.za-tip-card__label-row{ display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:7px; margin:0 0 10px; }
.za-tip-badge-combo{ display:inline-flex; align-items:center; min-height:22px; padding:4px 9px; border-radius:999px; border:1px solid rgba(56,189,248,.18); background:rgba(56,189,248,.10); color:#bae6fd; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:none; }
.za-reading-badge{ display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; font-size:10px; line-height:1; font-weight:900; letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent; }
.za-reading-badge.is-strong{ background:rgba(249,115,22,.14); color:#fdba74; border-color:rgba(251,146,60,.28); }
.za-reading-badge.is-good{ background:rgba(56,189,248,.14); color:#7dd3fc; border-color:rgba(125,211,252,.24); }
.za-reading-badge.is-watch{ background:rgba(148,163,184,.14); color:#cbd5e1; border-color:rgba(203,213,225,.18); }
.za-reading-badge.is-unstable{ background:rgba(250,204,21,.12); color:#fde68a; border-color:rgba(253,224,71,.18); }
.za-reading-badge.is-tip{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:rgba(255,255,255,.92); box-shadow:none; }
.za-reading-badge.is-zebra{ border-color:rgba(255,90,95,.42); background:rgba(255,90,95,.13); color:#fecaca; box-shadow:none; }

.za-result-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:6px 10px; border-radius:999px; font-size:12px; line-height:1; font-weight:900; letter-spacing:.04em; }
.za-result-badge.is-win{ background:rgba(34,197,94,.16); color:#86efac; border:1px solid rgba(34,197,94,.22); }
.za-result-badge.is-loss{ background:rgba(239,68,68,.16); color:#fca5a5; border:1px solid rgba(239,68,68,.22); }
.za-result-badge.is-void{ background:rgba(148,163,184,.16); color:#cbd5e1; border:1px solid rgba(148,163,184,.22); }
.za-result-badge.is-pending{ background:rgba(250,204,21,.14); color:#fde68a; border:1px solid rgba(250,204,21,.16); }
.za-result-badge.is-open{ background:rgba(56,189,248,.14); color:#7dd3fc; border:1px solid rgba(56,189,248,.18); }
.za-result-badge.is-live{ background:rgba(239,68,68,.16); color:#fda4af; border:1px solid rgba(239,68,68,.22); }

/* Confiança e Risco */
.za-tip-card__confidence{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; }
.za-tip-card__confidence-line{ display:flex; align-items:center; gap:8px; min-width:0; }
.za-tip-card__confidence-label{ font-size:13px; font-weight:800; color:var(--za-text-soft); white-space:nowrap; }
.za-confidence-inline{ font-size:16px; line-height:1; color:#38bdf8; letter-spacing:1px; white-space:nowrap; }
.za-difficulty-inline{ color:#ff6f61; letter-spacing:1px; font-weight:900; font-size:16px; margin-left:auto; }
.za-tip-card__zebra-alert{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:0; border:0; background:transparent; color:#fca5a5; font-size:12px; line-height:1.3; font-weight:800; letter-spacing:.01em; }

/* Botões de Ajuda ? Universais */
.za-help-btn.za-risk-help, .za-tip-card__info{ display:inline-grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:999px; border:none; background:rgba(255,255,255,.06); color:var(--za-muted); font-size:12px; font-weight:900; line-height:1; cursor:pointer; }
.za-help-btn.za-risk-help{ flex:0 0 26px; width:26px; height:26px; margin-left:2px; border:1px solid rgba(56,189,248,.28); background:rgba(56,189,248,.10); color:#d8f4ff; box-shadow:0 10px 22px rgba(56,189,248,.10); }
.za-help-btn.za-risk-help:active, .za-tip-card__info:active{ transform:scale(.96); }

/* Tabelas Universais (Apostas e Loteca) */
.za-tip-table-wrap, .za-loteca-table-wrap{ border-radius:16px; border:1px solid rgba(148,163,184,.10); background:rgba(0,0,0,.14); overflow:hidden; margin-top:14px; }
.za-tip-table, .za-loteca-table{ width:100%; border-collapse:collapse; font-size:13px; }
.za-tip-table thead th, .za-loteca-table th{ padding:11px 12px; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--za-muted); text-align:left; background:rgba(255,255,255,.03); }
.za-tip-table tbody td, .za-loteca-table td{ padding:12px; font-size:14px; line-height:1.35; color:var(--za-text-soft); border-top:1px solid rgba(255,255,255,.06); text-align:left; }
.za-tip-table thead th:last-child, .za-tip-table tbody td:last-child, .za-tip-table tfoot td:last-child{ text-align:right; }
.za-tip-table tbody td:last-child{ font-weight:800; color:var(--za-text); }
.za-tip-table tfoot td{ padding:13px 12px; border-top:1px dashed rgba(255,255,255,.10); font-size:14px; font-weight:900; color:var(--za-text); background:rgba(255,255,255,.025); }

/* Lógica Específica da Tabela da Loteca (Colunas Menores e Marcação) */
.za-loteca-table{ table-layout:fixed; }
.za-loteca-table th, .za-loteca-table td{ border-bottom:1px solid rgba(148,163,184,.08); border-top:none; padding:10px 12px; }
.za-loteca-table td.is-marked{ color:#ff6f61; font-weight:900; }
.za-loteca-table th:nth-child(1), .za-loteca-table td:nth-child(1){ width:44px; text-align:center; }
.za-loteca-table th:nth-child(3), .za-loteca-table td:nth-child(3), .za-loteca-table th:nth-child(4), .za-loteca-table td:nth-child(4), .za-loteca-table th:nth-child(5), .za-loteca-table td:nth-child(5){ width:34px; text-align:center; }
.za-loteca-table td:nth-child(2), .za-loteca-table td:nth-child(6){ font-size:12px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }

/* Escudos dos Times (Unificados) */
.za-team-badge{ --tb1:#334155; --tb2:#0f172a; --tb3:#1e293b; position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; overflow:hidden; background:linear-gradient(135deg, var(--tb1), var(--tb2) 58%, var(--tb3)) !important; box-shadow:0 10px 20px rgba(0,0,0,.18); }
.za-team-badge::after{ content:''; position:absolute; inset:1px; border-radius:inherit; border:1px solid rgba(255,255,255,.14); }
.za-team-badge--lg{ width:58px; height:58px; min-width:58px; }
.za-team-badge__text{ position:relative; z-index:1; color:#fff; font-weight:1000; letter-spacing:-.04em; font-size:15px; text-shadow: -1px -1px 0 rgba(0,0,0,.92), 1px -1px 0 rgba(0,0,0,.92), -1px 1px 0 rgba(0,0,0,.92), 1px 1px 0 rgba(0,0,0,.92), 0 2px 8px rgba(0,0,0,.35); }
.za-team-badge--neutral{ background: linear-gradient(135deg, #1f2937, #111827 60%, #020617) !important; }
.za-team-badge--neutral .za-team-badge__text{ color:#e5e7eb; }

/* Estado Vazio */
.za-empty-card{ padding:18px; border-radius:20px; border:1px dashed rgba(148,163,184,.18); background:rgba(255,255,255,.03); color:var(--za-text-soft); font-size:14px; line-height:1.5; }

/* Chips de Status (Ex: Extrato/Missões) */
.za-chip-win{ background:rgba(34,197,94,.12); color:#b7f7c8; border-color:rgba(34,197,94,.22); }
.za-chip-loss{ background:rgba(239,68,68,.12); color:#ffc3c3; border-color:rgba(239,68,68,.22); }
.za-chip-pending{ background:rgba(56,189,248,.12); color:#c5eeff; border-color:rgba(56,189,248,.22); }
.za-chip-void{ background:rgba(148,163,184,.12); color:#e2e8f0; border-color:rgba(148,163,184,.22); }

/* Responsividade Global dos Cards */
@media (max-width: 420px){
  .za-tip-card{ padding:16px; border-radius:22px; }
  .za-tip-fav{ top:12px; right:12px; width:28px; height:28px; font-size:13px; }
  .za-tip-card__teams .za-team-badges{ gap:14px; }
  .za-tip-card__teams .za-team-badges__vs{ font-size:15px; }
  .za-tip-card__teams .za-team-badge--lg{ width:56px; height:56px; min-width:56px; }
  .za-tip-card__teams .za-team-badge--lg .za-team-badge__text{ font-size:14px; }
  .za-team-name{ max-width:80px; }
  .za-tip-card__team-names{ gap:36px; }
  .za-tip-card__team-names .za-team-name{ width:56px; }
  .za-tip-card__reason{ font-size:14px; }
  .za-tip-table thead th, .za-tip-table tbody td, .za-tip-table tfoot td{ padding-left:10px; padding-right:10px; }
  .za-confidence-inline{ font-size:14px; }
}

/* ============================================================
   HELP MODAL · GLOBAL
   Modal padrão de ajuda do app.
   Usa a paleta do app.css e substitui o bloco antigo de modal.
   ============================================================ */

.za-help-modal[hidden],
.za-tip-modal[hidden]{
  display:none!important;
}

.za-help-modal,
.za-tip-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
}

.za-help-backdrop,
.za-tip-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(10px);
}

/* Card do modal */
.za-help-card,
.za-tip-modal__dialog{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  max-height:min(82vh,680px);
  overflow:auto;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(56,189,248,.22);
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 30%),
    linear-gradient(180deg, rgba(18,31,50,.98), rgba(9,17,30,.98));
  box-shadow:0 26px 70px rgba(0,0,0,.46);
  color:var(--za-text);
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.35) transparent;
}

.za-help-card::-webkit-scrollbar,
.za-tip-modal__dialog::-webkit-scrollbar{
  width:5px;
}

.za-help-card::-webkit-scrollbar-track,
.za-tip-modal__dialog::-webkit-scrollbar-track{
  background:transparent;
}

.za-help-card::-webkit-scrollbar-thumb,
.za-tip-modal__dialog::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(56,189,248,.28);
}

/* Título */
.za-help-card h2,
.za-tip-modal__title{
  margin:0 42px 8px 0;
  color:var(--za-text);
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
}

/* Texto introdutório */
.za-help-card p,
.za-tip-modal__body p{
  margin:0 0 14px;
  color:var(--za-text-soft);
  font-size:13px;
  line-height:1.55;
}

/* Fechar */
.za-help-close,
.za-tip-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--za-text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.za-help-close:active,
.za-tip-modal__close:active{
  transform:scale(.96);
}

/* Seções */
.za-help-section,
.za-tip-modal__section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.za-help-section h3,
.za-tip-modal__section h4{
  margin:0 0 10px;
  color:var(--za-blue);
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Lista/tabela de explicações */
.za-help-list,
.za-tip-modal__table{
  display:grid;
  gap:8px;
}

.za-help-item,
.za-tip-modal__table > div{
  display:grid;
  grid-template-columns:minmax(78px,.38fr) 1fr;
  gap:10px;
  align-items:start;
  margin:0;
  padding:10px 11px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.10);
  background:rgba(255,255,255,.035);
}

.za-help-item strong,
.za-tip-modal__table strong{
  min-width:0;
  color:var(--za-text);
  font-size:12px;
  line-height:1.25;
  font-weight:900;
  text-align:left;
}

.za-help-item span,
.za-tip-modal__table span{
  min-width:0;
  color:var(--za-text-soft);
  font-size:12px;
  line-height:1.38;
  text-align:left;
}

/* Compatibilidade com renderizações antigas dentro do modal */
.za-tip-modal__body,
.za-help-card{
  color:var(--za-text);
}

.za-tip-modal__body strong{
  color:var(--za-text);
}

.za-tip-modal__body span,
.za-tip-modal__body li,
.za-help-card li{
  color:var(--za-text-soft);
}

body.za-modal-open,
body.za-help-open{
  overflow:hidden;
}

@media (max-width:420px){
  .za-help-modal,
  .za-tip-modal{
    padding:14px;
  }

  .za-help-card,
  .za-tip-modal__dialog{
    border-radius:22px;
    padding:16px;
  }

  .za-help-item,
  .za-tip-modal__table > div{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* ============================================================
   EXTRAS: COMPONENTES GLOBAIS
   ============================================================ */
.za-affiliate-wall{ margin-top:14px; }
.za-affiliate-grid{ display:grid; gap:10px; }
.za-affiliate-card{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:18px; text-decoration:none; color:inherit; background:rgba(15,23,42,.58); border:1px solid rgba(148,163,184,.14); }
.za-affiliate-icon{ font-size:22px; line-height:1; }
.za-affiliate-body{ display:grid; gap:3px; }
.za-affiliate-body strong{ font-size:13px; }
.za-affiliate-body small{ font-size:11px; color:var(--za-text-soft); line-height:1.35; }
.za-affiliate-tag{ font-size:10px; font-weight:900; text-transform:uppercase; color:#38bdf8; }
/* ============================================================
   SELETOR GLOBAL · PADRÃO MINIAPP (Arena/Bets/Loterias)
   ------------------------------------------------------------
   Componente visual reutilizável para filtros importantes.
   Estrutura esperada:
   .za-filter-select
     .za-filter-select-toggle
       .za-filter-select-kicker
       .za-filter-select-label
     .za-filter-select-menu
       .za-filter-select-option
   ============================================================ */
.za-filter-select{
  position:relative;
  z-index:30;
  width:100%;
  min-width:0;
}

.za-filter-select.is-open{
  z-index:120;
}

.za-filter-select-toggle{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.22);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.14), transparent 42%),
    linear-gradient(180deg, rgba(56,189,248,.12), rgba(255,255,255,.04));
  color:var(--za-text);
  text-align:center;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .10s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.za-filter-select-toggle:active{
  transform:translateY(1px) scale(.992);
}

.za-filter-select.is-open .za-filter-select-toggle,
.za-filter-select-toggle[aria-expanded="true"]{
  border-color:rgba(56,189,248,.34);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.18), transparent 42%),
    linear-gradient(180deg, rgba(56,189,248,.16), rgba(255,255,255,.05));
  box-shadow:0 14px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(56,189,248,.10) inset;
}

.za-filter-select-kicker{
  display:block;
  margin:0;
  color:#38bdf8;
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.za-filter-select-label{
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--za-text);
  font-size:13px;
  line-height:1.15;
  font-weight:820;
}

.za-filter-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:121;
  max-height:min(340px, 58vh);
  overflow:auto;
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(5,13,24,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.42);
  scrollbar-width:none;
}

.za-filter-select-menu[hidden]{
  display:none!important;
}

.za-filter-select-menu::-webkit-scrollbar{
  display:none;
}

.za-filter-select-option{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:16px;
  border:0;
  background:transparent;
  color:var(--za-text-soft);
  text-align:center;
  font-size:13px;
  line-height:1.2;
  font-weight:760;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.za-filter-select-option:active{
  transform:scale(.99);
}

.za-filter-select-option.is-active,
.za-filter-select-option[aria-current="true"]{
  color:#dbeafe;
  background:rgba(56,189,248,.12);
  box-shadow:0 0 0 1px rgba(56,189,248,.16) inset;
}

@media (max-width:420px){
  .za-filter-select-toggle{
    min-height:52px;
    padding:9px 14px;
  }
  .za-filter-select-menu{
    border-radius:20px;
  }
}

/* ============================================================
   FILTRO GLOBAL · FAIXA HORIZONTAL (PADRÃO ARENA)
   ------------------------------------------------------------
   Para filtros rápidos no miniapp: chips roláveis, sem dropdown,
   mantendo links ou botões conforme a página precisar.
   ============================================================ */
.za-filter-scroll{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px;
  margin:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.35) transparent;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.za-filter-scroll::-webkit-scrollbar{ height:4px; }
.za-filter-scroll::-webkit-scrollbar-track{ background:transparent; }
.za-filter-scroll::-webkit-scrollbar-thumb{ border-radius:999px; background:rgba(56,189,248,.30); }

.za-filter-chip{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  max-width:220px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.18);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.08), transparent 45%),
    rgba(255,255,255,.045);
  color:var(--za-text-soft);
  text-align:center;
  font-size:12px;
  line-height:1.1;
  font-weight:780;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  scroll-snap-align:start;
  transition:transform .10s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.za-filter-chip:active{ transform:translateY(1px) scale(.985); }

.za-filter-chip.is-active,
.za-filter-chip[aria-current="page"],
.za-filter-chip[aria-pressed="true"]{
  border-color:rgba(56,189,248,.44);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.18), transparent 45%),
    linear-gradient(180deg, rgba(56,189,248,.17), rgba(255,255,255,.055));
  color:#d8f4ff;
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(56,189,248,.12) inset,
    0 0 18px rgba(56,189,248,.10);
}

@media (max-width:420px){
  .za-filter-chip{
    min-height:40px;
    max-width:190px;
    padding:0 12px;
    font-size:11.5px;
  }
}


/* =========================================================
   HERO TOPBAR — CONCIERGE MODE (REFINO FINAL)
   - 2 linhas
   - mais respiro
   - avatar proporcional
   - leitura premium
   ========================================================= */

.za-hero-topbar{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 14px;
  margin-bottom:14px;

  border-radius:20px;

  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 42%),
    rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.08);

  min-height:72px;

  backdrop-filter: blur(6px);
}

/* botão voltar */
.za-topbar-action{
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  border-radius:12px;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);

  color:var(--za-text);
  font-size:16px;

  transition:all .18s ease;
}

.za-topbar-action:active{
  transform:scale(.95);
}

/* bloco usuário */
.za-topbar-user{
  display:flex;
  align-items:center;
  gap:12px;

  flex:1;
  min-width:0;
}

/* avatar */
.za-topbar-avatar,
.za-topbar-avatar-fallback{
  width:40px;
  height:40px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  font-size:15px;
  font-weight:700;
  color:#fff;
}

.za-topbar-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* TEXTO CONCIERGE */
.za-topbar-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;

  /* 🔥 ESSENCIAL: permite 2 linhas */
  -webkit-line-clamp:2;

  overflow:hidden;

  font-size:14px;
  line-height:1.35;

  color:var(--za-text-soft);

  font-weight:500;

  letter-spacing:.01em;

  /* melhora leitura em dark */
  text-wrap:balance;
}

/* destaque sutil no nome */
.za-topbar-text strong{
  color:#fff;
  font-weight:600;
}

/* hover leve (desktop) */
.za-hero-topbar:hover{
  border-color:rgba(56,189,248,.18);
}

/* =========================================================
   RESPONSIVO FINO
   ========================================================= */

@media (max-width: 420px){

  .za-hero-topbar{
    padding:12px;
    gap:10px;
  }

  .za-topbar-avatar,
  .za-topbar-avatar-fallback{
    width:36px;
    height:36px;
  }

  .za-topbar-text{
    font-size:13.5px;
    line-height:1.3;
  }
}

/* =========================================================
   REMENDO
   ========================================================= */

.za-user-section-copy,
.za-user-profile-text,
.za-list-card-desc,
.za-user-foot-note{
  margin:0;
  color:var(--za-text-soft);
  font-size:13px;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.za-mini-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 0;
  padding:2px 2px 0;
}

.za-mini-head__icon{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:18px;
  line-height:1;
}

.za-mini-head__label{
  font-size:17px;
  line-height:1.15;
  font-weight:780;
  letter-spacing:-.01em;
  color:var(--za-text);
}

/* ================================
   TOPBAR CTA (Concierge)
================================ */

.za-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.za-topbar-text {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.3;
}

.za-topbar-cta {
  flex: 0 0 auto;
  max-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;

  background: rgba(56, 189, 248, 0.12); /* seu azul neon */
  color: #38bdf8;
  text-decoration: none;

  transition: all 0.15s ease;
}

.za-topbar-cta:active {
  transform: scale(0.96);
}


.za-topbar-text {
  position: relative;
  padding-left: 12px;
}

.za-topbar-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: #38bdf8;
  opacity: 0.9;
}

#za-result-card #za-reading-text {
  white-space: pre-line !important;
}