/* /assets/app/app.css */
/* Simplified App Preview - fullscreen, no device frame */

/* ✅ iOS FIX: Basic resets without blocking scroll */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none; /* ✅ Disable pull-to-refresh */
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior-y: none; /* ✅ Disable pull-to-refresh */
  touch-action: pan-y; /* ✅ Allow vertical scrolling, disable pull-to-refresh */
}

.app-preview {
  width: 100%;
  height: 100%; /* ✅ Use 100% instead of 100vh for iOS */
  background: transparent; /* ✅ TRANSPARENT - show wallpaper */
  color: #eef3ff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; /* ✅ SNAP to top */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* Prevent window scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none; /* ✅ Disable pull-to-refresh */
}

/* App shell - fullscreen */
.app-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent; /* ✅ TRANSPARENT - show wallpaper */
  color: #eef3ff;
  position: relative;
  overflow: hidden;
}

.app-top {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-bottom: 1px solid #2a3140;
  background: #0f1522;
  font-weight: 600;
}

/* App body - ensure proper stacking context */
.app-body {
  flex: 1;
  overflow-y: auto; /* ✅ SCROLLABLE */
  overflow-x: hidden;
  background: transparent; /* Transparent to show wallpaper */
  padding-bottom: 0; /* ✅ NO PADDING - dock handles its own space */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior-y: none; /* ✅ DISABLE pull-to-refresh */
  position: relative;
  z-index: 10; /* Ensure content is above banner */
  min-height: 0; /* ✅ Allow flex to shrink properly */
  /* ✅ REMOVED transform: translateZ(0) - was breaking position: fixed */
}

/* ✅ iOS FIX: Prevent address bar from affecting layout */
@supports (-webkit-touch-callout: none) {
  .app-preview {
    height: -webkit-fill-available;
  }
  
  .app-shell {
    height: -webkit-fill-available;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FROSTED GLASS DOCK WITH DYNAMIC WALLPAPER
   ═══════════════════════════════════════════════════════════════ */

.app-dock {
  position: fixed; /* Fixed at bottom of viewport - always visible */
  bottom: 0;
  left: 0;
  right: 0;
  height: auto; /* ✅ AUTO height to accommodate safe area */
  min-height: 56px; /* ✅ Minimum height */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  
  /* ✅ FROSTED GLASS EFFECT */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  
  gap: 6px;
  padding: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* ✅ Safe area for notched devices */
  z-index: 20;
  -webkit-transform: translateZ(0); /* ✅ Force GPU acceleration on iOS */
  transform: translateZ(0);
  overflow: hidden; /* ✅ Clip wallpaper to dock bounds */
}

/* ✅ BLURRED WALLPAPER BACKGROUND - matches active tab */
.app-dock::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3);
  opacity: 0.4;
  transform: scale(1.1);
}

/* Wallpaper sources based on current tab */
.app-body:has([data-tab="exclusives"]) ~ .app-dock::before {
  background-image: var(--exclusives-wallpaper-desktop);
}

.app-body:has([data-tab="fundamentals"]) ~ .app-dock::before {
  background-image: var(--fundamentals-wallpaper-desktop);
}

.app-body:has([data-tab="series"]) ~ .app-dock::before {
  background-image: var(--series-wallpaper-desktop);
}

.app-body:has([data-tab="more"]) ~ .app-dock::before {
  background-image: none; /* No wallpaper for More tab */
}

/* Mobile wallpaper variants */
@media (max-width: 768px) {
  .app-body:has([data-tab="exclusives"]) ~ .app-dock::before {
    background-image: var(--exclusives-wallpaper-mobile, var(--exclusives-wallpaper-desktop));
  }
  
  .app-body:has([data-tab="fundamentals"]) ~ .app-dock::before {
    background-image: var(--fundamentals-wallpaper-mobile, var(--fundamentals-wallpaper-desktop));
  }
  
  .app-body:has([data-tab="series"]) ~ .app-dock::before {
    background-image: var(--series-wallpaper-mobile, var(--series-wallpaper-desktop));
  }
}

.app-dock button {
  background: transparent;
  color: rgba(0, 0, 0, 0.75); /* ✅ Dark text for frosted glass */
  border: 0;
  padding: 8px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 15px; /* ✅ INCREASED: 13px → 15px */
  font-weight: 500; /* ✅ Medium weight for better readability */
  transition: all 0.2s;
}

.app-dock button:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.app-dock button.is-active {
  color: #007AFF; /* ✅ iOS blue for active state */
  background: rgba(0, 122, 255, 0.15);
  font-weight: 600; /* ✅ Bold for active state */
}

.app-center {
  height: 100%;
  display: grid;
  place-items: center;
  opacity: .85;
  padding: 20px;
}

/* Banner Wallpaper - positioned on shell, not body */
.app-shell::before {
  content: '';
  position: fixed;
  top: 0; /* ✅ START AT TOP - no header offset */
  left: 0;
  right: 0;
  bottom: 0; /* Full page height */
  z-index: 1; /* Behind content */
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transform: translateZ(0); /* ✅ Force GPU acceleration on iOS */
  transform: translateZ(0);
  filter: brightness(0.75); /* ✅ DIM WALLPAPER BY 25% */
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE WALLPAPERS - Desktop & Mobile
   ═══════════════════════════════════════════════════════════════ */

/* Desktop wallpapers (default - wide screens) */
.app-shell:has(.app-body [data-tab="exclusives"])::before {
  background-color: #2a2a2e; /* Fallback color */
  background-image: var(--exclusives-wallpaper-desktop, var(--exclusives-wallpaper, none));
}

.app-shell:has(.app-body [data-tab="fundamentals"])::before {
  background-color: #1e3a2e; /* Fallback color */
  background-image: var(--fundamentals-wallpaper-desktop, var(--fundamentals-wallpaper, none));
}

.app-shell:has(.app-body [data-tab="series"])::before {
  background-color: #2e1e3a; /* Fallback color */
  background-image: var(--series-wallpaper-desktop, var(--series-wallpaper, none));
}

/* Mobile wallpapers (portrait orientation, ≤768px) */
@media (max-width: 768px) and (orientation: portrait) {
  .app-shell:has(.app-body [data-tab="exclusives"])::before {
    background-image: var(--exclusives-wallpaper-mobile, var(--exclusives-wallpaper-desktop, var(--exclusives-wallpaper, none)));
  }
  
  .app-shell:has(.app-body [data-tab="fundamentals"])::before {
    background-image: var(--fundamentals-wallpaper-mobile, var(--fundamentals-wallpaper-desktop, var(--fundamentals-wallpaper, none)));
  }
  
  .app-shell:has(.app-body [data-tab="series"])::before {
    background-image: var(--series-wallpaper-mobile, var(--series-wallpaper-desktop, var(--series-wallpaper, none)));
  }
}

/* Default Courses View */
.app-courses { 
  padding: 0;
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); /* ✅ Space for dock */
  position: relative;
  z-index: 10; /* Above banner */
  background: transparent; /* ✅ TRANSPARENT - no gradient, just wallpaper */
  min-height: 100vh; /* ✅ Ensure full viewport coverage */
  transform: translateZ(0); /* ✅ MOBILE FIX: Force GPU acceleration and stacking context */
  -webkit-transform: translateZ(0); /* ✅ MOBILE FIX: WebKit prefix */
  overflow: visible; /* ✅ VISIBLE - allow all content to scroll */
  height: auto; /* ✅ AUTO height - grow with content */
  touch-action: pan-y; /* ✅ DISABLE pull-to-refresh, allow vertical scroll */
  overscroll-behavior-y: none; /* ✅ DISABLE pull-to-refresh */
}

