.live-shell {
  --live-home: var(--accent-sky);
  --live-away: var(--lay);
  display: grid;
  gap: 1rem;
  padding: 0 1.5rem 2rem;
}

.live-section-heading,
.live-stats-teams,
.live-status-meta,
.live-alert {
  display: flex;
  align-items: center;
}

.live-eyebrow {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--brand-subtle);
  font-size: var(--font-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-eyebrow svg { width: 1rem; height: 1rem; }

.live-header-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
}

.live-header-team {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  color: var(--text-primary);
  font-family: Alexandria, sans-serif;
  font-size: var(--font-title);
  font-weight: 800;
}

.live-header-team--home { justify-content: flex-end; text-align: right; }
.live-header-team--away { justify-content: flex-start; text-align: left; }

.live-header-team span {
  overflow-wrap: anywhere;
}

.live-header-score {
  min-width: 4.5rem;
  color: var(--text-primary);
  font-family: Geist, sans-serif;
  font-size: var(--font-display);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: 1;
  white-space: nowrap;
}

.live-header-markets { width: 100%; max-width: none; }
.live-header-markets > .smi-match-odds-head,
.live-header-markets > .board-odds { grid-template-columns: repeat(7, minmax(4.4rem, 1fr)); }
.live-header-markets .smi-match-odds-head span { white-space: nowrap; }

.live-header-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.live-header-odds > div {
  display: grid;
  gap: .2rem;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface-raised);
  padding: .7rem;
}

.live-header-odds span {
  color: var(--text-caption);
  font-size: var(--font-micro);
  font-weight: 700;
  text-transform: uppercase;
}

.live-header-odds strong {
  color: var(--text-primary);
  font-family: Geist, sans-serif;
  font-size: var(--font-headline);
  font-weight: 800;
}

.live-header-odds-state {
  color: var(--text-caption);
  font-size: var(--font-caption);
}

.live-header-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  text-align: left;
}

.live-status-meta {
  align-items: flex-end;
  flex-direction: column;
  gap: .35rem;
}

.live-state-pill {
  border: 1px solid var(--accent-teal-bd);
  border-radius: 6px;
  background: var(--status-success-bg);
  color: var(--status-success);
  padding: .35rem .7rem;
  font-size: var(--font-micro);
  font-weight: 800;
}

.live-state-pill.is-loading { color: var(--brand-subtle); }
.live-state-pill .live-state-loader { margin-right: .4rem; vertical-align: -2px; }
.live-state-pill.is-finished { color: var(--text-secondary, #64748b); }
.live-update-label, .live-coverage-label { color: var(--text-caption); font-size: var(--font-caption); }

.live-alert {
  gap: .75rem;
  border: 1px solid var(--brand-main-bd);
  border-radius: 6px;
  background: var(--brand-main-bg);
  padding: .75rem 1rem;
}

.live-alert svg { width: 1.15rem; flex: 0 0 auto; }
.live-alert div { display: grid; gap: .1rem; }
.live-alert strong { font-size: var(--font-body); }
.live-alert span { color: var(--text-caption); font-size: var(--font-caption); }
.live-alert--partial { border-color: var(--accent-sky-bd); background: var(--accent-sky-bg); }
.live-alert--error { border-color: var(--accent-coral-bd); background: var(--status-error-bg); }
.is-hidden { display: none !important; }

.live-tab-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface-raised);
  padding: .3rem;
  scrollbar-width: thin;
}

.live-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(8.5rem, 1fr));
  gap: .3rem;
  min-width: max-content;
}

