/* ============================================
   MODERN DESIGN SYSTEM ENHANCEMENTS
   ============================================ */

/* Animations & Transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* Base button styling - enhanced */
.btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 0.625rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Allow grid children and chips to shrink below their content width to avoid overflow */
.card .grid > *,
.chip {
  min-width: 0 !important;
}

/* Ensure the last column of the open-picks grid (action buttons) doesn't overlap by keeping it naturally sized */
.card .grid > .flex {
  justify-self: end;
}

/* Compact sports menu */
.sports-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sports-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sports-menu__labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sports-menu__eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sports-menu__loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.sports-menu__loading-ring {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-top-color: var(--brand);
  animation: sports-menu-spin 0.8s linear infinite;
}

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

.sports-menu__hint {
  font-weight: 600;
  color: var(--text);
}

.sports-menu__select {
  position: relative;
  min-width: 160px;
}

.sports-menu__select::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.sports-menu__select select {
  appearance: none;
  width: 100%;
  padding: 10px 36px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #ffffff 8%), color-mix(in srgb, var(--chip) 90%, #ffffff 10%));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  font-weight: 600;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sports-menu__select select:focus {
  outline: 2px solid #111827;
  outline-offset: 1px;
}

.sports-menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sports-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  font-weight: 600;
  transition: all 0.15s ease;
}

.sports-menu__chip-badge {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #e5edf8);
  border: 1px solid #cedaeb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.sports-menu__chip-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sports-menu__chip-fallback {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 800;
  color: #18385f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sports-menu__chip:hover,
.sports-menu__chip:focus-visible {
  border-color: var(--brand);
  outline: none;
}

.sports-menu__chip--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 34%, transparent);
}

