:root{
  --bg:#080a0e;--s1:#0e1118;--s2:#141820;--s3:#1c2230;
  --bd:#ffffff0d;--bd2:#ffffff16;--bd3:#ffffff22;
  --acc:#b8ff2e;--acc-d:#8fd400;--acc-dim:#b8ff2e1a;--acc-glow:#b8ff2e33;
  --acc2:#3df5a8;--acc3:#f5a623;
  --blu:#3d9df5;--blu-d:#1a7dd4;
  --grn:#22d97a;--grn-d:#18a85e;
  --red:#f54646;--red-d:#c43030;
  --amb:#f5a623;--amb-d:#c47f10;
  --tx:#edf0f8;--tx2:#9aa5c0;--tx3:#5a6480;--tx4:#2d3348;
  --r4:4px;--r6:6px;--r8:8px;--r12:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font-family:'Barlow',sans-serif;font-size:14px;line-height:1.4;overflow-x:hidden}

/* ── TOPBAR ─────────────────────────────── */
.topbar{height:52px;background:var(--s1);border-bottom:1px solid var(--bd2);display:flex;align-items:center;padding:0 20px;gap:16px;position:sticky;top:0;z-index:50}
.brand{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.06em;color:var(--acc);white-space:nowrap;text-transform:uppercase}
.brand span{color:var(--tx);opacity:.5;font-weight:300;margin:0 6px}
.top-divider{width:1px;height:24px;background:var(--bd2);margin:0 4px}
.top-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tx3);letter-spacing:.04em}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.cal-badge{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc);background:var(--acc-dim);border:1px solid var(--acc-glow);border-radius:var(--r4);padding:3px 8px}

/* ── SHELL ───────────────────────────────── */
.shell{display:flex;height:calc(100vh - 52px)}

/* ── SIDEBAR ─────────────────────────────── */
.sb{width:56px;background:var(--s1);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:2px;overflow:hidden;flex-shrink:0}
.ni{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border-radius:var(--r8);color:var(--tx3);transition:all .15s;border:1px solid transparent}
.ni:hover{color:var(--tx2);background:var(--s3)}
.ni.on{color:var(--acc);background:var(--acc-dim);border-color:var(--acc-glow)}
.ni svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ni-lbl{font-size:8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ── MAIN ─────────────────────────────────── */
.main{flex:1;overflow-y:auto;overflow-x:hidden}
.pg{display:none;padding:20px 28px}.pg.on{display:block}

/* ── PAGE HEADER ─────────────────────────── */
.ph{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.ph-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.ph-sub{font-size:12px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:400;letter-spacing:.04em;text-transform:uppercase}

/* ── METRIC STRIP ─────────────────────────── */
.mstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.mcard{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r8);padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.mc-l{font-size:9px;color:var(--tx2);text-transform:uppercase;letter-spacing:.08em;font-family:'Barlow Condensed',sans-serif;font-weight:700}
.mc-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600}
.c-acc{color:var(--acc)}.c-grn{color:var(--grn)}.c-red{color:var(--red)}.c-amb{color:var(--amb)}.c-blu{color:var(--blu)}

/* ── DAY DIVIDER ─────────────────────────── */
.day-div{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.day-label{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);white-space:nowrap}
.day-line{flex:1;height:1px;background:linear-gradient(90deg,var(--bd2),transparent)}
.day-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--acc);background:var(--acc-dim);border:1px solid var(--acc-glow);border-radius:var(--r4);padding:2px 7px}

/* ── MATCH CARD ─────────────────────────── */
.mc{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r8);margin-bottom:4px;transition:border-color .15s;overflow:hidden}
.mc:hover{border-color:var(--bd3)}
.mc.done{border-left:2px solid var(--grn)}
.mc.val{border-left:2px solid var(--acc)}

/* TOP ROW — placar/horário */
.mc-top{display:grid;grid-template-columns:180px 1fr 200px;align-items:center;padding:0;min-height:54px}
.mc-left{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:9px 14px;border-right:1px solid var(--bd)}.mc-badge{display:flex;align-items:center;gap:5px}
.mc-badge-g{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase}
.mc-badge-r{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--tx4);background:var(--s3);border-radius:3px;padding:1px 4px}