.live-tab {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: .65rem 1rem;
  color: var(--text-caption);
  font-size: var(--font-caption);
  font-weight: 750;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.live-tab:hover,
.live-tab:focus-visible {
  border-color: var(--brand-main-bd);
  color: var(--brand-main);
}

.live-tab.is-active {
  border-color: var(--brand-main-bd);
  background: var(--brand-main-fill);
  color: var(--brand-on-main);
}

.live-panel { min-width: 0; }
.live-panel[hidden] { display: none; }

.live-section { display: grid; gap: 1rem; }
.live-section-heading { justify-content: space-between; gap: 1rem; padding: .2rem .1rem; }
.live-section-heading h2 { margin-top: .12rem; font-family: Alexandria, sans-serif; font-size: var(--font-title); font-weight: 800; }
.live-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.live-match-grid { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(24rem, 1.1fr); gap: 1rem; align-items: stretch; }
.live-match-grid > .dash-card { min-height: 28rem; }
.live-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-default, #e1e6ef); padding-bottom: .75rem; }
.live-card-heading h3 { margin-top: .12rem; font-family: Alexandria, sans-serif; font-size: var(--font-title); font-weight: 800; }
.live-timeline-scroll { max-height: 36rem; overflow-y: auto; scrollbar-width: thin; }
.live-team-card, .live-timeline-card, .live-stats-card, .live-chart-card { padding: 1rem 1.1rem; }
.live-team-card h3 { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-family: Alexandria, sans-serif; font-size: var(--font-title); font-weight: 800; }
.live-team-card h3 small { color: var(--text-caption); font-family: Geist, sans-serif; font-size: var(--font-caption); font-weight: 500; }
.live-period-list { display: grid; gap: .65rem; }
.live-period-row > div:first-child { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; font-family: Geist, sans-serif; font-size: var(--font-body); }
.live-period-row > div:first-child span:first-child { color: var(--live-home); font-weight: 800; }
.live-period-row > div:first-child span:last-child { color: var(--live-away); text-align: right; font-weight: 800; }
.live-period-row strong { color: var(--text-secondary, #64748b); font-weight: 650; }
.live-comparison-bar { display: flex; gap: 2px; height: .38rem; margin-top: .25rem; overflow: hidden; border-radius: 6px; background: var(--bg-surface-raised); }
.live-comparison-bar span { min-width: 0; border-radius: 6px; }
.live-comparison-bar .is-home { background: var(--live-home); }
.live-comparison-bar .is-away { margin-left: auto; background: var(--live-away); }
.live-timeline { display: grid; gap: .45rem; margin-top: .75rem; }
.live-timeline-event { display: grid; grid-template-columns: 3.5rem 1.65rem 1fr; align-items: center; gap: .6rem; border-top: 1px solid var(--border-default, #e1e6ef); border-left: 3px solid transparent; padding: .65rem .35rem .35rem .55rem; font-size: var(--font-body); }
.live-timeline-event time { color: var(--brand-subtle); font-family: Geist, monospace; font-weight: 800; }
.live-event-icon { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: var(--bg-surface-raised); font-size: var(--font-micro); font-weight: 850; }
.live-event--goal { border-left-color: var(--status-success); background: var(--status-success-bg); }
.live-event--card { border-left-color: var(--brand-main); }
.live-event--substitution { border-left-color: var(--accent-teal); background: var(--accent-teal-bg); }
.live-event--shot { border-left-color: var(--accent-sky); background: var(--accent-sky-bg); }
.live-event--set-piece { border-left-color: var(--brand-main-bd); }
.live-event--period { border-left-color: var(--border-default, #e1e6ef); color: var(--text-secondary, #64748b); }
.live-event--commentary { border-left-color: var(--border-default, #e1e6ef); }
.live-commentary-copy { line-height: 1.45; }
.live-empty { width: 100%; color: var(--text-secondary, #64748b); padding: 1rem 0; text-align: center; font-size: var(--font-body); }


.live-stats-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; border-bottom: 1px solid var(--border-default, #e1e6ef); padding-bottom: .75rem; text-align: center; font-size: var(--font-body); }
.live-stats-teams strong:first-child { text-align: left; color: var(--live-home); }
.live-stats-teams strong:last-child { text-align: right; color: var(--live-away); }
.live-stat-row { display: grid; grid-template-columns: 4rem minmax(7rem, 1fr) 4rem; align-items: center; gap: .75rem; padding: .65rem 0; }
.live-stat-row > strong { font-family: Geist, monospace; font-size: var(--font-body); }
.live-stat-row > strong:last-child { text-align: right; }
.live-stat-center { display: grid; gap: .3rem; text-align: center; }
.live-stat-center span { color: var(--text-caption); font-size: var(--font-caption); font-weight: 650; }
.live-stat-bars { display: flex; gap: 2px; height: .38rem; overflow: hidden; border-radius: 6px; background: var(--bg-surface-raised); }
.live-stat-bars i:first-child { background: var(--live-home); }
.live-stat-bars i:last-child { background: var(--live-away); }

.live-market-controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.live-market-controls button { border: 1px solid var(--brand-main-bd); border-radius: 6px; background: var(--bg-surface, #fff); padding: .45rem .85rem; color: var(--brand-subtle); font-size: var(--font-body); font-weight: 750; transition: background .15s ease, color .15s ease; }
.live-market-controls button.is-active { background: var(--brand-main-fill); color: var(--brand-on-main); }
.live-line-controls { display: flex; flex-wrap: wrap; gap: .35rem; }
.live-line-controls button { border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-surface, #fff); padding: .28rem .7rem; color: var(--text-caption); font-size: var(--font-caption); font-weight: 750; }
.live-line-controls button.is-active { border-color: var(--brand-main); background: var(--brand-main-bg); color: var(--brand-main); }
.live-odds-context { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-default, #e1e6ef); padding-bottom: .75rem; }
.live-odds-context strong { font-family: Alexandria, sans-serif; font-size: var(--font-title); }
.live-odds-context span { color: var(--text-caption); font-size: var(--font-caption); }
.live-chart { position: relative; min-height: 18rem; }
.live-chart svg { display: block; width: 100%; height: auto; }
.live-chart-tip { position: absolute; z-index: 3; display: none; min-width: 9rem; pointer-events: none; border: 1px solid var(--border-default, #e1e6ef); border-radius: 8px; background: var(--bg-surface, #fff); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: .45rem .65rem; }
.live-chart-tip.is-visible { display: grid; gap: .28rem; }
.live-chart-tip time { color: var(--text-caption); font-size: var(--font-caption); }
.live-chart-tip-row { display: flex; align-items: center; gap: .4rem; color: var(--text-primary); font-size: var(--font-caption); }
.live-chart-tip-row i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--series-color); }
.live-chart-tip-row strong { margin-left: auto; font-family: Geist, monospace; font-size: var(--font-body); }
.live-chart-hover { stroke: var(--text-secondary, #64748b); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.live-chart-hover-dot { pointer-events: none; }
.live-chart-grid { stroke: var(--border-default, #dbe1ee); stroke-width: 1; }
.live-chart-band { fill: var(--bg-surface-raised); cursor: pointer; }
.live-chart-line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.live-chart-label { fill: var(--text-secondary, #64748b); font: 600 13px Alexandria, sans-serif; }
.live-chart-price { fill: var(--text-primary); font: 700 14px Geist, sans-serif; }
.live-chart-kickoff { stroke: var(--text-primary, #0f172a); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.live-chart-kickoff-label { fill: var(--text-primary, #0f172a); font: 700 11px Alexandria, sans-serif; }
.live-chart-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .55rem; }
.live-chart-legend button { display: inline-flex; align-items: center; border: 1px solid var(--border-default, #e1e6ef); border-radius: 999px; background: var(--bg-surface, #fff); padding: .28rem .7rem; color: var(--text-caption); font-size: var(--font-caption); font-weight: 750; cursor: pointer; }
.live-chart-legend button::before { display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: var(--series-color, transparent); content: ''; }
.live-chart-legend button[data-odds-selection=""]::before { display: none; }
.live-chart-legend button.is-active { border-color: var(--brand-main); background: var(--brand-main-bg); color: var(--brand-main); }
.live-chart-message { margin: -2rem 0 1rem; color: var(--text-caption); text-align: center; font-size: var(--font-caption); }
.live-odds-table { display: grid; margin-top: 1rem; overflow: hidden; border: 1px solid var(--border-default, #e1e6ef); border-radius: 10px; }
.live-odd-head,
.live-odd-row { display: grid; grid-template-columns: minmax(6.5rem, 1.15fr) repeat(4, minmax(4.6rem, .72fr)) 5.4rem; column-gap: .85rem; align-items: center; }
.live-odd-head { grid-template-rows: auto auto; row-gap: .15rem; background: var(--bg-surface-raised); padding: .55rem .9rem .45rem; color: var(--text-caption); font-size: var(--font-micro); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.live-odd-head-back,
.live-odd-head-lay { grid-row: 1; text-align: center; }
.live-odd-head-back { grid-column: 2 / 4; color: var(--accent-sky); }
.live-odd-head-lay { grid-column: 4 / 6; color: var(--lay); }
.live-odd-head-label { grid-row: 2; text-align: right; }
.live-odd-head-label:nth-child(3) { text-align: left; }
.live-odd-row { padding: .75rem .9rem .7rem; border-top: 1px solid var(--border-default, #e1e6ef); font-size: var(--font-body); }
.live-odd-selection { font-family: Alexandria, sans-serif; }
.live-odd-metric { display: grid; justify-items: end; gap: .05rem; }
.live-odd-metric small { display: none; }
.live-odd-metric strong { font-family: Geist, monospace; font-variant-numeric: tabular-nums; }
.live-odd-metric--back strong { color: var(--accent-sky); }
.live-odd-metric--lay strong { color: var(--lay); }
.live-odd-metric.is-empty strong { color: var(--text-caption); font-weight: 650; }
.live-odd-time { color: var(--text-caption); text-align: right; font-family: Geist, monospace; font-size: var(--font-caption); font-variant-numeric: tabular-nums; }
.live-odd-ladder { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: .45rem; }
.live-odd-ladder-side--back { grid-column: 2 / 4; }
.live-odd-ladder-side--lay { grid-column: 4 / 6; }
.live-odd-ladder-side { display: grid; gap: .28rem; min-width: 0; }
.live-odd-ladder-side > small { color: var(--text-caption); font-size: var(--font-micro); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.live-odd-ladder-side--lay { justify-items: end; }
.live-odd-ladder-prices { display: flex; flex-wrap: wrap; gap: .35rem; }
.live-odd-ladder-side--lay .live-odd-ladder-prices { justify-content: flex-end; }
.live-odd-ladder-chip { display: grid; justify-items: center; min-width: 3.5rem; border-radius: 6px; padding: .28rem .5rem .22rem; line-height: 1.15; }
.live-odd-ladder-chip strong { font-family: Geist, monospace; font-size: var(--font-caption); font-variant-numeric: tabular-nums; }
.live-odd-ladder-chip small { color: var(--text-secondary, #64748b); font-size: var(--font-micro); font-weight: 650; }
.live-odd-ladder-side--back .live-odd-ladder-chip { background: var(--accent-sky-bg); color: var(--accent-sky); }
.live-odd-ladder-side--lay .live-odd-ladder-chip { background: var(--lay-bg); color: var(--lay); }
.live-odd-ladder-empty { color: var(--text-caption); font-size: var(--font-caption); }

.live-player-team { padding: 1rem 1.1rem; }
.live-player-team-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--border-default, #e1e6ef); padding-bottom: .7rem; }
.live-player-team-heading h3 { font-family: Alexandria, sans-serif; font-size: var(--font-title); font-weight: 800; }
.live-player-team-heading div > span { color: var(--text-caption); font-size: var(--font-caption); }
.live-lineup-status { border: 1px solid var(--accent-teal-bd); border-radius: 6px; background: var(--accent-teal-bg); color: var(--status-success); padding: .25rem .55rem; font-size: var(--font-micro); font-weight: 800; }
.live-lineup-group { margin-top: .75rem; overflow: hidden; border: 1px solid var(--border-default, #e1e6ef); border-radius: 6px; padding: .65rem .75rem .15rem; }
.live-lineup-group--starter { border-color: var(--accent-sky-bd); background: var(--accent-sky-bg); }
.live-lineup-group--reserve { background: var(--bg-surface-raised); }
.live-lineup-group-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .4rem; }
.live-lineup-group-heading h4 { font-family: Alexandria, sans-serif; font-size: var(--font-caption); font-weight: 800; color: var(--text-caption); }
.live-lineup-group-heading span { border-radius: 6px; background: var(--bg-surface, #fff); padding: .2rem .5rem; color: var(--text-secondary, #64748b); font-size: var(--font-micro); font-weight: 800; text-transform: uppercase; }
.live-player-list { display: grid; }
.live-player-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: .7rem; border-top: 1px solid var(--border-default, #e1e6ef); padding: .55rem 0; }
.live-player-number { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: var(--bg-surface, #fff); color: var(--brand-subtle); font-family: Geist, monospace; font-size: var(--font-micro); font-weight: 800; }
.live-player-performance { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; text-align: right; }
.live-player-rating { flex: 0 0 auto; border-radius: 6px; background: var(--status-success); color: var(--text-inverse); padding: .3rem .45rem; text-align: center; font-family: Geist, monospace; font-weight: 800; }
.live-player-row strong { display: block; font-size: var(--font-body); }
.live-player-row span { color: var(--text-caption); font-size: var(--font-caption); }

@media (max-width: 767px) {
  .live-shell { padding-inline: 0; }
  .live-match-header { padding-inline: 1rem; }
  .live-header-teams { gap: .5rem; }
  .live-header-team { flex-direction: column; gap: .35rem; }
  .live-header-team--home,
  .live-header-team--away { text-align: center; }
  .live-header-team--away span { order: 2; }
  .live-header-team .smi-match-team-logo { height: 2.75rem; width: 2.75rem; }
  .live-header-score { min-width: 4.5rem; }
  .live-header-markets { overflow-x: auto; }
  .live-header-odds { gap: .4rem; }
  .live-header-odds > div { padding: .55rem .25rem; }
  .live-header-odds span { font-size: var(--font-micro); }
  .live-header-odds strong { font-size: var(--font-title); }
  .live-tab-scroll { white-space: nowrap; }
  .live-tabs { display: flex; width: max-content; }
  .live-tab { min-width: 9rem; }
  .live-header-footer { align-items: flex-end; }
  .live-status-meta { align-items: flex-start; }
  .live-two-columns, .live-match-grid { grid-template-columns: 1fr; }
  .live-section-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .live-chart-card { padding-inline: .65rem; }
  .live-odds-context { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .live-odd-head { display: none; }
  .live-odd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .45rem; }
  .live-odd-selection, .live-odd-time, .live-odd-ladder { grid-column: 1 / -1; text-align: left; }
  .live-odd-metric { justify-items: start; }
  .live-odd-metric small { display: block; color: var(--text-caption); font-size: var(--font-micro); font-weight: 750; }
  .live-odd-ladder { grid-template-columns: 1fr; }
  .live-odd-ladder-side--back,
  .live-odd-ladder-side--lay { grid-column: 1; }
  .live-odd-ladder-side--lay { justify-items: start; }
  .live-odd-ladder-side--lay .live-odd-ladder-prices { justify-content: flex-start; }
  .live-player-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .live-player-performance { grid-column: 2; justify-content: flex-start; text-align: left; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .live-match-grid { grid-template-columns: 1fr; }
}