/* ---------- MATA-MATA (público) ---------- */
    .chave-section {
      margin-bottom: 30px
    }

    .chave-head {
      margin-bottom: 16px
    }

    .bracket {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    @media(min-width:760px) {
      .bracket {
        flex-direction: row;
        align-items: stretch;
        gap: 34px;
        overflow-x: auto;
        padding-bottom: 6px
      }
    }

    .bracket-col {
      position: relative;
      display: flex;
      flex-direction: column
    }

    @media(min-width:760px) {
      .bracket-col {
        min-width: 260px;
        flex: none
      }
    }

    /* título da fase tem altura FIXA e fica FORA do container que distribui
       os cards verticalmente (.bracket-col-body). Se o título entrasse nesse
       cálculo, cada coluna teria uma proporção de espaço diferente (o texto
       "SEMIFINAL" não tem a mesma altura reservada que "FINAL" a menos que
       seja fixada), e isso é o que fazia os quadrados ficarem desalinhados
       entre si. Com o título isolado, sobra só os cards dividindo o espaço,
       e a centralização entre fases fica exata (ver .bracket-col-body). */
    .bracket-col h4 {
      margin: 0 0 12px;
      height: 15px;
      line-height: 15px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--label)
    }

    .bracket-col-body {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    /* só no desktop (colunas lado a lado) a centralização entre fases faz
       sentido — no mobile o .bracket empilha tudo em sequência, cada
       confronto no fluxo normal, sem cálculo de centro nenhum. */
    @media(min-width:760px) {
      .bracket-col-body {
        flex: 1;
        justify-content: space-around
      }
    }

    .confronto-card {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 16px
    }

    /* altura fixa por coluna (jogo único x ida-volta, sabido já no render,
       sem medir nada) — todo card de uma mesma coluna precisa ter a MESMA
       altura pra .bracket-col-body centralizar certo entre fases. */
    @media(min-width:760px) {
      .confronto-card {
        height: 122px;
        display: flex;
        flex-direction: column;
        justify-content: center
      }

      .bracket-col.iv .confronto-card {
        height: 140px
      }
    }

    .cf-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px
    }

    .cf-row .side {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      min-width: 0;
      text-align: center
    }

    .cf-row .tn {
      font-weight: 600;
      font-size: 12.5px;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cf-row .tn.win {
      font-weight: 800;
      color: var(--ac, var(--green))
    }

    .cf-tbd {
      color: var(--label);
      font-style: italic;
      font-weight: 600 !important
    }

    .confronto-foot {
      margin-top: 11px;
      padding-top: 10px;
      border-top: 1px dashed var(--line);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .confronto-legenda,
    .confronto-badge {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--muted)
    }

    .confronto-badge.pendente {
      color: #b8741c
    }

    /* ---------- MATA-MATA (admin) ---------- */
    .adm-row.confronto {
      flex-direction: column;
      align-items: stretch;
      gap: 10px
    }

    .cf-check {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      color: var(--muted);
      white-space: nowrap
    }

    .cf-fases-form {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      margin: 12px 0
    }

    .cf-fase-bloco {
      margin-bottom: 18px
    }

    .cf-fase-bloco h4 {
      margin: 0 0 8px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--label)
    }

    .cf-times-fixo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 13.5px
    }

    .cf-times-fixo .tn {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cf-times {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cf-time-pick {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0
    }

    .cf-time-pick select,
    .cf-time-pick input {
      width: 100%
    }

    .cf-vs {
      color: var(--label);
      font-size: 13px;
      flex: none
    }

    .cf-placar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding-top: 10px;
      border-top: 1px dashed var(--line)
    }

    .cf-placar .adm-score-in {
      width: 60px
    }

    .cf-logistica-leg {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .cf-logistica-leg select.sel {
      min-width: 150px
    }

    .cf-logistica-leg input[type="date"] {
      width: 145px
    }

    .cf-resultado {
      font-size: 12.5px;
      color: var(--muted);
      font-weight: 600;
      flex: 1 1 100%
    }

    .cf-resultado.ok {
      color: var(--green-d)
    }

    .cf-resultado.pend {
      color: #b8741c
    }

    .cf-resultado .sel {
      font-size: 12.5px;
      padding: 4px 26px 4px 8px;
      background-position: right 8px center;
      background-size: 9px
    }

    .cf-del {
      flex: none
    }