/* Material Design 3 — esquema de cores tonal (semente verde), escuro por padrão, claro automático */
:root{
  --md-primary:#82d89a; --md-on-primary:#00391b; --md-primary-container:#00522b; --md-on-primary-container:#9ef5b4;
  --md-secondary-container:#37503d; --md-on-secondary-container:#d0e8d3;
  --md-tertiary:#a3cddb; --md-error:#ffb4ab;
  --md-surface:#101411; --md-surface-low:#181d19; --md-surface-container:#1c211d; --md-surface-high:#262b27; --md-surface-highest:#313631;
  --md-on-surface:#e0e4dd; --md-on-surface-variant:#c0c9bf; --md-outline:#8a938a; --md-outline-variant:#404942;
  --md-inverse-surface:#e0e4dd; --md-inverse-on-surface:#2d322e;
  --md-font:"Roboto","Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* aliases usados pelo app */
  --bg:var(--md-surface); --panel:var(--md-surface-container); --panel2:var(--md-surface-high); --line:var(--md-outline-variant);
  --text:var(--md-on-surface); --mut:var(--md-on-surface-variant);
  --acc:var(--md-primary); --acc2:var(--md-tertiary); --live:#ff6b5e; --warn:#f2c14e;
  --win:#7ddf97; --draw:#9aa59c; --loss:#ff8a80;
  --z-lib:#5fd37e; --z-pre:#b4d35f; --z-sul:#69c1e8; --z-reb:#ff7b70;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --md-primary:#1c6c3e; --md-on-primary:#ffffff; --md-primary-container:#a7f4b7; --md-on-primary-container:#00210e;
    --md-secondary-container:#d3e8d4; --md-on-secondary-container:#0e1f13;
    --md-tertiary:#2c6577; --md-error:#ba1a1a;
    --md-surface:#f6fbf3; --md-surface-low:#f0f5ed; --md-surface-container:#eaefe8; --md-surface-high:#e4eae2; --md-surface-highest:#dee4dc;
    --md-on-surface:#181d19; --md-on-surface-variant:#404942; --md-outline:#707970; --md-outline-variant:#c0c9bf;
    --md-inverse-surface:#2d322e; --md-inverse-on-surface:#eef2ea;
    --live:#c62828; --warn:#a56a00; --win:#1b7a3f; --draw:#6b756c; --loss:#c62828;
    --z-lib:#1b7a3f; --z-pre:#6f8f10; --z-sul:#1a73a8; --z-reb:#c62828;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--md-surface);color:var(--md-on-surface);font:400 15px/1.5 var(--md-font);letter-spacing:.01em}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--md-primary)}
h2{font:500 1.375rem/1.3 var(--md-font);margin:24px 0 12px}
h3{font:500 .8125rem/1.3 var(--md-font);margin:22px 0 8px;color:var(--md-primary);letter-spacing:.1em;text-transform:uppercase}

/* top app bar + abas primárias */
.top{background:var(--md-surface-container)}
.top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;padding-bottom:4px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{font:500 1.375rem/1.2 var(--md-font);margin:0}
.ball{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--md-primary-container) 0 24%,var(--md-primary) 26%);flex:none}
.sub{font-size:.75rem;color:var(--md-on-surface-variant)}
.top-actions{display:flex;gap:4px;flex-wrap:wrap}
.linkbtn{background:none;border:0;border-radius:20px;padding:8px 12px;color:var(--md-primary);font:500 .875rem var(--md-font);letter-spacing:.04em;position:relative}
.linkbtn:hover{background:color-mix(in srgb,var(--md-primary) 10%,transparent)}
.linkbtn.on{color:var(--md-primary);font-weight:700}
.tabs{position:sticky;top:0;z-index:20;display:flex;overflow-x:auto;scrollbar-width:none;background:var(--md-surface-container);border-bottom:1px solid var(--md-outline-variant);padding:0 max(16px,calc((100% - 1000px) / 2 + 16px))}
.tabs button{background:none;border:0;padding:14px 16px 12px;color:var(--md-on-surface-variant);font:500 .875rem var(--md-font);letter-spacing:.04em;white-space:nowrap;position:relative}
.tabs button:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.tabs button.on{color:var(--md-primary)}
.tabs button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-primary)}

.foot{color:var(--md-on-surface-variant);font-size:.75rem;padding-top:28px;padding-bottom:48px}

/* filtros: texto simples com sublinhado */
.filters{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center;margin:14px 0;color:var(--md-on-surface-variant);font-size:.875rem}
.filters button{background:none;border:0;padding:6px 0;color:var(--md-on-surface-variant);border-bottom:2px solid transparent;font:500 .875rem var(--md-font)}
.filters button:hover{color:var(--md-on-surface)}
.filters button.on{color:var(--md-primary);border-bottom-color:var(--md-primary)}
.muted{color:var(--md-on-surface-variant)}
.note{color:var(--md-on-surface-variant);font-size:.8125rem;margin:10px 0}

.roundbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 6px;flex-wrap:wrap}
.roundbar .nav{display:flex;gap:8px}
.roundbar button{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border:0;border-radius:20px;padding:8px 16px;font:500 .875rem var(--md-font)}
.roundbar button:hover:not(:disabled){box-shadow:0 1px 3px rgba(0,0,0,.4)}
.roundbar button:disabled{opacity:.38;cursor:default}
.roundbar h2{margin:0}

.day{margin:20px 0 8px;color:var(--md-on-surface-variant);font:500 .8125rem var(--md-font);letter-spacing:.04em}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:var(--md-surface-container);border:0;border-radius:16px;padding:14px;margin-bottom:8px;cursor:pointer;width:100%;text-align:left;position:relative;transition:background .15s}
.match:hover{background:var(--md-surface-high)}
.match.live{outline:2px solid var(--live);outline-offset:-2px}
.team{display:flex;align-items:center;gap:10px;min-width:0}
.team.away{flex-direction:row-reverse;text-align:right}
.team img,.tlogo{width:30px;height:30px;object-fit:contain;flex:none}
.team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team.win span{font-weight:700}
.score{text-align:center;min-width:92px}
.score b{font:500 1.5rem var(--md-font);letter-spacing:.04em}
.score small{display:block;font-size:.75rem;color:var(--md-on-surface-variant)}
.score.live small{color:var(--live);font-weight:700}
.ev-line{grid-column:1/-1;font-size:.75rem;color:var(--md-on-surface-variant);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

table{width:100%;border-collapse:collapse}
.tbl{background:var(--md-surface-container);border-radius:16px;overflow:hidden}
.tbl-scroll{overflow-x:auto}
th,td{padding:10px 6px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
th{font:500 .75rem var(--md-font);color:var(--md-on-surface-variant);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--md-outline-variant)}
td.l,th.l{text-align:left}
tbody tr{border-top:1px solid var(--md-outline-variant);cursor:pointer}
tbody tr:first-child{border-top:0}
tbody tr:hover{background:var(--md-surface-high)}
td.pos{width:38px;border-left:4px solid transparent}
.z-lib td.pos{border-left-color:var(--z-lib)}.z-pre td.pos{border-left-color:var(--z-pre)}
.z-sul td.pos{border-left-color:var(--z-sul)}.z-reb td.pos{border-left-color:var(--z-reb)}
.tn{display:flex;align-items:center;gap:10px}
.tn img{width:24px;height:24px;object-fit:contain}
td.pts{font-weight:700}
.fav{color:var(--warn)}
.dots{display:inline-flex;gap:3px;vertical-align:middle}
.dots i{width:10px;height:10px;border-radius:3px;display:block}
.dots .V{background:var(--win)}.dots .E{background:var(--draw)}.dots .D{background:var(--loss)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--md-on-surface-variant);margin:12px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:var(--md-surface-container);border:0;border-radius:16px;padding:14px 16px;color:inherit}
button.card{transition:background .15s}
button.card:hover{background:var(--md-surface-high)}
.card .k{font:500 .75rem var(--md-font);color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:.06em}
.card .v{font:400 2rem/1.2 var(--md-font);margin-top:4px}
.card .s{font-size:.8125rem;color:var(--md-on-surface-variant)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;margin:12px 0}
.picker button{background:var(--md-surface-container);border:0;border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.6875rem;color:var(--md-on-surface-variant)}
.picker button:hover{background:var(--md-surface-high)}
.picker button.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.picker img{width:32px;height:32px;object-fit:contain}
.thead{display:flex;align-items:center;gap:16px;margin:18px 0}
.thead img{width:68px;height:68px;object-fit:contain}
.thead h2{margin:0;font:400 1.75rem var(--md-font)}
select{background:var(--md-surface-container);color:var(--md-on-surface);border:1px solid var(--md-outline);border-radius:8px;padding:12px;font:inherit;max-width:100%}
select:focus{outline:2px solid var(--md-primary);outline-offset:-1px}
.cmpsel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:14px 0}
.cmpsel span{color:var(--md-on-surface-variant)}

.row{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--md-outline-variant)}
.row:first-child{border-top:0}
.row .lab{text-align:center;font-size:.8125rem;color:var(--md-on-surface-variant)}
.row .n{font-weight:500;font-variant-numeric:tabular-nums}
.row .n.r{text-align:right}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.bars .bar{display:block;height:8px;background:var(--md-surface-highest);border-radius:4px;overflow:hidden}
.bars .bar .a{margin-left:auto;display:block;height:100%;background:var(--md-primary);border-radius:4px 0 0 4px}
.bars .bar .b{display:block;height:100%;background:var(--md-tertiary);border-radius:0 4px 4px 0}
.row .cell{display:flex;flex-direction:column;gap:4px}

.chartbox{background:var(--md-surface-container);border-radius:16px;padding:16px;margin:12px 0 18px}
.chartbox h3{margin-top:0}
.chartbox .cv{position:relative;height:320px}
.chartbox .cv.tall{height:440px}

.list{background:var(--md-surface-container);border-radius:16px;overflow:hidden}
.li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--md-outline-variant)}
.li:first-child{border-top:0}
.li .n{font:500 1.25rem var(--md-font);text-align:right}
.li small{color:var(--md-on-surface-variant)}
.li .who{display:flex;align-items:center;gap:12px;min-width:0}
.li .who img{width:28px;height:28px;object-fit:contain}

