.szpn-widget {
            --szpn-red: #d70a14;
            --szpn-gold-1: #fbbc0c;
            --szpn-gold-2: #f7a901;
            --szpn-orange: #ff8a00;
            --szpn-ink: #1d1d1d;
            --szpn-muted: rgba(0, 0, 0, 0.62);
            --szpn-border: rgba(17, 17, 17, 0.12);
            --szpn-bg: #ffffff;
            --szpn-soft: rgba(247, 169, 1, 0.07);
            --szpn-cream: #fff7ea;
            --szpn-radius: 8px;
            --szpn-radius-sm: 6px;
            --szpn-radius-pill: 8px;
            --szpn-shadow: none;
            --szpn-shadow-soft: none;
            --szpn-grad: none;
            --szpn-grad-soft: none;

            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 16px;
            align-items: start;
            margin: 24px 0;
         }

         .szpn-widget,
         .szpn-widget * {
            box-sizing: border-box;
         }

         @media (max-width: 900px) {
            .szpn-widget {
               grid-template-columns: 1fr;
               margin: 16px 0;
            }
         }

         .szpn-widget__sidebar,
         .szpn-widget__content {
            background: var(--szpn-bg);
            border: 1px solid var(--szpn-border);
            border-top: 3px solid var(--szpn-red);
            border-radius: var(--szpn-radius);
            overflow: hidden;
            box-shadow: var(--szpn-shadow-soft);
            min-width: 0;
         }

         .szpn-widget__sidebarHeader {
            padding: 14px 14px 12px;
            border-bottom: 1px solid var(--szpn-border);
            background: #fff;
            position: relative;
         }

         .szpn-widget__sidebarHeader::after {
            content: none;
         }

         .szpn-widget__title {
            position: relative;
            z-index: 1;
            margin: 0 0 10px;
            font-size: 16px;
            line-height: 1.2;
            letter-spacing: 0.01em;
            color: var(--szpn-ink);
         }

         .szpn-widget__search {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--szpn-radius-sm);
            border: 1px solid rgba(0, 0, 0, 0.18);
            outline: none;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: none;
         }

         .szpn-widget__search:focus {
            border-color: rgba(215, 10, 20, 0.5);
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
         }

         .szpn-widget__sidebarBody {
            padding: 12px 10px 14px;
            background: #fff;
         }

         .szpn-widget__sectionLabel {
            font-size: 11px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.60);
            padding: 10px 6px 6px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
         }

         .szpn-widget__competitionList {
            display: grid;
            gap: 6px;
         }

         /* ─────────────────────────────────────────────────────────────
            Sekcja „Moje drużyny" w sidebarze — pokazuje listę
            ulubionych klubów z localStorage. Pojawia się tylko jeśli
            użytkownik dodał coś do ulubionych (atrybut `hidden` zarządzany
            z JS przez `renderFavoritesSidebar()`).
            ───────────────────────────────────────────────────────────── */
         .szpn-widget__favorites {
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid var(--szpn-border);
         }

         .szpn-widget__favList {
            display: grid;
            gap: 2px;
         }

         /* Pojedynczy item ulubionej drużyny — klikalny przycisk, otwiera
            overlay drużyny (przez `[data-team-id]` w event delegacji). */
         .szpn-widget__favList .szpn-favItem {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border: 0;
            background: transparent;
            border-radius: var(--szpn-radius-sm);
            cursor: pointer;
            text-align: left;
            font: inherit;
            color: inherit;
            transition: background 0.15s ease;
         }

         .szpn-widget__favList .szpn-favItem:hover {
            background: rgba(0, 0, 0, 0.04);
         }

         .szpn-widget__favList .szpn-favItem .szpn-teamCrest {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            object-fit: contain;
         }

         .szpn-widget__favList .szpn-favItem .szpn-teamName {
            flex: 1 1 auto;
            font-size: 13px;
            font-weight: 600;
            color: var(--szpn-ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }

         /* Pozycja drużyny z aktualnej tabeli — mała pigułka po prawej.
            Pomijana jeśli drużyna nie jest w obecnie wybranej rozgrywce. */
         .szpn-favItem__pos {
            flex: 0 0 auto;
            font-size: 11px;
            font-weight: 800;
            color: rgba(0, 0, 0, 0.55);
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
         }

         /* ─────────────────────────────────────────────────────────────
            Gwiazdka „dodaj do ulubionych" w wierszach tabeli. Domyślnie
            wyszarzona, bardzo dyskretna; podświetla się przy hover'ze
            wiersza i staje się złota gdy `is-active` (drużyna zapisana).
            ───────────────────────────────────────────────────────────── */
         .szpn-favBtn {
            flex: 0 0 auto;
            margin-left: auto;
            padding: 2px 6px;
            border: 0;
            background: transparent;
            color: rgba(0, 0, 0, 0.42);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            border-radius: 4px;
            transition: color 0.15s ease, transform 0.15s ease;
         }

         .szpn-standingsRow:hover .szpn-favBtn {
            color: rgba(0, 0, 0, 0.62);
         }

         .szpn-favBtn:hover {
            color: var(--szpn-gold-2);
            transform: scale(1.20);
         }

         .szpn-favBtn.is-active {
            color: var(--szpn-gold-2);
            text-shadow: 0 1px 2px rgba(247, 169, 1, 0.35);
         }

         .szpn-favBtn.is-active:hover {
            color: var(--szpn-orange);
         }

         /* W trybie kompaktowym gwiazdka jest mniejsza, mniej miejsca w
            kolumnie nazwy. */
         .szpn-table--compact .szpn-favBtn {
            font-size: 12px;
            padding: 1px 3px;
         }

         .szpn-catSegs {
            display: flex;
            gap: 8px;
            padding: 2px 2px 10px;
            overflow: auto;
            scrollbar-width: thin;
            flex-wrap: nowrap;
         }

         @media (min-width: 901px) {
            .szpn-catSegs {
               flex-wrap: wrap;
               overflow: visible;
               padding-bottom: 6px;
            }
         }

         /* PRO refactor: kategorie minimalistyczne underline. Czerwień TYLKO
            jako akcent aktywnego stanu. Pille liczbowe usunięte (display:none). */
         .szpn-catSeg {
            appearance: none;
            border: 0;
            background: transparent;
            color: rgba(0, 0, 0, 0.55);
            border-radius: 0;
            padding: 8px 4px 9px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            position: relative;
            border-bottom: 2px solid transparent;
            transition: color 140ms ease, border-bottom-color 140ms ease;
         }

         .szpn-catSeg:hover {
            color: rgba(0, 0, 0, 0.85);
         }

         .szpn-catSeg:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(215, 10, 20, 0.18);
            border-radius: 4px;
         }

         .szpn-catSeg.is-active {
            color: var(--szpn-red);
            font-weight: 800;
            border-bottom-color: var(--szpn-red);
         }

         .szpn-catSeg__pill {
            display: none;
         }

         /* Section header (LIGI WOJEWÓDZKIE / KIELCE / SANDOMIERZ) — mała,
            ALL CAPS, subtelna. Bez liczbowego pillu. */
         .szpn-subHead {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            margin: 14px 0 6px;
            padding: 0 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.10em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.45);
         }

         .szpn-subHead__pill {
            display: none;
         }

         .szpn-playTile {
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.14);
            background: rgba(255, 255, 255, 0.96);
            border-radius: 14px;
            padding: 10px 10px;
            text-align: left;
            cursor: pointer;
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 10px;
            align-items: center;
         }

         .szpn-playTile.is-active {
            border-color: rgba(215, 10, 20, 0.45);
            background: rgba(215, 10, 20, 0.05);
            box-shadow: inset 3px 0 0 var(--szpn-red);
         }

         .szpn-playLogoWrap {
            height: 42px;
            width: 42px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.9);
            border: 0;
            display: grid;
            place-items: center;
            overflow: hidden;
         }

         .szpn-playLogo {
            width: 28px;
            height: 28px;
            object-fit: contain;
         }

         .szpn-playTitle {
            font-size: 13px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.88);
            line-height: 1.15;
         }

         .szpn-playSubtitle {
            margin-top: 3px;
            font-size: 12px;
            font-weight: 650;
            color: rgba(0, 0, 0, 0.66);
            line-height: 1.2;
         }

         .szpn-acc {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            padding-top: 10px;
            margin-top: 6px;
         }

         .szpn-acc:first-child {
            border-top: 0;
            padding-top: 0;
            margin-top: 0;
         }

         .szpn-acc__head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 6px 6px;
            border: 0;
            background: transparent;
            cursor: pointer;
            text-align: left;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.62);
         }

         .szpn-acc__head:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
            border-radius: 8px;
         }

         .szpn-acc__chev {
            opacity: 0.8;
            font-size: 12px;
            line-height: 1;
            transform: translateY(-1px);
         }

         .szpn-acc__panel {
            display: grid;
            gap: 6px;
            padding-bottom: 6px;
         }

         .szpn-treeLeague {
            margin: 6px 0 2px;
         }

         .szpn-treeLeague__head {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 6px 6px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.03);
         }

         .szpn-leagueLogo {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            object-fit: contain;
            background: #fff;
            border: 0;
            flex: 0 0 auto;
         }

         .szpn-treeLeague__name {
            font-size: 12px;
            font-weight: 800;
            color: rgba(0, 0, 0, 0.78);
            line-height: 1.15;
         }

         .szpn-treeLeague__list {
            display: grid;
            gap: 6px;
            margin: 8px 0 10px;
            padding-left: 10px;
            border-left: 2px solid rgba(0, 0, 0, 0.08);
         }

         .szpn-treeSubcat {
            margin: 6px 0 10px;
         }

         .szpn-treeSubcat__head {
            padding: 6px 6px 6px;
            font-size: 12px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.72);
            letter-spacing: 0.01em;
         }

         .szpn-treeSubcat__list {
            display: grid;
            gap: 8px;
            padding-left: 10px;
            border-left: 2px solid rgba(0, 0, 0, 0.08);
         }

         .szpn-widget__groupLabel {
            margin: 10px 6px 2px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.58);
         }

         .szpn-widget__competition {
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.14);
            background: rgba(255, 255, 255, 0.96);
            border-radius: var(--szpn-radius);
            padding: 10px 10px 10px 12px;
            text-align: left;
            cursor: pointer;
            font-weight: 700;
            color: var(--szpn-ink);
            box-shadow: none;
            transition:
               transform 120ms ease,
               border-color 120ms ease,
               background 120ms ease;
         }

         .szpn-widget__competition:hover:not(.is-active) {
            transform: none;
            border-color: rgba(215, 10, 20, 0.30);
            background: rgba(255, 255, 255, 1);
         }

         .szpn-widget__competition:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
         }

         .szpn-widget__competition small {
            display: block;
            margin-top: 2px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.60);
         }

         .szpn-widget__competition.is-active {
            border-color: rgba(215, 10, 20, 0.45);
            background: rgba(215, 10, 20, 0.05);
            color: var(--szpn-ink);
            box-shadow: inset 3px 0 0 var(--szpn-red);
         }

         .szpn-widget__competition.is-active:hover {
            border-color: rgba(215, 10, 20, 0.55);
            background: rgba(215, 10, 20, 0.06);
         }

         .szpn-widget__competition.is-active small {
            color: rgba(0, 0, 0, 0.60);
         }

         .szpn-widget__contentHeader {
            padding: 14px;
            border-bottom: 1px solid var(--szpn-border);
            display: grid;
            gap: 10px;
            background: #fff;
         }

         .szpn-widget__competitionName {
            margin: 0;
            font-size: 18px;
            line-height: 1.2;
            letter-spacing: 0.01em;
            color: var(--szpn-ink);
         }

         .szpn-widget__subheading {
            margin: 4px 0 0;
            color: rgba(0, 0, 0, 0.62);
            font-size: 13px;
            font-weight: 500;
         }

         /* PRO refactor: taby Tabela/Dziś/Mecze/Statystyki/Galeria
            jako underline-only. Spójne z subtabami (Ogólnie/U siebie/...). */
         .szpn-widget__tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.10);
            margin-bottom: 4px;
         }

         .szpn-widget__tab {
            appearance: none;
            border: 0;
            background: transparent;
            border-radius: 0;
            padding: 10px 14px 11px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.01em;
            color: rgba(0, 0, 0, 0.55);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: relative;
            margin-bottom: -1px;
            border-bottom: 3px solid transparent;
            transition: color 140ms ease, border-bottom-color 140ms ease;
         }

         .szpn-widget__tab .szpn-tabIcon {
            font-size: 13px;
            opacity: 0.7;
            flex: 0 0 auto;
            transition: opacity 140ms ease;
         }

         .szpn-widget__tab,
         .szpn-widget__subtab,
         .szpn-widget__competition {
            line-height: 1.2;
         }

         .szpn-widget__tab:hover {
            color: rgba(0, 0, 0, 0.85);
         }

         .szpn-widget__tab:hover .szpn-tabIcon {
            opacity: 0.95;
         }

         .szpn-widget__tab:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(215, 10, 20, 0.18);
            border-radius: 4px;
         }

         .szpn-widget__tab.is-active {
            color: var(--szpn-red);
            font-weight: 800;
            border-bottom-color: var(--szpn-red);
         }

         .szpn-widget__tab.is-active .szpn-tabIcon {
            opacity: 1;
         }

         .szpn-widget__panel {
            display: none;
            padding: 14px;
            /* min-width:0 — bez tego grid item (1fr) rozciąga się do
               intrinsic content size, co psuje overflow scroll dla
               szerokich elementów (heatmap kalendarza, timeline kolejek). */
            min-width: 0;
         }

         .szpn-widget__panel.is-active {
            display: block;
         }

         .szpn-widget__subtabs {
            display: flex;
            flex-wrap: nowrap;
            gap: 6px;
            margin: 0 0 12px;
            padding-bottom: 2px;
            overflow: auto;
            scrollbar-width: thin;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            position: relative;
            z-index: 2;
         }

         .szpn-widget__subtab {
            appearance: none;
            border: 0;
            border-bottom: 3px solid transparent;
            background: transparent;
            border-radius: 0;
            padding: 10px 12px 9px;
            cursor: pointer;
            font-weight: 800;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.70);
            white-space: nowrap;
            transition:
               border-color 120ms ease,
               background 120ms ease;
         }

         .szpn-widget__subtab:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
            border-radius: 8px;
         }

         .szpn-widget__subtab:hover {
            background: rgba(0, 0, 0, 0.03);
            color: rgba(0, 0, 0, 0.82);
         }

         .szpn-widget__subtab.is-active {
            border-bottom-color: var(--szpn-red);
            background: transparent;
            color: rgba(0, 0, 0, 0.90);
         }

         .szpn-tableWrap {
            overflow: auto;
            border: 1px solid rgba(0, 0, 0, 0.14);
            border-radius: var(--szpn-radius);
            box-shadow: none;
         }

         .szpn-standingsAllGrid {
            display: grid;
            gap: 14px;
         }

         .szpn-standingsScopeTitle {
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.02em;
            color: rgba(0, 0, 0, 0.72);
            margin: 2px 2px 8px;
         }

         table.szpn-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 560px;
            background: #fff;
         }

         .szpn-table th,
         .szpn-table td {
            padding: 10px 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.10);
            font-size: 13px;
            white-space: nowrap;
            text-align: left;
         }

         .szpn-table thead th:nth-child(n + 3),
         .szpn-table tbody td:nth-child(n + 3) {
            text-align: right;
         }

         .szpn-table thead th:nth-child(2),
         .szpn-table tbody td:nth-child(2) {
            text-align: left;
         }

         .szpn-table tbody tr:nth-child(even) td {
            background: rgba(0, 0, 0, 0.015);
         }

         .szpn-table tbody tr:hover td {
            background: rgba(0, 0, 0, 0.02);
         }

         .szpn-teamBtn {
            appearance: none;
            border: 0;
            background: transparent;
            padding: 0;
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font: inherit;
            color: inherit;
            cursor: pointer;
            max-width: 100%;
         }

         .szpn-teamBtn:hover {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: rgba(215, 10, 20, 0.35);
         }

         .szpn-teamCrest {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            object-fit: contain;
            background: rgba(0, 0, 0, 0.03);
            border: 0;
            flex: 0 0 auto;
         }

         .szpn-teamBtn span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-standingsRow[data-team-id] {
            cursor: pointer;
         }

         .szpn-standingsRow[data-team-id]:focus-visible {
            outline: none;
         }

         .szpn-standingsRow[data-team-id]:focus-visible td {
            box-shadow: inset 0 0 0 3px rgba(215, 10, 20, 0.18);
         }

         .szpn-table thead th {
            position: sticky;
            top: 0;
            background: #f7f7f7;
            z-index: 1;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(0, 0, 0, 0.72);
            border-bottom: 1px solid rgba(0, 0, 0, 0.18);
         }

         /* ─── PRO TABELA ────────────────────────────────────────────────
            Backend zwraca `promotion_status` ("Promotion"/"Demotion"/"None")
            + `is_cancelled`. JS mapuje na klasy CSS poniżej. */

         /* Stripe — alternujące wiersze */
         .szpn-table tbody tr:nth-child(even) td {
            background: rgba(0, 0, 0, 0.018);
         }

         /* Hover (klikalne) */
         .szpn-table tbody tr.szpn-standingsRow:hover td {
            background: rgba(215, 10, 20, 0.05);
         }

         /* Awans: zielony pasek lewy + tint */
         .szpn-row--promotion td:first-child {
            box-shadow: inset 4px 0 0 #15803d;
         }
         .szpn-table tbody tr.szpn-row--promotion td {
            background: rgba(21, 128, 61, 0.045);
         }
         .szpn-table tbody tr.szpn-row--promotion:hover td {
            background: rgba(21, 128, 61, 0.10);
         }

         /* Spadek: czerwony pasek lewy + tint */
         .szpn-row--demotion td:first-child {
            box-shadow: inset 4px 0 0 #dc2626;
         }
         .szpn-table tbody tr.szpn-row--demotion td {
            background: rgba(220, 38, 38, 0.045);
         }
         .szpn-table tbody tr.szpn-row--demotion:hover td {
            background: rgba(220, 38, 38, 0.10);
         }

         /* Lider tabeli (#1) — złoty akcent na pozycji */
         .szpn-row--leader .szpn-pos {
            color: #b45309;
            font-weight: 900;
         }

         /* Drużyna wycofana */
         .szpn-row--cancelled td {
            opacity: 0.45;
         }
         .szpn-row--cancelled .szpn-teamName {
            text-decoration: line-through;
         }

         .szpn-table tbody td {
            transition: background 120ms ease;
         }

         /* Pozycja: bold, monospaced */
         .szpn-pos {
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            color: rgba(0, 0, 0, 0.72);
            text-align: center;
            white-space: nowrap;
         }

         /* Strzałka ruchu w tabeli (po ostatniej kolejce) — z `position_status`
            w payload-zie standings: "Upper" → ▲ zielona, "Lower" → ▼ czerwona.
            Mała ikonka obok numeru pozycji, nie zwiększa wysokości wiersza. */
         .szpn-posArrow {
            display: inline-block;
            margin-left: 3px;
            font-size: 9px;
            line-height: 1;
            font-weight: 700;
            vertical-align: 1px;
            letter-spacing: 0;
         }

         .szpn-posArrow--up {
            color: #15803d;
         }

         .szpn-posArrow--down {
            color: #b91c1c;
         }

         /* W trybie kompaktowym strzałka jest mniejsza i bliżej liczby
            (mało miejsca na mobile). */
         .szpn-table--compact .szpn-posArrow {
            margin-left: 2px;
            font-size: 8px;
         }

         /* Liczby (M/W/R/P/BZ/BS/+/-) — monospaced + center */
         .szpn-num {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            text-align: center;
            color: rgba(0, 0, 0, 0.78);
         }

         /* Goal diff — kolorowanie */
         .szpn-gd--positive { color: #15803d; font-weight: 700; }
         .szpn-gd--negative { color: #b91c1c; font-weight: 700; }

         /* Punkty — bold, ciemny */
         .szpn-pts {
            font-weight: 900;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.92);
         }

         /* ── DENSITY TOGGLE (Kompaktowo / Pełny widok) ──────────────── */

         .szpn-widget__tableHeader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
         }

         .szpn-widget__tableHeader .szpn-widget__subtabs {
            flex: 1 1 auto;
            min-width: 0;
         }

         .szpn-densityToggle {
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.14);
            background: #fff;
            color: rgba(0, 0, 0, 0.65);
            border-radius: 8px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            flex: 0 0 auto;
            margin-bottom: 6px;
            transition: border-color 140ms ease, background 140ms ease,
               color 140ms ease;
         }

         .szpn-densityToggle::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image:
               linear-gradient(currentColor, currentColor),
               linear-gradient(currentColor, currentColor),
               linear-gradient(currentColor, currentColor);
            background-repeat: no-repeat;
            background-size: 100% 2px, 100% 2px, 100% 2px;
            background-position: 0 2px, 0 7px, 0 12px;
            opacity: 0.7;
         }

         .szpn-densityToggle:hover {
            border-color: rgba(215, 10, 20, 0.30);
            background: rgba(215, 10, 20, 0.03);
            color: rgba(0, 0, 0, 0.85);
         }

         .szpn-densityToggle:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.15);
         }

         .szpn-densityToggle.is-active {
            border-color: var(--szpn-red);
            background: rgba(215, 10, 20, 0.08);
            color: var(--szpn-red);
         }

         /* Tryb kompakt — ukrywa kolumny W/R/P/BZ/BS (nth-child 4-8),
            zostawia #/Drużyna/M/+/-/PKT (nth-child 1, 2, 3, 9, 10).
            Bramki widoczne jako bilans goal-diff (kolorowany zielono/czerwono). */
         .szpn-table--compact thead th:nth-child(4),
         .szpn-table--compact thead th:nth-child(5),
         .szpn-table--compact thead th:nth-child(6),
         .szpn-table--compact thead th:nth-child(7),
         .szpn-table--compact thead th:nth-child(8),
         .szpn-table--compact tbody td:nth-child(4),
         .szpn-table--compact tbody td:nth-child(5),
         .szpn-table--compact tbody td:nth-child(6),
         .szpn-table--compact tbody td:nth-child(7),
         .szpn-table--compact tbody td:nth-child(8) {
            display: none;
         }

         /* W kompakt — kolumny które zostały dostają więcej oddechu */
         .szpn-table--compact tbody td,
         .szpn-table--compact thead th {
            padding: 12px 10px;
         }

         /* Legenda pod tabelą */
         .szpn-table-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            padding: 10px 14px 0;
            font-size: 11px;
            color: rgba(0, 0, 0, 0.55);
         }
         .szpn-table-legend__item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
         }
         .szpn-table-legend__dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
         }
         .szpn-table-legend__dot--promotion { background: #15803d; }
         .szpn-table-legend__dot--demotion { background: #dc2626; }

         .szpn-widget__empty {
            border: 1px dashed rgba(0, 0, 0, 0.22);
            border-radius: var(--szpn-radius);
            padding: 14px;
            color: rgba(0, 0, 0, 0.70);
            background: rgba(0, 0, 0, 0.02);
         }

         /* Loading state — kontener z subtelnym tłem + animowana piłka
            (CSS-art) jako dziecko `.szpn-widget__ball` przed tekstem.
            JS używa helpera `loadingHtml(context)` z `szpn-widget.js`,
            który zwraca strukturę:
              <div class="szpn-widget__loading" data-szpn-loading>
                 <span class="szpn-widget__ball">
                    <span class="szpn-widget__ballShadow"></span>
                 </span>
                 <span class="szpn-widget__loadingText">Łapanie wyników…</span>
              </div>
            Stary fallback (sam tekst w środku) nadal działa — wtedy
            pseudo-element `::before` rysuje uproszczoną piłkę-emoji
            zamiast CSS-art (patrz `.szpn-widget__loading:not(:has(.szpn-widget__ball))::before`). */
         .szpn-widget__loading {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-radius: var(--szpn-radius);
            color: rgba(0, 0, 0, 0.68);
            background: linear-gradient(
               180deg,
               rgba(255, 255, 255, 1) 0%,
               rgba(247, 247, 247, 1) 100%
            );
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            animation: szpn-fade-in 0.18s ease-out;
            transition: color 0.3s ease;
         }

         /* Fallback dla starszych miejsc, które jeszcze nie używają helpera
            (powinno być puste — wszystkie miejsca zostały zmigrowane). */
         .szpn-widget__loading:not(:has(.szpn-widget__ball))::before {
            content: "⚽";
            display: inline-block;
            flex: 0 0 auto;
            font-size: 20px;
            line-height: 1;
            transform-origin: center;
            animation: szpn-ball-bounce 0.55s cubic-bezier(0.45, 0, 0.55, 1)
               infinite alternate;
         }

         /* Kontener piłki + cienia. Wysokość 28px daje miejsce na cień
            pod piłką (22px piłka + 6px na cień). */
         .szpn-widget__ball {
            position: relative;
            display: inline-block;
            flex: 0 0 auto;
            width: 22px;
            height: 28px;
         }

         /* Sama piłka — biały krążek z SVG-em wzoru piłki nożnej:
            centralny pięciokąt + 5 szwów wychodzących na zewnątrz
            (klasyczny ikoniczny wzór). Pod SVG radial-gradient daje
            sferyczne podświetlenie. Inset shadow lokalnie ściemnia
            dolną krawędź dla efektu 3D. */
         .szpn-widget__ball::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #f7f7f7;
            background-image:
               url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,32 66,44 60,63 40,63 34,44' fill='%23111'/%3E%3Cpath d='M50 32 L50 6 M66 44 L88 32 M60 63 L74 83 M40 63 L26 83 M34 44 L12 32' stroke='%23111' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"),
               radial-gradient(
                  circle at 35% 28%,
                  rgba(255, 255, 255, 1) 0%,
                  rgba(220, 220, 220, 0.55) 75%
               );
            background-size: 92%, 100%;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            border: 1px solid rgba(0, 0, 0, 0.32);
            box-shadow:
               inset -2px -3px 4px rgba(0, 0, 0, 0.14);
            transform-origin: 50% 100%;
            animation: szpn-ball-bounce 0.55s cubic-bezier(0.45, 0, 0.55, 1)
               infinite alternate;
         }

         /* Cień pod piłką — animowany inwersyjnie do skoku piłki: gdy
            piłka u góry, cień jest mały i rozmyty; gdy spada, cień
            powiększa się i staje wyraźniejszy. Daje to złudzenie głębi. */
         .szpn-widget__ballShadow {
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 18px;
            height: 4px;
            margin-left: -9px;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 50%;
            filter: blur(2px);
            transform-origin: 50% 50%;
            animation: szpn-ball-shadow 0.55s cubic-bezier(0.45, 0, 0.55, 1)
               infinite alternate;
         }

         .szpn-widget__loadingText {
            display: inline-block;
            transition: color 0.3s ease, opacity 0.3s ease;
         }

         /* Wariant „slow” — po ~3s ładowania pokazujemy łagodniejszy
            kolor i bardziej wytrzymały komunikat. */
         .szpn-widget__loading--slow {
            color: rgba(0, 0, 0, 0.55);
         }

         /* Wariant „bardzo wolno” — po ~7s. Lekki puls piłki, jakby
            zmęczona po długim biegu. */
         .szpn-widget__loading--vslow {
            color: rgba(0, 0, 0, 0.50);
         }

         .szpn-widget__loading--vslow .szpn-widget__ball::before {
            animation-duration: 0.75s;
         }

         .szpn-widget__loading--vslow .szpn-widget__ballShadow {
            animation-duration: 0.75s;
         }

         @keyframes szpn-ball-bounce {
            from {
               transform: translateY(0) rotate(-12deg);
            }
            to {
               transform: translateY(-9px) rotate(12deg);
            }
         }

         /* Cień: from = ball on ground (big, dark), to = ball in air
            (small, faded). `alternate` na obu animacjach utrzymuje sync. */
         @keyframes szpn-ball-shadow {
            from {
               transform: scaleX(1) scaleY(1);
               opacity: 0.40;
            }
            to {
               transform: scaleX(0.55) scaleY(0.7);
               opacity: 0.16;
            }
         }

         /* Wariant „blockowy” — gdy loading zajmuje większą sekcję
            (np. cała tabela albo grid galerii). Dodaj do JS klasę
            `szpn-widget__loading--block` przy długo ładujących sekcjach. */
         .szpn-widget__loading--block {
            display: flex;
            justify-content: center;
            padding: 28px 18px;
            font-size: 14px;
         }

         @keyframes szpn-spin {
            to {
               transform: rotate(360deg);
            }
         }

         @keyframes szpn-fade-in {
            from {
               opacity: 0;
               transform: translateY(2px);
            }
            to {
               opacity: 1;
               transform: translateY(0);
            }
         }

         /* Skeleton placeholder — animowany "shimmer", do reużycia gdy
            chcemy fancy loading dla wierszy tabeli, kafli galerii itp.
            Użyj jako klasy: <div class="szpn-skeleton" style="height:22px"></div> */
         .szpn-skeleton {
            background: linear-gradient(
               90deg,
               rgba(0, 0, 0, 0.06) 0%,
               rgba(0, 0, 0, 0.11) 50%,
               rgba(0, 0, 0, 0.06) 100%
            );
            background-size: 200% 100%;
            animation: szpn-shimmer 1.4s ease-in-out infinite;
            border-radius: 6px;
         }

         @keyframes szpn-shimmer {
            0% {
               background-position: 100% 0;
            }
            100% {
               background-position: -100% 0;
            }
         }

         .szpn-widget__error {
            border: 1px solid rgba(215, 10, 20, 0.35);
            border-radius: var(--szpn-radius);
            padding: 14px;
            color: rgba(0, 0, 0, 0.78);
            background: rgba(215, 10, 20, 0.05);
         }

         .szpn-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
         }

         /* Na szerokich ekranach pakujemy karty w 2-3 kolumny żeby nie
            marnować przestrzeni. Nagłówek kolejki zawsze spanuje cały
            wiersz (`grid-column: 1 / -1`), żeby grupy meczów były
            wizualnie spójne. Breakpointy są na viewport, nie na widget —
            container queries mają jeszcze niespójne wsparcie. */
         @media (min-width: 1100px) {
            .szpn-cards {
               grid-template-columns: repeat(2, minmax(0, 1fr));
            }
         }

         @media (min-width: 1500px) {
            .szpn-cards {
               grid-template-columns: repeat(3, minmax(0, 1fr));
            }
         }

         .szpn-cards .szpn-roundHeading {
            grid-column: 1 / -1;
         }

         /* ─────────────────────────────────────────────────────────────
            KALENDARZ — heatmap roczny + linia kolejek + panel meczów.
            Layout: trzy sekcje pionowo, każda w ramce z border-top czerwonym
            (żeby dopasować się do reszty widget-u).
            ───────────────────────────────────────────────────────────── */
         .szpn-cal {
            display: grid;
            gap: 18px;
            min-width: 0;
         }

         .szpn-cal__heatmap,
         .szpn-cal__timeline {
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            padding: 14px 16px;
            min-width: 0;
            /* overflow:hidden żeby border-radius przycinał scrollbar
               wewnątrz na zaokrąglone rogi. Dzieci z overflow-x:auto
               nadal scrollują wewnątrz. */
            overflow: hidden;
         }

         .szpn-cal__heatmapHead {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 6px;
            margin-bottom: 4px;
         }

         .szpn-cal__heatmapHead .szpn-cal__monthRow {
            overflow-x: auto;
            scrollbar-width: thin;
         }

         .szpn-cal__heatmapHead .szpn-cal__dayLabels {
            visibility: hidden;
         }

         .szpn-cal__monthRow {
            display: flex;
            gap: 2px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-cal__monthLabel {
            flex: 0 0 12px;
            min-width: 12px;
            white-space: nowrap;
         }

         /* Body heatmapy: lewe etykiety dni + siatka tygodni-kolumn.
            Siatka jest scrollowalna horyzontalnie gdy nie mieści się. */
         .szpn-cal__heatmapBody {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 6px;
            align-items: stretch;
         }

         .szpn-cal__dayLabels {
            display: grid;
            grid-template-rows: repeat(7, 1fr);
            gap: 2px;
            font-size: 10px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-cal__dayLabels > div {
            display: flex;
            align-items: center;
            height: 12px;
         }

         .szpn-cal__grid {
            display: flex;
            gap: 2px;
            overflow-x: auto;
            scrollbar-width: thin;
            padding-bottom: 4px;
         }

         .szpn-cal__week {
            display: grid;
            grid-template-rows: repeat(7, 12px);
            gap: 2px;
            flex: 0 0 12px;
         }

         /* Dzień heatmapy — kwadracik 12×12 z kolorem zależnym od liczby
            meczów. `--lvl0` = brak (szary jasny), `--lvl4` = max (czerwony). */
         .szpn-cal__day {
            width: 12px;
            height: 12px;
            border: 0;
            border-radius: 2px;
            padding: 0;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.06);
            transition: transform 0.12s ease, outline-color 0.12s ease;
         }

         .szpn-cal__day:hover {
            transform: scale(1.4);
            outline: 1px solid rgba(0, 0, 0, 0.4);
            z-index: 1;
            position: relative;
         }

         .szpn-cal__day--lvl0 { background: rgba(0, 0, 0, 0.06); }
         .szpn-cal__day--lvl1 { background: rgba(247, 169, 1, 0.30); }
         .szpn-cal__day--lvl2 { background: rgba(247, 169, 1, 0.55); }
         .szpn-cal__day--lvl3 { background: rgba(255, 138, 0, 0.85); }
         .szpn-cal__day--lvl4 { background: var(--szpn-red); }

         .szpn-cal__day.is-today {
            outline: 1.5px solid var(--szpn-ink);
            outline-offset: -1px;
         }

         .szpn-cal__day.is-selected {
            outline: 2px solid var(--szpn-red);
            outline-offset: 1px;
            transform: scale(1.2);
            z-index: 2;
            position: relative;
         }

         .szpn-cal__day.is-outside {
            opacity: 0.35;
         }

         /* Legenda — „Mniej □ □ □ □ □ Więcej" pod heatmapą. */
         .szpn-cal__legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            margin-top: 10px;
            font-size: 10px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-cal__legendDay {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
         }

         /* ─────── Linia kolejek ─────── */
         .szpn-cal__timelineLabel {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.62);
            margin-bottom: 10px;
         }

         .szpn-cal__timelineTrack {
            display: flex;
            align-items: center;
            gap: 4px;
            overflow-x: auto;
            scrollbar-width: thin;
            padding: 4px 0 8px;
            position: relative;
         }

         /* Linia łącząca punkty — robimy ją jako gradient na tle trackera. */
         .szpn-cal__timelineTrack::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: rgba(0, 0, 0, 0.08);
            z-index: 0;
         }

         .szpn-cal__roundDot {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.18);
            background: #fff;
            color: rgba(0, 0, 0, 0.66);
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition:
               background 0.15s ease,
               color 0.15s ease,
               border-color 0.15s ease,
               transform 0.15s ease;
         }

         .szpn-cal__roundDot:hover {
            border-color: var(--szpn-red);
            color: var(--szpn-red);
            transform: scale(1.10);
         }

         .szpn-cal__roundDot.is-selected {
            background: var(--szpn-red);
            color: #fff;
            border-color: var(--szpn-red);
            box-shadow: 0 1px 4px rgba(215, 10, 20, 0.30);
            transform: scale(1.10);
         }

         /* ─────── Panel meczów (drill-down) ─────── */
         .szpn-cal__panel {
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            padding: 14px 16px;
         }

         .szpn-cal__panelHead {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--szpn-border);
         }

         .szpn-cal__panelHead strong {
            font-size: 14px;
            color: var(--szpn-ink);
         }

         .szpn-cal__panelMeta {
            font-size: 11px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.55);
            letter-spacing: 0.04em;
            text-transform: uppercase;
         }

         /* ─────────────────────────────────────────────────────────────
            FORMA SEZONU — macierz drużyny × kolejki.
            Layout: lewa sticky kolumna z drużyną, górny sticky rząd z
            numerami kolejek, komórki z kolorem wyniku (W/R/P/zaplanowany).
            Cała macierz scrollowalna horyzontalnie gdy nie mieści się.
            ───────────────────────────────────────────────────────────── */
         .szpn-form {
            display: grid;
            gap: 12px;
         }

         /* Legenda na górze — szybka informacja co kolor znaczy. */
         .szpn-form__legend {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            padding: 12px 14px;
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            font-size: 12px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.70);
         }

         .szpn-form__legendItem {
            display: inline-flex;
            align-items: center;
            gap: 6px;
         }

         .szpn-form__legendDot {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 4px;
         }

         /* Scrollowalna ramka macierzy. Sticky lewa kolumna i górny header
            zostają na miejscu podczas scrolla horyzontalnego. */
         .szpn-form__scroll {
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            overflow: auto;
            max-height: 70vh;
         }

         /* Header macierzy: kolumna „Drużyna" + numery kolejek w jednej
            linii. `position: sticky; top: 0` żeby zostawał widoczny przy
            scrollu pionowym. */
         .szpn-form__header {
            display: grid;
            grid-template-columns: 220px 1fr;
            position: sticky;
            top: 0;
            z-index: 3;
            background: #fff;
            border-bottom: 1px solid var(--szpn-border);
         }

         .szpn-form__rounds {
            display: flex;
            gap: 2px;
            padding: 8px;
         }

         .szpn-form__roundLabel {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 800;
            color: rgba(0, 0, 0, 0.55);
            letter-spacing: 0.02em;
         }

         /* Body — rzędy drużyn. */
         .szpn-form__body {
            display: grid;
            gap: 0;
         }

         .szpn-form__row {
            display: grid;
            grid-template-columns: 220px 1fr;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
         }

         .szpn-form__row:last-child {
            border-bottom: 0;
         }

         /* Lewa kolumna — drużyna. Sticky aby zostawała widoczna przy
            scrollu w prawo (długie sezony nie mieszczą się w widoku). */
         .szpn-form__teamCell {
            position: sticky;
            left: 0;
            z-index: 2;
            background: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-right: 1px solid var(--szpn-border);
            min-width: 0;
            cursor: pointer;
            transition: background 0.12s ease;
         }

         .szpn-form__teamCell:hover {
            background: rgba(0, 0, 0, 0.03);
         }

         .szpn-form__teamCell--header {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.62);
            cursor: default;
         }

         .szpn-form__teamCell--header:hover {
            background: #fff;
         }

         .szpn-form__pos {
            flex: 0 0 24px;
            width: 24px;
            font-size: 11px;
            font-weight: 800;
            color: rgba(0, 0, 0, 0.50);
            text-align: center;
            font-variant-numeric: tabular-nums;
         }

         .szpn-form__teamCell .szpn-teamCrest {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            object-fit: contain;
         }

         .szpn-form__teamCell .szpn-teamName {
            flex: 1 1 auto;
            font-size: 13px;
            font-weight: 700;
            color: var(--szpn-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         /* Prawa strona rzędu — komórki kolejek. */
         .szpn-form__cells {
            display: flex;
            gap: 2px;
            padding: 8px;
            align-items: center;
         }

         .szpn-form__cell {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 4px;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 900;
            color: #fff;
            letter-spacing: 0;
            transition: transform 0.12s ease, outline-color 0.12s ease;
         }

         .szpn-form__cell:hover:not([disabled]) {
            transform: scale(1.15);
            outline: 1px solid rgba(0, 0, 0, 0.30);
            z-index: 1;
            position: relative;
         }

         /* Kolory wyników — green/yellow/red, zachowując spójność z
            promotion zones w tabeli (te same odcienie). */
         .szpn-form__cell--win {
            background: rgba(21, 128, 61, 0.85);
         }

         .szpn-form__cell--draw {
            background: rgba(247, 169, 1, 0.85);
            color: rgba(0, 0, 0, 0.78);
         }

         .szpn-form__cell--loss {
            background: rgba(185, 28, 28, 0.82);
         }

         .szpn-form__cell--upcoming {
            background: rgba(58, 109, 207, 0.18);
            color: rgba(31, 71, 145, 0.80);
         }

         .szpn-form__cell--empty {
            background: rgba(0, 0, 0, 0.04);
            color: rgba(0, 0, 0, 0.20);
            cursor: default;
         }

         .szpn-form__cell--empty:hover {
            transform: none;
         }

         /* Mobile — zmniejsz lewą kolumnę i komórki, żeby zmieściło się
            więcej kolejek bez scrollowania. */
         @media (max-width: 720px) {
            .szpn-form__header,
            .szpn-form__row {
               grid-template-columns: 160px 1fr;
            }

            .szpn-form__cell,
            .szpn-form__roundLabel {
               flex: 0 0 24px;
               width: 24px;
               height: 24px;
            }

            .szpn-form__teamCell .szpn-teamName {
               font-size: 12px;
            }
         }

         /* ─────────────────────────────────────────────────────────────
            H2H — head-to-head w overlay'u meczu. Mini-lista poprzednich
            spotkań dwóch drużyn + bilans (Zw/Rem/Por z perspektywy
            gospodarza aktualnego meczu).
            ───────────────────────────────────────────────────────────── */
         .szpn-h2h {
            margin: 14px 0 4px;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.02);
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
         }

         .szpn-h2h__heading {
            margin: 0 0 8px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.62);
         }

         /* Bilans Zw/Rem/Por — trzy pigułki z liczbą + skrótem. */
         .szpn-h2h__summary {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
         }

         .szpn-h2h__summaryItem {
            flex: 1 1 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 6px 8px;
            border-radius: var(--szpn-radius-sm);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.78);
         }

         .szpn-h2h__summaryItem strong {
            font-size: 14px;
            font-weight: 900;
         }

         .szpn-h2h__summaryItem--win {
            background: rgba(21, 128, 61, 0.10);
            color: rgba(21, 128, 61, 0.95);
         }

         .szpn-h2h__summaryItem--draw {
            background: rgba(247, 169, 1, 0.14);
            color: rgba(120, 80, 0, 0.95);
         }

         .szpn-h2h__summaryItem--loss {
            background: rgba(185, 28, 28, 0.10);
            color: rgba(185, 28, 28, 0.95);
         }

         /* Lista pojedynczych spotkań. */
         .szpn-h2h__list {
            display: grid;
            gap: 4px;
         }

         .szpn-h2h__row {
            display: grid;
            grid-template-columns: 70px 1fr auto 1fr;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border: 0;
            background: #fff;
            border-radius: var(--szpn-radius-sm);
            cursor: pointer;
            font: inherit;
            text-align: left;
            transition: background 0.12s ease;
         }

         .szpn-h2h__row:hover {
            background: rgba(0, 0, 0, 0.04);
         }

         .szpn-h2h__date {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: lowercase;
            color: rgba(0, 0, 0, 0.55);
            white-space: nowrap;
         }

         .szpn-h2h__team {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            font-size: 12px;
            font-weight: 700;
            color: var(--szpn-ink);
         }

         .szpn-h2h__team .szpn-teamName {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-h2h__team .szpn-teamCrest {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            object-fit: contain;
         }

         .szpn-h2h__team--host {
            justify-content: flex-end;
            text-align: right;
         }

         .szpn-h2h__team--guest {
            justify-content: flex-start;
            text-align: left;
         }

         .szpn-h2h__score {
            flex: 0 0 auto;
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.08);
            font-size: 12px;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
            color: var(--szpn-ink);
         }

         /* ─────────────────────────────────────────────────────────────
            SPARKLINE pozycji w sezonie — w overlay'u drużyny.
            SVG line chart pokazujący zmianę pozycji w tabeli kolejka po
            kolejce. Pozycja 1 u góry (pixelowo niżej, ale logicznie u góry).
            ───────────────────────────────────────────────────────────── */
         .szpn-sparklineWrapper {
            margin: 12px 0 8px;
         }

         .szpn-sparkline {
            padding: 12px 14px;
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
         }

         .szpn-sparkline__title {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.62);
            margin-bottom: 6px;
         }

         .szpn-sparkline__svg {
            display: block;
            width: 100%;
            height: 60px;
            overflow: visible;
         }

         .szpn-sparkline__legend {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-sparkline__trend {
            font-weight: 800;
            font-size: 11px;
         }

         .szpn-sparkline__trend--up {
            color: rgba(21, 128, 61, 0.95);
         }

         .szpn-sparkline__trend--down {
            color: rgba(185, 28, 28, 0.95);
         }

         .szpn-sparkline__trend--flat {
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-sparkline__empty {
            padding: 12px;
            border: 1px dashed var(--szpn-border);
            border-radius: var(--szpn-radius);
            color: rgba(0, 0, 0, 0.55);
            font-size: 12px;
            text-align: center;
         }

         /* Karta meczu — biała z subtelnym cieniem, lewy pasek koloru
            zmienia się w zależności od statusu (--scheduled/--played/--live).
            Hover unosi kartę o 2px dla wyraźnego feedbacku interakcji. */
         .szpn-card {
            position: relative;
            border: 1px solid rgba(0, 0, 0, 0.10);
            border-left: 3px solid rgba(0, 0, 0, 0.10);
            border-radius: var(--szpn-radius);
            background: #fff;
            padding: 12px 14px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            transition:
               transform 0.18s ease,
               box-shadow 0.18s ease,
               border-color 0.18s ease;
         }

         button.szpn-card.szpn-card--clickable:hover {
            transform: translateY(-2px);
            box-shadow:
               0 4px 12px rgba(0, 0, 0, 0.08),
               0 1px 3px rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.18);
         }

         /* Stany meczu po lewej stronie — kolorowy pasek + delikatne tło
            tej samej barwy gdy hover (subtle, żeby nie krzyczało). */
         .szpn-card--scheduled {
            border-left-color: rgba(58, 109, 207, 0.6);
         }

         .szpn-card--played {
            border-left-color: rgba(21, 128, 61, 0.55);
         }

         .szpn-card--live {
            border-left-color: var(--szpn-red);
            animation: szpn-card-live-pulse 2s ease-in-out infinite;
         }

         @keyframes szpn-card-live-pulse {
            0%, 100% {
               border-left-color: var(--szpn-red);
               box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            }
            50% {
               border-left-color: rgba(215, 10, 20, 0.55);
               box-shadow:
                  0 1px 2px rgba(0, 0, 0, 0.04),
                  -2px 0 8px rgba(215, 10, 20, 0.18);
            }
         }

         .szpn-cardHeader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 10px;
         }

         .szpn-cardHeader strong {
            font-size: 12px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.62);
            letter-spacing: 0.02em;
            text-transform: uppercase;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         /* ─────────────────────────────────────────────────────────────
            STATYSTYKI ZAAWANSOWANE — refresh wizualny.
            Layout: pionowy stack sekcji (`szpn-advLayout`), miękki hero
            zamiast pełnego czerwonego gradientu, kafelki w stylu
            statTile, ranking sędziów w stylu pl-list (jak w overlay'u
            drużyny).
            ───────────────────────────────────────────────────────────── */
         .szpn-advLayout {
            display: grid;
            gap: 16px;
         }

         /* Hero — biały box z czerwonym akcentem (top-border) i dużą
            metryką po prawej (liczba meczów przeanalizowanych). */
         .szpn-advHero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 18px;
            background: linear-gradient(
               135deg,
               rgba(215, 10, 20, 0.04) 0%,
               rgba(247, 169, 1, 0.05) 100%
            );
            border: 1px solid var(--szpn-border);
            border-top: 3px solid var(--szpn-red);
            border-radius: var(--szpn-radius);
         }

         .szpn-advHero__content {
            flex: 1 1 auto;
            min-width: 0;
         }

         .szpn-advHero__eyebrow {
            margin: 0 0 4px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(215, 10, 20, 0.85);
         }

         .szpn-advHero__title {
            margin: 0;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.2;
            color: var(--szpn-ink);
            letter-spacing: -0.01em;
            overflow-wrap: anywhere;
         }

         .szpn-advHero__metric {
            flex: 0 0 auto;
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding-left: 16px;
            border-left: 1px solid var(--szpn-border);
         }

         .szpn-advHero__metricValue {
            font-size: 32px;
            font-weight: 900;
            color: var(--szpn-red);
            font-variant-numeric: tabular-nums;
            line-height: 1;
         }

         .szpn-advHero__metricLabel {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
            line-height: 1.15;
         }

         @media (max-width: 520px) {
            .szpn-advHero {
               flex-direction: column;
               align-items: flex-start;
               gap: 10px;
            }

            .szpn-advHero__metric {
               padding-left: 0;
               border-left: 0;
               border-top: 1px solid var(--szpn-border);
               padding-top: 10px;
               width: 100%;
            }

            .szpn-advHero__metricValue {
               font-size: 26px;
            }
         }

         /* Sekcja — biały box z tytułem + zawartością. Tytuł z
            podkreśleniem stylem PRO (mała kreska po lewej). */
         .szpn-advSection {
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            padding: 14px 16px;
         }

         .szpn-advSection__title {
            margin: 0 0 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--szpn-border);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--szpn-ink);
         }

         .szpn-advSection__hint {
            margin: 0 0 10px;
            font-size: 11px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.55);
            line-height: 1.4;
         }

         .szpn-advSubLabel {
            margin: 14px 0 8px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
         }

         /* Wariant statTiles 3-kolumnowy — dla podsumowania ligi. */
         .szpn-statTiles--3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
         }

         @media (max-width: 720px) {
            .szpn-statTiles--3 {
               grid-template-columns: repeat(2, minmax(0, 1fr));
            }
         }

         @media (max-width: 460px) {
            .szpn-statTiles--3 {
               grid-template-columns: 1fr;
            }
         }

         /* Pojedyncza ikona sędziego (waga) — w wierszach pl-list w
            statystykach zaawansowanych. */
         .szpn-advRefIcon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(215, 10, 20, 0.08);
            color: rgba(215, 10, 20, 0.85);
            font-size: 13px;
            flex: 0 0 auto;
         }

         /* Override szpn-pl grid żeby zmieścić ikonę sędziego po pozycji. */
         .szpn-advSection .szpn-pl {
            grid-template-columns: 32px 24px 1fr auto;
         }

         .szpn-advRefName {
            font-size: 13px;
            font-weight: 700;
            color: var(--szpn-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-advRefSub {
            margin-top: 2px;
            font-size: 11px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.62);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-advRefMiniCard {
            width: 8px;
            height: 11px;
            margin: 0 1px 0 2px;
         }

         /* Pigułka wartości w rankingu sędziów — nadaje wartości większą
            dominację i zachowuje stałą szerokość dla wyrównania w liście. */
         .szpn-advSection .szpn-pl__value {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            min-width: 78px;
            padding: 8px 12px;
            border-radius: var(--szpn-radius-sm);
            line-height: 1;
         }

         .szpn-advSection .szpn-pl__value strong {
            font-size: 17px;
            font-weight: 900;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
         }

         .szpn-advRefValueLabel {
            display: block;
            margin-top: 4px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
            line-height: 1;
            white-space: nowrap;
         }

         /* Kolorowe wersje labela — przyciemnione warianty wartości,
            żeby label sąsiadował z wartością ale nie konkurował z nią. */
         .szpn-advSection .szpn-pl__value--scorers .szpn-advRefValueLabel {
            color: rgba(215, 10, 20, 0.55);
         }

         .szpn-advSection .szpn-pl__value--yellow .szpn-advRefValueLabel {
            color: rgba(122, 76, 0, 0.62);
         }

         .szpn-advSection .szpn-pl__value--red .szpn-advRefValueLabel {
            color: rgba(215, 10, 20, 0.55);
         }

         /* Highlight box — wyróżniony pojedynczy sędzia (najostrzejszy,
            najwięcej kartek). Większy, kolorowy. */
         .szpn-advHighlight {
            padding: 14px 16px;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius);
            background: rgba(0, 0, 0, 0.02);
            margin-bottom: 6px;
         }

         .szpn-advHighlight--red {
            border-color: rgba(215, 10, 20, 0.25);
            background: linear-gradient(
               135deg,
               rgba(215, 10, 20, 0.06) 0%,
               #fff 70%
            );
         }

         .szpn-advHighlight--yellow {
            border-color: rgba(247, 169, 1, 0.30);
            background: linear-gradient(
               135deg,
               rgba(247, 169, 1, 0.06) 0%,
               #fff 70%
            );
         }

         .szpn-advHighlight__label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
            margin-bottom: 4px;
         }

         .szpn-advHighlight__name {
            font-size: 16px;
            font-weight: 900;
            color: var(--szpn-ink);
            line-height: 1.2;
         }

         .szpn-advHighlight__metric {
            margin-top: 6px;
            font-size: 22px;
            font-weight: 900;
            color: var(--szpn-red);
            font-variant-numeric: tabular-nums;
            line-height: 1;
         }

         .szpn-advHighlight--yellow .szpn-advHighlight__metric {
            color: rgba(122, 76, 0, 0.95);
         }

         .szpn-advHighlight__metric span {
            display: inline-block;
            margin-left: 4px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-advHighlight__sub {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-advHighlightGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
         }

         @media (max-width: 520px) {
            .szpn-advHighlightGrid {
               grid-template-columns: 1fr;
            }
         }

         /* Karta „najczęstszy wynik" — duży wynik na środku. */
         .szpn-advCommonScore__value {
            font-size: 32px;
            font-weight: 900;
            color: var(--szpn-ink);
            font-variant-numeric: tabular-nums;
            text-align: center;
            padding: 12px 0 4px;
            line-height: 1;
         }

         .szpn-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid rgba(215, 10, 20, 0.20);
            background: rgba(215, 10, 20, 0.08);
            font-size: 12px;
            font-weight: 850;
            color: rgba(0, 0, 0, 0.82);
         }

         .szpn-chipDot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--szpn-red);
            flex: 0 0 auto;
         }

         .szpn-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid rgba(0, 0, 0, 0.14);
            border-radius: var(--szpn-radius-pill);
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.72);
            background: rgba(0, 0, 0, 0.03);
            white-space: nowrap;
            flex: 0 0 auto;
         }

         /* Wynik — zielony akcent, podkreśla że mecz został zakończony. */
         .szpn-badge--played {
            border-color: rgba(21, 128, 61, 0.30);
            color: rgba(21, 128, 61, 0.95);
            background: rgba(21, 128, 61, 0.06);
         }

         /* Terminarz — niebieski akcent, mecz w przyszłości. */
         .szpn-badge--scheduled {
            border-color: rgba(58, 109, 207, 0.28);
            color: rgba(31, 71, 145, 0.95);
            background: rgba(58, 109, 207, 0.06);
         }

         .szpn-badge.is-live {
            border-color: rgba(215, 10, 20, 0.35);
            color: var(--szpn-red);
            background: rgba(215, 10, 20, 0.06);
         }

         /* Pulsująca kropka w badge LIVE — zaznacza że to dzieje się teraz. */
         .szpn-badge__dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--szpn-red);
            animation: szpn-live-dot 1.2s ease-in-out infinite;
            flex: 0 0 auto;
         }

         @keyframes szpn-live-dot {
            0%, 100% {
               opacity: 1;
               transform: scale(1);
            }
            50% {
               opacity: 0.4;
               transform: scale(0.85);
            }
         }

         .szpn-matchRow {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px 12px;
            align-items: center;
         }

         .szpn-matchTeamsGrid {
            display: grid;
            gap: 6px;
         }

         .szpn-teamLine {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
         }

         .szpn-teamLogo {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            object-fit: contain;
            background: rgba(0, 0, 0, 0.03);
            border: 0;
            flex: 0 0 auto;
         }

         .szpn-teamName {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 800;
         }

         .szpn-card.szpn-card--clickable {
            cursor: pointer;
            text-align: left;
            width: 100%;
         }

         button.szpn-card {
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.14);
         }

         button.szpn-card:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
         }

         /* Nagłówek kolejki — większy, z linią separatora po prawej.
            Wyraźnie oddziela grupy meczów w danej kolejce. */
         .szpn-roundHeading {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 18px 0 10px;
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.78);
         }

         .szpn-roundHeading::after {
            content: "";
            flex: 1 1 auto;
            height: 1px;
            background: linear-gradient(
               90deg,
               rgba(0, 0, 0, 0.12) 0%,
               rgba(0, 0, 0, 0) 100%
            );
         }

         /* Pierwszy nagłówek nie potrzebuje dodatkowego marginesu na górze. */
         .szpn-roundHeading:first-child {
            margin-top: 0;
         }

         .szpn-overlay[hidden] {
            display: none;
         }

         .szpn-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483000;
         }

         .szpn-overlay__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            /* iOS Safari nie generuje click event'ów na <div> bez
               cursor:pointer — bez tego user nie może zamknąć modal'a
               tap'ując w tło. Plus touch-action:manipulation usuwa
               300ms delay przy podwójnym tap'ie. */
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
         }

         .szpn-overlay__panel {
            position: absolute;
            top: 52px;
            left: 50%;
            transform: translateX(-50%);
            width: min(920px, calc(100vw - 28px));
            max-height: calc(100vh - 72px);
            background: #fff;
            border-radius: var(--szpn-radius);
            border: 1px solid rgba(0, 0, 0, 0.14);
            overflow: hidden;
            display: grid;
            grid-template-rows: auto 1fr;
            box-shadow: 0 18px 60px rgba(0,0,0,0.20);
         }

         @media (max-width: 900px) {
            .szpn-overlay__panel {
               top: 10px;
               width: calc(100vw - 20px);
               max-height: calc(100vh - 20px);
            }
         }

         /* Mobile-like bottom sheet */
         @media (max-width: 520px) {
            .szpn-overlay__panel {
               top: auto;
               bottom: 0;
               left: 0;
               transform: none;
               width: 100vw;
               max-height: min(92vh, 760px);
               border-radius: 18px 18px 0 0;
               border-left: 0;
               border-right: 0;
               border-bottom: 0;
            }

            .szpn-overlay__header {
               position: relative;
               padding-top: 18px;
            }

            .szpn-overlay__header::before {
               content: "";
               position: absolute;
               top: 8px;
               left: 50%;
               transform: translateX(-50%);
               width: 44px;
               height: 5px;
               border-radius: 999px;
               background: rgba(0,0,0,0.18);
            }
         }

         /* ─────────────────────────────────────────────────────────────
            HERO HEADER w overlay'u drużyny — duży herb po lewej, nazwa
            drużyny + meta po prawej. Tło z subtelnym gradientem czerwonym
            spójnym z resztą widgetu (top-border 3px). Daje klubowi
            charakter, oddziela od treści poniżej.
            ───────────────────────────────────────────────────────────── */
         .szpn-teamHero {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 18px;
            margin: 0 0 14px;
            background: linear-gradient(
               135deg,
               rgba(215, 10, 20, 0.04) 0%,
               rgba(247, 169, 1, 0.05) 100%
            );
            border: 1px solid var(--szpn-border);
            border-top: 3px solid var(--szpn-red);
            border-radius: var(--szpn-radius);
         }

         .szpn-teamHero__crest {
            flex: 0 0 auto;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: 12px;
            padding: 6px;
         }

         .szpn-teamHero__crestImg {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
         }

         .szpn-teamHero__crestImg--placeholder {
            width: 32px;
            height: 32px;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 50%;
         }

         .szpn-teamHero__main {
            flex: 1 1 auto;
            min-width: 0;
         }

         .szpn-teamHero__name {
            margin: 0 0 6px;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.15;
            color: var(--szpn-ink);
            letter-spacing: -0.01em;
            overflow-wrap: anywhere;
         }

         .szpn-teamHero__meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
         }

         @media (max-width: 520px) {
            .szpn-teamHero {
               padding: 14px;
               gap: 12px;
            }

            .szpn-teamHero__crest {
               width: 52px;
               height: 52px;
            }

            .szpn-teamHero__name {
               font-size: 16px;
            }
         }

         /* ─────────────────────────────────────────────────────────────
            CSS-art kartki piłkarskie — prostokąt z proporcjami kartki
            (5:7) zamiast generic kwadratu. Używane w statTiles, tabs
            drużyny i listingach. Lekki gradient + wewnętrzny shadow daje
            wrażenie laminowanego materiału.
            ───────────────────────────────────────────────────────────── */
         .szpn-cardIcon {
            display: inline-block;
            width: 12px;
            height: 16px;
            border-radius: 2px;
            box-shadow:
               inset 0 1px 0 rgba(255, 255, 255, 0.30),
               0 1px 2px rgba(0, 0, 0, 0.20);
            flex: 0 0 auto;
            vertical-align: middle;
         }

         .szpn-cardIcon--yellow {
            background: linear-gradient(
               180deg,
               #fbd024 0%,
               #f5b800 100%
            );
            border: 1px solid rgba(0, 0, 0, 0.18);
         }

         .szpn-cardIcon--red {
            background: linear-gradient(
               180deg,
               #e8252f 0%,
               #b8060f 100%
            );
            border: 1px solid rgba(0, 0, 0, 0.18);
         }

         /* ─────────────────────────────────────────────────────────────
            STAT TILES — większa hierarchia: ikona po lewej, label nad
            wartością. Wartość duża i pogrubiona, łatwa do skanowania.
            ───────────────────────────────────────────────────────────── */
         .szpn-statTiles {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin: 0 0 14px;
         }

         @media (max-width: 520px) {
            .szpn-statTiles {
               grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 6px;
            }
         }

         .szpn-statTile {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid var(--szpn-border);
            background: #fff;
            border-radius: var(--szpn-radius);
            padding: 12px 14px;
            min-width: 0;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
         }

         .szpn-statTile:hover {
            border-color: rgba(0, 0, 0, 0.18);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
         }

         /* Body wrapper — żeby label i value zachowywały się jak jeden
            element flexa (po prawej od ikony). Bez tego value lądowała
            obok ikony i layout się rozjeżdżał. */
         .szpn-statTile__body {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1 1 auto;
         }

         .szpn-statTile__label {
            display: block;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.55);
            margin-bottom: 2px;
         }

         /* StatIcon to większa ikona przed tekstem (gole=piłka, kartki=
            CSS-art). Ma własny kolor tła subtelnie sygnalizujący kategorię. */
         .szpn-statIcon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.04);
            color: rgba(0, 0, 0, 0.70);
            flex: 0 0 auto;
            font-size: 16px;
         }

         .szpn-statIcon.is-yellow {
            background: rgba(251, 188, 12, 0.14);
         }

         .szpn-statIcon.is-red {
            background: rgba(215, 10, 20, 0.10);
         }

         .szpn-statIcon.is-goal {
            background: rgba(215, 10, 20, 0.08);
            color: rgba(215, 10, 20, 0.92);
         }

         /* W obrębie statIcon kartka jest lekko większa. */
         .szpn-statIcon .szpn-cardIcon {
            width: 14px;
            height: 19px;
         }

         .szpn-statTile__value {
            font-size: 22px;
            font-weight: 900;
            color: var(--szpn-ink);
            font-variant-numeric: tabular-nums;
            line-height: 1.05;
         }

         .szpn-statTile.is-accent {
            border-color: rgba(215, 10, 20, 0.22);
            background: linear-gradient(
               180deg,
               rgba(215, 10, 20, 0.04) 0%,
               #fff 60%
            );
         }

         .szpn-statTile.is-accent .szpn-statTile__value {
            color: rgba(215, 10, 20, 0.95);
         }

         /* ─────────────────────────────────────────────────────────────
            PLAYER LIST — listing strzelców / żółtych / czerwonych.
            Każdy wiersz: pozycja (#), herb, nazwa, wartość z ikoną.
            Top 3 wyróżnione (gold/silver/bronze tinta) jak w klasyfikacji.
            ───────────────────────────────────────────────────────────── */
         .szpn-pl-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 4px;
         }

         .szpn-pl {
            display: grid;
            grid-template-columns: 32px 24px 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: #fff;
            border: 1px solid var(--szpn-border);
            border-radius: var(--szpn-radius-sm);
            transition: border-color 0.15s ease, transform 0.12s ease;
         }

         .szpn-pl:hover {
            border-color: rgba(0, 0, 0, 0.18);
            transform: translateX(1px);
         }

         /* Top 3 — subtelne kolorowe tło + akcent border. */
         .szpn-pl:nth-child(1) {
            border-color: rgba(247, 169, 1, 0.40);
            background: linear-gradient(90deg, rgba(247, 169, 1, 0.06) 0%, #fff 40%);
         }

         .szpn-pl:nth-child(2) {
            border-color: rgba(0, 0, 0, 0.18);
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, #fff 40%);
         }

         .szpn-pl:nth-child(3) {
            border-color: rgba(215, 10, 20, 0.18);
            background: linear-gradient(90deg, rgba(215, 10, 20, 0.04) 0%, #fff 40%);
         }

         .szpn-pl__rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            font-size: 12px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.62);
            font-variant-numeric: tabular-nums;
            background: rgba(0, 0, 0, 0.04);
            border-radius: 50%;
         }

         .szpn-pl:nth-child(1) .szpn-pl__rank {
            background: var(--szpn-gold-2);
            color: #fff;
         }

         .szpn-pl:nth-child(2) .szpn-pl__rank {
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
         }

         .szpn-pl:nth-child(3) .szpn-pl__rank {
            background: var(--szpn-red);
            color: #fff;
         }

         .szpn-pl .szpn-teamCrest {
            width: 22px;
            height: 22px;
            object-fit: contain;
         }

         .szpn-pl__name {
            min-width: 0;
            font-size: 13px;
            font-weight: 700;
            color: var(--szpn-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-pl__value {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
            background: rgba(0, 0, 0, 0.04);
         }

         .szpn-pl__value strong {
            color: var(--szpn-ink);
         }

         .szpn-pl__value--scorers {
            background: rgba(215, 10, 20, 0.08);
         }

         .szpn-pl__value--scorers strong {
            color: rgba(215, 10, 20, 0.95);
         }

         .szpn-pl__value--yellow {
            background: rgba(251, 188, 12, 0.16);
         }

         .szpn-pl__value--yellow strong {
            color: rgba(122, 76, 0, 0.95);
         }

         .szpn-pl__value--red {
            background: rgba(215, 10, 20, 0.10);
         }

         .szpn-pl__value--red strong {
            color: rgba(215, 10, 20, 0.95);
         }

         /* Ikonka piłki — SVG wzór (centralny pięciokąt + 5 szwów),
            spójna stylistycznie z piłką w loading state. Bez zależności
            od Font Awesome. */
         .szpn-goalIcon {
            display: inline-block;
            flex: 0 0 auto;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #f7f7f7;
            background-image:
               url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,32 66,44 60,63 40,63 34,44' fill='%23111'/%3E%3Cpath d='M50 32 L50 6 M66 44 L88 32 M60 63 L74 83 M40 63 L26 83 M34 44 L12 32' stroke='%23111' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"),
               radial-gradient(
                  circle at 35% 28%,
                  rgba(255, 255, 255, 1) 0%,
                  rgba(225, 225, 225, 0.6) 80%
               );
            background-size: 92%, 100%;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            border: 1px solid rgba(0, 0, 0, 0.30);
            box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.14);
            vertical-align: middle;
         }

         /* W obrębie kafelka stat-icon kulka jest większa (~18px),
            żeby pasowała do większego boxa 36×36. */
         .szpn-statIcon .szpn-goalIcon {
            width: 18px;
            height: 18px;
         }

         .szpn-overlay__header {
            padding: 12px 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
         }

         .szpn-overlay__close {
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.14);
            background: rgba(255, 255, 255, 0.98);
            border-radius: var(--szpn-radius-sm);
            padding: 7px 10px;
            font-weight: 800;
            cursor: pointer;
            /* Mobile: usuwa 300ms tap delay + większy hit-area */
            touch-action: manipulation;
            min-height: 44px;
            min-width: 60px;
            -webkit-tap-highlight-color: rgba(215, 10, 20, 0.10);
         }

         /* X button — close icon w prawym rogu header'a (jak w feed modal'u
            na /). Wizualna spójność między modalami. */
         .szpn-overlay__closeX {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 36px;
            height: 36px;
            min-width: 44px;
            min-height: 44px;
            margin-left: auto;
            border: 1px solid rgba(0, 0, 0, 0.10);
            background: #fff;
            border-radius: var(--szpn-radius-sm);
            color: rgba(0, 0, 0, 0.62);
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(215, 10, 20, 0.10);
            transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
         }

         .szpn-overlay__closeX:hover {
            background: rgba(215, 10, 20, 0.06);
            border-color: rgba(215, 10, 20, 0.30);
            color: var(--szpn-red);
         }

         .szpn-overlay__closeX:focus-visible {
            outline: none;
            border-color: rgba(215, 10, 20, 0.55);
            box-shadow: 0 0 0 3px rgba(215, 10, 20, 0.12);
         }

         /* SVG inside button — tap przechodzi do button'a, nie do path'a (iOS) */
         .szpn-overlay__closeX svg,
         .szpn-overlay__closeX svg * {
            pointer-events: none;
         }

         .szpn-overlay__close:hover {
            border-color: rgba(215, 10, 20, 0.30);
            background: rgba(0, 0, 0, 0.02);
         }

         .szpn-overlay__title {
            font-weight: 900;
            color: rgba(0, 0, 0, 0.86);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-overlay__body {
            padding: 12px;
            overflow: auto;
         }

         .szpn-teamTabs {
            display: flex;
            gap: 8px;
            padding: 2px 2px 10px;
            overflow: auto;
            scrollbar-width: thin;
            flex-wrap: nowrap;
         }

         .szpn-teamTabs .szpn-widget__subtab {
            border: 2px solid rgba(215, 10, 20, 0.75);
            background: rgba(255, 255, 255, 0.96);
            border-radius: var(--szpn-radius-sm);
            color: rgba(215, 10, 20, 0.95);
            font-weight: 900;
            white-space: nowrap;
         }

         .szpn-teamTabs .szpn-widget__subtab.is-active {
            background: rgba(215, 10, 20, 0.95);
            color: #fff;
         }

         .szpn-teamTabIcon {
            opacity: 0.95;
         }

         /* Gdy ikona to kartka CSS-art (a nie FA-icon), pomniejszamy ją
            do rozmiaru bardziej zbliżonego do tekstu tabu — wcześniej była
            zbyt duża i rozsuwała tab. */
         .szpn-teamTabs .szpn-widget__subtab .szpn-teamTabIcon.szpn-cardIcon {
            width: 10px;
            height: 14px;
         }

         .szpn-matchTeams {
            font-weight: 800;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.86);
            line-height: 1.25;
         }

         .szpn-matchRow2 {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            gap: 10px;
            align-items: center;
         }

         .szpn-matchRow2 .szpn-score {
            min-width: 72px;
            text-align: center;
            font-size: 16px;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            background: rgba(0, 0, 0, 0.03);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
         }

         /* Wynik meczu rozegranego — większy, grubszy, ciemny.
            Wyróżnia się jako główna informacja na karcie. */
         .szpn-matchRow2 .szpn-score--big {
            font-size: 20px;
            font-weight: 900;
            color: var(--szpn-ink);
            padding: 8px 14px;
            background: #fff;
            border-color: rgba(0, 0, 0, 0.18);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
         }

         .szpn-card--live .szpn-matchRow2 .szpn-score--big {
            color: var(--szpn-red);
            border-color: rgba(215, 10, 20, 0.35);
            background: rgba(215, 10, 20, 0.04);
         }

         /* Godzina meczu (zamiast wyniku) — kafelek terminarza.
            Mniejsza pigułka z monospace cyfrą i niebieskawym akcentem. */
         .szpn-matchRow2 .szpn-score--time {
            font-size: 14px;
            font-weight: 800;
            color: rgba(31, 71, 145, 0.95);
            background: rgba(58, 109, 207, 0.08);
            border-color: rgba(58, 109, 207, 0.25);
         }

         /* Wygrana / przegrana drużyna — pogrubienie i wyciszenie odpowiednio.
            Klasy dodawane w JS na bazie wyniku. */
         .szpn-teamLine--winner .szpn-teamName {
            color: var(--szpn-ink);
            font-weight: 900;
         }

         .szpn-teamLine--loser .szpn-teamName {
            color: rgba(0, 0, 0, 0.55);
            font-weight: 700;
         }

         .szpn-teamLine--right {
            justify-content: flex-end;
            text-align: right;
         }

         .szpn-teamLink {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 100%;
            cursor: pointer;
         }

         .szpn-teamLink:hover .szpn-teamName {
            text-decoration: underline;
         }

         /* Stopka karty meczowej — data/godzina rozegranego meczu lub
            pełna data terminarza. Mała, dyskretna — główne info już jest
            w środkowej pigułce. */
         .szpn-matchDate {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: lowercase;
            color: rgba(0, 0, 0, 0.55);
         }

         .szpn-playerLine {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 100%;
         }

         .szpn-matchMeta {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.64);
            margin: 6px 0 0;
         }

         .szpn-proto {
            display: flex;
            flex-direction: column;
            gap: 12px;
         }

         .szpn-protoPeriod__header {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 950;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.64);
            margin: 2px 0 6px;
         }

         .szpn-protoTimeline {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 2px 0;
         }

         .szpn-protoTimeline::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-1px);
            background: rgba(0, 0, 0, 0.10);
         }

         .szpn-protoEvent {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
         }

         .szpn-protoEvent__center {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            z-index: 1;
         }

         .szpn-protoEvent__time {
            font-weight: 950;
            font-size: 12px;
            line-height: 1;
            color: rgba(0, 0, 0, 0.74);
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.14);
            border-radius: 999px;
            padding: 6px 10px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
         }

         .szpn-protoEvent__dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #fff;
            border: 2px solid rgba(0, 0, 0, 0.18);
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
         }

         .szpn-protoCard {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 10px;
            padding: 10px 10px;
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 1px 0 rgba(0,0,0,0.03);
            min-width: 0;
         }

         .szpn-protoCard.is-host {
            border-left: 4px solid rgba(215, 10, 20, 0.80);
         }

         .szpn-protoCard.is-guest {
            border-right: 4px solid rgba(215, 10, 20, 0.32);
         }

         .szpn-protoIcon {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            background: rgba(0, 0, 0, 0.06);
            color: rgba(0, 0, 0, 0.72);
            flex: 0 0 auto;
         }

         .szpn-protoIcon.is-goal {
            background: rgba(0, 0, 0, 0.06);
            color: rgba(0, 0, 0, 0.78);
         }

         .szpn-protoIcon.is-yellow {
            background: rgba(251, 188, 12, 0.16);
            color: rgba(122, 76, 0, 0.96);
         }

         .szpn-protoIcon.is-red {
            background: rgba(215, 10, 20, 0.14);
            color: rgba(215, 10, 20, 0.96);
         }

         .szpn-protoIcon.is-sub {
            background: rgba(0, 0, 0, 0.06);
            color: rgba(0, 0, 0, 0.72);
         }

         .szpn-protoText {
            min-width: 0;
         }

         .szpn-protoTitle {
            font-weight: 950;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.86);
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-protoSub {
            margin-top: 3px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.62);
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-protoDetails {
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.96);
            overflow: clip;
            margin: 12px 0 0;
         }

         .szpn-protoDetails > summary {
            list-style: none;
            cursor: pointer;
            padding: 10px 12px;
            font-weight: 950;
            color: rgba(0, 0, 0, 0.82);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
         }

         .szpn-protoDetails > summary::-webkit-details-marker {
            display: none;
         }

         .szpn-protoDetails > summary::after {
            content: "\f078";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            opacity: 0.65;
            font-size: 12px;
         }

         .szpn-protoDetails[open] > summary::after {
            content: "\f077";
         }

         .szpn-protoDetails__body {
            padding: 0 12px 12px;
         }

         .szpn-protoTabs {
            display: flex;
            gap: 8px;
            padding: 2px 2px 10px;
            overflow: auto;
            scrollbar-width: thin;
            flex-wrap: nowrap;
         }

         .szpn-protoTab {
            appearance: none;
            border: 2px solid rgba(215, 10, 20, 0.75);
            background: rgba(255, 255, 255, 0.96);
            border-radius: var(--szpn-radius-sm);
            color: rgba(215, 10, 20, 0.95);
            font-weight: 900;
            white-space: nowrap;
            padding: 8px 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
         }

         .szpn-protoTab.is-active {
            background: rgba(215, 10, 20, 0.95);
            color: #fff;
         }

         .szpn-protoTabCount {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 950;
            background: rgba(0,0,0,0.08);
            color: inherit;
            font-variant-numeric: tabular-nums;
         }

         .szpn-protoTab.is-active .szpn-protoTabCount {
            background: rgba(255,255,255,0.18);
         }

         .szpn-protoTableWrap {
            border: 1px solid rgba(0,0,0,0.12);
            border-radius: 14px;
            background: rgba(255,255,255,0.98);
            overflow: auto;
         }

         .szpn-protoTable {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12px;
         }

         .szpn-protoTh {
            text-align: left;
            padding: 8px 10px;
            font-size: 11px;
            font-weight: 950;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.62);
            background: rgba(0,0,0,0.03);
            border-bottom: 1px solid rgba(0,0,0,0.10);
         }

         .szpn-protoTd {
            padding: 8px 10px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            vertical-align: top;
         }

         .szpn-protoTable tbody tr:last-child .szpn-protoTd {
            border-bottom: 0;
         }

         .szpn-protoTh.is-num,
         .szpn-protoTd.is-num {
            width: 56px;
            white-space: nowrap;
            color: rgba(0,0,0,0.70);
            font-variant-numeric: tabular-nums;
            font-weight: 900;
         }

         .szpn-protoTh.is-badges,
         .szpn-protoTd.is-badges {
            width: 1%;
            white-space: nowrap;
            text-align: right;
         }

         .szpn-protoTdName {
            font-weight: 950;
            color: rgba(0,0,0,0.84);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-protoTdMeta {
            margin-top: 3px;
            font-size: 12px;
            color: rgba(0,0,0,0.62);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-protoGrid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
         }

         @media (max-width: 620px) {
            .szpn-protoGrid2 {
               grid-template-columns: 1fr;
            }
         }

         .szpn-protoTeamHead {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin: 8px 0 6px;
         }

         .szpn-protoTeamName {
            font-size: 12px;
            font-weight: 950;
            opacity: 0.82;
         }

         .szpn-protoSectionTitle {
            font-size: 11px;
            font-weight: 950;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.62);
            margin: 10px 0 6px;
         }

         .szpn-protoList {
            display: flex;
            flex-direction: column;
            gap: 6px;
         }

         .szpn-protoPerson {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 8px 10px;
            border: 1px solid rgba(0,0,0,0.10);
            background: rgba(0,0,0,0.02);
            border-radius: 12px;
            min-width: 0;
         }

         .szpn-protoPerson__name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 900;
            color: rgba(0,0,0,0.84);
            font-variant-numeric: tabular-nums;
         }

         .szpn-protoPerson__meta {
            margin-top: 3px;
            font-size: 12px;
            color: rgba(0,0,0,0.62);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }

         .szpn-protoBadges {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
         }

         .szpn-protoBadge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 950;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid rgba(0,0,0,0.12);
            background: rgba(255,255,255,0.98);
            color: rgba(0,0,0,0.76);
            font-variant-numeric: tabular-nums;
         }

         .szpn-protoBadge.is-yellow {
            border-color: rgba(251, 188, 12, 0.32);
            background: rgba(251, 188, 12, 0.10);
            color: rgba(122, 76, 0, 0.96);
         }

         .szpn-protoBadge.is-red {
            border-color: rgba(215, 10, 20, 0.24);
            background: rgba(215, 10, 20, 0.08);
            color: rgba(215, 10, 20, 0.96);
         }

         .szpn-protoBadge.is-tag {
            background: rgba(0,0,0,0.06);
            border-color: rgba(0,0,0,0.10);
            color: rgba(0,0,0,0.72);
         }

         @media (max-width: 520px) {
            .szpn-protoEvent {
               grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
               gap: 8px;
            }

            .szpn-protoCard {
               grid-template-columns: 26px minmax(0, 1fr);
               padding: 9px 9px;
               border-radius: 13px;
            }
         }

         .szpn-score {
            font-weight: 900;
            font-size: 13px;
            letter-spacing: 0.02em;
            color: rgba(0, 0, 0, 0.86);
            white-space: nowrap;
         }

         .szpn-galleryGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
         }

         @media (max-width: 900px) {
            .szpn-galleryGrid {
               grid-template-columns: repeat(3, minmax(0, 1fr));
            }
         }

         @media (max-width: 520px) {
            .szpn-galleryGrid {
               grid-template-columns: repeat(2, minmax(0, 1fr));
            }
         }

         .szpn-photo {
            display: block;
            aspect-ratio: 4 / 3;
            border-radius: var(--szpn-radius);
            overflow: hidden;
            border: 0;
            background: rgba(0, 0, 0, 0.03);
         }

         .szpn-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
         }

         .szpn-widget__hint {
            margin: 10px 0 0;
            color: rgba(0, 0, 0, 0.62);
            font-size: 12px;
            font-weight: 500;
         }