/* Exclusives - no gradient, floating on wallpaper */
.app-courses[data-tab="exclusives"] {
  padding-top: 32.5vh; /* ✅ SHIFTED UP 35% (was 50vh) */
  padding-bottom: 100px;
  background: transparent; /* ✅ NO GRADIENT - pure wallpaper */
}

/* Fundamentals - no gradient, floating on wallpaper */
.app-courses[data-tab="fundamentals"] {
  padding-top: 32.5vh; /* ✅ SHIFTED UP 35% (was 50vh) */
  padding-bottom: 100px;
  background: transparent; /* ✅ NO GRADIENT - pure wallpaper */
}

/* Series - no gradient, floating on wallpaper */
.app-courses[data-tab="series"] {
  padding-top: 32.5vh; /* ✅ SHIFTED UP 35% (was 50vh) */
  padding-bottom: 100px;
  background: transparent; /* ✅ NO GRADIENT - pure wallpaper */
}

/* More - starts at top (no padding, no wallpaper) */
.app-courses[data-tab="more"] {
  padding-top: 0;
  background: #0b0f15; /* Solid background for More tab */
}

/* Hide wallpaper for More tab */
.app-shell:has([data-tab="more"])::before {
  display: none;
}

/* More tab needs solid background (dark mode) */
.app-shell:has([data-tab="more"]) .app-body {
  background: #0b0f15 !important; /* Solid background for More tab */
}

/* Show solid background for More tab (since no wallpaper) */
.app-shell:has([data-tab="more"]) {
  background: #0b0f15 !important; /* Dark background for More */
}

:root[data-theme="light"] .app-shell:has([data-tab="more"]) {
  background: #f0f2f5 !important; /* Light background for More */
}

/* ═══════════════════════════════════════════════════════════════
   PAGE SUMMARY STYLING (NEW)
   ═══════════════════════════════════════════════════════════════ */

/* ✅ CHANGE 3: Centered summary box - FROSTED GLASS WITH WALLPAPER - RESPONSIVE SCALING */
.app-page-summary {
  margin: 0 32px 48px 32px; /* ✅ INCREASED: 32px sides (was 16px), 48px bottom (was 32px) */
  max-width: 600px; /* ✅ Start smaller on mobile */
  padding: 20px 24px 60px 70px; /* ✅ INCREASED left padding: 24px → 70px for speaker button */
  
  /* ✅ FROSTED GLASS EFFECT - matches preview cards */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: hidden; /* ✅ Clip wallpaper to rounded corners */
}

/* ✅ RESPONSIVE SCALING - Larger screens get larger cards */
@media (min-width: 768px) {
  .app-page-summary {
    max-width: 800px;
    padding: 28px 32px 68px 80px; /* ✅ INCREASED left padding for speaker */
  }
}

@media (min-width: 1024px) {
  .app-page-summary {
    max-width: 960px;
    padding: 32px 40px 76px 90px; /* ✅ INCREASED left padding for speaker */
  }
}

@media (min-width: 1440px) {
  .app-page-summary {
    max-width: 1120px;
    padding: 40px 48px 84px 100px; /* ✅ INCREASED left padding for speaker */
  }
}

@media (min-width: 1920px) {
  .app-page-summary {
    max-width: 1280px;
    padding: 48px 56px 92px 110px; /* ✅ INCREASED left padding for speaker */
  }
}

/* ✅ BLURRED WALLPAPER BACKGROUND - matches course type */
.app-page-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3);
  opacity: 0.4;
  transform: scale(1.1);
  border-radius: 16px;
}

/* Wallpaper sources based on current tab */
[data-tab="exclusives"] .app-page-summary::before {
  background-image: var(--exclusives-wallpaper-desktop);
}

[data-tab="fundamentals"] .app-page-summary::before {
  background-image: var(--fundamentals-wallpaper-desktop);
}

[data-tab="series"] .app-page-summary::before {
  background-image: var(--series-wallpaper-desktop);
}

/* Mobile wallpaper variants */
@media (max-width: 768px) {
  [data-tab="exclusives"] .app-page-summary::before {
    background-image: var(--exclusives-wallpaper-mobile, var(--exclusives-wallpaper-desktop));
  }
  
  [data-tab="fundamentals"] .app-page-summary::before {
    background-image: var(--fundamentals-wallpaper-mobile, var(--fundamentals-wallpaper-desktop));
  }
  
  [data-tab="series"] .app-page-summary::before {
    background-image: var(--series-wallpaper-mobile, var(--series-wallpaper-desktop));
  }
}

/* ✅ SPEAKER BUTTON - Bottom LEFT Corner - RESPONSIVE SCALING */
.app-page-summary__speaker {
  position: absolute;
  bottom: 12px;
  left: 12px; /* ✅ MOVED: right → left */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 100; /* ✅ HIGH Z-INDEX - ensure visibility above all content */
  
  /* Frosted glass button */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  
  /* Shadow for depth */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: all 0.2s ease;
  pointer-events: auto; /* ✅ Ensure button is clickable */
}

/* Larger speaker on larger screens */
@media (min-width: 768px) {
  .app-page-summary__speaker {
    width: 48px;
    height: 48px;
    font-size: 22px;
    bottom: 14px;
    left: 14px; /* ✅ MOVED: right → left */
  }
}

@media (min-width: 1024px) {
  .app-page-summary__speaker {
    width: 52px;
    height: 52px;
    font-size: 24px;
    bottom: 16px;
    left: 16px; /* ✅ MOVED: right → left */
  }
}

@media (min-width: 1440px) {
  .app-page-summary__speaker {
    width: 56px;
    height: 56px;
    font-size: 26px;
    bottom: 18px;
    left: 18px; /* ✅ MOVED: right → left */
  }
}

@media (min-width: 1920px) {
  .app-page-summary__speaker {
    width: 60px;
    height: 60px;
    font-size: 28px;
    bottom: 20px;
    left: 20px; /* ✅ MOVED: right → left */
  }
}

.app-page-summary__speaker:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.app-page-summary__speaker:active,
.app-page-summary__speaker.speaking {
  background: rgba(10, 132, 255, 0.3);
  border-color: rgba(10, 132, 255, 0.6);
  animation: pulse 1s infinite;
}

/* Mobile speaker sizing */
@media (max-width: 767px) {
  .app-page-summary__speaker {
    width: 40px;
    height: 40px;
    font-size: 18px;
    bottom: 10px;
    left: 10px; /* ✅ MOVED: right → left */
  }
}

/* ✅ Desktop: Center with auto margins */
@media (min-width: 850px) {
  .app-page-summary {
    margin-left: auto;
    margin-right: auto;
  }
}