/* team block */
.flag{width:24px;height:18px;border-radius:2px;object-fit:cover;background:var(--s3);flex-shrink:0}
.tname{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tname.dim{color:var(--tx3)}

/* score block */
.sc-live{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;color:var(--acc);letter-spacing:.04em;line-height:1}
.sc-time{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:#c89040;line-height:1}
.sc-prev{font-family:'JetBrains Mono',monospace;font-size:10px;color:#8a9abf;line-height:1;margin-top:2px;letter-spacing:.02em}

/* right meta */
.mc-city{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--tx);letter-spacing:.03em;text-align:right}.mc-left-g{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;color:var(--tx2);letter-spacing:.06em;text-transform:uppercase}.mc-left-r{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--tx2);background:var(--s3);border:1px solid var(--bd2);border-radius:3px;padding:1px 5px;display:inline-block;margin-left:4px}
.mc-est{font-size:10px;color:var(--tx2);text-align:right;margin-top:1px}
.mc-actions{display:flex;gap:5px;margin-top:3px}

/* BTNS */
.btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r4);padding:5px 12px;cursor:pointer;transition:all .12s;border:1px solid transparent;white-space:nowrap}
.btn-reg{background:var(--acc-dim);color:var(--acc);border-color:var(--acc-glow)}
.btn-reg:hover{background:var(--acc);color:#080a0e}
.btn-done{background:rgba(34,217,122,.08);color:var(--grn);border-color:rgba(34,217,122,.2)}
.btn-done:hover{background:rgba(34,217,122,.15)}
.btn-ana{background:transparent;color:var(--tx3);border-color:var(--bd2)}
.btn-ana:hover{color:var(--tx2);border-color:var(--bd3)}
.btn-sm{font-size:10px;padding:3px 8px}

/* ANA PANEL */
.mc-ana{display:none}
.mc-ana.open{display:none}

/* ANA GRID: texto | odds | mercados | % */
.ana-grid{display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start;width:100%}.ana-right{display:flex;flex-direction:column;gap:10px}
.ana-txt{font-size:13px;color:var(--tx2);line-height:1.7}
.ana-obs{font-size:11px;color:var(--tx3);font-style:italic;margin-top:5px;padding-top:5px;border-top:1px solid var(--bd)}

/* ODDS */
.odds-block{display:flex;flex-direction:column;gap:5px}
.odds-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;color:var(--acc);letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px}
.odd-row{display:flex;align-items:center;gap:6px}
.odd-lbl{font-size:10px;color:var(--tx);width:32px;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}
.odd-bar-bg{flex:1;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.odd-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
.odd-pct{font-family:'JetBrains Mono',monospace;font-size:10px;width:28px;text-align:right;color:var(--tx2)}
.odd-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--tx);width:28px;text-align:right;flex-shrink:0}

/* MERCADOS */
.merc-block{display:flex;flex-direction:column;gap:4px}
.merc-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;color:var(--acc);letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px}
.merc-pill{display:inline-flex;align-items:center;gap:3px;background:var(--s3);border:1px solid var(--bd2);border-radius:3px;padding:2px 6px;font-size:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.03em;color:var(--tx2);cursor:default;white-space:nowrap}
.merc-pill.mk-main{background:var(--acc-dim);border-color:var(--acc-glow);color:var(--acc)}
.merc-pill.mk-alt{background:rgba(61,157,245,.08);border-color:rgba(61,157,245,.2);color:var(--blu)}
.merc-pill.mk-cau{background:rgba(245,70,70,.06);border-color:rgba(245,70,70,.18);color:var(--red)}
.merc-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.merc-pills{display:flex;flex-wrap:wrap;gap:4px}

/* CALIBRAGEM */
.dev-block{display:flex;flex-direction:column;gap:5px}
.dev-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.dev-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.dev-lbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--tx3);text-transform:uppercase;font-size:10px;letter-spacing:.04em}
.dev-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--tx)}
.dtag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;border-radius:3px;padding:2px 7px;text-transform:uppercase}
.dtag.c{background:rgba(34,217,122,.08);color:var(--grn);border:1px solid rgba(34,217,122,.2)}
.dtag.z{background:rgba(245,70,70,.08);color:var(--red);border:1px solid rgba(245,70,70,.2)}
.dtag.p{background:rgba(245,166,35,.08);color:var(--amb);border:1px solid rgba(245,166,35,.2)}
.vtag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;background:var(--acc-dim);color:var(--acc);border:1px solid var(--acc-glow);border-radius:3px;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em}

