/* Painel Brasileirão Virtual — identidade do Olheiro: fundo quase preto, verde-limão, Anton + Inter, cor do clube. */
:root {
  color-scheme: dark;
  --bg: #07070c;
  --bg-2: #0d0d14;
  --ink: #f4f4f8;
  --muted: #9a9ab0;
  --faint: #81819b;
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .065);
  --panel-3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --accent: #c6f26a;
  --accent-ink: #0b0f02;
  --accent-soft: rgba(198, 242, 106, .14);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .14);
  --danger-ink: #ffd0d0;
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, .14);
  --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  --folha: #12121a;
  --pos-go: #ffcc4d; --pos-def: #7fb2ff; --pos-mei: #9be36d; --pos-ata: #ff8a7a;
  --club: #2a2a35;
  --club-2: #f4f4f8;
  --on-club: #f4f4f8;
  --club-tint: color-mix(in srgb, var(--club) 26%, transparent);
  --display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 14px;
  --r-sm: 10px;
  --abas: 64px;
  --sai: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--panel-3) transparent; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.disp { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- casca ---------- */
.app { min-height: 100dvh; }
.tela { padding: 0 0 calc(var(--abas) + var(--sai) + 24px); outline: none; }
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 30; height: calc(var(--abas) + var(--sai)); padding: 0 6px var(--sai);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.aba {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative;
  text-decoration: none; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.aba svg { width: 22px; height: 22px; }
.aba[aria-current="page"] { color: var(--ink); }
.aba[aria-current="page"] svg { color: var(--accent); }
.aba .bolinha { position: absolute; top: 9px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }


/* ---------- topo do clube ---------- */
.topo {
  background: var(--club); color: var(--on-club); position: relative;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 18px;
}
.topo-linha { display: flex; align-items: center; gap: 14px; }
.topo .escudo { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.topo h1 { margin: 0; font-size: clamp(30px, 8.5vw, 44px); }
.topo .sub { font-size: 13px; opacity: .78; margin-top: 4px; }
.topo .caixa { margin-left: auto; text-align: right; }
.topo .caixa b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.05; }
.topo .caixa span { font-size: 11px; opacity: .75; letter-spacing: .02em; }
.fase { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; color: #f4f4f8; font-size: 12.5px; text-decoration: none; }
.fase-topo { display: flex; align-items: center; gap: 8px; color: rgba(244, 244, 248, .72); letter-spacing: .01em; }
.fase .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.fase.janela .ponto { background: var(--accent); }
.fase .seta { width: 14px; height: 14px; opacity: .6; flex: none; }
.fase-itens { display: flex; flex-wrap: wrap; gap: 8px; }
.libera-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13.5px; }
.libera-item svg { width: 15px; height: 15px; }
.libera-item.fechado { background: rgba(255, 255, 255, .1); color: rgba(244, 244, 248, .75); font-weight: 600; padding-left: 14px; }
.demo { margin: 0; padding: 8px 18px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600; }

/* ---------- blocos ---------- */
.miolo { padding: 0 16px; display: grid; gap: 22px; max-width: 1180px; margin: 0 auto; }
.miolo > :first-child { margin-top: 20px; }
.bloco h2 { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; font-size: 22px; }
.bloco h2 small { font-family: var(--font); font-size: 13px; text-transform: none; color: var(--muted); letter-spacing: 0; }
.bloco h2 .acao { margin-left: auto; font-family: var(--font); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent); text-decoration: none; background: none; border: 0; padding: 0; }
.painel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.cabeca { padding: 22px 16px 4px; max-width: 1180px; margin: 0 auto; }
.cabeca h1 { margin: 0; font-size: clamp(32px, 9vw, 52px); }
.cabeca p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.casa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 820px; margin-inline: auto; width: 100%; } /* uma coluna só, em qualquer tamanho de tela */
@media (min-width: 960px) {
  .miolo { padding: 0 32px; }
  .cabeca { padding: 34px 32px 4px; }
  .topo { padding: 28px 32px 22px; }
  .topo-in { max-width: 1180px; margin: 0 auto; }
  .topo .escudo { width: 72px; height: 72px; }
}

