@charset "UTF-8";

:root {
  /* Pitch Gazette Modern Design System */
  --font-sans: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primary: #1E3EB8;
  --accent: #1E3EB8;
  --primary-soft: #EDF2FF;
  --secondary: #0F172A;
  --tertiary: #10B981;
  --neutral: #F8FAFC;
  --ink: #0F172A;
  --ink-2: #1E293B;
  --muted: #475569;
  --canvas: #F8FAFC;
  --surface: #FFFFFF;
  --surface-muted: #F8FAFC;
  --surface-subtle: #F1F5F9;
  --surface-elevated: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-inverse: #FFFFFF;
  --card: #FFFFFF;
  --line: #E2E8F0;
  --border: #E2E8F0;
  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;
  --action: #1E3EB8;
  --action-hover: #163091;
  --selected-surface: #EDF2FF;
  --focus: #1E3EB8;
  --chip: #F1F5F9;
  --chip-ink: #334155;
  --live: #065F46;
  --status-live: #065F46;
  --live-dot: #10B981;
  --live-bg: #ECFDF5;
  --amber: #B45309;
  --status-warning: #B45309;
  --amber-bg: #FFF7ED;
  --red: #B91C1C;
  --danger: #B91C1C;
  --danger-border: #FCA5A5;
  --status-error: #B91C1C;
  --red-bg: #FEF2F2;
  --blue-bg: #EDF2FF;
  --shadow: 0 2px 10px rgba(15, 23, 42, .04);
  --r: 6px;
  --r-lg: 10px;
  --gutter: 1.25rem;

  /* Pitch Gazette Modern Tonal Scales */
  --pgm-primary-950: #050C24;
  --pgm-primary-900: #0A1747;
  --pgm-primary-800: #10236B;
  --pgm-primary-700: #163091;
  --pgm-primary-600: #1E3EB8;
  --pgm-primary-500: #3B5BDB;
  --pgm-primary-400: #5C7CFA;
  --pgm-primary-300: #748FFC;
  --pgm-primary-200: #BAC8FF;
  --pgm-primary-100: #DBE4FF;
  --pgm-primary-50: #EDF2FF;

  --pgm-secondary-950: #020617;
  --pgm-secondary-900: #0F172A;
  --pgm-secondary-800: #1E293B;
  --pgm-secondary-700: #334155;
  --pgm-secondary-600: #475569;
  --pgm-secondary-500: #64748B;
  --pgm-secondary-400: #94A3B8;
  --pgm-secondary-300: #CBD5E1;
  --pgm-secondary-200: #E2E8F0;
  --pgm-secondary-100: #F1F5F9;
  --pgm-secondary-50: #FFFFFF;

  --pgm-tertiary-950: #022C22;
  --pgm-tertiary-900: #064E3B;
  --pgm-tertiary-800: #065F46;
  --pgm-tertiary-700: #047857;
  --pgm-tertiary-600: #059669;
  --pgm-tertiary-500: #10B981;
  --pgm-tertiary-400: #34D399;
  --pgm-tertiary-300: #6EE7B7;
  --pgm-tertiary-200: #A7F3D0;
  --pgm-tertiary-100: #D1FAE5;
  --pgm-tertiary-50: #ECFDF5;

  --pgm-neutral-950: #090A0D;
  --pgm-neutral-900: #18181B;
  --pgm-neutral-800: #27272A;
  --pgm-neutral-700: #3F3F46;
  --pgm-neutral-600: #52525B;
  --pgm-neutral-500: #71717A;
  --pgm-neutral-400: #A1A1AA;
  --pgm-neutral-300: #D4D4D8;
  --pgm-neutral-200: #E4E4E7;
  --pgm-neutral-100: #F4F4F5;
  --pgm-neutral-50: #F8FAFC;
}

@font-face {
  font-family: 'Manrope Fallback';
  src: local('SF Pro Text'), local('Segoe UI'), local('Roboto'), local('Arial');
  size-adjust: 103.2%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body {
  font-family: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  -webkit-font-smoothing: antialiased
}

table {
  font-variant-numeric: tabular-nums;
}

td {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
  text-decoration: none
}

button,
select,
input {
  font: inherit;
  color: inherit
}

button,
[role="button"],
a[href],
[role="tab"],
[role="switch"],
select,
summary,
label[for],
label:has(input),
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer
}

:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55
}

button {
  background: none;
  border: 0
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

main:focus,
main:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none
}

img {
  max-width: 100%
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  background: var(--primary);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  border-radius: var(--r)
}

.skip-link:focus {
  top: 12px
}

.mi {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0
}

.mi svg {
  width: 20px;
  height: 20px;
  display: block
}

.caps {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-dot);
  display: inline-block;
  flex-shrink: 0
}

.pulse {
  animation: pulse 1.6s ease-in-out infinite
}

@keyframes pulse {
  50% {
    opacity: .35;
    transform: scale(1.4)
  }
}

.text-main {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.8px
}

#icon-bg {
  animation: breathing 2.4s ease-in-out 1;
  transform-box: fill-box;
  transform-origin: center
}

@keyframes breathing {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.04)
  }
}

.signal {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: signalPulse 1.8s ease-out 2
}

.signal2 {
  animation-delay: 0.4s
}

@keyframes signalPulse {
  0% {
    opacity: 0.85;
    transform: scale(0.85)
  }

  100% {
    opacity: 0;
    transform: scale(1.7)
  }
}

#play {
  animation: playPulse 1.6s ease-in-out 2;
  transform-box: fill-box;
  transform-origin: center
}

@keyframes playPulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.12)
  }
}

#underline {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: drawLine 0.9s ease-out 0.3s forwards
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0
  }
}

#shine {
  animation: shineMove 2.4s ease-in-out 1 0.8s
}

@keyframes shineMove {
  0% {
    transform: translateX(-70px);
    opacity: 0
  }

  20% {
    opacity: 0.85
  }

  50% {
    transform: translateX(275px);
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  contain: layout style
}

.top-in {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 196px;
  overflow: hidden
}

.logo svg,
.logo img {
  height: 40px;
  width: auto;
  max-width: none;
  display: block
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0
}

.nav .search {
  display: none
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 11px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--chip-ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease
}

.nav a .mi {
  width: 18px;
  height: 18px
}

.nav a .mi svg {
  width: 18px;
  height: 18px
}

.nav a:hover {
  background: var(--chip);
  color: var(--ink)
}

.nav a.on,
.nav a[aria-current=page] {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(30, 62, 184, .22)
}

.nav a.on .dot,
.nav a[aria-current=page] .dot {
  background: #fff
}

.count {
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--live-bg);
  color: var(--live);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.count[hidden] {
  display: none
}

.nav a.on .count,
.nav a[aria-current=page] .count {
  background: rgba(255, 255, 255, .18);
  color: #fff
}

.tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 44px;
  position: relative
}

.tsearch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0
}

.tsearch > .ibtn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
}

.tsearch > .ibtn:hover {
  background: var(--chip);
  border-color: #CBD5E1;
  color: var(--primary)
}

.tsearch.open > .ibtn,
.tsearch:focus-within > .ibtn {
  background: var(--blue-bg);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 70, 232, .12)
}

.tsearch-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(460px, calc(100vw - 24px));
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .2), 0 8px 20px -6px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .03);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s cubic-bezier(.16, 1, .3, 1), transform .18s cubic-bezier(.16, 1, .3, 1), visibility .18s;
  z-index: 60
}

.tsearch.open .tsearch-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1)
}

.tsearch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease
}

.tsearch-bar:focus-within {
  border-bottom-color: rgba(32, 70, 232, .25);
  background: #fff
}

.tsearch-ico {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0
}

.tsearch-bar input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink)
}

.tsearch-bar input::placeholder {
  color: var(--muted);
  font-weight: 500
}

.tsearch-bar input::-webkit-search-cancel-button,
.tsearch-bar input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none
}

.tsearch-clear {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #E2E8F0;
  color: #475569;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease
}

.tsearch-clear[hidden] {
  display: none !important
}

.tsearch-clear .mi,
.tsearch-clear .mi svg {
  width: 13px;
  height: 13px
}

.tsearch-clear:hover {
  background: #CBD5E1;
  color: var(--ink)
}

.tsearch-kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 5px 8px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease
}

.tsearch-kbd:hover {
  background: #F1F5F9;
  color: var(--ink);
  border-color: #CBD5E1
}

.tsearch-body {
  max-height: min(410px, calc(100dvh - 170px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--canvas)
}

.tsearch-sec {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.tsearch-sec-title {
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 6px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.tsearch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px
}

.tsearch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--chip-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .1s ease
}

.tsearch-chip .mi,
.tsearch-chip .mi svg {
  width: 15px;
  height: 15px
}

.tsearch-chip:hover,
.tsearch-chip.active {
  background: var(--blue-bg);
  border-color: rgba(32, 70, 232, .28);
  color: var(--primary)
}

.tsearch-chip.live {
  background: var(--live-bg);
  border-color: rgba(220, 38, 38, .22);
  color: var(--live)
}

.tsearch-chip.live:hover {
  background: #FEE2E2;
  border-color: rgba(220, 38, 38, .38)
}

.tsearch-list {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.tsearch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .12s ease
}

.tsearch-item:hover,
.tsearch-item.active {
  background: var(--blue-bg);
  color: var(--primary)
}

.tsearch-item .slot {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 11px
}

.tsearch-item .slot.player-photo {
  border-radius: 999px
}

.tsearch-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px
}

.tsearch-item-main strong {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tsearch-item-main small {
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tsearch-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--chip-ink);
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap
}

.tsearch-item-meta.is-live {
  background: var(--live-bg);
  border-color: rgba(220, 38, 38, .22);
  color: var(--live)
}

.tsearch-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.tsearch-empty strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700
}

.tsearch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  background: #F8FAFC;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600
}

.tsearch-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.tsearch-hint kbd {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--chip-ink)
}

.tsearch-all-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}

.tsearch-all-link:hover {
  text-decoration: underline
}

@media(max-width:640px) {
  .tsearch-pop {
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none
  }

  .tsearch-hint {
    display: none
  }
}

.ibtn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--chip-ink);
  transition: background .15s, transform .1s
}

.ibtn:hover {
  background: var(--chip);
  color: var(--ink)
}

.ibtn:active,
.btn:active,
.tab:active,
.day:active,
.star:active,
.burger:active,
.cta:active,
.more:active {
  transform: scale(.98)
}

.search {
  position: relative;
  width: 220px
}

.search .mi {
  position: absolute;
  left: 10px;
  top: 12px;
  font-size: 18px;
  color: var(--muted);
  pointer-events: none
}

.search input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--canvas);
  outline: 0
}

.search input:focus {
  border-color: var(--accent);
  background: #fff
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  place-items: center
}

.burger:hover {
  background: var(--chip)
}

