/* Import your existing styles */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

  /* CSS Variables - Integrated from your card.css and base.css */
  :root {
    --accent-color: #E07856;
    --accent-hover: #d6654a;
    --accent-light: #fef3f0;
    --accent-dark: #8b4734;
    --accent-glow: rgba(224, 120, 86, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-hover: rgba(255, 255, 255, 0.14);
  }

  /* Women's Theme Override */
  body[data-gender="womens"],
  body[data-gender="w"],
  body[data-gender="f"],
  html[data-gender="womens"],
  html[data-gender="w"],
  html[data-gender="f"] {
    --accent-color: #E879B3;
    --accent-hover: #d666a0;
    --accent-light: #fef0f7;
    --accent-dark: #8b4466;
    --accent-glow: rgba(232, 121, 179, 0.4);
  }

  /* Scoped font-family - only affects content area, not global header */
  .details-page *,
  .compare-grid *,
  .glass-strong *,
  .sidebar-glass * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* Glassmorphism Background - Classic & Clean */
  /* Note: These body styles are intentionally global for pages using details.css */
  body.details-theme {
    background: linear-gradient(135deg,
      #18181b 0%,
      #1a1a1d 12.5%,
      #1d1d20 25%,
      #212125 37.5%,
      #27272a 50%,
      #252528 62.5%,
      #222225 75%,
      #201f22 87.5%,
      #1f1f23 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Light Mode - Eggshell Background */
  @media (prefers-color-scheme: light) {
    body.details-theme {
      background: linear-gradient(135deg,
        #fefdfb 0%,
        #fffefc 12.5%,
        #fffefa 25%,
        #fffef9 37.5%,
        #fffef9 50%,
        #fffef9 62.5%,
        #fefdf8 75%,
        #fdfdf7 87.5%,
        #fdfcf7 100%);
    }
  }

  /* Clean background - no particles */
  .particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
  }

  /* Frosted Glass Container */
  .glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: light) {
    .glass {
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }
  }

  .glass-light {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  @media (prefers-color-scheme: light) {
    .glass-light {
      background: rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
  }

  .glass-strong {
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  @media (prefers-color-scheme: light) {
    .glass-strong {
      background: rgba(255, 255, 255, 0.65);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }

  .glass-hover:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px var(--accent-glow);
    transform: translateX(4px);
  }

  @media (prefers-color-scheme: light) {
    .glass-hover:hover {
      background: rgba(255, 255, 255, 0.75);
    }
  }

  /* Star Glow Animation */
  @keyframes star-glow {
    0%, 100% { filter: drop-shadow(0 0 6px var(--accent-glow)); }
    50% { filter: drop-shadow(0 0 12px var(--accent-glow)); }
  }
  .star-glow { animation: star-glow 3s ease-in-out infinite; }

  /* Custom Scrollbar with Glass Effect */
  .custom-scrollbar::-webkit-scrollbar {
    width: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), var(--accent-hover));
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  @media (prefers-color-scheme: light) {
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      border: 2px solid rgba(255, 255, 255, 0.3);
    }
  }

  /* Button Styles with Glass Effect */
  .btn-glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-glass:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-2px);
  }

  @media (prefers-color-scheme: light) {
    .btn-glass {
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0, 0, 0, 0.08);
      color: #2d2d2d !important;
    }
    .btn-glass:hover {
      background: rgba(255, 255, 255, 0.7);
      color: #2d2d2d !important;
    }
  }

  .btn-accent {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    border: none;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: all 0.3s ease;
  }

  .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px var(--accent-glow);
  }

  /* Segmented Control with Glass */
  .segmented-glass {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    display: flex;
    gap: 4px;
  }

  @media (prefers-color-scheme: light) {
    .segmented-glass {
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
  }

  .segmented-glass button {
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  @media (prefers-color-scheme: light) {
    .segmented-glass button {
      color: rgba(0, 0, 0, 0.6);
    }
    .segmented-glass button:hover:not(.active) {
      background: rgba(0, 0, 0, 0.05);
      color: rgba(0, 0, 0, 0.8);
    }
  }

  .segmented-glass button.active {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 12px var(--accent-glow);
  }

  .segmented-glass button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: white;
  }

  /* Chart Container Glass Effect */
  .chart-glass {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  @media (prefers-color-scheme: light) {
    .chart-glass {
      background: rgba(0, 0, 0, 0.015);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }
  }

  /* Athlete Card Hero Section - Prominent Styling */
  .athlete-card-hero {
    position: relative;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 8px 32px var(--accent-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.08);
    padding-bottom: 16px;
  }

  /* Remove background from hero section when containing committed card
     since committed card has its own team-colored background */
  .athlete-card-hero:has(.committed-card) {
    background: transparent;
  }

  /* Centered 50% width accent dash */
  .athlete-card-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      var(--accent-color) 10%, 
      var(--accent-color) 90%, 
      transparent 100%);
    box-shadow: 0 0 20px var(--accent-glow),
                0 0 40px var(--accent-glow);
    border-radius: 2px;
  }

  @media (prefers-color-scheme: light) {
    .athlete-card-hero {
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.6) 100%);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                  inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
  }

  /* Sidebar Rounded Corners */
  .sidebar-glass {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  @media (prefers-color-scheme: light) {
    .sidebar-glass {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
  }

  /* Main Content Area Rounding */
  main.glass {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: light) {
    main.glass {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }
  }

  /* Header Rounding Enhancement */
  header.glass {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: light) {
    header.glass {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }
  }

  /* Smooth Gap Transitions */
  .main-grid {
    transition: gap 0.3s ease;
  }

  /* Loading Shimmer Effect */
  @keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
  }

  .shimmer {
    background: linear-gradient(90deg, 
      rgba(255, 255, 255, 0.05) 0%, 
      rgba(255, 255, 255, 0.15) 50%, 
      rgba(255, 255, 255, 0.05) 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
  }

  /* Accent Text */
  .text-accent {
    color: var(--accent-color);
    font-weight: 700;
  }

  /* Zebra Striping for Results Tables */
  #resultsView tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #resultsView tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.15);
  }

  #resultsView tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Enhanced hover state for better visibility - NO TRANSFORM */
  #resultsView tbody tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 var(--accent-color);
  }

  @media (prefers-color-scheme: light) {
    #resultsView tbody tr:nth-child(even) {
      background: rgba(0, 0, 0, 0.04);
    }

    #resultsView tbody tr:nth-child(odd) {
      background: rgba(0, 0, 0, 0.01);
    }

    #resultsView tbody tr:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }
  }

  /* Light Mode Text Colors - Scoped to content areas only */
  @media (prefers-color-scheme: light) {
    /* Override white text ONLY within details page content areas */
    .details-page .text-white,
    .compare-grid .text-white,
    .glass-strong .text-white,
    .sidebar-glass .text-white {
      color: #2d2d2d !important;
    }

    /* Text opacity overrides for light mode - scoped */
    .details-page .text-white\/50,
    .compare-grid .text-white\/50,
    .glass-strong .text-white\/50,
    .sidebar-glass .text-white\/50 {
      color: rgba(0, 0, 0, 0.5) !important;
    }

    .details-page .text-white\/60,
    .compare-grid .text-white\/60,
    .glass-strong .text-white\/60,
    .sidebar-glass .text-white\/60 {
      color: rgba(0, 0, 0, 0.6) !important;
    }

    .details-page .text-white\/70,
    .compare-grid .text-white\/70,
    .glass-strong .text-white\/70,
    .sidebar-glass .text-white\/70 {
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .details-page .text-white\/40,
    .compare-grid .text-white\/40,
    .glass-strong .text-white\/40,
    .sidebar-glass .text-white\/40 {
      color: rgba(0, 0, 0, 0.4) !important;
    }

    /* Heading color overrides - scoped to content areas only */
    .details-page h1, .details-page h2, .details-page h3, .details-page h4, .details-page h5, .details-page h6,
    .compare-grid h1, .compare-grid h2, .compare-grid h3, .compare-grid h4, .compare-grid h5, .compare-grid h6,
    .glass-strong h1, .glass-strong h2, .glass-strong h3, .glass-strong h4, .glass-strong h5, .glass-strong h6,
    .sidebar-glass h1, .sidebar-glass h2, .sidebar-glass h3, .sidebar-glass h4, .sidebar-glass h5, .sidebar-glass h6 {
      color: #2d2d2d !important;
    }

    /* Table text - scoped */
    .details-page table,
    .compare-grid table,
    .glass-strong table,
    .sidebar-glass table {
      color: #2d2d2d;
    }

    /* Modal text */
    .glass-strong {
      color: #2d2d2d;
    }
  }

  /* Grid Layout Fix for Responsiveness */
  @media (max-width: 1024px) {
    .main-grid {
      grid-template-columns: 1fr !important;
    }
    .sidebar-glass {
      position: fixed;
      left: -400px;
      transition: left 0.3s ease;
      z-index: 50;
    }
    .sidebar-glass.open {
      left: 0;
    }
  }

  /* HS Times Badge */
  .hs-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
    transition: all 0.3s ease;
  }

  .hs-badge:hover {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
    transform: scale(1.05);
  }

  @media (prefers-color-scheme: light) {
    .hs-badge {
      background: rgba(34, 197, 94, 0.15);
      border: 1px solid rgba(34, 197, 94, 0.4);
      color: #16a34a;
    }
  }
