/* Minimal CSS Reset - replaces Bootstrap base styles */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Critical root variables - always available */
:root {
  /* Size System - defined first for immediate availability */
  --size-tunemeld-logo: 75px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --fade-duration-medium: 0.3s;

  /* ==========================================================================
     SEMANTIC COLOR PALETTE - Human-readable color names
     ========================================================================== */

  /* Core Colors */
  --pure-white: #ffffff;
  --pure-black: #333333;
  --light-gray: #f9f9f9;
  --medium-gray: #444444;
  --dark-gray: #555555;
  --off-white: #f9f9f9;

  /* Brand Colors */
  --brand-teal: teal;
  --bright-blue: #4a9eff;

  /* Badge Color */
  --badge-red: #dc3545;

  /* Neutral Tones */
  --light-neutral: #ddd;
  --medium-neutral: #e5e5e5;
  --dark-neutral: #2e2e2e;

  /* ==========================================================================
     THEME COLOR ASSIGNMENTS - Maps semantic names to actual colors
     ========================================================================== */

  /* Colors - Light Mode */
  --color-text-light: var(--pure-black);
  --color-background-light: var(--pure-white);
  --color-container-light: var(--light-gray);
  --color-link-light: var(--brand-teal);
  --color-active-button-light: var(--brand-teal);
  --color-active-button-text-light: var(--pure-white);
  --color-button-bg-light: var(--light-neutral);
  --color-button-text-light: var(--pure-black);
  --color-soundcloud-bg-light: var(--light-gray);
  --color-soundcloud-hover-light: var(--medium-neutral);
  --color-skeleton-light: lightgray;

  /* Colors - Dark Mode */
  --color-text-dark: var(--off-white);
  --color-background-dark: var(--pure-black);
  --color-container-dark: var(--medium-gray);
  --color-link-dark: var(--pure-white);
  --color-active-button-dark: var(--bright-blue);
  --color-active-button-text-dark: var(--pure-white);
  --color-button-bg-dark: var(--dark-gray);
  --color-button-text-dark: var(--pure-white);
  --color-soundcloud-bg-dark: var(--medium-gray);
  --color-soundcloud-hover-dark: var(--dark-gray);
  --color-skeleton-dark: var(--dark-neutral);

  /* Shadows */
  --shadow-light: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* iOS 26 Liquid Glass System */
  --glass-bg-light: rgba(255, 255, 255, 0.02);
  --glass-bg-medium: rgba(255, 255, 255, 0.04);
  --glass-bg-heavy: rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(255, 255, 255, 0.06);
  --glass-border-medium: rgba(255, 255, 255, 0.12);
  --glass-border-heavy: rgba(255, 255, 255, 0.18);
  --glass-highlight-subtle: rgba(255, 255, 255, 0.08);
  --glass-highlight-medium: rgba(255, 255, 255, 0.15);
  --glass-highlight-strong: rgba(255, 255, 255, 0.25);
  --glass-overlay-light: rgba(0, 0, 0, 0.08);
  --glass-overlay-medium: rgba(0, 0, 0, 0.15);
  --glass-blur-light: blur(20px);
  --glass-blur-medium: blur(40px);
  --glass-blur-heavy: blur(60px);

  /* Border Radius */
  --radius-large: 10px;
  --radius-small: 5px;

  /* Size System - for components */
  --size-icon-xs: var(--space-lg); /* 16px - very small play count icons */
  --size-icon-sm: var(--space-xxl); /* 24px - source icons, buttons */
  --size-icon-md: calc(var(--space-xl) * 2); /* 40px - medium shimmer squares */
  --size-icon-lg: calc(var(--space-xl) * 3); /* 60px - playlist cover images */
  --size-icon-xl: calc(
    var(--space-xxl) * 5
  ); /* 120px - mobile service images */
  --size-icon-xxl: calc(
    var(--space-xxl) * 8.33
  ); /* 200px - desktop service images */

  /* Row and component heights */
  --size-row-sm: calc(var(--space-xl) * 2.5); /* 50px - mobile playlist rows */
  --size-row-md: calc(var(--space-xl) * 3); /* 60px - desktop playlist rows */
  --size-header-sm: calc(
    var(--space-xl) * 2
  ); /* 40px - mobile service headers */
  --size-header-md: calc(
    var(--space-xl) * 3
  ); /* 60px - desktop service headers */

  /* Special component sizes */
  --size-soundcloud-xs: calc(var(--space-sm) * 1.875); /* 15px - 480px mobile */
  --size-soundcloud-sm: calc(
    var(--space-xl) * 1.25
  ); /* 20px - default mobile */
  --size-soundcloud-md: calc(var(--space-xl) * 1.5); /* 30px - tablet */
  /* --size-tunemeld-logo defined at top for immediate availability */
  --size-select-height: calc(
    var(--space-xl) * 1.875
  ); /* 30px - dropdown selectors */

  /* Shimmer component sizes */
  --shimmer-play-count-width: 80px; /* play count skeleton width */
  --shimmer-view-count-width: 80px; /* view count skeleton width */
  --shimmer-date-width: 40px; /* date skeleton width */
  --shimmer-rank-width: var(
    --track-number-width
  ); /* rank skeleton width - uses shared track number width */
  --shimmer-track-info-width: 200px; /* track info skeleton width */
  --track-info-width-mobile: 120px; /* shared mobile track info width for both actual and shimmer */
  --track-column-width: 150px; /* shared track column width */
  --track-number-width: 30px; /* shared track number width */
  --shimmer-external-links-width: 60px; /* external links skeleton width */
  --shimmer-playlist-title-width: calc(
    var(--space-xl) * 4
  ); /* playlist title skeleton width */
  --shimmer-playlist-desc-width: calc(
    var(--space-xl) * 12
  ); /* playlist description skeleton width */
  --shimmer-playlist-desc-width-mobile: calc(
    var(--space-xl) * 8
  ); /* mobile playlist description skeleton width */
  --shimmer-control-label-width: calc(
    var(--space-xl) * 3
  ); /* control label skeleton width */
  --shimmer-button-width: calc(var(--space-xl) * 5); /* button skeleton width */
  --shimmer-button-width-mobile: calc(
    var(--space-xl) * 4
  ); /* mobile button skeleton width */
  --shimmer-button-height: calc(
    var(--space-xl) * 2.5
  ); /* button skeleton height */
  --shimmer-button-height-mobile: calc(
    var(--space-xl) * 2
  ); /* mobile button skeleton height */
  --shimmer-service-text-height: calc(
    var(--space-lg) * 2
  ); /* service text skeleton height */

  /* Shimmer component definitions - all use consistent height */
  .shimmer-rank {
    width: var(--shimmer-rank-width);
    height: var(--space-lg);
  }
  .shimmer-album-cover {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    border-radius: var(--border-radius-small);
  }
  .shimmer-track-info {
    width: 100%;
    min-width: var(--shimmer-track-info-width);
    height: var(--space-lg);
  }
  .shimmer-view-count {
    width: var(--shimmer-view-count-width);
    height: var(--space-lg);
  }
  .shimmer-date {
    width: var(--shimmer-date-width);
    height: var(--space-lg);
  }
  .shimmer-external-links {
    width: var(--shimmer-external-links-width);
    height: var(--space-lg);
  }
  .shimmer-source-icons {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-items: center;
  }
  .shimmer-source-icon {
    width: var(--size-soundcloud-md);
    height: var(--size-soundcloud-md);
    border-radius: 50%;
  }
  .shimmer-service-text {
    width: 100%;
    height: var(--shimmer-service-text-height);
  }

  /* Text heights and line heights */
  --size-text-height: calc(
    var(--space-xl) * 1.35
  ); /* 27px equivalent to 2.7rem */
  --size-line-height-sm: calc(var(--space-xl) * 1.25); /* 20px line height */
  --size-line-height-md: calc(var(--space-xl) * 2); /* 40px line height */

  /* Typography */
  --font-family-primary: "DM Sans", sans-serif;

  /* Font Size System - Multiples of 3px */
  --font-size-xs: 9px; /* Extra small text */
  --font-size-sm: 12px; /* Small text, mobile buttons */
  --font-size-md: 15px; /* Standard body text, buttons */
  --font-size-lg: 18px; /* Base text, larger body */
  --font-size-xl: 21px; /* Large text, track numbers */
  --font-size-xxl: 24px; /* Heading text */
  --font-size-xxxl: 30px; /* Large headings */

  /* Mobile Font Sizes (smaller variants) */
  --font-size-mobile-xs: 9px; /* Tiny mobile text */
  --font-size-mobile-sm: 12px; /* Small mobile text */
  --font-size-mobile-md: 12px; /* Standard mobile text */
  --font-size-mobile-lg: 15px; /* Larger mobile text */

  /* Font Weights */
  --font-weight-button: 700; /* Bold button text */

  /* Text Truncation Utilities */
  --mobile-line-clamp: 2;
  --desktop-line-clamp: 3;

  /* Shimmer/Loading System */
  --shimmer-duration: 2s;
  --shimmer-opacity: 0.2;

  /* Other theme-specific variables */
  --overlay-bg-light: rgba(255, 255, 255, 0.9);
  --overlay-text-light: #333;
  --table-header-bg-light: #e0e0e0;
  --table-header-text-light: #333;

  --overlay-bg-dark: rgba(0, 0, 0, 0.5);
  --overlay-text-dark: #fff;
  --table-header-bg-dark: #555;
  --table-header-text-dark: #fff;

  /* Toggle-specific variables */
  --toggle-width: 45px;
  --toggle-height: 20px;
  --toggle-border-radius: calc(var(--toggle-height) / 2);
  --toggle-background: #ebebeb;
  --toggle-background-checked: #242424;
  --toggle-shadow: inset 0px 3px 7px rgba(0, 0, 0, 0.3),
    inset 0px -3px 7px rgba(255, 255, 255, 0.4);
  --toggle-ball-size: calc(var(--toggle-height) - 4px);
  --ball-position-offset: 2px;
  --ball-position-margin: calc(var(--toggle-height) * 0.25);
  --sun-icon-size: calc(var(--toggle-height) / 2);
  --moon-icon-size: calc(var(--toggle-height) / 2);
  --gooey-effect-size: calc(var(--toggle-ball-size) + 10px);
}