.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--gutter) 2rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gutter);
  align-items: start
}

.maincol {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  width: 100%;
  min-width: 0
}

.source-banner {
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px
}

.source-banner[hidden] {
  display: none
}

.main {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  width: 100%;
  min-width: 0;
  min-height: 62vh
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  position: sticky;
  top: 84px
}

.rail section:empty {
  display: none
}

.rail-skeleton {
  display: grid;
  gap: var(--gutter)
}

.rail-skeleton .sk-card {
  height: 240px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite
}

.bnav {
  display: none
}

/* Head */
.head h1 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 28ch
}

.head .caps {
  display: block
}

.head .caps.accent {
  color: var(--accent)
}

.head p {
  color: var(--muted);
  margin-top: 4px;
  max-width: 65ch
}

/* Week bar */
.week {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.week-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px
}

.week-h h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase
}

.week-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.filt {
  border-radius: 99px;
  background: var(--chip);
  border-color: transparent;
  flex-shrink: 0
}

.filt .mi svg {
  width: 18px;
  height: 18px
}

.badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
  place-items: center
}

.badge[hidden] {
  display: none
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line)
}

.day {
  position: relative;
  padding: 12px 4px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 0;
  min-height: 64px
}

.day small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px
}

.day b {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: var(--ink)
}

.day:hover {
  background: var(--canvas)
}

.day.on,
.day.on b {
  color: var(--accent)
}

.day.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent)
}

.week .tabs {
  padding: 10px 16px;
  border-top: 1px solid var(--line)
}

.week .tabs:empty {
  display: none
}

/* Tabs & Buttons */
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between
}

.seg {
  display: flex;
  gap: 6px;
  align-items: center
}

.btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s
}

.btn:hover {
  background: var(--chip)
}

.btn.pri {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

.btn.pri:hover {
  background: #183499
}

.btn.sq {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center
}

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none
}

.tabs::-webkit-scrollbar {
  display: none
}

.tabs:not(.week .tabs) {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 5px;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03)
}

.tab {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 12px;
  color: var(--chip-ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s, box-shadow .15s
}

.tabs:not(.week .tabs) .tab {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px
}

.tab:hover {
  background: var(--chip);
  color: var(--ink)
}

.tab.on,
.tab[aria-selected=true] {
  background: var(--ink);
  color: #fff
}

.tabs:not(.week .tabs) .tab.on,
.tabs:not(.week .tabs) .tab[aria-selected=true] {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(30, 62, 184, .22)
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.slot>* {
  grid-area: 1/1
}

.slot img {
  display: block;
  object-fit: contain
}

.has-img:not(.show-tx)>.tx,
.slot.has-img>span[aria-hidden=true] {
  display: none !important
}

.comp {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px
}

.comp-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas)
}

.comp-h a:hover h2 {
  color: var(--accent)
}

.comp-h .ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  background: #fff;
  position: relative;
  overflow: hidden;
  flex: 0 0 34px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04)
}

.comp-h .ico img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block
}

.comp-h .comp-title-wrap {
  flex: 1;
  min-width: 0
}

.comp-h h2 {
  font-size: 15px;
  font-weight: 800;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.comp-h .caps {
  display: block;
  font-size: 10px;
  line-height: 14px
}

.comp-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--live);
  flex-shrink: 0
}

.row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  transition: background .15s
}

.comp-h+.row {
  border-top: 0
}

.row:hover {
  background: var(--canvas)
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center
}

.time small {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted)
}

.time.live {
  color: var(--live)
}

.time.live>span {
  display: flex;
  align-items: center;
  gap: 5px
}

.fix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit
}

.team {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  min-width: 0
}

.team.h {
  justify-content: flex-end;
  text-align: right
}

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

.team .b,
.b {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--chip);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--chip-ink);
  flex: 0 0 32px;
  font-style: normal;
  position: relative;
  overflow: hidden
}

.b>span {
  grid-area: 1/1;
  display: grid;
  place-items: center
}

.b img {
  grid-area: 1/1;
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block
}

.b.has-img {
  background: #fff;
  border-color: rgba(226, 232, 240, .95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04)
}

.score {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

.score.vs {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em
}

.score.live {
  color: var(--live)
}

.done .team:not(.w) {
  color: var(--muted);
  font-weight: 600
}

.red-card {
  display: inline-block;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  background: var(--red);
  flex-shrink: 0
}

.row-link {
  color: inherit
}

.chs {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap
}

.ch {
  height: 28px;
  min-width: 46px;
  padding: 0 9px;
  border-radius: var(--r);
  background: var(--chip);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden
}

.ch img {
  height: 18px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
  display: block
}

.ch .tx {
  font-size: 10px;
  font-weight: 800;
  color: var(--chip-ink);
  white-space: nowrap
}

.ch.has-img:not(.show-tx) .tx,
.ch:not(.show-tx) img:not([hidden])+.tx {
  display: none
}

.ch.link:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.ch.fr-prio {
  background: var(--selected-surface);
  border-color: #DBE4FF
}

.ch.fr-prio .tx {
  color: var(--primary)
}

.empty-ch {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.star {
  color: var(--chip-ink);
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .15s, color .15s
}

.star:hover {
  color: var(--amber);
  background: var(--chip)
}

.star.on,
.star[aria-pressed=true] {
  color: var(--amber)
}

.star.on svg,
.star[aria-pressed=true] svg {
  fill: #D97706
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px
}

.card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 2px
}

.sec {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 10px
}

.hl {
  display: flex;
  flex-direction: column;
  margin-top: 12px
}

.hl-i {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: inherit
}

.hl-i:first-child {
  border-top: 0
}

.hl-i:hover {
  color: var(--accent)
}

.hl-i small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500
}

.hl-i .m {
  font-size: 11px;
  font-weight: 800;
  color: var(--red)
}

.hl-i .m.end {
  color: var(--muted)
}

.hl-i .sc {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap
}

.dark {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dark h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -.015em
}

.dark p {
  font-size: 12px;
  line-height: 18px;
  color: #CBD5E1
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px
}

.cta:hover {
  background: var(--chip)
}

.feat-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.feat-h h3 {
  margin: 0
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted)
}

.pager .btn {
  height: 44px;
  width: 44px
}

.feat-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  gap: 8px
}

.feat-meta .lg {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  min-width: 0
}

.feat-meta .lg span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lg .ico,
.lg .slot {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
  color: var(--accent)
}

.lg .ico img,
.lg .slot img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block
}

.feat-fix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: center;
  margin: 20px 0
}

.crest {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: var(--chip);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  color: var(--chip-ink);
  display: grid;
  place-items: center;
  overflow: hidden
}

.crest>* {
  grid-area: 1/1
}

.crest.has-img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05)
}

.crest img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block
}

.feat-fix .tn {
  font-weight: 800;
  font-size: 14px;
  line-height: 19px;
  overflow-wrap: anywhere
}

.feat-time {
  font-size: 30px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums
}

.feat-fix small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.feat-fix .in {
  color: var(--accent);
  font-weight: 700;
  margin-top: 2px
}

.prob,
.odds {
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.prob-h,
.odds-h {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--chip-ink)
}

.prob-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  margin: 8px 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--chip)
}

.prob-bar i {
  display: block
}

.prob-v {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.prob-v span em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted)
}

.odds-v {
  display: flex;
  gap: 6px;
  margin-top: 8px
}

.odd {
  flex: 1;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--canvas)
}

.odd small {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 6px
}

.feat-tv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  gap: 10px;
  flex-wrap: wrap
}

.feat-tv .chs {
  gap: 6px
}

.feat-act {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 16px
}

.feat-act .btn,
.feat-act .favorite-inline {
  justify-content: center;
  min-height: 44px;
  white-space: nowrap
}

.feat-act .favorite-inline {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  width: auto
}

.feat-act .favorite-inline:hover {
  background: var(--chip)
}

.feat-act .favorite-inline[aria-pressed=true] {
  color: var(--amber);
  border-color: #FDE68A;
  background: #FFFBEB
}

.feat-act .favorite-inline[aria-pressed=true] svg {
  fill: #D97706
}

.comps {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.comps a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  transition: background .15s
}

.comps a:first-child {
  border-top: 0
}

.comps a:hover {
  background: var(--canvas)
}

.comps .ico,
.comps .slot {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex: 0 0 28px;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
  color: var(--accent)
}

.comps .ico img,
.comps .slot img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block
}

.comps .slot.player-photo.sm {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px
}

.comps .slot.player-photo.sm img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.comps b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.more {
  display: flex;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  align-items: center;
  justify-content: center
}

.more:hover {
  background: var(--chip)
}
.empty-state {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  text-align: center;
  color: var(--muted)
}

.empty-state h2 {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px
}

.empty-state p {
  max-width: 52ch;
  margin: 0 auto 14px
}

.error-state {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  text-align: center
}

.error-state h2 {
  font-size: 18px;
  margin: 6px 0
}

.error-state p {
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 16px
}

.skeleton {
  display: grid;
  gap: 12px
}

.skeleton div {
  height: 64px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite
}

@keyframes shimmer {
  to {
    background-position: -200% 0
  }
}

.inline-notice {
  font-size: 12px;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid #F3D9A4;
  border-radius: var(--r);
  padding: 8px 12px
}

.market-note {
  font-size: 12px;
  color: var(--muted)
}

.text-link {
  font-weight: 700;
  color: var(--accent)
}

.text-link:hover {
  text-decoration: underline
}

.week-day-heading {
  font-size: 14px;
  font-weight: 800;
  margin: 6px 0 8px
}

.search-result-note {
  font-size: 12px;
  color: var(--muted)
}

/* Match detail */
#match-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gutter)
}

.match-detail-header {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 6px
}

.detail-meta .lg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px
}

.detail-date {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%
}

.breadcrumbs a:hover {
  color: var(--accent)
}

.breadcrumb-current {
  max-width: min(52ch, 60vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
  color: var(--pgm-neutral-700, var(--ink))
}

.detail-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px
}

.detail-section h2 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px
}

.detail-section h3 {
  font-size: 13px;
  font-weight: 800;
  margin: 14px 0 6px
}

.lineup-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chip-ink)
}

.data-list {
  display: grid;
  gap: 0
}

.data-pair {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line)
}

.data-pair:first-child {
  border-top: 0
}

.data-pair dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted)
}

.data-pair dd {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere
}

.data-items {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600
}

.table-scroll {
  overflow-x: auto
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums
}

.data-table th,
.data-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap
}

.data-table td {
  font-weight: 500
}

.data-table thead th {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0;
  background: var(--canvas)
}

.data-table tbody tr:hover {
  background: var(--canvas)
}

.data-table th[scope=row] {
  font-weight: 700
}

.event-list {
  list-style: none;
  display: grid;
  gap: 0
}

