/* Beta UI styles, fully scoped to html[data-beta="1"] */

/* High-DPI scaling for stars */
:root {
  --star-scale: 1;
}

@media (min-resolution: 1.5dppx) {
  :root { --star-scale: 1.3; }
}

@media (min-resolution: 2dppx) {
  :root { --star-scale: 1.6; }
}

@media (min-resolution: 3dppx) {
  :root { --star-scale: 1.8; }
}

/* Space-to-atmosphere gradient with repositioned stars and smooth transitions */
html[data-beta="1"] {
  /* Light mode: clean background without gradient */
  background: transparent !important;
  background-attachment: fixed !important;
  background-size: 100% 200vh;
}

/* Dark mode space-to-atmosphere gradient */
html[data-beta="1"][data-theme="dark"] {
  background: linear-gradient(180deg,
    #000508 0%,
    #050e1a 35%,
    #08172a 60%,
    #0b1b33 100%) !important;
}

/* Override body background to prevent covering html gradient */
html[data-beta="1"] body {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Global starfield overlay for reliable layering above gradient, below content */
html[data-beta="1"] #starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Ensure key content stays above starfield overlay */
html[data-beta="1"] .navbar,
html[data-beta="1"] main,
html[data-beta="1"] footer,
html[data-beta="1"] .beta-section,
html[data-beta="1"] .hero,
html[data-beta="1"] .latest-space,
html[data-beta="1"] #beta-hero {
  position: relative;
  z-index: 1;
}

/* Beta-only translucency to let stars peek through without harming legibility */
html[data-beta="1"] .features {
  background: transparent;
}

/* Additional sections that benefit from star visibility in beta mode */
html[data-beta="1"] .latest-space {
  background: transparent;
}

html[data-beta="1"] #beta-hero {
  background: transparent;
}







/* Enhanced drift animations for better perception */
@keyframes drift-far {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(-45px) translateY(-20px) rotate(1.5deg); }
  50% { transform: translateX(-80px) translateY(-40px) rotate(2deg); }
  75% { transform: translateX(35px) translateY(-55px) rotate(-1.2deg); }
  100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes drift-mid {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  33% { transform: translateX(65px) translateY(-25px) rotate(-1.8deg); }
  66% { transform: translateX(100px) translateY(-50px) rotate(-2deg); }
  100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

/* Enhanced twinkle effect for better perception in dark mode */
@keyframes twinkle-layer {
  0%, 100% { opacity: 0.45; }
  15% { opacity: 0.35; }
  30% { opacity: 0.28; }
  45% { opacity: 0.32; }
  60% { opacity: 0.38; }
  75% { opacity: 0.41; }
  90% { opacity: 0.43; }
}

/* Subtle twinkle effect for light mode */
@keyframes twinkle-layer-light {
  0%, 100% { opacity: 0.10; }
  25% { opacity: 0.08; }
  50% { opacity: 0.07; }
  75% { opacity: 0.09; }
}

@keyframes twinkle-layer-light-mid {
  0%, 100% { opacity: 0.08; }
  30% { opacity: 0.06; }
  60% { opacity: 0.05; }
  90% { opacity: 0.07; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html[data-beta="1"] #starfield::before,
  html[data-beta="1"] #starfield::after {
    animation: none;
    will-change: auto;
  }
}

/* Star animations for immersive space effect */
@keyframes twinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1.0; transform: scale(1.3); }
}

@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px) scale(0) rotate(45deg);
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(300px) translateY(300px) scale(0) rotate(45deg);
  }
}

@keyframes parallax-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-3px) rotate(1deg); }
  66% { transform: translateY(2px) rotate(-0.5deg); }
}



/* Occasional shooting star */
html[data-beta="1"] .shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: linear-gradient(45deg, #ffffff, rgba(255,255,255,0.5));
  border-radius: 50%;
  animation: shooting-star 12s linear infinite;
  animation-delay: 8s;
  z-index: 1;
}

/* Add shooting stars at different positions */
html[data-beta="1"] .shooting-star-1 {
  top: 200px;
  left: 100px;
  animation-delay: 8s;
}

html[data-beta="1"] .shooting-star-2 {
  top: 350px;
  right: 150px;
  animation-delay: 25s;
  animation-duration: 15s;
}

html[data-beta="1"] .shooting-star-3 {
  top: 500px;
  left: 300px;
  animation-delay: 42s;
  animation-duration: 10s;
}

/* Hide hero on home page only (not on api-docs, launches, etc.) */
html[data-beta="1"] .hero,
html[data-beta="1"] .latest-space { display: none !important; }

/* Show hero on specific pages in beta mode */
html[data-beta="1"] .page-api-docs .hero {
  display: block !important;
}

/* Space-themed backgrounds for beta sections */
html[data-beta="1"] .beta-section {
  position: relative;
  /* Light mode: minimal background without gradients */
  background: transparent;
  backdrop-filter: blur(0.5px);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  transition: all 0.3s ease;
  animation: gentle-float 20s ease-in-out infinite;
}

