.ilt-wrap{width:100%; background:rgba(0,0,0,.02); border-radius:16px; padding:14px; overflow:auto; box-sizing: border-box;}
.ilt-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:10px;}
.ilt-head .t{font-weight:1000; font-size:18px; letter-spacing:.4px;}
.ilt-head .s{opacity:.7; font-size:12px;}

.ilt-table{width:100%; border-collapse:separate; border-spacing:0 8px; width: 100%;}
.ilt-table th{font-size:12px; opacity:.65; font-weight:900; text-transform:uppercase; letter-spacing:.4px; padding:0 10px 6px; text-align:center; white-space:nowrap;}
.ilt-table th:first-child,
.ilt-table td:first-child{padding-left:10px; text-align:left;}
.ilt-table th:nth-child(2),
.ilt-table td:nth-child(2){text-align:left;}
.ilt-table a {color: #000;}

.ilt-row td{
  background:#fff;
  padding:10px 10px;
  text-align:center;
  white-space:nowrap;
}
.ilt-row td:first-child{border-top-left-radius:14px; border-bottom-left-radius:14px;}
.ilt-row td:last-child{border-top-right-radius:14px; border-bottom-right-radius:14px;}

.ilt-place{font-weight:1000;}
.ilt-team{font-weight:1000; text-decoration:none; color:#2f43ff;}
.ilt-team--tbd{color:#222; opacity:.6;}

.ilt-gfga{font-weight:900;}
.ilt-diff{font-weight:900; opacity:.85;}

.ilt-streak{font-weight:1000;}
.ilt-streak.w{color:#149c4b;}
.ilt-streak.l{color:#c0392b;}
.ilt-streak.none{opacity:.45;}

.ilt-empty{padding:12px;border-radius:12px;background:rgba(0,0,0,.03);}

/* Зона плей-офф 1–8 */
.ilt-row.playoff td{
  background: rgba(46,204,113,.10);
  border-color: rgba(46,204,113,.22);
}

/* строка команды (если id передан) */
.ilt-row.mine td{
  font-weight: bold;
}

/* 100% ширины контейнера + компактно */
.ilpo-root{width:100%; background:rgba(0,0,0,.02); border-radius:16px; padding:14px; overflow:auto; box-sizing: border-box;}
.ilpo-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:10px;}
.ilpo-head .t{font-weight:1000; font-size:18px; letter-spacing:.4px;}
.ilpo-head .s{opacity:.7; font-size:12px;}

/* 3 колонки, адаптивно по ширине */
.ilpo-bracket{
  width:100%;
  display:grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1.15fr);
  gap: 16px;
  align-items:start;
}

/* заголовки */
.ilpo-col-title{font-weight:1000; font-size:32px; margin:0 0 10px; line-height:1; text-transform:uppercase;}

/* карточки */
.ilpo-card{
  background:#fff;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  position:relative;
}

.ilpo-card-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.ilpo-series{font-size:14px; opacity:.75;}

.ilpo-badge{font-size:13px; padding:5px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:rgba(0,0,0,.03);}
.ilpo-badge--scheduled{background:rgba(52,152,219,.10);}
.ilpo-badge--live{background:rgba(241,196,15,.14);}
.ilpo-badge--finished{background:rgba(46,204,113,.12);}

.ilpo-line{
  display:grid;
  grid-template-columns: 40px 1fr 30px;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border-radius:14px;
}
.ilpo-line + .ilpo-line{margin-top:8px;}
.ilpo-seed{opacity:.55; font-weight:900;}
.ilpo-team{font-weight:900; text-decoration:none; color:#2f43ff;}
.ilpo-team:hover{text-decoration:underline;}
.ilpo-team--tbd{color:#222; opacity:.55; font-weight:900;}
.ilpo-score{font-weight:1000; text-align:right; font-size:20px;}
.ilpo-win{background:rgba(46,204,113,.12);}
.ilpo-lose{opacity:.85;}

.ilpo-empty{padding:12px;border-radius:12px;background:rgba(0,0,0,.03);}
.ilpo-emptyline{opacity:.35; font-weight:900; text-align:center; padding:18px 0;}

/* layout колонок */
.ilpo-qf{display:grid; grid-template-rows: auto auto auto auto; gap:12px;}
.ilpo-sf{display:grid; grid-template-rows: 1fr 1fr; gap: 56px; padding-top: 40px;}
.ilpo-f {padding-top: 132px;}

/* ===== ЛИНИИ: ровные, привязаны к конкретным карточкам ===== */
:root{
  --ilpo-line: #ddd;
  --ilpo-gap: 16px;          /* как gap в grid */
  --ilpo-h: 16px;            /* длина горизонтали */
  --ilpo-w: 2px;
}

/* короткая горизонталь вправо от QF и SF */
.ilpo-qf .ilpo-card::after,
.ilpo-sf .ilpo-card::after{
  content:"";
  position:absolute;
  right: calc(-1 * var(--ilpo-gap) / 2);
  top: 50%;
  width: calc(var(--ilpo-gap) / 2);
  height: var(--ilpo-w);
  background: var(--ilpo-line);
  transform: translateY(-50%);
}

/* QF: вертикаль пары рисуем на первой карточке пары.
   Пары: (QF1 + QF4) -> SF1 и (QF2 + QF3) -> SF2
   У нас порядок QF: 1,2,3,4 (по seed1)
   Значит пары: (1 и 4) - это "верх+низ", (2 и 3) - "середина"
   Для визуально правильной скобки:
   - делаем вертикаль от центра QF1 до центра QF4 (большая)
   - и вертикаль от центра QF2 до центра QF3 (малая)
*/
.ilpo-qf .ilpo-card.qf-pair14::before{
  content:"";
  position:absolute;
  right: calc(-1 * var(--ilpo-gap) / 2);
  top: 50%;
  width: var(--ilpo-w);
  height: calc( (100% + 12px + 100% + 12px + 100% + 12px + 100%) - 0px ); /* fallback, перекрываем ниже через grid-оверлей */
  background: transparent;
}

/* Надёжнее: рисуем вертикали отдельными overlay-элементами внутри колонки QF */
.ilpo-qfcol{position:relative;}
.ilpo-qfcol .ilpo-vline{
  position:absolute;
  right: calc(-1 * var(--ilpo-gap) / 2);
  width: var(--ilpo-w);
  background: var(--ilpo-line);
  pointer-events:none;
}
/* вертикаль для пары QF1(center)->QF4(center) */
.ilpo-qfcol .ilpo-vline.v14{
  top: calc( ( (var(--qf1c)) ) );
  height: calc( (var(--qf4c)) - (var(--qf1c)) );
}
/* вертикаль для пары QF2(center)->QF3(center) */
.ilpo-qfcol .ilpo-vline.v23{
  top: calc( ( (var(--qf2c)) ) );
  height: calc( (var(--qf3c)) - (var(--qf2c)) );
}

/* SF колонка: вертикаль между SF1 и SF2 */
.ilpo-sfcol{position:relative;}
.ilpo-sfcol .ilpo-vline.vsf{
  position:absolute;
  right: calc(-1 * var(--ilpo-gap) / 2);
  width: var(--ilpo-w);
  background: var(--ilpo-line);
  top: calc(var(--sf1c));
  height: calc(var(--sf2c) - var(--sf1c));
  pointer-events:none;
}