/**
 * Sportscapping Embed - Baseline Stylesheet
 *
 * All styles use the `sc-` prefix to avoid conflicts with affiliate CSS.
 * Affiliates can override any style or customize via CSS variables.
 *
 * CSS Variables (set these before loading, or via SC.init({ theme })):
 *   --sc-primary:       Primary action color (buttons, links)
 *   --sc-primary-hover: Primary hover state
 *   --sc-accent:        Accent / highlight color
 *   --sc-positive:      Positive values (profit, wins)
 *   --sc-negative:      Negative values (losses)
 *   --sc-bg:            Widget background
 *   --sc-bg-alt:        Alternate row / card background
 *   --sc-border:        Border color
 *   --sc-text:          Primary text color
 *   --sc-text-muted:    Secondary text color
 *   --sc-font:          Font family
 *   --sc-radius:        Border radius
 */

/* ===== Variables ===== */
:root {
  --sc-primary: #2563eb;
  --sc-primary-hover: #1d4ed8;
  --sc-accent: #f59e0b;
  --sc-positive: #047857;
  --sc-negative: #dc2626;
  --sc-bg: #ffffff;
  --sc-bg-alt: #f9fafb;
  --sc-border: #e5e7eb;
  --sc-text: #111827;
  --sc-text-muted: #6b7280;
  --sc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-radius: 6px;
  /* Records-grammar tokens (#1239). Light defaults here; SC.init({theme:'dark'})
     flips the whole set to the site's records palette (DARK_THEME_VARS in
     core/index.ts — keep the two lists in lockstep). */
  --sc-elevated: #f9fafb;      /* podium cards, header bands */
  --sc-hair: #f3f4f6;          /* hairlines inside a card */
  --sc-band: #f9fafb;          /* table row banding */
  --sc-faint: #9ca3af;         /* ambient / tertiary text */
  --sc-cta: #047857;           /* solid action (View picks) */
  --sc-cta-text: #ecfdf5;
  --sc-cta-hover: #065f46;
  --sc-chip-bg: #f3f4f6;
  --sc-chip-text: #6b7280;
  --sc-chip-on-bg: #047857;
  --sc-chip-on-text: #ecfdf5;
  /* Pick-card tokens (#1239 R7) — bet-band tint, game time, WIN pill pair.
     Keys must stay in lockstep with DARK_THEME_VARS in core/index.ts. */
  --sc-band-deep: #f3f4f6;
  --sc-time: #b45309;
  --sc-pill-win-bg: #047857;
  --sc-pill-win-text: #ffffff;
  --sc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== Reset / Base ===== */
/* Shadow host (isolated mode, default): give every widget breathing room below
   it so it doesn't bump against the affiliate's next element. */
:host {
  display: block;
  margin-bottom: 28px;
}

.sc-embed {
  font-family: var(--sc-font);
  color: var(--sc-text);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.sc-embed *,
.sc-embed *::before,
.sc-embed *::after {
  box-sizing: border-box;
}

/* ===== Defensive reset: neutralize host-theme typography bleed =====
   Heavily-styled affiliate themes set element-level rules (e.g.
   `.single-content h3 { letter-spacing: -2px; font-size: 10px }`) that
   out-specify the SDK's single-class selectors and crush widget text.
   These inherited/elemental properties are forced back to sane defaults so
   widgets render consistently regardless of the host stylesheet. */
.sc-embed,
.sc-embed *,
.sc-embed *::before,
.sc-embed *::after {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  text-indent: 0 !important;
  font-family: var(--sc-font) !important;
  font-style: normal !important;
}
/* Re-assert sizing on the SDK's own headings, scoped strongly enough
   (.sc-embed + element + class = 0,2,1) to beat host `.<wrapper> h3` rules. */
.sc-embed h1.sc-product-name, .sc-embed h2.sc-product-name, .sc-embed h3.sc-product-name,
.sc-embed .sc-product-name { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.sc-embed h1.sc-section-title, .sc-embed h2.sc-section-title, .sc-embed h3.sc-section-title,
.sc-embed .sc-section-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.sc-embed h1.sc-package-name, .sc-embed h2.sc-package-name, .sc-embed h3.sc-package-name,
.sc-embed .sc-package-name { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; }

/* ===== Typography ===== */
.sc-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--sc-text);
}

/* ===== Links ===== */
.sc-link {
  color: var(--sc-primary);
  text-decoration: none;
  cursor: pointer;
}

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

/* ===== Buttons ===== */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sc-font);
  border: 1px solid transparent;
  border-radius: var(--sc-radius);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}

.sc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.sc-btn-primary:hover:not(:disabled) {
  background: var(--sc-primary-hover);
  border-color: var(--sc-primary-hover);
}

.sc-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.sc-btn-text {
  background: transparent;
  color: var(--sc-text-muted);
  padding: 4px 8px;
}

.sc-btn-text:hover:not(:disabled) {
  color: var(--sc-text);
}

.sc-btn-block {
  width: 100%;
}

/* ===== Filters ===== */
.sc-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sc-select {
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-family: var(--sc-font);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.sc-select:focus {
  outline: 2px solid var(--sc-primary);
  outline-offset: -1px;
}

/* ===== Form Fields ===== */
.sc-field {
  margin-bottom: 12px;
}

.sc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sc-text);
  margin-bottom: 4px;
}

.sc-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--sc-font);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text);
}

.sc-input:focus {
  outline: 2px solid var(--sc-primary);
  outline-offset: -1px;
}

/* ===== Tables ===== */
.sc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.sc-th {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sc-text-muted);
  border-bottom: 2px solid var(--sc-border);
  white-space: nowrap;
}

.sc-th-sortable {
  cursor: pointer;
  user-select: none;
}

.sc-th-sortable:hover {
  color: var(--sc-text);
}

.sc-sort-arrow {
  font-size: 10px;
  margin-left: 2px;
}

.sc-td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--sc-border);
  vertical-align: middle;
}

.sc-tr:hover {
  background: var(--sc-bg-alt);
}

.sc-text-left { text-align: left; }
.sc-text-center { text-align: center; }
.sc-text-right { text-align: right; }

/* ===== Status Colors ===== */
.sc-positive { color: var(--sc-positive); }
.sc-negative { color: var(--sc-negative); }

/* ===== Badges ===== */
.sc-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
}

.sc-badge-featured {
  background: var(--sc-accent);
  color: #fff;
}

.sc-badge-guaranteed {
  background: var(--sc-positive);
  color: #fff;
}

.sc-sport-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  background: var(--sc-bg-alt);
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
}

/* ===== Rank Change ===== */
.sc-rank-up {
  color: var(--sc-positive);
  font-size: 11px;
  margin-left: 4px;
}

.sc-rank-down {
  color: var(--sc-negative);
  font-size: 11px;
  margin-left: 4px;
}

/* ===== Spinner ===== */
.sc-spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 32px;
}

.sc-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sc-border);
  border-top-color: var(--sc-primary);
  border-radius: 50%;
  animation: sc-spin 0.7s linear infinite;
}

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

/* ===== Empty & Error States ===== */
.sc-empty,
.sc-error {
  text-align: center;
  padding: 24px;
  color: var(--sc-text-muted);
}

.sc-error {
  color: var(--sc-negative);
}

/* ===== Capper Profile ===== */
.sc-capper-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sc-capper-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sc-capper-info {
  flex: 1;
  min-width: 0;
}

.sc-capper-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--sc-text);
}

.sc-capper-sports {
  margin-bottom: 6px;
}

.sc-capper-promo {
  font-size: 13px;
  color: var(--sc-text-muted);
  font-style: italic;
}

.sc-capper-bio {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sc-text);
}

/* ===== Stats Grid ===== */
.sc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sc-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--sc-bg-alt);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
}

.sc-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.sc-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-text-muted);
  margin-top: 4px;
}

/* ===== Package Cards ===== */
.sc-packages-section {
  margin-top: 20px;
}

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

.sc-package-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 14px;
  background: var(--sc-bg);
  display: flex;
  flex-direction: column;
}

.sc-package-card.sc-featured {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 1px var(--sc-accent);
}

.sc-package-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sc-package-name {
  font-weight: 600;
  font-size: 15px;
}

.sc-package-capper {
  font-size: 13px;
  margin-bottom: 6px;
}

.sc-package-desc {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.sc-package-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-bottom: 10px;
}

.sc-package-type,
.sc-package-duration,
.sc-package-sport {
  background: var(--sc-bg-alt);
  padding: 2px 6px;
  border-radius: 3px;
}

.sc-package-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sc-border);
}

.sc-package-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sc-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-price-old {
  font-size: 13px;
  color: var(--sc-text-muted);
  text-decoration: line-through;
}

/* ===== Auth Widget ===== */
.sc-auth-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-auth-greeting {
  font-size: 14px;
  font-weight: 500;
}

.sc-auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--sc-border);
  margin-bottom: 16px;
}

.sc-auth-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sc-font);
  color: var(--sc-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sc-auth-tab:hover {
  color: var(--sc-text);
}

.sc-auth-tab.sc-active {
  color: var(--sc-primary);
  border-bottom-color: var(--sc-primary);
}

.sc-auth-error {
  background: #fef2f2;
  color: var(--sc-negative);
  padding: 8px 12px;
  border-radius: var(--sc-radius);
  font-size: 13px;
  margin-bottom: 12px;
}

.sc-auth-form {
  max-width: 400px;
}

.sc-auth-form-wrap {
  padding: 4px;
}

/* ===== Modal ===== */
.sc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Modals render outside .sc-embed, so the global box-sizing reset doesn't
   reach them — without this, inputs are content-box and width:100% + padding
   overflows the two-up field rows (#588). */
.sc-modal-overlay,
.sc-modal-overlay *,
.sc-modal-overlay *::before,
.sc-modal-overlay *::after {
  box-sizing: border-box;
}

.sc-modal {
  background: var(--sc-bg);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.sc-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--sc-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.sc-modal-close:hover {
  color: var(--sc-text);
}

/* ===== Cart Float Button ===== */
.sc-cart-float {
  position: fixed;
  z-index: 9999;
}

.sc-cart-bottom-right {
  bottom: 20px;
  right: 20px;
}

.sc-cart-bottom-left {
  bottom: 20px;
  left: 20px;
}

.sc-cart-fab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--sc-primary);
  color: #fff;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sc-font);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.sc-cart-fab:hover {
  background: var(--sc-primary-hover);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.sc-cart-icon {
  width: 20px;
  height: 20px;
}

.sc-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sc-negative);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sc-cart-fab-total {
  font-size: 13px;
  font-weight: 600;
}

/* ===== Cart Drawer (pixel-faithful to the main-site MiniCartDrawer, #585) =====
   Slide-over panel: right side on desktop, bottom sheet on mobile. Always
   rendered; .sc-open drives the slide/fade transitions. */
.sc-cart-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  font-family: var(--sc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.sc-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sc-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 384px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}

.sc-cart-drawer-root.sc-open {
  pointer-events: auto;
}

.sc-cart-drawer-root.sc-open .sc-cart-drawer-overlay {
  opacity: 1;
}

.sc-cart-drawer-root.sc-open .sc-cart-drawer {
  transform: translateX(0);
}

.sc-cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.sc-cart-drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.sc-cart-drawer-close {
  display: flex;
  padding: 6px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.sc-cart-drawer-close:hover {
  color: #4b5563;
  background: #f3f4f6;
}

.sc-cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px;
}

.sc-cart-drawer-empty {
  padding: 24px 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.sc-cart-drawer-item {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.sc-cart-drawer-item:last-child {
  border-bottom: none;
}

.sc-cart-drawer-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.sc-cart-drawer-item-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.sc-cart-drawer-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sc-cart-drawer-item-price {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.sc-cart-drawer-item-remove {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.sc-cart-drawer-item-remove:hover {
  color: #dc2626;
}

.sc-cart-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
}

.sc-cart-drawer-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.sc-cart-drawer-checkout {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #10b981;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sc-cart-drawer-checkout:hover {
  background: #059669;
}

.sc-cart-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.sc-cart-drawer-clear,
.sc-cart-drawer-keep {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-family: inherit;
  color: #6b7280;
  cursor: pointer;
}

.sc-cart-drawer-clear:hover {
  color: #dc2626;
}

.sc-cart-drawer-keep:hover {
  color: #374151;
}

/* Mobile: bottom sheet */
@media (max-width: 640px) {
  .sc-cart-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .sc-cart-drawer-root.sc-open .sc-cart-drawer {
    transform: translateY(0);
  }
}

/* ===== Cappers Grid ===== */
.sc-cappers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sc-capper-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sc-capper-card:hover {
  border-color: var(--sc-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sc-capper-card-header {
  position: relative;
  height: 80px;
  background: linear-gradient(135deg, #1e293b, #334155);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}

.sc-capper-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sc-bg);
  position: relative;
  top: 36px;
  background: #e2e8f0;
}

.sc-capper-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--sc-bg);
  position: relative;
  top: 36px;
  background: var(--sc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}

.sc-capper-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 16px 16px;
}

.sc-capper-card-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--sc-text);
  text-decoration: none;
  margin-bottom: 6px;
}

.sc-capper-card-name:hover {
  color: var(--sc-primary);
}

.sc-capper-card-sports {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.sc-capper-card-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}

.sc-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sc-stat-value {
  font-weight: 700;
  font-size: 14px;
  color: var(--sc-text);
}

.sc-stat-label {
  font-size: 11px;
  color: var(--sc-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sc-capper-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #059669;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.sc-capper-card-btn:hover {
  background: #047857;
}

/* ===== Schedule / Game Cards ===== */
.sc-schedule-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.sc-game-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 10px 14px;
  background: var(--sc-bg);
}

.sc-game-card.sc-game-live {
  border-color: var(--sc-negative);
}

.sc-game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-game-league {
  font-weight: 600;
  text-transform: uppercase;
}

.sc-live-indicator {
  color: var(--sc-negative);
  font-weight: 700;
  animation: sc-pulse 1.5s ease-in-out infinite;
}

@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.sc-game-matchup {
  margin-bottom: 6px;
}

.sc-game-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.sc-team-name {
  font-size: 14px;
  font-weight: 500;
}

.sc-team-score {
  font-size: 16px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.sc-game-odds {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--sc-text-muted);
  border-top: 1px solid var(--sc-border);
  padding-top: 6px;
}

/* ===== Checkout ===== */
.sc-checkout-items {
  margin-bottom: 12px;
}

.sc-checkout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--sc-border);
  gap: 8px;
}