/* Dark mode: keep space-themed section gradients */
html[data-beta="1"][data-theme="dark"] .beta-section {
  background:
    radial-gradient(ellipse at top left, rgba(0,0,0,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at top right, rgba(0,0,0,0.06) 0%, transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

html[data-beta="1"] .beta-section:hover {
  /* Light mode: subtle hover effect without gradients */
  background: rgba(0,0,0,0.02);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Dark mode: keep space-themed hover gradients */
html[data-beta="1"][data-theme="dark"] .beta-section:hover {
  background:
    radial-gradient(ellipse at top left, rgba(0,0,0,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at top right, rgba(0,0,0,0.10) 0%, transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.05) 100%);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Enhanced section headers with space theme */
html[data-beta="1"] .beta-section h2 {
  color: var(--text-color);
  position: relative;
  z-index: 2;
}

/* Dark theme: keep space-themed text styling */
html[data-beta="1"][data-theme="dark"] .beta-section h2 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Space-themed cards within beta sections - dark theme only */
html[data-beta="1"][data-theme="dark"] .beta-section .launch-card,
html[data-beta="1"][data-theme="dark"] .beta-section .news-card {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

html[data-beta="1"][data-theme="dark"] .beta-section .launch-card:hover,
html[data-beta="1"][data-theme="dark"] .beta-section .news-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* Footer with space theme */
html[data-beta="1"] .footer {
  /* Light mode: clean footer background */
  background: transparent;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Dark mode: keep space-themed footer gradients */
html[data-beta="1"][data-theme="dark"] .footer {
  background:
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.15) 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* API Docs Hero in Beta Mode - Match index page beta-hero styling exactly */
html[data-beta="1"] .page-api-docs .hero {
  position: relative;
  padding: 160px 0 100px;
  color: #fff;
  overflow: hidden;
  /* Light mode: clean background without gradient overlay */
  background: transparent;
}

/* Dark mode: keep space-themed hero gradient overlay */
html[data-beta="1"][data-theme="dark"] .page-api-docs .hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.2) 100%);
}

html[data-beta="1"] .page-api-docs .hero .container {
  position: relative;
  z-index: 2;
  /* Beta spotlight-like card styling */
  background: var(--card-background);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-banner);
  padding: 40px;
  border: 1px solid var(--border-color);
  box-shadow: var(--elevation-2);
  color: var(--text-color);
  text-shadow: none;
}

/* Dark theme: translucent card like beta spotlight */
html[data-beta="1"][data-theme="dark"] .page-api-docs .hero .container {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

html[data-beta="1"] .page-api-docs .hero h1 {
  color: var(--text-color);
  text-shadow: none;
}

html[data-beta="1"] .page-api-docs .hero .lead {
  color: var(--text-secondary);
  text-shadow: none;
}

html[data-beta="1"] .page-api-docs .hero .cta-buttons .button {
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: transform 0.2s, box-shadow 0.2s;
}

html[data-beta="1"] .page-api-docs .hero .cta-buttons .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(10, 132, 255, 0.35);
}

/* Enhanced API Docs Feature Cards in Beta Mode */
html[data-beta="1"] .page-api-docs .features {
  background: transparent;
}

html[data-beta="1"] .page-api-docs .feature-card {
  background: var(--card-background);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  transition: all 0.3s ease;
}

html[data-beta="1"][data-theme="dark"] .page-api-docs .feature-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-beta="1"] .page-api-docs .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

html[data-beta="1"][data-theme="dark"] .page-api-docs .feature-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Enhanced API Docs Swagger Section in Beta Mode */
html[data-beta="1"] .page-api-docs .swagger-wrap {
  background: var(--card-background);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-2);
}

html[data-beta="1"][data-theme="dark"] .page-api-docs .swagger-wrap {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-beta="1"] .page-api-docs .swagger-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
}

html[data-beta="1"][data-theme="dark"] .page-api-docs .swagger-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-beta="1"] .page-api-docs .swagger-header h2 {
  color: var(--text-color);
}

html[data-beta="1"][data-theme="dark"] .page-api-docs .swagger-header h2 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

html[data-beta="1"] .page-api-docs .swagger-header .button {
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #ffffff;
  transition: all 0.3s ease;
}

/* Beta Hero */
html[data-beta="1"] #beta-hero {
  position: relative;
  padding: 160px 0 100px;
  color: #fff;
  overflow: hidden;
  /* Light mode: clean background without gradient overlay */
  background: transparent;
}

/* Dark mode: keep space-themed hero gradient overlay */
html[data-beta="1"][data-theme="dark"] #beta-hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.2) 100%);
}
html[data-beta="1"] #beta-hero .container {
  position: relative;
  z-index: 2;
  /* Minimal text shadow for light mode readability */
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Enhanced text readability in dark mode */
html[data-beta="1"][data-theme="dark"] #beta-hero .container {
  text-shadow: 0 4px 8px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);
}

/* Ensure navigation remains readable over space background */
html[data-beta="1"] .navbar {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1000;
}

html[data-beta="1"] .navbar a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-beta="1"] .navbar a:hover {
  color: #87ceeb !important;
}

/* Enhanced theme toggle for space theme */
html[data-beta="1"] .theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

html[data-beta="1"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
html[data-beta="1"] #beta-hero .bg {
  position: absolute; inset: 0;
  /* Stars confined to the hero background, behind content - reduced density */
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

/* Dark mode: keep space-themed hero background */
html[data-beta="1"][data-theme="dark"] #beta-hero .bg {
  background:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 45% 30%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.6), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 100%);
}






/* Removed conflicting star animations - now using html-level space stars */