.event-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  align-items: start
}

.event-list li:first-child {
  border-top: 0
}

.event-minute {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums
}

.event-list strong {
  font-size: 13px
}

.event-list small {
  display: block;
  color: var(--muted);
  font-weight: 600
}

.event-list p {
  font-size: 12px;
  color: var(--chip-ink);
  margin-top: 2px
}

.commentary-section summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 15px
}

.h2h-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 10px
}

.form-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 6px 0 10px
}

.form-pill {
  width: 24px;
  height: 24px;
  border-radius: var(--r);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff
}

.form-pill.w {
  background: var(--live)
}

.form-pill.d {
  background: var(--muted)
}

.form-pill.l {
  background: var(--red)
}

#player-panel,
#team-panel,
#team-tab-panel,
.team-matches-duo {
  display: flex;
  flex-direction: column;
  gap: var(--gutter)
}

.player-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 65%, #EDF2FF 100%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center
}

.player-photo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0
}

.player-photo {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  background: var(--chip);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  overflow: hidden;
  position: relative;
  flex-shrink: 0
}

.player-photo.lg {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06)
}

.player-photo.sm {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 13px
}

.player-photo>* {
  grid-area: 1/1
}

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

.player-photo.has-img {
  background: #fff
}

.player-club-mini {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
  display: grid;
  place-items: center;
  overflow: hidden
}

.player-club-mini .slot {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none
}

.player-club-mini .slot img {
  width: 22px;
  height: 22px;
  object-fit: contain
}

.player-eyebrow,
.player-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.tactical-pill,
.player-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--chip);
  color: var(--chip-ink);
  border: 1px solid var(--line)
}

.player-pill.pos {
  background: var(--blue-bg);
  color: var(--primary);
  border-color: #DBE4FF
}

.tactical-pill.starter,
.player-pill.role {
  background: var(--live-bg);
  color: var(--live);
  border-color: #A7F3D0
}

.tactical-pill.captain,
.player-pill.cap {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: #FDE68A
}

.player-hero-main {
  min-width: 0
}

.player-hero-main h1 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: -.02em
}

.player-sub {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px
}

.player-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center
}

.player-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--chip);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--chip-ink)
}

.player-badge.pri {
  background: var(--blue-bg);
  border-color: #DBE4FF;
  color: var(--primary)
}

.player-badge.coach {
  background: #fff
}

.player-badge .b {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex: 0 0 20px
}

.player-badge .b img {
  width: 16px;
  height: 16px
}

.player-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.player-number {
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
  background: var(--blue-bg);
  border: 1px solid #DBE4FF;
  border-radius: 12px;
  min-width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-variant-numeric: tabular-nums
}

.tactical-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch
}

.pitch-card {
  background: linear-gradient(180deg, #115E38 0%, #0F5132 100%);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  border: 1px solid #0A3622;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .18);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.pitch-card > .caps {
  display: block;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .1em;
  color: #A7F3D0;
  margin-bottom: 8px
}

.pitch-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px
}

.pitch-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: #FFFFFF
}

.pitch-sub {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 600;
  color: #D1FAE5
}

.tactical-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0
}

.tactical-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch
}

.tactical-meta-item,
.tactical-meta-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0
}

.tactical-meta-item small,
.tactical-meta-card .lbl {
  display: block;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted)
}

.tactical-meta-item strong,
.tactical-meta-card strong {
  display: block;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
  overflow-wrap: anywhere
}

.tactical-meta-card small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--chip-ink);
  margin-top: 2px
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px
}

.player-stat-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  text-align: center
}

.player-stat-card b {
  display: block;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 26px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.player-stat-card span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 4px
}

.appearance-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px
}

.appearance-card:last-child {
  margin-bottom: 0
}

.appearance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.player-event-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: var(--canvas);
  border-top: 1px solid var(--line)
}

.player-ev-chip,
.player-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink)
}

.player-ev-chip b {
  color: var(--accent);
  font-variant-numeric: tabular-nums
}

.player-event-pill.goal {
  background: var(--live-bg);
  border-color: #A7F3D0;
  color: var(--live)
}

.player-event-pill.assist {
  background: var(--blue-bg);
  border-color: #DBE4FF;
  color: var(--primary)
}

.player-event-pill.card-y {
  background: var(--amber-bg);
  border-color: #FDE68A;
  color: var(--amber)
}

.player-event-pill.card-r {
  background: var(--red-bg);
  border-color: #FECACA;
  color: var(--red)
}

.player-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px
}

.context-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px
}

.context-card h3 {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink)
}

.standings-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 8px
}

.standings-rank {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.standings-kpis {
  display: flex;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums
}

.standings-kpis span {
  text-align: center
}

.standings-kpis small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 700
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px
}

.player-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s, background .15s
}

.player-card:hover {
  border-color: var(--accent);
  background: var(--canvas)
}

.player-card-body {
  min-width: 0;
  flex: 1
}

.player-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.player-card-body small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.player-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0
}

.pitch-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--chip);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--chip-ink)
}

.player-link {
  color: inherit;
  font-weight: 700;
  text-decoration: none
}

.player-link:hover {
  color: var(--accent);
  text-decoration: underline
}

.faq-list {
  display: grid;
  gap: 8px;
  margin-top: 8px
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 14px;
  background: var(--canvas)
}

.faq-item summary {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink)
}

.faq-item p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--chip-ink);
  line-height: 19px
}

.ov {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 40
}

.ov.open {
  opacity: 1;
  pointer-events: auto
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--canvas);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -12px 0 32px -12px rgba(15, 23, 42, .2);
  visibility: hidden
}

.drawer.open {
  transform: none;
  visibility: visible
}

.dr-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line)
}

.dr-h h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800
}

.dr-b {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.seg3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--chip);
  border-radius: var(--r-lg)
}

.seg3 button {
  min-height: 44px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--chip-ink)
}

.seg3 button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08)
}

.seg3 button[hidden] {
  display: none
}

.search.dr-s {
  width: 100%
}

.dr-s input {
  min-height: 44px;
  background: #fff
}

.dr-s .mi {
  top: 12px
}

.fl {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.fi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  cursor: pointer
}

.fi:first-child {
  border-top: 0
}

.fi:hover {
  background: var(--canvas)
}

.fi input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.fi .slot {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  position: relative;
  flex-shrink: 0
}

.fi .slot>span {
  grid-area: 1/1;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--chip-ink)
}

.fi .slot img {
  grid-area: 1/1;
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block
}

.fi .nm {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fi .ct {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.fi .box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid #475569;
  display: grid;
  place-items: center;
  color: transparent
}

.fi .box svg {
  width: 14px;
  height: 14px
}

.fi input:checked~.box {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

.fi input:focus-visible~.box {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.fl-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted)
}

.dr-f {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid var(--line)
}

.dr-f .btn {
  min-height: 44px;
  justify-content: center
}

.ft {
  margin-top: 2rem;
  background: #fff;
  border-top: 1px solid var(--line)
}

.foot {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem
}

.ft-top {
  padding-top: 48px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px
}

.ft-brand svg,
.ft-brand img {
  height: 36px;
  width: auto;
  display: block
}

.ft-brand p {
  margin: 16px 0 0;
  max-width: 380px;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px
}

.site-footer__social {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.site-footer__social-title {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink)
}

.site-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center
}

.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--chip-ink);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
}

.social-btn__icon {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform .15s ease
}

.social-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .22)
}

.social-btn:hover .social-btn__icon {
  transform: scale(1.06)
}

.social-btn--facebook:hover {
  background: #1877F2;
  border-color: #1877F2
}

.social-btn--x:hover {
  background: #0F172A;
  border-color: #0F172A
}

.social-btn--instagram:hover {
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  border-color: #DD2A7B
}

.social-btn--threads:hover {
  background: #000000;
  border-color: #000000
}

.social-btn--tiktok:hover {
  background: #010101;
  border-color: #010101
}

.social-btn--youtube:hover {
  background: #FF0000;
  border-color: #FF0000
}

.social-btn--reddit:hover {
  background: #FF4500;
  border-color: #FF4500
}

.social-btn--pinterest:hover {
  background: #E60023;
  border-color: #E60023
}

/* Player Career & Honours, Match TV Broadcast Center & Dedicated Team Page */
.career-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px
}

.career-grid > :only-child {
  grid-column: 1 / -1
}

.career-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.career-card-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.career-card-h h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink)
}

.career-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.career-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease
}

.career-step:hover {
  border-color: #CBD5E1
}

.career-step.current,
.career-step.is-current {
  border-left: 3px solid var(--primary);
  background: linear-gradient(90deg, rgba(30, 62, 184, .05) 0%, #FFFFFF 100%)
}

.career-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

.career-step-club {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  min-width: 0
}

a.career-step-club:hover {
  color: var(--accent);
  text-decoration: underline
}

.career-step-club .slot {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  flex: 0 0 28px
}

.career-step-club .slot img {
  width: 22px;
  height: 22px
}

.career-step-meta {
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
  font-weight: 600
}

.career-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.career-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--chip-ink);
  font-variant-numeric: tabular-nums
}

.career-metric b {
  color: var(--ink);
  font-weight: 800
}

.career-period {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  background: var(--blue-bg);
  padding: 4px 9px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap
}

.career-club {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.career-club-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.career-club-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

a.career-club-name:hover,
a.team-link:hover {
  color: var(--accent);
  text-decoration: underline
}

.career-club-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.career-kpis {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.career-kpi {
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--canvas);
  border: 1px solid var(--line);
  text-align: center;
  font-variant-numeric: tabular-nums
}

.career-kpi b {
  display: block;
  font-size: 13px;
  line-height: 16px;
  font-weight: 800;
  color: var(--ink)
}

.career-kpi small {
  display: block;
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase
}

.honours-list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.honour-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--canvas);
  border: 1px solid var(--line)
}

.honour-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink)
}

.honour-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px
}

.honour-count {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0
}

.tv-summary-banner {
  padding: 16px 20px;
  background: linear-gradient(135deg, #0F172A 0%, #1E3EB8 100%);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line)
}

.tv-summary-banner h4 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em
}

.tv-summary-banner p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
  margin-top: 2px
}

.tv-summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.tv-summary-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: 700;
  color: #fff
}

.tv-broadcast-sec {
  padding: 18px 20px
}

.tv-broadcast-sec + .tv-broadcast-sec {
  border-top: 1px solid var(--line)
}

.tv-broadcast-sec h5 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px
}

.tv-broadcast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px
}

.tv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--canvas);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease
}

.tv-card:hover {
  background: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .16)
}

.tv-card.fr-prio {
  background: var(--blue-bg);
  border-color: rgba(32, 70, 232, .28)
}

.tv-card-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary)
}

.tv-card-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block
}

.tv-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.tv-card-body strong,
.tv-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block
}