.sc-checkout-item-info {
  flex: 1;
  min-width: 0;
}

.sc-checkout-item-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.sc-checkout-item-capper {
  display: block;
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-checkout-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sc-checkout-item-price {
  font-size: 14px;
  font-weight: 600;
}

.sc-checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  border-top: 2px solid var(--sc-border);
  margin-bottom: 12px;
}

.sc-checkout-total-amount {
  font-size: 20px;
}

/* Payment-method cards — mirrors the main-site PaymentForm grid (#588). */
.sc-pay-fieldset {
  border: none;
  margin: 0 0 4px;
  padding: 0;
}

.sc-pay-legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.sc-pay-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.sc-pay-method {
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sc-pay-method:hover {
  border-color: #9ca3af;
}

.sc-pay-method.sc-selected {
  border-color: #10b981;
  background: #ecfdf5;
  box-shadow: 0 0 0 1px #10b981;
}

.sc-pay-method-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  color: #4b5563;
}

.sc-pay-method-icon.sc-paypal {
  color: #2563eb;
}

.sc-pay-method-icon.sc-crypto {
  color: #f7931a;
}

.sc-pay-method-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.sc-field-row {
  display: flex;
  gap: 10px;
}

.sc-field-row .sc-field {
  flex: 1;
}

.sc-checkout-form .sc-btn + .sc-btn {
  margin-top: 8px;
}

.sc-checkout-processing {
  text-align: center;
  padding: 32px 16px;
}

.sc-checkout-processing p {
  margin-top: 12px;
  color: var(--sc-text-muted);
}

.sc-checkout-success {
  text-align: center;
  padding: 24px 16px;
}

.sc-checkout-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sc-positive);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.sc-checkout-success-total {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.sc-checkout-success-sub {
  margin: 0 auto 12px;
  max-width: 340px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.sc-checkout-success-order {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280;
}

.sc-checkout-success .sc-btn-block {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.sc-checkout-success .sc-btn + .sc-btn {
  margin-top: 8px;
}

.sc-checkout-modal {
  max-width: 500px;
}

/* ===== Checkout — two-column branded layout (mirrors Checkout/Index.vue, #586) ===== */
.sc-checkout-modal-2col {
  /* Checkout uses light cards even inside a dark affiliate site. Keep form
     fields, labels and return errors on the same palette as those cards. */
  --sc-bg: #ffffff;
  --sc-bg-alt: #f9fafb;
  --sc-text: #111827;
  --sc-text-muted: #6b7280;
  --sc-border: #d1d5db;
  --sc-negative: #b91c1c;
  max-width: 880px;
  width: 92%;
  background: #f9fafb;
  padding: 24px;
}

.sc-co-heading {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.sc-co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 768px) {
  .sc-co-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.sc-co-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.sc-co-card:last-child {
  margin-bottom: 0;
}

.sc-co-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.sc-co-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.sc-co-card-body {
  padding: 20px;
}

/* Credits card */
.sc-co-credits {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.sc-co-credits-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #064e3b;
}

.sc-co-credits-text {
  margin: 4px 0 16px;
  font-size: 14px;
  color: #047857;
}

.sc-co-credits-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #059669;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sc-co-credits-btn:hover {
  background: #047857;
}

/* Order summary items */
.sc-co-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-co-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sc-co-item-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.sc-co-item-photo {
  object-fit: cover;
}

.sc-co-item-info {
  flex: 1;
  min-width: 0;
}

.sc-co-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
}

.sc-co-item-capper {
  margin-top: 2px;
  font-size: 13px;
  color: #6b7280;
}

.sc-co-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sc-co-item-price {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.sc-co-item-remove {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.sc-co-item-remove:hover {
  color: #dc2626;
}

.sc-co-totals {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-co-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.sc-co-total-label {
  color: #6b7280;
}

.sc-co-total-val {
  color: #111827;
}

.sc-co-grand {
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.sc-co-fulfillment {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.sc-co-empty,
.sc-co-empty-state {
  padding: 24px 0;
  text-align: center;
  color: #6b7280;
}

/* Order bumps (#587) */
.sc-co-bumps {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-co-bumps-head {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.sc-co-bump {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.sc-co-bump:hover {
  border-color: #34d399;
}

.sc-co-bump.sc-selected {
  border-style: solid;
  border-color: #10b981;
  background: #ecfdf5;
}

.sc-co-bump input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #059669;
  flex-shrink: 0;
}

.sc-co-bump-body {
  flex: 1;
  min-width: 0;
}

.sc-co-bump-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.sc-co-bump-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.sc-co-bump-price {
  font-size: 13px;
  font-weight: 600;
  color: #059669;
  white-space: nowrap;
}

.sc-co-bump-rec {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

/* Coupon */
.sc-co-coupon {
  margin-top: 16px;
}

.sc-co-coupon-row {
  display: flex;
  gap: 8px;
}

.sc-co-coupon-input {
  flex: 1;
}

.sc-co-coupon-apply {
  flex-shrink: 0;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #374151;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.sc-co-coupon-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sc-co-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 13px;
  color: #047857;
}

.sc-co-coupon-remove {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.sc-co-coupon-msg {
  margin: 6px 0 0;
  font-size: 13px;
  color: #dc2626;
}

.sc-co-total-discount {
  color: #059669;
}

/* Brand the checkout's primary actions emerald (Pay / Sign In) to match the
   main site + the Credits button, instead of the generic blue --sc-primary. */
.sc-checkout-modal-2col .sc-btn-primary {
  background: #10b981;
  border-color: #10b981;
}

.sc-checkout-modal-2col .sc-btn-primary:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}

/* ===== Account ===== */
.sc-account-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-account-header .sc-auth-greeting {
  display: block;
  font-size: 13px;
  color: var(--sc-text-muted);
  margin-top: 2px;
}

.sc-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-order-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 12px 14px;
}

.sc-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sc-order-number {
  font-weight: 600;
  font-size: 14px;
}

.sc-order-status {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.sc-order-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sc-text-muted);
  margin-bottom: 8px;
}

.sc-order-total {
  font-weight: 600;
  color: var(--sc-text);
}

.sc-order-items {
  border-top: 1px solid var(--sc-border);
  padding-top: 6px;
}

.sc-order-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
}

/* ===== Account Tabs ===== */
.sc-account-tabs {
  display: flex;
  border-bottom: 2px solid var(--sc-border);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scrollable on narrow mounts but never LOOKS scrollable (Tyler
     2026-09-01: no scrollbar on the account tab strip). */
  scrollbar-width: none;
}
.sc-account-tabs::-webkit-scrollbar { display: none; }

.sc-account-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sc-font);
  color: var(--sc-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.sc-account-tab:hover {
  color: var(--sc-text);
}

.sc-account-tab.sc-active {
  color: var(--sc-primary);
  border-bottom-color: var(--sc-primary);
}

/* ===== Account Sections ===== */
.sc-account-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sc-border);
}

.sc-account-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sc-account-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--sc-text);
}

.sc-account-section-desc {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin: 0 0 12px 0;
}

.sc-account-form .sc-btn {
  margin-top: 4px;
}

.sc-success-msg {
  background: #f0fdf4;
  color: var(--sc-positive);
  padding: 8px 12px;
  border-radius: var(--sc-radius);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ===== Subscription Cards ===== */
.sc-sub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-sub-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 14px;
  background: var(--sc-bg);
}

.sc-sub-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sc-sub-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-sub-card-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
}
.sc-sub-card-initial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.sc-sub-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--sc-text);
}

.sc-sub-card-product {
  font-size: 13px;
  color: var(--sc-text-muted);
}

.sc-sub-card-league {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--sc-bg-alt);
  border: 1px solid var(--sc-border);
  border-radius: 3px;
  margin-left: 4px;
}

.sc-sub-card-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.sc-sub-card-badge.sc-positive {
  background: #f0fdf4;
}

.sc-sub-card-dates {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-bottom: 8px;
}

.sc-sub-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-sub-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--sc-bg-alt);
  border-radius: 3px;
  overflow: hidden;
}

.sc-sub-progress-fill {
  height: 100%;
  background: var(--sc-primary);
  border-radius: 3px;
  transition: width 0.3s;
}

.sc-sub-progress-label {
  font-size: 11px;
  color: var(--sc-text-muted);
  white-space: nowrap;
}

.sc-sub-card-stats {
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-text-muted);
  margin-bottom: 8px;
}

.sc-sub-card-stats-sep {
  margin: 0 4px;
  color: var(--sc-border);
}

.sc-order-payment-method {
  font-size: 12px;
  color: var(--sc-text-muted);
}

/* ===== Pick Cards ===== */
.sc-pick-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-pick-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  overflow: hidden;
}

.sc-pick-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--sc-bg-alt);
  border-bottom: 1px solid var(--sc-border);
  gap: 8px;
}

.sc-pick-card-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-pick-card-league {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sc-text);
  font-size: 12px;
}

.sc-pick-card-sep {
  color: var(--sc-border);
}

.sc-pick-card-date {
  font-size: 12px;
}

.sc-pick-card-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-pick-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-pick-badge-win {
  background: #f0fdf4;
  color: var(--sc-positive);
}

.sc-pick-badge-loss {
  background: #fef2f2;
  color: var(--sc-negative);
}

.sc-pick-badge-push {
  background: #fefce8;
  color: #a16207;
}

.sc-pick-badge-pending {
  background: var(--sc-bg-alt);
  color: var(--sc-text-muted);
}

.sc-pick-badge-free {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.sc-pick-card-body {
  padding: 14px;
}

.sc-pick-card-capper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sc-pick-card-capper-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--sc-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.sc-pick-card-capper-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-text);
}

.sc-pick-card-game {
  font-size: 16px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 10px;
}

.sc-pick-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-pick-card-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sc-pick-card-detail-label {
  font-size: 13px;
  color: var(--sc-text-muted);
}

.sc-pick-card-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-text);
}

.sc-pick-card-line {
  color: var(--sc-primary);
  margin-left: 2px;
}

.sc-pick-card-price {
  color: var(--sc-text-muted);
  font-weight: 400;
  margin-left: 2px;
}

.sc-pick-card-top-play {
  font-weight: 700;
  color: var(--sc-accent);
}

.sc-pick-card-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sc-border);
}

.sc-pick-card-profit {
  font-size: 15px;
  font-weight: 700;
}

.sc-pick-card-analysis-toggle {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 10px;
  border: none;
  border-top: 1px solid var(--sc-border);
  background: transparent;
  font-family: var(--sc-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--sc-primary);
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
}

.sc-pick-card-analysis-toggle:hover {
  color: var(--sc-primary-hover);
}

.sc-pick-card-analysis {
  margin-top: 8px;
  padding: 12px;
  background: var(--sc-bg-alt);
  border-radius: var(--sc-radius);
}

.sc-pick-card-analysis-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text);
  margin: 0 0 6px 0;
}

.sc-pick-card-analysis-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sc-text);
  margin: 0;
}

/* ===== Product Cards ===== */
.sc-product-jump-links {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sc-product-jump-link {
  padding: 6px 16px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  color: var(--sc-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

.sc-product-jump-link:hover {
  background: var(--sc-primary);
  color: #fff;
  border-color: var(--sc-primary);
}

.sc-product-section {
  margin-bottom: 32px;
}

.sc-section-count {
  font-weight: 400;
  color: var(--sc-text-muted);
  font-size: 0.85em;
}

/* auto-fit minmax (not fixed columns + viewport media queries) so the grid
   reflows to the affiliate's CONTENT-column width, not the browser viewport.
   Inside the Shadow DOM a @media query reads the full viewport, so a wide
   screen with a narrow embed column kept this pinned at 3 cramped columns and
   muddled the price/button row. With a 260px floor a ~760px column lands on
   2 cards (~380px each); ~800px+ gets 3; auto-fit collapses empty tracks so a
   typical 3-package set always fills the row instead of leaving gaps. */
.sc-product-grid {
  display: grid;
  /* Default 3 columns, matching the main /products desktop grid. The widget
     overrides the column count inline via the `columns` attribute; the media
     queries below collapse it responsively (they win via !important). */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1023px) {
  .sc-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .sc-product-grid {
    grid-template-columns: 1fr !important;
  }
}

.sc-product-card {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  transition: box-shadow 0.15s;
  /* Flex column + grid stretch keeps every card the same height and pins the
     price/buy footer to the bottom regardless of description length. */
  display: flex;
  flex-direction: column;
}

.sc-product-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sc-product-featured {
  border-color: #f59e0b;
}

.sc-product-banner {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 0;
  color: #fff;
  letter-spacing: 0.04em;
}

.sc-product-banner-featured {
  background: #f59e0b;
}

.sc-product-banner-guaranteed {
  background: var(--sc-positive);
}

.sc-product-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.sc-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.sc-product-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--sc-bg-alt);
  color: var(--sc-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-product-tag-guarantee {
  background: rgba(16, 185, 129, 0.12);
  color: var(--sc-positive);
}

.sc-product-desc-wrap {
  margin-bottom: 12px;
}

.sc-product-capper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sc-product-capper-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sc-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--sc-text-muted);
  flex-shrink: 0;
}

.sc-product-capper-info {
  display: flex;
  flex-direction: column;
}

.sc-product-capper-sport {
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-product-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sc-product-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sc-text);
  margin: 0;
  line-height: 1.3;
}

.sc-product-type-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--sc-radius);
  background: var(--sc-bg-alt);
  color: var(--sc-text-muted);
  white-space: nowrap;
}

.sc-product-desc {
  font-size: 14px;
  color: var(--sc-text-muted);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.sc-product-desc.sc-desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-desc-toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--sc-primary);
  cursor: pointer;
  font-family: var(--sc-font);
}