.app-page-summary__title {
  margin: 0 0 12px 0;
  font-size: 22px; /* ✅ Start smaller on mobile */
  font-weight: 700;
  color: #1a1a1c;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

/* ✅ RESPONSIVE TITLE SCALING */
@media (min-width: 768px) {
  .app-page-summary__title {
    font-size: 28px;
    margin-bottom: 14px;
  }
}

@media (min-width: 1024px) {
  .app-page-summary__title {
    font-size: 32px;
    margin-bottom: 16px;
  }
}

@media (min-width: 1440px) {
  .app-page-summary__title {
    font-size: 38px;
    margin-bottom: 18px;
  }
}

@media (min-width: 1920px) {
  .app-page-summary__title {
    font-size: 44px;
    margin-bottom: 20px;
  }
}

.app-page-summary p {
  margin: 0;
  font-size: 14px; /* ✅ Start smaller on mobile */
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
}

/* ✅ RESPONSIVE BODY TEXT SCALING */
@media (min-width: 768px) {
  .app-page-summary p {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (min-width: 1024px) {
  .app-page-summary p {
    font-size: 18px;
    line-height: 1.7;
  }
}

@media (min-width: 1440px) {
  .app-page-summary p {
    font-size: 20px;
    line-height: 1.75;
  }
}

@media (min-width: 1920px) {
  .app-page-summary p {
    font-size: 22px;
    line-height: 1.8;
  }
}

/* Informational Blurb - scrolls over banner */
.app-info-blurb {
  padding: 24px 16px;
  margin: 16px 16px 32px 16px;
  background: rgba(15, 21, 34, 0.95); /* More opaque to stand out over banner */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative; /* ✅ FIXED: Create stacking context */
  z-index: 10; /* ✅ FIXED: Above wallpaper */
  transform: translateZ(0); /* ✅ MOBILE FIX: Force GPU acceleration */
  -webkit-transform: translateZ(0); /* ✅ MOBILE FIX: WebKit prefix */
}

.app-info-blurb p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cbd6f4;
  opacity: 0.95;
}

/* Section Headings */
.app-section {
  margin-bottom: 0; /* ✅ NO bottom margin - eliminates gap before dock */
  width: 100%; /* ✅ Full width */
  background: transparent;
  padding: 0 32px 80px 32px; /* ✅ INCREASED: 32px sides, 80px bottom (was 16px/40px) */
  border-radius: 0;
  border: none; /* ✅ NO BORDER */
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible; /* ✅ VISIBLE - show all content */
  min-height: min-content; /* ✅ Grow to fit content */
  box-sizing: border-box; /* ✅ Include padding in width calculation */
}

/* ✅ Add spacing to sections */
.app-section {
  padding-top: 24px; /* ✅ Space for expiry chips */
}

.app-section:not(:first-child) {
  padding-top: 48px; /* ✅ More space above section for title card */
}

.app-section:last-child {
  padding-bottom: 0; /* ✅ Last section has no padding */
  margin-bottom: 0; /* ✅ No margin on last section */
}

/* ✅ Section headings - frosted glass matching summary card */
.app-section__title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1c;
  margin: 0 0 24px 32px; /* ✅ Left margin to align with cards */
  padding: 12px 24px; /* ✅ TIGHT padding */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* ✅ FROSTED GLASS EFFECT - exactly matching summary card */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* ✅ LEFT ALIGNED */
  display: inline-block;
  max-width: fit-content;
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: hidden; /* ✅ Clip wallpaper to rounded corners */
}

/* ✅ BLURRED WALLPAPER BACKGROUND for section titles */
.app-section__title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3);
  opacity: 0.4;
  transform: scale(1.1);
  border-radius: 16px;
}

/* Wallpaper sources for section titles based on current tab */
[data-tab="exclusives"] .app-section__title::before {
  background-image: var(--exclusives-wallpaper-desktop);
}

[data-tab="fundamentals"] .app-section__title::before {
  background-image: var(--fundamentals-wallpaper-desktop);
}

[data-tab="series"] .app-section__title::before {
  background-image: var(--series-wallpaper-desktop);
}

/* Available Now Grid - 2 columns matching Coming Soon grid alignment */
.app-grid--large {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ 2 columns = 4 Coming Soon columns */
  gap: 64px; /* ✅ Match Coming Soon gap */
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background: transparent;
  border: none;
}

/* Available Now container cards - frosted glass matching summary card */
.app-grid--large .app-card {
  margin: 16px 0 0 0; /* ✅ Top margin for expiry chip clearance */
  width: 100%;
  min-height: 300px; /* ✅ LARGER to accommodate bigger hero + even spacing */
  
  /* ✅ FROSTED GLASS - exactly matching summary card */
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* ✅ Grid layout - HERO LEFT, details RIGHT on desktop */
  display: grid !important;
  grid-template-columns: 390px 1fr !important; /* ✅ Fixed hero width, flexible content */
  grid-template-rows: 1fr !important; /* ✅ Single row */
  grid-template-areas: "hero content" !important; /* ✅ Explicit areas */
  align-items: center; /* ✅ Center vertically */
  padding: 24px;
  gap: 24px; /* ✅ Gap between hero and details */
  
  position: relative; /* ✅ For expiry chip positioning */
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible !important; /* ✅ ALLOW expiry chip to hang outside */
  
  /* ✅ HOVER ZOOM - smooth transition */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ✅ HOVER ZOOM EFFECT - card scales up */
.app-grid--large .app-card:hover {
  transform: scale(1.03) translateZ(0);
  z-index: 20; /* ✅ Bring to front on hover */
}

/* ✅ ZOOM ALL CHILDREN on card hover */
.app-grid--large .app-card:hover .app-card__image,
.app-grid--large .app-card:hover .app-card__content,
.app-grid--large .app-card:hover .app-card__title,
.app-grid--large .app-card:hover .app-card__badges,
.app-grid--large .app-card:hover .app-card__countdown,
.app-grid--large .app-card:hover .app-card__summary,
.app-grid--large .app-card:hover .app-card__expiry-chip {
  transform: scale(1.0); /* ✅ Children stay at 1.0 relative to card */
}

/* ✅ BLURRED WALLPAPER BACKGROUND for container cards */
.app-grid--large .app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3);
  opacity: 0.4;
  transform: scale(1.1);
  border-radius: 16px;
}

/* Wallpaper sources for Available Now containers */
[data-tab="exclusives"] .app-grid--large .app-card::before {
  background-image: var(--exclusives-wallpaper-desktop);
}

[data-tab="fundamentals"] .app-grid--large .app-card::before {
  background-image: var(--fundamentals-wallpaper-desktop);
}

[data-tab="series"] .app-grid--large .app-card::before {
  background-image: var(--series-wallpaper-desktop);
}

/* Hero image container - 30% larger than Coming Soon, snapped left */
.app-grid--large .app-card__image {
  grid-area: hero !important; /* ✅ Assigned to hero area (LEFT) */
  width: 100%; /* ✅ Responsive */
  max-width: 390px; /* ✅ 30% LARGER (300px * 1.3 = 390px) */
  margin: 0; /* ✅ No extra margins */
  align-self: center; /* ✅ CENTER - don't stretch to fill height */
  
  /* ✅ FROSTED GLASS HERO - exactly matching summary card */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: hidden; /* ✅ Clip wallpaper to rounded corners */
}