.tv-card-body small,
.tv-card-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600
}

.tv-card-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0
}

.tv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--chip-ink);
  letter-spacing: .04em
}

.tv-pill.fr {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

.tv-pill.live {
  background: var(--live-bg);
  border-color: #A7F3D0;
  color: var(--live)
}

.team-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 58%, #1E3EB8 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .35)
}

.team-crest-lg {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, .24);
  display: grid;
  place-items: center;
  padding: 10px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18)
}

.team-crest-lg .slot,
.slot.crest-lg {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  place-items: center
}

.team-crest-lg img,
.team-crest-lg .slot img,
.slot.crest-lg img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block
}

.team-crest-lg > span:not(.slot),
.team-crest-lg .slot .tx {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary)
}

.team-hero-main {
  min-width: 0
}

.team-hero-main h1 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff
}

.team-hero .player-pill {
  background: rgba(255, 255, 255, .14);
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, .24)
}

.team-hero .player-pill.pos {
  background: rgba(59, 91, 219, .28);
  color: #EDF2FF;
  border-color: rgba(116, 143, 252, .42)
}

.team-hero .player-pill.role {
  background: rgba(16, 185, 129, .26);
  color: #ECFDF5;
  border-color: rgba(110, 231, 183, .42)
}

.team-hero .player-sub,
.team-hero-sub {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(241, 245, 249, .88);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center
}

.team-hero .player-badge,
.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: 700;
  color: #fff
}

.team-hero .player-badge.pri {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14)
}

.team-hero a.player-badge.pri:hover {
  background: #EDF2FF;
  color: var(--primary)
}

.team-badges {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.team-form-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px
}

.team-form-pills {
  display: flex;
  gap: 5px
}

.form-pill {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff
}

.form-pill.w,
.form-pill.v {
  background: #10B981
}

.form-pill.d,
.form-pill.n {
  background: #64748B
}

.form-pill.l {
  background: #EF4444
}

.team-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
  flex-shrink: 0
}

.team-kpi {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 112px
}

.team-kpi b {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums
}

.team-kpi span {
  display: block;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  color: rgba(226, 232, 240, .88);
  text-transform: uppercase;
  letter-spacing: .06em
}

.team-kpi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.team-kpi-card b {
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.team-kpi-card span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em
}

.team-overview-duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.squad-group + .squad-group {
  margin-top: 16px
}

.table tr.is-team td {
  background: var(--blue-bg);
  font-weight: 800
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px
}

.team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease
}

.team-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .16)
}

.team-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.team-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.team-card-body small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ft-col h4 {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px
}

.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ft-col a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted)
}

.ft-col a:hover {
  color: var(--accent)
}

.ft-bar {
  border-top: 1px solid var(--line);
  background: var(--canvas)
}

.ft-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 12px;
  color: var(--muted)
}

.ft-bot strong {
  color: var(--ink);
  font-weight: 700
}

.ft-bot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-weight: 600
}

.ft-bot a:hover {
  color: var(--accent)
}

@media (max-width: 1439px) and (min-width: 1280px) {
  .top-in {
    padding: 0 1.25rem;
    gap: 0.65rem
  }

  .logo {
    width: 184px
  }

  .logo svg {
    height: 36px
  }

  .nav {
    gap: 2px
  }

  .nav a {
    padding: 0 9px;
    font-size: 12.5px;
    gap: 6px
  }

  .tools {
    min-width: 44px
  }

  .tsearch {
    width: 44px
  }
}

@media(max-width:1279px) {
  .shell {
    grid-template-columns: minmax(0, 1fr)
  }

  .rail {
    position: static
  }

  .top {
    height: 64px
  }

  .top-in {
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px
  }

  .tools {
    min-width: 0;
    margin-left: auto
  }

  .burger {
    display: grid
  }

  .tsearch {
    display: inline-flex;
    width: 44px;
    height: 44px
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .16);
    padding: 12px 1.5rem 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px
  }

  .nav.open {
    display: flex
  }

  .nav a {
    height: 44px;
    padding: 0 14px;
    font-size: 14px
  }

  .nav .search {
    display: block;
    width: 100%;
    margin-bottom: 8px
  }

  .nav .search input {
    min-height: 44px
  }

  .nav .search .mi {
    top: 12px
  }
}

@media(max-width:1279px) and (min-width:768px) {
  .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start
  }

  #feat-slot {
    grid-column: 1/-1
  }
}

@media(max-width:1023px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .ft-brand {
    grid-column: 1/-1
  }

  .career-grid,
  .team-overview-duel {
    grid-template-columns: minmax(0, 1fr)
  }

  .tactical-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:767px) {
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px))
  }

  .top {
    height: 58px
  }

  .top-in,
  .shell,
  .foot {
    padding-left: 12px;
    padding-right: 12px
  }

  .nav {
    padding-left: 12px;
    padding-right: 12px
  }

  .logo {
    width: 152px
  }

  .logo svg,
  .logo img {
    height: 30px
  }

  .top-in {
    gap: 8px;
    height: 58px
  }

  .tools {
    gap: 6px
  }

  .burger {
    width: 44px;
    height: 44px
  }

  .shell {
    gap: 12px;
    padding-top: 12px
  }

  .head h1 {
    font-size: 22px;
    line-height: 28px
  }

  .week-h {
    padding: 12px 14px
  }

  .week-h h2 {
    font-size: 14px;
    line-height: 18px
  }

  .days {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none
  }

  .day {
    flex: 0 0 60px
  }

  .row {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-areas: "t f s" ". c c";
    gap: 6px 10px;
    padding: 10px 12px
  }

  .row .time {
    grid-area: t;
    font-size: 12px
  }

  .row .fix {
    grid-area: f;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ta sc" "tb sc";
    gap: 6px 10px
  }

  .row .team {
    font-size: 13px;
    gap: 8px
  }

  .row .team.h {
    grid-area: ta;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left
  }

  .row .team:not(.h) {
    grid-area: tb
  }

  .row .score {
    grid-area: sc;
    font-size: 15px;
    min-width: 34px;
    text-align: right
  }

  .row .chs {
    grid-area: c;
    justify-content: flex-start
  }

  .row .chs:empty {
    display: none
  }

  .row .star {
    grid-area: s;
    width: 44px;
    height: 44px
  }

  .data-pair {
    grid-template-columns: 110px minmax(0, 1fr)
  }

  .player-hero,
  .team-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 16px;
    gap: 14px
  }

  .player-photo-wrap,
  .player-photo.lg,
  .player-photo,
  .team-crest-lg {
    width: 72px;
    height: 72px
  }

  .team-crest-lg img,
  .team-crest-lg .slot img {
    width: 52px;
    height: 52px
  }

  .player-hero-aside,
  .team-form-strip,
  .team-kpis {
    grid-column: 1/-1;
    width: 100%
  }

  .team-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .tactical-meta-grid {
    grid-template-columns: 1fr
  }

  .player-number {
    height: 44px;
    min-width: 44px;
    font-size: 22px
  }

  .tactical-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .pitch-card {
    max-width: 280px;
    margin: 0 auto;
    width: 100%
  }

  .bnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 29;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px
  }

  .bnav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--muted);
    transition: color .15s, background-color .15s
  }

  .bnav a .mi {
    width: 20px;
    height: 20px
  }

  .bnav a.on,
  .bnav a[aria-current="page"] {
    color: var(--primary);
    background: var(--blue-bg)
  }

  .bnav .count {
    position: absolute;
    top: 3px;
    right: calc(50% - 22px);
    height: 15px;
    min-width: 15px;
    padding: 0 4px;
    font-size: 9px;
    background: var(--live);
    color: #fff
  }
}

@media(max-width:479px) {
  .ft-top {
    gap: 28px 20px
  }
}

@media(prefers-reduced-motion:reduce) {

  #icon-bg,
  .signal,
  #play,
  #underline,
  #shine,
  .pulse {
    animation: none !important
  }

  #underline {
    stroke-dashoffset: 0
  }

  .skeleton div {
    background: #EEF2F7;
    animation: none
  }
}

/* ==========================================================================
   BLOG & GUIDES TV (GEO / AEO / SEO Editorial System)
   ========================================================================== */
.blog-page,
.blog-article,
.blog-page-wrap,
.blog-index-hero,
.blog-index-hero-top,
.blog-index-head,
.blog-index-intro,
.blog-filter-bar,
.blog-filter-top-row,
.blog-toolbar,
.blog-type-seg,
.blog-cat-tabs,
.blog-guides-grid,
.blog-related-grid,
.blog-guide-card,
.blog-article-layout,
.blog-main-col,
.blog-article-sheet,
.blog-article-header,
.blog-hero-top-bar {
  min-inline-size: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.blog-page,
.blog-article,
.blog-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0
}

.blog-hero-card,
.blog-index-hero,
.blog-featured-guide,
.blog-article-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .03)
}

.blog-index-hero {
  border: 1px solid var(--border);
  background: var(--surface)
}

.blog-index-hero-top,
.blog-index-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.blog-hero-card h1,
.blog-index-hero h1 {
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.26;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 6px 0 10px
}

.blog-lead,
.blog-index-hero p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0
}

.blog-index-kpis {
  display: flex;
  gap: 10px;
  flex-shrink: 0
}

.blog-kpi-pill {
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.blog-kpi-pill b {
  font-size: 19px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums
}

.blog-kpi-pill span {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted)
}

.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px
}

.blog-type-seg {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px
}

.blog-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--chip-ink);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s
}

.blog-type-btn small {
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(15, 23, 42, .07);
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.blog-type-btn.on {
  background: #FFFFFF;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08)
}

.blog-type-btn.on small {
  background: var(--selected-surface);
  color: var(--primary)
}

.blog-inline-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 360px;
  min-height: 40px
}

.blog-inline-search .mi {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none
}

.blog-inline-search input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px 0 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s
}

.blog-inline-search input:focus {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .1)
}

/* Featured Guide 2-Column Showcase */
.blog-featured-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr);
  gap: 22px;
  align-items: stretch;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border-color: #DBE4FF
}

.blog-feat-showcase,
.blog-feat-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0
}

.blog-type-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase
}

.blog-type-tag.is-tv {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857
}

.blog-type-tag.is-art {
  background: var(--selected-surface);
  border: 1px solid #DBE4FF;
  color: var(--action)
}

.blog-featured-guide h2 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0
}

.blog-featured-guide h2 a {
  color: inherit;
  text-decoration: none
}

.blog-featured-guide h2 a:hover {
  color: var(--primary)
}

.blog-featured-sub {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--muted);
  margin: 0
}

.blog-feat-board {
  background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
  border-radius: 12px;
  padding: 18px 16px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)
}

.blog-feat-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #748FFC;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums
}

.blog-feat-teams,
.blog-feat-board-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0
}

