/* Tokens medidos na referência (tema blue-dark, captura 1440x900). Identidade própria, estrutura espelhada. */
:root{
  --shell:#172329; --bg:#12222b; --s1:#1e303a; --s2:#2a3f4c; --s3:#34505f; --pill:#223641;
  --accent:#21a8f7; --accent-d:#1690d8; --text:#ffffff; --muted:#8b9aa3; --muted2:#5f717b;
  --live:#ff4e4e; --up:#2fd06d; --down:#ff4e4e; --gold:#f5a623; --green:#2fd06d;
  --sidebar-w:320px; --brand-h:64px; --pad:16px; --odd-w:70px; --odd-h:56px; --gap:8px; --group-gap:16px;
  --r-card:8px; --r-btn:6px; --r-pill:12px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:14px/1.35 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
img{display:block}
.ic{flex:0 0 auto;display:block}
.hscroll{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}

/* ---------- Barra da marca ---------- */
.brandbar{height:var(--brand-h);background:var(--shell);display:flex;align-items:center;gap:14px;padding:0 24px;position:relative;z-index:30}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff}
.brand-word{font-weight:700;letter-spacing:.14em;font-size:18px}.brand-word b{color:var(--accent);font-weight:700}
.mode-tag{font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:6px;background:#3a2a10;color:var(--gold)}
.mode-tag.prod{background:#0f3a24;color:var(--green)}
.mode-tag.observed{background:#102f3a;color:#45c9ff}
.mode-tag.blocked{background:#3a1515;color:var(--live)}
.brand-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.chip-round{height:36px;padding:0 12px;border-radius:18px;background:var(--s2);display:grid;place-items:center;font-size:12px;font-weight:700}
.balance{display:flex;flex-direction:column;align-items:flex-end;margin-left:8px;line-height:1.1}
.balance small{font-size:10px;color:var(--muted)}.balance b{font-size:14px}

/* ---------- Estrutura (App.direction: {673: row, default: column}) ---------- */
.app{display:flex;flex-direction:column;min-height:calc(100vh - var(--brand-h))}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;min-width:0;padding:20px var(--pad) 96px;container-type:inline-size;container-name:main}
.sidebar{display:none}
@media (min-width:673px){
  .app{flex-direction:row}
  .sidebar{display:block;width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--s2);position:sticky;top:0;height:calc(100vh);overflow-y:auto;scrollbar-width:none;padding:0 16px 24px}
  .sidebar::-webkit-scrollbar{display:none}
  .topnav{display:none}
}

/* ---------- Sidebar (LeftSidebarSimple) ---------- */
.qnav{height:64px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;color:#c9d3d8}
.qnav a{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;transition:color .15s,background .15s}
.qnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.qnav a.on{color:var(--accent)}
.featured{gap:8px;margin:8px -16px 10px;padding:0 16px}
.fcard{flex:0 0 128px;height:88px;border-radius:var(--r-card);padding:8px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a5b8f,#0f2a44)}
.fcard .fc-ic{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.fcard .fc-bg{position:absolute;right:-14px;bottom:-16px;color:rgba(255,255,255,.10)}
.fcard small{font-size:10px;color:rgba(255,255,255,.75);position:relative}
.fcard b{font-size:12px;line-height:1.25;position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pinned{display:flex;flex-direction:column;gap:10px}
.pin{height:44px;border-radius:var(--r-btn);background:var(--s1);display:flex;align-items:center;gap:12px;padding:0 12px;transition:background .15s}
.pin:hover{background:#243845}
.pin small{display:block;font-size:10px;color:var(--muted);line-height:1.2}
.pin b{display:block;font-size:12px;font-weight:600;color:#c9d3d8;line-height:1.3}
.flag{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--s3);flex:0 0 auto}
.flag.lg{width:28px;height:28px}
.ficon{width:24px;height:24px;border-radius:50%;background:var(--s3);display:grid;place-items:center;color:#c9d3d8;flex:0 0 auto}
.ficon.lg{width:28px;height:28px}
.seg-row{display:flex;gap:8px;margin:18px 0 12px}
.seg{flex:1;height:40px;border-radius:var(--r-card);background:var(--s1);display:flex;padding:4px}
.seg button{flex:1;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--s2);color:#fff}
.sq-btn{width:40px;height:40px;border-radius:var(--r-card);background:var(--s1);display:grid;place-items:center;color:var(--gold);position:relative}
.sq-btn .dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.slist{display:flex;flex-direction:column}
.srow{height:56px;display:flex;align-items:center;gap:12px;padding:0 2px;border-radius:var(--r-btn);color:#dfe6ea}
.srow:hover{background:rgba(255,255,255,.04)}
.srow.on{color:var(--accent)}
.srow .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnt{font-size:11px;font-weight:700;background:var(--bg);color:#cfd8dd;border-radius:10px;padding:1px 7px;line-height:16px}
.srow .exp{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--s3);display:grid;place-items:center;color:#fff;flex:0 0 auto}
.sub{display:flex;flex-direction:column;margin:0 0 8px 40px}
.sub a{height:40px;display:flex;align-items:center;gap:10px;font-size:13px;color:#c9d3d8}
.sub a:hover{color:#fff}
.sep{height:0;margin:0}

/* ---------- Topnav mobile (HeaderSingleRowAlt, sticky) ---------- */
.topnav{position:sticky;top:0;z-index:20;height:64px;background:var(--s2);display:flex;align-items:center;gap:4px;padding:0 10px;color:#c9d3d8}
.topnav a,.topnav button{width:42px;height:42px;display:grid;place-items:center;border-radius:10px}
.topnav .on{color:var(--accent)}
.topnav .div{width:1px;height:28px;background:rgba(255,255,255,.18);margin:0 6px}
.topnav .sportsel{width:auto;display:flex;align-items:center;gap:4px;padding:0 4px}
.topnav .push{margin-left:auto}

/* ---------- Abas de seção ---------- */
.tabs{gap:8px;margin-bottom:16px}
.tab{flex:0 0 auto;height:40px;border-radius:var(--r-pill);background:var(--pill);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:600;color:#c9d3d8;white-space:nowrap}
.tab.on{background:var(--s2);color:#fff}
.tab .c-gold{color:var(--gold)}.tab .c-live{color:var(--live)}.tab .c-acc{color:var(--accent)}.tab .c-green{color:var(--green)}

/* ---------- Hero ---------- */
/* Hero proporcional: 1088x243 em 1440 e ~1568x350 em 1920 (mesma razão na referência). */
.hero{aspect-ratio:1088 / 243;min-height:200px;border-radius:12px;position:relative;overflow:hidden;margin-bottom:16px;background:#0d1a22}
/* Ref: título+subtítulo um pouco acima do centro vertical; texto miúdo fixo no rodapé (acima dos pontos). */
.slide{position:absolute;inset:0;padding:0 16px 48px;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .5s}
.slide.on{opacity:1}
.slide h2{margin:0 0 8px;font-size:clamp(22px,2.2cqw,34px);font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.slide p{margin:0;font-size:clamp(12px,1cqw,16px);font-weight:600}
.slide .fine{position:absolute;left:16px;bottom:28px;font-size:10px;font-weight:500;color:rgba(255,255,255,.85)}
.slide .art{position:absolute;right:0;top:0;bottom:0;width:62%;pointer-events:none}
.dots{position:absolute;left:16px;bottom:12px;display:flex;gap:4px}
.dots i{width:8px;height:4px;border-radius:2px;background:rgba(255,255,255,.6)}
.dots i.on{width:24px;background:var(--accent)}

/* ---------- Partidas em destaque ---------- */
/* Destaques = carrossel horizontal de cards 360px (gap 16), como na referência em 1440/1920. */
.feat{display:flex;overflow-x:auto;scrollbar-width:none;gap:16px;margin:0 -16px 22px 0;padding:0 16px 0 0}
.feat::-webkit-scrollbar{display:none}
.fm{flex:0 0 360px;height:202px;border-radius:var(--r-card);position:relative;overflow:hidden;padding:12px 8px 8px;display:flex;flex-direction:column;background:linear-gradient(160deg,#1d3f5a 0%,#132a3a 55%,#0e1d27 100%);cursor:pointer}
.fm .art{position:absolute;inset:0;pointer-events:none;opacity:.55}
.fm-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;position:relative}
.fm-h .t{margin-left:auto;color:#dfe6ea;white-space:nowrap}
.fm-h .lg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-teams{display:flex;justify-content:space-between;margin-top:12px;position:relative}
.fm-team{display:flex;flex-direction:column;gap:8px;max-width:48%}
.fm-team:last-child{align-items:flex-end;text-align:right}
.fm-team img{width:32px;height:32px}
.fm-team b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm .mk-label{margin-top:auto;text-align:center;font-size:12px;color:rgba(255,255,255,.65);position:relative}
.fm .row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;position:relative}
.fm .odd{width:auto;height:40px;flex-direction:row;justify-content:space-between;padding:0 8px;background:rgba(42,63,76,.88)}
.fm .odd .l{font-size:12px}.fm .odd .v{font-size:13px}

/* ---------- Chips de esporte ---------- */
.chips{gap:8px;margin-bottom:16px}
.chip{flex:0 0 auto;height:36px;border-radius:18px;background:var(--s1);display:flex;align-items:center;gap:8px;padding:0 14px 0 10px;font-size:14px;font-weight:600;color:#dfe6ea;white-space:nowrap}
.chip.on{background:var(--accent);color:#fff}

/* ---------- Lista de eventos (eventsListVariant: FullWidth) ---------- */
.evlist{display:flex;flex-direction:column;gap:16px}
.comp-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#c9d3d8;margin:6px 0 -6px}
/* Coluna de informações com largura fixa (~433px medidos); mercados ocupam o resto e transbordam. */
.ev{background:var(--s1);border-radius:var(--r-card);padding:12px 16px;display:grid;grid-template-columns:433px minmax(0,1fr);column-gap:16px;overflow:hidden}
.ev-info{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;grid-template-rows:auto 1fr;column-gap:12px;min-width:0}
.ev-top{grid-column:1 / 4;grid-row:1;display:flex;align-items:center;gap:8px;height:22px;font-size:12px;color:var(--muted);min-width:0}
.ev-teams{grid-column:1;grid-row:2}
.ev-scores{grid-column:2;grid-row:2}
.ev-info .fav{grid-column:3;grid-row:2}
.ev-top .lg{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-top .lg .ic{color:var(--muted)}
.ev-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-status.live{color:var(--live)}
.ev-status .st-ic{color:var(--accent);display:flex;gap:4px}
.tracker-shortcut{display:grid;place-items:center;width:20px;height:22px;border-radius:4px;color:var(--accent);position:relative;z-index:1;cursor:pointer;pointer-events:auto}
.tracker-shortcut:hover,.tracker-shortcut:focus-visible{background:var(--s2);color:#fff;outline:2px solid var(--accent);outline-offset:1px}
.ev-teams{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-top:6px;min-width:0}
.ev-team{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-width:0}
.ev-team img{width:22px;height:22px;flex:0 0 auto}
.ev-team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-scores{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-top:6px}
.score{min-width:30px;height:22px;border-radius:4px;background:var(--s2);display:grid;place-items:center;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.08)}
.ev-time{font-size:12px;color:var(--muted);text-align:right}
.fav{align-self:center;justify-self:center;color:var(--muted2);width:32px;height:32px;display:grid;place-items:center}
.fav.on{color:var(--gold)}
.ev-mk{display:flex;gap:var(--group-gap);align-items:flex-end;min-width:0;overflow-x:auto;scrollbar-width:none}
.ev-mk::-webkit-scrollbar{display:none}
.grp{display:flex;flex-direction:column;gap:8px}
.grp-h{height:14px;font-size:12px;font-weight:600;color:var(--muted);text-align:center;white-space:nowrap}
.grp-o{display:flex;gap:var(--gap)}
.odd{width:var(--odd-w);min-width:0;height:var(--odd-h);border-radius:var(--r-btn);background:var(--s2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .15s;position:relative;overflow:hidden}
.odd .l{font-size:12px;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 2px;letter-spacing:-.01em}
.odd .v{font-size:13px;font-weight:700}
.odd:hover{background:var(--s3)}
.odd.sel{background:var(--accent)}.odd.sel .l{color:rgba(255,255,255,.85)}
.odd.susp{cursor:not-allowed;opacity:.55}
.odd.up::after,.odd.down::after{content:"";position:absolute;right:4px;top:4px;border:5px solid transparent}
.odd.up::after{border-bottom-color:var(--up);border-top:0}
.odd.down::after{border-top-color:var(--down);border-bottom:0}
.odd.up .v{color:var(--up)}.odd.down .v{color:var(--down)}
.odd.sel.up .v,.odd.sel.down .v{color:#fff}
.allmk{min-width:606px;height:var(--odd-h);border-radius:var(--r-btn);background:var(--s2);display:grid;place-items:center;font-size:12px;font-weight:700;align-self:end}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}

/* ---------- Página do evento (estrutura da referência) ---------- */
.estrip{display:flex;gap:8px;margin:0 -16px 20px 0;align-items:stretch}
.estrip-c{flex:0 0 32px;height:56px;border-radius:8px;background:var(--s1);display:grid;place-items:center;color:#c9d3d8}
.estrip-l{gap:8px;flex:1;min-width:0;padding-right:16px;scroll-behavior:smooth;overscroll-behavior-x:contain}
.echip{flex:0 0 170px;height:56px;border-radius:8px;background:var(--s1);padding:6px 10px;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.echip.on{background:var(--s2)}
.es-st{font-size:10px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.es-st.live{color:#c9d3d8}.es-st.live .ic{color:var(--live)}
.es-t{display:flex;gap:6px;font-size:12px;min-width:0}
.es-t i{font-style:normal;color:var(--muted);font-weight:600;min-width:14px}
.es-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-page{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "main" "side";gap:16px}
@container main (min-width:1000px){.ev-page{grid-template-columns:minmax(0,1fr) 322px;grid-template-areas:"head media" "main side";align-items:start}}
.ev-main{grid-area:main;min-width:0}.ev-side{grid-area:side;min-width:0}
.ehead{grid-area:head;background:var(--s1);border-radius:var(--r-card);padding:16px;margin:0}
.eh-top{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.eh-top a:hover{color:#fff}
.eh-top .fav{margin-left:auto;width:24px;height:24px}
.eh-st{font-size:12px;font-weight:600;color:var(--muted);margin:4px 0 14px;display:flex;align-items:center;gap:6px}
.eh-st.live{color:var(--live)}
.eh-team{display:flex;align-items:center;gap:12px;font-size:14px;padding:7px 0}
.eh-team img{width:28px;height:28px}
.eh-team .score{margin-left:auto}
.mtabs{gap:4px;margin-bottom:16px}
.mtab{flex:0 0 auto;height:36px;border-radius:18px;padding:0 12px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.mtab .n{font-size:11px;font-weight:700;background:var(--s2);color:#cfd8dd;border-radius:9px;padding:0 6px;line-height:16px}
.mtab.on{background:var(--s1);color:#fff}
.mbox{background:var(--s1);border-radius:var(--r-card);margin-bottom:16px;padding:16px 8px 8px}
.mbox-h{margin:0 0 14px 4px;font-size:14px;font-weight:700}
.mbox-b{display:grid;gap:8px}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center;margin-bottom:6px}
.lrow{display:grid;gap:8px}.lrow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.lrow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mbox-b .odd{width:auto;height:40px;flex-direction:row;justify-content:space-between;padding:0 8px}
.mbox-b .odd .l{font-size:12px;font-weight:600;color:#c9d3d8;padding:0}
.showall{justify-self:center;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#c9d3d8;height:28px}
.ev-side .tracker{display:flex;flex-direction:column;align-items:flex-start;gap:10px;line-height:1.45}
.ev-side .tracker .pitch{width:100%;height:auto;max-width:290px}
.ev-side .tracker b{color:#c9d3d8}
.ev-side code{font-size:11px;color:#c9d3d8}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.back{width:32px;height:32px;border-radius:8px;background:var(--s1);display:grid;place-items:center;margin-right:6px}
.tracker{border-radius:var(--r-card);background:var(--s1);padding:16px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}
.tracker .pitch{width:120px;height:72px;flex:0 0 auto;color:#3f6b54}
.event-builder{background:var(--s1);border-radius:var(--r-card);padding:16px;margin:0 0 16px;border:1px solid rgba(255,255,255,.04)}
.event-builder-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.event-builder-head b{display:block;font-size:14px}.event-builder-head small,.event-builder-leg small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.event-builder-cta{background:var(--accent);color:#fff;border-radius:7px;padding:9px 12px;font-weight:700;font-size:12px;white-space:nowrap}.event-builder-cta:disabled{opacity:.45;cursor:not-allowed}
.event-builder-empty,.event-builder-note,.event-builder-quote{font-size:12px;color:var(--muted);margin:12px 0 0}.event-builder-note{color:var(--live)}.event-builder-quote{border-top:1px solid var(--line);padding-top:10px;font-weight:700;color:#d8e2e8}
.event-builder-legs{display:grid;gap:6px;margin-top:12px}.event-builder-leg{display:flex;align-items:center;justify-content:space-between;border-radius:7px;background:var(--s2);padding:8px 10px}.event-builder-leg b{font-size:12px}
.tracker{display:block;line-height:1.4}.tracker-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding-bottom:14px;border-bottom:1px solid var(--line)}.tracker-score{display:flex;gap:12px;align-items:center;font-size:24px;color:#fff}.tracker-clock{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.tracker-clock.live{color:var(--live)}.tracker-top small{grid-column:1/-1;color:var(--muted);font-size:10px}.tracker h3{font-size:12px;margin:14px 0 8px;color:#c9d3d8}.tracker-stats{display:grid;gap:6px}.tracker-stat,.tracker-event{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}.tracker-stat span,.tracker-event span{color:var(--muted)}.tracker-events{display:grid;gap:8px;max-height:180px;overflow:auto}.tracker-event time{color:var(--accent);font-weight:700}.tracker-event b{font-size:10px;text-align:right}.tracker-empty,.tracker-error,.tracker-loading{font-size:11px;color:var(--muted)}
.video-flag{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}.ev-top .video-flag{margin-left:auto}.ev-top .ev-status{margin-left:8px}
.event-media{grid-area:media;min-width:0;position:sticky;top:12px;align-self:start;z-index:3;border-radius:var(--r-card);overflow:hidden;background:var(--s1)}.event-media[hidden]{display:none}
.event-media-bar{display:flex;align-items:center;min-height:40px;padding:4px;gap:4px}.event-media-bar .tracker-loading{padding:0 8px}
.event-media-tab{min-width:0;flex:1;height:32px;border-radius:6px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700}.event-media-tab:hover,.event-media-tab.on{background:var(--s2);color:#fff}.event-media-tab.on .ic{color:var(--live)}
.event-media-frame{background:#000}.event-media-frame[hidden]{display:none}.event-media-frame iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}.event-media-frame iframe.event-media-tracker{height:360px;aspect-ratio:auto}

/* ---------- Bilhete ---------- */
.slip{position:fixed;right:4px;bottom:0;width:320px;z-index:40;filter:drop-shadow(0 -6px 24px rgba(0,0,0,.45))}
.slip-head{width:100%;height:56px;background:var(--accent);border-radius:8px 8px 0 0;display:flex;align-items:center;gap:10px;padding:0 16px;color:#fff}
.slip-head .ttl{font-size:17px;font-weight:700}
.slip-head .car{transition:transform .2s}
.slip.open .slip-head .car{transform:rotate(180deg)}
.slip-head .badge{min-width:20px;height:20px;border-radius:10px;background:#fff;color:var(--accent);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.qb{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.04em}
.switch{width:52px;height:26px;border-radius:13px;border:2px solid #fff;position:relative;display:inline-block}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--accent);transition:left .15s}
.switch.on{background:#fff}.switch.on i{left:28px;background:var(--accent);color:#fff}
.slip-body{display:none;background:var(--s1);max-height:min(70vh,560px);overflow-y:auto;padding:12px}
.slip.open .slip-body{display:block}
.stabs{display:flex;background:var(--bg);border-radius:8px;padding:4px;margin-bottom:12px}
.stabs button{flex:1;height:32px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted)}
.stabs button.on{background:var(--s2);color:#fff}
.sel{background:var(--s2);border-radius:8px;padding:10px 12px;margin-bottom:8px;position:relative}
.sel .ev-n{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;padding-right:22px}
.sel .pick{display:flex;align-items:center;gap:8px;margin-top:6px}
.sel .pick b{font-size:14px}
.sel .pick .mk{font-size:12px;color:var(--muted)}
.sel .pick .k{margin-left:auto;font-weight:700;font-size:14px;display:flex;align-items:center;gap:4px}
.sel .k s{color:var(--muted);font-weight:500;font-size:12px}
.sel .k.up{color:var(--up)}.sel .k.down{color:var(--down)}
.sel .rm{position:absolute;right:8px;top:8px;color:var(--muted)}
.sel.bad{outline:1px solid var(--live)}
.sel .warn{font-size:11px;color:var(--live);margin-top:6px}
.stake{display:flex;gap:8px;margin:12px 0 8px}
.stake input{flex:1;min-width:0;height:44px;border-radius:8px;border:1px solid var(--s3);background:var(--bg);color:#fff;font:inherit;font-size:16px;font-weight:600;padding:0 12px}
.qamt{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.qamt button{height:32px;border-radius:6px;background:var(--s2);font-size:12px;font-weight:600}
.sum{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin:6px 0}.sum b{color:#fff}
.cta{width:100%;height:48px;border-radius:8px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;margin-top:8px}
.cta:disabled{opacity:.45;cursor:not-allowed}
.cta.warn{background:var(--gold);color:#1b1b1b}
.slip-empty{text-align:center;color:var(--muted);font-size:13px;padding:20px 8px}
.slip-ok{text-align:center;color:var(--up);font-size:13px;font-weight:600;padding:8px}
.slip-fab{display:none}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#0b151b;border:1px solid var(--s3);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:all .2s;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Mobile (<673px): espelha o comportamento observado na referência ---------- */
.stories{gap:12px;margin:0 -16px 16px;padding:0 16px}
.story{flex:0 0 76px;height:76px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#21a8f7,#7b5cff,#21a8f7)}
.story span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;border:3px solid var(--bg);color:#fff}
.tiles{gap:12px;margin-bottom:16px}
.tile-s{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
.tile-s .box{width:56px;height:56px;border-radius:12px;background:var(--s1);display:grid;place-items:center;color:#dfe6ea}
.tile-s.on{color:#fff}.tile-s.on .box{background:var(--accent);color:#fff}
.tile-s .tl{max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Layout da página por viewport (breakpoints do layout.json: 673 sidebar, 601 padding) */
@media (max-width:672px){
  :root{--brand-h:56px}
  .brandbar{padding:0 12px;gap:8px}
  .brand-word{display:none}
  .balance small{display:none}
  .slip{left:0;right:0;width:auto;bottom:0;transform:translateY(100%);transition:transform .25s}
  .slip.open{transform:none}
  .slip-head{border-radius:16px 16px 0 0}
  .slip-body{max-height:70vh}
  .slip-fab{display:grid;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:var(--accent);place-items:center;color:#fff;z-index:38;box-shadow:0 6px 20px rgba(33,168,247,.45)}
  .slip-fab .badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:#fff;color:var(--accent);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
  .sb-team img{width:44px;height:44px}
  .sb-score{font-size:28px}
  .toast{bottom:84px}
}
.ev-status-m{display:none;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--live);font-variant-numeric:tabular-nums}
.ev-status-m .st-ic{margin-left:auto;color:var(--accent);display:flex;gap:4px}
@media (max-width:600px){ .main{padding:12px 8px 100px} .stories,.feat{margin-left:-8px!important;margin-right:-8px!important;padding-left:8px!important;padding-right:8px!important} }

/* Componentes por LARGURA DO CONTÊINER — na referência, o card muda de variante
   quando a coluna de conteúdo estreita (tablet com sidebar), não só no mobile. */
@container main (max-width:860px){
  .hero{aspect-ratio:auto;height:265px}
  .ev{grid-template-columns:1fr;padding:12px 16px;row-gap:14px}
  .ev-info{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto}
  .ev-top{grid-column:1;grid-row:1}
  .ev-info .fav{grid-column:2;grid-row:1;width:24px;height:22px}
  .ev-top .ev-status{display:none}
  .ev-status-m{display:flex;grid-column:1 / 3;grid-row:2;margin-top:4px}
  .ev-teams{grid-column:1;grid-row:3;gap:12px}
  .ev-scores{grid-column:2;grid-row:3;gap:12px}
  .score{min-width:32px;height:26px}
  .ev-mk{overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .ev-mk::-webkit-scrollbar{display:none}
  .odd{width:72px;height:46px;gap:2px}
  .allmk{min-width:0;width:100%}
}
/* Exclusivo do layout mobile (viewport < 673, sem sidebar): na tablet a ref mantém 72px/gap 8 e card 360. */
@media (max-width:672px){
  .tabs{margin-bottom:12px}
  .fm{flex:0 0 304px;height:204px}
  .odd{width:78px}
  .grp-o{gap:2px}            /* na referência mobile os botões do mesmo mercado ficam a 2px */
  .ev-mk{gap:10px}
}
/* Cascata: a topnav mobile nunca aparece com a sidebar visível (fica no fim do arquivo de propósito). */
@media (min-width:673px){ .topnav{display:none} }

/* ================= Motor demonstrativo (acréscimos; não alteram medidas do layout Sidebar) ================= */
a.slide{color:inherit}
.sec-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:4px 0 12px;color:#fff}
.sec-h .ic{color:var(--gold)}
.boosts{gap:12px;margin:0 -16px 22px 0;padding:0 16px 0 0}
.boosts.wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:0 0 22px;padding:0}
.boost{flex:0 0 260px;background:linear-gradient(160deg,#3a1a2a 0%,#1e303a 70%);border:1px solid rgba(255,78,122,.35);border-radius:var(--r-card);padding:12px;display:flex;flex-direction:column;gap:6px}
.boost-h{display:flex;align-items:center;justify-content:space-between}
.boost-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#1b1b1b;background:var(--gold);border-radius:5px;padding:2px 6px}
.boost-tag.sm{margin:6px 0 0;width:max-content}
.boost-x{font-size:11px;color:var(--muted)}
.boost-ev{font-size:13px;font-weight:700}
.boost-mk{font-size:11px;color:var(--muted)}
.boost-btn{height:44px;border-radius:var(--r-btn);background:var(--s2);display:flex;align-items:center;justify-content:space-between;padding:0 10px;margin-top:4px}
.boost-btn:hover{background:var(--s3)}
.boost-btn.sel{background:var(--accent)}
.boost-btn:disabled{opacity:.5;cursor:not-allowed}
.boost-btn .l{font-size:12px;font-weight:600}
.boost-btn .v{font-size:15px;font-weight:700;color:var(--gold);display:flex;gap:6px;align-items:baseline}
.boost-btn.sel .v{color:#fff}
.boost-btn s,.leg-k s,.sel .k s{color:var(--muted);font-weight:500;font-size:12px;margin-right:4px}
.boost-f{font-size:11px;color:var(--muted)}
.tracker-stat:has(.tracker-stat-bar){display:grid;grid-template-columns:1fr auto;padding:4px 0;gap:4px 8px}
.tracker-stat-bar{grid-column:1/-1;background:#ef5883;border-radius:4px;height:4px;overflow:hidden}
.tracker-stat-bar i{display:block;height:100%;background:var(--accent);border-right:2px solid var(--s1)}
.rule{background:var(--s1);border-radius:var(--r-card);padding:14px 16px;font-size:13px;line-height:1.5;margin-bottom:22px}
.rule small{color:var(--muted)}
.empty.sm{padding:14px;text-align:left}
.empty.err{color:var(--live)}
.retry{margin-left:8px;color:var(--accent);font-weight:700}
/* Freebets */
.fblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:22px}
.fbcard{background:var(--s1);border-radius:var(--r-card);padding:12px;border-left:3px solid var(--green)}
.fbcard.used,.fbcard.expired,.fbcard.cancelled{border-left-color:var(--muted2);opacity:.8}
.fb-top{display:flex;justify-content:space-between;align-items:center}.fb-top b{font-size:18px}
.fb-c{font-size:13px;font-weight:600;margin-top:4px}
.fb-r,.fb-x{font-size:11px;color:var(--muted);margin-top:4px}
.st{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:2px 6px;background:var(--s2);color:#c9d3d8}
.st-open,.st-available,.st-reserved{background:#102f3a;color:#45c9ff}
.st-won{background:#0f3a24;color:var(--green)}
.st-lost{background:#3a1515;color:var(--live)}
.st-void,.st-cancelled,.st-expired,.st-used{background:#2a3036;color:#aeb8be}
.st-cashed_out{background:#2b2350;color:#b9a6ff}
.fb-box{background:var(--bg);border-radius:8px;padding:10px;margin:8px 0}
.fb-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer}
.fb-toggle small{margin-left:auto;color:var(--green);font-weight:600}
.fb-toggle input,.fb-opt input{accent-color:var(--accent)}
.fb-opts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fb-opt{display:flex;gap:8px;align-items:flex-start;font-size:12px;background:var(--s2);border-radius:6px;padding:8px;cursor:pointer}
.fb-opt small{display:block;color:var(--muted);font-size:11px}
.fb-opt.no{opacity:.75}.fb-opt .why{color:var(--live)}
.fb-box .warn{font-size:11px;color:var(--live);margin-top:6px}
.chg{font-size:11px;color:var(--gold);margin-top:4px}
.slip-err{background:#3a1515;color:#ffb3b3;border-radius:6px;padding:8px 10px;font-size:12px;margin-top:8px}
/* Minhas apostas */
.bets-tabs{max-width:420px}
.bets{display:flex;flex-direction:column;gap:12px}
.bet{background:var(--s1);border-radius:var(--r-card);padding:12px 16px;border-left:3px solid var(--s3)}
.bet.st-won{border-left-color:var(--green)}.bet.st-lost{border-left-color:var(--live)}.bet.st-cashed_out{border-left-color:#9b7bff}.bet.st-open{border-left-color:var(--accent)}
.bet-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.bdgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bdg{font-size:10px;font-weight:700;border-radius:5px;padding:2px 6px;background:var(--s2);color:#c9d3d8}
.bdg.fb{background:#0f3a24;color:var(--green)}.bdg.so{background:var(--gold);color:#1b1b1b}.bdg.ep{background:#0d4a5a;color:#21e0f7}
.leg{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.leg i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--s2);flex:0 0 auto}
.leg-won i{background:#0f3a24;color:var(--green)}.leg-lost i{background:#3a1515;color:var(--live)}.leg-void i{color:#aeb8be}
.leg-t{flex:1;min-width:0;display:flex;flex-direction:column}
.leg-t b{font-size:13px}.leg-t small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg-k{font-weight:700;font-size:14px}
.bet-f{font-size:11px;color:var(--muted)}
.co{margin-top:10px}
.co-btn{width:100%;height:40px;border-radius:8px;background:#3d2a7a;color:#fff;font-weight:700}
.co-btn:hover{background:#4c36a0}.co-btn:disabled{opacity:.5;cursor:not-allowed}
.co-off,.co-wait{font-size:12px;color:var(--muted)}
.co-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.co-confirm span{flex:1 1 180px}
.co-yes,.co-no{height:36px;border-radius:8px;padding:0 14px;font-weight:700}
.co-yes{background:var(--green);color:#0b1d12}.co-yes:disabled{opacity:.5}
.co-no{background:var(--s2)}
.ledger{background:var(--s1);border-radius:var(--r-card);padding:4px 16px}
.lrow-l{display:grid;grid-template-columns:minmax(0,1fr) auto 90px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;color:var(--muted)}
.lrow-l span:first-child{display:flex;flex-direction:column}.lrow-l b{color:#fff;font-size:13px}
.lrow-l .pos{color:var(--green);font-weight:700}.lrow-l .neg{color:var(--live);font-weight:700}.lrow-l .bal{text-align:right}
/* Notificações e dados desatualizados */
.toast.good{border-color:var(--green)}.toast.bad{border-color:var(--live)}
body.stale .odd,body.stale .boost-btn{pointer-events:none;opacity:.45}
.feed-wait{padding:12px 16px;margin-bottom:12px;color:var(--muted);font-size:12px}
.source-coupon-leg{display:flex;flex-direction:column;gap:3px;margin:10px 0;font-size:12px}.source-coupon-leg small{color:var(--muted)}
.region-chip{white-space:nowrap}.regional-title{margin-top:12px}.regional-title small,.source-coupons .sec-h small{margin-left:6px;color:var(--muted);font-size:11px;font-weight:600}.br-flag{font-size:16px;line-height:1}.source-ready-card{min-width:270px}
.list-more{display:block;margin:12px auto 18px;padding:10px 18px;border:0;border-radius:20px;background:var(--s2);color:#fff;font-weight:700;cursor:pointer}.list-more small{margin-left:7px;color:var(--muted)}
.skeleton{background:linear-gradient(100deg,var(--s1) 20%,var(--s2) 45%,var(--s1) 70%);background-size:200% 100%;animation:feed-skeleton 1.4s linear infinite;border-radius:5px}
@keyframes feed-skeleton{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
/* Mobile (padding 8px): faixas horizontais não podem passar da borda (corrige rolagem horizontal). */
@media (max-width:600px){ .estrip,.boosts{margin-right:-8px!important} .boosts{padding-right:8px} }