html[data-beta="1"] .beta-spotlight {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  text-align: center;
  /* Theme-aware background for better content separation */
  background: var(--card-background);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-banner);
  padding: 40px;
  border: 1px solid var(--border-color);
  box-shadow: var(--elevation-2);
}

/* Dark theme: add translucent overlay for space theme */
html[data-beta="1"][data-theme="dark"] .beta-spotlight {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
html[data-beta="1"] .beta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-color);
}
html[data-beta="1"] .beta-title {
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-color);
}
html[data-beta="1"] .beta-subtitle {
  font-size: var(--fs-1);
  color: var(--text-secondary);
}

/* Dark theme: keep original space-themed styling */
html[data-beta="1"][data-theme="dark"] .beta-eyebrow {
  color: rgba(255,255,255,0.9);
}
html[data-beta="1"][data-theme="dark"] .beta-title {
  color: #ffffff;
  text-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
html[data-beta="1"][data-theme="dark"] .beta-subtitle {
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

html[data-beta="1"] .beta-cta {
  display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap;
}
html[data-beta="1"] .beta-cta .button.primary {
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.4);
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}
html[data-beta="1"] .beta-cta .button.secondary {
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.4);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  color: #ffffff;
}
html[data-beta="1"] .beta-cta .button.secondary:hover {
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  border-color: rgba(255,255,255,0.2);
}
html[data-beta="1"] .beta-cta .watch-live-button {
  background: linear-gradient(135deg, #0A84FF, #22c55e);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}
html[data-beta="1"] .beta-cta .watch-live-button:hover {
  background: linear-gradient(135deg, #0A84FF, #16a34a);
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.5);
  transform: translateY(-2px);
}
html[data-beta="1"] .beta-nextup { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* Loading skeletons */
html[data-beta="1"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html[data-beta="1"] .skeleton-title { height: 3rem; width: 80%; margin: 0 auto; }
html[data-beta="1"] .skeleton-subtitle { height: 1.5rem; width: 60%; margin: 0 auto; }
html[data-beta="1"] .skeleton-button { height: 3rem; width: 120px; }

/* Section header with refresh button */
html[data-beta="1"] .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
html[data-beta="1"] .section-header h2 { margin: 0; }
html[data-beta="1"] .refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
html[data-beta="1"] .refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-beta="1"] .refresh-btn .spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Beta Hero Mobile Optimization */
@media (max-width: 768px) {
  html[data-beta="1"] .beta-spotlight {
    padding: 24px;
    gap: 16px;
    margin: 0 16px;
  }

  html[data-beta="1"] .beta-title {
    font-size: var(--fs-3);
    line-height: 1.2;
  }

  html[data-beta="1"] .beta-subtitle {
    font-size: var(--fs-0);
    line-height: 1.4;
  }

  /* Improve countdown mobile layout */
  html[data-beta="1"] .countdown-timer {
    gap: 8px;
  }

  html[data-beta="1"] .countdown-block {
    padding: 12px 6px;
    min-width: 60px;
  }

  html[data-beta="1"] .countdown-number {
    font-size: 1.8rem;
  }

  html[data-beta="1"] .countdown-unit {
    font-size: 0.7rem;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  html[data-beta="1"] .beta-spotlight {
    padding: 20px;
    margin: 0 12px;
    gap: 12px;
  }

  html[data-beta="1"] .beta-title {
    font-size: var(--fs-2);
    line-height: 1.1;
  }

  html[data-beta="1"] .beta-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Stack countdown blocks vertically on very small screens */
  html[data-beta="1"] .countdown-timer {
    flex-wrap: wrap;
    gap: 6px;
  }

  html[data-beta="1"] .countdown-block {
    flex: 0 0 calc(50% - 12px);
    padding: 10px 4px;
    min-width: 50px;
  }

  html[data-beta="1"] .countdown-number {
    font-size: 1.6rem;
  }

  html[data-beta="1"] .countdown-unit {
    font-size: 0.65rem;
    margin-top: 2px;
  }

  /* Improve CTA button layout on mobile */
  html[data-beta="1"] .beta-cta {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  html[data-beta="1"] .beta-cta .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Better spacing for next-up launches */
  html[data-beta="1"] .beta-nextup {
    flex-direction: column;
    gap: 6px;
  }

  html[data-beta="1"] .beta-nextup .button {
    min-height: 44px;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 132, 255, 0);
  }
}

@keyframes numberChange {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Base Countdown Timer Styles */
.launch-countdown {
  background: linear-gradient(145deg, rgba(22, 28, 36, 0.9), rgba(16, 20, 26, 0.8));
  border-radius: var(--radius-banner);
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  margin: 24px 0;
}

.launch-countdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.countdown-label {
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-color);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.countdown-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #0A84FF;
  border-radius: 50%;
  box-shadow: 0 0 8px #0A84FF;
  animation: pulse 2s infinite;
}

.countdown-timer {
  display: flex;
  gap: 20px;
  position: relative;
}

.countdown-timer::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.countdown-block {
  text-align: center;
  flex: 1;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
  padding: 20px 8px;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.countdown-block:hover {
  transform: translateY(-2px);
}

.countdown-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0A84FF, transparent);
  opacity: 0.6;
}

.countdown-number {
  font-size: 2.6rem;
  font-weight: 700;
  color: #0A84FF;
  text-shadow: 0 0 10px rgba(10, 132, 255, 0.4);
  position: relative;
  transition: all 0.3s ease;
}

.countdown-number.changed {
  animation: numberChange 0.5s ease;
}

.countdown-unit {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.countdown-separator {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
  font-size: 1.8rem;
}

.launched-message {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #0A84FF;
  text-shadow: 0 0 10px rgba(10, 132, 255, 0.4);
}

/* Light mode countdown adjustments */
[data-theme="light"] .launch-countdown {
  background: linear-gradient(145deg, rgba(240, 242, 245, 0.9), rgba(230, 235, 240, 0.8));
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .countdown-block {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 245, 0.9));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .countdown-number {
  color: #007AFF;
  text-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}

[data-theme="light"] .countdown-unit {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .countdown-separator {
  color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .countdown-label::before {
  background-color: #007AFF;
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.7);
}

[data-theme="light"] .launched-message {
  color: #007AFF;
  text-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}
/* Launch hover previews - COMMENTED OUT
html[data-beta="1"] .launch-preview {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-2);
  z-index: 10;
  min-width: 200px;
  padding: 12px;
  pointer-events: none;
}
html[data-beta="1"] .launch-preview .preview-content h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}
html[data-beta="1"] .launch-preview .preview-content p {
  margin: 4px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
*/
html[data-beta="1"] .launch-card {
  position: relative;
}

/* Probability indicator */html[data-beta="1"] .probability-bar {
  margin: 20px auto;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-card);
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.2);
}
html[data-beta="1"] .prob-fill {
  height: 10px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  border-radius: 6px;
  transition: width 1s ease;
  position: relative;
  box-shadow: var(--elevation-1);
}
html[data-beta="1"] .prob-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent);
  border-radius: var(--radius-card);
}
html[data-beta="1"] .prob-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  min-width: 60px;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

html[data-beta="1"] .prob-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
}
html[data-beta="1"] .prob-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  min-width: 50px;
  text-align: right;
}