.sc-desc-toggle:hover {
  text-decoration: underline;
}

.sc-product-league {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin-bottom: 10px;
}

.sc-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap insurance: if a card is still too narrow for price + button on one
     row, the button drops to its own line (pushed right) instead of crushing
     the price or wrapping the button label to two lines. */
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sc-border);
  margin-top: auto;
}

.sc-product-footer .sc-btn {
  white-space: nowrap;
  margin-left: auto;
}

.sc-product-price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.sc-product-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-product-duration {
  font-size: 13px;
  color: var(--sc-text-muted);
}

/* ===== Product card — parity extras (#624) ===== */

/* Banner hierarchy: GoP (gradient) > Most Popular (blue) > Featured (amber) >
   Guaranteed (emerald). Featured/Guaranteed banners already defined above. */
.sc-product-banner-gop {
  background: linear-gradient(to right, #eab308, #f97316);
  text-transform: uppercase;
}

.sc-product-banner-popular {
  background: var(--sc-primary);
  text-transform: uppercase;
}

/* Most Popular gets a highlighted border like the main card's blue ring. */
.sc-product-popular {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 1px var(--sc-primary);
}

/* Capper performance badge line (record / win% / ROI / period). */
.sc-product-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: -4px 0 12px;
  font-size: 12px;
}

.sc-stat-record {
  font-weight: 700;
  color: var(--sc-text);
}

.sc-stat-win {
  font-weight: 500;
  color: var(--sc-text-muted);
}

.sc-stat-roi {
  font-weight: 500;
  color: var(--sc-positive);
}

.sc-stat-period {
  color: var(--sc-text-muted);
  opacity: 0.8;
}

.sc-stat-sep {
  color: var(--sc-border);
}

/* Type caption (colored, iconless) + always-on Profit Guarantee chip. */
.sc-product-caption-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
}

.sc-product-type-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-type-package { color: var(--sc-positive); }
.sc-type-subscription { color: var(--sc-primary); }
.sc-type-season { color: #7c3aed; }

.sc-product-guarantee-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--sc-positive);
  white-space: nowrap;
}

/* Pick-count + league abbreviation pills. */
.sc-product-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.sc-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.sc-chip-count {
  background: var(--sc-bg-alt);
  color: var(--sc-text-muted);
}

.sc-chip-league {
  background: rgba(16, 185, 129, 0.1);
  color: var(--sc-positive);
}

/* Description block: summary -> Read more. */
.sc-product-desc-block {
  margin-top: 8px;
}

/* Pick breakdown line (neutral metadata). */
.sc-product-picks-summary {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--sc-text-muted);
}

/* Demand proof + savings (scarcity / discount — rose, like the main card). */
.sc-product-demand,
.sc-product-savings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
}

.sc-product-demand {
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.sc-product-savings {
  margin-top: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* Countdown to first game (amber urgency pill). */
.sc-product-countdown {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

/* Guarantee explainer (risk reversal). */
.sc-product-guarantee {
  margin-top: 12px;
}

.sc-guarantee-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sc-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-positive);
  cursor: pointer;
}

.sc-guarantee-toggle:hover {
  text-decoration: underline;
}

.sc-guarantee-terms {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sc-text-muted);
}

/* Left column of the footer holds price + per-day + savings stacked. */
.sc-product-price-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-product-perday {
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-primary);
}


/* ===== Free Picks Grid ===== */
.sc-free-picks-grid {
  display: grid;
  gap: 16px;
}

@media (max-width: 900px) {
  .sc-free-picks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .sc-free-picks-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Odds Table ===== */
.sc-odds-market-tabs {
  display: flex;
  gap: 4px;
}

.sc-odds-tab {
  padding: 6px 14px;
  border: 1px solid var(--sc-border);
  background: var(--sc-bg);
  color: var(--sc-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--sc-radius);
  transition: all 0.15s;
}

.sc-odds-tab:hover {
  background: var(--sc-bg-alt);
}

.sc-odds-tab-active {
  background: var(--sc-primary);
  color: #fff;
  border-color: var(--sc-primary);
}

.sc-odds-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sc-odds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
}

.sc-odds-table thead {
  background: var(--sc-bg-alt);
}

.sc-odds-table th {
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--sc-text-muted);
  border-bottom: 2px solid var(--sc-border);
  white-space: nowrap;
}

.sc-odds-th-game {
  text-align: left !important;
  min-width: 200px;
  position: sticky;
  left: 0;
  background: var(--sc-bg-alt);
  z-index: 1;
}

.sc-odds-th-book {
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sc-odds-row {
  border-bottom: 1px solid var(--sc-border);
}

.sc-odds-row:hover {
  background: var(--sc-bg-alt);
}

.sc-odds-row-live {
  background: rgba(37, 99, 235, 0.04);
}

.sc-odds-td-game {
  padding: 10px 12px;
  position: sticky;
  left: 0;
  background: var(--sc-bg);
  z-index: 1;
}

.sc-odds-row:hover .sc-odds-td-game {
  background: var(--sc-bg-alt);
}

.sc-odds-game-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sc-odds-game-time {
  font-size: 12px;
  color: var(--sc-text-muted);
  min-width: 48px;
  padding-top: 2px;
}

.sc-odds-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-odds-team {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-odds-rotation {
  font-size: 12px;
  color: var(--sc-text-muted);
  min-width: 24px;
}

.sc-odds-team-name {
  font-weight: 500;
  color: var(--sc-text);
  white-space: nowrap;
}

.sc-odds-score {
  font-weight: 700;
  color: var(--sc-text);
  margin-left: auto;
}

.sc-odds-td-book {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

.sc-odds-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-odds-cell-line {
  display: flex;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.sc-odds-line {
  font-weight: 600;
  color: var(--sc-text);
}

.sc-odds-price {
  font-size: 13px;
  color: var(--sc-text-muted);
}

.sc-odds-ml {
  font-weight: 600;
  font-size: 14px;
  color: var(--sc-text);
}

/* ===== Odds Accordion (All Sports) ===== */
.sc-odds-summary {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin-bottom: 12px;
}

.sc-odds-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-odds-accordion {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  background: var(--sc-bg);
}

.sc-odds-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: var(--sc-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--sc-text);
  transition: background-color 0.15s;
}

.sc-odds-accordion-header:hover {
  background: var(--sc-bg-alt);
}

.sc-odds-accordion-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-odds-sport-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sc-primary);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.sc-odds-accordion-info {
  display: flex;
  flex-direction: column;
}

.sc-odds-sport-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-text);
}

.sc-odds-sport-count {
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-odds-chevron {
  width: 18px;
  height: 18px;
  color: var(--sc-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sc-odds-chevron-open {
  transform: rotate(180deg);
}

.sc-odds-accordion-body {
  border-top: 1px solid var(--sc-border);
}

/* Compact table for all-sports view */
.sc-odds-table-compact th,
.sc-odds-table-compact td {
  padding: 6px 10px;
}

.sc-odds-th-consensus {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sc-text-muted);
  padding: 6px 10px;
  white-space: nowrap;
}

.sc-odds-td-consensus {
  text-align: center;
  padding: 6px 10px;
  vertical-align: middle;
}

/* ===== Featured Cappers Widget ===== */
.sc-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.sc-featured-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  text-decoration: none;
  color: var(--sc-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.sc-featured-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--sc-primary);
}

.sc-featured-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sc-featured-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--sc-border);
}

.sc-featured-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-alt);
  color: var(--sc-primary);
  font-weight: 700;
  font-size: 18px;
}

.sc-featured-info {
  flex: 1;
  min-width: 0;
}

.sc-featured-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-featured-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.sc-featured-record {
  font-size: 16px;
  font-weight: 700;
}

.sc-featured-profit {
  font-size: 15px;
  font-weight: 600;
}

.sc-featured-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--sc-text-muted);
}

.sc-featured-meta .sc-positive {
  font-weight: 500;
}

.sc-featured-sports {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.sc-sport-badge-more {
  font-size: 11px;
  color: var(--sc-text-muted);
  padding: 2px 6px;
}

/* ===== Top by Sport Widget ===== */
.sc-sport-leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sc-sport-leader-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  overflow: hidden;
}

.sc-sport-leader-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-alt);
}

.sc-sport-leader-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--sc-primary);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}

.sc-sport-leader-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-sport-leader-list {
  padding: 4px;
}

.sc-sport-leader-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sc-radius);
  text-decoration: none;
  color: var(--sc-text);
  transition: background-color 0.1s;
}

.sc-sport-leader-row:hover {
  background: var(--sc-bg-alt);
}

.sc-sport-leader-rank {
  font-size: 14px;
  font-weight: 800;
  color: var(--sc-border);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.sc-sport-leader-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sc-sport-leader-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-alt);
  color: var(--sc-primary);
  font-weight: 700;
  font-size: 14px;
}

.sc-sport-leader-info {
  flex: 1;
  min-width: 0;
}

.sc-sport-leader-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-sport-leader-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sc-text-muted);
  margin-top: 2px;
}

.sc-sport-leader-profit {
  font-weight: 700;
}

/* ===== Hot Streaks Widget ===== */
.sc-hot-streaks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.sc-hot-streak-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  overflow: hidden;
}

.sc-hot-streak-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sc-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-hot-streak-header-yesterday { background: rgba(16, 185, 129, 0.06); }
.sc-hot-streak-header-7days { background: rgba(59, 130, 246, 0.06); }
.sc-hot-streak-header-30days { background: rgba(139, 92, 246, 0.06); }
.sc-hot-streak-header-season { background: rgba(245, 158, 11, 0.06); }

.sc-hot-streak-title {
  color: var(--sc-text);
}

.sc-hot-streak-body {
  padding: 4px;
}

.sc-hot-streak-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--sc-radius);
  text-decoration: none;
  color: var(--sc-text);
  transition: background-color 0.1s;
}

.sc-hot-streak-row:hover {
  background: var(--sc-bg-alt);
}

.sc-hot-streak-rank {
  font-size: 12px;
  font-weight: 800;
  color: var(--sc-border);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.sc-hot-streak-info {
  flex: 1;
  min-width: 0;
}

.sc-hot-streak-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-hot-streak-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sc-text-muted);
  margin-top: 1px;
}

.sc-hot-streak-profit {
  font-weight: 700;
}

/* ===== Trends Widget ===== */
.sc-trends-filters {
  margin-bottom: 14px;
}

.sc-trends-sport-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.sc-trends-sport-tab {
  flex-shrink: 0;
  padding: 6px 14px !important;
  margin: 0 !important;
  border-radius: var(--sc-radius);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--sc-border);
  cursor: pointer;
  background: var(--sc-bg-alt);
  color: var(--sc-text);
  font-family: var(--sc-font);
  transition: background-color 0.15s, color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.sc-trends-sport-tab:hover {
  background: var(--sc-border);
  color: var(--sc-text);
}

.sc-trends-sport-tab-active {
  background: var(--sc-primary);
  color: #fff;
  border-color: var(--sc-primary);
}

.sc-trends-sport-tab-active:hover {
  background: var(--sc-primary-hover);
  color: #fff;
  border-color: var(--sc-primary-hover);
}

.sc-trends-dropdowns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-trends-dropdowns .sc-select {
  flex: 1;
  min-width: 120px;
}

/* Trends table */
.sc-trends-table .sc-th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc-trends-th-rank {
  width: 36px;
}

.sc-trends-td-rank {
  width: 36px;
}

.sc-trends-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-text-muted);
}

.sc-trends-rank-top {
  color: #f59e0b;
}

.sc-trends-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.sc-trends-sortable:hover {
  color: var(--sc-primary);
}

.sc-trends-sort-active {
  color: var(--sc-primary) !important;
}

.sc-trends-bet-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--sc-bg-alt);
  color: var(--sc-text-muted);
  text-transform: capitalize;
}

.sc-trends-sc-score {
  font-weight: 700;
}

.sc-score-excellent {
  color: var(--sc-positive) !important;
}

.sc-score-good {
  color: var(--sc-primary) !important;
}

.sc-text-muted {
  color: var(--sc-text-muted);
}

.sc-hide-mobile {
  /* visible by default */
}

@media (max-width: 640px) {
  .sc-hide-mobile {
    display: none;
  }
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .sc-capper-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sc-capper-sports {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }

  .sc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sc-packages-grid {
    grid-template-columns: 1fr;
  }

  .sc-filters {
    flex-direction: column;
  }

  .sc-select {
    width: 100%;
  }

  .sc-field-row {
    flex-direction: column;
    gap: 0;
  }

  .sc-account-tabs {
    gap: 0;
  }

  .sc-account-tab {
    padding: 8px 10px;
    font-size: 12px;
  }

  .sc-search-wrap {
    width: 100%;
  }

  .sc-pagination {
    flex-wrap: wrap;
  }
}

/* ===== Search Input ===== */
.sc-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.sc-search-input {
  padding-left: 32px !important;
}

.sc-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--sc-text-muted);
  pointer-events: none;
}

/* ===== Results Count ===== */
.sc-results-count {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin-bottom: 10px;
}

/* ===== Pagination ===== */
.sc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sc-border);
}

.sc-pagination-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-family: var(--sc-font);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sc-pagination-btn:hover:not(:disabled):not(.sc-pagination-active) {
  background: var(--sc-bg-alt);
  border-color: var(--sc-text-muted);
}

.sc-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sc-pagination-active {
  background: var(--sc-primary);
  border-color: var(--sc-primary);
  color: #fff;
  font-weight: 600;
}

.sc-pagination-ellipsis {
  padding: 6px 4px;
  font-size: 13px;
  color: var(--sc-text-muted);
}

/* ===== Shared: Accent Button ===== */

.sc-btn-accent {
  background: var(--sc-accent);
  color: #fff;
  border-color: var(--sc-accent);
  font-weight: 600;
}

.sc-btn-accent:hover:not(:disabled) {
  filter: brightness(0.9);
}

/* ===== Shared: Small Select ===== */

