/**
 * TUNEX Music Platform - Production Stylesheet
 * Architecture & Design: Zennorv
 * Zero Emojis • Pure Flat Black Mode
 */

* {
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
    }

    /* NATIVE APP FEEL: PREVENT ACCIDENTAL TEXT SELECTION HIGHLIGHTS ON APP UI */
    body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    /* ALLOW SELECTION ONLY IN FORM INPUTS */
    input,
    textarea,
    [contenteditable="true"] {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
    }

    /* SUBTLE, NON-INTRUSIVE SELECTION COLOR FOR INPUTS */
    ::selection {
      background-color: rgba(199, 233, 56, 0.25) !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    ::-moz-selection {
      background-color: rgba(199, 233, 56, 0.25) !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    /* STRICT SINGLE TEXT COLOR: ALL TEXT IS UNIFORMLY #FFFFFF EXCEPT ON NEON LIME AND PRELOADER */
    body :not(#loader):not(#loader *):not(.neon-lime-badge):not(.neon-lime-badge *):not(.cta-btn):not(.cta-btn *):not(.badge-lime):not(.badge-lime *):not(.bg-\[\#c7e938\]):not(.bg-\[\#c7e938\] *):not(.play-btn-lime):not(.play-btn-lime *):not(#expPlayBtn):not(#expPlayBtn *),
    body {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    /* STRICT BLACK TEXT AND ICONS ON ANY SOLID NEON LIME BACKGROUND (#000000) */
    .bg-\[\#c7e938\],
    .bg-\[\#c7e938\] *,
    [class*="bg-[#c7e938]"],
    [class*="bg-[#c7e938]"] *,
    .badge-lime,
    .badge-lime *,
    .neon-lime-badge,
    .neon-lime-badge *,
    .cta-btn,
    .cta-btn *,
    .play-btn-lime,
    .play-btn-lime *,
    button[class*="bg-[#c7e938]"],
    button[class*="bg-[#c7e938]"] *,
    #expPlayBtn,
    #expPlayBtn * {
      color: #000000 !important;
      -webkit-text-fill-color: #000000 !important;
    }

    .bg-\[\#c7e938\] svg:not([fill="none"]),
    .bg-\[\#c7e938\] svg:not([fill="none"]) path,
    [class*="bg-[#c7e938]"] svg:not([fill="none"]),
    [class*="bg-[#c7e938]"] svg:not([fill="none"]) path,
    .badge-lime svg:not([fill="none"]),
    .badge-lime svg:not([fill="none"]) path,
    .cta-btn svg,
    .cta-btn svg path,
    .play-btn-lime svg,
    .play-btn-lime svg path,
    .play-btn-lime svg rect,
    #expPlayBtn svg,
    #expPlayBtn svg path,
    #expPlayIcon,
    #expPlayIcon path,
    #expPauseIcon,
    #expPauseIcon path {
      fill: #000000 !important;
      color: #000000 !important;
    }

    /* ACTIVE PLAYING TRACK BUTTON (STOP STATE WITH ACCENT FEEDBACK) */
    .play-btn-lime.is-track-playing {
      background-color: #d9f948 !important;
      transform: scale(1.06);
    }

    /* BLACK MODE: PURE FLAT DESIGN WITH ZERO SHADOWS & ZERO GLOW */
    body *,
    body *::before,
    body *::after {
      box-shadow: none !important;
      text-shadow: none !important;
    }

    /* ALL ICONS STAY CRISP WHITE (#ffffff) ACROSS THE APP EXCEPT ON NEON LIME */
    body svg.stroke-white {
      stroke: #ffffff !important;
    }
    body svg.fill-white:not(.play-btn-lime *):not([class*="bg-[#c7e938]"] *):not(#playPauseBtn *) {
      fill: #ffffff !important;
    }

    /* BOTTOM NAVBAR TABS: TEXT COLOR FOLLOWS ICON COLOR */
    /* INACTIVE TABS: ICON IS WHITE (#ffffff), TEXT IS WHITE (#ffffff) */
    .nav-tab:not(.active) {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 0.8;
      transition: all 0.2s ease;
    }
    .nav-tab:not(.active):hover {
      opacity: 1;
    }
    .nav-tab:not(.active) span {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    /* ACTIVE TAB: ROUND SOLID NEON LIME BADGE (PURE FLAT, ZERO SHADOW) */
    /* ACTIVE TAB: ICON IS DARK (#0c0d10), TEXT IS DARK (#0c0d10) */
    .nav-tab.active.neon-lime-badge {
      background-color: transparent !important;
      box-shadow: none !important;
      color: #0c0d10 !important;
      -webkit-text-fill-color: #0c0d10 !important;
      opacity: 1 !important;
    }
    .nav-tab.active.neon-lime-badge span {
      color: #0c0d10 !important;
      -webkit-text-fill-color: #0c0d10 !important;
      font-weight: 800;
    }

    /* NAV-TAB ICONS: FIX BUG JADI BULET (PREVENT UNWANTED FILL ON COMPASS & STROKE ICONS) */
    .nav-tab svg {
      transition: transform 0.2s ease;
    }
    .nav-tab svg[fill="none"] {
      fill: none !important;
    }
    .nav-tab svg circle {
      fill: none !important;
      stroke: currentColor !important;
    }
    .nav-tab svg polygon {
      fill: currentColor !important;
      stroke: none !important;
    }
    .nav-tab svg path {
      stroke: currentColor;
    }
    .nav-tab:not(.active) svg {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }
    .nav-tab:not(.active) svg.fill-current {
      fill: #ffffff !important;
      stroke: none !important;
    }
    .nav-tab:not(.active) svg.fill-current path {
      fill: #ffffff !important;
      stroke: none !important;
    }
    .nav-tab.active svg {
      color: #0c0d10 !important;
      stroke: #0c0d10 !important;
    }
    .nav-tab.active svg.fill-current {
      fill: #0c0d10 !important;
      stroke: none !important;
    }
    .nav-tab.active svg.fill-current path {
      fill: #0c0d10 !important;
      stroke: none !important;
    }

    /* EXPLORE FILTER CHIPS: PREVENT FILL BUGS ON STROKED SVG CHIPS & ELIMINATE WHITE BORDER / OUTLINE */
    .explore-chip,
    .explore-chip:focus,
    .explore-chip:focus-visible,
    .explore-chip:active,
    .explore-chip:hover {
      outline: none !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }
    .explore-chip.bg-\[\#c7e938\],
    .explore-chip.badge-lime,
    .explore-chip[class*="bg-[#c7e938]"] {
      border: 1px solid #c7e938 !important;
      border-color: #c7e938 !important;
      outline: none !important;
    }
    .explore-chip:not(.badge-lime):not(.bg-\[\#c7e938\]) {
      border: 1px solid #20222d !important;
      border-color: #20222d !important;
      outline: none !important;
    }
    .explore-chip svg[fill="none"] {
      fill: none !important;
      stroke: currentColor !important;
    }
    .explore-chip svg[fill="none"] path {
      fill: none !important;
      stroke: currentColor !important;
    }
    .explore-chip.badge-lime svg[fill="none"],
    .explore-chip[class*="bg-[#c7e938]"] svg[fill="none"] {
      fill: none !important;
      stroke: #000000 !important;
    }
    .explore-chip.badge-lime svg[fill="none"] path,
    .explore-chip[class*="bg-[#c7e938]"] svg[fill="none"] path {
      fill: none !important;
      stroke: #000000 !important;
    }

    /* SLIDING NEON LIME INDICATOR (BUTTER-SMOOTH FLUID GLIDE) */
    #navIndicator {
      background-color: #c7e938 !important;
      box-shadow: 0 2px 10px rgba(199, 233, 56, 0.25) !important;
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 0;
      border-radius: 1rem;
      pointer-events: none;
      z-index: 0;
      will-change: transform, width;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* NAV-TAB BUTTON & ICON INTERACTIONS (FLUID & TACTILE) */
    .nav-tab {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent !important;
      outline: none !important;
      transition: transform 0.15s ease, opacity 0.2s ease;
    }
    .nav-tab:active {
      transform: scale(0.93);
    }
    .nav-tab svg {
      transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
      transform-origin: center center;
    }
    .nav-tab.active svg {
      transform: scale(1.08);
    }
    .nav-tab span {
      transition: color 0.2s ease, font-weight 0.2s ease;
    }

    /* THEME TOGGLE (ZERO NEON BORDERS, SMOOTH CELESTIAL ANIMATION) */
    #themeToggleBtn {
      outline: none !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }
    #themeToggleBtn:focus, #themeToggleBtn:active, #themeToggleBtn:hover,
    #hamburgerBtn:focus, #hamburgerBtn:active, #hamburgerBtn:hover {
      outline: none !important;
      box-shadow: none !important;
      border-color: #262836 !important;
    }
    .theme-btn-pop {
      animation: themePop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    @keyframes themePop {
      0% { transform: scale(0.9); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    /* JELAJAHI MUSIK CTA BUTTON: SOLID BLACK TEXT & ICON (#000000) */
    .cta-btn,
    .cta-btn span,
    .cta-btn * {
      color: #000000 !important;
      -webkit-text-fill-color: #000000 !important;
    }
    .cta-btn svg,
    .cta-btn svg path {
      fill: #000000 !important;
    }

    /* SMOOTH TRANSLUCENT BOTTOM NAVBAR WITH SUBTLE BLUR */
    .nav-translucent {
      background-color: rgba(16, 17, 24, 0.82) !important;
      backdrop-filter: blur(14px) saturate(170%) !important;
      -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    }

    .player-translucent {
      background-color: rgba(18, 19, 27, 0.94) !important;
      backdrop-filter: blur(24px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
      border: 1px solid #262836 !important;
    }

    /* PREVENT NEON LIME BORDER ON CLICK / FOCUS / ACTIVE / HOVER FOR EXPLORE GENRE CARDS & GENERIC CARDS */
    #exploreGenreGrid .card-box,
    #exploreGenreGrid .card-box:hover,
    #exploreGenreGrid .card-box:focus,
    #exploreGenreGrid .card-box:active,
    #exploreGenreGrid .card-box:focus-visible,
    .card-box:focus,
    .card-box:active,
    .card-box:focus-visible {
      border-color: #20222d !important;
      outline: none !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }



    body {
      background-color: #050608;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      transition: background-color 0.3s ease;
    }

    /* Hide scrollbars but keep smooth scroll */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* =======================================================
       ELEGANT SMOOTH OPENING ANIMATIONS (VISITOR ENTRANCE)
       ======================================================= */
    :root {
      --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    /* Ambient opening glow at top of viewport */
    .opening-aurora {
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      height: 140px;
      background: radial-gradient(circle, rgba(199, 233, 56, 0.16) 0%, rgba(199, 233, 56, 0.04) 45%, transparent 70%);
      filter: blur(28px);
      pointer-events: none;
      z-index: 35;
      animation: auroraReveal 1.3s var(--ease-elegant) both;
    }

    @keyframes auroraReveal {
      0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
      50% { opacity: 0.9; transform: translateX(-50%) scale(1.1); }
      100% { opacity: 0.45; transform: translateX(-50%) scale(1); }
    }

    /* 1. Header Smooth Entrance */
    .header-reveal {
      animation: headerSlideIn 0.75s var(--ease-elegant) both;
    }

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

    /* 2. Logo Icon: Transparent, Zero Border, Zero Neon Lime Outlines */
    #headerLogoBtn,
    #headerLogoBtn *,
    img.app-logo {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
      -webkit-tap-highlight-color: transparent !important;
    }
    #headerLogoBtn:focus,
    #headerLogoBtn:active,
    #headerLogoBtn:hover,
    img.app-logo:focus,
    img.app-logo:active,
    img.app-logo:hover {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    img.app-logo {
      animation: logoIntroSmooth 0.9s var(--ease-elegant) 0.05s both;
      transform-origin: center center;
      width: 32px !important;
      height: 32px !important;
    }

    @keyframes logoIntroSmooth {
      0% {
        opacity: 0;
        transform: scale(0.82) rotate(-8deg);
      }
      60% {
        opacity: 1;
        transform: scale(1.05) rotate(1deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    /* Logo ambient glow entrance */
    .logo-ambient-glow {
      animation: glowIntro 1.1s var(--ease-elegant) 0.05s both;
    }

    @keyframes glowIntro {
      0% { opacity: 0; transform: scale(0.5); }
      50% { opacity: 0.85; transform: scale(1.25); }
      100% { opacity: 0.35; transform: scale(1); }
    }

    /* 3. TUNEX Brand Text Smooth Slide & Tracking Entrance */
    .brand-text {
      animation: brandTextIntro 0.85s var(--ease-elegant) 0.1s both;
      display: inline-block;
    }

    @keyframes brandTextIntro {
      0% {
        opacity: 0;
        transform: translateX(-10px);
        letter-spacing: 0.22em;
      }
      100% {
        opacity: 1;
        transform: translateX(0);
        letter-spacing: 0.05em; /* tracking-wider */
      }
    }

    /* 4. Theme Button Entrance */
    .theme-btn-reveal {
      animation: themeBtnIntro 0.75s var(--ease-elegant) 0.15s both;
    }

    @keyframes themeBtnIntro {
      0% {
        opacity: 0;
        transform: scale(0.8) rotate(20deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    /* 5. Hero Banner Smooth Entrance & Responsive Proportions */
    .hero-reveal {
      animation: heroBannerIntro 0.85s var(--ease-elegant) 0.1s both;
    }

    .hero-banner-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      user-select: none;
    }

    @media (min-width: 768px) {
      .hero-banner-wrap {
        aspect-ratio: 21 / 9;
        max-height: 360px;
      }
    }

    @media (min-width: 1024px) {
      .hero-banner-wrap {
        aspect-ratio: 2.4 / 1;
        max-height: 400px;
      }
    }

    @keyframes heroBannerIntro {
      0% {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .hero-content-reveal {
      animation: heroContentIntro 0.9s var(--ease-elegant) 0.22s both;
    }

    @keyframes heroContentIntro {
      0% {
        opacity: 0;
        transform: translateY(16px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 6. Section 1 (Musik Unggulan) Cascade */
    .section-reveal-1 {
      animation: sectionFadeUp 0.8s var(--ease-elegant) 0.25s both;
    }

    /* 7. Section 2 (Terakhir Diputar) Cascade */
    .section-reveal-2 {
      animation: sectionFadeUp 0.8s var(--ease-elegant) 0.38s both;
    }

    /* 8. Section 3 (Trending Music) Cascade */
    .section-reveal-3 {
      animation: sectionFadeUp 0.8s var(--ease-elegant) 0.48s both;
    }

    /* 9. Section 4 (Artis Populer) Cascade */
    .section-reveal-4 {
      animation: sectionFadeUp 0.8s var(--ease-elegant) 0.58s both;
    }

    @keyframes sectionFadeUp {
      0% {
        opacity: 0;
        transform: translateY(18px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 10. Bottom Navigation Dock Smooth Float-in (Fixed to Viewport Bottom - Responsive) */
    .dock-reveal {
      position: fixed !important;
      bottom: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 100% !important;
      max-width: 480px;
      z-index: 50 !important;
      pointer-events: none;
      animation: dockFloatIn 0.85s var(--ease-elegant) 0.28s both;
      transition: max-width 0.3s ease;
    }

    @media (min-width: 768px) {
      .dock-reveal {
        max-width: 48rem !important; /* 768px (max-w-3xl) */
      }
    }

    @media (min-width: 1024px) {
      .dock-reveal {
        max-width: 64rem !important; /* 1024px (max-w-5xl) */
      }
    }

    @media (min-width: 1280px) {
      .dock-reveal {
        max-width: 72rem !important; /* 1152px (max-w-6xl) */
      }
    }

    @keyframes dockFloatIn {
      0% {
        opacity: 0;
        transform: translate(-50%, 32px);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    /* Interactive Logo Replay Animations */
    .logo-pulse-anim {
      animation: logoIntroSmooth 0.75s var(--ease-elegant) both !important;
    }
    .glow-pulse-anim {
      animation: glowIntro 0.85s var(--ease-elegant) both !important;
    }


    /* Reduced Motion Respect */
    @media (prefers-reduced-motion: reduce) {
      .header-reveal,
      .logo-wrapper img.app-logo,
      .logo-ambient-glow,
      .brand-text,
      .theme-btn-reveal,
      .hero-reveal,
      .hero-content-reveal,
      .section-reveal-1,
      .section-reveal-2,
      .section-reveal-3,
      .section-reveal-4,
      .opening-aurora {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .dock-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: translateX(-50%) !important;
      }
    }

    /* =======================================================
       PAGE & TAB TRANSITIONS: EXPLORE, SEARCH, LIBRARY
       ======================================================= */
    .view-enter-anim {
      animation: viewSlideIn 0.38s var(--ease-elegant) both;
    }

    @keyframes viewSlideIn {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* -------------------------------------------------------
       EXPLORE VIEW ANIMATIONS
       ------------------------------------------------------- */
    /* Cascading Section Entrances */
    #exploreView.view-enter-anim section:nth-of-type(1) {
      animation: exploreSectionCascade 0.45s var(--ease-elegant) 0.03s both;
    }
    #exploreView.view-enter-anim section:nth-of-type(2) {
      animation: exploreSectionCascade 0.45s var(--ease-elegant) 0.12s both;
    }
    #exploreView.view-enter-anim section:nth-of-type(3) {
      animation: exploreSectionCascade 0.45s var(--ease-elegant) 0.18s both;
    }
    #exploreView.view-enter-anim section:nth-of-type(4) {
      animation: exploreSectionCascade 0.45s var(--ease-elegant) 0.24s both;
    }

    @keyframes exploreSectionCascade {
      0% {
        opacity: 0;
        transform: translateY(14px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Staggered Pop for 8 Genre Cards in Grid */
    #exploreView.view-enter-anim .explore-genre-card:nth-child(1) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.06s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(2) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.09s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(3) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.12s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(4) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.15s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(5) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.18s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(6) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.21s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(7) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.24s both; }
    #exploreView.view-enter-anim .explore-genre-card:nth-child(8) { animation: genreCardPopIn 0.42s var(--ease-elegant) 0.27s both; }

    @keyframes genreCardPopIn {
      0% {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Genre Card Interactive Hover & Active Feedback */
    .explore-genre-card {
      transition: transform 0.22s var(--ease-elegant), border-color 0.22s ease, background-color 0.22s ease;
      cursor: pointer;
    }
    .explore-genre-card:hover {
      transform: translateY(-2px);
      border-color: rgba(199, 233, 56, 0.45) !important;
      background-color: #171822 !important;
    }
    .explore-genre-card:active {
      transform: scale(0.95);
    }

    /* Filter Card Reflow Animation */
    .card-filter-anim {
      animation: cardFilterReveal 0.3s var(--ease-elegant) both !important;
    }

    @keyframes cardFilterReveal {
      0% {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Interactive Chip Select Bounce */
    @keyframes chipBounceAnimation {
      0% { transform: scale(1); }
      35% { transform: scale(0.91); }
      70% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    .chip-select-bounce {
      animation: chipBounceAnimation 0.34s var(--ease-spring) both !important;
    }

    /* -------------------------------------------------------
       SEARCH VIEW ANIMATIONS
       ------------------------------------------------------- */
    /* Cascading Search View Blocks */
    #searchView.view-enter-anim > div:nth-child(1) {
      animation: searchBlockFadeUp 0.4s var(--ease-elegant) 0.03s both;
    }
    #searchView.view-enter-anim > .search-input-box,
    #searchView.view-enter-anim > div:nth-child(2) {
      animation: searchBlockFadeUp 0.42s var(--ease-elegant) 0.08s both;
    }
    #searchView.view-enter-anim > div:nth-child(3) {
      animation: searchBlockFadeUp 0.42s var(--ease-elegant) 0.13s both;
    }
    #searchView.view-enter-anim > #searchHistorySection {
      animation: searchBlockFadeUp 0.42s var(--ease-elegant) 0.18s both;
    }
    #searchView.view-enter-anim > div:nth-child(5) {
      animation: searchBlockFadeUp 0.42s var(--ease-elegant) 0.22s both;
    }
    #searchView.view-enter-anim > #mainSearchResultsList {
      animation: searchBlockFadeUp 0.45s var(--ease-elegant) 0.26s both;
    }

    @keyframes searchBlockFadeUp {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Search Input Focus Highlight */
    .search-input-box {
      transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
    }
    .search-input-box:focus-within {
      border-color: #c7e938 !important;
      background-color: #161722 !important;
      transform: translateY(-1px);
    }

    /* History Chips Staggered Pop Animation */
    @keyframes historyChipPopIn {
      0% {
        opacity: 0;
        transform: scale(0.88) translateY(6px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    .history-chip-anim {
      animation: historyChipPopIn 0.3s var(--ease-spring) both;
    }

    /* Dynamic Search Results Item Cascading In */
    @keyframes searchResultItemIn {
      0% {
        opacity: 0;
        transform: translateY(10px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .search-result-item {
      animation: searchResultItemIn 0.32s var(--ease-elegant) both;
    }

    /* -------------------------------------------------------
       LIBRARY VIEW ANIMATIONS & CLEAN LAYOUT
       ------------------------------------------------------- */
    /* Library Header & Tabs Smooth Entrance */
    #libraryView.view-enter-anim > div:nth-child(1) {
      animation: libHeaderFadeIn 0.35s var(--ease-elegant) both;
    }
    #libraryView.view-enter-anim > div:nth-child(2) {
      animation: libHeaderFadeIn 0.35s var(--ease-elegant) 0.05s both;
    }

    @keyframes libHeaderFadeIn {
      0% {
        opacity: 0;
        transform: translateY(8px);
      }
      100% {
        opacity: 1;
        transform: none;
      }
    }

    /* Sub-Tab Filter Section Switch Smooth Fade (Zero transforms to prevent layout overlapping) */
    .lib-section-anim {
      animation: libSectionFilterIn 0.25s ease-out both !important;
    }

    @keyframes libSectionFilterIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* Library Content Sections Guarantee Natural Flow & Clean Spacing */
    #libSectionLiked,
    #libSectionPlaylists,
    #libSectionAlbums,
    #libSectionArtists {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
      position: relative;
    }

    /* Liked Songs Hero Card Micro-Interactions */
    .liked-hero-card {
      transition: transform 0.25s var(--ease-elegant), border-color 0.25s ease, background-color 0.25s ease;
    }
    .liked-hero-card:hover {
      transform: translateY(-2px);
      border-color: rgba(199, 233, 56, 0.6) !important;
      background-color: #161822 !important;
    }
    .liked-hero-card:hover .liked-heart-badge {
      transform: scale(1.08) rotate(-4deg);
    }
    .liked-heart-badge {
      transition: transform 0.3s var(--ease-spring);
    }

    /* User Playlist Item Dynamic In Animation */
    @keyframes playlistItemIn {
      0% {
        opacity: 0;
        transform: translateY(8px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .playlist-item-anim {
      animation: playlistItemIn 0.3s var(--ease-elegant) both;
    }
/* =======================================================
   NEW MODALS & INTERACTIVE FEATURES STYLING
   (Expanded Player, Lyrics, Queue, Artist Page, Modals)
   ======================================================= */

.modal-slide-up {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

.modal-slide-up.hidden-modal {
  display: none !important;
  transform: translateY(100%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.modal-slide-up.visible-modal {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  animation: modalSlideUpIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-slide-up.modal-closing {
  animation: modalSlideDownOut 0.25s cubic-bezier(0.7, 0, 0.84, 0) both !important;
  pointer-events: none !important;
}

/* ========================================================
   SYNCHRONIZED LYRICS (Clean & Minimal Design)
   ======================================================== */
.lyrics-container {
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.lyrics-ambient-glow {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.lyric-line {
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0.35;
  color: rgba(255, 255, 255, 0.4);
  transform: scale(0.96);
  cursor: pointer;
  position: relative;
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
}

.lyric-line:hover {
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.04);
}

.lyric-line.active {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.lyric-line.active .lyric-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

.lyric-line.passed {
  opacity: 0.45;
  color: rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

/* Quick-Seek Capsule Buttons */
.seek-pill-btn {
  color: #ffffff !important;
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}
.seek-pill-btn svg {
  fill: currentColor;
}
.seek-pill-btn:hover,
.seek-pill-btn:active,
.seek-pill-btn.active-seek {
  background-color: #c7e938 !important;
  color: #000000 !important;
}

/* Custom Sleek Sliders (Volume & Seek) */
input[type=range].custom-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #20222d;
  height: 4px;
  border-radius: 9999px;
  outline: none;
}

input[type=range].custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c7e938;
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type=range].custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* HAMBURGER DRAWER: TELEGRAM & WHATSAPP BRAND ICONS (SOLID WHITE SVG ON BRAND BOX) */
.brand-tg-box svg,
.brand-tg-box svg path {
  fill: #ffffff !important;
}
.brand-wa-box svg,
.brand-wa-box svg path {
  fill: #ffffff !important;
}

/* TUNEX SLIM FLOATING MINI PLAYER */
#musicPlayerBar {
  background-color: rgba(18, 19, 27, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid #262836 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

/* MINI PLAYER WHITE ICONS */
#musicPlayerBar #playPauseBtn,
#musicPlayerBar #playPauseBtn *,
#musicPlayerBar #miniNextBtn,
#musicPlayerBar #miniNextBtn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#musicPlayerBar #playPauseBtn svg,
#musicPlayerBar #playPauseBtn svg path,
#musicPlayerBar #playIcon,
#musicPlayerBar #playIcon path,
#musicPlayerBar #pauseIcon,
#musicPlayerBar #pauseIcon path,
#musicPlayerBar #miniNextBtn svg,
#musicPlayerBar #miniNextBtn svg path {
  fill: #ffffff !important;
}
#musicPlayerBar .like-heart-btn svg {
  stroke: #ffffff !important;
  fill: none !important;
}
#musicPlayerBar .like-heart-btn.is-liked svg,
#musicPlayerBar .like-heart-btn svg[fill="#c7e938"],
#musicPlayerBar .like-heart-btn svg[fill="#c7e938"] path {
  fill: #c7e938 !important;
  stroke: #c7e938 !important;
}

/* ========================================================
   COMPREHENSIVE TUNEX ANIMATION SYSTEM (PREMIUM STREAMING FEEL)
   ======================================================== */

/* 1. PLAY / STOP & PAUSE MORPH ANIMATIONS */
@keyframes playBtnBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.86); }
  60% { transform: scale(1.14); }
  85% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.btn-play-bounce {
  animation: playBtnBounce 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes iconMorphSwap {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-20deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.icon-swap-anim {
  animation: iconMorphSwap 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 2. AUDIO EQUALIZER & ANIMATED WAVEFORM */
.mini-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.mini-eq-bars .eq-bar {
  width: 2.5px;
  background-color: #c7e938;
  border-radius: 9999px;
  height: 3px;
  transition: height 0.2s ease;
}
.mini-eq-bars.is-playing .bar-1 { animation: eqMini1 0.75s ease-in-out infinite alternate; }
.mini-eq-bars.is-playing .bar-2 { animation: eqMini2 0.55s ease-in-out infinite alternate; }
.mini-eq-bars.is-playing .bar-3 { animation: eqMini3 0.85s ease-in-out infinite alternate; }
.mini-eq-bars.is-playing .bar-4 { animation: eqMini4 0.65s ease-in-out infinite alternate; }

@keyframes eqMini1 { 0% { height: 3px; } 100% { height: 12px; } }
@keyframes eqMini2 { 0% { height: 12px; } 100% { height: 4px; } }
@keyframes eqMini3 { 0% { height: 4px; } 100% { height: 11px; } }
@keyframes eqMini4 { 0% { height: 9px; } 100% { height: 3px; } }

/* Expanded Audio Waveform */
.audio-waveform .wave-bar {
  height: 3px;
  transition: height 0.3s ease, opacity 0.3s ease;
  opacity: 0.35;
}
.audio-waveform.is-playing .wave-bar {
  opacity: 0.85;
  animation: waveBarBounce 1.2s ease-in-out infinite alternate;
}
.audio-waveform.is-playing .wave-bar:nth-child(2n) { animation-duration: 0.8s; animation-delay: 0.1s; }
.audio-waveform.is-playing .wave-bar:nth-child(3n) { animation-duration: 1.1s; animation-delay: 0.25s; }
.audio-waveform.is-playing .wave-bar:nth-child(4n) { animation-duration: 0.95s; animation-delay: 0.15s; }
.audio-waveform.is-playing .wave-bar:nth-child(5n) { animation-duration: 1.3s; animation-delay: 0.3s; }

@keyframes waveBarBounce {
  0% { height: 4px; }
  50% { height: 18px; }
  100% { height: 6px; }
}

/* 3. TRACK SWITCHING & ALBUM COVER BREATHING */
@keyframes trackSwitchFadeIn {
  0% {
    opacity: 0.25;
    transform: translateY(6px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.track-switch-anim {
  animation: trackSwitchFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cover-art-wrapper {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}
.cover-art-wrapper.cover-art-playing {
  animation: coverArtBreathing 4.5s ease-in-out infinite alternate;
}
@keyframes coverArtBreathing {
  0% {
    transform: scale(1);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(199, 233, 56, 0.12);
  }
  100% {
    transform: scale(1.03);
    box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.9), 0 0 40px rgba(199, 233, 56, 0.28);
  }
}

/* 4. HAMBURGER TO CLOSE 'X' MORPH ANIMATION */
.hamburger-icon-wrapper {
  position: relative;
  width: 16px;
  height: 14px;
}
.ham-line {
  display: block;
  height: 2px;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#hamburgerBtn.is-open .ham-top {
  transform: translateY(5px) rotate(45deg);
  background-color: #c7e938;
}
#hamburgerBtn.is-open .ham-mid {
  opacity: 0;
  transform: scaleX(0);
}
#hamburgerBtn.is-open .ham-bot {
  transform: translateY(-5px) rotate(-45deg);
  background-color: #c7e938;
}
#hamburgerBtn.is-open {
  border-color: rgba(199, 233, 56, 0.5) !important;
  box-shadow: 0 0 16px rgba(199, 233, 56, 0.3);
}

/* 5. CARDS HOVER LIFT, ZOOM & NEON LIME GLOW */
.card-lift-hover,
.explore-genre-card,
.search-result-item,
.playlist-item-anim,
[data-track-id].group {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .explore-genre-card:hover,
  [data-track-id].group:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(199, 233, 56, 0.16);
    border-color: rgba(199, 233, 56, 0.45) !important;
  }

  .explore-genre-card:hover img,
  [data-track-id].group:hover img {
    transform: scale(1.06);
  }
}

/* PLAY BUTTON REVEAL ON CARDS */
.card-play-reveal {
  opacity: 0;
  transform: scale(0.8) translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) and (pointer: fine) {
  .group:hover .card-play-reveal {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (hover: none) {
  .card-play-reveal {
    opacity: 1;
    transform: none;
  }
}

/* 6. PLAYLIST COVER STACK EFFECT */
.playlist-cover-stack {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.playlist-cover-stack::before,
.playlist-cover-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  z-index: -1;
}
.playlist-cover-stack::before {
  transform: translate(-3px, -3px) rotate(-3deg);
  opacity: 0.7;
}
.playlist-cover-stack::after {
  transform: translate(-6px, -6px) rotate(-6deg);
  opacity: 0.4;
}
.group:hover .playlist-cover-stack::before {
  transform: translate(-5px, -5px) rotate(-5deg);
  opacity: 0.9;
}
.group:hover .playlist-cover-stack::after {
  transform: translate(-9px, -9px) rotate(-10deg);
  opacity: 0.6;
}
.group:hover .playlist-cover-stack {
  transform: scale(1.04);
}

/* 7. HEART POP & UNLIKE TRANSITIONS */
@keyframes heartPopAnimation {
  0% { transform: scale(1); }
  25% { transform: scale(0.65); }
  55% { transform: scale(1.38); }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes heartUnlikeAnimation {
  0% { transform: scale(1); }
  40% { transform: scale(0.75); }
  100% { transform: scale(1); }
}

.heart-pop-anim {
  animation: heartPopAnimation 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

.heart-unlike-anim {
  animation: heartUnlikeAnimation 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.like-heart-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  user-select: none;
  cursor: pointer;
}
.like-heart-btn:active {
  transform: scale(0.82);
}
.like-heart-btn svg {
  transition: fill 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              stroke 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 8. SEARCH BAR EXPAND & HISTORY CHIP ANIMATION */
.search-input-box {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-input-box:focus-within {
  border-color: #c7e938 !important;
  box-shadow: 0 0 20px rgba(199, 233, 56, 0.25), 0 6px 18px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}
.search-input-box svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease;
}
.search-input-box:focus-within svg {
  stroke: #c7e938 !important;
  transform: scale(1.15);
}

@keyframes historyChipPopIn {
  0% { opacity: 0; transform: scale(0.85) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes chipDismissOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.7) translateY(-6px); }
}

.history-chip {
  animation: historyChipPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: all 0.2s ease;
}
.history-chip.chip-dismissing {
  animation: chipDismissOut 0.22s cubic-bezier(0.7, 0, 0.84, 0) both !important;
}

/* 9. MODAL EXPAND & COLLAPSE ANIMATIONS */
@keyframes modalSlideUpIn {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes modalSlideDownOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* 10. CLICK RIPPLE & TACTILE MICRO-INTERACTIONS */
button:active:not(:disabled),
.cta-btn:active,
.play-btn-lime:active,
.nav-tab:active,
[role="button"]:active {
  transform: scale(0.94);
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: rippleSpread 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 20;
}
@keyframes rippleSpread {
  0% { transform: scale(0); opacity: 0.75; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ITEM COLLAPSE ANIMATION ON REMOVE */
.item-collapse-anim {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.7, 0, 0.84, 0) !important;
}

/* MINI PLAYER CLOSE BUTTON */
#miniCloseBtn {
  transition: all 0.2s ease;
}
#miniCloseBtn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
#miniCloseBtn:active {
  transform: scale(0.88);
}

/* ========================================================
   ANIMATED PRELOADER (TUNEX LOADER)
   ======================================================== */
#loader {
  --loader-bg: #0b0c10;
  --loader-bg2: #16181d;
  --loader-ink: #f3f5f8;
  --loader-accent: #6fd3c7;
  --loader-track: rgba(255, 255, 255, 0.09);
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: radial-gradient(circle at 50% 35%, var(--loader-bg2, #16181d), var(--loader-bg, #0b0c10));
  z-index: 99999;
  transition: opacity 0.7s ease, transform 0.7s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#loader.leaving {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

.stage {
  position: relative;
  width: min(38vw, 180px);
  aspect-ratio: 1 / 1;
}

.stage img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: url(#liquid);
}

.piece-top {
  clip-path: inset(0 0 58% 0);
  transform: translateY(-80px);
  opacity: 0;
  animation: dropIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.piece-bottom {
  clip-path: inset(42% 0 0 0);
  transform: translateY(90px);
  opacity: 0;
  animation: riseIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
}

@keyframes dropIn {
  0% { transform: translateY(-80px); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes riseIn {
  0% { transform: translateY(90px); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.stage {
  animation: settle 1.6s ease-out 1.1s forwards;
}

.stage.idle {
  animation: jelly 4.5s ease-in-out 1.6s infinite;
}

@keyframes settle {
  0% { transform: scale(1); }
  40% { transform: scale(1.02, 0.985); }
  70% { transform: scale(0.99, 1.012); }
  100% { transform: scale(1); }
}

@keyframes jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.015, 0.985); }
  50% { transform: scale(0.99, 1.015); }
  75% { transform: scale(1.01, 0.995); }
}

/* wordmark, letter by letter, no rotation or scale */
.wordmark {
  display: flex;
  font-family: 'Plus Jakarta Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-left: 0.22em; /* optical centering for the tracking */
}

.wordmark span {
  opacity: 0;
  transform: translateY(14px);
  animation: letterIn 0.55s ease forwards;
  color: #f3f5f8 !important;
  -webkit-text-fill-color: #f3f5f8 !important;
}

.wordmark span:nth-child(1) { animation-delay: 0.95s; }
.wordmark span:nth-child(2) { animation-delay: 1.05s; }
.wordmark span:nth-child(3) {
  animation-delay: 1.15s;
  color: #B7FF00 !important;
  -webkit-text-fill-color: #B7FF00 !important;
}
.wordmark span:nth-child(4) { animation-delay: 1.25s; }
.wordmark span:nth-child(5) { animation-delay: 1.35s; }

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

/* progress bar */
.progress-wrap {
  width: min(50vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: letterIn 0.6s ease 0.55s forwards;
}

.progress-track {
  width: 100%;
  height: 3px;
  background: var(--loader-track, rgba(255, 255, 255, 0.09));
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #B7FF00;
  border-radius: 2px;
}

.progress-label {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .piece-top,
  .piece-bottom,
  .stage,
  .wordmark span,
  .progress-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================
   DESIGN MODES: BLACK MODE (DEFAULT) & GLASSMORPHISM MODE
   Strictly adheres to TUNEX original palette:
   Black (#090b12, #12131a), Neon Lime (#c7e938), and White
   ======================================================== */

/* 1. Global Smooth Transition between Design Modes */
body,
#appContainer,
.card-box,
header,
#bottomNav,
#musicPlayerBar,
.explore-genre-card,
.modal-slide-up,
#hamburgerDrawer {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* 2. BLACK MODE (MODE DEFAULT) */
body.black-mode,
html[data-theme="black"] body {
  background-color: #090b12 !important;
  background-image: none !important;
}
body.black-mode #appContainer {
  background-color: #090b12 !important;
}
body.black-mode .card-box {
  background-color: #12131a !important;
  border-color: #20222d !important;
  box-shadow: none !important;
}
body.black-mode .nav-translucent,
body.black-mode #bottomNav {
  background-color: rgba(16, 17, 24, 0.82) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* 3. ULTRA-LIGHTWEIGHT HIGH-PERFORMANCE GLASSMORPHISM MODE */
body.glass-mode,
html[data-theme="glassmorphism"] body {
  background-color: #090b12 !important;
  background-image: 
    radial-gradient(circle 420px at 12% 14%, rgba(199, 233, 56, 0.12) 0%, transparent 70%),
    radial-gradient(circle 380px at 88% 32%, rgba(199, 233, 56, 0.08) 0%, transparent 65%),
    radial-gradient(circle 400px at 18% 72%, rgba(199, 233, 56, 0.07) 0%, transparent 65%),
    radial-gradient(circle 380px at 85% 90%, rgba(199, 233, 56, 0.10) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(20, 22, 34, 0.5) 0%, transparent 80%) !important;
  background-attachment: fixed !important;
}

.glass-bg-container {
  display: none !important;
}

body.glass-mode #appContainer {
  background-color: rgba(9, 11, 18, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
}

/* High-Performance Glass Cards (Zero blur overhead, pure GPU gradient + specular highlight) */
body.glass-mode .card-box,
body.glass-mode .explore-genre-card,
body.glass-mode .music-banner-card,
body.glass-mode .liked-hero-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(18, 20, 30, 0.65) 35%, rgba(12, 13, 20, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.glass-mode .card-box:hover,
body.glass-mode .explore-genre-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(22, 24, 36, 0.75) 35%, rgba(14, 15, 23, 0.84) 100%) !important;
  border-color: rgba(199, 233, 56, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(199, 233, 56, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Glass Header (Floating) */
body.glass-mode header {
  background: rgba(9, 11, 18, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Glass Bottom Navigation (Floating) */
body.glass-mode .nav-translucent,
body.glass-mode #bottomNav {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(16, 18, 27, 0.80) 35%, rgba(12, 13, 20, 0.84) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Glass Mini Player (Floating) */
body.glass-mode #musicPlayerBar,
body.glass-mode .player-translucent {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(16, 18, 28, 0.82) 40%, rgba(12, 13, 20, 0.88) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Glass Modals (Floating when open) */
body.glass-mode .modal-slide-up:not(.hidden-modal) {
  background: rgba(12, 14, 22, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.glass-mode #hamburgerDrawer {
  background: rgba(12, 14, 22, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7) !important;
}

/* Glass Search Input Box */
body.glass-mode .search-input-box {
  background-color: rgba(18, 19, 27, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* Theme Mode Pill tactile styles */
.theme-mode-pill {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.theme-mode-pill:hover {
  transform: translateY(-1px);
}