/* ==========================================================================
   INITIAL LOADING THEME (Applied immediately via inline script)
   ========================================================================== */

html.dark-mode-loading {
  background-color: var(--color-background-dark);
}

html.dark-mode-loading body {
  /* Apply dark theme variables during loading */
  --text-color: var(--color-text-dark);
  --background-color: var(--color-background-dark);
  --container-background: var(--color-container-dark);
  --link-color: var(--color-link-dark);
  --active-button-color: var(--color-active-button-dark);
  --active-button-text-color: var(--color-active-button-text-dark);
  --btn-background: var(--color-button-bg-dark);
  --btn-text-color: var(--color-button-text-dark);
  --soundcloud-link-background: var(--color-soundcloud-bg-dark);
  --soundcloud-link-hover: var(--color-soundcloud-hover-dark);
  --skeleton-color: var(--color-skeleton-dark);
  --box-shadow: var(--shadow-dark);
  --overlay-background: var(--overlay-bg-dark);
  --overlay-text-color: var(--overlay-text-dark);
  --table-header-background: var(--table-header-bg-dark);
  --table-header-text-color: var(--table-header-text-dark);

  background-color: var(--background-color);
  color: var(--text-color);
}

/* ==========================================================================
   LIGHT MODE (Default)
   ========================================================================== */

