/* Refined language dropdown alignment */
#rightMenuDrawer.header-actions #inMenuLangWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 0) scale(0.96);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 12px 0;
  min-width: 108px;
  background: transparent !important;
  border: none !important;
  border-radius: 20px;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s ease;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 220;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel::before {
  display: none !important;
  content: none !important;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 4px) scale(1);
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel .dropdown-arrow {
  display: none;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel .flag-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

#inMenuLangWrapper .premium-flag-btn,
#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag-btn {
  width: 54px;
  height: 38px;
  border-radius: 14px;
  border: none !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  cursor: pointer;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag-btn:hover,
#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag-btn:focus {
  transform: translateY(-3px) scale(1.02);
  border-color: transparent;
  box-shadow: none !important;
  background: transparent !important;
  outline: 2px solid rgba(28, 174, 130, 0.45);
  outline-offset: 2px;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag-btn:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: none !important;
}

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

#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag-btn.coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
}

#inMenuLangWrapper .premium-flag,
#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-flag {
  width: 44px !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  filter: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(18,126,99,0.14) !important;
  padding: 0 !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 768px) {
  #rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel {
    min-width: 72px;
    padding: 12px;
    gap: 6px;
  }

  #rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel::before {
    top: -6px;
  }
}
.premium-trigger {
  background: linear-gradient(140deg, rgba(20,118,94,0.18), rgba(255,255,255,0.82));
  border-radius: 50%;
  border: 2px solid rgba(41,181,130,0.5);
  box-shadow: 0 12px 26px rgba(15,82,62,0.18);
  padding: 2px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.premium-trigger:hover, .premium-trigger:focus {
  background: linear-gradient(140deg, rgba(20,118,94,0.24), rgba(255,255,255,0.9));
  border-color: rgba(18,126,99,0.26);
  box-shadow: 0 16px 32px rgba(15,82,62,0.22);
}

/* Firefox fix: ensure flag trigger stays perfectly circular with crisp border */
#inMenuLangWrapper .lang-flag-trigger {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  padding: 2px !important;
  border: 2px solid rgba(41,181,130,0.5) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(224,246,239,0.94)) !important;
}

#inMenuLangWrapper .lang-flag-trigger .flag-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 4px 12px rgba(14,82,62,0.15) !important;
  background: #fff !important;
}
.premium-trigger .flag-image {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(14,82,62,0.16) !important;
  object-fit: cover !important;
  background: #fff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* On hover, return the flag to its natural vivid color */
.premium-trigger:hover .flag-image,
.premium-trigger:focus .flag-image {
  opacity: 1;
}
#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel .premium-flag-btn:focus {
  box-shadow: none;
  outline: 2px solid rgba(28, 174, 130, 0.45);
  outline-offset: 2px;
}
/* Desktop language selector parity with legacy menu */
@media (min-width: 769px) {
  /* Gentle interactions for desktop drawer */
  .header-actions .icon-btn:hover,
  .header-actions .icon-btn:active,
  #inMenuLangWrapper .lang-flag-trigger:active {
    /* no press zoom/move */
    transform: none !important;
    box-shadow:
      0 4px 14px -4px rgba(28, 174, 130, 0.15),
      0 2px 6px -2px rgba(0, 0, 0, 0.06),
      inset 0 1px 3px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }

  #rightMenuDrawer.header-actions,
  #rightMenuDrawer.header-actions.collapsed,
  #rightMenuDrawer.header-actions.swipe-hidden,
  #rightMenuDrawer.header-actions.hidden-left {
    overflow: visible !important;
    padding-bottom: 24px !important;
  }

  #rightMenuDrawer.header-actions #inMenuLangWrapper,
  #rightMenuDrawer.header-actions.collapsed #inMenuLangWrapper,
  #rightMenuDrawer.header-actions.swipe-hidden #inMenuLangWrapper,
  #rightMenuDrawer.header-actions.hidden-left #inMenuLangWrapper {
    position: absolute !important;
    bottom: -16px !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
  }

/* Remove any visible "container" styling behind the language flags (backgrounds,
   borders, shadows and pseudo-elements). Keep the flag buttons themselves intact
   so they remain visible and interactive. This targets both the legacy
   `lang-flag-panel` and the `.premium-panel` used in the right drawer. */
#inMenuLangWrapper .lang-flag-panel:not(.premium-panel),
#inMenuLangWrapper .lang-flag-panel:not(.premium-panel) *:not(.premium-flag-btn):not(.premium-flag) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Hide any decorative pseudo-elements for language containers (triangles, squares, etc.) */
#inMenuLangWrapper .lang-flag-panel:not(.premium-panel)::before,
#inMenuLangWrapper .lang-flag-panel:not(.premium-panel)::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ensure the actual flag buttons remain clickable and visually intact. If a
   flag button has been made non-interactive upstream, force it to accept
   pointer events so users can still select languages. */
#inMenuLangWrapper .premium-flag-btn,
#rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel .premium-flag-btn {
  pointer-events: auto !important;
}

#rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(224,246,239,0.94)) !important;
    border: 1px solid rgba(18, 126, 99, 0.18) !important;
    box-shadow:
      0 8px 18px -4px rgba(15, 82, 62, 0.14),
      0 3px 8px -2px rgba(12, 64, 52, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger .flag-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(14,82,62,0.15) !important;
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.2s ease;
  }
  
  #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger:hover .flag-image {
    transform: scale(1.06);
  }

  #inMenuLangWrapper .lang-flag-trigger:active .flag-image {
    box-shadow: 0 3px 10px rgba(12, 64, 52, 0.2), 0 0 0 1px rgba(255,255,255,0.45) !important;
    border: 1px solid rgba(28, 174, 130, 0.2) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    flex-shrink: 0 !important;
  }

  #inMenuLangWrapper .lang-option .flag-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block !important;
  }

  #inMenuLangWrapper .lang-option .name {
    flex: 1 !important;
    color: #1f4f44 !important;
  }
}
/* Responsive defaults */
:root {
  color-scheme: light dark;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background-color: var(--zen-bg, #fafdfb);
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
.main-grid {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2.5rem);
}
.flex-stack {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2.5rem);
}
@media (max-width: 900px) {
  .flex-stack {
    flex-direction: column;
  }
  .drawer, .sidebar {
    width: 100%;
  }
}
@media (max-width: 600px) {
  body {
    font-size: var(--font-size-body);
  }
  header, .header {
    padding: 0.75rem clamp(1rem, 4vw, 1.5rem);
  }
  .card, .panel {
    padding: clamp(1rem, 4vw, 1.5rem);
    border-radius: clamp(14px, 3vw, 20px);
  }
}

/* Remove overflow hidden to fix scrolling for html */
    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
       }
    
       iframe {
         max-width: 100%;
       }

:root{
      /* Zen-inspired color palette */
      --green:#2ec08d; --green-600:#29b582; --green-neon:#37e39f; --neon-soft:rgba(55,227,159,.25);
      --green-light:#e8f8f3; --green-lighter:#f0fdf9; --green-dark:#1a8f6b;
      --text:#5f6f6a; --strong:#2e665d; --muted:#9bb0a6;
      --line:#e6efe9; --card:#ffffff; --panel:#f7fbf9; --panel-2:#f2faf6;
      --zen-bg:#fafdfb; --zen-card:#ffffff; --zen-border:#e8f4ed;
      
      /* Enhanced shadows with zen aesthetic */
      --shadow:0 20px 48px rgba(15,35,28,.08), 0 2px 8px rgba(15,35,28,.04);
      --shadow-soft:0 10px 26px rgba(15,35,28,.06);
      --shadow-neon:0 0 20px rgba(55,227,159,.15), 0 0 40px rgba(55,227,159,.08);
      --shadow-button:0 4px 12px rgba(46,102,93,.08), 0 2px 4px rgba(46,102,93,.04);
      
      /* Typography scale */
      --font-family-base:'Raleway',sans-serif;
      --font-family-heading:'Sora','Raleway',sans-serif;
      --font-size-body:clamp(12px,0.25vw + 11.2px,14px);
      --font-size-small:clamp(11px,0.2vw + 10.6px,12.8px);
      --font-size-label:clamp(11.5px,0.22vw + 11px,13px);
      --font-size-section:clamp(17px,0.7vw + 14px,22px);
      --font-size-card-title:clamp(13.2px,0.35vw + 12px,15.5px);
      --line-height-body:1.65;
      --line-height-snug:1.35;
      --weight-regular:500;
      --weight-medium:600;
      
      --course-content-max-width: 560px;
      --tab-content-max-width: 560px;

      --popup-offset: calc(20px + env(safe-area-inset-top));
    }
    html, body { min-height:100%; }
    body { 
      font-family:var(--font-family-base); 
      background:#ffffff; 
      margin:0; 
      padding:0; 
      font-size:var(--font-size-body); 
      color:var(--text); 
      line-height:var(--line-height-body);
      font-weight:var(--weight-regular);
      -webkit-font-smoothing:antialiased;
    }

.edition-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 14px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(31, 79, 68, 0.92);
  color: #f6fffb;
  box-shadow: 0 10px 26px rgba(9,34,24,0.16);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  pointer-events: none;
}

.edition-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 520px) {
  .edition-toast {
    font-size: 10px;
    padding: 9px 12px;
    bottom: 14px;
    max-width: calc(100% - 44px);
  }
}

@media (max-width: 380px) {
  .edition-toast {
    font-size: 9.6px;
    padding: 8px 11px;
    letter-spacing: 0.02em;
  }
}
    
    /* 📱 Minimal top padding for mobile hamburger menu */
    @media (max-width: 768px) {
      body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
    
    @media (max-width: 480px) {
      body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
    
    @media (max-width: 375px) {
      body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-content {
        padding: 4px 10px !important;
      }
      
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      .zen-expander .zen-chevron {
        width: 6px !important;
        height: 6px !important;
        border-right: 1.3px solid rgba(28,174,130,0.7) !important;
        border-bottom: 1.3px solid rgba(28,174,130,0.7) !important;
      }
      
      .zen-expander .zen-chevron-container {
        margin-top: 5px !important;
      }
    }
    
    /* Remove mobile selection blue highlight */
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    
    /* Allow text selection where needed */
    input, textarea, .comment-text {
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    
    /* Ensure buttons are clickable */
    button, .button, .tab-btn, .icon-btn, .course-select {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      pointer-events: auto !important;
    }
    
    /* Ensure all interactive elements are clickable */
    [onclick], [data-tab], [data-theme], [data-format] {
      cursor: pointer;
      pointer-events: auto !important;
    }
    
    /* Force all buttons to be clickable */
    button, .button, .tab-btn, .icon-btn, .course-select, input[type="button"], input[type="submit"] {
      pointer-events: auto !important;
      cursor: pointer !important;
      user-select: none;
      position: relative;
      z-index: 1;
    }
    
    /* Ensure modal doesn't block interactions when hidden */
    .modal[style*="display: none"] {
      pointer-events: none !important;
      z-index: -1 !important;
      visibility: hidden !important;
    }
    
    /* Progress animations */
    @keyframes shimmer {
      0% { left: -100%; }
      100% { left: 100%; }
    }
    
    @keyframes pulse-ring {
      0% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
      }
      50% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
      }
      100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
      }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes gradient-shift {
      0% { 
        background-position: 0% 50%;
      }
      50% { 
        background-position: 100% 50%;
      }
      100% { 
        background-position: 0% 50%;
      }
    }
    
    @keyframes comingSoonPulse {
      0%, 100% { 
        opacity: 1;
        transform: scale(1);
      }
      50% { 
        opacity: 0.6;
        transform: scale(1.2);
      }
    }
    
    @keyframes smooth-shimmer {
      0% { 
        left: -120%;
      }
      100% { 
        left: 120%;
      }
    }
    
    @keyframes tooltip-fade-in {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }
    
    /* Zen Meditative Expander Styles */
    
    /* Breathing Animation for Meditation */
    @keyframes zen-breathe {
      0%, 100% { 
        transform: translate(-50%,-50%) scale(1);
        opacity: 0;
      }
      50% { 
        transform: translate(-50%,-50%) scale(1.8);
        opacity: 0.4;
      }
    }
    
    @keyframes dot-pulse {
      0%, 100% { 
        transform: translate(-50%,-50%) scale(1);
        opacity: 0;
      }
      50% { 
        transform: translate(-50%,-50%) scale(2.5);
        opacity: 0.6;
      }
    }
    
    /* Hover Effects - Active and Clickable */
    .zen-expander:hover .zen-content {
      background: rgba(28,174,130,0.12);
      border-color: rgba(28,174,130,0.25);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 6px 24px rgba(28,174,130,0.15);
    }
    
    .zen-expander:hover .zen-text {
      color: rgba(28,174,130,0.95);
      letter-spacing: 1.4px;
      transform: scale(1.02);
    }
    
    .zen-expander:hover .meditation-dot {
      background: rgba(28,174,130,0.7);
      box-shadow: 0 0 12px rgba(28,174,130,0.3);
    }
    
    .zen-expander:hover .dot-ripple {
      animation: dot-pulse 2s ease-in-out infinite;
    }
    
    .zen-expander:hover .zen-chevron-container {
      opacity: 1;
      transform: translateY(2px);
    }
    
    .zen-expander:hover .zen-chevron {
      border-color: rgba(28,174,130,0.8);
    }

    /* Subtle glass reflection to suggest clickability (no size/text changes) */
    .zen-content {
      overflow: hidden; /* contain the shine */
      position: relative; /* ensure pseudo-elements are positioned correctly */
      z-index: 0; /* create stacking context */
      will-change: transform; /* optimize animations */
      isolation: isolate; /* prevent layout shifts */
    }
    /* Static soft gloss on the top half */
    .zen-content::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%; /* taller gloss */
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255,255,255,0.50), rgba(255,255,255,0.14));
      opacity: 0.20; /* reduce to let streak stand out */
      transition: opacity 0.25s ease;
      z-index: 1; /* below moving streak */
    }
    .zen-expander:hover .zen-content::after,
    .zen-expander:focus-within .zen-content::after {
      opacity: 0.28;
    }
    /* Diagonal shimmer pass on hover */
    .zen-content::before {
      content: '';
      position: absolute;
      top: -35%;
      left: -160%;
      width: 90%; /* very wide reflection streak */
      height: 240%;
      transform: skewX(-14deg) translateZ(0);
      pointer-events: none;
      background: linear-gradient(120deg,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,1.00) 50%,
        rgba(255,255,255,0.00) 100%
      );
      opacity: 0.80; /* clearly visible at rest */
      filter: blur(0.8px);
  animation: smooth-shimmer 5.5s linear infinite; /* slower continuous pass */
      will-change: left, opacity, transform;
      z-index: 2; /* above top gloss */
      mix-blend-mode: screen; /* enhance visibility on both light/dark accents */
      box-shadow: 0 0 18px rgba(255,255,255,0.35), 0 0 30px rgba(255,255,255,0.22);
    }
    .zen-expander:hover .zen-content::before {
      animation: smooth-shimmer 3s linear infinite; /* slower on hover */
      opacity: 0.92; /* strong on hover */
    }
    .zen-expander:focus-within .zen-content::before {
      animation: smooth-shimmer 3s linear infinite;
      opacity: 0.92;
    }
    /* Ensure text remains above the reflections */
    .zen-content .zen-text {
      position: relative;
      z-index: 3; /* keep text above reflections */
    }
    
    /* Active State - Mindful Response */
    .zen-expander:active .zen-content {
      transform: translateY(0) scale(0.98);
    }
    
    /* Expanded State - Enlightenment */
    .zen-expander.expanded .zen-chevron {
      transform: rotate(-135deg);
    }
    
    .zen-expander.expanded .meditation-dot {
      background: rgba(28,174,130,0.8);
      box-shadow: 0 0 16px rgba(28,174,130,0.4);
      transform: scale(1.2);
    }
    
    .zen-expander.expanded .zen-content {
      background: rgba(28,174,130,0.06);
      border-color: rgba(28,174,130,0.15);
      box-shadow: 0 6px 25px rgba(28,174,130,0.12);
    }
    
    .zen-expander.expanded .breathing-aura {
      animation: zen-breathe 4s ease-in-out infinite;
    }
    
    .zen-expander.expanded .dot-ripple {
      animation: dot-pulse 3s ease-in-out infinite;
    }
    
    /* Smooth Expandable Section - No Raw Cuts */
    .expandable-parts-section {
      overflow: hidden;
      transition: 
        max-height 1s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 1s cubic-bezier(0.23, 1, 0.32, 1),
        transform 1s cubic-bezier(0.23, 1, 0.32, 1),
        padding 1s cubic-bezier(0.23, 1, 0.32, 1);
      width: 100%;
      max-width: 100vw;
      padding: 0 20px;
      box-sizing: border-box;
    }
    
    .expandable-parts-section.expanded {
      min-height: 160px;
      padding: 12px 30px 25px 30px;
    }
    
    /* Zen Fade-in for Content */
    .expandable-parts-section .horizontal-carousel {
      transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
      transform: translateY(20px);
      opacity: 0;
      /* Prevent interaction when the dropdown is collapsed */
      pointer-events: none;
      cursor: default;
    }
    
    .expandable-parts-section.expanded .horizontal-carousel {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 0.3s;
      /* Enable interaction only when expanded */
      pointer-events: auto;
      cursor: grab;
    }
    
    .expandable-parts-section .edition-toggle {
      transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
      transform: translateY(20px);
      opacity: 0;
    }
    
    .expandable-parts-section.expanded .edition-toggle {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 0.5s;
    }

    /* Extra safety: disable interactive controls when not expanded */
    .expandable-parts-section:not(.expanded) .prev-part,
    .expandable-parts-section:not(.expanded) .next-part,
    .expandable-parts-section:not(.expanded) .edition-toggle {
      pointer-events: none !important;
      cursor: default !important;
    }
    
    @keyframes star-glow {
      0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(28, 174, 130, 0.2);
      }
      50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(28, 174, 130, 0.4);
      }
    }
    @keyframes emoji-sparkle {
      0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
      }
      25% { 
        transform: scale(1.05) rotate(-2deg);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
      }
      75% { 
        transform: scale(1.05) rotate(2deg);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
      }
    }
    @keyframes star-eye-left {
      0%, 100% { 
        opacity: 0;
        transform: scale(0.3) rotate(0deg) translateY(0px);
      }
      25% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(90deg) translateY(-2px);
      }
      50% { 
        opacity: 1;
        transform: scale(1.3) rotate(180deg) translateY(-4px);
      }
      75% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(270deg) translateY(-2px);
      }
    }
    @keyframes star-eye-right {
      0%, 100% { 
        opacity: 0;
        transform: scale(0.3) rotate(0deg) translateY(0px);
      }
      25% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(-90deg) translateY(-2px);
      }
      50% { 
        opacity: 1;
        transform: scale(1.3) rotate(-180deg) translateY(-4px);
      }
      75% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(-270deg) translateY(-2px);
      }
    }
    @keyframes elegant-celebration {
      0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
      }
      25% { 
        transform: scale(1.02) rotate(-1deg);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
      }
      50% { 
        transform: scale(1.05) rotate(0deg);
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
      }
      75% { 
        transform: scale(1.02) rotate(1deg);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
      }
    }
    @keyframes elegant-glow {
      0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(28, 174, 130, 0.3);
      }
      50% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
        border-color: rgba(28, 174, 130, 0.5);
      }
    }
    @keyframes float-particle-1 {
      0%, 100% { 
        opacity: 0.7;
        transform: translateY(0px) rotate(0deg) scale(1);
      }
      25% { 
        opacity: 0.9;
        transform: translateY(-8px) rotate(90deg) scale(1.1);
      }
      50% { 
        opacity: 1;
        transform: translateY(-12px) rotate(180deg) scale(1.2);
      }
      75% { 
        opacity: 0.8;
        transform: translateY(-6px) rotate(270deg) scale(1.05);
      }
    }
    @keyframes float-particle-2 {
      0%, 100% { 
        opacity: 0.6;
        transform: translateY(0px) rotate(0deg) scale(1);
      }
      25% { 
        opacity: 0.8;
        transform: translateY(-6px) rotate(-90deg) scale(1.1);
      }
      50% { 
        opacity: 0.9;
        transform: translateY(-10px) rotate(-180deg) scale(1.15);
      }
      75% { 
        opacity: 0.7;
        transform: translateY(-4px) rotate(-270deg) scale(1.05);
      }
    }
    @keyframes float-particle-3 {
      0%, 100% { 
        opacity: 0.5;
        transform: translateY(0px) rotate(0deg) scale(1);
      }
      25% { 
        opacity: 0.7;
        transform: translateY(-7px) rotate(120deg) scale(1.1);
      }
      50% { 
        opacity: 0.8;
        transform: translateY(-11px) rotate(240deg) scale(1.2);
      }
      75% { 
        opacity: 0.6;
        transform: translateY(-5px) rotate(360deg) scale(1.05);
      }
    }
    @keyframes float-particle-4 {
      0%, 100% { 
        opacity: 0.6;
        transform: translateY(0px) rotate(0deg) scale(1);
      }
      25% { 
        opacity: 0.8;
        transform: translateY(-5px) rotate(-120deg) scale(1.1);
      }
      50% { 
        opacity: 0.9;
        transform: translateY(-9px) rotate(-240deg) scale(1.15);
      }
      75% { 
        opacity: 0.7;
        transform: translateY(-3px) rotate(-360deg) scale(1.05);
      }
    }
    @keyframes elegant-shimmer {
      0%, 100% { 
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1);
      }
      50% { 
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1.05);
      }
    }
    @keyframes congrats-glow {
      0%, 100% { 
        box-shadow: 0 6px 20px rgba(28, 174, 130, 0.12);
        border-color: rgba(28, 174, 130, 0.15);
      }
      50% { 
        box-shadow: 0 8px 25px rgba(28, 174, 130, 0.18);
        border-color: rgba(28, 174, 130, 0.2);
      }
    }
    @keyframes eye-star-left {
      0%, 100% { 
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
      }
      50% { 
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
      }
    }
    @keyframes eye-star-right {
      0%, 100% { 
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
      }
      50% { 
        opacity: 1;
        transform: scale(1.2) rotate(-180deg);
      }
    }
    
      @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.1); }
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes celebrationFloat {
        0%, 100% { transform: translateY(0px); opacity: 0.9; }
        50% { transform: translateY(-3px); opacity: 1; }
      }
      @keyframes sparkle {
        0%, 100% { opacity: 0; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
      }
      @keyframes floatLotus {
        0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
        50% { transform: translateY(-15px) rotate(180deg); opacity: 1; }
      }
      @keyframes gentleSparkle {
        0%, 100% { opacity: 0; transform: scale(0.5); }
        50% { opacity: 0.8; transform: scale(1); }
      }
      @keyframes celebrationBounce {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
      }
      @keyframes iconGlow {
        0%, 100% { box-shadow: 0 15px 40px rgba(28,174,130,0.3), 0 6px 20px rgba(255,215,0,0.2); }
        50% { box-shadow: 0 20px 50px rgba(28,174,130,0.4), 0 8px 25px rgba(255,215,0,0.3); }
      }
      @keyframes iconPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }
      @keyframes gentleFloat {
        0%, 100% { transform: translateY(0px); opacity: 0.3; }
        50% { transform: translateY(-8px); opacity: 0.8; }
      }
      @keyframes subtleGlow {
        0%, 100% { box-shadow: 0 12px 32px rgba(28,174,130,0.2); }
        50% { box-shadow: 0 16px 40px rgba(28,174,130,0.3); }
      }
    
    @keyframes shimmerMove {
      0% { left: -100%; }
      100% { left: 100%; }
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Calm and smooth loading animations */
    @keyframes zen-breathe {
      0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
      }
      25% { 
        transform: scale(1.15); 
        opacity: 1; 
      }
      50% { 
        transform: scale(1.3); 
        opacity: 0.9; 
      }
      75% { 
        transform: scale(1.1); 
        opacity: 1; 
      }
    }
    
    @keyframes zen-ripple {
      0% { 
        transform: translate(-50%, -50%) scale(0.8); 
        opacity: 0.6; 
      }
      50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.3; 
      }
      100% { 
        transform: translate(-50%, -50%) scale(1.4); 
        opacity: 0; 
      }
    }
    
    @keyframes zen-glow {
      0%, 100% { 
        box-shadow: 0 0 8px rgba(28,174,130,0.3), 0 0 16px rgba(28,174,130,0.1); 
      }
      50% { 
        box-shadow: 0 0 12px rgba(28,174,130,0.5), 0 0 24px rgba(28,174,130,0.2); 
      }
    }
    
    /* Smooth fade transitions for loading to profile icon */
    @keyframes smoothFadeIn {
      0% { 
        opacity: 0; 
        transform: scale(0.95); 
      }
      100% { 
        opacity: 1; 
        transform: scale(1); 
      }
    }
    
    @keyframes smoothFadeOut {
      0% { 
        opacity: 1; 
        transform: scale(1); 
      }
      100% { 
        opacity: 0; 
        transform: scale(0.95); 
      }
    }
    /* Minimalist modern meditation loading animation */
    @keyframes zenBreath {
      0%, 100% { 
        transform: scale(1);
        opacity: 0.6;
      }
      50% { 
        transform: scale(1.05);
        opacity: 1;
      }
    }
    @keyframes zenRotate {
      0% { 
        transform: rotate(0deg);
      }
      100% { 
        transform: rotate(360deg);
      }
    }
    .profile-loading-icon {
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .profile-loading-icon.show {
      opacity: 1;
      animation: zenBreath 2s ease-in-out infinite;
    }
    .profile-loading-icon.hide {
      opacity: 0;
    }
    /* Mobile-specific loading icon optimizations */
    @media (max-width: 768px) {
      .profile-loading-icon {
        transition: opacity 0.2s ease-in-out;
      }
      
      .profile-loading-icon.show {
        animation: zenBreath 1.5s ease-in-out infinite;
      }
    }
    /* Extra small screens optimization */
    @media (max-width: 480px) {
      .profile-loading-icon {
        transition: opacity 0.15s ease-in-out;
      }
      
      .profile-loading-icon.show {
        animation: zenBreath 1.2s ease-in-out infinite;
      }
    }
    /* Enhanced smooth crossfade for profile icon transitions */
    #btnAccount {
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
    }
    #btnAccount svg {
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    /* Mobile-optimized crossfade transitions */
    @media (max-width: 768px) {
      #btnAccount {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #btnAccount svg {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
    @media (max-width: 480px) {
      #btnAccount {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #btnAccount svg {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
    /* Crossfade overlay for seamless transitions */
    .icon-crossfade {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
    .icon-crossfade.show {
      opacity: 1;
    }
    
    /* Glitchy electricity effect animations */
    @keyframes flicker {
      0%, 100% { opacity: 1; }
      10% { opacity: 0.8; }
      20% { opacity: 0.9; }
      30% { opacity: 0.7; }
      40% { opacity: 1; }
      50% { opacity: 0.6; }
      60% { opacity: 0.9; }
      70% { opacity: 0.8; }
      80% { opacity: 1; }
      90% { opacity: 0.7; }
    }
    
    @keyframes electricity {
      0% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(0deg);
      }
      10% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(2deg);
        filter: brightness(1.2) hue-rotate(10deg);
      }
      20% { 
        opacity: 0.3;
        transform: scale(0.9) rotate(-1deg);
        filter: brightness(0.8) hue-rotate(-5deg);
      }
      30% { 
        opacity: 0.9;
        transform: scale(1.05) rotate(1deg);
        filter: brightness(1.1) hue-rotate(5deg);
      }
      40% { 
        opacity: 0.4;
        transform: scale(0.95) rotate(-2deg);
        filter: brightness(0.9) hue-rotate(-10deg);
      }
      50% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(0deg);
      }
      60% { 
        opacity: 0.6;
        transform: scale(1.08) rotate(3deg);
        filter: brightness(1.15) hue-rotate(15deg);
      }
      70% { 
        opacity: 0.2;
        transform: scale(0.92) rotate(-3deg);
        filter: brightness(0.7) hue-rotate(-15deg);
      }
      80% { 
        opacity: 0.8;
        transform: scale(1.02) rotate(1deg);
        filter: brightness(1.05) hue-rotate(8deg);
      }
      90% { 
        opacity: 0.5;
        transform: scale(0.98) rotate(-1deg);
        filter: brightness(0.85) hue-rotate(-8deg);
      }
      100% { 
        opacity: 0;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(0deg);
      }
    }
    
    @keyframes glow {
      0%, 100% { opacity: 0; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.1); }
    }
    
    /* Avatar reflection shimmer effect */
    @keyframes avatarShimmer {
      0% { 
        opacity: 0;
        transform: rotate(45deg) translateX(-100%);
      }
      50% { 
        opacity: 0.3;
        transform: rotate(45deg) translateX(0%);
      }
      100% { 
        opacity: 0;
        transform: rotate(45deg) translateX(100%);
      }
    }
    
    @keyframes gentlePulse {
      0%, 100% { 
        transform: scale(1);
        box-shadow: var(--shadow-neon), 0 0 0 3px var(--neon-soft);
      }
      50% { 
        transform: scale(1.02);
        box-shadow: var(--shadow-neon), 0 0 0 4px rgba(55,227,159,0.3);
      }
    }
    
    @keyframes lightTravel {
      0% { 
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 4px var(--green-neon), 0 0 8px rgba(55,227,159,0.2);
      }
      50% { 
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 12px var(--green-neon), 0 0 24px rgba(55,227,159,0.5);
      }
      100% { 
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 4px var(--green-neon), 0 0 8px rgba(55,227,159,0.2);
      }
    }
    
    
        
        /* Deep Practice Mode pulse animation */
        @keyframes deepPracticePulse {
          0% { 
            opacity: 0.3;
        transform: scale(1);
        border-color: rgba(55,227,159,0.4);
      }
      50% { 
        opacity: 0.8;
        transform: scale(1.1);
        border-color: rgba(55,227,159,0.8);
      }
      100% { 
        opacity: 0.3;
        transform: scale(1);
        border-color: rgba(55,227,159,0.4);
      }
    }
    
    /* Modern elegant reflection effect for username button */
    @keyframes clickableReflection {
      0% { 
        opacity: 0;
        transform: rotate(45deg) translateX(-120%) scale(0.8);
        filter: blur(0px);
      }
      15% { 
        opacity: 0.3;
        transform: rotate(45deg) translateX(-80%) scale(0.9);
        filter: blur(0.5px);
      }
      30% { 
        opacity: 0.7;
        transform: rotate(45deg) translateX(-40%) scale(1);
        filter: blur(0px);
      }
      50% { 
        opacity: 0.9;
        transform: rotate(45deg) translateX(0%) scale(1.1);
        filter: blur(0px);
      }
      70% { 
        opacity: 0.6;
        transform: rotate(45deg) translateX(40%) scale(1);
        filter: blur(0px);
      }
      85% { 
        opacity: 0.3;
        transform: rotate(45deg) translateX(80%) scale(0.9);
        filter: blur(0.5px);
      }
      100% { 
        opacity: 0;
        transform: rotate(45deg) translateX(120%) scale(0.8);
        filter: blur(1px);
      }
    }
    
    /* Glitchy lightbulb effects */
    @keyframes lightbulbGlitch {
      0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        filter: brightness(1);
      }
      2% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      4% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      6% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      8% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      10% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      12% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      14% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      16% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      18% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      20% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      22% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      24% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      26% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      28% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      30% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      32% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      34% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      36% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      38% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      40% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      42% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      44% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      46% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      48% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      50% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      52% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      54% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      56% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      58% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      60% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      62% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      64% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      66% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      68% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      70% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      72% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      74% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      76% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      78% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      80% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      82% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      84% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      86% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      88% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      90% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      92% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      94% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
      96% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      98% { 
        opacity: 0;
        transform: scale(1);
        filter: brightness(0);
      }
    }
    
    @keyframes lightbulbFlicker {
      0% { opacity: 1; transform: scale(1); filter: brightness(1); }
      5% { opacity: 0.95; transform: scale(1); filter: brightness(0.95); }
      10% { opacity: 0.8; transform: scale(1); filter: brightness(0.8); }
      15% { opacity: 0.9; transform: scale(1); filter: brightness(0.9); }
      20% { opacity: 0.7; transform: scale(1); filter: brightness(0.7); }
      25% { opacity: 0.85; transform: scale(1); filter: brightness(0.85); }
      30% { opacity: 0.6; transform: scale(1); filter: brightness(0.6); }
      35% { opacity: 0.75; transform: scale(1); filter: brightness(0.75); }
      40% { opacity: 0.5; transform: scale(1); filter: brightness(0.5); }
      45% { opacity: 0.65; transform: scale(1); filter: brightness(0.65); }
      50% { opacity: 0.4; transform: scale(1); filter: brightness(0.4); }
      55% { opacity: 0.55; transform: scale(1); filter: brightness(0.55); }
      60% { opacity: 0.3; transform: scale(1); filter: brightness(0.3); }
      65% { opacity: 0.45; transform: scale(1); filter: brightness(0.45); }
      70% { opacity: 0.2; transform: scale(1); filter: brightness(0.2); }
      75% { opacity: 0.35; transform: scale(1); filter: brightness(0.35); }
      80% { opacity: 0.1; transform: scale(1); filter: brightness(0.1); }
      85% { opacity: 0.25; transform: scale(1); filter: brightness(0.25); }
      90% { opacity: 0.05; transform: scale(1); filter: brightness(0.05); }
      95% { opacity: 0.15; transform: scale(1); filter: brightness(0.15); }
      100% { opacity: 0; transform: scale(1); filter: brightness(0); }
    }
    
    .profile-lightbulb-glitch {
      animation: lightbulbGlitch 0.15s ease-in-out;
    }
    
    .profile-lightbulb-flicker {
      animation: lightbulbFlicker 0.2s ease-in-out;
    }
    
    /* Ensure lightbulb elements don't interfere with button clicks */
    #profileLightbulbGlitch {
      pointer-events: none !important;
      user-select: none !important;
      z-index: 1 !important;
    }
    
    @keyframes backgroundDim {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(0.95); }
    }
    

    
    /* Photo placeholder hover effects */
    #compareBeforePh:hover, #compareAfterPh:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 32px rgba(28,174,130,0.15);
      border-color: rgba(28,174,130,0.5);
      background: linear-gradient(135deg, rgba(28,174,130,0.08) 0%, rgba(55,227,159,0.04) 100%);
    }
    
    #compareAfterPh:hover {
      box-shadow: 0 12px 32px rgba(55,227,159,0.15);
      border-color: rgba(55,227,159,0.5);
      background: linear-gradient(135deg, rgba(55,227,159,0.08) 0%, rgba(28,174,130,0.04) 100%);
    }
    
    #compareBeforePh:active, #compareAfterPh:active {
      transform: scale(0.98);
      transition: transform 0.1s ease;
    }
    
    /* Progress item hover effects */
    .progress-item {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }
    
    .progress-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(28,174,130,0.15);
      background: rgba(28,174,130,0.02) !important;
    }
    
    .progress-item:active {
      transform: translateY(0);
    }
    
    /* Premium Thin Header Design */
    .nav { 
      display:flex; justify-content:space-between; align-items:flex-start; 
      background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,252,250,0.98) 100%);
      border-bottom: 1px solid rgba(28,174,130,0.08);
      backdrop-filter: blur(5px) saturate(120%);
      -webkit-backdrop-filter: blur(5px) saturate(120%);
      padding: 1px 12px 2px 8px; position:sticky; top:0; z-index:1050; isolation:isolate;
      box-shadow: 0 1px 24px rgba(28,174,130,0.04), 0 1px 8px rgba(0,0,0,0.02);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    /* Sophisticated header height management */
  :root { --app-nav-height: 2px; }
  .part-navigation { padding-top: var(--app-nav-height); }
    .nav .left { color:var(--strong); font-size:12px; font-weight:600; letter-spacing:.2px; display:flex; flex-direction:column; gap:6px; }
    .app-title { font-size:12px; font-weight:700; color:var(--strong); }
    .title-controls { display:flex; gap:8px; align-items:center; }
    .select-wrap { position:relative; display:inline-flex; align-items:center; gap:8px; }
    /* Elegant Course Version Selector */
    .course-select-wrapper {
      position: relative;
      display: inline-block;
    }
    
    .course-select-trigger {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 6px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #f8fcf9 0%, #f0fdf9 100%);
      color: var(--text);
      font-weight: 660;
      font-size: 8px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(15, 35, 28, 0.08), 0 1px 3px rgba(15, 35, 28, 0.04);
      width: fit-content;
      height: 22px;
      position: relative;
      backdrop-filter: blur(8px);
    }
    
    .course-select-trigger:hover {
      background: linear-gradient(135deg, #f0fdf9 0%, #e8f8f3 100%);
      box-shadow: 0 4px 16px rgba(46, 192, 141, 0.15), 0 2px 8px rgba(46, 192, 141, 0.08);
      transform: translateY(-1px) scale(1.02);
    }
    
    .course-select-trigger:focus {
      outline: none;
      box-shadow: 0 4px 20px rgba(46, 192, 141, 0.2), 0 0 0 3px rgba(46, 192, 141, 0.1);
      transform: translateY(-1px) scale(1.02);
    }
    
    .course-version-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 2px 4px;
      background: linear-gradient(135deg, var(--green) 0%, var(--green-600) 100%);
      border-radius: 4px;
      font-size: 8px;
      font-weight: 800;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 1px 3px rgba(46, 192, 141, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .course-version-badge.detox {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
    }
    
    .app-version-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      background: linear-gradient(135deg, var(--green) 0%, var(--green-600) 100%);
      border-radius: 6px;
      font-size: 9px;
      font-weight: 800;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 4px rgba(46, 192, 141, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
      min-width: 20px;
      height: 16px;
    }
    
    .app-version-badge.detox {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    }
    
    .course-select-icon {
      width: 8px;
      height: 8px;
      transition: transform 0.2s ease;
      opacity: 0.7;
    }
    
    .course-select-trigger.open .course-select-icon {
      transform: rotate(180deg);
      opacity: 1;
    }
    
    /* Enhanced harmonious fade animations for course switcher */
    @keyframes fadeOut {
      0% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        visibility: visible;
        filter: blur(0);
      }
      100% { 
        opacity: 0; 
        transform: translateY(-4px) scale(0.98);
        visibility: hidden;
        filter: blur(2px);
      }
    }

    @keyframes fadeIn {
      0% { 
        opacity: 0; 
        transform: translateY(-4px) scale(0.98);
        visibility: hidden;
        filter: blur(2px);
      }
      100% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        visibility: visible;
        filter: blur(0);
      }
    }

    .course-select-dropdown {
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      background: var(--zen-card);
      border: none;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(15, 35, 28, 0.08);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px) scale(0.98);
      transition: none; /* Remove default transition */
      overflow: hidden;
      width: fit-content;
      min-width: 160px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      will-change: transform, opacity, visibility; /* Optimize animations */
    }
    
    .course-select-dropdown.open {
      animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .course-select-dropdown.closing {
      animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .course-select-header {
      padding: 6px 10px;
      background: var(--green-lighter);
      border-bottom: none;
      font-size: 7px;
      font-weight: 700;
      color: var(--strong);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: center;
    }
    
    .course-select-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      color: var(--text);
      font-size: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: none;
      position: relative;
      margin: 2px 4px;
      border-radius: 6px;
    }
    
    .info-icon {
      width: 16px;
      height: 16px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      margin-left: auto;
      flex-shrink: 0;
    }
    
    .info-icon:hover {
      background: var(--green-lighter);
      color: var(--green);
      transform: scale(1.1);
    }
    
    .info-icon svg {
      width: 12px;
      height: 12px;
    }
    /* Language selector styling */
    .language-selector {
      transition: all 0.3s ease;
    }
    .language-selector:hover {
      box-shadow: 0 4px 12px rgba(28,174,130,0.15);
      transform: translateY(-1px);
    }
    .lang-btn {
      position: relative;
      overflow: hidden;
    }
    .lang-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }
    .lang-btn:hover::before {
      left: 100%;
    }
    #statusRing {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    #statusRing > div {
      width: min(380px, 100%);
    }
    /* Donation button styling */
    #btnDonation {
      position: relative;
      overflow: hidden;
    }
    #btnDonation::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    #btnDonation:hover::before {
      transform: translateX(100%);
    }

    #btnDonation .donation-icon-stack {
      position: relative;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .donation-heart-icon {
      width: 18px;
      height: 18px;
      fill: var(--green, #2ec08d);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease, opacity 0.45s ease;
      filter: drop-shadow(0 1px 3px rgba(28,174,130,0.15));
      animation: heartBeat 1.6s ease-in-out infinite;
      transform-origin: center;
      opacity: 1;
    }

    .donation-loading-icon {
      position: absolute;
      width: 34px;
      height: 34px;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.4s ease, transform 0.5s ease;
      pointer-events: none;
    }

    .donation-loading-icon .loading-track {
      fill: none;
      stroke: rgba(28,174,130,0.18);
      stroke-width: 1.6;
    }

    .donation-loading-icon .loading-arc {
      fill: none;
      stroke: rgba(55,227,159,0.85);
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-dasharray: 90;
      stroke-dashoffset: 90;
      animation: donationArc 1.9s ease-in-out infinite;
      filter: drop-shadow(0 2px 6px rgba(28,174,130,0.18));
    }

    .donation-loading-icon .loading-dot circle {
      fill: rgba(55,227,159,0.95);
    }

    .donation-loading-icon .loading-dot {
      transform-origin: 30px 30px;
      animation: donationOrbit 1.9s linear infinite;
    }

    .donation-loading-icon .loading-core {
      fill: rgba(28,174,130,0.25);
      animation: donationPulse 1.9s ease-in-out infinite;
      transform-origin: center;
    }

    #btnDonation.is-loading {
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .donation-heart-icon,
      .donation-loading-icon .loading-arc,
      .donation-loading-icon .loading-dot,
      .donation-loading-icon .loading-core {
        animation: none !important;
      }
    }

    #btnDonation.is-loading .donation-heart-icon {
      opacity: 0.35;
      transform: scale(0.92);
      filter: drop-shadow(0 1px 4px rgba(28,174,130,0.25));
    }

    #btnDonation.is-loading .donation-loading-icon {
      opacity: 1;
      transform: scale(1);
    }

    @keyframes donationArc {
      0% {
        stroke-dashoffset: 90;
        transform: rotate(0deg);
      }
      50% {
        stroke-dashoffset: 0;
        transform: rotate(140deg);
      }
      100% {
        stroke-dashoffset: -90;
        transform: rotate(360deg);
      }
    }

    @keyframes donationOrbit {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes donationPulse {
      0%, 100% {
        opacity: 0.35;
        transform: scale(0.9);
      }
      50% {
        opacity: 0.85;
        transform: scale(1.05);
      }
    }
    
    /* Donation popup styling */
    .donation-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 5vh;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .donation-popup.show {
      opacity: 1;
      visibility: visible;
    }
    
    .donation-card {
      background: linear-gradient(160deg, #ffffff 0%, #fbfefc 60%, #f5fbf8 100%);
      border-radius: 16px;
      padding: 20px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--zen-border);
      transform: scale(0.8) translateY(-20px);
      transition: all 0.3s ease;
      position: relative;
    }
    
    .donation-popup.show .donation-card {
      transform: scale(1) translateY(0);
    }
    
    .donation-card h3 {
      color: #1cae82;
      font-size: 16px;
      margin: 0 0 8px 0;
      font-weight: 600;
    }
    
    .title-emoji {
      font-size: 32px;
      margin: 0 0 12px 0;
      animation: gentlePulse 3s ease-in-out infinite;
    }
    
    /* VIPASSANA subtitle styling */
    /* VIPASSANA title styling - light Avatar neon shadow */
    .vipassana-title {
      /* Just a light Avatar-inspired shadow - more visible */
      text-shadow: 0 2px 8px rgba(0, 229, 255, 0.25);
    }
    .vipassana-subtitle {
      font-size: 8px;
      font-weight: 500;
      color: #9bb0a6;
      letter-spacing: 1.3px;
      text-align: center;
      margin: -2px 0 8px 0;
      padding: 0;
      text-transform: uppercase;
      opacity: 0.8;
      display: block;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: scaleY(0.8);
    }
    .vipassana-subtitle.lang-en {
      font-size: 8.3px;
      width: 142px;
      transform: translateX(1.6px) scaleY(0.8);
    }
    .vipassana-subtitle.lang-es {
      font-size: 7.6px;
      width: 146px;
      transform: translateX(1.5px) scaleY(0.8);
    }
    
    /* Part subtitle styling */
    .part-subtitle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin: 8px auto 10px auto;
      padding: 0 18px;
      width: 100%;
      max-width: 420px;
      text-align: center;
      white-space: normal;
      word-wrap: break-word;
      font-size: clamp(10.4px, 0.25vw + 9.9px, 11.6px);
      font-weight: 600;
      font-family: var(--font-family-base);
    }

.part-subtitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(10.4px, 0.25vw + 9.9px, 11.6px);
  font-weight: 660;
}

.part-subtitle-tagline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--font-size-label) + 0.4px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: #1cae82;
  text-transform: none;
  font-family: var(--font-family-heading);
  line-height: var(--line-height-snug);
}

    .part-subtitle-description {
      display: block;
      font-size: calc(var(--font-size-small) - 0.2px);
      font-weight: var(--weight-regular);
      letter-spacing: 0.01em;
      color: #526861;
      line-height: var(--line-height-body);
      text-transform: none;
      font-family: var(--font-family-base);
    }

.part-subtitle.has-suffix {
  line-height: 1.35;
  font-weight: 660;
}

.part-subtitle[role="button"] {
  cursor: pointer;
}

.part-subtitle[role="button"]:focus-visible {
  outline: 2px solid rgba(28,174,130,0.35);
  outline-offset: 4px;
}

.part-subtitle .part-subtitle-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  font-size: 8.8px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.28em;
  color: rgba(16, 88, 74, 0.65);
  text-transform: uppercase;
  opacity: 0.78;
  font-family: var(--font-family-heading);
  transition: color 0.25s ease;
}

.vipassana-logo-heading {
      text-transform: uppercase;
    }

    .seo-hero,
    .course-parts {
      max-width: var(--course-content-max-width, 600px);
      width: 100%;
      margin: 40px auto;
      padding: 0 16px;
    }

    .course-parts {
      margin-top: 0;
      margin-bottom: 32px;
    }

    .seo-hero__details,
    .course-parts__details {
      position: relative;
      border-radius: 28px;
      border: 1px solid rgba(28,174,130,0.16);
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(22px) saturate(140%);
      box-shadow: 0 24px 48px rgba(16, 48, 42, 0.12);
      overflow: hidden;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
      margin-bottom: 32px;
    }

    .seo-hero__details:hover,
    .course-parts__details:hover {
      border-color: rgba(28,174,130,0.24);
      box-shadow: 0 32px 64px rgba(16, 48, 42, 0.16);
    }

    .seo-hero__summary,
    .course-parts__summary {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 20px;
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: #114f3f;
      cursor: pointer;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(233,247,240,0.96) 100%);
    }

    .seo-hero__summary::-webkit-details-marker,
    .course-parts__summary::-webkit-details-marker {
      display: none;
    }

    .seo-hero__summary::before,
    .course-parts__summary::before {
      content: '';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1cae82, #16956e);
      box-shadow: 0 6px 12px rgba(28,174,130,0.26);
    }

    .seo-hero__summary::after,
    .course-parts__summary::after {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-left: auto;
      transition: transform 0.25s ease;
    }

    .seo-hero__details[open] .seo-hero__summary::after,
    .course-parts__details[open] .course-parts__summary::after {
      transform: rotate(-135deg);
    }

    .seo-hero__summary:focus-visible,
    .course-parts__summary:focus-visible {
      outline: 2px solid rgba(28,174,130,0.5);
      outline-offset: 3px;
    }

    .seo-hero__details[open],
    .course-parts__details[open] {
      box-shadow: 0 28px 72px rgba(16, 48, 42, 0.18);
      border-color: rgba(28,174,130,0.28);
      transform: translateY(-2px);
    }

    .seo-hero__content,
    .course-parts__content {
      padding: clamp(18px, 4.2vw, 28px);
      background: linear-gradient(180deg, rgba(248,252,250,0.85) 0%, rgba(235,247,241,0.9) 100%);
      border-top: 1px solid rgba(28,174,130,0.12);
    }

    .seo-hero__intro {
      margin-bottom: clamp(20px, 4vw, 36px);
    }

    .seo-hero__intro h1 {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-section);
      font-weight: var(--weight-medium);
      color: #186955;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
      line-height: var(--line-height-snug);
      text-shadow: 0 6px 20px rgba(24, 105, 85, 0.16);
    }

    .seo-hero__lede {
      font-size: var(--font-size-small);
      color: #44534f;
      line-height: var(--line-height-body);
      font-weight: var(--weight-regular);
      margin: 0;
    }

    .seo-hero__content li strong,
    .seo-hero__grid h2 {
      color: #1d7a64;
    }

    /* Tighten spacing between edition tagline (h2) and its description */
    .seo-hero__grid h2 {
      margin: 0 0 6px;
      line-height: 1.22;
    }
    .seo-hero__grid h2 + p {
      margin-top: 6px;
    }

    .seo-hero__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: clamp(16px, 3vw, 24px);
      margin-bottom: clamp(20px, 4vw, 32px);

      .seo-hero__details:not([open]) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
      }

      .seo-hero__details:not([open]) .seo-hero__summary {
        background: rgba(255, 255, 255, 0.92);
        border-radius: 18px;
        border: 1px solid rgba(28, 174, 130, 0.14);
        box-shadow: 0 12px 28px rgba(28, 174, 130, 0.12);
        justify-content: center;
        text-align: center;
        gap: 10px;
      }

      .seo-hero__details:not([open]) .seo-hero__summary::before {
        box-shadow: 0 4px 10px rgba(28, 174, 130, 0.2);
      }
    }

    .seo-card {
      background: rgba(255, 255, 255, 0.88);
      border-radius: 18px;
      padding: clamp(16px, 3vw, 22px);
      border: 1px solid rgba(28,174,130,0.12);
      box-shadow: 0 10px 28px rgba(28,174,130,0.08);
    }

    .seo-card h2 {
      font-size: clamp(15px, 2.6vw, 17px);
      font-family: 'Sora', sans-serif;
      color: #1f4f44;
      margin: 0 0 10px 0;
      font-weight: 620;
    }

    .seo-card p,
    .seo-card ul,
    .seo-card ol {
      font-size: 12px;
      line-height: 1.6;
      color: #526861;
      margin: 0;
    }

    .seo-card ul,
    .seo-card ol {
      padding-left: 18px;
    }

    .seo-card li + li {
      margin-top: 6px;
    }

    .seo-hero__footer {
      background: rgba(255,255,255,0.92);
      border-radius: 18px;
      border: 1px solid rgba(28,174,130,0.14);
      padding: clamp(18px, 3vw, 24px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .seo-hero__footer h3 {
      font-size: clamp(14px, 2.5vw, 16px);
      margin: 0 0 10px 0;
      font-family: 'Sora', sans-serif;
      color: #1f4f44;
    }

    .seo-hero__footer ol {
      margin: 0;
      padding-left: 20px;
      color: #526861;
      font-size: 12px;
      line-height: 1.6;
    }

    .seo-hero__footer li + li {
      margin-top: 6px;
    }

.seo-anchor-nav {
  margin: clamp(18px, 3vw, 32px) auto;
  max-width: var(--tab-content-max-width, 560px);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  background: rgba(238,248,244,0.85);
  border: 1px solid rgba(18,126,99,0.12);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(28,174,130,0.12);
  scrollbar-width: none;
}
.seo-anchor-nav::-webkit-scrollbar { display: none; }

.seo-anchor-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  scroll-snap-type: x mandatory;
}

.seo-anchor-nav li {
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
  min-width: 0;
}

.seo-anchor-nav li:hover {
  transform: translateY(-2px);
}

.seo-anchor-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  font-family: 'Sora', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #0f5d4d;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  scroll-snap-align: start;
}

.seo-anchor-nav a::after {
  content: none;
}

.seo-anchor-nav li:hover a::after {
  transform: translateX(4px);
}

.seo-anchor-nav a:hover,
.seo-anchor-nav a:focus-visible {
  background: rgba(255,255,255,0.9);
  border-color: rgba(18,126,99,0.16);
  box-shadow: 0 6px 12px rgba(28,174,130,0.14);
  outline: none;
}

.seo-anchor-nav li:first-child a {
  background: linear-gradient(135deg, #1cbf8a, #18a477);
  border-color: rgba(18,126,99,0.36);
  box-shadow: 0 8px 16px rgba(28,174,130,0.2);
  color: #ffffff;
}

@media (min-width: 720px) {
  .seo-anchor-nav ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

.seo-lang-switch {
  max-width: var(--tab-content-max-width, 560px);
  margin: 10px auto 28px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.seo-lang-switch__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.seo-lang-switch__links a {
  color: #1f4f44;
  font-weight: 600;
  text-decoration: underline rgba(31,79,68,0.35);
  text-underline-offset: 4px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.seo-lang-switch__links a:hover,
.seo-lang-switch__links a:focus-visible {
  color: #138861;
  text-decoration-color: rgba(19,136,97,0.65);
}

.seo-course-anchors {
  position: relative;
  height: 0;
}

.trustpilot-image {
  width: clamp(140px, 22vw, 220px);
  height: auto;
}

@media (max-width: 640px) {
  .trustpilot-image {
    width: clamp(68px, 32vw, 110px);
  }
}

.seo-course-anchors span {
  display: block;
  position: relative;
  top: -120px;
  height: 0;
}

.seo-teacher,
.seo-community,
.seo-join {
  margin: 48px auto;
  padding: 40px;
  max-width: 960px;
  border-radius: 32px;
  border: 1px solid rgba(28,174,130,0.12);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 30px 80px rgba(12,75,60,0.08);
}

.seo-teacher__cta,
.seo-join__cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seo-community ul,
.seo-join ul {
  margin-left: 20px;
  line-height: 1.6;
}

.seo-community ol {
  margin-left: 20px;
}

.seo-join__cta .button.secondary {
  border: 1px solid rgba(28,174,130,0.2);
  background: rgba(248,252,250,0.95);
  color: #1cae82;
}

.seo-join__cta .button.secondary:hover {
  border-color: rgba(28,174,130,0.4);
}

.seo-page {
  font-family: 'Raleway', sans-serif;
  background: linear-gradient(180deg, #f8fffb 0%, #f1fffa 100%);
  color: #203732;
  min-height: 100vh;
  padding: 24px;
}

.dyn-portrait-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 16px 0 22px;
  padding: 14px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 18%, rgba(28,174,130,0.12), transparent 46%),
    radial-gradient(circle at 82% 14%, rgba(55,227,159,0.12), transparent 38%),
    linear-gradient(180deg, rgba(248,252,250,0.96), rgba(236,249,244,0.96));
  box-shadow:
    0 22px 48px rgba(16,48,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.dyn-portrait-image {
  width: max(200px, 82vw);
  border-radius: 22px;
  object-fit: cover;
    align-items: center;
  box-shadow:
    0 18px 42px rgba(12,60,46,0.18),
    0 0 0 1px rgba(28,174,130,0.14);
  background: linear-gradient(135deg, rgba(28,174,130,0.06), rgba(55,227,159,0.08));
}

.dyn-portrait-caption {
  margin: 0;
  font-size: 13px;
  color: rgba(31,79,68,0.82);
  text-align: center;
  letter-spacing: 0.08em;
}

@media (max-width: 200px) {
  .dyn-portrait-card {
    padding: 12px;
    border-radius: 20px;
    width: 100%;
    max-width: 200px;
  }

  .dyn-portrait-image {
    width: max(200px, 80vw);
    border-radius: 18px;
    display: block;
  margin: 0 auto;
    justify-content: center;
  }

  .dyn-portrait-caption {
    font-size: 11.5px;
    letter-spacing: 0.05em;
  }
}

.seo-page__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.seo-page__main {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255,255,255,0.96);
  border-radius: 32px;
  border: 1px solid rgba(28,174,130,0.12);
  padding: 36px;
  box-shadow: 0 28px 80px rgba(28,174,130,0.08);
  line-height: 1.7;
}

.seo-page__main section + section {
  margin-top: 32px;
}

.seo-page__footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
}

.footer-page-body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at top, rgba(28,174,130,0.18), transparent 55%), #f2fffa;
  font-family: 'Raleway', sans-serif;
  color: #1f4f44;
}

.footer-chat.footer-page {
  align-items: center;
  padding: 24px 12px;
}

.footer-chat.footer-page .footer-chat__panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  padding: clamp(16px, 3.2vw, 26px);
  border-radius: 22px;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
}

.footer-page__panel h1,
.footer-page__panel h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 640;
  color: #125344;
  line-height: 1.3;
}

.footer-page__panel h3,
.footer-page__panel h4 {
  margin-top: 18px;
  margin-bottom: 10px;
  font-weight: 620;
  color: #104d3f;
  line-height: 1.35;
}

.footer-page__panel h1 {
  font-size: clamp(1.12rem, 0.95rem + 0.55vw, 1.32rem);
}

.footer-page__panel h2 {
  font-size: clamp(1rem, 0.85rem + 0.35vw, 1.18rem);
}

.footer-page__panel p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(18,70,57,0.88);
}

.footer-page__panel a {
  color: #0f6c54;
  text-decoration: none;
  border-bottom: 1px solid rgba(15,108,84,0.2);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-page__panel a:hover,
.footer-page__panel a:focus-visible {
  color: #0a9b75;
  border-color: rgba(10,155,117,0.35);
}
.footer-page__panel ul,
.footer-page__panel ol {
  margin: 0 0 12px 16px;
  color: rgba(18,70,57,0.88);
  line-height: 1.6;
  font-size: 12px;
}

.footer-page__panel li + li {
  margin-top: 4px;
}

.footer-page__panel figure {
  margin: 12px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-page__panel figure img {
  width: min(180px, 100%);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(21,80,64,0.18);
}

.footer-page__panel figure figcaption {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(21,70,56,0.72);
}

.footer-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.footer-project-grid article {
  border: 1px solid rgba(28,174,130,0.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(17,79,63,0.08);
}

.footer-project-grid h5 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: #0f5b47;
  text-transform: none;
}

.footer-project-note {
  font-size: 11px;
  color: rgba(15,78,63,0.75);
  margin: 4px 0 0;
}

.footer-mission-list {
  margin: 0 0 12px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(18,70,57,0.86);
}

.footer-cta-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-cta-row .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 18px 32px rgba(17,79,63,0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.footer-cta-row .button.primary {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 18px 32px rgba(17,79,63,0.18);
}

.footer-cta-row .button.secondary {
  background: rgba(255,255,255,0.92);
  color: #0f6c54;
  border: 1px solid rgba(28,174,130,0.28);
}

.footer-cta-row .button:hover,
.footer-cta-row .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 36px rgba(17,79,63,0.22);
}

.footer-page__accordion {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.footer-page__accordion details {
  border: 1px solid rgba(28,174,130,0.18);
  border-radius: 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 16px 32px rgba(17,79,63,0.12);
}

.footer-roadmap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid rgba(28,174,130,0.18);
  border-radius: 18px;
  padding: 14px;
  background: rgba(245,255,250,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.footer-roadmap__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-roadmap__step {
  min-width: 110px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(28,174,130,0.12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0f5b47;
  text-align: center;
}

.footer-roadmap__item p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(18,70,57,0.9);
}

.footer-page__accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f5b47;
  font-size: 12px;
}

.footer-page__accordion p {
  margin: 8px 0 0;
  font-size: 12px;
}

.footer-page__footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(21,70,56,0.75);
}

.footer-page__footer a {
  color: #1cae82;
}

.seo-page__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.seo-popup {
  border-radius: 28px;
  border: 1px solid rgba(28,174,130,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(234,248,242,0.95));
  box-shadow: 0 22px 60px rgba(12,75,60,0.12);
  padding: clamp(22px, 4vw, 34px);
}

.seo-popup h1,
.seo-popup h2 {
  margin-top: 0;
}

.seo-popup__accordion {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.seo-popup__accordion details {
  border: 1px solid rgba(28,174,130,0.14);
  border-radius: 18px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 26px rgba(16,96,75,0.08);
}

.seo-popup__accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: #145848;
  letter-spacing: 0.2px;
}

.seo-popup__accordion p {
  margin: 10px 0 0;
  color: #425751;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .seo-teacher,
  .seo-community,
  .seo-join {
    padding: 24px 18px;
  }

  .seo-page {
    padding: 12px;
  }

  .seo-page__main {
    padding: 24px;
  }
}

    /* ========== Course FAQ Section (Minimalistic Mobile-First) ========== */
    .course-faq {
      /* Match tab content width exactly */
      max-width: var(--tab-content-max-width, 560px);
      width: 100%;
      margin: 40px auto 0;
      padding: 0 16px;
    }

    .course-faq[hidden] {
      display: none !important;
    }

    .faq-inner {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(18,126,99,0.12);
      box-shadow: 0 16px 36px rgba(14,87,65,0.1);
      padding: clamp(22px, 4.2vw, 30px);
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.8vw, 22px);
    }

    .faq-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      border-bottom: 1px solid rgba(18,126,99,0.08);
      padding-bottom: 16px;
    }

    .faq-heading {
      font-family: var(--font-family-heading);
      font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
      font-weight: var(--weight-medium);
      color: #0f4a3c;
      margin: 0;
      letter-spacing: -0.01em;
      line-height: var(--line-height-snug);
    }

    .faq-intro {
      font-size: calc(var(--font-size-small) - 0.3px);
      color: rgba(50, 86, 77, 0.78);
      margin: 0;
      line-height: var(--line-height-body);
      font-weight: var(--weight-regular);
    }

    .faq-switch {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .faq-switch__label {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(23, 74, 62, 0.58);
    }

    .faq-group-switch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(238,248,244,0.7);
      border: 1px solid rgba(18,126,99,0.14);
    }

.faq-group-switch__btn {
      appearance: none;
      border: none;
      background: transparent;
      border-radius: 999px;
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(31, 79, 68, 0.78);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    @media (max-width: 600px) {
      .faq-group-switch {
        gap: 4px;
        padding: 2px 3px;
      }

      .faq-group-switch__btn {
        padding: 5px 10px;
        font-size: 10px;
      }
    }

    .faq-group-switch__btn:hover,
    .faq-group-switch__btn:focus-visible {
      color: #0a7d5d;
      outline: none;
      background: rgba(255,255,255,0.9);
    }

    .faq-group-switch__btn.active {
      background: linear-gradient(135deg, #1cbf8a, #18a477);
      color: #fff;
      box-shadow: 0 10px 22px rgba(28,174,130,0.22);
    }

    .faq-group-container {
      position: relative;
      display: block;
    }

    .faq-panel {
      position: relative;
    }

    .faq-panel + .faq-panel {
      margin-top: 20px;
    }

    .faq-empty {
      text-align: center;
      font-size: 12px;
      color: rgba(82,104,97,0.8);
      padding: 16px 0;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .faq-under-player__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
    }

    .faq-under-player__item {
      border: 1px solid rgba(28,174,130,0.14);
      border-radius: 16px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.85);
      box-shadow: 0 10px 24px rgba(17,79,63,0.1);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .faq-under-player__item[open] {
      border-color: rgba(28,174,130,0.32);
      box-shadow: 0 16px 34px rgba(28,174,130,0.18);
    }

    .faq-under-player__item summary {
      list-style: none;
      cursor: pointer;
      font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #1f4f44;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .faq-under-player__item summary::-webkit-details-marker {
      display: none;
    }

    .faq-under-player__item summary::after {
      content: '▾';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(28,174,130,0.12);
      color: #0a7d5d;
      font-size: 11px;
      transition: transform 0.2s ease, background 0.2s ease;
      flex-shrink: 0;
    }

    .faq-under-player__item[open] summary::after {
      transform: rotate(180deg);
      background: rgba(28,174,130,0.25);
    }

    .faq-under-player__answer {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(28,174,130,0.12);
      color: #526861;
      font-size: 12.5px;
      line-height: 1.6;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .faq-under-player__answer p {
      margin: 0;
    }

    @media (max-width: 640px) {
      .faq-under-player__grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }


    /* Category tabs */
    .faq-tabs-container {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0;
    }

    .faq-tabs__label {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(23, 74, 62, 0.52);
    }

    .faq-tabs-container::after {
      display: none;
    }

    .faq-tabs {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 8px;
      margin: 0;
      overflow-x: auto;
      overflow-y: hidden;
      touch-action: pan-x;
      -ms-touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      scrollbar-gutter: stable both-edges;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
      user-select: none;
      padding: 2px 0 6px;
      border-bottom: 1px solid rgba(18,126,99,0.08);
    }

    .faq-tabs::-webkit-scrollbar {
      display: none;
    }

    .faq-tabs.is-dragging {
      cursor: grabbing;
    }

    .faq-tabs.is-dragging .faq-tab {
      pointer-events: none;
    }

    .faq-tab {
      appearance: none;
      border: 1px solid rgba(18,126,99,0.12);
      background: rgba(255,255,255,0.82);
      border-radius: 999px;
      flex: 0 0 auto;
      padding: 7px 16px;
      font-size: calc(var(--font-size-label) - 1.2px);
      font-weight: var(--weight-medium);
      color: rgba(32, 86, 72, 0.82);
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      scroll-snap-align: start;
      box-shadow: 0 8px 18px rgba(15,82,62,0.08);
    }

    .faq-tab:hover {
      background: rgba(255,255,255,0.96);
      color: #0f7a5e;
    }

    .faq-tab.active {
      background: linear-gradient(135deg, #1cbf8a, #18a477);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 10px 24px rgba(28,174,130,0.24);
    }

.faq-accordion-wrap {
  position: relative;
  margin: 18px 0;
}

    .faq-accordion-item {
      border: 1px solid rgba(18,126,99,0.12);
      border-radius: 16px;
      background: rgba(255,255,255,0.96);
      margin: 0 0 16px;
      box-shadow: 0 12px 28px rgba(15,82,62,0.08);
      transition: border-color 0.24s ease, box-shadow 0.24s ease, opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
      overflow: hidden;
      position: relative;
      max-height: 900px;
    }

    .faq-accordion-item:hover {
      border-color: rgba(28,174,130,0.2);
      box-shadow: 0 16px 34px rgba(15,82,62,0.12);
    }

    .faq-accordion-item.active {
      border-color: rgba(28,174,130,0.26);
      box-shadow: 0 18px 38px rgba(15,82,62,0.16);
    }

    .faq-accordion {
      position: relative;
      padding-bottom: 72px;
    }

    .faq-accordion-trigger {
      appearance: none;
      background: none;
      border: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s ease;
    }

    .faq-accordion-trigger:hover {
      background: rgba(28,174,130,0.02);
    }

    .faq-accordion-item.active .faq-accordion-trigger {
      background: rgba(28,174,130,0.03);
    }

    .faq-accordion-question {
      flex: 1;
      font-size: calc(var(--font-size-label) - 0.3px);
      font-weight: var(--weight-medium);
      color: #18453a;
      letter-spacing: -0.02em;
      line-height: var(--line-height-body);
      font-family: var(--font-family-base);
    }

    @media (min-width: 769px) {
      .faq-tabs-container {
        padding-right: 0;
      }
      .faq-tabs-container::after {
        display: none;
      }
    }

    .trustpilot-section {
      margin: clamp(30px, 5.5vw, 44px) auto 0;
      padding: 0 16px;
      /* Match tab/FAQ width */
      max-width: var(--tab-content-max-width, 560px);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .trustpilot-caption {
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(23, 74, 62, 0.58);
      text-align: center;
      order: -1;
    }

    .trustpilot-link {
      display: block;
      width: auto;
      max-width: 100%;
      margin: 0 auto;
      text-decoration: none;
      transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .trustpilot-link:hover,
    .trustpilot-link:focus-visible {
      transform: translateY(-3px);
      opacity: 0.9;
      outline: none;
    }

    .trustpilot-image {
      width: auto;
      max-width: 100%;
      height: auto;
      border-radius: 18px;
      border: 1px solid rgba(18,126,99,0.16);
      box-shadow: 0 18px 42px rgba(15,82,62,0.16);
      background: rgba(255,255,255,0.92);
      object-fit: contain;
      display: block;
    }

@media (max-width: 540px) {
  .trustpilot-image {
      width: 62vw;
      max-width: 240px;
      margin: 0 auto;
    }
}

    .trustpilot-shell {
      /* Align to FAQ/tab content width */
      max-width: var(--tab-content-max-width, 560px);
      margin: 0 auto;
      border-radius: 28px;
      border: 1px solid rgba(18,126,99,0.12);
      background: rgba(255, 255, 255, 0.68);
      backdrop-filter: blur(20px) saturate(135%);
      box-shadow: 0 24px 48px rgba(16, 48, 42, 0.12);
      padding: clamp(24px, 4.4vw, 36px);
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.6vw, 24px);
      align-items: center;
      text-align: center;
    }
    /* Minimal Trustpilot presentation: focus on the badge only */
    .trustpilot-header { display: none !important; }


    .trustpilot-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      color: #0f4f3e;
    }

    .trustpilot-eyebrow {
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: rgba(12,101,77,0.62);
    }

    .trustpilot-headline {
      margin: 0;
      font-size: clamp(18px, 3.6vw, 21px);
      font-weight: 600;
      letter-spacing: -0.02em;
      font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .trustpilot-copy {
      margin: 0;
      font-size: 12.8px;
      line-height: 1.58;
      color: rgba(40, 90, 78, 0.78);
      max-width: 440px;
    }

    /* Old trustpilot-frame styles - no longer used */

    @media (min-width: 640px) {
      .trustpilot-header {
        text-align: left;
        align-items: flex-start;
      }
      .faq-header {
        text-align: left;
        align-items: flex-start;
      }
      .faq-switch {
        align-items: flex-start;
      }
    }

    .faq-accordion-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: #18a477;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .faq-accordion-trigger[aria-expanded="true"] .faq-accordion-icon {
      transform: rotate(180deg);
    }

    .faq-accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-accordion-answer {
      padding: 0 20px 18px;
      border-top: 1px solid rgba(28,174,130,0.06);
      background: rgba(255,255,255,0.82);
    }

    .faq-accordion-answer p {
      margin: 10px 0 0;
      font-size: calc(var(--font-size-small) - 0.3px);
      line-height: var(--line-height-body);
      color: rgba(60, 92, 85, 0.88);
      font-family: var(--font-family-base);
      font-weight: var(--weight-regular);
    }

    .faq-accordion-item--hidden {
      opacity: 0;
      transform: translateY(18px);
      max-height: 0;
      margin: 0;
      border-width: 0;
      pointer-events: none;
      box-shadow: none;
    }

    .faq-fade {
      position: absolute;
      inset: auto 0 0 0;
      height: 54px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 13px;
      border-radius: 0 0 14px 14px;
      pointer-events: auto;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(235,247,241,0.72) 60%, rgba(224,243,236,0.94) 100%);
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 1;
      cursor: pointer;
    }

    .faq-fade--hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .faq-fade--showless {
      background: none;
      padding-bottom: 12px;
    }

    .faq-fade:focus-visible {
      outline: 2px solid rgba(16,128,96,0.6);
      outline-offset: 4px;
    }

    .faq-fade__label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 10.8px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #114f3f;
      text-align: center;
      pointer-events: none;
      transition: color 0.2s ease, opacity 0.2s ease;
      padding: 0 12px;
      gap: 0;
    }

    .faq-fade:hover .faq-fade__label,
    .faq-fade:focus-visible .faq-fade__label {
      color: #0a7d5d;
    }

    .faq-fade--showless .faq-fade__label {
      opacity: 0.75;
    }

    .faq-fade__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(28,174,130,0.12);
      color: #0a7d5d;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .faq-fade:hover .faq-fade__icon,
    .faq-fade:focus-visible .faq-fade__icon {
      background: rgba(28,174,130,0.2);
    }

    .faq-fade__icon .faq-fade__svg {
      width: 12px;
      height: 12px;
      display: block;
    }

    @media (max-width: 768px) {
      .faq-accordion {
        padding-bottom: 64px;
      }

      .faq-fade {
        padding-bottom: 16px;
      }

      .faq-fade--showless {
        padding-bottom: 12px;
      }

      .faq-tabs {
        gap: 6px;
        margin-bottom: 10px;
        justify-content: flex-start;
        padding-bottom: 0;
        touch-action: pan-x;
        -ms-touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
      }

      .faq-tabs::-webkit-scrollbar {
        display: none;
      }

      .faq-tab {
        padding: 5px 12px;
        font-size: 11px;
      }

      .faq-accordion-trigger {
        padding: 12px 14px;
        gap: 10px;
      }

      .faq-accordion-question {
        font-size: calc(var(--font-size-label) - 1px);
      }

      .faq-accordion-answer {
        padding: 0 14px 12px;
      }

      .faq-accordion-answer p {
        font-size: calc(var(--font-size-small) - 1px);
      }
      .course-parts__summary {
        font-size: 11px;
        padding: 12px 14px;
      }

      .seo-hero__summary::before,
      .course-parts__summary::before {
        width: 12px;
        height: 12px;
      }

      .seo-hero__content,
      .course-parts__content {
        padding: 16px;
      }

      .seo-card,
      .course-part-card {
        border-radius: 16px;
      }

      .seo-hero__intro h1 {
        font-size: 18px;
        line-height: 1.22;
      }

      .seo-hero__lede {
        font-size: 11.5px;
      }

      .seo-card h2 {
        font-size: 12.5px;
      }

      .seo-card p,
      .seo-card ul,
      .seo-card ol,
      .course-part-card__description {
        font-size: 10.8px;
      }

      .seo-hero__grid,
      .course-part-card__grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      
      .seo-hero__details,
      .course-parts__details {
        border-radius: 20px;
        padding: 0;
        margin-bottom: 20px;
      }
      
      .seo-hero__summary,
      .course-parts__summary {
        padding: 14px 18px;
        font-size: 12px;
      }
      
      .seo-hero__content {
        padding: 16px 18px 20px;
      }
      
      .seo-hero__intro {
        margin-bottom: 16px;
      }
      
      .seo-hero__intro h1 {
        font-size: 18px;
        margin-bottom: 10px;
      }
      
      .seo-hero__intro p {
        font-size: 12px;
        line-height: 1.6;
      }
      
      .seo-card {
        padding: 14px 16px;
        border-radius: 14px;
      }
      
      .seo-card h2 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .seo-card p,
      .seo-card ul,
      .seo-card ol {
        font-size: 11px;
        line-height: 1.5;
      }
      
      .seo-card ul,
      .seo-card ol {
        padding-left: 16px;
      }
      
      .seo-card li + li {
        margin-top: 4px;
      }
      
      .seo-hero__footer {
        padding: 14px 16px;
        border-radius: 14px;
      }
      
      .seo-hero__footer h3 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .seo-hero__footer ol {
        padding-left: 16px;
        font-size: 11px;
      }
      
      .seo-hero__footer li + li {
        margin-top: 4px;
      }
    }
    
    /* ========== Course Parts Section (Premium Collapsible) ========== */
    .course-parts[hidden] {
      display: none;
    }

    .course-part-card__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: clamp(16px, 3vw, 24px);
    }

    .course-part-card {
      position: relative;
      border: 1px solid rgba(28,174,130,0.12);
      border-radius: 18px;
      padding: clamp(16px, 3vw, 22px);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 10px 28px rgba(28,174,130,0.08);
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
      width: 100%;
    }

    .course-part-card__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .course-part-card__identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .course-part-card__index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(28,174,130,0.12);
      color: #1cae82;
      font-weight: 700;
      font-size: 14px;
    }

    .course-part-card__titles {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .course-part-card__name {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: #1f4f44;
    }

    .course-part-card__duration {
      font-size: 12px;
      font-weight: 600;
      color: #16956e;
    }

    .course-part-card__description {
      margin: 0;
      font-size: 12px;
      line-height: 1.55;
      color: #526861;
    }

    .course-part-card__seo-title {
      margin: 12px 0 8px;
      padding-top: 12px;
      border-top: 1px solid rgba(28, 174, 130, 0.1);
      font-size: 12px;
      font-weight: 600;
      color: #1cae82;
      line-height: 1.38;
      font-family: 'Sora', sans-serif;
      letter-spacing: 0.008em;
    }

    .course-part-card__seo-description {
      margin: 0;
      font-size: 10.8px;
      line-height: 1.55;
      color: #526861;
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
    }

    .course-part-card__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      background: linear-gradient(135deg, rgba(28,174,130,0.22) 0%, rgba(55,227,159,0.28) 100%);
      color: #0f4034;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px -10px rgba(28,174,130,0.55);
    }

    .course-part-card--current {
      border-color: rgba(28,174,130,0.42);
      box-shadow: 0 20px 44px rgba(16, 48, 42, 0.18), 0 0 0 1px rgba(55,227,159,0.18);
      background: linear-gradient(180deg, rgba(242,252,247,0.95) 0%, rgba(228,248,240,0.98) 100%);
      transform: translateY(-2px);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .course-part-card--current .course-part-card__index {
      background: linear-gradient(135deg, rgba(28,174,130,0.95), rgba(55,227,159,0.9));
      color: #ffffff;
      box-shadow: 0 10px 18px -10px rgba(28,174,130,0.6);
    }

    .course-part-card--current .course-part-card__name {
      color: #115041;
    }

    .course-part-card--current .course-part-card__description {
      color: #2f5a4f;
    }

    .course-parts__status {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: clamp(16px, 3vw, 24px);
      padding: clamp(14px, 2.5vw, 20px);
      border-radius: 16px;
      border: 1px solid rgba(28,174,130,0.24);
      background: linear-gradient(135deg, rgba(28,174,130,0.08) 0%, rgba(55,227,159,0.12) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    }

    .course-parts__status-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #0f4034;
      opacity: 0.85;
    }

    .course-parts__status-title {
      font-family: 'Sora', sans-serif;
      font-size: clamp(14px, 2.4vw, 18px);
      font-weight: 640;
      color: #103c31;
      letter-spacing: -0.01em;
    }

    .course-parts__status-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      color: #2f5a4f;
      font-size: 12px;
      line-height: 1.55;
    }

    .course-parts__status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(28,174,130,0.16);
      color: #0f4034;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .course-parts__status-description {
      flex: 1 1 200px;
    }

    @media (max-width: 768px) {
      .course-part-card__grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .course-part-card {
        border-radius: 16px;
        padding: 16px 16px 18px;
        box-shadow: 0 12px 28px rgba(16, 48, 42, 0.12);
      }

      .course-part-card__identity {
        align-items: flex-start;
      }

      .course-part-card__badge {
        font-size: 10px;
        padding: 3px 8px;
      }

      .course-parts__status {
        padding: 14px;
        gap: 4px;
      }

      .course-parts__status-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .course-part-card__name {
        font-size: 14px;
      }

      .course-part-card__description {
        font-size: 11px;
      }

      .course-part-card__seo-title {
        font-size: 12px;
        margin-top: 10px;
        padding-top: 10px;
      }

      .course-part-card__seo-description {
        font-size: 11px;
        line-height: 1.55;
      }

      .course-parts {
        padding: 0 12px;
      }

      .course-parts__content {
        padding: 14px 16px 18px;
      }
    }
    
    .donation-card p {
      color: var(--text);
      font-size: 12px;
      line-height: 1.5;
      margin: 0 0 20px 0;
    }
    
    .donation-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      color: #9bb0a6;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s ease;
    }
    
    .donation-close:hover {
      color: #1cae82;
      background: rgba(28, 174, 130, 0.1);
    }
    
    .paypal-container {
      margin: 20px 0;
    }
    
    /* Innovative app-style donation button */
    .custom-donate-btn {
      background: linear-gradient(135deg, #ffc439 0%, #ffb400 100%);
      color: #1a1a1a;
      border: none;
      border-radius: 12px;
      padding: 12px 20px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(255, 196, 57, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.3px;
    }
    
    .custom-donate-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: left 0.6s ease;
    }
    
    .custom-donate-btn:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 8px 24px rgba(255, 196, 57, 0.4);
    }
    
    .custom-donate-btn:hover::before {
      left: 100%;
    }
    
    .custom-donate-btn:active {
      transform: translateY(0) scale(1.02);
      box-shadow: 0 4px 12px rgba(255, 196, 57, 0.3);
    }
    
    
    @keyframes gentlePulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.9;
      }
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }
    
    /* Hide the default PayPal button */
    .paypal-container form {
      display: none;
    }
    /* Enhanced course dropdown styling */
    .course-select-dropdown {
      backdrop-filter: blur(20px);
      border: 1px solid rgba(28,174,130,0.1);
      box-shadow: 0 20px 40px rgba(15,35,28,0.1), 0 8px 16px rgba(15,35,28,0.05);
    }
    .course-select-option {
      position: relative;
      overflow: hidden;
    }
    .course-select-option::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(28,174,130,0.05), transparent);
      transition: left 0.4s ease;
    }
    .course-select-option:hover::before {
      left: 100%;
    }
    /* Premium Mobile-first centered header styling */
    .nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 4px 0 1px 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(248,252,250,0.99) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border-bottom: 1px solid rgba(28,174,130,0.06);
      box-shadow: 0 1px 20px rgba(28,174,130,0.03), 0 1px 6px rgba(0,0,0,0.01);
    }
    .centered-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 100%;
      max-width: 400px;
      margin: 24px auto 18px;
    }
    .centered-header h1,
    .centered-header .vipassana-logo-heading {
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      font-size: 20px;
      color: var(--strong);
      margin: 0;
      letter-spacing: 0.6px;
      text-align: center;
    }
    .simple-part-selector {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto 0px;
    }
    .simple-part-selector h1,
    .simple-part-selector .vipassana-logo-heading {
      margin: 0;
      font-size: 24px !important;
      font-weight: 300;
      color: var(--green-600);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      width: max-content;
    }
      .part-navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Slightly larger scale and smaller top margin to reduce whitespace */
        transform: scale(0.9);
        margin-top: 0 !important;
        gap: 8px;
      }
    .horizontal-carousel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0px;
      position: relative;
      /* Enable interaction only when the dropdown is expanded */
      cursor: default;
      user-select: none;
      pointer-events: none;
    }
    
    /* Consistent alignment for all side circles */
    .horizontal-carousel .prev-part,
    .horizontal-carousel .next-part {
      align-self: center;
    }
    .expandable-parts-section.expanded .horizontal-carousel { pointer-events: all; cursor: grab; }
    .expandable-parts-section.expanded .horizontal-carousel:active { cursor: grabbing; }
    .main-circle-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: grab;
      position: relative;
      isolation: isolate;
      transform: translateZ(0);
      will-change: auto;
    }

    .main-circle-container:active {
      cursor: grabbing;
    }
    .nav-arrow {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--green-600);
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(42, 127, 105, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    .nav-arrow:hover {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      transform: scale(1.1);
      box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(42, 127, 105, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .nav-arrow.small-arrow {
      width: 20px;
      height: 20px;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(42, 127, 105, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    .nav-arrow.small-arrow:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.2);
      box-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(42, 127, 105, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    .single-number-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .zoom-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
      border-radius: 50%;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: all 0.28s ease;
      z-index: 1000;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 
        0 4px 18px rgba(0, 0, 0, 0.08),
        0 2px 10px rgba(28, 174, 130, 0.12);
    }
    .zoom-overlay:not(.show) .minimal-carousel {
      pointer-events: all;
    }
    .zoom-overlay.show {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }
.prev-part, .next-part {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background: rgba(245, 252, 249, 0.96);
  border: 1px solid rgba(18,126,99,0.16);
  box-shadow: 
    0 8px 24px rgba(16, 94, 77, 0.14),
    0 4px 12px rgba(28, 174, 130, 0.12);
  color: rgba(12, 88, 72, 0.68);
  text-shadow: 0 2px 8px rgba(11, 64, 52, 0.08);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: default;
  pointer-events: none;
  z-index: 10;
  position: relative;
  margin: 0 -15px;
}
.expandable-parts-section.expanded .prev-part,
.expandable-parts-section.expanded .next-part {
  pointer-events: auto;
  cursor: pointer;
}

/* Innovative navigation arrows - aligned with PART text level */
.nav-arrow {
  position: absolute;
  top: calc(50% - 15px);
      transform: translateY(-50%);
      width: 50px;
      height: 2px;
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      pointer-events: none;
      z-index: 5;
    }
    
    .nav-arrow-left {
      left: calc(50% + 30px);
      margin-left: 0;
    }
    
    .nav-arrow-right {
      right: calc(50% + 30px);
      margin-right: 0;
    }
    
    /* Elegant flowing line with gradient */
    .nav-arrow::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(28, 174, 130, 0.3) 20%, 
        rgba(28, 174, 130, 0.8) 50%, 
        rgba(28, 174, 130, 0.3) 80%, 
        transparent 100%);
      border-radius: 1px;
      transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    /* Innovative arrow head with flowing design */
    .nav-arrow::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      border-right: 2px solid rgba(28, 174, 130, 0.8);
      border-bottom: 2px solid rgba(28, 174, 130, 0.8);
      transform: rotate(-45deg);
      transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      filter: drop-shadow(0 0 4px rgba(28, 174, 130, 0.3));
    }
    
    .nav-arrow-right::after {
      transform: rotate(135deg);
    }
    
    /* Harmonious drag flow animations */
    .nav-arrow.flowing {
      opacity: 0.8;
      animation: zenFlow 1.2s ease-in-out infinite;
    }
    
    .nav-arrow-left.flowing {
      animation: zenFlowLeft 1.2s ease-in-out infinite;
    }
    
    .nav-arrow-right.flowing {
      animation: zenFlowRight 1.2s ease-in-out infinite;
    }
    
    /* Zen-inspired flowing animations */
    @keyframes zenFlow {
      0%, 100% { 
        opacity: 0.4;
        transform: translateY(-50%) scale(1);
      }
      50% { 
        opacity: 0.9;
        transform: translateY(-50%) scale(1.05);
      }
    }
    
    @keyframes zenFlowLeft {
      0% { 
        opacity: 0.4;
        transform: translateY(-50%) translateX(0px) scale(1);
      }
      25% { 
        opacity: 0.7;
        transform: translateY(-50%) translateX(-3px) scale(1.02);
      }
      50% { 
        opacity: 0.9;
        transform: translateY(-50%) translateX(-6px) scale(1.05);
      }
      75% { 
        opacity: 0.7;
        transform: translateY(-50%) translateX(-3px) scale(1.02);
      }
      100% { 
        opacity: 0.4;
        transform: translateY(-50%) translateX(0px) scale(1);
      }
    }
    
    @keyframes zenFlowRight {
      0% { 
        opacity: 0.4;
        transform: translateY(-50%) translateX(0px) scale(1);
      }
      25% { 
        opacity: 0.7;
        transform: translateY(-50%) translateX(3px) scale(1.02);
      }
      50% { 
        opacity: 0.9;
        transform: translateY(-50%) translateX(6px) scale(1.05);
      }
      75% { 
        opacity: 0.7;
        transform: translateY(-50%) translateX(3px) scale(1.02);
      }
      100% { 
        opacity: 0.4;
        transform: translateY(-50%) translateX(0px) scale(1);
      }
    }
    
    /* Elegant hover states */
    .nav-arrow:hover {
      opacity: 0.8;
      transform: translateY(-50%) scale(1.1);
    }
    
    .nav-arrow:hover::before {
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(28, 174, 130, 0.5) 20%, 
        rgba(28, 174, 130, 1) 50%, 
        rgba(28, 174, 130, 0.5) 80%, 
        transparent 100%);
    }
    
    .nav-arrow:hover::after {
      filter: drop-shadow(0 0 8px rgba(28, 174, 130, 0.6));
    }
    
    /* Arrow animations on hover */
    .prev-part:hover ~ .nav-arrow-left,
    .next-part:hover ~ .nav-arrow-right {
      opacity: 1;
      color: rgba(28, 174, 130, 0.9);
      transform: translateY(-50%) scale(1.1);
    }
    
    .nav-arrow-left:hover {
      opacity: 1;
      color: rgba(28, 174, 130, 0.9);
      transform: translateY(-50%) scale(1.1);
    }
    
    .nav-arrow-right:hover {
      opacity: 1;
      color: rgba(28, 174, 130, 0.9);
      transform: translateY(-50%) scale(1.1);
    }
.prev-part:hover, .next-part:hover {
      background: rgba(28, 174, 130, 0.22);
      color: #ffffff;
      text-shadow: none;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        0 16px 34px rgba(16, 94, 77, 0.22),
        0 10px 22px rgba(28, 174, 130, 0.2);
    }
    @keyframes zoomPulse {
      0%, 100% { 
        box-shadow: 
          0 0 40px rgba(28, 174, 130, 0.4),
          0 20px 60px rgba(0, 0, 0, 0.15),
          0 8px 32px rgba(28, 174, 130, 0.2),
          inset 0 2px 0 rgba(255, 255, 255, 0.3),
          inset 0 -2px 0 rgba(0, 0, 0, 0.1);
      }
      50% { 
        box-shadow: 
          0 0 60px rgba(28, 174, 130, 0.6),
          0 25px 70px rgba(0, 0, 0, 0.2),
          0 12px 40px rgba(28, 174, 130, 0.3),
          inset 0 2px 0 rgba(255, 255, 255, 0.4),
          inset 0 -2px 0 rgba(0, 0, 0, 0.15);
      }
    }
    .part-label {
      position: static;
      text-align: center;
      margin: 0 0 6px 0;
      font-family: 'Sora', sans-serif;
      font-size: 10px;
      font-weight: 600;
      color: var(--green-600);
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.8;
    }
    @media (max-width: 768px) {
      .part-navigation {
        margin-top: 0 !important;
      }
      .single-number-container {
        gap: 12px;
      }
      .glass-number.mirror-glass {
        width: 60px;
        height: 60px;
        font-size: 24px;
      }
      .part-label {
        font-size: 10px;
        margin: 0 0 12px 0;
      }
      .part-info {
        font-size: 11px;
        padding: 6px 12px;
        margin-top: 0;
        letter-spacing: 0.25px;
        color: #62c890;
        max-width: 260px;
        overflow: hidden;
        line-height: 1.15;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        position:relative;
        white-space:nowrap;
        text-overflow:ellipsis;
        border-radius:10px;
        backdrop-filter:blur(6px) saturate(130%);
      }
      .part-info .part-base-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
      .part-info.has-coming-soon {
        flex-direction: column;
        align-items: center;
        padding-right: 0;
        gap: 6px;
        text-align: center;
      }
      .part-info.has-coming-soon .part-base-title {
        width: 100%;
        justify-content: center;
      }
      .coming-soon-badge {
        flex:0 0 auto;
        background:linear-gradient(135deg,#ff9f2d,#ff7f00);
        color:#fff;
        font-size:10px;
        font-weight:600;
        padding:5px 10px;
        border-radius:14px;
        letter-spacing:.6px;
        line-height:1;
        box-shadow:0 2px 6px -2px rgba(0,0,0,.35);
        white-space:nowrap;
        position:relative;
      }
      .part-info.has-coming-soon .coming-soon-badge {
        position: static;
        margin-top: 0;
        box-shadow: 0 6px 18px rgba(255,127,0,0.28);
      }
      .coming-soon-badge:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none; }
      @keyframes csPulse { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-1px);} }
      
      .part-info[data-part="2"],
      .part-info[data-part="3"], 
      .part-info[data-part="4"],
      .part-info[data-part="5"] {
        font-size: 10px;
        padding: 6px 14px;
        width: auto;
        max-width: 260px;
        margin-left:auto;
        margin-right:auto;
      }
      .horizontal-carousel {
        gap: 0px;
      }
      .prev-part, .next-part {
        width: 58px;
        height: 58px;
        font-size: 20px;
        margin: 0 -10px;
      }
      
      /* Mobile navigation arrows - aligned with PART text level */
      .nav-arrow {
        position: absolute;
        width: 40px;
        height: 2px;
        top: calc(50% - 25px);
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.4;
        transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        pointer-events: none;
        z-index: 5;
      }
      
      .nav-arrow-left {
        left: calc(50% + 26px);
        margin-left: 0;
      }
      
      .nav-arrow-right {
        right: calc(50% + 26px);
        margin-right: 0;
      }
      
      /* Mobile arrow styling */
      .nav-arrow::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, 
          transparent 0%, 
          rgba(28, 174, 130, 0.3) 20%, 
          rgba(28, 174, 130, 0.8) 50%, 
          rgba(28, 174, 130, 0.3) 80%, 
          transparent 100%);
        border-radius: 1px;
        transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      
      .nav-arrow::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(28, 174, 130, 0.8);
        border-bottom: 2px solid rgba(28, 174, 130, 0.8);
        transform: rotate(-45deg);
        transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        filter: drop-shadow(0 0 3px rgba(28, 174, 130, 0.3));
      }
      
      .nav-arrow-right::after {
        transform: rotate(135deg);
      }
    }
    .glass-number {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--green-600);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(42, 127, 105, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .glass-number.active {
      background: rgba(28, 174, 130, 0.3);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      color: white;
      transform: scale(1.1);
      box-shadow: 
        0 0 20px var(--neon-soft),
        0 8px 24px rgba(28, 174, 130, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.4);
    }
    .glass-number.mirror-glass {
      width: 60px;
      height: 60px;
      font-size: 24px;
      background: rgba(28, 174, 130, 0.3);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      color: white;
      transform: scale(1.1);
      box-shadow: 
        0 0 20px var(--neon-soft),
        0 8px 24px rgba(28, 174, 130, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      border: 2px solid rgba(255, 255, 255, 0.4);
      cursor: pointer;
    }
    .glass-number.mirror-glass:hover {
      transform: scale(1.05);
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.2),
        0 6px 20px rgba(42, 127, 105, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    }

    /* Enhanced meditative drag animation styles */
    .glass-number.mirror-glass {
      transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: transform, box-shadow, background, filter;
    }

    .glass-number.mirror-glass.dragging {
      transform: scale(1.15) rotate(1deg);
      transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.3),
        0 15px 40px rgba(28, 174, 130, 0.4),
        0 8px 20px rgba(55, 227, 159, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        0 0 0 2px rgba(28, 174, 130, 0.6),
        0 0 40px rgba(28, 174, 130, 0.3);
      background: linear-gradient(135deg, rgba(28, 174, 130, 0.4), rgba(55, 227, 159, 0.3));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    @keyframes meditativePulse {
      0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
      }
      50% { 
        transform: scale(1.05); 
        opacity: 0.9; 
      }
    }

    .glass-number.mirror-glass.number-changing {
      animation: meditativePulse 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .glass-number.mirror-glass.transparent-glass {
      background: linear-gradient(135deg, rgba(28, 174, 130, 0.15), rgba(55, 227, 159, 0.1));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(28, 174, 130, 0.2),
        0 3px 10px rgba(55, 227, 159, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      opacity: 0.85;
    }

    .glass-number.mirror-glass.drag-preview {
      opacity: 0.8;
      transform: scale(0.9) rotate(-1deg);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      filter: blur(0.5px);
    }

    /* Enhanced meditative side number animations */
    .prev-part, .next-part {
      transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: transform, opacity, box-shadow;
    }

    .prev-part.updating, .next-part.updating {
      animation: meditativeSideFlow 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    @keyframes meditativeSideFlow {
      0% { 
        transform: scale(1.0) translateY(0px) rotate(0deg);
        opacity: 0.7;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
      25% { 
        transform: scale(1.05) translateY(-1px) rotate(-0.5deg);
        opacity: 0.85;
        box-shadow: 0 6px 20px rgba(28, 174, 130, 0.15);
      }
      50% { 
        transform: scale(1.1) translateY(-2px) rotate(0deg);
        opacity: 1.0;
        box-shadow: 0 8px 24px rgba(28, 174, 130, 0.2);
      }
      75% { 
        transform: scale(1.05) translateY(-1px) rotate(0.5deg);
        opacity: 0.9;
        box-shadow: 0 6px 20px rgba(28, 174, 130, 0.15);
      }
      100% { 
        transform: scale(1.0) translateY(0px) rotate(0deg);
        opacity: 0.8;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }
    /* Mobile responsive styles */
    @media (max-width: 640px) {
      .simple-part-selector h1 {
        font-size: 24px !important;
        margin: 0;
      }
      
      /* Force VIPASSANA title to be same size as desktop */
      .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      .part-navigation {
        gap: 6px;
      }
      
      .nav-arrow {
        width: 36px;
        height: 36px;
        font-size: 18px;
      }
      
      .nav-arrow.small-arrow {
        width: 18px;
        height: 18px;
        font-size: 10px;
      }
      
      
      .glass-number {
        width: 36px;
        height: 36px;
        font-size: 14px;
      }
      .glass-number.mirror-glass {
        width: 60px;
        height: 60px;
        font-size: 24px;
      }
      .inner-arrows {
        width: 60px;
        height: 60px;
      }
      .arrow-indicator {
        width: 14px;
        height: 14px;
        font-size: 9px;
      }
      .left-arrow-indicator {
        left: 8px;
      }
      .right-arrow-indicator {
        right: 8px;
      }
      .rotation-track {
        width: 35px;
        height: 35px;
      }
      .part-numbers-row {
        padding: 16px 20px;
        gap: 12px;
      }
      .part-number-item {
        width: 40px;
        height: 40px;
        font-size: 16px;
      }
      .nav-arrow-zoom {
        width: 32px;
        height: 32px;
        font-size: 16px;
      }
      .part-label {
        font-size: 9px;
        margin: 0 0 10px 0;
      }
    }
    
    /* Smaller arrows for smartphones */
    @media (max-width: 480px) {
      /* Make circular arrows smaller and add more space from PART text */
      .prev-part, .next-part {
        width: 40px;
        height: 40px;
        font-size: 14px;
        /* move them further outwards from the center, but keep layout stable */
        margin: 0 4px;
        /* prevent squashing in flex layout on small screens */
        flex: 0 0 40px;
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
      }
      
      /* Increase gap between arrows and content for more space around PART text */
      .horizontal-carousel {
        gap: 0px;
      }

      /* Slightly widen the center to push side arrows further left/right */
      .arrows-part-center {
        /* avoid forcing side circles to shrink */
        width: 240px !important;
      }
      /* Keep the decorative flowing indicators closer to the sides on phones */
      .nav-arrow-left {
        left: calc(50% + 34px);
      }
      .nav-arrow-right {
        right: calc(50% + 34px);
      }
    }
    
    /* World-Class Premium Meditation Menu - Higher Position */
    .header-actions {
      position: fixed !important;
      top: 12% !important; /* move much closer to top to reduce margin */
      right: 16px !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      z-index: 2000; /* Higher z-index to be above other elements */
      background: linear-gradient(135deg, 
        rgba(255,255,255,0.96) 0%, 
        rgba(248,252,250,0.94) 50%,
        rgba(254,255,255,0.98) 100%);
      backdrop-filter: blur(36px) saturate(200%) brightness(108%);
      -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(108%);
      border: 1px solid rgba(28, 174, 130, 0.10);
      border-radius: 36px;
      box-shadow: 
        0 28px 96px -16px rgba(15, 35, 28, 0.06),
        0 12px 40px -8px rgba(28, 174, 130, 0.08),
        0 6px 20px -4px rgba(0, 0, 0, 0.03),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(28, 174, 130, 0.04);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 12px 8px 26px !important; /* tighter shell while preserving language pill room */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
  gap: 6px !important;
  width: 48px; /* slimmer shell */
    min-height: auto !important;
      pointer-events: auto;
      margin: 0;
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      isolation: isolate;
      cursor: default; /* Normal cursor - only buttons show pointer */
    }
    

/* Ensure Real Progress popup sits above statusRing */
#progressModalOverlay,
#progressPopupCard {
  z-index: 200001 !important;
}
    /* Sophisticated Shimmer Effect - Disabled */
    .header-actions::before {
      content: '';
      position: absolute;
      top: 0;
      left: -120%;
      width: 100%;
      height: 100%;
      background: transparent;
      transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: inherit;
      z-index: 1;
      pointer-events: none; /* Don't interfere with interactions */
      filter: blur(0.5px);
    }
    
    .header-actions:hover::before {
      display: none;
    }
    
    /* Disable drawer hover effects on desktop - only buttons should have hover */
    @media (min-width: 769px) {
      .header-actions:hover {
        /* No changes on hover - keep same as default */
        transform: translateY(-50%) !important;
        background: linear-gradient(135deg, 
          rgba(255,255,255,0.96) 0%, 
          rgba(248,252,250,0.94) 50%,
          rgba(254,255,255,0.98) 100%);
        border-color: rgba(28, 174, 130, 0.10);
        box-shadow: 
          0 28px 96px -16px rgba(15, 35, 28, 0.06),
          0 12px 40px -8px rgba(28, 174, 130, 0.08),
          0 6px 20px -4px rgba(0, 0, 0, 0.03),
          inset 0 2px 0 rgba(255, 255, 255, 0.9),
          inset 0 -1px 0 rgba(28, 174, 130, 0.04);
      }
    }
    
    /* Mobile keeps hover effect */
    @media (max-width: 768px) {
      .header-actions:hover {
        transform: translateY(-50%) !important;
        background: linear-gradient(135deg, 
          rgba(255,255,255,0.99) 0%, 
          rgba(248,252,250,0.97) 50%,
          rgba(254,255,255,1) 100%);
        border-color: rgba(255,255,255,0.2);
        box-shadow: 
          0 36px 120px -20px rgba(15, 35, 28, 0.08),
          0 16px 56px -12px rgba(0, 0, 0, 0.06),
          0 8px 28px -6px rgba(0, 0, 0, 0.04),
          inset 0 3px 0 rgba(255, 255, 255, 0.95),
          inset 0 -1px 0 rgba(0, 0, 0, 0.02);
      }
    }
    
    .header-actions .icon-btn {
      width: 44px;  /* slightly smaller to thin the rail */
      height: 44px;
      border-radius: 22px;
      border: 1px solid rgba(28, 174, 130, 0.06);
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.92) 0%,
        rgba(248, 252, 250, 0.88) 50%,
        rgba(255, 255, 255, 0.94) 100%);
      color: rgba(46, 102, 93, 0.72);
      cursor: pointer;
  transition: background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 500;
      pointer-events: auto !important;
      z-index: 10;
      overflow: hidden;
      padding: 0;
      margin: 0;
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 
        0 6px 20px -6px rgba(28, 174, 130, 0.08),
        0 3px 10px -3px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(28, 174, 130, 0.02);
      will-change: transform;
    }
    
    .header-actions .icon-btn svg {
      width: 24px;
      height: 24px;
      display: block;
      margin: auto;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      filter: drop-shadow(0 1px 3px rgba(28, 174, 130, 0.06));
      position: relative;
      z-index: 2;
    }
    
    .header-actions .icon-btn:hover svg {
  transform: none;
      filter: drop-shadow(0 2px 6px rgba(28, 174, 130, 0.12));
    }
    
    .header-actions .icon-btn:active svg {
  transform: none;
      transition: all 0.1s ease;
    }
    
    /* Zen Meditation Button States */
  .header-actions .icon-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 22px;
      background: linear-gradient(135deg, 
        rgba(28, 174, 130, 0.12) 0%,
        rgba(55, 227, 159, 0.08) 50%,
        rgba(28, 174, 130, 0.12) 100%);
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .header-actions .icon-btn:hover::before {
      opacity: 0;
      transform: scale(0.85);
    }
    
    .header-actions .icon-btn:active::before {
      transform: scale(0.92);
      opacity: 0.8;
    }
    
    /* Dharma Wheel rolling on hover (desktop) */
    #btnPartSwitcher svg {
      transition: transform 0.3s ease;
      will-change: transform;
    }
    #btnPartSwitcher:hover svg {
      animation: wheelRoll 1.4s linear infinite;
    }
    @keyframes wheelRoll {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .header-actions .icon-btn:hover {
      color: rgba(46, 102, 93, 0.88);
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 252, 250, 0.95) 50%,
        rgba(255, 255, 255, 1) 100%);
      border-color: rgba(255, 255, 255, 0.2);
  transform: none;
      box-shadow: 
        0 8px 22px -10px rgba(0, 0, 0, 0.12),
        0 4px 12px -6px rgba(0, 0, 0, 0.06),
        inset 0 2px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    }
    
    .header-actions .icon-btn:active {
  transform: none;
      box-shadow: 
        0 4px 12px -2px rgba(0, 0, 0, 0.1),
        0 2px 6px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Sliding Drawer Collapsed State */
    .header-actions.collapsed {
      position: fixed !important;
      top: 38% !important;
      right: -43px !important; /* Slide off-screen to the right */
      left: auto !important;
      transform: translateY(-50%) !important;
      opacity: 1;
  width: 50px;
      min-height: 220px;
      border-radius: 30px;
      padding: 8px 6px 12px; /* compact padding keeps buttons centered */
      flex-direction: column;
      gap: 6px;
      background: linear-gradient(135deg, 
        rgba(250,251,251,0.92) 0%, 
        rgba(248,252,250,0.88) 50%,
        rgba(252,253,253,0.94) 100%);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      box-shadow: 
        0 20px 64px -12px rgba(15, 35, 28, 0.04),
        0 8px 24px -6px rgba(28, 174, 130, 0.06),
        0 4px 12px -2px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      border-color: rgba(28, 174, 130, 0.06);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease;
      will-change: transform, right;
    }
    
    .header-actions.collapsed .icon-btn {
      opacity: 0.75;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      pointer-events: auto !important;
      background: rgba(255, 255, 255, 0.7);
      border-color: rgba(28, 174, 130, 0.06);
      box-shadow: 
        0 2px 8px -2px rgba(28, 174, 130, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                  opacity 0.2s ease,
                  background 0.2s ease;
      position: relative !important;
    }
    
    .header-actions.collapsed .icon-btn svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .header-actions.collapsed .icon-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.9);
  transform: none !important;
    }
    
    .header-actions.collapsed .icon-btn:active {
  transform: none !important;
    }

    /* Stabilize drawer while language panel is open */
    #rightMenuDrawer.language-panel-open {
      animation: none !important;
      transition: none !important;
      right: -45px !important;
    }

    #rightMenuDrawer.language-panel-open,
    #rightMenuDrawer.language-panel-open:hover {
      transform: translateY(-50%) !important;
    }

    #rightMenuDrawer.header-actions.collapsed.language-panel-open {
      transform: translateY(-50%) !important;
    }

    #rightMenuDrawer.language-panel-open .icon-btn,
    #rightMenuDrawer.language-panel-open #inMenuLangWrapper .lang-flag-trigger {
      transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
    }

    #rightMenuDrawer.language-panel-open .icon-btn:hover,
    #rightMenuDrawer.language-panel-open #inMenuLangWrapper .lang-flag-trigger:hover {
      transform: none !important;
    }

    #rightMenuDrawer.language-panel-open .icon-btn:active,
    #rightMenuDrawer.language-panel-open #inMenuLangWrapper .lang-flag-trigger:active {
      transform: none !important;
    }

    /* While language panel is open, hard-disable transforms on inner elements */
    #rightMenuDrawer.language-panel-open .icon-btn,
    #rightMenuDrawer.language-panel-open .icon-btn *,
    #rightMenuDrawer.language-panel-open #inMenuLangWrapper .lang-flag-trigger,
    #rightMenuDrawer.language-panel-open #inMenuLangWrapper .lang-flag-trigger * {
      transform: none !important;
    }
    
    /* Subtle Menu Hint Animation - Peek In/Out */
    .header-actions.collapsed {
      animation: none;
    }
    /* Zen Meditation App Tooltips */
    .header-actions .icon-btn[title]:hover::after {
      content: attr(title);
      position: absolute;
      bottom: calc(100% + 16px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(254, 255, 255, 0.96);
      backdrop-filter: blur(24px) saturate(180%) brightness(105%);
      -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(105%);
      color: rgba(46, 102, 93, 0.9);
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      z-index: 1001;
      box-shadow: 
        0 12px 32px -8px rgba(0, 0, 0, 0.15),
        0 6px 20px -6px rgba(28, 174, 130, 0.2),
        0 2px 8px -2px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(28, 174, 130, 0.15);
      opacity: 0;
      animation: zenTooltipIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards;
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    .header-actions .icon-btn[title]:hover::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: rgba(254, 255, 255, 0.96);
      border-right: 1px solid rgba(28, 174, 130, 0.15);
      border-bottom: 1px solid rgba(28, 174, 130, 0.15);
      z-index: 1000;
      opacity: 0;
      animation: zenTooltipIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards;
    }
    
    /* Hide white point/arrow on desktop */
    @media (min-width: 769px) {
      .header-actions .icon-btn[title]:hover::before {
        display: none;
      }
    }
    
    @keyframes zenTooltipIn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }
    
    /* Premium Meditation Menu Drag Effects */
    /* Premium hover states for sophisticated interaction */
    .header-actions:hover {
      backdrop-filter: blur(22px) saturate(120%) brightness(106%);
      -webkit-backdrop-filter: blur(22px) saturate(120%) brightness(106%);
      box-shadow: 
        0 14px 44px -18px rgba(28,174,130,0.08),
        0 8px 28px -12px rgba(0,0,0,0.05),
        inset 0 2px 0 rgba(255,255,255,0.9);
      cursor: grab; /* Indicate draggable */
      transform: translateY(-50%) !important; /* No scale/zoom */
    }
    
    .header-actions:active {
      cursor: grabbing;
      transform: translateY(-50%) !important; /* No scale/zoom */
      box-shadow: 
        0 12px 36px -16px rgba(28,174,130,0.12),
        0 6px 22px -10px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.86);
    }

    /* Clickable green bar for menu hiding - ALWAYS VISIBLE */
    .menu-close-bar {
      position: absolute;
      top: 50%;
      left: -8px;
      width: 4px;
      height: 20px;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.5), 
        rgba(28,174,130,0.8), 
        rgba(28,174,130,0.5));
      border-radius: 2px;
      transform: translateY(-50%);
      opacity: 0.7; /* Always visible on desktop */
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(28,174,130,0.2);
      /* Add drag indicator */
      animation: dragIndicator 3s ease-in-out infinite;
    }
    
    /* Make menu-close-bar more visible when menu is open (not collapsed) */
    .header-actions:not(.collapsed) .menu-close-bar {
      opacity: 0.8 !important;
      animation: dragIndicatorOpen 2s ease-in-out infinite;
    }
    
    @keyframes dragIndicatorMobile {
      0%, 100% { 
        opacity: 0.9; 
        transform: translateY(-50%) translateX(0);
        box-shadow: 0 2px 6px rgba(28,174,130,0.3);
      }
      50% { 
        opacity: 1; 
        transform: translateY(-50%) translateX(-4px);
        box-shadow: 0 3px 10px rgba(28,174,130,0.5);
      }
    }
    
    @keyframes dragIndicatorOpen {
      0%, 100% { 
        opacity: 0.8; 
        transform: translateY(-50%) translateX(0);
        box-shadow: 0 2px 8px rgba(28,174,130,0.2);
      }
      50% { 
        opacity: 1; 
        transform: translateY(-50%) translateX(-3px);
        box-shadow: 0 3px 12px rgba(28,174,130,0.4);
      }
    }
    
    .header-actions:hover .menu-close-bar {
      opacity: 0.9;
      animation: dragHintActive 1.5s ease-in-out infinite;
      box-shadow: 0 3px 12px rgba(28,174,130,0.3);
    }
    
    .menu-close-bar:hover {
      opacity: 0.9 !important;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.4), 
        rgba(28,174,130,0.7), 
        rgba(28,174,130,0.4));
    }
    
    .menu-close-bar:active {
      opacity: 1 !important;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.5), 
        rgba(28,174,130,0.8), 
        rgba(28,174,130,0.5));
    }

    @keyframes dragIndicatorMobile {
      0%, 100% { 
        opacity: 0.9; 
        transform: translateY(-50%) translateX(0);
        box-shadow: 0 2px 6px rgba(28,174,130,0.3);
      }
      50% { 
        opacity: 1; 
        transform: translateY(-50%) translateX(-4px);
        box-shadow: 0 3px 10px rgba(28,174,130,0.5);
      }
    }
    
    @keyframes dragIndicator {
      0%, 100% { 
        opacity: 0.6; 
        transform: translateY(-50%) translateX(0);
      }
      50% { 
        opacity: 0.8; 
        transform: translateY(-50%) translateX(-2px);
      }
    }
    
    @keyframes dragHintActive {
      0%, 100% { 
        opacity: 0.9; 
        transform: translateY(-50%) translateX(0);
      }
      25% { 
        opacity: 1; 
        transform: translateY(-50%) translateX(-3px);
      }
      75% { 
        opacity: 1; 
        transform: translateY(-50%) translateX(-1px);
      }
    }

    @keyframes dragHint {
      0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.5; }
      50% { transform: translateY(-50%) translateX(3px); opacity: 0.8; }
    }

    /* Modifier: hide menu off-screen to the left */
    /* Use ID-specificity to beat existing #rightMenuDrawer.header-actions rules */
    #rightMenuDrawer.header-actions.hidden-left {
      /* Force hide off the left using transform so it wins against any left/right rules */
      right: auto !important;
      left: 0 !important;
      transform: translate(-120%, -50%) !important; /* move 120% of width to the left */
      opacity: 0.96;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    }

    /* Swipe-hidden state: completely off-screen to the right */
    #rightMenuDrawer.header-actions.swipe-hidden {
      right: -80px !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      opacity: 0.3;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, right 0.4s ease !important;
      pointer-events: none;
    }

    /* Premium Swipe Handle - Simple and Clean */
    .swipe-handle {
      position: fixed;
      top: 25%;
      right: -1px;
      width: 6px;
      height: 28px;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.6), 
        rgba(28,174,130,0.8), 
        rgba(28,174,130,0.6));
      border-radius: 3px 0 0 3px;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      cursor: pointer;
      transition: all 0.3s ease;
      transform: translateY(-50%);
      opacity: 0;
      box-shadow: 
        -1px 0 4px rgba(28,174,130,0.15),
        inset 1px 0 0 rgba(255,255,255,0.2);
    }
    
    /* Expanded invisible hit area for easier touch interaction */
    .swipe-handle::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      right: -15px;
      bottom: -20px;
      z-index: -1;
      /* Invisible but interactive area */
      background: transparent;
      border-radius: 8px;
    }

    /* Simple show state - no flashy animations */
    .swipe-handle.show {
      display: block !important;
      opacity: 0.8 !important;
      right: 0px !important;
      animation: simpleSlideIn 0.4s ease forwards;
    }

    /* Simple entrance animation */
    @keyframes simpleSlideIn {
      0% {
        right: -6px;
        opacity: 0;
          width: 64px;
          padding: 18px 8px;
        right: 0px;
        opacity: 0.8;
      }
    }

    /* Clean hover states */
    .swipe-handle:hover {
      right: 1px;
      opacity: 1;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.7), 
        rgba(28,174,130,0.9), 
        rgba(28,174,130,0.7));
      box-shadow: 
        -2px 0 6px rgba(28,174,130,0.2),
        inset 1px 0 0 rgba(255,255,255,0.3);
    }

    /* Simple active state */
    .swipe-handle:active {
      right: 2px;
      opacity: 1;
      background: linear-gradient(to bottom, 
        rgba(28,174,130,0.8), 
        rgba(28,174,130,1), 
        rgba(28,174,130,0.8));
      box-shadow: 
        -2px 0 8px rgba(28,174,130,0.25),
        inset 1px 0 0 rgba(255,255,255,0.4);
    }

    /* Elegant pulsing animation */
    @keyframes premiumPulse {
      0%, 100% { 
        opacity: 0.9;
        box-shadow: 
          -2px 0 8px rgba(28,174,130,0.15),
          inset 1px 0 0 rgba(255,255,255,0.2);
      }
      50% { 
        opacity: 1;
        box-shadow: 
          -4px 0 16px rgba(28,174,130,0.25),
          inset 1px 0 0 rgba(255,255,255,0.3);
      }
    }

    /* Premium responsive design */
    @media (max-width: 768px) {
      .swipe-handle {
        width: 5px;
        height: 26px;
        right: 0px;
      }
      
      .swipe-handle:hover {
        width: 7px;
        height: 30px;
        right: 1px;
      }
      
      .swipe-handle:active {
        width: 7px;
        height: 30px;
        right: 2px;
      }
    }

    /* MOBILE BOTTOM BAR - World-Class Modern Design */
    @media (max-width: 768px) {
      /* Force override ALL existing rules with maximum specificity */
    body #rightMenuDrawer.header-actions,
      body #rightMenuDrawer.header-actions.hidden-left,
      body #rightMenuDrawer.header-actions.swipe-hidden,
      body #rightMenuDrawer.header-actions.collapsed,
      body #rightMenuDrawer.header-actions.mobile-open {
        position: fixed !important;
        bottom: clamp(18px, env(safe-area-inset-bottom) + 18px, 42px) !important;
        right: clamp(16px, env(safe-area-inset-right) + 14px, 32px) !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
      }

      body #rightMenuDrawer.header-actions .icon-btn {
        pointer-events: auto !important;
      }

      body #rightMenuDrawer.header-actions .icon-btn:not(#btnAccount) {
        display: none !important;
      }

      body #rightMenuDrawer.header-actions #btnAccount {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        border-radius: 50% !important;
        box-shadow:
          0 10px 30px rgba(28, 174, 130, 0.35),
          0 6px 18px rgba(28, 174, 130, 0.22),
          0 3px 10px rgba(0, 0, 0, 0.16) !important;
        background: linear-gradient(135deg, rgba(46, 192, 141, 1), rgba(28, 174, 130, 1)) !important;
        pointer-events: auto !important;
      }

      body #rightMenuDrawer.header-actions #inMenuLangWrapper {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        pointer-events: auto !important;
      }

      body #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
        width: 44px !important;
        height: 30px !important;
        border-radius: 12px !important;
        box-shadow:
          0 4px 10px rgba(0, 0, 0, 0.12),
          inset 0 1px 2px rgba(255, 255, 255, 0.7) !important;
      }

      body #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel,
      body #rightMenuDrawer.header-actions #inMenuLangWrapper .premium-panel,
      body #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-label {
        display: none !important;
      }
      
      /* Animation States - Maximum specificity override */
      body #rightMenuDrawer.header-actions.mobile-open {
        transform: translateY(0) !important;
        opacity: 1 !important;
      }
      
      /* Collapsed state - slide down below screen */
      body #rightMenuDrawer.header-actions.collapsed {
        transform: translateY(100%) !important;
        opacity: 0 !important;
      }
      
      /* Hidden states - completely off screen */
      body #rightMenuDrawer.header-actions.swipe-hidden,
      body #rightMenuDrawer.header-actions.hidden-left {
        transform: translateY(100%) !important;
        opacity: 0 !important;
      }

      /* Mobile bottom bar buttons with modern design override - Refined size */
      #rightMenuDrawer.header-actions .icon-btn,
      #rightMenuDrawer.header-actions.collapsed .icon-btn,
      #rightMenuDrawer.header-actions.swipe-hidden .icon-btn,
      #rightMenuDrawer.header-actions.hidden-left .icon-btn {
        /* Use same modern design for all states - smaller refined size */
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        color: rgba(60, 60, 67, 0.6) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transform: scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        flex: 0 0 auto !important;
        z-index: 10 !important;
        isolation: isolate !important;
      }
      
      /* Modern Tab Bar Button Design - Refined for thinner bar */
      #rightMenuDrawer.header-actions .icon-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        
        /* Premium Button Style */
        background: transparent !important;
        border: none !important;
        border-radius: 12px !important;
        
        /* Modern Layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        
        /* Sophisticated Interactions */
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        
        /* Text & Colors */
        color: rgba(60, 60, 67, 0.6) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        
        /* Reset all conflicting styles */
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        flex: 0 0 auto !important;
      }
      
      /* Active/Hover States */
      #rightMenuDrawer.header-actions .icon-btn:active {
        background: rgba(28, 174, 130, 0.12) !important;
        color: rgba(28, 174, 130, 0.95) !important;
        transform: none !important;
      }
      
      #rightMenuDrawer.header-actions .icon-btn:hover {
        background: rgba(28, 174, 130, 0.06) !important;
        color: rgba(28, 174, 130, 0.85) !important;
      }

      #rightMenuDrawer.header-actions .icon-btn svg {
        width: 18px !important;
        height: 18px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
        stroke-width: 1.5 !important;
        opacity: 0.8 !important;
        transition: opacity 0.2s ease !important;
        pointer-events: none !important;
        display: block !important;
        position: relative !important;
      }

      /* Old hover styles removed - using modern tab bar design above */

      /* Language switcher in hamburger menu */
      #rightMenuDrawer.header-actions #inMenuLangWrapper,
      #rightMenuDrawer.header-actions.collapsed #inMenuLangWrapper,
      #rightMenuDrawer.header-actions.swipe-hidden #inMenuLangWrapper,
      #rightMenuDrawer.header-actions.hidden-left #inMenuLangWrapper {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        background: linear-gradient(140deg,
          rgba(20, 118, 94, 0.16) 0%,
          rgba(255, 255, 255, 0.84) 100%) !important;
        border: 1px solid rgba(18, 126, 99, 0.22) !important;
        box-shadow: 
          0 8px 20px -4px rgba(15, 82, 62, 0.16),
          0 3px 10px -1px rgba(12, 64, 52, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.65),
          inset 0 -1px 0 rgba(28, 174, 130, 0.06) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger:hover {
        transform: none !important;
        background: linear-gradient(140deg,
          rgba(20, 118, 94, 0.22) 0%,
          rgba(255, 255, 255, 0.9) 100%) !important;
        border-color: rgba(18, 126, 99, 0.28) !important;
        box-shadow: 
          0 10px 24px -4px rgba(15, 82, 62, 0.2),
          0 4px 12px -2px rgba(12, 64, 52, 0.12),
          inset 0 2px 0 rgba(255, 255, 255, 0.7),
          inset 0 -1px 0 rgba(28, 174, 130, 0.08) !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger .flag-image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
        border-radius: 12px !important;
        opacity: 0.65 !important;
        filter: brightness(0.92) saturate(0.25) contrast(0.85) grayscale(0.35);
        transition: all 0.3s ease;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger:hover .flag-image,
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger:focus .flag-image {
        opacity: 1 !important;
        transform: none !important;
        /* Full natural color on hover/focus */
        filter: brightness(1) saturate(1) contrast(1) grayscale(0);
      }

      /* Language dropdown positioning for hamburger menu */
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel {
  z-index: 10000000 !important;
  width: 72px !important;
  min-width: 66px !important;
  max-width: 90px !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 12px !important;
      }

      /* Hide desktop elements on mobile */
      #rightMenuDrawer.header-actions .menu-close-bar,
      .swipe-handle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      /* 🎨 FLOATING CIRCULAR MENU - World-Class Mobile Design */
      
      /* Hide the old bottom bar on mobile */
      body #rightMenuDrawer.header-actions,
      body #rightMenuDrawer.header-actions.hidden-left,
      body #rightMenuDrawer.header-actions.swipe-hidden,
      body #rightMenuDrawer.header-actions.collapsed,
      body #rightMenuDrawer.header-actions.mobile-open {
        display: none !important;
      }

      /* Floating Menu Container */
#mobileFloatingMenu {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  left: auto;
  top: auto;
  z-index: 999999;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  /* Prevent any movement when page content changes */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

      /* Main Floating Action Button (FAB) - award-winning focal point */
      .mobile-fab-button {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, 
          rgba(46, 192, 141, 1) 0%,
          rgba(38, 186, 136, 1) 50%,
          rgba(28, 174, 130, 1) 100%);
        backdrop-filter: blur(24px) saturate(200%);
        -webkit-backdrop-filter: blur(24px) saturate(200%);
        border: none;
        box-shadow: 
          0 10px 40px rgba(28, 174, 130, 0.38),
          0 6px 20px rgba(28, 174, 130, 0.22),
          0 3px 10px rgba(0, 0, 0, 0.16),
          0 1px 3px rgba(0, 0, 0, 0.10),
          inset 0 2px 1px rgba(255, 255, 255, 0.45),
          inset 0 -2px 1px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        overflow: visible;
        z-index: 10;
        animation: fabBreathingGlow 4s ease-in-out infinite;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }
      
      /* Sophisticated depth layers - aura glow only */
      .mobile-fab-button::before {
        content: '';
        position: absolute;
        inset: -25px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%,
          rgba(46, 192, 141, 0.22) 0%,
          rgba(28, 174, 130, 0.12) 30%,
          rgba(46, 192, 141, 0.06) 50%,
          transparent 75%);
        opacity: 0;
        pointer-events: none;
        filter: blur(12px);
        transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: scale(0.8);
      }
      
      /* Zen glow burst when menu opens */
      #mobileFloatingMenu.menu-open .mobile-fab-button::before {
        opacity: 1;
        animation: zenGlowPulse 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
      }
      
      @keyframes zenGlowPulse {
        0%, 100% {
          transform: scale(0.85);
          opacity: 0.7;
        }
        50% {
          transform: scale(1.05);
          opacity: 1;
        }
      }
      
      .mobile-fab-button::after {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 20%,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.04) 25%,
          transparent 50%);
        pointer-events: none;
        opacity: 0.9;
      }

      .mobile-fab-button:active {
        transform: scale(0.92);
        box-shadow: 
          0 3px 12px rgba(28, 174, 130, 0.35),
          0 2px 6px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      /* FAB Icon - Diamond - positioned lower */
      .mobile-fab-icon {
        width: 28px;
        height: 28px;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
        object-fit: contain;
        pointer-events: none;
        margin-top: 3px;
      }

      /* Rotate icon when menu is open */
      #mobileFloatingMenu.menu-open .mobile-fab-icon {
        transform: rotate(180deg) scale(1.1);
        filter: brightness(0) invert(1) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
      }

      /* Menu Items Container */
      .mobile-menu-items {
        position: absolute;
        bottom: 64px;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        pointer-events: none;
      }

      /* Individual Menu Item Button */
      .mobile-menu-item {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 0.5px solid rgba(28, 174, 130, 0.12);
        box-shadow: 
          0 3px 16px rgba(0, 0, 0, 0.07),
          0 2px 6px rgba(0, 0, 0, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(28, 174, 130, 0.85);
        opacity: 0;
        transform: translateY(25px) scale(0.75) rotate(-15deg);
        visibility: hidden;
      }

      /* Language icon - Apple/Google Material Design refined elegance */
      .mobile-menu-item.lang-item {
        position: absolute !important;
        top: 0px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 52px;
        height: 52px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: 5;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        border: none;
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        padding: 0;
        overflow: hidden;
        animation: none;
      }
      
      /* Mobile language wrapper - positioned above FAB */
      .mobile-lang-wrapper {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
      }

      /* Unified Language Button - Icon + Text Combined ABOVE FAB */
      .lang-code-label {
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: auto;
        z-index: 8;
        opacity: 0.85;
        transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        cursor: pointer;
        font-size: 7px;
        font-weight: 600;
        letter-spacing: 1.4px;
        color: rgba(28, 174, 130, 0.88);
        text-transform: uppercase;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        text-shadow: 
          0 0.5px 1.5px rgba(0, 0, 0, 0.12),
          0 0.5px 1px rgba(255, 255, 255, 0.40);
        white-space: nowrap;
        padding: 3px 8px 3px 3px;
        padding-left: 21px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        border-radius: 14px;
        border: 0.5px solid rgba(28, 174, 130, 0.15);
        box-shadow: 
          0 2px 10px rgba(28, 174, 130, 0.10),
          0 1px 4px rgba(0, 0, 0, 0.06),
          inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        gap: 4px;
        animation: langButtonBreathing 5s ease-in-out infinite;
      }
      
      /* Breathing animation for unified button */
      @keyframes langButtonBreathing {
        0%, 100% {
          opacity: 0.85;
          transform: translateX(-50%) translateY(0);
        }
        50% {
          opacity: 0.94;
          transform: translateX(-50%) translateY(-0.5px);
        }
      }
      
      /* Breathing animation for unified button */
      @keyframes langButtonBreathing {
        0%, 100% {
          opacity: 0.85;
          transform: translateX(-50%) translateY(0);
        }
        50% {
          opacity: 0.94;
          transform: translateX(-50%) translateY(-0.5px);
        }
      }
      
      /* Hover state - elegant lift */
      .lang-code-label:hover {
        opacity: 1;
        transform: translateX(-50%) translateY(-2px);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 
          0 3px 14px rgba(28, 174, 130, 0.14),
          0 2px 6px rgba(0, 0, 0, 0.10),
          inset 0 0.5px 0 rgba(255, 255, 255, 1);
        border-color: rgba(28, 174, 130, 0.22);
        letter-spacing: 1.4px;
        animation: none;
      }
      
      /* Active state - zen press */
      .lang-code-label:active {
        transform: translateX(-50%) translateY(0px);
        opacity: 0.92;
        box-shadow: 
          0 1px 6px rgba(28, 174, 130, 0.10),
          0 1px 3px rgba(0, 0, 0, 0.08);
      }
      
      /* Menu open state - keep visible */
      #mobileFloatingMenu.menu-open .lang-code-label {
        opacity: 0.96;
        animation: none;
      }

      #mobileFloatingMenu.menu-open .lang-code-label {
        opacity: 0;
        pointer-events: none;
      }
      #mobileFloatingMenu.menu-open .mobile-satellite-lang {
        opacity: 1;
        pointer-events: auto;
      }
      
      /* Satellite Language Icon - Merged with left side of button */
      .mobile-satellite-lang {
        position: absolute !important;
        top: 60px !important;
        left: 50% !important;
        transform: translateX(calc(-50% - 26px)) !important;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        border: 0.5px solid rgba(28, 174, 130, 0.15);
        box-shadow: 
          0 2px 10px rgba(28, 174, 130, 0.10),
          0 1px 4px rgba(0, 0, 0, 0.06),
          inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        z-index: 9;
        overflow: hidden;
        padding: 2px;
      }
      
      .mobile-satellite-lang img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        opacity: 0.55;
        filter: brightness(0.95) saturate(0.70) grayscale(0.25);
        transition: all 0.3s ease;
      }

      /* Hover effect on parent button affects icon */
      .lang-code-label:hover ~ .mobile-satellite-lang img {
        opacity: 0.80;
        filter: brightness(1.02) saturate(0.85) grayscale(0.10);
        transform: scale(1.08);
      }
      
      /* Active state */
      .lang-code-label:active ~ .mobile-satellite-lang img {
        opacity: 0.65;
        transform: scale(0.95);
      }
      
      /* Menu open state - slightly more visible */
      #mobileFloatingMenu.menu-open ~ .mobile-satellite-lang img {
        opacity: 0.70;
        filter: brightness(0.98) saturate(0.75) grayscale(0.18);
      }
      
      /* Subtle breathing for label - zen mindfulness */
      @keyframes langLabelBreathing {
        0%, 100% {
          opacity: 0.68;
        }
        50% {
          opacity: 0.82;
        }
      }
      
      @keyframes langIconBreathing {
        0%, 100% {
          opacity: 0.65;
          transform: translateX(-50%) scale(1);
        }
        50% {
          opacity: 0.75;
          transform: translateX(-50%) scale(1.01);
        }
      }
      
      /* Enhanced visibility on menu hover - Material Design elevation */
      #mobileFloatingMenu:hover .lang-code-label,
      #mobileFloatingMenu.menu-open .lang-code-label {
        opacity: 0.84;
        transform: translateX(-50%) translateY(-1px);
      }
      
      /* Premium clarity on direct hover - Apple precision */
      .mobile-menu-item.lang-item:hover ~ .lang-code-label,
      .lang-code-label:hover {
        opacity: 0.94;
        transform: translateX(-50%) translateY(-2px);
        color: rgba(28, 174, 130, 0.85);
        letter-spacing: 1.4px;
        text-shadow: 
          0 2px 4px rgba(0, 0, 0, 0.20),
          0 1px 2px rgba(28, 174, 130, 0.25),
          0 0.5px 1.5px rgba(255, 255, 255, 0.50);
      }

      /* Premium breathing animations - zen mindfulness - FIXED: Only animates glow, not position */
      @keyframes fabBreathingGlow {
        0%, 100% {
          box-shadow: 
            0 10px 40px rgba(28, 174, 130, 0.38),
            0 6px 20px rgba(28, 174, 130, 0.22),
            0 3px 10px rgba(0, 0, 0, 0.16),
            inset 0 2px 1px rgba(255, 255, 255, 0.45);
        }
        50% {
          box-shadow: 
            0 12px 48px rgba(28, 174, 130, 0.42),
            0 7px 24px rgba(28, 174, 130, 0.26),
            0 4px 12px rgba(0, 0, 0, 0.18),
            inset 0 2px 1px rgba(255, 255, 255, 0.50);
        }
      }
      
      @keyframes fabAura {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        100% {
          transform: scale(1.15);
          opacity: 0.3;
        }
      }
      
      @keyframes langIconBreathing {
        0%, 100% {
          opacity: 0.68;
          transform: translateX(-50%) scale(1);
        }
        50% {
          opacity: 0.76;
          transform: translateX(-50%) scale(1.01);
        }
      }

      /* Graceful reveal on menu hover or when menu is open */
      #mobileFloatingMenu:hover .mobile-menu-item.lang-item,
      #mobileFloatingMenu.menu-open .mobile-menu-item.lang-item {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) scale(1);
        z-index: 1;
        animation: none;
        box-shadow: none;
      }

      /* Direct hover - sophisticated reveal */
      .mobile-menu-item.lang-item:hover {
        opacity: 0.94 !important;
        transform: translateX(-50%) translateY(-3px) scale(1.08) !important;
        animation: none !important;
        box-shadow: 
          0 10px 42px rgba(28, 174, 130, 0.24),
          0 6px 24px rgba(28, 174, 130, 0.16),
          0 3px 12px rgba(0, 0, 0, 0.14) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      
      .mobile-menu-item.lang-item:hover::before {
        opacity: 1;
        background: radial-gradient(circle at 50% 50%,
          transparent 30%,
          rgba(28, 174, 130, 0.12) 60%,
          transparent 100%);
      }

      /* Zen press - mindful interaction */
      .mobile-menu-item.lang-item:active {
        transform: translateX(-50%) translateY(-1px) scale(1.02) !important;
        opacity: 0.78 !important;
        animation: none !important;
        box-shadow: 
          0 5px 20px rgba(28, 174, 130, 0.16),
          0 3px 10px rgba(0, 0, 0, 0.10) !important;
      }

      /* Menu item icon */
      .mobile-menu-item svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        stroke: currentColor;
        transition: all 0.3s ease;
      }

      /* Show menu items when open with staggered zen-like animation */
      #mobileFloatingMenu.menu-open .mobile-menu-item {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        visibility: visible;
        pointer-events: auto;
      }

      /* Staggered animation delays - mindful, flowing appearance */
      #mobileFloatingMenu.menu-open .mobile-menu-item:nth-child(1) {
        transition-delay: 0.08s;
      }

      #mobileFloatingMenu.menu-open .mobile-menu-item:nth-child(2) {
        transition-delay: 0.16s;
      }

      #mobileFloatingMenu.menu-open .mobile-menu-item:nth-child(3) {
        transition-delay: 0.24s;
      }

      #mobileFloatingMenu.menu-open .mobile-menu-item:nth-child(4) {
        transition-delay: 0.32s;
      }

      /* Hover/Active states for menu items */
      .mobile-menu-item:active {
        transform: scale(0.9);
        background: rgba(28, 174, 130, 0.08);
        color: rgba(28, 174, 130, 1);
        box-shadow: 
          0 2px 12px rgba(28, 174, 130, 0.2),
          0 1px 4px rgba(0, 0, 0, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      /* Backdrop overlay when menu is open - zen mindfulness */
      #mobileMenuBackdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 999998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
      }

      #mobileMenuBackdrop.active {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: auto;
      }

      /* Premium ripple effect */
      @keyframes ripple {
        0% {
          transform: scale(0);
          opacity: 0.6;
        }
        100% {
          transform: scale(2.5);
          opacity: 0;
        }
      }

      .mobile-fab-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        pointer-events: none;
      }

      .mobile-fab-button:active::before {
        animation: ripple 0.6s ease-out;
      }

      /* Smooth pulsing animation for FAB */
      @keyframes fabPulse {
        0%, 100% {
          box-shadow: 
            0 8px 32px rgba(28, 174, 130, 0.35),
            0 4px 16px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        50% {
          box-shadow: 
            0 12px 40px rgba(28, 174, 130, 0.45),
            0 6px 20px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }
      }

      /* Premium sparkle effect for FAB interaction - Zen meditation style with flowing grace */
      .fab-sparkle-effect {
        position: fixed;
        width: 18px;
        height: 18px;
        pointer-events: none;
        z-index: 999999;
        opacity: 0;
        will-change: transform, opacity;
        filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.6)) 
                drop-shadow(0 0 12px rgba(46, 192, 141, 0.4));
      }
      
      /* Small diamond sparkles */
      .fab-sparkle-small {
        position: fixed;
        width: 10px;
        height: 10px;
        pointer-events: none;
        z-index: 999999;
        opacity: 0;
        will-change: transform, opacity;
        filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 8px rgba(46, 192, 141, 0.35));
      }

      /* Main sparkle animations - smooth, flowing, zen-like */
      @keyframes sparkleFloat1 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        }
        10% {
          opacity: 0.75;
        }
        20% {
          opacity: 0.92;
          transform: translate(-50%, -50%) scale(0.85) rotate(30deg);
        }
        70% {
          opacity: 0.82;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(-95px) translateX(42px) scale(1.3) rotate(180deg);
        }
      }

      @keyframes sparkleFloat2 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        }
        10% {
          opacity: 0.75;
        }
        20% {
          opacity: 0.92;
          transform: translate(-50%, -50%) scale(0.85) rotate(-30deg);
        }
        70% {
          opacity: 0.82;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(-105px) translateX(-38px) scale(1.4) rotate(-180deg);
        }
      }

      @keyframes sparkleFloat3 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        }
        10% {
          opacity: 0.75;
        }
        20% {
          opacity: 0.92;
          transform: translate(-50%, -50%) scale(0.85) rotate(15deg);
        }
        70% {
          opacity: 0.82;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(-88px) translateX(0px) scale(1.5) rotate(160deg);
        }
      }
      
      /* Small diamond animations - gentle, supportive motion */
      @keyframes sparkleSmall1 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
        }
        15% {
          opacity: 0.6;
        }
        25% {
          opacity: 0.78;
          transform: translate(-50%, -50%) scale(0.7) rotate(20deg);
        }
        75% {
          opacity: 0.65;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(45px) translateX(-22px) scale(0.9) rotate(120deg);
        }
      }
      
      @keyframes sparkleSmall2 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
        }
        15% {
          opacity: 0.6;
        }
        25% {
          opacity: 0.78;
          transform: translate(-50%, -50%) scale(0.7) rotate(-20deg);
        }
        75% {
          opacity: 0.65;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(50px) translateX(18px) scale(0.85) rotate(-140deg);
        }
      }
      
      @keyframes sparkleSmall3 {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
        }
        15% {
          opacity: 0.6;
        }
        25% {
          opacity: 0.78;
          transform: translate(-50%, -50%) scale(0.7) rotate(10deg);
        }
        75% {
          opacity: 0.65;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) translateY(42px) translateX(2px) scale(0.95) rotate(100deg);
        }
      }



      .mobile-fab-button {
        animation: fabPulse 3s ease-in-out infinite;
      }

      /* Stop pulse when menu is open */
      #mobileFloatingMenu.menu-open .mobile-fab-button {
        animation: none;
      }

      /* Language flag - museum-quality refinement */
      .mobile-menu-item.lang-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        padding: 0;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0.82;
        filter: brightness(0.92) saturate(0.88) contrast(0.96) grayscale(0.10) blur(0.3px);
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 
          0 4px 16px rgba(0, 0, 0, 0.10),
          0 2px 8px rgba(0, 0, 0, 0.08),
          inset 0 1px 2px rgba(0, 0, 0, 0.05);
      }
      
      /* Subtle inner glow for depth */
      .mobile-menu-item.lang-item::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%,
          transparent 40%,
          rgba(28, 174, 130, 0.05) 70%,
          transparent 100%);
        pointer-events: none;
        opacity: 0.6;
      }
      
      /* Elegant brighten when menu active */
      #mobileFloatingMenu:hover .mobile-menu-item.lang-item img,
      #mobileFloatingMenu.menu-open .mobile-menu-item.lang-item img {
        opacity: 0.90;
        filter: brightness(0.96) saturate(0.92) contrast(0.98) grayscale(0.08) blur(0.2px);
        transform: scale(1.00);
      }
      
      /* Premium reveal on direct hover */
      .mobile-menu-item.lang-item:hover img {
        opacity: 0.98;
        filter: brightness(1.08) saturate(1.15) contrast(1.08) grayscale(0) blur(0px);
        transform: scale(1.02);
        box-shadow: 
          0 5px 20px rgba(0, 0, 0, 0.14),
          0 2px 10px rgba(0, 0, 0, 0.10),
          inset 0 1px 2px rgba(255, 255, 255, 0.10);
      }
      
      /* Mindful press state */
      .mobile-menu-item.lang-item:active img {
        opacity: 0.75;
        filter: brightness(0.88) saturate(0.90) contrast(0.94) grayscale(0.15) blur(0.4px);
        transform: scale(1);
        box-shadow: 
          0 2px 8px rgba(0, 0, 0, 0.10),
          0 1px 4px rgba(0, 0, 0, 0.08);
      }

      /* Mobile language panel */
      .mobile-lang-wrapper {
        position: relative;
      }

      .mobile-lang-panel {
        position: absolute;
        top: 50%;
        left: auto;
        right: calc(100% + 12px);
        transform: translateY(-50%);
        display: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 10px 16px;
        background: rgba(248, 252, 250, 0.96);
        border: 1px solid rgba(28, 174, 130, 0.22);
        border-radius: 18px;
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 
          0 18px 32px rgba(16, 48, 42, 0.18),
          0 6px 18px rgba(16, 48, 42, 0.08);
        z-index: 999999;
        align-items: center;
        justify-content: flex-end;
        opacity: 0.95;
        animation: fadeInLeft 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        overflow-x: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        max-width: min(240px, 80vw);
      }
      .mobile-lang-panel::-webkit-scrollbar { display: none; }
      
      @keyframes fadeInLeft {
        0% {
          opacity: 0;
          transform: translateY(-50%) translateX(12px);
        }
        100% {
          opacity: 1;
          transform: translateY(-50%) translateX(0);
        }
      }

      /* Arrow pointer pointing to language icon */
      .mobile-lang-panel::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -6px;
        transform: translateY(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: rgba(248, 252, 250, 0.98);
        border-right: 1.5px solid rgba(28, 174, 130, 0.18);
        border-bottom: 1.5px solid rgba(28, 174, 130, 0.18);
        z-index: -1;
      }
    
      .mobile-lang-panel.show {
        display: flex !important;
      }

      .mobile-lang-panel button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: rgba(248, 250, 252, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        transition: all 0.22s ease;
        position: relative;
        opacity: 1;
        box-shadow: 
          0 2px 6px rgba(15, 23, 42, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }

      .mobile-lang-panel button .flag-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        padding: 3px;
        transition: all 0.2s ease;
        opacity: 0.9;
        /* Muted by default on mobile too */
        filter: brightness(0.97) saturate(0.45) contrast(0.92) grayscale(0.15);
      }

      .mobile-lang-panel button:hover {
        transform: translateY(-1px);
        background: rgba(226, 232, 240, 0.95);
        border-color: rgba(148, 163, 184, 0.6);
      }
      
      .mobile-lang-panel button:hover .flag-image,
      .mobile-lang-panel button:focus .flag-image {
        opacity: 1;
        filter: none;
      }

      .mobile-lang-panel button:active {
        transform: translateY(0) scale(0.98);
        background: rgba(203, 213, 225, 0.9);
        box-shadow: 
          0 1px 4px rgba(15, 23, 42, 0.06),
          inset 0 1px 2px rgba(15, 23, 42, 0.12);
      }
      
      .mobile-lang-panel button:active .flag-image {
        opacity: 0.92;
        filter: none;
      }

      .mobile-lang-panel button .coming-soon-indicator {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 8px;
        height: 8px;
        background: #9ca3af;
        border-radius: 50%;
        border: 1.5px solid #f8fafc;
        box-shadow: none;
        animation: none;
      }

      @keyframes zenPulse {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.15);
          opacity: 0.85;
          box-shadow: 0 3px 8px rgba(255, 149, 0, 0.5);
        }
      }

      /* 📱 Responsive circle menu for smaller screens */
      @media (max-width: 480px) {
        #mobileFloatingMenu {
          bottom: calc(12px + env(safe-area-inset-bottom, 0px));
          right: calc(12px + env(safe-area-inset-right, 0px));
          position: fixed !important;
          /* Keep pinned to viewport even inside transformed parents */
          transform: none !important;
        }

        .mobile-fab-button {
          width: 48px;
          height: 48px;
          box-shadow: 
            0 8px 32px rgba(28, 174, 130, 0.32),
            0 4px 16px rgba(0, 0, 0, 0.12),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.40);
        }

        .mobile-fab-icon {
          width: 22px;
          height: 22px;
        }

        .mobile-menu-items {
          bottom: 58px;
          gap: 10px;
        }

        .mobile-menu-item {
          width: 42px;
          height: 42px;
        }

        .mobile-menu-item svg {
          width: 18px;
          height: 18px;
        }

        /* Language icon - hidden when menu opens */
        .mobile-menu-item.lang-item {
          width: 48px;
          height: 48px;
          top: 0px !important;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
        
        /* Language label - compact unified button */
        .lang-code-label {
          top: 56px;
          font-size: 6.5px;
          letter-spacing: 1.3px;
          padding: 3px 7px 3px 3px;
          padding-left: 19px;
          gap: 3px;
        }

        #mobileFloatingMenu:hover .mobile-menu-item.lang-item,
        #mobileFloatingMenu.menu-open .mobile-menu-item.lang-item {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
        
        /* Satellite language icon - merged with left border */
        .mobile-satellite-lang {
          width: 17px;
          height: 17px;
          top: 56px !important;
          transform: translateX(calc(-50% - 24px)) !important;
          padding: 2px;
        }

        .mobile-lang-panel {
          top: 50%;
          left: auto;
          right: calc(100% + 8px);
          transform: translateY(-50%);
          padding: 8px 14px;
          gap: 8px;
          border-radius: 18px;
          max-width: min(220px, 78vw);
        }

        .mobile-lang-panel button {
          width: 32px;
          height: 32px;
        }
        
        .mobile-lang-panel button .flag-image {
          padding: 3px;
        }

        .mobile-lang-panel button .coming-soon-indicator {
          width: 7px;
          height: 7px;
        }
      }

      /* 📱 Extra small screens (iPhone SE, small Androids) */
      @media (max-width: 375px) {
        #mobileFloatingMenu {
          bottom: calc(10px + env(safe-area-inset-bottom, 0px));
          right: calc(10px + env(safe-area-inset-right, 0px));
        }

        .mobile-fab-button {
          width: 44px;
          height: 44px;
          box-shadow: 
            0 6px 28px rgba(28, 174, 130, 0.28),
            0 3px 12px rgba(0, 0, 0, 0.10),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.38);
        }

        .mobile-fab-icon {
          width: 20px;
          height: 20px;
        }

        .mobile-menu-items {
          bottom: 54px;
          gap: 8px;
        }

        .mobile-menu-item {
          width: 38px;
          height: 38px;
        }

        .mobile-menu-item svg {
          width: 16px;
          height: 16px;
        }
        
        /* Language icon - hidden */
        .mobile-menu-item.lang-item {
          width: 44px;
          height: 44px;
          top: 0px !important;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
        
        /* Language label - compact unified button */
        .lang-code-label {
          top: 52px;
          font-size: 6px;
          letter-spacing: 1.2px;
          padding: 2.5px 6px 2.5px 2.5px;
          padding-left: 18px;
          gap: 3px;
        }
        
        /* Satellite language icon - merged with left border */
        .mobile-satellite-lang {
          width: 16px;
          height: 16px;
          top: 52px !important;
          transform: translateX(calc(-50% - 23px)) !important;
          padding: 2px;
        }

        .mobile-lang-panel {
          top: 50%;
          left: auto;
          right: calc(100% + 6px);
          transform: translateY(-50%);
          padding: 6px 10px;
          gap: 6px;
          max-width: min(210px, 75vw);
        }

        .mobile-lang-panel button {
          width: 26px;
          height: 26px;
          padding: 2px;
        }

        .mobile-lang-panel button .coming-soon-indicator {
          width: 5px;
          height: 5px;
        }
      }

      /* 📱 Very small screens (Galaxy Fold, etc) */
      @media (max-width: 320px) {
        #mobileFloatingMenu {
          bottom: calc(32px + env(safe-area-inset-bottom, 0px));
          right: calc(8px + env(safe-area-inset-right, 0px));
        }

        .mobile-fab-button {
          width: 40px;
          height: 40px;
          box-shadow: 
            0 5px 24px rgba(28, 174, 130, 0.25),
            0 2px 10px rgba(0, 0, 0, 0.08),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.35);
        }

        .mobile-fab-icon {
          width: 18px;
          height: 18px;
        }

        .mobile-menu-items {
          bottom: 50px;
          gap: 7px;
        }
        
        /* Language icon - hidden */
        .mobile-menu-item.lang-item {
          width: 40px;
          height: 40px;
          top: 0px !important;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
        
        /* Language label - compact unified button */
        .lang-code-label {
          top: 48px;
          font-size: 5.5px;
          letter-spacing: 1.1px;
          padding: 2.5px 5px 2.5px 2.5px;
          padding-left: 16px;
          gap: 2.5px;
        }
        
        /* Satellite language icon - merged with left border */
        .mobile-satellite-lang {
          width: 14px;
          height: 14px;
          top: 48px !important;
          transform: translateX(calc(-50% - 21px)) !important;
          padding: 1.5px;
        }

        .mobile-lang-panel {
          top: 50%;
          left: auto;
          right: calc(100% + 4px);
          transform: translateY(-50%);
          padding: 6px;
          gap: 5px;
          max-width: min(200px, 72vw);
        }

        .mobile-lang-panel button {
          width: 24px;
          height: 24px;
          padding: 2px;
        }

        .mobile-lang-panel button .coming-soon-indicator {
          width: 4px;
          height: 4px;
          border: 0.5px solid white;
        }

        .mobile-menu-item {
          width: 36px;
          height: 36px;
        }

        .mobile-menu-item svg {
          width: 15px;
          height: 15px;
        }

        .mobile-menu-item.lang-item img {
          padding: 3px;
        }
      }

      /* Smooth mobile transitions */
      #rightMenuDrawer.header-actions * {
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
      }

      /* Hide the close bar and swipe handle on mobile */
      #rightMenuDrawer.header-actions .menu-close-bar {
        display: none !important;
      }

      .swipe-handle {
        display: none !important;
      }

      /* Ensure no mobile menu transitions interfere */
      #rightMenuDrawer.header-actions * {
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
      }
    }

    /* 📱 Smaller mobile screens - even more compact */
    @media (max-width: 480px) {
      #rightMenuDrawer.header-actions {
        width: 180px !important;
        max-width: 180px !important;
        padding: 3px !important;
        gap: 3px !important;
      }

      #rightMenuDrawer.header-actions .icon-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 8px !important;
      }

      #rightMenuDrawer.header-actions .icon-btn svg {
        width: 14px !important;
        height: 14px !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper {
        width: 24px !important;
        height: 24px !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
      }

      /* Smaller hamburger bar for small screens */
      #rightMenuDrawer.header-actions::before {
        width: 36px !important;
        height: 14px !important;
        border-radius: 0 0 7px 7px !important;
      }

      #rightMenuDrawer.header-actions::after {
        width: 12px !important;
        top: calc(100% + 4px) !important;
      }

      #inMenuLangWrapper {
        width: 50px !important;
        height: 50px !important;
      }

      #inMenuLangWrapper .lang-flag-panel {
        width: 50px !important;
        height: 50px !important;
        border-radius: 16px !important;
      }
    }

    /* 📱 Very small screens - ultra-compact */
    @media (max-width: 375px) {
      #rightMenuDrawer.header-actions {
        width: 160px !important;
        max-width: 160px !important;
        padding: 2px !important;
        gap: 2px !important;
      }

      #rightMenuDrawer.header-actions .icon-btn {
        z-index: 10000;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 7px !important;
      }

      #rightMenuDrawer.header-actions .icon-btn svg {
        width: 13px !important;
        height: 13px !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper {
        width: 22px !important;
        height: 22px !important;
      }

      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
        width: 22px !important;
        height: 22px !important;
        border-radius: 5px !important;
      }

      /* Even smaller hamburger bar */
      #rightMenuDrawer.header-actions::before {
        width: 32px !important;
        height: 12px !important;
        border-radius: 0 0 6px 6px !important;
      }

      #rightMenuDrawer.header-actions::after {
        width: 10px !important;
        height: 1px !important;
        top: calc(100% + 3px) !important;
        box-shadow: 
          0 2px 0 rgba(28, 174, 130, 0.8),
          0 4px 0 rgba(28, 174, 130, 0.8);
      }
    }

    /* Mobile screen adaptations continue with the hamburger menu approach above */

    /* Keep original design for tablets and desktops */
    @media (min-width: 769px) {
      .swipe-handle {
        width: 4px;
        height: 24px;
        right: 0px;
      }
      
      .swipe-handle:hover {
        width: 6px;
        height: 28px;
        right: 1px;
      }
      
      .swipe-handle:active {
        width: 6px;
        height: 28px;
        right: 2px;
      }
    }

    /* Mobile-specific fixes for right menu */
    @media (max-width: 480px) {
      .header-actions {
        right: 8px !important;
        width: 56px !important;
        min-height: 200px !important;
        padding: 8px 6px !important;
        gap: 8px !important; /* Increased gap for better spacing */
        border-radius: 28px !important;
      }
      
      .header-actions .icon-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 22px !important;
        padding: 8px !important;
        margin: 2px 0 !important; /* Add vertical margin for spacing */
      }
      
      .header-actions .icon-btn svg {
        width: 20px !important;
        height: 20px !important;
      }
      
      /* Fix language flag positioning on mobile - as menu extension */
      #inMenuLangWrapper {
        position: absolute !important;
        bottom: -30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        z-index: 1001 !important;
      }
      
      #inMenuLangWrapper .lang-flag-trigger {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        display: block !important;
        left: 0 !important;
        transform: none !important;
      }
      
      .menu-close-bar {
        width: 3px !important;
        height: 20px !important;
        border-radius: 2px !important;
        opacity: 0.8 !important; /* More visible on mobile */
        left: -6px !important;
        box-shadow: 0 2px 6px rgba(28,174,130,0.25);
      }
    }
    
    @media (max-width: 440px) {
      .header-actions {
        right: 6px !important;
        width: 52px !important;
        min-height: 180px !important;
        padding: 6px 4px !important;
        gap: 6px !important; /* Increased gap */
        border-radius: 26px !important;
      }
      
      .header-actions .icon-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 20px !important;
        padding: 6px !important;
        margin: 2px 0 !important; /* Add spacing */
      }
      
      .header-actions .icon-btn svg {
        width: 18px !important;
        height: 18px !important;
      }
      
      /* Fix language flag positioning for 440px - as menu extension */
      #inMenuLangWrapper {
        position: absolute !important;
        bottom: -28px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        z-index: 1001 !important;
      }
      
      #inMenuLangWrapper .lang-flag-trigger {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        display: block !important;
        left: 0 !important;
        transform: none !important;
      }
      
      .menu-close-bar {
        width: 2px !important;
        height: 18px !important;
        border-radius: 1px !important;
        opacity: 0.9 !important; /* Very visible */
        left: -5px !important;
        box-shadow: 0 1px 4px rgba(28,174,130,0.3);
      }
    }
    
    /* Extra small devices - ensures menu stays within viewport */
    @media (max-width: 375px) {
      .header-actions {
        right: 4px !important;
        width: 48px !important;
        min-height: 160px !important;
        padding: 4px 3px !important;
        gap: 5px !important; /* Better spacing */
        border-radius: 24px !important;
      }
      
      .header-actions .icon-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 18px !important;
        padding: 5px !important;
        margin: 1px 0 !important;
      }
      
      /* Language flag as menu extension for small screens */
      #inMenuLangWrapper {
        position: absolute !important;
        bottom: -26px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        z-index: 1001 !important;
      }
      
      #inMenuLangWrapper .lang-flag-trigger {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        display: block !important;
        left: 0 !important;
        transform: none !important;
      }
      
      .header-actions .icon-btn svg {
        width: 16px !important;
        height: 16px !important;
      }
    }
    
    /* Prevent menu from going off-screen on any device */
    @media (max-width: 320px) {
      .header-actions {
        right: 2px !important;
        width: 44px !important;
        min-height: 150px !important;
        padding: 3px 2px !important;
        gap: 4px !important; /* Maintain some spacing even on tiny screens */
      }
      
      .header-actions .icon-btn {
        margin: 1px 0 !important;
      }
      
      /* Language flag as menu extension for very small screens */
      #inMenuLangWrapper {
        position: absolute !important;
        bottom: -24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        z-index: 1001 !important;
      }
      
      #inMenuLangWrapper .lang-flag-trigger {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        margin: 0 !important;
        left: 0 !important;
        transform: none !important;
      }
      
      .menu-close-bar {
        opacity: 1 !important; /* Maximum visibility on tiny screens */
      }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-content {
        padding: 4px 10px !important;
      }
      
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      .zen-expander .zen-chevron {
        width: 6px !important;
        height: 6px !important;
        border-right: 1.3px solid rgba(28,174,130,0.7) !important;
        border-bottom: 1.3px solid rgba(28,174,130,0.7) !important;
      }
      
      .zen-expander .zen-chevron-container {
        margin-top: 5px !important;
      }
    }
    
    /* Ensure no horizontal overflow on mobile */
    @media (max-width: 480px) {
      body {
        overflow-x: hidden;
        padding-bottom: 66px; /* Space for modern 50px bottom bar + extra margin */
      }
      
      /* Ensure all main content areas have proper bottom spacing */
      .main-content,
      .content-wrapper,
      .course-content,
      .meditation-content,
      .zen-content,
      #main,
      main,
      .container,
      .wrapper {
        padding-bottom: 66px !important;
        margin-bottom: 16px !important;
      }
      
      /* Specific fix for scrollable course selection areas */
      .course-select-wrapper,
      .course-options,
      .course-list,
      .meditation-list,
      .track-list {
        padding-bottom: 66px !important;
        margin-bottom: 16px !important;
      }
      
      /* Ensure dropdowns and modals don't get cut off */
      .dropdown-content,
      .modal-content,
      .popup-content {
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        padding-bottom: 16px !important;
      }
      
      /* Universal mobile scroll protection - ensure last child elements are visible */
      * {
        scroll-padding-bottom: 66px !important;
      }
      
      /* Specific protection for any element that might contain scrollable course content */
      div,
      ul,
      ol,
      section,
      article {
        scroll-margin-bottom: 66px !important;
      }
      
      .header-actions {
        max-width: calc(100vw - 16px);
        /* Ensure transform doesn't push menu off-screen */
        transform: translateY(-50%) translateZ(0) !important;
        /* Override base min-height for mobile */
        min-height: auto !important;
        height: auto !important;
        /* Make menu more compact */
        justify-content: flex-start !important;
        /* Force proper layout for language flag */
        position: relative;
        overflow: visible !important;
      }
      
      /* Add a subtle drag hint for mobile */
      .menu-close-bar::before {
        content: '';
        position: absolute;
        left: -8px;
        top: -4px;
        width: 18px;
        height: 26px;
        background: transparent;
        border-radius: 4px;
        /* Invisible but increases touch area */
      }
      
      /* Add drag lines indicator */
      .menu-close-bar::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 50%;
        width: 1px;
        height: 8px;
        background: rgba(255,255,255,0.4);
        transform: translateY(-50%);
        border-radius: 0.5px;
      }
      
      /* Improve touch targets for mobile */
      .header-actions .icon-btn {
        position: relative;
        z-index: 1;
      }
      
      /* Add a larger touch area for better mobile interaction */
      .header-actions .icon-btn::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        z-index: -1;
      }
    }

    @media (hover: none) and (pointer: coarse) {
      .header-actions {
        touch-action: manipulation;
        -webkit-touch-callout: none;
      }
      
      .header-actions .icon-btn {
        min-height: 48px;
        min-width: 48px;
      }
      
      #inMenuLangWrapper .lang-flag-trigger {
        min-height: 32px;
        min-width: 32px;
      }
    }
    

    
    /* Premium Language Selector - Meditation App Style */
    /* Base positioning - will be overridden by #rightMenuDrawer.header-actions rules */
    #inMenuLangWrapper {
      position: static;
      bottom: auto;
      left: auto;
  transform: none;
      height: 28px;
      width: 28px;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      overflow: visible;
      opacity: 1;
      visibility: visible;
      background: transparent;
      order: 10;
    }
    
    /* Remove the connection line since flag is now inside menu */
    #inMenuLangWrapper::before {
      display: none !important;
    }
    
    #inMenuLangWrapper .lang-flag-trigger {
      width: 100%;
      height: 100%;
      border: 1px solid rgba(18, 126, 99, 0.22);
      background: linear-gradient(145deg, rgba(20, 118, 94, 0.16), rgba(255, 255, 255, 0.84));
      backdrop-filter: blur(16px) saturate(160%) brightness(102%);
      -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(102%);
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      pointer-events: auto;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      overflow: hidden;
      opacity: 1;
      visibility: visible;
      box-shadow:
        0 8px 20px -4px rgba(15, 82, 62, 0.16),
        0 3px 12px -4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    #inMenuLangWrapper .lang-flag-trigger .flag-image {
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      object-fit: cover;
      object-position: center;
      border-radius: 50%;
      transition: opacity 0.2s ease, filter 0.2s ease;
      display: block;
      opacity: 0.85;
      margin: 3px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      /* Calm default tone */
      filter: brightness(0.95) saturate(0.35) contrast(0.9) grayscale(0.2);
      box-shadow:
        0 1px 4px -2px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    #inMenuLangWrapper .lang-flag-trigger:hover {
      box-shadow:
        0 10px 24px -4px rgba(15, 82, 62, 0.2),
        0 5px 14px -4px rgba(0, 0, 0, 0.08),
        0 2px 8px -2px rgba(0, 0, 0, 0.04),
        inset 0 2px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(28, 174, 130, 0.08);
      transform: none;
      background: linear-gradient(145deg, rgba(20, 118, 94, 0.22), rgba(255, 255, 255, 0.9));
      border-color: rgba(18, 126, 99, 0.28);
    }

    #inMenuLangWrapper .lang-flag-trigger:hover .flag-image,
    #inMenuLangWrapper .lang-flag-trigger:focus .flag-image {
      opacity: 1;
      /* Full color on interaction */
      filter: none;
      box-shadow: 
        0 3px 8px -2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    #inMenuLangWrapper .lang-flag-trigger:active {
      transform: none;
      box-shadow: 
        0 4px 16px -4px rgba(28, 174, 130, 0.15),
        0 2px 8px -2px rgba(0, 0, 0, 0.06),
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    
    #inMenuLangWrapper .lang-flag-trigger:active .flag-image {
      transform: none;
      filter: brightness(0.92) saturate(0.9) grayscale(0.15);
    }
    
    /* Minimalistic Language Dropdown */
    #inMenuLangWrapper .lang-flag-panel {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%);
      display: none;
      flex-direction: column;
      gap: 4px;
      padding: 6px 8px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(28, 174, 130, 0.18);
      border-radius: 12px;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, 0.16),
        0 6px 16px -6px rgba(28, 174, 130, 0.12);
      z-index: 100000;
      min-width: 66px;
      max-width: 72px;
      align-items: center;
      justify-content: center;
      animation: fadeInDown 0.24s ease-out forwards;
      pointer-events: auto;
    }

    /* remove decorative rotated square behind flags to avoid visual artifact */
    #inMenuLangWrapper .lang-flag-panel::after {
      display: none !important;
      content: none !important;
    }

    #inMenuLangWrapper .lang-flag-panel button {
      width: 44px;
      height: 30px;
      border-radius: 8px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 3px;
      transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    /* Desktop - Smaller flags */
    @media (min-width: 769px) {
      #inMenuLangWrapper .lang-flag-panel button {
        width: 40px;
        height: 28px;
        border-radius: 6px;
        padding: 3px;
      }

      #inMenuLangWrapper .lang-flag-panel {
        gap: 4px !important;
        padding: 6px 8px !important;
      }
    }

    #inMenuLangWrapper .lang-flag-panel button .flag-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 6px;
      flex-shrink: 0;
      transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
      filter: brightness(0.96) saturate(0.92) grayscale(0.08);
      opacity: 0.92;
      border: 1px solid rgba(255, 255, 255, 0.24);
    }

    #inMenuLangWrapper .lang-flag-panel button:hover {
      background: rgba(28, 174, 130, 0.12);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(28, 174, 130, 0.25);
    }

    #inMenuLangWrapper .lang-flag-panel button:hover .flag-image {
      filter: brightness(1.0) saturate(1.02) grayscale(0.05);
      opacity: 1;
    }

    #inMenuLangWrapper .lang-flag-panel button:active {
      transform: translateY(0);
      box-shadow:
        0 3px 10px -4px rgba(28, 174, 130, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.08);
    }
    
    /* Show panel when open */
    #inMenuLangWrapper .lang-flag-panel[data-open="1"],
    #inMenuLangWrapper .lang-flag-panel.open {
      display: flex !important;
    }

    /* Hide desktop language panel on mobile - we use mobile-specific panel instead */
    @media (max-width: 768px) {
      #inMenuLangWrapper .lang-flag-panel {
        display: none !important;
      }
    }
    
    /* Desktop language menu: vertical flags (like previous version), compact and centered under trigger */
    @media (min-width: 769px) {
      #rightMenuDrawer.header-actions #inMenuLangWrapper { position: relative !important; overflow: visible !important; }
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 4px 8px !important;
        min-width: 40px !important;
        top: calc(100% + 44px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 1000000 !important;
        height: auto !important;
        overflow: visible !important;
        background: rgba(255,255,255,0.01) !important;
        box-shadow: none !important;
      }
      /* hide triangle/rotated-square arrow behind flags on desktop */
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel::after {
        display: none !important;
        content: none !important;
      }
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel button {
        width: 32px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        border-radius: 6px !important;
      }
      #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-panel button .flag-image {
        width: calc(100% - 2px) !important;
        height: calc(100% - 2px) !important;
        border-radius: 4px !important;
        flex: 0 0 auto !important;
      }
    }
    

    /* Zen Meditation App Animations */
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }
    
    @keyframes fadeInDown {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }
    
    @keyframes gentleFloat {
      0%, 100% {
        transform: translateY(-50%) translateY(0);
      }
      50% {
        transform: translateY(-50%) translateY(-2px);
      }
    }
    
    @keyframes subtleGlow {
      0%, 100% {
        box-shadow: 
          0 24px 80px -12px rgba(15, 35, 28, 0.08),
          0 8px 32px -8px rgba(28, 174, 130, 0.12),
          0 4px 16px -4px rgba(0, 0, 0, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.8),
          inset 0 -1px 0 rgba(28, 174, 130, 0.06);
      }
      50% {
        box-shadow: 
          0 28px 96px -16px rgba(15, 35, 28, 0.1),
          0 12px 40px -8px rgba(28, 174, 130, 0.15),
          0 6px 20px -4px rgba(0, 0, 0, 0.06),
          inset 0 2px 0 rgba(255, 255, 255, 0.9),
          inset 0 -1px 0 rgba(28, 174, 130, 0.08);
      }
    }
    
    @keyframes zenPulse {
      0% { transform: scale(1); }
      50% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    
    .header-actions:not(.collapsed) {
      animation: 
        gentleFloat 8s ease-in-out infinite,
        subtleGlow 6s ease-in-out infinite;
    }
    
    .header-actions .icon-btn:active {
      animation: zenPulse 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    #inMenuLangWrapper .lang-flag-trigger:active {
      animation: none;
    }
    
    /* Meditation Focus Ring */
    .header-actions:focus-within::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 36px;
      border: 2px solid rgba(28, 174, 130, 0.4);
      opacity: 0;
      animation: focusRing 0.3s ease-out forwards;
    }
    
    @keyframes focusRing {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    

    
    /* Force Right Side Positioning - Maximum Specificity */
    #rightMenuDrawer.header-actions {
      position: fixed !important;
      top: 25% !important;
      right: 4px !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      z-index: 2000 !important;
      cursor: grab !important;
    }
    
    #rightMenuDrawer.header-actions.collapsed {
      position: fixed !important;
      top: 25% !important;
      right: 4px !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      opacity: 0.90 !important;
    }
    
    /* Mobile-First Responsive Design */
    @media (max-width: 768px) {
      .header-actions {
        right: 4px;
        width: 60px;
        min-height: 240px;
        padding: 12px 6px;
        gap: 10px;
        border-radius: 28px;
      }
      
      .header-actions .icon-btn {
        width: 44px;
        height: 44px;
        border-radius: 22px;
      }
      
      .header-actions .icon-btn svg {
        width: 20px;
        height: 20px;
      }
      
      #inMenuLangWrapper {
        width: 28px;
        height: 28px;
        bottom: -14px;
      }
      
      #inMenuLangWrapper .lang-flag-panel {
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        padding: 3px;
        gap: 1px;
        min-width: 36px;
        max-width: 42px;
        border-radius: 6px;
      }
      
      #inMenuLangWrapper .lang-flag-panel button {
        width: 28px;
        height: 20px;
        border-radius: 3px;
        padding: 1px;
      }
    }
    
    @media (max-width: 480px) {
      .header-actions {
        right: 4px;
        width: 56px;
        min-height: 200px;
        padding: 10px 6px;
        gap: 8px;
        border-radius: 24px;
      }
      
      .header-actions .icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
      }
      
      .header-actions .icon-btn svg {
        width: 18px;
        height: 18px;
      }
      
      .header-actions.collapsed {
        width: 48px;
        min-height: 160px;
        padding: 8px 4px;
        gap: 6px;
        border-radius: 20px;
      }
      
      .header-actions.collapsed .icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 14px;
      }
      
      .header-actions.collapsed .icon-btn svg {
        width: 14px;
        height: 14px;
      }
      
      #inMenuLangWrapper {
        width: 24px;
        height: 24px;
        bottom: -12px;
      }
      
      #inMenuLangWrapper .lang-flag-trigger .flag-image {
        margin: 2px;
      }
      
      #inMenuLangWrapper .lang-flag-panel {
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        padding: 2px;
        gap: 1px;
        min-width: 32px;
        max-width: 36px;
        border-radius: 6px;
      }
      
      #inMenuLangWrapper .lang-flag-panel button {
        width: 24px;
        height: 18px;
        border-radius: 3px;
        padding: 1px;
      }
    }
    
    .part-info {
      text-align: center;
      font-size: clamp(13px, 0.6vw + 11px, 15px);
      color: #7dd3a0;
      font-weight: 500;
      margin-top: 2px;
      padding: 8px 16px;
      font-family: 'Raleway', sans-serif;
      letter-spacing: 0.25px;
      white-space: nowrap;
      overflow: hidden;
      line-height: 1.25;
      background: linear-gradient(135deg, rgba(125, 211, 160, 0.06) 0%, rgba(125, 211, 160, 0.02) 100%);
      border-radius: 12px;
      border: none;
      box-shadow: 0 1px 5px rgba(125, 211, 160, 0.12);
      transition: all 0.3s ease;
      position: relative;
      max-width: 280px; /* slightly wider for suffix */
      margin-left: auto;
      margin-right: auto;
      text-overflow: ellipsis;
    }
    .part-info.has-coming-soon { display:flex; align-items:center; gap:10px; justify-content:center; padding-right:14px; }
    .part-info.has-coming-soon .coming-soon-badge { font-size:10px; padding:4px 8px; }
    
    .part-info:hover {
      background: linear-gradient(135deg, rgba(125, 211, 160, 0.1) 0%, rgba(125, 211, 160, 0.04) 100%);
      box-shadow: 0 2px 8px rgba(125, 211, 160, 0.12);
      transform: translateY(-0.5px);
      color: #6bc48a;
    }
    
    .part-info::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.6s ease;
    }
    
    .part-info:hover::before {
      left: 100%;
    }
    
    /* Coming-soon parts (parts 2-5) — unified desktop/mobile format */
    .part-info[data-part="2"],
    .part-info[data-part="3"],
    .part-info[data-part="4"],
    .part-info[data-part="5"] {
      /* keep the subtle accent but use the same compact layout as mobile */
      background: linear-gradient(135deg, rgba(255, 193, 7, 0.06) 0%, rgba(255, 152, 0, 0.03) 100%);
      border: none;
      color: #f57c00;
      font-size: clamp(12px, 0.45vw + 10.5px, 13.2px);
      font-weight: 600;
      line-height: 1.2;
      padding: 7px 16px;
      width: auto;
      max-width: 92vw; /* match mobile's responsive constraint */
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: visible; /* allow tools/emoji space if needed but we'll hide emoji */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    /* Truncate adjustments on narrow screens */
    @media (max-width:520px){
      .part-info { font-size:14px; max-width: 94vw; padding: 8px 14px; }
      .part-info[data-part="2"],
      .part-info[data-part="3"],
      .part-info[data-part="4"],
      .part-info[data-part="5"] { font-size:13px; max-width: 92vw; width:auto; }
      .part-info[data-part="2"],
      .part-info[data-part="3"],
      .part-info[data-part="4"],
      .part-info[data-part="5"] {
        padding-right: 28px;
        padding-left: 12px;
        gap: 8px;
        overflow: visible;
      }
    }
    
    .part-info[data-part="2"]::after,
    /* remove construction emoji — desktop will show same compact label as mobile */
    .part-info[data-part="2"]::after,
    .part-info[data-part="3"]::after,
    .part-info[data-part="4"]::after,
    .part-info[data-part="5"]::after {
      content: '';
      display: none;
    }
    @keyframes constructionPulse {
      0%, 100% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }
    
    .part-info[data-part="2"]:hover,
    .part-info[data-part="3"]:hover,
    .part-info[data-part="4"]:hover,
    .part-info[data-part="5"]:hover {
      background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.08) 100%);
      border-color: rgba(255, 193, 7, 0.4);
      color: #e65100;
      transform: translateY(-0.5px);
    }
    /* Strong override to ensure desktop matches mobile and no emoji appears
       Uses high specificity and !important to override conflicting rules */
    .part-info.has-coming-soon[data-part="2"],
    .part-info.has-coming-soon[data-part="3"],
    .part-info.has-coming-soon[data-part="4"],
    .part-info.has-coming-soon[data-part="5"] {
      white-space: normal !important;
      overflow: visible !important;
      max-width: 92vw !important;
      padding: 6px 12px !important;
      font-size: 12.5px !important;
    }
    .part-info.has-coming-soon[data-part="2"]::after,
    .part-info.has-coming-soon[data-part="3"]::after,
    .part-info.has-coming-soon[data-part="4"]::after,
    .part-info.has-coming-soon[data-part="5"]::after {
      content: '' !important;
      display: none !important;
    }
    /* Ensure desktop uses the same visual format as mobile for coming-soon parts */
    .part-info.has-coming-soon {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      white-space: normal !important;
      padding: 6px 12px !important;
    }
    /* Make the container match the mobile rounded pill style */
    .part-info.has-coming-soon {
      background: linear-gradient(135deg, rgba(255, 245, 235, 0.9), rgba(255, 250, 245, 0.95));
      border: 1px solid rgba(255, 152, 0, 0.18) !important;
      border-radius: 12px !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
      max-width: 560px !important;
    }
    .part-info.has-coming-soon .part-base-title {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .part-info.has-coming-soon .coming-soon-badge {
      position: static !important;
      margin-left: 8px !important;
      padding: 4px 8px !important;
      font-size: 10px !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 12px !important;
      background: linear-gradient(135deg,#ff9f2d,#ff7f00) !important;
      color: #fff !important;
      box-shadow: 0 2px 6px -2px rgba(0,0,0,.35) !important;
    }
    .edition-toggle {
      position: relative;
      display: block;
      margin-top: 20px;
    }

    /* Smooth fade/collapse when edition selector is hidden for parts != 1 */
    .edition-toggle {
      /* base values — transitions below will animate between visible and hidden states */
      max-height: 240px; /* large enough to contain switcher */
      opacity: 1;
      overflow: hidden;
      transition: max-height 360ms cubic-bezier(0.4,0,0.2,1),
                  opacity 260ms cubic-bezier(0.4,0,0.2,1),
                  padding 260ms cubic-bezier(0.4,0,0.2,1),
                  margin 260ms cubic-bezier(0.4,0,0.2,1),
                  transform 300ms cubic-bezier(0.4,0,0.2,1);
      will-change: opacity, max-height, transform;
    }

    .edition-toggle.hidden-by-part {
      max-height: 0 !important;
      opacity: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      transform: translateY(-6px) scale(0.99);
      pointer-events: none;
    }

    .minimal-edition-switcher {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 12px 16px;
      min-height: 44px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .minimal-edition-switcher:hover {
      transform: none;
    }

    .edition-indicator {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .edition-track {
      position: relative;
      width: 44px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid rgba(160, 176, 190, 0.55);
      background: linear-gradient(135deg, #f8fbfd 0%, #eef2f5 100%);
      display: block;
      padding: 1px;
      cursor: pointer;
      transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 3px rgba(12, 64, 52, 0.1);
    }

    .edition-track:hover {
      border-color: rgba(64, 176, 124, 0.5);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 3px 8px rgba(33, 140, 100, 0.18);
    }

    .edition-track.active {
      background: linear-gradient(135deg, #dff5e8 0%, #c7efda 100%);
      border-color: rgba(64, 176, 124, 0.65);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 8px rgba(33, 140, 100, 0.2);
    }

    .edition-dot {
      position: absolute;
      top: 50%;
      left: 1px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffffff 0%, #f4f6f9 100%);
      border: 1px solid rgba(190, 202, 214, 0.7);
      display: block;
      transform: translate3d(-1px, -50%, 0);
      transition: transform 0.26s cubic-bezier(0.35, 0.8, 0.3, 1),
                  box-shadow 0.2s ease,
                  background 0.2s ease,
                  border-color 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      will-change: transform;
    }

    .edition-dot.active {
      transform: translate3d(19px, -50%, 0);
      background: linear-gradient(135deg, #ffffff 0%, #f4f6f9 100%);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    }

    /* Ensure consistent neutral knob styling if any legacy styles remain */
    .edition-toggle .edition-dot,
    .edition-toggle .edition-dot.active {
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #ffffff 0%, #f4f6f9 100%) !important;
      border: 1px solid rgba(190, 202, 214, 0.7);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      top: 50%;
      left: 1px;
      transform: translate3d(-1px, -50%, 0);
      transition: transform 0.26s cubic-bezier(0.35, 0.8, 0.3, 1),
                  box-shadow 0.2s ease,
                  background 0.2s ease,
                  border-color 0.2s ease;
      will-change: transform;
    }

    .edition-toggle .edition-dot.active {
      transform: translate3d(19px, -50%, 0);
    }

    .edition-text {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .edition-label {
      font-size: 11px;
      font-weight: 500;
      color: rgba(28, 174, 130, 0.8);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

    .edition-label.active {
      color: #1cae82;
      font-weight: 600;
    }

    .minimal-edition-switcher.open {
      transform: translateY(-2px);
    }
    
    .edition-btn {
      padding: 6px 10px;
      background: rgba(248, 249, 250, 0.8);
      border: 1px solid rgba(28,174,130,0.15);
      border-radius: 6px;
      color: #1cae82;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      backdrop-filter: blur(10px);
    }
    .edition-btn:hover {
      background: rgba(28,174,130,0.1);
      border-color: rgba(28,174,130,0.3);
    }
    .edition-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      border: 1px solid rgba(28,174,130,0.15);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      min-width: 200px;
      z-index: 1000;
      display: none;
      margin-top: 4px;
    }
    .edition-menu.open {
      display: block;
    }
    .menu-header {
      padding: 8px 12px;
      font-size: 10px;
      font-weight: 600;
      color: #1cae82;
      border-bottom: 1px solid rgba(28,174,130,0.1);
      text-align: center;
    }
    .menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .menu-item:hover {
      background: rgba(28,174,130,0.05);
    }
    .item-icon {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .item-icon.default {
      background: #1cae82;
    }
    .item-icon.detox {
      background: #37e39f;
    }
    .item-text {
      flex: 1;
    }
    .item-name {
      font-size: 10px;
      font-weight: 600;
      color: #1cae82;
    }
    .item-desc {
      font-size: 9px;
      color: #7a9b8a;
    }
    /* Mobile-specific tweaks: make the edition switcher smaller on narrow screens */
    @media (max-width: 767px) {
      .minimal-edition-switcher {
        padding: 6px 8px;
        gap: 6px;
        min-height: 36px;
      }

      .edition-indicator {
        gap: 8px;
      }

      .edition-track {
        width: 44px;
        height: 26px;
      }

      .edition-dot {
        width: 24px;
        height: 24px;
        top: 50%;
        left: 1px;
        transform: translate3d(-1px, -50%, 0);
      }

      .edition-dot.active {
        transform: translate3d(19px, -50%, 0);
      }

      .edition-text {
        gap: 6px;
      }

      .edition-label {
        font-size: 10px;
      }
    }

    /* Tablet and desktop responsive design - same layout as mobile */
    @media (min-width: 768px) {
      .nav {
        padding: 10px 0 8px 0;
      }
      .centered-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        max-width: 400px;
      }
      .centered-header h1 {
        font-size: 22px;
        text-align: center;
      }
      .part-number {
        width: 60px;
        height: 60px;
        font-size: 28px;
      }
      .part-label {
        font-size: 10px;
      }
      .minimal-edition-switcher {
        padding: 8px 12px;
        gap: 6px;
      }

      .edition-indicator {
        gap: 12px;
      }

      .edition-track {
        width: 44px;
        height: 26px;
      }

      .edition-dot {
        width: 24px;
        height: 24px;
        top: 50%;
        left: 1px;
        transform: translate3d(-1px, -50%, 0);
      }

      .edition-dot.active {
        transform: translate3d(19px, -50%, 0);
      }

      .edition-text {
        gap: 8px;
      }

      .edition-label {
        font-size: 10px;
      }
      
      

      .edition-btn {
        padding: 8px 12px;
        font-size: 11px;
      }
      .header-actions {
        right: 16px;
        width: 52px;
        padding: 6px;
        border-radius: 26px;
        gap: 6px;
        top: 30% !important;
        transform: translateY(-50%) !important;
      }
      .header-actions .icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 19px;
      }
      .header-actions .icon-btn svg {
        width: 16px;
        height: 16px;
      }
      
      .header-actions.collapsed {
        width: 44px;
        height: 44px;
        border-radius: 22px;
      }
      
      /* Right-Side Language Flag Mobile */
      #rightSideLangWrapper {
        top: calc(30% + 100px) !important;
        right: 16px !important;
        width: 52px;
        height: 52px;
        padding: 6px;
        border-radius: 26px;
      }
      
      #rightSideLangWrapper .lang-flag-trigger {
        width: 38px;
        height: 38px;
        border-radius: 19px;
        font-size: 16px;
      }
    }
    /* Large desktop optimization */
    @media (min-width: 1024px) {
      .header-main {
        gap: 20px;
      }
      .part-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
      }
      .edition-btn {
        padding: 10px 14px;
        font-size: 12px;
      }
    }
    /* Action buttons container */
    .action-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .main-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .support-action {
      display: flex;
      justify-content: center;
    }
    /* Support button styling - smaller and beneath */
    .support-btn {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
      position: relative;
      overflow: hidden;
    }
    .support-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    .support-btn:hover::before {
      transform: translateX(100%);
    }
    .support-btn:hover {
      background: linear-gradient(135deg, #ff5252, #ff7979);
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    }
    .support-btn svg {
      width: 16px;
      height: 16px;
      position: relative;
      z-index: 1;
    }
    /* Enhanced course part navigation */
    .course-part-nav {
      transition: all 0.3s ease;
    }
    .course-part-nav:hover {
      box-shadow: 0 4px 12px rgba(28,174,130,0.15);
      transform: translateY(-1px);
    }
    /* Main title section */
    .main-title-section {
      transition: all 0.3s ease;
    }
    /* Course subtitle */
    .course-subtitle {
      transition: all 0.3s ease;
    }
    /* Header balance improvements */
    .main-title-section {
      min-height: 32px;
      align-items: center;
    }
    .title-left {
      flex: 1;
      min-width: 0;
    }
    .title-right {
      flex-shrink: 0;
    }
    /* Responsive adjustments for better balance */
    @media (max-width: 768px) {
      .main-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      
      .title-left {
        width: 100%;
      }
      
      .title-right {
        align-self: flex-end;
      }
      
      .course-part-nav {
        margin-top: 4px;
      }
      
      .centered-header {
        margin-bottom: 12px;
      }
    }
    
    .course-select-option:last-child {
      border-bottom: none;
    }
    
    .course-select-option:hover {
      background: var(--green-lighter);
      color: var(--strong);
    }
    
    .course-select-option.selected {
      background: var(--green-light);
      color: var(--strong);
      font-weight: 600;
    }
    
    .course-version-icon {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    
    .course-version-icon.default {
      background: var(--green);
    }
    
    .course-version-icon.detox {
      background: #f59e0b;
    }
    
    .course-version-icon:hover {
      transform: scale(1.1);
    }
    
    .course-version-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    
    .course-version-name {
      font-weight: 600;
      font-size: 8px;
    }
    
    .course-version-desc {
      font-size: 6px;
      color: var(--muted);
      opacity: 0.8;
    }
    
    .course-select-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, rgba(46, 192, 141, 0.1) 0%, rgba(46, 192, 141, 0.05) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6px;
      color: transparent;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }
    
    .course-select-option.selected .course-select-indicator {
      background: linear-gradient(135deg, var(--green) 0%, var(--green-600) 100%);
      color: white;
      box-shadow: 0 2px 6px rgba(46, 192, 141, 0.3);
      transform: scale(1.1);
    }
    
    /* Mobile responsiveness for dropdown */
    @media (max-width: 768px) {
      .course-select-trigger {
        min-width: 120px;
        font-size: 10px;
        padding: 6px 28px 6px 10px;
      }
      
      .course-select-dropdown {
        border-radius: 12px;
        box-shadow: 0 16px 32px rgba(15, 35, 28, 0.15), 0 6px 16px rgba(15, 35, 28, 0.1);
      }
      
      .course-select-option {
        padding: 10px 12px;
        font-size: 10px;
      }
      
      .course-select-option.edition-label {
        font-size: 9px;
        padding: 6px 12px 3px;
      }
    }
    
    /* Extra small screens */
    @media (max-width: 480px) {
      .course-select-trigger {
        min-width: 100px;
        font-size: 9px;
        padding: 5px 24px 5px 8px;
      }
      
      .course-select-option {
        padding: 8px 10px;
        font-size: 9px;
      }
      
      .course-select-option.edition-label {
        font-size: 8px;
        padding: 5px 10px 2px;
      }
    }
    .active-dot { 
      width:8px; 
      height:8px; 
      border-radius:50%; 
      background:var(--green-neon); 
      box-shadow:0 0 0 3px var(--neon-soft), 0 0 14px var(--neon-soft);
      position: relative;
      transition: opacity 0.3s ease;
    }
    
    .active-dot.loading {
      opacity: 0;
    }
    
    .course-loading-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1px solid var(--green);
      border-top: 1px solid transparent;
      animation: courseSpin 1s linear infinite;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 2;
    }
    
    .course-loading-icon.show {
      opacity: 1;
    }
    
    @keyframes courseSpin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .nav .right { display:flex; gap:10px; align-items:center; padding-top:2px; }
    .icon-btn { 
      width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; 
      border-radius:50%; border:1px solid var(--line); background:#f4faf7; cursor:pointer; 
      transition:all .2s ease; position:relative; z-index:10; pointer-events:auto !important;
      user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
    }
    .icon-btn:hover { 
      box-shadow:0 0 0 3px rgba(46,102,93,.10); 
      background:#f0fdf9; 
      transform:scale(1.05);
    }
    .icon-btn:active { 
      transform:scale(0.95); 
      background:#e8f8f3;
    }
    .icon-btn svg { 
      width:22px; height:22px; fill:var(--strong); 
      transition:fill .2s ease;
    }
    .icon-btn:hover svg { 
      fill:var(--green-600);
    }
    
    /* Elegant Dharma Button with Subtle Avatar-Style Shadow */
    .dharma-btn {
      background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(240, 253, 249, 0.9) 100%);
      border: 1px solid rgba(28, 174, 130, 0.2);
      box-shadow: 
        0 2px 8px rgba(28, 174, 130, 0.12),
        0 8px 20px rgba(15, 35, 28, 0.08),
        0 0 20px rgba(0, 191, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(12px) saturate(120%);
    }
    
    .dharma-btn:hover {
      background: linear-gradient(135deg, rgba(28, 174, 130, 0.08) 0%, rgba(55, 227, 159, 0.06) 100%);
      border-color: rgba(28, 174, 130, 0.3);
      box-shadow: 
        0 0 0 3px rgba(55, 227, 159, 0.15),
        0 4px 16px rgba(28, 174, 130, 0.15),
        0 12px 32px rgba(15, 35, 28, 0.1),
        0 0 30px rgba(0, 191, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transform: scale(1.08) translateY(-1px);
    }
    
    .dharma-btn:active {
      transform: scale(1.02) translateY(0px);
      box-shadow: 
        0 0 0 2px rgba(28, 174, 130, 0.2),
        0 2px 8px rgba(28, 174, 130, 0.15),
        0 0 15px rgba(0, 191, 255, 0.1),
        inset 0 2px 4px rgba(28, 174, 130, 0.1);
    }
    
    .dharma-btn svg {
      width: 24px !important;
      height: 24px !important;
      /* Use fill/stroke to match other header icons (they use fill) */
      fill: var(--strong);
      stroke: var(--strong);
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .dharma-btn:hover svg {
      fill: var(--green-600);
      stroke: var(--green-600);
      filter: drop-shadow(0 0 8px rgba(28, 174, 130, 0.3));
    }
    
    /* Desktop Premium Meditation App - Bigger Icons */
    @media (min-width: 768px) {
      .header-actions {
        right: 24px;
        width: 80px;
        padding: 20px 16px;
        border-radius: 40px;
        gap: 16px;
        top: 35% !important;
        height: auto;
      }
      
      .header-actions .icon-btn {
        width: 56px;
        height: 56px;
        border-radius: 28px;
      }
      
      .header-actions .icon-btn svg {
        width: 28px;
        height: 28px;
      }
      
    /* Menu with Normal Rounded Bottom */
    .header-actions.collapsed {
      width: 64px;
      height: 160px;
      border-radius: 32px;
      padding: 16px 8px;
      padding-bottom: 16px;
      position: relative;
    }      .header-actions.collapsed .icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 18px;
      }
      
      .header-actions.collapsed .icon-btn svg {
        width: 18px;
        height: 18px;
      }
      
      /* Enhanced desktop hover effects */
      .header-actions:hover {
        transform: translateY(-50%) translateX(-6px) !important;
      }
    }
    
    /* Premium Center Action Button - Bigger for Desktop */
    @media (min-width: 768px) {
      #btnPartSwitcher {
        width: 56px !important;
        height: 56px !important;
        border-radius: 28px !important;
        position: relative !important;
        transform: none !important;
      }
      
      #btnPartSwitcher svg {
        width: 30px !important;
        height: 30px !important;
      }
      
      .header-actions.collapsed #btnPartSwitcher {
        width: 36px !important;
        height: 36px !important;
        border-radius: 18px !important;
        transform: none !important;
      }
      
      .header-actions.collapsed #btnPartSwitcher svg {
        width: 20px !important;
        height: 20px !important;
      }
      
      /* Prevent button movement on click */
      #btnPartSwitcher:active {
        transform: scale(0.96) !important;
      }
      
      .header-actions.collapsed #btnPartSwitcher:active {
        transform: scale(0.94) !important;
      }
      
      /* Right-Side Language Flag Desktop */
      #rightSideLangWrapper {
        top: calc(35% + 180px) !important;
        right: 24px !important;
        width: 64px;
        height: 64px;
        padding: 12px;
        border-radius: 32px;
      }
      
      #rightSideLangWrapper .lang-flag-trigger {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        font-size: 22px;
      }
    }
    
    #btnPartSwitcher {
      position: relative !important;
      z-index: 10 !important;
      will-change: transform;
    }
    
    #btnPartSwitcher svg {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform;
    }
    
    /* Wheel Rolling Animation on Hover */
    #btnPartSwitcher:hover svg { 
      animation: wheelRoll 1.5s ease-in-out infinite;
    }
    
    @keyframes wheelRoll {
      0% { 
        transform: scale(1.05) rotate(0deg);
      }
      100% { 
        transform: scale(1.05) rotate(360deg);
      }
    }
    
    /* Modern button states */
    .header-actions .icon-btn {
      position: relative;
      isolation: isolate;
    }

    /* Clean icon styling */
    .header-actions .icon-btn svg {
      fill: currentColor;
      stroke: currentColor;
    }

    /* Donation icon coloring: green by default */
    #btnDonation .donation-heart-icon {
      fill: var(--green-600);
    }
    #btnDonation:hover .donation-heart-icon {
      fill: var(--green);
    }
    
    /* Ensure restart button is always visible and accessible */
    #btnRestart:focus {
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }
    
    #btnRestart:disabled {
      opacity: 1 !important;
      cursor: not-allowed !important;
      transform: none !important;
    }
    
    #btnRestart:disabled:hover {
      background: rgba(248, 249, 250, 0.8);
      border: none;
      box-shadow: none;
      transform: none;
    }
    
    /* Mobile optimization for restart button */
    @media (max-width: 768px) {
      /* Let #btnRestart inherit sizes from .header-actions .icon-btn */
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
      #btnRestart {
        border: 2px solid var(--strong);
        background: var(--card);
      }
      #btnRestart:hover {
        background: var(--green-light);
        border-color: var(--green);
      }
    }
    
    /* Modern Minimalist Restart Notification */
    .restart-notification {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 100000;
      opacity: 0;
      transform: translateX(100%) scale(0.9);
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      max-width: 320px;
    }
    
    .restart-notification-content {
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(46, 192, 141, 0.12);
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 
        0 20px 40px rgba(15, 35, 28, 0.08),
        0 8px 24px rgba(46, 192, 141, 0.06),
        0 0 0 1px rgba(46, 192, 141, 0.04);
      backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
    
    .restart-notification-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--green-neon), var(--green), var(--green-neon));
      opacity: 0.8;
    }
    
    .restart-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--green-light) 0%, rgba(46, 192, 141, 0.1) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    
    .restart-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--green);
      stroke-width: 1.5;
      animation: rotateIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    /* Modern animated restart icon */
    .restart-icon-animated {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--green-light) 0%, rgba(46, 192, 141, 0.1) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    
    .restart-icon-animated::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      background: conic-gradient(from 0deg, var(--green-neon), var(--green), var(--green-neon), transparent);
      animation: rotate360 2s linear infinite;
      opacity: 0.3;
    }
    
    .restart-icon-animated::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--green-light) 0%, rgba(46, 192, 141, 0.1) 100%);
    }
    
    .restart-icon-animated svg {
      position: relative;
      z-index: 2;
      width: 20px;
      height: 20px;
      stroke: var(--green);
      stroke-width: 1.5;
      animation: pulseGlow 1.5s ease-in-out infinite;
    }
    
    /* Progress circle animation */
    .restart-progress-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, var(--green-neon), var(--green), var(--green-neon));
      animation: rotate360 2s linear infinite;
      opacity: 0.4;
    }
    
    .restart-progress-circle::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--green-light) 0%, rgba(46, 192, 141, 0.1) 100%);
    }
    
    .restart-text {
      flex: 1;
      min-width: 0;
    }
    
    .restart-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--strong);
      font-family: 'Raleway', sans-serif;
      letter-spacing: 0.3px;
      margin-bottom: 2px;
      line-height: 1.2;
    }
    
    .restart-subtitle {
      font-size: 12px;
      color: var(--muted);
      font-family: 'Raleway', sans-serif;
      line-height: 1.3;
      font-weight: 400;
      text-align: center;
    }
    
    .restart-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(46, 192, 141, 0.1);
      overflow: hidden;
    }
    
    .restart-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--green-neon), var(--green));
      width: 0%;
      animation: progressFill 1.5s ease-out forwards;
    }
    
    /* Animations */
    @keyframes rotateIn {
      0% {
        transform: rotate(-180deg) scale(0.5);
        opacity: 0;
      }
      100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes progressFill {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }
    
    @keyframes rotate360 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes pulseGlow {
      0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(46, 192, 141, 0.3));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 12px rgba(46, 192, 141, 0.5));
      }
    }
    
    /* Mobile optimization */
    @media (max-width: 768px) {
      .restart-notification {
        top: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
      }
      
      .restart-notification-content {
        padding: 16px 20px;
        gap: 12px;
      }
      
      .restart-icon {
        width: 36px;
        height: 36px;
      }
      
      .restart-icon svg {
        width: 18px;
        height: 18px;
      }
      
      .restart-icon-animated {
        width: 36px;
        height: 36px;
      }
      
      .restart-icon-animated svg {
        width: 18px;
        height: 18px;
      }
      
      .restart-progress-circle {
        width: 32px;
        height: 32px;
      }
      
      /* Removed - now handled by comprehensive mobile font optimization below */
    }

    @media (max-width: 520px) {
      .restart-notification {
        top: 12px;
        right: 12px;
        left: 12px;
      }

      .restart-notification-content {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 14px;
      }

      .restart-title {
        font-size: 13px;
        letter-spacing: 0.2px;
      }

      .restart-subtitle {
        font-size: 11px;
        line-height: 1.35;
      }
    }

    @media (max-width: 380px) {
      .restart-title {
        font-size: 12.5px;
      }

      .restart-subtitle {
        font-size: 10.5px;
      }

      .restart-icon,
      .restart-icon-animated {
        width: 32px;
        height: 32px;
      }
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      .restart-notification-content {
        background: rgba(20, 25, 22, 0.95);
        border-color: rgba(46, 192, 141, 0.2);
        box-shadow: 
          0 20px 40px rgba(0, 0, 0, 0.3),
          0 8px 24px rgba(46, 192, 141, 0.1),
          0 0 0 1px rgba(46, 192, 141, 0.08);
      }
      
      .restart-title {
        color: #e8f8f3;
      }
      
      .restart-subtitle {
        color: #9bb0a6;
      }
    }
    
    /* Ensure account button is always clickable */
#btnAccount { 
  pointer-events: auto !important; 
  cursor: pointer !important; 
  position: relative !important; 
  z-index: 100 !important; 
  user-select: none !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#btnAccount.is-loading {
  background: linear-gradient(140deg, rgba(20,118,94,0.16), rgba(255,255,255,0.95)) !important;
  box-shadow:
    0 12px 30px rgba(16, 74, 60, 0.2),
    inset 0 1px 3px rgba(255,255,255,0.6);
}
#btnAccount.is-loading::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(55, 227, 159, 0.5);
  box-shadow: 0 0 18px rgba(55, 227, 159, 0.35);
  animation: profileAuraPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
#btnAccount.is-loading svg {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

@keyframes profileAuraPulse {
  0% {
    opacity: 0.35;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.35;
    transform: scale(0.95);
  }
}
    #btnAccount:hover { 
      background: rgba(255, 255, 255, 0.95) !important;
      color: rgba(28, 174, 130, 0.9) !important;
      border-color: rgba(28, 174, 130, 0.15) !important;
      box-shadow: 
        0 8px 24px -4px rgba(28, 174, 130, 0.2),
        0 4px 12px -2px rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
      transform: translateY(-2px) scale(1.05) !important;
    }
    #btnAccount:active {
      transform: translateY(-1px) scale(0.98) !important;
      box-shadow: 
        0 4px 12px -2px rgba(28, 174, 130, 0.15),
        0 2px 6px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    /* Mobile-specific touch feedback for profile button */
    @media (max-width: 768px) {
      #btnAccount {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
      }
      
      /* Enhanced loading icon visibility on mobile */
      #btnAccount .profile-loading-icon {
        width: 24px !important;
        height: 24px !important;
      }
      
      #btnAccount .profile-loading-icon svg {
        width: 24px !important;
        height: 24px !important;
      }
    }
    @media (max-width: 480px) {
      #btnAccount {
        min-width: 48px !important;
        min-height: 48px !important;
      }
      
      #btnAccount .profile-loading-icon {
        width: 26px !important;
        height: 26px !important;
      }
      
      #btnAccount .profile-loading-icon svg {
        width: 26px !important;
        height: 26px !important;
      }
    }
    
    /* App */
    .app { max-width:980px; margin:0 auto; padding:14px; min-height:calc(100vh - 60px); }
    
    /* Tabs */
    .tabs-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 16px; margin:16px auto 120px; scrollbar-width:none; -ms-overflow-style:none; min-height:80px; max-width:560px; display:block; }
    .tabs-wrapper::-webkit-scrollbar { display:none; }
    .tabs { display:flex; gap:12px; padding:16px 8px 20px; width:100%; max-width:100%; align-items:center; justify-content:flex-start; min-height:64px; margin-top:40px; }
    .tab-btn { 
      flex:0 0 auto; padding:12px 16px; border:none; border-radius:16px; cursor:pointer; 
      background:#eefaf4; color:#2a7f69; font-weight:var(--weight-medium); font-size:calc(var(--font-size-label) - 0.2px); 
      letter-spacing:0.01em;
      box-shadow:var(--shadow-soft);
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative; overflow:hidden;
      min-height:40px; display:flex; align-items:center; justify-content:center;
      white-space:nowrap;
    }

    .tab-btn.active { 
      background:var(--green-600); color:#fff; 
      box-shadow:0 0 16px var(--neon-soft);
      transform:translateY(-1px);
    }
    /* Desktop: make tab buttons fill the entire tabs row and be slightly larger */
    @media (min-width: 641px){
      .tab-btn {
        flex:1 1 0; /* distribute evenly across the row */
        min-width:0; /* allow shrinking so all fit in one row */
        padding:14px 16px; 
        font-size:calc(var(--font-size-label) + 0.2px); 
        min-height:46px;
      }
    }
    @media (max-width:640px){ 
      .tab-btn { 
        min-width:80px; 
        padding:10px 14px; 
        font-size:calc(var(--font-size-label) - 0.5px); 
        min-height:36px;
      .part-info.has-coming-soon { gap:6px; }
      .part-info.has-coming-soon .coming-soon-badge { font-size:9.5px; padding:4px 7px; }
      }
      .tabs { 
        gap:8px; 
        padding:12px 4px 16px; 
      }
      .tabs-wrapper { 
        padding:0 12px; 
        margin:12px auto 100px; 
      }
    }
    
    /* START Button - Apple/Google-Level Premium Design */
    .zen-start-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 24px auto 20px auto;
      padding: 7px 18px;
      border-radius: 16px;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: -0.01em;
      position: relative;
      background: transparent;
      border: none;
      box-shadow: none;
      transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      color: rgba(28,174,130,0.7);
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    
    .zen-start-button:active {
      transform: scale(0.97);
      background: rgba(28,174,130,0.06);
      color: rgba(28,174,130,0.85);
    }
    
    /* Add subtle hover state for devices that support it */
    @media (hover: hover) {
      .zen-start-button:hover {
        background: rgba(28,174,130,0.04);
        color: rgba(28,174,130,0.8);
      }
    }
    
    /* Enhanced for high-DPI displays */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .zen-start-button {
        font-weight: 350;
      }
    }
    
    /* Container for the button */
    .zen-start-container {
      text-align: center;
      max-width: 560px;
      margin: 0 auto;
    }
    
    /* Zen arch separator (between expander and tabs) */
    .zen-arch-separator { 
      position: relative; 
      max-width: 560px; 
      margin: 4px auto 8px; 
      padding-bottom: 8px; 
      z-index: 60; /* bring forward so it's visible above nearby elements */
      isolation: isolate;
    }
    .zen-arch { 
      position: relative; 
      height: 56px; 
      pointer-events: none;
    }
    .zen-arch svg { 
      position: absolute; 
      inset: 0; 
      width: 100%; 
      height: 100%;
    }
    /* Make the arc subtly more visible on light backgrounds while keeping the meditative tone */
    .zen-arch path { 
      stroke-opacity: .45 !important;
      stroke-width: 2 !important;
      stroke-linecap: round !important;
      stroke: rgba(28,174,130,0.18) !important; /* gentle green */
    }
    /* Side fades that drift in from the edges towards center */
    .zen-arch::before, .zen-arch::after { 
      content: ""; 
      position: absolute; 
      top: 40px; 
      height: 1px; 
      width: 42%; 
      opacity: .7; 
    }
    .zen-arch::before { 
      left: 0; 
      background: linear-gradient(90deg, var(--line), rgba(0,0,0,0) 70%);
    }
    .zen-arch::after { 
      right: 0; 
      background: linear-gradient(270deg, var(--line), rgba(0,0,0,0) 70%);
    }
    .zen-buddha { 
      display: block; 
      width: 128px; 
      max-width: 36vw; 
      margin: -6px auto 0; 
      object-fit: contain; 
      border-radius: 16px; 
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.08)); 
      opacity: .95;
      z-index: 1;
    }
    @media (max-width: 640px) {
      .zen-arch { height: 46px; }
      .zen-arch::before, .zen-arch::after { top: 34px; width: 40%; opacity:.6; }
      .zen-buddha { width: 108px; margin: -4px auto 0; }
    }
    
    /* Cards */
    .tab-content { 
      display:none; padding:18px; max-width:560px; margin:-75px auto 0; 
      background:linear-gradient(180deg,#ffffff,var(--panel)); 
      border-radius:24px; border:1px solid var(--line); 
      box-shadow:var(--shadow-soft);
    }
    .tab-content.active { display:block; }
    
    /* Separator */
    .section-sep { height:12px; margin:28px 0 16px; background:linear-gradient(90deg, transparent, #eaf4ef, transparent); border-radius:12px; }
    
    /* Modals */
    .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.25); align-items:flex-start; justify-content:center; padding:0 14px; padding-top:var(--popup-offset); z-index:2000; overflow:auto; opacity:0; transition:opacity .25s ease; pointer-events:none; visibility:hidden; }
    .modal[style*="display: flex"], 
    .modal[style*="display:flex"] { pointer-events:auto!important; opacity:1!important; z-index:2000!important; visibility:visible!important; }
    .modal:not([style*="display: flex"]):not([style*="display:flex"]) {
      pointer-events: none !important;
      opacity: 0 !important;
      z-index: -1 !important;
      visibility: hidden !important;
    }
    .modal.fade-out { 
      opacity: 0; 
      pointer-events: none; 
      z-index: -1; 
      visibility: hidden; 
    }
    /* Simple modal transitions */
    .modal {
      transition: opacity 0.3s ease-in-out;
    }
    
    /* Auth Modal - Slide up from bottom animation (desktop & mobile) */
    #authModal {
      align-items: flex-end !important;
      padding-bottom: 0 !important;
      overflow: hidden !important;
    }
    
    #authModal .modal-card {
      transform: translateY(100%);
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
      opacity: 0;
      display: flex;
      flex-direction: column;
    }
    
    #authModal[style*="display: flex"] .modal-card,
    #authModal[style*="display:flex"] .modal-card {
      transform: translateY(0);
      opacity: 1;
    }
    .modal-card { 
      background:#fff; padding:20px; border-radius:20px; max-width:560px; width:100%; 
      border:1px solid var(--line); 
      box-shadow:var(--shadow), 0 12px 40px rgba(46,102,93,.12); 
      color:var(--strong); 
      margin-bottom:14px;
    }
    .modal-card h2 { margin:0 0 10px; font-size:16px; font-weight:800; font-family:'Sora',sans-serif; line-height:1.25; letter-spacing:.2px; }
    /* Removed - now handled by comprehensive mobile font optimization below */
    .modal-card p { margin:0 0 10px; font-size:12px; color:var(--text); }
    .modal-actions { display:flex; justify-content:center; gap:8px; margin-top:10px; }
    
    /* Loading spinner animation */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    /* Sīla */
    .precepts-card { 
      background:linear-gradient(160deg,#ffffff 0%,#fbfefc 60%,#f5fbf8 100%); 
      border:1px solid var(--line); border-radius:20px; padding:22px; 
      box-shadow:var(--shadow);
      max-width:600px;
    }
    
    /* Transformation Image Zoom Modal */
    #transformationZoomModal { 
      opacity: 0; 
      transition: opacity 0.3s ease; 
    }
    #transformationZoomModal[style*="display: flex"] { 
      opacity: 1; 
    }
    #zoomedTransformationImage { 
      transform: scale(0.8); 
      transition: transform 0.3s ease; 
    }
    #transformationZoomModal[style*="display: flex"] #zoomedTransformationImage { 
      transform: scale(1); 
    }
    .precepts-title { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--strong); }
    .precepts-sub { margin:0 0 12px; color:var(--text); }
    
    /* Affirmation */
    .affirm-block { 
      border:1px solid #cfe8dd; background:var(--panel-2); border-radius:16px; padding:14px; 
      box-shadow:0 6px 18px rgba(41,181,130,.08), inset 0 1px 0 rgba(255,255,255,.55);
      position:relative;
      overflow:hidden;
    }
    .affirm-block::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg, transparent, rgba(55,227,159,.05), transparent);
      pointer-events:none;
      transition:left .8s ease;
    }
    .affirm-block:hover::before { left:100%; }
    .affirm-title { color:var(--strong); font-weight:800; line-height:1.35; font-size:10px; }
    .affirm-consent { display:flex; align-items:center; gap:8px; margin-top:10px; cursor:pointer; position:relative; z-index:1; }
    .small-check { position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:linear-gradient(180deg,#ffffff,#eafff5); flex:0 0 18px; z-index:2; }
    .small-check input { position:absolute; inset:0; opacity:0; cursor:pointer; }
    .small-check .ring { position:absolute; inset:0; border-radius:50%; border:1px solid #9ee5c6; pointer-events:none; transition:box-shadow .2s, border-color .2s; }
    .small-check svg { width:12px; height:12px; fill:transparent; transition:fill .2s; }
    .small-check.checked .ring { box-shadow:0 0 12px rgba(55,211,153,.28); border-color:#37d399; }
    .small-check.checked svg { fill:#18b57f; }
    .affirm-hint { 
      color: rgba(28, 174, 130, 0.95); 
      font-weight: 600; 
      font-size: 11px; 
      display: flex;
      align-items: center;
      letter-spacing: 0.3px;
      transition: all 0.3s ease;
    }
    .affirm-hint:hover {
      color: rgba(28, 174, 130, 1);
      transform: translateX(2px);
    }
    
    /* Inputs */
    .sig-label { font-size:10px; font-weight:700; color:var(--strong); }
    .input-hero { width:100%; padding:10px 14px; border:2px solid #cfe1da; border-radius:14px; background:#fff; font-weight:500; color:var(--strong); }
    .input-hero::placeholder { color:#9bb0a6; font-weight:500; }
    .input-hero:focus { outline:none; border-color:#9dddc4; box-shadow:0 0 0 4px rgba(55,227,159,.18); }

    /* Prevent iOS Safari auto-zoom on auth modal email/password inputs */
    #authModal .input-hero[type="email"],
    #authModal .input-hero[type="password"],
    #authModal input[type="email"],
    #authModal input[type="password"] {
      font-size: 16px !important; /* >=16px disables auto-zoom on focus */
      line-height: 1.3;
    }
    #authModal .input-hero::placeholder {
      font-size: 16px; /* keep placeholder consistent */
    }
    
    /* Desktop - Center modal with slide up and scrollable content */
    @media (min-width: 769px) {
      #authModal {
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 40px 14px !important;
      }
      
      #authModal .modal-card {
        border-radius: 32px !important;
        margin: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
      }
    }
    
    /* Mobile Bottom Sheet for Profile Modal */
    @media (max-width: 768px) {
      #authModal {
        align-items: flex-end !important;
        padding: 0 0 0 0 !important;
        padding-top: 0 !important;
        justify-content: center !important;
        overflow: hidden;
      }
      
      #authModal .modal-card {
        max-width: 520px !important;
        width: 90vw !important;
        border-radius: 32px 32px 0 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      
      /* Add drag handle at top of modal - positioned inside modal */
      #authModal .modal-card::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 4px;
        background: rgba(28,174,130,0.5);
        border-radius: 10px;
        z-index: 10;
        pointer-events: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      }
      
      /* Adjust zenHeader on mobile to be compact and properly centered */
      #authModal #zenHeader {
        position: relative !important;
        margin: 0 !important;
        padding: 24px 20px 12px 20px !important;
        width: 100% !important;
        border-radius: 32px 32px 0 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-shrink: 0;
      }
      
      /* Ensure zenHeader content is centered */
      #authModal #zenHeader > div {
        width: 100%;
        text-align: center;
      }
      
      /* Add padding to content areas */
      #authModal #authViewSignedIn,
      #authModal #authViewSignedOut {
        padding: 0 24px;
        margin-bottom: 2px;
      }
      
      /* Adjust close button positioning for mobile */
      #authModal .modal-card > button[onclick="closeAuth()"] {
        top: 28px !important;
        right: 24px !important;
      }
      
      /* Hide close X button on mobile */
      #authModal .modal-card > button[onclick="closeAuth()"] {
        display: none !important;
      }
      
      /* Ensure content is scrollable but not horizontally */
      #authModal #authViewSignedIn,
      #authModal #authViewSignedOut {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(90vh - 180px);
        -webkit-overflow-scrolling: touch;
        width: 100%;
      }
      
      /* Mobile Sign Out Button - Apple/Google-Level Premium Design */
      #authModal #btnLogout {
        display: inline-flex !important;
        width: auto !important;
        margin: 28px auto 24px auto !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        letter-spacing: -0.01em !important;
        position: relative;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        color: rgba(28,174,130,0.6) !important;
        gap: 6px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      
      #authModal #btnLogout svg {
        width: 11px !important;
        height: 11px !important;
        transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0.6;
      }
      
      #authModal #btnLogout:active {
        transform: scale(0.97);
        background: rgba(28,174,130,0.06) !important;
        color: rgba(28,174,130,0.75) !important;
      }
      
      #authModal #btnLogout:active svg {
        opacity: 0.75;
      }
      
      /* Add subtle hover state for devices that support it */
      @media (hover: hover) {
        #authModal #btnLogout:hover {
          background: rgba(28,174,130,0.04) !important;
          color: rgba(28,174,130,0.7) !important;
        }
        
        #authModal #btnLogout:hover svg {
          opacity: 0.7;
        }
      }
      
      /* Enhanced for high-DPI displays */
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        #authModal #btnLogout {
          font-weight: 350 !important;
        }
      }
      
      /* Prevent any horizontal overflow */
      #authModal * {
        max-width: 100%;
        box-sizing: border-box;
      }
    }
    
    /* Signature */
    .sig-box { 
      margin-top:12px; 
      background:linear-gradient(180deg,#ffffff,#fbfffd); 
      border:2px dashed #cfe8dd; border-radius:14px; padding:12px; 
      box-shadow: inset 0 1px 0 rgba(0,0,0,.03), 0 10px 24px rgba(41,181,130,.08);
      position:relative;
      overflow:hidden;
    }
    .sig-box::before {
      content:''; position:absolute; top:0; left:0; right:0; bottom:0;
      background:linear-gradient(135deg, rgba(55,227,159,.05) 0%, transparent 50%, rgba(55,227,159,.05) 100%);
      border-radius:14px; pointer-events:none;
    }
    .sig-title { 
      font-weight:800; color:var(--strong); margin-bottom:8px; 
      font-size:14px; text-align:center;
      text-shadow:0 0 10px rgba(55,227,159,.3);
    }
    .sig-row { display:flex; align-items:stretch; gap:12px; }
    .sig-canvas-wrap { 
      flex:1; position:relative; height:180px; border-radius:16px; overflow:hidden; 
      background:linear-gradient(180deg, var(--zen-card), var(--green-lighter));
      border:1px solid var(--zen-border);
      box-shadow:var(--shadow-button);
    }
    .sig-canvas-wrap canvas { width:100%; height:100%; display:block; touch-action:none; }
    .sig-clear-x {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(28, 174, 130, 0.2);
      color: #1cae82;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4px);
      z-index: 10;
    }
    .sig-clear-x:hover {
      background: rgba(255, 255, 255, 1);
      border-color: #1cae82;
      color: #1cae82;
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.2);
    }
    .sig-clear-x:active {
      transform: scale(0.95);
    }
    .sig-tip { 
      margin-top:6px; color:var(--strong); font-size:11px; text-align:center;
      font-weight:600; padding:6px 10px; background:rgba(55,227,159,.1);
      border-radius:10px; border:1px solid rgba(55,227,159,.2);
    }
    
    /* Player - Reverted to old design but keeping new progress bars */
    .player-shell { 
      background:linear-gradient(180deg,#ffffff,#f2f7f4); 
      border:1px solid var(--line); border-radius:24px; padding:16px; 
      box-shadow:var(--shadow); margin-bottom:18px;
    }
    .player-title { margin:0 0 12px; color:var(--strong); font-weight:600; font-size:12px; text-align:center; }
    .progress { 
      height:10px; background:var(--green-light); border-radius:12px; overflow:hidden; 
      box-shadow:inset 0 2px 4px rgba(15,35,28,.08);
      position:relative;
    }
    .progress::before {
      content:''; position:absolute; top:0; left:0; right:0; bottom:0;
      background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
      border-radius:12px;
    }
    .bar { height:100%; width:0%; border-radius:12px; transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .bar.track { 
      background:linear-gradient(90deg, var(--green-600) 0%, var(--green-neon) 100%); 
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    }
    .bar.day { 
      background:linear-gradient(90deg, var(--green-600) 0%, var(--green-neon) 100%); 
      box-shadow:var(--shadow-neon), inset 0 1px 0 rgba(255,255,255,.6);
    }
    
    /* Timer + GIF */
    #timeDisplay0, [id^="timeDisplay"] {
      position:absolute;
      display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important;
      font-family:'Sora','Raleway',sans-serif !important; font-size:14px !important; font-weight:800 !important; letter-spacing:.5px !important;
      color:#1cae82; text-shadow:0 0 10px rgba(55,227,159,.55), 0 0 22px rgba(55,227,159,.45);
      z-index: 8;
    }
    .center-pop { top:48% !important; }
    .fade-out { opacity:0; transition:opacity .4s ease; pointer-events:none !important; visibility:hidden !important; }
    [id^="timerCircle"] { filter: drop-shadow(0 0 8px rgba(55,227,159,.28)) drop-shadow(0 0 18px rgba(55,227,159,.18)); }
    .circle-gif { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; object-fit:cover; opacity:0; transition:opacity .6s ease; pointer-events:none; z-index: 1; }
.player-loading-indicator {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: none;
  z-index: 5;
  overflow: hidden;
}

.player-loading-indicator::before {
  content: none;
}

.player-loading-indicator::after {
  content: none;
}

.player-loading-indicator.visible {
  opacity: 0;
  animation: none;
}

.circle-gif.loading {
  opacity: 1;
  animation: gifBlink 1.8s ease-in-out infinite;
}

@keyframes gifBlink {
  0% { opacity: 0.35; }
  50% { opacity: 0.9; }
  100% { opacity: 0.35; }
}

@media (max-width: 520px) {
  .circle-gif,
  .player-loading-indicator {
    width: 108px;
    height: 108px;
  }
}
    
    /* Congrats + hint */
    .congrats-burst { 
      display:flex; flex-direction:column; align-items:center; gap:2px; 
    }
    .con-emoji { 
      font-size:22px; animation:popBounce 1.6s ease-in-out both; 
    }
    .con-text { 
      font-weight:600; font-size:10px; letter-spacing:.4px; color:#1cae82; 
      text-align:center;
    }
    .next-hint { font-size:10px; color:#1cae82; font-weight:700; letter-spacing:.3px; text-shadow:0 0 8px rgba(55,227,159,.35); display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
    .next-hint .hint-emoji { font-size:16px; animation:popBounce 1.6s ease-in-out infinite; }
    
    /* Share */
    .share-wrap { 
      display:flex; flex-direction:column; align-items:center; gap:2px; 
    }
    .share-btn { 
      width:40px; height:40px; border-radius:50%; border:1px solid #cfe8dd; 
      background:#f6fffb; display:flex; align-items:center; justify-content:center; cursor:pointer;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative; overflow:hidden;
    }
    .share-btn::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg, transparent, rgba(55,227,159,.1), transparent);
      transition:left .5s ease;
    }
    .share-btn:hover::before { left:100%; }
    .share-btn:hover { 
      box-shadow:0 0 12px rgba(55,211,153,.25);
      transform:translateY(-1px);
    }
    .share-note { 
      font-size:9px; color:var(--muted); 
      text-align:center;
    }
    .share-menu { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
    .share-menu a { font-size:10px; color:#2a7f69; background:#eafff5; border:1px solid #cfe8dd; padding:4px 8px; border-radius:999px; text-decoration:none; }
    /* Social bar (modern, brand-aligned) */
    .social-bar{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:12px}
    .social-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--zen-border);background:linear-gradient(180deg,var(--zen-card),var(--zen-bg));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .2s, box-shadow .2s}
    .social-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-neon)}
    .social-btn svg{width:20px;height:20px}
    
    /* Playlist */
    .playlist { list-style:none; margin:0; padding:0; }
    .playlist li { 
      display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; margin-bottom:10px; 
      border-radius:16px; background:linear-gradient(180deg,#ffffff,#f7fbf9); color:var(--text); cursor:pointer; 
      transition:.2s; border:1px solid var(--line); box-shadow:var(--shadow-soft);
    }
    .playlist li.active { background:#a8d2c8; color:#fff; font-weight:600; }
.track-title { 
  flex:1; 
  font-size:calc(var(--font-size-small) - 0.5px); 
  font-weight:var(--weight-regular); 
  line-height:var(--line-height-body);
}
    .tick-btn { 
      width:28px; height:28px; border-radius:50%; border:1px solid #9ee5c6; 
      background:linear-gradient(180deg,#ffffff,#eafff5); 
      display:inline-flex; align-items:center; justify-content:center; cursor:pointer; 
      transition:.2s;
    }
    .tick-btn svg { width:18px; height:18px; fill:transparent; }
    .playlist li.done { border-color:#6fe0b7; background:linear-gradient(180deg,#f2fff9,#e7fff4); }
    .playlist li.done .tick-btn { border-color:#37d399; box-shadow:0 0 16px rgba(55,211,153,.35); }
    .playlist li.done .tick-btn svg { fill:#18b57f; }
    
    /* Community header */
    .community-header { text-align:center; margin-top:16px; }
    .community-title { font-family:'Sora',sans-serif; font-weight:700; color:var(--strong); font-size:14px; }
    .community-sub { margin-top:4px; font-size:11px; color:var(--muted); }
    
    /* Comments wrapper card */
    .comments { 
      width:100%; margin-top:14px; padding:14px; border:1px solid var(--line); 
      border-radius:18px; background:#fff; 
      box-shadow:var(--shadow-soft); display:none;
    }
    
    /* Minimal comments list + items (icons on right) */
    .comments-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
    .comment-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      padding:10px 12px;
      box-shadow:var(--shadow-soft);
    }
    .comment-row{display:grid;grid-template-columns:1fr auto;align-items:start;gap:10px}
    .comment-author{font-weight:700;color:var(--strong);margin-bottom:2px;font-size:11px}
    .comment-text{color:var(--text);white-space:pre-wrap;font-size:11px;line-height:1.4}
    .comment-right{display:flex;align-items:center;gap:8px;position:relative}
    .comment-meta{color:var(--muted);font-size:9px;white-space:nowrap}
    .comment-actions{display:flex;align-items:center;gap:4px;position:relative}
    .comment-actions button{background:transparent;border:0;padding:4px;border-radius:8px;cursor:pointer}
    .comment-actions svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2}
    .comment-actions button:hover svg{stroke:var(--green-600)}
    .comment-action-btn{background:transparent;border:0;padding:6px;border-radius:6px;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;margin:0 2px}
    .comment-action-btn svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}
    .comment-action-btn:hover{background:rgba(28,174,130,0.1)}
    .comment-action-btn:hover svg{stroke:var(--green-600)}
    .comment-action-btn[data-action="delete"]:hover svg{stroke:#ef4444}
    .comment-action-btn[data-action="delete"]:hover{background:rgba(239,68,68,0.1)}
    .comment-replies{list-style:none;margin:8px 0 0 0;padding:0 0 0 10px;border-left:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
    
    /* Actions dropdown menu */
    .actions-menu{position:absolute;top:100%;right:0;background:var(--zen-card);border:1px solid var(--zen-border);border-radius:12px;padding:8px;box-shadow:var(--shadow-button);z-index:10;display:none;min-width:120px}
    .actions-menu.open{display:block}
    .actions-menu button{display:block;width:100%;padding:8px 12px;border:0;background:transparent;color:var(--text);text-align:left;border-radius:8px;cursor:pointer;font-size:12px;transition:all 0.2s ease}
    .actions-menu button:hover{background:var(--zen-hover)}
    .actions-menu button[data-action="edit"]:hover{color:var(--green-600)}
    .actions-menu button[data-action="delete"]:hover{color:#ef4444;background:rgba(239,68,68,0.1)}
    
    /* Composer */
    .comment-form { 
      border:1px solid var(--zen-border); border-radius:16px; 
      background:linear-gradient(180deg, var(--zen-card), var(--zen-bg)); 
      padding:16px; display:flex; flex-direction:column; gap:12px; margin-top:12px;
      box-shadow:var(--shadow-button);
      backdrop-filter:blur(10px);
    }
    .comment-form .row { display:flex; gap:8px; }
    .comment-form input, .comment-form textarea { 
      width:100%; border:1px solid var(--zen-border); border-radius:12px; padding:10px 12px; 
      font-family:'Raleway',sans-serif; font-size:13px; 
      background:var(--zen-bg); color:var(--text);
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .comment-form input:focus, .comment-form textarea:focus {
      outline:none; border-color:var(--green-neon); 
      background:var(--zen-card); 
      box-shadow:var(--shadow-neon), 0 0 0 3px rgba(55,227,159,.15);
      transform:translateY(-1px);
    }
    .comment-form textarea { min-height:70px; resize:vertical; }
    .comment-form .actions { display:flex; justify-content:flex-end; gap:8px; }
    
    /* Quick Check / Tomorrow */
    .qc-card { text-align:center; }
    .qc-badge { 
      display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:48px; padding:0 16px; 
      border-radius:999px; border:1px solid transparent; 
      background:linear-gradient(180deg, var(--zen-card), var(--green-lighter)); 
      color:var(--strong); 
      box-shadow:var(--shadow-neon), 0 0 0 3px var(--neon-soft); 
      font-weight:800; font-size:14px;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative;
      overflow:hidden;
      animation: gentlePulse 3s ease-in-out infinite;
    }
    .qc-badge::before {
      content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px;
      border-radius:999px; border:2px solid var(--green-neon);
      box-shadow: 0 0 8px var(--green-neon), 0 0 16px rgba(55,227,159,0.4);
      animation:lightTravel 6s ease-in-out infinite;
    }
    .qc-badge::after {
      content:''; position:absolute; top:-4px; left:-4px; right:-4px; bottom:-4px;
      border-radius:999px; 
      border: 1px solid rgba(55,227,159,0.2);
      opacity: 0;
      animation:zenBreath 8s ease-in-out infinite;
    }
    
    /* Buttons – base with new effects */
    .button {
      appearance:none; border:1px solid var(--line); background:#f4faf7;
      color:var(--strong);
      font-family:'Raleway',sans-serif; font-weight:700; font-size:11px;
      padding:8px 12px; border-radius:10px; cursor:pointer; box-shadow:none;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative; overflow:hidden;
    }
    .button::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg, transparent, rgba(55,227,159,.1), transparent);
      transition:left .5s ease;
    }
    .button:hover::before { left:100%; }
    .button:hover { 
      box-shadow:0 0 0 3px rgba(46,102,93,.10);
      transform:translateY(-1px);
    }
    .button:active { transform:translateY(0px); }
    .button.primary { 
      border:none; color:#fff; background:var(--green-600); 
      box-shadow:0 0 0 2px var(--neon-soft), 0 6px 16px rgba(15,35,28,.06);
    }
    
    /* Auth Modal Button - Better proportions */
    #authModal .button.primary {
      padding: 12px 24px;
      font-size: 14px;
      min-height: 44px;
      font-weight: 600;
    }
    
    /* Desktop - More refined proportions */
    @media (min-width: 769px) {
      #authModal .button.primary {
        padding: 11px 22px;
        font-size: 13px;
        min-height: 42px;
        font-weight: 500;
      }
      
      #authModal .input-hero {
        padding: 9px 13px;
        font-weight: 500;
      }
    }
    
    /* Auth Modal Content - Better spacing from top */
    #authViewSignedOut .login-preview-card {
      margin-top: 24px;
    }
    
    @media (max-width: 768px) {
      #authViewSignedOut .login-preview-card {
        margin-top: 32px; /* More space on mobile */
      }
    }
    
    .button.small { 
      padding:4px 6px; font-size:10px; border-radius:999px; 
      background:#eafff5; border:1px solid #cfe8dd; 
      display:inline-flex; align-items:center; justify-content:center;
    }
    .button.icon { font-size:0; padding:6px; }
    
    .comments-toggle { display:flex; justify-content:center; margin-top:10px; }
    
    /* Photo preview styles */
    .photo-preview { margin-top:12px; border:1px solid #e0e0e0; border-radius:8px; padding:12px; background:#f8f9fa }
    .photo-preview-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:14px; color:#666 }
    .photo-actions { display:flex; gap:12px; align-items:center }
    .photo-actions .button { font-size:13px; padding:10px 18px; border-radius:14px; font-weight:700 }
    .photo-actions .button.secondary { background:linear-gradient(180deg,#ffffff,#f6fdf9); color:var(--strong); border:1px solid var(--zen-border); box-shadow:var(--shadow-soft) }
    .photo-actions .button.secondary:hover { box-shadow:var(--shadow-neon), 0 0 0 4px var(--neon-soft) }
    .photo-actions .button.danger { background:#fff; color:#b91c1c; border:1px solid #f3d1d1 }
    .photo-actions .button.danger:hover { box-shadow:0 0 0 4px rgba(220,38,38,.12) }
    
    /* Sign Out Button Styles - Full width transparent at bottom */
    #btnLogout:hover {
      background: linear-gradient(to top, rgba(28,174,130,0.18), rgba(28,174,130,0.08), transparent) !important;
      box-shadow: 0 -4px 20px rgba(28,174,130,0.15) !important;
    }
    #btnLogout:active {
      background: linear-gradient(to top, rgba(28,174,130,0.22), rgba(28,174,130,0.10), transparent) !important;
    }
    
    /* Zen Header - Harmonious top gradient */
    #zenHeader {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Elegant button styles for photo actions */
    .btn-elegant {
      padding: 8px 16px;
      font-size: 12px;
      border-radius: 12px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 80px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 🌟 Premium "I Commit" Button - World-Class Design */
    .premium-commit-btn {
      position: relative;
      padding: 10px 24px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px;
      border-radius: 14px !important;
      background: linear-gradient(135deg, 
        rgba(28, 174, 130, 1) 0%,
        rgba(38, 186, 136, 1) 50%,
        rgba(28, 174, 130, 1) 100%) !important;
      border: none !important;
      box-shadow: 
        0 6px 18px rgba(28, 174, 130, 0.32),
        0 3px 10px rgba(28, 174, 130, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1) !important;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
      cursor: pointer;
      animation: commitButtonBreathe 4s ease-in-out infinite;
    }
    
    @keyframes commitButtonBreathe {
      0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 
          0 6px 18px rgba(28, 174, 130, 0.32),
          0 3px 10px rgba(28, 174, 130, 0.22),
          0 2px 6px rgba(0, 0, 0, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      50% {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 
          0 8px 22px rgba(28, 174, 130, 0.38),
          0 4px 12px rgba(28, 174, 130, 0.28),
          0 3px 8px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.35);
      }
    }
    
    .premium-commit-btn .btn-glow {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.1) 30%, 
        transparent 60%);
      animation: btnGlowRotate 8s linear infinite;
      pointer-events: none;
    }
    
    @keyframes btnGlowRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .premium-commit-btn .btn-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      color: white;
    }
    
    .premium-commit-btn .btn-content svg {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      transition: transform 0.3s ease;
    }
    
    .premium-commit-btn .btn-text {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    .premium-commit-btn:hover {
      transform: translateY(-3px) scale(1.03) !important;
      box-shadow: 
        0 12px 32px rgba(28, 174, 130, 0.45),
        0 6px 16px rgba(28, 174, 130, 0.35),
        0 3px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
      animation: none;
    }
    
    .premium-commit-btn:hover .btn-content svg {
      transform: scale(1.1) rotate(5deg);
    }
    
    .premium-commit-btn:active {
      transform: translateY(-1px) scale(0.98) !important;
      box-shadow: 
        0 6px 16px rgba(28, 174, 130, 0.35),
        0 3px 8px rgba(28, 174, 130, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
      transition: all 0.1s ease !important;
    }
    
    .premium-commit-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      animation: none;
      transform: none !important;
    }
    
    .btn-elegant.secondary {
      background: linear-gradient(135deg, var(--zen-card), var(--green-lighter));
      color: var(--strong);
      border: 1px solid var(--zen-border);
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.15);
    }
    
    .btn-elegant.secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(28, 174, 130, 0.25);
    }
    
    .btn-elegant.danger {
      background: linear-gradient(135deg, #fff5f5, #fef2f2);
      color: #dc2626;
      border: 1px solid #fecaca;
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
    }
    
    .btn-elegant.danger:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(220, 53, 69, 0.25);
    }
    
    /* Transformation fade animations */
    .transformation-fade {
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .transformation-fade.fade-out {
      opacity: 0;
      transform: translateY(10px);
    }
    
    .transformation-fade.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .photo-thumbnail { width:80px; height:80px; object-fit:cover; border-radius:6px; border:2px solid #fff; box-shadow:0 2px 4px rgba(0,0,0,0.1) }
    /* Final Congrats Card (Zen minimal) */
    .final-congrats-card { 
      background: linear-gradient(180deg,#ffffff 0%, #f7fbf9 100%);
      border: 1px solid var(--zen-border);
      border-radius: 24px; 
      padding: 22px; 
      box-shadow: var(--shadow-soft);
      text-align:center;
    }
    .final-congrats-icon { font-size:30px; animation:breathe 2.6s ease-in-out infinite; }
    .final-congrats-title { margin:10px 0 6px; font-family:'Sora',sans-serif; font-weight:800; color:var(--strong); font-size:18px; }
    .final-congrats-sub { margin:0 0 14px; color:var(--text); font-size:12px; }
    .final-share-block { margin-top:8px; padding:14px; background:linear-gradient(135deg, rgba(55,227,159,.04) 0%, rgba(55,227,159,.02) 100%); border:1px solid rgba(55,227,159,.15); border-radius:16px; }
    .final-share-title { margin:0 0 6px; font-weight:800; color:#1cae82; font-size:13px; letter-spacing:.2px; }
    .final-share-sub { margin:0 10px 12px; color:var(--muted); font-size:11px; }
    .final-actions { display:flex; justify-content:center; gap:10px; }
    .final-btn { 
      display:inline-flex; 
      align-items:center; 
      gap:10px; 
      padding:12px 18px; 
      border-radius:16px; 
      font-weight:600; 
      font-size:13px;
      border:1px solid var(--line); 
      background:linear-gradient(135deg,#ffffff,#f8f9fa); 
      color:var(--strong); 
      box-shadow:0 2px 8px rgba(0,0,0,0.06);
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position:relative;
      overflow:hidden;
    }
    .final-btn::before {
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(55,227,159,0.08), transparent);
      transition:left 0.6s ease;
    }
    .final-btn:hover::before {
      left:100%;
    }
    .final-btn:hover {
      transform:translateY(-1px);
      box-shadow:0 4px 16px rgba(0,0,0,0.12);
      border-color:#9dddc4;
    }
    .final-btn.primary {
      background:linear-gradient(135deg,#1cae82,#18b57f);
      color:#fff;
      border-color:#1cae82;
      box-shadow:0 4px 16px rgba(28,174,130,0.3);
    }
    .final-btn.primary:hover {
      background:linear-gradient(135deg,#18b57f,#16a675);
      box-shadow:0 6px 20px rgba(28,174,130,0.4);
    }
    .btn-icon {
      font-size:16px;
      opacity:0.9;
    }
    .btn-text {
      font-weight:600;
      letter-spacing:0.3px;
    }
    .final-btn.primary { background:linear-gradient(135deg,#1cae82,#37e39f); color:#fff; border:none; box-shadow:0 6px 18px rgba(28,174,130,.25); }
    .final-btn svg { width:18px; height:18px; }
    /* Account profile card (zen style) */
    .profile-card { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--zen-border); border-radius:16px; background:linear-gradient(160deg,#ffffff 0%,#fbfefc 60%,#f5fbf8 100%); box-shadow:var(--shadow-soft); margin-bottom:14px; animation: zenFade .4s ease both; }
    .profile-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(180deg,#ffffff,#eafff5); border:1px solid var(--zen-border); display:flex; align-items:center; justify-content:center; font-weight:800; color:#2e665d; }
    .profile-info { display:flex; flex-direction:column; gap:2px; }
    .profile-name { font-weight:800; color:var(--strong); font-size:14px; }
    .profile-email { color:var(--muted); font-size:12px; }
    .profile-cta-group { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; align-items:stretch; margin-top:16px; }
    .profile-cta-btn { border-radius:16px; border:1px solid rgba(28,174,130,0.2); padding:14px 18px; font-family:'Sora',sans-serif; font-weight:600; letter-spacing:0.3px; font-size:12px; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; background:rgba(248,252,250,0.92); color:#1cae82; box-shadow:0 4px 16px rgba(28,174,130,0.12); }
    .profile-cta-btn svg { width:18px; height:18px; }
    .profile-cta-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(28,174,130,0.18); }
    .profile-cta-btn:focus-visible { outline:2px solid rgba(28,174,130,0.4); outline-offset:3px; }
    .profile-cta-btn--primary { background:linear-gradient(135deg,#1cae82 0%,#37e39f 100%); color:#fff; border:none; box-shadow:0 8px 24px rgba(28,174,130,0.32); }
    .profile-cta-btn--primary:hover { box-shadow:0 12px 28px rgba(28,174,130,0.35); }
    .profile-cta-btn--ghost { background:rgba(255,255,255,0.94); border:1px solid rgba(28,174,130,0.18); }
    .profile-card-highlight { animation:profileCardPulse 1.2s ease-in-out; box-shadow:0 0 0 3px rgba(28,174,130,0.25), 0 12px 30px rgba(28,174,130,0.22) !important; }
    @keyframes profileCardPulse {
      0% { box-shadow:0 0 0 0 rgba(28,174,130,0.15), 0 8px 22px rgba(28,174,130,0.12); }
      50% { box-shadow:0 0 0 6px rgba(28,174,130,0.2), 0 16px 34px rgba(28,174,130,0.25); }
      100% { box-shadow:0 0 0 0 rgba(28,174,130,0.15), 0 8px 22px rgba(28,174,130,0.12); }
    }
    @media (max-width:560px){ .profile-card { padding:14px; } }
    @media (max-width:560px){ .profile-cta-group { grid-template-columns:1fr; } }
    
    .subscription-card { margin:20px 0; padding:18px 20px; border-radius:18px; border:1px solid rgba(28,174,130,0.15); background:linear-gradient(135deg, rgba(248,252,250,0.9) 0%, rgba(240,247,244,0.95) 100%); box-shadow:0 12px 28px rgba(28,174,130,0.08); text-align:left; }
    .subscription-card__title { font-size:13px; letter-spacing:0.4px; text-transform:uppercase; color:#1cae82; margin:0 0 6px; font-weight:700; }
    .subscription-card__copy { margin:0 0 12px; font-size:12px; color:#4c5d58; line-height:1.5; }
    .subscription-form { display:flex; flex-direction:column; gap:10px; }
    .subscription-form__fields { display:flex; gap:8px; align-items:center; }
    .subscription-form--stacked .subscription-form__fields { flex-direction:column; align-items:stretch; }
    .subscription-form--mini .subscription-form__fields { flex-wrap:nowrap; }
    .subscription-input { flex:1; border-radius:999px; border:1px solid rgba(28,174,130,0.2); padding:10px 16px; font-size:13px; font-family:'Sora',sans-serif; background:rgba(255,255,255,0.9); transition:border-color 0.2s ease, box-shadow 0.2s ease; color:#1a2c28; }
    .subscription-input:focus { border-color:#1cae82; box-shadow:0 0 0 3px rgba(28,174,130,0.15); outline:none; }
    .subscription-button { border-radius:999px; border:none; background:linear-gradient(135deg,#1cae82 0%,#37e39f 100%); color:#fff; font-weight:600; font-family:'Sora',sans-serif; letter-spacing:0.3px; padding:10px 18px; display:inline-flex; gap:6px; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
.subscription-button svg { width:14px; height:14px; flex-shrink:0; stroke:currentColor; }
.subscription-button svg path { stroke:currentColor; }
    .subscription-button:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(28,174,130,0.35); }
    .subscription-button.is-loading { opacity:0.65; pointer-events:none; }
    .subscription-feedback { min-height:16px; font-size:11px; letter-spacing:0.2px; color:#6b7780; }
    .subscription-feedback[data-state="success"] { color:#1cae82; }
    .subscription-feedback[data-state="error"] { color:#c14040; }
    .subscription-form--mini .subscription-input { padding:8px 12px; font-size:12px; }
.subscription-form--mini .subscription-button { padding:8px 14px; font-size:11px; }
.subscription-form--success .subscription-input { border-color:rgba(28,174,130,0.5); }
.footer-subscribe { width:100%; max-width:320px; margin-top:12px; padding-top:2px; }
.footer-subscribe .subscription-feedback { font-size:10px; min-height:0; margin-top:4px; }
.footer-subscribe .subscription-feedback:empty { display:none; }
@media (max-width:480px){
  .subscription-form__fields { flex-direction:column; align-items:stretch; }
  .subscription-button { width:100%; }
  .subscription-form--mini .subscription-form__fields { flex-direction:row; }
}
.footer-subscribe-note,
.profile-subscribe-note {
  display:block;
  margin-top:8px;
  font-size:9px;
  color:#5a7a72;
  letter-spacing:0.3px;
}
.footer-subscribe-note {
  margin-top:3px;
  opacity:0.85;
}
.after-selfie-note {
  margin-top:8px;
  font-size:10px;
  color:#6b7280;
  letter-spacing:0.4px;
}
.account-after-selfie {
  display:none;
  margin:16px 0;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(28,174,130,0.15);
  background:rgba(248,252,250,0.95);
  box-shadow:0 14px 34px rgba(28,174,130,0.08);
  flex-direction:column;
  gap:12px;
}
.account-after-selfie__note {
  font-size:12px;
  color:#1cae82;
  font-weight:600;
  letter-spacing:0.3px;
}
.account-after-selfie__actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.profile-subscribe {
  margin-top:12px;
  border:1px solid rgba(28,174,130,0.12);
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 10px 26px rgba(28,174,130,0.12);
}
.admin-signin {
  position:fixed;
  inset:0;
  background:rgba(3,3,3,0.78);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:12000;
}
.admin-signin.hidden { display:none; }
.admin-signin .admin-card {
  width:min(360px,90vw);
  background:rgba(15,20,22,0.96);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);
  padding:2.2rem;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.admin-signin h2 {
  margin-top:0;
  color:#fff;
  letter-spacing:0.4px;
}
.admin-signin form label {
  display:flex;
  flex-direction:column;
  margin-bottom:1rem;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.3px;
}
.admin-signin form input {
  margin-top:0.35rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  padding:0.85rem 1rem;
  background:rgba(255,255,255,0.06);
  color:#fff;
}
.admin-signin .hint {
  font-size:12px;
  color:rgba(255,255,255,0.6);
  margin-top:0.5rem;
}
.subscription-controls {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-end;
  margin:1rem 0 1.5rem;
}
.subscription-controls label {
  display:flex;
  flex-direction:column;
  font-size:12px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.3px;
}
.subscription-controls select {
  margin-top:0.25rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  padding:0.6rem 1rem;
  color:#fff;
  min-width:140px;
}
.subscription-summary {
  background:linear-gradient(135deg,rgba(28,174,130,0.12),rgba(28,174,130,0.04));
  border:1px solid rgba(28,174,130,0.2);
  border-radius:18px;
  padding:1rem;
  margin-bottom:1.5rem;
  box-shadow:0 12px 24px rgba(0,0,0,0.18);
}
.subscription-summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}
.subscription-summary-grid strong {
  display:block;
  font-size:12px;
  letter-spacing:0.4px;
  color:#1cae82;
  text-transform:uppercase;
  margin-bottom:0.4rem;
}
.subscription-summary-grid table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  color:rgba(255,255,255,0.8);
}
.subscription-summary-grid td {
  padding:0.2rem 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.composer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin:1rem 0;
}
.composer-grid select {
  margin-top:0.25rem;
  padding:0.75rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:#fff;
}
.final-congrats-loading {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  z-index:12000;
  flex-direction:column;
  gap:12px;
}
.final-congrats-loading__spinner {
  width:48px;
  height:48px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.2);
  border-top-color:#fff;
  animation:spin 1s linear infinite;
}
.final-congrats-loading__text {
  color:#fff;
  letter-spacing:0.3px;
  font-size:13px;
  text-align:center;
}
    
    /* Harmonious minimal neon hint (guests only) */
    .progress-hint { display:inline-block; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:500; letter-spacing:.3px; color:#1cae82; background:#f6fffb; border:1px solid #cfe8dd; text-shadow:0 0 10px rgba(55,227,159,.45), 0 0 18px rgba(55,227,159,.28); box-shadow:0 0 0 3px var(--neon-soft); margin-left:auto; }
    @media (max-width:560px){ .progress-hint { font-size:9px; padding:3px 6px; } }
    
    /* Mobile Font Optimizations - Smaller fonts for smartphone screens */
    @media (max-width: 768px) {
      /* VIPASSANA title - keep same size as desktop */
      .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Force VIPASSANA title to be same size as desktop */
      .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Base body font size reduction */
      body { font-size: 10px; }
      
      /* Navigation and header adjustments */
      .nav .left { font-size: 10px; }
      .app-title { font-size: 10px; }
      .course-select { font-size: 9px; }
      
      /* Modal and card adjustments */
      .modal-card h2 { font-size: 13px; }
      .modal-card p { font-size: 10px; }
      
      /* Tab buttons */
      .tab-btn { font-size: 11px; padding: 12px 16px; }
      
      /* Affirmation blocks */
      .affirm-title { font-size: 9px; }
      .affirm-hint { font-size: 8px; }
      
      /* Input and form elements - Enhanced mobile padding */
      .sig-label { font-size: 9px; }
      .input-hero { font-size: 11px; padding: 16px 18px; min-height: 48px; }
      .sig-title { font-size: 12px; }
      .sig-tip { font-size: 9px; }
      
      /* Login form specific mobile improvements */
      #authViewSignedOut { padding: 20px 16px; }
      .auth-tabs { margin-bottom: 16px; padding: 6px; }
      .auth-tabs .button.small { padding: 12px 16px; font-size: 11px; min-height: 44px; }
      #authSignInForm > div { margin-bottom: 16px; }
      label[style*="font-size:12px"] { font-size: 11px !important; margin: 8px 0 16px !important; }
      
      /* Login preview card mobile optimization */
      .login-preview-card { padding: 18px 16px !important; margin-bottom: 20px !important; }
      .login-preview-card > div:first-child { width: 20px !important; height: 20px !important; font-size: 10px !important; margin-right: 10px !important; }
      .login-preview-card > div:last-child > div:first-child { font-size: 10px !important; }
      .login-preview-card > div:last-child > div:last-child { font-size: 9px !important; line-height: 1.3 !important; }
      
      /* Vipassana Transformation section mobile optimization */
      div[style*="Vipassana Transformation — Sharable Image"] { padding: 16px !important; margin-bottom: 16px !important; }
      div[style*="font-size:14px"][style*="Vipassana Transformation"] { font-size: 11px !important; margin-bottom: 14px !important; }
      .profile-share-card { padding: 16px !important; }
      .share-card-header { margin-bottom: 14px !important; }
      h4[style*="font-size:14px"][style*="Share your transformation"] { font-size: 10px !important; margin-bottom: 4px !important; }
      p[style*="font-size:10px"][style*="Celebrate your journey"] { font-size: 8px !important; }
      #afterSelfieTip { margin: 10px 0px 0px !important; padding: 10px !important; }
      #afterSelfieTip p { font-size: 9px !important; line-height: 1.2 !important; }
      
      /* Share transformation button mobile optimization */
      #shareTransformationButton { font-size: 10px !important; padding: 8px 12px !important; }
      
      /* Auth modal transformation text mobile optimization */
      #authModal div[style*="text-align:center"][style*="font-weight:700"][style*="font-size:14px"][style*="color:#1cae82"] {
        font-size: 11px !important;
      }
      
      #authModal h4[style*="margin:0 0 6px"][style*="color:#1cae82"][style*="font-size:14px"] {
        font-size: 10px !important;
      }
      
      /* Player and progress */
      .player-title { font-size: 10px; }
      #timeDisplay0, [id^="timeDisplay"] { font-size: 12px !important; }
      .con-text { font-size: 9px; }
      .next-hint { font-size: 9px; }
      
      /* Share elements */
      .share-note { font-size: 8px; }
      .share-menu a { font-size: 9px; }
      
      /* Playlist */
      .track-title { font-size: 10px; }
      
      /* Community */
      .community-title { font-size: 12px; }
      .community-sub { font-size: 9px; }
      
      /* Comments (already optimized but ensuring consistency) */
      .comment-author { font-size: 10px; }
      .comment-text { font-size: 10px; }
      .comment-meta { font-size: 8px; }
      .comment-form input, .comment-form textarea { font-size: 11px; }
      .comment-form button { font-size: 12px; }
      
      /* Buttons and controls */
      .button { font-size: 10px; }
      .button.small { font-size: 9px; }
      .button.icon { font-size: 0; }
      
      /* Tick button optimizations for tablets */
      .tick-btn svg { width: 16px; height: 16px; }
      
      /* Small check optimizations for tablets */
      .small-check svg { width: 11px; height: 11px; }
      
      /* Remember me text optimization for tablets */
      label[style*="font-size:12px"] { font-size: 10px !important; }
      
      /* Profile elements */
      .profile-name { font-size: 12px; }
      .profile-email { font-size: 10px; }
      
      /* Restart modal */
      .restart-title { font-size: 12px; }
      .restart-subtitle { font-size: 10px; }
      
      /* Override ALL inline font-size styles for tablets */
      [style*="font-size: 20px"] { font-size: 18px !important; }
      [style*="font-size: 18px"] { font-size: 16px !important; }
      [style*="font-size: 16px"] { font-size: 14px !important; }
      [style*="font-size: 15px"] { font-size: 13px !important; }
      [style*="font-size: 14px"] { font-size: 12px !important; }
      [style*="font-size: 13px"] { font-size: 11px !important; }
      [style*="font-size: 12px"] { font-size: 10px !important; }
      [style*="font-size: 11px"] { font-size: 9px !important; }
      [style*="font-size: 10px"] { font-size: 8px !important; }
      [style*="font-size: 9px"] { font-size: 8px !important; }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-content {
        padding: 4px 10px !important;
      }
      
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      .zen-expander .zen-chevron {
        width: 6px !important;
        height: 6px !important;
        border-right: 1.3px solid rgba(28,174,130,0.7) !important;
        border-bottom: 1.3px solid rgba(28,174,130,0.7) !important;
      }
      
      .zen-expander .zen-chevron-container {
        margin-top: 5px !important;
      }
      
      /* Profile section specific overrides for tablets */
      #profileAvatar[style*="font-size: 18px"] { font-size: 16px !important; }
      #profileAfterText[style*="font-size: 10px"] { font-size: 9px !important; }
      #profileProgressPercentage[style*="font-size: 10px"] { font-size: 9px !important; }
      #profileDay0Status[style*="font-size: 9px"], #profileDay1Status[style*="font-size: 9px"], 
      #profileDay2Status[style*="font-size: 9px"], #profileDay3Status[style*="font-size: 9px"], 
      #profileDay4Status[style*="font-size: 9px"], #profileDay5Status[style*="font-size: 9px"] { font-size: 8px !important; }
      #profileCompletedDays[style*="font-size: 14px"], #profileTotalDays[style*="font-size: 14px"] { font-size: 12px !important; }
      
      /* Modal and completion section overrides for tablets */
      .precepts-title span[style*="font-size: 20px"] { font-size: 18px !important; }
      .affirm-title[style*="font-size: 12px"] { font-size: 10px !important; }
      .sig-label[style*="font-size: 14px"] { font-size: 12px !important; }
      .photo-preview-header h4[style*="font-size: 16px"] { font-size: 14px !important; }
      .photo-preview-header p[style*="font-size: 14px"] { font-size: 12px !important; }
      .photo-actions button[style*="font-size: 13px"] { font-size: 11px !important; }
      .camera-flash-container div[style*="font-size: 48px"] { font-size: 42px !important; }
      .zen-icon span[style*="font-size: 64px"] { font-size: 56px !important; }
      .zen-text[style*="font-size: 28px"] { font-size: 24px !important; }
      .zen-text[style*="font-size: 14px"] { font-size: 12px !important; }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      /* Final congrats modal overrides for tablets */
      #finalCloseBtn[style*="font-size: 16px"] { font-size: 14px !important; }
      .transformation-complete div[style*="font-size: 13px"] { font-size: 11px !important; }
      .transformation-complete div[style*="font-size: 10px"] { font-size: 9px !important; }
      .honor-text[style*="font-size: 12px"] { font-size: 10px !important; }
      #btnTakeAfterSelfieComparison[style*="font-size: 11px"] { font-size: 10px !important; }
      .upload-text[style*="font-size: 12px"] { font-size: 10px !important; }
      #uploadAfterSelfieBtn[style*="font-size: 11px"] { font-size: 10px !important; }
      .before-after-label[style*="font-size: 9px"] { font-size: 8px !important; }
      .transformation-label[style*="font-size: 10px"] { font-size: 9px !important; }
      .progress-label[style*="font-size: 9px"] { font-size: 8px !important; }
      #finalProgressPct[style*="font-size: 9px"] { font-size: 8px !important; }
    }
    
    /* Extra small screens (phones in portrait) */
    @media (max-width: 480px) {
      /* VIPASSANA title - keep same size as desktop */
      .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Force VIPASSANA title to be same size as desktop */
      .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-content {
        padding: 4px 10px !important;
      }
      
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      .zen-expander .zen-chevron {
        width: 6px !important;
        height: 6px !important;
        border-right: 1.3px solid rgba(28,174,130,0.7) !important;
        border-bottom: 1.3px solid rgba(28,174,130,0.7) !important;
      }
      
      .zen-expander .zen-chevron-container {
        margin-top: 5px !important;
      }
      /* StatusRing mobile optimization */
      #statusRing > div {
        padding: 24px 20px 28px !important;
      }
      
      #statusRing h3[style*="font-size: 22px"],
      #statusRing h3[style*="font-size:22px"] {
        font-size: 18px !important;
      }
      
      #statusRing p[style*="font-size: 11px"],
      #statusRing p[style*="font-size:11px"] {
        font-size: 10px !important;
      }
      
      #statusRing button#statusLight {
        padding: 12px 36px !important;
        font-size: 12px !important;
      }
      
      body { font-size: 9px; }
      .nav .left { font-size: 9px; }
      .app-title { font-size: 9px; }
      .course-select { font-size: 8px; }
      .modal-card h2 { font-size: 12px; }
      .modal-card p { font-size: 9px; }
      .tab-btn { font-size: 10px; padding: 10px 14px; }
      .affirm-title { font-size: 8px; }
      .affirm-hint { font-size: 7px; }
      .sig-label { font-size: 8px; }
      .sig-label[style*="font-size: 14px"] { font-size: 10px !important; }
      .settings-title { font-size: 8px !important; }
      .affirm-hint { font-size: 6px !important; }
      .small-check { width: 14px !important; height: 14px !important; }
      .small-check svg { width: 10px !important; height: 10px !important; }
      .affirm-consent { gap: 6px !important; }
      .input-hero { font-size: 10px; padding: 14px 16px; min-height: 44px; }
      .sig-title { font-size: 11px; }
      .sig-tip { font-size: 8px; }
      
      /* Enhanced mobile login form for smaller screens */
      #authViewSignedOut { padding: 16px 12px; }
      .auth-tabs { margin-bottom: 14px; padding: 5px; }
      .auth-tabs .button.small { padding: 10px 14px; font-size: 10px; min-height: 40px; }
      #authSignInForm > div { margin-bottom: 14px; }
      label[style*="font-size:12px"] { font-size: 10px !important; margin: 6px 0 14px !important; }
      
      /* Login preview card optimization for smaller screens */
      .login-preview-card { padding: 16px 14px !important; margin-bottom: 18px !important; }
      .login-preview-card > div:first-child { width: 18px !important; height: 18px !important; font-size: 9px !important; margin-right: 8px !important; }
      .login-preview-card > div:last-child > div:first-child { font-size: 9px !important; }
      .login-preview-card > div:last-child > div:last-child { font-size: 8px !important; line-height: 1.2 !important; }
      
      /* Vipassana Transformation section optimization for smaller screens */
      div[style*="Vipassana Transformation — Sharable Image"] { padding: 14px !important; margin-bottom: 14px !important; }
      div[style*="font-size:14px"][style*="Vipassana Transformation"] { font-size: 10px !important; margin-bottom: 12px !important; }
      .profile-share-card { padding: 14px !important; }
      .share-card-header { margin-bottom: 12px !important; }
      h4[style*="font-size:14px"][style*="Share your transformation"] { font-size: 9px !important; margin-bottom: 3px !important; }
      p[style*="font-size:10px"][style*="Celebrate your journey"] { font-size: 7px !important; }
      #afterSelfieTip { margin: 8px 0px 0px !important; padding: 8px !important; }
      #afterSelfieTip p { font-size: 8px !important; line-height: 1.1 !important; }
      
      /* Share transformation button mobile optimization for smaller screens */
      #shareTransformationButton { font-size: 9px !important; padding: 6px 10px !important; }
      
      /* AuthModal padding optimization for smaller screens */
      #authModal .modal-card {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
      
      #authModal .modal-card #authViewSignedIn {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
      
      /* Additional authModal width optimization for smaller screens */
      #authModal .modal-card {
        width: 96vw !important;
        max-width: 96vw !important;
      }
      
      /* AuthModal screen padding optimization for smaller smartphone screens */
      #authModal {
        padding-left: 2px !important;
        padding-right: 2px !important;
      }
      .player-title { font-size: 9px; }
      #timeDisplay0, [id^="timeDisplay"] { font-size: 11px !important; }
      .con-text { font-size: 8px; }
      .next-hint { font-size: 8px; }
      .share-note { font-size: 7px; }
      .share-menu a { font-size: 8px; }
      .track-title { font-size: 9px; }
      .community-title { font-size: 11px; }
      .community-sub { font-size: 8px; }
      .comment-author { font-size: 9px; }
      .comment-text { font-size: 9px; }
      .comment-meta { font-size: 7px; }
      .comment-form input, .comment-form textarea { font-size: 10px; }
      .comment-form button { font-size: 11px; }
      .button { font-size: 9px; }
      .button.small { font-size: 8px; }
      .profile-name { font-size: 11px; }
      .profile-email { font-size: 9px; }
      .restart-title { font-size: 11px; }
      .restart-subtitle { font-size: 9px; }
      
      /* Additional mobile optimizations for better touch targets */
      .button { min-height: 36px; padding: 8px 12px; }
      .tab-btn { min-height: 40px; }
      .comment-actions button { min-width: 32px; min-height: 32px; }
      .small-check { width: 16px; height: 16px; }
      .small-check svg { width: 8px; height: 8px; }
      .tick-btn { width: 16px !important; height: 16px !important; }
      .tick-btn svg { width: 6px !important; height: 6px !important; }
      
      /* Remember me text optimization for mobile */
      label[style*="font-size:12px"] { font-size: 9px !important; }
      
      /* No reflections text optimization for mobile */
      .comment-text[style*="font-size:10px"] { font-size: 8px !important; }
      
      /* Override ALL inline font-size styles for mobile */
      [style*="font-size: 20px"] { font-size: 16px !important; }
      [style*="font-size: 18px"] { font-size: 14px !important; }
      [style*="font-size: 16px"] { font-size: 12px !important; }
      [style*="font-size: 15px"] { font-size: 11px !important; }
      [style*="font-size: 14px"] { font-size: 10px !important; }
      [style*="font-size: 13px"] { font-size: 9px !important; }
      [style*="font-size: 12px"] { font-size: 8px !important; }
      [style*="font-size: 11px"] { font-size: 8px !important; }
      [style*="font-size: 10px"] { font-size: 7px !important; }
      [style*="font-size: 9px"] { font-size: 7px !important; }
      
      /* Profile section specific overrides */
      #profileAvatar[style*="font-size: 18px"] { font-size: 14px !important; }
      #profileAfterText[style*="font-size: 10px"] { font-size: 8px !important; }
      #profileProgressPercentage[style*="font-size: 10px"] { font-size: 8px !important; }
      #profileDay0Status[style*="font-size: 9px"], #profileDay1Status[style*="font-size: 9px"], 
      #profileDay2Status[style*="font-size: 9px"], #profileDay3Status[style*="font-size: 9px"], 
      #profileDay4Status[style*="font-size: 9px"], #profileDay5Status[style*="font-size: 9px"] { font-size: 7px !important; }
      #profileCompletedDays[style*="font-size: 14px"], #profileTotalDays[style*="font-size: 14px"] { font-size: 11px !important; }
      
      /* Modal and completion section overrides */
      .precepts-title span[style*="font-size: 20px"] { font-size: 16px !important; }
      .affirm-title[style*="font-size: 12px"] { font-size: 9px !important; }
      .sig-label[style*="font-size: 14px"] { font-size: 10px !important; }
      .photo-preview-header h4[style*="font-size: 16px"] { font-size: 12px !important; }
      .photo-preview-header p[style*="font-size: 14px"] { font-size: 10px !important; }
      .photo-actions button[style*="font-size: 13px"] { font-size: 9px !important; }
      .camera-flash-container div[style*="font-size: 48px"] { font-size: 36px !important; }
      .zen-icon span[style*="font-size: 64px"] { font-size: 48px !important; }
      .zen-text[style*="font-size: 28px"] { font-size: 20px !important; }
      .zen-text[style*="font-size: 14px"] { font-size: 10px !important; }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      /* Final congrats modal overrides */
      #finalCloseBtn[style*="font-size: 16px"] { font-size: 12px !important; }
      .transformation-complete div[style*="font-size: 13px"] { font-size: 9px !important; }
      .transformation-complete div[style*="font-size: 10px"] { font-size: 7px !important; }
      .honor-text[style*="font-size: 12px"] { font-size: 8px !important; }
      #btnTakeAfterSelfieComparison[style*="font-size: 11px"] { font-size: 8px !important; }
      
      /* Final congrats modal mobile optimization for small screens */
      #finalCongratsModal .modal-card {
        padding: 16px 12px !important;
        max-width: 98vw !important;
        width: 98vw !important;
        margin: 5px !important;
        border-radius: 12px !important;
      }
      
      /* Close button mobile optimization for small screens */
      #finalCloseBtn {
        width: 24px !important;
        height: 24px !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 12px !important;
      }
      
      /* Celebration emoji mobile optimization for small screens */
      #finalCongratsModal .zen-icon span {
        font-size: 40px !important;
      }
      
      /* Main title mobile optimization for small screens */
      #finalCongratsModal h1.zen-text {
        font-size: 18px !important;
        margin-bottom: 6px !important;
        letter-spacing: 0.8px !important;
      }
      
      /* Subtitle mobile optimization for small screens */
      #finalCongratsModal h2.zen-text {
        font-size: 10px !important;
        margin-bottom: 10px !important;
        line-height: 1.2 !important;
      }
      
      /* Transformation recognition card mobile optimization for small screens */
      #finalCongratsModal .zen-text[style*="background: rgba(255, 255, 255, 0.92)"] {
        padding: 12px !important;
        max-width: 260px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
      }
      
      /* Transformation header mobile optimization for small screens */
      #finalCongratsModal div[style*="width: 32px"][style*="height: 32px"][style*="background: #1cae82"] {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 8px !important;
        border-radius: 4px !important;
      }
      
      /* Transformation text mobile optimization for small screens */
      #finalCongratsModal div[style*="font-size: 13px"][style*="font-weight: 600"] {
        font-size: 9px !important;
        margin-bottom: 1px !important;
      }
      
      #finalCongratsModal div[style*="font-size: 10px"][style*="color: #888"] {
        font-size: 7px !important;
      }
      
      #finalCongratsModal p[style*="font-size: 12px"][style*="color: #1cae82"] {
        font-size: 8px !important;
        line-height: 1.2 !important;
      }
      
      /* Take after selfie button mobile optimization for small screens */
      #btnTakeAfterSelfieComparison {
        padding: 8px 16px !important;
        font-size: 9px !important;
        border-radius: 10px !important;
        margin: 20px 0 !important;
      }
      
      /* Photo placeholder text mobile optimization for small screens */
      #preceptsPhotoPlaceholder h4[style*="font-size:16px"] {
        font-size: 12px !important;
      }
      
      #preceptsPhotoPlaceholder p[style*="font-size:13px"] {
        font-size: 10px !important;
      }
      
      #preceptsPhotoPlaceholder p[style*="font-size:11px"] {
        font-size: 8px !important;
      }
      
      /* Camera emoji mobile optimization for small screens */
      #preceptsPhotoPlaceholder .camera-flash-container div[style*="font-size:48px"] {
        font-size: 24px !important;
      }
      
      /* Settings title and subtitle mobile optimization for small screens */
      .settings-title {
        font-size: 12px !important;
      }
      
      .settings-sub {
        font-size: 9px !important;
      }
      
      /* Success message mobile optimization for small screens */
      #progressMessage {
        font-size: 9px !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
      }
      
      /* Photo capture success message mobile optimization for small screens */
      .photo-preview-header h4[style*="font-size:16px"] {
        font-size: 12px !important;
      }
      
      .photo-preview-header p[style*="font-size:14px"] {
        font-size: 10px !important;
      }
      
      /* Photo modal mobile optimization for small screens */
      #photoModal .modal-card {
        padding: 12px !important;
        max-width: 98vw !important;
        width: 98vw !important;
        margin: 5px !important;
        border-radius: 12px !important;
      }
      
      #photoModalTitle {
        font-size: 14px !important;
        margin-bottom: 10px !important;
      }
      
      #photoVideo {
        max-width: 220px !important;
        border-radius: 8px !important;
      }
      
      #photoCanvas {
        max-width: 220px !important;
        height: auto !important;
        border-radius: 8px !important;
      }
      
      #photoCountdown {
        font-size: 40px !important;
        border-radius: 8px !important;
      }
      
      .modal-actions {
        gap: 6px !important;
        margin-top: 12px !important;
      }
      
      .modal-actions .button {
        padding: 8px 12px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
      }
      
      /* Auth modal Share and Download buttons mobile optimization for small screens */
      #btnTransformationShare, #btnTransformationDownload, #btnProfileShare, #btnProfileDownload {
        padding: 6px 16px !important;
        font-size: 9px !important;
        min-width: 110px !important;
        border-radius: 6px !important;
        height: 32px !important;
      }
      
      #btnTransformationShare svg, #btnTransformationDownload svg, #btnProfileShare svg, #btnProfileDownload svg {
        width: 10px !important;
        height: 10px !important;
      }
      
      /* Profile button mobile optimization for small screens */
      #btnAccount {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
      }
      
      #btnAccount svg {
        width: 18px !important;
        height: 18px !important;
      }
      
      /* Profile avatar username button mobile optimization for small screens */
      #profileAvatar {
        height: 32px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
      }
      
      #profileAvatar #avatarText {
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
        padding: 0 10px !important;
      }
      
      /* Ethereal Consciousness text mobile optimization for small screens */
      #statusMessage {
        font-size: 14px !important;
        max-width: 300px !important;
      }
      
      #statusMessage div:first-child {
        font-size: 14px !important;
        font-weight: 500 !important;
      }
      
      #statusMessage div:last-child {
        font-size: 10px !important;
        font-weight: 400 !important;
        margin-top: 8px !important;
      }
      
      /* All tick circles/checkboxes mobile optimization for small screens - flexible sizing */
      .small-check {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex: 0 0 22px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      .small-check svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        aspect-ratio: 1 !important;
      }
      
      .tick-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      .tick-btn svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        aspect-ratio: 1 !important;
      }
      
      .zen-checkbox {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      /* Affirm consent spacing for small screens */
      .affirm-consent {
        gap: 12px !important;
      }
      
      /* Remember me checkbox spacing for small screens */
      label[style*="display:flex"][style*="gap:10px"] {
        gap: 14px !important;
      }
      .upload-text[style*="font-size: 12px"] { font-size: 8px !important; }
      #uploadAfterSelfieBtn[style*="font-size: 11px"] { font-size: 8px !important; }
      .before-after-label[style*="font-size: 9px"] { font-size: 7px !important; }
      .transformation-label[style*="font-size: 10px"] { font-size: 7px !important; }
      .progress-label[style*="font-size: 9px"] { font-size: 7px !important; }
      #finalProgressPct[style*="font-size: 9px"] { font-size: 7px !important; }
      
      /* Vipassana Transformation section specific font size adjustments for smartphone */
      #authModal .modal-card {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
      
      /* AuthViewSignedIn padding for smartphone */
      #authModal .modal-card #authViewSignedIn {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
      
      #authModal div[style*="font-size:14px"][style*="Vipassana Transformation"] {
        font-size: 10px !important;
      }
      
      #authModal h4[style*="font-size:14px"][style*="Share your transformation"] {
        font-size: 9px !important;
      }
      
      #authModal p[style*="font-size:10px"][style*="Celebrate your journey"] {
        font-size: 7px !important;
      }
      
      #authModal p[style*="font-size:10px"][style*="Your share card will generate"] {
        font-size: 10px !important;
      }
      
      /* Additional auth modal transformation text targeting */
      #authModal div[style*="text-align:center"][style*="font-weight:700"][style*="font-size:14px"][style*="color:#1cae82"] {
        font-size: 10px !important;
      }
      
      #authModal h4[style*="margin:0 0 6px"][style*="color:#1cae82"][style*="font-size:14px"] {
        font-size: 9px !important;
      }
      
      /* Additional authModal mobile space optimization */
      #authModal .modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
      }
      
      /* AuthModal screen padding optimization for smartphone */
      #authModal {
        padding-left: 4px !important;
        padding-right: 4px !important;
      }
    }
    
    /* Elegant auth tweaks */
    .input-hero { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
    .input-hero:focus { outline: none; border-color: #bfe1d5; background:#fff; box-shadow: 0 0 0 3px rgba(55,227,159,.15); }
    .auth-tabs { display:flex; gap:4px; background:#f7fbf9; border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:6px; }
    .auth-tabs .button.small { flex:1; border:0; background:transparent; color:var(--muted); font-weight:600; transition: all .2s ease; }
    .auth-tabs .button.small.active { background:#e9f5f0; color:#1cae82; border-radius:8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
    
    /* Enhanced mobile touch targets and harmony */
    @media (max-width: 768px) {
      .auth-tabs .button.small { 
        transition: all .2s ease; 
        border-radius: 10px;
        font-weight: 700;
        letter-spacing: 0.3px;
      }
      .auth-tabs .button.small:active { 
        transform: scale(0.98); 
        background: rgba(28,174,130,0.1);
      }
      .input-hero:focus { 
        box-shadow: 0 0 0 4px rgba(55,227,159,.2); 
        border-color: #9dddc4;
      }
    }
    
    @media (max-width: 480px) {
      .auth-tabs .button.small { 
        border-radius: 8px;
        letter-spacing: 0.2px;
      }
      .input-hero:focus { 
        box-shadow: 0 0 0 3px rgba(55,227,159,.18); 
      }
    }
    .avatar { width:32px; height:32px; border-radius:50%; background:#e9f5f0; color:#1cae82; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; border:1px solid var(--line); }
    /* Settings blocks */
    .settings-block { border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px; box-shadow:var(--shadow-soft); margin:10px 0; }
    .settings-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
    .settings-title { font-size:12px; font-weight:800; color:var(--strong); font-family:'Sora',sans-serif; letter-spacing:.2px; }
    .settings-sub { font-size:11px; color:var(--muted); }
    
    /* Zen-inspired animations */
    @keyframes breathe {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.8; }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-4px); }
    }
    
    @keyframes glow {
      0%, 100% { box-shadow: var(--shadow-button); }
      50% { box-shadow: var(--shadow-neon); }
    }
    
    @keyframes zenFade {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    
    
    @keyframes gentleGlow {
      0%, 100% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.02); }
    }
    
    .final-help, .zen-help-text {
      animation: gentleGlow 4s ease-in-out infinite;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .final-help:hover, .zen-help-text:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(28,174,130,0.08);
      border-color: rgba(28,174,130,0.12);
    }
    
    /* Enhanced hover effects */
    .icon-btn:hover {
      box-shadow: var(--shadow-neon), 0 0 0 3px rgba(55,227,159,.15);
      transform: translateY(-1px);
    }
    
    /* Zen-inspired focus states */
    .input-hero:focus {
      outline: none;
    
    /* Zen Full-Screen Celebration Animation */
    .fullscreen-celebration {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.98) 50%, rgba(241, 243, 244, 0.95) 100%);
      backdrop-filter: blur(20px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: celebrationFadeIn 0.8s ease-out;
    }
    .celebration-content {
      text-align: center;
      position: relative;
      z-index: 2;
    }
    .celebration-title {
      font-size: 4rem;
      font-weight: 700;
      color: #1f2937;
      font-family: 'Sora', sans-serif;
      letter-spacing: -2px;
      margin: 0 0 1rem 0;
      animation: titleBounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s both;
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .celebration-subtitle {
      font-size: 1.5rem;
      font-weight: 400;
      color: #6b7280;
      font-family: 'Sora', sans-serif;
      letter-spacing: 0.5px;
      margin: 0 0 2rem 0;
      animation: subtitleFloat 1s ease-out 1s both;
      text-align: center;
    }
    .celebration-icon {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #1cae82 0%, #37e39f 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 2rem;
      position: relative;
      animation: iconPulse 2s ease-in-out infinite 1.5s;
      box-shadow: 0 20px 40px rgba(28, 174, 130, 0.3);
    }
    .celebration-icon svg {
      width: 48px;
      height: 48px;
      fill: white;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }
    /* Animation Keyframes */
    @keyframes celebrationFadeIn {
      0% { opacity: 0; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes titleBounce {
      0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
      50% { transform: scale(1.1) rotate(5deg); }
      70% { transform: scale(0.95) rotate(-2deg); }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes subtitleFloat {
      0% { transform: translateY(30px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes iconPulse {
      0%, 100% { 
        transform: scale(1);
        box-shadow: 0 20px 40px rgba(28, 174, 130, 0.3);
      }
      50% { 
        transform: scale(1.05);
        box-shadow: 0 25px 50px rgba(28, 174, 130, 0.4);
      }
    }
    /* Harmonious Zen Congratulations Modal Styles */
    .zen-congrats-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
      border: 2px solid rgba(28, 174, 130, 0.1);
      border-radius: 32px;
      padding: 56px 48px;
      text-align: center;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(28, 174, 130, 0.08);
      max-width: 520px;
      margin: 20px auto;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(25px);
    }
    .zen-congrats-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(28, 174, 130, 0.03) 0%, transparent 70%);
      animation: zenRotate 30s linear infinite;
      pointer-events: none;
    }
    @keyframes zenRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    /* Attention-grabbing importance indicator */
    @keyframes subtleMirror {
      0%, 70%, 100% { 
        transform: scale(1);
        filter: brightness(1);
        text-shadow: 0 0 0 rgba(28,174,130,0);
        box-shadow: 0 0 0 rgba(28,174,130,0);
      }
      15%, 55% { 
        transform: scale(1.02);
        filter: brightness(1.1);
        text-shadow: 0 0 15px rgba(28,174,130,0.6);
        box-shadow: 0 0 25px rgba(28,174,130,0.3);
      }
      35% { 
        transform: scale(1.03);
        filter: brightness(1.15);
        text-shadow: 0 0 20px rgba(28,174,130,0.8);
        box-shadow: 0 0 30px rgba(28,174,130,0.4);
      }
    }
    
    /* Apply attention-grabbing importance indicator */
    .affirm-title[style*="animation: subtleMirror"] {
      animation: subtleMirror 6s ease-in-out infinite !important;
      transform-origin: center !important;
      background: linear-gradient(135deg, rgba(28,174,130,0.05) 0%, rgba(55,227,159,0.02) 100%) !important;
      border: 1px solid rgba(28,174,130,0.1) !important;
      border-radius: 12px !important;
      padding: 16px !important;
      margin: 12px 0 !important;
      transition: all 0.3s ease !important;
    }
    /* Smooth green zen effect when checkbox is checked */
    .affirm-block {
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      background: transparent;
      border-radius: 12px;
      padding: 8px;
      margin: 8px 0;
    }
    .affirm-block::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(28,174,130,0.1), transparent);
      transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    .affirm-block.zen-activated {
      background: linear-gradient(135deg, rgba(28,174,130,0.15) 0%, rgba(55,227,159,0.08) 100%) !important;
      border: 2px solid rgba(28,174,130,0.4) !important;
      box-shadow: 0 0 30px rgba(28,174,130,0.25) !important;
      transform: scale(1.02) !important;
    }
    
    /* Debug: Make sure the effect is visible */
    .affirm-block.zen-activated {
      background-color: rgba(28,174,130,0.3) !important;
      border: 3px solid #1cae82 !important;
    }
    .affirm-block.zen-activated::before {
      left: 100%;
    }
    .affirm-block.zen-activated .affirm-title {
      color: #1cae82 !important;
      text-shadow: 0 0 15px rgba(28,174,130,0.5) !important;
      filter: brightness(1.1) !important;
    }
    @keyframes zenFloat {
      0% { transform: translateY(30px) scale(0.9); opacity: 0; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes zenPulse {
      0%, 100% { 
        box-shadow: 0 0 0 0 rgba(28, 174, 130, 0.2);
        transform: scale(1);
      }
      50% { 
        box-shadow: 0 0 0 20px rgba(28, 174, 130, 0);
        transform: scale(1.02);
      }
    }
    @keyframes zenGlow {
      0%, 100% { 
        box-shadow: 0 0 20px rgba(28, 174, 130, 0.15);
      }
      50% { 
        box-shadow: 0 0 30px rgba(28, 174, 130, 0.25);
      }
    }
    .zen-icon {
      animation: zenPulse 3s ease-in-out infinite;
    }
    .zen-text {
      animation: zenFloat 1s ease-out;
      animation-fill-mode: both;
    }
    .zen-text:nth-child(1) { animation-delay: 0.2s; }
    .zen-text:nth-child(2) { animation-delay: 0.4s; }
    .zen-text:nth-child(3) { animation-delay: 0.6s; }
    .zen-text:nth-child(4) { animation-delay: 0.8s; }
    .zen-button {
      animation: zenGlow 2s ease-in-out infinite;
    }
    /* Firecracker Animation Styles */
    .firecracker-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 10000;
      overflow: hidden;
    }
    .firecracker-particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      pointer-events: none;
      animation: firecracker-burst 1.5s ease-out forwards;
    }
    .firecracker-particle:nth-child(odd) {
      background: linear-gradient(45deg, #ffd700, #ffed4e);
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    }
    .firecracker-particle:nth-child(even) {
      background: linear-gradient(45deg, #ff8c42, #ffb366);
      box-shadow: 0 0 8px rgba(255, 140, 66, 0.6);
    }
    .firecracker-particle:nth-child(3n) {
      background: linear-gradient(45deg, #ff6b9d, #ffa8c5);
      box-shadow: 0 0 8px rgba(255, 107, 157, 0.6);
    }
    .firecracker-particle:nth-child(4n) {
      background: linear-gradient(45deg, #ffffff, #f8f9fa);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
    .firecracker-particle:nth-child(5n) {
      background: linear-gradient(45deg, #ffa726, #ffcc80);
      box-shadow: 0 0 8px rgba(255, 167, 38, 0.6);
    }
    @keyframes firecracker-burst {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
      }
      15% {
        opacity: 1;
        transform: translate(var(--random-x), var(--random-y)) scale(1.2) rotate(180deg);
      }
      50% {
        opacity: 0.8;
        transform: translate(var(--random-x), var(--random-y)) scale(0.8) rotate(360deg);
      }
      100% {
        opacity: 0;
        transform: translate(var(--random-x), var(--random-y)) scale(0.3) rotate(720deg);
      }
    }
    .firecracker-ribbon {
      position: absolute;
      width: 20px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b9d, #ffd700, #ff8c42);
      border-radius: 2px;
      pointer-events: none;
      animation: ribbon-fall 1.8s ease-out forwards;
    }
    @keyframes ribbon-fall {
      0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
      }
      100% {
        opacity: 0;
        transform: translate(var(--ribbon-x), var(--ribbon-y)) rotate(720deg);
      }
    }
    
    .zen-celebration-header {
      margin-bottom: 32px;
    }
    
    .zen-icon-wrapper {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 8px 24px rgba(28, 174, 130, 0.3);
      animation: zenFloat 3s ease-in-out infinite;
    }
    
    .zen-icon {
      width: 40px;
      height: 40px;
      color: white;
    }
    
    .zen-title {
      font-size: 28px;
      font-weight: 700;
      color: var(--strong);
      margin: 0 0 8px;
      letter-spacing: 0.5px;
    }
    
    .zen-subtitle {
      font-size: 16px;
      color: var(--text);
      margin: 0;
      opacity: 0.8;
      line-height: 1.5;
      text-align: center;
    }
    
    .zen-selfie-prompt {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border: 1px solid var(--zen-border);
      border-radius: 20px;
      padding: 24px;
      margin: 24px 0;
      text-align: center;
    }
    
    .zen-prompt-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    
    .zen-prompt-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.2);
    }
    
    .zen-prompt-icon svg {
      width: 24px;
      height: 24px;
      color: white;
    }
    
    .zen-prompt-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--strong);
      margin: 0;
    }
    
    .zen-prompt-subtitle {
      font-size: 14px;
      color: var(--text);
      margin: 0;
      opacity: 0.7;
      text-align: center;
    }
    
    .zen-primary-btn {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      border: none;
      border-radius: 16px;
      padding: 14px 24px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-primary-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(28, 174, 130, 0.4);
    }
    
    .zen-primary-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .zen-completion-card {
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 24px;
      padding: 32px;
      margin: 20px 0;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-align: center;
    }
    
    .zen-completion-header {
      margin-bottom: 24px;
    }
    
    .zen-completion-icon {
      font-size: 48px;
      margin-bottom: 16px;
      animation: breathe 2.6s ease-in-out infinite;
    }
    
    .zen-completion-title {
      font-size: 28px;
      font-weight: 600;
      color: #1cae82;
      margin: 0 0 8px 0;
      font-family: 'Sora', sans-serif;
    }
    
    .zen-completion-subtitle {
      font-size: 16px;
      color: #64748b;
      margin: 0;
      line-height: 1.5;
      font-family: 'Raleway', sans-serif;
      text-align: center;
    }
    
    .zen-transformation-prompt {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 16px;
      padding: 24px;
      border: 1px solid rgba(28, 174, 130, 0.1);
      box-shadow: 0 4px 20px rgba(28, 174, 130, 0.08);
    }
    
    .zen-comparison-card {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border: 1px solid var(--zen-border);
      border-radius: 20px;
      padding: 24px;
      margin: 24px 0;
      text-align: center;
    }
    
    .zen-comparison-header {
      margin-bottom: 24px;
    }
    
    .zen-comparison-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--green-primary);
      margin: 0 0 8px;
    }
    
    .zen-comparison-subtitle {
      font-size: 14px;
      color: var(--text);
      margin: 0;
      opacity: 0.7;
      text-align: center;
    }
    
    .zen-comparison-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }
    
    .zen-comparison-item {
      text-align: center;
    }
    
    .zen-photo-container {
      position: relative;
      display: inline-block;
      margin-bottom: 8px;
    }
    
    .zen-photo {
      width: 120px;
      height: 120px;
      border-radius: 20px;
      object-fit: cover;
      border: 3px solid var(--green-lighter);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    /* Placeholder tile for missing photo */
    .zen-photo-placeholder {
      width: 120px; height: 120px;
      border-radius: 20px;
      border: 2px dashed var(--zen-border);
      background: linear-gradient(180deg,#ffffff,#f7fbf9);
      color: var(--muted);
      font-weight: 700; font-size: 11px;
      display: none; align-items: center; justify-content: center;
      box-shadow: var(--shadow-soft);
    }
    
    .zen-photo:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }
    
    .zen-photo-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--green-primary);
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .zen-photo-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .zen-arrow-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .zen-arrow {
      width: 24px;
      height: 24px;
      color: var(--green-primary);
      transform: rotate(90deg);
    }
    
    .zen-share-preview {
      margin: 24px 0;
    }
    
    .zen-preview-header {
      text-align: center;
      margin-bottom: 16px;
    }
    
    .zen-preview-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--strong);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0 0 4px;
    }
    
    .zen-preview-subtitle {
      font-size: 12px;
      color: var(--text);
      margin: 0;
      opacity: 0.7;
      text-align: center;
    }
    
    .zen-preview-container {
      margin-bottom: 20px;
    }
    
    .zen-preview-image {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1/1;
      border-radius: 20px;
      border: 1px solid var(--zen-border);
      box-shadow: var(--shadow-soft);
      display: block;
      margin: 0 auto;
      background: #fff;
      object-fit: cover;
    }
    
    .zen-social-bar {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .zen-social-btn {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border: 1px solid var(--zen-border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }
    
    .zen-social-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
    }
    
    .zen-social-btn img {
      width: 24px;
      height: 24px;
      filter: brightness(0) saturate(100%) invert(40%) sepia(20%) saturate(1000%) hue-rotate(120deg) brightness(0.8) contrast(1);
      transition: filter 0.3s ease;
    }
    
    .zen-social-btn:hover img {
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1) contrast(1);
    }
    
    .zen-format-selection {
      margin: 20px 0;
      text-align: center;
    }
    
    .zen-format-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 12px;
    }
    
    .zen-format-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .zen-format-btn {
      padding: 8px 16px;
      font-size: 12px;
      border-radius: 12px;
      border: 2px solid var(--zen-border);
      background: white;
      color: var(--text);
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 600;
    }
    
    .zen-format-btn.active,
    .zen-format-btn:hover {
      border-color: var(--green-primary);
      background: var(--green-primary);
      color: white;
      transform: translateY(-1px);
    }
    
    .zen-action-buttons {
      display: flex;
      gap: 16px;
      margin-top: 24px;
    }
    
    .zen-share-btn,
    .zen-download-btn {
      flex: 1;
      padding: 16px 24px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .zen-share-btn {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-share-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(28, 174, 130, 0.4);
    }
    
    .zen-download-btn {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      color: var(--text);
      border: 1px solid var(--zen-border);
    }
    
    .zen-download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #e9ecef, #dee2e6);
    }
    
    .zen-share-btn svg,
    .zen-download-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .zen-close-btn {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      border: none;
      border-radius: 16px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 16px;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-close-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(28, 174, 130, 0.4);
    }
    
    .zen-before-check {
      background: linear-gradient(135deg, #fff3cd, #ffeaa7);
      border: 1px solid #ffc107;
      border-radius: 16px;
      padding: 20px;
      margin: 16px 0;
      text-align: center;
    }
    
    .zen-warning-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #ffc107, #ffb300);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }
    
    .zen-warning-icon svg {
      width: 24px;
      height: 24px;
      color: white;
    }
    
    .zen-warning-text {
      font-size: 14px;
      color: #856404;
      margin: 0 0 16px;
      font-weight: 600;
      line-height: 1.5;
    }
    
    .zen-secondary-btn {
      background: linear-gradient(135deg, #ffc107, #ffb300);
      color: white;
      border: none;
      border-radius: 16px;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }
    
    .zen-secondary-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
    }
    
    .zen-secondary-btn svg {
      width: 16px;
      height: 16px;
    }
    
    @keyframes zenFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    
    @keyframes popBounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43% { transform: translate3d(0, -8px, 0); }
  70% { transform: translate3d(0, -4px, 0); }
  90% { transform: translate3d(0, -2px, 0); }
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 2px 8px rgba(28,174,130,0.2); }
  50% { text-shadow: 0 2px 20px rgba(28,174,130,0.6), 0 0 30px rgba(55,227,159,0.4); }
}
@keyframes titleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}
@keyframes letterElegant {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 1; }
  50% { transform: translateY(-2px) scale(1.02); opacity: 0.9; }
}
@keyframes messageFade {
  0%, 100% { opacity: 1; transform: translateY(0px); }
  50% { opacity: 0.8; transform: translateY(-2px); }
}
@keyframes firecrackerEntrance {
  0% { 
    transform: scale(0.3) rotate(-10deg); 
    opacity: 0; 
    filter: blur(10px);
  }
  50% { 
    transform: scale(1.1) rotate(2deg); 
    opacity: 0.8; 
    filter: blur(2px);
  }
  100% { 
    transform: scale(1) rotate(0deg); 
    opacity: 1; 
    filter: blur(0px);
  }
}
@keyframes firecrackerParticle {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.5) translateY(-80px) translateX(var(--random-x, 30px)); 
    opacity: 0.9; 
  }
  100% { 
    transform: scale(0) translateY(-160px) translateX(var(--random-x, 60px)); 
    opacity: 0; 
  }
}
@keyframes sparkle {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: 0.4; 
  }
  50% { 
    transform: scale(1.3) rotate(180deg); 
    opacity: 1; 
  }
}
@keyframes floatCelebration {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.7; 
  }
  25% { 
    transform: translateY(-8px) rotate(90deg); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-4px) rotate(180deg); 
    opacity: 0.8; 
  }
  75% { 
    transform: translateY(-12px) rotate(270deg); 
    opacity: 1; 
  }
}
/* New Elegant Animations */
@keyframes elegantParticle {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.2) translateY(-40px) translateX(20px); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(0) translateY(-80px) translateX(40px); 
    opacity: 0; 
  }
}
@keyframes sparkleFloat {
  0%, 100% { 
    transform: translateY(0px) translateX(0px); 
    opacity: 0.3; 
  }
  50% { 
    transform: translateY(-20px) translateX(10px); 
    opacity: 0.8; 
  }
}
@keyframes gentleFloat {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-8px); 
  }
}
@keyframes backgroundFloat {
  0%, 100% { 
    transform: translateX(0px) translateY(0px); 
  }
  50% { 
    transform: translateX(10px) translateY(-5px); 
  }
}
@keyframes modalEntrance {
  0% { 
    transform: scale(0.9) translateY(20px); 
    opacity: 0; 
  }
  100% { 
    transform: scale(1) translateY(0px); 
    opacity: 1; 
  }
}
@keyframes titleFade {
  0% { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px); 
  }
}
@keyframes messageFade {
  0% { 
    opacity: 0; 
    transform: translateY(5px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px); 
  }
}
/* ELEGANT MINIMALISTIC CELEBRATION ANIMATIONS */
/* Subtle Pulse Effect */
@keyframes elegantPulse {
  0% { 
    transform: scale(1);
    opacity: 0.3; 
  }
  50% { 
    transform: scale(1.05);
    opacity: 0.6; 
  }
  100% { 
    transform: scale(1);
    opacity: 0.3; 
  }
}
/* Gentle Floating Animation */
@keyframes gentleFloat {
  0% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.4; 
  }
  50% { 
    transform: translateY(-8px) rotate(180deg);
    opacity: 0.7; 
  }
  100% { 
    transform: translateY(0px) rotate(360deg);
    opacity: 0.4; 
  }
}
/* Subtle Glow Effect */
@keyframes subtleGlow {
  0% { 
    box-shadow: 0 0 8px rgba(28,174,130,0.2);
    opacity: 0.5; 
  }
  50% { 
    box-shadow: 0 0 16px rgba(28,174,130,0.4);
    opacity: 0.8; 
  }
  100% { 
    box-shadow: 0 0 8px rgba(28,174,130,0.2);
    opacity: 0.5; 
  }
}
/* Elegant Fade In/Out */
@keyframes elegantFade {
  0% { 
    opacity: 0; 
    transform: scale(0.8); 
  }
  20% { 
    opacity: 0.6;
    transform: scale(1); 
  }
  80% { 
    opacity: 0.6;
    transform: scale(1); 
  }
  100% { 
    opacity: 0;
    transform: scale(0.8); 
  }
}
@keyframes fireworkBurst2 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  25% { 
    transform: scale(1.3) translateY(-25px) translateX(-20px); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(2.5) translateY(-50px) translateX(-40px); 
    opacity: 1; 
  }
  75% { 
    transform: scale(2.0) translateY(-75px) translateX(-60px); 
    opacity: 0.6; 
  }
  100% { 
    transform: scale(0) translateY(-100px) translateX(-80px); 
    opacity: 0; 
  }
}
@keyframes fireworkBurst3 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  30% { 
    transform: scale(1.8) translateY(-35px) translateX(25px); 
    opacity: 0.9; 
  }
  55% { 
    transform: scale(3.2) translateY(-70px) translateX(50px); 
    opacity: 1; 
  }
  80% { 
    transform: scale(2.5) translateY(-105px) translateX(75px); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-140px) translateX(100px); 
    opacity: 0; 
  }
}
@keyframes fireworkBurst4 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  35% { 
    transform: scale(1.4) translateY(-40px) translateX(-15px); 
    opacity: 0.8; 
  }
  60% { 
    transform: scale(2.7) translateY(-80px) translateX(-30px); 
    opacity: 1; 
  }
  85% { 
    transform: scale(2.1) translateY(-120px) translateX(-45px); 
    opacity: 0.6; 
  }
  100% { 
    transform: scale(0) translateY(-160px) translateX(-60px); 
    opacity: 0; 
  }
}
@keyframes fireworkBurst5 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  40% { 
    transform: scale(1.6) translateY(-45px) translateX(20px); 
    opacity: 0.9; 
  }
  65% { 
    transform: scale(3.0) translateY(-90px) translateX(40px); 
    opacity: 1; 
  }
  90% { 
    transform: scale(2.3) translateY(-135px) translateX(60px); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-180px) translateX(80px); 
    opacity: 0; 
  }
}
@keyframes massiveFireworkBurst2 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  20% { 
    transform: scale(1.0) translateY(-25px) translateX(10px); 
    opacity: 0.8; 
  }
  45% { 
    transform: scale(2.2) translateY(-50px) translateX(-15px); 
    opacity: 1; 
  }
  65% { 
    transform: scale(1.8) translateY(-75px) translateX(20px); 
    opacity: 0.7; 
  }
  85% { 
    transform: scale(1.2) translateY(-100px) translateX(-10px); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-140px) translateX(15px); 
    opacity: 0; 
  }
}
@keyframes massiveFireworkBurst3 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  25% { 
    transform: scale(1.3) translateY(-30px) translateX(-20px); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(2.8) translateY(-60px) translateX(25px); 
    opacity: 1; 
  }
  70% { 
    transform: scale(2.2) translateY(-90px) translateX(-30px); 
    opacity: 0.8; 
  }
  90% { 
    transform: scale(1.6) translateY(-120px) translateX(20px); 
    opacity: 0.6; 
  }
  100% { 
    transform: scale(0) translateY(-160px) translateX(-25px); 
    opacity: 0; 
  }
}
@keyframes massiveFireworkBurst4 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  18% { 
    transform: scale(1.1) translateY(-22px) translateX(15px); 
    opacity: 0.8; 
  }
  40% { 
    transform: scale(2.3) translateY(-45px) translateX(-18px); 
    opacity: 1; 
  }
  62% { 
    transform: scale(1.9) translateY(-68px) translateX(22px); 
    opacity: 0.7; 
  }
  80% { 
    transform: scale(1.4) translateY(-95px) translateX(-15px); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-130px) translateX(18px); 
    opacity: 0; 
  }
}
@keyframes massiveFireworkBurst5 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  22% { 
    transform: scale(1.4) translateY(-28px) translateX(-12px); 
    opacity: 0.9; 
  }
  48% { 
    transform: scale(2.6) translateY(-55px) translateX(18px); 
    opacity: 1; 
  }
  72% { 
    transform: scale(2.1) translateY(-85px) translateX(-25px); 
    opacity: 0.8; 
  }
  88% { 
    transform: scale(1.5) translateY(-110px) translateX(20px); 
    opacity: 0.6; 
  }
  100% { 
    transform: scale(0) translateY(-150px) translateX(-18px); 
    opacity: 0; 
  }
}
@keyframes enhancedFireworkBurst2 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  25% { 
    transform: scale(0.7) translateY(-8px) translateX(5px); 
    opacity: 0.7; 
  }
  50% { 
    transform: scale(1.3) translateY(-12px) translateX(-3px); 
    opacity: 1; 
  }
  75% { 
    transform: scale(1.1) translateY(-18px) translateX(8px); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(0) translateY(-25px) translateX(-5px); 
    opacity: 0; 
  }
}
@keyframes enhancedFireworkBurst3 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px); 
    opacity: 0; 
  }
  30% { 
    transform: scale(0.9) translateY(-15px) translateX(-8px); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(1.8) translateY(-20px) translateX(5px); 
    opacity: 1; 
  }
  70% { 
    transform: scale(1.4) translateY(-25px) translateX(-10px); 
    opacity: 0.7; 
  }
  100% { 
    transform: scale(0) translateY(-30px) translateX(8px); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion1 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  15% { 
    transform: scale(1.0) translateY(-30px) translateX(20px) rotate(60deg); 
    opacity: 0.9; 
  }
  35% { 
    transform: scale(1.5) translateY(-60px) translateX(40px) rotate(120deg); 
    opacity: 0.8; 
  }
  55% { 
    transform: scale(1.2) translateY(-90px) translateX(60px) rotate(180deg); 
    opacity: 0.7; 
  }
  75% { 
    transform: scale(0.8) translateY(-120px) translateX(80px) rotate(240deg); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-180px) translateX(100px) rotate(300deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion2 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  20% { 
    transform: scale(0.9) translateY(-25px) translateX(-18px) rotate(-45deg); 
    opacity: 0.9; 
  }
  45% { 
    transform: scale(1.4) translateY(-50px) translateX(-35px) rotate(-90deg); 
    opacity: 0.8; 
  }
  65% { 
    transform: scale(1.1) translateY(-75px) translateX(-55px) rotate(-135deg); 
    opacity: 0.6; 
  }
  85% { 
    transform: scale(0.7) translateY(-100px) translateX(-75px) rotate(-180deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-150px) translateX(-90px) rotate(-225deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion3 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  25% { 
    transform: scale(1.2) translateY(-35px) translateX(25px) rotate(75deg); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(1.8) translateY(-70px) translateX(50px) rotate(150deg); 
    opacity: 0.8; 
  }
  70% { 
    transform: scale(1.4) translateY(-105px) translateX(75px) rotate(225deg); 
    opacity: 0.6; 
  }
  90% { 
    transform: scale(0.9) translateY(-140px) translateX(90px) rotate(300deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-200px) translateX(110px) rotate(360deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion4 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  18% { 
    transform: scale(0.8) translateY(-20px) translateX(-15px) rotate(-30deg); 
    opacity: 0.9; 
  }
  40% { 
    transform: scale(1.3) translateY(-45px) translateX(-30px) rotate(-60deg); 
    opacity: 0.8; 
  }
  62% { 
    transform: scale(1.0) translateY(-70px) translateX(-45px) rotate(-90deg); 
    opacity: 0.7; 
  }
  80% { 
    transform: scale(0.6) translateY(-95px) translateX(-60px) rotate(-120deg); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-130px) translateX(-75px) rotate(-150deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion5 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  22% { 
    transform: scale(1.1) translateY(-28px) translateX(18px) rotate(45deg); 
    opacity: 0.9; 
  }
  48% { 
    transform: scale(1.6) translateY(-55px) translateX(35px) rotate(90deg); 
    opacity: 0.8; 
  }
  72% { 
    transform: scale(1.2) translateY(-82px) translateX(52px) rotate(135deg); 
    opacity: 0.6; 
  }
  88% { 
    transform: scale(0.8) translateY(-110px) translateX(70px) rotate(180deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-160px) translateX(85px) rotate(225deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion6 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  30% { 
    transform: scale(1.3) translateY(-40px) translateX(-25px) rotate(-60deg); 
    opacity: 0.9; 
  }
  55% { 
    transform: scale(1.9) translateY(-75px) translateX(-50px) rotate(-120deg); 
    opacity: 0.8; 
  }
  75% { 
    transform: scale(1.5) translateY(-110px) translateX(-75px) rotate(-180deg); 
    opacity: 0.6; 
  }
  90% { 
    transform: scale(1.0) translateY(-145px) translateX(-90px) rotate(-240deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-180px) translateX(-105px) rotate(-300deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion7 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  28% { 
    transform: scale(1.0) translateY(-32px) translateX(22px) rotate(50deg); 
    opacity: 0.9; 
  }
  52% { 
    transform: scale(1.5) translateY(-65px) translateX(45px) rotate(100deg); 
    opacity: 0.8; 
  }
  76% { 
    transform: scale(1.2) translateY(-98px) translateX(68px) rotate(150deg); 
    opacity: 0.6; 
  }
  92% { 
    transform: scale(0.8) translateY(-130px) translateX(85px) rotate(200deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-170px) translateX(100px) rotate(250deg); 
    opacity: 0; 
  }
}
@keyframes fullScreenExplosion8 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  35% { 
    transform: scale(1.2) translateY(-38px) translateX(-28px) rotate(-55deg); 
    opacity: 0.9; 
  }
  58% { 
    transform: scale(1.7) translateY(-72px) translateX(-55px) rotate(-110deg); 
    opacity: 0.8; 
  }
  78% { 
    transform: scale(1.3) translateY(-105px) translateX(-82px) rotate(-165deg); 
    opacity: 0.6; 
  }
  95% { 
    transform: scale(0.9) translateY(-140px) translateX(-100px) rotate(-220deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-175px) translateX(-115px) rotate(-275deg); 
    opacity: 0; 
  }
}
@keyframes enhancedExplosionParticle2 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  25% { 
    transform: scale(0.9) translateY(-25px) translateX(-20px) rotate(-60deg); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(1.1) translateY(-45px) translateX(-35px) rotate(-120deg); 
    opacity: 0.8; 
  }
  75% { 
    transform: scale(0.8) translateY(-70px) translateX(-50px) rotate(-180deg); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-100px) translateX(-60px) rotate(-240deg); 
    opacity: 0; 
  }
}
@keyframes enhancedExplosionParticle3 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  30% { 
    transform: scale(1.0) translateY(-30px) translateX(10px) rotate(30deg); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(1.4) translateY(-55px) translateX(15px) rotate(60deg); 
    opacity: 0.7; 
  }
  70% { 
    transform: scale(1.2) translateY(-80px) translateX(25px) rotate(90deg); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(0) translateY(-140px) translateX(40px) rotate(120deg); 
    opacity: 0; 
  }
}
@keyframes enhancedExplosionParticle4 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  35% { 
    transform: scale(1.1) translateY(-35px) translateX(-18px) rotate(-45deg); 
    opacity: 0.8; 
  }
  65% { 
    transform: scale(1.3) translateY(-65px) translateX(-35px) rotate(-90deg); 
    opacity: 0.6; 
  }
  85% { 
    transform: scale(0.9) translateY(-95px) translateX(-45px) rotate(-135deg); 
    opacity: 0.3; 
  }
  100% { 
    transform: scale(0) translateY(-110px) translateX(-50px) rotate(-180deg); 
    opacity: 0; 
  }
}
@keyframes enhancedExplosionParticle5 {
  0% { 
    transform: scale(0) translateY(0px) translateX(0px) rotate(0deg); 
    opacity: 1; 
  }
  40% { 
    transform: scale(0.9) translateY(-30px) translateX(25px) rotate(60deg); 
    opacity: 0.9; 
  }
  70% { 
    transform: scale(1.1) translateY(-55px) translateX(45px) rotate(120deg); 
    opacity: 0.7; 
  }
  90% { 
    transform: scale(0.8) translateY(-75px) translateX(60px) rotate(180deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0) translateY(-90px) translateX(70px) rotate(240deg); 
    opacity: 0; 
  }
}
@keyframes colorfulSparkle1 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.4; 
  }
  20% { 
    transform: translateY(-15px) translateX(8px) scale(1.4) rotate(60deg); 
    opacity: 0.9; 
  }
  40% { 
    transform: translateY(-25px) translateX(15px) scale(1.6) rotate(120deg); 
    opacity: 1; 
  }
  60% { 
    transform: translateY(-35px) translateX(-5px) scale(1.2) rotate(180deg); 
    opacity: 0.8; 
  }
  80% { 
    transform: translateY(-45px) translateX(-12px) scale(0.8) rotate(240deg); 
    opacity: 0.6; 
  }
}
@keyframes colorfulSparkle2 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.3; 
  }
  25% { 
    transform: translateY(-18px) translateX(-10px) scale(1.5) rotate(-45deg); 
    opacity: 0.8; 
  }
  50% { 
    transform: translateY(-30px) translateX(-20px) scale(1.7) rotate(-90deg); 
    opacity: 1; 
  }
  75% { 
    transform: translateY(-40px) translateX(8px) scale(1.3) rotate(-135deg); 
    opacity: 0.7; 
  }
}
@keyframes colorfulSparkle3 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.4; 
  }
  30% { 
    transform: translateY(-20px) translateX(12px) scale(1.3) rotate(75deg); 
    opacity: 0.9; 
  }
  60% { 
    transform: translateY(-35px) translateX(25px) scale(1.5) rotate(150deg); 
    opacity: 1; 
  }
  90% { 
    transform: translateY(-50px) translateX(-8px) scale(1.1) rotate(225deg); 
    opacity: 0.6; 
  }
}
@keyframes colorfulSparkle4 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.3; 
  }
  35% { 
    transform: translateY(-22px) translateX(-15px) scale(1.6) rotate(-60deg); 
    opacity: 0.8; 
  }
  70% { 
    transform: translateY(-38px) translateX(-25px) scale(1.8) rotate(-120deg); 
    opacity: 1; 
  }
}
@keyframes colorfulSparkle5 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.4; 
  }
  40% { 
    transform: translateY(-25px) translateX(18px) scale(1.4) rotate(90deg); 
    opacity: 0.9; 
  }
  80% { 
    transform: translateY(-45px) translateX(35px) scale(1.6) rotate(180deg); 
    opacity: 1; 
  }
}
@keyframes colorfulSparkle6 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.3; 
  }
  45% { 
    transform: translateY(-28px) translateX(-20px) scale(1.5) rotate(-75deg); 
    opacity: 0.8; 
  }
  90% { 
    transform: translateY(-48px) translateX(-35px) scale(1.7) rotate(-150deg); 
    opacity: 1; 
  }
}
@keyframes microSparkle2 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.3; 
  }
  20% { 
    transform: translateY(-12px) translateX(-6px) scale(1.3) rotate(-30deg); 
    opacity: 0.7; 
  }
  40% { 
    transform: translateY(-20px) translateX(-10px) scale(1.5) rotate(-60deg); 
    opacity: 1; 
  }
  60% { 
    transform: translateY(-25px) translateX(5px) scale(0.8) rotate(-90deg); 
    opacity: 0.6; 
  }
  80% { 
    transform: translateY(-30px) translateX(8px) scale(0.6) rotate(-120deg); 
    opacity: 0.4; 
  }
  90% { 
    transform: translateY(-18px) translateX(-12px) scale(1.2) rotate(-150deg); 
    opacity: 0.8; 
  }
}
@keyframes microSparkle3 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.4; 
  }
  25% { 
    transform: translateY(-15px) translateX(8px) scale(1.2) rotate(40deg); 
    opacity: 0.8; 
  }
  45% { 
    transform: translateY(-22px) translateX(12px) scale(1.4) rotate(80deg); 
    opacity: 1; 
  }
  65% { 
    transform: translateY(-28px) translateX(-6px) scale(0.9) rotate(120deg); 
    opacity: 0.6; 
  }
  85% { 
    transform: translateY(-15px) translateX(12px) scale(1.3) rotate(160deg); 
    opacity: 0.9; 
  }
}
@keyframes microSparkle4 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.3; 
  }
  30% { 
    transform: translateY(-18px) translateX(-8px) scale(1.4) rotate(-45deg); 
    opacity: 0.8; 
  }
  55% { 
    transform: translateY(-25px) translateX(-12px) scale(1.6) rotate(-90deg); 
    opacity: 1; 
  }
  75% { 
    transform: translateY(-30px) translateX(7px) scale(0.7) rotate(-135deg); 
    opacity: 0.5; 
  }
  90% { 
    transform: translateY(-20px) translateX(-15px) scale(1.1) rotate(-180deg); 
    opacity: 0.8; 
  }
}
@keyframes fullScreenFlying1 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.7; 
  }
  15% { 
    transform: translateY(-40px) translateX(30px) rotate(90deg) scale(1.4); 
    opacity: 1; 
  }
  35% { 
    transform: translateY(-80px) translateX(60px) rotate(180deg) scale(1.2); 
    opacity: 0.9; 
  }
  55% { 
    transform: translateY(-120px) translateX(90px) rotate(270deg) scale(0.9); 
    opacity: 0.7; 
  }
  75% { 
    transform: translateY(-160px) translateX(120px) rotate(360deg) scale(1.3); 
    opacity: 0.5; 
  }
  100% { 
    transform: translateY(-200px) translateX(150px) rotate(450deg) scale(0.7); 
    opacity: 0.3; 
  }
}
@keyframes fullScreenFlying2 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.6; 
  }
  20% { 
    transform: translateY(-35px) translateX(-25px) rotate(-90deg) scale(1.5); 
    opacity: 1; 
  }
  45% { 
    transform: translateY(-70px) translateX(-50px) rotate(-180deg) scale(1.3); 
    opacity: 0.8; 
  }
  70% { 
    transform: translateY(-105px) translateX(-75px) rotate(-270deg) scale(0.8); 
    opacity: 0.6; 
  }
  90% { 
    transform: translateY(-140px) translateX(-100px) rotate(-360deg) scale(1.2); 
    opacity: 0.4; 
  }
  100% { 
    transform: translateY(-180px) translateX(-125px) rotate(-450deg) scale(0.6); 
    opacity: 0.2; 
  }
}
@keyframes fullScreenFlying3 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.8; 
  }
  25% { 
    transform: translateY(-45px) translateX(35px) rotate(120deg) scale(1.6); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-90px) translateX(70px) rotate(240deg) scale(1.4); 
    opacity: 0.8; 
  }
  75% { 
    transform: translateY(-135px) translateX(105px) rotate(360deg) scale(1.0); 
    opacity: 0.6; 
  }
  100% { 
    transform: translateY(-180px) translateX(140px) rotate(480deg) scale(0.8); 
    opacity: 0.4; 
  }
}
@keyframes fullScreenFlying4 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.7; 
  }
  30% { 
    transform: translateY(-30px) translateX(-30px) rotate(-120deg) scale(1.3); 
    opacity: 1; 
  }
  60% { 
    transform: translateY(-60px) translateX(-60px) rotate(-240deg) scale(1.1); 
    opacity: 0.8; 
  }
  90% { 
    transform: translateY(-90px) translateX(-90px) rotate(-360deg) scale(0.9); 
    opacity: 0.6; 
  }
  100% { 
    transform: translateY(-120px) translateX(-120px) rotate(-480deg) scale(0.7); 
    opacity: 0.4; 
  }
}
@keyframes fullScreenFlying5 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.8; 
  }
  35% { 
    transform: translateY(-50px) translateX(40px) rotate(150deg) scale(1.4); 
    opacity: 1; 
  }
  65% { 
    transform: translateY(-100px) translateX(80px) rotate(300deg) scale(1.2); 
    opacity: 0.7; 
  }
  100% { 
    transform: translateY(-150px) translateX(120px) rotate(450deg) scale(0.9); 
    opacity: 0.5; 
  }
}
@keyframes fullScreenFlying6 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.7; 
  }
  40% { 
    transform: translateY(-40px) translateX(-35px) rotate(-150deg) scale(1.3); 
    opacity: 1; 
  }
  70% { 
    transform: translateY(-80px) translateX(-70px) rotate(-300deg) scale(1.1); 
    opacity: 0.8; 
  }
  100% { 
    transform: translateY(-120px) translateX(-105px) rotate(-450deg) scale(0.8); 
    opacity: 0.5; 
  }
}
@keyframes flyingEmoji2 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.6; 
  }
  25% { 
    transform: translateY(-25px) translateX(-15px) rotate(-90deg) scale(1.4); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-45px) translateX(-30px) rotate(-180deg) scale(1.2); 
    opacity: 0.8; 
  }
  75% { 
    transform: translateY(-65px) translateX(-45px) rotate(-270deg) scale(0.9); 
    opacity: 0.6; 
  }
  100% { 
    transform: translateY(-100px) translateX(-60px) rotate(-360deg) scale(0.7); 
    opacity: 0.4; 
  }
}
@keyframes flyingEmoji3 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.8; 
  }
  30% { 
    transform: translateY(-35px) translateX(25px) rotate(120deg) scale(1.5); 
    opacity: 1; 
  }
  60% { 
    transform: translateY(-60px) translateX(50px) rotate(240deg) scale(1.1); 
    opacity: 0.7; 
  }
  90% { 
    transform: translateY(-85px) translateX(75px) rotate(360deg) scale(0.8); 
    opacity: 0.5; 
  }
  100% { 
    transform: translateY(-110px) translateX(90px) rotate(480deg) scale(0.6); 
    opacity: 0.3; 
  }
}
@keyframes flyingEmoji4 {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
    opacity: 0.7; 
  }
  35% { 
    transform: translateY(-20px) translateX(-20px) rotate(-120deg) scale(1.2); 
    opacity: 1; 
  }
  70% { 
    transform: translateY(-40px) translateX(-40px) rotate(-240deg) scale(0.9); 
    opacity: 0.8; 
  }
  100% { 
    transform: translateY(-80px) translateX(-60px) rotate(-360deg) scale(0.7); 
    opacity: 0.5; 
  }
}
/* Interactive Click Spark Animations */
@keyframes clickSparkBurst {
  0% { 
    transform: scale(0) translateX(-50%) translateY(-50%); 
    opacity: 1; 
  }
  50% { 
    transform: scale(2) translateX(-50%) translateY(-50%); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(0) translateX(-50%) translateY(-50%); 
    opacity: 0; 
  }
}
/* Elegant Title Animations */
@keyframes boomEntrance {
  0% { 
    opacity: 0; 
    transform: translateX(-50%) scale(0.8) rotate(-2deg); 
    filter: blur(4px);
  }
  30% { 
    opacity: 1; 
    transform: translateX(-50%) scale(1.05) rotate(1deg); 
    filter: blur(1px);
  }
  70% { 
    opacity: 1; 
    transform: translateX(-50%) scale(1) rotate(0deg); 
    filter: blur(0px);
  }
  100% { 
    opacity: 0; 
    transform: translateX(-50%) scale(0.9) rotate(-1deg); 
    filter: blur(1px);
  }
}
@keyframes elegantTitleEntrance {
  0% { 
    opacity: 0; 
    transform: scale(0.8) rotate(-2deg) translateY(10px); 
    filter: blur(3px);
  }
  60% { 
    opacity: 0.8; 
    transform: scale(1.02) rotate(1deg) translateY(-2px); 
    filter: blur(1px);
  }
  100% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg) translateY(0px); 
    filter: blur(0px);
  }
}
@keyframes journeyBloomEntrance {
  0% { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
    filter: blur(2px);
  }
  60% { 
    opacity: 0.9; 
    transform: translateY(-2px) scale(1.01); 
    filter: blur(0.5px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px) scale(1); 
    filter: blur(0px);
  }
}
@keyframes cardGentleSlide {
  0% { 
    opacity: 0; 
    transform: translateY(30px) scale(0.98); 
    filter: blur(1px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px) scale(1); 
    filter: blur(0px);
  }
}
@keyframes practitionerWelcome {
  0% { 
    opacity: 0; 
    transform: scale(0.9); 
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.02); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}
/* Elegant Icon Animations */
@keyframes elegantFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-8px) scale(1.02); 
  }
}
@keyframes gentleSpin {
  0% { 
    transform: rotate(0deg) scale(1); 
  }
  50% { 
    transform: rotate(180deg) scale(1.05); 
  }
  100% { 
    transform: rotate(360deg) scale(1); 
  }
}
@keyframes gentleRotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}
@keyframes elegantPulse {
  0% { 
    transform: scale(0.9); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(0.9); 
    opacity: 0.8; 
  }
}
/* ELEGANT OPENING ANIMATIONS */
@keyframes elegantCardEntrance {
  0% { 
    opacity: 0; 
    transform: scale(0.7) rotate(-3deg) translateY(20px); 
    filter: blur(6px);
  }
  40% { 
    opacity: 0.6; 
    transform: scale(0.9) rotate(-1deg) translateY(8px); 
    filter: blur(2px);
  }
  70% { 
    opacity: 0.9; 
    transform: scale(1.02) rotate(1deg) translateY(-2px); 
    filter: blur(1px);
  }
  100% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg) translateY(0px); 
    filter: blur(0px);
  }
}
@keyframes openingLightRays {
  0% { 
    opacity: 0; 
    transform: rotate(0deg) scale(0.5); 
  }
  30% { 
    opacity: 0.8; 
    transform: rotate(180deg) scale(1.2); 
  }
  70% { 
    opacity: 0.6; 
    transform: rotate(360deg) scale(1); 
  }
  100% { 
    opacity: 0.3; 
    transform: rotate(540deg) scale(0.8); 
  }
}
@keyframes openingEnergyBurst {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 1; 
  }
  50% { 
    width: 300px; 
    height: 300px; 
    opacity: 0.8; 
  }
  100% { 
    width: 400px; 
    height: 400px; 
    opacity: 0; 
  }
}
@keyframes openingSparkleStorm {
  0% { 
    opacity: 0; 
  }
  20% { 
    opacity: 1; 
  }
  100% { 
    opacity: 0.8; 
  }
}
@keyframes openingSparkle1 {
  0% { 
    opacity: 0; 
    transform: scale(0) translateY(0px) translateX(0px); 
  }
  30% { 
    opacity: 1; 
    transform: scale(1.5) translateY(-40px) translateX(20px); 
  }
  70% { 
    opacity: 0.8; 
    transform: scale(1.2) translateY(-60px) translateX(30px); 
  }
  100% { 
    opacity: 0.6; 
    transform: scale(1) translateY(-80px) translateX(40px); 
  }
}
@keyframes openingSparkle2 {
  0% { 
    opacity: 0; 
    transform: scale(0) translateY(0px) translateX(0px); 
  }
  40% { 
    opacity: 1; 
    transform: scale(1.3) translateY(-35px) translateX(-25px); 
  }
  80% { 
    opacity: 0.9; 
    transform: scale(1.1) translateY(-55px) translateX(-40px); 
  }
  100% { 
    opacity: 0.7; 
    transform: scale(1) translateY(-75px) translateX(-55px); 
  }
}
/* Missing Elegant Animations */
@keyframes elegantGlow {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 0; 
  }
  50% { 
    width: 200px; 
    height: 200px; 
    opacity: 0.6; 
  }
  100% { 
    width: 300px; 
    height: 300px; 
    opacity: 0; 
  }
}
@keyframes subtlePulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.6; 
  }
  50% { 
    transform: scale(1.2); 
    opacity: 0.3; 
  }
}
@keyframes openingSparkle3 {
  0% { 
    opacity: 0; 
    transform: scale(0) translateY(0px) translateX(0px); 
  }
  25% { 
    opacity: 1; 
    transform: scale(1.6) translateY(-45px) translateX(15px); 
  }
  75% { 
    opacity: 0.8; 
    transform: scale(1.3) translateY(-65px) translateX(25px); 
  }
  100% { 
    opacity: 0.6; 
    transform: scale(1) translateY(-85px) translateX(35px); 
  }
}
@keyframes openingSparkle4 {
  0% { 
    opacity: 0; 
    transform: scale(0) translateY(0px) translateX(0px); 
  }
  35% { 
    opacity: 1; 
    transform: scale(1.4) translateY(-30px) translateX(-20px); 
  }
  85% { 
    opacity: 0.9; 
    transform: scale(1.2) translateY(-50px) translateX(-35px); 
  }
  100% { 
    opacity: 0.7; 
    transform: scale(1) translateY(-70px) translateX(-50px); 
  }
}
@keyframes openingSparkle5 {
  0% { 
    opacity: 0; 
    transform: scale(0) translateY(0px) translateX(0px); 
  }
  45% { 
    opacity: 1; 
    transform: scale(1.5) translateY(-50px) translateX(30px); 
  }
  90% { 
    opacity: 0.8; 
    transform: scale(1.3) translateY(-70px) translateX(45px); 
  }
  100% { 
    opacity: 0.6; 
    transform: scale(1) translateY(-90px) translateX(60px); 
  }
}
@keyframes openingRing1 {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 1; 
  }
  50% { 
    width: 200px; 
    height: 200px; 
    opacity: 0.8; 
  }
  100% { 
    width: 300px; 
    height: 300px; 
    opacity: 0; 
  }
}
@keyframes openingRing2 {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 1; 
  }
  60% { 
    width: 250px; 
    height: 250px; 
    opacity: 0.7; 
  }
  100% { 
    width: 350px; 
    height: 350px; 
    opacity: 0; 
  }
}
@keyframes openingRing3 {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 1; 
  }
  70% { 
    width: 300px; 
    height: 300px; 
    opacity: 0.6; 
  }
  100% { 
    width: 400px; 
    height: 400px; 
    opacity: 0; 
  }
}
@keyframes openingFloat1 {
  0% { 
    opacity: 0; 
    transform: translateY(30px) scale(0.5) rotate(0deg); 
  }
  40% { 
    opacity: 1; 
    transform: translateY(-20px) scale(1.2) rotate(180deg); 
  }
  80% { 
    opacity: 0.8; 
    transform: translateY(-40px) scale(1) rotate(360deg); 
  }
  100% { 
    opacity: 0.6; 
    transform: translateY(-60px) scale(0.9) rotate(540deg); 
  }
}
/* Iridescent Shimmer Animation */
@keyframes iridescentShimmer {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
/* Ensure reflection overlay is visible */
.iridescent-reflection {
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), rgba(248,250,252,0.7), rgba(255,255,255,0.4), transparent) !important;
  transform: skewX(-15deg) !important;
  animation: iridescentShimmer 3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Button hover effects */
.iridescent-btn:hover .iridescent-reflection {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Force reflection to be visible on the specific button */
#btnProfileCompareTransformation .iridescent-reflection {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: iridescentShimmer 3s ease-in-out infinite !important;
}
/* Make sure the button has proper overflow */
#btnProfileCompareTransformation {
  overflow: hidden !important;
  position: relative !important;
}
@keyframes openingFloat2 {
  0% { 
    opacity: 0; 
    transform: translateY(25px) scale(0.6) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: translateY(-25px) scale(1.3) rotate(-180deg); 
  }
  85% { 
    opacity: 0.9; 
    transform: translateY(-45px) scale(1.1) rotate(-360deg); 
  }
  100% { 
    opacity: 0.7; 
    transform: translateY(-65px) scale(0.8) rotate(-540deg); 
  }
}
@keyframes openingFloat3 {
  0% { 
    opacity: 0; 
    transform: translateY(35px) scale(0.4) rotate(0deg); 
  }
  30% { 
    opacity: 1; 
    transform: translateY(-15px) scale(1.4) rotate(120deg); 
  }
  75% { 
    opacity: 0.8; 
    transform: translateY(-35px) scale(1.2) rotate(240deg); 
  }
  100% { 
    opacity: 0.6; 
    transform: translateY(-55px) scale(1) rotate(360deg); 
  }
}
@keyframes openingFloat4 {
  0% { 
    opacity: 0; 
    transform: translateY(20px) scale(0.7) rotate(0deg); 
  }
  45% { 
    opacity: 1; 
    transform: translateY(-30px) scale(1.1) rotate(-120deg); 
  }
  90% { 
    opacity: 0.9; 
    transform: translateY(-50px) scale(0.9) rotate(-240deg); 
  }
  100% { 
    opacity: 0.7; 
    transform: translateY(-70px) scale(0.8) rotate(-360deg); 
  }
}
/* DIAMOND SHINING STARS ANIMATIONS */
@keyframes diamondShine1 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  25% { 
    opacity: 1; 
    transform: scale(1.2) rotate(90deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1) rotate(180deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  75% { 
    opacity: 1; 
    transform: scale(1.3) rotate(270deg); 
    box-shadow: 0 0 35px rgba(0,255,136,1), 0 0 70px rgba(0,255,136,0.7), 0 0 105px rgba(0,255,136,0.5);
  }
}
@keyframes diamondShine2 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  30% { 
    opacity: 1; 
    transform: scale(1.3) rotate(120deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  60% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(240deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  90% { 
    opacity: 1; 
    transform: scale(1.4) rotate(360deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
}
@keyframes diamondShine3 {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  20% { 
    opacity: 1; 
    transform: scale(1.4) rotate(60deg); 
    box-shadow: 0 0 40px rgba(0,255,136,1), 0 0 80px rgba(0,255,136,0.7), 0 0 120px rgba(0,255,136,0.5);
  }
  40% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(120deg); 
    box-shadow: 0 0 30px rgba(0,255,136,0.9), 0 0 60px rgba(0,255,136,0.5), 0 0 90px rgba(0,255,136,0.3);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.5) rotate(180deg); 
    box-shadow: 0 0 45px rgba(0,255,136,1), 0 0 90px rgba(0,255,136,0.8), 0 0 135px rgba(0,255,136,0.6);
  }
  80% { 
    opacity: 0.9; 
    transform: scale(1.3) rotate(240deg); 
    box-shadow: 0 0 35px rgba(0,255,136,0.9), 0 0 70px rgba(0,255,136,0.5), 0 0 105px rgba(0,255,136,0.3);
  }
}
@keyframes diamondShine4 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  25% { 
    opacity: 1; 
    transform: scale(1.2) rotate(90deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(180deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  75% { 
    opacity: 1; 
    transform: scale(1.3) rotate(270deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
}
@keyframes diamondShine5 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  30% { 
    opacity: 1; 
    transform: scale(1.3) rotate(120deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  60% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(240deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  90% { 
    opacity: 1; 
    transform: scale(1.4) rotate(360deg); 
    box-shadow: 0 0 35px rgba(0,255,136,1), 0 0 70px rgba(0,255,136,0.7), 0 0 105px rgba(0,255,136,0.5);
  }
}
@keyframes diamondShine6 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  20% { 
    opacity: 1; 
    transform: scale(1.2) rotate(60deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  40% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(120deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.3) rotate(180deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  80% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(240deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
}
@keyframes diamondShine7 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  25% { 
    opacity: 1; 
    transform: scale(1.3) rotate(90deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(180deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  75% { 
    opacity: 1; 
    transform: scale(1.4) rotate(270deg); 
    box-shadow: 0 0 35px rgba(0,255,136,1), 0 0 70px rgba(0,255,136,0.7), 0 0 105px rgba(0,255,136,0.5);
  }
}
@keyframes diamondShine8 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  30% { 
    opacity: 1; 
    transform: scale(1.2) rotate(120deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  60% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(240deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  90% { 
    opacity: 1; 
    transform: scale(1.3) rotate(360deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
}
@keyframes diamondShine9 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  20% { 
    opacity: 1; 
    transform: scale(1.3) rotate(60deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  40% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(120deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.4) rotate(180deg); 
    box-shadow: 0 0 35px rgba(0,255,136,1), 0 0 70px rgba(0,255,136,0.7), 0 0 105px rgba(0,255,136,0.5);
  }
  80% { 
    opacity: 0.9; 
    transform: scale(1.3) rotate(240deg); 
    box-shadow: 0 0 30px rgba(0,255,136,0.9), 0 0 60px rgba(0,255,136,0.5), 0 0 90px rgba(0,255,136,0.3);
  }
}
@keyframes diamondShine10 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  25% { 
    opacity: 1; 
    transform: scale(1.2) rotate(90deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(180deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  75% { 
    opacity: 1; 
    transform: scale(1.3) rotate(270deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
}
@keyframes diamondShine11 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  30% { 
    opacity: 1; 
    transform: scale(1.3) rotate(120deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  60% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(240deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  90% { 
    opacity: 1; 
    transform: scale(1.4) rotate(360deg); 
    box-shadow: 0 0 35px rgba(0,255,136,1), 0 0 70px rgba(0,255,136,0.7), 0 0 105px rgba(0,255,136,0.5);
  }
}
@keyframes diamondShine12 {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 15px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3), 0 0 45px rgba(0,255,136,0.1);
  }
  20% { 
    opacity: 1; 
    transform: scale(1.2) rotate(60deg); 
    box-shadow: 0 0 25px rgba(0,255,136,1), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
  40% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(120deg); 
    box-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 60px rgba(0,255,136,0.2);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.3) rotate(180deg); 
    box-shadow: 0 0 30px rgba(0,255,136,1), 0 0 60px rgba(0,255,136,0.6), 0 0 90px rgba(0,255,136,0.4);
  }
  80% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(240deg); 
    box-shadow: 0 0 25px rgba(0,255,136,0.9), 0 0 50px rgba(0,255,136,0.5), 0 0 75px rgba(0,255,136,0.3);
  }
}
/* MISSING ELEGANT ANIMATIONS */
@keyframes gentleFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
    opacity: 0.6; 
  }
  50% { 
    transform: translateY(-20px) scale(1.1); 
    opacity: 1; 
  }
}
@keyframes ribbon-float {
  0%, 100% { 
    transform: translateY(0px) rotate(var(--ribbon-rotation, 0deg)) scale(1); 
    opacity: 0.8; 
  }
  50% { 
    transform: translateY(-5px) rotate(var(--ribbon-rotation, 0deg)) scale(1.05); 
    opacity: 1; 
  }
}
@keyframes star-eyes-sparkle {
  0%, 100% { 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) brightness(1) saturate(1);
    transform: scale(1);
  }
  25% { 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) brightness(1.3) saturate(1.5) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    transform: scale(1.05);
  }
  50% { 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) brightness(1.5) saturate(1.8) drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    transform: scale(1.1);
  }
  75% { 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) brightness(1.3) saturate(1.5) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    transform: scale(1.05);
  }
}
@keyframes emoji-bounce {
  0%, 100% { 
    transform: translateY(0px) scale(1);
  }
  50% { 
    transform: translateY(-8px) scale(1.02);
  }
}
@keyframes elegant-glow {
  0%, 100% { 
    box-shadow: 0 20px 60px rgba(28, 174, 130, 0.15), 0 8px 32px rgba(55, 227, 159, 0.1), 0 0 0 1px rgba(255,255,255,0.8) inset;
  }
  50% { 
    box-shadow: 0 25px 70px rgba(28, 174, 130, 0.2), 0 12px 40px rgba(55, 227, 159, 0.15), 0 0 0 1px rgba(255,255,255,0.9) inset;
  }
}
@keyframes party-rainbow {
  0%, 100% { 
    opacity: 0.8;
    transform: scaleX(1);
  }
  50% { 
    opacity: 1;
    transform: scaleX(1.05);
  }
}
@keyframes party-float {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-12px) scale(1.2);
    opacity: 1;
  }
}
@keyframes text-shimmer {
  0%, 100% { 
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% { 
    background-position: 100% 50%;
    filter: brightness(1.1);
  }
}
@keyframes elegantFade {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.1) rotate(180deg); 
  }
}
@keyframes elegantFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-10px) scale(1.05); 
  }
}
@keyframes gentleSpin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}
@keyframes gentleRotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}
@keyframes elegantPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.4; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.8; 
  }
}
@keyframes boomEntrance {
  0% { 
    opacity: 0; 
    transform: scale(0.5) translateY(20px); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) translateY(-5px); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0px); 
  }
}
@keyframes journeyBloomEntrance {
  0% { 
    opacity: 0; 
    transform: scale(0.8) translateY(30px); 
  }
  60% { 
    opacity: 0.8; 
    transform: scale(1.1) translateY(-10px); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0px); 
  }
}
@keyframes cardGentleSlide {
  0% { 
    opacity: 0; 
    transform: translateY(40px) scale(0.9); 
  }
  70% { 
    opacity: 0.8; 
    transform: translateY(-5px) scale(1.02); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px) scale(1); 
  }
}
@keyframes practitionerWelcome {
  0% { 
    opacity: 0; 
    transform: scale(0.8) translateY(20px); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0px); 
  }
}
@keyframes messageFade {
  0% { 
    opacity: 0; 
    transform: scale(0.9); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}
@keyframes popBounce {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.1); 
  }
}
@keyframes backgroundFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-10px) scale(1.02); 
  }
}
@keyframes fadeInCosmic {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: 1; 
  }
}
@keyframes cosmicPulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.5; 
    transform: scale(1.05); 
  }
}
@keyframes nebulaFloat1 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 0.1; 
  }
  50% { 
    transform: translateY(-20px) translateX(10px) scale(1.1); 
    opacity: 0.2; 
  }
}
@keyframes nebulaFloat2 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 0.08; 
  }
  50% { 
    transform: translateY(-15px) translateX(-15px) scale(1.05); 
    opacity: 0.15; 
  }
}
@keyframes nebulaFloat3 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 0.06; 
  }
  50% { 
    transform: translateY(-25px) translateX(20px) scale(1.1); 
    opacity: 0.12; 
  }
}
/* Flying Animation Keyframes */
@keyframes flyFar {
  0% {
    transform: translateX(-100px) scale(0.7);
    opacity: 0.2;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(calc(100vw + 100px)) scale(1.1);
    opacity: 0.2;
  }
}
@keyframes flyMedium {
  0% {
    transform: translateX(-100px) scale(0.8);
    opacity: 0.3;
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(calc(100vw + 100px)) scale(1.2);
    opacity: 0.3;
  }
}
@keyframes flyClose {
  0% {
    transform: translateX(-100px) scale(0.9);
    opacity: 0.4;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(calc(100vw + 100px)) scale(1.3);
    opacity: 0.4;
  }
}
@keyframes glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}
/* Advanced Animation Keyframes */
@keyframes skyShift {
  0% {
    background: linear-gradient(180deg, #a3d8ff 0%, #e0f7ff 25%, #f0f7ff 50%, #ffe8e8 75%, #ffd700 100%);
  }
  50% {
    background: linear-gradient(180deg, #b8e0ff 0%, #f0f8ff 25%, #f8f8ff 50%, #fff0f0 75%, #ffe135 100%);
  }
  100% {
    background: linear-gradient(180deg, #a3d8ff 0%, #e0f7ff 25%, #f0f7ff 50%, #ffe8e8 75%, #ffd700 100%);
  }
}
@keyframes floatParticle {
  0%, 100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-15px) translateX(10px) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-25px) translateX(-5px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-10px) translateX(15px) scale(1.1);
    opacity: 0.7;
  }
}
@keyframes cloudBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  25% {
    transform: translateY(-6px) scale(1.02);
  }
  50% {
    transform: translateY(-12px) scale(1.05);
  }
  75% {
    transform: translateY(-8px) scale(1.03);
  }
}
@keyframes cloudPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  25% {
    transform: scale(1.03);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
  75% {
    transform: scale(1.04);
    opacity: 0.8;
  }
}
@keyframes cloudDrift {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
  }
  33% {
    transform: translateX(15px) translateY(-5px);
  }
  66% {
    transform: translateX(-10px) translateY(8px);
  }
}
@keyframes cloudMorph {
  0%, 100% {
    border-radius: 140px;
    filter: blur(0.5px);
  }
  25% {
    border-radius: 160px;
    filter: blur(0.3px);
  }
  50% {
    border-radius: 120px;
    filter: blur(0.7px);
  }
  75% {
    border-radius: 150px;
    filter: blur(0.4px);
  }
}
@keyframes sunRays {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.4;
  }
}
@keyframes orbFloat {
  0%, 100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-20px) translateX(15px) scale(1.3);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-35px) translateX(-10px) scale(0.8);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-15px) translateX(25px) scale(1.2);
    opacity: 0.8;
  }
}
@keyframes windBlow {
  0% {
    transform: translateX(-100px) scaleX(0);
    opacity: 0;
  }
  20% {
    transform: translateX(-50px) scaleX(1);
    opacity: 0.3;
  }
  80% {
    transform: translateX(50px) scaleX(1);
    opacity: 0.3;
  }
  100% {
    transform: translateX(100px) scaleX(0);
    opacity: 0;
  }
}
@keyframes sunGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}
@keyframes lensFlare {
  0%, 100% {
    opacity: 0;
    transform: scaleY(0.5);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(1);
  }
}
    
    /* Responsive design for zen modal */
    @media (max-width: 768px) {
      .zen-congrats-card {
        padding: 24px;
        margin: 10px;
        border-radius: 20px;
      }
      
      .zen-icon-wrapper {
        width: 60px;
        height: 60px;
      }
      
      .zen-icon {
        width: 30px;
        height: 30px;
      }
      
      .zen-title {
        font-size: 24px;
      }
      
      .zen-subtitle {
        font-size: 14px;
      }
      
      .zen-photo {
        width: 100px;
        height: 100px;
      }
      
      .zen-action-buttons {
        flex-direction: column;
      }
      
      .zen-social-bar {
        gap: 8px;
      }
      
      .zen-social-btn {
        width: 40px;
        height: 40px;
      }
      
      .zen-social-btn img {
        width: 20px;
        height: 20px;
      }
      
      /* Final congrats modal mobile optimization */
      #finalCongratsModal .modal-card {
        padding: 20px 16px !important;
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 10px !important;
        border-radius: 16px !important;
      }
      
      /* Close button mobile optimization */
      #finalCloseBtn {
        width: 28px !important;
        height: 28px !important;
        top: 16px !important;
        right: 16px !important;
        font-size: 14px !important;
      }
      
      /* Celebration emoji mobile optimization */
      #finalCongratsModal .zen-icon span {
        font-size: 48px !important;
      }
      
      /* Main title mobile optimization */
      #finalCongratsModal h1.zen-text {
        font-size: 20px !important;
        margin-bottom: 8px !important;
        letter-spacing: 1px !important;
      }
      
      /* Subtitle mobile optimization */
      #finalCongratsModal h2.zen-text {
        font-size: 11px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
      }
      
      /* Transformation recognition card mobile optimization */
      #finalCongratsModal .zen-text[style*="background: rgba(255, 255, 255, 0.92)"] {
        padding: 16px !important;
        max-width: 280px !important;
        margin-bottom: 16px !important;
        border-radius: 10px !important;
      }
      
      /* Transformation header mobile optimization */
      #finalCongratsModal div[style*="width: 32px"][style*="height: 32px"][style*="background: #1cae82"] {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 10px !important;
        border-radius: 6px !important;
      }
      
      /* Transformation text mobile optimization */
      #finalCongratsModal div[style*="font-size: 13px"][style*="font-weight: 600"] {
        font-size: 11px !important;
        margin-bottom: 2px !important;
      }
      
      #finalCongratsModal div[style*="font-size: 10px"][style*="color: #888"] {
        font-size: 8px !important;
      }
      
      #finalCongratsModal p[style*="font-size: 12px"][style*="color: #1cae82"] {
        font-size: 10px !important;
        line-height: 1.3 !important;
      }
      
      /* Take after selfie button mobile optimization */
      #btnTakeAfterSelfieComparison {
        padding: 10px 20px !important;
        font-size: 10px !important;
        border-radius: 12px !important;
        margin: 24px 0 !important;
      }
      
      /* Ribbon decorations mobile optimization */
      #finalCongratsModal div[style*="position: absolute"][style*="background: linear-gradient"] {
        display: none !important;
      }
      
      /* Floating elements mobile optimization */
      #finalCongratsModal div[style*="position: absolute"][style*="background: rgba(28,174,130,0.06)"] {
        display: none !important;
      }
      
      /* Photo placeholder text mobile optimization */
      #preceptsPhotoPlaceholder h4[style*="font-size:16px"] {
        font-size: 13px !important;
      }
      
      #preceptsPhotoPlaceholder p[style*="font-size:13px"] {
        font-size: 11px !important;
      }
      
      #preceptsPhotoPlaceholder p[style*="font-size:11px"] {
        font-size: 9px !important;
      }
      
      /* Camera emoji mobile optimization */
      #preceptsPhotoPlaceholder .camera-flash-container div[style*="font-size:48px"] {
        font-size: 36px !important;
      }
      
      /* Settings title and subtitle mobile optimization */
      .settings-title {
        font-size: 13px !important;
      }
      
      .settings-sub {
        font-size: 10px !important;
      }
      
      /* Success message mobile optimization */
      #progressMessage {
        font-size: 10px !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
      }
      
      /* Photo capture success message mobile optimization */
      .photo-preview-header h4[style*="font-size:16px"] {
        font-size: 13px !important;
      }
      
      .photo-preview-header p[style*="font-size:14px"] {
        font-size: 11px !important;
      }
      
      /* Photo modal mobile optimization */
      #photoModal .modal-card {
        padding: 16px !important;
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 10px !important;
        border-radius: 16px !important;
      }
      
      #photoModalTitle {
        font-size: 16px !important;
        margin-bottom: 12px !important;
      }
      
      #photoVideo {
        max-width: 240px !important;
        border-radius: 10px !important;
      }
      
      #photoCanvas {
        max-width: 240px !important;
        height: auto !important;
        border-radius: 10px !important;
      }
      
      #photoCountdown {
        font-size: 48px !important;
        border-radius: 10px !important;
      }
      
      .modal-actions {
        gap: 8px !important;
        margin-top: 16px !important;
      }
      
      .modal-actions .button {
        padding: 10px 16px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
      }
      
      /* Auth modal Share and Download buttons mobile optimization */
      #btnTransformationShare, #btnTransformationDownload, #btnProfileShare, #btnProfileDownload {
        padding: 8px 20px !important;
        font-size: 10px !important;
        min-width: 120px !important;
        border-radius: 8px !important;
        height: 36px !important;
      }
      
      #btnTransformationShare svg, #btnTransformationDownload svg, #btnProfileShare svg, #btnProfileDownload svg {
        width: 12px !important;
        height: 12px !important;
      }
      
      /* Profile button mobile optimization */
      #btnAccount {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
      }
      
      #btnAccount svg {
        width: 20px !important;
        height: 20px !important;
      }
      
      /* Profile avatar username button mobile optimization */
      #profileAvatar {
        height: 36px !important;
        border-radius: 18px !important;
        font-size: 14px !important;
      }
      
      #profileAvatar #avatarText {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
        padding: 0 12px !important;
      }
      
      /* Ethereal Consciousness text mobile optimization */
      #statusMessage {
        font-size: 13px !important;
        max-width: 280px !important;
      }
      
      #statusMessage div:first-child {
        font-size: 13px !important;
        font-weight: 400 !important;
      }
      
      #statusMessage div:last-child {
        font-size: 9px !important;
        font-weight: 300 !important;
        margin-top: 6px !important;
      }
      
      /* All tick circles/checkboxes mobile optimization - flexible sizing */
      .small-check {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      .small-check svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        aspect-ratio: 1 !important;
      }
      
      .tick-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      .tick-btn svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        aspect-ratio: 1 !important;
      }
      
      .zen-checkbox {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
      }
      
      /* Affirm consent spacing */
      .affirm-consent {
        gap: 10px !important;
      }
      
      /* Remember me checkbox spacing */
      label[style*="display:flex"][style*="gap:10px"] {
        gap: 12px !important;
      }
    }
    
    /* Zen Account Modal Styles */
    .zen-account-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border: 1px solid var(--zen-border);
      border-radius: 24px;
      padding: 32px;
      max-width: 480px;
      margin: 20px auto;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .zen-account-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--zen-border);
    }
    
    .zen-account-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--strong);
      margin: 0;
    }
    
    .zen-close-btn {
      width: 36px; height: 36px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--zen-border);
      background: linear-gradient(180deg, #ffffff, #f6fdf9);
      color: var(--strong);
      box-shadow: var(--shadow-button);
      transition: transform .2s, box-shadow .2s, background .2s;
      cursor: pointer;
    }
    
    .zen-close-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(135deg, #1cae82, #37e39f);
      color: #fff;
      box-shadow: 0 8px 20px rgba(28,174,130,.28);
      border-color: transparent;
    }
    
    .zen-close-btn svg { width: 18px; height: 18px; color: var(--text); transition: color .2s; }
    .zen-close-btn:hover svg { color: #fff; }
    .zen-close-btn--top { position:absolute; top:12px; right:12px; z-index:2; }
    
    .zen-signed-in-header {
      background: linear-gradient(135deg, #e8f5e8, #d4edda);
      border: 1px solid var(--green-lighter);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      z-index: 5;
    }
    
    .zen-status-indicator {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-status-indicator svg {
      width: 24px;
      height: 24px;
      color: white;
    }
    
    .zen-status-text {
      flex: 1;
    }
    
    .zen-status-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--strong);
      margin: 0 0 4px;
    }
    
    .zen-status-subtitle {
      font-size: 14px;
      color: var(--text);
      margin: 0;
      opacity: 0.8;
      text-align: center;
    }
    
    .zen-profile-section {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border: 1px solid var(--zen-border);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 24px;
    }
    
    .zen-profile-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }
    
    .zen-profile-avatar {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: white;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-profile-info {
      flex: 1;
    }
    
    .zen-profile-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--strong);
      margin: 0 0 4px;
    }
    
    .zen-profile-email {
      font-size: 14px;
      color: var(--text);
      margin: 0;
      opacity: 0.8;
    }
    
    .zen-settings-section {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border: 1px solid var(--zen-border);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 24px;
    }
    
    .zen-settings-header {
      margin-bottom: 20px;
    }
    
    .zen-settings-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--strong);
      margin: 0 0 4px;
    }
    
    .zen-settings-subtitle {
      font-size: 14px;
      color: var(--text);
      margin: 0;
      opacity: 0.8;
      text-align: center;
    }
    
    .zen-input-group {
      margin-bottom: 20px;
    }
    
    .zen-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--zen-border);
      border-radius: 12px;
      font-size: 14px;
      background: white;
      transition: all 0.3s ease;
    }
    
    .zen-input:focus {
      outline: none;
      border-color: var(--green-primary);
      box-shadow: 0 0 0 3px rgba(28, 174, 130, 0.1);
    }
    
    .zen-photo-controls {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;
    }
    
    .zen-photo-btn {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      border: none;
      border-radius: 16px;
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 180px;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-photo-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(28, 174, 130, 0.4);
    }
    
    .zen-photo-btn.secondary {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      color: var(--text);
      border: 1px solid var(--zen-border);
    }
    
    .zen-photo-btn.secondary:hover {
      background: linear-gradient(135deg, #e9ecef, #dee2e6);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }
    
    .zen-photo-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .zen-action-buttons {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    
    .zen-save-btn {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      border: none;
      border-radius: 12px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .zen-save-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(28, 174, 130, 0.3);
    }
    
    .zen-auth-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
    }
    
    .zen-auth-tab {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid var(--zen-border);
      border-radius: 12px;
      background: white;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .zen-auth-tab.active {
      background: linear-gradient(135deg, var(--green-primary), var(--green-lighter));
      color: white;
      border-color: var(--green-primary);
    }
    
    .zen-auth-form {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border: 1px solid var(--zen-border);
      border-radius: 20px;
      padding: 24px;
    }
    
    .zen-remember-me {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: 16px 0;
      font-size: 12px;
      color: var(--text);
    }
    
    .zen-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--green-primary);
    }
    
    /* Responsive design for zen account modal */
    @media (max-width: 768px) {
      .zen-account-card {
        padding: 24px;
        margin: 10px;
        border-radius: 20px;
      }
      
      .zen-account-title {
        font-size: 20px;
      }
      
      .zen-profile-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
      }
      
      .zen-profile-name {
        font-size: 16px;
      }
      
      .zen-photo-controls {
        flex-direction: column;
      }
      
      .zen-photo-btn {
        min-width: auto;
        width: 100%;
      }
      
      .zen-action-buttons {
        flex-direction: column;
      }
    } 
      border-color: var(--green-neon); 
      background: var(--zen-card); 
      box-shadow: var(--shadow-neon), 0 0 0 3px rgba(55,227,159,.15);
      transform: translateY(-1px);
    }
    
    /* Enhanced active states */
    .playlist li.active { 
      background: linear-gradient(135deg, var(--green-600) 0%, var(--green-dark) 100%); 
      color: #fff; 
      font-weight: 600;
      box-shadow: var(--shadow-neon);
      transform: translateY(-1px);
    }
    
    /* Zen-inspired loading states */
    .loading {
      animation: breathe 2s ease-in-out infinite;
    }
    
    /* Enhanced typography */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Sora', 'Raleway', sans-serif;
      letter-spacing: -0.02em;
    }
    
    /* Zen-inspired spacing */
    .zen-spacing {
      margin: 24px 0;
      padding: 20px;
      background: linear-gradient(135deg, rgba(55,227,159,.02) 0%, transparent 100%);
      border-radius: 20px;
      border: 1px solid var(--zen-border);
    }
    
    /* Elegant Camera Flash Animation Keyframes */
    @keyframes elegantCameraFlash {
      0%, 85%, 100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
      }
      2%, 4% { 
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.3);
        box-shadow: 0 0 40px rgba(255,255,255,0.6), 0 0 80px rgba(255,255,255,0.3);
      }
      6% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 30px rgba(255,255,255,0.4);
      }
      8% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 20px rgba(255,255,255,0.2);
      }
      10% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
      }
    }
    
    /* CRITICAL: Force VIPASSANA title to be same size on all devices */
    .simple-part-selector h1,
    .centered-header .simple-part-selector h1,
    .nav .centered-header .simple-part-selector h1 {
      font-size: 24px !important;
    }
    
    @media (max-width: 768px) {
      .simple-part-selector h1,
      .centered-header .simple-part-selector h1,
      .nav .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Make mobile icons same size as desktop */
      .header-actions .icon-btn {
        width: 40px !important;
        height: 40px !important;
      }
      .header-actions .icon-btn svg {
        width: 18px !important;
        height: 18px !important;
      }
    }
    
    @media (max-width: 640px) {
      .simple-part-selector h1,
      .centered-header .simple-part-selector h1,
      .nav .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Make mobile icons same size as desktop */
      .header-actions .icon-btn {
        width: 40px !important;
        height: 40px !important;
      }
      .header-actions .icon-btn svg {
        width: 18px !important;
        height: 18px !important;
      }
      
      /* Make zen-expander button smaller on mobile */
      .zen-expander .zen-content {
        padding: 4px 10px !important;
      }
      
      .zen-expander .zen-text[style*="font-size: 10px"],
      .zen-expander .zen-text[style*="font-size:10px"] {
        font-size: 9px !important;
      }
      
      .zen-expander .zen-chevron {
        width: 6px !important;
        height: 6px !important;
        border-right: 1.3px solid rgba(28,174,130,0.7) !important;
        border-bottom: 1.3px solid rgba(28,174,130,0.7) !important;
      }
      
      .zen-expander .zen-chevron-container {
        margin-top: 5px !important;
      }
    }
    
    @media (max-width: 480px) {
      .simple-part-selector h1,
      .centered-header .simple-part-selector h1,
      .nav .centered-header .simple-part-selector h1 {
        font-size: 24px !important;
      }
      
      /* Make mobile icons same size as desktop */
      .header-actions .icon-btn {
        width: 40px !important;
        height: 40px !important;
      }
      .header-actions .icon-btn svg {
        width: 18px !important;
        height: 18px !important;
      }
    }
    /* Apple/Google-level FAB improvements */
    .mobile-fab-button {
      /* ...existing code... */
      box-shadow:
        0 2px 8px rgba(28, 174, 130, 0.10),
        0 8px 32px rgba(28, 174, 130, 0.22),
        0 1.5px 4px rgba(0,0,0,0.08),
        0 0.5px 1px rgba(0,0,0,0.10),
        inset 0 2px 1px rgba(255,255,255,0.35);
      outline: none;
      border: 1.5px solid rgba(46,192,141,0.08);
    }

    .mobile-fab-button:focus {
      box-shadow:
        0 0 0 3px rgba(46,192,141,0.18),
        0 8px 32px rgba(28, 174, 130, 0.22);
      border-color: rgba(46,192,141,0.22);
    }

    .mobile-fab-button:active::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 120%;
      height: 120%;
      background: radial-gradient(circle, rgba(46,192,141,0.18) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0.7;
      pointer-events: none;
      animation: ripple 0.5s linear;
    }

    @keyframes ripple {
      0% { opacity: 0.7; transform: scale(0.8); }
      80% { opacity: 0.3; transform: scale(1.1); }
      100% { opacity: 0; transform: scale(1.2); }
    }

    /* Language icon - Apple/Google-level refinement */
    .mobile-menu-item.lang-item {
      /* ...existing code... */
      box-shadow:
        0 1.5px 6px rgba(28,174,130,0.10),
        0 4px 16px rgba(28,174,130,0.12);
      border: 1px solid rgba(46,192,141,0.06);
    }

    .mobile-menu-item.lang-item:focus {
      box-shadow:
        0 0 0 2px rgba(46,192,141,0.14),
        0 4px 16px rgba(28,174,130,0.12);
      border-color: rgba(46,192,141,0.18);
    }

    .mobile-menu-item.lang-item:active::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 110%;
      height: 110%;
      background: radial-gradient(circle, rgba(46,192,141,0.12) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 0.6;
      pointer-events: none;
      animation: ripple 0.5s linear;
    }

    /* ...existing code... */

/* Cosmic floating animation */
        @keyframes cosmic-float {
          0%, 100% { 
            transform: translateY(0px) scale(1) rotate(0deg); 
            filter: brightness(1) saturate(1);
          }
          25% { 
            transform: translateY(-6px) scale(1.03) rotate(1deg); 
            filter: brightness(1.15) saturate(1.1);
          }
          50% { 
            transform: translateY(-10px) scale(1.06) rotate(0deg); 
            filter: brightness(1.25) saturate(1.2);
          }
          75% { 
            transform: translateY(-4px) scale(1.02) rotate(-1deg); 
            filter: brightness(1.1) saturate(1.05);
          }
        }
        
        /* Cosmic rotating outer ring */
        @keyframes cosmic-rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        
        /* Simplified star floating animations - 3 optimized variations */
        @keyframes star-float-subtle {
          0%, 100% { 
            transform: translate(0, 0) scale(1); 
            opacity: 0.7; 
          }
          50% { 
            transform: translate(4px, -4px) scale(1.08); 
            opacity: 0.9; 
          }
        }
        
        @keyframes star-float-medium {
          0%, 100% { 
            transform: translate(0, 0) scale(1); 
            opacity: 0.85; 
          }
          50% { 
            transform: translate(-6px, 6px) scale(1.12); 
            opacity: 1; 
          }
        }
        
        @keyframes star-float-bold {
          0%, 100% { 
            transform: translate(0, 0) scale(1); 
            opacity: 0.8; 
          }
          50% { 
            transform: translate(8px, -6px) scale(1.15); 
            opacity: 1; 
          }
        }
        
        
        
        
        
        /* Cosmic glow effect that dissolves into cosmos */
        @keyframes magic-universe-glow {
          0% { 
            opacity: 0.3;
            transform: scale(0.96);
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg);
            box-shadow: 0 0 35px rgba(255,255,255,0.25), 0 0 70px rgba(55,227,159,0.18), 0 0 105px rgba(138,43,226,0.1), 0 0 140px rgba(28,174,130,0.05);
          }
          20% { 
            opacity: 0.5; 
            transform: scale(1.01);
            filter: brightness(1.2) saturate(1.3) hue-rotate(8deg);
            box-shadow: 0 0 45px rgba(255,255,255,0.35), 0 0 90px rgba(55,227,159,0.22), 0 0 135px rgba(138,43,226,0.12), 0 0 180px rgba(28,174,130,0.08);
          }
          40% { 
            opacity: 0.7; 
            transform: scale(1.04);
            filter: brightness(1.3) saturate(1.4) hue-rotate(15deg);
            box-shadow: 0 0 55px rgba(255,255,255,0.45), 0 0 110px rgba(55,227,159,0.28), 0 0 165px rgba(138,43,226,0.15), 0 0 220px rgba(28,174,130,0.1);
          }
          60% { 
            opacity: 0.8; 
            transform: scale(1.07);
            filter: brightness(1.4) saturate(1.5) hue-rotate(20deg);
            box-shadow: 0 0 65px rgba(255,255,255,0.55), 0 0 130px rgba(55,227,159,0.32), 0 0 195px rgba(138,43,226,0.18), 0 0 260px rgba(28,174,130,0.12);
          }
          80% { 
            opacity: 0.6; 
            transform: scale(1.02);
            filter: brightness(1.3) saturate(1.4) hue-rotate(12deg);
            box-shadow: 0 0 50px rgba(255,255,255,0.4), 0 0 100px rgba(55,227,159,0.25), 0 0 150px rgba(138,43,226,0.13), 0 0 200px rgba(28,174,130,0.08);
          }
          100% { 
            opacity: 0.3; 
            transform: scale(0.96);
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg);
            box-shadow: 0 0 35px rgba(255,255,255,0.25), 0 0 70px rgba(55,227,159,0.18), 0 0 105px rgba(138,43,226,0.1), 0 0 140px rgba(28,174,130,0.05);
          }
        }
        
        /* Cosmic energy sweep effect */
        
        /* Cosmic stars container */
        @keyframes cosmic-stars {
          0%, 100% { 
            transform: rotate(0deg) scale(1);
          }
          50% { 
            transform: rotate(180deg) scale(1.05);
          }
        }
        

        
        /* Zen Time Selection Popup */
        .time-selection-popup {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(30px);
          display: flex;
          align-items: flex-start;
          justify-content: center;
          z-index: 1000000;
            opacity: 0;
          visibility: hidden;
          transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
          padding-top: 200px;
        }
        
        .time-selection-popup.show {
            opacity: 1;
          visibility: visible;
        }
        
        .time-selection-content {
          background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
          backdrop-filter: blur(50px);
          border: 1px solid rgba(55,227,159,0.2);
          border-radius: 32px;
          padding: 48px 40px;
          max-width: 400px;
          width: 90%;
          text-align: center;
          transform: scale(0.7) translateY(-20px);
          transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
          position: relative;
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(55,227,159,0.1), 0 0 0 1px rgba(55,227,159,0.05);
        }
        
        .time-selection-popup.show .time-selection-content {
          transform: scale(1) translateY(0);
        }
        
        .time-selection-content::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 30% 20%, rgba(55,227,159,0.03) 0%, transparent 50%);
          pointer-events: none;
        }
        
        .zen-time-slider {
          margin: 32px 0;
          position: relative;
        }
        
        .time-slider-track {
          width: 100%;
          height: 3px;
          background: rgba(55,227,159,0.15);
          border-radius: 2px;
          position: relative;
          margin: 24px 0;
          cursor: pointer;
        }
        
        .time-slider-fill {
          height: 100%;
          background: linear-gradient(90deg, rgba(55,227,159,0.8), rgba(28,174,130,0.6));
          border-radius: 2px;
          transition: width 0.3s ease;
          position: relative;
          box-shadow: 0 0 10px rgba(55,227,159,0.3);
        }
        
        .time-slider-fill::after {
          content: '';
          position: absolute;
          right: -8px;
          top: -6px;
          width: 15px;
          height: 15px;
          background: rgba(55,227,159,0.9);
          border-radius: 50%;
          box-shadow: 0 0 25px rgba(55,227,159,0.6), 0 0 50px rgba(55,227,159,0.3);
          border: 2px solid rgba(248,250,252,0.7);
          cursor: grab;
          transition: all 0.2s ease;
        }
        
        .time-slider-fill::after:active {
          cursor: grabbing;
          transform: scale(1.1);
          box-shadow: 0 0 30px rgba(55,227,159,0.8), 0 0 60px rgba(55,227,159,0.4);
        }
        
        .time-marks {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          position: relative;
        }
        
        .time-mark {
          font-size: 11px;
          font-weight: 300;
          color: rgba(28,174,130,0.7);
          cursor: pointer;
          transition: all 0.3s ease;
          padding: 8px 4px;
          border-radius: 8px;
          position: relative;
          text-shadow: 0 0 10px rgba(55,227,159,0.3);
        }
        
        .time-mark:hover {
          color: rgba(55,227,159,0.9);
          background: rgba(55,227,159,0.08);
          text-shadow: 0 0 15px rgba(55,227,159,0.5);
        }
        
        .time-mark.active {
          color: rgba(55,227,159,1);
          font-weight: 400;
          text-shadow: 0 0 20px rgba(55,227,159,0.7);
        }
        
        .time-display {
          font-size: 24px;
          font-weight: 200;
          color: rgba(55,227,159,0.9);
          margin: 20px 0;
          letter-spacing: 1px;
          font-family: 'Sora', sans-serif;
          text-shadow: 0 0 20px rgba(55,227,159,0.4);
        }
        
        .time-unit {
          font-size: 12px;
          color: rgba(28,174,130,0.7);
          font-weight: 300;
          margin-left: 4px;
          text-shadow: 0 0 10px rgba(55,227,159,0.3);
        }

        .freeflow-status-pill {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 4px 12px;
          border-radius: 999px;
          border: 1px solid rgba(28,174,130,0.2);
          background: rgba(28,174,130,0.08);
          color: rgba(28,174,130,0.85);
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.2em;
          text-transform: uppercase;
        }

        .freeflow-progress-time {
          display: block;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 500;
          color: rgba(95,111,106,0.75);
          letter-spacing: 0.08em;
        }
        
        /* Meditative Countdown Timer */
        .meditation-countdown {
          position: relative;
          margin-top: 0;
          margin-bottom: 10px;
          text-align: center;
          z-index: 100010;
          opacity: 0;
          animation: fadeIn 1s ease-out forwards;
          background: transparent;
          padding: 0;
          transition: all 0.5s ease;
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(5px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes fadeOut {
          from {
            opacity: 1;
            transform: translateY(0);
          }
          to {
            opacity: 0;
            transform: translateY(-5px);
          }
        }
        
        .meditation-message {
          margin-bottom: 16px;
          opacity: 0;
          animation: messageFadeIn 1.5s ease-out forwards;
        }
        
        @keyframes messageFadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes messageFadeOut {
          from {
            opacity: 1;
            transform: translateY(0);
          }
          to {
            opacity: 0;
            transform: translateY(-10px);
          }
        }
        
        @keyframes countdownFadeIn {
          from {
            opacity: 0;
            transform: translateY(8px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes countdownFadeOut {
          from {
            opacity: 1;
            transform: translateY(0);
          }
          to {
            opacity: 0;
            transform: translateY(-8px);
          }
        }
        
        .countdown-number {
          display: inline-block;
          position: relative;
          font-size: 22px;
          font-weight: 300;
          color: rgba(28,174,130,0.9);
          font-family: 'Raleway', sans-serif;
          text-shadow: none;
          min-width: 24px;
          text-align: center;
          background: transparent;
          border-radius: 0;
          padding: 0;
          margin: 0 1px;
          border: none;
        }
        
        .countdown-seconds {
          position: relative;
          display: inline-block;
        }
        
        
        .countdown-separator {
          margin: 0 3px;
          opacity: 0.6;
          font-size: 22px;
          color: rgba(28,174,130,0.7);
          text-shadow: none;
          font-weight: 300;
        }
        
        @keyframes pulse {
          0%, 100% {
            opacity: 0.6;
            transform: scale(1);
          }
          50% {
            opacity: 1;
            transform: scale(1.1);
          }
        }
        
        .countdown-progress {
          width: 120px;
          height: 2px;
          background: rgba(55,227,159,0.2);
          border-radius: 1px;
          margin: 12px auto 0;
          overflow: hidden;
          position: relative;
          opacity: 0;
          animation: progressFadeIn 1.5s ease-out 0.6s forwards;
        }
        
        @keyframes progressFadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .countdown-progress-fill {
          height: 100%;
          background: linear-gradient(90deg, rgba(55,227,159,0.8), rgba(28,174,130,0.6));
          border-radius: 1px;
          transition: width 1s ease;
          position: relative;
          box-shadow: 0 0 10px rgba(55,227,159,0.3);
        }
        
        .countdown-progress-fill::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
          animation: shimmer 2s ease-in-out infinite;
        }
        
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
        
        
        /* Zen-style minimal effects for statusRing */
        

        
        /* Ensure all ring elements stay above background video */
        #statusRing,
        #statusRing *,
        #statusLight {
          position: relative;
          z-index: 100000;
        }
        
        /* ✨ Premium Text Fade Animation */
        @keyframes text-fade-in {
          0% { 
            opacity: 0;
            transform: translateY(10px);
          }
          100% { 
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        /* Ethereal Inner Petal Animations */
        @keyframes ethereal-inner-1 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg);
          }
          25% { 
            transform: scale(1.1) rotate(2deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg);
          }
          50% { 
            transform: scale(1.2) rotate(5deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) hue-rotate(10deg);
          }
          75% { 
            transform: scale(1.05) rotate(1deg); 
            opacity: 0.92;
            filter: brightness(1.15) saturate(1.25) hue-rotate(5deg);
          }
        }
        
        @keyframes ethereal-inner-2 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4);
          }
          50% { 
            transform: scale(1.2) rotate(-5deg); 
            opacity: 1;
            filter: brightness(1.6) saturate(1.7);
          }
        }
        
        @keyframes ethereal-inner-3 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4);
          }
          50% { 
            transform: scale(1.2) rotate(-5deg); 
            opacity: 1;
            filter: brightness(1.6) saturate(1.7);
          }
        }
        
        @keyframes ethereal-inner-4 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4);
          }
          50% { 
            transform: scale(1.2) rotate(5deg); 
            opacity: 1;
            filter: brightness(1.6) saturate(1.7);
          }
        }
        
        /* Ethereal Center and Light Animations */
        @keyframes ethereal-center-pulse {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.15) saturate(1.25) contrast(1.1);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.2) rotate(90deg); 
            opacity: 0.95;
            filter: brightness(1.6) saturate(1.7) contrast(1.5);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.4) rotate(180deg); 
            opacity: 0.9;
            filter: brightness(1.8) saturate(1.9) contrast(1.7);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.2) rotate(270deg); 
            opacity: 0.95;
            filter: brightness(1.6) saturate(1.7) contrast(1.5);
          }
        }
        
        @keyframes ethereal-light-rays {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 0.6; 
            filter: brightness(1.15) saturate(1.25) contrast(1.1);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.2) rotate(45deg); 
            opacity: 0.8; 
            filter: brightness(1.7) saturate(1.8) contrast(1.5);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.4) rotate(90deg); 
            opacity: 0.9; 
            filter: brightness(2.0) saturate(2.1) contrast(1.7);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.2) rotate(135deg); 
            opacity: 0.8; 
            filter: brightness(1.7) saturate(1.8) contrast(1.5);
          }
        }
        
        @keyframes ethereal-outer-aura {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 0.4; 
            filter: brightness(1.2) saturate(1.3);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.3) rotate(180deg); 
            opacity: 0.7; 
            filter: brightness(1.6) saturate(1.7);
          }
        }
        
        /* Cosmic Sparkle Animations */
        @keyframes cosmic-sparkle-1 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.6; 
            filter: brightness(1.2);
          }
          50% { 
            transform: scale(1.5) rotate(180deg); 
            opacity: 1; 
            filter: brightness(1.8);
          }
        }
        
        @keyframes cosmic-sparkle-2 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.5; 
            filter: brightness(1.1);
          }
          50% { 
            transform: scale(1.8) rotate(180deg); 
            opacity: 0.9; 
            filter: brightness(1.7);
          }
        }
        
        @keyframes cosmic-sparkle-3 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.7; 
            filter: brightness(1.3);
          }
          50% { 
            transform: scale(1.6) rotate(180deg); 
            opacity: 1; 
            filter: brightness(1.9);
          }
        }
        
        @keyframes cosmic-sparkle-4 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.4; 
            filter: brightness(1.0);
          }
          50% { 
            transform: scale(2) rotate(180deg); 
            opacity: 0.8; 
            filter: brightness(1.6);
          }
        }
        
        /* Cosmic Solar System Animations - Professional High-Resolution Effects */
        @keyframes cosmic-planet-1 {
          0%, 100% { 
            transform: translateX(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateX(-50%) scale(1.1) rotate(2deg); 
            opacity: 0.98;
            filter: brightness(1.6) saturate(1.7) hue-rotate(5deg) contrast(1.3);
          }
          50% { 
            transform: translateX(-50%) scale(1.15) rotate(4deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(10deg) contrast(1.4);
          }
          75% { 
            transform: translateX(-50%) scale(1.05) rotate(2deg); 
            opacity: 0.97;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg) contrast(1.3);
          }
        }
        
        @keyframes cosmic-planet-2 {
          0%, 100% { 
            transform: translateX(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateX(-50%) scale(1.1) rotate(-2deg); 
            opacity: 0.98;
            filter: brightness(1.6) saturate(1.7) hue-rotate(-5deg) contrast(1.3);
          }
          50% { 
            transform: translateX(-50%) scale(1.15) rotate(-4deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(-10deg) contrast(1.4);
          }
          75% { 
            transform: translateX(-50%) scale(1.05) rotate(-2deg); 
            opacity: 0.97;
            filter: brightness(1.5) saturate(1.6) hue-rotate(-5deg) contrast(1.3);
          }
        }
        
        @keyframes cosmic-planet-3 {
          0%, 100% { 
            transform: translateY(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateY(-50%) scale(1.1) rotate(2deg); 
            opacity: 0.98;
            filter: brightness(1.6) saturate(1.7) hue-rotate(5deg) contrast(1.3);
          }
          50% { 
            transform: translateY(-50%) scale(1.15) rotate(4deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(10deg) contrast(1.4);
          }
          75% { 
            transform: translateY(-50%) scale(1.05) rotate(2deg); 
            opacity: 0.97;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg) contrast(1.3);
          }
        }
        
        @keyframes cosmic-planet-4 {
          0%, 100% { 
            transform: translateY(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateY(-50%) scale(1.1) rotate(-2deg); 
            opacity: 0.98;
            filter: brightness(1.6) saturate(1.7) hue-rotate(-5deg) contrast(1.3);
          }
          50% { 
            transform: translateY(-50%) scale(1.15) rotate(-4deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(-10deg) contrast(1.4);
          }
          75% { 
            transform: translateY(-50%) scale(1.05) rotate(-2deg); 
            opacity: 0.97;
            filter: brightness(1.5) saturate(1.6) hue-rotate(-5deg) contrast(1.3);
          }
        }
        
        @keyframes cosmic-planet-5 {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(45deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.1) rotate(47deg); 
            opacity: 0.98;
            filter: brightness(1.6) saturate(1.7) hue-rotate(5deg) contrast(1.3);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.15) rotate(49deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(10deg) contrast(1.4);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(47deg); 
            opacity: 0.97;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg) contrast(1.3);
          }
        }
        
        @keyframes cosmic-moon-1 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.1);
          }
          25% { 
            transform: scale(1.08) rotate(3deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg) contrast(1.2);
          }
          50% { 
            transform: scale(1.15) rotate(6deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) hue-rotate(10deg) contrast(1.3);
          }
          75% { 
            transform: scale(1.05) rotate(3deg); 
            opacity: 0.92;
            filter: brightness(1.4) saturate(1.5) hue-rotate(5deg) contrast(1.2);
          }
        }
        
        @keyframes cosmic-moon-2 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.1);
          }
          25% { 
            transform: scale(1.08) rotate(-3deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6) hue-rotate(-5deg) contrast(1.2);
          }
          50% { 
            transform: scale(1.15) rotate(-6deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) hue-rotate(-10deg) contrast(1.3);
          }
          75% { 
            transform: scale(1.05) rotate(-3deg); 
            opacity: 0.92;
            filter: brightness(1.4) saturate(1.5) hue-rotate(-5deg) contrast(1.2);
          }
        }
        
        @keyframes cosmic-moon-3 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.1);
          }
          25% { 
            transform: scale(1.08) rotate(3deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6) hue-rotate(5deg) contrast(1.2);
          }
          50% { 
            transform: scale(1.15) rotate(6deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) hue-rotate(10deg) contrast(1.3);
          }
          75% { 
            transform: scale(1.05) rotate(3deg); 
            opacity: 0.92;
            filter: brightness(1.4) saturate(1.5) hue-rotate(5deg) contrast(1.2);
          }
        }
        
        @keyframes cosmic-moon-4 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.1);
          }
          25% { 
            transform: scale(1.08) rotate(-3deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6) hue-rotate(-5deg) contrast(1.2);
          }
          50% { 
            transform: scale(1.15) rotate(-6deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) hue-rotate(-10deg) contrast(1.3);
          }
          75% { 
            transform: scale(1.05) rotate(-3deg); 
            opacity: 0.92;
            filter: brightness(1.4) saturate(1.5) hue-rotate(-5deg) contrast(1.2);
          }
        }
        
        @keyframes cosmic-sun-pulse {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) contrast(1.3) hue-rotate(0deg);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.1) rotate(90deg); 
            opacity: 0.95;
            filter: brightness(1.7) saturate(1.8) contrast(1.4) hue-rotate(5deg);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.2) rotate(180deg); 
            opacity: 0.9;
            filter: brightness(1.9) saturate(2.0) contrast(1.5) hue-rotate(10deg);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(270deg); 
            opacity: 0.97;
            filter: brightness(1.6) saturate(1.7) contrast(1.4) hue-rotate(5deg);
          }
        }
        
        @keyframes cosmic-light-rays {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 0.8;
            filter: brightness(1.3) saturate(1.4) contrast(1.2);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(90deg); 
            opacity: 0.9;
            filter: brightness(1.5) saturate(1.6) contrast(1.3);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.1) rotate(180deg); 
            opacity: 1;
            filter: brightness(1.7) saturate(1.8) contrast(1.4);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.03) rotate(270deg); 
            opacity: 0.85;
            filter: brightness(1.15) saturate(1.25) contrast(1.1);
          }
        }
        
        @keyframes cosmic-aura {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 0.6;
            filter: brightness(1.2) saturate(1.3) contrast(1.1);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.08) rotate(90deg); 
            opacity: 0.7;
            filter: brightness(1.4) saturate(1.5) contrast(1.2);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.15) rotate(180deg); 
            opacity: 0.8;
            filter: brightness(1.6) saturate(1.7) contrast(1.3);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(270deg); 
            opacity: 0.65;
            filter: brightness(1.3) saturate(1.4) contrast(1.2);
          }
        }
        

        
        /* Vipassana Meditation Animations - Mindfulness Breathing & Insight */
        @keyframes vipassana-meditation-breathe {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.2) saturate(1.3);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(1deg); 
            opacity: 0.9;
            filter: brightness(1.1) saturate(1.2);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); 
            opacity: 0.95;
            filter: brightness(1.5) saturate(1.6);
          }
        }
        
        @keyframes vipassana-awareness-breathe {
          0%, 100% { 
            transform: translateX(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateX(-50%) scale(1.08) rotate(2deg); 
            opacity: 0.85;
            filter: brightness(1.5) saturate(1.6) hue-rotate(10deg) contrast(1.4);
          }
          50% { 
            transform: translateX(-50%) scale(1.15) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(20deg) contrast(1.3);
          }
          75% { 
            transform: translateX(-50%) scale(1.08) rotate(-2deg); 
            opacity: 0.9;
            filter: brightness(1.6) saturate(1.7) hue-rotate(30deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-concentration-breathe {
          0%, 100% { 
            transform: translateX(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateX(-50%) scale(1.06) rotate(-1deg); 
            opacity: 0.88;
            filter: brightness(1.5) saturate(1.6) hue-rotate(8deg) contrast(1.4);
          }
          50% { 
            transform: translateX(-50%) scale(1.12) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(16deg) contrast(1.3);
          }
          75% { 
            transform: translateX(-50%) scale(1.06) rotate(1deg); 
            opacity: 0.92;
            filter: brightness(1.6) saturate(1.7) hue-rotate(24deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-insight-breathe {
          0%, 100% { 
            transform: translateY(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateY(-50%) scale(1.07) rotate(1deg); 
            opacity: 0.87;
            filter: brightness(1.5) saturate(1.6) hue-rotate(12deg) contrast(1.4);
          }
          50% { 
            transform: translateY(-50%) scale(1.14) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(24deg) contrast(1.3);
          }
          75% { 
            transform: translateY(-50%) scale(1.07) rotate(-1deg); 
            opacity: 0.93;
            filter: brightness(1.6) saturate(1.7) hue-rotate(36deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-wisdom-breathe {
          0%, 100% { 
            transform: translateY(-50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translateY(-50%) scale(1.05) rotate(-1deg); 
            opacity: 0.89;
            filter: brightness(1.5) saturate(1.6) hue-rotate(9deg) contrast(1.4);
          }
          50% { 
            transform: translateY(-50%) scale(1.1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(18deg) contrast(1.3);
          }
          75% { 
            transform: translateY(-50%) scale(1.05) rotate(1deg); 
            opacity: 0.91;
            filter: brightness(1.6) saturate(1.7) hue-rotate(27deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-compassion-breathe {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.09) rotate(2deg); 
            opacity: 0.86;
            filter: brightness(1.5) saturate(1.6) hue-rotate(11deg) contrast(1.4);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.18) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(22deg) contrast(1.3);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.09) rotate(-2deg); 
            opacity: 0.94;
            filter: brightness(1.6) saturate(1.7) hue-rotate(33deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-energy-center-1 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: scale(1.1) rotate(90deg); 
            opacity: 0.8;
            filter: brightness(1.6) saturate(1.7) hue-rotate(15deg) contrast(1.5);
          }
          50% { 
            transform: scale(1.2) rotate(180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(30deg) contrast(1.4);
          }
          75% { 
            transform: scale(1.1) rotate(270deg); 
            opacity: 0.9;
            filter: brightness(1.7) saturate(1.8) hue-rotate(45deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-energy-center-2 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: scale(1.08) rotate(-90deg); 
            opacity: 0.82;
            filter: brightness(1.6) saturate(1.7) hue-rotate(12deg) contrast(1.5);
          }
          50% { 
            transform: scale(1.16) rotate(-180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(24deg) contrast(1.4);
          }
          75% { 
            transform: scale(1.08) rotate(-270deg); 
            opacity: 0.88;
            filter: brightness(1.7) saturate(1.8) hue-rotate(36deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-energy-center-3 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: scale(1.12) rotate(90deg); 
            opacity: 0.84;
            filter: brightness(1.6) saturate(1.7) hue-rotate(18deg) contrast(1.5);
          }
          50% { 
            transform: scale(1.24) rotate(180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(36deg) contrast(1.4);
          }
          75% { 
            transform: scale(1.12) rotate(270deg); 
            opacity: 0.86;
            filter: brightness(1.7) saturate(1.8) hue-rotate(54deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-energy-center-4 {
          0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: scale(1.06) rotate(-90deg); 
            opacity: 0.81;
            filter: brightness(1.6) saturate(1.7) hue-rotate(10deg) contrast(1.5);
          }
          50% { 
            transform: scale(1.12) rotate(-180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(20deg) contrast(1.4);
          }
          75% { 
            transform: scale(1.06) rotate(-270deg); 
            opacity: 0.87;
            filter: brightness(1.7) saturate(1.8) hue-rotate(30deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-heart-center-pulse {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(0deg) contrast(1.4);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.15) rotate(5deg); 
            opacity: 0.9;
            filter: brightness(1.7) saturate(1.8) hue-rotate(20deg) contrast(1.6);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.3) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.6) saturate(1.7) hue-rotate(40deg) contrast(1.5);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.15) rotate(-5deg); 
            opacity: 0.95;
            filter: brightness(1.8) saturate(1.9) hue-rotate(60deg) contrast(1.7);
          }
        }
        
        @keyframes vipassana-awareness-field {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg) contrast(1.2);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.08) rotate(10deg); 
            opacity: 0.85;
            filter: brightness(1.5) saturate(1.6) hue-rotate(15deg) contrast(1.4);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.16) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(30deg) contrast(1.3);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.08) rotate(-10deg); 
            opacity: 0.9;
            filter: brightness(1.6) saturate(1.7) hue-rotate(45deg) contrast(1.5);
          }
        }
        
        @keyframes vipassana-meditation-aura {
          0%, 100% { 
            transform: translate(-50%, -50%) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.2) saturate(1.3) hue-rotate(0deg) contrast(1.1);
          }
          25% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(5deg); 
            opacity: 0.8;
            filter: brightness(1.4) saturate(1.5) hue-rotate(10deg) contrast(1.3);
          }
          50% { 
            transform: translate(-50%, -50%) scale(1.1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.3) saturate(1.4) hue-rotate(20deg) contrast(1.2);
          }
          75% { 
            transform: translate(-50%, -50%) scale(1.05) rotate(-5deg); 
            opacity: 0.9;
            filter: brightness(1.5) saturate(1.6) hue-rotate(30deg) contrast(1.4);
          }
        }
        
        @keyframes vipassana-insight-sparkle-1 {
          0%, 100% { 
            transform: translate(0, 0) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: translate(-6px, 4px) scale(1.2) rotate(90deg); 
            opacity: 0.7;
            filter: brightness(1.6) saturate(1.7) hue-rotate(20deg) contrast(1.5);
          }
          50% { 
            transform: translate(4px, -6px) scale(1.4) rotate(180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(40deg) contrast(1.4);
          }
          75% { 
            transform: translate(-4px, 6px) scale(1.2) rotate(270deg); 
            opacity: 0.8;
            filter: brightness(1.7) saturate(1.8) hue-rotate(60deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-insight-sparkle-2 {
          0%, 100% { 
            transform: translate(0, 0) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: translate(5px, -3px) scale(1.15) rotate(-90deg); 
            opacity: 0.75;
            filter: brightness(1.6) saturate(1.7) hue-rotate(15deg) contrast(1.5);
          }
          50% { 
            transform: translate(-3px, 5px) scale(1.3) rotate(-180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(30deg) contrast(1.4);
          }
          75% { 
            transform: translate(3px, -5px) scale(1.15) rotate(-270deg); 
            opacity: 0.85;
            filter: brightness(1.7) saturate(1.8) hue-rotate(45deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-insight-sparkle-3 {
          0%, 100% { 
            transform: translate(0, 0) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: translate(-7px, 5px) scale(1.18) rotate(90deg); 
            opacity: 0.72;
            filter: brightness(1.6) saturate(1.7) hue-rotate(18deg) contrast(1.5);
          }
          50% { 
            transform: translate(5px, -7px) scale(1.36) rotate(180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(36deg) contrast(1.4);
          }
          75% { 
            transform: translate(-5px, 7px) scale(1.18) rotate(270deg); 
            opacity: 0.82;
            filter: brightness(1.7) saturate(1.8) hue-rotate(54deg) contrast(1.6);
          }
        }
        
        @keyframes vipassana-insight-sparkle-4 {
          0%, 100% { 
            transform: translate(0, 0) scale(1) rotate(0deg); 
            opacity: 1;
            filter: brightness(1.4) saturate(1.5) hue-rotate(0deg) contrast(1.3);
          }
          25% { 
            transform: translate(4px, -2px) scale(1.1) rotate(-90deg); 
            opacity: 0.78;
            filter: brightness(1.6) saturate(1.7) hue-rotate(12deg) contrast(1.5);
          }
          50% { 
            transform: translate(-2px, 4px) scale(1.2) rotate(-180deg); 
            opacity: 1;
            filter: brightness(1.5) saturate(1.6) hue-rotate(24deg) contrast(1.4);
          }
          75% { 
            transform: translate(2px, -4px) scale(1.1) rotate(-270deg); 
            opacity: 0.88;
            filter: brightness(1.7) saturate(1.8) hue-rotate(36deg) contrast(1.6);
          }
        }
        

        

        
        /* Natural Living Universe Glow Animation */
        @keyframes zen-universe-glow {
          0% { 
            opacity: 0.3;
            transform: scale(0.96);
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg);
            box-shadow: 0 0 40px rgba(255,255,255,0.25), 0 0 80px rgba(255,218,185,0.18), 0 0 120px rgba(255,182,193,0.1), 0 0 160px rgba(144,238,144,0.05);
          }
          20% { 
            opacity: 0.5; 
            transform: scale(1.01);
            filter: brightness(1.2) saturate(1.3) hue-rotate(8deg);
            box-shadow: 0 0 50px rgba(255,255,255,0.35), 0 0 100px rgba(255,218,185,0.22), 0 0 150px rgba(255,182,193,0.12), 0 0 200px rgba(144,238,144,0.08);
          }
          40% { 
            opacity: 0.7; 
            transform: scale(1.04);
            filter: brightness(1.3) saturate(1.4) hue-rotate(15deg);
            box-shadow: 0 0 60px rgba(255,255,255,0.45), 0 0 120px rgba(255,218,185,0.28), 0 0 180px rgba(255,182,193,0.15), 0 0 240px rgba(144,238,144,0.1);
          }
          60% { 
            opacity: 0.8; 
            transform: scale(1.07);
            filter: brightness(1.4) saturate(1.5) hue-rotate(20deg);
            box-shadow: 0 0 70px rgba(255,255,255,0.55), 0 0 140px rgba(255,218,185,0.32), 0 0 210px rgba(255,182,193,0.18), 0 0 280px rgba(144,238,144,0.12);
          }
          80% { 
            opacity: 0.6; 
            transform: scale(1.02);
            filter: brightness(1.3) saturate(1.4) hue-rotate(12deg);
            box-shadow: 0 0 55px rgba(255,255,255,0.4), 0 0 110px rgba(255,218,185,0.25), 0 0 165px rgba(255,182,193,0.13), 0 0 220px rgba(144,238,144,0.08);
          }
          100% { 
            opacity: 0.3; 
            transform: scale(0.96);
            filter: brightness(1.3) saturate(1.4) hue-rotate(0deg);
            box-shadow: 0 0 40px rgba(255,255,255,0.25), 0 0 80px rgba(255,218,185,0.18), 0 0 120px rgba(255,182,193,0.1), 0 0 160px rgba(144,238,144,0.05);
          }
        }
        
        /* Zen Sweep Animation */
        @keyframes zen-sweep {
          0% { 
            transform: translateX(-100%) translateY(-100%) rotate(45deg);
            opacity: 0;
          }
          50% { 
            transform: translateX(0%) translateY(0%) rotate(45deg);
            opacity: 1;
          }
          100% {
            transform: translateX(100%) translateY(100%) rotate(45deg);
            opacity: 0;
          }
        }

/* Enable animations for diamond meditation interface */
          
          .meditation-card-wrapper {
            position: relative;
            max-width: 420px;
            margin: 0 auto;
            padding: 48px 32px;
            background: linear-gradient(180deg, 
              rgba(248,252,250,0.8) 0%, 
              rgba(255,255,255,0.95) 100%);
            border-radius: 32px;
            border: 1px solid rgba(28,174,130,0.08);
            box-shadow: 
              0 4px 24px rgba(0,0,0,0.02),
              0 12px 48px rgba(28,174,130,0.04);
          }
          
          /* Premium Timer Circle */
          .zen-circle-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto 48px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
          }
          
          .zen-circle-container:hover {
            transform: scale(1.02);
          }
          
          .zen-circle-container:active {
            transform: scale(0.98);
          }
          
          /* Breathing Circle - Apple Watch Style */
          .zen-breathing-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%,
              rgba(255,255,255,1) 0%,
              rgba(248,252,250,0.8) 30%,
              rgba(240,250,245,0.6) 60%,
              rgba(28,174,130,0.04) 100%);
            border: 3px solid rgba(28,174,130,0.12);
            box-shadow: 
              0 12px 40px rgba(28,174,130,0.10),
              0 4px 16px rgba(28,174,130,0.08),
              inset 0 2px 12px rgba(255,255,255,0.9),
              inset 0 -2px 8px rgba(28,174,130,0.03);
            animation: zenBreathe 5s ease-in-out infinite;
          }
          
          /* Center Touch Area - Interactive */
          .zen-center-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, 
              rgba(28,174,130,0.95) 0%, 
              rgba(55,227,159,0.9) 100%);
            box-shadow: 
              0 0 0 12px rgba(28,174,130,0.06),
              0 0 0 24px rgba(28,174,130,0.03),
              0 8px 24px rgba(28,174,130,0.25),
              inset 0 2px 8px rgba(255,255,255,0.3);
            animation: zenPulse 5s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          
          .zen-center-dot::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255,255,255,0.95);
            box-shadow: 
              0 2px 8px rgba(0,0,0,0.1),
              0 0 0 4px rgba(255,255,255,0.2);
          }
          
          /* Premium Time Markers */
          .zen-time-markers {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          
          .zen-time-marker {
            position: absolute;
            width: 3px;
            height: 12px;
            background: linear-gradient(180deg, 
              rgba(28,174,130,0.3) 0%,
              rgba(28,174,130,0.15) 100%);
            border-radius: 3px;
          }
          
          .zen-time-marker:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
          .zen-time-marker:nth-child(2) { bottom: 0; left: 50%; transform: translateX(-50%); }
          .zen-time-marker:nth-child(3) { top: 50%; left: 0; transform: translateY(-50%) rotate(90deg); }
          .zen-time-marker:nth-child(4) { top: 50%; right: 0; transform: translateY(-50%) rotate(90deg); }
          
          /* Elegant Time Labels */
          .zen-time-hints {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 220px;
            pointer-events: none;
          }
          
          .zen-time-hint {
            position: absolute;
            font-size: 11px;
            font-weight: 500;
            color: rgba(28,174,130,0.5);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            animation: hintFloat 5s ease-in-out infinite;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
          }
          
          .zen-time-hint:nth-child(1) { 
            top: -32px; 
            left: 50%; 
            transform: translateX(-50%); 
            animation-delay: 0s; 
          }
          .zen-time-hint:nth-child(2) { 
            bottom: -32px; 
            left: 50%; 
            transform: translateX(-50%); 
            animation-delay: 2.5s; 
          }
          
          /* Premium Animations */
          @keyframes zenBreathe {
            0%, 100% {
              transform: translate(-50%, -50%) scale(1);
              box-shadow: 
                0 12px 40px rgba(28,174,130,0.10),
                0 4px 16px rgba(28,174,130,0.08),
                inset 0 2px 12px rgba(255,255,255,0.9),
                inset 0 -2px 8px rgba(28,174,130,0.03);
            }
            50% {
              transform: translate(-50%, -50%) scale(1.05);
              box-shadow: 
                0 16px 48px rgba(28,174,130,0.14),
                0 6px 20px rgba(28,174,130,0.12),
                inset 0 3px 16px rgba(255,255,255,1),
                inset 0 -3px 12px rgba(28,174,130,0.05);
            }
          }
          
          @keyframes zenPulse {
            0%, 100% {
              transform: translate(-50%, -50%) scale(1);
              box-shadow: 
                0 0 0 12px rgba(28,174,130,0.06),
                0 0 0 24px rgba(28,174,130,0.03),
                0 8px 24px rgba(28,174,130,0.25),
                inset 0 2px 8px rgba(255,255,255,0.3);
            }
            50% {
              transform: translate(-50%, -50%) scale(1.08);
              box-shadow: 
                0 0 0 16px rgba(28,174,130,0.08),
                0 0 0 32px rgba(28,174,130,0.04),
                0 12px 32px rgba(28,174,130,0.35),
                inset 0 3px 12px rgba(255,255,255,0.5);
            }
          }
          
          @keyframes hintFloat {
            0%, 100% {
              opacity: 0.4;
              transform: translateX(-50%) translateY(0);
            }
            50% {
              opacity: 0.7;
              transform: translateX(-50%) translateY(-6px);
            }
          }
          
          /* Premium Typography */
          .meditation-title-modern {
            font-size: 28px;
            font-weight: 600;
            color: #1d1d1f;
            letter-spacing: -0.6px;
            margin: 0 0 12px 0;
            line-height: 1.1;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
          }
          
          .meditation-subtitle-modern {
            font-size: 15px;
            font-weight: 400;
            color: rgba(60,60,67,0.6);
            letter-spacing: -0.1px;
            line-height: 1.5;
            margin: 0 0 16px 0;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
          }
          
          .meditation-feature-hint {
            font-size: 12px;
            color: rgba(60,60,67,0.4);
            letter-spacing: 0.1px;
            margin: 0;
            font-weight: 400;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
          }
          @media (max-width: 768px) {
            .meditation-card-wrapper {
              padding: 48px 28px;
              border-radius: 32px;
            }
            
            .zen-circle-container {
              width: 180px;
              height: 180px;
              margin: 0 auto 40px;
            }
            
            .zen-breathing-circle {
              width: 160px;
              height: 160px;
              border-width: 2px;
            }
            
            .zen-center-dot {
              width: 70px;
              height: 70px;
            }
            
            .zen-center-dot::before {
              width: 14px;
              height: 14px;
            }
            
            .zen-time-marker {
              width: 2px;
              height: 10px;
            }
            
            .zen-time-hint {
              font-size: 10px;
            }
            
            .zen-time-hints {
              width: 200px;
              height: 200px;
            }
            
            .meditation-title-modern {
              font-size: 24px;
              letter-spacing: -0.5px;
            }
            
            .meditation-subtitle-modern {
              font-size: 14px;
            }
            
            .meditation-feature-hint {
              font-size: 11px;
            }
          } .meditation-feature-hint {
              font-size: 10px;
            }

@keyframes bowlGlow {
                0%, 100% { 
                  transform: scale(1);
                  opacity: 0.6;
                }
                50% { 
                  transform: scale(1.1);
                  opacity: 0.35;
                }
              }
              
              @keyframes strikerMove {
                0%, 100% { 
                  transform: rotate(0deg) translateY(0px);
                  opacity: 1;
                }
                50% { 
                  transform: rotate(-5deg) translateY(-1px);
                  opacity: 0.9;
                }
              }
              
              @keyframes soundWaves {
                0%, 100% { 
                  opacity: 0.15;
                  transform: scale(1) translateX(0);
                }
                50% { 
                  opacity: 0.5;
                  transform: scale(1.03) translateX(1px);
                }
              }
              
              /* Bowl Hit Animation - Smooth and Meditative */
              @keyframes bowlHit {
                0% { 
                  transform: scale(1);
                }
                8% { 
                  transform: scale(1.03);
                }
                16% { 
                  transform: scale(0.99);
                }
                24% { 
                  transform: scale(1.01);
                }
                32% { 
                  transform: scale(0.998);
                }
                40% { 
                  transform: scale(1.002);
                }
                100% { 
                  transform: scale(1);
                }
              }
              
              /* Striker Hit Animation - Smooth and Meditative */
              @keyframes strikerHit {
                0% { 
                  transform: rotate(0deg) translateX(0px) translateY(0px);
                  opacity: 1;
                }
                15% { 
                  transform: rotate(-20deg) translateX(-8px) translateY(-6px);
                  opacity: 1;
                }
                30% { 
                  transform: rotate(-20deg) translateX(-8px) translateY(-6px);
                  opacity: 1;
                }
                70% { 
                  transform: rotate(0deg) translateX(0px) translateY(0px);
                  opacity: 1;
                }
                100% { 
                  transform: rotate(0deg) translateX(0px) translateY(0px);
                  opacity: 0;
                }
              }
              
              /* Sound Waves Hit Animation */
              @keyframes soundWavesHit {
                0% { 
                  opacity: 0;
                  transform: scale(0.8);
                }
                20% { 
                  opacity: 0.8;
                  transform: scale(1.1);
                }
                40% { 
                  opacity: 0.6;
                  transform: scale(1.3);
                }
                60% { 
                  opacity: 0.4;
                  transform: scale(1.5);
                }
                80% { 
                  opacity: 0.2;
                  transform: scale(1.7);
                }
                100% { 
                  opacity: 0;
                  transform: scale(2);
                }
              }
              
              /* Sound Wave Burst Animation */
              @keyframes soundWaveBurst {
                0% { 
                  opacity: 0;
                  transform: scale(0.8);
                }
                30% { 
                  opacity: 1;
                  transform: scale(1.2);
                }
                60% { 
                  opacity: 0.7;
                  transform: scale(1.4);
                }
                100% { 
                  opacity: 0;
                  transform: scale(1.8);
                }
              }

/* Collapsible Section Styles */
                .section-content {
                  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }
                
                .section-arrow {
                  transition: all 0.3s ease;
                }
                
                .section-arrow:hover {
                  background: rgba(28,174,130,0.15);
                  transform: scale(1.1);
                }
                
                /* Hover effects for section headers */
                [onclick*="toggleSection"]:hover {
                  background: rgba(28,174,130,0.03);
                  transform: translateY(-1px);
                }
                
                /* Smooth transitions for all interactive elements */
                [onclick*="toggleSection"] {
                  transition: all 0.3s ease;
                }
                
                /* Shining Button Animations */
                @keyframes shineEffect {
                  0% { left: -100%; }
                  50% { left: 100%; }
                  100% { left: 100%; }
                }
                
                @keyframes glowPulse {
                  0%, 100% { 
                    opacity: 0.6;
                    transform: scale(1);
                  }
                  50% { 
                    opacity: 0.9;
                    transform: scale(1.05);
                  }
                }
                
                @keyframes starTwinkle {
                  0%, 100% { 
                    transform: scale(1) rotate(0deg);
                    filter: brightness(1);
                  }
                  25% { 
                    transform: scale(1.1) rotate(5deg);
                    filter: brightness(1.2);
                  }
                  50% { 
                    transform: scale(0.95) rotate(-3deg);
                    filter: brightness(0.9);
                  }
                  75% { 
                    transform: scale(1.05) rotate(2deg);
                    filter: brightness(1.1);
                  }
                }
                
                @keyframes sparkleEffect {
                  0%, 100% { 
                    opacity: 0;
                    transform: scale(0.5) rotate(0deg);
                  }
                  50% { 
                    opacity: 1;
                    transform: scale(1.2) rotate(180deg);
                  }
                }
                
                @keyframes spin {
                  0% { transform: rotate(0deg); }
                  100% { transform: rotate(360deg); }
                }

@keyframes starSubtleGlow {
                    0%, 100% { 
                      filter: drop-shadow(0 0 4px rgba(28, 174, 130, 0.2)) drop-shadow(0 0 8px rgba(55, 227, 159, 0.1));
                      opacity: 0.8;
                    }
                    50% { 
                      filter: drop-shadow(0 0 8px rgba(28, 174, 130, 0.4)) drop-shadow(0 0 16px rgba(55, 227, 159, 0.3));
                      opacity: 1;
                    }
                  }
                  
                  .star-warm {
                    animation: starSubtleGlow 4s ease-in-out infinite;
                    transition: all 0.3s ease;
                  }
                  
                  .star-warm:hover {
                    transform: scale(1.1) !important;
                    filter: drop-shadow(0 0 12px rgba(28, 174, 130, 0.6)) drop-shadow(0 0 24px rgba(55, 227, 159, 0.4)) !important;
                    color: #37e39f !important;
                  }

@keyframes heartPulse {
            0%, 100% { 
              transform: scale(1); 
              opacity: 0.3; 
            }
            50% { 
              transform: scale(1.2); 
              opacity: 0.6; 
            }
          }
          
          @keyframes heartBeat {
            0%, 14%, 28%, 100% { 
              transform: scale(1); 
            }
            7% { 
              transform: scale(1.08); 
            }
            21% { 
              transform: scale(1.12); 
            }
          }

@keyframes loadingOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes breathPulse {
  0%, 100% {
    transform: scale(0.72);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes breathGlow {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.55;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dotPulse { 
        0%, 80%, 100% { 
          transform: scale(0.8);
          opacity: 0.4;
        } 
        40% { 
          transform: scale(1.2);
          opacity: 1;
        } 
      }

/* Language Panel Options */
.lang-flag-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(28, 174, 130, 0.15);
  border: 1px solid rgba(28, 174, 130, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.lang-flag-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.lang-flag-panel .lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1a302b;
  width: 100%;
  text-align: left;
}

.lang-flag-panel .lang-option:hover {
  background: rgba(28, 174, 130, 0.08);
  border-color: rgba(28, 174, 130, 0.2);
  transform: translateX(2px);
}

.lang-flag-panel .lang-option:active {
  transform: translateX(2px) scale(0.98);
  background: rgba(28, 174, 130, 0.12);
}

.lang-flag-panel .lang-option .flag {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.lang-flag-panel .lang-option .name {
  flex: 1;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .lang-flag-panel {
    right: 50%;
    transform: translateX(50%) translateY(10px) scale(0.95);
    bottom: 100px;
  }
  
  .lang-flag-panel.open {
    transform: translateX(50%) translateY(0) scale(1);
  }
}

/* ========================================
   Admin Panel Styles
   ======================================== */

.admin-primary-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #1cae82, #2ec08d);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(28, 174, 130, 0.3);
}

.admin-primary-btn:hover {
  background: linear-gradient(135deg, #1a9d75, #29ac80);
  box-shadow: 0 4px 12px rgba(28, 174, 130, 0.4);
  transform: translateY(-1px);
}

.admin-secondary-btn {
  padding: 10px 20px;
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-secondary-btn:hover {
  background: #ebebeb;
  border-color: #ccc;
}

.admin-danger-btn {
  padding: 10px 20px;
  background: #fff;
  color: #e53935;
  border: 1px solid #e53935;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-danger-btn:hover {
  background: #e53935;
  color: white;
}

.admin-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
}

.admin-table {
  border-collapse: collapse;
  background: white;
}

.admin-table th {
  background: #f9f9f9;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #eee;
  font-size: 13px;
  color: #666;
}

.admin-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.admin-table tr:hover {
  background: #fafafa;
}

.admin-panel-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.admin-card-header {
  padding: 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-card-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.admin-card-body {
  padding: 24px;
}

/* Part switcher subtitle + description */
.part-subtitle {
  /* Explicitly set full margin to override earlier block (which added bottom: 10px) */
  margin: 6px auto 2px; /* top 6px, bottom tightened to 2px */
  font-size: clamp(10.4px, 0.25vw + 9.9px, 11.6px);
  font-weight: 660;
  font-family: var(--font-family-base);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(28, 174, 130, 0.62);
  text-align: center;
  line-height: 1.45;
  transition: opacity 0.3s ease, margin 0.3s ease;
}

.part-description {
  margin: 4px auto 0; /* reduce top spacing for tighter pairing */
  max-width: 360px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #4e6860;
  text-align: center;
  transition: opacity 0.3s ease, margin 0.3s ease;
}

.part-subtitle.is-empty,
.part-description.is-empty {
  opacity: 0;
  margin-top: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Explicit override for runtime subtitle element to ensure size/weight apply
   even if earlier blocks enforced bold. */
#partSubtitle.part-subtitle {
  font-size: clamp(10.4px, 0.25vw + 9.9px, 11.6px) !important;
  /* Use an actually loaded weight so it doesn't fall back after webfont loads */
  font-weight: 660 !important;
  font-family: var(--font-family-base) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
}

/* Premium footer */
.app-footer {
  background: linear-gradient(180deg, rgba(28,174,130,0.06) 0%, rgba(28,174,130,0.02) 100%);
  border-top: 1px solid rgba(28,174,130,0.12);
  padding: clamp(32px, 6vw, 56px) clamp(20px, 7vw, 64px);
  color: #1f4f44;
  --footer-max-width: 1120px;
  max-width: var(--footer-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 18px;
}

.app-footer__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 6vw, 48px);
  max-width: var(--footer-max-width);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(18px, 3vw, 28px);
}

.app-footer__brand {
  max-width: 520px;
}

.app-footer__mark {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #11946b;
}

.app-footer__mark span {
  color: #1f4f44;
}

.app-footer__brand p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #46645b;
}

.app-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
  max-width: 560px;
}

.app-footer__column h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #125f48;
}

.app-footer__column p {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4b675f;
}

.app-footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-attention {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(28,174,130,0.1);
  border: 1px solid rgba(28,174,130,0.28);
  box-shadow: 0 16px 30px rgba(12,82,60,0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 18px;
}

.footer-attention__badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0f6d55;
  background: rgba(28,174,130,0.15);
  border-radius: 999px;
  padding: 3px 10px;
}

.footer-attention a {
  color: #0f4f3e;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.footer-attention a:hover,
.footer-attention a:focus-visible {
  color: #1cae82;
}

.footer-attention__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(15,79,62,0.75);
}

.footer-onetoone__list {
  margin: 14px 0 18px;
  padding-left: 18px;
  list-style: disc;
  color: #3f6158;
  font-size: 12.5px;
  line-height: 1.6;
}

.footer-onetoone__list li {
  margin-bottom: 6px;
}

.app-footer__column a {
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
  transition: color 0.2s ease;
}

.app-footer__column a:hover,
.app-footer__column a:focus {
  color: #1cae82;
}

.app-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, rgba(28,174,130,0.9), rgba(55,227,159,0.95));
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-footer__cta:hover,
.app-footer__cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(28,174,130,0.18);
}

.app-footer__cta--outline {
  background: transparent;
  color: #1cae82;
  border: 1px solid rgba(28,174,130,0.35);
  box-shadow: none;
}

.app-footer__cta--outline:hover,
.app-footer__cta--outline:focus {
  background: rgba(28,174,130,0.08);
}

.app-footer__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: #4b675f;
}

.app-footer__list li {
  position: relative;
  padding-left: 16px;
}

.app-footer__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1cae82;
}

.app-footer__baseline {
  margin-top: clamp(24px, 5vw, 40px);
  padding: 18px clamp(12px, 3vw, 28px) 0;
  border-top: 1px solid rgba(28,174,130,0.12);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 4vw, 32px);
  font-size: 11.5px;
  color: #4b675f;
  width: 100%;
  max-width: var(--footer-max-width);
  margin-left: auto;
  margin-right: auto;
}

.app-footer__baseline span {
  flex: 1;
  text-align: left;
}

.app-footer__baseline a {
  color: inherit;
  text-decoration: none;
}

.app-footer__baseline a:hover,
.app-footer__baseline a:focus {
  color: #1cae82;
}

.app-footer__links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .app-footer__baseline {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 16px;
  }

  .app-footer__links {
    justify-content: flex-start;
  }
}

.app-footer,
.app-footer__baseline {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.footer-chat {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(16, 24, 20, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2147483600;
}

.footer-chat.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.footer-chat__panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 244, 0.98));
  border-radius: 20px;
  width: min(320px, 100%);
  padding: 24px 22px 18px;
  box-shadow: 0 28px 64px rgba(16, 48, 42, 0.22);
  border: 1px solid rgba(28, 174, 130, 0.22);
  position: relative;
  color: #1f4f44;
}

.footer-chat__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 174, 130, 0.12);
  color: #1f4f44;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-chat__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 640;
}

.footer-one-to-one .footer-chat__title {
  font-size: 15px;
  letter-spacing: 0.01em;
}

@media (min-width: 992px) {
  .footer-one-to-one .footer-chat__title {
    font-size: 18px;
    font-weight: 620;
  }
}

.footer-chat__copy {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(31, 79, 68, 0.8);
}

.footer-coaching-note {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(31, 79, 68, 0.8);
  font-style: italic;
  margin-top: 14px;
  margin-bottom: 22px;
}

@media (max-width: 768px) {
  .footer-chat__copy.footer-coaching-note {
    margin-bottom: 18px;
  }
}

.footer-chat__actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.footer-chat__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(28, 174, 130, 0.28);
  background: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #1cae82;
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}

.footer-chat__action:hover,
.footer-chat__action:focus {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(28, 174, 130, 0.16);
}

.footer-chat__action--ghost {
  background: transparent;
  border: 1px solid rgba(28,174,130,0.28);
  color: #0f6c54;
}

.footer-chat__action--ghost:hover,
.footer-chat__action--ghost:focus {
  box-shadow: 0 14px 26px rgba(23,118,91,0.18);
}

.footer-volunteer .footer-chat__panel {
  background: linear-gradient(170deg, rgba(248, 252, 250, 0.98), rgba(230, 247, 241, 0.98));
  border-color: rgba(28, 174, 130, 0.3);
  box-shadow:
    0 32px 68px rgba(16, 48, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.footer-volunteer__lead {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(23, 69, 56, 0.82);
}

.footer-volunteer__list {
  margin: 0 0 14px;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(23, 69, 56, 0.78);
}

.footer-volunteer__list li {
  list-style: disc;
}

.footer-volunteer__note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(23, 69, 56, 0.7);
}

.footer-volunteer__actions .footer-chat__action {
  background: linear-gradient(135deg, rgba(28, 174, 130, 0.12), rgba(55, 227, 159, 0.08));
  color: #157257;
  border-color: rgba(28, 174, 130, 0.32);
}

.footer-volunteer__actions .footer-chat__action:hover,
.footer-volunteer__actions .footer-chat__action:focus {
  box-shadow:
    0 18px 32px rgba(28, 174, 130, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.footer-dana .footer-chat__panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 244, 0.98));
  border-color: rgba(28, 174, 130, 0.24);
}

.footer-dana__image {
  width: 100%;
  max-height: 180px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: radial-gradient(circle at 50% 50%, rgba(28,174,130,0.08), rgba(22,150,110,0.02));
  border-radius: 16px;
  margin: 6px 0 14px;
  box-shadow: 0 16px 32px rgba(16, 48, 42, 0.18);
}

.footer-dana__copy {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(23, 69, 56, 0.82);
}

.footer-dana__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.footer-dana__button {
  background: linear-gradient(135deg, rgba(28, 174, 130, 0.18), rgba(55, 227, 159, 0.18));
  color: #155f49;
  border: 1px solid rgba(28, 174, 130, 0.3);
}

.footer-dana__button:hover,
.footer-dana__button:focus {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(28, 174, 130, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.footer-dana__link {
  color: #1cae82;
}

.footer-privacy .footer-chat__panel,
.footer-terms .footer-chat__panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(28, 174, 130, 0.18);
}

.footer-privacy__copy {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(23, 69, 56, 0.82);
}

.footer-privacy__list {
  margin: 0 0 12px 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(23, 69, 56, 0.78);
}

.footer-privacy__list li {
  list-style: disc;
}

.footer-privacy__note {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(23, 69, 56, 0.75);
}

.footer-terms__body {
  display: grid;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(23, 69, 56, 0.8);
}

.footer-terms__quote {
  display: inline-block;
  font-style: italic;
  color: #157257;
}

.footer-terms__signature {
  margin: 0;
  font-weight: 600;
  color: #157257;
}

@media (max-width: 480px) {
  .footer-volunteer__list {
    padding-left: 14px;
    font-size: 12px;
  }

  .footer-volunteer__note {
    font-size: 11.5px;
  }

  .footer-dana__image {
    max-height: 150px;
  }

  .footer-dana__actions {
    grid-template-columns: 1fr;
  }

  .footer-privacy__list {
    margin-left: 16px;
  }
}

.app-footer__signature {
  display: flex;
  justify-content: center;
  margin: 24px auto 0;
  max-width: var(--footer-max-width);
  padding: 0 clamp(18px, 3vw, 28px);
}

.app-footer__signature-icon {
  width: clamp(120px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(16, 48, 42, 0.18));
}

@media (max-width: 720px) {
  .course-part-card__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .course-part-card {
    padding: 18px 16px;
  }

  .course-part-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .course-part-card__badge {
    align-self: flex-start;
  }

  .app-footer__columns {
    gap: 24px;
  }
}

@media (min-width: 768px) {
  .app-footer__inner {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(42px, 6vw, 72px);
  }

  .app-footer__brand {
    flex: 0 1 420px;
    max-width: 460px;
  }

  .app-footer__columns {
    flex: 0 1 420px;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: clamp(24px, 3vw, 40px);
    max-width: none;
  }

  .app-footer__baseline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .course-parts__summary {
    padding: 12px 16px;
    font-size: 12px;
  }

  .course-part-card__name {
    font-size: 14px;
  }

  .course-part-card__seo-description {
    font-size: 11px;
  }

  .app-footer__brand p {
    font-size: 12.5px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  body #rightMenuDrawer.header-actions {
    gap: 16px !important;
    padding-bottom: 36px !important;
  }

  body #rightMenuDrawer.header-actions #inMenuLangWrapper {
    position: static !important;
    transform: none !important;
    margin-top: 8px !important;
  }

  body #rightMenuDrawer.header-actions #inMenuLangWrapper .lang-flag-trigger {
    margin-top: 0 !important;
  }
}


/* Course fit section */
.course-fit {
  width: 100%;
  /* Reduce bottom padding so visual gap to About matches About ↔ 5-Part spacing */
  padding: clamp(36px, 6vw, 64px) 16px clamp(8px, 2vw, 16px) 16px;
  margin: 0 auto;
}

.course-fit__inner {
  max-width: var(--tab-content-max-width, 560px);
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(18,126,99,0.14);
  background: linear-gradient(155deg, rgba(255,255,255,0.94), rgba(235,247,241,0.8));
  box-shadow: 0 18px 42px rgba(14,87,65,0.12);
  padding: clamp(24px, 4.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.8vw, 22px);
}

.course-fit__eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(28,174,130,0.16);
  color: #0a7156;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.course-fit__title {
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
  font-weight: var(--weight-medium);
  color: #0d6f58;
  margin: 10px 0 4px;
  letter-spacing: -0.02em;
  line-height: var(--line-height-snug);
}

.course-fit__subtitle {
  margin: 0;
  max-width: 520px;
  color: #3f6d63;
  font-size: clamp(0.75rem, 0.72rem + 0.18vw, 0.95rem);
  line-height: var(--line-height-body);
  font-weight: var(--weight-regular);
}

.course-fit__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4.5vw, 28px);
}

.course-fit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.6vw, 18px);
}

.course-fit__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(245, 252, 249, 0.94);
  border: 1px solid rgba(18,126,99,0.09);
  box-shadow: 0 12px 26px rgba(15,82,62,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.course-fit__feature:hover,
.course-fit__feature:focus-within {
  transform: translateY(-2px);
  border-color: rgba(28,174,130,0.18);
  box-shadow: 0 18px 36px rgba(14,87,65,0.15);
}

.course-fit__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(20,118,94,0.16), rgba(255,255,255,0.95));
  border: 1px solid rgba(18,126,99,0.18);
  display: grid;
  place-items: center;
  color: #0d6f58;
  flex-shrink: 0;
  font-size: 16px;
  box-shadow: 0 12px 24px rgba(12,82,60,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

.course-fit__icon-img {
  width: 22px;
  height: 22px;
  display: block;
}

.course-fit__copy h3 {
  margin: 0 0 4px;
  font-size: calc(var(--font-size-card-title) - 1.2px);
  font-weight: var(--weight-medium);
  color: #145b48;
  letter-spacing: -0.01em;
  line-height: var(--line-height-snug);
}

.course-fit__copy p {
  margin: 0;
  font-size: calc(var(--font-size-small) - 0.5px);
  line-height: var(--line-height-body);
  color: #3f6e63;
}

.course-fit__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 32px);
  padding: clamp(20px, 4vw, 28px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(28,174,130,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.course-fit__relief h3,
.course-fit__facts h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #168463;
}

.course-fit__relief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.course-fit__relief-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(28,174,130,0.07);
  color: #0f6e56;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.course-fit__relief-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11,93,70,0.12);
  display: grid;
  place-items: center;
  color: #0a7156;
  flex-shrink: 0;
}

.course-fit__relief-icon svg {
  width: 16px;
  height: 16px;
}

.course-fit__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.course-fit__fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

    .course-fit__fact-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(140deg, rgba(20,118,94,0.05), rgba(255,255,255,0.98));
      border: 1px solid rgba(18,126,99,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(28, 174, 130, 0.65);
      flex-shrink: 0;
      font-size: 14px;
      box-shadow: 0 6px 14px rgba(15,82,62,0.06), inset 0 1px 0 rgba(255,255,255,0.75);
      transition: all 0.3s ease;
    }

    .course-fit__fact-icon svg,
    .course-fit__fact-icon i {
      width: 15px;
      height: 15px;
      display: block;
    }

    .course-fit__fact-icon--telomere i {
      transform: translateX(2.5px);
    }

    .course-fit__fact-copy h4 {
      margin: 0 0 4px;
      font-size: calc(var(--font-size-card-title) - 0.8px);
      font-weight: var(--weight-medium);
      color: #145b48;
      line-height: var(--line-height-snug);
    }

    .course-fit__fact-copy p {
      margin: 0;
      font-size: calc(var(--font-size-small) - 0.4px);
      line-height: var(--line-height-body);
      color: #3f6e63;
    }

@media (max-width: 640px) {
  .course-fit__feature {
    padding: 12px 14px;
  }

  .course-fit__relief-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-fit__aside {
    padding: 18px;
  }

  .course-fit__fact-copy h4 {
    font-size: calc(var(--font-size-card-title) - 1.6px);
  }

  .course-fit__fact-copy p {
    font-size: calc(var(--font-size-small) - 0.8px);
  }
}

.vipassana-faq__title {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #1cae82;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Notification animations */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

@media (min-width: 769px) {
  #mobileMenuBackdrop {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
@media (max-width: 640px) {
  .track-title {
    font-size: calc(var(--font-size-small) - 0.7px);
  }
}
.profile-subscribe-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-subscribe-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1cae82;
  font-weight: 600;
}
.profile-subscribe-card__badge {
  background: rgba(28,174,130,0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.4px;
  color: #1a7d61;
}
.profile-subscribe-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(28,174,130,0.4);
  display: inline-block;
}
.profile-subscribe-card__fields {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px;
  align-items: center;
}
.profile-subscribe-card__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(28,174,130,0.12);
  color: #1cae82;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-subscribe-card__input {
  flex: 1;
  border: 1px solid rgba(28,174,130,0.2);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 7.2px;
  font-family: 'Sora', sans-serif;
  background: rgba(255,255,255,0.99);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-subscribe-card__input:focus {
  border-color: #1cae82;
  box-shadow: 0 0 0 1px rgba(28,174,130,0.15);
  outline: none;
}
.profile-subscribe-card__input::placeholder {
  font-size: 7.2px;
  color: #6f827b;
}
.profile-subscribe-card__button {
  border-radius: 999px;
  padding: 5px 10px;
  border: none;
  background: linear-gradient(135deg,#1cae82 0%,#37e39f 100%);
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Sora', sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 92px;
}
.profile-subscribe-card__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(28,174,130,0.2);
}
.profile-subscribe-card__button svg {
  width: 8.5px;
  height: 8.5px;
}
.profile-subscribe-card .subscription-feedback {
  margin-top: 0;
  font-size: 7.5px;
}
.profile-subscribe-card .subscription-feedback[data-state="success"] {
  color: #1cae82;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-subscribe-card .subscription-feedback[data-state="success"]::before {
  content: '✓';
  font-size: 8px;
}
.profile-subscribe-card .subscription-feedback:empty {
  display: none;
}
.profile-subscribe-note {
  margin-top: 0;
  font-size: 7.5px;
  color: #6c827b;
}
.account-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #1cae82;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 20;
}

#authModal[data-loading="1"] .account-modal-loading {
  opacity: 1;
}

.account-modal-loading__orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(28,174,130,0.3);
  border-top-color: #1cae82;
  animation: accountModalSpin 1.6s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.account-modal-loading__spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1cae82;
  box-shadow: 0 0 12px rgba(28,174,130,0.45);
  animation: accountModalPulse 1.4s ease-in-out infinite;
  display: inline-block;
}

.account-modal-loading__text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: 'Sora', sans-serif;
  color: #2e665d;
  text-transform: uppercase;
}

.account-modal-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  margin-right: -10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(28,174,130,0.55) transparent;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
#authModal .account-modal-scroll {
  max-height: calc(80vh - 96px);
  flex: 1;
  min-height: 0;
}
}

#authModal .account-modal-scroll::-webkit-scrollbar {
  width: 6px;
}

#authModal .account-modal-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin: 32px 0 16px;
}

#authModal .account-modal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(28,174,130,0.75), rgba(55,227,159,0.75));
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 6px 18px rgba(28,174,130,0.35);
}

#authModal .account-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(28,174,130,0.9), rgba(55,227,159,0.9));
}

@keyframes accountModalSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes accountModalPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.account-share-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 4px;
}
.account-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 8.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 82px;
}
.account-share-button svg {
  width: 9px;
  height: 9px;
}
.account-share-button:hover {
  transform: translateY(-1px);
}
.account-share-button--primary {
  background: linear-gradient(135deg,#1cae82 0%,#37e39f 100%);
  color: #fff;
  box-shadow: 0 2px 5px rgba(28,174,130,0.22);
}
.account-share-button--secondary {
  background: rgba(248,252,250,0.75);
  color: #1cae82;
  border: 1px solid rgba(28,174,130,0.18);
  box-shadow: 0 1px 3px rgba(28,174,130,0.08);
}
@media (max-width: 640px) {
  .account-share-actions {
    gap: 4px;
  }
  .account-share-button {
    padding: 4px 7px;
    font-size: 8px;
    min-width: 70px;
  }
}
.profile-subscribe-card {
  margin: 6px 0 18px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(28,174,130,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(241,249,245,0.94));
  box-shadow: 0 6px 16px rgba(28,174,130,0.06);
  min-width: 260px;
}
.course-overview-anchor {
  scroll-margin-top: 160px;
}

@media (max-width: 540px) {
  /* Tighten spacing and sizing for course parts cards */
  .course-parts .part-card {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .course-parts .part-card__meta {
    gap: 6px;
  }
  .course-parts .part-card__title {
    font-size: 13px;
    line-height: 1.25;
  }
  .course-parts .part-card__subtitle {
    font-size: 10.5px;
    margin-top: 2px;
  }
  .course-parts .part-card__description {
    font-size: 10.5px;
    line-height: 1.48;
  }
  .course-parts .part-card__badge {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .course-parts .part-card__duration {
    font-size: 10.5px;
  }
  .course-parts .part-card__label {
    padding: 4px 8px;
    font-size: 9.5px;
  }
  .course-parts .part-card__cta {
    font-size: 10.5px;
    padding: 6px 9px;
  }
  .course-parts .part-card__footer {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .course-parts {
    padding: 0 12px;
    margin: 26px auto 22px;
  }
  .course-parts__details {
    border-radius: 16px;
    margin-bottom: 18px;
  }
  .course-parts__summary {
    padding: 12px 14px;
    font-size: 11px;
    gap: 8px;
  }
  .course-parts__summary::before {
    width: 12px;
    height: 12px;
  }
  .course-parts__content {
    padding: 12px;
  }
  .course-part-card {
    border-radius: 14px;
    padding: 11px;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(28,174,130,0.08);
  }
  .course-part-card__header {
    gap: 8px;
  }
  .course-part-card__identity {
    gap: 8px;
  }
  .course-part-card__index {
    width: 28px;
    height: 28px;
    font-size: 11.5px;
  }
  .course-part-card__name {
    font-size: 13.2px;
    line-height: 1.28;
  }
  .course-part-card__duration {
    font-size: 10.5px;
  }
  .course-part-card__description {
    font-size: 10.4px;
    line-height: 1.46;
  }
  .course-part-card__seo-title {
    font-size: 11px;
    margin: 8px 0 6px;
    padding-top: 8px;
  }
  .course-part-card__seo-description {
    font-size: 10.2px;
    line-height: 1.52;
  }
}

@media (max-width: 400px) {
  .course-parts__summary {
    font-size: 10.2px;
  }
  .course-part-card {
    padding: 10px;
    border-radius: 12px;
  }
  .course-part-card__index {
    width: 26px;
    height: 26px;
    font-size: 10.5px;
  }
  .course-part-card__name {
    font-size: 12.6px;
  }
  .course-part-card__description {
    font-size: 10.2px;
  }
  .course-part-card__seo-title {
    font-size: 10.6px;
  }
  .course-part-card__seo-description {
    font-size: 9.8px;
  }
}