.sports-menu__chip--active .sports-menu__chip-badge {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.sports-menu__chip--active .sports-menu__chip-fallback {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(8, 28, 58, 0.55);
}

.sports-menu__chip-label {
  line-height: 1.2;
}

@media (max-width: 640px) {
  .sports-menu__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .sports-menu__select {
    width: 100%;
  }
}

/* Credit hold controls */
.admin-hold-panel {
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d7dce5;
  background: linear-gradient(165deg, #f8fbff 0%, #eef4ff 100%);
}

.admin-contact-handle {
  font-weight: 800;
  color: #0f3f73;
  letter-spacing: 0.01em;
}

html.dark .admin-contact-handle {
  color: #9dc8ff;
}

/* Desktop Balances & Contact table: the global .table is table-layout:fixed (equal columns), which squeezed the
   hold panel to ~100px and let the Balance Adjustment form cover the threshold input. Size columns to content. */
.table.admin-balances-table {
  table-layout: auto;
}

.admin-balances-table .admin-hold-panel {
  min-width: 200px;
}

.table.admin-balances-table th,
.table.admin-balances-table td {
  overflow-wrap: normal;
  word-break: normal;
}

.table.admin-balances-table th:not(:first-child),
.table.admin-balances-table td.text-right,
.table.admin-balances-table td.text-center:not(:has(.admin-hold-panel)) {
  white-space: nowrap;
}

.table.admin-balances-table td:first-child {
  min-width: 8rem;
  max-width: 14rem;
}

.table.admin-balances-table .admin-contact-handle {
  overflow-wrap: anywhere;
}

.admin-hold-panel--active {
  border-color: #f5b7b7;
  background: linear-gradient(165deg, #fff5f5 0%, #ffe8e8 100%);
}

.admin-hold-panel--mobile {
  max-width: none;
  margin: 0;
}

.admin-hold-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  font-weight: 700;
}

.admin-hold-input {
  width: 100%;
  border: 1px solid #c8d3e3;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.35;
  background: #ffffff;
  color: #1f2937;
}

.admin-hold-textarea {
  resize: vertical;
  min-height: 52px;
}

.admin-hold-input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
}

.admin-hold-btn {
  border: 0;
  width: 100%;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.admin-hold-btn:hover {
  transform: translateY(-1px);
}

.admin-hold-btn--set {
  color: #ffffff;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}

.admin-hold-btn--clear {
  color: #7f1d1d;
  background: linear-gradient(135deg, #ffd6d6 0%, #ffc0c0 100%);
  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.18);
}

.admin-inline-status {
  width: 100%;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  padding: 6px 7px;
}

.admin-inline-status--ok {
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.admin-inline-status--error {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.admin-inline-status--busy {
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.admin-maxbet-wrap {
  margin-top: 4px;
  border-top: 1px dashed rgba(100, 116, 139, 0.35);
  padding-top: 6px;
}

.admin-maxbet-current {
  font-size: 11px;
  color: #334155;
  margin-bottom: 4px;
}

.admin-maxbet-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-maxbet-input {
  flex: 1;
  min-width: 0;
}

.admin-maxbet-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Blackbook v2 visual refresh */
:root {
  --v2-ink: #0A1018;
  --v2-ink-soft: #334a6a;
  --v2-paper: #ebf4ff;
  --v2-panel: #ffffff;
  --v2-stroke: #bfd5ef;
  --v2-brand: var(--brand, #00E69A);
  --v2-brand-strong: #08152c;
  --v2-brand-2: var(--brand-2, #00c986);
  --v2-accent: var(--brand-2, #00E69A);
  --v2-glow: rgba(9, 24, 46, 0.24);
  --v2-bg-a: rgba(59, 130, 246, 0.16);
  --v2-bg-b: rgba(183, 216, 255, 0.22);
  --v2-bg-c0: #f6f9ff;
  --v2-bg-c1: #edf3fc;
  --v2-bg-c2: #e7eef9;
  --v2-header-from: rgba(9, 31, 58, 0.92);
  --v2-header-to: rgba(16, 59, 108, 0.88);
  --v2-header-border: rgba(12, 31, 56, 0.16);
  --v2-header-text: #f4f8ff;
  --v2-header-hover: #d5e7ff;
  --v2-brand-badge-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  --v2-brand-badge-border: rgba(255, 255, 255, 0.18);
  --v2-table-head-bg: linear-gradient(180deg, rgba(239, 247, 255, 0.92), rgba(230, 240, 252, 0.9));
  --v2-table-subhead-bg: linear-gradient(180deg, rgba(226, 238, 252, 0.92), rgba(216, 231, 248, 0.9));
  --v2-table-row-hover: linear-gradient(90deg, rgba(11, 31, 59, 0.07), rgba(59, 130, 246, 0.06));
  --v2-table-expanded-bg: linear-gradient(180deg, rgba(247, 251, 255, 0.92), rgba(238, 246, 255, 0.9));
  --v2-table-head-text: #4f647f;
  --v2-table-text: #13253f;
}

html.dark {
  /* Brag Wire stadium dark (replaces legacy pink/purple dark) */
  --v2-bg-a: rgba(0, 230, 154, 0.08);
  --v2-bg-b: rgba(7, 19, 29, 0.55);
  --v2-bg-c0: #0A1018;
  --v2-bg-c1: #07131D;
  --v2-bg-c2: #0A1018;
  --v2-ink: #F5F8FA;
  --v2-ink-soft: #93A5B3;
  --v2-panel: #0F1A24;
  --v2-stroke: rgba(147, 165, 179, 0.22);
  --v2-header-from: rgba(10, 16, 24, 0.96);
  --v2-header-to: rgba(7, 19, 29, 0.92);
  --v2-header-border: rgba(0, 230, 154, 0.28);
  --v2-header-text: #F5F8FA;
  --v2-header-hover: #00E69A;
  --v2-brand-badge-bg: linear-gradient(135deg, rgba(0, 230, 154, 0.14), rgba(7, 19, 29, 0.4));
  --v2-brand-badge-border: rgba(0, 230, 154, 0.28);
  --v2-table-head-bg: linear-gradient(180deg, rgba(15, 26, 36, 0.98), rgba(10, 16, 24, 0.96));
  --v2-table-subhead-bg: linear-gradient(180deg, rgba(12, 22, 32, 0.98), rgba(8, 14, 22, 0.96));
  --v2-table-row-hover: linear-gradient(90deg, rgba(0, 230, 154, 0.1), rgba(7, 19, 29, 0.35));
  --v2-table-expanded-bg: linear-gradient(180deg, rgba(12, 22, 32, 0.96), rgba(8, 14, 22, 0.94));
  --v2-table-head-text: #93A5B3;
  --v2-table-text: #F5F8FA;
  --v2-glow: rgba(0, 0, 0, 0.45);
}

html.dark .app-v2-open-bets-strip {
  border-color: rgba(115, 158, 215, 0.46);
  background: linear-gradient(145deg, rgba(28, 52, 88, 0.78), rgba(20, 39, 66, 0.8));
}

html.dark .app-v2-open-bets-label {
  color: #aac7ed;
}

html.dark .app-v2-open-bets-value {
  color: #e2ecff;
}

html.dark .app-v2-open-bets-tag {
  border-color: rgba(128, 170, 223, 0.38);
  background: rgba(16, 34, 58, 0.72);
  color: #cfe3ff;
}

html[class*="theme-"] {
  --v2-header-from: color-mix(in srgb, #081a33 74%, var(--v2-brand) 26%);
  --v2-header-to: color-mix(in srgb, #123762 58%, var(--v2-brand-2) 42%);
  --v2-header-border: color-mix(in srgb, rgba(255, 255, 255, 0.18) 58%, var(--v2-brand-2) 42%);
  --v2-header-hover: color-mix(in srgb, #ffffff 84%, var(--v2-brand-2) 16%);
  --v2-bg-a: color-mix(in srgb, var(--v2-brand) 18%, transparent);
  --v2-bg-b: color-mix(in srgb, var(--v2-brand-2) 20%, transparent);
}

html,
body {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  color: var(--v2-ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 8%, var(--v2-bg-a), transparent 28%),
    radial-gradient(circle at 87% 5%, var(--v2-bg-b), transparent 27%),
    linear-gradient(180deg, var(--v2-bg-c0) 0%, var(--v2-bg-c1) 58%, var(--v2-bg-c2) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(12, 31, 56, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 31, 56, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: -1;
}

.app-v2-shell {
  position: relative;
  max-width: 100%;
}

.app-v2-content {
  display: grid;
  /* one column that can shrink to the screen: an implicit auto track grows to the widest card's
     min-content and pushed Summary / Push Tools 7-20px past a 360px phone */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.app-v2-content > * {
  min-width: 0;
}

.app-v2-upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  border: 1px solid #9fc3ef;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(11, 31, 59, 0.95), rgba(36, 90, 176, 0.92));
  color: #f8fbff;
  box-shadow: 0 14px 28px -18px rgba(6, 19, 37, 0.58);
}

.app-v2-upgrade-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-v2-upgrade-copy strong {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-v2-upgrade-copy span {
  font-size: 13px;
  color: #dce9ff;
}

.app-v2-upgrade-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-v2-upgrade-btn,
.app-v2-upgrade-btn-alt {
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
}

.app-v2-upgrade-btn-alt {
  color: #d8e8ff !important;
  border-color: rgba(216, 232, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.app-v2-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  position: sticky;
  top: 8px;
  z-index: 20;
  border: 1px solid var(--v2-header-border);
  border-radius: 16px;
  padding: 8px 14px;
  backdrop-filter: blur(8px);
  background: linear-gradient(120deg, var(--v2-header-from), var(--v2-header-to));
  box-shadow: 0 16px 34px rgba(2, 10, 23, 0.24);
}

.app-v2-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.app-v2-header > * {
  position: relative;
  z-index: 1;
}

.app-v2-header-left {
  min-width: 0;
}

.app-v2-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-v2-header-theme-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.64));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 16px -14px rgba(2, 10, 23, 0.72);
}

.app-v2-header-theme-mark-logo,
.app-v2-header-theme-mark .app-v2-team-logo-fallback {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.app-v2-team-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, #f8fafc 0%, #dbe7fb 100%);
  color: #10213f;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(16, 33, 63, 0.2);
  box-shadow: 0 4px 12px rgba(16, 33, 63, 0.18);
}

.app-v2-logo {
  width: clamp(178px, 25vw, 292px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 230, 154, 0.18));
}

.app-v2-brand {
  padding: 4px 10px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.app-v2-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  min-width: 0;
}

.app-v2-theme-chip-logo,
.app-v2-theme-chip .app-v2-team-logo-fallback {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.app-v2-theme-chip-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.app-v2-theme-chip-eyebrow {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d3e0f2;
  font-weight: 700;
}

.app-v2-theme-chip-name {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  color: #f2f7ff;
  font-size: 12px;
  font-weight: 700;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-v2-theme-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(140deg, rgba(241, 245, 249, 0.85), rgba(226, 232, 240, 0.58));
}

.app-v2-theme-preview-logo,
.app-v2-theme-preview .app-v2-team-logo-fallback {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.app-v2-theme-preview-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.app-v2-theme-preview-eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #334155;
  font-weight: 700;
}

.app-v2-theme-preview-name {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}

.app-v2-nav {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 18px;
  justify-self: center;
}

.app-v2-version-flag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 7px 10px;
  min-width: 132px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.app-v2-header-actions {
  justify-self: end;
}

.app-v2-version-eyebrow {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cddcf0;
  font-weight: 700;
}

.app-v2-version-value {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.app-v2-version-flag--mobile {
  min-width: 0;
  width: fit-content;
  align-self: flex-start;
  margin-bottom: 2px;
}

.app-v2-nav-btn {
  position: relative;
  padding-bottom: 2px;
}

.app-v2-nav-btn--active {
  color: var(--v2-header-hover) !important;
  font-weight: 700;
}

.app-v2-nav-btn--inactive {
  color: var(--v2-header-text) !important;
}

.app-v2-nav-btn--inactive:hover {
  color: var(--v2-header-hover) !important;
}

.app-v2-nav-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v2-accent), #b7d8ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.app-v2-nav-btn:hover::after {
  transform: scaleX(1);
}

.app-v2-header .text-blue-600,
.app-v2-header .text-gray-700,
.app-v2-header .text-gray-200,
.app-v2-header .dark\:text-blue-400 {
  color: var(--v2-header-text) !important;
}

.app-v2-header .hover\:text-blue-600:hover,
.app-v2-header .dark\:hover\:text-blue-400:hover {
  color: var(--v2-header-hover) !important;
}

.app-v2-header .btn-alt {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f8fbff !important;
}

.app-v2-menu-toggle {
  color: var(--v2-header-text);
}

.app-v2-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

.app-v2-mobile-menu {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 16px 32px -24px var(--v2-glow);
}

.app-v2-games-toolbar {
  border-color: #d2dff0 !important;
}

.app-v2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.app-v2-sports-menu {
  padding-top: 10px;
  padding-bottom: 10px;
}

.app-v2-league-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-v2-toolbar-row {
  margin-top: 2px;
}

.app-v2-date-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
  background: var(--surface-3);
  color: var(--text);
}

.app-v2-date-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 9px !important;
}

.app-v2-date-today-btn {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px !important;
  font-weight: 700;
}

.app-v2-date-today-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.app-v2-date-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  font-weight: 700;
  color: var(--text);
}

.app-v2-toolbar-actions {
  flex-wrap: wrap;
  min-width: 0;
}

.app-v2-seg-control {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 3px;
  background: var(--surface-3);
  min-width: 0;
  max-width: 100%;
}

.app-v2-seg-btn {
  border: 0;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
}

.app-v2-seg-btn.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.app-v2-mybets-btn,
.app-v2-refresh-btn {
  min-height: 38px;
}

.app-v2-refresh-btn {
  min-width: 38px;
  padding: 0 10px !important;
}

.app-v2-search-wrap {
  position: relative;
}

.app-v2-search-wrap input {
  min-height: 44px;
  padding-left: 34px !important;
}

.app-v2-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.app-v2-empty {
  border-style: dashed !important;
  border-width: 1px !important;
}

.app-v2-empty-icon {
  font-size: 22px;
  color: #7e96b1;
  margin-bottom: 8px;
}

.app-v2-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  box-shadow: 0 20px 34px -20px rgba(0, 0, 0, 0.45) !important;
}

.app-v2-dropdown-item {
  color: var(--text);
}

.app-v2-dropdown-item:hover,
.app-v2-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: color-mix(in srgb, var(--text) 70%, var(--brand) 30%);
  outline: none;
}

.app-v2-mobile-menu-item {
  color: var(--text);
}

.app-v2-mobile-menu-item:hover,
.app-v2-mobile-menu-item:focus-visible {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  outline: none;
}

.app-v2-mobile-menu-item--active {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.app-v2-alert {
  border-color: rgba(220, 38, 38, 0.35) !important;
  background: linear-gradient(180deg, #fff7f7, #ffeceb) !important;
  box-shadow: 0 12px 24px -20px rgba(153, 27, 27, 0.4);
}

.card {
  border: 1px solid var(--border, var(--v2-stroke)) !important;
  border-radius: 16px !important;
  background: var(--surface-1) !important;
  color: var(--text);
  box-shadow: 0 18px 34px -24px var(--v2-glow);
}

.app-v2-content .card:hover {
  box-shadow: 0 22px 36px -24px rgba(6, 20, 41, 0.28);
}

.app-v2-game {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.app-v2-game:hover {
  transform: translateY(-1px);
}

.app-v2-game-head {
  align-items: flex-start;
}

.app-v2-game-meta {
  min-width: 0;
}

.app-v2-game-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-v2-game-title {
  line-height: 1.25;
}

.app-v2-matchup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-v2-inline-matchup,
.app-v2-drawer-matchup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.app-v2-matchup-sep {
  color: var(--text-muted);
  font-weight: 700;
}

.app-v2-team-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.app-v2-team-identity-logo,
.app-v2-team-identity-fallback {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  flex: 0 0 auto;
}

.app-v2-team-identity-logo {
  object-fit: contain;
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
}

.app-v2-team-identity-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}

.app-v2-team-identity-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* NCAA AP Top-25 rank shown before college team names ("#7 Ole Miss"). */
.bb-team-rank {
  flex: 0 0 auto;
  margin-right: 0.3em;
  font-size: 0.78em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  opacity: 0.6;
  white-space: nowrap;
}

.app-v2-team-identity .bb-team-rank {
  margin-right: -3px; /* tighten the 6-7px flex gap so "#7" reads with the name */
}

.app-v2-team-identity.is-compact .app-v2-team-identity-logo,
.app-v2-team-identity.is-compact .app-v2-team-identity-fallback {
  width: 20px;
  height: 20px;
}

.app-v2-team-identity.is-compact .app-v2-team-identity-name {
  font-size: 12px;
}

.app-v2-game-subline {
  margin-top: 2px;
}

.app-v2-game-badges .chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.app-v2-open-bets-strip {
  border: 1px solid color-mix(in srgb, var(--v2-brand-2) 38%, #c7d8ec);
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(145deg, rgba(218, 234, 255, 0.62), rgba(243, 249, 255, 0.8));
  display: grid;
  gap: 7px;
}

.app-v2-open-bets-strip--action {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.app-v2-open-bets-strip--action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -16px rgba(14, 54, 102, 0.46);
}

.app-v2-open-bets-strip--action:focus-visible {
  outline: 2px solid rgba(28, 110, 186, 0.44);
  outline-offset: 2px;
}

.app-v2-open-bets-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.app-v2-open-bets-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #355d89;
  font-weight: 800;
}

.app-v2-open-bets-value {
  font-size: 13px;
  color: #12335b;
  font-weight: 700;
}

.app-v2-open-bets-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-v2-open-bets-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(33, 90, 153, 0.28);
  background: rgba(255, 255, 255, 0.78);
  color: #1a436f;
  font-size: 11px;
  font-weight: 700;
}

/* "Placed 4:12 PM" line + LIVE tag (bet placed after kickoff) on every bet card. The tag reuses the
   .app-v2-open-bets-tag pill in the danger tone; neither the time nor the tag ever wraps mid-word. */
.bb-placed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}

.bb-placed-text {
  white-space: nowrap;
}

/* BetRow keeps its muted time; the LIVE tag stays full strength */
.bb-placed--dim .bb-placed-text {
  opacity: 0.8;
}

.app-v2-open-bets-tag.bb-live-tag {
  flex: none;
  white-space: nowrap;
  padding: 1px 6px;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #dc2626;
  border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, transparent);
  background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
  opacity: 1;
}

html.dark .app-v2-open-bets-tag.bb-live-tag {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.35);
}

.app-v2-odds-board {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

.app-v2-odds-head,
.app-v2-odds-row {
  display: grid;
  grid-template-columns: minmax(128px, 1.1fr) repeat(3, minmax(100px, 1fr));
  gap: 0;
}

.app-v2-odds-head {
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}

.app-v2-odds-head > div {
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.app-v2-team-cell {
  padding: 12px;
  font-weight: 700;
  color: var(--text);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.app-v2-odds-row:first-of-type .app-v2-team-cell {
  border-top: 0;
}

.app-v2-odds-tile {
  border: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  min-height: 58px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.app-v2-odds-row:first-of-type .app-v2-odds-tile {
  border-top: 0;
}

.app-v2-odds-tile:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

.app-v2-odds-tile:disabled {
  color: var(--text-muted);
  background: var(--surface-2);
  opacity: 0.72;
}

.app-v2-odds-tile--primary {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
}

.app-v2-live-cta {
  min-height: 48px;
}

.app-v2-react-btn {
  min-height: 34px;
}

.btn {
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(140deg, var(--v2-brand) 0%, color-mix(in srgb, var(--v2-brand) 45%, var(--v2-brand-2)) 56%, var(--v2-brand-2) 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 20px -14px rgba(2, 6, 23, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 16px 26px -14px rgba(2, 6, 23, 0.5);
}

.btn-alt {
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.chip {
  border-radius: 10px !important;
  border-color: var(--border) !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.app-v2-content input:not([type="checkbox"]):not([type="radio"]),
.app-v2-content select,
.app-v2-content textarea {
  border: 1px solid var(--border) !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-v2-content input:not([type="checkbox"]):not([type="radio"]):focus,
.app-v2-content select:focus,
.app-v2-content textarea:focus {
  outline: 2px solid rgba(14, 111, 184, 0.26);
  border-color: #2a70b3 !important;
}

.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v2-table-head-text);
}

.table td {
  color: var(--v2-table-text);
}

.app-v2-table-head {
  background: var(--v2-table-head-bg);
}

.app-v2-table-subhead {
  background: var(--v2-table-subhead-bg);
}

.app-v2-table-row:hover,
.app-v2-table .row-hover:hover {
  background: var(--v2-table-row-hover);
}

.app-v2-table-expanded-cell {
  background: var(--v2-table-expanded-bg);
}

.app-v2-table-expanded-cell .app-v2-betrow {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 251, 255, 0.97)) !important;
  border-color: #c8d9ee !important;
  color: #13253f;
}

html.dark .app-v2-table-expanded-cell .app-v2-betrow {
  background: linear-gradient(180deg, rgba(20, 39, 66, 0.92), rgba(17, 33, 56, 0.94)) !important;
  border-color: rgba(110, 150, 207, 0.38) !important;
  color: #e2ecff;
}

@keyframes app-v2-betrow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 122, 206, 0.42);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(45, 122, 206, 0);
  }
}

.app-v2-betrow-focus {
  border-color: #2d7ace !important;
  animation: app-v2-betrow-pulse 1.2s ease-out;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table th,
.table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-v2-table-wrap {
  overflow-x: visible;
}

.table .app-v2-team-identity-name {
  white-space: normal;
}

.row-hover:hover,
.app-v2-content tbody tr:hover {
  background: linear-gradient(90deg, rgba(11, 31, 59, 0.06), rgba(59, 130, 246, 0.05));
}

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

.stat {
  background: var(--surface-2) !important;
  color: var(--text);
  border: 1px solid var(--border);
}

.sports-menu {
  border-radius: 16px;
  border-color: var(--border);
  background: var(--surface-1);
  color: var(--text);
}

.sports-menu__chip--active,
.sports-menu-pill--active {
  background: linear-gradient(145deg, var(--v2-brand), color-mix(in srgb, var(--v2-brand) 50%, var(--v2-brand-2))) !important;
  border-color: var(--v2-brand) !important;
  box-shadow: 0 9px 18px rgba(11, 31, 59, 0.3) !important;
}

@keyframes v2FadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-v2-shell > :not(.app-v2-overlay-root):not(.app-v2-mobile-nav) {
  /* "backwards", not "both": a finished animation must not leave a transform behind.
     A lingering transform makes the element a containing block for position:fixed
     children, which lets fixed bars/modals drift on iOS Safari. */
  animation: v2FadeUp 0.34s ease backwards;
}

.app-v2-overlay-root {
  animation: none !important;
  transform: none !important;
}

.app-v2-drawer-backdrop {
  backdrop-filter: blur(2px);
  background: rgba(3, 12, 24, 0.42) !important;
}

.app-v2-drawer-root {
  isolation: isolate;
}

.app-v2-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 100%);
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border) !important;
  background: var(--surface-1) !important;
  color: var(--text);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

.app-v2-drawer-head {
  flex: 0 0 auto;
}

.app-v2-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.app-v2-drawer-content {
  padding-bottom: 10px;
}

.app-v2-drawer-actions {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.app-v2-wager-cta {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 12px;
  background: var(--surface-2) !important;
  color: var(--text);
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.4);
}

.app-v2-wager-cta-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.app-v2-wager-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.app-v2-wager-stake {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.app-v2-wager-cta-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.app-v2-wager-primary,
.app-v2-wager-secondary {
  min-height: 48px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.app-v2-wager-primary {
  background: linear-gradient(140deg, var(--v2-brand) 0%, color-mix(in srgb, var(--v2-brand) 46%, var(--v2-brand-2)) 50%, var(--v2-brand-2) 100%) !important;
  box-shadow: 0 14px 24px -14px rgba(4, 25, 51, 0.58);
}

.app-v2-wager-secondary {
  border: 1px solid var(--border) !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.app-v2-wager-note {
  margin: 10px 2px 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}

.app-v2-mobile-nav {
  border: 1px solid var(--border);
  background: var(--surface-2);
  /* no backdrop-filter here: on iOS Safari it makes position:fixed resolve against a scrolling
     containing block so the bar floats mid-viewport while you scroll (Jay 2026-10-27 / navfix2).
     Frost lives on the fixed nav's ::before pseudo only. */
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  overflow: visible;
  color: var(--text);
}

.app-v2-mobile-nav--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.app-v2-mobile-nav-btn {
  color: color-mix(in srgb, var(--text) 78%, var(--brand) 22%);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.16s ease, color 0.16s ease;
}

.app-v2-mobile-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-bottom: 2px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.app-v2-mobile-nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.app-v2-mobile-nav-btn--active {
  color: var(--accent) !important;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}

.app-v2-mobile-nav-btn--active .app-v2-mobile-nav-icon {
  background: linear-gradient(150deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--brand) 62%, transparent);
  color: #ffffff;
}

.app-v2-mobile-nav-btn--inactive {
  color: color-mix(in srgb, var(--text) 74%, var(--muted) 26%);
}

.app-v2-footer {
  border-top: 1px solid rgba(18, 50, 87, 0.12);
  padding-top: 14px;
  margin-top: 34px;
}

pre.code {
  border: 1px solid #c8d8ec;
  background: linear-gradient(180deg, #0d2038, #0b1a30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .app-v2-upgrade-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .app-v2-upgrade-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .table th,
  .table td {
    font-size: 11px;
    padding: 8px 6px;
  }

  .table td .btn,
  .table td .btn-alt {
    margin-left: 0 !important;
    margin-top: 4px;
  }

  .app-v2-header {
    top: 0;
    border-radius: 13px;
    padding: 7px 10px;
    grid-template-columns: 1fr auto;
  }

  .app-v2-logo {
    width: min(48vw, 188px);
  }

  .app-v2-brand {
    padding: 4px 8px 5px;
  }

  .app-v2-theme-chip {
    display: none;
  }

  .app-v2-version-flag {
    min-width: 0;
    padding: 6px 8px;
  }

  .app-v2-games-toolbar {
    padding: 12px;
  }

  .app-v2-league-row {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 2px;
  }

  .app-v2-league-row .sports-menu__chip {
    flex: 0 1 auto;
  }

  .app-v2-toolbar-row {
    align-items: stretch;
  }

  .app-v2-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }

  .app-v2-seg-control {
    flex: 1;
    overflow: hidden;
  }

  .app-v2-seg-btn {
    min-height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }

  .app-v2-mybets-btn {
    display: none;
  }

  .app-v2-date-control {
    width: 100%;
    justify-content: space-between;
    min-width: 0;
  }

  .app-v2-date-pill {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .app-v2-odds-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-v2-odds-head > div:first-child {
    display: none;
  }

  .app-v2-odds-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-v2-team-cell {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    font-size: 13px;
    padding: 10px 12px 6px;
    background: var(--surface-2);
  }

  .app-v2-game {
    padding: 12px;
  }

  .app-v2-game-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .app-v2-game-badges {
    justify-content: flex-start;
    gap: 6px;
  }

  .app-v2-game-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .app-v2-open-bets-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .app-v2-team-identity {
    gap: 6px;
  }

  .app-v2-team-identity-logo,
  .app-v2-team-identity-fallback {
    width: 22px;
    height: 22px;
  }

  .app-v2-team-identity-name {
    max-width: 42vw;
    font-size: 13px;
  }

  .app-v2-matchup-sep {
    font-size: 11px;
    opacity: 0.75;
  }

  .app-v2-drawer-matchup .app-v2-team-identity-name {
    max-width: 34vw;
  }

  .app-v2-odds-tile {
    min-height: 52px;
    font-size: 14px;
  }

  .app-v2-drawer-panel {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 12px 12px 0;
    border-left: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-v2-drawer-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(252, 254, 255, 0.92));
    backdrop-filter: blur(4px);
    padding-top: 2px;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }

  .app-v2-drawer-scroll {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .app-v2-drawer-content {
    padding-bottom: 12px;
  }

  .app-v2-drawer-actions {
    position: static;
    border-top: 0;
    margin-top: 8px;
    margin: 0 -2px;
    padding-top: 10px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .app-v2-wager-cta {
    border-radius: 12px !important;
    padding: 10px;
  }

  .app-v2-wager-stake {
    font-size: 20px;
  }

  .app-v2-wager-cta-buttons {
    grid-template-columns: 1fr;
  }

  .app-v2-wager-primary,
  .app-v2-wager-secondary {
    min-height: 46px;
    font-size: 13px;
  }

  .card {
    border-radius: 14px !important;
  }
}

@media (max-width: 420px) {
  .app-v2-game-title {
    font-size: 15px;
  }

  .app-v2-team-identity-logo,
  .app-v2-team-identity-fallback {
    width: 20px;
    height: 20px;
  }

  .app-v2-team-identity-name {
    font-size: 12px;
    max-width: 39vw;
  }

  .app-v2-drawer-matchup .app-v2-team-identity-name {
    max-width: 31vw;
  }

  .app-v2-game-badges .chip {
    min-height: 24px;
    font-size: 10px;
    padding: 3px 7px;
  }
}

@media (min-width: 1200px) {
  .app-v2-shell {
    padding-top: 18px;
  }
}

/* ---- iPhone stability (admin jump / nav break-away) ---- */
/* overflow-x:hidden on both html and body turns body into a scroll container on iOS
   Safari, which detaches position:fixed bars and makes the page jump. clip prevents
   sideways overflow without creating a scroll container. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Zero sideways scroll on phones: nothing may be wider than the screen. Tables, previews and code
   scroll inside their own box instead of widening the page. html/body keep overflow-x:hidden (set
   above) for iOS < 16, which ignores clip; clip wins where supported. These are backstops only:
   tests/no-hscroll.e2e.mjs fails if anything actually reaches past the screen edge. */
html,
body {
  max-width: 100%;
}
#root,
.app-v2-shell {
  max-width: 100%;
  min-width: 0;
}
.bb-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre,
code {
  max-width: 100%;
  overflow-x: auto;
}
img,
video,
canvas {
  max-width: 100%;
}
/* a <select> is as wide as its longest option (a long handle) unless capped; a % cap also drops its
   min-content contribution, so flex/grid rows around it can shrink */
select,
input,
textarea {
  max-width: 100%;
}

/* iOS Safari zooms the page when a focused field's font is under 16px, which shifts
   everything on screen while typing. Keep every text field at 16px on phones/tablets. */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* While the on-screen keyboard is up (a text field has focus on a touch device) the
   fixed bottom nav would ride up over the keyboard or float mid-screen; hide it. */
html.bb-kb-open .app-v2-mobile-nav--fixed {
  display: none;
}

/* utils/vv-settle.js (iOS only): forces one synchronous re-layout of the bottom nav after the keyboard / an overlay
   closes. Added and removed in the same task, so it never paints. */
.app-v2-mobile-nav--fixed.bb-nav-reflow {
  display: none !important;
}

/* ---- Board / bet cards on phones (2026-10-24 iPhone report) ---- */
/* .table td sets overflow-wrap:anywhere + word-break:break-word for long handles. Inside the Board's expanded
   row that reached the bet cards: the 20px team-initials circle ("OMR") is narrower than its text, so
   "anywhere" broke it one letter per line and pushed the "CFB -" label onto its own line. Cards wrap at
   word boundaries only; the initials never wrap; each team (logo + rank + name) stays one unit and truncates. */
.app-v2-betrow {
  overflow-wrap: break-word;
  word-break: normal;
}
.app-v2-betrow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.app-v2-betrow-title > .app-v2-inline-matchup {
  display: contents; /* league label, away team, "@" and home team wrap as one row of units */
}
.app-v2-betrow-league,
.app-v2-betrow-title .app-v2-matchup-sep {
  flex: 0 0 auto;
  white-space: nowrap;
}
.app-v2-betrow-handle {
  min-width: 0;
}
.app-v2-team-identity {
  max-width: 100%;
}
.app-v2-team-identity-fallback {
  overflow: hidden;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1;
  font-size: 9px;
  letter-spacing: -0.02em;
}
.app-v2-team-identity.is-compact .app-v2-team-identity-fallback {
  font-size: 7px;
}
@media (max-width: 640px) {
  .app-v2-team-identity-fallback {
    font-size: 7.5px;
  }
}
.app-v2-betrow .app-v2-team-identity-name,
.app-v2-inline-matchup .app-v2-team-identity-name {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Board balances table: amounts never break mid-number ($99,999.9 / 9) and the Balance + React column is sized
   for "-$1,775.00" instead of an equal 25% share. */
.bb-board-table > thead > tr > th:not(:first-child),
.bb-board-table > tbody > tr > td.text-right {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}
.bb-board-table .bb-money {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bb-board-table > thead > tr > th:nth-child(2) { width: 4.75rem; white-space: normal; }
  .bb-board-table > thead > tr > th:nth-child(3) { width: 5.25rem; }
  .bb-board-table > thead > tr > th:nth-child(4) { width: 6rem; }
  .bb-board-balance {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
  }
  /* "(2 overdue, $70.00)" under the open-bet count on its own lines ("(2 overdue," / "$70.00)"), inside the Open Bets
     column instead of running (nowrap) into Pending $ (Jay's Board, 360-430px). The dollar amount never splits. */
  .bb-board-table > tbody > tr > td .bb-board-overdue {
    display: block;
    margin-left: 0;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
  .bb-board-table > tbody > tr > td .bb-board-overdue-n,
  .bb-board-table > tbody > tr > td .bb-board-overdue .bb-money {
    display: inline-block;
  }
  .bb-board-table > tbody > tr > td .bb-board-overdue-n {
    white-space: normal;
  }
}

/* ---- Bottom nav flush on the TRUE viewport bottom (2026-10-25 iPhone report, repeat of 10-24) ---- */
/* Root cause of the mid-screen bar: utils/nav-pin.js (#592) translated the nav by (visualViewport.offsetTop +
   visualViewport.height) - nav bottom. After the iOS keyboard closes, iOS 26 Safari / the home-screen app leaves
   visualViewport.height short by about the keyboard height (Apple forums 800125, WebKit 297779), so the script
   shifted the bar up ~336px (~55-60% down the screen) and nothing ever moved it back. Before that the bar carried
   transform + will-change (the iOS 26 fixed+transform drift) and sat inside the animated .app-v2-shell.
   Now: nav-pin.js is gone, the nav is portaled straight into <body>, and it is plain position:fixed on the layout
   viewport bottom with no transform. One narrow exception (utils/kb-guard.js, 2026-10-25 evening): while iOS keeps a
   STALE visualViewport.offsetTop (full-height viewport, offsetTop > 1, nav bottom above the visible bottom) kb-guard
   sets an inline translateY(offsetTop + vv.height - innerHeight) !important so the bar stays on the visible bottom.
   It only ever moves the bar DOWN, by at most offsetTop (never #592's upward shift), and is cleared the moment
   offsetTop returns to 0 (vv event or 250ms poll). The nav is never hidden in that state (no last-resort hide). */
:root {
  --bb-nav-h: 64px; /* bar height without the home-indicator inset */
}
.app-v2-mobile-nav.app-v2-mobile-nav--fixed {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: auto;
  z-index: 50;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
  translate: none !important;
  contain: none !important;
  perspective: none !important;
  border-width: 1px 0 0;
  border-radius: 16px 16px 0 0;
  overflow: visible;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-shadow: 0 -10px 28px -22px rgba(8, 27, 52, 0.52);
  /* Opaque-enough fill so we do not need backdrop-filter on the fixed element itself. */
  background: rgba(10, 16, 24, 0.96);
}
/* Frost on a pseudo only — never on a wrapper, never on the fixed element (iOS Safari). */
.app-v2-mobile-nav.app-v2-mobile-nav--fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(15, 26, 36, 0.92), rgba(7, 19, 29, 0.96));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (max-width: 639.98px) {
  /* the page always ends above the bar: nav height + home-indicator inset + a little air */
  body {
    padding-bottom: calc(var(--bb-nav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* viewport-fit=cover (index.html) makes env(safe-area-inset-*) real on iPhone; keep everything else exactly where it
   was: these insets are 0 on desktop, Android and portrait Safari, and only add room for the notch / home bar. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.app-v2-header {
  top: calc(8px + env(safe-area-inset-top, 0px));
}
@media (max-width: 640px) {
  .app-v2-header {
    top: env(safe-area-inset-top, 0px);
  }
}

/* Admin > Open Picks edit row: the actions cell (Save + Set Result + React, ~290px) was wider than its 1/5 grid
   column at 1280, so it spilled left over the odds input, whose spinner covered the "v" ("Sa:e"). The actions
   column now sizes to its buttons; the inputs share the rest. */
.admin-pick-edit-grid > * {
  min-width: 0;
}
.admin-pick-edit-grid > input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .grid.admin-pick-edit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }
  .admin-pick-edit-grid > .flex {
    flex-wrap: nowrap;
  }
}

/* Live betting closed late in a game (utils/live-cutoff.js): a muted, full-width, wrapping notice, never a
   brand-colored button; the reason wraps by word, never letter by letter. */
.app-v2-live-closed {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.app-v2-live-cta.app-v2-live-cta--closed,
.app-v2-live-cta.app-v2-live-cta--closed:disabled {
  width: 100%;
  background: #eef2f7 !important;
  color: #475569 !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.3;
}
.app-v2-live-closed-note {
  overflow-wrap: normal;
  word-break: normal;
}
.app-v2-bet-error {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}
.live-cutoff-admin { min-width: 0; }
.live-cutoff-admin .live-cutoff-buffers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.live-cutoff-admin .live-cutoff-buffers label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 0.8125rem;
}
.live-cutoff-admin .live-cutoff-buffers input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.live-cutoff-admin .live-cutoff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.live-cutoff-admin .live-cutoff-row > * { min-width: 0; }

/* Live-bet requests in My Open Bets (utils/pending-live.js): "Pending – waiting on bookie" / "Rejected by bookie"
   in the row's Status slot. Sentence case (not the uppercase of other statuses) so it stays on one line down to
   360 px; nowrap so it never breaks mid-label or stacks against the LIVE pill. */
.app-v2-betrow .bb-request-badge { white-space: nowrap; font-weight: 600; }
.app-v2-betrow .bb-request-badge--pending { color: #d97706; }
.app-v2-betrow .bb-request-badge--rejected { color: #dc2626; }
/* Counter bets + odds-moved re-confirm (components/CounterBets.jsx, api #274/#275). Everything wraps inside its
   card: no fixed widths, min-width:0 on grid/flex children, so nothing scrolls sideways at 360-430px. */
.bb-odds-age {
  display: inline-block;
  font-size: 11px;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.bb-line-moved-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 12px;
}
.bb-line-moved {
  flex: none;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
}
.bb-line-moved-now {
  white-space: nowrap;
}
html.dark .bb-line-moved {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.45);
  border-color: rgba(245, 158, 11, 0.6);
}
.bb-counter-form {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--v2-brand, #2563eb) 30%, transparent);
  background: color-mix(in srgb, var(--v2-brand, #2563eb) 5%, transparent);
  display: grid;
  gap: 8px;
  min-width: 0;
}
.bb-counter-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
}
.bb-counter-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  min-width: 0;
}
.bb-counter-fields label,
.bb-counter-note {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.bb-counter-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 16px; /* 16px: iOS doesn't zoom the page on focus */
}
.bb-counter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
.bb-counter-form .bb-counter-foot {
  margin-top: 0;
}
.bb-counter-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.bb-counter-buttons .btn,
.bb-counter-buttons .btn-alt,
.bb-counter-foot > .btn-alt {
  min-height: 36px;
}
.bb-counter-error {
  font-size: 12px;
  color: #b91c1c;
}
html.dark .bb-counter-error {
  color: #fca5a5;
}
.bb-countered-admin {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.bb-countered-admin-title {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}
.bb-counter-card {
  min-width: 0;
}
.bb-counter-offer {
  border: 1px solid color-mix(in srgb, var(--v2-brand, #2563eb) 35%, transparent);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--v2-brand, #2563eb) 4%, transparent);
}
.bb-counter-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.bb-counter-title {
  overflow-wrap: anywhere;
}
.bb-counter-badge {
  flex: none;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1e3a8a;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}
html.dark .bb-counter-badge {
  color: #bfdbfe;
  background: rgba(30, 58, 138, 0.45);
  border-color: rgba(147, 197, 253, 0.5);
}
.bb-terms {
  max-width: 560px;
  display: grid;
  margin-top: 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.bb-terms-row {
  display: grid;
  grid-template-columns: minmax(56px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 5px 10px;
  align-items: baseline;
}
.bb-terms-row + .bb-terms-row {
  border-top: 1px solid var(--border, #e2e8f0);
}
.bb-terms-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
  background: color-mix(in srgb, var(--muted, #64748b) 8%, transparent);
}
.bb-terms-label {
  color: var(--muted, #64748b);
}
.bb-terms-was,
.bb-terms-now {
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.bb-terms-row.is-changed .bb-terms-was {
  text-decoration: line-through;
  opacity: 0.7;
}
.bb-terms-row.is-changed .bb-terms-now {
  font-weight: 700;
  color: #1d4ed8;
}
html.dark .bb-terms-row.is-changed .bb-terms-now {
  color: #93c5fd;
}
.bb-counter-note-text {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  overflow-wrap: anywhere;
}
.bb-counter-clock {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bb-counter-clock.is-urgent {
  color: #b91c1c;
  font-weight: 700;
}
.bb-countered-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  margin-bottom: 10px;
}
.bb-counter-done {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #065f46;
  background: #d1fae5;
}
html.dark .bb-counter-done {
  color: #a7f3d0;
  background: rgba(6, 78, 59, 0.5);
}
.bb-counter-dismiss {
  flex: none;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.bb-counter-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
}
html.dark .bb-counter-banner {
  background: rgba(30, 58, 138, 0.3);
  border-color: rgba(147, 197, 253, 0.5);
  color: #dbeafe;
}
.bb-counter-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.bb-counter-banner-go {
  flex: none;
  font-weight: 700;
  text-decoration: underline;
}
.bb-counter-history {
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Bet slip: 409 odds_moved notice (app.jsx placeBet, utils/odds-moved.js). Wraps inside the slip at 320-1280 px:
   no fixed widths, long words break; the buttons reuse the slip's own two-up / stacked grid. */
.app-v2-wager-cta.is-odds-moved { border-color: #f59e0b !important; }
.app-v2-odds-moved {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  overflow-wrap: anywhere;
}
html.dark .app-v2-odds-moved {
  background: rgba(120, 53, 15, 0.32);
  color: #fde68a;
}
.app-v2-odds-moved-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.app-v2-odds-moved-was {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.app-v2-odds-moved-was s { opacity: 0.75; }
.app-v2-odds-moved-note {
  font-size: 0.8125rem;
  line-height: 1.35;
}
.app-v2-odds-moved .app-v2-wager-cta-buttons { margin-top: 2px; }

/* ESPN win probability chip + sparkline on open bet cards / Bet Details (utils/winprob.js) */
.bb-winprob {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 100%;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.bb-winprob::before { /* picked team's ESPN color */
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--bb-team, rgba(100, 116, 139, 0.6));
}
.bb-winprob-label { opacity: 0.7; }
.bb-winprob-pct { font-weight: 700; }
.bb-winprob.is-good .bb-winprob-pct { color: #15803d; }
.bb-winprob.is-bad .bb-winprob-pct { color: #b91c1c; }
.dark .bb-winprob.is-good .bb-winprob-pct { color: #4ade80; }
.dark .bb-winprob.is-bad .bb-winprob-pct { color: #f87171; }
.bb-winprob-spark { flex: 0 0 auto; display: block; opacity: 0.85; }
.bb-winprob-spark .bb-winprob-mid { stroke: currentColor; stroke-width: 0.6; stroke-dasharray: 1.5 1.5; opacity: 0.35; }
.bb-winprob.is-detail { font-size: 0.8rem; }

/* ---- React picker (utils/react-picker.js; 2026-10-25 2:57 PM ET iPhone report) ---- */
/* Replaces window.prompt() for every React button: the prompt's text field raised the iPhone keyboard, and iOS then
   left the layout viewport short by the keyboard height, so the fixed bottom nav sat ~300pt up over the bet cards.
   One-tap emoji plus a free-text field + Send (text reactions, as the prompt allowed); the field is a page input, so
   kb-guard hides the nav while typing and vv-settle re-checks the viewport on close. Above the bottom nav (z 50) and
   the bet slip drawer (z 80). */
.bb-react-picker {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bb-react-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 12, 24, 0.42);
}
.bb-react-picker-card {
  position: relative;
  width: min(340px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(199, 217, 239, 0.72);
  background: var(--panel, #fff);
  color: var(--text, #0f172a);
  box-shadow: 0 18px 34px -18px rgba(8, 27, 52, 0.55);
  padding: 14px;
}
.bb-react-picker-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.bb-react-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bb-react-picker-emoji {
  font-size: 26px;
  line-height: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--chip, #f8fafc);
}
.bb-react-picker-emoji.is-current {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #2563eb) 35%, transparent);
}
.bb-react-picker-text {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.bb-react-picker-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px; /* >= 16px: iOS doesn't zoom the page when the field takes focus */
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--chip, #f8fafc);
  color: inherit;
}
.bb-react-picker-send {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid var(--brand, #2563eb);
  background: var(--brand, #2563eb);
  color: #fff;
}
.bb-react-picker-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--border, #e2e8f0);
  background: transparent;
}

/* Message panel (Board > Message user(s)): opaque, over a real dim backdrop. "bg-black/60" was never in the
   compiled Tailwind and .card is a 97%-alpha gradient, so the page title bled through the panel (Jay, Oct 25). */
.bb-msg-backdrop {
  background: rgba(2, 6, 23, 0.6);
}
.card.bb-msg-panel,
.card.bb-msg-panel:hover {
  background: var(--panel, #fff) !important;
  opacity: 1 !important;
  isolation: isolate;
}

/* ===== Soccer (utils/soccer.js): 3-way match result, handicap / total goals, chance bar, slip rules ===== */
.bb-soccer-board { display: grid; gap: 10px; }
.bb-soccer-mk-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.bb-soccer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bb-soccer-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-soccer-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; min-width: 0; }
.bb-soccer-tile-side { font-size: 12px; font-weight: 600; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bb-soccer-tile-odds { font-size: 15px; font-weight: 700; }
.bb-soccer-tile.is-draw .bb-soccer-tile-side { color: #b7791f; }
.bb-3way { display: grid; gap: 4px; }
.bb-3way-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(127,127,127,.15); }
.bb-3way-seg { display: block; height: 100%; }
.bb-3way-seg.is-away { background: #2563eb; }
.bb-3way-seg.is-draw { background: #6e7681; }
.bb-3way-seg.is-home { background: #dc2626; }
.bb-3way-label { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.bb-soccer-rules { border: 1px solid rgba(183,121,31,.45); background: rgba(183,121,31,.08); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.bb-soccer-rules-title { font-weight: 700; margin-bottom: 2px; }
.bb-soccer-rules ul { margin: 0; padding-left: 16px; list-style: disc; }

/* Admin "Leagues" section (components/AdminDashboard.jsx LeaguesSetting, tracker #59): one card per sport, a
   switch per league; 2-3 columns at 1280, one column at 390 with 44 px tap rows. */
.group-leagues-admin { min-width: 0; }
.group-leagues-admin .group-leagues-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.group-leagues-admin .group-leagues-picker { display: grid; gap: 4px; max-width: 420px; }
.group-leagues-admin .group-leagues-picker select { width: 100%; min-width: 0; min-height: 44px; }
.group-leagues-admin .group-leagues-sports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.group-leagues-admin .group-leagues-sport {
  min-width: 0;
  margin: 0;
  padding: 6px 10px 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}
.group-leagues-admin .group-leagues-sport legend { padding: 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.group-leagues-admin .group-leagues-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
}
.group-leagues-admin .group-leagues-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #94a3b8;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.group-leagues-admin .group-leagues-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.group-leagues-admin .group-leagues-toggle input[type="checkbox"]:checked { background: #16a34a; }
.group-leagues-admin .group-leagues-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); }
.group-leagues-admin .group-leagues-toggle input[type="checkbox"]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.group-leagues-admin .group-leagues-toggle input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
.group-leagues-admin .group-leagues-name { min-width: 0; flex: 1 1 auto; }
.group-leagues-admin .group-leagues-tag {
  flex: 0 0 auto;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #f59e0b;
  color: #b45309;
  white-space: nowrap;
}
.group-leagues-admin .group-leagues-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-leagues-admin .group-leagues-actions .btn,
.group-leagues-admin .group-leagues-actions .btn-alt { min-height: 44px; }
.group-leagues-admin .group-leagues-note { padding: 8px 10px; border-radius: 10px; font-size: 0.875rem; line-height: 1.35; }
.group-leagues-admin .group-leagues-note--ok { border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; }
.group-leagues-admin .group-leagues-note--error { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }



/* Brag Wire rebrand v4 (task 76): semantic surfaces + stadium dark */
:root,
html.dark {
  --signal-green: #00E69A;
  --midnight: #0A1018;
  --stadium-navy: #07131D;
  --ice-white: #F5F8FA;
  --steel-gray: #93A5B3;
  --accent: #00E69A;
  --brand: #00E69A;
  --brand-2: #00c986;
  --brand-light: rgba(0, 230, 154, 0.14);
  --bg: #0A1018;
  --panel: #0F1A24;
  --surface-1: #0F1A24;
  --surface-2: #132030;
  --surface-3: #1A2B3A;
  --text: #F5F8FA;
  --text-secondary: #93A5B3;
  --text-muted: #93A5B3;
  --muted: #93A5B3;
  --border: rgba(147, 165, 179, 0.22);
  --border-light: rgba(147, 165, 179, 0.12);
  --chip: #132030;
  --chip-hover: #1A2B3A;
  --v2-brand: #00E69A;
  --v2-brand-2: #00c986;
  --v2-accent: #00E69A;
  --v2-ink: #F5F8FA;
  --v2-ink-soft: #93A5B3;
  --v2-panel: #0F1A24;
  --v2-stroke: rgba(147, 165, 179, 0.22);
  --v2-glow: rgba(0, 0, 0, 0.45);
  --v2-header-from: rgba(10, 16, 24, 0.96);
  --v2-header-to: rgba(7, 19, 29, 0.92);
  --v2-header-border: rgba(0, 230, 154, 0.28);
  --v2-header-text: #F5F8FA;
  --v2-header-hover: #00E69A;
  --v2-bg-a: rgba(0, 230, 154, 0.08);
  --v2-bg-b: rgba(7, 19, 29, 0.55);
  --v2-bg-c0: #0A1018;
  --v2-bg-c1: #07131D;
  --v2-bg-c2: #0A1018;
  --v2-table-head-bg: linear-gradient(180deg, rgba(15, 26, 36, 0.98), rgba(10, 16, 24, 0.96));
  --v2-table-subhead-bg: linear-gradient(180deg, rgba(12, 22, 32, 0.98), rgba(8, 14, 22, 0.96));
  --v2-table-row-hover: linear-gradient(90deg, rgba(0, 230, 154, 0.1), rgba(7, 19, 29, 0.35));
  --v2-table-expanded-bg: linear-gradient(180deg, rgba(12, 22, 32, 0.96), rgba(8, 14, 22, 0.94));
  --v2-table-head-text: #93A5B3;
  --v2-table-text: #F5F8FA;
  --v2-brand-badge-bg: linear-gradient(135deg, rgba(0, 230, 154, 0.14), rgba(7, 19, 29, 0.4));
  --v2-brand-badge-border: rgba(0, 230, 154, 0.28);
  color-scheme: dark;
}

html.light {
  --signal-green: #00c986;
  --midnight: #0A1018;
  --stadium-navy: #07131D;
  --ice-white: #F5F8FA;
  --steel-gray: #4b5c6b;
  --accent: #00c986;
  --brand: #00c986;
  --brand-2: #00a87a;
  --brand-light: rgba(0, 201, 134, 0.12);
  --bg: #F5F8FA;
  --panel: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #F5F8FA;
  --surface-3: #eef3f7;
  --text: #0A1018;
  --text-secondary: #4b5c6b;
  --text-muted: #4b5c6b;
  --muted: #5b6b7a;
  --border: rgba(10, 16, 24, 0.12);
  --border-light: #e8eef3;
  --chip: #eef3f7;
  --chip-hover: #e2eaf1;
  --v2-brand: #00c986;
  --v2-brand-2: #00a87a;
  --v2-accent: #00c986;
  --v2-ink: #0A1018;
  --v2-ink-soft: #4b5c6b;
  --v2-panel: #ffffff;
  --v2-stroke: rgba(10, 16, 24, 0.12);
  --v2-glow: rgba(9, 24, 46, 0.18);
  --v2-header-from: rgba(10, 16, 24, 0.96);
  --v2-header-to: rgba(7, 19, 29, 0.94);
  --v2-header-border: rgba(0, 230, 154, 0.35);
  --v2-header-text: #F5F8FA;
  --v2-header-hover: #00E69A;
  --v2-bg-a: rgba(0, 230, 154, 0.06);
  --v2-bg-b: rgba(10, 16, 24, 0.04);
  --v2-bg-c0: #F5F8FA;
  --v2-bg-c1: #eef3f7;
  --v2-bg-c2: #F5F8FA;
  --v2-table-head-bg: linear-gradient(180deg, rgba(245, 248, 250, 0.98), rgba(238, 243, 247, 0.96));
  --v2-table-subhead-bg: linear-gradient(180deg, rgba(238, 243, 247, 0.98), rgba(232, 238, 243, 0.96));
  --v2-table-row-hover: linear-gradient(90deg, rgba(0, 201, 134, 0.08), rgba(245, 248, 250, 0.6));
  --v2-table-expanded-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 250, 0.96));
  --v2-table-head-text: #4b5c6b;
  --v2-table-text: #0A1018;
  --v2-brand-badge-bg: linear-gradient(135deg, rgba(0, 201, 134, 0.12), rgba(255, 255, 255, 0.5));
  --v2-brand-badge-border: rgba(0, 201, 134, 0.3);
  color-scheme: light;
}

/* Team themes must NEVER recolor chrome — brand accent wins. Keep a token for small badges only. */
html.theme-browns,
html.theme-packers,
html.theme-buckeyes,
html.theme-steelers,
html.theme-cowboys,
html.theme-patriots,
html.theme-chiefs,
html.theme-raiders,
html.theme-giants,
html.theme-eagles,
html.theme-lakers,
html.theme-yankees,
html.theme-bulls,
html.theme-michigan {
  --brand: #00E69A !important;
  --brand-2: #00c986 !important;
  --brand-light: rgba(0, 230, 154, 0.14) !important;
  --v2-brand: #00E69A !important;
  --v2-brand-2: #00c986 !important;
  --v2-accent: #00E69A !important;
  --v2-header-from: rgba(10, 16, 24, 0.96) !important;
  --v2-header-to: rgba(7, 19, 29, 0.92) !important;
  --v2-header-border: rgba(0, 230, 154, 0.28) !important;
  --v2-header-hover: #00E69A !important;
}
html.light.theme-browns,
html.light.theme-packers,
html.light.theme-buckeyes,
html.light.theme-steelers,
html.light.theme-cowboys,
html.light.theme-patriots,
html.light.theme-chiefs,
html.light.theme-raiders,
html.light.theme-giants,
html.light.theme-eagles,
html.light.theme-lakers,
html.light.theme-yankees,
html.light.theme-bulls,
html.light.theme-michigan {
  --brand: #00c986 !important;
  --brand-2: #00a87a !important;
  --v2-brand: #00c986 !important;
  --v2-brand-2: #00a87a !important;
  --v2-accent: #00c986 !important;
}

html.theme-browns { --team-accent: #8b4513; }
html.theme-packers { --team-accent: #203731; }
html.theme-buckeyes { --team-accent: #c41e3a; }
html.theme-steelers { --team-accent: #27251f; }
html.theme-cowboys { --team-accent: #041e42; }
html.theme-patriots { --team-accent: #002244; }
html.theme-chiefs { --team-accent: #e31837; }
html.theme-raiders { --team-accent: #000000; }
html.theme-giants { --team-accent: #0b2265; }
html.theme-eagles { --team-accent: #004c54; }
html.theme-lakers { --team-accent: #552583; }
html.theme-yankees { --team-accent: #003087; }
html.theme-bulls { --team-accent: #ce1141; }
html.theme-michigan { --team-accent: #003366; }

.btn {
  background: var(--brand) !important;
  color: #0A1018 !important; /* WCAG AA on signal green */
  font-weight: 700 !important;
}
.btn:hover { background: var(--brand-2) !important; color: #0A1018 !important; }
.sports-menu-pill--active,
.sports-menu__chip--active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #0A1018 !important;
  box-shadow: 0 8px 18px rgba(0, 230, 154, 0.28) !important;
}
.app-v2-nav-btn--active {
  color: #00E69A !important;
}
.app-v2-nav-btn--active::after {
  background: #00E69A !important;
}

/* HTML lockup — never crops; matches preview.bragwire.com */
.bw-lockup,
.app-v2-logo.bw-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: clamp(6px, 1.6vw, 10px);
  flex-shrink: 0;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  color: #F5F8FA;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  line-height: 1;
  filter: none;
  overflow: visible !important;
  white-space: nowrap;
}
.bw-lockup-word { display: inline-block; }
.bw-lockup-pulse {
  width: clamp(28px, 8vw, 40px);
  height: clamp(12px, 3.2vw, 18px);
  color: #00E69A;
  flex: 0 0 auto;
  overflow: visible;
}
.bw-lockup-pulse path { stroke: currentColor; }

.app-v2-header-left {
  overflow: visible !important;
  min-width: 0;
  gap: 10px;
}
.app-v2-brand {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0 !important;
  overflow: visible !important;
  padding: 7px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 230, 154, 0.28);
  background: linear-gradient(135deg, rgba(0, 230, 154, 0.12), rgba(7, 19, 29, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Team badge lives OUTSIDE the logo frame */
.app-v2-theme-chip {
  flex-shrink: 0;
  max-width: 140px;
  border-color: rgba(147, 165, 179, 0.28);
  background: rgba(7, 19, 29, 0.72);
}
.app-v2-theme-chip-logo,
.app-v2-theme-chip .app-v2-team-logo-fallback {
  border: 2px solid var(--team-accent, rgba(0, 230, 154, 0.45));
}
.app-v2-header-theme-mark { display: none !important; } /* never overlay the lockup */

.app-v2-footer .bw-disclaimer {
  max-width: 42rem;
  margin: 0.5rem auto 0;
  line-height: 1.5;
  color: var(--muted, #93A5B3);
}

/* Safe areas: do NOT redeclare body padding-bottom here — the phone rule above
   (padding-bottom: calc(var(--bb-nav-h) + 12px + env(safe-area-inset-bottom))) must win.
   Header notch inset only. */
.app-v2-header {
  top: calc(8px + env(safe-area-inset-top, 0px));
}
@media (max-width: 640px) {
  .app-v2-brand { padding: 6px 10px; }
  .bw-lockup, .app-v2-logo.bw-lockup { font-size: clamp(0.98rem, 4.6vw, 1.2rem); }
  .bw-lockup-pulse { width: 30px; height: 14px; }
  .app-v2-theme-chip-copy { display: none; } /* icon-only on narrow phones */
}


/* ===== Brag Wire v4 surface sweep ===== */
html, body {
  background-color: var(--bg) !important;
  color: var(--text);
}
html.dark body {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 230, 154, 0.07), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(7, 19, 29, 0.9), transparent 40%),
    var(--bg) !important;
}

/* Force token surfaces over leftover frosted whites */
html.dark .card,
html.dark .sports-menu,
html.dark .app-v2-games-toolbar,
html.dark .app-v2-dropdown,
html.dark .app-v2-mobile-menu,
html.dark .app-v2-mobile-nav,
html.dark .app-v2-drawer-panel,
html.dark .app-v2-wager-cta,
html.dark .stat,
html.dark .modal,
html.dark .bb-msg-panel,
html.dark .app-v2-table,
html.dark .app-v2-table-expanded-cell,
html.dark .app-v2-betrow,
html.dark .toast,
html.dark .app-v2-sheet {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.dark .app-v2-mobile-nav,
html.dark .app-v2-mobile-menu,
html.dark .app-v2-dropdown,
html.dark .app-v2-drawer-actions,
html.dark .app-v2-wager-cta {
  background: var(--surface-2) !important;
}

html.dark .app-v2-mobile-menu-item,
html.dark .app-v2-dropdown-item,
html.dark .app-v2-mobile-nav-btn,
html.dark .app-v2-mobile-nav-btn--inactive {
  color: var(--text) !important;
}
html.dark .app-v2-mobile-menu-item--active,
html.dark .app-v2-mobile-nav-btn--active {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)) !important;
}
html.dark .app-v2-mobile-nav-icon {
  background: var(--surface-3) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
html.dark .app-v2-mobile-nav-btn--active .app-v2-mobile-nav-icon {
  background: var(--accent) !important;
  color: #0A1018 !important;
}

html.dark .btn-alt,
html.dark .chip,
html.dark .app-v2-content input:not([type="checkbox"]):not([type="radio"]),
html.dark .app-v2-content select,
html.dark .app-v2-content textarea,
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea,
html.dark .sports-menu__select select,
html.dark .app-v2-date-control,
html.dark .app-v2-date-btn {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
html.dark .sports-menu__select select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%93A5B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
html.dark .sports-menu__chip {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.dark .sports-menu__chip-badge {
  background: radial-gradient(circle at 30% 30%, #1A2B3A, #0F1A24) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.dark .sports-menu__chip--active,
html.dark .sports-menu-pill--active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0A1018 !important;
}
html.dark .sports-menu__chip--active .sports-menu__chip-badge,
html.dark .sports-menu__chip--active .sports-menu__chip-fallback {
  background: #0A1018 !important;
  color: var(--accent) !important;
}

html.dark .app-v2-header .btn-alt {
  border-color: rgba(0, 230, 154, 0.35) !important;
  background: rgba(0, 230, 154, 0.1) !important;
  color: var(--ice-white) !important;
}
html.dark .app-v2-menu-toggle:hover {
  background: rgba(0, 230, 154, 0.12);
}

html.dark .table th,
html.dark .app-v2-table th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
html.dark .table td,
html.dark .app-v2-table td,
html.dark .table tr,
html.dark .app-v2-table tr {
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.dark .app-v2-table-head,
html.dark .app-v2-table thead,
html.dark .app-v2-table-subhead {
  background: var(--v2-table-head-bg) !important;
  color: var(--v2-table-head-text) !important;
}

html.dark .app-v2-alert {
  background: color-mix(in srgb, #7f1d1d 55%, var(--surface-1)) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}
html.dark .app-v2-alert .text-red-800,
html.dark .bg-red-50 {
  background: transparent !important;
  color: #fecaca !important;
}

html.dark .app-v2-theme-preview {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}
html.dark .app-v2-theme-preview-eyebrow { color: var(--text-muted) !important; }
html.dark .app-v2-theme-preview-name { color: var(--text) !important; }

html.dark .app-v2-open-bets-strip {
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
}
html.dark .app-v2-open-bets-label { color: var(--text-muted) !important; }
html.dark .app-v2-open-bets-value { color: var(--text) !important; }
html.dark .app-v2-open-bets-tag {
  border-color: rgba(0, 230, 154, 0.35) !important;
  background: rgba(0, 230, 154, 0.12) !important;
  color: var(--accent) !important;
}

html.dark .app-v2-version-flag {
  border-color: var(--border);
  background: var(--surface-3);
}
html.dark .app-v2-version-eyebrow { color: var(--text-muted); }
html.dark .app-v2-version-value { color: var(--text); }

/* Game cards / odds grid / matchup rows — always tokenized (dark default + light toggle) */
.app-v2-game.card,
.app-v2-content .app-v2-game.card,
.card.app-v2-game {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.app-v2-game-title,
.app-v2-game-subline,
.app-v2-team-identity-name,
.app-v2-team-cell {
  color: var(--text) !important;
}
.app-v2-game-badges .chip,
.app-v2-game-badges .pill {
  background: var(--surface-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.app-v2-odds-board {
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
}
.app-v2-odds-head {
  background: var(--surface-3) !important;
  border-bottom-color: var(--border) !important;
}
.app-v2-odds-head > div { color: var(--text-muted) !important; }
.app-v2-odds-tile {
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border-left-color: var(--border) !important;
  border-top-color: var(--border) !important;
}
.app-v2-odds-tile--primary {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)) !important;
}
.app-v2-team-cell {
  background: var(--surface-2) !important;
  border-top-color: var(--border) !important;
}

/* Odds / pills / empty / admin */
html.dark .pill,
html.dark .odds-pill,
html.dark .app-v2-odds-btn,
html.dark .bb-odds-cell,
html.dark .line-pill {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.dark .empty-state,
html.dark .app-v2-empty,
html.dark .admin-panel,
html.dark .group-leagues-admin,
html.dark .bb-counter-banner,
html.dark .bb-counter-panel {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.dark .group-leagues-admin .group-leagues-note--ok {
  border-color: rgba(0, 230, 154, 0.35);
  background: rgba(0, 230, 154, 0.1);
  color: var(--accent);
}
html.dark .group-leagues-admin .group-leagues-note--error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

/* Tailwind light leftovers inside dark */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-white\/60 {
  background-color: var(--surface-2) !important;
}
html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-slate-700,
html.dark .text-slate-800,
html.dark .text-gray-900 {
  color: var(--text) !important;
}
html.dark .text-gray-500,
html.dark .text-gray-600,
html.dark .text-slate-500,
html.dark .text-slate-600 {
  color: var(--text-muted) !important;
}
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-200 {
  border-color: var(--border) !important;
}

/* Team chrome stay brand; stroke/panel never go purple */
html[class*="theme-"] {
  --v2-stroke: var(--border) !important;
  --v2-panel: var(--surface-1) !important;
  --v2-header-from: rgba(10, 16, 24, 0.96) !important;
  --v2-header-to: rgba(7, 19, 29, 0.92) !important;
  --v2-header-border: rgba(0, 230, 154, 0.28) !important;
  --v2-header-hover: #00E69A !important;
  --v2-bg-a: rgba(0, 230, 154, 0.08) !important;
  --v2-bg-b: rgba(7, 19, 29, 0.55) !important;
}

html.light .card,
html.light .sports-menu {
  background: var(--surface-1);
  border-color: var(--border);
  color: var(--text);
}

/* Settings / Join / Profile modals — opaque stadium surfaces */
html.dark .fixed.inset-0.z-50 > .card,
html.dark .fixed.inset-0 > form.card,
html.dark form.card,
html.dark .bb-msg-panel {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.dark .fixed.inset-0.z-50 > .absolute.inset-0.bg-black\/20,
html.dark .fixed.inset-0 .bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(2px);
}
html.dark .app-v2-games-toolbar {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
}
html.dark .app-v2-seg-control { background: var(--surface-3) !important; border-color: var(--border) !important; }
html.dark .app-v2-seg-btn { color: var(--text-muted) !important; }
html.dark .app-v2-seg-btn.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)) !important;
  color: var(--accent) !important;
}
html.dark .app-v2-date-control { background: var(--surface-3) !important; border-color: var(--border) !important; }
html.dark .app-v2-search-wrap input,
html.dark .app-v2-search-input {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* Table row hover / expanded cells */
html.dark .row-hover:hover,
html.dark tr.row-hover:hover td {
  background: var(--surface-2) !important;
}
html.dark .app-v2-table-expanded-cell,
html.dark .app-v2-table-expanded-cell .card {
  background: var(--surface-2) !important;
}
/* Toast / empty */
html.dark .toast,
html.dark [class*="toast"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}