/* Hero image - 16:9 aspect ratio */
.app-grid--large .app-card__image img {
  width: 100%;
  aspect-ratio: 16/9; /* ✅ Same as Coming Soon */
  object-fit: cover;
  display: block;
  border-radius: 16px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1; /* ✅ Above wallpaper background */
  opacity: 0.95; /* ✅ Slightly transparent to show glass effect */
}

/* ✅ BLURRED WALLPAPER BACKGROUND for Available Now heroes */
.app-grid--large .app-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3);
  opacity: 0.4;
  transform: scale(1.1);
  border-radius: 16px;
}

/* Content area on right */
.app-grid--large .app-card__content {
  grid-area: content !important; /* ✅ Assigned to content area (RIGHT) */
  min-height: 0; /* ✅ Allow content to be small */
  display: flex;
  flex-direction: column;
  gap: 16px; /* ✅ Reduced gap to fit summary */
  justify-content: space-between; /* ✅ Space between for badges at bottom */
  max-height: 260px; /* ✅ Limit height to prevent card expansion */
  overflow: visible; /* ✅ ALLOW countdown to position outside */
  position: relative; /* ✅ For countdown absolute positioning */
}

/* Summary section */
.app-card__summary {
  font-size: 16px; /* ✅ BIGGER (was 14px) */
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  margin: 8px 0 0 0; /* ✅ No bottom margin */
  max-height: 72px; /* ✅ Increased for bigger text (~3 lines) */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* ✅ Show 3 lines max */
  -webkit-box-orient: vertical;
}

/* See more button - larger, floated right under last line */
.app-card__see-more {
  display: inline-block; /* ✅ Inline for float */
  padding: 8px 14px; /* ✅ BIGGER padding */
  background: rgba(0, 0, 0, 0.08);
  color: #007aff;
  border: none;
  border-radius: 6px;
  font-size: 16px; /* ✅ SAME SIZE as description */
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
  float: right; /* ✅ Float to RIGHT */
}

.app-card__see-more:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* Description modal popup - LARGER and frosted glass */
.app-description-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.app-description-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.app-description-modal__content {
  /* ✅ FROSTED GLASS STYLE - matching summary card */
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px; /* ✅ Larger radius */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  max-width: 800px; /* ✅ MUCH LARGER (was 600px) */
  width: 100%;
  max-height: 85vh; /* ✅ Taller */
  overflow-y: auto;
  padding: 48px; /* ✅ BIGGER padding (was 32px) */
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-description-modal.is-open .app-description-modal__content {
  transform: scale(1);
}

.app-description-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px; /* ✅ More space */
}

.app-description-modal__title {
  font-size: 32px; /* ✅ MUCH BIGGER (was 24px) */
  font-weight: 700;
  color: #1a1a1c;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.app-description-modal__close {
  width: 40px; /* ✅ BIGGER (was 32px) */
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* ✅ BIGGER (was 20px) */
  color: #1a1a1c;
  transition: background 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}

.app-description-modal__close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.app-description-modal__body {
  font-size: 18px; /* ✅ MUCH BIGGER (was 15px) */
  line-height: 1.7; /* ✅ More line height for readability */
  color: rgba(0, 0, 0, 0.8);
  white-space: pre-wrap;
}

/* Badges container at bottom */
.app-card__badges {
  margin-top: auto; /* ✅ Push to bottom */
}

/* Course title - BIGGER */
.app-card__title {
  font-size: 32px; /* ✅ MUCH BIGGER (was 24px) */
  font-weight: 700;
  color: #1a1a1c;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Audience badges container */
.app-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* ✅ BIGGER gap */
}

/* Individual audience badge - 3D metallic styling - BIGGER */
.app-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px; /* ✅ MUCH BIGGER padding */
  border-radius: 8px; /* ✅ Slightly larger radius */
  font-size: 14px; /* ✅ BIGGER font */
  font-weight: 700;
  letter-spacing: 1px; /* ✅ More spacing */
  text-transform: uppercase;
  border: 1px solid;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Bronze - Beginner */
.app-card__badge--beginner {
  background: linear-gradient(
    135deg,
    #cd7f32 0%,
    #b87333 20%,
    #8b5a2b 50%,
    #b87333 80%,
    #cd7f32 100%
  );
  color: #fff;
  border-color: #8b5a2b;
}

/* Silver - Intermediate */
.app-card__badge--intermediate {
  background: linear-gradient(
    135deg,
    #e8e8e8 0%,
    #c0c0c0 20%,
    #a8a8a8 50%,
    #c0c0c0 80%,
    #e8e8e8 100%
  );
  color: #2c2c2c;
  border-color: #888;
}

/* Gold - Advanced */
.app-card__badge--advanced {
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffed4e 20%,
    #d4af37 50%,
    #ffed4e 80%,
    #ffd700 100%
  );
  color: #2c2c2c;
  border-color: #b8860b;
}

/* Countdown timer - snapped to bottom-right corner */
.app-card__countdown {
  position: absolute !important; /* ✅ ABSOLUTE positioning */
  bottom: 0 !important; /* ✅ BOTTOM corner */
  right: 0 !important; /* ✅ RIGHT corner */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px; /* ✅ MUCH LARGER */
  font-weight: 700; /* ✅ BOLD */
  color: #ff3b30; /* ✅ RED */
  letter-spacing: 0.3px;
  margin: 0 !important; /* ✅ No margin for precise positioning */
}

.app-card__countdown-icon {
  font-size: 20px; /* ✅ LARGER icon */
  line-height: 1;
}

.app-card__countdown-text {
  font-size: 18px; /* ✅ MUCH LARGER */
  font-weight: 700; /* ✅ BOLD */
  color: #ff3b30; /* ✅ RED */
}

/* Expiry chip - red pill hanging from top-right like iOS notification */
.app-card__expiry-chip {
  position: absolute;
  top: -12px; /* ✅ HIGHER (was -8px) */
  right: 8px; /* ✅ MORE RIGHT (was 12px) */
  padding: 8px 16px; /* ✅ Pill shape */
  background: linear-gradient(135deg, #ff3b30 0%, #ff1f13 100%); /* ✅ Red gradient */
  color: #fff;
  border-radius: 20px; /* ✅ Full pill shape */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 
    0 4px 12px rgba(255, 59, 48, 0.5),
    0 2px 4px rgba(255, 59, 48, 0.3); /* ✅ Elevated shadow */
  z-index: 30; /* ✅ Above everything */
  border: 2px solid #fff; /* ✅ White border like iOS */
  white-space: nowrap;
}

/* Coming Soon Grid - Normal size */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 64px; /* ✅ DOUBLED: 64px (was 32px) */
  padding: 0 32px; /* ✅ INCREASED side padding (was 16px) */
  width: 100%; /* ✅ Full width */
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: visible; /* ✅ VISIBLE - allow all content to display */
  min-height: min-content; /* ✅ Grow to fit content */
  background: transparent; /* ✅ TRANSPARENT - no background */
  border: none; /* ✅ NO BORDER */
}