/* Loading indicators */
html[data-beta="1"] .loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
html[data-beta="1"] .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error display */
html[data-beta="1"] .beta-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.8);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-card);
   padding: 24px;
  text-align: center;
  max-width: 400px;
  z-index: 1000;
}
html[data-beta="1"] .beta-error .error-content h3 {
  color: #ef4444;
  margin: 0 0 12px 0;
  font-size: 1.2rem;
}
html[data-beta="1"] .beta-error .error-content p {
  color: var(--text-color);
  margin: 0 0 16px 0;
  font-size: 0.9rem;
}

/* Accessibility improvements */
html[data-beta="1"] .beta-cta a:focus,
html[data-beta="1"] .beta-cta button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


/* Responsive adjustments */
@media (max-width: 600px) {
  html[data-beta="1"] .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  html[data-beta="1"] .refresh-btn {
    align-self: flex-end;
  }
}

/* Countdown */
.beta-countdown {
  display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 8px;
}
.beta-countdown .blk {
  min-width: 80px; padding: 12px 16px; border-radius: var(--radius-banner);
  background: var(--button-secondary-bg); backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  box-shadow: var(--elevation-1);
  text-align: center;
}
.beta-countdown .num {
  font-size: 2rem; font-weight: 800;
  color: var(--text-color);
}
.beta-countdown .unit {
  opacity: .9; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Dark theme: keep original space-themed countdown styling */
[data-theme="dark"] .beta-countdown .blk {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .beta-countdown .num {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
[data-theme="dark"] .beta-countdown .unit {
  color: rgba(255,255,255,0.8);
}

/* Beta Launches section (reuse existing grid) */
html[data-beta="1"] .beta-section { padding: 40px 0; }
html[data-beta="1"] .beta-section h2 { text-align: center; margin-bottom: 20px; }

/* Launches page: sticky filter bar */
html[data-beta="1"] .beta-filters {
  position: sticky; top: 64px; z-index: var(--z-nav);
   background: var(--card-background);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-card);
   box-shadow: var(--elevation-1);
  padding: 12px;
  margin: 12px auto 20px auto;
  width: 100%;
}
/* Controls layout */
html[data-beta="1"] .beta-filters .row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.1fr 1.1fr auto auto;
  gap: 12px;
  align-items: center;
}
html[data-beta="1"] .beta-filters select,
html[data-beta="1"] .beta-filters input[type="text"] {
  background: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  height: 40px;
}
html[data-beta="1"] .beta-filters input[type="date"] { height: 40px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); padding: 0 10px; }
html[data-beta="1"] .beta-filters .clear {
  background: var(--button-secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  height: 40px;
}
html[data-beta="1"] .beta-filters .timeline-toggle { display: inline-flex; gap: 8px; white-space: nowrap; }
html[data-beta="1"] .beta-filters .timeline-toggle .clear { height: 40px; }

/* Enhanced Mobile Filter Bar Optimization */
@media (max-width: 900px) {
  html[data-beta="1"] .beta-filters .row {
    grid-template-columns: 1fr 1fr; /* stack controls */
    gap: 10px;
  }

  html[data-beta="1"] .beta-filters select,
  html[data-beta="1"] .beta-filters input[type="text"],
  html[data-beta="1"] .beta-filters input[type="date"] {
    height: 44px; /* Better touch targets */
    font-size: 16px; /* Prevent iOS zoom */
  }

  html[data-beta="1"] .beta-filters .clear {
    height: 44px;
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  html[data-beta="1"] .beta-filters .row {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 8px;
  }

  html[data-beta="1"] .beta-filters {
    padding: 16px;
    margin: 8px auto 16px auto;
  }

  html[data-beta="1"] .beta-filters select,
  html[data-beta="1"] .beta-filters input[type="text"],
  html[data-beta="1"] .beta-filters input[type="date"] {
    height: 48px; /* Larger touch targets on small screens */
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 12px;
  }

  html[data-beta="1"] .beta-filters .clear {
    height: 48px;
    width: 100%;
    margin-top: 8px;
  }

  /* Improve timeline toggle buttons on mobile */
  html[data-beta="1"] .beta-filters .timeline-toggle {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  html[data-beta="1"] .beta-filters .timeline-toggle .clear {
    flex: 1;
    height: 44px;
    font-size: 14px;
  }
}

/* Reveal on scroll for cards */
@media (prefers-reduced-motion: no-preference) {
  html[data-beta="1"] .launch-card { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); }
  html[data-beta="1"] .launch-card.revealed { opacity: 1; transform: translateY(0); }
  html[data-beta="1"] .news-card { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); }
  html[data-beta="1"] .news-card.revealed { opacity: 1; transform: translateY(0); }
/* Beta reveal animations - content starts hidden and animates in */
html[data-beta="1"] .launch-details-content .launch-section,
html[data-beta="1"] .launch-details-content .launch-details-header {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
}

html[data-beta="1"] .launch-details-content .launch-section.revealed,
html[data-beta="1"] .launch-details-content .launch-details-header.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback: Ensure content is visible after 5 seconds if JavaScript fails */
html[data-beta="1"] .launch-details-content .launch-section:not(.revealed),
html[data-beta="1"] .launch-details-content .launch-details-header:not(.revealed) {
  animation: betaRevealFallback 0s 5s forwards;
}

@keyframes betaRevealFallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
}

/* Timeline view */
/* Axis and column sizing variables for the timeline layout */
html[data-beta="1"] {
  --tl-date-col: 180px;           /* left column width for time labels */
  --tl-axis-gap: 24px;            /* spacing between time text and axis */
  --tl-axis: calc(var(--tl-date-col) + var(--tl-axis-gap));
}
html[data-beta="1"] .timeline-toggle { margin-left: auto; }
html[data-beta="1"] .timeline-container { display: none; }
html[data-beta="1"][data-view="timeline"] .timeline-container { display: block; }
html[data-beta="1"][data-view="timeline"] .launches-grid { display: none; }
/* Hide the grid wrapper and load-more in timeline to remove large empty space */
html[data-beta="1"][data-view="timeline"] .launches-grid-section { display: none; }
html[data-beta="1"][data-view="timeline"] #load-more { display: none; }
/* Timeline redesign (vertical mode legacy) */
html[data-beta="1"] .timeline-container { position: relative; padding: 12px 0 8px 0; }
html[data-beta="1"][data-view="timeline"] .launches-page { padding-top: 40px; }
html[data-beta="1"][data-view="timeline"] .page-header { margin: 16px auto 8px auto; }
html[data-beta="1"] .timeline-container::before {
  content: ""; position: absolute; left: var(--tl-axis); top: 0; bottom: 0;
  width: 2px; background: var(--border-color);
}
html[data-beta="1"] .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-date-col) 1fr;
  gap: 16px;
  padding: 14px 0 14px 0;
  align-items: center;
}
/* Ensure the date/time column sits above the line and dot on all browsers */
html[data-beta="1"] .timeline-item .timeline-date {
  position: relative;
  z-index: 1;
  background: var(--card-background);
  padding: 2px 18px 2px 0;
  border-radius: var(--radius-card);
  white-space: nowrap;
  display: inline-block;
  align-self: center;
}
html[data-beta="1"] .timeline-dot { z-index: 2; }
html[data-beta="1"] .timeline-dot {
  position: absolute; left: var(--tl-axis); top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary-color); border: 2px solid var(--card-background);
  box-shadow: 0 0 0 2px var(--primary-color, #0A84FF, 0.2);
}
html[data-beta="1"] .timeline-date { color: var(--text-secondary); font-weight: 700; text-align: right; padding-right: 18px; letter-spacing: .3px; }
html[data-beta="1"] .timeline-card { background: var(--card-background); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--elevation-1); }
html[data-beta="1"] .timeline-card:hover { box-shadow: var(--elevation-2); transform: translateY(-1px); transition: box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); }
/* Subtle left accent by status */
/* Use accent only for non-GO states to reduce redundancy with status chip */
html[data-beta="1"] .timeline-card.status-go { box-shadow: var(--elevation-1); }
html[data-beta="1"] .timeline-card.status-success { box-shadow: inset 3px 0 0 var(--status-success), var(--elevation-1); }
html[data-beta="1"] .timeline-card.status-hold { box-shadow: inset 3px 0 0 var(--status-hold), var(--elevation-1); }
html[data-beta="1"] .timeline-card.status-delayed { box-shadow: inset 3px 0 0 var(--status-delayed), var(--elevation-1); }
html[data-beta="1"] .timeline-card.status-failure { box-shadow: inset 3px 0 0 var(--status-failure), var(--elevation-1); }
html[data-beta="1"] .timeline-title { font-weight: 700; color: var(--text-color); margin-bottom: 6px; font-size: 1.05rem; letter-spacing: .2px; }
html[data-beta="1"] .timeline-title { font-weight: 700; color: var(--text-color); margin-bottom: 6px; }
html[data-beta="1"] .timeline-meta { color: var(--text-secondary); font-size: .9rem; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
html[data-beta="1"] .timeline-actions { display: flex; gap: 8px; }
/* Timeline card with thumbnail */
html[data-beta="1"] .timeline-card-inner { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; }
html[data-beta="1"] .timeline-thumb { width: 116px; height: 78px; border-radius: var(--radius-card); overflow: hidden; background: var(--gray-200); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border-color); }
html[data-beta="1"] .timeline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-beta="1"] .timeline-thumb .no-image { font-size: 28px; color: var(--text-secondary); }
html[data-beta="1"] .timeline-actions .button { height: 38px; }