.blog-feat-club,
.blog-feat-board-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center
}

.blog-feat-club img,
.blog-feat-board-team img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25)
}

.blog-feat-club strong,
.blog-feat-board-team strong {
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 800;
  color: #F8FAFC
}

.blog-feat-vs,
.blog-feat-board-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  text-align: center
}

.blog-feat-vs span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #748FFC
}

.blog-feat-vs b,
.blog-feat-board-vs b {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums
}

.blog-feat-vs small,
.blog-feat-board-vs small {
  font-size: 10px;
  font-weight: 600;
  color: #CBD5E1
}

.blog-feat-stadium,
.blog-feat-board-tv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11.5px;
  font-weight: 600;
  color: #E2E8F0;
  text-align: center
}

.blog-feat-stadium .mi {
  width: 14px;
  height: 14px;
  color: #5C7CFA;
  flex-shrink: 0
}

/* Unified Article Sheet & Match Strip on /blog/:slug */
.blog-article-sheet {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 30px
}

.blog-article-sheet > .blog-hero-card {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0
}

.blog-article-header {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.blog-article-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px
}

.blog-type-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase
}

.blog-type-pill.guide {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857
}

.blog-type-pill.edito {
  background: var(--selected-surface);
  border: 1px solid #DBE4FF;
  color: var(--action)
}

.blog-kicker-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.blog-article-header h1 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.26;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0
}

.blog-match-strip {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px
}

.blog-ms-team {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF
}

.blog-ms-team strong {
  display: block;
  font-size: 15px;
  color: #FFFFFF
}

.blog-ms-team small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8
}

.blog-ms-team.away,
.blog-ms-team.is-away {
  justify-content: flex-end;
  text-align: right
}

.blog-ms-team img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 11px;
  padding: 5px;
  flex-shrink: 0
}

.blog-ms-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16)
}

.blog-ms-comp {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #748FFC
}

.blog-ms-center b,
.blog-ms-time {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums
}

.blog-ms-center small {
  font-size: 11px;
  color: #CBD5E1;
  font-weight: 600
}

.blog-ms-chans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 6px
}

.blog-ms-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.blog-ms-channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px
}

.blog-ms-ch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF
}

.blog-ms-ch .mi {
  width: 13px;
  height: 13px;
  color: #748FFC
}

.blog-ms-stadium {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #E2E8F0
}

.blog-ms-stadium .mi {
  width: 14px;
  height: 14px;
  color: #748FFC
}

.blog-meta-bar {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.blog-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.blog-badge-cat,
.blog-card-cat-tag,
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--selected-surface);
  border: 1px solid #DBE4FF;
  color: var(--action);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-decoration: none
}

a.blog-badge-cat {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease
}

a.blog-badge-cat:hover {
  background: var(--action);
  border-color: var(--action);
  color: #FFFFFF;
  transform: translateY(-1px)
}

.blog-author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3
}

.blog-author-info strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink)
}

.blog-author-info span {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600
}

.blog-dates-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.blog-past-notice {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px
}

.blog-past-notice p {
  margin: 0;
  color: var(--ink);
  font-weight: 600
}

.blog-past-notice a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap
}

.blog-past-notice a:hover {
  text-decoration: underline
}

.blog-share-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.blog-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-share-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.blog-share-btn,
.blog-share-btn.is-icon-only {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.blog-share-btn .mi,
.blog-share-btn .mi svg {
  width: 17px;
  height: 17px;
  display: block;
}

.blog-share-btn:hover {
  transform: translateY(-1px);
  background: var(--pgm-primary-50);
  border-color: var(--pgm-primary-200);
  color: var(--primary);
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .16);
}

.blog-share-btn--copy.is-copied {
  background: var(--pgm-tertiary-50);
  border-color: var(--pgm-tertiary-300);
  color: var(--live);
}

.blog-share-btn--x:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #FFFFFF;
}

.blog-share-btn--wa:hover {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}

.blog-share-btn--fb:hover {
  background: #1E3EB8;
  border-color: #1E3EB8;
  color: #FFFFFF;
}

.blog-share-btn--tg:hover {
  background: var(--action);
  border-color: var(--action);
  color: #FFFFFF;
}

.blog-ai-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.blog-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 62, 184, .24);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.blog-ai-btn:hover,
.blog-ai-dropdown.open .blog-ai-btn {
  background: var(--pgm-primary-700);
  border-color: var(--pgm-primary-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(30, 62, 184, .32);
}

.blog-ai-btn .mi,
.blog-ai-btn .mi svg {
  width: 15px;
  height: 15px;
  display: block;
}

.blog-ai-btn > .mi:first-child {
  color: #6EE7B7;
}

.blog-ai-caret {
  width: 13px !important;
  height: 13px !important;
  opacity: .88;
  transition: transform .18s ease;
}

.blog-ai-dropdown.open .blog-ai-caret {
  transform: rotate(180deg);
}

.blog-ai-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 268px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .08);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.blog-ai-menu[hidden] {
  display: none !important;
}

.blog-ai-menu-head {
  padding: 7px 10px 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--chip);
  margin-bottom: 2px;
}

.blog-ai-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .14s ease, color .14s ease;
}

.blog-ai-menu-item:hover {
  background: var(--pgm-primary-50);
  color: var(--primary);
}

.blog-ai-menu-ico,
.blog-ai-provider-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--canvas);
}

.blog-ai-menu-ico svg,
.blog-ai-provider-ico svg,
.blog-ai-provider-ico .mi {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
}

.blog-ai-menu-ico.is-openai,
.blog-ai-provider-ico.is-chatgpt {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}

.blog-ai-menu-ico.is-claude,
.blog-ai-provider-ico.is-claude {
  background: #FFF7ED;
  border-color: #FED7AA;
  color: #C2410C;
}

.blog-ai-menu-ico.is-gemini,
.blog-ai-provider-ico.is-gemini {
  background: #EDF2FF;
  border: 1px solid #BAC8FF;
  color: #1E3EB8;
}

.blog-ai-menu-ico.is-perplexity,
.blog-ai-provider-ico.is-perplexity {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
}

.blog-ai-menu-txt,
.blog-ai-provider-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.blog-ai-menu-txt strong,
.blog-ai-provider-txt strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: inherit;
}

.blog-ai-menu-txt small,
.blog-ai-provider-txt small {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--muted);
}

.blog-ai-menu-ext,
.blog-ai-ext {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}

.blog-ai-menu-ext svg,
.blog-ai-ext svg {
  width: 14px;
  height: 14px;
  display: block;
}

.blog-ai-menu-item:hover .blog-ai-menu-ext,
.blog-ai-menu-item:hover .blog-ai-ext {
  color: var(--primary);
}

.blog-ai-box {
  background: var(--selected-surface);
  border: 1px solid #DBE4FF;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink)
}

.blog-ai-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.blog-ai-close {
  background: #FFFFFF;
  border: 1px solid #DBE4FF;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer
}

.blog-tldr-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.blog-tldr-head {
  display: flex;
  align-items: center;
  gap: 8px
}

.blog-tldr-head .mi {
  width: 18px;
  height: 18px;
  color: var(--primary)
}

.blog-tldr-head h2 {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin: 0
}

.blog-aeo-answer {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--pgm-neutral-900);
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pgm-neutral-200)
}

.blog-tldr-card .blog-aeo-answer {
  margin-bottom: 0
}

.blog-tldr-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink)
}

.blog-tldr-list li::marker {
  color: var(--primary)
}

.blog-tldr-tags {
  border-top: 1px solid var(--pgm-neutral-200);
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600
}

.blog-tag-chip {
  background: var(--surface);
  border: 1px solid var(--pgm-neutral-200);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--chip-ink);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease
}

a.blog-tag-chip:hover {
  background: var(--selected-surface);
  border-color: var(--action);
  color: var(--action);
  transform: translateY(-1px)
}

.blog-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
  scroll-margin-top: 84px
}

.blog-section h2 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0
}

.blog-section p {
  font-size: 14.5px;
  line-height: 1.68;
  color: #334155;
  margin: 0
}

.blog-section a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline
}

.blog-callout-box {
  background: var(--canvas);
  border: 1px solid var(--pgm-neutral-200);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--pgm-neutral-900)
}

.blog-table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.blog-recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums
}

.blog-recap-table th,
.blog-recap-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line)
}

.blog-recap-table td {
  font-weight: 500;
  font-variant-numeric: tabular-nums
}

.blog-recap-table thead th {
  background: #F8FAFC;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink)
}

.blog-recap-table tbody th {
  width: 34%;
  font-weight: 800;
  color: var(--ink);
  background: var(--surface-muted)
}

.blog-recap-table tbody tr:last-child th,
.blog-recap-table tbody tr:last-child td {
  border-bottom: 0
}

.blog-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.blog-faq-item {
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden
}

.blog-faq-item summary {
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.blog-faq-item summary::-webkit-details-marker {
  display: none
}

.blog-faq-item summary::after {
  content: '⌄';
  font-size: 15px;
  color: var(--muted);
  transition: transform .15s
}

.blog-faq-item[open] summary::after {
  transform: rotate(180deg)
}

.blog-faq-ans {
  padding: 0 18px 15px;
  border-top: 1px solid #E2E8F0;
  padding-top: 12px;
  background: #FFFFFF
}

.blog-faq-ans p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0
}

.blog-related-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px
}

.blog-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.blog-sec-head h2,
.blog-sec-head h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0
}

.blog-sec-head a,
.blog-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none
}

.blog-count-badge {
  background: var(--selected-surface);
  border: 1px solid #DBE4FF;
  padding: 3px 10px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums
}

.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

/* Visual Blog & Guide Cards */
.blog-guide-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  height: 100%;
}

.blog-guide-card:hover {
  border-color: #748FFC;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
  transform: translateY(-2px);
}

.blog-card-visual,
.blog-card-visual.editorial-photo {
  aspect-ratio: 16 / 9;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #0F172A;
  border-bottom: 1px solid var(--border);
}

.blog-card-visual img.blog-cv-photo,
.blog-cv-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .35s ease;
}

.blog-guide-card:hover img.blog-cv-photo,
.blog-guide-card:hover .blog-cv-photo {
  transform: scale(1.03);
}

.blog-card-visual.fixture,
.blog-card-visual.is-match {
  aspect-ratio: 16 / 9;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(155deg, #0F172A 0%, #162447 50%, #1E293B 100%);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  overflow: hidden;
}

.blog-cv-tv {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.blog-cv-tv-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .15);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .02em;
}

.blog-card-visual.editorial-placeholder,
.blog-card-visual.is-article:not(.editorial-photo):not(.is-photo) {
  aspect-ratio: 16 / 9;
  background: #EDF2FF;
  color: #0F172A;
  border-bottom: 1px solid #E2E8F0
}