.sidebar-glass .athlete-card {
  min-width: 300px;
  width: 100% ;
  transform: scale(0.9) translateZ(0) !important;
  transform-origin: top center;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Add container query support to sidebar */
.sidebar-glass {
  container-type: inline-size;
  container-name: sidebar;
  max-width: 100%;
  overflow-x: hidden;
}
.sidebar-glass {
  min-width: 312px;
  max-width: 100%;
  overflow-x: hidden;
}


/* Custom Scrollbar Styling */
.sidebar-glass::-webkit-scrollbar {
  width: 10px;
}

.sidebar-glass::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin: 8px 0;
}

.sidebar-glass::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E07856 0%, #d6654a 100%);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.sidebar-glass::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d6654a 0%, #c55a42 100%);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar styling */
.sidebar-glass {
  scrollbar-width: thin;
  scrollbar-color: #E07856 rgba(0, 0, 0, 0.2);
}

/* Central content area scrollbar */
.central-content::-webkit-scrollbar {
  width: 12px;
}

.central-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.central-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E07856 0%, #d6654a 100%);
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.15);
}

.central-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d6654a 0%, #c55a42 100%);
}

.central-content {
  scrollbar-width: thin;
  scrollbar-color: #E07856 rgba(0, 0, 0, 0.15);
}