body {
  /* Active color variables */
  --text-color: var(--color-text-light);
  --background-color: var(--color-background-light);
  --container-background: var(--color-container-light);
  --link-color: var(--color-link-light);
  --active-button-color: var(--color-active-button-light);
  --active-button-text-color: var(--color-active-button-text-light);
  --btn-background: var(--color-button-bg-light);
  --btn-text-color: var(--color-button-text-light);
  --soundcloud-link-background: var(--color-soundcloud-bg-light);
  --soundcloud-link-hover: var(--color-soundcloud-hover-light);
  --skeleton-color: var(--color-skeleton-light);

  /* Active layout variables */
  --box-shadow: var(--shadow-light);
  --border-radius-large: var(--radius-large);
  --border-radius-small: var(--radius-small);

  /* Active overlay variables */
  --overlay-background: var(--overlay-bg-light);
  --overlay-text-color: var(--overlay-text-light);
  --table-header-background: var(--table-header-bg-light);
  --table-header-text-color: var(--table-header-text-light);

  /* Apply global styles */
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-primary);
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

body.dark-mode {
  /* Active color variables */
  --text-color: var(--color-text-dark);
  --background-color: var(--color-background-dark);
  --container-background: var(--color-container-dark);
  --link-color: var(--color-link-dark);
  --active-button-color: var(--color-active-button-dark);
  --active-button-text-color: var(--color-active-button-text-dark);
  --btn-background: var(--color-button-bg-dark);
  --btn-text-color: var(--color-button-text-dark);
  --soundcloud-link-background: var(--color-soundcloud-bg-dark);
  --soundcloud-link-hover: var(--color-soundcloud-hover-dark);
  --skeleton-color: var(--color-skeleton-dark);

  /* Active layout variables */
  --box-shadow: var(--shadow-dark);
  /* Note: border-radius stays the same in dark mode */

  /* Active overlay variables */
  --overlay-background: var(--overlay-bg-dark);
  --overlay-text-color: var(--overlay-text-dark);
  --table-header-background: var(--table-header-bg-dark);
  --table-header-text-color: var(--table-header-text-dark);

  /* Apply global styles */
  background-color: var(--background-color);
  color: var(--text-color);
}