/* ✅ MOBILE: 2 columns, UNLIMITED rows - scrollable */
@media (max-width: 768px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr); /* ✅ 2 columns */
    grid-template-rows: auto; /* ✅ UNLIMITED rows - auto height */
    gap: 16px;
    overflow: visible; /* ✅ VISIBLE - allow scrolling */
    padding: 0;
    margin: 0;
  }
  
  /* ✅ SHOW ALL CARDS - no hiding */
  .app-grid > .app-card {
    display: block; /* ✅ Show all cards */
  }
  
  .app-grid--large {
    grid-template-columns: repeat(1, 1fr); /* ✅ 1 column on mobile */
    grid-template-rows: auto; /* ✅ UNLIMITED rows - auto height */
    gap: 16px;
    overflow: visible; /* ✅ VISIBLE - allow scrolling */
    padding: 0;
    margin: 0;
  }
  
  /* Mobile: Section title alignment */
  .app-section__title {
    margin-left: 16px; /* ✅ Align with mobile grid padding */
    font-size: 24px; /* ✅ Slightly smaller on mobile */
  }
  
  /* ✅ MOBILE: Vertical stacking - hero on top, content below */
  .app-grid--large .app-card {
    margin: 16px 0 0 0; /* ✅ Keep top margin on mobile */
    grid-template-columns: 1fr !important; /* ✅ Single column */
    grid-template-rows: auto 1fr !important; /* ✅ Hero top, content below */
    grid-template-areas: 
      "hero"
      "content" !important; /* ✅ Explicit vertical areas */
    min-height: auto; /* ✅ Auto height on mobile */
    padding: 16px; /* ✅ Smaller padding */
  }
  
  .app-grid--large .app-card__image {
    grid-area: hero !important; /* ✅ Hero on top */
    max-width: 100%; /* ✅ Full width on mobile */
    width: 100%;
    margin: 0 0 16px 0; /* ✅ Space below hero */
  }
  
  .app-grid--large .app-card__content {
    grid-area: content !important; /* ✅ Content below hero */
    min-height: auto; /* ✅ Auto height with content */
    gap: 12px; /* ✅ Tighter spacing on mobile */
  }
  
  /* Mobile: Smaller title but still prominent */
  .app-grid--large .app-card__title {
    font-size: 26px; /* ✅ Scaled down from 32px */
  }
  
  /* Mobile: Smaller metallic badges */
  .app-grid--large .app-card__badge {
    font-size: 12px; /* ✅ Scaled down from 14px */
    padding: 8px 16px; /* ✅ Smaller padding */
  }
  
  /* Mobile: Smaller countdown text but still red and bold */
  .app-grid--large .app-card__countdown {
    font-size: 16px; /* ✅ Scaled down from 18px */
  }
  
  .app-grid--large .app-card__countdown-text {
    font-size: 16px; /* ✅ Scaled down from 18px */
  }
  
  /* Mobile: Expiry chip stays TOP-RIGHT on card */
  .app-grid--large .app-card__expiry-chip {
    font-size: 12px;
    padding: 7px 14px;
    top: -10px; /* ✅ Still hanging from top */
    right: 8px; /* ✅ Still top-right position */
  }
  
  /* Mobile: Summary text smaller */
  .app-grid--large .app-card__summary {
    font-size: 13px;
    max-height: 55px; /* ✅ Slightly smaller on mobile */
  }
  
  /* Mobile: See more button - larger to match description */
  .app-grid--large .app-card__see-more {
    font-size: 14px; /* ✅ BIGGER (was 12px) */
    padding: 6px 12px;
  }
  
  /* Mobile: Countdown positioning */
  .app-grid--large .app-card__countdown {
    position: relative !important; /* ✅ Reset to relative on mobile */
    bottom: auto !important;
    right: auto !important;
  }
  
  /* Mobile: Modal adjustments - LARGER and frosted glass */
  .app-description-modal__content {
    padding: 32px; /* ✅ BIGGER padding (was 24px) */
    max-height: 90vh;
    border-radius: 20px; /* ✅ Larger radius */
    max-width: 95%; /* ✅ Use most of screen */
    /* ✅ Ensure frosted glass on mobile */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
  }
  
  .app-description-modal__title {
    font-size: 24px; /* ✅ BIGGER (was 20px) */
  }
  
  .app-description-modal__body {
    font-size: 16px; /* ✅ BIGGER for readability (was 14px) */
    line-height: 1.6;
  }
  
  .app-description-modal__close {
    width: 36px; /* ✅ BIGGER (was 28px) */
    height: 36px;
    font-size: 20px; /* ✅ BIGGER (was 18px) */
  }
  
  /* ✅ SHOW ALL LARGE CARDS - no hiding */
  .app-grid--large > .app-card {
    display: block; /* ✅ Show all cards */
  }
}

/* ✅ TABLET: 3 columns, UNLIMITED rows - scrollable */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-grid {
    grid-template-columns: repeat(3, 1fr); /* ✅ 3 columns */
    grid-template-rows: auto; /* ✅ UNLIMITED rows - auto height */
    gap: 48px; /* ✅ INCREASED: 48px (was 16px) */
    overflow: visible; /* ✅ VISIBLE - allow scrolling */
    padding: 0 32px;
    margin: 0;
  }
  
  /* ✅ SHOW ALL CARDS - no hiding */
  .app-grid > .app-card {
    display: block;
  }
  
  .app-grid--large {
    grid-template-columns: repeat(2, 1fr); /* ✅ 2 fixed columns on tablet */
    grid-template-rows: auto;
    gap: 48px;
    overflow: visible;
    padding: 0 32px;
  }
  
  .app-grid--large .app-card {
    margin: 16px 0 0 0; /* ✅ Keep top margin on tablet */
    min-height: 280px; /* ✅ Accommodate larger hero with spacing */
    grid-template-columns: 364px 1fr !important; /* ✅ Fixed hero width for tablet */
    grid-template-areas: "hero content" !important; /* ✅ Maintain horizontal layout */
  }
  
  .app-grid--large .app-card__image {
    max-width: 364px; /* ✅ 30% larger (280px * 1.3 = 364px) */
    grid-area: hero !important;
  }
  
  .app-grid--large .app-card__content {
    grid-area: content !important;
  }
  
  /* ✅ SHOW ALL LARGE CARDS - no hiding */
  .app-grid--large > .app-card {
    display: block;
  }
}

/* ✅ DESKTOP: 4 columns, UNLIMITED rows - scrollable */
@media (min-width: 1025px) {
  .app-grid {
    grid-template-columns: repeat(4, 1fr); /* ✅ 4 columns */
    grid-template-rows: auto; /* ✅ UNLIMITED rows - auto height */
    gap: 64px; /* ✅ DOUBLED: 64px (was 16px) */
    overflow: visible; /* ✅ VISIBLE - allow scrolling */
    padding: 0 32px;
    margin: 0;
  }
  
  /* ✅ SHOW ALL CARDS - no hiding */
  .app-grid > .app-card {
    display: block;
  }
  
  .app-grid--large {
    grid-template-columns: repeat(2, 1fr); /* ✅ 2 fixed columns = 4 Coming Soon columns */
    grid-template-rows: auto;
    gap: 64px; /* ✅ Match Coming Soon gap */
    overflow: visible;
    padding: 0 32px;
  }
  
  .app-grid--large .app-card {
    margin: 16px 0 0 0; /* ✅ Keep top margin on desktop */
    min-height: 300px; /* ✅ Full height for larger hero with spacing */
    grid-template-columns: 390px 1fr !important; /* ✅ Fixed hero width for desktop */
    grid-template-areas: "hero content" !important; /* ✅ Explicit horizontal layout */
  }
  
  .app-grid--large .app-card__image {
    max-width: 390px; /* ✅ 30% larger (300px * 1.3 = 390px) */
    grid-area: hero !important;
  }
  
  .app-grid--large .app-card__content {
    grid-area: content !important;
  }
  
  /* ✅ SHOW ALL LARGE CARDS - no hiding */
  .app-grid--large > .app-card {
    display: block;
  }
}

