/* 29.08.2026: скопировано из Content/hockey.css (docs/knowledge/reference_hockey_playbook.md §11 —
   зеркалить визуальный язык хоккея/футбола, не изобретать свой). Префикс классов hk- -> tn-,
   токен --ice -> --court. .m-badge/.m-live/.m-ht/.m-ft НЕ переименованы — общая конвенция статус-пилюли
   с MatchPage.aspx (feedback_hockey_match_card_mirror_football_matchpage). */
/* =====================================================================
   Раздел «Теннис» (/tennis/*). Один файл на пять страниц — у футбольных
   хабов те же правила разъехались по копиям в каждом .aspx и разошлись.

   Токены дублируют набор LeaguePage/RefereesPage: /Content/Site.css пустой,
   и без :root каждое объявление с var() отбрасывается целиком (карточки
   теряют фон и рамку, тёмная тема не работает вовсе).
   ===================================================================== */

:root {
    --card-bg:#fff; --card-border:#e8e8e8; --text:#222; --text-muted:#888; --text-soft:#555;
    --accent-green:#2e7d32; --accent-green-dark:#1b5e20; --accent-green-soft:#e8f5e9;
    --accent-red:#c62828; --accent-red-soft:#fdecea; --accent-orange:#e65100; --accent-blue:#1565c0;
    --accent-yellow-soft:#fffbea;
    --bar-track:#eee; --row-hover:#f9f9f9; --page-bg:#f5f5f5; --row-border:#f0f0f0;
    --court:#0277bd; --court-soft:#e1f5fe;
    /* 01.09.2026: --ice в tennis.css НЕ был определён нигде (ни здесь, ни в
       tennis-grid.css), а использовался 18 раз — все эти объявления браузер
       отбрасывал: активный пункт шапки, полоска силы, .tn-bar i.h. Теннисная
       палитра называется --court; заводим --ice его псевдонимом, чтобы
       чинить в одном месте, а не переписывать 18 мест. */
    --ice:#0277bd;
    /* 01.09 (вечер): «чернильные» варианты для текста НА цветной заливке —
       --ice/--accent-orange на green-soft/red-soft дают 3.3-4.2:1 при 12px. */
    --ice-ink:#01579b; --orange-ink:#bf360c;
    --ink-win:#2e7d32; --ink-loss:#c62828;
    /* 02.09.2026 (владелец: «сделай цветом своим под сайт, а не стандартным» +
       «не фон зелёным, а цвет шрифта менять, фон цветной убрать»): исход матча
       в превью карточки красится ТЕКСТОМ в палитре раздела, а не стандартной
       зелёно-красной заливкой. Победа — корт (--court, фирменный синий тенниса),
       поражение — приглушённый серо-синий: смысл несут буква П/У и счёт, цвет
       только подсказывает. Токены здесь, чтобы менять оттенок в одном месте. */
    --tn-win:#1b5e20; --tn-loss:#c62828; --tn-win-edge:#2e7d32;
    --tn-loss-edge:#c62828;
}
body.dark-theme {
    --card-bg:#252525; --card-border:#333; --text:#e0e0e0; --text-muted:#888; --text-soft:#bbb;
    --accent-green:#81c784; --accent-green-dark:#66bb6a; --accent-green-soft:#1e2b1e;
    --accent-red:#ef5350; --accent-red-soft:#3a2323; --accent-orange:#ffb74d; --accent-blue:#64b5f6;
    --accent-yellow-soft:#332d1a;
    --bar-track:#3a3a3a; --row-hover:#2c2c2c; --page-bg:#1a1a1a; --row-border:#333;
    --court:#4fc3f7; --court-soft:#12242e;
    --ice:#4fc3f7;
    /* в тёмной теме исходные оттенки уже дают 7-8:1 на тёмных заливках */
    --ice-ink:#4fc3f7; --orange-ink:#ffb74d;
    --ink-win:#81c784; --ink-loss:#ef5350;
    --tn-win:#81c784; --tn-loss:#ef5350; --tn-win-edge:#81c784;
    --tn-loss-edge:#ef5350;
}

