/* bet77 Sportsbook MZ — estilos partilhados. Mobile-first, leve. */
:root{
  /* Paleta EXATA da lotaria bet77 */
  --bg:#0c0a07; --panel:#16120d; --panel2:#1f1810; --line:#332a20;
  --txt:#f5efe7; --muted:#a99e90; --accent:#F58220; --accent2:#FF9A2E; --accent-d:#c96a12;
  --odd:#1f1810; --odd-on:#F58220; --warn:#ffb866; --danger:#ff2d2d; --green:#34c759; --gold:#FFD24A;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%;max-width:100%}
body{
  background:#080705; color:var(--txt);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
.hide{display:none!important}

/* topo */
header.top{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#1a140d,#0c0a07);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;padding:10px 14px;font-weight:800;letter-spacing:.3px;max-width:100%;min-width:0}
.brand b{color:var(--accent)}
.brand .logo{height:44px;width:auto;display:block}
.brand .tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
/* [SSO] chips para o outro app (Bingo/Bónus) — só aparecem com a integração ligada */
.xchips{margin-left:auto;display:flex;gap:6px;align-items:center;min-width:0;flex-shrink:1}
.xchips:empty{display:none}
.xchip{background:#241a10;border:1px solid var(--accent);color:var(--accent);font-weight:700;font-size:12px;border-radius:999px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.xchip:active{transform:scale(.96)}
/* [SSO] botão segmentado Bingo | Desporto — igual ao da lotaria */
.xseg{display:flex;background:#12100a;border:1.5px solid var(--accent);border-radius:999px;padding:3px;max-width:100%}
.xseg-btn{background:transparent;border:0;color:var(--accent);font-weight:800;font-size:14px;padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;font-family:inherit;line-height:1}
.xseg-btn.on{background:var(--accent);color:#1a1000;cursor:default}
.xseg-btn:not(.on):active{transform:scale(.97)}
/* interruptor Pré | Ao vivo na linha do "Todos os jogos" (gaveta) */
.tt-tgl{margin-left:auto;display:flex;background:#12100a;border:1px solid var(--line);border-radius:999px;padding:2px;flex:none}
.tt-b{background:transparent;border:0;color:var(--muted);border-radius:999px;padding:3px 9px;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1.3}
.tt-b i{font-style:normal;opacity:.7}
.tt-b.on{background:var(--accent);color:#1a1000}
.tt-b.on i{opacity:.85}
/* Scanner (câmara + leitor físico do Sunmi) */
.scan-sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.scan-box{background:var(--card,#161009);border:1px solid var(--line);border-radius:14px;padding:14px;width:100%;max-width:360px}
.scan-box video{width:100%;height:210px;object-fit:cover;background:#000;border-radius:10px;display:block}
/* Agente > Os meus bilhetes: cabeçalho do dia */
.ag-day{font-size:12px;font-weight:800;color:var(--accent);margin:10px 0 5px}
/* placar do jogo na perna do bilhete */
.pscore{font-size:10px;font-weight:800;border:1px solid currentColor;border-radius:4px;padding:0 4px;margin-left:3px}
/* rodapé legal do talão (centrado) */
.tkleg{text-align:center;font-size:9px;line-height:1.35;margin-top:6px;color:#555}
/* carimbo 2ª via no talão */
.tkvia{text-align:center;font-weight:800;border:1.5px dashed currentColor;border-radius:6px;padding:2px;margin:4px 0;font-size:12px;letter-spacing:1px}
/* [XBONUS] progresso do bónus dentro do talão */
.xb-slip{margin:8px 0;padding:9px 10px;border-radius:10px;background:#12100a;border:1px solid #2a2016}
.xb-slip .xbs-t{font-size:12px;color:#f4d9b0}
.xb-slip .xbs-t b{color:var(--accent)}
.xb-slip .xbs-bar{height:6px;border-radius:999px;background:#241a10;margin-top:6px;overflow:hidden}
.xb-slip .xbs-bar>i{display:block;height:100%;background:linear-gradient(90deg,#ff7a1a,var(--accent))}
/* [XBONUS] faixa de promoções na página Jogar */
.xbpromo{display:flex;align-items:center;gap:8px;margin:6px 12px 0;padding:7px 10px;border-radius:10px;background:linear-gradient(90deg,#2a1a0a,#1a1206);border:1px solid #4a3418;overflow-x:auto;white-space:nowrap}
.xbpromo .xbp-tag{flex:none;background:var(--accent);color:#1a1000;font-weight:800;font-size:10px;letter-spacing:.5px;border-radius:999px;padding:2px 8px}
.xbpromo .xbp-txt{font-size:12px;color:#f4d9b0}
.xbpromo .xbp-txt b{color:var(--accent)}
/* Bolão (jackpot acumulado) — visual da jackbar do loto */
.bolao-bar{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:8px 12px;background:linear-gradient(90deg,#3a2a12,#16120d);border:1px solid var(--accent);border-radius:12px;cursor:pointer}
.bolao-bar .trophy{font-size:22px;filter:drop-shadow(0 0 6px rgba(255,210,74,.5))}
.bolao-bar .lab{font-size:10px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.6px}
.bolao-bar .pot{font-size:21px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.05}
.bolao-bar .meta{margin-left:auto;text-align:right;font-size:11px;color:var(--muted);line-height:1.35}
.bolao-bar .meta b{color:var(--txt)}
/* faixa de bónus: barra de progresso da turbinada + chip de cota */
.bonus-bar{padding:2px 0 8px}
.bonus-bar .bchip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:800;border-radius:999px;padding:6px 12px;margin:8px 12px 0;background:rgba(255,210,74,.16);border:1px solid var(--gold);color:var(--gold);cursor:pointer}
.bonus-bar .bchip.multi{background:rgba(245,130,32,.16);border-color:var(--accent);color:var(--accent2)}
.bonus-bar .bchip:disabled{opacity:1}
.boostfaixa{margin:2px 12px 0;background:#16120d;border:1px solid var(--accent);border-radius:12px;padding:8px 10px}
.bf-h{font-size:11px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.bf-track{position:relative;margin:0 2px}
.bf-line{position:absolute;top:11px;left:24px;right:24px;height:3px;background:#2a2118;border-radius:2px}
.bf-nodes{position:relative;display:flex;justify-content:space-between}
.bf-nd{display:flex;flex-direction:column;align-items:center;flex:1}
.bf-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;z-index:1}
.bf-dot.don{background:var(--gold);color:#3a2a00}
.bf-dot.dnext{background:#0c0a07;border:2px solid var(--accent);color:var(--accent)}
.bf-dot.doff{background:#1f1810;border:1px solid var(--line);color:var(--muted)}
.bf-l{font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap}
.bf-l b{color:var(--txt);font-weight:800}
.bf-cap{font-size:12px;color:var(--txt);margin-top:8px}
.bf-cap b{color:var(--gold);font-weight:800}
/* versão compacta (dentro da gaveta) */
.boostfaixa.small{margin:6px 12px 10px;padding:7px 9px}
.boostfaixa.small .bf-h{font-size:10px;margin-bottom:6px}
.boostfaixa.small .bf-line{top:9px}
.boostfaixa.small .bf-dot{width:20px;height:20px;font-size:11px}
.boostfaixa.small .bf-l{font-size:9px;margin-top:3px}
.boostfaixa.small .bf-cap{font-size:11px;margin-top:6px}
/* cartão de regras da turbinada (área do agente) */
.turbocard{background:#16120d;border:1px solid var(--accent);border-radius:12px;padding:12px;margin:12px 0}
.tc-h{font-size:13px;font-weight:800;color:var(--accent2);margin-bottom:4px}
.tr-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;border-top:1px solid var(--line);padding:7px 2px}
.tr-row b{color:var(--gold);font-weight:800}
.zap{font-size:10px;font-weight:900;color:#1a1205;background:var(--gold);border-radius:5px;padding:1px 5px;letter-spacing:.3px}
/* apostas sugeridas (carrossel) */
.sug-wrap{padding:6px 0 6px}
.sug-h2{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.4px;padding:0 12px;margin:4px 0 6px}
.sug-toggle{background:none;border:0;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;text-transform:none;letter-spacing:0}
/* [PROCURA no ecrã principal] Por baixo dos botões Desportos/Múltipla. Procura EQUIPAS, que é o
   que o agente escreve — a da gaveta só procurava competições e por isso parecia avariada. */
.busca{position:relative;padding:8px 12px 0}
.busca .lupa{position:absolute;left:24px;top:calc(50% + 4px);transform:translateY(-50%);width:20px;height:20px;
  pointer-events:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.busca input{width:100%;background:#0f0c07;border:1.5px solid var(--accent);border-radius:12px;
  padding:11px 40px 11px 44px;color:var(--txt);font-size:16px;font-weight:600;outline:none;font-family:inherit}
.busca input::placeholder{color:#c9a97e;font-weight:600}
.busca input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(245,130,32,.18)}
.busca .bx{position:absolute;right:20px;top:calc(50% + 4px);transform:translateY(-50%);background:none;border:0;
  color:var(--muted);font-size:18px;line-height:1;padding:4px 6px;cursor:pointer}
.busca-n{font-size:12px;font-weight:800;color:var(--accent);padding:8px 0 2px}
.busca-liga{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;margin-top:6px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:13px;cursor:pointer}
.busca-liga .ct{color:var(--muted);font-size:12px}

/* [PROCURA] Destacada de propósito: é assim que se chega a uma liga entre centenas. Fica colada
   ao cabeçalho da gaveta (sticky) para não desaparecer ao rolar a lista. */
.drawer-search{position:sticky;top:45px;z-index:2;padding:12px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1c1509,#16120d)}
/* Lupa desenhada em SVG e nao emoji: o emoji ignora `color` e vinha sempre cinzento e pequeno. */
.drawer-search .lupa{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  pointer-events:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.drawer-search input{width:100%;background:#0f0c07;border:1.5px solid var(--accent);border-radius:12px;
  padding:13px 14px 13px 48px;color:var(--txt);font-size:16px;font-weight:600;outline:none}
.drawer-search input::placeholder{color:#c9a97e;font-weight:600}
.drawer-search input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(245,130,32,.18)}
.sug-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 12px 4px;scrollbar-width:none}
.sug-row::-webkit-scrollbar{display:none}
.sugcard{flex:0 0 84%;max-width:320px;scroll-snap-align:start;background:#16120d;border:1px solid var(--line);border-radius:14px;padding:12px}
.sug-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sug-nome{font-weight:800;font-size:14px}
.sug-cota{font-weight:800;color:var(--green);font-size:17px;font-variant-numeric:tabular-nums}
.sug-legs{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.sug-leg{font-size:12px;color:var(--txt)}
.sug-foot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.sug-win{color:var(--green);font-size:18px;font-weight:800}
.sug-btns{display:flex;gap:8px}
.sug-btns .btn{padding:11px;font-size:14px;border-radius:10px;margin:0}
.sug-btns .btn.sec{flex:0 0 42%}
.odds .o .v s{font-size:11px;color:var(--muted);font-weight:600;margin-right:3px}
@keyframes oddblink{0%{box-shadow:0 0 0 2px var(--gold);background:rgba(255,210,74,.18)}100%{box-shadow:0 0 0 0 rgba(255,210,74,0)}}
.odds .o.blink{animation:oddblink .8s ease-out}
/* talão: cotas que mudaram piscam ~3s antes de emitir o bilhete */
@keyframes oddpulse{0%,100%{background:transparent;color:var(--accent)}50%{background:var(--gold);color:#1a1205}}
.sel .c.oddblink{animation:oddpulse .55s ease-in-out 0s 5;border-radius:6px;padding:0 5px}
.sel-removed{color:var(--danger);font-size:12px;background:rgba(255,90,90,.08);border:1px solid var(--danger);border-radius:8px;padding:6px 9px;margin-bottom:8px}
.sel-removed s{color:var(--danger)}
/* procura por número: prémio do Bolão + lista de bilhetes */
.bolao-win{background:rgba(255,210,74,.1);border:1px solid var(--gold);border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:13px}
.bolao-win .bpay{display:inline-block;width:auto;padding:4px 12px;margin-left:6px;font-size:12px}
.ph-bil{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:5px;font-size:13px;cursor:pointer}
.ph-bil .st{color:var(--muted);font-size:12px;white-space:nowrap}
.ph-bil:active{background:var(--panel2)}
.boost-shortcut{background:linear-gradient(90deg,rgba(255,210,74,.18),transparent)}
.boost-shortcut .nm{color:var(--gold);font-weight:800}
.boost-shortcut .vj{font-size:11px;font-weight:600;color:var(--muted);margin-left:6px}
.nav-row.feat-row .nm{color:var(--gold);font-weight:800}
.nav-row.feat-row.sel{background:rgba(255,210,74,.12)}
.bonus-note{font-size:12px;color:var(--gold);background:rgba(255,210,74,.1);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:4px 0}
.bonus-note a{color:var(--accent2);text-decoration:underline;cursor:pointer}
.bolao-note{font-size:13px;color:var(--gold);background:linear-gradient(90deg,#4a3408,#1a140d);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:10px}
/* caixa de turbinada de múltiplas (no talão) */
.boostbox{background:linear-gradient(90deg,#3a2a12,#16120d);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;margin:8px 0}
.boostbox .bx-h{font-size:12px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.boostbox .bx-rules{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.boostbox .bx-rules::-webkit-scrollbar{display:none}
.boostbox .bx-rules span{flex:0 0 auto;white-space:nowrap;font-size:10.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:3px 7px}
.boostbox .bx-rules span.hit{color:#1a1205;background:var(--gold);border-color:var(--gold)}
.boostbox .bx-line{display:flex;align-items:baseline;gap:8px;margin-top:7px;flex-wrap:wrap}
.boostbox .bx-on{font-size:13px;font-weight:800;color:var(--green);white-space:nowrap}
.boostbox .bx-next{font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap}
.boostbox .bx-hint{margin-top:5px;font-size:11px;color:var(--muted)}
.tkboost{background:#f5d76e;color:#1a1205;font-weight:800;text-align:center;border-radius:8px;padding:5px;margin:6px 0;font-size:12px;letter-spacing:.3px}
.tabs{display:flex;gap:6px;padding:8px 12px 4px}
.tabs button{flex:1;padding:9px;border:0;border-radius:999px;background:var(--panel);color:var(--muted);font-weight:700}
.tabs button.on{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0c0a07}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--txt);
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.chips button.on{background:var(--accent);border-color:var(--accent);color:#0c0a07;font-weight:800}
.chips button.feat{background:var(--gold);border-color:var(--gold);color:#1a1205;font-weight:800}
.chips button.feat.on{box-shadow:0 0 0 3px var(--accent);filter:brightness(1.06)}
/* faixa "Ligas em destaque" */
.featbar{padding:8px 12px 2px;max-width:680px;margin:0 auto}
.featlbl{font-size:11px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.featchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.featchips::-webkit-scrollbar{display:none}
.featchip{white-space:nowrap;border:1px solid var(--accent);background:var(--panel2);color:var(--accent);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}

/* lista de jogos */
main{padding:8px 12px 110px;max-width:680px;margin:0 auto}
.ev{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:8px}
.ev .lg{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px}
.ev .live{color:var(--danger);font-weight:800}
.ev .teams{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.ev .teams .n{font-weight:700}
.ev .sc{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:800}
.odds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.odds.duas{grid-template-columns:1fr 1fr}
/* [DERIVADO] selo do mercado calculado por nós */
.deriv{font-size:10px;font-weight:800;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.odds .o{background:var(--odd);border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer}
.odds .o .k{display:block;font-size:11px;color:var(--muted)}
.odds .o .v{display:block;font-weight:800;font-variant-numeric:tabular-nums}
/* [TURBO] a perna turbinada: dourada, para o agente ver logo QUAL das tres subiu (a seleccao verde manda por cima) */
.odds .o.turbo{border-color:var(--gold);background:rgba(255,193,7,.10)}
.odds .o.turbo .k{color:var(--gold)}
.odds .o.turbo .v{color:var(--gold)}
.odds .o.on{background:var(--odd-on);border-color:var(--odd-on);color:#062012}
.odds .o.on .k{color:#063}
.odds .o.dis{opacity:.35;pointer-events:none}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.more{margin-top:6px;width:100%;background:var(--odd);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:6px;font-weight:700;font-size:12px}
/* [3 MERCADOS] fila de chips por cima das cotas: troca 1X2 / Ambas / Emp.anula sem sair do cartao.
   Altura minima (18px) para nao roubar espaco visual — o cartao mantem o formato de sempre. */
.mchips{display:flex;gap:5px;margin:0 0 5px}
.mchip{font-size:10px;font-weight:700;line-height:1;padding:4px 8px;border-radius:9px;background:var(--odd);border:1px solid var(--line);color:var(--muted);white-space:nowrap;cursor:pointer}
.mchip.on{color:var(--accent);border-color:var(--accent);background:rgba(255,138,0,.12)}
/* ocupa a mesma altura das cotas para o cartao nao saltar enquanto carrega */
.mnota{display:flex;align-items:center;justify-content:center;min-height:38px;font-size:11px;color:var(--muted);background:var(--odd);border:1px solid var(--line);border-radius:8px}
.mkt{margin-bottom:12px}
.mkt-h{font-size:14px;color:var(--accent);margin:0 0 8px;font-weight:800;letter-spacing:.2px;
  padding-bottom:5px;border-bottom:1px solid rgba(245,130,32,.28)}
.mkt-n{font-size:11px;font-weight:700;color:var(--accent);background:rgba(255,138,0,.12);border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.more-n{display:inline-block;min-width:16px;font-size:11px;font-weight:800;color:#fff;background:var(--accent);border-radius:9px;padding:0 6px;margin-right:2px}
.more-n:empty{display:none}
.sp-ic{font-size:13px;margin-right:1px;vertical-align:middle}
.mkt-sels{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.mkt-o{background:var(--odd);border:1px solid var(--line);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;color:var(--txt);cursor:pointer}
.mkt-o.on{background:var(--odd-on);border-color:var(--odd-on);color:#1a1205}
.mkt-o .k{font-size:11px;color:var(--muted);text-align:center}
.mkt-o.on .k{color:#3a2a00}
.mkt-o .v{font-weight:800;font-variant-numeric:tabular-nums}
.mkt-o.turbo{border-color:var(--gold);background:rgba(255,193,7,.10)}
.mkt-o.turbo .k,.mkt-o.turbo .v{color:var(--gold)}
/* gaveta lateral (desporto -> pais -> liga) */
.menu-btn{background:var(--panel);border:1px solid var(--line);color:var(--accent);font-weight:800;font-size:13px;border-radius:999px;padding:7px 14px;display:inline-flex;align-items:center;gap:6px}
.drawer{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:none}
.drawer.show{display:block}
.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:86%;max-width:340px;background:var(--panel);overflow:auto}
.drawer-h{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800;position:sticky;top:0;background:var(--panel)}
.drawer-h .x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:22px}
.nav-row{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.nav-row .nm{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* [FILTRO] chip da seleção atual, com X para limpar */
.filtro-chip{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;background:rgba(245,130,32,.14);border:1px solid var(--accent);border-radius:10px}
.filtro-chip .fc-nm{flex:1;font-weight:700;color:var(--accent);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filtro-chip .fc-x{background:var(--accent);color:#1a1000;border:0;width:24px;height:24px;border-radius:999px;font-weight:900;font-size:13px;cursor:pointer;line-height:1;flex:none}
.nav-row .ct{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.nav-row .lv{background:var(--danger);color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.nav-row .ar{color:var(--muted);font-size:14px;transition:transform .15s}
.nav-row.open>.ar{color:var(--accent);transform:rotate(90deg)}
.nav-row.sub{padding-left:28px;background:var(--bg)}
.nav-row.sub2{padding-left:44px;background:var(--bg);font-size:13px}
.nav-row.on{color:var(--accent)}

/* betslip */
.slipbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--accent);color:#062012;
  display:flex;align-items:center;gap:12px;padding:12px 16px;font-weight:800;cursor:pointer;
  box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.slipbar .badge{background:#062012;color:var(--accent);border-radius:999px;min-width:24px;height:24px;
  display:grid;place-items:center;font-size:13px}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;align-items:flex-end}
/* [TECLADO] Com o teclado aberto o cartao encolhe; esta folga deixa o botao de comprar subir
   acima dele em vez de ficar tapado. */
.sheet .card:focus-within{padding-bottom:96px}
.sheet .card{background:var(--panel);width:100%;max-width:680px;margin:0 auto;border-radius:16px 16px 0 0;
  max-height:88vh;overflow:auto;padding:14px}
.sheet h3{margin:2px 0 10px;display:flex;align-items:center}
.sheet h3 .x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:22px}
.sel{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:6px}
/* [PERNA FECHADA] a cota deixou de existir: fica a vermelho e tem de sair do talao */
.sel.morta{border-color:var(--danger);background:rgba(255,45,45,.08)}
/* [SUSPENSA] a cota caiu por instantes mas o jogo esta de pe — nao e a mesma coisa que fechar */
.sel.parada{border-color:var(--warn);background:rgba(255,184,102,.08)}

/* [PERNA FECHADA] painel que informa o agente do que ja nao pode ser vendido */
/* usa a mesma folha modal do talao (.sheet), mas centrada: e um aviso, nao uma gaveta */
#fxWrap{align-items:center;justify-content:center;padding:16px;z-index:70}
.fxbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;width:100%;max-width:420px;max-height:86vh;overflow:auto}
.fx-h{font-size:17px;font-weight:800;color:var(--danger);margin-bottom:10px}
.fx-t{font-size:13px;font-weight:800;color:var(--txt);margin:12px 0 6px}
.fx-l{border-left:3px solid var(--line);padding:5px 0 5px 9px;margin-bottom:6px}
.fx-l.morto{border-left-color:var(--danger)}
.fx-l.parado{border-left-color:var(--warn)}
.fx-l b{display:block;font-size:13px;color:var(--txt)}
.fx-l span{display:block;font-size:12px;color:var(--muted)}
.fx-l i{display:block;font-style:normal;font-size:12px;font-weight:700;margin-top:2px}
.fx-l.morto i{color:var(--danger)}
.fx-l.parado i{color:var(--warn)}
.fx-n{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.fx-btns{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.sel .info{flex:1;min-width:0}
.sel .info .t{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel .info .s{font-size:12px;color:var(--muted)}
.sel .c{font-weight:800;color:var(--accent)}
.sel .rm{background:none;border:0;color:var(--danger);font-size:18px}
.stakes{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.stakes button{flex:1;min-width:60px;padding:10px;border:1px solid var(--line);background:var(--odd);color:var(--txt);border-radius:10px;font-weight:700}
.stakes button.on{border-color:var(--accent);color:var(--accent)}
.field{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:10px;margin:6px 0;font-size:16px}
.totline{display:flex;justify-content:space-between;margin:8px 0;font-weight:700}
.totline .big{color:var(--accent);font-size:18px}
.btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0c0a07;font-weight:800;font-size:16px}
.btn.sec{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn:disabled{opacity:.5}
/* [BLOCOS] marcador do fim da lista: ou avisa que vem mais, ou diz que acabou */
.fim-lista{text-align:center;padding:16px 12px 24px;color:var(--muted,#8a7f70);font-size:13px}
/* [MODO LEVE] botão de carregar mais: o agente decide quando gasta dados */
.maisbtn{margin:14px auto 26px;display:block;max-width:320px}
.maisbtn .maisn{font-weight:400;opacity:.7;font-size:13px}
/* o interruptor vai a seguir aos chips de dia, sem empurrar nada: um `margin-left:auto` mandava-o
   para o fim da linha e obrigava o selector de liga a passar para baixo */
.dchip.leve{opacity:.85}
/* [1X2 VAZIO] aviso no lugar da fila de "—": clicável, leva ao painel de mercados */
.semprinc{cursor:pointer;border:1px dashed var(--line,#332a20);border-radius:10px;padding:11px 12px;text-align:center;font-size:13px;color:var(--muted,#8a7f70)}
.semprinc b{color:var(--accent,#F58220)}

/* bilhete */
.bilhete{background:#fff;color:#111;border-radius:12px;padding:16px;max-width:340px;margin:0 auto;
  font-family:"Courier New",monospace}
.bilhete h2{margin:0 0 2px;text-align:center;font-size:18px}
.bilhete .sub{text-align:center;font-size:12px;color:#555;margin-bottom:8px}
.bilhete .row{display:flex;justify-content:space-between;font-size:13px;margin:2px 0}
.bilhete .dash{border-top:1px dashed #999;margin:8px 0}
.bilhete .codigo{text-align:center;font-size:22px;font-weight:800;letter-spacing:3px}
.bilhete .pin{text-align:center;font-size:14px}
.bilhete .estado{text-align:center;font-weight:800;color:#b35b00;border:2px dashed #b35b00;border-radius:8px;padding:4px;margin-top:8px}
.bilhete .sel2{font-size:12px;margin:3px 0}
/* [TALÃO] estrutura igual ao Bingo */
.bilhete .tkban{border-radius:10px;padding:12px;margin:2px 0 10px;text-align:center;font-weight:800;font-size:17px;color:#fff;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.bilhete .tkban-s{font-size:11px;font-weight:600;opacity:.95}
.bilhete .tkban.win{background:#1e7e34}
.bilhete .tkban.apagar{background:#c9700d}
.bilhete .tkban.pago{background:#2f5bd0}
.bilhete .tkban.perdido{background:#6c757d}
.bilhete .tkban.anulado{background:#b1291f}
.bilhete .tkjogo{margin:8px 0}
/* [SEPARADOR] Um tracejado entre apostas. Num bilhete de 7 jogos as pernas corriam todas juntas e
   era preciso contar as linhas para saber onde acabava uma e comecava a outra — o talao da
   concorrencia separa-as e le-se de relance. Selector de irmao adjacente: so entre jogos, nunca
   por cima do primeiro (esse ja tem o traco da seccao). */
.bilhete .tkjogo + .tkjogo{border-top:1px dashed #999;padding-top:8px}
.bilhete .tkjh{display:flex;justify-content:space-between;font-size:12px;color:#666;font-weight:700}
.bilhete .tktipo{font-style:normal;font-size:9px;font-weight:800;background:#eee;color:#555;border-radius:6px;padding:1px 5px;margin-left:4px}
.bilhete .tktipo.live{background:#fdecec;color:#b1291f}
.bilhete .tkev{font-size:13px;font-weight:700;margin:1px 0}
.bilhete .tksel{font-size:12px;color:#333}
.bilhete .tkhora{font-size:11px;color:#666;margin-top:1px}
.bilhete .noprt{font-style:normal}   /* emoji do talao: visivel no ecra, escondido na impressao */
.bilhete .tkpin{font-size:15px;font-weight:800;letter-spacing:2px;text-decoration:underline}
.bilhete .tkbadge{font-size:11px;font-weight:800;border-radius:10px;padding:2px 10px;letter-spacing:.4px}
.bilhete .tkbadge.win{background:#d4edda;color:#155724}
.bilhete .tkbadge.apagar{background:#ffe0bd;color:#8a4b00}
.bilhete .tkbadge.pago{background:#dce6ff;color:#2f5bd0}
.bilhete .tkbadge.perdido{background:#e2e3e5;color:#555}
.bilhete .tkbadge.anulado{background:#f5d2cf;color:#b1291f}
.bilhete .tkbadge.pin{background:#fff3bf;color:#7a5c00}
.bilhete .tkbadge.pendente{background:#fff3bf;color:#7a5c00}
.bilhete .tkagente{background:#141414;border-radius:12px;padding:12px;margin:12px 0;text-align:center}
.bilhete .tkagente-t{color:#e67e00;font-size:12px;font-weight:800;letter-spacing:2px}
.bilhete .tkagente-c{color:#fff;font-size:30px;font-weight:800;letter-spacing:4px;margin-top:2px}
.bilhete .tknote{border:1px solid #e0a15a;background:#fff6ea;color:#8a4b00;border-radius:8px;padding:8px;text-align:center;font-size:12px;margin:10px 0}
.bilhete .pstat{font-size:10px;font-weight:700;color:#7a3b00;background:#fff3e6;border:1px solid #b35b00;border-radius:6px;padding:1px 5px;margin-left:4px;white-space:nowrap}
.bilhete .tkchg{border:1.5px solid #b35b00;background:#fff3e6;color:#7a3b00;border-radius:8px;padding:6px 8px;margin:6px 0;font-size:12px;font-weight:700;text-align:center}
/* bola de atualizações antes de imprimir — só no ecrã, não vai para o papel */
#ticketNote{margin-bottom:10px}
#ticketNote.hide{display:none}
#ticketNote .tknote{background:rgba(245,130,32,.12);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;color:var(--txt);font-size:13px;line-height:1.55}
#ticketNote .tknote b{display:block;color:var(--accent2);margin-bottom:4px}
/* Resumo do agente — "A minha conta" */
.acct{margin-top:4px}
.acct-h{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:17px;margin:6px 0 12px;color:var(--txt)}
.acct-rl{background:var(--panel2);border:1px solid var(--line);color:var(--accent);border-radius:9px;padding:5px 11px;font-size:16px;line-height:1}
.acct-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.acct-card.hl{border-color:var(--accent)}
.acct-lbl{color:var(--muted);font-size:13px;margin-bottom:4px}
.acct-lbl.up{text-transform:uppercase;letter-spacing:.5px;color:var(--accent2);font-weight:700;font-size:12px}
.acct-big{font-size:33px;font-weight:800;line-height:1.08;color:var(--txt)}
.acct-big.gold{color:var(--gold)}
.acct-mid{font-size:22px;font-weight:800;color:var(--txt);line-height:1.1}
.acct-mid.accent{color:var(--accent)}
.acct-sub{color:var(--muted);font-size:12px;margin-top:5px}
.acct-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acct-card.row2{display:flex;align-items:center;justify-content:space-between}
.acct-card.row2 .r{text-align:right}
.acct-hist{color:var(--accent);font-weight:800;font-size:15px;margin:6px 0 8px}
.acct-hrow{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line)}
.acct-hrow:last-child{border-bottom:0}
.bilhete .qr{text-align:center;margin-top:8px}

/* backoffice */
.bo{max-width:1000px;margin:0 auto;padding:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:10px 0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.kpi .n{font-size:20px;font-weight:800;color:var(--accent)}
.kpi .l{font-size:12px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--accent2);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
/* [TABELA LARGA] O .bo está preso a 1000px, o que é bom para ler texto e mau para uma tabela de 10
   colunas: a Exposição saía cortada à direita e obrigava a arrastar. Esta variante sai do limite do
   .bo e usa a largura do ecrã (o truque do margin negativo em vw), com tecto para não ficar absurda
   num monitor grande. Só se aplica onde é pedida. */
.tablewrap.wide{width:min(calc(100vw - 24px),1800px);margin-left:calc(-1 * (min(calc(100vw - 24px),1800px) - 100%) / 2)}
/* [COMPACTA] letra e espaçamento menores para caberem mais colunas. As duas primeiras colunas
   deixam de ser nowrap — são as únicas com texto livre (nome do jogo, liga) e eram elas que
   empurravam a tabela para fora do ecrã. */
.tablewrap.compact table{font-size:12px}
.tablewrap.compact th,.tablewrap.compact td{padding:5px 7px}
.tablewrap.compact th{font-size:10px;letter-spacing:.2px}
.tablewrap.compact td:first-child,.tablewrap.compact td:nth-child(2){white-space:normal;line-height:1.25}
.tablewrap.compact td:first-child{max-width:230px}
.tablewrap.compact td:nth-child(2){max-width:130px}
.tablewrap .sub{color:var(--muted);font-size:11px}
.tablewrap.compact .sub{font-size:10px}
/* [ORDENAR] cabeçalho clicável, com a seta do sentido activo */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--accent)}
th.sortable .ar{opacity:.35;font-size:9px;margin-left:3px}
th.sortable.on{color:var(--accent)}
th.sortable.on .ar{opacity:1}
.pill{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800}
/* [ESTADOS] PIN amarelo · ABERTO azul · PREMIADO-A PAGAR laranja · PREMIADO-PAGO verde · PERDIDO/EXPIRADO cinza · ANULADO vermelho */
.p-pin{background:#3d3208;color:#ffd93d}
.p-aberto{background:#0a2d4d;color:#7cc0ff}
.p-apagar{background:#4a2a08;color:#ffa53d}
.p-premio{background:#0d3b1d;color:#73e08f}
.p-perdido{background:#222;color:#999}
.p-expirado{background:#222;color:#999}
.p-anulado{background:#3d1412;color:#ff8b80}
.p-porpagar{background:#3d3208;color:#ffd93d}
.p-pago{background:#0a2d4d;color:#7cc0ff}
.p-ganho{background:#4a2a08;color:#ffa53d}
.tbtn{padding:6px 10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;font-weight:700;font-size:12px}
.tbtn.go{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0c0a07;border-color:var(--accent)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.filters input,.filters select{padding:8px;border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:8px}
.cfgnum{width:64px;padding:8px;background:#11150f;color:var(--txt);border:1px solid var(--line);border-radius:8px;font-size:13px}

/* impressao termica (~58mm) */
@media print{
  /* [FORMATO] NÃO se fixa a largura do papel. O talão saía numa coluna estreita a um canto, com
     metade do rolo em branco: a app dizia "58 mm" e o serviço de impressão do Sunmi tem outro
     tamanho de página escolhido (80 mm, A4…), por isso encaixava os nossos 58 mm lá dentro e
     deixava o resto vazio. Com `size:auto` a página é a que a impressora tem, e o talão ocupa-a
     toda. Margem a 0 e depois um respiro de 2 mm dado pelo próprio talão. */
  @page{size:auto;margin:0}
  /* [IMPRESSÃO] Isolar o talão com display:none e NÃO com visibility:hidden.
     Com visibility o resto da app continua a ocupar espaço: saíam páginas em branco antes do
     talão, e num WebView antigo (Sunmi) a folha vinha vazia. Aqui só o #ticketSheet fica de pé,
     e desmonta-se a folha modal (position:fixed + max-height + overflow) para o talão poder
     correr por quantas páginas precisar. */
  /* Preso a body.tk-open: só isolamos quando há talão aberto. Assim o menu ⋮ → Imprimir do browser
     (o caminho manual, e o único que resta no Firefox antes da v118) dá o talão quando ele está no
     ecrã, e a página normal quando não está — em vez de uma folha em branco. */
  html,body{margin:0;padding:0;background:#fff;height:auto;overflow:visible}
  body.tk-open>*{display:none!important}
  body.tk-open>#ticketSheet{display:block!important;position:static!important;inset:auto!important;background:#fff!important;z-index:auto!important}
  #ticketSheet .card{max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;background:#fff!important;border-radius:0!important;width:100%!important;max-width:none!important}
  /* Fora do talão: título, aviso, botões e o rodapé do ecrã. Selectores de FILHO DIRECTO do .card —
     o próprio talão tem .muted lá dentro (a legenda do QR) e essa tem de sair impressa. */
  #ticketSheet .card>h3,#ticketSheet .card>#ticketNote,#ticketSheet .card>#cashBox,#ticketSheet .card>#imprimir,#ticketSheet .card>#novo,#ticketSheet .card>.muted{display:none!important}
  #printArea{display:block!important;width:100%!important;max-width:none!important}
  /* o talão passa a ser fluido: enche a largura que houver, seja 58 mm, 80 mm ou uma folha A4 */
  .bilhete{box-shadow:none;border:0;width:100%!important;max-width:none!important;padding:2mm;border-radius:0}

  /* [LEGIBILIDADE] Posto ao lado do talão da concorrência, o nosso era pequeno e fino e o deles
     lia-se de longe. A diferença não era a impressora: era a LETRA.
       1. MONOESPAÇADA. Numa cabeça de 1 bit a 203 dpi, cada caractere de uma monoespaçada assenta
          numa grelha fixa e tem hastes de espessura constante — queima sempre os mesmos pontos. Uma
          proporcional (system-ui) tem hastes finas e curvas que caem entre pontos e desaparecem.
          É por isto que TODOS os talões de rua são monoespaçados, e o da concorrência também.
       2. MAIOR. 15px de monoespaçada em 58 mm dá ~24 caracteres por linha — a mesma densidade do
          talão deles. Era aqui que estávamos a perder: tínhamos 13px de proporcional, muito mais
          caracteres por linha e cada um com menos pontos.
       3. NEGRITO no que interessa (jogo, escolha, valores, PIN): mais pontos queimados por letra é
          exactamente o que a térmica precisa. */
  #printArea{font-family:"Courier New",Courier,ui-monospace,monospace !important}
  /* [TAMANHO] Segunda passagem, com o nosso talão ao lado do da concorrência em cima da mesa: a
     letra monoespaçada resolveu o esfarelado mas continuava mais pequena que a deles. Subiu-se
     tudo ~40%: a base de 15 para 21px. A referência é o nº de caracteres por linha — eles têm ~20
     na linha do jogo, nós tínhamos ~28. Menos caracteres por linha = cada um com mais pontos
     queimados = lê-se de longe, que é o que o apostador na rua faz com o talão na mão. */
  .bilhete{font-size:21px;line-height:1.4}
  .bilhete h2{font-size:30px;letter-spacing:1px}
  /* etiqueta/valor: com letra grande a linha pode não chegar. Em vez de esmagar, passa para baixo. */
  .bilhete .row{font-size:21px;margin:5px 0;font-weight:700;flex-wrap:wrap;gap:0 8px}
  .bilhete .tkjogo{margin:13px 0}
  /* a preto, senao o cinzento vira pontos soltos no termico; espacado a condizer com a letra maior */
  .bilhete .tkjogo + .tkjogo{border-top:1px dashed #000 !important;padding-top:13px}
  .bilhete .tkjh{font-size:17px}
  .bilhete .tkev{font-size:22px;font-weight:800}
  .bilhete .tksel{font-size:21px;font-weight:700}
  .bilhete .tkhora{font-size:17px}
  .bilhete .tktipo{font-size:15px}
  .bilhete .tkban{font-size:20px;font-weight:800;padding:8px 4px;letter-spacing:.5px}
  .bilhete .tkban-s{font-size:17px}
  .bilhete .tkbadge{font-size:18px;font-weight:800;padding:3px 8px}
  .bilhete .tkpin{font-size:28px;letter-spacing:2px}
  .bilhete .codigo{font-size:36px;letter-spacing:3px}
  .bilhete .tkagente{padding:11px 4px;margin:13px 0}
  .bilhete .tkagente-t{font-size:17px;letter-spacing:1px}
  .bilhete .tkagente-c{font-size:42px;letter-spacing:3px}
  .bilhete .tknote,.bilhete .tkboost,.bilhete .tkvia{font-size:19px;font-weight:700;padding:7px 4px}
  /* o rodapé legal (morada, NUIT, avisos) fica PEQUENO de propósito: é letra miudinha que ninguém
     precisa de ler ao balcão e que, grande, só ia esticar o talão e gastar papel. O que tem de se
     ler de longe são os jogos, os valores e o PIN — e é onde a letra cresceu.
     Pequeno SIM, fino NÃO: a esta escala numa térmica de 1 bit, letra fina esfarela. Fica o negrito
     que o bloco do granulado já lhe dá; só o tamanho é que se mantém miúdo. */
  .bilhete .qr .muted{font-size:12px !important}
  .bilhete .tkleg{font-size:12px;line-height:1.35}

  /* [GRANULADO] O talão saía com as letras a esfarelar. A cabeça térmica do Sunmi é de 1 BIT:
     cada ponto ou queima ou não queima, não há tons. Tudo o que chega lá em tom intermédio é
     convertido em pontos espalhados (dither) — e a 203 dpi, num papel de rua, isso lê-se como
     granulado. São DUAS fontes de tom intermédio, e as duas têm de sair:
       1. os CINZENTOS do talão (#555, #666, #333, #999) e as caixas de fundo colorido;
       2. o ANTI-ALIASING das letras — mesmo texto preto tem as bordas em cinzento, e é isso que
          esfarela primeiro. Nenhuma definição da impressora corrige isto, porque o cinzento vai
          no HTML que lhe mandamos.
     Isto vive SÓ dentro do @media print: no ecrã o talão continua exactamente como é. */
  #printArea,#printArea *{
    color:#000 !important;
    background:transparent !important; background-image:none !important;
    box-shadow:none !important; text-shadow:none !important;
    opacity:1 !important; filter:none !important;
    -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale;
    text-rendering:geometricPrecision;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* traços e molduras: linha cheia. O tracejado a #999 saía como pontos soltos e parecia sujidade. */
  #printArea .dash{border-top:1px solid #000 !important}
  #printArea .estado,#printArea .tkban,#printArea .tkagente,#printArea .tkbadge,
  #printArea .tknote,#printArea .tkchg,#printArea .tkboost,#printArea .tkvia{
    border-color:#000 !important; border-style:solid !important; border-radius:0 !important;
  }
  #printArea .tkban,#printArea .tkagente{border-width:1.5px !important}
  /* .tktipo e .pstat viviam de um fundo colorido; sem fundo ficam só texto, e sem moldura a fingir */
  #printArea .tktipo,#printArea .pstat{border:0 !important;padding:0 1px !important}
  /* a linha fina do sistema queima menos pontos do que uma semi-negrito e é a primeira a desaparecer */
  #printArea{font-weight:600}
  #printArea .sub,#printArea .tkjh,#printArea .tkhora,#printArea .tkleg,
  #printArea .tktipo,#printArea .pstat{font-weight:700 !important}
  /* o QR tem de ficar 1 bit: reamostrado com suavização, os quadradinhos ganham bordas cinzentas,
     o dither come-as e o leitor deixa de o apanhar */
  #printArea .qr img{image-rendering:pixelated;image-rendering:crisp-edges;background:#fff !important}
  /* emojis: sao bitmaps A CORES. A termica converte-os em manchas pontilhadas — no ecra ficam,
     no papel saem. Marcados com .noprt no talao (relogio, foguetao, presente, visto). */
  #printArea .noprt{display:none !important}
}
/* ---- spinner de carregamento ---- */
.spin{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:50px;min-height:120px;color:var(--muted);font-size:13px;font-weight:700}
.spin::before{content:"";width:44px;height:44px;border:4px solid rgba(245,130,32,.22);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:block}
.spin::after{content:"A carregar…"}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---- paginação ---- */
.pgbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 2px;font-size:13px}
.pgbar .tbtn[disabled]{opacity:.4;pointer-events:none}
/* ---- seleção clara na navegação (drawer) ---- */
.nav-row.sel{background:var(--panel2)}
.nav-row.sel>.nm{color:var(--accent);font-weight:800}
.nav-row .nm{cursor:pointer}
/* odd selecionada bem visível */
.odds .o.on{box-shadow:0 0 0 2px var(--odd-on) inset}
/* ---- barra inferior (app unificada) ---- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:35;height:54px;display:flex;background:var(--panel);border-top:1px solid var(--line)}
.bottomnav button{flex:1;background:none;border:0;color:var(--muted);font-size:15px;font-weight:800;cursor:pointer;padding:0}
.bottomnav button.on{color:var(--accent)}
.slipbar{bottom:54px}
#pgBilhete h3,#pgResultados h3,#pgAgente h3{color:var(--txt)}

/* [DIÁLOGOS] o CSS das caixas de aviso/confirmação vive no dlg.js — vai com o ficheiro para
   funcionar tambem nas paginas que nao carregam este styles.css (o pro.html tem estilos proprios). */

/* [SÓ PRÉ OU SÓ AO VIVO] etiqueta do modo do talao */
.sliptipo{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--accent2);background:#1f1810;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:8px}

/* [PARTILHA] botao do WhatsApp no talao — verde do WhatsApp, como no Bingo */
.btn.wa{background:#25D366;color:#0b2e18}
.btn.wa:active{transform:translateY(1px)}
/* nao vao para o papel: sao botoes de ecra */
@media print{ #ticketSheet .card>#copiarPin,#ticketSheet .card>#whats,#ticketSheet .card>#payBox{display:none!important} }

/* [HOJE/AMANHÃ] filtro de dia + etiqueta do dia no cartão */
/* a linha de topo: Pré-jogo · Ao vivo · [Hoje/Amanhã] · liga. Enrola em 2 linhas no ecrã estreito
   do Sunmi em vez de empurrar a liga para fora. */
.toprow{display:flex;gap:6px;padding:8px 0;align-items:center;flex-wrap:wrap}
.diasf{display:flex;gap:4px;align-items:center}
.dchip{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap}
.dchip.on{background:var(--accent);border-color:var(--accent);color:#1a1000}
.dchip:not(.on):active{transform:scale(.97)}
.ev .lg .dia{font-weight:800;letter-spacing:.3px}
.ev .lg .dia.hoje{color:var(--green)}
.ev .lg .dia.amanha{color:var(--accent2)}

/* etiqueta da liga em vista (ao lado de Pré-jogo/Ao vivo) */
.curliga{margin-left:auto;background:var(--panel2);border:1px solid var(--line);color:var(--accent2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* barra de instalação PWA — pílula centrada no topo do header */
.install-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px}
.install-bar.hide{display:none}
.install-bar .ib-go{background:var(--accent);color:#1a1206;border:none;border-radius:999px;padding:11px 30px;font-weight:800;font-size:15px;box-shadow:0 2px 10px rgba(245,130,32,.35)}
.install-bar .ib-go:active{transform:translateY(1px)}
.install-bar .ib-x{background:transparent;border:none;color:var(--muted);font-size:24px;line-height:1;padding:0 6px}

/* [LOGO] Emblema da equipa no cartão do jogo. Pequeno (18px) porque o ecrã do Sunmi V2 é estreito
   e o nome da equipa é que manda. `r` = equipa de fora, o emblema fica à direita do nome. */
.teams .crest{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:6px;flex:0 0 auto}
.teams .crest.r{margin-right:0;margin-left:6px}
/* [CONTA] ligacao de texto dentro do separador Conta (trocar entre jogador e agente) */
/* [CONTA] telemovel com o +258 fixo: o agente so escreve os 9 digitos */
.telbox{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden;margin:8px 0 0}
.telbox .telpre{display:flex;align-items:center;padding:0 10px;background:var(--panel);color:var(--muted);font-weight:800;font-size:15px;border-right:1px solid var(--line)}
.telbox input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);font:16px/1 inherit;padding:13px 10px;letter-spacing:1px}
.telbox input:focus{outline:none}
.telbox:focus-within{border-color:var(--accent)}
/* [CASHOUT] simbolo de dinheiro no cartao da oferta. SVG e nao emoji: o emoji ignora a cor. */
.cash-ic{width:18px;height:18px;flex:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.lnk{color:var(--accent);text-decoration:none;font-size:13px;font-weight:700}
.lnk:hover{text-decoration:underline}