.sc-select-sm {
  padding: 3px 22px 3px 8px;
  font-size: 12px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
}

.sc-select-sm:focus {
  outline: 2px solid var(--sc-primary);
  outline-offset: -1px;
}

/* ===== Registration CTA Widget ===== */

/* Register CTA — the embed grammar (2026-09-02, replacing the blue
   marketing slab): token card like the podium's gradient ground, proof
   rows in the records grammar, emerald solid CTA per button canon. */
.sc-register-cta {
  background: linear-gradient(to bottom right, var(--sc-elevated), var(--sc-bg));
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  padding: 24px 20px 18px;
  text-align: center;
  overflow: hidden;
}

.sc-register-cta-headline {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sc-text);
  line-height: 1.3;
}

.sc-register-cta-subtext {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--sc-text-muted);
  line-height: 1.5;
}

.sc-register-cta-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sc-register-cta-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sc-register-cta-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-register-cta-nums {
  font-family: var(--sc-mono);
  font-size: 11.5px;
  color: var(--sc-text-muted);
}

.sc-register-cta-nums b {
  font-weight: 700;
}

.sc-register-cta-btn {
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 26px;
}

.sc-register-cta-ambient {
  margin-top: 12px;
  font-size: 11px;
  color: var(--sc-faint);
}

/* Card variant: the narrow-column sibling — tighter, proof stacks. */
.sc-register-cta-card {
  padding: 18px 16px 14px;
}
.sc-register-cta-card .sc-register-cta-headline { font-size: 15.5px; }
.sc-register-cta-card .sc-register-cta-proof { flex-direction: column; gap: 8px; }

/* ===== Mini Leaderboard Widget ===== */

.sc-mini-leaderboard {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  font-family: var(--sc-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sc-text);
  max-width: 360px;
}

/* Reset images inside mini leaderboard to prevent host CSS interference */
.sc-mini-leaderboard img {
  max-width: none;
  height: auto;
  border: none;
  margin: 0;
  padding: 0;
}

.sc-mini-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-alt);
  gap: 8px;
}

.sc-mini-lb-title {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-text);
  line-height: 1.3;
}

.sc-mini-lb-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sc-mini-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--sc-text);
  border-bottom: 1px solid var(--sc-border);
  transition: background 0.15s;
  cursor: pointer;
}

.sc-mini-lb-row:last-child {
  border-bottom: none;
}

.sc-mini-lb-row:hover {
  background: var(--sc-bg-alt);
}

.sc-mini-lb-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--sc-border);
  width: 18px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.sc-mini-lb-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.sc-mini-lb-avatar-initial {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-alt);
  color: var(--sc-primary);
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-mini-lb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-mini-lb-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  color: var(--sc-text);
}

.sc-mini-lb-record {
  font-size: 11px;
  color: var(--sc-text-muted);
  line-height: 1.2;
}

.sc-mini-lb-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}

.sc-mini-lb-profit {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sc-mini-lb-profit.sc-positive {
  color: var(--sc-positive);
}

.sc-mini-lb-profit.sc-negative {
  color: var(--sc-negative);
}

.sc-mini-lb-winpct {
  font-size: 11px;
  color: var(--sc-text-muted);
  line-height: 1.2;
}

.sc-mini-lb-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--sc-border);
  text-align: center;
  background: var(--sc-bg);
}

.sc-mini-lb-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-primary);
  text-decoration: none;
}

.sc-mini-lb-view-all:hover {
  text-decoration: underline;
}

/* ===== Top Plays Widget (Best Bets) ===== */

.sc-top-plays {
  font-family: var(--sc-font);
  font-size: 14px;
  color: var(--sc-text);
}

.sc-top-plays-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.sc-top-plays-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--sc-text);
  line-height: 1.2;
}

.sc-top-plays-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--sc-text-muted);
  line-height: 1.4;
}

.sc-top-plays-grid {
  margin-bottom: 20px;
}

/* Card */
.sc-top-play-card {
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.sc-top-play-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Badge bar */
.sc-top-play-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--sc-bg-alt);
  border-bottom: 1px solid var(--sc-border);
}

.sc-top-play-sport {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sc-top-play-type {
  font-size: 11px;
  color: var(--sc-text-muted);
  font-weight: 500;
}

/* Period indicator (1st Half, 1st 5 Inn, etc.) — used across widgets */
.sc-top-play-period,
.sc-epc-period-badge,
.sc-badge-period {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #3730a3;
  margin-left: 6px;
}

.sc-top-play-badge-star {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* Matchup */
.sc-top-play-matchup {
  padding: 16px 16px 12px;
  text-align: center;
}

.sc-top-play-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sc-top-play-team {
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-top-play-vs {
  font-size: 13px;
  color: var(--sc-text-muted);
  font-weight: 400;
}

.sc-top-play-time {
  display: block;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-top: 4px;
}

/* Locked indicator */
.sc-top-play-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  margin: 0 16px;
  background: #f8fafc;
  border: 1px dashed var(--sc-border);
  border-radius: var(--sc-radius);
  color: var(--sc-text-muted);
  font-size: 13px;
  font-weight: 500;
}

.sc-top-play-lock-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Capper */
.sc-top-play-capper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.sc-top-play-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.sc-top-play-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-alt);
  color: var(--sc-primary);
  font-weight: 700;
  font-size: 15px;
}

.sc-top-play-capper-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sc-top-play-capper-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-top-play-capper-name:hover {
  text-decoration: underline;
}

.sc-top-play-record {
  font-size: 11px;
  color: var(--sc-positive);
  font-weight: 600;
}

/* CTA button */
.sc-top-play-cta {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: var(--sc-radius);
  cursor: pointer;
  transition: filter 0.15s;
}

.sc-top-play-cta:hover {
  filter: brightness(0.9);
}

/* Footer */
.sc-top-plays-footer {
  text-align: center;
  padding: 16px;
}

.sc-top-plays-footer-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-primary) !important;
  text-decoration: none;
}

.sc-top-plays-footer-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .sc-top-plays-header {
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== Account Login Prompt ===== */

.sc-account-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
}

/* ===== Pick Filters ===== */

.sc-picks-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ===== Pick Sections ===== */

.sc-picks-section {
  margin-bottom: 20px;
}

.sc-picks-section:last-child {
  margin-bottom: 0;
}

.sc-picks-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sc-picks-section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-dot-upcoming { background: var(--sc-positive); }
.sc-dot-live { background: #3b82f6; animation: sc-pulse 2s infinite; }
.sc-dot-grading { background: #f59e0b; }
.sc-dot-graded { background: var(--sc-text-muted); }

@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sc-picks-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-text);
}

/* ===== Email-Style Pick Cards (sc-epc) ===== */

.sc-premium-pick-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .sc-premium-pick-list {
    grid-template-columns: 1fr 1fr;
  }
}

.sc-epc {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--sc-border);
  background: var(--sc-bg);
  font-family: var(--sc-font);
}

/* Header */
.sc-epc-header {
  padding: 24px 20px 20px;
  text-align: center;
  background: var(--sc-bg-alt);
}