.blog-card-visual.editorial-photo,
.blog-card-visual.is-photo {
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 0;
  background: #0F172A;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #E2E8F0
}

.blog-card-visual.editorial-photo .blog-cv-top,
.blog-card-visual.is-photo .blog-cv-top {
  display: none !important
}

.blog-cv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.blog-cv-comp {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .15);
  color: #FFFFFF;
}

.blog-card-visual.editorial-placeholder .blog-cv-comp,
.blog-card-visual.is-article:not(.editorial-photo):not(.is-photo) .blog-cv-comp {
  background: #DBE4FF;
  color: var(--action)
}

.blog-cv-type {
  font-size: 10.5px;
  font-weight: 700;
  color: #748FFC
}

.blog-card-visual.editorial-placeholder .blog-cv-type,
.blog-card-visual.is-article:not(.editorial-photo):not(.is-photo) .blog-cv-type {
  color: var(--text-secondary)
}

.blog-cv-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.blog-cv-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.blog-cv-team:last-child {
  flex-direction: row-reverse;
  text-align: right;
}

.blog-cv-team img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.blog-cv-team .blog-cv-crest-fb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  flex-shrink: 0;
}

.blog-cv-team span,
.blog-cv-team strong {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-cv-date {
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F0;
  font-variant-numeric: tabular-nums;
}

.blog-card-visual.editorial-placeholder .blog-cv-date,
.blog-card-visual.is-article:not(.editorial-photo):not(.is-photo) .blog-cv-date {
  color: var(--text-secondary)
}

.blog-cv-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(30, 62, 184, 0.35);
  border: 1px solid rgba(116, 143, 252, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.blog-cv-center b {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.blog-cv-center small {
  font-size: 10.5px;
  color: #BAC8FF;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.blog-cv-editorial,
.blog-cv-dossier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0
}

.blog-cv-ed-icon,
.blog-cv-dossier-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #DBE4FF;
  display: grid;
  place-items: center;
  color: var(--action);
  flex-shrink: 0
}

.blog-cv-ed-icon .mi,
.blog-cv-dossier-ico .mi {
  width: 20px;
  height: 20px
}

.blog-cv-ed-meta,
.blog-cv-dossier-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.blog-cv-ed-meta strong,
.blog-cv-dossier-txt strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #0F172A
}

.blog-cv-ed-meta span,
.blog-cv-dossier-txt span {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.blog-guide-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.blog-card-top,
.blog-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-read-time,
.blog-card-read-time {
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.blog-card-date {
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #1E3EB8;
  text-decoration: none;
}

.blog-guide-card h3,
.blog-guide-card h4,
.blog-guide-card-title {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  margin: 8px 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-guide-card h3 a,
.blog-guide-card h4 a,
.blog-guide-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-guide-card h3 a:hover,
.blog-guide-card h4 a:hover,
.blog-guide-card-title a:hover {
  color: var(--action);
}

.blog-guide-card p,
.blog-guide-card-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.blog-ch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--chip-ink);
}

.blog-ch-tag .mi {
  width: 13px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  flex-shrink: 0;
}

.blog-ch-tag .mi svg {
  width: 13px;
  height: 13px;
  display: block;
}

.blog-card-foot,
.blog-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--selected-surface, #EDF2FF);
  color: var(--action, #1E3EB8);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
  min-height: 36px;
}

.blog-card-action-btn:hover {
  background: var(--action, #1E3EB8);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.blog-card-action-btn .blog-card-arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
  display: inline-block;
}

.blog-card-action-btn:hover .blog-card-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .blog-card-visual.fixture {
    padding: 14px 16px;
  }
  .blog-cv-team img,
  .blog-cv-team .blog-cv-crest-fb {
    width: 38px;
    height: 38px;
  }
  .blog-cv-team strong {
    font-size: 13px;
  }
  .blog-cv-center {
    padding: 6px 12px;
  }
  .blog-cv-center b {
    font-size: 15px;
  }
  .blog-card-action-btn {
    min-height: 44px;
    padding: 8px 16px;
  }
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.blog-page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  font-variant-numeric: tabular-nums;
}

.blog-page-btn:hover:not(:disabled):not(.on) {
  border-color: var(--action);
  color: var(--action);
  background: var(--selected-surface);
  transform: translateY(-1px);
}

.blog-page-btn.on {
  background: var(--action);
  color: #FFFFFF;
  border-color: var(--action);
  box-shadow: 0 2px 6px rgba(30, 62, 184, .25);
}

.blog-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--canvas);
}

@media (max-width: 640px) {
  .blog-page-btn {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
  }
}

.blog-feat-board.is-article {
  justify-content: center;
  gap: 12px;
}

.blog-feat-board-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #748FFC;
}

.blog-feat-board.is-article h3,
.blog-feat-board.is-article strong {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
}

.blog-feat-board.is-article p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #CBD5E1;
}

.blog-feat-board-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-feat-board-chips > span:not(.blog-ch-tag) {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #F8FAFC;
  font-size: 11.5px;
  font-weight: 700;
}

.blog-read-link {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap
}

.blog-read-link:hover {
  text-decoration: underline
}

.blog-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-inline-size: 0;
  max-width: 100%;
  box-sizing: border-box
}

.blog-cat-pill {
  height: 32px;
  padding: 0 13px;
  border-radius: 99px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--chip-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all .15s
}

.blog-cat-pill:hover {
  background: var(--selected-surface);
  color: var(--primary)
}

.blog-cat-pill.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

/* Blog Sidebar (#rail) */
.blog-toc-card {
  margin-bottom: 16px
}

.blog-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

.blog-toc-head .mi {
  width: 16px;
  height: 16px;
  color: var(--muted)
}

.blog-toc-head h3 {
  font-size: 13.5px;
  font-weight: 800;
  margin: 0
}

.blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.blog-toc-list li a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--chip-ink);
  text-decoration: none
}

.blog-toc-list li a::before {
  content: '•';
  color: var(--primary);
  font-weight: 800
}

.blog-toc-list li a:hover {
  color: var(--primary)
}

.blog-affiche-card {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.blog-affiche-head h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0
}

.blog-affiche-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600
}

.blog-affiche-sub .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink)
}

.blog-affiche-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: 10px
}

.blog-affiche-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink)
}

.blog-affiche-crest {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 5px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05)
}

.blog-affiche-crest img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block
}

.blog-affiche-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.blog-affiche-time small {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700
}

.blog-affiche-time b {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums
}

.blog-affiche-time span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600
}

.blog-affiche-tv {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600
}

.blog-rail-block {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.blog-nav-list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.blog-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s
}

.blog-nav-list a:last-child {
  border-bottom: 0
}

.blog-nav-list a:hover {
  background: #F8FAFC
}

.blog-nav-list a span {
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 700
}

.blog-guides-rail {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.blog-guide-rail-item {
  display: block;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s
}

.blog-guide-rail-item:hover {
  border-color: #748FFC;
  background: #F8FAFC
}

.blog-guide-rail-item.on {
  background: var(--selected-surface);
  border-color: #5C7CFA;
  color: var(--primary)
}

@media (max-width: 1120px) {
  .blog-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .blog-index-head,
  .blog-index-hero-top,
  .blog-featured-guide {
    grid-template-columns: 1fr;
  }

  .blog-index-kpis {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .blog-hero-card,
  .blog-index-hero,
  .blog-index-head,
  .blog-featured-guide,
  .blog-article-sheet {
    padding: 18px 16px;
  }

  .blog-related-grid {
    grid-template-columns: 1fr;
  }

  .blog-match-strip,
  .blog-ms-teams {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .blog-ms-team,
  .blog-ms-team.away,
  .blog-ms-team.is-away {
    flex-direction: row;
    justify-content: center;
    text-align: left;
  }

  .blog-table-card {
    overflow-x: auto;
  }

  .blog-tldr-card,
  .blog-callout-box {
    padding: 14px 16px;
  }

  .blog-recap-table th,
  .blog-recap-table td {
    padding: 10px 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 640px) {
  .blog-index-hero {
    padding: 18px 14px;
  }

  .blog-type-seg {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: visible;
  }

  .blog-type-btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
    white-space: normal;
  }

  .blog-cat-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .blog-share-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .blog-kpi-pill {
    flex: 1 1 80px;
    min-width: 0;
    padding: 8px 10px;
  }

  .blog-inline-search {
    max-width: none;
    width: 100%;
  }

  .blog-share-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-ai-dropdown {
    width: 100%;
  }

  .blog-ai-btn {
    width: 100%;
    justify-content: center;
  }

  .blog-ai-menu {
    left: 0;
    right: 0;
    width: 100%;
  }

  .blog-past-notice {
    padding: 12px 14px;
  }
}

/* ==========================================================================
   Broadcaster & OTT Logos, Editorial Article Showcase & Live Filter Hub
   ========================================================================== */

.blog-ch-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 3.5px 9px 3.5px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .15s, background .15s, transform .12s;
}

a.blog-ch-tag:hover {
  border-color: #748FFC;
  background: #F8FAFC;
  color: var(--primary);
  transform: translateY(-1px);
}

.blog-ch-logo {
  width: 34px;
  height: 15px;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  flex-shrink: 0;
}

.blog-tag-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
}

.blog-hero-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-type-tag .mi,
.blog-read-time .mi {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-type-tag .mi svg,
.blog-read-time .mi svg {
  width: 14px;
  height: 14px;
  display: block;
}

.blog-read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.blog-article-showcase {
  margin-top: 6px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #163091 100%);
  border: 1px solid rgba(148, 163, 184, .22);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}

.blog-as-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-as-comp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.blog-as-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(92, 124, 250, .22);
  border: 1px solid rgba(116, 143, 252, .38);
  color: #748FFC;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-as-ico .mi,
.blog-as-ico .mi svg {
  width: 22px;
  height: 22px;
  display: block;
}

.blog-as-comp > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-as-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #748FFC;
}

.blog-as-comp strong {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.blog-as-season {
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px;
  font-weight: 700;
  color: #E2E8F0;
}

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

.blog-as-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}

.blog-as-metric > .mi {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(92, 124, 250, .2);
  border: 1px solid rgba(116, 143, 252, .3);
  color: #748FFC;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-as-metric > .mi svg {
  width: 16px;
  height: 16px;
  display: block;
}

.blog-as-metric > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.blog-as-metric b {
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
}

.blog-as-metric small {
  font-size: 11px;
  font-weight: 600;
  color: #CBD5E1;
  line-height: 1.25;
}

.blog-as-channels {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-as-ch-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #E2E8F0;
}

.blog-as-ch-lbl .mi {
  width: 16px;
  height: 16px;
  color: #748FFC;
  display: inline-grid;
  place-items: center;
}

.blog-as-ch-lbl .mi svg {
  width: 16px;
  height: 16px;
  display: block;
}

.blog-ms-chans {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-as-channels .blog-ms-chans {
  margin-top: 0;
  justify-content: flex-start;
}

.blog-toc-list li a::before {
  display: none;
}

.blog-toc-list li a .mi {
  width: 13px;
  height: 13px;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.blog-toc-list li a .mi svg {
  width: 13px;
  height: 13px;
  display: block;
}

.blog-affiche-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-affiche-head .mi {
  width: 18px;
  height: 18px;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-affiche-head .mi svg {
  width: 18px;
  height: 18px;
  display: block;
}

.blog-sec-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-sec-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #EDF2FF;
  border: 1px solid #DBE4FF;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-sec-ico .mi {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.blog-sec-ico .mi svg {
  width: 16px;
  height: 16px;
  display: block;
}

.blog-callout-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--canvas);
  border: 1px solid var(--pgm-neutral-200);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--pgm-neutral-900);
}