/* Constrain card width for better rhythm and centering */
html[data-beta="1"] .timeline-card { max-width: 920px; }
@media (max-width: 1200px) { html[data-beta="1"] .timeline-card { max-width: 820px; } }
@media (max-width: 992px) { html[data-beta="1"] .timeline-card { max-width: 720px; } }
@media (max-width: 860px) { html[data-beta="1"] .timeline-card { max-width: 100%; } }

/* Tighten vertical rhythm between items */
html[data-beta="1"] .timeline-container .timeline-item + .timeline-item { margin-top: 4px; }
html[data-beta="1"] .timeline-day {
  margin: 12px 0 4px;
  font-weight: 700;
  color: var(--text-color);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-beta="1"] .timeline-item { transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); }
  html[data-beta="1"] .timeline-item:hover { transform: translateY(-2px); box-shadow: var(--elevation-1); }
}
html[data-beta="1"] .timeline-sticky {
  position: sticky; top: 72px;
   background: var(--card-background);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-card);
   box-shadow: var(--elevation-1);
  padding: 12px 16px;
  margin: 16px 0 8px 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-color);
  z-index: var(--z-nav);
  text-align: center;
  backdrop-filter: blur(8px);
}
html[data-beta="1"]:not([data-view="timeline"]) .timeline-sticky { display: none; }
/* Hide visually while preserving layout to prevent jump */
html[data-beta="1"] .timeline-sticky.tl-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Timeline Mobile UX Improvements */
@media (max-width: 720px) {
  html[data-beta="1"] {
    --tl-date-col: 140px;
    --tl-axis-gap: 20px;
  }
  html[data-beta="1"] .timeline-title { font-size: 1rem; }

  /* Better mobile touch targets */
  html[data-beta="1"] .timeline-actions .button {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }

  /* Improve timeline card spacing on mobile */
  html[data-beta="1"] .timeline-item {
    padding: 12px 0;
  }

  html[data-beta="1"] .timeline-card {
    padding: 12px;
    margin-left: 8px;
  }
}