.sc-epc-capper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--sc-primary);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.sc-epc-capper-img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
}
.sc-epc-capper-initial {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sc-epc-capper-name {
  color: var(--sc-primary);
  text-decoration: none;
  font-weight: 700;
}
.sc-epc-capper-name:hover {
  opacity: 0.8;
}

.sc-epc-matchup {
  font-size: 22px;
  font-weight: 800;
  color: var(--sc-text);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.sc-epc-rotation {
  font-size: 11px;
  color: var(--sc-text-muted);
  font-family: monospace;
  margin-bottom: 4px;
}

.sc-epc-meta {
  font-size: 13px;
  color: var(--sc-text-muted);
  font-weight: 500;
}

.sc-epc-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.sc-epc-badge-top {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  border: 1px solid rgba(16, 185, 129, 0.4);
  letter-spacing: 0.5px;
}

.sc-epc-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.sc-epc-badge-win { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.sc-epc-badge-loss { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.sc-epc-badge-push { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.sc-epc-badge-pending { background: rgba(100, 116, 139, 0.2); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.3); }
.sc-epc-badge-free { background: rgba(16, 185, 129, 0.12); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
.sc-epc-badge-live { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); }
/* In the badges row (Top Play + status) the status badge must not carry the
   standalone bottom margin, or it sits ~4px above the Top Play badge. */
.sc-epc-badges .sc-epc-badge { margin-bottom: 0; }

/* Stats bar */
.sc-epc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sc-bg-alt);
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}

.sc-epc-stat {
  padding: 16px 12px;
  text-align: center;
}

.sc-epc-stat-left {
  border-right: 1px solid var(--sc-border);
}

.sc-epc-stat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sc-epc-bettype-badge {
  display: inline-block;
  background: var(--sc-bg);
  color: var(--sc-primary);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--sc-border);
  letter-spacing: 0.5px;
}

.sc-epc-stat-value {
  font-size: 18px;
  color: var(--sc-primary);
  font-weight: 800;
}

.sc-epc-positive { color: var(--sc-positive); }
.sc-epc-negative { color: var(--sc-negative); }

/* Analysis section */
.sc-epc-analysis-section {
  padding: 16px 20px;
  background: var(--sc-bg);
}

.sc-epc-analysis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sc-epc-analysis-accent {
  width: 4px;
  height: 18px;
  background: var(--sc-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.sc-epc-analysis-body {
  background: var(--sc-bg-alt);
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid var(--sc-border);
  color: var(--sc-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.sc-epc-analysis {
  padding: 16px 20px;
  color: var(--sc-text-muted);
  font-size: 14px;
  line-height: 1.7;
  background: var(--sc-bg-alt);
}
.sc-epc-analysis-wrap {
  border-top: 1px solid var(--sc-border);
}
.sc-epc-analysis-toggle {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-text-muted);
  cursor: pointer;
  font-family: var(--sc-font);
  letter-spacing: 0.3px;
}

.sc-epc-analysis-toggle:hover {
  color: var(--sc-primary);
}

.sc-show-more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-primary) !important;
  cursor: pointer;
  background: none;
  border: 1px solid var(--sc-border) !important;
  border-radius: 6px;
  font-family: var(--sc-font);
}
.sc-show-more:hover {
  background: var(--sc-bg-alt);
}

@media (max-width: 480px) {
  .sc-epc-matchup { font-size: 18px; }
  .sc-epc-stat-value { font-size: 16px; }
}

/* ===== Acquisition badges (how an order/subscription was acquired) ===== */
.sc-acq-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.sc-acq-purchased { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.sc-acq-credits   { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.sc-acq-guarantee { background: rgba(16, 185, 129, 0.14); color: #059669; }
.sc-acq-comp      { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }
.sc-acq-free      { background: rgba(100, 116, 139, 0.16); color: #475569; }

/* ===== Order item capper line ===== */
.sc-order-header-badges { display: inline-flex; align-items: center; gap: 8px; }
.sc-order-item-info { display: flex; flex-direction: column; gap: 1px; }
.sc-order-item-capper { font-size: 12px; font-weight: 700; color: var(--sc-primary); }
.sc-order-item-name { color: var(--sc-text); }

/* ===== Credits tab ===== */
.sc-credits-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg-alt);
  margin-bottom: 20px;
}
.sc-credits-balance-label { font-size: 14px; font-weight: 600; color: var(--sc-text-muted); }
.sc-credits-balance-value { font-size: 28px; font-weight: 800; color: var(--sc-text); }
.sc-credits-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sc-credit-txn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
}
.sc-credit-txn-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-credit-txn-type { font-size: 13px; font-weight: 700; color: var(--sc-text); }
.sc-credit-txn-desc { font-size: 12px; color: var(--sc-text-muted); overflow: hidden; text-overflow: ellipsis; }
.sc-credit-txn-date { font-size: 11px; color: var(--sc-text-muted); }
.sc-credit-txn-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.sc-credit-txn-amount { font-size: 15px; font-weight: 700; }
.sc-credit-txn-balance { font-size: 11px; color: var(--sc-text-muted); }

/* ===== My Picks: card/list view toggle + compact list table ===== */
.sc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  margin-left: auto;
}
.sc-view-toggle-btn {
  background: var(--sc-bg);
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text-muted);
  cursor: pointer;
  font-family: var(--sc-font);
}
.sc-view-toggle-btn + .sc-view-toggle-btn { border-left: 1px solid var(--sc-border); }
.sc-view-toggle-btn.sc-active { background: var(--sc-primary); color: #fff; }

.sc-picks-listwrap {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow-x: auto;
}
.sc-picks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sc-picks-table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--sc-text-muted);
  background: var(--sc-bg-alt);
  padding: 9px 12px;
  border-bottom: 1px solid var(--sc-border);
  white-space: nowrap;
}
.sc-picks-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--sc-border);
  color: var(--sc-text);
}
.sc-picks-table tbody tr:last-child td { border-bottom: none; }
.sc-picks-table tbody tr:hover td { background: var(--sc-bg-alt); }
.sc-tr-c { text-align: center; }
.sc-td-strong { font-weight: 600; }
.sc-td-nowrap { white-space: nowrap; }
.sc-td-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--sc-text-muted); }
.sc-td-play { font-weight: 600; color: var(--sc-primary); }
.sc-td-star { color: #f59e0b; }
.sc-live-txt { color: #ef4444; font-weight: 700; }

/* ===================================================================
   Records grammar (#1239 Round 1 — leaderboard family)
   The shipped /leaderboard surface as sc- classes: card container with
   attached toolbar, sport chips, top-3 podium, banded table, profit as
   the only colored stat. All colors ride the theme tokens, so
   SC.init({ theme: 'dark' }) flips the whole family at once.
   NOTE: the defensive host-theme reset above forces text-transform /
   letter-spacing back to normal with !important, so the uppercase label
   styles here must carry !important too.
   =================================================================== */

.sc-rec { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 12px; overflow: hidden; }

.sc-rec-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
.sc-rec-title { font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--sc-text); }
.sc-rec-sub { display: block; font-size: 11px; font-weight: 500; color: var(--sc-faint); margin-top: 1px; }

/* Sport chips — marquee order, +N overflow expands in place */
.sc-chiprow { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.sc-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 999px; background: var(--sc-chip-bg); color: var(--sc-chip-text); border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.sc-chip:hover { color: var(--sc-text); }
.sc-chip-on, .sc-chip-on:hover { background: var(--sc-chip-on-bg); color: var(--sc-chip-on-text); }
.sc-chip-more { background: transparent; border-color: var(--sc-border); color: var(--sc-faint); }

/* Top-3 podium — auto-fit so cards stack instead of squeezing (the
   "View picks" bleed fix: the foot row also wraps as a flex fallback). */
.sc-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 10px; padding: 10px 16px 14px; }
/* Gradient, not a flat --sc-elevated: a verbatim mirror of RecordsPodium.vue's
   `bg-gradient-to-br from-surface-raised to-surface-card`. In dark mode
   --sc-hair and --sc-elevated are the same slate (#1e293b), so a flat pod
   erased its own .sc-pod-foot rule; against the gradient's card-ward end the
   hairline reads, exactly as it does on the site. Light runs #f9fafb->#ffffff
   and still reads as a card. */
.sc-pod { position: relative; background: linear-gradient(to bottom right, var(--sc-elevated), var(--sc-bg)); border: 1px solid var(--sc-border); border-radius: 10px; padding: 12px 12px 12px 16px; overflow: hidden; min-width: 0; }
.sc-pod::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc-pod-rail, transparent); }
.sc-pod-gold { --sc-pod-rail: #f59e0b; }
.sc-pod-silver { --sc-pod-rail: #94a3b8; }
.sc-pod-bronze { --sc-pod-rail: #b45309; }
.sc-pod-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-rankchip { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.sc-pod-gold .sc-rankchip { background: #f59e0b; color: #451a03; }
.sc-pod-silver .sc-rankchip { background: #cbd5e1; color: #1e293b; }
.sc-pod-bronze .sc-rankchip { background: #b45309; color: #fff7ed; }
.sc-pod-name { font-size: 13.5px !important; font-weight: 700 !important; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.sc-pod-name:hover { text-decoration: underline; }
.sc-pod-rec { font-family: var(--sc-mono) !important; font-size: 10.5px; color: var(--sc-text-muted); margin: 4px 0 10px 30px; }
.sc-pod-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--sc-hair); padding-top: 9px; }
.sc-pod-profit { font-family: var(--sc-mono) !important; font-size: 17px; font-weight: 700; color: var(--sc-positive); }
.sc-pod-profit.sc-loss { color: var(--sc-negative); }

/* Button canon: solid for #1, outline for the rest */
.sc-cta-solid, .sc-cta-line { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; line-height: 1; border-radius: 7px; padding: 7px 10px; cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none; }
.sc-cta-solid { background: var(--sc-cta); color: var(--sc-cta-text); border: 1px solid transparent; }
.sc-cta-solid:hover { background: var(--sc-cta-hover); }
.sc-cta-line { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-border); }
.sc-cta-line:hover { border-color: var(--sc-text-muted); }

/* Avatars — photo or initials fallback */
.sc-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sc-chip-bg); color: var(--sc-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-avatar-sm { width: 26px; height: 26px; font-size: 10px; }

/* Verified seal — SVG only (icon-language ruling), colored by token */
.sc-seal { display: inline-flex; flex-shrink: 0; color: var(--sc-positive); }
.sc-seal svg { width: 12px; height: 12px; display: block; }

/* Ambient provenance line */
.sc-rec-ambient { padding: 8px 16px; font-size: 11.5px; color: var(--sc-faint); border-top: 1px solid var(--sc-hair); }
.sc-rec-ambient a { color: var(--sc-positive); text-decoration: none; }

/* The records table — header band on ELEVATED, banded rows, mono numerals */
.sc-rec-table { width: 100%; border-collapse: collapse; }
.sc-rec-table th { background: var(--sc-elevated); font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--sc-text-muted); font-weight: 600; text-align: left; padding: 8px 10px; white-space: nowrap; border-bottom: none; }
.sc-rec-table th.sc-text-right { text-align: right; }
.sc-rec-table th.sc-text-center { text-align: center; }
.sc-rec-table th:first-child { padding-left: 16px; }
.sc-rec-table th.sc-th-sortable { cursor: pointer; user-select: none; }
.sc-rec-table th.sc-th-sortable:hover { color: var(--sc-text); }
.sc-rec-table th.sc-th-profit { color: var(--sc-positive); }
.sc-rec-table td { padding: 9px 10px; border-top: 1px solid var(--sc-hair); font-size: 13px; color: var(--sc-text); vertical-align: middle; }
.sc-rec-table tbody tr:nth-child(even) td { background: var(--sc-band); }
.sc-td-rank { font-family: var(--sc-mono) !important; color: var(--sc-text-muted); white-space: nowrap; padding-left: 16px !important; }
.sc-move { font-size: 9px; margin-left: 3px; }
.sc-move-up { color: var(--sc-positive); }
.sc-move-down { color: var(--sc-negative); }
.sc-td-who { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.sc-td-who a, .sc-td-who a:link, .sc-td-who a:visited { color: var(--sc-text); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.sc-td-who a:hover { text-decoration: underline; }
.sc-td-recmono { font-family: var(--sc-mono) !important; color: var(--sc-text-muted); white-space: nowrap; }
.sc-td-win { font-family: var(--sc-mono) !important; color: var(--sc-text); }
.sc-td-profit { font-family: var(--sc-mono) !important; font-weight: 700; color: var(--sc-positive); white-space: nowrap; }
.sc-td-profit.sc-loss { color: var(--sc-negative); }
.sc-td-roi { font-family: var(--sc-mono) !important; color: var(--sc-text-muted); white-space: nowrap; }
.sc-td-go { text-align: right; padding-right: 16px !important; }
.sc-td-go a { color: var(--sc-positive); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sc-td-go a:hover { text-decoration: underline; }

.sc-rec-foot { display: flex; justify-content: center; padding: 11px; border-top: 1px solid var(--sc-hair); }
.sc-rec-foot a { color: var(--sc-positive); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sc-rec-foot a:hover { text-decoration: underline; }

/* ===================================================================
   Records grammar — family extensions (#1239 rounds 2-5: mini rows,
   card grids, trends columns). Same tokens; theme:'dark' flips all.
   =================================================================== */

/* Mini rows — mini-leaderboard, hot-streaks, top-by-sport */
.sc-mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.sc-mini-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--sc-text); margin: 0; }
.sc-mini-sub { font-size: 10px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--sc-faint); font-weight: 600; white-space: nowrap; }
.sc-mini-row { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-top: 1px solid var(--sc-hair); text-decoration: none; color: var(--sc-text); }
.sc-mini-row:hover { background: var(--sc-band); }
.sc-mini-rank { font-family: var(--sc-mono) !important; font-size: 11px; color: var(--sc-faint); width: 14px; flex-shrink: 0; }
.sc-mini-info { flex: 1; min-width: 0; }
.sc-mini-name { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-mini-recline { display: block; font-family: var(--sc-mono) !important; font-size: 10px; color: var(--sc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mini-profit { font-family: var(--sc-mono) !important; font-weight: 700; font-size: 12.5px; color: var(--sc-positive); flex-shrink: 0; }
.sc-mini-profit.sc-loss { color: var(--sc-negative); }
.sc-mini-foot { padding: 9px 14px; text-align: center; border-top: 1px solid var(--sc-hair); }
.sc-mini-foot a { color: var(--sc-positive); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sc-mini-foot a:hover { text-decoration: underline; }

/* Card grids — hot-streaks (period cards), top-by-sport (sport cards) */
.sc-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sc-rec-grid .sc-rec { border-radius: 10px; }
.sc-rec-cardhead { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--sc-elevated); border-bottom: 1px solid var(--sc-hair); font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--sc-text-muted); }
.sc-rec-cardhead .sc-mini-sub { margin-left: auto; }
.sc-rec-grid .sc-mini-row:first-of-type { border-top: none; }

/* Trends — toolbar selects cluster + neutral trailing columns */
.sc-rec-selects { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sc-td-ctx { font-size: 11px; color: var(--sc-faint); font-weight: 400; white-space: nowrap; }
.sc-td-dim { font-family: var(--sc-mono) !important; font-size: 12.5px; color: var(--sc-faint); white-space: nowrap; }
.sc-td-score { font-family: var(--sc-mono) !important; font-size: 12.5px; font-weight: 700; color: var(--sc-text); white-space: nowrap; }

/* ============================================================
   R6 — roster family (#1239, rulings D6-A/D7-A/D8 2026-08-31)
   Cappers Directory rows + Featured Cappers chart-as-card band.
   Tokens only — theme:'dark' flips these with the rest of the SDK.
   ============================================================ */

/* Cappers Directory — the site's roster rows */
.sc-cappers { container-type: inline-size; }
.sc-roster-search { max-width: 180px; }
.sc-chip-ct { font-family: var(--sc-mono); font-size: 9.5px; opacity: 0.7; margin-left: 4px; }
.sc-roster { display: flex; flex-direction: column; }
.sc-roster-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--sc-hair); text-decoration: none; color: var(--sc-text); }
.sc-roster-row:hover { background: var(--sc-band); }
.sc-roster-id { flex: 1.2; min-width: 0; }
.sc-roster-name { display: block; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-roster-sub { display: block; font-family: var(--sc-mono); font-size: 10.5px; color: var(--sc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-roster-avail { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-roster-avail-live { color: var(--sc-positive); font-weight: 600; }
.sc-roster-stat { text-align: right; white-space: nowrap; }
.sc-roster-stat b { display: block; font-family: var(--sc-mono); font-size: 13.5px; font-weight: 700; color: var(--sc-text); }
.sc-roster-stat b.sc-roster-stat-profit { color: var(--sc-positive); }
.sc-roster-stat b.sc-roster-stat-quiet { color: var(--sc-faint); font-weight: 400; }
.sc-roster-stat i { font-style: normal; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); }
.sc-roster-cta { font-size: 11.5px; font-weight: 600; border: 1px solid var(--sc-border); color: var(--sc-text); border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.sc-roster-row:hover .sc-roster-cta { border-color: var(--sc-positive); color: var(--sc-positive); }
.sc-roster-foot { display: block; width: 100%; text-align: center; padding: 11px; border-top: 1px solid var(--sc-hair); background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--sc-cta); cursor: pointer; }
/* The availability line yields first in a narrow column (sidebar embeds). */
@container (max-width: 520px) {
  .sc-roster-avail { display: none; }
}
@container (max-width: 380px) {
  .sc-roster-cta { display: none; }
}

/* Featured Cappers — chart-as-card band (the curve IS the card ground) */
.sc-feat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 14px 16px; }
.sc-feat-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--sc-border); border-radius: 10px; padding: 12px 12px 34px; background: linear-gradient(to bottom right, var(--sc-elevated), var(--sc-bg)); overflow: hidden; text-decoration: none; color: var(--sc-text); min-width: 0; }
.sc-feat-card-lead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #f59e0b; }
.sc-feat-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-feat-idcol { min-width: 0; }
.sc-feat-name { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-feat-hot { display: inline-block; margin-top: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: #b45309; background: #fef3c744; border: 1px solid #f59e0b55; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.sc-feat-profit { display: block; margin-top: 9px; font-family: var(--sc-mono); font-size: 19px; font-weight: 700; color: var(--sc-positive); position: relative; z-index: 1; }
.sc-feat-profit i { display: block; font-style: normal; font-family: var(--sc-font); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); }
.sc-feat-cta { position: relative; z-index: 1; align-self: flex-start; margin-top: 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--sc-border); color: var(--sc-text); background: var(--sc-bg); border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.sc-feat-cta-solid { background: var(--sc-cta); border-color: var(--sc-cta); color: var(--sc-cta-text); }
.sc-feat-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; }
.sc-feat-spark-fill { fill: var(--sc-positive); opacity: 0.13; }
.sc-feat-spark-line { stroke: var(--sc-positive); stroke-width: 1.5; }

/* ============================================================
   R7 — pick family (#1239): the ticket-band pick card (sc-pk).
   Site anatomy (#1093/#1120/#1129): state rail → capper band →
   game zone (color tiles) → the bet as the card's FOURTH BAND —
   deeper tint run wall to wall, stub scoops, no rule on the seam.
   ============================================================ */
.sc-pk { position: relative; overflow: hidden; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 10px; padding-left: 4px; font-family: inherit; color: var(--sc-text); display: flex; flex-direction: column; }
.sc-pk-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 10; }
.sc-pk-rail-pending { background: #f59e0b; }
.sc-pk-rail-live { background: #94a3b8; }
.sc-pk-rail-locked { background: #64748b; }
.sc-pk-rail-win { background: #10b981; }
.sc-pk-rail-loss { background: #ef4444; }
.sc-pk-rail-push { background: #94a3b8; }
.sc-pk-capper { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--sc-hair); text-decoration: none; color: var(--sc-text); }
.sc-pk-capper-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-pk-game { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 14px 11px; }
.sc-pk-teams { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sc-pk-teams-bare { font-size: 11px; font-weight: 700; color: var(--sc-text-muted); text-transform: uppercase; }
.sc-pk-teamline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-pk-tile { display: inline-flex; height: 22px; min-width: 30px; flex: none; align-items: center; justify-content: center; border-radius: 6px; padding: 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; }
.sc-pk-tile-neutral { background: var(--sc-chip-bg); color: var(--sc-chip-text); }
.sc-pk-teamname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.sc-pk-at { font-weight: 400; color: var(--sc-faint); }
.sc-pk-gamemeta { flex: none; text-align: right; line-height: 1.35; }
.sc-pk-league { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-faint); }
.sc-pk-time { font-family: var(--sc-mono); font-size: 10.5px; font-weight: 600; color: var(--sc-time); }
.sc-pk-started { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-faint); }
.sc-pk-period { font-size: 10px; color: var(--sc-faint); }
/* The bet band: NO rule on the seam — the tint change plus the scoops
   carry it (#1120 R5; dashed + emerald rules tried on-site and cut). */
.sc-pk-band { position: relative; background: var(--sc-band-deep); padding: 9px 14px 11px; margin-top: auto; }
.sc-pk-scoop { position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--sc-bg); pointer-events: none; }
.sc-pk-scoop-l { left: -7px; }
.sc-pk-scoop-r { right: -7px; }
.sc-pk-bandhead { display: flex; align-items: center; gap: 6px; }
.sc-pk-chip { display: inline-flex; height: 17px; flex: none; align-items: center; border: 1px solid; border-radius: 4px; padding: 0 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-pk-chip-spread { color: #3b82f6; border-color: #3b82f666; background: #3b82f614; }
.sc-pk-chip-total { color: #8b5cf6; border-color: #8b5cf666; background: #8b5cf614; }
.sc-pk-chip-ml { color: #14b8a6; border-color: #14b8a666; background: #14b8a614; }
.sc-pk-chip-top { color: var(--sc-positive); border-color: color-mix(in srgb, var(--sc-positive) 40%, transparent); background: color-mix(in srgb, var(--sc-positive) 10%, transparent); }
.sc-pk-analysis-link { margin-left: auto; flex: none; background: none; border: 0; padding: 0; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--sc-positive); cursor: pointer; }
.sc-pk-playrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.sc-pk-playcol { min-width: 0; flex: 1; }
/* The play is the biggest type on the card. Wraps, never truncates. */
.sc-pk-play { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: break-word; }
.sc-pk-odds { font-family: var(--sc-mono); font-size: 12.5px; font-weight: 700; color: var(--sc-text-muted); }
.sc-pk-playlock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-pk-play-blur { filter: blur(5px); user-select: none; }
.sc-pk-unlock { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: var(--sc-cta); color: var(--sc-cta-text); padding: 4px 10px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sc-pk-unlock svg { width: 13px; height: 13px; }
/* #1129: the verdict is the card's loudest chip — solid, glyphed,
   riding the play line, pinned right. */
.sc-pk-pill { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-top: 1px; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.sc-pk-pill svg { width: 11px; height: 11px; }
.sc-pk-pill-win { background: var(--sc-pill-win-bg); color: var(--sc-pill-win-text); }
.sc-pk-pill-loss { background: #dc2626; color: #ffffff; }
.sc-pk-pill-push { background: #475569; color: #f1f5f9; }
.sc-pk-analysis { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--sc-text-muted); }
.sc-pk-analysis p { margin: 0 0 6px; }
/* Card grids for the pick widgets — auto-fit, no fixed column counts. */
.sc-pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 14px 16px; }
/* Premium groups BY CAPPER (grammar caveat): avatar/name header per group. */
.sc-pk-group { padding: 0 16px 4px; }
.sc-pk-group + .sc-pk-group { border-top: 1px solid var(--sc-hair); }
.sc-pk-grouphead { display: flex; align-items: center; gap: 8px; padding: 12px 0 10px; text-decoration: none; color: var(--sc-text); }
.sc-pk-grouphead b { font-size: 13.5px; font-weight: 700; }
.sc-pk-grouprec { margin-left: auto; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-faint); }
.sc-pk-group .sc-pk-grid { padding: 0 0 14px; }

/* ============================================================
   R8 — Packages (#1239 vs #1102 canon): capper identity chip,
   button canon, Details bar, Show-more fold.
   ============================================================ */
.sc-product-capper-name { font-weight: 700; font-size: 13px; color: var(--sc-text); }
.sc-product-record-chip { display: inline-flex; align-items: center; margin-top: 2px; border: 1px solid color-mix(in srgb, var(--sc-positive) 40%, transparent); background: color-mix(in srgb, var(--sc-positive) 8%, transparent); color: var(--sc-positive); border-radius: 5px; padding: 1px 6px; font-family: var(--sc-mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
/* Purchase-control canon (#1102): packages = solid Buy now + compact cart
   icon (amber pair on the designation tier); access products = Add-to-cart
   ONLY, outline. Never a new treatment for a new surface. */
.sc-product-btnpair { display: flex; align-items: center; gap: 6px; flex: none; }
.sc-btn-outline { background: transparent; border: 1px solid var(--sc-border); color: var(--sc-text); }
.sc-btn-outline:hover { border-color: var(--sc-cta); color: var(--sc-cta); }
.sc-btn-designation { background: #d97706; color: #ffffff; border: 0; }
.sc-btn-designation:hover { background: #b45309; }
.sc-btn-carticon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--sc-radius); border: 1px solid var(--sc-border); background: transparent; color: var(--sc-text-muted); cursor: pointer; flex: none; }
.sc-btn-carticon:hover { border-color: var(--sc-cta); color: var(--sc-cta); }
.sc-btn-carticon svg { width: 15px; height: 15px; }
.sc-btn-carticon-designation { border-color: #d97706; color: #d97706; }
/* Details lives in its OWN slim full-width bar at the card bottom; the
   countdown rides the bar's right slot (#1275 pattern). */
.sc-product-detailsbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sc-hair); }
.sc-product-detailsbar .sc-desc-toggle { margin: 0; }
.sc-product-detailsbar .sc-product-countdown { margin: 0; }
/* The commerce CTA rides the records emerald, not the partner primary —
   purchase controls are identical across surfaces (#1102 canon). */
.sc-btn-cta { background: var(--sc-cta); color: var(--sc-cta-text); border: 0; }
.sc-btn-cta:hover { background: var(--sc-cta-hover); }

/* R9 — Capper Profile hero bits (#1239): rank chip, quiet sports line,
   labeled stat scope. */
.sc-capper-rankchip { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: 2px; border: 1px solid var(--sc-border); background: var(--sc-bg-alt); color: var(--sc-text-muted); border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.sc-capper-sportsline { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--sc-positive); }
.sc-stats-scope { padding: 6px 16px 2px; font-size: 11px; color: var(--sc-faint); }

/* ============================================================
   R11 — sc-odds board cards (#1132 grammar) + sc-schedule slate
   rows (#1140 grammar).
   ============================================================ */
.sc-ob-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.sc-ob-card { border: 1px solid var(--sc-border); border-radius: 10px; padding: 10px 12px; background: var(--sc-bg); }
.sc-ob-eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sc-ob-time { font-family: var(--sc-mono); font-size: 10.5px; font-weight: 600; color: var(--sc-time); }
.sc-ob-rots { color: var(--sc-faint); font-weight: 400; }
.sc-ob-league { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-faint); }
.sc-ob-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1fr; gap: 4px 8px; align-items: center; }
.sc-ob-head { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); }
.sc-ob-team { min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ob-at { font-weight: 400; color: var(--sc-faint); }
.sc-ob-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.sc-ob-cell-empty { color: var(--sc-faint); font-size: 12px; }
.sc-ob-cell-nums { font-family: var(--sc-mono); font-size: 12px; white-space: nowrap; }
.sc-ob-cell-nums b { font-weight: 700; }
.sc-ob-cell-price { color: var(--sc-text-muted); margin-left: 4px; }
.sc-ob-chip { display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 4px; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; color: #ffffff; }
.sc-ob-slimwrap { border-top: 1px solid var(--sc-hair); padding-top: 8px; display: flex; flex-direction: column; }
.sc-ob-slim { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 12.5px; }
.sc-ob-slim-state { font-family: var(--sc-mono); font-size: 10px; font-weight: 700; color: var(--sc-faint); width: 34px; flex: none; }
.sc-ob-slim-live { color: #ef4444; }
.sc-ob-slim-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sc-ob-slim-score { margin-left: auto; font-family: var(--sc-mono); font-size: 12px; font-weight: 700; }

.sc-sl-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 16px; }
.sc-sl-group { padding-top: 6px; }
.sc-sl-grouphead { display: flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-text-muted); padding: 6px 0 4px; }
.sc-sl-groupcount { font-family: var(--sc-mono); font-size: 10px; font-weight: 600; color: var(--sc-faint); }
.sc-sl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--sc-hair); font-size: 12.5px; }
.sc-sl-time { font-family: var(--sc-mono); font-size: 10.5px; font-weight: 600; color: var(--sc-time); width: 74px; flex: none; }
.sc-sl-live { color: #ef4444; }
.sc-sl-rots { font-family: var(--sc-mono); font-size: 10px; color: var(--sc-faint); flex: none; }
.sc-sl-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sc-sl-whisper { margin-left: auto; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-faint); white-space: nowrap; }
.sc-sl-score { margin-left: auto; font-family: var(--sc-mono); font-size: 12px; font-weight: 700; }
.sc-sl-fold { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--sc-cta); cursor: pointer; }
/* Odds hub view (sport-grouped, #1132 hub ruling). */
.sc-ob-group { display: flex; flex-direction: column; gap: 8px; }
.sc-ob-group + .sc-ob-group { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--sc-hair); }
.sc-ob-grouphead { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-text-muted); }
.sc-ob-groupcount { font-family: var(--sc-mono); font-size: 10px; font-weight: 600; color: var(--sc-faint); text-transform: none; letter-spacing: 0; }

/* ============================================================
   R12 — the Packages BOARD (#1102 structure at embed scale):
   hero slot · value packs · singles by game day · pass rows ·
   season shelf.
   ============================================================ */
.sc-board-hero { padding: 14px 16px 0; }
.sc-board-hero .sc-product-card { border-width: 2px; }
.sc-board-section { padding: 4px 16px 0; }
.sc-board-sectionhead { display: flex; align-items: baseline; gap: 8px; padding: 12px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-text-muted); }
.sc-board-sectionnote { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sc-faint); }
/* 320px floor: pack leg rows (tile · matchup · market · time) starve below
   ~300px — 3-up only when there's real room (Tyler 2026-08-31). */
.sc-board-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 12px; }
.sc-board-rows { display: flex; flex-direction: column; }
/* Capper-led pass row: identity + record chip lead, the product demotes. */
.sc-board-passrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sc-hair); }
.sc-board-pass-capper { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1.1; text-decoration: none; color: var(--sc-text); }
.sc-board-pass-id { min-width: 0; }
.sc-board-pass-name { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-board-pass-what { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-board-pass-what b { color: var(--sc-text); font-weight: 700; }
.sc-board-pass-guar { margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-positive); border: 1px solid color-mix(in srgb, var(--sc-positive) 40%, transparent); border-radius: 999px; padding: 1px 6px; }
.sc-board-pass-price { text-align: right; white-space: nowrap; font-weight: 800; font-size: 14px; }
.sc-board-pass-price i { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--sc-faint); }
@container (max-width: 560px) {
  .sc-board-pass-what { display: none; }
}
.sc-board { container-type: inline-size; }

/* R13 — the profile SHOP (#1274 shop-first at embed scale). */
.sc-shop { padding: 4px 16px 8px; }
.sc-shop-pills { padding: 8px 0 4px; }
.sc-shop-guarantee { display: flex; align-items: center; gap: 6px; padding: 6px 0 4px; font-size: 12px; color: var(--sc-text-muted); }
.sc-shop-guarantee b { color: var(--sc-text); font-weight: 700; }
.sc-shop-guarantee svg { width: 15px; height: 15px; color: var(--sc-positive); flex: none; }
.sc-shop-section { margin-top: 4px; }
.sc-shop-single { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sc-hair); }
.sc-shop-single-main { flex: 1; min-width: 0; }
.sc-shop-single-name { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-shop-single-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; }
.sc-shop-tag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-text-muted); background: var(--sc-chip-bg); border-radius: 4px; padding: 1px 6px; }
.sc-shop-single-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--sc-faint); }
.sc-shop-single-time { flex: none; font-family: var(--sc-mono); font-size: 10.5px; font-weight: 600; color: var(--sc-time); }
.sc-shop-single-price { flex: none; text-align: right; font-size: 14px; font-weight: 800; white-space: nowrap; }
.sc-shop-perday { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--sc-faint); }
.sc-shop-access { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sc-hair); }
.sc-shop-access-main { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sc-text-muted); }
.sc-shop-access-main b { color: var(--sc-text); font-weight: 700; }
.sc-shop-access-title { display: block; font-size: 11px; color: var(--sc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-shop-about { padding: 4px 16px 12px; border-top: 1px solid var(--sc-hair); margin-top: 8px; }
/* R12/R13 ruled round (D9-D15). */
.sc-slotline { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; min-width: 0; }
.sc-slot-market { text-transform: capitalize; color: var(--sc-positive); background: color-mix(in srgb, var(--sc-positive) 9%, transparent); }
.sc-slot-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--sc-text); }
.sc-board-pass-live { margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-time); border: 1px solid color-mix(in srgb, var(--sc-time) 40%, transparent); border-radius: 999px; padding: 1px 6px; }
.sc-board-searchrow { padding: 0 16px 8px; }
.sc-board-searchrow .sc-input { width: 100%; max-width: 340px; }
.sc-board-searchbtn { font-size: 13px; line-height: 1; }
.sc-stats-quiet { font-family: var(--sc-mono); padding-top: 2px; }