.blog-callout-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #DBE4FF;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.blog-callout-ico .mi {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
}

.blog-callout-ico .mi svg {
  width: 14px;
  height: 14px;
  display: block;
}

.blog-table-chans {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-affiche-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.blog-affiche-tv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.blog-nav-lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-nav-lbl .mi {
  width: 15px;
  height: 15px;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
}

.blog-nav-lbl .mi svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* =========================================================
   Editorial Blog Article v2.4 — Rich HTML, Hero Figure & TOC
   ========================================================= */

.blog-hero-card h1,
.blog-index-hero h1,
.blog-article-header h1,
.blog-title {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ink);
}

.blog-lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 68ch;
}

.blog-section h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--ink);
}

.blog-hero-figure {
  margin: 6px 0 4px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, #E2E8F0);
  background: var(--surface, #F8FAFC);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.blog-hero-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  overflow: hidden;
  background: var(--surface-subtle, #F1F5F9);
}

.blog-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-hero-figure:hover .blog-hero-img {
  transform: scale(1.012);
}

.blog-hero-overlay-pills {
  display: none !important;
}

.blog-hero-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface, #F8FAFC);
  color: var(--muted, #475569);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  border-top: 1px solid var(--border-subtle, #E2E8F0);
}

.blog-hero-caption .mi {
  width: 15px;
  height: 15px;
  color: var(--primary, #1E3EB8);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}

.blog-hero-caption .mi svg {
  width: 14px;
  height: 14px;
}

/* Single Table of Contents per Viewport (Desktop Rail vs Tablet/Mobile Inline) */
@media (min-width: 1280px) {
  .blog-inline-toc {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .blog-toc-card {
    display: none !important;
  }
}

/* Inline Table of Contents */
.blog-inline-toc {
  background: var(--surface-muted, #F8FAFC);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-inline-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.blog-inline-toc-head .mi {
  width: 16px;
  height: 16px;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
}

.blog-inline-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 8px 14px;
}

.blog-inline-toc-list li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.07);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.blog-inline-toc-list li a:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(2px);
}

.blog-inline-toc-list .toc-num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--primary-soft, #EDF2FF);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Rich Section Prose & Inline Figures */
.blog-section-prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 68ch;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-2, #1E293B);
}

.blog-intro-prose {
  margin-bottom: 24px;
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--pgm-neutral-900);
}

.blog-article-sheet > .blog-intro-prose {
  margin-bottom: 4px;
}

.blog-intro-prose p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--pgm-neutral-900);
}

.blog-section-prose p,
.blog-section > p {
  margin: 0;
  max-width: 68ch;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-2, #1E293B);
}

.blog-section-prose strong,
.blog-section-prose b {
  color: var(--ink);
  font-weight: 700;
}

.blog-section-prose a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-section-prose h3,
.blog-section-prose h4 {
  margin: 8px 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.blog-section-prose ul,
.blog-section-prose ol {
  margin: 4px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 68ch;
}

.blog-section-prose li {
  line-height: 1.68;
  color: var(--ink-2, #1E293B);
}

.blog-section-prose blockquote {
  margin: 6px 0;
  padding: 14px 18px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--surface-muted, #F8FAFC);
  border-radius: 12px;
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
  max-width: 68ch;
}

.blog-figure,
.blog-section-prose figure {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pgm-neutral-200);
  background: var(--canvas);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.blog-inline-img,
.blog-section-prose figure img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: var(--pgm-neutral-100);
}

.blog-figure.is-portrait,
.blog-figure:has(.blog-inline-img.is-portrait) {
  background: var(--canvas);
  border: 1px solid var(--pgm-neutral-200);
  border-radius: 12px;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

img.blog-inline-img.is-portrait,
.blog-section-prose figure.is-portrait img,
.blog-section-prose figure img.is-portrait {
  width: auto;
  max-width: min(100%, 420px);
  height: auto;
  max-height: 520px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  background: transparent;
}

.blog-figcaption,
.blog-section-prose figcaption {
  padding: 10px 14px;
  background: var(--canvas);
  color: var(--pgm-neutral-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  border-top: 1px solid var(--pgm-neutral-200);
  box-sizing: border-box;
}

.blog-figure.is-portrait .blog-figcaption,
.blog-figure:has(.blog-inline-img.is-portrait) .blog-figcaption {
  align-self: stretch;
  width: auto;
  margin: 12px -16px 0;
  padding: 10px 16px;
}

/* Editorial Source & Context Note */
.blog-source-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid var(--border-subtle, #E2E8F0);
}

.blog-source-note-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--selected-surface, #EDF2FF);
  color: var(--action, #1E3EB8);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.blog-source-note-ico .mi,
.blog-source-note-ico .mi svg {
  width: 18px;
  height: 18px;
  display: block;
}

.blog-source-note-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-source-note-body strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.blog-source-note-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Blog Card & Featured Showcase Photo Support */
.blog-card-visual.is-photo,
.blog-card-visual.editorial-photo {
  aspect-ratio: 16 / 9;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #0F172A;
  border-bottom: 1px solid var(--border);
}

.blog-cv-photo,
img.blog-cv-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.35s ease;
}

.blog-guide-card:hover .blog-cv-photo,
.blog-guide-card:hover img.blog-cv-photo {
  transform: scale(1.03);
}

.blog-card-visual.editorial-placeholder {
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #EDF2FF;
  color: #0F172A;
  border-bottom: 1px solid #E2E8F0;
  display: grid;
  place-items: center;
}

.blog-cv-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #1E3EB8;
}

.blog-cv-placeholder-ico .mi,
.blog-cv-placeholder-ico .mi svg {
  width: 28px;
  height: 28px;
  display: block;
}

.blog-cv-placeholder-mark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0F172A;
}

.blog-card-visual.fixture,
.blog-card-visual.is-match {
  aspect-ratio: 16 / 9;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(155deg, #0F172A 0%, #162447 50%, #1E293B 100%);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  overflow: hidden;
}

.blog-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.blog-card-cat-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: #EDF2FF;
  color: #1E3EB8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.blog-card-read-time {
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.blog-card-date {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.blog-card-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1E3EB8;
}

.blog-feat-showcase {
  justify-content: center;
}

.blog-feat-board.is-article.has-photo,
.blog-feat-board.has-photo {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  border: 1px solid var(--pgm-neutral-200);
  background: var(--pgm-neutral-900);
}

.blog-feat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.4s ease;
}

.blog-feat-board.has-photo:hover .blog-feat-photo {
  transform: scale(1.02);
}

.blog-feat-photo-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.88) 75%, rgba(15, 23, 42, 0.96) 100%);
}

.blog-feat-photo-overlay strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.blog-feat-photo-overlay small {
  color: #E2E8F0;
  font-size: 12px;
  line-height: 1.4;
}

.blog-type-btn:focus-visible,
.blog-cat-pill:focus-visible,
.blog-share-btn:focus-visible,
.blog-page-btn:focus-visible,
a.blog-badge-cat:focus-visible,
a.blog-tag-chip:focus-visible,
.blog-card-action-btn:focus-visible,
.blog-inline-toc-list li a:focus-visible,
.blog-toc-list li a:focus-visible {
  outline: 2px solid var(--focus, #1E3EB8);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .blog-featured-guide {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-as-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .blog-page,
  .blog-article,
  .blog-article-sheet,
  .blog-index-hero,
  .blog-featured-guide,
  .blog-related-section,
  .blog-guide-card,
  .blog-meta-bar,
  .blog-dates-row,
  .blog-share-wrap,
  .blog-share-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .blog-hero-card,
  .blog-index-hero,
  .blog-featured-guide,
  .blog-article-sheet {
    padding: 18px 16px;
  }

  .blog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .blog-type-seg {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }

  .blog-type-btn {
    flex: 1 1 auto;
    min-height: 42px;
    height: auto;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .blog-inline-search {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
  }

  .blog-inline-search input {
    height: 44px;
    min-height: 44px;
    font-size: 14px;
  }

  .blog-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .blog-cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .blog-cat-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 42px;
    height: auto;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
  }

  .blog-share-btn {
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .blog-card-action-btn {
    min-height: 42px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
  }

  .blog-ch-tag,
  .blog-tag-chip {
    min-height: 40px;
    height: auto;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
  }

  .blog-inline-toc-list {
    grid-template-columns: 1fr;
  }

  .blog-inline-toc-list a,
  .blog-inline-toc-list li a {
    min-height: 42px;
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }

  .blog-faq-item summary {
    min-height: 44px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .blog-related-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .blog-card-visual.fixture,
  .blog-card-visual.is-match {
    padding: 14px 16px;
    gap: 8px;
  }

  .blog-section-prose,
  .blog-section-prose p,
  .blog-section > p {
    font-size: 16px;
    line-height: 1.65;
  }

  .blog-intro-prose,
  .blog-intro-prose p {
    font-size: 1rem;
    line-height: 1.72;
  }

  img.blog-inline-img.is-portrait,
  .blog-section-prose figure.is-portrait img,
  .blog-section-prose figure img.is-portrait {
    max-width: 100%;
    max-height: 440px;
  }

  .blog-table-card {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .blog-recap-table {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .blog-recap-table tbody th {
    width: 36%;
  }

  .breadcrumb-current {
    max-width: min(36ch, 78vw);
  }
}

@media (max-width: 390px) {
  .blog-index-hero,
  .blog-featured-guide,
  .blog-article-sheet {
    padding: 14px 12px;
  }

  .blog-guide-card-body {
    padding: 14px;
  }

  .blog-card-visual.fixture,
  .blog-card-visual.is-match {
    padding: 10px 12px;
    gap: 6px;
  }

  .blog-cv-matchup {
    gap: 8px;
    padding: 2px 0;
  }

  .blog-cv-team img,
  .blog-cv-team .blog-cv-crest-fb {
    width: 34px;
    height: 34px;
  }

  .blog-cv-team span,
  .blog-cv-team strong {
    font-size: 12.5px;
  }

  .blog-cv-center {
    padding: 5px 10px;
  }

  .blog-cv-center b {
    font-size: 14px;
  }

  .blog-as-metrics {
    grid-template-columns: 1fr;
  }

  .blog-recap-table th,
  .blog-recap-table td {
    padding: 9px 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero-img,
  .blog-cv-photo,
  .blog-feat-photo,
  .blog-guide-card,
  .blog-share-btn,
  .blog-inline-toc-list li a {
    transition: none !important;
    transform: none !important;
  }
}

/* Live Filter Hub (/en-direct) — Pitch Gazette Modern Streamlined Toolbar */
.live-filter-hub {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow);
}

.live-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.live-quick-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.live-qtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--chip-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

.live-qtab:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, .6);
}

.live-qtab.on {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(30, 62, 184, .24);
}

.live-qtab .mi {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
}

.live-qtab .mi svg {
  width: 14px;
  height: 14px;
  display: block;
}

.live-qtab b {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(15, 23, 42, .08);
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.live-qtab.on b {
  background: rgba(255, 255, 255, .22);
  color: #FFFFFF;
}

.live-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  justify-content: flex-end;
}

.live-filter-actions .btn {
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
}

.live-search-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.live-search-inline:focus-within {
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(30, 62, 184, .12);
}

.live-search-inline .mi {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}

.live-search-inline .mi svg {
  width: 14px;
  height: 14px;
  display: block;
}

.live-search-inline input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  width: 100%;
}

.live-reset-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--red-bg);
  border: 1px solid #FECACA;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.live-reset-btn:hover {
  background: #FEE2E2;
}