/* ==========================================================================
   DESKTOP RESPONSIVE VARIABLES
   ========================================================================== */

@media screen and (min-width: 768px) {
  :root {
    --toggle-width: 90px;
    --toggle-height: 40px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --toggle-width: 90px;
    --toggle-height: 36px;
  }
}

/* ==========================================================================
   SHIMMER/LOADING SYSTEM - Reusable Components
   ========================================================================== */

/* Base shimmer animation */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Core shimmer class - apply to any element */
.shimmer {
  border-radius: var(--border-radius-small);
  overflow: hidden;
  position: relative;
  background-color: var(--skeleton-color);
}

.shimmer::before {
  animation: shimmer var(--shimmer-duration) infinite;
  background: linear-gradient(
    90deg,
    var(--skeleton-color) 0%,
    rgba(255, 255, 255, var(--shimmer-opacity)) 50%,
    var(--skeleton-color) 100%
  );
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Shimmer component variants */
.shimmer-text {
  height: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.shimmer-text-sm {
  height: var(--space-md);
  margin-bottom: var(--space-xs);
}

.shimmer-text-lg {
  height: var(--space-xxl);
  margin-bottom: var(--space-md);
}

.shimmer-square {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

.shimmer-square-lg {
  width: var(--size-icon-xxl);
  height: var(--size-icon-xxl);
}

.shimmer-circle {
  border-radius: 50%;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

/* Loading overlay utilities */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--container-background);
  z-index: 10;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-overlay.flex {
  display: flex;
}

.loading-overlay.flex.active {
  display: flex;
}

/* Service-specific shimmer components */
.loading-overlay-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.shimmer-service-image {
  width: 100%;
  padding-bottom: 100%;
  margin-bottom: 0;
}

.shimmer-service-text {
  width: 100%;
  margin-top: 5px;
  text-align: left;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Playlist-specific shimmer components */
.loading-overlay-playlist {
  flex-direction: column;
}

.loading-overlay-playlist.active {
  display: flex;
}

/* Override playlist overflow when shimmer is active - keep within bounds */
.playlist.main-playlist:has(.loading-overlay-playlist.active) {
  overflow-y: hidden;
  height: auto;
  max-height: 80vh;
}

/* Table-only shimmer styling */
.loading-overlay-table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  background-color: var(--container-background);
  border-radius: var(--border-radius-small);
  z-index: 10;
  display: none;
}

.loading-overlay-table.active {
  display: flex;
}

/* Ensure table container can accommodate full shimmer */
.playlist-table:has(.loading-overlay-table.active) {
  min-height: 80vh;
  overflow: visible;
}

/* Ensure table shimmer doesn't interfere with other elements */
.playlist-table {
  position: relative;
}

/* Playlist header shimmer */
.playlist-header-shimmer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.playlist-title-shimmer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.shimmer-playlist-logo {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  border-radius: var(--border-radius-small);
}

.shimmer-playlist-title {
  width: var(--shimmer-playlist-title-width);
  height: var(--space-lg);
}

/* Controls shimmer */
.playlist-controls-shimmer {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.control-group-shimmer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.shimmer-control-label {
  width: var(--shimmer-control-label-width);
  height: var(--space-lg);
}

.shimmer-buttons-row {
  display: flex;
  gap: var(--space-lg);
}

.shimmer-button {
  width: var(--shimmer-button-width);
  height: var(--shimmer-button-height);
  border-radius: calc(var(--space-xl) + var(--space-xs));
}

/* Table shimmer */
.playlist-table-shimmer {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  border: none;
}

.playlist-shimmer-row {
  height: var(--size-row-md);
}

.playlist-shimmer-row:not(:last-child) {
  margin-bottom: var(--space-xs);
}

.playlist-shimmer-row td {
  padding: var(--space-xs);
  vertical-align: middle;
  border-bottom: 1px solid var(--container-background);
}

.shimmer-track-info {
  width: 100%;
  min-width: var(--shimmer-track-info-width);
  height: var(--space-lg);
}

.shimmer-external-links {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  width: var(--shimmer-external-links-width);
  height: var(--space-lg);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .loading-overlay-service {
    padding: 0;
  }

  .playlist-shimmer-row {
    height: var(--size-row-sm);
  }

  .shimmer-button {
    width: var(--shimmer-button-width-mobile);
    height: var(--shimmer-button-height-mobile);
  }

  .shimmer-playlist-desc {
    width: var(--shimmer-playlist-desc-width-mobile);
  }

  .shimmer-track-info {
    width: var(--track-info-width-mobile) !important;
    min-width: var(--track-info-width-mobile) !important;
    max-width: var(--track-info-width-mobile) !important;
  }

  .playlist-table td.info,
  .playlist-shimmer-row td.info {
    white-space: normal;
    width: var(--track-info-width-mobile);
    max-width: var(--track-info-width-mobile);
  }
}

/* ==========================================================================
   GLOBAL STYLES - Merged from styles.css
   ========================================================================== */

/* Utility Classes */
.hidden {
  display: none !important;
}

a {
  color: var(--link-color);
}

.container {
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 var(--space-md);
  box-sizing: border-box;
}

/* Main Content */
#main-content {
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 2s ease-in-out;
  max-width: 100%;
}

/* iOS 26 Glass Styling - Base Button */
.btn {
  padding: var(--space-md) var(--space-xl);
  color: var(--btn-text-color);
  border-radius: calc(var(--space-xl) + var(--space-xs));
  cursor: pointer;
  background: var(--glass-bg-medium);
  backdrop-filter: var(--glass-blur-light) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur-light) saturate(180%);
  border: 0.5px solid var(--glass-border-light);
  position: relative;
  overflow: hidden;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-button);
  transition: all 0.3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

.btn:hover {
  background: var(--glass-bg-heavy);
  border-color: var(--glass-border-medium);
  transform: translateY(calc(-1 * var(--space-xs) / 2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Collapse Button - iOS 26 Glass */
.collapse-button {
  --collapse-button-width: calc(1ch + 2 * var(--space-md) + 2px);
  background: var(--glass-bg-medium);
  backdrop-filter: var(--glass-blur-light) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur-light) saturate(180%);
  border: 0.5px solid var(--glass-border-light);
  border-radius: calc(var(--space-xl) + var(--space-xs));
  color: var(--btn-text-color);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-lg);
  margin-left: auto;
  padding: var(--space-xs) var(--space-md);
  width: var(--collapse-button-width);
  position: relative;
  overflow: hidden;
  font-weight: var(--font-weight-button);
  transition: all 0.3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

.collapse-button:hover {
  background: var(--glass-bg-heavy);
  border-color: var(--glass-border-medium);
  transform: translateY(calc(-1 * var(--space-xs) / 2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.15);
}

.collapse-button:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Table Styles */
.column-header {
  font-weight: bold;
  text-align: center;
}

/* Links */
.external-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

.footer-container {
  text-align: center;
  width: 100%;
}

.footer-link {
  color: var(--text-color);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

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

.vertical-spacing {
  height: var(--space-xl);
}

.flex-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* iOS 26 Glass Overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  cursor: pointer;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.overlay-content {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-light) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur-light) saturate(180%);
  border-radius: calc(var(--space-xl) + var(--space-md));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-strong),
    0 16px 64px var(--glass-overlay-medium),
    0 4px 16px var(--glass-overlay-light);
  border: 1px solid var(--glass-border-medium);
  color: var(--overlay-text-color);
  left: 50%;
  padding: var(--space-xl);
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  overflow: hidden;
}

.overlay-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  z-index: 1;
}

.overlay-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.08),
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
}

