/* ============================================================
   vsin_stats.css — VSiN Statistical Platform Design System
   Shared across all sports and stat pages
   ============================================================ */

:root {
  --vs-font-body: 'Montserrat', sans-serif;
  --vs-font-display: 'Oswald', sans-serif;
  --vs-bg: #ffffff;
  --vs-surface: #f7f8fa;
  --vs-border: #e2e5ea;
  --vs-border-light: #eef0f3;
  --vs-text-primary: #1a1d23;
  --vs-text-secondary: #5a6070;
  --vs-text-muted: #8b90a0;
  --vs-vsinred: #ba3626;
  --vs-vsinred-dark: #962d1f;
  --vs-vsinred-light: #fde8e8;
  --vs-accent: #ba3626;
  --vs-row-alt: #fafbfc;
  --vs-header-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  --vs-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* --- Container --- */
.vs-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--vs-font-body);
  color: var(--vs-text-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.03em;
}
.vs-container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--vs-font-body);
  color: var(--vs-text-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.03em;
}

/* --- Header --- */
.vs-header {
  background: var(--vs-header-gradient);
  color: #ffffff;
  padding: 24px 28px;
  border-bottom: 3px solid var(--vs-vsinred);
}
.vs-title-block { display: flex; flex-direction: column; gap: 4px; }
.vs-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
  font-family: var(--vs-font-display);
  text-transform: uppercase;
  color: #ffffff !important;
}
.vs-subtitle {
  font-size: 13px;
  margin: 0;
  opacity: 0.7;
  font-weight: 400;
  font-family: var(--vs-font-body);
  color: #ffffff !important;
}

/* --- Table Wrapper --- */
.vs-table-wrap {
  overflow-x: auto;
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-top: none;
  box-shadow: var(--vs-shadow-md);
}

/* --- Toolbar --- */
.vs-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--vs-border);
  display: flex;
  align-items: center;
}
.vs-search {
  font-family: var(--vs-font-body);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #000000;
  width: 220px;
  outline: none;
}
.vs-search:focus { border-color: var(--vs-vsinred); }
.vs-search::placeholder { color: #aaa; }

/* --- Table --- */
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  table-layout: fixed;
}

/* Column group headers */
.vs-col-group th {
  padding: 8px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: #1a1d23;
  border-bottom: none;
  text-align: center;
  font-family: var(--vs-font-body);
}
.col-group-header { position: relative; }
.col-group-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: rgba(255,255,255,0.2);
}