.app-card {
  background: transparent; /* ✅ TRANSPARENT - no background at all */
  border: none;
  outline: none; /* ✅ NO OUTLINE */
  box-shadow: none; /* ✅ NO BOX SHADOW on container */
  border-radius: 0; /* ✅ No border radius on card container */
  overflow: visible; /* ✅ Visible to allow date chips below */
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin: 0;
  padding: 0; /* ✅ NO PADDING at all */
  width: 100%;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.app-card:hover {
  transform: scale(1.02) translateZ(0);
  -webkit-transform: scale(1.02) translateZ(0);
  z-index: 20;
}

.app-card:hover .app-card__image {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4); /* ✅ Enhanced shadow on hover */
  background: rgba(255, 255, 255, 0.9); /* ✅ Brighter glass on hover */
}

.app-card__image {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  border-radius: 16px; /* ✅ LARGER ROUNDED CORNERS - matches preview cards */
  
  /* ✅ FROSTED GLASS EFFECT */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  transition: all 0.2s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* ✅ DEPTH SHADOW - matches preview */
}

/* ✅ BLURRED WALLPAPER BACKGROUND - matches course type */
.app-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.2) saturate(1.3); /* ✅ Same as preview cards */
  opacity: 0.4;
  transform: scale(1.1);
  border-radius: 16px;
}

/* Wallpaper sources based on current tab */
[data-tab="exclusives"] .app-card__image::before {
  background-image: var(--exclusives-wallpaper-desktop);
}

[data-tab="fundamentals"] .app-card__image::before {
  background-image: var(--fundamentals-wallpaper-desktop);
}

[data-tab="series"] .app-card__image::before {
  background-image: var(--series-wallpaper-desktop);
}

/* ✅ Series cards in main series list also get frosted glass */
.app-card--series img {
  border-radius: 16px;
  position: relative;
  z-index: 1;
  opacity: 0.95;
}

/* Mobile wallpaper variants */
@media (max-width: 768px) {
  [data-tab="exclusives"] .app-card__image::before {
    background-image: var(--exclusives-wallpaper-mobile, var(--exclusives-wallpaper-desktop));
  }
  
  [data-tab="fundamentals"] .app-card__image::before {
    background-image: var(--fundamentals-wallpaper-mobile, var(--fundamentals-wallpaper-desktop));
  }
  
  [data-tab="series"] .app-card__image::before {
    background-image: var(--series-wallpaper-mobile, var(--series-wallpaper-desktop));
  }
}

.app-card__image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 16px; /* ✅ Match container radius */
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1; /* ✅ Above wallpaper, below speaker */
  opacity: 0.95; /* ✅ Slightly transparent to show glass effect */
}

/* ✅ SPEAKER BUTTON - Bottom Right Corner */
.app-card__speaker {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 100; /* ✅ HIGH Z-INDEX - ensure visibility above image */
  
  /* Frosted glass button */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  
  /* Shadow for depth */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  
  /* Icon */
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: all 0.2s ease;
  pointer-events: auto; /* ✅ Ensure button is clickable */
}

.app-card__speaker:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.app-card__speaker:active,
.app-card__speaker.speaking {
  background: rgba(10, 132, 255, 0.3);
  border-color: rgba(10, 132, 255, 0.6);
  animation: pulse 1s infinite;
}

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

/* Responsive speaker button sizing */
@media (max-width: 768px) {
  .app-card__speaker {
    width: 36px;
    height: 36px;
    font-size: 16px;
    bottom: 6px;
    right: 6px;
  }
}

/* Greyed out cards (Coming Soon) - REMOVED DIM EFFECT */
.app-card--greyed {
  opacity: 1; /* ✅ FULL VISIBILITY - no dim */
  filter: grayscale(0%); /* ✅ NO GRAYSCALE - full color */
}

.app-card--greyed:hover {
  opacity: 1; /* ✅ FULL VISIBILITY - no dim */
  filter: grayscale(0%); /* ✅ NO GRAYSCALE - full color */
}

/* ✅ Large cards with rounded corners */
.app-card--large {
  border-radius: 16px; /* ✅ Larger rounded corners for large cards */
}

.app-card--large .app-card__image {
  border-radius: 16px; /* ✅ Larger rounded corners */
}

.app-card--large .app-card__image img {
  border-radius: 16px; /* ✅ Larger rounded corners */
}

/* Date Chips - HIDDEN */
.app-card__dates {
  display: none; /* ✅ HIDDEN - no dates shown */
}

.app-card__date-chip {
  display: inline-flex;
  align-items: center;
  padding: 0; /* ✅ NO PADDING - pure floating text */
  border-radius: 0; /* ✅ NO BORDER RADIUS */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* ✅ NO backdrop filter - fully transparent */
}

/* Expiry Date Chip - RED - TRANSPARENT */
.app-card__date-chip--expiry {
  background: transparent; /* ✅ TRANSPARENT - floating text */
  color: #ff3b30;
  border: none; /* ✅ NO BORDER */
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.6); /* ✅ Shadow for visibility */
}

.app-card__date-chip--expired {
  background: transparent; /* ✅ TRANSPARENT - floating text */
  color: #ff3b30;
  border: none; /* ✅ NO BORDER */
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.6); /* ✅ Shadow for visibility */
}

/* Release Date - Within Month - GREEN - TRANSPARENT */
.app-card__date-chip--soon {
  background: transparent; /* ✅ TRANSPARENT - floating text */
  color: #34c759;
  border: none; /* ✅ NO BORDER */
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.6); /* ✅ Shadow for visibility */
}

/* Release Date - Longer than Month - ORANGE - TRANSPARENT */
.app-card__date-chip--later {
  background: transparent; /* ✅ TRANSPARENT - floating text */
  color: #ff9500;
  border: none; /* ✅ NO BORDER */
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.6); /* ✅ Shadow for visibility */
}

.app-card.folder-card {
  cursor: pointer;
}

.app-card.folder-card:hover {
  transform: scale(1.02);
}

.back-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.back-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}

.app-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.app-card__meta { 
  display: none; /* Hide all text under heroes */
}

.app-empty { 
  opacity: .75; 
  padding: 20px;
  text-align: center;
}