.overlay-content a {
  color: var(--link-color);
}

/* Text Truncation Utilities */
.truncate-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--desktop-line-clamp);
  line-clamp: var(--desktop-line-clamp);
}

.truncate-responsive {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--desktop-line-clamp);
  line-clamp: var(--desktop-line-clamp);
}

/* Mobile truncation - more aggressive */
@media screen and (max-width: 768px) {
  .truncate-responsive {
    -webkit-line-clamp: var(--mobile-line-clamp);
    line-clamp: var(--mobile-line-clamp);
  }

  .truncate-mobile-single {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-desktop-only {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

/* Desktop truncation - more lenient */
@media screen and (min-width: 769px) {
  .truncate-mobile-single {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }
}

/* Utility Classes */
.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.mr-2 {
  margin-right: var(--space-sm);
}

.mr-4 {
  margin-right: var(--space-lg);
}

/* Selectors */
.custom-select,
.selector {
  height: var(--size-select-height);
  width: 100%;
  max-width: 180px;
  min-width: 120px;
  font-size: var(--font-size-md);
  padding: 0 var(--space-md);
  text-align: center;
  margin: 0 var(--space-md);
  line-height: var(--size-line-height-sm);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--space-xl) + var(--space-xs));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.08);
  transition: none;
  outline: none;
}