/* ── GROUP TABLE ─────────────────────────── */
.gtab-wrap{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r12);overflow:hidden;margin-bottom:14px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{padding:8px 10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);border-bottom:1px solid var(--bd);text-align:left}
.tbl th.c,.tbl td.c{text-align:center}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--bd);vertical-align:middle;color:var(--tx)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.mo{font-family:'JetBrains Mono',monospace;font-size:12px;text-align:center}
.tc{display:flex;align-items:center;gap:8px}
.pos-1,.pos-2{color:var(--grn)}.pos-3{color:var(--amb)}.pos-4{color:var(--tx4)}
.pbadge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;margin-left:4px}
.pb1,.pb2{background:rgba(34,217,122,.1);color:var(--grn)}
.pb3{background:rgba(245,166,35,.1);color:var(--amb)}
.pb4{background:rgba(245,70,61,.08);color:var(--red);border:1px solid rgba(245,70,61,.15)}

/* ── TABS ─────────────────────────────────── */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:5px 11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--bd2);border-radius:var(--r4);background:transparent;color:var(--tx3);cursor:pointer;transition:all .1s}
.tab.on{background:var(--acc-dim);border-color:var(--acc-glow);color:var(--acc)}
.tab:hover:not(.on){color:var(--tx2);background:var(--s3)}

/* ── ARTILHEIROS ─────────────────────────── */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rank-card{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r12);padding:18px 22px}
.rank-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx);margin-bottom:14px;border-bottom:1px solid var(--bd);padding-bottom:10px}
.rrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--bd)}
.rrow:last-child{border-bottom:none}
.rn{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tx4);width:16px;text-align:center;flex-shrink:0}
.rn.top{color:var(--acc)}
.rv{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--acc)}