body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       color:#333; background:var(--page-bg); margin:0; padding:0; line-height:1.55; }
body.dark-theme { color:#ddd; }
.container { max-width:1100px; margin:0 auto; padding:18px 20px 40px; }
.tn-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- шапка (те же правила, что на TeamPage/LeaguePage/RefereesPage) ---- */
.sg-topnav { width:100vw; margin-left:calc(50% - 50vw); background:#f5f5f5; border-bottom:1px solid #ddd; font-size:12px; color:#777; }
.sg-topnav-inner { max-width:1600px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.sg-topnav a { color:#1565C0; text-decoration:none; font-weight:500; display:inline-flex; align-items:center; }
.sg-topnav a:hover { text-decoration:underline; }
.sg-topnav a.tn-nav-active { color:var(--ice); font-weight:700; }
.sg-topnav .sg-brand { padding:0; line-height:0; }
.sg-topnav .sg-brand img { width:18px; height:18px; border-radius:50%; animation:sgTopnavPulse 2s ease infinite; transition:transform .2s; }
.sg-topnav .sg-brand:hover img { animation:none; transform:scale(1.18); }
@keyframes sgTopnavPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(230,81,0,.45)} 50%{opacity:.85;box-shadow:0 0 0 5px rgba(230,81,0,0)} }
.sg-topnav-right { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.sg-topnav #mainSignInBtn { display:inline-block; font-size:12px; padding:5px 14px; border:1px solid #ccc; border-radius:4px; color:#333; text-decoration:none; font-weight:600; background:#fff; }
.sg-topnav #tgUserName { font-size:12px; color:#2e7d32; font-weight:600; cursor:pointer; }
body.dark-theme .sg-topnav { background:#222; border-bottom:1px solid #333; color:#888; }
body.dark-theme .sg-topnav a { color:#64b5f6; }
body.dark-theme .sg-topnav a.tn-nav-active { color:var(--ice); }
.sg-topnav .sg-topnav-row1, .sg-topnav .sg-nav-left, .sg-topnav .sg-topnav-row2 { display:contents; }
@media (max-width:768px) {
    .sg-topnav .sg-topnav-inner { display:block; padding:0; }
    .sg-topnav .sg-topnav-row1 { display:flex; align-items:center; gap:10px; padding:8px 10px 4px; }
    .sg-topnav .sg-nav-left { display:flex; align-items:center; gap:15px; overflow-x:auto; min-width:0; flex:1 1 auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:3px; }
    .sg-topnav .sg-nav-left::-webkit-scrollbar { height:3px; }
    .sg-topnav .sg-nav-left::-webkit-scrollbar-thumb { background:#cfd8dc; border-radius:3px; }
    .sg-topnav .sg-nav-left > a { flex:0 0 auto; }
    .sg-topnav .sg-topnav-right { position:static; transform:none; flex:0 0 auto; display:inline-flex; gap:6px; }
    .sg-topnav .sg-topnav-row2 { display:block; text-align:center; padding:2px 10px 9px; }
    .sg-topnav .sg-topnav-row2 > a { display:inline-block; margin:0 9px; }
    .sg-topnav .lang-current { padding:3px 6px; font-size:10px; }
    .sg-topnav .theme-btn { padding:3px 7px; font-size:12px; }
    .sg-topnav #mainSignInBtn { padding:3px 9px !important; font-size:11px !important; }
}
@media (prefers-reduced-motion: reduce) { .sg-topnav .sg-brand img { animation:none; transition:none; } }

/* ---- общий каркас ---- */
.breadcrumb { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.breadcrumb a { color:var(--accent-blue); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.tn-title { font-size:24px; margin:0 0 6px; color:var(--text); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tn-intro { font-size:14px; color:var(--text-soft); line-height:1.6; margin:0 0 18px; max-width:70ch; }
.tn-h2 { font-size:16px; color:var(--accent-green-dark); margin:22px 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tn-h2 a { color:inherit; text-decoration:none; }
.tn-h2 a:hover { text-decoration:underline; }
body.dark-theme .tn-h2 { color:var(--accent-green); }
.tn-h2 .tn-country { font-size:12.5px; font-weight:500; color:var(--text-soft); }
.tn-h2 .tn-stage { font-size:12px; font-weight:600; color:var(--ice); background:var(--court-soft); border-radius:3px; padding:1px 6px; }
.tn-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; overflow-x:auto; margin-bottom:8px; }
.tn-note { font-size:12px; color:var(--text-soft); margin-top:18px; line-height:1.5; max-width:70ch; }
.tn-empty { font-size:14px; color:var(--text-soft); }
.tn-logo { vertical-align:middle; object-fit:contain; }
/* 3-й период (26.08): следующий тон того же cyan-ряда, что min-1h/min-2h футбольного
   грида (#00ACC1 → #0097A7 → #00838F). Живёт здесь, а не в hockey-grid.css — тот файл
   генерируется экстрактором из live.css и правки в нём перетираются. */
.min-3p { background:#00838F !important; }
/* Флаг страны лиги (24.08) — рамка 1px, иначе белые полосы флагов (США, Финляндия)
   сливаются со светлой карточкой и флаг читается как обрезанный. */
.tn-flag { vertical-align:-1px; margin-right:5px; border-radius:2px;
    box-shadow:0 0 0 1px rgba(0,0,0,.12); }
body.dark-theme .tn-flag { box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.tn-lg-nm { vertical-align:middle; }
.tn-sec { margin-top:26px; }
.tn-sec > h2 { font-size:17px; color:var(--text); margin:0 0 10px; }

/* ---- таблицы ---- */
.tn-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.tn-table th { text-align:left; font-size:12px; font-weight:600; color:var(--text-soft); padding:8px 12px; border-bottom:1px solid var(--card-border); white-space:nowrap; }
.tn-table td { padding:8px 12px; border-bottom:1px solid var(--card-border); color:var(--text); }
.tn-table tr:last-child td { border-bottom:none; }
.tn-table tbody tr:hover { background:var(--row-hover); }
.tn-table a { color:var(--text); text-decoration:none; }
.tn-table a:hover { color:var(--accent-green-dark); text-decoration:underline; }
.tn-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-mid { text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-dim { color:var(--text-soft); }

/* ---- грид матчей дня ----
   Тот же язык, что у футбольного live-грида (Content/live.css): одна строка = один матч,
   лига — мелкой серой строкой ВНУТРИ карточки над названиями команд, а не заголовком-группой
   над куском таблицы. Классы свои (tn-*), потому что мобильная раскладка live.css завязана
   на nth-child футбольных колонок и на чужой таблице спрятала бы не те ячейки. */
.tn-live-wrap { width:100%; overflow-x:auto; }
table.tn-live { width:100%; border-collapse:collapse; font-size:12px; background:var(--card-bg);
    border:1px solid var(--card-border); }
table.tn-live thead th { background:#f0f0f0; color:#333; padding:4px 6px; text-align:center;
    white-space:nowrap; border-bottom:2px solid #bbb; font-size:11px; font-weight:600; }
body.dark-theme table.tn-live thead th { background:#2a2a2a; color:#ccc; border-bottom-color:#444; }
table.tn-live td { padding:3px 6px; border-bottom:1px solid var(--row-border); vertical-align:middle;
    color:var(--text); }
table.tn-live tbody tr:hover td { background:var(--row-hover); }
table.tn-live tbody tr.tn-r-fin td { color:var(--text-soft); }
body.dark-theme table.tn-live tbody tr.tn-r-fin td { background:#1b1b1b; }

.tn-min-td { width:56px; text-align:center; }
.tn-min-badge { display:inline-block; background:#546e7a; color:#fff; border-radius:10px;
    padding:2px 7px; font-size:10px; font-weight:bold; white-space:nowrap; }
.tn-min-badge.is-live { background:var(--accent-red); }

.tn-teams-block { padding:4px 8px !important; }
/* Колонка широкая (у нас три колонки против пятнадцати в футболе), поэтому сам блок
   лиги+команд держим в колонке фиксированной ширины по центру — иначе имена команд
   разъезжаются к краям ячейки и счёт повисает в пустоте. */
.tn-teams-block > div { max-width:460px; margin:0 auto; }
table.tn-live th:nth-child(1), table.tn-live td:nth-child(1) { width:62px; }
table.tn-live th:nth-child(3), table.tn-live td:nth-child(3) { width:120px; text-align:center; }
table.tn-live th:nth-child(4), table.tn-live td:nth-child(4) { width:70px; text-align:center; }
table.tn-live th:nth-child(5), table.tn-live td:nth-child(5) { width:120px; text-align:center; }
table.tn-live th:nth-child(6), table.tn-live td:nth-child(6) { width:96px; text-align:center; }
table.tn-live th:nth-child(7), table.tn-live td:nth-child(7) { width:96px; text-align:center; }
table.tn-live th:nth-child(8), table.tn-live td:nth-child(8) { width:72px; text-align:center; }
table.tn-live th:nth-child(9), table.tn-live td:nth-child(9) { width:78px; text-align:center; }
table.tn-live th:nth-child(10), table.tn-live td:nth-child(10) { width:78px; text-align:center; }
table.tn-live th:nth-child(11), table.tn-live td:nth-child(11) { width:140px; }
.tn-x12 { white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-x12 span { display:inline-block; min-width:28px; font-size:11px; }
.tn-x12 .tn-oo1 { color:var(--ice); font-weight:600; } .tn-x12 .tn-oo2 { color:var(--accent-orange); font-weight:600; }
.tn-x12 .tn-oox { color:var(--text-muted); }
.tn-x12 .tn-oo-src { display:block; min-width:0; font-size:9.5px; color:var(--accent-red); font-weight:600; }
.tn-live-p { display:block; font-size:9.5px; color:var(--text-muted); margin-top:1px; }
.tn-sog { display:block; font-weight:600; }
.tn-d5 { display:block; font-size:10px; color:var(--text-muted); }
.tn-d5.h { color:var(--ice); font-weight:600; } .tn-d5.a { color:var(--accent-orange); font-weight:600; }
.tn-pwr { display:flex; align-items:center; gap:4px; font-size:10.5px; font-variant-numeric:tabular-nums; }
.tn-pwr .h { color:var(--ice); font-weight:600; } .tn-pwr .a { color:var(--accent-orange); font-weight:600; }
.tn-pwr-bar { flex:1 1 auto; height:5px; background:var(--accent-orange); border-radius:3px; overflow:hidden; min-width:36px; }
.tn-pwr-bar i { display:block; height:100%; background:var(--ice); }
.tn-pwr-pct { font-size:10px; color:var(--text-muted); margin-top:1px; }
.tn-form { display:flex; gap:2px; justify-content:center; margin:1px 0; }
.tn-form i { display:inline-block; width:13px; height:13px; line-height:13px; border-radius:3px; font-size:9px; font-style:normal; font-weight:700; color:#fff; text-align:center; background:#9e9e9e; }
.tn-form i.w { background:#2e7d32; } .tn-form i.l { background:#c62828; } .tn-form i.ot { opacity:.6; }
.tn-line { display:block; font-weight:600; }
.tn-oo { display:block; font-size:10px; color:var(--text-muted); }
.tn-hit { display:block; font-size:10px; color:var(--text-muted); }
.tn-hit b { font-weight:600; } .tn-hit b.hi { color:#2e7d32; } .tn-hit b.lo { color:#c62828; }
body.dark-theme .tn-hit b.hi { color:#66bb6a; } body.dark-theme .tn-hit b.lo { color:#ef5350; }
.tn-league-row { display:flex; align-items:center; gap:5px; font-size:10px; line-height:1.3;
    color:#6b7280; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:2px; }
body.dark-theme .tn-league-row { color:#9aa4b2; }
.tn-league-row a { color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; }
.tn-league-row a:hover { text-decoration:underline; }
.tn-league-row .tn-logo { width:14px; height:14px; flex:0 0 auto; }
.tn-league-row .tn-stage-in { color:var(--ice); font-weight:700; }
.tn-league-row .tn-cc { font-weight:500; opacity:.75; }

.tn-teams-row { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.tn-teams-row .tn-t { font-size:13px; font-weight:500; flex:1 1 0; min-width:0; display:flex;
    align-items:center; gap:5px; overflow:hidden; }
.tn-teams-row .tn-t span { overflow:hidden; text-overflow:ellipsis; }
.tn-teams-row .tn-t.h { justify-content:flex-end; text-align:right; }
.tn-teams-row .tn-t.a { justify-content:flex-start; text-align:left; }
.tn-teams-row .tn-t.win { font-weight:700; color:var(--text); }
/* Только ссылки КОМАНД становятся флексом (логотип + имя в строку). Ссылка счёта под это
   правило попадать не должна: флекс-бокс блочный, и бейдж «ОТ» рядом со счётом уезжал
   на вторую строку, разъезжая высоту строк грида. */
.tn-teams-row .tn-t a { color:inherit; text-decoration:none; display:flex; align-items:center;
    gap:5px; min-width:0; overflow:hidden; }
.tn-teams-row a:hover { color:var(--accent-blue); }
.tn-teams-row .tn-logo { width:16px; height:16px; flex:0 0 auto; border-radius:50%; background:#f0f0f0; }
.tn-sc { font-size:15px; font-weight:700; flex:0 0 auto; padding:0 8px; white-space:nowrap;
    font-variant-numeric:tabular-nums; }
.tn-sc a { color:inherit; text-decoration:none; }
.tn-sc a:hover { color:var(--accent-blue); }
.tn-sc .tn-ot { font-size:10px; font-weight:700; color:var(--ice); margin-left:3px; vertical-align:top; }

/* Строки-таблицы на остальных страницах (H2H, матчи команды и лиги) */
.tn-row-team { white-space:nowrap; }
.tn-row-team .tn-logo { margin-right:7px; }
.tn-row-score { font-weight:700; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-row-score .tn-ot { font-size:10.5px; font-weight:600; color:var(--ice); margin-left:3px; vertical-align:top; }
.tn-win { font-weight:600; }
.tn-periods { font-size:11.5px; color:var(--text-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-series { font-size:11.5px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }

/* Мобильная раскладка грида — как в футболе: колонки-подробности прячем,
   команды встают в два ряда, счёт справа. */
@media (max-width:760px) {
    table.tn-live { border-left:0; border-right:0; }
    table.tn-live th, table.tn-live td { width:auto !important; }
    .tn-teams-block > div { max-width:none; margin:0; }
    table.tn-live thead { display:none; }
    table.tn-live, table.tn-live tbody, table.tn-live tr, table.tn-live td { display:block; width:auto; }
    table.tn-live tbody tr { display:flex; flex-wrap:wrap; align-items:center; padding:4px 10px;
        border-bottom:1px solid var(--row-border); }
    table.tn-live tbody tr td { border:0; padding:0; }
    .tn-min-td { order:1; flex:0 0 auto; width:auto; margin-right:8px; }
    .tn-teams-block { order:2; flex:1 1 auto; width:auto !important; min-width:0; padding:0 !important; }
    .tn-teams-row { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
        column-gap:8px; row-gap:1px; align-items:center; }
    .tn-teams-row .tn-t.h { grid-column:1; grid-row:1; justify-content:flex-start; text-align:left; }
    .tn-teams-row .tn-t.a { grid-column:1; grid-row:2; }
    .tn-sc { grid-column:2; grid-row:1 / 3; padding:0; font-size:17px; }
    /* Разрыв строки внутри flex-строки матча: тем же приёмом футбольный грид уводит
       блок статистики под команды (live.css, tr[data-mid]::after). Без него периоды и
       броски прилипают вплотную к счёту. */
    table.tn-live tbody tr::after { content:''; display:block; flex:0 0 100%; order:3; height:0; }
    .tn-periods, .tn-sog-td, .tn-series, .tn-pwr-td, .tn-form-td, .tn-odds-td { order:5; flex:0 0 auto; margin:4px 12px 0 0;
        font-size:11px; color:var(--text-soft); }
    .tn-pwr-td { min-width:110px; } .tn-form-td .tn-form { justify-content:flex-start; }
    .tn-live-p { display:inline; margin-left:3px; }
    .tn-periods { margin-left:2px; }
    .tn-series { max-width:100%; white-space:normal; }
}

/* ---- навигация по датам ---- */
.tn-datebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; font-size:13px; }
.tn-datebar a, .tn-datebar span.cur { display:inline-block; padding:5px 12px; border:1px solid var(--card-border); border-radius:5px; background:var(--card-bg); color:var(--accent-blue); text-decoration:none; }
.tn-datebar span.cur { font-weight:700; color:var(--text); }
.tn-datebar a:hover { border-color:var(--ice); }
.tn-offseason { background:var(--court-soft); border:1px solid var(--card-border); border-radius:8px; padding:12px 14px; font-size:13.5px; color:var(--text-soft); margin:0 0 16px; }

.tn-sortbar { display:inline-flex; gap:8px; margin-left:auto; }
.tn-sortbar a, .tn-sortbar span.cur { padding:5px 10px; font-size:12px; }
@media (max-width:560px) { .tn-sortbar { margin-left:0; } }

/* ---- карточка матча ---- */
.tn-scoreboard { background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:18px 16px; margin-bottom:16px; }

/* ---- hero-арена (аналог футбольного .match-hero с полем): СВЕТЛЫЙ лёд, разметка
   красной/синими линиями; в тёмной теме — ночная арена (тёмный фон, белый текст) ---- */
/* justify-content:flex-start — не влияет на позицию при текущей высоте контента (карточка
   уже выше min-height, лишнего места для распределения нет), но семантически верно на
   случай короткого контента; держим ради явного порядка чтения сверху вниз. */
.tn-hero { position:relative; overflow:hidden; background:linear-gradient(180deg,#f7fbff 0%,#ddecf8 100%);
    border-color:#b9d2e4; border-radius:12px; box-shadow:0 4px 16px rgba(31,72,104,.14); padding:16px 18px 18px; min-height:168px;
    display:flex; flex-direction:column; justify-content:flex-start; }
/* 01.09.2026 (вторая итерация — «всё ещё ледовая арена»): корт теперь ЦВЕТА ПОКРЫТИЯ
   турнира. Заливка корта — ::before-прямоугольник (геометрия совпадает с SVG-рамкой:
   120/800=15% по бокам, 22/260=8.46% сверху/снизу), цвет задаёт класс surf-* из
   TennisUi.SurfaceCode (hard — синий как US Open, clay — терракота, grass — зелёный,
   indoor — сине-фиолетовый). Линии разметки и сетка — белые, одним SVG на обе темы. */
.tn-hero-rink { position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 260' preserveAspectRatio='xMidYMid slice'><rect x='120' y='22' width='560' height='216' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='2'/><line x1='120' y1='49' x2='680' y2='49' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6'/><line x1='120' y1='211' x2='680' y2='211' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6'/><line x1='250' y1='49' x2='250' y2='211' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6'/><line x1='550' y1='49' x2='550' y2='211' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6'/><line x1='250' y1='130' x2='550' y2='130' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6'/><line x1='400' y1='12' x2='400' y2='248' stroke='%23ffffff' stroke-opacity='0.95' stroke-width='3'/><circle cx='400' cy='12' r='3' fill='%23ffffff' fill-opacity='0.9'/><circle cx='400' cy='248' r='3' fill='%23ffffff' fill-opacity='0.9'/><line x1='120' y1='130' x2='130' y2='130' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2'/><line x1='670' y1='130' x2='680' y2='130' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2'/></svg>");
    background-size:100% 100%; background-repeat:no-repeat; }
.tn-hero-rink::before { content:''; position:absolute; left:15%; right:15%; top:8.46%; bottom:8.46%;
    border-radius:3px; background:rgba(110,140,165,.45); }
.tn-hero-rink.surf-hard::before   { background:rgba(38,108,184,.55); }
.tn-hero-rink.surf-clay::before   { background:rgba(190,92,48,.6); }
.tn-hero-rink.surf-grass::before  { background:rgba(56,138,72,.55); }
.tn-hero-rink.surf-indoor::before { background:rgba(70,86,158,.55); }
.tn-hero-rink.surf-carpet::before { background:rgba(96,116,140,.55); }
.tn-hero > :not(.tn-hero-rink) { position:relative; z-index:1; }
.tn-hero .tn-sb-side { color:#1c3247; text-shadow:0 1px 2px rgba(255,255,255,.7); }
/* 52px/800 — паритет со счётом футбольного hero на десктопе: счёт — главный элемент
   композиции (владелец 24.08: «счёт должен быть в центре», «шрифт мелковатый»).
   position:absolute ОБЯЗАН жить в этом селекторе: `.tn-hero > :not(.tn-hero-rink)` выше
   даёт всем детям position:relative со специфичностью 0-2-0, и одноклассовый .tn-sb-score
   его не перебивает — счёт молча выпадал из круга на позицию потока. */
.tn-hero .tn-sb-score { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:2; color:#14283a; font-size:52px; text-shadow:0 1px 3px rgba(255,255,255,.8); }
.tn-hero .tn-ot { color:#b3541e; }
@media (max-width:640px) { .tn-hero .tn-sb-score { font-size:32px; } }
/* ночная арена в тёмной теме */
body.dark-theme .tn-hero { background:linear-gradient(180deg,#1c2a38 0%,#121d28 100%); border-color:#0d151d; }
/* тёмная тема: та же белая разметка, заливка корта глуше — «ночной матч» */
body.dark-theme .tn-hero-rink::before { background:rgba(90,116,140,.32); }
body.dark-theme .tn-hero-rink.surf-hard::before   { background:rgba(46,110,180,.4); }
body.dark-theme .tn-hero-rink.surf-clay::before   { background:rgba(178,88,46,.42); }
body.dark-theme .tn-hero-rink.surf-grass::before  { background:rgba(52,126,66,.4); }
body.dark-theme .tn-hero-rink.surf-indoor::before { background:rgba(74,90,160,.4); }
body.dark-theme .tn-hero-rink.surf-carpet::before { background:rgba(96,116,140,.36); }
body.dark-theme .tn-hero .tn-sb-side { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
body.dark-theme .tn-hero .tn-sb-score { color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55); }
body.dark-theme .tn-hero .tn-ot { color:#ffd54f; }

/* ---- «Что решило матч» / AI-прогноз ---- */
/* .tn-card даёт padding:0 (нужен tables/svg внутри для full-bleed), а тут открытый текст —
   без своего отступа абзацы упирались прямо в рамку карточки. Значение как у футбольного
   .match-preview (14px 16px). */
.tn-decided { font-size:14px; line-height:1.6; color:var(--text-soft); padding:14px 16px; }
.tn-decided p { margin:0 0 10px; }
.tn-decided p:last-child { margin-bottom:0; }
.tn-note { font-size:11.5px; color:var(--text-muted); margin:8px 2px 0; }

/* ---- списки формы: две колонки, ряд = дата · чип В/П · соперник · счёт ---- */
.tn-form2 { display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; }
@media (max-width:640px) { .tn-form2 { grid-template-columns:1fr; } }
.tn-form-col { min-width:0; }
.tn-form-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--text-soft); padding:2px 0 7px; border-bottom:1px solid var(--row-border); margin-bottom:5px; }
.tn-fm-row { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13px;
    color:var(--text); text-decoration:none; border-bottom:1px dashed var(--row-border); }
.tn-fm-row:last-child { border-bottom:none; }
a.tn-fm-row:hover { background:var(--row-hover); }
.tn-fm-date { flex:none; width:52px; color:var(--text-muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.tn-fm-opp { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-fm-opp i, .tn-fm-sc i { font-style:normal; font-size:10.5px; color:var(--text-muted); }
.tn-fm-sc { flex:none; font-weight:600; font-variant-numeric:tabular-nums; }
.tn-fm-sc.good { color:var(--accent-green); }
.tn-fm-sc.bad { color:var(--accent-red); }
.tn-fm-row { flex-wrap:wrap; }
/* ---- таблицы матчей (очные встречи, последние матчи, общие/похожие соперники) ----
   Один рендерер на все четыре блока (владелец 24.08: «одну таблицу сделал, а другие
   не сделал»): порт футбольного match-stats-table — подсветка исхода на имени команды,
   метрики парами хозяева/гости, группы разделены мягким фоном шапки, иконки в th. */
.tn-sub-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:13.5px; font-weight:700; color:var(--text); margin:16px 0 6px; }
.tn-sub-h:first-child { margin-top:0; }
.tn-form-chips { display:inline-flex; gap:3px; }
.tn-chip { width:17px; height:17px; border-radius:4px; display:inline-flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; color:#fff; }
.tn-chip.w { background:#2e7d32; }
.tn-chip.l { background:#c62828; }
.tn-mt-wrap { overflow-x:auto; }
.tn-mt-table th, .tn-mt-table td { white-space:nowrap; }
.tn-mt-table th { text-align:center; }
.tn-mt-table th:first-child, .tn-mt-lg-th, .tn-mt-team-th { text-align:left; }
/* Иконка и подпись в шапке — как th-cicon у футбола: иконка ведёт, текст поясняет. */
.tn-mt-table th svg { vertical-align:-2px; }
.tn-th-t { margin-left:4px; }
.tn-mt-team-th { min-width:104px; }
.tn-mt-lg-th { min-width:80px; }
.tn-mt-lg { max-width:120px; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; }
.tn-mt-dt { font-variant-numeric:tabular-nums; font-size:12px; }
.tn-mt-rt { font-style:normal; font-size:10.5px; color:var(--text-muted); }
.tn-mt-table .tn-num { text-align:center; font-variant-numeric:tabular-nums; }
/* Лучшее в паре — жирным: колонки читают «кто кого», а не абсолютные значения. */
.tn-mt-table .tn-best { font-weight:700; color:var(--text); }
.tn-mt-g1 { background:rgba(2,119,189,.07); }
.tn-mt-g2 { background:rgba(230,81,0,.08); }
.tn-mt-g3 { background:rgba(0,0,0,.04); }
.tn-mt-g4 { background:rgba(198,40,40,.06); }
body.dark-theme .tn-mt-g1 { background:rgba(79,195,247,.10); }
body.dark-theme .tn-mt-g2 { background:rgba(255,183,77,.10); }
body.dark-theme .tn-mt-g3 { background:rgba(255,255,255,.05); }
body.dark-theme .tn-mt-g4 { background:rgba(239,83,80,.12); }
.tn-res-w { background:var(--accent-green-soft); color:var(--accent-green-dark); font-weight:700; }
.tn-res-l { background:var(--accent-red-soft); color:var(--accent-red); }
.tn-res-d { background:var(--accent-yellow-soft); color:var(--text); font-weight:600; }

/* ---- сводка «на фоне общих соперников» (порт co-sum с футбольной MatchPage) ----
   Компактная таблица под списками матчей: перевес — цветом ЦИФРЫ, не заливкой ячейки,
   поэтому пара «за / против» помещается в одну строку. */
.tn-co-verdict { margin:10px 0 6px; font-size:12.5px; color:var(--text-soft); }
.tn-co-verdict b { color:var(--text); }
.tn-co { font-size:12px; }
.tn-co thead th { font-size:10px; font-weight:700; padding:5px 8px; text-align:center;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; background:rgba(0,0,0,.02); }
body.dark-theme .tn-co thead th { background:rgba(255,255,255,.03); }
.tn-co thead th:first-child { text-align:left; }
.tn-co thead th:not(:first-child) { width:28%; }
.tn-co tbody th { text-align:left; font-weight:500; font-size:11px; padding:3px 8px;
    color:var(--text-muted); border-bottom:1px dashed var(--row-border); }
.tn-co tbody td { padding:3px 8px; text-align:center; white-space:nowrap;
    border-bottom:1px dashed var(--row-border); color:var(--text); font-variant-numeric:tabular-nums; }
.tn-co tbody tr:hover { background:transparent; }
.tn-co tbody tr:last-child th, .tn-co tbody tr:last-child td { border-bottom:none; }
.tn-co tr.co-sum-info td { color:var(--text-muted); }
.tn-co .co-up { color:var(--accent-green-dark); font-weight:700; }
.tn-co .co-dn { color:var(--text-muted); }
.tn-co .co-eq { color:var(--text-soft); }
.tn-co .co-sl { color:var(--card-border); }

/* ---- расчёт тоталов ---- */
.tn-tot-table td, .tn-tot-table th { font-variant-numeric:tabular-nums; }
.tn-tot-pct { font-weight:700; color:var(--text-soft); }
.tn-tot-pct.hi { color:var(--accent-green); }
.tn-tot-pct.lo { color:var(--accent-red); }
.tn-tot-predict td { border-top:2px solid var(--card-border); font-size:13.5px; }

/* ---- видеообзор ---- */
.tn-video { padding:10px 12px; }
.tn-video-frame { position:relative; width:100%; max-width:720px; margin:0 auto; aspect-ratio:16/9; }
.tn-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:8px; }
.tn-video-card { display:block; max-width:480px; margin:0 auto; position:relative; border-radius:8px; overflow:hidden; }
.tn-video-card img { display:block; width:100%; }
.tn-video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:40px;
    background:rgba(200,30,30,.9); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.tn-video-src { text-align:center; font-size:12px; color:var(--text-muted); margin-top:6px; }

/* ---- «Когда забивают и пропускают»: тепловые 5-мин ячейки ---- */
.gt-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-soft);
    cursor:pointer; margin-bottom:10px; user-select:none; }
.gt-team { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--text-soft); margin:10px 0 6px; }
.gt-grid { display:grid; grid-template-columns:86px repeat(13, 1fr); gap:3px; }
.gt-grid .gt-r, .gt-grid .gt-axis { display:contents; }
.gt-lbl { font-size:11px; color:var(--text-muted); align-self:center; }
.gt-c { height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.gt-axis span { font-size:9.5px; color:var(--text-muted); text-align:center; padding-top:1px; }
@media (max-width:640px) {
    .gt-grid { grid-template-columns:64px repeat(13, 1fr); gap:2px; }
    .gt-c { height:20px; font-size:9.5px; }
    .gt-lbl { font-size:9.5px; }
}
/* Дата — стеклянная пилюля вверху карточки, как hb-right на футболе (там же лига/статус):
   align-self:center — сам .tn-sb-meta является flex-item колонки .tn-hero, без него
   растянулся бы на всю ширину (align-items по умолчанию stretch). */
/* Без nowrap: в отличие от футбольного hb-right сюда попадает ещё SeriesInfo («Carolina
   Hurricanes wins series 4-2») — на узких экранах может не влезть в одну строку, пилюля
   должна переноситься, а не вылезать за карточку. max-width держит центрирование на wide. */
.tn-sb-meta { align-self:center; max-width:100%; margin-bottom:16px; display:inline-block; line-height:1.35;
    background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.12); border-radius:14px;
    padding:3px 10px; backdrop-filter:blur(4px); box-sizing:border-box;
    font-size:12px; font-weight:500; color:rgba(255,255,255,0.82);
    font-variant-numeric:tabular-nums; text-align:center; }
.tn-sb-meta .tn-time { font-weight:700; color:#fff; }
/* Ссылки на источники (26.08) — тот же вид, что .mp-src-links на футбольной MatchPage
   (там правила лежат инлайном): буквенные плашки, видны только владельцу и на тест-хосте.
   Позиция как у футбола — прижаты к краю (там absolute от hero-band слева), у нас
   левый верхний угол карточки: 26.08 владелец про центр — «куда их в центр вставил». */
.tn-hero .mp-src-links { position:absolute; top:8px; left:8px; display:flex; gap:6px; z-index:3; }
.mp-src-links a, .mp-src-links span { font-size:11px; font-weight:700; color:#bbb; text-decoration:none;
    background:rgba(0,0,0,0.42); border-radius:8px; min-width:16px; padding:0 4px;
    height:16px; line-height:16px; text-align:center; }
.mp-src-links a:hover { color:#fff; }
/* Пилюля статуса над счётом — копия футбольной (.m-badge/.m-live/.m-ht/.m-ft из
   MatchPage.aspx, там правила лежат инлайном и в хоккейную страницу не попадают).
   Имена классов и значения те же, чтобы обе карточки читались одинаково; отличие
   одно: у футбола containing block — .score-wrap, у нас сам .tn-sb-score (он уже
   absolute по центру катка, так что bottom:100% отсчитывается от цифр счёта). */
.m-badge { position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    text-align:center; margin:0 0 12px; white-space:nowrap; z-index:2; }
.m-badge:empty { margin:0; }
.m-live, .m-ht, .m-ft {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 14px; border-radius:14px;
    font-size:11px; font-weight:700; line-height:1.2;
    text-transform:uppercase; letter-spacing:0.6px; vertical-align:middle;
}
.m-live { background:#c62828; color:#fff; }
.m-live::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff;
    animation:matchBadgePulse 1.6s infinite; }
.m-ht { background:#37474f; color:#fff; }
.m-ft { background:#263238; color:#cfd8dc; }
@keyframes matchBadgePulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
@media (prefers-reduced-motion:reduce) { .m-live::before { animation:none; } }
/* Композиция 1:1 с футбольным hero (.teams-main, MatchPage): команда — вертикальный стек
   «логотип над именем», счёт — средняя колонка фиксированной ширины строго на оси карточки
   (это же ось центрального круга катка в фоне). Колонки minmax(0,230px) 140px minmax(0,230px),
   как у футбола: счёт не съезжает в сторону длинного имени. Владелец 25.08: «счёт и команды
   именно по центру красиво». */
/* align-items:start обязателен: стеки разной высоты (у одной команды список голов, у
   другой нет) при center разъезжались по вертикали — имена сходят с общей линии. */
.tn-sb-teams { display:grid; grid-template-columns:minmax(0,230px) 140px minmax(0,230px);
    justify-content:center; align-items:start; column-gap:16px; }
/* Стек команды: по центру своей колонки (width:100%, как .team-main футбола — без неё
   стек сжимается по контенту и прилипает к счёту), имя 20px/700 как на футбольном hero. */
.tn-sb-side { min-width:0; width:100%; box-sizing:border-box; display:flex; flex-direction:column;
    align-items:center; gap:8px; font-size:20px; font-weight:700; color:var(--text);
    text-align:center; line-height:1.2; }
.tn-sb-side:not(.away) { grid-column:1; justify-self:end; }
/* У гостей в разметке лого стоит ПОСЛЕ имени (наследие строчной раскладки) —
   column-reverse ставит его над именем, как у хозяев, без правки серверного кода. */
.tn-sb-side.away { grid-column:3; justify-self:start; flex-direction:column-reverse; }
.tn-sb-side a { color:inherit; text-decoration:none; }
.tn-sb-side a:hover { text-decoration:underline; }
/* Логотип — белый круг с мягкой тенью, как .hero-logo футбола; размеры чуть меньше
   (44 против 42+рамки), лёд светлый — тень холодная, не чёрная. */
.tn-hero .tn-sb-side .tn-logo { width:44px; height:44px; box-sizing:content-box; padding:2px;
    background:#fff; border:1px solid rgba(122,167,199,.55); border-radius:50%;
    box-shadow:0 2px 6px rgba(31,72,104,.28); object-fit:contain; }
/* Пустой двойник логотипа: у команды без лого имя не должно вставать выше соседа. */
.tn-logo-ph { visibility:hidden; }
body.dark-theme .tn-hero .tn-sb-side .tn-logo { border-color:rgba(255,255,255,.35);
    box-shadow:0 2px 6px rgba(0,0,0,.45); }
/* Типографика счёта; позиционирование (absolute на центре круга) — в правиле
   `.tn-hero .tn-sb-score` выше: одноклассовый селектор не перебил бы position:relative
   от `.tn-hero > :not(.tn-hero-rink)`. */
.tn-sb-score { font-size:30px; font-weight:800; color:var(--text); white-space:nowrap;
    font-variant-numeric:tabular-nums; letter-spacing:-1px; line-height:1.05; text-align:center; }
.tn-sb-score-gap { display:inline-block; width:16px; }
/* Обёртка пилюли периодов. Без неё .tn-phases — блочный grid, а он прямой ребёнок
   колонки .tn-hero с align-items:stretch: 26.08 панель растянулась на всю карточку,
   фон лёг поверх имён команд, а колонки цифр разъехались по краям. flex + center
   сжимают её по содержимому и держат по центру. */
.tn-sb-periods { display:flex; justify-content:center; }
/* Якорь ряда команд — ЛИНИЯ ИМЕНИ, не центр стека (владелец 25.08: «названия уехали
   вверх»): ряд absolute на 50% высоты со сдвигом -68px = логотип 48 (44+рамка) + зазор 8 +
   полвысоты имени 12. Имя стоит ровно на оси счёта/круга, логотип висит над ним, список
   авторов голов растёт вниз, не двигая имя. Пилюля периодов прижата к низу карточки
   (margin-top:auto), min-height подобран так, чтобы счёт в круге её не касался. */
.tn-hero { min-height:240px; }
.tn-hero .tn-sb-teams { position:absolute; left:18px; right:18px; top:50%;
    transform:translateY(-68px); }
/* Матч без логотипов у обеих команд: стек начинается сразу с имени, поэтому якорь —
   не высота логотипа, а полстроки имени (20px × 1.2 / 2). Иначе имена висят на 68px
   выше счёта, и ряд команд читается как съехавший с центра карточки. */
.tn-hero .tn-sb-teams.no-logo { transform:translateY(-12px); }
.tn-hero .tn-sb-periods { margin-top:auto; }
/* Авторы голов под именем — сетка «шайба · минута · фамилия», порт .hero-goals футбола;
   цвета под светлый лёд, в тёмной теме — светлым. */
.tn-goals { display:grid; grid-template-columns:12px max-content minmax(0,max-content);
    justify-content:center; column-gap:5px; row-gap:2px; width:100%; margin-top:3px;
    font-size:11px; font-weight:500; line-height:1.3; color:#33506a; }
.tn-goals .hg-item { display:contents; }
.tn-goals .hg-ic { display:inline-flex; align-items:center; justify-content:center; align-self:center; }
.tn-goals .hg-ic svg { width:11px; height:11px; }
.tn-goals .hg-min { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-goals .hg-pl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
body.dark-theme .tn-goals { color:rgba(255,255,255,.82); }
/* Тёмная шайба на ночной арене невидима — инверсией в светло-серую, форму не трогаем. */
body.dark-theme .tn-goals .hg-ic svg { filter:invert(.85); }
/* Панель периодов (владелец 25.08: «как было вертикально, только без периодов, надо
   обрамление»; 26.08 повторно — горизонтальную строку «1:0 0:2 1:1» под счётом
   откатили): столбик пар «хозяева гости», строки 1→2→3 сверху вниз, подписей нет —
   только «ОТ»/«Бул.» у доп. времени, absolute влево от цифр, чтобы не сдвигать пары
   с общей оси. Обрамление — то же тёмное стекло, что пилюля даты tn-sb-meta. */
/* Счёт по периодам под главным счётом (владелец 26.08): строка на период — пара цифр
   «хозяева гости», сверху вниз 1→2→3→ОТ→Бул. Итога здесь нет: он и так крупно в центре
   катка. Три колонки grid [хозяева][гости][подпись], ячейки лежат в сетке напрямую, без
   обёрток-строк: цифры всех строк стоят строго друг под другом, а подпись «ОТ»/«Бул»
   висит СПРАВА от пары в собственной колонке и не сдвигает цифры с общей оси. */
/* Колонки: [зеркало подписи][хозяева][гости][подпись]. Первая пустая и ровно той же
   ширины, что колонка «ОТ»/«Бул» — без неё подпись справа сдвигала пары цифр влево от
   оси карточки, и счёт по периодам не стоял под главным счётом. */
.tn-phases { display:grid; grid-template-columns:1.9em auto auto 1.9em; align-items:baseline;
    justify-items:center; column-gap:10px; row-gap:2px;
    background:rgba(12,26,38,0.5); border:1px solid rgba(255,255,255,0.14); border-radius:11px;
    padding:5px 10px 6px; backdrop-filter:blur(5px); box-shadow:0 2px 8px rgba(9,24,38,.2); }
.tn-ph-h { grid-column:2; }
.tn-ph-a { grid-column:3; }
.tn-ph-lbl { grid-column:4; }
/* Цифры — табличные, чтобы столбики не гуляли на 1 и 4. Сыгранный период приглушён,
   идущий — красный, тем же тоном, что пилюля .m-live над счётом; в перерыве красного
   нет ни у одной строки (см. LivePeriodOrd). */
.tn-ph-h, .tn-ph-a { min-width:1.15em; font-size:12px; font-weight:700; line-height:1.4;
    color:rgba(255,255,255,.86); text-align:center; font-variant-numeric:tabular-nums; }
.tn-ph-now { color:#ff6b6b; }
/* Подпись доп. времени: правая колонка, ширина держится пустыми ячейками обычных
   периодов — поэтому пары цифр стоят на одной оси и в матче без овертайма. */
.tn-ph-lbl { justify-self:start; font-size:8px; font-weight:700; line-height:1.6;
    white-space:nowrap; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; }
.tn-ph-now.tn-ph-lbl { color:#ff8a80; }
/* Минута лайва в строке идущего периода — зеркальная (первая) колонка, справа к паре:
   «39' | 1 2». Колонка и так держит ширину подписи ОТ/Бул, минута её занимает, не
   сдвигая цифры с оси; тон — как у красной подписи текущего периода. */
.tn-ph-min { grid-column:1; justify-self:end; font-size:13px; font-weight:700; line-height:1.4;
    white-space:nowrap; color:#ff8a80; font-variant-numeric:tabular-nums; }
@media (max-width:560px) {
    /* min-width:0 обязателен: у grid-item дефолт auto, и длинное имя команды распирало
       свою колонку, сдвигая счёт с оси карточки. Колонки — как у футбольного hero на
       мобиле: minmax(0,1fr) 72px minmax(0,1fr). */
    .tn-sb-side { font-size:14px; min-width:0; }
    .tn-sb-teams { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); column-gap:8px; }
    .tn-sb-side:not(.away) { justify-self:center; }
    .tn-sb-side.away { justify-self:center; }
    .tn-hero .tn-sb-side .tn-logo { width:34px; height:34px; }
    /* Пересчёт якоря имени под мобильные размеры: лого-бокс 40 (34+2·2+рамка) + зазор 8 +
       полвысоты имени ~8. */
    .tn-hero { min-height:198px; }
    .tn-hero .tn-sb-teams { transform:translateY(-56px); }
    .tn-hero .tn-sb-teams.no-logo { transform:translateY(-9px); }
    .tn-goals { font-size:10px; }
    .tn-sb-score-gap { width:10px; }
    .tn-phases { column-gap:9px; padding:4px 11px 5px; }
    .tn-title { font-size:20px; }
    .tn-table th, .tn-table td { padding:9px 8px; }
}

/* ---- полоски статистики ---- */
.tn-stat { display:grid; grid-template-columns:64px 1fr 64px; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--card-border); font-size:13px; }
.tn-stat:last-child { border-bottom:none; }
.tn-stat .tn-stat-name { text-align:center; font-size:12px; color:var(--text-soft); }
.tn-stat .tn-stat-v { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.tn-stat .tn-stat-v.r { text-align:right; }
.tn-bar { height:6px; background:var(--bar-track); border-radius:3px; overflow:hidden; display:flex; margin-top:5px; }
.tn-bar i { display:block; height:100%; }
.tn-bar i.h { background:var(--ice); }
.tn-bar i.a { background:var(--accent-orange); }

/* ---- таймлайн событий ---- */
.tn-tl { list-style:none; margin:0; padding:0; font-size:13px; }
.tn-tl li { display:grid; grid-template-columns:1fr 62px 1fr; gap:10px; align-items:baseline; padding:6px 12px; border-bottom:1px solid var(--card-border); }
.tn-tl li:last-child { border-bottom:none; }
.tn-tl .t { text-align:center; color:var(--text-soft); font-size:11.5px; font-variant-numeric:tabular-nums; }
.tn-tl .h { text-align:right; }
.tn-tl .a { text-align:left; }
.tn-tl .goal { font-weight:600; color:var(--text); }
.tn-tl .assist { color:var(--text-soft); font-size:12px; }
.tn-tl .pen { color:var(--text-soft); }
.tn-tl-period { padding:7px 12px; background:var(--court-soft); font-size:11.5px; font-weight:600; color:var(--text-soft); text-transform:uppercase; letter-spacing:.03em; }

/* ---- форма команды ---- */
.tn-form { display:inline-flex; gap:3px; }
.tn-form span { width:18px; height:18px; border-radius:3px; font-size:10.5px; line-height:18px; text-align:center; font-weight:700; color:#fff; }
.tn-form .w { background:#2e7d32; }
.tn-form .otw { background:#66bb6a; }
.tn-form .otl { background:#ef9a9a; color:#7f1d1d; }
.tn-form .l { background:#c62828; }

/* ---- сетка карточек лиг ---- */
.tn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.tn-tile { display:flex; align-items:center; gap:10px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:10px 12px; text-decoration:none; color:var(--text); }
.tn-tile:hover { border-color:var(--ice); }
.tn-tile b { font-size:13.5px; font-weight:600; display:block; }
.tn-tile small { font-size:11.5px; color:var(--text-soft); }

/* ---- подвал ---- */
.site-footer { width:100vw; margin-left:calc(50% - 50vw); background:#f5f5f5; border-top:1px solid #ddd; font-size:12px; color:#777; margin-top:40px; }
.footer-inner { max-width:1600px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.footer-sep { color:#bbb; }
.footer-copy { color:#999; font-size:11px; }
.footer-brand { color:#2e7d32 !important; font-weight:600; }
.site-footer a { color:#1565C0; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.site-footer a:hover { text-decoration:underline; }
body.dark-theme .site-footer { background:#222; border-top:1px solid #333; color:#888; }
body.dark-theme .site-footer a { color:#64b5f6; }
body.dark-theme .footer-brand { color:#66bb6a !important; }
body.dark-theme .footer-sep { color:#555; }

/* =====================================================================
   26.08: коэффициенты и прогноз (/hockey/match) — те же приёмы, что у
   футбольных .bg-line-card / .prob-block: строка = рынок + чипы исходов,
   справедливый коэффициент модели строкой под ценой букмекера.
   ===================================================================== */
.tn-od { padding:2px 14px 12px; overflow-x:visible; }
.tn-od-grp { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:0.4px; margin:14px 0 2px; }
.tn-od-grp:first-child { margin-top:10px; }
.tn-od-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--row-border); }
.tn-od-row:last-child { border-bottom:none; }
.tn-od-mkt { flex:0 0 140px; font-size:13px; font-weight:600; color:var(--text-soft); line-height:1.3; }
.tn-od-mkt b { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.tn-od-sub { display:block; font-size:10.5px; font-weight:500; color:var(--text-muted); }
.tn-od-cells { flex:1 1 auto; display:flex; gap:6px; min-width:0; }
.tn-od-o { flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
    gap:0 6px; padding:5px 8px; border:1px solid transparent; border-radius:6px; background:var(--court-soft); }
.tn-od-lbl { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.tn-od-o b { font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.tn-od-fair { flex:1 0 100%; text-align:center; font-size:10.5px; color:var(--text-muted);
    white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-od-o.is-val { border-color:var(--accent-green); background:var(--accent-green-soft); }
.tn-od-o.is-val b { color:var(--accent-green-dark); }
.tn-od-val { color:#f59e0b; }
.tn-od-bk { flex:0 0 44px; text-align:right; font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
@media (max-width:640px) {
    .tn-od { padding:2px 12px 10px; }
    .tn-od-row { flex-wrap:wrap; gap:4px 8px; }
    .tn-od-mkt { flex:1 1 auto; }
    .tn-od-bk { flex:0 0 auto; }
    .tn-od-cells { flex:1 1 100%; }
}

.tn-pick { padding:14px 16px; margin-bottom:10px; overflow-x:visible; }
.tn-pick-tip { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:15px; color:var(--text-soft); }
.tn-pick-tip b { font-size:16px; color:var(--text); }
.tn-pick-odds { margin-top:4px; font-size:13px; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.tn-pick-odds b { color:var(--text); }
.tn-pick-val { margin-top:4px; display:flex; align-items:center; gap:8px; }
.tn-pick-edge { font-size:13px; font-weight:700; color:var(--accent-green-dark); }
.tn-pick-stars { color:#f59e0b; font-size:15px; letter-spacing:1px; }
.tn-pick-stars-off { color:var(--bar-track); }
.tn-pick-sub { margin:12px 0 4px; font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.4px; }
.tn-pick-why { font-size:13px; line-height:1.55; color:var(--text-soft); }
.tn-pick-why p { margin:0 0 6px; }
.tn-pick-why p:last-child { margin-bottom:0; }
.tn-pick-note { margin-top:12px; padding-top:10px; border-top:1px solid var(--card-border);
    font-size:12px; color:var(--text-muted); }

/* =====================================================================
   24.08: статистика и momentum на карточке матча — 1:1 стили футбольной
   MatchPage.aspx (.match-stats-block / .momentum-chart), скопированы из её
   инлайн-<style>. Цвета H/A те же, что на футболе: #2196F3 / #ff9800.
   ===================================================================== */

/* ---- блок статистики: diverging-бары ---- */
.match-stats-block { background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:10px 14px; }
.ms-row { padding:4px 0; font-size:13px; }
.ms-bar { position:relative; height:24px; border-radius:6px; overflow:hidden; background:var(--bar-track); }
.ms-fill-h { position:absolute; left:0; top:0; bottom:0; border-radius:6px 0 0 6px; }
.ms-fill-a { position:absolute; right:0; top:0; bottom:0; border-radius:0 6px 6px 0; }
.ms-val-h, .ms-val-a { position:absolute; top:0; bottom:0; display:flex; align-items:center; color:#fff; font-size:12px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.45); z-index:2; }
.ms-val-h { left:10px; }
.ms-val-a { right:10px; }
.ms-lbl { position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.4px; text-shadow:0 1px 2px rgba(0,0,0,0.6); white-space:nowrap; z-index:3; }
@media (max-width:640px) {
    .ms-bar { height:22px; }
    .ms-val-h, .ms-val-a { font-size:11px; }
    .ms-lbl { font-size:9px; gap:3px; }
}

/* ---- табы периодов (CSS-only radio, как ms-period-* на футболе) ---- */
.ms-period-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ms-period-tabs { display:flex; gap:4px; margin:0 0 12px; border-bottom:1px solid var(--card-border); }
.ms-period-tab { flex:1 1 0; padding:9px 8px 8px; color:var(--text-muted); font-size:13px;
    font-weight:600; text-align:center; cursor:pointer; border-bottom:2px solid transparent; user-select:none; }
.ms-period-tab:hover { color:var(--text); }
#ms-p-p1:checked ~ .ms-period-tabs .ms-tab-p1,
#ms-p-p2:checked ~ .ms-period-tabs .ms-tab-p2,
#ms-p-p3:checked ~ .ms-period-tabs .ms-tab-p3,
#ms-p-ot:checked ~ .ms-period-tabs .ms-tab-ot,
#ms-p-full:checked ~ .ms-period-tabs .ms-tab-full { color:var(--accent-green-dark); border-bottom-color:var(--accent-green); }
.ms-period-panel { display:none; }
#ms-p-p1:checked ~ .ms-period-panels .ms-panel-p1,
#ms-p-p2:checked ~ .ms-period-panels .ms-panel-p2,
#ms-p-p3:checked ~ .ms-period-panels .ms-panel-p3,
#ms-p-ot:checked ~ .ms-period-panels .ms-panel-ot,
#ms-p-full:checked ~ .ms-period-panels .ms-panel-full { display:block; }

/* ---- momentum-график (копия футбольного .momentum-chart) ---- */
.momentum-chart { width:100%; margin-bottom:14px; padding:0; }
.momentum-chart .mom-pressure-label { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; margin-bottom:3px; }
body.dark-theme .momentum-chart .mom-pressure-label { color:#64748b; }
.momentum-chart .mom-pressure-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.momentum-chart .mom-pressure-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; font-size:9px; font-weight:700; color:#fff; flex:none; }
.momentum-chart .mom-pressure-badge-h { background:#2196F3; }
.momentum-chart .mom-pressure-badge-a { background:#ff9800; }
.momentum-chart .mom-pressure-pct { font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; min-width:30px; color:#475569; flex:none; }
body.dark-theme .momentum-chart .mom-pressure-pct { color:#cbd5e1; }
.momentum-chart .mom-pressure-pct-a { text-align:right; }
.momentum-chart .mom-pressure-track { position:relative; flex:1 1 auto; height:6px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
body.dark-theme .momentum-chart .mom-pressure-track { background:#334155; }
/* без анимации ширины из футбольного оригинала: у хоккея live — полный reload страницы
   раз в 90с, полоса всегда рендерится заново, анимировать нечего */
.momentum-chart .mom-pressure-fill-h { position:absolute; left:0; top:0; bottom:0; width:50%; background:#2196F3; }
.momentum-chart .mom-pressure-fill-a { position:absolute; right:0; top:0; bottom:0; width:50%; background:#ff9800; }
.momentum-chart .mom-svg-wrap { position:relative; width:100%; height:150px; }
@media (max-width:640px) { .momentum-chart .mom-svg-wrap { height:120px; } }
.momentum-chart svg.mom-svg { display:block; width:100%; height:100%; overflow:visible; }
.momentum-chart .mom-axis-line { stroke:#e2e8f0; stroke-width:1; }
body.dark-theme .momentum-chart .mom-axis-line { stroke:#334155; }
.momentum-chart .mom-axis-tick { stroke:#cbd5e1; stroke-width:1; }
body.dark-theme .momentum-chart .mom-axis-tick { stroke:#475569; }
.momentum-chart .mom-ht-line { stroke:rgba(15,23,42,.35); stroke-width:1; stroke-dasharray:3 3; }
body.dark-theme .momentum-chart .mom-ht-line { stroke:rgba(226,232,240,.35); }
.momentum-chart .mom-now-line { stroke:#4caf50; stroke-width:1.5; stroke-dasharray:4 3; }
body.dark-theme .momentum-chart .mom-now-line { stroke:#66bb6a; }
.momentum-chart .mom-chip-layer { position:absolute; inset:0; pointer-events:none; }
.momentum-chart .mom-chip { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; line-height:1; }
.momentum-chart .mom-chip-goal { width:20px; height:20px; font-size:16px; z-index:3; }
.momentum-chart .mom-chip-pen { width:10px; height:13px; z-index:2; }
.momentum-chart .mom-chip-pen svg { display:block; width:100%; height:100%; }
@media (max-width:640px) {
    .momentum-chart .mom-chip-goal { width:15px; height:15px; font-size:12px; }
    .momentum-chart .mom-chip-pen { width:8px; height:10px; }
}
.momentum-chart .mom-axis-labels { position:relative; height:14px; margin-top:3px; }
.momentum-chart .mom-axis-labels span { position:absolute; top:0; transform:translateX(-50%); font-size:10px; color:#94a3b8; }
body.dark-theme .momentum-chart .mom-axis-labels span { color:#64748b; }

/* 26.08: тултип momentum-бара — минута, счёт, владение, броски (hockey-momentum.js) */
.momentum-chart .mom-tip-guide { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed rgba(15,23,42,.4); pointer-events:none; z-index:4; }
body.dark-theme .momentum-chart .mom-tip-guide { border-left-color:rgba(226,232,240,.4); }
.momentum-chart .mom-tip { position:absolute; top:6px; z-index:5; pointer-events:none; background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 14px rgba(15,23,42,.14); padding:6px 9px; font-size:11.5px; line-height:1.5; white-space:nowrap; color:#0f172a; }
body.dark-theme .momentum-chart .mom-tip { background:#1e293b; border-color:#334155; color:#e2e8f0; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.momentum-chart .mom-tip-min { font-weight:700; font-size:11px; color:#64748b; margin-bottom:2px; }
body.dark-theme .momentum-chart .mom-tip-min { color:#94a3b8; }
.momentum-chart .mom-tip-row { display:flex; align-items:baseline; gap:5px; }
.momentum-chart .mom-tip-lbl { color:#64748b; margin-right:auto; padding-right:8px; }
body.dark-theme .momentum-chart .mom-tip-lbl { color:#94a3b8; }
.momentum-chart .mom-tip-h { color:#2196F3; font-weight:700; font-variant-numeric:tabular-nums; }
.momentum-chart .mom-tip-a { color:#ff9800; font-weight:700; font-variant-numeric:tabular-nums; }
.momentum-chart .mom-tip-sep { color:#94a3b8; }

/* 24.08: H1 страницы /hockey ушёл в sr-only — шапка повторяет live.aspx, видимого заголовка там нет. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* Составы по звеньям (24.08.2026): две колонки команд, внутри — подписи звеньев,
   номер, флаг национальности, имя. На мобиле колонки схлопываются в одну. */
.tn-lu-wrap { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px; }
.tn-lu-col { min-width:0; }
.tn-lu-team { font-size:13px; font-weight:700; color:var(--text); padding:0 0 6px; border-bottom:1px solid var(--card-border); margin-bottom:6px; }
.tn-lu-line { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin:9px 0 3px; }
.tn-lu-p { display:flex; align-items:center; gap:7px; font-size:12.5px; line-height:1.9; color:var(--text); min-width:0; }
.tn-lu-p .tn-num { flex:0 0 26px; text-align:right; font-variant-numeric:tabular-nums; }
.tn-lu-p .tn-flag { flex:0 0 auto; }
.tn-lu-noflag { flex:0 0 14px; }
.tn-lu-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tn-lu-role { flex:0 0 auto; font-size:9.5px; font-weight:700; color:var(--text-muted); border:1px solid var(--card-border); border-radius:3px; padding:0 4px; line-height:14px; }
@media (max-width:768px) { .tn-lu-wrap { grid-template-columns:1fr; gap:14px; } }

/* =====================================================================
   29.08.2026 (владелец, правка вёрстки): классическое теннисное табло
   как у FlashScore — игрок сверху донизу (две строки на матч), счёт
   СПРАВА и тоже столбиком: сеты по геймам колонками + итог сетов крупно.
   Общие классы .tn-mrows/.tn-mrow* — используются и в гриде (TennisPage,
   внутри table.live-table/tennis-grid.css teams-block), и в шапке карточки
   матча (TennisMatchPage, внутри .tn-sb-card), крупнее там через контекстный
   селектор `.tn-sb-card .tn-mrow*`. Каркас грида (toolbar/teams-block/
   league-row-v2 — все из tennis-grid.css, авто-выжимка live.css) не трогаем.
   ===================================================================== */
.tn-mrows { display:flex; flex-direction:column; gap:1px; margin-top:2px; }
.tn-mrow { display:flex; align-items:center; gap:6px; padding:1px 0; }
.tn-mrow-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:13px; font-weight:500; color:var(--text); text-decoration:none; }
a.tn-mrow-name:hover { color:var(--accent-blue); }
.tn-mrow.win .tn-mrow-name, .tn-mrow.win .tn-mrow-sets { font-weight:700; color:var(--text); }
.tn-mrow-games { display:flex; gap:3px; flex:0 0 auto; }
.tn-mrow-games i { display:inline-block; width:15px; text-align:center; font-style:normal;
    font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
/* 01.09 (владелец): текущий гейм в лайве — жёлтая плашка цвета теннисного мяча
   (аналог подсветки текущего периода у хоккея, но не красным) */
.tn-mrow-games i.now { background:#d7e335; color:#1b2027; border-radius:3px; font-weight:700; }
body.dark-theme .tn-mrow-games i.now { background:#c9d42e; color:#14181d; }
/* выигранный сет — жирная цифра у победителя, проигранная сторона остаётся приглушённой */
.tn-mrow-games i.w { font-weight:600; color:var(--text); }
body.dark-theme .tn-sb-card .tn-mrow-games i.w { color:#fff; }
.tn-mrow-pts { flex:0 0 30px; text-align:center; font-size:11px; color:var(--ice); font-weight:600; font-variant-numeric:tabular-nums; }
.tn-mrow-serve { flex:0 0 12px; text-align:center; color:var(--ice); font-size:9px; line-height:1; }
.tn-mrow-sets { flex:0 0 22px; text-align:right; font-size:16px; font-weight:600; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.tn-mrow.win .tn-mrow-sets { font-weight:800; }

/* ---- грид /tennis: обёртка таблицы — СВОЙ класс .tn-live-grid, не .tn-grid
   (тот уже занят сеткой карточек лиг выше, .tn-grid{display:grid}). tennis-grid.css
   (авто-выжимка live.css) считает ширины на ~13 хоккейных колонок — у тенниса их 2,
   переопределяем размеры здесь, сам сгенерённый файл руками не трогаем. */
/* 01.09.2026: 760 -> 920px — добавились колонки «Форма» и «Тренды»
   02.09.2026: 920 -> 1080px — «Сила» переехала в свою колонку, «Кф» стала шире
   (тотал слева от кэфов на победу в одной строке) */
table.live-table.tn-live-grid { min-width:0 !important; width:100%; max-width:1080px; margin:0 auto; }
table.live-table.tn-live-grid td.teams-block, table.live-table.tn-live-grid th { width:auto !important; max-width:none !important; }
.tn-stage-in { color:var(--ice); font-weight:700; }
/* 02.09.2026: второй ряд фильтров — уровень турнира. Подчинён статусному ряду:
   мельче и приглушённее, чтобы «Лайв/Завершённые» остались главным переключателем.
   На всю ширину строкой, как и статусный ряд (в дне 600+ матчей фильтр нужен и на
   телефоне, где ITF заливает список). */
.tn-tier-filters { flex:1 1 100%; order:9; display:flex; align-items:center;
    border-top:1px solid var(--row-border); }
.tn-tier-filters .filter-btn { font-size:11px; padding:4px 10px; color:var(--text-soft);
    border:0; background:transparent; border-radius:0; }
.tn-tier-filters .filter-btn:hover { color:var(--text); }
.tn-tier-filters .filter-btn.f-active { color:var(--text); font-weight:700;
    box-shadow:inset 0 -2px 0 var(--accent-blue); background:transparent; }
@media (max-width:768px) {
  .tn-tier-filters .filter-btn { flex:1 1 0; text-align:center; padding:6px 2px; }
}
/* Тулбар грида — toolbar/live-filters/search-wrap классы из tennis-grid.css, без
   хоккейного min-width:1500px (там его нет; у хоккея он выставляется отдельным инлайн-<style>
   в HockeyPage.aspx под свои 13 колонок — тенниса это не касается). */
.toolbar { min-width:0 !important; }
@media (min-width:769px) {
  /* wrap, а не nowrap (02.09.2026): ряд фильтров по уровню должен уезжать на свою
     строку (order:9 + flex-basis:100%), иначе он сжимает статусные чипы и поиск */
  .toolbar { flex-wrap:wrap; gap:8px; }
  .toolbar > .live-filters:not(.tn-tier-filters) { flex:0 0 auto; }
  .toolbar-center { flex:1 1 auto; min-width:0; }
  .toolbar-center .search-wrap { width:100%; }
  .toolbar-center .search-wrap input { width:100% !important; box-sizing:border-box; }
}
/* Мобильная сетка tennis-grid.css целится по nth-child хоккейных колонок (2-я — линия,
   скрыта на мобиле) — переопределяем специфичностью выше generic-правила (доп. класс
   .tn-live-grid, сам файл не трогаем).
   02.09.2026: контент-блок адресуем КЛАССОМ .teams-block, а не nth-child(2) — после
   переноса «Кф» на второе место и появления «Силы» позиции колонок поехали, и правило
   по номеру начало показывать чужую ячейку. */
@media (max-width:768px) {
  table.live-table.tn-live-grid tbody tr[data-mid] > td:nth-child(1) { display:flex !important; }
  table.live-table.tn-live-grid tbody td.teams-block { display:inline-flex !important; flex-direction:column; flex:1 1 auto; margin:0 !important; }
  table.live-table.tn-live-grid td.teams-block { width:auto !important; max-width:none !important; min-width:0; }
  .tn-mrows { width:100%; }
  .tn-mrow-name { font-size:12.5px; }
}

/* ---- карточка матча: то же табло, крупнее + фото игрока (см. tn-photo из TennisUi.Logo) ---- */
.tn-sb-badge { position:relative; text-align:center; margin-bottom:10px; }
.tn-sb-badge .m-badge { position:static; transform:none; display:inline-flex; margin:0; }
.tn-sb-card { position:relative; z-index:1; max-width:520px; margin:0 auto; background:rgba(255,255,255,.55);
    border:1px solid rgba(122,167,199,.4); border-radius:12px; padding:10px 16px; backdrop-filter:blur(2px); }
body.dark-theme .tn-sb-card { background:rgba(18,36,52,.55); border-color:rgba(255,255,255,.14); }
.tn-sb-card .tn-mrows { gap:6px; }
.tn-sb-card .tn-mrow { gap:10px; padding:3px 0; }
.tn-sb-card .tn-mrow img.tn-photo { width:30px; height:30px; border-radius:50%; object-fit:cover;
    background:#fff; border:1px solid rgba(122,167,199,.5); flex:0 0 auto; }
.tn-sb-card .tn-mrow-name { font-size:16px; font-weight:600; color:var(--text); }
.tn-sb-card .tn-mrow-games i { width:20px; font-size:14px; }
.tn-sb-card .tn-mrow-pts { flex-basis:38px; font-size:13px; }
.tn-sb-card .tn-mrow-serve { flex-basis:16px; font-size:11px; }
.tn-sb-card .tn-mrow-sets { flex-basis:32px; font-size:24px; }
body.dark-theme .tn-sb-card .tn-mrow-name, body.dark-theme .tn-sb-card .tn-mrow-sets { color:#fff; }
@media (max-width:560px) {
  .tn-sb-card { padding:8px 10px; }
  .tn-sb-card .tn-mrow-name { font-size:13.5px; }
  .tn-sb-card .tn-mrow-sets { font-size:19px; }
}

/* ---- 29.08.2026 (вечер): модельный слой в гриде /tennis --------------------
   Сила и форма стоят ВНУТРИ строки игрока (.tn-mrow), между именем и геймами —
   так они остаются на своей строке табло «игрок над игроком». Тренды — отдельной
   строкой чипов под табло (у них нет стороны в вёрстке, сторона зашита в код чипа
   префиксом H/A). На узких экранах форма прячется первой: имя игрока важнее. */
.tn-mrow-form { flex:0 0 auto; line-height:0; white-space:nowrap; }
.tn-mrow-form span { display:inline-block; width:9px; height:9px; line-height:9px; text-align:center;
                     border-radius:2px; font-size:7px; font-weight:700; color:#fff; margin:0 1px; }
/* 02.09.2026: слот .tn-mrow-pwr внутри строки игрока удалён — сила переехала в свою
   колонку (.tn-pwr-td), иконка живёт в шапке грида. Вместо силы в строке теперь флаг
   страны: фиксированный слот, чтобы имена двух игроков стояли на одной вертикали
   даже когда у одной стороны страны нет («сборная» пара World). */
.tn-mrow-flags { flex:0 0 auto; min-width:18px; display:inline-flex; align-items:center; gap:2px; }
.tn-mrow-flags .tn-flag { margin-right:0; }
/* 01.09.2026: официальный ранг ATP/WTA перед именем. Без заливки и рамки —
   приглушённая цифра фиксированной ширины, чтобы имена оставались на одной
   вертикали и у безранговых игроков (ITF, новички) слот не «прыгал». */
.tn-rank { flex:0 0 26px; text-align:right; font-size:10.5px; font-weight:500;
           color:var(--text-dim); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.tn-mrow-name + .tn-rank, .tn-rank + .tn-mrow-name { margin-left:0; }
.tn-sb-card .tn-rank { font-size:12px; flex-basis:30px; }

/* ---- Маркет по фазам (01.09.2026): «Перед матчем» и «Сейчас» отдельными
   блоками в одной карточке. Заголовок — обычный текст без плашки. ---- */
.tn-mkt-blk { padding:12px 14px; }
.tn-mkt-blk + .tn-mkt-blk { margin-top:0; padding-top:12px; border-top:1px solid var(--row-border); }
.tn-mkt-h { display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
            font-size:12.5px; font-weight:700; color:var(--text); }
.tn-mkt-hint { font-size:11px; font-weight:400; color:var(--text-soft); }

/* подзаголовок внутри превью + подписи «за 12 мес / всего» в блоке покрытий:
   владелец прочитал W-L по покрытиям как очные встречи, отсюда явные подписи */
/* h3, а не div: выглядит заголовком — значит должен им быть.
   Отступ сверху больше, чем снизу: заголовок принадлежит тому, что под ним. */
.tn-pv-sub { display:flex; align-items:baseline; gap:8px; margin:16px 0 8px;
             font-size:12.5px; font-weight:700; color:var(--text); }
.tn-pv-sub span { font-size:11px; font-weight:400; color:var(--text-soft); }
.tn-pv-surf-row .s-cap { font-size:11px; color:var(--text-soft); }
.tn-pv-surf-row .s-wl2 { font-weight:600; color:var(--text-soft); font-variant-numeric:tabular-nums; }

/* сводка «лучше по N из M» и подсветка лучшего значения в подаче/приёме */
.tn-sa td.tn-sa-best { background:var(--accent-green-soft); font-weight:700; }
.tn-sa .tn-sa-sum td { border-top:2px solid var(--card-border); font-weight:700; }
.tn-sa-hint { font-style:normal; color:var(--text-soft); cursor:help; font-size:11px; }

.tn-mkt-none { font-size:12px; color:var(--text-soft); line-height:1.5; }

/* ---- Детализация превью (01.09.2026, вечер): строки матчей вместо сухого
   «1-0» и «0-2 · всего 0-3». Одна строка = один матч: результат, соперник с его
   официальным рангом, счёт по сетам, счёт по геймам, покрытие, дата.
   Победа и поражение различаются цветной левой кромкой, без заливок. ---- */
.tn-pvm { display:flex; align-items:center; gap:8px; padding:6px 8px; text-decoration:none;
          color:var(--text); font-size:12px; min-height:32px;
          border-bottom:1px solid var(--row-border); }
.tn-pvm:last-child { border-bottom:0; }
.tn-pvm:hover { background:var(--row-hover); }
/* Победа и поражение — заливкой. Цветной кромки нет: два сигнала на одно
   состояние избыточны, а полоса шире 1px на элементе списка — костыль. */
.tn-pvm.w { background:var(--accent-green-soft); }
.tn-pvm.l { background:var(--accent-red-soft); }

.tn-pvm.w:hover { background:var(--accent-green-soft); box-shadow:inset 0 0 0 1px var(--ink-win); }
.tn-pvm.l:hover { background:var(--accent-red-soft); box-shadow:inset 0 0 0 1px var(--ink-loss); }

.tn-pvm-res { flex:0 0 16px; font-weight:700; font-size:11px; text-align:center; }
.tn-pvm.w .tn-pvm-res { color:var(--ink-win); }
.tn-pvm.w .tn-pvm-sets { color:var(--ink-win); font-weight:700; }
.tn-pvm.l .tn-pvm-res { color:var(--ink-loss); }
.tn-pvm.l .tn-pvm-sets { color:var(--ink-loss); font-weight:700; }
.tn-pvm-who { flex:0 0 92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.tn-pvm-who.h { color:var(--ice-ink); } .tn-pvm-who.a { color:var(--orange-ink); }
.tn-pvm-opp { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-pvm-rank { font-style:normal; font-size:11px; font-weight:700; color:var(--text-soft);
               font-variant-numeric:tabular-nums; }
.tn-pvm-sets { flex:0 0 28px; font-weight:700; font-variant-numeric:tabular-nums; }
.tn-pvm-gbs { flex:0 0 auto; color:var(--text-soft); font-size:11px;
              font-variant-numeric:tabular-nums; white-space:nowrap; }
.tn-pvm-fin { flex:0 0 auto; font-size:11px; color:var(--ink-loss); }
/* вторичный текст на цветной заливке тонируется от её оттенка, не серым */
.tn-pvm-d { flex:0 0 auto; margin-left:auto; color:var(--text-soft); font-size:11px;
            white-space:nowrap; font-variant-numeric:tabular-nums; }
.tn-pv-sf { flex:0 0 auto; font-size:11px; color:var(--text-soft); border:1px solid var(--card-border);
            border-radius:3px; padding:0 4px; line-height:16px; white-space:nowrap; }

.tn-copp-det > td { padding:0 0 8px !important; }
.tn-copp-det .tn-pvm { font-size:11.5px; }

.tn-pv-last { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px;
              margin-top:12px; }
.tn-pv-lastcol { border:1px solid var(--card-border); border-radius:6px; overflow:hidden; }
.tn-pv-lastcol > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px;
                           padding:8px; background:var(--row-hover); font-size:12.5px; min-height:36px; }
.tn-pv-lastcol > summary::-webkit-details-marker { display:none; }
.tn-pv-lastname { font-weight:700; }
.tn-pv-lastname.h { color:var(--ice); } .tn-pv-lastname.a { color:var(--accent-orange); }
.tn-pv-lastwl { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.tn-pv-lasthint { margin-left:auto; font-size:11px; color:var(--text-soft); }
/* без max-height: прокрутка внутри прокрутки на телефоне — ловушка, а десять
   строк и так помещаются */
.tn-pv-lastbody { }

@media (max-width:768px) {
  /* тач-цель: строка матча и заголовок сета кликаются пальцем */
  .tn-pvm { gap:6px; font-size:11.5px; padding:8px 6px; min-height:44px; }
  .tn-pvm-who { flex-basis:70px; }
  .tn-pvm-gbs { display:none; }
  .tn-pv-lastcol > summary { min-height:44px; align-items:center; }
}

/* ---- Ход матча по геймам (01.09.2026, TennisMatchPage.MomentumHtml) ----
   Столбик = гейм. Направление — кто выиграл (вверх первый игрок, вниз второй),
   ВЫСОТА — насколько уверенно (Dominance 0..4 из очков проигравшего в тиках).
   Оттенок повторяет высоту, чтобы график читался и без сравнения длин; брейк
   отмечается точкой на конце столбика — это событие, а не степень. */
.tn-mom { padding:12px 14px 8px; }
.tn-mom-wrap { overflow-x:auto; overflow-y:hidden; margin:0 -2px; }
.tn-mom-svg { display:block; width:100%; height:auto; max-height:210px; }
.tn-mom-axis { stroke:var(--card-border); stroke-width:1; }
.tn-mom-band { fill:var(--row-hover); }
.tn-mom-set  { fill:var(--text-soft); font-size:11px; font-weight:600; }
.tn-mom-pause { stroke:var(--text-soft); stroke-width:1.5; stroke-dasharray:3 3; opacity:.8; }
.tn-mom-b.h  { fill:var(--ice); }
.tn-mom-b.a  { fill:var(--accent-orange); }
.tn-mom-b.d0 { opacity:.34; } .tn-mom-b.d1 { opacity:.50; } .tn-mom-b.d2 { opacity:.66; }
.tn-mom-b.d3 { opacity:.82; } .tn-mom-b.d4 { opacity:1; }
.tn-mom-b.amb { opacity:.22; }
.tn-mom-dot.h { fill:var(--ice); } .tn-mom-dot.a { fill:var(--accent-orange); }

.tn-mom-lg { display:flex; align-items:center; justify-content:space-between; gap:12px;
             flex-wrap:wrap; margin-bottom:12px; font-size:11.5px; color:var(--text-soft); }
.tn-mom-pl { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--text); }
.tn-mom-lg .sw { display:inline-block; width:9px; height:9px; border-radius:2px; }
.tn-mom-lg .sw.h { background:var(--ice); }
.tn-mom-lg .sw.a { background:var(--accent-orange); }
.tn-mom-scale { display:inline-flex; align-items:flex-end; gap:8px; color:var(--text-soft); font-size:11px; }
.tn-mom-scale .st:first-of-type { margin-left:2px; }
.tn-mom-scale .st + .st { margin-left:-6px; }
.tn-mom-scale .st { display:inline-block; width:4px; border-radius:1px; background:var(--text-soft); margin:0 0 1px; }
.tn-mom-scale .st.s1 { height:5px;  opacity:.34; }
.tn-mom-scale .st.s2 { height:8px;  opacity:.50; }
.tn-mom-scale .st.s3 { height:11px; opacity:.66; }
.tn-mom-scale .st.s4 { height:14px; opacity:.82; }
.tn-mom-scale .st.s5 { height:17px; opacity:1; }
.tn-mom-note { margin-top:8px; font-size:11px; color:var(--text-soft); line-height:1.45; }

/* сеты списком: раскрывается в геймы, последний сет открыт */
.tn-mom-sets { margin-top:16px; border-top:1px solid var(--row-border); }
.tn-set { border-bottom:1px solid var(--row-border); }
.tn-set > summary { cursor:pointer; list-style:none; padding:7px 2px; font-size:12.5px;
                    font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.tn-set > summary::-webkit-details-marker { display:none; }
.tn-set > summary::before { content:'\203A'; display:inline-block; width:10px; color:var(--text-soft);
                            transform:rotate(90deg); transition:transform .15s; }
.tn-set:not([open]) > summary::before { transform:rotate(0deg); }
.tn-set > summary:hover { color:var(--accent-blue); }
.tn-set-games { padding:2px 0 8px; }
.tn-set-g { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:12px;
            min-height:28px; border-top:1px solid var(--row-border); }
.tn-set-g:first-child { border-top:0; }
.tn-set-n { flex:0 0 18px; color:var(--text-soft); font-size:11px; text-align:right;
             font-variant-numeric:tabular-nums; }
.tn-set-sc { flex:0 0 34px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.tn-set-w { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-set-w.h { color:var(--ice-ink); } .tn-set-w.a { color:var(--orange-ink); }
.tn-set-tag { flex:0 0 auto; font-size:11px; color:var(--text-soft); }
.tn-set-tag.brk { color:var(--accent-red); font-weight:600; }
.tn-set-tag.tb { color:var(--accent-blue); font-weight:600; }
.tn-set-tag.pause { color:var(--accent-orange); font-weight:600; cursor:help; }
.tn-set-tag.dur { font-variant-numeric:tabular-nums; color:var(--text-soft); }
.tn-set-dom { flex:0 0 auto; display:inline-flex; gap:2px; }
.tn-set-dom i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--text-soft); }
.tn-set-dom i.off { opacity:.25; }

@media (max-width:768px) {
  .tn-mom { padding:8px 8px 8px; }
  .tn-mom-svg { max-height:170px; }
  .tn-mom-scale { display:none; }
  .tn-set-w { font-size:11.5px; }
  .tn-set > summary { min-height:44px; padding:10px 2px; }
  .tn-set-g { min-height:36px; }
}

/* 01.09.2026: чип тренда переименован .tn-chip -> .tn-tchip: имя .tn-chip уже занято
   квадратной иконкой событий карточки матча (width:17px выше по файлу), из-за
   коллизии текст трендов сжимался в 17px и налезал сам на себя. */
.tn-tchip { display:inline-block; padding:0 4px; border-radius:3px; font-size:9px; font-weight:700;
           line-height:14px; background:rgba(21,101,192,.10); color:var(--accent-blue,#1565C0); }
.tn-tchip-more { background:rgba(128,128,128,.18); color:var(--text-dim); }
body.dark-theme .tn-tchip { background:rgba(100,181,246,.16); color:#90caf9; }
@media (max-width:768px) {
  .tn-mrow-form { display:none; }
  .tn-tchip { font-size:8px; line-height:13px; }
}

/* ---- карточка матча: блок «Расклад сил» (Elo / сила / тренды) --------------
   Плитки сверху — три числа пары («первый · второй»), под ними список серий
   полосками: имя, полоса, процент, счётчик n/N. Никаких акцентных заливок —
   только полоса тренда, как в остальном интерфейсе. */
.tn-ins-grid { display:flex; flex-wrap:wrap; gap:10px 18px; padding:2px 0 8px; }
.tn-ins-cell { min-width:120px; }
.tn-ins-lbl { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.4px;
              color:var(--text-dim); margin-bottom:2px; }
.tn-ins-val { display:block; font-size:16px; font-weight:700; color:var(--text);
              font-variant-numeric:tabular-nums; }
.tn-ins-trends { border-top:1px solid var(--border, #e6e6e6); padding-top:8px; }
.tn-ins-trend { display:flex; align-items:center; gap:8px; margin:3px 0; font-size:12px; }
.tn-ins-t-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ins-t-bar { flex:0 0 70px; height:6px; border-radius:3px; background:rgba(128,128,128,.22); overflow:hidden; }
.tn-ins-t-bar i { display:block; height:6px; background:var(--accent-blue,#1565C0); }
.tn-ins-t-pct { flex:0 0 34px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.tn-ins-t-cnt { flex:0 0 62px; text-align:right; color:var(--text-dim); font-variant-numeric:tabular-nums; }
@media (max-width:768px) {
  .tn-ins-val { font-size:14px; }
  .tn-ins-t-bar { flex-basis:48px; }
  .tn-ins-t-cnt { flex-basis:52px; font-size:11px; }
}

/* ---- карточка матча: маркет фонбета (RS3 tns_GetMatch) ---------------------
   Строка = рынок, две колонки сторон. Коэффициент — просто жирным числом:
   заливок и цветных бейджей у нас в интерфейсе нет. */
.tn-mkt td { padding:6px 8px 6px 0; vertical-align:middle; }
.tn-mkt td + td { padding-left:8px; }
.tn-mkt-name { width:42%; color:var(--text-soft); font-size:12px; }
.tn-mkt-side { width:29%; white-space:nowrap; font-size:12px; }
.tn-mkt-side b { font-variant-numeric:tabular-nums; color:var(--text); }
@media (max-width:768px) {
  .tn-mkt-name { width:38%; font-size:11px; }
  .tn-mkt-side { width:31%; font-size:11px; }
}

/* Секции, которые подменяет live-поллер карточки, рендерятся всегда — даже пустыми,
   иначе блоку, появившемуся уже после загрузки (маркет после мэппинга фонбета,
   статы после первого гейма), некуда приехать. Пустую секцию прячем целиком. */
.tn-sec-live:has(> div:empty) { display: none; }

/* =====================================================================
   01.09.2026: шапка и тулбар на теннисных страницах.
   topnav-live.css/topnav-sport.css свёрстаны под футбольный грид с
   min-width:1500px: спорт-переключатель и кластер язык/⚙/вход прибиты
   absolute к краям ШИРОКОЙ шапки, а тулбар растягивается до 1500px.
   У тенниса контент ≤1100px — absolute-элементы наезжали на разделы
   («Сейчас/Новости» под пилюлей «Теннис», «N матчей» поверх фильтров).
   Здесь всё возвращается в поток: спорт слева, разделы следом,
   кластер справа через margin-left:auto. Файл грузится ПОСЛЕ
   topnav-*.css (порядок в TennisUi.Head), каскад наш.
   ===================================================================== */
/* !!! tennis.css грузится ДО topnav-live.css/topnav-sport.css (порядок TennisUi.Head),
   поэтому одинаковой специфичностью их не перебить — здесь везде body-префикс. */
@media (min-width:769px) {
  body .sg-topnav-live .sportbar-inline { position:static; transform:none; left:auto; margin-right:18px;
      padding-right:14px; border-right:1px solid #dfe4ea; flex:0 0 auto; }
  body.dark-theme .sg-topnav-live .sportbar-inline { border-right-color:#2a3038; }
  body .sg-topnav-live .sg-topnav-right { position:static; right:auto; transform:none;
      margin-left:auto; order:99; }
  body .sg-topnav-live .sg-topnav-inner { justify-content:flex-start; gap:16px; }
  body .toolbar { justify-content:flex-start; }
  body .toolbar-left { position:static; transform:none; left:auto; }
}
/* полоса 769–1499px: у футбола здесь шапка/тулбар тянутся до 1500px под грид —
   теннису это не нужно, возвращаем ширину вьюпорта */
@media (min-width:769px) and (max-width:1499px) {
  body .sg-topnav-live { width:100vw; min-width:0; margin-left:calc(50% - 50vw); }
  body .sg-topnav-live .sg-topnav-inner { justify-content:flex-start; }
  body .toolbar { min-width:0; }
}

/* =====================================================================
   01.09.2026: грид v2 — группировка по турнирам (паттерн FlashScore/Sofascore).
   Строка-заголовок турнира вместо league-row в каждом матче: матч ужался
   до двух строк игроков. Колонки: время | табло | форма | тренды | ⭐.
   ===================================================================== */
tr.tn-lg-hdr td { padding:7px 8px 4px; background:var(--page-bg); border-bottom:1px solid var(--row-border);
    font-size:11px; font-weight:700; color:var(--text-soft); }
tr.tn-lg-hdr .tn-lg-inner { display:flex; align-items:center; gap:6px; min-width:0; }
tr.tn-lg-hdr a { color:var(--text-soft); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
tr.tn-lg-hdr a:hover { color:var(--accent-blue); }
tr.tn-lg-hdr .tn-lg-tier { flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.4px;
    color:var(--court); border:1px solid currentColor; border-radius:3px; padding:0 4px; line-height:13px; }
tr.tn-lg-hdr .tn-lg-surface { flex:0 0 auto; font-size:10px; font-weight:600; color:var(--text-muted); }
body.dark-theme tr.tn-lg-hdr td { background:#202020; }

/* компактные строки матча: без league-row вся высота — два игрока */
.tn-live-grid td.teams-block { padding:3px 8px 4px; }
.tn-live-grid .tn-mrow-name { font-size:12.5px; }
.tn-live-grid .tn-mrow-sets { font-size:15px; flex-basis:20px; }
.tn-live-grid .tn-mrow { padding:0; }
.tn-live-grid .tn-finnote { font-size:10px; color:var(--text-muted); font-style:italic; }

/* колонка «Форма»: две мини-строки, выровненные с строками игроков табло */
td.tn-form-td { width:96px; padding:3px 6px 4px; vertical-align:middle; }
.tn-form-rows { display:flex; flex-direction:column; gap:6px; }
.tn-form-row { display:flex; align-items:center; gap:5px; height:15px; }
/* 02.09.2026 (владелец): счётчик W-L (.tn-fw) перед пилюлями убран — дублировал цвета. */
.tn-form-row .form-i { line-height:0; white-space:nowrap; }
.tn-form-row .form-i span { display:inline-block; width:10px; height:10px; line-height:10px; text-align:center;
    border-radius:2px; font-size:7.5px; font-weight:700; color:#fff; margin:0 1px 0 0; }
/* колонка «Сила» (02.09.2026, вечер — владелец: «сделай как на live.aspx»): один ряд
   «H &middot; A» по центру ячейки — та же подача, что колонка Pwd футбольного грида
   (live.aspx.cs, «Колонка Pwd»): фаворит (>=13) жирным зелёным, аутсайдер (<10)
   приглушён, середина обычным текстом. Иконка ph-barbell — в шапке. */
td.tn-pwr-td { width:56px; padding:3px 6px 4px; vertical-align:middle; text-align:center; }
.tn-pwd { cursor:help; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tn-pwd-v { color:var(--text-soft); }
.tn-pwd-v.fav { color:var(--accent-green-dark); font-weight:700; }
.tn-pwd-v.dim { color:var(--text-muted); }
.tn-pwd-sep { color:var(--text-muted); margin:0 2px; }

/* заголовок-сортировка (цикл ключей у «Формы», вкл/выкл у «Силы»; ↓/↑ — своя стрелка) */
th.tn-sort-hdr { cursor:pointer; user-select:none; white-space:nowrap; }
th.tn-sort-hdr.on { background:var(--accent-blue); color:#fff; }
th.tn-sort-hdr.on .hdr-icon-link i { color:#fff; }
th.tn-sort-hdr .tn-sort-lbl { font-size:9px; font-weight:700; }
/* стрелка направления — самостоятельная цель клика: 16px и своя подсветка, чтобы её
   не приходилось выцеливать в пиксель на тач-экране */
.tn-sort-dir { display:inline-block; min-width:14px; padding:0 3px; margin-left:2px; border-radius:3px;
    font-size:11px; line-height:14px; cursor:pointer; background:rgba(255,255,255,.22); }
.tn-sort-dir:hover { background:rgba(255,255,255,.4); }

/* колонка «Кф» (01.09 вечер): победа фонбета столбиком по строкам игроков,
   тотал геймов мелкой строкой под ними */
/* 02.09.2026 (вторая итерация): кэфы на победу — на уровне строк своих игроков
   (шаг 21px, как в табло), тотал — слева и по центру между ними. Высота ячейки
   ровно две строки, а не три. */
td.tn-odds-td { width:112px; padding:3px 6px; vertical-align:middle; }
.tn-odds-grid { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:7px; }
.tn-odds-wins { display:flex; flex-direction:column; gap:6px; }
.tn-odds-wins b { height:15px; line-height:15px; font-size:11px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums; text-align:right; }
/* 02.09.2026: тотал геймов — одной строкой разметкой футбольного грида
   (.tot-group/.tot-sep/.tot-line/.tot-o/.tot-u из tennis-grid.css). Там эти классы
   заданы только для светлой темы (color:#333) — тёмную дописываем здесь. */
.tn-odds-tot { font-size:9px; text-align:left; white-space:nowrap;
    font-variant-numeric:tabular-nums; cursor:help; }
.tn-odds-tot .tot-group { display:inline-flex; align-items:baseline; gap:3px; }
.tn-odds-tot .tot-sep { margin:0; font-size:8px; }
.tn-odds-tot .tot-line { color:var(--text-soft); }
body.dark-theme .tn-odds-tot .tot-line { color:#ddd; }
body.dark-theme .tn-odds-tot .tot-o { color:#81c784; }
body.dark-theme .tn-odds-tot .tot-u { color:#ef9a9a; }

/* колонка «Тренды» (01.09 вечер): мини-полоски прямо в ячейке (уменьшенный тултип),
   полный список — в hover-тултипе .tn-tip */
td.tn-trend-td { width:170px; padding:3px 6px; vertical-align:middle; }
td.tn-trend-td .tn-trend-chips { cursor:help; }
.tn-tr-mini { display:flex; align-items:center; gap:4px; font-size:10px; line-height:12.5px; }
.tn-tr-mini .n { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; color:var(--text-soft); }
.tn-tr-mini .b { flex:0 0 34px; height:4px; border-radius:2px; background:rgba(128,128,128,.22); overflow:hidden; }
.tn-tr-mini .b i { display:block; height:4px; background:var(--accent-blue,#1565C0); }
.tn-tr-mini .p { flex:0 0 26px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.tn-tr-more { font-size:9px; color:var(--text-dim); line-height:11px; }

/* мини-лейбл турнира в строке матча — виден только в плоском режиме сортировки,
   когда заголовков турниров нет (и после клика по «Форма») */
.tn-row-lg { display:none; font-size:10px; color:var(--text-dim); line-height:1.25;
    margin-bottom:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.tn-flat .tn-row-lg { display:block; }
.tn-tip { display:none; position:fixed; z-index:9999; min-width:280px; max-width:360px;
    background:#fff; border:1px solid #dbe2ea; border-radius:8px; box-shadow:0 6px 20px rgba(15,23,42,.18);
    padding:8px 10px; font-size:11.5px; color:#1b2733; }
.tn-tip .tt-row { display:grid; grid-template-columns:minmax(0,1fr) 56px 36px 56px; gap:6px; align-items:center; padding:2px 0; }
.tn-tip .tt-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-tip .tt-bar { height:5px; border-radius:3px; background:rgba(128,128,128,.22); overflow:hidden; }
.tn-tip .tt-bar > i { display:block; height:5px; background:var(--accent-blue,#1565C0); }
.tn-tip .tt-pct { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.tn-tip .tt-cnt { text-align:right; color:#6b7684; font-variant-numeric:tabular-nums; }
body.dark-theme .tn-tip { background:#252525; border-color:#3a3a3a; color:#ddd; }
body.dark-theme .tn-tip .tt-cnt { color:#999; }

/* мобиле: форма и тренды прячутся (как sec-col у футбола), табло — главное.
   Селекторы с table.live-table tbody — перебить nth-child-правила tennis-grid.css
   (там td:nth-child(4)/(5) под хоккейные колонки: 4-ю он показывает с подписью
   «Ритм», 5-ю прячет — у нас это тренды и избранное). */
@media (max-width:768px) {
  table.live-table tbody td.tn-form-td, table.live-table tbody td.tn-trend-td,
  table.live-table tbody td.tn-odds-td,
  th.tn-form-th, th.tn-trend-th, th.tn-odds-th, th.tn-pwr-th { display:none !important; }
  /* Сила на мобиле остаётся видимой — до 02.09 она жила прямо в строке игрока, и терять
     её при переезде в колонку нельзя. Показываем компактной строкой справа под табло
     (nth-child(4) generic-правило tennis-grid.css её прячет — перебиваем классом).
     Подпись берём из data-lbl: содержимое ::before локализуется сервером, а не CSS. */
  table.live-table.tn-live-grid tbody td.tn-pwr-td { display:inline-flex !important;
      flex-direction:column; align-items:flex-end; order:5; flex:0 0 auto;
      margin:4px 0 0 auto; align-self:center; }
  table.live-table.tn-live-grid tbody td.tn-pwr-td:empty { display:none !important; }
  /* специфичность выше, чем у tennis-grid.css `table.live-table tbody td:nth-child(4)::before`
     (там зашито хоккейное «Ритм») — иначе колонка силы подписывалась чужим словом */
  table.live-table.tn-live-grid tbody td.tn-pwr-td::before { content:attr(data-lbl); display:block;
      color:var(--text-dim); font-size:8px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
  table.live-table tbody td.watch-td { display:inline-flex !important; }
  tr.tn-lg-hdr td { display:block; }
}

/* =====================================================================
   01.09.2026: карточка матча — блок превью «Сводка» (H2H, покрытия,
   общие соперники). Без акцентных заливок: цифры, полосы, бейджи.
   ===================================================================== */
.tn-pv { display:flex; flex-direction:column; gap:10px; padding:10px 12px; }
.tn-pv-h2h { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tn-pv-h2h .tn-pv-score { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
.tn-pv-h2h .tn-pv-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-soft); }
.tn-pv-surf { display:flex; flex-wrap:wrap; gap:6px 14px; }
.tn-pv-surf-col { min-width:150px; flex:1 1 150px; }
.tn-pv-surf-name { font-size:11px; font-weight:700; color:var(--text-soft); margin-bottom:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-pv-surf-row { display:flex; align-items:center; gap:6px; font-size:11.5px; line-height:1.7; }
.tn-pv-surf-row .s-lbl { flex:0 0 74px; color:var(--text-soft); }
.tn-pv-surf-row .s-wl { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.tn-pv-surf-row.cur .s-lbl, .tn-pv-surf-row.cur .s-wl { color:var(--accent-blue); font-weight:700; }
.tn-pv-copp table { width:100%; border-collapse:collapse; font-size:12px; }
.tn-pv-copp td, .tn-pv-copp th { padding:5px 8px; text-align:center; border-bottom:1px solid var(--row-border); }
.tn-pv-copp th { font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-soft); font-weight:600; }
.tn-pv-copp td:first-child, .tn-pv-copp th:first-child { text-align:left; }
.tn-pv-copp .w { color:var(--accent-green-dark); font-weight:700; }
.tn-pv-copp .l { color:var(--accent-red); font-weight:700; }
.tn-pv-note { font-size:11px; color:var(--text-soft); line-height:1.45; }

/* =====================================================================
   01.09.2026 (вечер): дизайн-проход карточки матча (.tn-match на .container).
   Жалоба владельца: «блоки слишком широкие, плохо с отступами». Контент
   собран в узкую колонку 760px: герой-корт как баннер, секции и статы
   не растягиваются на 1100px. Заголовки секций — тихие капители, как
   подписи tn-ins-lbl: страница читается сверху вниз без «плакатных» h2.
   ===================================================================== */
.container.tn-match { max-width:760px; }
.tn-match .breadcrumb { margin-bottom:10px; }
.tn-match .tn-title { font-size:21px; margin:0 0 12px; }
.tn-match .tn-sec { margin-top:24px; }
.tn-match .tn-sec > h2 { font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.7px; color:var(--text-soft); margin:0 0 8px; }
.tn-match .tn-card { margin-bottom:0; }
@media (max-width:768px) { .tn-match .tn-title { font-size:18px; } .tn-match .tn-sec { margin-top:18px; } }

/* ---- видеообзор (01.09): официальные каналы ATP/WTA/шлемов, tns_MatchVideos.
   Паттерн hk-video: embeddable -> iframe nocookie, иначе карточка-ссылка. ---- */
.tn-video-frame { position:relative; width:100%; aspect-ratio:16/9; background:#000;
    border-radius:8px; overflow:hidden; }
.tn-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.tn-video-card { display:flex; align-items:center; gap:12px; padding:12px 14px;
    text-decoration:none; color:var(--text); }
.tn-video-card:hover { background:var(--row-hover); }
.tn-video-play { flex:0 0 42px; height:42px; border-radius:50%; background:#c4302b;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.tn-video-txt { min-width:0; }
.tn-video-title { display:block; font-size:13.5px; font-weight:600; line-height:1.4; }
.tn-video-src { display:block; font-size:11px; color:var(--text-dim); margin-top:2px; }

/* Расклад по тоталу геймов (01.09.2026): три среза + сверка с линией.
   Таблица внутри .tn-card, у которой нет своего паддинга, — задаём его тут. */
.tn-tot { padding:4px 0 10px; }
.tn-tot .tn-table th, .tn-tot .tn-table td { padding:7px 14px; text-align:right; }
.tn-tot .tn-table th:first-child, .tn-tot .tn-table td:first-child { text-align:left; }
.tn-tot-lbl { color:var(--text); }
.tn-tot-avg { font-weight:700; font-variant-numeric:tabular-nums; }
.tn-tot-alt { font-style:normal; font-weight:600; color:var(--text-soft); }
.tn-tot .ov { color:var(--accent-green); } .tn-tot .un { color:var(--accent-red); }
.tn-tot-src { display:inline-block; margin-left:6px; font-style:normal; font-size:10px;
              font-weight:600; text-transform:uppercase; letter-spacing:.3px;
              color:var(--text-soft); border:1px solid var(--card-border);
              border-radius:3px; padding:0 4px; line-height:15px; }
.tn-tot-src.live { color:var(--accent-red); border-color:var(--accent-red); }
.tn-tot-note { padding:8px 14px 0; font-size:11px; color:var(--text-soft); line-height:1.45; }
@media (max-width:768px) {
  .tn-tot .tn-table th, .tn-tot .tn-table td { padding:7px 8px; font-size:12px; }
  .tn-tot-note { padding:8px 8px 0; }
}

/* 02.09.2026: карточка матча — контент карточек не должен прилегать к рамке
   (владелец: «тексты снова прилегают к границам»): сетка «Расклад сил», тренды и
   пустое состояние получают тот же горизонтальный отступ, что таблицы (14px). */
.tn-match .tn-card > .tn-ins-grid { padding:10px 14px 8px; }
.tn-match .tn-card > .tn-ins-trends { padding:8px 14px 10px; }
.tn-match .tn-ins-note { padding:0 14px 10px; }
.tn-match .tn-empty { margin:0; padding:12px 14px; }
/* иконка «есть видеообзор» у матча в превью (очные, последние, общие соперники) */
.tn-vid { font-size:14px; color:var(--accent-blue); vertical-align:-2px; margin-left:4px; }
.tn-pvm .tn-vid { flex:0 0 auto; margin-left:0; }
body.dark-theme .tn-vid { color:#64b5f6; }

/* =====================================================================
   02.09.2026, разбор жалоб владельца по карточке матча:
   «нет возможности добавить в избранное», «коэффициенты должны быть
   кликабельны на фонбет», «блок общих соперников — чужие стили, можно
   компактнее», «тексты прилегают к границам».
   ===================================================================== */

/* заголовок + звезда избранного в одну строку */
.tn-match .tn-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.tn-match .tn-title-row .tn-title { margin:0; flex:1 1 auto; min-width:0; }
.tn-fav { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    min-height:32px; padding:5px 12px; border-radius:6px; font:inherit; font-size:12.5px; font-weight:600;
    color:var(--text-soft); background:var(--card-bg); border:1px solid var(--card-border); }
.tn-fav:hover { color:var(--text); border-color:var(--text-dim); }
.tn-fav:focus-visible { outline:2px solid var(--accent-blue); outline-offset:2px; }
.tn-fav .tn-fav-star { font-size:15px; line-height:1; }
.tn-fav.on { color:var(--accent-blue); border-color:var(--accent-blue); }
@media (max-width:520px) { .tn-fav .tn-fav-txt { display:none; } .tn-fav { padding:5px 10px; } }

/* кэфы — партнёрская ссылка: кликабельна вся ячейка, подчёркивания нет,
   цвет наследуется (это не «синяя ссылка», а тот же кэф, но кликабельный) */
.tn-mkt-go { color:inherit; text-decoration:none; display:inline-block; }
.tn-mkt .tn-mkt-side:hover { background:var(--row-hover); }
.tn-mkt-go:hover b { color:var(--accent-blue); }

/* общие соперники: одна строка на соперника, чипы матчей без заливок */
.tn-pv-copp .tn-co-opp { white-space:nowrap; }
.tn-co-cell { white-space:nowrap; }
.tn-co-bal { font-weight:700; font-variant-numeric:tabular-nums; }
.tn-co-bal.w { color:var(--ink-win); } .tn-co-bal.l { color:var(--ink-loss); }
.tn-co-m { display:inline-block; margin-left:6px; padding:1px 5px; border-radius:4px;
    font-size:11px; font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums;
    color:var(--text-soft); border:1px solid var(--card-border); }
.tn-co-m.w { color:var(--ink-win); border-color:var(--ink-win); }
.tn-co-m.l { color:var(--ink-loss); border-color:var(--ink-loss); }
.tn-co-m:hover { border-color:currentColor; }

/* карточки превью: контент не должен упираться в рамку — единый отступ 14px
   у таблиц и подписей внутри .tn-pv (таблицы держат его сами через td-padding). */
.tn-match .tn-pv { padding:12px 14px; gap:12px; }
.tn-match .tn-pv > .tn-table { margin:0 -14px; width:calc(100% + 28px); }
.tn-match .tn-pv-note, .tn-match .tn-pv-sub { padding:0; }

/* мобиль: таблица тотала в 5 колонок не влезает в 360px и уезжала за карточку —
   «разброс» прячем (он справочный, средний и Б/М важнее), подписи ужимаем. */
@media (max-width:520px) {
  .tn-tot .tn-table th:nth-child(4), .tn-tot .tn-table td:nth-child(4) { display:none; }
  .tn-tot .tn-table th, .tn-tot .tn-table td { padding:6px 6px; font-size:12px; }
  .tn-tot .tn-table th:first-child, .tn-tot .tn-table td:first-child { white-space:normal; }
  .tn-pv-surf-col { min-width:0; flex:1 1 100%; }
  /* чипы матчей — тач-цель не ниже 28px (у ссылки в 21px промахнуться легко) */
  .tn-co-m { padding:4px 7px; margin-top:3px; }
}

/* 02.09.2026, вторая итерация цвета (владелец: «сейчас это простыня текста, не видно
   где победы где поражения»): вернули СИЛЬНЫЙ маркер исхода, но не заливкой строки —
   пилюля П/У: победа залита корт-синим, поражение контурное. Разная весомость читается
   мгновенно и в ч/б, а фон строки остаётся чистым, как и просили. */
.tn-pvm { min-height:30px; }
.tn-pv-lastbody .tn-pvm + .tn-pvm { border-top:1px solid var(--row-border); }

/* тёмная тема: залитая пилюля светло-голубая, белый текст на ней даёт 2:1 —
   пишем по ней тёмным (14:1). Токен, а не хардкод: оттенок победы меняется в одном месте. */


/* Ссылки на соперника в блоке общих соперников шли БРАУЗЕРНЫМ дефолтом
   (#0000ee + подчёркивание): в светлой теме это и читалось как «чужие стили»,
   в тёмной давало контраст 1.6:1. Таблица не .tn-table, поэтому общее правило
   ссылок её не покрывало — задаём явно, как у остальных таблиц раздела. */
.tn-pv-copp a { color:var(--text); text-decoration:none; }
.tn-pv-copp a:hover { color:var(--court); text-decoration:underline; }
.tn-pv-copp .tn-co-m, .tn-pv-copp .tn-co-m:hover { text-decoration:none; }

/* 02.09.2026, третья итерация (владелец: «стандартные цвета побед и проигрышей —
   зелёные и красные, и выделять так ВСЮ строку»): вернули заливку строки. В блоке
   общих соперников строка общая на двух игроков, поэтому красится КАЖДАЯ ЯЧЕЙКА
   по своему исходу — тот же язык, но без вранья про общий результат строки. */
.tn-co-cell.w { background:var(--accent-green-soft); }
.tn-co-cell.l { background:var(--accent-red-soft); }
.tn-pv-copp tbody tr:hover .tn-co-cell.w { box-shadow:inset 0 0 0 1px var(--ink-win); }
.tn-pv-copp tbody tr:hover .tn-co-cell.l { box-shadow:inset 0 0 0 1px var(--ink-loss); }

/* ===== Поделиться (02.09.2026, владелец: «нет кнопки шарить матч ни на главной, ни на
   странице матча»). В гриде — иконка-призрак рядом со звездой избранного, в карточке —
   пилюля того же вида, что .tn-fav. Тост общий (.tn-toast), JS — window.tnShare. ===== */
td.watch-td { white-space:nowrap; }
.tn-share-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
    margin-left:3px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--text-muted);
    cursor:pointer; font-size:15px; line-height:1; vertical-align:middle; }
.tn-share-btn:hover, .tn-share-btn:focus-visible { color:var(--accent-blue,#1565C0); background:rgba(21,101,192,.08); }
.tn-share-btn:focus-visible { outline:2px solid var(--accent-blue,#1565C0); outline-offset:1px; }
body.dark-theme .tn-share-btn:hover { background:rgba(255,255,255,.08); }
.tn-fav.tn-share .tn-fav-star { font-size:16px; }
.tn-toast { position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(12px); z-index:10000;
    background:#1565C0; color:#fff; padding:8px 14px; border-radius:18px; font-size:13px; font-weight:600;
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; white-space:nowrap; }
.tn-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.tn-toast-err { background:#c0392b; }

/* ===== Три уровня контраста (02.09.2026, владелец: «слишком много серых/чёрных чисел»).
   Чёрным и жирным — только решение: имя и сеты победителя, кэф фаворита, счёт
   выигранных сетов. Обычным — контекст: геймы, линия тотала. Самым светлым — ранг,
   проигравшая сторона. Сила — одной полоской, тренды — счётчик вместо процента. ===== */
.tn-r-fin .tn-mrow:not(.win) .tn-mrow-name { color:var(--text-soft); }
.tn-r-fin .tn-mrow:not(.win) .tn-mrow-sets { color:var(--text-muted); }
.tn-odds-wins b { font-weight:500; color:var(--text-soft); }
.tn-odds-wins b.fav { font-weight:700; color:var(--text); }
.tn-odds-tot .tot-line { color:var(--text-muted); font-weight:600; }
.tn-odds-tot .tot-o, .tn-odds-tot .tot-u { font-weight:500; }
.tn-tr-mini .p { flex:0 0 30px; font-weight:600; color:var(--text-soft); }
/* прерванный матч: подпись под временем возобновления */
.tn-intr-lbl { display:block; font-size:8px; line-height:9px; margin-top:2px; text-align:center; text-transform:uppercase;
    letter-spacing:.3px; font-weight:700; color:#b26a00; }
body.dark-theme .tn-intr-lbl { color:#ffb74d; }
/* ITF по умолчанию — только заголовок группы со счётчиком и ссылкой «показать» */
tr.tn-lg-hdr .tn-lg-lazy-n { margin-left:auto; flex:0 0 auto; font-size:10px; color:var(--text-dim); white-space:nowrap; }
tr.tn-lg-hdr .tn-lg-lazy-n a { color:var(--accent-blue,#1565C0); overflow:visible; }

/* 02.09.2026: иконка покрытия «корт сверху» (вариант 4 из /TennisIconsLab.aspx).
   Выравнивание по базовой линии текста, а не по центру строки: чип покрытия стоит
   в потоке подписей, и иконка не должна их приподнимать. */
.tn-surf-i { flex:0 0 auto; vertical-align:-2px; margin-right:4px; }
.tn-pv-sf .tn-surf-i, .tn-lg-surface .tn-surf-i { margin-right:3px; }
.tn-lg-surface { display:inline-flex; align-items:center; }
.tn-pv-surf-row .s-lbl { display:inline-flex; align-items:center; }
.tn-surf { display:inline-flex; align-items:center; }