/* Enhanced Mobile Timeline - Vertical Layout Option */
@media (max-width: 600px) {
  /* Switch to vertical timeline layout on small screens */
  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) {
    display: block;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-item {
    position: relative;
    display: block;
    padding: 16px 0;
    border-left: 3px solid var(--border-color);
    margin-left: 20px;
    padding-left: 16px;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 20px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border: 2px solid var(--card-background);
    border-radius: 50%;
    z-index: 1;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-date {
    position: static;
    background: transparent;
    padding: 0;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-card {
    margin-top: 8px;
    margin-left: 0;
    padding: 16px;
    border-radius: var(--radius-card);
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-card-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-thumb {
    width: 100%;
    height: 120px;
    margin-bottom: 8px;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-title {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-meta {
    font-size: 0.85rem;
    margin-bottom: 8px;
  }

  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-actions {
    margin-top: 12px;
  }

  /* Hide horizontal timeline elements in vertical mode */
  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-scroll,
  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .timeline-strip,
  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .tl-day,
  html[data-beta="1"][data-view="timeline"] .timeline-container:not(.timeline-h) .tl-day-label {
    display: none !important;
  }
}

/* Horizontal timeline (new) */
html[data-beta="1"] .timeline-container.timeline-h::before { display: none !important; }
html[data-beta="1"] .timeline-container.timeline-h {
  padding: 24px 20px;
  margin: 0 -20px;
}
html[data-beta="1"] .timeline-container.timeline-h .timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
  scroll-snap-type: x proximity;
  scroll-padding: 0 32px;
}
html[data-beta="1"] .timeline-container.timeline-h .timeline-strip {
  position: relative;
  --tl-axis-y: 60px;
  --tl-strip-pad-top: 20px;
  --tl-dot-offset: -2px; /* Fine-tune dot vertical position */
  --tl-card-top-space: 25px; /* Keep in sync with tl-card margin-top */
  --tl-connector-start: calc(var(--tl-axis-y) - var(--tl-strip-pad-top) + var(--tl-dot-offset));
  --tl-connector-height: calc(var(--tl-axis-y) - var(--tl-strip-pad-top) + var(--tl-dot-offset) - var(--tl-card-top-space));
  padding-top: var(--tl-strip-pad-top);
}
html[data-beta="1"] .timeline-container.timeline-h .timeline-strip::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--tl-axis-y);
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  transform: translateX(-50%);
  z-index: 0;
}

html[data-beta="1"][data-theme="light"] .timeline-container.timeline-h .timeline-strip::before {
  background: rgba(0,0,0,0.4);
}

html[data-beta="1"][data-theme="light"] .timeline-container.timeline-h .tl-card::before {
  background: rgba(0,0,0,0.5);
}
html[data-beta="1"] .timeline-container.timeline-h .tl-day {
  position: relative;
  display: inline-flex;
  gap: clamp(16px, 3vw, 24px);
  padding-left: 12px;
  z-index: 3;
  min-width: 360px;
}
html[data-beta="1"] .timeline-container.timeline-h .tl-day-label {
  position: absolute;
  left: 50%;
  top: calc(var(--tl-axis-y) - var(--tl-strip-pad-top) - 55px);
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

html[data-beta="1"][data-theme="light"] .timeline-container.timeline-h .tl-day-label {
  background: rgba(255,255,255,0.9);
  color: #000;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
html[data-beta="1"] .timeline-container.timeline-h .tl-node {
  position: relative;
  width: clamp(240px, 26vw, 300px);
  scroll-snap-align: center;
}
html[data-beta="1"] .timeline-container.timeline-h .tl-dot {
  position: absolute;
  left: 50%;
  top: var(--tl-connector-start);
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--status-go);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 2;
}
html[data-beta="1"] .timeline-container.timeline-h .tl-card {
  margin-top: var(--tl-card-top-space);
   background: var(--card-background);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-card);
   width: 100%;
  max-width: none;
  box-shadow: var(--elevation-1);
  padding: 14px;
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 100px;
  transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard);
  position: relative;
}

/* Connector from dot to card for stronger visual continuity */
html[data-beta="1"] .timeline-container.timeline-h .tl-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--tl-connector-height));
  width: 2px;
  height: var(--tl-connector-height);
  background: rgba(255,255,255,0.4);
  transform: translateX(-50%);
  z-index: 1;
}