/* ---------- tabela de classificação ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); text-align: right; padding: 10px 8px 8px; }
.tabela th:nth-child(2) { text-align: left; }
.tabela td { padding: 9px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tabela td.time { text-align: left; white-space: normal; width: 100%; }
.tabela .pos { font-family: var(--display); font-size: 17px; width: 34px; text-align: center; color: var(--muted); }
.tabela .pos.sobe { color: var(--accent); }
.tabela .pos.cai { color: var(--danger); }
.tabela .pts { font-family: var(--display); font-size: 18px; color: var(--ink); }
.tabela .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.timecel { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.timecel img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.timecel .nome { font-weight: 600; line-height: 1.2; }
.timecel .tec { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.tabela tr.eu td { background: var(--club-tint); }
.tabela tr.eu td:first-child { border-radius: 10px 0 0 10px; }
.tabela tr.eu td:last-child { border-radius: 0 10px 10px 0; }
.tabela tr.eu + tr td, .tabela tr.eu td { border-top-color: transparent; }
.tabela tr.corte td { border-top: 1px dashed var(--line-2); }
.tabela .forma { display: inline-flex; gap: 3px; }
.tabela .forma i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.tabela .forma i.V { background: var(--accent); }
.tabela .forma i.D { background: var(--danger); }
.so-largo { display: none; }
@media (min-width: 640px) { .so-largo { display: table-cell; } }
.legenda { display: flex; gap: 16px; padding: 10px 12px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------- card do jogo ---------- */
.jogo { padding: 18px 16px 16px; }
.jogo-topo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.jogo-topo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-topo .estado { flex: none; }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: var(--panel-2); color: var(--muted); }
.estado.aguardando { background: var(--warn-soft); color: var(--warn); }
.estado.contestado { background: var(--danger-soft); color: var(--danger); }
.estado.confirmado, .estado.wo { background: var(--accent-soft); color: var(--accent); }
.estado.aberto { background: var(--panel-2); color: var(--ink); }
.jogo-topo .estado { margin-left: auto; }
.confronto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 18px 0 16px; }
.lado { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.lado img { width: 64px; height: 64px; object-fit: contain; }
.lado .disp { font-size: 22px; }
.lado small { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar { font-family: var(--display); font-size: 44px; line-height: 1; display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.placar .x { font-size: 18px; color: var(--faint); }
.prazo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.prazo svg { width: 16px; height: 16px; flex: none; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes .bt { flex: 1 1 auto; }

/* rodada */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li + li { border-top: 1px solid var(--line); }
.partida { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; }
.partida .m, .partida .v { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.partida .m { justify-content: flex-end; text-align: right; }
.partida img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.partida .res { font-family: var(--display); font-size: 18px; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.partida .res.vazio { color: var(--faint); font-family: var(--font); font-size: 12px; font-weight: 600; }
.partida .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partida.minha { background: var(--club-tint); }
.partida .tag { grid-column: 1 / -1; justify-self: center; margin-top: -4px; }

/* ---------- botões e campos ---------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background .18s, transform .18s var(--ease);
}
.bt:hover { background: var(--panel-3); }
.bt:active { transform: scale(.98); }
.bt svg { width: 18px; height: 18px; }
.bt.pri { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.bt.pri:hover { background: var(--accent-hover); }
.bt.perigo { color: var(--danger); }
.bt.mini { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.bt[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.campo input, .campo select, .campo textarea, .entrada input, .busca input, .busca select {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink); font-size: 16px; font-weight: 500;
}
.campo textarea { padding: 12px 14px; min-height: 90px; resize: vertical; }
.campo input:focus, .campo select:focus, .busca input:focus, .busca select:focus, .campo textarea:focus { outline: none; border-color: var(--accent); }
.campo .ajuda { font-weight: 400; font-size: 12.5px; color: var(--faint); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239a9ab0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px !important; }
.chave { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14.5px; cursor: pointer; }
.chave input { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: var(--panel-3); position: relative; flex: none; margin: 0; cursor: pointer; transition: background .2s; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--ease); }
.chave input:checked { background: var(--accent); }
.chave input:checked::after { transform: translateX(18px); background: var(--accent-ink); }

.segmento { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.segmento button, .segmento a { border: 0; background: none; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.segmento [aria-pressed="true"], .segmento [aria-current="page"] { background: var(--ink); color: var(--bg); }

.busca { display: grid; grid-template-columns: 1fr; gap: 10px; }
.busca .linha { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.busca .linha select { font-size: 14px; padding-left: 12px; padding-right: 30px !important; background-position: right 8px center; }
@media (min-width: 760px) { .busca { grid-template-columns: 2fr 1fr 1fr 1fr; } .busca .linha { display: contents; } }

/* ---------- jogadores ---------- */
.jogador { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; width: 100%; background: none; border: 0; text-align: left; color: inherit; }
.jogador:hover { background: var(--panel); }
.rosto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); }
.rosto.vazio { display: grid; place-items: center; font-family: var(--display); font-size: 16px; color: var(--muted); }
.jogador .nome { font-weight: 600; line-height: 1.25; }
.jogador .info { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.jogador .info img { width: 16px; height: 16px; object-fit: contain; }
.jogador .lado-d { text-align: right; }
.jogador .lado-d b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1; }
.jogador .lado-d span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.posicao { display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .03em; background: var(--panel-2); }
.posicao.GO { color: var(--pos-go); } .posicao.ZC, .posicao.LE, .posicao.LD { color: var(--pos-def); }
.posicao.VOL, .posicao.MLG, .posicao.MLE, .posicao.MLD, .posicao.MAT { color: var(--pos-mei); }
.posicao.PTE, .posicao.PTD, .posicao.SA, .posicao.CA { color: var(--pos-ata); }
.ovr { font-family: var(--display); font-size: 20px; }
.selo { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--muted); }
.selo.multa { background: var(--warn-soft); color: var(--warn); }
.selo.aviso { background: var(--danger-soft); color: var(--danger); }

.selo.venda { background: var(--accent-soft); color: var(--accent); }
.linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px 70px; }

/* leilão */
.lote.lidero { background: var(--club-tint); }
.lote .lado-d b { font-size: 19px; }
.lote .lado-d span { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.frente { color: var(--accent); font-weight: 700; }
.jogador .lado-d .frente { display: inline; font-family: var(--font); font-size: 12px; line-height: 1.3; }
.relogio { font-family: var(--display); font-size: 18px; font-variant-numeric: tabular-nums; min-width: 62px; padding: 3px 10px; border-radius: 8px; background: var(--panel-2); text-align: center; }
.relogio.quase { background: var(--danger-soft); color: var(--danger); }
.lote .linha-acoes { padding-left: 14px; justify-content: flex-end; }
.linha-acoes .relogio { margin-right: auto; }
.saldo-linha { margin: 0; font-size: 14px; color: var(--muted); }
.saldo-linha b { color: var(--ink); font-variant-numeric: tabular-nums; }
.marcas.escolha { max-height: 300px; overflow: auto; padding: 2px; }
.marcas.escolha .posicao { min-width: 34px; }

/* linhas de caixa (extrato e saldos) */
.linhas { display: grid; }
.linhas > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.linhas > div:first-child { border-top: 0; }
.linhas b { font-family: var(--display); font-weight: 400; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linhas .total b { color: var(--accent); font-size: 26px; }
.mov { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 16px; }
.mov .desc { font-weight: 500; line-height: 1.35; }
.mov .quando { font-size: 12px; color: var(--faint); }
.mov .valor { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.mov .valor.mais { color: var(--accent); }
.mov .valor.menos { color: var(--danger); }
.mov .saldo { font-size: 12px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }

/* fases da temporada */
.linhatempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linhatempo li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: start; }
.linhatempo li:first-child { border-top: 0; }
.linhatempo .marco { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--faint); }
.linhatempo .fechada .marco { background: var(--faint); border-color: var(--faint); }
.linhatempo .aberta .marco { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.linhatempo .aberta { background: var(--accent-soft); }
.linhatempo .nome { font-weight: 700; }
.linhatempo .quando { font-size: 12.5px; color: var(--muted); }
.linhatempo .libera { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.linhatempo .acoes .bt { flex: 0 0 auto; }
.linhatempo .acoes .perigo { margin-left: auto; }

/* propostas */
.proposta { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 16px; align-items: center; }
.proposta .acoes { grid-column: 1 / -1; }

/* paginação */
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; font-size: 13px; color: var(--muted); }

/* vazio e carregando */
.vazio-box { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.vazio-box b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.esqueleto { height: 140px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }

/* ---------- folha (diálogo) ---------- */
.folha {
  border: 1px solid var(--line-2); padding: 0; color: var(--ink); background: var(--folha); width: min(520px, 100vw);
  max-height: 92dvh; border-radius: 20px 20px 0 0; margin: auto auto 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
}
.folha::backdrop { background: rgba(3, 3, 6, .66); backdrop-filter: blur(3px); }
.folha[open] { animation: subir .38s var(--ease); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.folha-in { padding: 18px 18px calc(18px + var(--sai)); display: grid; gap: 16px; }
.folha-cab { display: flex; align-items: center; gap: 12px; }
.folha-cab h2 { margin: 0; font-size: 26px; }
.folha-cab .fechar { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--panel-2); display: grid; place-items: center; }
.folha-cab .fechar svg { width: 18px; height: 18px; }
.folha .alca { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto -6px; }
@media (min-width: 640px) { .folha { border-radius: 20px; margin: auto; } .folha .alca { display: none; } }
.placar-campos { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.placar-campos input { text-align: center; font-family: var(--display); font-size: 40px; height: 72px; }
.placar-campos .x { padding-bottom: 22px; color: var(--faint); font-family: var(--display); font-size: 20px; }
.ficha { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.ficha .rosto { width: 72px; height: 72px; }
.atributos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; font-size: 13px; }
.atributos div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 4px 0; }
.mensagens { display: grid; gap: 8px; max-height: 40dvh; overflow: auto; }
.msg { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 14px; }
.msg small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.msg.minha { background: var(--accent-soft); }

/* aviso (toast) */
.aviso { position: fixed; left: 50%; bottom: calc(var(--abas) + var(--sai) + 14px); z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  width: max-content; max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); transition: opacity .25s, transform .35s var(--ease); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.aviso.erro { background: var(--danger); color: #1a0505; }
@media (min-width: 960px) { .aviso { bottom: 28px; } }

/* ---------- entrada (login) ---------- */
.entrada { position: relative; overflow: hidden; min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; background: var(--bg); }
.entrada-cena { position: absolute; inset: 0; pointer-events: none; }
.entrada-cena .campo-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; color: var(--accent); opacity: .16; }
/* Fundo animado do login: as linhas do campo se desenham, a câmera balança devagar, uma bola cruza o gramado de vez em quando e dois holofotes varrem o campo. */
.entrada-cena .campo-svg { transform-origin: 50% 100%; animation: campo-camera 18s ease-in-out infinite alternate; }
.entrada-cena .campo-svg path, .entrada-cena .campo-svg ellipse { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: campo-desenha 2.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.entrada-cena .campo-svg ellipse { animation-delay: .5s; }
.entrada-cena .campo-svg path:nth-child(n+4) { animation-delay: .3s; }
.entrada-cena .campo-svg path:nth-child(n+7) { animation-delay: .7s; }
.bola-svg { position: absolute; bottom: 24%; left: -6%; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); animation: bola-cruza 14s linear 3s infinite; }
.holofote { position: absolute; bottom: -10%; width: 34%; height: 90%; pointer-events: none; opacity: .5; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 9%, transparent), transparent 75%); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); transform-origin: 50% 100%; }
.holofote.h1 { left: 4%; animation: holofote 11s ease-in-out infinite alternate; }
.holofote.h2 { right: 4%; animation: holofote 13s ease-in-out -6s infinite alternate-reverse; }
@keyframes campo-camera { to { transform: translateX(-2.5%) scale(1.06); } }
@keyframes campo-desenha { to { stroke-dashoffset: 0; } }
@keyframes bola-cruza { 0% { left: -6%; opacity: 0; rotate: 0deg; } 4% { opacity: .9; } 46% { opacity: .9; } 50% { left: 106%; opacity: 0; rotate: 1440deg; } 100% { left: 106%; opacity: 0; } }
@keyframes holofote { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .entrada-cena .campo-svg, .entrada-cena .campo-svg path, .entrada-cena .campo-svg ellipse, .bola-svg, .holofote { animation: none; } .entrada-cena .campo-svg path, .entrada-cena .campo-svg ellipse { stroke-dashoffset: 0; } .bola-svg { display: none; } }
.entrada-luz { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), linear-gradient(to bottom, var(--bg) 0, transparent 40%); }
.entrada-grade { position: relative; width: min(960px, 100%); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.entrada-lado { display: none; }
.entrada-card { width: min(400px, 100%); margin: 0 auto; display: grid; gap: 16px; padding: 28px 26px 22px; border-radius: 22px; background: color-mix(in srgb, var(--bg-2, #0d0d14) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.entrada-card { position: relative; overflow: hidden; }
.entrada-card::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.entrada-card img { width: 130px; height: auto; margin: 2px auto 0; }
.entrada-card h1 { margin: 0 0 4px; text-align: center; font-size: 30px; }
.entrada-card h1 em, .entrada-lado em { font-style: normal; color: var(--accent); }
@media (min-width: 860px) {
  .entrada-grade { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .entrada-lado { display: grid; gap: 14px; align-content: center; }
  .entrada-tag { display: inline-flex; width: max-content; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .entrada-lado h2 { margin: 0; font-size: clamp(60px, 7.5vw, 96px); line-height: 1; }
  .entrada-lado h2 em { display: inline-block; margin-top: 8px; padding: 0 .14em; line-height: 1.02; background: var(--accent); color: var(--accent-ink, #07070c); }
  .entrada-lado p { margin-top: 10px; }
  .entrada-lado p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 16px; line-height: 1.5; }
  .entrada-card { margin: 0; justify-self: end; }
}
.entrada-campo { position: relative; display: block; }
.entrada-campo > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.entrada-campo input { padding-left: 42px !important; }
.entrada-campo:focus-within > svg { color: var(--accent); }
.entrada .olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 10px; cursor: pointer; }
.entrada .olho:hover, .entrada .olho[aria-pressed="true"] { color: var(--accent); }
.entrada .entrada-campo:has(.olho) input { padding-right: 46px; }
.entrada .erro { color: var(--danger); font-size: 13.5px; min-height: 20px; text-align: center; margin: -4px 0; }
.entrada .bt.pri { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font-size: 15.5px; }
.entrada .bt.pri svg { transition: transform .15s; }
.entrada .bt.pri:hover svg { transform: translateX(3px); }
.entrada .bt.pri[data-carregando] { opacity: .7; cursor: progress; }
.entrada-volta { text-align: center; font-size: 13.5px; color: var(--muted); text-decoration: none; padding: 4px; }
.entrada-volta:hover { color: var(--accent); }
.balanca { animation: balanca .35s; }
@keyframes balanca { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .balanca { animation: none; } }

/* ---------- admin ---------- */
.regras { display: grid; gap: 0; }
.regras .regra { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); }
.regras .regra:first-child { border-top: 0; }
.regras .regra .rot { font-weight: 600; font-size: 14.5px; }
.regras .regra .ajuda { font-size: 12.5px; color: var(--faint); }
.regras .regra input:not([type=checkbox]), .regras .regra select { min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); font-size: 15px; width: 100%; }
.regras .regra.bool { grid-template-columns: 1fr auto; align-items: center; }
@media (min-width: 760px) { .regras .regra:not(.bool) { grid-template-columns: 1fr 220px; align-items: center; } .regras .regra .ajuda { grid-column: 1; } }
.barra-salvar { position: sticky; bottom: calc(var(--abas) + var(--sai) + 10px); z-index: 20; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: #17171f; border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
@media (min-width: 960px) { .barra-salvar { bottom: 18px; } }
.barra-salvar span { font-size: 13.5px; color: var(--muted); }
.barra-salvar .bt { margin-left: auto; }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.marca { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 13.5px; cursor: pointer; }
.marca input { accent-color: var(--accent); width: 16px; height: 16px; }
.registro { font-size: 13.5px; }
.registro li { padding: 10px 16px; display: grid; gap: 2px; }
.registro .quando { font-size: 12px; color: var(--faint); }
.grade-2 { display: grid; gap: 12px; }
@media (min-width: 760px) { .grade-2 { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* empréstimos */
.emp { padding: 16px; display: grid; gap: 12px; align-content: start; }
.emp-cab { display: flex; align-items: center; gap: 10px; }
.emp-cab h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.emp-cab .estado, .emp-cab .selo { margin-left: auto; flex: none; }
.emp .linhas { border: 1px solid var(--line); border-radius: 12px; }
.emp .linhas > div { padding: 10px 12px; font-size: 13.5px; }
.emp .linhas b { font-size: 18px; }
.metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.metas li { display: flex; align-items: center; gap: 8px; }
.metas li svg { width: 16px; height: 16px; flex: none; }
.metas li b { margin-left: auto; font-family: var(--display); font-weight: 400; font-size: 16px; }
.metas li.ok svg, .metas li.ok b { color: var(--accent); }
.metas li.falta svg, .metas li.falta b { color: var(--warn); }
.emp-alerta { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger-ink); font-size: 13px; }
.emp-alerta svg { width: 16px; height: 16px; flex: none; color: var(--danger); margin-top: 2px; }
.emp .acoes:empty { display: none; }
.metas-campos { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.metas-campos legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.meta-linha { display: grid; grid-template-columns: 1fr 88px; gap: 8px; }
.meta-linha select, .meta-linha input { min-height: 42px !important; font-size: 14px !important; }
.red { color: var(--danger); }

/* premiação por posição e troféus */
.premios { display: grid; gap: 8px; margin-top: 6px; }
.premio-linha { display: grid; grid-template-columns: 64px 1fr 72px; gap: 8px; }
.premio-linha .campo:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .premio-linha { grid-template-columns: 70px 1fr 80px 1.4fr; } .premio-linha .campo:last-child { grid-column: auto; } }
.premio-linha input, .premio-linha select { min-height: 40px !important; font-size: 14px !important; }
.marca svg { width: 15px; height: 15px; color: var(--accent); }
.regras .regra.cheia { grid-template-columns: 1fr !important; }
.seta-mov svg { width: 18px; height: 18px; }

/* súmula */
.sumula { display: grid; gap: 4px; }
.sumula-cab, .sumula-linha { display: grid; grid-template-columns: 1fr 1fr 1.7fr 1fr; gap: 6px; align-items: center; }
.sumula-cab { display: none !important; }
.sumula-nome { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .sumula-cab, .sumula-linha { grid-template-columns: 1fr 54px 54px 110px 60px; }
  .sumula-cab { display: grid !important; }
  .sumula-nome { grid-column: auto; }
}
.sumula-cab { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; padding: 0 2px; }
.sumula-cab span:not(:first-child) { text-align: center; }
.sumula-linha { padding: 4px 0; border-top: 1px solid var(--line); }
.sumula-nome { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sumula-nome .posicao { min-width: 32px; font-size: 10px; }
.sumula-linha input, .sumula-linha select { min-height: 38px; width: 100%; padding: 0 6px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 14px; text-align: center; }
.sumula-linha select { padding-right: 18px !important; background-position: right 4px center; font-size: 12.5px; text-align: left; }
.sumula-linha input:focus, .sumula-linha select:focus { outline: none; border-color: var(--accent); }
.sumula .campo { margin-top: 10px; }
.segmento.rolavel { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmento.rolavel button { white-space: nowrap; }
.acao-link { align-self: center; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }

/* copas */
.confronto-card { padding: 12px 14px; display: grid; gap: 6px; }
.confronto-card.meu { background: var(--club-tint); }
.cc-linha { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-weight: 600; }
.cc-linha b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.cc-linha.venceu .nome, .cc-linha.venceu b { color: var(--accent); }
.cc-linha.caiu { opacity: .55; }
.cc-pe { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; align-items: center; }
.cc-pe .bt { margin-left: auto; }
.premio-linha { grid-template-columns: 1fr 64px; }
.premio-linha .regra-premio { grid-column: 1 / -1; }
@media (min-width: 760px) { .premio-linha { grid-template-columns: 1.2fr 64px 1fr 72px 1.4fr; } .premio-linha .regra-premio { grid-column: auto; } }

/* Troca e empréstimo de jogadores */
.troca-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.troca-lado { display: grid; gap: 6px; align-content: start; min-width: 0; }
.troca-lado > h4 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mini-jog { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.mini-jog .rosto { width: 28px; height: 28px; }
.mini-jog .rosto.vazio { font-size: 12px; }
.mini-jog .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mini-jog b { font-variant-numeric: tabular-nums; }
.dinheiro-acordo { margin: 0; font-size: 13.5px; color: var(--muted); }
.dinheiro-acordo b { color: var(--ink); }
.escolha-jog { max-height: 260px; overflow-y: auto; padding: 4px 12px; }
.escolha-jog label { display: grid; grid-template-columns: 20px 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.escolha-jog label + label { border-top: 1px solid var(--line); }
.escolha-jog input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.escolha-jog .rosto { width: 28px; height: 28px; }
.escolha-jog .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .troca-lados { grid-template-columns: 1fr; } }

/* Votações */
.votacao { padding: 16px; display: grid; gap: 12px; align-content: start; }
.candidatos > li { padding: 12px 0; }
.candidato { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.candidato .cand-acao { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.candidato .cand-acao:empty { display: none; }
.candidato.meu .cand-nome b { color: var(--accent); }
.cand-info { display: grid; gap: 3px; min-width: 0; }
.cand-nome { font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cand-sub { font-size: 12.5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cand-desc { font-size: 13px; color: var(--ink); }
.selo svg { width: 11px; height: 11px; vertical-align: -1px; }
.video { position: relative; display: grid; place-items: center; width: 112px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .host { font-size: 11px; padding: 0 6px; text-align: center; }
.video .play { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(7, 7, 12, .78); color: var(--accent); }
.video .play svg { width: 12px; height: 12px; fill: currentColor; }
.video.vazio svg { width: 22px; height: 22px; }
.rosto.grande { width: 56px; height: 56px; }
.barra { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-top: 4px; }
.barra span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transition: transform .5s var(--ease); }
.candidato.venceu .video, .candidato.venceu .rosto { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .video { width: 96px; } }

/* Medalhas do técnico */
.medalhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.medalha { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.med-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.med-icone svg { width: 20px; height: 20px; }
.med-txt { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; }
.med-txt b { font-size: 14.5px; }
.med-vezes { font-size: 12px; color: var(--accent); }
.medalhas.apagadas .medalha { background: none; }
.medalhas.apagadas .med-icone { background: var(--panel-2); color: var(--faint); }
.faltam { margin-top: 12px; }
.faltam summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); padding: 6px 0; }
.faltam .medalhas { margin-top: 10px; }

/* Chamada no início (propostas, votações) */
.chamada { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; font-size: 14.5px; }
.chamada > span { flex: 1; }
.chamada svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.chamada svg:last-child { color: var(--faint); width: 18px; height: 18px; }
.emp-cab .rosto { width: 36px; height: 36px; flex: none; }

/* Lista de desejos */
.desejo .jogador { border-bottom: 0; }
.desejo-pe { display: grid; gap: 8px; padding: 0 16px 14px 72px; }
.desejo-pe .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.situacao { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.situacao svg { width: 15px; height: 15px; flex: none; }
.desejo.agora .situacao { color: var(--accent); font-weight: 600; }
.bt.na-lista { border-color: var(--accent); color: var(--accent); }
.bt.na-lista svg { fill: currentColor; }
@media (max-width: 420px) { .desejo-pe { padding-left: 16px; } }

/* Calculadora salarial */
.calc-linha { display: grid; gap: 10px; padding: 14px 16px; }
.calc-linha.mudou { background: var(--accent-soft); }
.calc-jog { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.calc-jog .nome { display: block; font-weight: 600; }
.calc-jog .info { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.calc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-campos .campo { font-size: 12.5px; }
.calc-info { margin: 0; font-size: 12.5px; }
.calc-info .menos { color: var(--warn); }
.calc-info .mais { color: var(--accent); }
.calc-info .red { color: var(--danger); }
.calc-salvar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 2; display: grid; }
.calc-salvar .bt { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (min-width: 900px) { .calc-salvar { bottom: 16px; justify-items: start; } }

/* Seleção do campeonato */
.sel-campo { display: grid; gap: 14px; padding: 18px 10px; }
.sel-linha { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sel-jog { display: grid; justify-items: center; gap: 3px; width: 72px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.sel-jog .rosto { width: 46px; height: 46px; }
.sel-nome { font-size: 11.5px; font-weight: 600; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-media { font-family: var(--display); font-size: 15px; color: var(--accent); line-height: 1; }
.sel-time { font-size: 10.5px; color: var(--faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-jog.vazio { cursor: default; }
.sel-hall { margin-bottom: 10px; }
.sel-hall summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 8px 0; }

/* Mini torneio */
.mini-card { text-decoration: none; color: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.mini-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.mini-jogo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 10px; padding: 12px 14px; }
.mini-jogo .mini-perna { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mini-lado { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.mini-lado b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-lado.b { text-align: right; justify-items: end; }
.mini-meio { display: grid; justify-items: center; }
.mini-placar { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.mini-pen { font-size: 11px; }
.mini-jogo > .bt { grid-column: 1 / -1; justify-self: center; }
.mini-campeao { display: flex; align-items: center; gap: 14px; padding: 16px; border-color: var(--accent); }
.mini-campeao > svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.mini-campeao div { display: grid; gap: 2px; }
.mini-campeao b { font-size: 18px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; justify-self: start; color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; }
.voltar svg { width: 16px; height: 16px; }

/* Cadastro pelo PESDB */
.pesdb-item { display: grid; gap: 10px; padding: 14px 16px; }
.pesdb-campos { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 520px) { .pesdb-campos { grid-template-columns: 1fr 1fr; } .pesdb-campos .campo:first-child { grid-column: 1 / -1; } }
.mov.na-vez { background: var(--accent-soft); }

/* PES 21 e Host */
.passo-a-passo { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.chip.horario { border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; font-family: inherit; }
.chip.horario:hover, .chip.horario:focus-visible { border-color: var(--accent); color: var(--accent); }
.painel.destaque { border-color: var(--accent); }

/* ---------- Temas: todos derivados da identidade do Olheiro (Anton + Inter, cor do clube, destaque em verde/âmbar/azul) ---------- */
/* Brasa: tarde de jogo, fundo quente e destaque âmbar. */
:root[data-tema="brasa"] {
  --bg: #0d0705; --bg-2: #170e09; --ink: #fbf3ee; --muted: #b69d8f; --faint: #9f8271;
  --panel: rgba(255, 190, 150, .04); --panel-2: rgba(255, 190, 150, .075); --panel-3: rgba(255, 190, 150, .115);
  --line: rgba(255, 190, 150, .09); --line-2: rgba(255, 190, 150, .17);
  --accent: #ffa13d; --accent-ink: #1a0b00; --accent-soft: rgba(255, 161, 61, .15);
  --warn: #ffd166; --warn-soft: rgba(255, 209, 102, .14);
  --folha: #1b100a;
}
/* Maré: noite fria, fundo azul-marinho e destaque ciano. */
:root[data-tema="mare"] {
  --bg: #050b14; --bg-2: #0a1423; --ink: #eef4fb; --muted: #8fa7c1; --faint: #7b92aa;
  --panel: rgba(160, 200, 255, .04); --panel-2: rgba(160, 200, 255, .075); --panel-3: rgba(160, 200, 255, .115);
  --line: rgba(160, 200, 255, .09); --line-2: rgba(160, 200, 255, .17);
  --accent: #5cd6ff; --accent-ink: #021420; --accent-soft: rgba(92, 214, 255, .14);
  --folha: #0c182a;
}
/* Ouro, Violeta e Rubro: só no premium. */
:root[data-tema="ouro"] {
  --bg: #0a0805; --bg-2: #14100a; --ink: #faf3e0; --muted: #b3a583; --faint: #9a8d6d;
  --panel: rgba(255, 220, 140, .04); --panel-2: rgba(255, 220, 140, .075); --panel-3: rgba(255, 220, 140, .115);
  --line: rgba(255, 220, 140, .1); --line-2: rgba(255, 220, 140, .19);
  --accent: #e3b94f; --accent-ink: #1a1203; --accent-soft: rgba(227, 185, 79, .15); --folha: #16110a;
}
:root[data-tema="violeta"] {
  --bg: #0b0712; --bg-2: #130c1e; --ink: #f3eeff; --muted: #a595c4; --faint: #8e7fae;
  --panel: rgba(190, 160, 255, .04); --panel-2: rgba(190, 160, 255, .075); --panel-3: rgba(190, 160, 255, .115);
  --line: rgba(190, 160, 255, .1); --line-2: rgba(190, 160, 255, .18);
  --accent: #b58cff; --accent-ink: #140726; --accent-soft: rgba(181, 140, 255, .15); --folha: #150e22;
}
:root[data-tema="rubro"] {
  --bg: #0e0608; --bg-2: #19090d; --ink: #fff0f1; --muted: #c09aa0; --faint: #a58187;
  --panel: rgba(255, 160, 170, .04); --panel-2: rgba(255, 160, 170, .075); --panel-3: rgba(255, 160, 170, .115);
  --line: rgba(255, 160, 170, .1); --line-2: rgba(255, 160, 170, .18);
  --accent: #ff5a6a; --accent-ink: #2a0309; --accent-soft: rgba(255, 90, 106, .15); --folha: #1c0c10;
}
.tema-op .selo-premium { margin-left: auto; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 700; }
.tema-op.trancado { opacity: .72; }
/* Giz: o único claro, papel de súmula com tinta escura e verde-folha. */
:root[data-tema="giz"] {
  color-scheme: light;
  --bg: #f3f4ee; --bg-2: #e9ebe1; --ink: #12140d; --muted: #565c4b; --faint: #6b7160;
  --panel: rgba(255, 255, 255, .7); --panel-2: rgba(20, 24, 10, .06); --panel-3: rgba(20, 24, 10, .1);
  --line: rgba(20, 24, 10, .11); --line-2: rgba(20, 24, 10, .2);
  --accent: #3d7300; --accent-ink: #ffffff; --accent-soft: rgba(61, 115, 0, .12);
  --accent-hover: #2f5c00;
  --danger: #c62828; --danger-soft: rgba(198, 40, 40, .1); --danger-ink: #8e1b1b;
  --warn: #8f5600; --warn-soft: rgba(143, 86, 0, .12);
  --folha: #fbfbf7;
  --pos-go: #8a5d00; --pos-def: #1f5fc2; --pos-mei: #2c6e0e; --pos-ata: #b03a2a;
}
/* Areia: claro quente, tom de areia com terracota. */
:root[data-tema="areia"] {
  color-scheme: light;
  --bg: #f6f0e4; --bg-2: #ece3d1; --ink: #2a2118; --muted: #6f6150; --faint: #85775f;
  --panel: rgba(255, 255, 255, .62); --panel-2: rgba(60, 40, 10, .06); --panel-3: rgba(60, 40, 10, .1);
  --line: rgba(60, 40, 10, .12); --line-2: rgba(60, 40, 10, .22);
  --accent: #c2410c; --accent-ink: #ffffff; --accent-soft: rgba(194, 65, 12, .12);
  --accent-hover: #9a3412;
  --danger: #b42318; --danger-soft: rgba(180, 35, 24, .1); --danger-ink: #8a1a11;
  --warn: #8f5600; --warn-soft: rgba(143, 86, 0, .12);
  --folha: #fffaf0;
  --pos-go: #8a5d00; --pos-def: #1f5fc2; --pos-mei: #2c6e0e; --pos-ata: #b03a2a;
}
/* Gelo: claro frio, branco azulado com azul. */
:root[data-tema="gelo"] {
  color-scheme: light;
  --bg: #eef3f9; --bg-2: #e1e9f3; --ink: #0e1a2b; --muted: #4d5f78; --faint: #647892;
  --panel: rgba(255, 255, 255, .75); --panel-2: rgba(14, 26, 43, .06); --panel-3: rgba(14, 26, 43, .1);
  --line: rgba(14, 26, 43, .12); --line-2: rgba(14, 26, 43, .22);
  --accent: #1d4ed8; --accent-ink: #ffffff; --accent-soft: rgba(29, 78, 216, .12);
  --accent-hover: #1e40af;
  --danger: #c62828; --danger-soft: rgba(198, 40, 40, .1); --danger-ink: #8e1b1b;
  --warn: #8f5600; --warn-soft: rgba(143, 86, 0, .12);
  --folha: #ffffff;
  --pos-go: #8a5d00; --pos-def: #1f5fc2; --pos-mei: #2c6e0e; --pos-ata: #b03a2a;
}
:root[data-tema="giz"] .painel, :root[data-tema="giz"] .emp, :root[data-tema="areia"] .painel, :root[data-tema="areia"] .emp, :root[data-tema="gelo"] .painel, :root[data-tema="gelo"] .emp { box-shadow: 0 1px 0 rgba(20, 24, 10, .04); }
:root[data-tema="giz"] .aviso, :root[data-tema="areia"] .aviso, :root[data-tema="gelo"] .aviso { background: #12140d; color: #f3f4ee; }
:root[data-tema="giz"] .aviso.erro, :root[data-tema="areia"] .aviso.erro, :root[data-tema="gelo"] .aviso.erro { background: var(--danger); color: #fff; }

/* Seletor de tema */
.temas { display: grid; gap: 10px; }
.tema-op { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.tema-op[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tema-op > svg { width: 20px; height: 20px; color: var(--accent); }
.tema-previa { display: grid; gap: 5px; align-content: center; justify-items: start; height: 58px; padding: 9px; border-radius: 10px; border: 1px solid var(--line-2); }
.tema-previa span { display: block; height: 7px; width: 55%; border-radius: 99px; }
.tema-previa span:first-child { width: 38%; height: 9px; }
.tema-txt { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.tema-txt b { font-size: 15px; }

/* Carrossel dos jogos a fazer */
.carrossel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > .slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carrossel .jogo { height: 100%; }
.pontos { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.pontos button { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.pontos button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--panel-3); transition: background .2s, transform .25s var(--ease); }
.pontos button[aria-current="true"]::after { background: var(--accent); transform: scale(1.35); }
.pontos .contagem { align-self: center; min-width: 64px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pontos .seta-jogo::after { content: none; }
.pontos .seta-jogo svg { width: 18px; height: 18px; color: var(--ink); }

/* Voltar */
.voltar-topo { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 25; display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0 12px; padding: 6px 14px 6px 8px; border-radius: 99px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.voltar-topo svg { width: 18px; height: 18px; color: var(--accent); }
.voltar-topo:hover { border-color: var(--accent); }

/* Janelas: aberto / fechado */
.janela { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.janela.aberta { background: var(--accent-soft); color: var(--accent); }
.janela.fechada { background: var(--danger-soft); color: var(--danger-ink); }
.item .janela { margin-left: auto; }
.item .rotulo, .janelas .nome { display: grid; gap: 1px; min-width: 0; }
.abre { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ponto-fechado { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--danger); vertical-align: middle; }

/* Janelas da temporada: um botão, alinhado à esquerda, que abre a lista */
.janelas-bloco { display: grid; gap: 10px; justify-items: stretch; }
.janelas-bloco > summary { list-style: none; justify-self: start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 0 22px; }
.janelas-bloco > summary::-webkit-details-marker { display: none; }
.janelas-bloco > summary svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.janelas-bloco[open] > summary svg { transform: rotate(180deg); }
.janelas-bloco > .lista { margin-top: 10px; }

/* Aberto = verde, fechado = vermelho (abas do Mercado e título das telas de janela) */
.janela.grande { font-size: 12px; padding: 3px 10px; vertical-align: middle; font-family: var(--font); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.segmento a.jan-fechada { color: var(--danger); }
.segmento a.jan-aberta { color: var(--accent); }
.segmento a[aria-current="page"].jan-fechada, .segmento a[aria-current="page"].jan-aberta { color: var(--bg); }
.lote-metricas .relogio { background: none; padding: 0; border-radius: 0; min-width: 0; }
.lote-metricas .relogio.quase { color: var(--danger); }
.ponto-janela { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; vertical-align: middle; }
.ponto-janela.aberta { background: var(--accent); }
.ponto-janela.fechada { background: var(--danger); }

/* Leilão no estilo da Arena */
.leilao-topo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 14px 6px; text-align: center; }
.leilao-topo > div { display: grid; gap: 2px; padding: 0 8px; border-left: 1px solid var(--line); }
.leilao-topo > div:first-child { border-left: 0; }
.leilao-topo span { font-size: 11.5px; color: var(--muted); }
.leilao-topo b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.leilao-topo .saldo b { color: var(--accent); }
@media (max-width: 520px) { .leilao-topo { grid-template-columns: 1fr 1fr; row-gap: 12px; } .leilao-topo > div:nth-child(3) { border-left: 0; } }
.leilao-barra { display: flex; flex-wrap: wrap; gap: 8px; }
.pesquisa { padding: 0; }
.pesquisa > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-size: 20px; }
.pesquisa > summary::-webkit-details-marker { display: none; }
.pesquisa > summary svg { width: 20px; height: 20px; color: var(--accent); }
.pesquisa > summary .acao { margin-left: auto; font-family: var(--font); font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--accent); cursor: pointer; }
.pesquisa form { display: grid; gap: 12px; padding: 0 16px 16px; }
.pesq-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pesq-nome { grid-column: 1 / -1; }
@media (max-width: 720px) { .pesq-grade { grid-template-columns: 1fr 1fr; } }
.faixa { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.faixa i { font-style: normal; font-size: 12px; color: var(--muted); }
.faixa input { min-width: 0; }
.leilao-grade { display: grid; gap: 16px; align-items: start; }
.leilao-grade.com-lateral { grid-template-columns: minmax(0, 1fr) 360px; }
.leilao-lateral { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
.leilao-lateral h2 { margin: 0; font-size: 22px; }
.lotes { display: grid; gap: 10px; }
.lote-arena { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 2.2fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.lote-arena.lidero { border-color: var(--accent); background: var(--accent-soft); }
.lote-arena.travado { opacity: .8; }
.lote-jog { display: grid; grid-template-columns: 44px auto 1fr; gap: 10px; align-items: center; min-width: 0; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.lote-ovr { font-family: var(--display); font-size: 30px; line-height: 1; min-width: 34px; font-variant-numeric: tabular-nums; }
.lote-id { display: grid; gap: 3px; min-width: 0; }
.lote-nome { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-id .info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lote-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lote-metricas > div { display: grid; gap: 1px; align-content: start; min-width: 0; }
.lote-metricas span { font-size: 11.5px; color: var(--muted); }
.lote-metricas b { font-family: var(--display); font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; }
.lote-metricas small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-acao { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.bloqueado { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 10px; background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; font-size: 13.5px; }
.lote-aviso { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lote-aviso.frente { color: var(--accent); font-weight: 600; }
.lote-aviso svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .lote-arena { grid-template-columns: 1fr; gap: 10px; }
  .lote-acao { justify-content: stretch; }
  .lote-acao .bt, .lote-acao .bloqueado { flex: 1; justify-content: center; }
}
.hist-lista { display: grid; }
.hist-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.hist-item:first-child { border-top: 0; }
.hist-ovr { font-family: var(--display); font-size: 22px; text-align: center; }
.hist-meio { display: grid; gap: 1px; min-width: 0; font-size: 13.5px; }
.hist-meio b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meio small, .hist-dir small { font-size: 12px; color: var(--muted); }
.hist-dir { display: grid; gap: 1px; justify-items: end; text-align: right; font-size: 13.5px; }
.hist-dir b { font-variant-numeric: tabular-nums; }
.hist-meio .posicao { justify-self: start; min-width: 34px; }
.hist-meio b { display: block; }
.leilao-grade.com-lateral .lote-arena { grid-template-columns: 1fr; gap: 10px; }
.leilao-grade.com-lateral .lote-acao { justify-content: stretch; }
.leilao-grade.com-lateral .lote-acao .bt, .leilao-grade.com-lateral .lote-acao .bloqueado { flex: 1; justify-content: center; }
@media (max-width: 1180px) { .lote-arena { grid-template-columns: 1fr; gap: 10px; } .lote-acao { justify-content: stretch; } .lote-acao .bt, .lote-acao .bloqueado { flex: 1; justify-content: center; } }
.leilao-lateral .segmento button { padding: 8px 10px; font-size: 12.5px; }


/* Blocos: vários jogadores por linha (grade de cartões) */
.lotes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: stretch; }
.lote-arena { grid-template-columns: 1fr; gap: 12px; align-content: start; }
.lote-arena .lote-acao { justify-content: stretch; align-self: end; }
.lote-arena .lote-acao .bt, .lote-arena .lote-acao .bloqueado { flex: 1; justify-content: center; }
.lote-arena .lote-metricas { padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- Menu: embaixo no celular e no tablet (como sempre foi); em tela larga, uma coluna só de ícones com todas as opções, em vidro fosco ---------- */
.trilho {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 13%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)), color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent), 0 18px 40px rgba(0, 0, 0, .38);
}
.trilho { display: none; }
@media (min-width: 960px) {
  .abas { display: none; }
  .tela { padding: 0 0 48px 84px; }
  .topo, .demo { margin-left: -84px; padding-left: 102px; } /* o cabeçalho continua por trás do menu lateral */
  .trilho {
    display: flex; flex-direction: column; gap: 3px; position: fixed; left: 14px; top: var(--trilho-top, 14px); bottom: 0; z-index: 40; width: 56px; padding: 6px 6px 14px;
    overflow-y: auto; border-radius: 22px 22px 0 0; border-bottom-width: 0; scrollbar-width: none;
  }
  .trilho::-webkit-scrollbar { display: none; }
  .trilho-logo, .trilho .grupo { display: none; }
  .trilho-itens, .trilho-pe { display: flex; flex-direction: column; gap: 3px; }
  .trilho-pe { margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .trilho .item { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 14px; background: none; color: var(--muted); cursor: pointer; }
  .trilho .item svg { width: 22px; height: 22px; }
  .trilho .item .rotulo, .trilho .item .janela { display: none; }
  .trilho .item:hover, .trilho .item:focus-visible { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
  .trilho .item[aria-current="page"] { background: color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); }
  .trilho .item[aria-current="page"] svg { color: var(--accent); }
  .trilho .item .bolinha { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; margin: 0; }
}

/* Estrelinha da lista de desejos */
.estrela { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--muted); cursor: pointer; }
.estrela svg { width: 18px; height: 18px; }
.estrela:hover { color: var(--ink); border-color: var(--accent); }
.estrela.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.estrela.on svg { fill: currentColor; }
.lote-arena { position: relative; }
.lote-arena > .estrela { position: absolute; top: 10px; right: 10px; }
.lote-arena .lote-jog { padding-right: 44px; }
.lote-linha .lote-acao, .tabela-leilao .lote-acao { align-items: center; }

/* Elenco: mapinha à frente, resumo ao lado (embaixo no celular) */
.elenco-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.elenco-lado { display: grid; gap: 14px; }
.elenco-topo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.elenco-atalhos { display: grid; gap: 14px; grid-auto-rows: 1fr; }
.elenco-atalhos > * { margin: 0; }
@media (min-width: 720px) { .elenco-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.mapa { display: grid; gap: 10px; width: 100%; max-width: 440px; margin-inline: auto; }
.mapa-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mapa-topo .forma { width: 116px; }
.mapa-topo .forma select { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.campo-jogo { position: relative; aspect-ratio: 4 / 4.7; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); color: rgba(255,255,255,.22); background: radial-gradient(120% 80% at 50% 0%, #1b3a2a, #0b1712 70%); }
.linhas-campo { position: absolute; inset: 0; width: 100%; height: 100%; }
.vaga { position: absolute; transform: translate(-50%, -50%); width: 64px; display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; text-align: center; }
.vaga .fc { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #1d1d28; box-shadow: 0 0 0 2px rgba(255,255,255,.28); font-weight: 700; }
.vaga .fc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vaga .ov.baixo { background: var(--bad, #ff6b6b); }
.vaga .ov.alto { background: var(--accent); }
.vaga .ov { position: absolute; right: -7px; bottom: -3px; min-width: 20px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 10px; line-height: 1.3; }
.vaga .nm { max-width: 64px; font-size: 10.5px; font-weight: 600; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vaga .posicao { font-size: 9px; font-weight: 700; line-height: 1; }
.vaga.vazia .fc { background: rgba(0,0,0,.25); border: 2px dashed rgba(255,255,255,.4); box-shadow: none; }
.reservas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vaga-mini { position: relative; display: grid; justify-items: center; gap: 1px; width: 44px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-size: 11px; }
.vaga-mini img, .vaga-mini .vazio { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vaga-mini b { font-size: 12px; }
@media (max-width: 520px) { .campo-jogo { aspect-ratio: 4 / 5.2; } }
.cartao-esc { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cartao-esc > svg:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.cartao-esc .mini-campo { width: 56px; height: 66px; flex: none; color: #2f6b49; background: #0e1f17; border-radius: 8px; }
.cartao-esc .mini-campo circle { fill: var(--pos-mei); }
.cartao-esc .mini-campo .p-GO { fill: var(--pos-go); }
.cartao-esc .mini-campo .p-ZC, .cartao-esc .mini-campo .p-LE, .cartao-esc .mini-campo .p-LD { fill: var(--pos-def); }
.cartao-esc .mini-campo .p-PTE, .cartao-esc .mini-campo .p-PTD, .cartao-esc .mini-campo .p-SA, .cartao-esc .mini-campo .p-CA { fill: var(--pos-ata); }
.cartao-txt { display: grid; gap: 2px; }
.cartao-txt .disp { font-size: 22px; }
.faixa-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faixa-linha .fase { flex: 1; min-width: 0; }
.bt-editar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .28); color: rgba(244, 244, 248, .8); cursor: pointer; transition: color .2s, border-color .2s; }
.bt-editar svg { width: 17px; height: 17px; }
.bt-editar:hover, .bt-editar:focus-visible { color: #fff; border-color: var(--accent); }
.linha-editar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.linha-editar span { display: flex; gap: 6px; }
.linha-editar .bt svg { width: 16px; height: 16px; }
.dica { position: fixed; z-index: 60; transform: translateY(-50%); padding: 6px 12px; border-radius: 10px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.dica[hidden] { display: none; }
@media (max-width: 959px) { .dica { display: none; } }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-card { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line-2); }
.pp-card p { margin: 0; font-size: 14.5px; }
.pp-cab { display: flex; align-items: center; gap: 12px; }
.pp-contra { display: grid; gap: 10px; }
.pp-contra[hidden] { display: none; }
.logo-trofeu { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; flex: none; }
.marca .logo-trofeu { width: 22px; height: 22px; }
.prz-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prz { padding: 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.prz.fifa { border-color: color-mix(in srgb, var(--pos-go) 45%, transparent); }
.prz-h { display: flex; align-items: center; gap: 14px; }
.prz-h img { height: 64px; width: 56px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.prz-h h3 { margin: 0; font-size: 22px; line-height: 1.1; }
.prz-h span { font-size: 12.5px; color: var(--muted); }
.prz-h span b { color: var(--pos-go); }
.prz-l { list-style: none; margin: 0; padding: 0; display: grid; }
.prz-l li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.prz-l li b { font-variant-numeric: tabular-nums; }
.prz-l li.ouro { color: var(--pos-go); font-weight: 700; }
.prz-l li.zero { color: var(--muted); opacity: .5; }
.trilho .sep { display: block; flex: none; height: 1px; margin: 5px 10px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
@media (max-width: 959px) { .trilho .sep { display: none; } }
/* Meu time: as cores vêm do escudo do clube (definidas em JS). */
:root[data-tema="clube"] {
  --bg: var(--tc-bg, #07070c); --bg-2: var(--tc-bg2, #0d0d14); --folha: var(--tc-bg2, #12121a);
  --accent: var(--tc-acc, #c6f26a); --accent-ink: var(--tc-ink, #0b0f02);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Carregando o painel: "PRESS START" de fliperama, pixels enchendo uma vez e uma dica da liga trocando enquanto espera. */
.carregando { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: var(--bg); overflow: hidden; }
/* Saída: o conteúdo gira e cresce até sumir, enquanto o fundo abre; a tela de baixo entra com um leve zoom. */
.carregando.sai { animation: carga-fundo-sai .5s var(--ease) .3s forwards; pointer-events: none; }
.carregando.sai.fim { opacity: 0; visibility: hidden; }
.carregando.sai > *:not(.voa) { animation: carga-sai .4s var(--ease) forwards !important; }
.carregando.sai img.voa { animation: none !important; z-index: 1; will-change: transform; }
@keyframes carga-sai { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes carga-gira-sai { to { transform: rotate(540deg) scale(4); opacity: 0; filter: blur(6px); } }
@keyframes carga-fundo-sai { to { background-color: transparent; } }
.carga-entra-tela { animation: tela-entra .6s var(--ease) both; }
@keyframes tela-entra { from { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .carregando.sai, .carregando.sai > * { animation: none !important; } .carregando.sai { opacity: 0; visibility: hidden; transition: opacity .3s; background-color: var(--bg); } .carga-entra-tela { animation: none; } }
.carregando img { width: 120px; height: auto; animation: carga-entra .6s var(--ease) both; }
.carregando .press { margin: 4px 0 0; font-size: 46px; letter-spacing: .05em; animation: carga-entra .6s var(--ease) .1s both; }
.carregando .press b { font-weight: 400; color: var(--accent); animation: pisca 1s steps(1) .7s infinite; }
.carregando.sai .press b { animation: none; }
.carregando .pix { display: flex; gap: 5px; }
.carregando .pix i { width: 14px; height: 14px; border-radius: 2px; background: var(--accent); opacity: .18; animation: pix-enche .35s steps(1) forwards; }
.carregando .pix i:nth-child(1) { animation-delay: .2s; } .carregando .pix i:nth-child(2) { animation-delay: .4s; } .carregando .pix i:nth-child(3) { animation-delay: .6s; } .carregando .pix i:nth-child(4) { animation-delay: .8s; }
.carregando .pix i:nth-child(5) { animation-delay: 1s; } .carregando .pix i:nth-child(6) { animation-delay: 1.3s; } .carregando .pix i:nth-child(7) { animation-delay: 1.7s; } .carregando .pix i:nth-child(8) { animation-delay: 2.4s; }
.carregando.sai .pix i { animation: none; opacity: 1; }
.carregando .dica-carga { margin: 6px 0 0; max-width: 420px; min-height: 40px; text-align: center; text-wrap: balance; font-size: 13.5px; line-height: 1.45; color: var(--muted); animation: carga-entra .6s var(--ease) .2s both; }
.carregando .dica-carga b { color: var(--accent); font-weight: 700; }
.carregando .dica-carga.troca { animation: dica-troca .5s var(--ease); }
@keyframes carga-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes pix-enche { to { opacity: 1; } }
@keyframes dica-troca { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .carregando img, .carregando .press, .carregando .press b, .carregando .pix i, .carregando .dica-carga { animation: none; } .carregando .pix i { opacity: .7; } }
.carta { display: grid; gap: 16px; }
.carta-de { display: flex; align-items: center; gap: 12px; }
.carta-de > span { display: grid; gap: 1px; font-size: 14px; }
.carta-de .muted { font-size: 12.5px; }
.carta-corpo { display: grid; gap: 12px; padding: 16px 18px; border-radius: 4px 18px 18px 18px; background: var(--panel-2); border: 1px solid var(--line-2); }
.carta-corpo p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.valor-carta { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--accent); letter-spacing: .01em; }
.carta-jogador { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); }
.carta-jogador > span { display: grid; gap: 3px; }
.carta-jogador .info { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.carta-acoes { display: grid; gap: 8px; }
.planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plano { padding: 20px; display: grid; gap: 12px; align-content: start; }
.plano.atual { border-color: var(--accent); }
.plano-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plano-cab h2 { margin: 0; font-size: 30px; }
.plano-preco { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plano-preco b { font-family: var(--display); font-weight: 400; font-size: 44px; color: var(--accent); }
.plano-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.plano-lista li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.plano-lista li > :first-child { width: 64px; flex: none; text-align: center; }
.plano-lista li.falta { color: var(--muted); }
.plano-sim svg { width: 18px; height: 18px; color: var(--accent); }
.plano-nao { font-size: 12px; color: var(--muted); }
.gerador-sub { margin: 14px 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gerador-sub small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.escudos-grade { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 60vh; overflow-y: auto; }
.escudo-op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.escudo-op:hover, .escudo-op:focus-visible { border-color: var(--accent); }
.escudo-op img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.escudo-op span { display: grid; gap: 2px; min-width: 0; }
.escudo-op small { font-size: 12px; color: var(--muted); }

.entrada-lado .dica-entrada { min-height: 3em; max-width: 36ch; }
.entrada-lado .dica-entrada b { color: var(--accent); font-weight: 700; }
.entrada-lado .dica-entrada.troca { animation: dica-troca .5s var(--ease); }

/* ---- entrada em cascata dos elementos do painel ---- */
@keyframes bloco-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes trilho-entra { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.tela.anima > *, .tela.anima .miolo > * { animation: bloco-entra .55s var(--ease) both; }
.tela.anima > :nth-child(2), .tela.anima .miolo > :nth-child(2) { animation-delay: 60ms; }
.tela.anima > :nth-child(3), .tela.anima .miolo > :nth-child(3) { animation-delay: 120ms; }
.tela.anima > :nth-child(4), .tela.anima .miolo > :nth-child(4) { animation-delay: 180ms; }
.tela.anima > :nth-child(5), .tela.anima .miolo > :nth-child(5) { animation-delay: 240ms; }
.tela.anima > :nth-child(6), .tela.anima .miolo > :nth-child(6) { animation-delay: 300ms; }
.tela.anima > :nth-child(7), .tela.anima .miolo > :nth-child(7) { animation-delay: 360ms; }
.tela.anima > :nth-child(8), .tela.anima .miolo > :nth-child(8) { animation-delay: 420ms; }
.tela.anima > :nth-child(9), .tela.anima .miolo > :nth-child(9) { animation-delay: 480ms; }
.app.app-entra .trilho-logo { animation: trilho-entra .5s var(--ease) both; }
.app.app-entra .trilho-itens > * { animation: trilho-entra .45s var(--ease) both; }
.app.app-entra .trilho-itens > :nth-child(1) { animation-delay: 80ms; }
.app.app-entra .trilho-itens > :nth-child(2) { animation-delay: 125ms; }
.app.app-entra .trilho-itens > :nth-child(3) { animation-delay: 170ms; }
.app.app-entra .trilho-itens > :nth-child(4) { animation-delay: 215ms; }
.app.app-entra .trilho-itens > :nth-child(5) { animation-delay: 260ms; }
.app.app-entra .trilho-itens > :nth-child(6) { animation-delay: 305ms; }
.app.app-entra .trilho-itens > :nth-child(7) { animation-delay: 350ms; }
.app.app-entra .trilho-itens > :nth-child(8) { animation-delay: 395ms; }
.app.app-entra .trilho-itens > :nth-child(9) { animation-delay: 440ms; }
.app.app-entra .trilho-itens > :nth-child(10) { animation-delay: 485ms; }
.app.app-entra .trilho-itens > :nth-child(11) { animation-delay: 530ms; }
@media (prefers-reduced-motion: reduce) { .tela.anima > *, .tela.anima .miolo > *, .app.app-entra .trilho-logo, .app.app-entra .trilho-itens > * { animation: none; } }

/* ================= menu lateral e painel inicial no desenho da Arena ================= */
.app { --menu-w: 248px; }
.app.menu-fechado { --menu-w: 0px; }
.trilho { position: fixed; display: flex; flex-direction: column; left: 0; top: 0 !important; bottom: 0; z-index: 70; width: min(300px, 86vw); padding: 0 0 12px; border-radius: 0; border: 0; border-right: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 94%, #fff 3%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 40px rgba(0, 0, 0, .5); overflow-y: auto; scrollbar-width: thin; transform: translateX(-105%); transition: transform .3s var(--ease); }
.app.menu-aberto .trilho { transform: none; }
.menu-fundo { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.app.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }
.alterna-menu { position: fixed; z-index: 80; top: 12px; left: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); cursor: pointer; transition: left .3s var(--ease), border-color .2s; }
.alterna-menu:hover { border-color: var(--accent); }
.alterna-menu svg { width: 20px; height: 20px; }
.topo, .demo { padding-left: 64px; }
.trilho-logo { display: grid; place-items: center; padding: 18px 16px 8px; }
.trilho-logo img { width: 120px; height: auto; }
.trilho-itens, .trilho-pe { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.trilho-pe { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 0 10px; }
.tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; transition: border-color .2s, color .2s, transform .2s; }
.tile svg { width: 22px; height: 22px; }
.tile:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.tile i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #5a5a66; }
.tile.on i { background: #5fd38d; } .tile.off i { background: #ef6b6b; }
.tile.on { color: var(--ink); }
.msec { display: block; padding: 12px 8px 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mgrupo { display: block; }
.mgrupo summary { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink); font-size: 13px; font-weight: 700; }
.mgrupo summary::-webkit-details-marker { display: none; }
.mgrupo summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .2s; }
.mgrupo[open] summary::after { transform: rotate(45deg); }
.mgrupo summary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.trilho .item { width: auto; height: auto; min-height: 38px; padding: 8px 10px; border-radius: 10px; display: flex; align-items: center; gap: 12px; justify-content: flex-start; font-size: 13px; }
.trilho .item .rotulo { display: grid !important; opacity: 1; position: static; transform: none; background: none; padding: 0; line-height: 1.2; }
.mgrupo .item { margin-left: 8px; }
.trilho .item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.trilho .item svg { width: 18px; height: 18px; flex: none; }
.trilho .sep, .trilho .grupo { display: none; }
@media (min-width: 960px) {
  .tela { padding: 0 0 48px var(--menu-w); transition: padding-left .3s var(--ease); }
  .topo, .demo { margin-left: calc(var(--menu-w) * -1); padding-left: calc(var(--menu-w) + 64px); transition: margin-left .3s var(--ease), padding-left .3s var(--ease); }
  .trilho { transform: none; box-shadow: none; }
  .app.menu-fechado .trilho { transform: translateX(-105%); }
  .alterna-menu { left: calc(var(--menu-w) + 12px); }
  .menu-fundo { display: none; }
}
@media (max-width: 959px) { .alterna-menu { left: 12px; } .app.menu-aberto .alterna-menu { left: min(300px, 86vw); margin-left: -52px; } }
@media (prefers-reduced-motion: reduce) { .trilho, .tela, .topo, .alterna-menu, .menu-fundo { transition: none; } }

/* ---- painel inicial ---- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dash > * { grid-column: span 12; min-width: 0; }
.dash-box, .dash-stat { background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 18px; }
.dash-box h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: .02em; } .dash-box h2 a { color: inherit; text-decoration: none; }
.dash-clube { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--club) 40%, var(--panel)), var(--panel)); }
.dash-clube h2 { margin: 0; font-size: 32px; } .dash-clube b { display: block; margin-top: 2px; } .dash-clube small { display: block; margin-top: 2px; color: var(--muted); }
.dash-escudo { width: 96px; height: 96px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.dash-stat { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.dash-stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none; border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.dash-ico svg { width: 24px; height: 24px; }
.dash-stat b { display: block; font-size: 30px; line-height: 1; } .dash-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.dash-trofeus { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px; }
.dash-tr { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line-2); }
.dash-tr i { position: absolute; right: -2px; bottom: -2px; min-width: 22px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, #07070c); font-style: normal; font-size: 11px; font-weight: 800; text-align: center; }
.dash-lista, .dash-elenco, .dash-jogos, .dash-neg { list-style: none; margin: 0; padding: 0; display: grid; }
.dash-lista li, .dash-elenco li, .dash-jogos li, .dash-neg li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.dash-lista li:first-child, .dash-elenco li:first-child, .dash-jogos li:first-child, .dash-neg li:first-child { border-top: 0; }
.dash-lista .n { width: 18px; color: var(--muted); font-weight: 700; text-align: center; }
.dash-lista li.eu { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; padding-inline: 8px; margin-inline: -8px; }
.dash .txt { display: grid; min-width: 0; line-height: 1.2; flex: 1; } .dash .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash .txt small { color: var(--accent); font-weight: 700; font-size: 12px; }
.dash .v { color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.dash-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.dash-elenco .jogador { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.dash-jogos li { flex-wrap: wrap; font-size: 13px; } .dash-jogos li span { flex-basis: 100%; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dash-jogos em { font-style: normal; font-weight: 800; color: var(--accent); }
.dash-neg li { flex-wrap: wrap; } .dash-neg small { flex-basis: 100%; color: var(--muted); }
.tag { padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, #07070c); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.dash-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dash-noticias article { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); } .dash-noticias small { color: var(--muted); }
.dash-vazio { margin: 0; }
@media (min-width: 960px) {
  .dash-stat { grid-column: span 4; }
  .dash-trof { grid-column: span 8; } .dash-esc { grid-column: span 12; } .dash-elenco-box { grid-column: span 12; }
  .dash-elenco { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .dash-elenco li:nth-child(2) { border-top: 0; }
  .dash > .dash-box:not(.dash-clube):not(.dash-trof):not(.dash-esc):not(.dash-elenco-box):not(.dash-larga):not(.dash-larga8) { grid-column: span 4; }
  .dash > .dash-larga8 { grid-column: span 8; }
  .dash > .dash-larga { grid-column: span 12; }
}
.trilho .item, .trilho .item:hover { text-decoration: none; }
.trilho .item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.trilho-pe .item { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; width: 100%; text-align: left; }
.trilho-pe .item:hover { color: var(--ink); }

/* o botão do menu fica no canto: o "Voltar" sai de baixo dele */
.app.menu-fechado .voltar-topo { margin-left: 64px; }
@media (max-width: 959px) { .voltar-topo { margin-left: 64px; } }

/* escalação editável: campo à esquerda, banco com nomes na lateral */
.folha:has(.mapa) { width: min(940px, 96vw); max-width: none; }
.mapa { max-width: none; }
.mapa-ctl { display: flex; align-items: center; gap: 8px; }
.mapa-corpo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .mapa-corpo { grid-template-columns: minmax(0, 1fr) 260px; } .esc-banco ul { max-height: 560px; overflow-y: auto; } }
.mapa .campo-jogo { width: 100%; max-width: 520px; margin-inline: auto; }
.vaga[data-arrasta], .esc-item { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.vaga.arrastando, .esc-item.arrastando { opacity: .35; }
.fantasma { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) scale(1.08); opacity: .95; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); list-style: none; }
.fantasma.vaga { position: fixed; }
.fantasma.esc-item { width: 220px; background: var(--panel-2); border-radius: 12px; }
.esc-banco { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.esc-banco h3 { margin: 0; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.esc-banco h3 small { color: var(--muted); font: 600 13px var(--font-body, inherit); }
.esc-banco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.esc-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 28px; align-items: center; gap: 8px; width: 100%; padding: 5px 8px 5px 5px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; }
.esc-item:hover { background: var(--panel-2); border-color: var(--line-2); }
.esc-item img, .esc-item .vazio { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.esc-item .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-item .posicao { font-size: 10.5px; font-weight: 700; }
.esc-item b { font-size: 14px; text-align: right; }

/* logos de bancos e marcas */
.logo-marca { object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; flex: none; }
.logo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-previa { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); overflow: hidden; }
.logo-previa img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.logo-previa i { font-size: 11px; color: #667; font-style: normal; text-align: center; }

/* dashboard do administrador */
.dash-nums { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-num { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; }
.dash-num b { font-size: 34px; line-height: 1; color: var(--accent); }
.dash-num span { font-size: 12.5px; color: var(--muted); }
a.dash-num:hover { border-color: var(--accent); }
.barras { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; }
.barras li { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 132px; align-items: center; gap: 10px; font-size: 13.5px; }
.barras .rot { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras .rot small { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.barras .fio { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.barras .fio i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.barras .fio i.neg { background: #ff6b6b; }
.barras b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .barras li { grid-template-columns: minmax(0, 1fr) 90px; } .barras .fio { grid-column: 1 / -1; order: 3; } }

.agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 10px; }
.agenda .dsem { text-align: center; color: var(--muted); font-size: 12px; }
.agenda .dia { min-height: 64px; border-radius: 8px; background: var(--panel-2); padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.agenda .dia.vazio { background: transparent; }
.agenda .dia.tem { outline: 1px solid var(--accent); }
.agenda .dia > span { color: var(--muted); }
.agenda .dia button { font: inherit; font-size: 11px; text-align: left; padding: 2px 4px; border: 0; border-radius: 5px; background: var(--accent); color: #07070c; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .agenda .dia { min-height: 48px; } .agenda .dia button { font-size: 10px; } }

/* Painel do adm (mesma identidade do resto do painel). */
.hub-dash { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--accent-soft); color: inherit; text-decoration: none; margin-bottom: 18px; }
.hub-dash > span { flex: 1; display: grid; gap: 2px; } .hub-dash b { font-size: 22px; } .hub-dash small { color: var(--muted); }
.hub-dash svg { width: 22px; height: 22px; color: var(--accent); }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hub-grupo { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 14px 8px 8px; display: grid; gap: 2px; align-content: start; }
.hub-grupo h2 { margin: 0 10px 8px; font-size: 18px; font-weight: 400; }
.hub-grupo a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.hub-grupo a:hover { background: var(--panel-3); }
.hub-grupo a svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.premium-card { border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px; display: grid; gap: 8px; background: var(--panel); margin-bottom: 18px; }
.premium-card.on { border-color: var(--accent); background: var(--accent-soft); }
.premium-card b { font-size: 24px; }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.plano { display: block; cursor: pointer; }
.plano input { position: absolute; opacity: 0; }
.plano > span { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.plano input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.plano input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.plano .preco { font-size: 22px; font-weight: 800; } .plano small { color: var(--muted); }
.pix { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--panel-2); font-size: 14px; }


.busca-filtros { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.busca-atr { padding: 14px; display: grid; gap: 10px; margin-top: 12px; }
.busca-atr-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.busca-chips { display: flex; flex-wrap: wrap; gap: 6px; } .busca-chips .selo { cursor: pointer; }
.paginar { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px; }
.cmp-rolagem { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.cmp { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.cmp th, .cmp td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp tbody th { text-align: left; color: var(--muted); font-weight: 500; position: sticky; left: 0; background: var(--bg); }
.cmp thead th { vertical-align: top; } .cmp thead .jogador { flex-direction: column; text-align: center; }
.cmp td.melhor { color: var(--accent); font-weight: 800; background: var(--accent-soft); }
.cmp td.hab { font-size: 12.5px; color: var(--muted); }

.lista .mov.novo { background: var(--accent-soft); }

.recurso { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: inherit; text-decoration: none; }
.recurso:hover { border-color: var(--line-2); background: var(--panel-2); }
.recurso svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.recurso span { display: grid; gap: 3px; flex: 1; } .recurso small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.recurso em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 99px; }
.recurso.trancado { opacity: .7; }

@media (min-width: 960px) { .trilho { width: var(--menu-largura, 248px); } }
.dash-lista { gap: 0; } .dash-lista li { gap: 8px; }
.dash-lista .txt b { white-space: normal; overflow-wrap: anywhere; }
.dash-lista .v { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* escalação: o banco tem a mesma altura do campo, com rolagem própria */
@media (min-width: 760px) {
  .mapa-corpo { align-items: stretch; }
  .mapa .esc-banco { display: flex; flex-direction: column; min-height: 0; height: 0; min-block-size: 100%; }
  .mapa .esc-banco ul { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
}
.mapa img { -webkit-user-drag: none; user-drag: none; }
/* o botão do menu fica fixo no canto: o título da página começa abaixo dele quando o menu é gaveta */
@media (max-width: 959px) { .cabeca { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); } }

/* Olheiro no painel: categorias, cartas e radar */
.cat-abas { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.cat-abas::-webkit-scrollbar { display: none; }
.cat-abas a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cat-abas a:hover { color: var(--ink); }
.cat-abas a.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.cat-filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 18px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.seg button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--bg); }
.cat-pos { color: var(--accent); font-size: 12px; font-weight: 700; margin-right: 4px; }
.cartas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.carta { --borda: var(--line-2); perspective: 900px; aspect-ratio: 3 / 4.3; cursor: pointer; outline: none; }
.carta.lenda { --borda: var(--accent); }
.carta.ouro { --borda: #e3c565; }
.carta.prata { --borda: #b9c0cc; }
.carta.bronze { --borda: #c98e5b; }
.carta-in { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3, .7, .2, 1); transform-style: preserve-3d; }
@media (hover: hover) { .carta:hover .carta-in { transform: rotateY(180deg); } }
.carta.virada .carta-in { transform: rotateY(180deg); }
.carta:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 16px; }
.carta-frente, .carta-verso { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12px; border-radius: 16px; border: 1.5px solid var(--borda); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carta-frente { background: linear-gradient(165deg, color-mix(in srgb, var(--c1) 62%, #0a0a10), color-mix(in srgb, var(--c2) 22%, #07070c) 90%); }
.carta-verso { transform: rotateY(180deg); gap: 6px; background: color-mix(in srgb, var(--c1) 22%, #0b0b12); font-size: 11.5px; overflow-y: auto; scrollbar-width: none; }
.carta-marca { position: absolute; right: -14%; bottom: 6%; width: 70%; opacity: .1; pointer-events: none; }
.carta-frente header { display: flex; align-items: flex-start; justify-content: space-between; }
.carta-ov { font: 400 34px/1 var(--font-disp, "Anton", sans-serif); letter-spacing: .01em; }
.carta-rosto { display: grid; place-items: center; margin: 4px 0 6px; }
.carta-rosto img, .carta-rosto .rosto { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, .25); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.carta h3 { margin: 0; font-size: 14.5px; line-height: 1.15; text-align: center; text-wrap: balance; }
.carta-clube { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 0; font-size: 11px; color: rgba(255, 255, 255, .72); }
.carta-dest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: auto 0 0; padding: 8px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.carta-dest b { display: block; font-size: 17px; line-height: 1.1; }
.carta-dest span { font-size: 9.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.carta-verso header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.carta-verso header b { font-size: 12.5px; line-height: 1.15; }
.carta-grupo h4 { margin: 0 0 2px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.carta-grupo > div { display: flex; justify-content: space-between; gap: 6px; line-height: 1.5; }
.carta-grupo > div span { color: rgba(255, 255, 255, .72); }
.radar { display: grid; justify-items: center; gap: 6px; margin: 14px 0; padding: 14px; border-radius: var(--r, 16px); border: 1px solid var(--line); background: var(--panel); }
.radar svg { width: min(340px, 100%); color: var(--ink); }
.radar-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.radar-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }

.carta-star { align-self: flex-start; margin: 2px auto 0; border: 0; background: none; color: rgba(255, 255, 255, .45); font-size: 22px; line-height: 1; cursor: pointer; }
.carta-star.on, .carta-star:hover { color: var(--accent); }
.carta-links { display: flex; gap: 6px; }
.selo-estrela { color: var(--accent); font-size: 13px; }
.rel-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; margin: 14px 0; }
.rel-topo > div:first-of-type { display: grid; gap: 2px; }
.rel-forma { display: flex; gap: 4px; margin-left: auto; }
.rel-forma i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--bg); font-style: normal; font-size: 12px; font-weight: 800; }
.rel-grade { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .rel-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.campo-fixo { width: 100%; max-width: 480px; aspect-ratio: 4 / 4.7; }
.campo-fixo .vaga { cursor: default; }
.sim-grade { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .sim-grade { grid-template-columns: 1fr 1fr; } }
.sim-lista { max-height: 460px; overflow-y: auto; }
.sim-op { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.sim-op .nome { flex: 1; font-weight: 600; }
.aviso-sim { margin: 0 0 10px; color: var(--danger); font-weight: 600; }
.cmp td.pior { color: var(--danger); }
.evo-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 14px 0; }
.evo { margin: 0; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.evo figcaption { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.evo figcaption b { color: var(--ink); }
.evo svg { width: 100%; height: auto; }
.venda-previa { margin-top: 16px; display: grid; justify-items: center; }
.venda-previa canvas { width: min(420px, 100%); height: auto; border-radius: 16px; border: 1px solid var(--line-2); }

button.recurso { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }

.vitrine { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vitrine .recurso { cursor: default; }
.vitrine .recurso:hover { border-color: var(--line); background: var(--panel); }
.vitrine-sub { margin: -4px 0 12px; font-size: 14px; }

.teaser { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.teaser-falso { display: grid; gap: 6px 14px; grid-template-columns: repeat(2, 1fr); padding: 14px; filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; }
.teaser-falso div { display: flex; justify-content: space-between; }
.teaser-aviso { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 14px; text-align: center; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.teaser-aviso b { font-size: 20px; }
.teaser-aviso span { max-width: 300px; font-size: 13.5px; color: var(--muted); }

.menu-premium { display: grid; gap: 3px; margin: 0 8px 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: 12.5px; }
.menu-premium .mp-topo { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; }
.menu-premium svg { width: 16px; height: 16px; }
.menu-premium .mp-data { color: var(--muted); }
.menu-premium .mp-data b { color: var(--ink); }

/* Chamada do premium: degradê no fundo e um brilho que passa devagar (sem texto em degradê). */
.premium-card.promo { position: relative; overflow: hidden; gap: 10px; padding: 26px 22px; border: 0; color: var(--accent-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 52%, #0b0f02) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent); }
.promo-brilho { position: absolute; inset: -20% auto -20% -40%; width: 38%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: promo-passa 4.8s ease-in-out 1.2s infinite; }
@keyframes promo-passa { 0% { left: -40%; } 55%, 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .promo-brilho { animation: none; display: none; } }
.promo-selo { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 12px; border-radius: 999px; background: rgba(11, 15, 2, .88); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.promo-selo svg { width: 14px; height: 14px; }
.premium-card.promo .promo-titulo { font-size: clamp(22px, 5vw, 30px); line-height: 1.1; position: relative; }
.promo-preco { display: flex; align-items: baseline; gap: 8px; position: relative; }
.promo-preco .disp { font-size: clamp(56px, 14vw, 88px); line-height: .95; }
.promo-preco small { font-size: 16px; font-weight: 700; opacity: .75; }
.promo-txt { margin: 0; max-width: 460px; font-size: 14px; font-weight: 500; opacity: .85; position: relative; }
.promo-bt { justify-self: start; position: relative; padding: 13px 26px; border: 0; border-radius: 999px; background: #0b0f02; color: var(--accent); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .15s; }
.promo-bt:hover { transform: translateY(-2px); }

/* Radar de contratação: varredura enquanto carrega */
.radar-busca { display: grid; justify-items: center; gap: 8px; padding: 36px 0; text-align: center; }
.radar-busca svg { width: min(260px, 72vw); height: auto; overflow: visible; }
.radar-busca circle, .radar-busca line { fill: none; stroke: var(--accent); stroke-opacity: .28; stroke-width: 1.2; }
.radar-busca .varre { transform-origin: 100px 100px; animation: radar-gira 1.6s linear infinite; }
.radar-busca .varre path { fill: var(--accent); fill-opacity: .32; stroke: none; }
.radar-busca .ponto { fill: var(--accent); stroke: none; opacity: 0; animation: radar-pisca 1.6s linear infinite; }
.radar-busca .p1 { animation-delay: .25s; } .radar-busca .p2 { animation-delay: .85s; } .radar-busca .p3 { animation-delay: 1.3s; }
.radar-busca b { font-size: 24px; margin-top: 6px; }
@keyframes radar-gira { to { transform: rotate(360deg); } }
@keyframes radar-pisca { 0% { opacity: 1; } 70%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .radar-busca .varre, .radar-busca .ponto { animation: none; } .radar-busca .ponto { opacity: 1; } }

.zap-lista { display: grid; gap: 8px; }
.zap-op { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.zap-op input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; }
.zap-op span { display: grid; gap: 2px; }
.zap-op small { color: var(--muted); font-size: 12.5px; }

.conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.conds i { font-style: normal; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.seg-op { cursor: pointer; }
.seg-op input { position: absolute; opacity: 0; pointer-events: none; }
.seg-op span { display: inline-block; padding: 6px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; }
.seg-op input:checked + span { background: var(--ink); color: var(--bg); }
.seg-op input:focus-visible + span { outline: 2px solid var(--accent); }

/* Conversas, estilo WhatsApp com a identidade do site */
.wa { display: grid; grid-template-columns: 1fr; height: calc(100dvh - 170px); min-height: 460px; margin: 0 var(--gutter, 16px); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; background: #0b0b12; }
.wa-painel, .wa-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.wa-conversa { display: none; background: #0d0d16; }
.wa.com-conversa .wa-painel { display: none; }
.wa.com-conversa .wa-conversa { display: flex; }
@media (min-width: 900px) { .wa { grid-template-columns: 360px 1fr; height: calc(100dvh - 120px); margin: 0; }
  .wa .wa-painel { display: flex !important; border-right: 1px solid rgba(255,255,255,.1); } .wa .wa-conversa { display: flex !important; } .wa-volta { display: none !important; } }
.wa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; }
.wa-topo h1 { margin: 0; font-size: 24px; }
.wa-busca { padding: 8px 16px 10px; }
.wa-busca input { width: 100%; border-radius: 999px; padding: 10px 16px; background: rgba(255,255,255,.07); border: 1px solid transparent; color: var(--ink); }
.wa-itens { flex: 1; overflow-y: auto; }
.wa-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.05); }
.wa-item:hover { background: rgba(255,255,255,.04); }
.wa-item.ativo { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wa-av { flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); overflow: hidden; font-weight: 800; }
.wa-av img { width: 78%; height: 78%; object-fit: contain; }
.wa-meio { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wa-meio b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-meio small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-lado { flex: none; display: grid; justify-items: end; gap: 4px; }
.wa-lado time { font-size: 11.5px; color: var(--muted); } .wa-lado time.novo { color: var(--accent); }
.wa-n { font-style: normal; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: #0b0f02; font-size: 12px; font-weight: 800; text-align: center; }
.wa-vazio { margin: 0; padding: 24px 20px; color: var(--muted); text-align: center; font-size: 14px; }
.wa-cab { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #12121c; border-bottom: 1px solid rgba(255,255,255,.08); }
.wa-volta { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); } .wa-volta svg { width: 20px; height: 20px; }
.wa-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; }
.wa-dia { align-self: center; margin: 10px 0; } .wa-dia span { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 12px; }
.wa-msg { align-self: flex-start; max-width: min(78%, 520px); padding: 7px 10px 5px; border-radius: 12px 12px 12px 3px; background: #1b1b28; }
.wa-msg.minha { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: color-mix(in srgb, var(--accent) 88%, #000); color: #0b0f02; }
.wa-msg p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14.5px; line-height: 1.35; }
.wa-h { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; opacity: .65; }
.wa-h i { font-style: normal; } .wa-h i.lida { opacity: 1; font-weight: 800; }
.chat-rapidas { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.wa-form { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #12121c; }
.wa-form input { flex: 1; border-radius: 999px; padding: 12px 18px; background: rgba(255,255,255,.08); border: 1px solid transparent; color: var(--ink); }
.wa-enviar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #0b0f02; cursor: pointer; } .wa-enviar svg { width: 20px; height: 20px; }
.wa-sem { margin: auto; text-align: center; display: grid; gap: 8px; justify-items: center; padding: 24px; max-width: 360px; color: var(--muted); }
.wa-grande { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .wa-grande svg { width: 40px; height: 40px; }
.wa-sem b { color: var(--ink); font-size: 24px; } .wa-sem p { margin: 0; font-size: 14px; }

/* Seletor de visão do leilão: compacto */
.leilao-barra .segmento{padding:3px;gap:2px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.leilao-barra .segmento button{padding:6px 14px;min-height:0;font-size:13px;font-weight:600;border-radius:999px;color:rgba(255,255,255,.6);background:transparent;box-shadow:none}
.leilao-barra .segmento button[aria-pressed="true"]{background:var(--acento,#c6f26a);color:#07070c}

/* Espaçamento entre as seções da página À venda / Leilão */
.leilao-principal{display:flex;flex-direction:column;gap:36px}
.leilao-principal .bloco h2{margin-bottom:16px}
.leilao-principal .bloco+.bloco{padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.leilao-principal .lotes{gap:16px;align-items:stretch}
.leilao-barra{margin-bottom:20px}
.leilao-principal .lote-arena{display:flex;flex-direction:column;gap:14px;padding:16px;height:100%}
.leilao-principal .lote-metricas{gap:18px}
.leilao-principal .lote-acao{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.leilao-principal .lote-acao .bt{flex:1 1 auto;white-space:nowrap;text-align:center;padding:10px 14px}
.leilao-principal .lote-acao .bt.pri{flex:1 1 100%}
.leilao-principal .conds{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lote-metricas small, .lote-metricas b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.lote-metricas > div { min-width: 0; }

/* Premium no topo do menu */
#menu > .menu-premium, #menu > .menu-comprar, #menu > .menu-chat { margin: 0 0 12px; }
.menu-comprar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; color: var(--accent-ink); text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 52%, #0b0f02) 100%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 22%, transparent); }
.menu-comprar svg { width: 22px; height: 22px; position: relative; }
.menu-comprar span:not(.promo-brilho) { display: grid; position: relative; }
.menu-comprar b { font-size: 15px; font-weight: 800; }
.menu-comprar small { font-size: 12.5px; font-weight: 600; opacity: .8; }

/* Cartão Premium do menu (redesenho) */
.menu-premium { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, #0b0b12); color: var(--ink); text-decoration: none; }
.menu-premium:hover { border-color: var(--accent); }
.menu-premium .mp-selo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #0b0f02); }
.menu-premium .mp-selo svg { width: 20px; height: 20px; }
.menu-premium .mp-corpo { display: grid; gap: 3px; min-width: 0; flex: 1; }
.menu-premium .mp-titulo { font-family: var(--display, inherit); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.menu-premium .mp-data { font-size: 13px; color: var(--muted); }
.menu-premium .mp-data b { color: var(--ink); font-weight: 700; }
.menu-premium .mp-barra { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 3px; }
.menu-premium .mp-barra i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.menu-premium small { font-size: 11.5px; color: var(--muted); }

/* Botão Chat do menu */
.menu-chat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--ink); text-decoration: none; }
.menu-chat:hover, .menu-chat[aria-current="page"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #0b0b12); }
.menu-chat svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.menu-chat b { font-family: var(--display, inherit); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; flex: 1; }
.menu-chat .bolinha { position: static; }

/* Editar tela inicial */
.edit-inicio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.edit-inicio li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.edit-inicio li.off .chave-txt { opacity: .55; }
.edit-inicio .chave { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; flex: 1; min-width: 0; }
.edit-inicio .chave input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; left: 0; top: 0; }
.edit-inicio .trilho { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.16); transition: background .2s; }
.edit-inicio .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.edit-inicio input:checked + .trilho { background: var(--accent); }
.edit-inicio input:checked + .trilho::after { transform: translateX(16px); background: #0b0f02; }
.edit-inicio input:focus-visible + .trilho { outline: 2px solid var(--accent); outline-offset: 2px; }
.edit-inicio .chave-txt { display: grid; gap: 2px; min-width: 0; }
.edit-inicio .chave-txt b { font-size: 14.5px; }
.edit-inicio .chave-txt small { color: var(--muted); font-size: 12px; }
.edit-inicio .ordem { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .edit-inicio .trilho, .edit-inicio .trilho::after { transition: none; } }

/* Escudos nunca achatam: mantêm proporção e não encolhem em linhas flex/grid */
img[src*="escudo"], .jogador > img, .lote-id img, .info > img, .lista li > a > img { object-fit: contain; flex: none; }
.jogador > img:first-child:not(.rosto):not(.dash-face) { width: 36px; height: 36px; object-fit: contain; flex: none; }
.wa-topo, .wa-cab { padding-left: 64px; }

/* Confirmação */
dialog.confirma { border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #12121c; color: var(--ink); padding: 22px; width: min(420px, calc(100vw - 32px)); }
dialog.confirma::backdrop { background: rgba(0,0,0,.6); }
dialog.confirma p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.45; white-space: pre-line; }
.confirma-bt { display: flex; justify-content: flex-end; gap: 10px; }

/* Histórico do leilão: foto redonda, técnico e etiqueta, como na Arena */
.hist-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; }
.hist-foto { position: relative; width: 54px; height: 54px; flex: none; }
.hist-foto .rosto, .hist-foto img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--accent) 22%, #12121c); }
.hist-foto i { position: absolute; right: -4px; bottom: -2px; padding: 1px 6px; border-radius: 8px; background: #0b0b12; border: 1px solid rgba(255,255,255,.18); font-style: normal; font-size: 12px; font-weight: 800; }
.hist-meio { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.hist-meio b { font-size: 15px; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.hist-quem { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.hist-quem img { object-fit: contain; flex: none; }
.hist-dir { display: grid; justify-items: end; gap: 3px; text-align: right; }
.hist-dir b { font-size: 17px; }
.hist-dir small { color: var(--muted); font-size: 11.5px; }

/* Notificação de lance: sobe pela parte de baixo, acima da barra de abas */
.notif-lances { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
@media (min-width: 900px) { .notif-lances { bottom: 24px; left: auto; right: 24px; transform: none; } }
.notif-lance { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, rgba(14,14,22,.55)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: notif-chega .7s cubic-bezier(.2,.8,.2,1) both; }
.notif-lance.compra { border-color: color-mix(in srgb, #ff6b5e 55%, transparent); background: color-mix(in srgb, #ff6b5e 14%, rgba(14,14,22,.55)); }
.notif-lance.saindo { animation: notif-sai .6s ease forwards; }
.notif-lance .hist-foto, .notif-lance .hist-foto .rosto, .notif-lance .hist-foto img { width: 42px; height: 42px; }
@keyframes notif-chega { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes notif-sai { to { opacity: 0; transform: translateY(-14px); filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) { .notif-lance, .notif-lance.saindo { animation-duration: .01s; } }
.notif-lance .hist-quem { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.notif-lance .selo { background: var(--accent); color: #0b0f02; font-weight: 800; }
.notif-lance.compra .selo { background: #ff6b5e; color: #1a0503; }

.notif-lance .hist-foto { overflow: visible; }
.notif-clube { position: absolute; left: -8px; top: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0b0b12; border: 1px solid rgba(255,255,255,.25); }
.notif-clube img { width: 20px; height: 20px; object-fit: contain; }
.notif-lance { padding-left: 20px; }

/* Busca avançada: atributos mínimos */
.busca-atr { padding: 18px; gap: 14px; }
.busca-atr-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.busca-atr-topo b { display: block; font-size: 16px; }
.busca-atr-topo small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; max-width: 520px; }
.busca-atr-linha { display: grid; grid-template-columns: minmax(180px, 1fr) 120px auto; gap: 12px; align-items: end; }
.busca-atr-linha .bt.pri { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; gap: 6px; }
.busca-atr-linha .bt svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .busca-atr-linha { grid-template-columns: 1fr 100px; } .busca-atr-linha .bt.pri { grid-column: 1 / -1; justify-content: center; } .busca-atr-topo { flex-direction: column; } }
.busca-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; align-items: center; }
.busca-vazio { color: var(--muted); font-size: 13px; }
.chip-atr { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.chip-atr b { color: var(--accent); }
.chip-atr i { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 10px; }
.chip-atr:hover i { background: rgba(255,255,255,.25); }

/* Colunas no celular: o botão de lance fica sempre visível à direita da tabela */
@media (max-width: 760px) {
  .tabela-leilao td.lote-acao { position: sticky; right: 0; background: var(--panel); box-shadow: -8px 0 8px -8px rgba(0,0,0,.6); z-index: 1; }
}

.ordem-leilao { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ordem-leilao select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 7px 28px 7px 12px; font: inherit; font-size: 13px; }
@media (max-width: 760px) { .ordem-leilao span { display: none; } }

.chips-leilao { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; max-width: 1180px; margin: 0 auto; }
.chip-filtro { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-filtro[aria-pressed="true"] { background: var(--accent, #c6f26a); color: var(--accent-ink, #0b0d06); border-color: transparent; font-weight: 600; }

/* Histórico de negociações */
.hn-filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; margin-bottom: 14px; }
.hn-item { display: grid; grid-template-columns: 120px minmax(0, 1.4fr) 110px minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.hn-item:first-child { border-top: 0; }
.hn-data { color: var(--muted); font-size: 12.5px; }
.hn-jog { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.hn-jog span { display: grid; gap: 2px; min-width: 0; }
.hn-jog b { overflow-wrap: anywhere; }
.hn-tipo { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.hn-valor { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hn-de-para { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.hn-de-para span { display: inline-flex; align-items: center; gap: 6px; }
.hn-de-para i { color: var(--faint); font-style: normal; }
@media (max-width: 760px) {
  .hn-filtros { grid-template-columns: 1fr; }
  .hn-item { grid-template-columns: 1fr auto; row-gap: 8px; }
  .hn-data { grid-column: 1 / -1; }
  .hn-de-para { grid-column: 1 / -1; }
}

/* Planos */
.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.plano-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; }
.plano-card.dono { border-color: var(--accent); }
.plano-nome { font-size: 28px; margin: 0; }
.plano-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plano-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.plano-lista li svg { margin-top: 2px; color: var(--accent); }
.plano-lista b { display: block; }
.plano-lista small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.plano-card .bt { justify-self: stretch; text-align: center; }
.plano-card .promo-preco { margin: 0; }
.plano-lista li svg { width: 22px; height: 22px; }
.plano-card .plano-lista li > svg { width: 22px !important; height: 22px !important; min-width: 22px; }

/* ---------- cobranças ---------- */
.cb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cb-kpi { padding: 14px 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 4px; }
.cb-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cb-kpi b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--ink); }
.cb-kpi.ok b { color: var(--accent); }
.cb-kpi.mal { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
.cb-kpi.mal b { color: var(--danger); }
.cb-kpi.aten { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.cb-kpi.aten b { color: var(--warn); }
.cb-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cb-barra-bt { display: flex; gap: 8px; }
.cb-filtros { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; max-width: 100%; }
.cb-filtros button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; }
.cb-filtros button.on { background: var(--accent); color: var(--accent-ink); }
.cb-aviso { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); text-decoration: none; font-size: 14px; }
.cb-aviso svg { width: 18px; height: 18px; flex: none; color: var(--warn); }
.cb-aviso span { flex: 1; }
.cb-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; gap: 6px 16px; align-items: center; padding: 12px 14px 12px 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.cb-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--line-2); }
.cb-item.atrasada::before { background: var(--danger); }
.cb-item.conferir::before { background: var(--warn); }
.cb-item.pago::before { background: var(--accent); }
.cb-item.meu { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.cb-esc { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: var(--panel-2); }
.cb-esc.vazio { display: grid; place-items: center; font: 700 16px var(--font); color: var(--muted); }
.cb-quem, .cb-oque, .cb-valor { display: grid; gap: 2px; min-width: 0; }
.cb-quem b, .cb-oque b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-quem span, .cb-oque span, .cb-valor span { font-size: 12.5px; color: var(--muted); }
.cb-oque span { color: var(--ink); font-size: 14px; }
.cb-oque em { font-style: normal; font-size: 12.5px; color: var(--warn); }
.cb-item.meu .cb-oque span { color: var(--muted); font-size: 12.5px; }
.cb-valor { text-align: right; }
.cb-valor b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cb-selo { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel-2); color: var(--muted); }
.cb-selo.atrasada { background: var(--danger-soft); color: var(--danger); }
.cb-selo.conferir { background: var(--warn-soft); color: var(--warn); }
.cb-selo.pago { background: var(--accent-soft); color: var(--accent); }
.cb-acoes { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 760px) {
  .cb-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cb-oque { grid-column: 1 / -1; }
  .cb-valor { text-align: right; grid-column: 3; grid-row: 1; }
  .cb-selo { grid-column: 1 / 3; justify-self: start; }
  .cb-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .cb-item.meu { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-item.meu .cb-selo { grid-column: 1; }
  .cb-item.meu .cb-acoes { grid-column: 1 / -1; }
}
.cb-main { display: grid; gap: 3px; min-width: 0; }
.cb-nome { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cb-nome b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-nome span { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.cb-desc { font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cb-desc i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--panel-3); color: var(--faint); }
.cb-main em { font-style: normal; font-size: 12.5px; color: var(--warn); }
@media (max-width: 760px) { .cb-item { grid-template-columns: 40px minmax(0, 1fr) auto; } .cb-main { grid-column: 2; } }
.cb-desc { display: block; }
.cb-desc i { display: inline-block; margin-right: 6px; vertical-align: 1px; }

/* ---------- escolha de times: ordem ---------- */
.ev-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.ev.vez { border-color: var(--accent); background: var(--accent-soft); }
.ev.eu:not(.vez) { border-color: var(--line-2); }
.ev.fim { opacity: .72; }
.ev-n { font-family: var(--display); font-size: 22px; line-height: 1; text-align: center; color: var(--faint); }
.ev.vez .ev-n { color: var(--accent); }
.ev-esc { display: grid; place-items: center; width: 38px; height: 38px; }
.ev-quem { display: grid; gap: 1px; min-width: 0; }
.ev-quem b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-quem b i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); margin-left: 4px; vertical-align: 1px; }
.ev-quem > span { font-size: 13.5px; color: var(--ink); }
.ev-seta { color: var(--accent); }
.ev-quem small { font-size: 12px; color: var(--faint); }
.ev-est { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel-2); color: var(--muted); }
.ev-est.vez { background: var(--accent); color: var(--accent-ink); }
.ev-est.trocou { background: var(--accent-soft); color: var(--accent); }
.ev-est.ficou { background: var(--panel-2); color: var(--ink); }
@media (max-width: 480px) { .ev { grid-template-columns: 28px 34px minmax(0, 1fr); } .ev-est { grid-column: 3; justify-self: start; } .ev-n { font-size: 19px; } }

/* ---------- mural da liga ---------- */
.mu-abas { width: fit-content; }
.mu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mu { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.mu-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.mu-ic svg { width: 18px; height: 18px; }
.mu.mu-jogo .mu-ic { color: var(--pos-def); }
.mu.mu-mercado .mu-ic { color: var(--accent); }
.mu.mu-leilao .mu-ic { color: var(--warn); }
.mu.mu-trofeu { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.mu.mu-trofeu .mu-ic { color: var(--warn); }
.mu-esc { display: flex; gap: 4px; min-width: 40px; }
.mu-esc img { object-fit: contain; }
.mu-txt { display: grid; gap: 2px; min-width: 0; }
.mu-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mu-txt span { font-size: 13px; color: var(--muted); }
.mu-fim { display: grid; gap: 4px; justify-items: end; white-space: nowrap; }
.mu-fim time { font-size: 12px; color: var(--faint); }
.mu-selo { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.mu-nav { display: flex; gap: 8px; justify-content: center; }
@media (max-width: 560px) { .mu { grid-template-columns: auto minmax(0, 1fr); } .mu-ic { display: none; } .mu-fim { grid-column: 2; grid-auto-flow: column; justify-content: space-between; justify-items: start; } }

/* ---------- nível e marcos do técnico ---------- */
.nv { padding: 16px; display: grid; gap: 12px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(180deg, var(--accent-soft), var(--panel)); }
.nv-topo { display: flex; align-items: center; gap: 14px; }
.nv-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); flex: none; }
.nv-ic svg { width: 28px; height: 28px; }
.nv-nome { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nv-nome small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nv-nome b { font-size: 30px; line-height: 1; }
.nv-pts { text-align: right; font-size: 12.5px; color: var(--muted); }
.nv-pts b { display: block; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.nv-barra { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.nv-barra i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.nv-leg { margin: 0; font-size: 13px; color: var(--muted); }
.nv-leg b { color: var(--ink); }
.mc-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mc { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.mc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); color: var(--faint); }
.mc-ic svg { width: 20px; height: 20px; }
.mc.feito { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mc.feito .mc-ic { background: var(--accent); color: var(--accent-ink); }
.mc-txt { display: grid; gap: 3px; min-width: 0; }
.mc-txt b { font-size: 14.5px; font-weight: 700; }
.mc-txt > span { font-size: 12.5px; color: var(--muted); }
.mc-txt small { font-size: 11.5px; color: var(--faint); }
.mc-bar { display: block; height: 5px; border-radius: 999px; background: var(--panel-3); overflow: hidden; margin-top: 3px; }
.mc-bar i { display: block; height: 100%; background: var(--accent); }

/* ---------- diretoria e base ---------- */
.dr-conf { padding: 16px; display: grid; gap: 12px; }
.dr-topo { display: flex; align-items: center; gap: 14px; }
.dr-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); color: var(--accent); flex: none; }
.dr-ic svg { width: 26px; height: 26px; }
.dr-topo > div { flex: 1; display: grid; gap: 2px; }
.dr-topo small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-topo b { font-size: 24px; line-height: 1.05; }
.dr-pct { font-family: var(--display); font-size: 38px; line-height: 1; }
.dr-pct i { font-style: normal; font-size: 18px; color: var(--muted); }
.dr-conf.alerta .nv-barra i, .dr-conf.alerta .dr-pct { background-color: var(--warn); color: var(--warn); }
.dr-conf.alerta .nv-barra i { background: var(--warn); }
.dr-conf.mau .nv-barra i { background: var(--danger); }
.dr-conf.mau .dr-pct { color: var(--danger); }
.dr-metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dr-meta { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.dr-meta.cumprida { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dr-meta.falhou { opacity: .75; }
.dr-mic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); color: var(--muted); }
.dr-mic svg { width: 20px; height: 20px; }
.dr-txt { display: grid; gap: 2px; min-width: 0; }
.dr-txt b { font-size: 15px; font-weight: 700; }
.dr-txt span { font-size: 13px; color: var(--muted); }
.dr-fim { display: grid; gap: 4px; justify-items: end; }
.dr-fim b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--accent); }
.dr-fim .cb-selo { font-style: normal; }
.bs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bs { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.bs-ov { display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; background: var(--accent-soft); }
.bs-ov b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--accent); }
.bs-ov small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bs-txt { display: grid; gap: 4px; min-width: 0; }
.bs-txt > b { font-size: 16px; }
.bs-txt > span { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.bs-pot { display: grid !important; grid-template-columns: 1fr auto; gap: 8px; align-items: center; max-width: 260px; }
.bs-bar { height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bs-bar i { display: block; height: 100%; background: var(--accent); }
.bs-acoes { display: grid; gap: 6px; justify-items: end; }
@media (max-width: 640px) {
  .dr-meta { grid-template-columns: 40px minmax(0, 1fr); } .dr-fim { grid-column: 2; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
  .bs { grid-template-columns: 56px minmax(0, 1fr); } .bs-acoes { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; }
}

/* atalhos do menu (negociação, leilão...) com o estado da janela */
.tiles { gap: 8px; }
.tile { padding: 10px 4px 9px; gap: 5px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.tile i { display: none; }
.tile-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--panel-2); color: var(--muted); transition: background .2s, color .2s; }
.tile-ic svg { width: 20px; height: 20px; }
.tile-nome { font-size: 11px; font-weight: 700; line-height: 1.15; color: var(--muted); min-height: 2.3em; display: grid; align-items: center; }
.tile-est { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--panel-2); color: var(--faint); }
.tile.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(180deg, var(--accent-soft), var(--panel)); }
.tile.on .tile-ic { background: var(--accent); color: var(--accent-ink); }
.tile.on .tile-nome { color: var(--ink); }
.tile.on .tile-est { background: var(--accent-soft); color: var(--accent); }
.tile.off { opacity: .8; }
.tile.off .tile-est { background: var(--danger-soft); color: var(--danger); }
.tile:hover .tile-ic { color: var(--ink); }
.tile.on:hover .tile-ic { color: var(--accent-ink); }

/* ---------- base: treino dos garotos ---------- */
.ju-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ju { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); align-content: start; }
.ju-topo { display: flex; align-items: center; gap: 12px; }
.ju-id { flex: 1; display: grid; gap: 4px; min-width: 0; }
.ju-id b { font-size: 17px; }
.ju-id > span { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.ju-ov { display: grid; justify-items: center; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.ju-ov b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--accent); }
.ju-ov small { font-size: 11px; color: var(--muted); }
.ju-prog { display: grid; gap: 6px; }
.ju-prog small { font-size: 12.5px; color: var(--muted); }
.ju-foco { display: grid; gap: 8px; }
.ju-foco > small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ju-foco p { margin: 0; font-size: 12.5px; color: var(--muted); }
.ju-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ju-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.ju-chips button svg { width: 15px; height: 15px; }
.ju-chips button:hover { color: var(--ink); }
.ju-chips button.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.ba-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ba { display: grid; grid-template-columns: 112px 1fr 28px 34px; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.ba-bar { height: 7px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.ba-bar i { display: block; height: 100%; border-radius: 999px; background: var(--faint); }
.ba.foco { color: var(--ink); }
.ba.foco .ba-bar i { background: var(--accent); }
.ba b { text-align: right; font-variant-numeric: tabular-nums; }
.ba em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); }
.ju-mais summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ju-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.pj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pj { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.pj-txt { display: grid; gap: 3px; min-width: 0; }
.pj-txt > b { font-size: 15px; }
.pj-txt > span { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pj-pot { color: var(--accent); }
.pj-fim { display: grid; gap: 6px; justify-items: end; }
@media (max-width: 480px) { .ju-grade { grid-template-columns: 1fr; } .ba { grid-template-columns: 96px 1fr 26px 30px; } }

.vj { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); white-space: nowrap; }
.vj.barato { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.vj.caro { color: #ff8a7a; border-color: rgba(255, 138, 122, .45); }
.vj.justo { color: var(--muted); }

.op-abas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.op-abas button { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.op-abas button svg { width: 16px; height: 16px; }
.op-abas button.on { background: var(--accent); border-color: var(--accent); color: #0b0b10; }
.op-dica { margin: 0; font-size: 13px; color: var(--muted); }
.op-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-card { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "foto id ov" "foto id preco"; gap: 2px 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.op-card > :first-child { grid-area: foto; }
.op-card:hover { border-color: var(--line-2); }
.op-id { grid-area: id; display: grid; gap: 4px; min-width: 0; }
.op-id > b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.op-ov { grid-area: ov; display: grid; justify-items: end; line-height: 1; }
.op-ov b { font-family: Anton, sans-serif; font-size: 26px; font-weight: 400; color: var(--accent); }
.op-ov small, .op-preco small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.op-preco { grid-area: preco; display: grid; justify-items: end; font-size: 13px; }
.op-selo { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); }
.op-selo.bom { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.op-escolha { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.op-pick { flex: none; scroll-snap-align: start; width: 82px; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.op-pick b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.op-pick span { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.op-pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.op-venda { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: 14px; }
.op-venda b { color: var(--accent); }

.rv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; }
.rv:hover { border-color: var(--line-2); }
.rv.meu { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.rv-pos { font-family: Anton, sans-serif; font-size: 20px; color: var(--muted); text-align: center; }
.rv.top .rv-pos { color: var(--accent); }
.rv-id { display: grid; gap: 3px; min-width: 0; }
.rv-id > b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-id > b em { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-left: 4px; }
.rv-id > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-barra { display: block; height: 4px; border-radius: 99px; background: var(--line); margin-top: 3px; overflow: hidden; }
.rv-barra i { display: block; height: 100%; border-radius: 99px; background: var(--accent); opacity: .75; }
.rv-caixa { display: grid; justify-items: end; gap: 2px; text-align: right; }
.rv-caixa b { font-size: 15px; white-space: nowrap; }
.rv-caixa small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.sl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-msg { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.sl-msg.nova { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sl-msg.respondida { opacity: .62; }
.sl-msg > header { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sl-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sl-ic svg { width: 15px; height: 15px; }
.sl-msg > header time { margin-left: auto; color: var(--muted); font-size: 12px; }
.sl-nova { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: #0b0b10; }
.sl-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.sl-corpo p, .sl-resp { margin: 0; font-size: 14.5px; line-height: 1.45; }
.sl-corpo:not(:has(.rosto)) { grid-template-columns: 1fr; }
.sl-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-resp { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sl-resp svg { width: 14px; height: 14px; color: var(--accent); }
.sl-resumo { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.sl-resumo b { color: var(--ink); font-size: 15px; }
.sl-vest { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-mot { color: var(--muted); font-size: 12px; }
.sl-hum { display: grid; gap: 4px; justify-items: end; min-width: 92px; font-size: 12.5px; }
.sl-hum .nv-barra { width: 92px; }
.sl-hum.mau b { color: #ff8a7a; }
.sl-hum.alerta b { color: #ffc861; }
.sl-hum.bom b { color: var(--accent); }

.sl-como { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.sl-como p { margin: 0; }
.sl-como h3 { margin: 6px 0 0; font-size: 15px; }
.sl-como ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }


/* ---------- entrada: acesso à página pública ---------- */
.entrada-ou { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.entrada-ou::before, .entrada-ou::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(255,255,255,.12)); }
.entrada-liga { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-weight: 700; text-decoration: none; border-radius: 12px; }
.entrada-liga svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrada-liga:hover { background: var(--accent); color: #0b0b10; }
.entrada-liga-dica { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- aviso de resultado a confirmar ---------- */
dialog.resultado-pop { width: min(460px, calc(100vw - 32px)); text-align: center; }
.rp-topo { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
dialog.resultado-pop h3 { margin: 6px 0 14px; font-size: 24px; }
.rp-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 12px; }
.rp-placar span { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.rp-placar b { font-size: 34px; color: var(--accent); }
dialog.resultado-pop p { margin-bottom: 16px; }
.rp-bt { flex-direction: column; align-items: stretch; }
.rp-bt .bt { width: 100%; justify-content: center; }

dialog.resultado-pop { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.rp-sumula { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin: 0 0 14px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.rp-sumula h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rp-linha { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 0; font-size: 13.5px; }
.rp-nome { overflow-wrap: anywhere; }
.rp-st { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.rp-st i { font-style: normal; font-size: 12.5px; }
.rp-am, .rp-vm { width: 9px; height: 13px; border-radius: 2px; display: inline-block; }
.rp-am { background: #f5c518; } .rp-vm { background: #e5383b; }
.rp-nota { padding: 1px 6px; border-radius: 6px; background: var(--accent); color: #0b0b10; font-weight: 700; }
.rp-vazio { margin: 0; font-size: 12.5px; }
@media (max-width: 480px) { .rp-sumula { grid-template-columns: 1fr; } }

.rp-estat { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.rp-e { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.rp-e span { color: var(--muted); text-align: center; }
.rp-e b:first-child { text-align: left; } .rp-e b:last-child { text-align: right; }

.rp-eventos { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.rp-ev { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.rp-ev i { grid-column: 2; grid-row: 1; font-style: normal; text-align: center; color: var(--muted); font-size: 12px; }
.rp-ev.m span { grid-column: 1; grid-row: 1; text-align: right; }
.rp-ev.v span { grid-column: 3; grid-row: 1; text-align: left; }