用于音乐/音频的 Neomorphic Neon 分页

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black p-4">
  <nav class="flex items-center justify-center space-x-2 p-3 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800
    bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900
    dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(50,50,50,0.3)]
    shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7),5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)]
    max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl duration-300 ease-in-out">

    <!-- Previous Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>

    <!-- Page Numbers / Current Page -->
    <div class="flex space-x-2 sm:space-x-1 md:space-x-2">
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">1</span>
      </a>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">2</span>
      </a>
      <span class="relative inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 text-sm font-semibold
        rounded-lg neumorphic-active
        text-fuchsia-600 dark:text-cyan-500
        shadow-lg dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6)]
        shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7)] 
        border border-fuchsia-400 dark:border-cyan-600
        
        ">
        3
        <span class="absolute inset-0 rounded-lg opacity-40 blur-sm 
          bg-gradient-to-br from-fuchsia-400 to-fuchsia-600 
          dark:from-cyan-400 dark:to-cyan-600"></span>
      </span>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">4</span>
      </a>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">5</span>
      </a>
      <span class="text-fuchsia-500 dark:text-cyan-400 self-center hidden md:block">...</span>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">10</span>
      </a>
    </div>

    <!-- Next Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Next</span>
    </a>
  </nav>

  <style>
    /* Base styles for the neumorphic button */
    .neumorphic-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 0.8rem; /* Equivalent to px-3 py-1.5, slightly tweaked for visual balance */
      font-size: 0.875rem; /* text-sm */
      font-weight: 500; /* font-medium */
      border-radius: 0.5rem; /* rounded-lg */
      color: #9240F0; /* Default text color, will be overridden by specific color classes */
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;

      /* Neumorphic default shadow (light mode) */
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), 
                  -2px -2px 5px rgba(255, 255, 255, 0.8), 
                  inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                  inset -1px -1px 2px rgba(180, 180, 180, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    /* Neumorphic active/pressed state */
    .neumorphic-button:active,
    .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
                inset -3px -3px 6px rgba(255, 255, 255, 0.7);
      border-color: #fca0e5; /* Hot Pink */
    }

    /* Neumorphic hover state (light mode) */
    .neumorphic-button:hover {
      background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
                  -3px -3px 6px rgba(255, 255, 255, 0.9),
                  inset 1px 1px 2px rgba(255, 255, 255, 0.8),
                  inset -1px -1px 2px rgba(190, 190, 190, 0.8);
    }

    /* Dark mode for neumorphic button */
    .dark .neumorphic-button {
      background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
                  -2px -2px 5px rgba(30, 30, 30, 0.6),
                  inset 1px 1px 2px rgba(30, 30, 30, 0.7),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    .dark .neumorphic-button:active,
    .dark .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #1a1a1a, #2b2b2b);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8),
                  inset -3px -3px 6px rgba(40, 40, 40, 0.8);
      border-color: #00BCD4; /* Electric Blue */
    }

    .dark .neumorphic-button:hover {
      background: linear-gradient(145deg, #1f1f1f, #2f2f2f);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8),
                  -3px -3px 6px rgba(40, 40, 40, 0.8),
                  inset 1px 1px 2px rgba(40, 40, 40, 0.8),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.8);
    }

  </style>
</div>