html[data-beta="1"] .timeline-container.timeline-h .tl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-2);
}
html[data-beta="1"] .timeline-container.timeline-h .tl-thumb {
  width: 105px;
  height: 75px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border-color);
}
html[data-beta="1"] .timeline-container.timeline-h .tl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-beta="1"] .timeline-container.timeline-h .tl-title { font-weight: 700; color: var(--text-color); font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
html[data-beta="1"] .timeline-container.timeline-h .tl-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); font-size: .85rem; margin-top: 4px; }
html[data-beta="1"] .timeline-container.timeline-h .tl-actions { margin-top: 8px; display: flex; gap: 8px; }
@media (max-width: 860px) {
  html[data-beta="1"] .timeline-container.timeline-h .tl-node { width: 230px; }
}

/* During inertial scrolling, disable hover transforms to avoid jitter */
html.is-scrolling[data-beta="1"] .timeline-card:hover,
html.is-scrolling[data-beta="1"] .timeline-item:hover { transform: none; box-shadow: var(--elevation-1); }

/* Launch Details banner polish */
html[data-beta="1"] .launch-details-header { border: none; border-radius: var(--radius-banner); overflow: hidden; }
html[data-beta="1"] .launch-image-large::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.7) 100%);
}
html[data-beta="1"] .launch-header-content { background: transparent; }
html[data-beta="1"] .launch-status-large { border-radius: 9999px; }

/* Watch live highlight (T-10m) */
html[data-beta="1"] .watch-live-button.live {
  position: relative;
  background: linear-gradient(90deg, var(--primary-color), #22c55e);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-beta="1"] .watch-live-button { transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); }
  html[data-beta="1"] .watch-live-button:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
  html[data-beta="1"] .watch-live-button:active { transform: translateY(0); box-shadow: var(--elevation-1); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-beta="1"] .watch-live-button.live::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 9999px; border: 2px solid rgba(34,197,94,0.45);
    animation: pulse-ring 1.8s infinite;
  }
  @keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
}
html[data-beta="1"] .watch-live-button .live-now {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 2px 8px; border-radius: 9999px; font-size: .8rem;
  margin-left: 10px; font-weight: 600;
}

/* Provider/status chip polish on cards */
html[data-beta="1"] .launch-provider {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--hover-active-bg);
  border: 1px solid var(--border-color);
  width: fit-content;
}
html[data-beta="1"] .launch-status { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Toast (actions feedback) */
html[data-beta="1"] .toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--card-background); border: 1px solid var(--border-color);
  color: var(--text-color); padding: 10px 14px; border-radius: 8px;
  box-shadow: var(--elevation-1); z-index: var(--z-modal);
  display: inline-flex; gap: 8px; align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-beta="1"] .toast { opacity: 0; transform: translate(-50%, 8px); animation: toast-in var(--dur-med) var(--ease-standard) forwards, toast-out var(--dur-med) var(--ease-standard) 1.4s forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px);} to { opacity: 1; transform: translate(-50%, 0);} }
  @keyframes toast-out { to { opacity: 0; transform: translate(-50%, 8px);} }
  html[data-beta="1"] .toast .spin { animation: spin 0.6s ease forwards; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
}

/* Details actions alignment */
html[data-beta="1"] .launch-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Swagger wrapper polish */
html[data-beta="1"] .swagger-wrap { margin-top: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--elevation-1); overflow: hidden; background: var(--card-background); }