/* News */
.news {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.news-head h2 { 
  margin: 0 0 8px; 
  font-size: 24px; 
}

.news-sub { 
  margin: 0 0 20px; 
  opacity: .75; 
  font-size: 15px;
}

.news-wrap { 
  display: grid; 
  gap: 16px; 
}

.news-card {
  background: #0f1522;
  border: 1px solid #2a3140;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: all 0.2s;
}

.news-card:hover {
  border-color: #3a4150;
}

.news-media { 
  position: relative; 
}

.news-media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.news-tag {
  position: absolute;
  top: 8px; 
  left: 8px;
  background: #0A84FF;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.news-meta { 
  padding: 16px; 
}

.news-title { 
  margin: 0 0 6px; 
  font-size: 16px; 
  font-weight: 600;
}

.news-blurb { 
  margin: 0 0 8px; 
  font-size: 14px; 
  opacity: .8; 
  line-height: 1.4;
}

.news-date { 
  font-size: 12px; 
  opacity: .6; 
}

/* Live / Profile */
.live-wrap,
.profile-wrap,
.more-wrap {
  background: #0f1522;
  border: 1px solid #2a3140;
  border-radius: 14px;
  padding: 24px;
  width: min(600px, 90vw);
}

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

.more-card {
  background: #101623;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.more-card:hover {
  background: #141b29;
  border-color: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

.more-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.more-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.more-card p {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.3;
}


.live-wrap h2,
.profile-wrap h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.live-wrap img {
  width: 100%;
  border-radius: 8px;
  margin: 16px 0;
}

.live-wrap p {
  margin: 8px 0;
  line-height: 1.6;
}

.live-wrap .tag {
  display: inline-block;
  background: rgba(10,132,255,.2);
  color: #0A84FF;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin: 8px 0;
}

.live-wrap .as-btn {
  margin-top: 16px;
  background: #0A84FF;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: not-allowed;
  opacity: 0.5;
}

.profile-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.profile-header .avatar {
  width: 72px; 
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a3140;
}

.profile-header .info h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.profile-header .lvl {
  opacity: 0.7;
  font-size: 14px;
}

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

.p-card {
  background: #101623;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 16px;
}

.p-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

.p-card p {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.4;
}

.sr-only {
  position: absolute;
  width: 1px; 
  height: 1px;
  padding: 0; 
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Course preview overlay */
.cs-overlay {
  z-index: 30000 !important; /* Above fixed dock (z-index: 20) */
}

/* Responsive */
@media (max-width: 768px) {
  .news-card { 
    grid-template-columns: 1fr; 
  }
  
  .news-media {
    aspect-ratio: 16 / 9;
  }
  
  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .app-courses {
    padding: 0; /* ✅ NO PADDING - full width */
  }
  
  .news {
    padding: 12px;
  }
  
  .profile-grid {
    grid-template-columns: 1fr;
  }
  
  /* Page summary responsive */
  .app-page-summary {
    margin: 0 16px 24px;
    padding: 18px 20px 56px 60px; /* ✅ INCREASED left padding for speaker */
    max-width: 100%;
  }
  
  .app-page-summary__title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .app-page-summary p {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /* ✅ MOBILE: Keep section padding tighter */
  .app-section {
    padding: 0 16px 40px 16px; /* ✅ Tighter on mobile */
  }
  
  .app-section__title {
    padding-top: 24px; /* ✅ Less spacing on mobile */
    margin-bottom: 16px;
  }
  
  /* ✅ MOBILE: Keep original padding-top (50vh) */
  .app-courses[data-tab="exclusives"],
  .app-courses[data-tab="fundamentals"],
  .app-courses[data-tab="series"] {
    padding-top: 50vh; /* ✅ Keep original on mobile */
  }
  
  /* ✅ MOBILE FIX: Force all content above wallpaper on mobile */
  .app-courses,
  .app-section,
  .app-grid,
  .app-grid--large,
  .app-card,
  .app-card__image,
  .app-info-blurb,
  .app-page-summary {
    will-change: transform; /* Hint to browser for GPU acceleration */
    -webkit-backface-visibility: hidden; /* Prevent flickering on iOS */
    backface-visibility: hidden;
  }
  
  /* ✅ MOBILE FIX: Ensure wallpaper stays behind on mobile */
  .app-shell::before {
    will-change: auto; /* Don't GPU accelerate wallpaper */
    z-index: 1 !important; /* Force wallpaper behind */
    top: 0 !important; /* ✅ SNAP to top on mobile */
  }
  
  /* ✅ MOBILE FIX: Ensure content scrolls properly on mobile */
  .app-body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    padding-bottom: 0 !important; /* ✅ NO PADDING - courses section handles dock spacing */
    overscroll-behavior-y: none; /* ✅ DISABLE pull-to-refresh */
  }
  
  /* ✅ MOBILE FIX: Ensure dock stays fixed on mobile */
  .app-dock {
    position: fixed !important; /* Force fixed on mobile */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    /* Safe area for iPhone X and newer with notch */
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ================================================================
   LIGHT MODE OVERRIDES - App Preview
   ================================================================ */

/* Main App Containers */
:root[data-theme="light"] .app-preview {
  background: transparent !important; /* ✅ TRANSPARENT - show wallpaper */
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-shell {
  background: transparent !important; /* ✅ TRANSPARENT - show wallpaper */
  color: #1a1a1c !important;
}

/* App Header */
:root[data-theme="light"] .app-top {
  background: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a1a1c !important;
}

/* App Body */
:root[data-theme="light"] .app-body {
  background: transparent !important; /* ✅ TRANSPARENT - show wallpaper */
  color: #1a1a1c !important;
}

/* More tab needs solid background */
:root[data-theme="light"] .app-shell:has([data-tab="more"]) .app-body {
  background: #f0f2f5 !important; /* Solid background for More tab */
}

/* App Dock - Light Mode with Frosted Glass */
:root[data-theme="light"] .app-dock {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .app-dock button {
  color: rgba(0, 0, 0, 0.7) !important;
}

:root[data-theme="light"] .app-dock button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
}

:root[data-theme="light"] .app-dock button.is-active {
  background: rgba(0, 122, 255, 0.15) !important;
  color: #007AFF !important;
}

/* Center Content */
:root[data-theme="light"] .app-center {
  color: #1a1a1c !important;
}

/* Course Cards */
:root[data-theme="light"] .app-card {
  background: transparent !important; /* ✅ TRANSPARENT - no white background */
  border-color: transparent !important; /* ✅ NO BORDER */
  box-shadow: none !important; /* ✅ NO SHADOW on container */
}

/* Available Now container cards keep frosted glass in light mode */
:root[data-theme="light"] .app-grid--large .app-card {
  background: rgba(255, 255, 255, 0.92) !important; /* ✅ Frosted glass container */
  border: 1px solid rgba(0, 0, 0, 0.1) !important; /* ✅ Light border */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; /* ✅ Lighter shadow */
}

:root[data-theme="light"] .app-card:hover {
  border-color: transparent !important; /* ✅ NO BORDER on hover */
  box-shadow: none !important; /* ✅ Shadow only on image, not container */
}

/* Available Now container hover in light mode */
:root[data-theme="light"] .app-grid--large .app-card:hover {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.2) !important; /* ✅ Slightly stronger on hover */
}

:root[data-theme="light"] .app-card__meta {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-card__meta strong {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-card__meta p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Available Now content in light mode */
:root[data-theme="light"] .app-card__title {
  color: #1a1a1c !important;
}

/* Metallic badges maintain their appearance in light mode */
:root[data-theme="light"] .app-card__badge--beginner {
  /* Bronze stays the same */
}

:root[data-theme="light"] .app-card__badge--intermediate {
  /* Silver stays the same */
}

:root[data-theme="light"] .app-card__badge--advanced {
  /* Gold stays the same */
}

:root[data-theme="light"] .app-card__countdown {
  color: #ff3b30 !important; /* ✅ Red in light mode */
}

:root[data-theme="light"] .app-card__countdown-text {
  color: #ff3b30 !important; /* ✅ Red in light mode */
}

:root[data-theme="light"] .app-card__expiry-chip {
  background: linear-gradient(135deg, #ff3b30 0%, #ff1f13 100%) !important;
  border-color: #fff !important;
}

:root[data-theme="light"] .app-card__summary {
  color: rgba(0, 0, 0, 0.75) !important;
}

:root[data-theme="light"] .app-card__see-more {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #007aff !important;
}

:root[data-theme="light"] .app-card__see-more:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .app-description-modal__content {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .app-description-modal__title {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-description-modal__body {
  color: rgba(0, 0, 0, 0.85) !important;
}

:root[data-theme="light"] .app-description-modal__close {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-description-modal__close:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Back Button */
:root[data-theme="light"] .back-btn {
  background: #f5f5f7 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #1a1a1c !important;
}

:root[data-theme="light"] .back-btn:hover {
  background: #e8e8ed !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Empty States */
:root[data-theme="light"] .app-empty {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* News Section */
:root[data-theme="light"] .news {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .news-head h2 {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .news-sub {
  color: rgba(0, 0, 0, 0.6) !important;
}

:root[data-theme="light"] .news-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .news-card:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .news-meta {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .news-title {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .news-blurb {
  color: rgba(0, 0, 0, 0.7) !important;
}

:root[data-theme="light"] .news-date {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Live / Profile / More Wraps */
:root[data-theme="light"] .live-wrap,
:root[data-theme="light"] .profile-wrap,
:root[data-theme="light"] .more-wrap {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a1a1c !important;
}

:root[data-theme="light"] .live-wrap h2,
:root[data-theme="light"] .profile-wrap h2 {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .live-wrap p {
  color: rgba(0, 0, 0, 0.85) !important;
}

:root[data-theme="light"] .live-wrap .tag {
  background: rgba(0, 122, 255, 0.15) !important;
  color: #007AFF !important;
}

/* More Grid Cards */
:root[data-theme="light"] .more-card {
  background: #f5f5f7 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a1a1c !important;
}

:root[data-theme="light"] .more-card:hover {
  background: #e8e8ed !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .more-card h3 {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .more-card p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Profile Header */
:root[data-theme="light"] .profile-header .avatar {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .profile-header .info h2 {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .profile-header .lvl {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Profile Cards */
:root[data-theme="light"] .p-card {
  background: #f5f5f7 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .p-card h3 {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .p-card p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Inline Styles Override (for dynamically added content) */
:root[data-theme="light"] .app-preview [style*="color: #fff"],
:root[data-theme="light"] .app-preview [style*="color: white"],
:root[data-theme="light"] .app-preview [style*="color: #eef3ff"],
:root[data-theme="light"] .app-preview [style*="color:#fff"],
:root[data-theme="light"] .app-preview [style*="color:white"] {
  color: #1a1a1c !important;
}

/* Expiry badges (red badges should stay red with white text) */
:root[data-theme="light"] .app-card [style*="background: #ff3b30"] {
  background: #FF3B30 !important;
  color: #ffffff !important;
}

/* All headings */
:root[data-theme="light"] .app-preview h1,
:root[data-theme="light"] .app-preview h2,
:root[data-theme="light"] .app-preview h3,
:root[data-theme="light"] .app-preview h4,
:root[data-theme="light"] .app-preview h5,
:root[data-theme="light"] .app-preview h6 {
  color: #1a1a1c !important;
}

/* Centered series title */
:root[data-theme="light"] .app-courses[data-tab="series"] h2 {
  color: #1a1a1c !important;
}

/* Exclusives Wallpaper - Light Mode */
:root[data-theme="light"] .app-body:has([data-tab="exclusives"])::before {
  background-color: #e5e5e7 !important; /* Light grey fallback */
}

/* Fundamentals Wallpaper - Light Mode */
:root[data-theme="light"] .app-body:has([data-tab="fundamentals"])::before {
  background-color: #d4e5d4 !important; /* Light green fallback */
}

/* Series Wallpaper - Light Mode */
:root[data-theme="light"] .app-body:has([data-tab="series"])::before {
  background-color: #e5d4e5 !important; /* Light purple fallback */
}

/* Content background - Light Mode */
:root[data-theme="light"] .app-courses {
  background: transparent !important; /* ✅ NO GRADIENT - pure wallpaper */
}

/* Gradient backgrounds for light mode - REMOVED */
:root[data-theme="light"] .app-courses[data-tab="exclusives"] {
  background: transparent !important; /* ✅ NO GRADIENT - floating on wallpaper */
}

:root[data-theme="light"] .app-courses[data-tab="fundamentals"] {
  background: transparent !important; /* ✅ NO GRADIENT - floating on wallpaper */
}

:root[data-theme="light"] .app-courses[data-tab="series"] {
  background: transparent !important; /* ✅ NO GRADIENT - floating on wallpaper */
}

:root[data-theme="light"] .app-courses[data-tab="more"] {
  background: #f0f2f5 !important;
}

/* Page Summary - Light Mode */
:root[data-theme="light"] .app-page-summary {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .app-page-summary__title {
  color: #1a1a1c !important;
}

:root[data-theme="light"] .app-page-summary p {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Info Blurb - Light Mode */
:root[data-theme="light"] .app-info-blurb {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .app-info-blurb p {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Section titles - Light Mode */
:root[data-theme="light"] .app-section__title {
  color: #1a1a1c !important; /* ✅ Dark text on light card */
  text-shadow: none; /* ✅ No shadow needed on card */
  background: rgba(255, 255, 255, 0.92) !important; /* ✅ Slightly more opaque in light mode */
}

/* Greyed cards in light mode - REMOVED DIM EFFECT */
:root[data-theme="light"] .app-card--greyed {
  opacity: 1; /* ✅ FULL VISIBILITY - no dim */
  filter: grayscale(0%); /* ✅ NO GRAYSCALE - full color */
}

:root[data-theme="light"] .app-card--greyed:hover {
  opacity: 1; /* ✅ FULL VISIBILITY - no dim */
  filter: grayscale(0%); /* ✅ NO GRAYSCALE - full color */
}

/* All paragraphs and spans */
:root[data-theme="light"] .app-preview p,
:root[data-theme="light"] .app-preview span,
:root[data-theme="light"] .app-preview div {
  color: inherit;
}

/* Strong tags */
:root[data-theme="light"] .app-preview strong {
  color: #1a1a1c !important;
}  

/* ================================================================
   MORE → LANGUAGE SELECTOR
   ================================================================ */

.more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.more-languages {
  display: flex;
  gap: 8px;
}

.more-lang-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.more-lang-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.more-lang-btn.is-active {
  background: rgba(10, 132, 255, 0.25);
  border-color: rgba(10, 132, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.4);
}

/* Light mode */
:root[data-theme="light"] .more-lang-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .more-lang-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .more-lang-btn.is-active {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.4);
}