/* Premium pick round (D16-D19). */
.sc-pk-lockslot { display: flex; align-items: center; gap: 8px; margin-top: 4px; border: 1px dashed var(--sc-border); border-radius: 7px; padding: 8px 10px; color: var(--sc-text-muted); font-size: 12px; }
.sc-pk-lockslot svg { width: 13px; height: 13px; flex: none; color: var(--sc-faint); }
.sc-pk-chip-corner { margin-left: auto; flex: none; }
.sc-pk-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--sc-hair); }
.sc-pk-price { font-size: 15px; font-weight: 800; }
.sc-pk-price i { display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-faint); }
.sc-pk-buyrow { display: flex; align-items: center; gap: 6px; flex: none; }
.sc-pk-buy { border: 0; border-radius: 7px; background: var(--sc-cta); color: var(--sc-cta-text); padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.sc-pk-buy:hover { background: var(--sc-cta-hover); }
.sc-pk-cart { width: 29px; height: 29px; }
.sc-pk-unlock-link { font-size: 12px; font-weight: 700; color: var(--sc-positive); text-decoration: none; }
.sc-shop-pickgrid { padding: 4px 0 8px; }

/* ============================================================
   D20–D23 — the pack ticket + the pass ladder.
   ============================================================ */
.sc-pack-banner { position: relative; z-index: 6; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 0; }
.sc-pack-banner-gop { background: #d97706; color: #ffffff; }
.sc-pack-banner-popular { background: var(--sc-cta); color: var(--sc-cta-text); }
.sc-pack-banner-featured { background: var(--sc-elevated); color: var(--sc-text); border-bottom: 1px solid var(--sc-hair); }
.sc-pack-guarchip { margin-left: auto; flex: none; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-positive); border: 1px solid color-mix(in srgb, var(--sc-positive) 35%, transparent); background: color-mix(in srgb, var(--sc-positive) 7%, transparent); border-radius: 999px; padding: 2px 7px; }
.sc-pack-title { padding: 8px 14px 2px; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.sc-pack-legs { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 7px; }
.sc-pack-leg { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-pack-leg-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; flex: 1; }
.sc-pack-leg-time { flex: none; font-family: var(--sc-mono); font-size: 10px; font-weight: 600; color: var(--sc-time); }
.sc-pack-more { font-size: 11px; font-weight: 600; color: var(--sc-faint); padding-left: 2px; }
.sc-pack-detailsbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 14px; border-top: 1px solid var(--sc-hair); }
.sc-pack-countdown { font-size: 10px; font-weight: 700; color: var(--sc-time); background: color-mix(in srgb, var(--sc-time) 12%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sc-pack-desc { padding: 8px 14px 12px; font-size: 12.5px; line-height: 1.55; color: var(--sc-text-muted); }
.sc-pack-desc p { margin: 0 0 6px; }

/* The ladder (D22). */
.sc-ladder { display: flex; flex-direction: column; border: 1px solid var(--sc-border); border-radius: 10px; overflow: hidden; background: var(--sc-bg); }
.sc-rung { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--sc-hair); }
.sc-rung:first-child { border-top: 0; }
.sc-rung-best { box-shadow: inset 3px 0 0 var(--sc-cta); background: color-mix(in srgb, var(--sc-positive) 4%, transparent); }
.sc-rung-dur { width: 72px; flex: none; }
.sc-rung-dur b { display: block; font-size: 14.5px; font-weight: 800; }
.sc-rung-dur i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-faint); }
.sc-rung-mid { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-rung-live { margin-left: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-time); border: 1px solid color-mix(in srgb, var(--sc-time) 40%, transparent); border-radius: 999px; padding: 1px 6px; }
.sc-rung-bestchip { margin-left: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-positive); border: 1px solid color-mix(in srgb, var(--sc-positive) 35%, transparent); background: color-mix(in srgb, var(--sc-positive) 8%, transparent); border-radius: 999px; padding: 1px 6px; }
.sc-rung-note { margin-left: 6px; font-size: 10px; color: var(--sc-faint); }
.sc-rung-price { flex: none; text-align: right; }
.sc-rung-price b { display: block; font-size: 14px; font-weight: 800; }
.sc-rung-price i { font-style: normal; font-size: 10px; color: var(--sc-faint); }
@container (max-width: 520px) {
  .sc-rung-mid { display: none; }
}