/* Column labels */
.vs-col-labels th {
  padding: 6px 8px 10px;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000000;
  background: #e8eaed;
  border-bottom: 2px solid var(--vs-border);
  text-align: center;
  font-family: var(--vs-font-body) !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  line-height: 1.4 !important;
}
.vs-col-labels th:hover { color: var(--vs-vsinred); }
.vs-col-labels th.sort-asc::after { content: ' \25B2'; font-size: 9px; }
.vs-col-labels th.sort-desc::after { content: ' \25BC'; font-size: 9px; }
.vs-table td.col-sorted { background-color: #eef2fb; }

.th-team { text-align: left !important; width: 200px; padding-left: 16px !important; }
.th-league { width: 50px; }
.th-value { width: 70px; }
.th-rank { width: 50px; }

/* --- Body rows --- */
.vs-table tbody tr { border-bottom: 1px solid var(--vs-border-light); }
.vs-table tbody tr:last-child { border-bottom: none; }
.vs-table tbody tr.row-alt { background: var(--vs-row-alt); }

/* --- Cells --- */
.vs-table td { padding: 9px 8px; vertical-align: middle; font-size: 13px !important; line-height: 1.4 !important; }

.cell-team {
  padding-left: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px !important;
}
.cell-team a { color: var(--vs-text-primary); text-decoration: none; }
.cell-team a:hover { color: var(--vs-vsinred); text-decoration: underline; }
.team-logo { flex-shrink: 0; }
.cell-league { text-align: center; }
.vs-table .cell-value {
  text-align: center;
  font-weight: 500;
  font-family: var(--vs-font-display) !important;
  font-size: 15px !important;
  color: var(--vs-text-primary);
  letter-spacing: 0.3px;
  line-height: 1.4 !important;
}
.vs-table .cell-value .rank-badge {
  display: block;
  width: auto;
  margin: 0 2px;
}
.cell-pointed { border-left: 1px solid var(--vs-border-light); }
.cell-rank { text-align: center; padding-left: 4px; padding-right: 12px; }

/* --- Badges --- */
.league-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: 0.3px;
  font-family: var(--vs-font-body);
  border: 1px solid #d0d0d0;
}
.league-al { background: #ffffff; color: #000000; }
.league-nl { background: #ffffff; color: #000000; }

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  font-weight: 500;
  min-width: 48px;
  height: 26px;
  padding: 0 6px;
  font-family: var(--vs-font-display) !important;
  background: #ffffff;
  color: #000000;
  border: 1px solid #d0d0d0;
}

/* Dark badges (white text) */
.rank-good { background: #4b8119; color: #ffffff; border-color: #d0d0d0; }
.rank-bad { background: #dc1414; color: #ffffff; border-color: #d0d0d0; }
.rank-neutral { background: #999999; color: #ffffff; border-color: #d0d0d0; }
.rank-over { background: #e6550d; color: #ffffff; border-color: #d0d0d0; }
.rank-under { background: #3182bd; color: #ffffff; border-color: #d0d0d0; }

/* Light badges (black text) */
.rank-good-light { background: #e4f6dc; color: #000000; border-color: #d0d0d0; }
.rank-bad-light { background: #fde8e8; color: #000000; border-color: #d0d0d0; }
.rank-neutral-light { background: #efefef; color: #000000; border-color: #d0d0d0; }
.rank-over-light { background: #fef0e6; color: #000000; border-color: #d0d0d0; }
.rank-under-light { background: #e4f0fa; color: #000000; border-color: #d0d0d0; }
.rank-slate { background: #6b7280; color: #ffffff; border-color: #d0d0d0; }

/* --- Footer / Pagination --- */
.vs-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--vs-border);
  font-family: var(--vs-font-body);
  font-size: 12px;
}
.vs-page-controls { display: flex; align-items: center; gap: 4px; }
.vs-page-btn {
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
}
.vs-page-btn:hover { border-color: var(--vs-vsinred); color: var(--vs-vsinred); }
.vs-page-btn.active { background: var(--vs-vsinred); color: #ffffff; border-color: var(--vs-vsinred); }
.vs-page-btn:disabled { opacity: 0.4; cursor: default; }
.vs-page-btn:disabled:hover { border-color: #d0d0d0; color: #000000; }

/* --- Button Bar --- */
.vs-btn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--vs-border);
  border-top: none;
}
.vs-btn {
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.vs-btn:hover {
  border-color: var(--vs-vsinred);
  color: var(--vs-vsinred);
  text-decoration: none;
}
.vs-btn-active {
  background: var(--vs-vsinred);
  color: #ffffff !important;
  border-color: var(--vs-vsinred);
}
.vs-btn-active:hover {
  background: var(--vs-vsinred);
  color: #ffffff !important;
  border-color: var(--vs-vsinred);
}

/* --- Key / Legend --- */
.vs-key {
  padding: 12px 16px;
  font-family: var(--vs-font-body);
  font-size: 11px;
  color: var(--vs-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--vs-border);
  background: #ffffff;
}
.vs-key b { color: var(--vs-text-primary); font-weight: 700; margin-right: 2px; }
.vs-key-item { white-space: nowrap; }
.vs-key-divider { width: 1px; height: 12px; background: #d0d0d0; }

/* --- Frozen team column --- */
.vs-table thead th:first-child,
.vs-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
}
.vs-table tbody tr.row-alt td:first-child { background: var(--vs-row-alt); }
.vs-table thead th:first-child { z-index: 3; }
.vs-col-labels th:first-child { background: #e8eaed !important; }
.vs-table thead .vs-col-group th:first-child { background: #1a1d23 !important; }

/* --- Game Card Grid --- */
.vs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 16px 0;
}

/* --- Game Card --- */
.vs-game-card {
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  box-shadow: var(--vs-shadow-md);
  font-family: var(--vs-font-body);
  letter-spacing: -0.03em;
}
.vs-card-header {
  background: linear-gradient(135deg, #f8faff, #eef2fb);
  color: #1a1d23;
  padding: 10px 14px;
  border-bottom: 2px solid var(--vs-vsinred);
  text-align: center;
}
.vs-card-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}
.vs-card-matchup a { color: var(--vs-text-primary) !important; text-decoration: none; }
.vs-card-matchup a:hover { color: var(--vs-vsinred) !important; text-decoration: underline; }
.vs-card-vs { font-size: 11px; font-weight: 400; color: var(--vs-text-muted); margin: 0 3px; }
.vs-card-meta { font-size: 11px; color: var(--vs-text-muted); margin-top: 3px; }

/* Card Top Section - Lines & Score */
.vs-card-top {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0;
  border-bottom: 1px solid var(--vs-border);
  font-size: 12px;
}
.vs-card-top-header {
  display: contents;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  letter-spacing: 0.5px;
}
.vs-card-top-header > div {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--vs-border-light);
  background: #1a1d23;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vs-card-top-header > div:first-child { text-align: left; padding-left: 12px; }
.vs-card-top-row {
  display: contents;
  font-weight: 600;
}
.vs-card-top-row > div {
  padding: 5px 8px;
  text-align: center;
  border-bottom: 1px solid var(--vs-border-light);
}
.vs-card-top-row > div:first-child {
  text-align: left;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vs-card-top-row > div:first-child a { color: var(--vs-text-primary); text-decoration: none; font-size: 13px; font-weight: 600; }
.vs-card-top-row > div:first-child a:hover { color: var(--vs-vsinred); }

/* Card Ratings Section */
.vs-card-ratings { padding: 8px 12px 10px; }
.vs-card-ratings-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 4px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--vs-border);
  margin-bottom: 6px;
}
.vs-card-ratings-header > div:first-child { text-align: right; padding-right: 8px; }
.vs-card-ratings-header > div:nth-child(2),
.vs-card-ratings-header > div:nth-child(3) { text-align: center; }

/* Card Rows */
.vs-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.vs-card-label {
  font-weight: 600;
  text-align: right;
  padding-right: 8px;
  color: var(--vs-text-secondary);
  font-size: 13px;
}
.vs-card-val {
  text-align: center;
  font-family: var(--vs-font-display);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: center;
}
.vs-card-val .rank-badge {
  flex: 1;
  max-width: 80px;
}
.vs-card-divider {
  height: 1px;
  background: var(--vs-border-light);
  margin: 4px 0;
}

/* Card Section Labels */
.vs-card-section-label {
  font-family: var(--vs-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vs-text-muted);
  text-align: center;
  padding: 6px 0 4px;
}

/* Starting Pitcher Rows */
.vs-starter-header {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  text-align: center;
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--vs-border-light);
}
.vs-starter-header > div:first-child { text-align: left; }
.vs-starter-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  gap: 4px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.vs-starter-name {
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-starter-stat {
  text-align: center;
  font-family: var(--vs-font-display);
  font-size: 12px;
}
.vs-starter-stat .rank-badge {
  font-size: 11px;
  min-width: auto;
  height: 20px;
  padding: 0 3px;
}

/* Game Status */
.vs-status-final { color: var(--vs-text-secondary); }
.vs-status-live { color: #dc1414; font-weight: 700; }
.vs-status-pre { color: var(--vs-text-secondary); }

/* Score badge in top section */
.vs-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vs-font-display);
  font-size: 15px;
  font-weight: 500;
  min-width: 48px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #000000;
}
.vs-score-winner { background: #e4f6dc; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .vs-container { padding: 0 8px; }
  .vs-header { padding: 18px 16px; }
  .vs-title { font-size: 18px; }
  .vs-table { font-size: 12px; }
  .cell-team { padding-left: 10px !important; min-width: 150px; }
  .th-team { min-width: 150px; padding-left: 10px !important; }
  .cell-rank { padding-right: 8px; }
  .hide-mobile { display: none; }
}

@media (max-width: 480px) {
  .vs-header { padding: 14px 12px; }
  .vs-title { font-size: 16px; }
  .vs-subtitle { font-size: 11px; }
  .vs-table td { padding: 7px 5px; }
  .hide-small { display: none; }
}

/* --- Game Blocks (ticket-style layout) --- */
.vs-game-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 0;
}
@media (max-width: 992px) {
  .vs-game-list {
    grid-template-columns: 1fr;
  }
}

/* Block container */
.vg-block {
  border: 1px solid var(--vs-border);
  background: #ffffff;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Header: status + venue + series */
.vg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #1a1d23;
  color: #ffffff;
}
.vg-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vg-header-right {
  font-family: var(--vs-font-body);
  font-size: 12px;
  color: #a0a6b4;
}
.vg-venue {
  font-family: var(--vs-font-body);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.vg-series { font-weight: 500; }

/* Weather strip */
.vg-weather {
  padding: 4px 16px;
  font-family: var(--vs-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--vs-text-muted);
  background: #f5f6f8;
  border-bottom: 1px solid var(--vs-border-light);
}
.vg-weather:empty { display: none; }

/* Matchup section */
.vg-matchup {
  padding: 0 16px;
  border-bottom: 1px solid var(--vs-border);
}
.vg-matchup-labels,
.vg-team-row {
  display: grid;
  grid-template-columns: 2.5fr 0.7fr 0.9fr 0.7fr 1fr 1fr 1.1fr 0.6fr 0.6fr;
  gap: 4px;
  align-items: center;
  padding: 0 0;
}
.vg-matchup-labels {
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--vs-border-light);
}
.vg-col-label {
  font-family: var(--vs-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  text-align: center;
  letter-spacing: 0.3px;
}
.vg-team-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--vs-border-light);
}
.vg-team-row:last-child { border-bottom: none; }
.vg-team-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vg-team-name {
  font-family: var(--vs-font-body);
  font-size: 13px;
  font-weight: 700;
}
.vg-team-name a { color: #000000; text-decoration: none; }
.vg-team-name a:hover { color: var(--vs-vsinred); }
.vg-team-val {
  text-align: center;
  font-family: var(--vs-font-display);
  font-size: 13px;
  font-weight: 500;
}
.vg-team-val .rank-badge {
  display: block;
  margin: 0 auto;
  font-size: 12px;
}
.vg-team-val .vs-score-badge {
  font-size: 15px;
  font-weight: 700;
  min-width: 36px;
  height: 28px;
}

/* Section accent bar - reusable */
.vg-section-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--vs-border);
  border-left: 3px solid var(--vs-vsinred);
  background: #f5f6f8;
}
.vg-section-label {
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--vs-text-primary);
}

/* Projection strip */
.vg-proj-strip {
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--vs-border);
  font-family: var(--vs-font-body);
  font-size: 12px;
}
.vg-proj-left,
.vg-proj-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 16px;
}
.vg-proj-left {
  gap: 0;
}
.vg-proj-right {
  border-left: 1px solid var(--vs-border);
  gap: 4px;
}
.vg-proj-labels,
.vg-proj-row {
  align-items: center;
}
.vg-proj-grid {
  display: grid;
  grid-template-columns: 2.5fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 4px;
}
.vg-proj-labels {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--vs-border-light);
  margin-bottom: 2px;
}
.vg-proj-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--vs-border-light);
}
.vg-proj-row:last-child { border-bottom: none; }
.vg-proj-team {
  font-family: var(--vs-font-body);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vg-proj-team a { color: #000000; text-decoration: none; }
.vg-proj-team a:hover { color: var(--vs-vsinred); }
.vg-proj-val {
  font-family: var(--vs-font-display);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.vg-proj-val .rank-badge {
  display: inline-flex;
  font-size: 13px;
  height: 22px;
  min-width: 32px;
  font-weight: 600;
}
.vg-proj-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vg-proj-label {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  letter-spacing: 0.3px;
  margin-right: 6px;
}
.vg-proj-dash {
  color: var(--vs-text-muted);
  font-weight: 700;
}
.vg-proj-item .rank-badge {
  display: inline-flex;
  font-size: 13px;
  height: 22px;
  min-width: 32px;
  font-weight: 600;
}

/* Starters section - tabbed */
.vg-sp-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--vs-border);
  border-left: 3px solid var(--vs-vsinred);
  background: #f5f6f8;
}
.vg-sp-tabs-label {
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--vs-text-primary);
  padding: 8px 16px;
}
.vg-sp-tabs-right {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
.vg-sp-tab {
  padding: 0 0 4px;
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--vs-text-muted);
  cursor: pointer;
}
.vg-sp-tab:hover { color: var(--vs-text-primary); }
.vg-sp-tab-active {
  color: var(--vs-vsinred);
  border-bottom-color: var(--vs-vsinred);
}
.vg-sp-panel {
  padding: 4px 16px 0;
}
.vg-sp-grid-record {
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.7fr 0.7fr 1fr 1.2fr;
  gap: 4px;
  align-items: center;
}
.vg-sp-grid-stats {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr;
  gap: 4px;
  align-items: center;
}
.vg-sp-labels {
  padding: 6px 0 3px;
  border-bottom: 1px solid var(--vs-border-light);
  font-family: var(--vs-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vs-text-muted);
  text-align: center;
  letter-spacing: 0.3px;
}
.vg-sp-labels > div:first-child { text-align: left; }
.vg-sp-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--vs-border-light);
}
.vg-sp-row:last-child { border-bottom: none; }
.vg-sp-name {
  font-family: var(--vs-font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-sp-stat {
  text-align: center;
  font-family: var(--vs-font-display);
  font-size: 12px;
  font-weight: 500;
}
.vg-sp-stat .rank-badge {
  display: block;
  margin: 0 auto;
  font-size: 11px;
  height: 22px;
  min-width: auto;
  padding: 0 4px;
}

/* Action buttons */
.vg-actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  background: #fafbfc;
}
.vg-actions:empty { display: none; }

/* Pills */
.vs-pill {
  display: inline-block;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  padding: 3px 10px;
  letter-spacing: 0.5px;
}
.vs-pill-pre { background: #3182bd; color: #ffffff; }
.vs-pill-live { background: #dc1414; color: #ffffff; }
.vs-pill-final { background: #4b8119; color: #ffffff; }

/* Action buttons */
.vs-action-btn {
  font-family: var(--vs-font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: var(--vs-vsinred);
  cursor: pointer;
}
.vs-action-btn:hover { border-color: var(--vs-vsinred); }
.vs-action-btn i { margin-right: 4px; }
.vs-action-dk { color: #00694b; }
.vs-action-circa { color: #c4a137; }
.vs-action-picks { color: var(--vs-vsinred); }

/* Button bar divider */
.vs-btn-divider {
  width: 1px;
  height: 24px;
  background: #d0d0d0;
  margin: 0 4px;
}