.live-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
}

.live-filter-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  min-width: 110px;
}

.live-filter-lbl .mi {
  width: 13px;
  height: 13px;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
}

.live-filter-lbl .mi svg {
  width: 13px;
  height: 13px;
  display: block;
}

.live-pills-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.live-pills-scroll::-webkit-scrollbar {
  display: none;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 99px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  color: var(--chip-ink);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all .14s;
}

.live-pill:hover {
  border-color: #93C5FD;
  background: #EFF6FF;
  color: var(--primary);
}

.live-pill.on {
  background: #EFF6FF;
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(29, 78, 216, .14);
}

.live-pill img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

.live-pill img.live-ch-logo {
  width: 22px;
  height: 14px;
  border-radius: 3px;
}

.live-pill b {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
}

.live-pill.on b {
  color: var(--primary);
}

@media (max-width: 980px) {
  .blog-as-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .live-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .live-pills-scroll {
    width: 100%;
  }

  .live-filter-actions {
    width: 100%;
    justify-content: stretch;
  }

  .live-search-inline {
    max-width: none;
  }

  .blog-as-top,
  .blog-as-channels {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .live-quick-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .live-quick-tabs::-webkit-scrollbar {
    display: none;
  }

  .live-qtab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .live-filter-actions {
    flex-wrap: wrap;
  }

  .live-search-inline {
    min-width: 0;
    flex: 1 1 180px;
  }
}

@media (max-width: 520px) {
  .blog-as-metrics {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Enhanced Match Header & Tactical Pitch Lineups (#lineups)
   ========================================================================== */

.match-header-scorers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--chip-ink);
}

.mh-scorers-col {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.mh-scorers-col.is-left {
  justify-content: flex-end;
  text-align: right;
}

.mh-scorers-col.is-right {
  justify-content: flex-start;
  text-align: left;
}

.mh-scorer-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--ink);
}

.mh-scorer-item em {
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
}

.mh-scorers-ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-scorers-ball svg {
  width: 13px;
  height: 13px;
}

.match-header-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mh-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-ink);
}

.mh-info-pill .mi {
  width: 14px;
  height: 14px;
  color: var(--muted);
  display: inline-flex;
}

.mh-info-pill .mi svg {
  width: 14px;
  height: 14px;
}

/* Lineups Toolbar */
.lineups-toolbar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lineups-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.lineup-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.lineup-status-pill.is-probable {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.28);
}

.lineup-status-pill .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.lineup-status-pill.is-probable .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.lineup-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.legend-chip .tactical-pill-svg {
  width: 14px;
  height: 14px;
  color: var(--ink);
}

.lineup-team-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.lineup-team-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.lineup-team-tab:hover {
  border-color: var(--accent);
  background: #fff;
}

.lineup-team-tab.on {
  background: #181a1f;
  color: #ffffff;
  border-color: #181a1f;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

.lineup-tab-form {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
}

.lineup-team-tab.on .lineup-tab-form {
  background: rgba(255, 255, 255, 0.15);
  color: #e5e7eb;
}

/* Tactical Team Showcase Card */
.lineups-teams-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tactical-team-card {
  background: #16181c;
  color: #ffffff;
  border-radius: 20px;
  border: 1px solid #262930;
  overflow: hidden;
  box-shadow: 0 14px 34px -10px rgba(9, 13, 22, 0.35);
}

.tactical-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 22px;
  background: #14161a;
  border-bottom: 1px solid #252830;
}

.tactical-team-id {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tactical-team-id .slot.crest {
  width: 44px;
  height: 44px;
  background: #22252b;
  border-radius: 12px;
  padding: 5px;
  border: 1px solid #2f333c;
}

.tactical-team-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tactical-team-name-row h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.tactical-team-name-row h2 a {
  color: #ffffff;
  text-decoration: none;
}

.tactical-team-name-row h2 a:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.tactical-formation-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #252932;
  border: 1px solid #353a46;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.tactical-team-sub {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.tactical-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tactical-avg-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 12px;
  background: #1e2127;
  border: 1px solid #2d313a;
}

.tactical-avg-box small {
  font-size: 11.5px;
  font-weight: 700;
  color: #9ca3af;
}

.tactical-manager-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: #1e2127;
  border: 1px solid #2d313a;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tactical-manager-chip:hover {
  background: #252930;
  border-color: #4b5563;
}

.tactical-manager-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #32363c;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tactical-manager-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tactical-manager-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tactical-manager-meta small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.tactical-manager-meta strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #f3f4f6;
}

/* Dark Tactical Pitch Canvas */
.tactical-pitch {
  position: relative;
  background: #1c1e22;
  padding: 36px 20px 26px;
  min-height: 640px;
  overflow: hidden;
}

.tactical-pitch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.tactical-pitch-rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 576px;
  max-width: 650px;
  margin: 0 auto;
  gap: 20px;
}

.tactical-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  gap: 6px;
}

.tactical-row.is-gk-row {
  margin-top: 6px;
}

/* Individual Player Node on Pitch */
.tactical-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  flex: 1 1 0;
  min-width: 84px;
  max-width: 156px;
  position: relative;
  transition: filter 0.15s ease;
}

.tactical-player:hover .tactical-avatar-circle {
  box-shadow: 0 0 0 2.5px #60a5fa, 0 8px 18px rgba(0, 0, 0, 0.5);
}

.tactical-player:hover .tactical-name {
  color: #93c5fd;
}

.tactical-avatar-box {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactical-avatar-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #32363c;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.36);
  transition: box-shadow 0.15s ease;
}

.tactical-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.tactical-silhouette {
  width: 78%;
  height: 78%;
  margin-top: 10px;
}

/* Rating Badge (Top-Right of Avatar) */
.tactical-rating {
  position: absolute;
  top: -5px;
  right: -15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7.5px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.tactical-rating.is-avg {
  position: static;
  box-shadow: none;
  font-size: 12px;
}

.tactical-rating.is-high,
.bench-rating.is-high {
  background: #23d160;
  color: #061309;
}

.tactical-rating.is-mid,
.bench-rating.is-mid {
  background: #f59e0b;
  color: #160c02;
}

.tactical-rating.is-low,
.bench-rating.is-low {
  background: #f97316;
  color: #160702;
}

/* Stat / Event Pills on Avatar (Bottom-Left & Bottom-Right) */
.tactical-pill {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: #1c1e22;
  border: 1.5px solid #393e47;
  color: #ffffff;
  border-radius: 999px;
  padding: 1.5px 6.5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.tactical-pill.is-left {
  bottom: -3px;
  left: -13px;
}

.tactical-pill.is-right {
  bottom: -3px;
  right: -13px;
}

.tactical-pill.is-top-left {
  top: -5px;
  left: -12px;
  padding: 2px 5px;
}

.tactical-pill.is-inline {
  position: static;
  box-shadow: none;
  background: #23272f;
}

.tactical-pill-svg {
  width: 12.5px;
  height: 12.5px;
  flex-shrink: 0;
  display: block;
}

.pitch-card-ico {
  display: inline-block;
  width: 8px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pitch-card-ico.is-yellow {
  background: #facc15;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.pitch-card-ico.is-red {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Player Caption Below Avatar */
.tactical-caption {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 152px;
  line-height: 1.25;
}

.tactical-cap {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #111827;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tactical-num {
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.tactical-name {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Substitutes & Absences Bench Area */
.tactical-bench-wrap {
  background: #14161a;
  border-top: 1px solid #252830;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bench-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bench-heading {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.bench-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #22262e;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 800;
}

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

.bench-grid.is-unused-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tactical-bench-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #1c1f25;
  border: 1px solid #2a2e37;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.tactical-bench-card:hover {
  background: #232730;
  border-color: #4b5563;
  transform: translateY(-1px);
}

.tactical-bench-card.is-played {
  background: #1d2229;
  border-color: #323946;
}

.bench-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.bench-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #32363c;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bench-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bench-rating {
  position: absolute;
  top: -4px;
  right: -10px;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.absence-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1c1f25;
  border: 1.5px solid #374151;
  color: #f87171;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bench-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bench-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bench-num {
  color: #9ca3af;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.bench-card-title strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bench-card-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tactical-bench-card.is-played .bench-card-sub {
  color: #86efac;
}

.bench-card-sub.is-reason {
  color: #fca5a5;
}

.bench-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .tactical-pitch {
    padding: 26px 8px 20px;
    min-height: 540px;
  }

  .tactical-pitch-rows {
    min-height: 490px;
    gap: 14px;
  }

  .tactical-avatar-box,
  .tactical-avatar-circle {
    width: 52px;
    height: 52px;
  }

  .tactical-rating {
    font-size: 11px;
    padding: 1.5px 6px;
    right: -12px;
  }

  .tactical-pill {
    font-size: 10px;
    padding: 1px 5px;
  }

  .tactical-num,
  .tactical-name {
    font-size: 12px;
  }

  .tactical-player {
    min-width: 68px;
  }

  .bench-grid,
  .bench-grid.is-unused-grid {
    grid-template-columns: 1fr;
  }

  .match-header-scorers {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mh-scorers-col.is-left,
  .mh-scorers-col.is-right {
    justify-content: center;
    text-align: center;
  }

  .mh-scorers-ball {
    margin: 0 auto;
  }
}