/* Mobile responsiveness for countdown */
@media (max-width: 768px) {
  html[data-beta="1"] .launch-countdown {
    padding: 20px;
  }

  html[data-beta="1"] .countdown-timer {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  html[data-beta="1"] .countdown-block {
    min-width: 80px;
    flex: 0 0 calc(50% - 24px);
    padding: 16px 8px;
  }

  html[data-beta="1"] .countdown-separator {
    display: none;
  }

  html[data-beta="1"] .countdown-label {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  html[data-beta="1"] .countdown-block {
    padding: 12px 8px;
  }

  html[data-beta="1"] .countdown-number {
    font-size: 2rem;
  }

  html[data-beta="1"] .countdown-unit {
    font-size: 0.8rem;
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  html[data-beta="1"] .launch-countdown {
    padding: 16px;
  }

  html[data-beta="1"] .countdown-label {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  html[data-beta="1"] .countdown-block {
    min-width: 70px;
    flex: 0 0 calc(50% - 16px);
    padding: 10px 6px;
  }

  html[data-beta="1"] .countdown-number {
    font-size: 1.8rem;
  }

  html[data-beta="1"] .countdown-unit {
    font-size: 0.75rem;
    margin-top: 4px;
  }
}

/* Timeline responsive improvements */
@media (max-width: 768px) {
  html[data-beta="1"] .timeline-container.timeline-h .tl-node {
    width: clamp(220px, 45vw, 260px);
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-thumb {
    width: 95px;
    height: 68px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .timeline-strip {
    gap: clamp(16px, 4vw, 24px);
    --tl-axis-y: 50px;
    --tl-strip-pad-top: 16px;
    padding-top: var(--tl-strip-pad-top);
    min-height: 130px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-day-label {
    top: calc(var(--tl-axis-y) - var(--tl-strip-pad-top) - 45px);
    font-size: 0.9rem;
    padding: 5px 10px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-card {
    margin-top: 20px;
    max-width: none;
    padding: 12px;
    grid-template-columns: 95px 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  html[data-beta="1"] .timeline-container.timeline-h .tl-node {
    width: clamp(200px, 60vw, 240px);
  }

  html[data-beta="1"] .timeline-sticky {
    font-size: 1rem;
    padding: 10px 12px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-day-label {
    top: calc(var(--tl-axis-y) - var(--tl-strip-pad-top) - 40px);
    font-size: 0.85rem;
    padding: 4px 8px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-card {
    margin-top: 18px;
    max-width: none;
    padding: 16px;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    min-height: 120px;
  }

  html[data-beta="1"] .timeline-container.timeline-h .tl-thumb {
    width: 100px;
    height: 70px;
  }

  /* Better touch targets for mobile */
  html[data-beta="1"] .timeline-container.timeline-h .tl-actions .button {
    min-height: 44px;
    padding: 8px 16px;
  }
 }

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce backdrop-filter blur on mobile for better performance */
  html[data-beta="1"] .launch-card,
  html[data-beta="1"] .news-card,
  html[data-beta="1"] .beta-spotlight,
  html[data-beta="1"] .feature-card {
    backdrop-filter: blur(5px);
  }

  /* Optimize animations for mobile */
  html[data-beta="1"] .launch-card,
  html[data-beta="1"] .news-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Reduce motion for better mobile performance */
  html[data-beta="1"] .timeline-card:hover {
    transform: translateY(-2px);
  }
}

/* Touch Target Audit - Ensure 44px minimum */
@media (max-width: 768px) {
  /* Buttons */
  html[data-beta="1"] .button {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Filter controls */
  html[data-beta="1"] .beta-filters select,
  html[data-beta="1"] .beta-filters input {
    min-height: 44px;
  }

  /* Timeline actions */
  html[data-beta="1"] .timeline-actions .button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Navigation links */
  html[data-beta="1"] .nav-links a {
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }

  /* Theme toggle */
  html[data-beta="1"] .theme-toggle {
    width: 48px;
    height: 48px;
  }

  /* Modal close buttons */
  html[data-beta="1"] .modal-close,
  html[data-beta="1"] .fullscreen-image-modal .close-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}

/* iOS Safari Specific Fixes */
@media (max-width: 768px) {
  /* Prevent horizontal scroll on iOS */
  html[data-beta="1"] body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }

  /* Fix input zoom on iOS */
  html[data-beta="1"] input[type="text"],
  html[data-beta="1"] input[type="date"],
  html[data-beta="1"] select {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Better tap highlighting */
  html[data-beta="1"] .button,
  html[data-beta="1"] .timeline-card,
  html[data-beta="1"] .launch-card,
  html[data-beta="1"] .news-card {
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1);
  }

  /* Fix sticky positioning issues on iOS */
  html[data-beta="1"] .beta-filters {
    position: -webkit-sticky;
    position: sticky;
  }
}

/* Light mode visibility: Make page wrappers translucent to show starfield overlay */
html[data-beta="1"] .launches-page,
html[data-beta="1"] .launch-details-page,
html[data-beta="1"] .api-docs {
  background: transparent !important;
}

/* Keep content cards and hero panels theme-aware for readability */
html[data-beta="1"] .launch-card,
html[data-beta="1"] .news-card,
html[data-beta="1"] .beta-spotlight,
html[data-beta="1"] .feature-card {
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
}