dialog{border:0;border-radius:28px;background:var(--md-surface-high);color:var(--md-on-surface);padding:0;width:min(560px,calc(100vw - 24px));max-height:88vh;box-shadow:0 8px 32px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,0,0,.55)}
#modalBody{padding:20px 24px 24px;overflow:auto;max-height:88vh}
.mclose{float:right}
.mhead{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;text-align:center;margin:10px 0 14px}
.mhead img{width:52px;height:52px;object-fit:contain}
.mhead b.big{font:400 2.5rem var(--md-font)}
.tl{margin:10px 0}
.tl div{display:grid;grid-template-columns:1fr 50px 1fr;gap:8px;padding:6px 0;font-size:.875rem;border-top:1px solid var(--md-outline-variant)}
.tl div:first-child{border-top:0}
.tl .m{text-align:center;color:var(--md-on-surface-variant)}
.tl .r{text-align:right}

/* snackbar */
.toasts{position:fixed;right:16px;bottom:16px;left:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:50;pointer-events:none}
.toast{pointer-events:auto;background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border-radius:12px;border-left:6px solid var(--md-primary);padding:14px 16px;max-width:440px;width:100%;box-shadow:0 6px 24px rgba(0,0,0,.45);animation:in .25s ease-out}
.toast.red{border-left-color:var(--live)}
.toast b{font:500 1rem var(--md-font)}
.toast .s{opacity:.8;font-size:.8125rem}
@keyframes in{from{transform:translateY(14px);opacity:0}to{opacity:1;transform:none}}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}
.empty{padding:32px 12px;text-align:center;color:var(--md-on-surface-variant)}
.err{padding:20px;background:var(--md-surface-container);border-radius:16px;margin:20px 0;color:var(--md-error)}
.err button{margin-top:10px;background:var(--md-primary);color:var(--md-on-primary);border:0;border-radius:20px;padding:10px 20px;font:500 .875rem var(--md-font)}

@media (max-width:620px){
  .hide-s{display:none}
  .match{padding:12px 10px}
  .score{min-width:72px}
  .team img{width:26px;height:26px}
  th,td{padding:10px 4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ev-line.tv{color:var(--md-primary)}

/* gols por jogador, cada um do lado do seu time */
.gl{grid-column:1/-1;display:grid;grid-template-columns:1fr 92px 1fr;gap:8px;font-size:.78rem;color:var(--md-on-surface-variant);margin-top:-2px}
.gl>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.gl>div:last-child{text-align:right}
@media (max-width:620px){.gl{grid-template-columns:1fr 72px 1fr}}

/* dashboard de análises */
.fbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.fbar label{display:flex;flex-direction:column;gap:4px;font:500 .75rem var(--md-font);color:var(--md-on-surface-variant);letter-spacing:.04em}
.fbar select{width:100%;font-weight:400;font-size:.9rem;padding:10px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.grid3 .chartbox{margin:0}
.heat{font-weight:500}
.heat small{color:var(--md-on-surface-variant);font-weight:400;font-size:.7rem}
.thbtn{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;cursor:pointer}
.thbtn:hover{text-decoration-color:currentColor}
.thbtn.on{color:var(--md-primary);text-decoration-color:var(--md-primary)}
input[type=search]{background:var(--md-surface-container);color:var(--md-on-surface);border:1px solid var(--md-outline);border-radius:8px;padding:10px 12px;font:inherit;min-width:220px;flex:1;max-width:340px}
input[type=search]:focus{outline:2px solid var(--md-primary);outline-offset:-1px}

/* competição global, sub-navegação e glossário */
.compglobal{display:flex;align-items:center;gap:8px;font:500 .8125rem var(--md-font);color:var(--md-on-surface-variant)}
.compglobal select{padding:8px 10px;font-size:.875rem;max-width:200px}
.subnav{margin:12px 0 0;padding-bottom:2px;border-bottom:1px solid var(--md-outline-variant)}
.gloss{margin-top:14px}
.gloss summary{cursor:pointer;color:var(--md-primary);font:500 .8125rem var(--md-font)}
.gloss p{margin:8px 0;max-width:70ch}
.atalhos{display:flex;gap:2px 18px;flex-wrap:wrap;align-items:center;font-size:.875rem;color:var(--md-on-surface-variant);margin:10px 0}
.atalhos button{background:none;border:0;padding:6px 0;color:var(--md-primary);font:500 .875rem var(--md-font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.leitura{background:var(--md-surface-container);border-radius:16px;padding:6px 18px;margin:12px 0}
.leitura ul{margin:8px 0;padding-left:18px}
.leitura li{margin:6px 0}
.leitura b{color:var(--md-on-surface)}
@media (max-width:620px){.compglobal{width:100%}.compglobal select{flex:1;max-width:none}}

/* linhas clicáveis (perfil do jogador) */
.li.clk{cursor:pointer;transition:background .15s}
.li.clk:hover{background:var(--md-surface-high)}
tr[data-pl]:hover{background:var(--md-surface-high)}