.selector-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

label {
  position: relative;
  top: var(--space-xs);
}

.stack-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-md);
}

/* Desktop-Specific Styles */
@media screen and (min-width: 768px) {
  #main-content {
    max-width: 60rem;
  }

  .last-updated {
    display: flex;
    justify-content: center;
    font-size: var(--font-size-mobile-sm);
  }
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 var(--space-sm);
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: var(--font-size-mobile-xs);
    margin-top: calc(var(--space-sm) + 1px);
  }

  .container {
    padding: 0 var(--space-sm);
  }

  .last-updated {
    display: flex;
    font-size: var(--font-size-mobile-xs);
    justify-content: center;
  }

  .mr-4 {
    margin-right: 0;
    margin-bottom: var(--space-md);
  }

  .collapse-button {
    font-size: var(--font-size-mobile-lg);
    padding: calc(var(--space-xs) - 1px) var(--space-sm);
  }

  .footer-link {
    font-size: var(--font-size-mobile-sm);
  }

  .btn {
    font-size: var(--font-size-md);
  }

  .overlay-content {
    padding: var(--space-xl);
    margin: 0 var(--space-md);
    width: calc(100% - 2 * var(--space-md));
    max-width: calc(100% - 2 * var(--space-md));
    left: 50%;
    transform: translate(-50%, -50%);
  }
}