/* ============================================================
   Odds comparison matrix (D24–D26, Tyler 2026-09-01): books as
   rows inside each game block; best cells wear the SITE's ruled
   treatment (BooksTable.vue) — emerald text + soft tint, no ring.
   ============================================================ */
.sc-obm-matchup { padding: 0 12px 6px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.sc-obm { width: 100%; border-collapse: collapse; }
.sc-obm th { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); text-align: left; padding: 5px 8px; background: var(--sc-bg-alt); border-top: 1px solid var(--sc-hair); }
.sc-obm td { padding: 5px 8px; border-top: 1px solid var(--sc-hair); vertical-align: top; }
.sc-obm th:first-child, .sc-obm td:first-child { padding-left: 12px; width: 52px; }
.sc-obm th:last-child, .sc-obm td:last-child { padding-right: 12px; }
.sc-obm-r { text-align: right; }
.sc-obm-sel { display: block; width: fit-content; margin-left: auto; font-family: var(--sc-mono); font-size: 11.5px; white-space: nowrap; color: var(--sc-text); }
.sc-obm-dim { color: var(--sc-text-muted); }
.sc-obm-best { color: var(--sc-positive); font-weight: 700; background: color-mix(in srgb, var(--sc-positive) 9%, transparent); border-radius: 4px; padding: 0 4px; margin-right: -4px; }
/* The three market columns share the row evenly; the tint hugs its number. */
.sc-obm th.sc-obm-r, .sc-obm td.sc-obm-r { width: 30%; }
.sc-obm-fold { display: block; width: 100%; text-align: center; border: 0; border-top: 1px solid var(--sc-hair); background: none; padding: 7px; font-size: 11.5px; font-weight: 700; color: var(--sc-cta); font-family: inherit; cursor: pointer; }
.sc-obm-markets { padding-top: 0; }
.sc-ob-card { padding: 0 0 0; overflow: hidden; }
.sc-ob-card .sc-ob-eyebrow { padding: 9px 12px 4px; margin-bottom: 0; }

/* ============================================================
   Odds compare matrix v2 (Tyler 2026-09-01): GAMES down the left,
   BOOKS across the top, one market at a time — the competitor
   standard and our own /{sport}-odds desktop grammar. Flex rows
   with fixed widths (OddsTable.vue lesson: sticky-left dies inside
   CSS grid); header and rows share ONE overflow wrapper so the
   book chips scroll with their columns.
   ============================================================ */
.sc-obx-markets { padding: 0 0 8px; }
/* padding-bottom + a thin styled bar keep the last row clear of the
   horizontal scrollbar (overlay bars sat right on top of it — Tyler,
   Night Card review 2026-09-03). */
.sc-obx-scroll { overflow-x: auto; border: 1px solid var(--sc-border); border-radius: 10px; background: var(--sc-bg); padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--sc-border) transparent; }
.sc-obx-scroll::-webkit-scrollbar { height: 8px; }
.sc-obx-scroll::-webkit-scrollbar-track { background: transparent; }
.sc-obx-scroll::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 4px; }
.sc-obx-row { display: flex; width: max-content; min-width: 100%; border-top: 1px solid var(--sc-hair); }
.sc-obx-row:first-child { border-top: 0; }
.sc-obx-head { background: var(--sc-bg-alt); }
.sc-obx-game { position: sticky; left: 0; z-index: 2; width: 168px; flex: none; background: var(--sc-bg); border-right: 1px solid var(--sc-hair); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-obx-head .sc-obx-game { background: var(--sc-bg-alt); }
.sc-obx-headcell { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); display: flex; align-items: center; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
.sc-obx-game.sc-obx-headcell { justify-content: flex-start; }
.sc-obx-team { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-obx-home { font-weight: 600; }
.sc-obx-book { width: 88px; flex: none; padding: 8px 6px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
.sc-obx-sel { display: block; width: fit-content; font-family: var(--sc-mono); font-size: 11.5px; white-space: nowrap; color: var(--sc-text); }
.sc-obx-dim { color: var(--sc-text-muted); }
/* Limited-coverage section (D27-D29): collapsed below the main slate,
   its own matrix with its own (few) book columns. */
.sc-obx-thin { margin-top: 6px; }
.sc-obx-thinhead { padding: 8px 2px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-faint); }
/* Off-season note (site fallback-note parity, Tyler 2026-09-01). */
.sc-lb-note { padding: 2px 16px 8px; font-size: 11.5px; color: var(--sc-text-muted); }

/* ===== My Account rework (#1239 D30–D32, Tyler 2026-09-01) =====
   The pared-down member-dashboard mirror: Overview landing tab, credit
   header chip, day-banded pick ledger, date-led order ledger, until-used
   subscription treatment. All token-driven — dark theme needs no extras. */
.sc-account-header-right { display: flex; align-items: center; gap: 10px; }
.sc-acct-credit-chip {
  border: 1px solid var(--sc-border); background: var(--sc-bg-alt); color: var(--sc-positive);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  font-family: var(--sc-font); cursor: pointer; white-space: nowrap;
}
.sc-acct-credit-chip:hover { border-color: var(--sc-positive); }

.sc-ov-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.sc-ov-banner-sub { color: var(--sc-text-muted); }
.sc-ov-banner-cta { color: var(--sc-accent); font-weight: 800; text-decoration: none; white-space: nowrap; }

.sc-ov-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sc-ov-grid { grid-template-columns: 1fr; } }
.sc-ov-panel-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.sc-ov-panel-title { font-size: 13px; font-weight: 800; color: var(--sc-text); }
.sc-ov-panel-link {
  border: 0; background: none; padding: 0; font-family: var(--sc-font);
  font-size: 12px; font-weight: 700; color: var(--sc-cta); cursor: pointer;
}
.sc-ov-panel-link:hover { color: var(--sc-cta-hover); }

/* Shared ledger frame: day/month bands + rows (picks, orders, past subs). */
.sc-ledger { border: 1px solid var(--sc-border); border-radius: 10px; overflow: hidden; background: var(--sc-bg); }
.sc-ledger-band {
  background: var(--sc-elevated); padding: 5px 14px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--sc-text-muted);
  border-bottom: 1px solid var(--sc-border);
}
.sc-ledger-band:not(:first-child) { border-top: 1px solid var(--sc-border); }
.sc-ledger-band-live { color: #dc2626; }
.sc-ledger-foot {
  display: block; width: 100%; border: 0; background: var(--sc-elevated); padding: 8px;
  text-align: center; font-family: var(--sc-font); font-size: 12.5px; font-weight: 700;
  color: var(--sc-cta); cursor: pointer; border-top: 1px solid var(--sc-hair);
}
.sc-ledger-foot:hover { color: var(--sc-cta-hover); }

.sc-pl-item:not(:last-child) { border-bottom: 1px solid var(--sc-hair); }
.sc-pl-clickable .sc-pl-row { cursor: pointer; }
.sc-pl-clickable .sc-pl-row:hover { background: var(--sc-bg-alt); }
.sc-pl-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.sc-pl-ava {
  width: 26px; height: 26px; border-radius: 999px; flex: none; object-fit: cover;
}
.sc-pl-ava-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-text); color: var(--sc-bg); font-size: 10px; font-weight: 800;
}
.sc-pl-meta { flex: 1; min-width: 0; }
.sc-pl-game { font-size: 13.5px; font-weight: 700; color: var(--sc-text); }
.sc-pl-det { font-size: 12px; color: var(--sc-text-muted); }
.sc-pl-top { color: var(--sc-accent); font-weight: 700; }
.sc-pl-play { text-align: right; flex: none; }
.sc-pl-play b { display: block; font-size: 13.5px; font-weight: 800; color: var(--sc-primary); }
.sc-pl-play small { display: block; font-size: 11px; color: var(--sc-text-muted); }
.sc-pl-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sc-pl-right small { font-size: 11.5px; font-weight: 700; }
.sc-pl-res { border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.sc-pl-res-win { background: var(--sc-pill-win-bg); color: var(--sc-pill-win-text); }
.sc-pl-res-loss { background: rgba(220, 38, 38, 0.12); color: var(--sc-negative); }
.sc-pl-res-push { background: var(--sc-chip-bg); color: var(--sc-chip-text); }
.sc-pl-res-live { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.sc-pl-res-pending { background: var(--sc-chip-bg); color: var(--sc-chip-text); }
/* Inline analysis: flat continuation of the row, not a nested box (Tyler
   2026-09-01, second pass — the grey container-in-a-container was wrong).
   A hairline separates it from the play line; the item-spanning rail ties
   it to its pick; text aligns with the row's own padding. */
.sc-pl-analysis {
  margin: 0 14px; padding: 10px 0 14px;
  border-top: 1px solid var(--sc-hair);
}
.sc-pl-analysis-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sc-text-muted); margin-bottom: 3px;
}
/* Paragraph rhythm mirrors the site's analysis modal (prose-sm: ~1.14em
   between paragraphs, relaxed leading) — 6px read cramped (Tyler
   2026-09-01). */
.sc-pl-analysis-body { font-size: 13px; line-height: 1.625; color: var(--sc-text); }
.sc-pl-analysis-body p { margin: 0 0 15px; }
.sc-pl-analysis-body p:last-child { margin-bottom: 0; }

/* Date-led order / past-sub ledger rows. */
.sc-oled-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sc-oled-row:not(:last-child) { border-bottom: 1px solid var(--sc-hair); }
.sc-oled-d {
  width: 46px; flex: none; font-size: 12px; color: var(--sc-text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-oled-what {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sc-text);
  /* Two lines before clamping (Tyler 2026-09-01: single-line ellipsis read
     "extremely truncated" on long package names). */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-oled-what small { display: block; font-size: 11.5px; font-weight: 500; color: var(--sc-text-muted); }
.sc-oled-chip {
  flex: none; border-radius: 999px; background: var(--sc-chip-bg); color: var(--sc-chip-text);
  padding: 2px 9px; font-size: 10.5px; font-weight: 700;
}
.sc-oled-status-bad { background: rgba(220, 38, 38, 0.12); color: var(--sc-negative); }
.sc-oled-status-warn { background: rgba(245, 158, 11, 0.15); color: var(--sc-accent); }
.sc-oled-amt { flex: none; font-size: 13px; font-weight: 800; color: var(--sc-text); font-variant-numeric: tabular-nums; }
.sc-oled-detail { padding: 2px 14px 12px 70px; }
.sc-oled-detail-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--sc-text-muted); margin-bottom: 6px;
}
@media (max-width: 480px) {
  .sc-oled-detail { padding-left: 14px; }
}

/* ===== Picks ledger — site LedgerPickRow port (Tyler 2026-09-01):
   game + bet left, time right (amber mono), amber state rail, grouped
   by capper by default with By League / By Day alternates. ===== */
/* The item is [rail][body]: the rail spans row + opened analysis so an
   expanded pick reads as one unit (Tyler 2026-09-01). */