/* ── MODAL ───────────────────────────────── */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mbg.open{display:flex}
.modal{background:var(--s1);border:1px solid var(--bd3);border-radius:var(--r12);padding:24px 28px;width:600px;max-width:96vw;max-height:92vh;overflow-y:auto}
.modal-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:var(--acc);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.flbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:4px;display:block}
.finp{width:100%;background:var(--s3);border:1px solid var(--bd2);border-radius:var(--r6);padding:9px 12px;color:var(--tx);font-family:'Barlow',sans-serif;font-size:13px;outline:none;transition:border-color .12s}
.finp:focus{border-color:var(--acc-glow);box-shadow:0 0 0 2px var(--acc-dim)}
.frow{margin-bottom:12px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.gi{display:grid;grid-template-columns:110px 1fr 1fr 60px 36px;gap:6px;margin-bottom:5px;align-items:center}.gi-hdr{display:grid;grid-template-columns:110px 1fr 1fr 60px 36px;gap:6px;margin-bottom:3px}
.add-g{background:transparent;border:1px dashed var(--bd2);border-radius:var(--r6);color:var(--tx3);cursor:pointer;padding:7px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;width:100%;text-align:center;transition:all .1s;margin-top:4px}
.add-g:hover{border-color:var(--acc-glow);color:var(--acc)}
.rm-g{background:rgba(245,70,70,.1);border:1px solid rgba(245,70,70,.2);color:var(--red);border-radius:var(--r4);cursor:pointer;padding:6px;font-size:13px;line-height:1;font-family:'Barlow',sans-serif}
.rm-g:hover{background:rgba(245,70,70,.2)}
.fbtn{background:var(--acc);color:#080a0e;border:none;border-radius:var(--r6);padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:opacity .1s}
.fbtn:hover{opacity:.88}
.fbtn2{background:transparent;color:var(--tx3);border:1px solid var(--bd2);border-radius:var(--r6);padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;margin-left:8px;transition:all .1s}
.fbtn2:hover{color:var(--tx2)}
.fbtns{display:flex;align-items:center;margin-top:16px}

/* ── TOAST ───────────────────────────────── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--acc);color:#080a0e;border-radius:var(--r6);padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;z-index:999;opacity:0;transform:translateY(10px);transition:all .18s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ── SCROLL ──────────────────────────────── */
.main::-webkit-scrollbar{width:4px}.main::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── SELETOR DE DATA ──────────────────────── */
.date-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:none}
.date-strip::-webkit-scrollbar{height:0;display:none}
.date-pill{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:46px;height:54px;border-radius:27px;border:1px solid var(--bd2);background:var(--s2);color:var(--tx2);cursor:pointer;transition:all .12s}
.date-pill:hover{border-color:var(--bd3);color:var(--tx)}
.date-pill.on{background:var(--acc-dim);border-color:var(--acc-glow);color:var(--acc)}
.date-wd{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.date-num{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;line-height:1}
.date-dot{position:absolute;bottom:7px;width:4px;height:4px;border-radius:50%;background:var(--grn)}
.date-pill.on .date-dot{background:var(--acc)}

/* ── RESPONSIVO ───────────────────────────── */
@media (max-width: 768px){
  /* sidebar vira barra inferior */
  .shell{height:auto}
  .sb{position:fixed;bottom:0;left:0;right:0;width:100%;height:58px;flex-direction:row;
      justify-content:space-around;align-items:center;padding:0;border-right:none;
      border-top:1px solid var(--bd2);z-index:100;background:var(--s1)}
  .main{padding-bottom:74px}
  .pg{padding:14px 14px}
  .ph-title{font-size:22px}

  /* topbar mais enxuta no celular (a data aparece nos divisores de dia) */
  .topbar{padding:0 12px;gap:8px}
  .brand{font-size:16px}
  .top-date,.top-divider{display:none}

  /* métricas: 5 -> 2 colunas */
  .mstrip{grid-template-columns:repeat(2,1fr)}
  .mstrip>.mcard:last-child{grid-column:1/-1}   /* 5º card (zebras) ocupa a linha toda — sem buraco */

  /* card de jogo: meta em cima, TIMES na mesma linha (home | placar | away), painel embaixo */
  .mc-row{flex-direction:row!important;flex-wrap:wrap!important}
  .mc-c-meta{width:100%!important;flex:none!important;border-right:none!important;border-bottom:1px solid var(--bd)!important;
             flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
  .mc-c-home{flex:1 1 0!important;min-width:0!important;justify-content:flex-end!important;padding:10px 8px!important;gap:6px!important}
  .mc-c-score{flex:0 0 auto!important;width:auto!important;padding:10px 4px!important}
  .mc-c-away{flex:1 1 0!important;min-width:0!important;justify-content:flex-start!important;padding:10px 8px!important;gap:6px!important}
  .mc-c-side{width:100%!important;flex:none!important;border-left:none!important;border-top:1px solid var(--bd)!important;padding:10px 14px!important}
  .mc-tname{font-size:16px!important}
  .mc-c-home img,.mc-c-away img{width:26px!important;height:20px!important}
  /* no card mobile, esconde a cidade pra os nomes dos times caberem inteiros (cidade segue no desktop e na análise) */
  .mc-c-score > div:last-child{display:none!important}

  /* grupos: tabela e colunas lado a lado empilham */
  #gcontent > div[style*="grid-template-columns"]{display:block!important}
  #gcontent > div[style*="grid-template-columns"] > div{width:100%!important;margin-bottom:12px}
  .tbl{font-size:11px}
  .tbl th,.tbl td{padding:6px 6px}

  /* modal full-screen + grade de gols empilhada */
  .modal{width:100%;max-width:100vw;height:auto;max-height:92vh;border-radius:var(--r12) var(--r12) 0 0;padding:18px 16px}
  .mbg{align-items:flex-end}   /* modal vira folha que sobe de baixo — sem espaço vazio sobrando */
  .gi,.gi-hdr{grid-template-columns:1fr 1fr;gap:6px}
  .gi-hdr{display:none}
  .gi{padding-bottom:8px;border-bottom:1px solid var(--bd);margin-bottom:8px}
  .gi .rm-g{grid-column:1/-1}
}
@media (max-width: 420px){
  .ph-title{font-size:20px}
  .mstrip{gap:6px}
  .mcard{padding:8px 10px}
  /* esconde colunas secundárias da tabela em telas bem estreitas */
  .tbl th:nth-child(9),.tbl td:nth-child(9),
  .tbl th:nth-child(10),.tbl td:nth-child(10){display:none}
}