.sc-pl-item { display: flex; }
.sc-pl-itembody { flex: 1; min-width: 0; }
.sc-plr { display: flex; overflow: hidden; }
.sc-pl-clickable .sc-plr { cursor: pointer; }
.sc-pl-clickable .sc-plr:hover { background: var(--sc-bg-alt); }
.sc-plr-rail { width: 3px; flex: none; align-self: stretch; }
.sc-plr-rail-up { background: #f59e0b; }
.sc-plr-rail-started { background: var(--sc-faint); }
.sc-plr-rail-win { background: #10b981; }
.sc-plr-rail-loss { background: #ef4444; }
.sc-plr-rail-push { background: var(--sc-faint); }
.sc-plr-body { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; padding: 10px 14px; }
.sc-plr-main { flex: 1; min-width: 0; line-height: 1.35; }
.sc-plr-ctx { font-size: 11.5px; color: var(--sc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-plr-ctx-narrow { display: none; }
.sc-plr-matchup { font-size: 12.5px; font-weight: 600; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-plr-play { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--sc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-plr-odds { margin-left: 5px; font-family: var(--sc-mono); font-size: 11.5px; font-weight: 700; color: var(--sc-text-muted); }
.sc-plr-right { flex: none; display: flex; align-items: center; gap: 8px; }
.sc-plr-time { font-family: var(--sc-mono); font-size: 11px; font-weight: 600; color: var(--sc-time); white-space: nowrap; }
.sc-plr-started { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-faint); }
.sc-plr-res { font-family: var(--sc-mono); font-size: 11.5px; font-weight: 800; color: var(--sc-text-muted); }
.sc-plr-free {
  display: inline-flex; align-items: center; border: 1px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08); color: var(--sc-primary); border-radius: 4px;
  padding: 1px 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
/* Narrow widget: the matchup gets its own line so it can't truncate away
   (site #1125/#1126 hybrid). */
@media (max-width: 560px) {
  .sc-plr-ctx-wide { display: none; }
  .sc-plr-ctx-narrow { display: block; }
}

/* Segment pills + group-by control */
.sc-plc { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-plc-segs, .sc-plc-groupby { display: flex; gap: 4px; background: var(--sc-chip-bg); border-radius: 8px; padding: 3px; }
.sc-plc-seg, .sc-plc-gb {
  border: 0; background: none; border-radius: 6px; padding: 5px 12px;
  font-family: var(--sc-font); font-size: 12.5px; font-weight: 600; color: var(--sc-text-muted);
  cursor: pointer; white-space: nowrap;
}
.sc-plc-seg sup { font-size: 9.5px; font-weight: 700; color: var(--sc-faint); }
.sc-plc-seg.sc-active, .sc-plc-gb.sc-active { background: var(--sc-bg); color: var(--sc-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* Grouped block: one ledger container per group, capper/league band */
.sc-plg { margin-bottom: 14px; }
.sc-plg-band {
  display: flex; width: 100%; align-items: center; gap: 10px; border: 0;
  background: var(--sc-elevated); padding: 8px 14px; cursor: pointer;
  font-family: var(--sc-font); text-align: left; border-bottom: 1px solid var(--sc-border);
}
.sc-plg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--sc-text); }
.sc-plg-count { margin-left: auto; flex: none; font-size: 11px; color: var(--sc-faint); }
.sc-plg-chev { flex: none; font-size: 15px; font-weight: 800; color: var(--sc-faint); transition: transform 0.15s; }
.sc-plg-chev.sc-open { transform: rotate(90deg); }

/* Top Play on the play line (Tyler 2026-09-01, D33) — the Sideline
   emerald chip; rgba grounds keep it legible on both themes. */
.sc-plr-tp {
  display: inline-flex; align-items: center; height: 17px; margin-left: 6px;
  border: 1px solid rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.14);
  color: var(--sc-positive); border-radius: 4px; padding: 0 6px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: -3px; white-space: nowrap;
}

/* ===== Profile expansion (Tyler 2026-09-01, D35) — billing address rows,
   notification switches, Telegram block. ===== */
.sc-field-row-3 { display: flex; gap: 12px; }
.sc-field-row-3 .sc-field { flex: 1; }
.sc-notif-list { border: 1px solid var(--sc-border); border-radius: 10px; padding: 2px 14px; }
.sc-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.sc-notif-row:not(:last-child) { border-bottom: 1px solid var(--sc-hair); }
.sc-notif-info { min-width: 0; }
.sc-notif-info b { display: block; font-size: 13px; font-weight: 700; color: var(--sc-text); }
.sc-notif-info small { display: block; font-size: 12px; color: var(--sc-text-muted); }
.sc-notif-info small a { color: var(--sc-primary); font-weight: 700; text-decoration: none; }
.sc-switch {
  position: relative; width: 36px; height: 20px; flex: none; border: 0; border-radius: 999px;
  background: var(--sc-chip-bg); cursor: pointer; padding: 0; transition: background 0.15s;
}
.sc-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: var(--sc-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.sc-switch.sc-on { background: var(--sc-positive); }
.sc-switch.sc-on::after { transform: translateX(16px); }
.sc-tg-block {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sc-bg-alt); border: 1px solid var(--sc-border); border-radius: 10px;
  padding: 10px 14px; margin-top: 12px;
}

/* ===== Capper shop families (#1239 D37-D38, Tyler 2026-09-01) =====
   Subscriptions podium + season grandstand — the site's storefront
   grammar (access products get rows/banners) at widget scale. */
/* sc-subpod, NOT sc-pod: the first name collided with the leaderboard's
   podium card and its grid rule jammed those cards into three columns
   (Tyler 2026-09-02: "names are all truncated"). */
.sc-subpod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.sc-subpod-tier { border: 1px solid var(--sc-border); border-radius: 10px; padding: 14px; text-align: center; background: var(--sc-bg); }
.sc-subpod-mid { border-color: var(--sc-cta); box-shadow: 0 2px 8px rgba(4, 120, 87, 0.14); padding: 18px 14px; position: relative; }
.sc-subpod-flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--sc-cta); color: var(--sc-cta-text); font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.sc-subpod-dur { font-size: 12px; font-weight: 700; color: var(--sc-text-muted); }
.sc-subpod-price { font-size: 21px; font-weight: 800; color: var(--sc-text); margin: 2px 0; }
.sc-subpod-perday { font-size: 11px; color: var(--sc-text-muted); min-height: 15px; }
.sc-subpod-cta { width: 100%; margin-top: 10px; font-size: 12.5px; padding: 7px 0; }
@media (max-width: 560px) { .sc-subpod { grid-template-columns: 1fr; align-items: stretch; } .sc-subpod-mid { order: -1; } }

.sc-gs-feathead {
  display: flex; align-items: center; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sc-time); margin-bottom: 8px;
}
.sc-gs-dot { width: 7px; height: 7px; border-radius: 999px; background: #f59e0b; margin-right: 6px; animation: sc-gs-pulse 1.6s infinite; }
@keyframes sc-gs-pulse { 50% { opacity: 0.35; } }
.sc-gs-banner {
  border: 1px solid var(--sc-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;
  background: linear-gradient(105deg, #0f172a 0 34%, #1e293b 34% 100%); color: #fff;
}
.sc-gs-plate { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #fbbf24; }
.sc-gs-name { font-size: 16.5px; font-weight: 800; margin: 2px 0 8px; }
.sc-gs-meterwrap { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #cbd5e1; }
.sc-gs-meter { flex: 1; height: 6px; border-radius: 4px; background: #334155; overflow: hidden; }
.sc-gs-meter i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #fbbf24); }
.sc-gs-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.sc-gs-price { font-size: 19px; font-weight: 800; }
.sc-gs-price s { font-size: 12.5px; color: #94a3b8; font-weight: 600; margin-left: 6px; }
.sc-gs-cut { font-size: 11.5px; color: #86efac; }
.sc-gs-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.sc-gs-rcard { border: 1px solid var(--sc-border); border-radius: 10px; padding: 12px; background: var(--sc-bg); }
.sc-gs-rtag { font-size: 10px; font-weight: 800; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-gs-rname { font-size: 12.5px; font-weight: 700; color: var(--sc-text); margin: 3px 0 8px; }
.sc-gs-rmeter { height: 4px; border-radius: 3px; background: var(--sc-hair); overflow: hidden; margin-bottom: 8px; }
.sc-gs-rmeter i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #fbbf24); }
.sc-gs-rprice { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; color: var(--sc-text); }

/* Hero pack — the SITE's PackagePyramid hero anatomy (second pass, Tyler
   2026-09-01: the PackCard-with-a-banner version read generic). Eyebrow +
   hairline, emerald-ringed full-width card, hanging "Best value" tab,
   legs as an auto-fit chip grid, struck-price math in the footer. */
.sc-hero-eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 8px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sc-faint);
}
.sc-hero-rule { height: 1px; flex: 1; background: var(--sc-border); }
.sc-hero {
  position: relative; overflow: hidden; margin-bottom: 14px;
  border: 1.5px solid #10b981; border-radius: 14px; background: var(--sc-bg);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.sc-hero-tab {
  position: absolute; top: -1px; left: 18px; border-radius: 0 0 8px 8px;
  background: var(--sc-cta); color: var(--sc-cta-text); padding: 4px 10px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
}
.sc-hero-body { padding: 14px 18px 16px; }
.sc-hero-body-tabbed { padding-top: 30px; }
.sc-hero-title { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--sc-text); }
.sc-hero-sub { margin-top: 2px; font-size: 12px; color: var(--sc-text-muted); }
.sc-hero-desclink { border: 0; background: none; padding: 0; font: inherit; color: var(--sc-faint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sc-hero-desclink:hover { color: var(--sc-text-muted); }
.sc-hero-legs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 12px; }
.sc-hero-leg {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  background: var(--sc-bg-alt); border-radius: 8px; padding: 7px 10px; font-size: 12px;
}
.sc-hero-lg { border-radius: 4px; background: rgba(16, 185, 129, 0.14); color: var(--sc-positive); padding: 1px 6px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.sc-hero-mkt { border: 1px solid var(--sc-border); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; }
.sc-hero-mkt-spread { color: #2563eb; border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.07); }
.sc-hero-mkt-total { color: #7c3aed; border-color: rgba(124, 58, 237, 0.35); background: rgba(124, 58, 237, 0.07); }
.sc-hero-mkt-ml { color: #0d9488; border-color: rgba(13, 148, 136, 0.35); background: rgba(13, 148, 136, 0.07); }
.sc-hero-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--sc-text); }
.sc-hero-time { margin-left: auto; white-space: nowrap; font-size: 10px; color: var(--sc-faint); }
.sc-hero-more {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--sc-border); border-radius: 8px; background: none;
  padding: 7px 10px; font-family: var(--sc-font); font-size: 12px; font-weight: 700;
  color: var(--sc-cta); cursor: pointer;
}
.sc-hero-more:hover { background: rgba(4, 120, 87, 0.05); }
.sc-hero-desc { margin-top: 12px; border-top: 1px dashed var(--sc-border); padding-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--sc-text-muted); }
.sc-hero-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sc-hero-math { display: block; font-size: 11.5px; color: var(--sc-text-muted); }
.sc-hero-math s { font-variant-numeric: tabular-nums; }
.sc-hero-math b { color: var(--sc-positive); }
.sc-hero-price { font-size: 23px; font-weight: 900; color: var(--sc-text); font-variant-numeric: tabular-nums; }

/* Board single card (site SingleCard #1102, ported 2026-09-02) — title-led,
   slot chips, no lock slot. Day-pass counter duration chips. */
.sc-bsc-title { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sc-bsc-slots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 14px 2px; }
.sc-bsc-matchup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--sc-text); }
.sc-bsc-time { white-space: nowrap; font-size: 11px; color: var(--sc-time); font-family: var(--sc-mono); font-weight: 600; }
.sc-dpc-chips { margin-bottom: 10px; }

/* Board season shelf capper identity (marketplace hierarchy, 2026-09-02). */
.sc-gs-capper { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 8px; color: #e2e8f0; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.sc-gs-capper:hover { color: #fff; }
.sc-gs-rcapper { display: inline-flex; align-items: center; gap: 6px; margin: 3px 0 2px; color: var(--sc-text-muted); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.sc-gs-rcapper:hover { color: var(--sc-text); }

/* Board anchor rail (site /products D4, ported 2026-09-02): sticky
   jump-links with live counts. */
.sc-board-anchors {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 7px 2px;
  margin-bottom: 10px; background: color-mix(in srgb, var(--sc-bg) 95%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--sc-border);
}
.sc-board-anchors::-webkit-scrollbar { display: none; }
.sc-board-anchor {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px;
  border: 0; border-radius: 7px; background: none; padding: 0 10px;
  font-family: var(--sc-font); font-size: 12px; font-weight: 600; color: var(--sc-text-muted);
  cursor: pointer; white-space: nowrap;
}
.sc-board-anchor:hover { background: var(--sc-chip-bg); color: var(--sc-text); }
.sc-board-anchor-ct { font-family: var(--sc-mono); font-size: 10.5px; color: var(--sc-faint); }
.sc-social-login { display: grid; gap: 12px; margin-bottom: 16px; }
.sc-social-buttons { display: grid; gap: 10px; }
.sc-social-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #747775; border-radius: 4px; font: 500 14px/1.4 Arial, sans-serif; cursor: pointer; }
.sc-social-google { background: #fff; color: #1f1f1f; }
.sc-social-apple { background: #000; color: #fff; border-color: #a0a0a0; }
.sc-social-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.sc-social-button:disabled { opacity: .65; cursor: wait; }
.sc-social-button:focus-visible { outline: 3px solid var(--sc-primary); outline-offset: 3px; }
.sc-social-note { margin: 0; text-align: center; font-size: 13px; color: var(--sc-text-muted); }
.sc-social-divider { display: flex; align-items: center; gap: 12px; color: var(--sc-text-muted); font-size: 13px; }
.sc-social-divider::before, .sc-social-divider::after { content: ''; flex: 1; height: 1px; background: var(--sc-border); }