/* 加载页面样式 */
    #loader {
      transition: opacity 2s ease, visibility 2s ease, filter 2s ease;
      z-index: 9999; /* 确保加载页面在最顶层 */
      filter: blur(0px);
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
      filter: blur(10px); /* 雾状效果 */
      pointer-events: none; /* 确保隐藏后不阻挡交互 */
    }

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

    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }

    .animate-spin {
      animation: spin 2s linear infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 3s linear infinite;
    }
         /* 全局样式 */
     :root {
       --neon-blue: #0ff0fc;
       --neon-pink: #ff00ff;
       --dark: #0a0a0a;
       --light: #f8fafc;
       --bg-primary: #0a0a0a;
       --bg-secondary: rgba(10, 10, 10, 0.7);
       --text-primary: #f8fafc;
       --text-secondary: rgba(248, 250, 252, 0.8);
       --border-color: rgba(15, 240, 252, 0.2);
       --glass-bg: rgba(255, 255, 255, 0.05);
       --card-bg: rgba(255, 255, 255, 0.05);
       --shadow-color: rgba(0, 0, 0, 0.3);
       --bg-image-opacity: 0.3;
       --section-bg: linear-gradient(to right, rgba(15, 240, 252, 0.1), rgba(255, 0, 255, 0.1));
       --wave-color-rgb: 0, 0, 0;
       --wave-color: rgba(var(--wave-color-rgb), 1);
     }

         /* 白天主题 */
     :root[data-theme="light"] {
       --bg-primary: #f8fafc;
       --bg-secondary: rgba(248, 250, 252, 0.95);
       --text-primary: #0a0a0a;
       --text-secondary: rgba(10, 10, 10, 0.8);
       --border-color: rgba(15, 240, 252, 0.4);
       --glass-bg: rgba(255, 255, 255, 0.15);
       --card-bg: rgba(255, 255, 255, 0.15);
       --shadow-color: rgba(0, 0, 0, 0.1);
       --bg-image-opacity: 0.8;
       --section-bg: linear-gradient(to right, rgba(15, 240, 252, 0.2), rgba(255, 0, 255, 0.2));
       --wave-color-rgb: 255, 255, 255;
       --wave-color: rgba(var(--wave-color-rgb), 1);
     }
     
     /* 夜间主题 */
     :root[data-theme="dark"] {
       --bg-image-opacity: 0.3;
       --section-bg: linear-gradient(to right, rgba(15, 240, 252, 0.1), rgba(255, 0, 255, 0.1));
     }
    
    body {
      font-family: 'Roboto', sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      overflow-x: hidden;
      padding-top: 100px; /* 增加顶部内边距，确保内容不被导航栏遮挡 */
      transition: background-color 0.5s ease, color 0.5s ease;
      min-height: 100vh;
    }
    
    /* 确保html元素也有最小高度 */
    html {
      min-height: 100vh;
      scroll-behavior: smooth;
      scroll-padding-top: 100px; /* 为固定导航栏留出空间，确保锚点跳转不被遮挡 */
    }
    
    /* 顶部导航栏样式 */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 1000;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
      border-bottom: none;
      box-shadow: none;
    }
    
    /* 鼠标悬停时显示背景 */
    .sidebar:hover {
      background: var(--bg-secondary);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-bottom: none;
      box-shadow: 0 4px 20px var(--shadow-color);
    }
    
    /* 滚动时显示背景 */
    .sidebar.scrolled {
      background: var(--bg-secondary);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-bottom: none;
      box-shadow: 0 4px 20px var(--shadow-color);
    }
    
    .sidebar-logo {
      display: flex;
      align-items: center;
    }
    
    .sidebar-nav {
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: center;
    }
    
    .sidebar-nav a,
    .sidebar-nav button {
      padding: 10px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-family: 'Orbitron', sans-serif;
      font-weight: 500;
      white-space: nowrap;
      color: var(--text-primary);
      text-decoration: none;
      border: none;
      background: none;
      cursor: pointer;
    }
    
    .sidebar-nav a:hover,
    .sidebar-nav button:hover {
      background: rgba(15, 240, 252, 0.15);
      color: var(--neon-blue);
      text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(15, 240, 252, 0.3);
    }
    
    .sidebar-nav a i,
    .sidebar-nav button i {
      width: 20px;
      text-align: center;
      margin-right: 8px;
    }
    
    .sidebar-footer {
      display: flex;
      align-items: center;
    }
    
    .sidebar-footer a {
      padding: 10px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-family: 'Orbitron', sans-serif;
      font-weight: 500;
      color: var(--text-primary);
      text-decoration: none;
    }
    
    .sidebar-footer a:hover {
      background: rgba(15, 240, 252, 0.15);
      color: var(--neon-blue);
      text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
      transform: translateY(-2px);
    }
    
    /* 音乐播放器进度条样式 - QQ音乐风格 */
    .player-progress-container {
      position: relative;
      width: 100%; /* 让容器在flex布局中正常工作 */
      max-width: 600px; /* 设置最大宽度 */
      cursor: pointer;
      margin: 0 auto; /* 居中显示 */
    }
    
    /* 确保进度条容器的父容器正确居中 */
    #music-player-container .flex.items-center.space-x-3.relative {
      justify-content: center;
    }
    
    .player-progress {
      width: 100%;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
    
    /* 点击事件区域 */
    .player-progress-inner {
      position: absolute;
      inset: 0;
      cursor: pointer;
      z-index: 5;
    }
    
    /* 缓冲条 */
    .player-progress-load {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.25);
      border-radius: 2px;
      width: 0%;
      transition: width 0.2s ease-out;
      z-index: 1;
    }
    
    /* 播放进度条 */
    .player-progress-play {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: #1677FF;
      border-radius: 2px;
      width: 0%;
      transition: width 0.1s ease-out;
      z-index: 2;
    }
    
    /* 拖动滑块 */
    .player-progress-dot {
      width: 12px;
      height: 12px;
      background-color: #1677FF;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: grab;
      box-shadow: 0 0 8px rgba(22, 119, 255, 0.6);
      transition: left 0.1s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
      z-index: 10;
      opacity: 0; /* 默认隐藏 */
      pointer-events: none; /* 默认不可交互 */
    }
    
    /* 鼠标进入进度条区域时显示滑块 */
    .player-progress-container:hover .player-progress-dot {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* 鼠标悬停时的滑块效果 */
    .player-progress-container:hover .player-progress-dot:hover {
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 0 12px rgba(22, 119, 255, 0.8);
    }
    
    /* 拖动时的滑块效果 */
    .player-progress-dot:active {
      cursor: grabbing;
      transform: translate(-50%, -50%) scale(1.3);
      box-shadow: 0 0 16px rgba(22, 119, 255, 1);
      opacity: 1;
      pointer-events: auto;
    }
    
    /* 拖动过程中保持滑块可见 */
    .player-progress-dot.dragging {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* 音量控制滑块样式 */
    .volume-dot {
      width: 12px;
      height: 12px;
      background-color: #16ffff;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: grab;
      box-shadow: 0 0 8px rgba(22, 119, 255, 0.6);
      transition: left 0.1s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
      z-index: 10;
      opacity: 0; /* 默认隐藏 */
      pointer-events: none; /* 默认不可交互 */
    }
    
    /* 鼠标进入音量控制区域时显示滑块 */
    .volume-control-container:hover .volume-dot {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* 鼠标悬停时的音量滑块效果 */
    .volume-control-container:hover .volume-dot:hover {
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 0 12px rgba(22, 119, 255, 0.8);
    }
    
    /* 拖动时的音量滑块效果 */
    .volume-dot:active {
      cursor: grabbing;
      transform: translate(-50%, -50%) scale(1.3);
      box-shadow: 0 0 16px rgba(22, 119, 255, 1);
      opacity: 1;
      pointer-events: auto;
    }
    
    /* 拖动过程中保持音量滑块可见 */
    .volume-dot.dragging {
      opacity: 1;
      pointer-events: auto;
    }

    /* 移动端导航栏优化 */
    @media (max-width: 1024px) {
      body {
        padding-top: 80px;
      }
      
      .sidebar {
        padding: 0 20px;
        height: 70px;
      }
      
      .sidebar-logo span {
        font-size: 1.5rem;
      }
      
      .sidebar-nav {
        gap: 10px;
      }
      
      .sidebar-nav a,
      .sidebar-nav button {
        padding: 8px 12px;
        font-size: 0.9rem;
      }
      
      .sidebar-nav a i,
      .sidebar-nav button i {
        margin-right: 6px;
      }
      
      .sidebar-footer {
        display: none;
      }
    }
    
    @media (max-width: 768px) {
      .sidebar {
        padding: 0 15px;
        height: 60px;
      }
      
      .sidebar-logo span {
        display: none;
      }
      
      .sidebar-nav {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
      }
      
      .sidebar-nav a,
      .sidebar-nav button {
        padding: 8px;
        font-size: 0.8rem;
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .sidebar-nav a span,
      .sidebar-nav button span {
        display: none;
      }
      
      .sidebar-nav a i,
      .sidebar-nav button i {
        margin-right: 0;
        font-size: 1.2rem;
      }
      
      /* 移动端主题切换优化 */
      .sidebar-nav .relative {
        position: static;
      }
      
      #theme-dropdown {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        z-index: 1000;
      }
    }
    
    @media (max-width: 480px) {
      .sidebar {
        padding: 0 10px;
        height: 55px;
      }
      
      .sidebar-nav {
        gap: 4px;
      }
      
      .sidebar-nav a,
      .sidebar-nav button {
        padding: 6px;
        min-width: 35px;
        min-height: 35px;
        font-size: 0.7rem;
      }
      
      .sidebar-nav a i,
      .sidebar-nav button i {
        font-size: 1rem;
      }
      
      body {
        padding-top: 55px;
      }
    }

    /* 主题相关样式 */
    .text-primary {
      color: var(--text-primary) !important;
    }
    
    .text-secondary {
      color: var(--text-secondary) !important;
    }
    
    .bg-primary {
      background-color: var(--bg-primary) !important;
    }
    
    .bg-secondary {
      background-color: var(--bg-secondary) !important;
    }
    
    /* 霓虹文字效果 */
    .neon-text {
      text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
    }
    
    .neon-pink-text {
      text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
    
    /* 渐变浅紫蓝色文字效果 */
    .gradient-blue-text {
      background: linear-gradient(135deg, #E6E6FA, #B0C4DE, #DDA0DD);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
    }
    
    /* 玻璃效果 */
    .glass {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: background-color 0.5s ease;
    }
    
    /* 粒子背景 */
    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    
    /* 加载页面粒子背景 */
    #loader-particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      transition: opacity 1s ease, visibility 1s ease;
    }
    
    #loader-particles-js.hidden {
      opacity: 0;
      visibility: hidden;
    }
    
    /* 确保背景图片覆盖整个页面 */
    .video-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      opacity: 0;
      transform: scale(1.2);
      transition: opacity 2s ease, transform 2s ease;
    }
    
    .video-container.video-visible {
      opacity: 1;
      transform: scale(1);
    }
    
    /* 背景图片容器 */
    .bg-image-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
    }
    
    /* 修复背景图片层级问题 */
    .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover; /* 可选: cover, contain, 100% 100%, auto */
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1; /* 降低层级，确保不遮挡内容 */
      opacity: var(--bg-image-opacity);
      pointer-events: none;
    }
    
    /* 背景图片大小变体 */
    .bg-image-contain {
      background-size: contain;
    }
    
    .bg-image-auto {
      background-size: auto;
    }
    
    .bg-image-100 {
      background-size: 100% 100%;
    }
    
    .bg-image-75 {
      background-size: 100% 100%;
    }
    
    .bg-image-50 {
      background-size: 100% 100%;
    }
    

    
    /* 确保所有section内容可见 */
    section {
      position: relative;
      z-index: 5; /* 确保section内容在背景之上 */
    }
    
    /* 确保卡片内容可见 */
    .card-3d {
      position: relative;
      z-index: 5;
    }
    
    /* 确保所有文本内容可见 */
    h1, h2, h3, h4, h5, h6, p, span, a, li {
      position: relative;
      z-index: 5;
    }
    
    /* 确保按钮可见 */
    button, .neon-btn {
      position: relative;
      z-index: 5;
    }
    
    /* 3D卡片效果 */
    .card-3d {
      transform-style: preserve-3d;
      transition: transform 0.5s ease;
    }
    
    .card-3d:hover {
      transform: rotateY(10deg) rotateX(5deg) translateZ(10px);
    }
    
    /* 霓虹边框动画 */
    .neon-border {
      position: relative;
    }
    
    .neon-border::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      z-index: -1;
      background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-blue));
      background-size: 200% 200%;
      animation: neonBorder 3s linear infinite;
      border-radius: inherit;
      opacity: 0.7;
    }
    
    @keyframes neonBorder {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* 悬浮动画 */
    .hover-float {
      transition: transform 0.3s ease;
    }
    
    .hover-float:hover {
      transform: translateY(-5px);
    }
    
    /* 霓虹按钮 */
    .neon-btn {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    
    .neon-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(15, 240, 252, 0.4), transparent);
      transition: 0.5s;
    }
    
    .neon-btn:hover::before {
      left: 100%;
    }
    
    /* 主内容区域调整 */
    main {
      padding: 20px 15px;
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 10; /* 确保主内容在背景之上 */
    }
    
    /* 平板和桌面端调整 */
    @media (min-width: 768px) {
      main {
        padding: 30px 40px;
      }
    }
    
    /* 调整各部分的间距 */
    section {
      margin-bottom: 40px;
    }
    
    @media (min-width: 768px) {
      section {
        margin-bottom: 60px;
      }
    }
    
    /* 页面过渡效果 */
    .page-transition {
      pointer-events: none;
    }
    
    /* 第二页面顶部装饰 */
    .second-page-top {
      pointer-events: none;
      animation: fadePulse 8s ease-in-out infinite;
    }
    
    /* 装饰线条 */
    .decorative-lines {
      padding-top: 40px;
      pointer-events: none;
    }
    
    @keyframes fadePulse {
      0%, 100% {
        opacity: 0.5;
      }
      50% {
        opacity: 1;
      }
    }
    
    /* 文章卡片网格调整 */
    .article-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }
    
    /* 移动端卡片调整 */
    @media (max-width: 640px) {
      .card-3d {
        margin-bottom: 1.5rem;
      }
      
      /* 特色文章区域调整 */
      #featured-articles .grid {
        gap: 1.5rem;
      }
      
      /* 文章列表网格调整 */
      #articles .grid {
        gap: 1.5rem;
      }
      
      /* 分类网格调整 */
      #categories .grid {
        gap: 1rem;
      }
      
      /* 页脚网格调整 */
      footer .grid {
        gap: 2rem;
      }
    }
    
    /* 欢迎文字样式 */
    .welcome-text {
      text-align: center;
      width: 100%;
      margin-bottom: 2rem;
    }
    
    .welcome-text h1 {
      margin-bottom: 1rem;
    }
    
    .welcome-text p {
      opacity: 0.9;
    }
    
    /* 时间显示样式 */
    .time-display {
      text-align: center;
      width: 100%;
    }
    
    .time-display #current-time {
      text-align: center;
      width: 100%;
      line-height: 1.2;
    }
    
    .time-display #current-date {
      text-align: center;
      width: 100%;
      line-height: 1.4;
    }
    
    /* 时间信息覆盖层样式 */
    .time-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1.5s ease 2s, transform 1.5s ease 2s;
      pointer-events: none;
    }
    
    .time-overlay.overlay-visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* 轮播图样式 */
    .carousel-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .carousel-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      display: none;
    }
    
    .carousel-slide.active {
      opacity: 1;
      display: block;
    }
    
    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .carousel-controls {
      z-index: 30;
    }
    
    .carousel-dot {
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .carousel-dot.active {
      background-color: white !important;
      transform: scale(1.2);
    }
    
    .carousel-nav {
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .carousel-nav:hover {
      background-color: rgba(0, 0, 0, 0.6) !important;
      transform: scale(1.1);
    }
    
    /* 轮播图定位指示器样式 */
    .carousel-position {
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .carousel-position:hover {
      background-color: rgba(0, 0, 0, 0.7) !important;
      transform: scale(1.05);
      border-color: rgba(255, 255, 255, 0.4);
    }
    
    /* 音乐播放器样式 */
    #music-player-container {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(15, 240, 252, 0.2);
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }
    
    #playlist-sidebar {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
      top: 80px; /* 从导航栏下方开始 */
      height: calc(100vh - 80px - 120px); /* 减去导航栏高度和音乐播放器高度 */
      max-height: calc(100vh - 200px); /* 确保不超过视口高度 */
    }
    
    /* 进度条样式 */
    #progress-slider {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: all;
    }
    
    /* WebKit 浏览器进度条轨道 - 隐藏默认样式 */
    #progress-slider::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      background: transparent;
      border-radius: 2px;
      outline: none;
    }
    
    /* WebKit 浏览器滑块样式 */
    #progress-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
      cursor: pointer;
      box-shadow: 0 0 10px rgba(15, 240, 252, 0.5);
      transition: all 0.3s ease;
      margin-top: -6px;
      position: relative;
      z-index: 2;
    }
    
    #progress-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 15px rgba(15, 240, 252, 0.8);
    }
    
    /* Firefox 进度条轨道 - 隐藏默认样式 */
    #progress-slider::-moz-range-track {
      width: 100%;
      height: 4px;
      background: transparent;
      border-radius: 2px;
      outline: none;
      border: none;
    }
    
    /* Firefox 已完成进度 - 隐藏默认样式 */
    #progress-slider::-moz-range-progress {
      width: 100%;
      height: 4px;
      background: transparent;
      border-radius: 2px;
    }
    
    /* Firefox 滑块样式 */
    #progress-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
      cursor: pointer;
      box-shadow: 0 0 10px rgba(15, 240, 252, 0.5);
      transition: all 0.3s ease;
      border: none;
      z-index: 2;
    }
    
    #progress-slider::-moz-range-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 15px rgba(15, 240, 252, 0.8);
    }
    
    /* 圆形拖动控件样式 */
    #progress-handle {
      top: 50%;
      background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
      box-shadow: 0 0 10px rgba(15, 240, 252, 0.5), 0 0 20px rgba(15, 240, 252, 0.3);
      z-index: 2;
      transition: all 0.2s ease;
      transform: translate(-50%, -50%);
    }
    
    #progress-handle:hover {
      transform: translate(-50%, -50%) scale(1.3);
      box-shadow: 0 0 15px rgba(15, 240, 252, 0.8), 0 0 30px rgba(15, 240, 252, 0.5);
    }
    
    #progress-handle:active {
      transform: translate(-50%, -50%) scale(1.4);
      box-shadow: 0 0 20px rgba(15, 240, 252, 1), 0 0 40px rgba(15, 240, 252, 0.7);
    }
    
    /* 进度条容器样式优化 */
    #progress-container {
      position: relative;
      cursor: pointer;
    }
    
    #progress-container:hover {
      transform: scaleY(1.2);
    }
    
    /* 确保底层进度条可见 */
    #progress-bar {
      position: relative;
      z-index: 0;
    }
    
    /* 圆形拖动控件样式 */
    #progress-handle {
      top: 50%;
      background: var(--neon-blue);
      box-shadow: 0 0 8px rgba(15, 240, 252, 0.6);
      z-index: 2;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform, box-shadow;
    }
    
    #progress-handle:hover {
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 0 12px rgba(15, 240, 252, 0.8);
    }
    
    #progress-handle:active {
      transform: translate(-50%, -50%) scale(1.3);
      box-shadow: 0 0 16px rgba(15, 240, 252, 1);
    }
    
    /* 进度条容器样式 */
    #progress-container {
      position: relative;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #progress-container:hover {
      transform: scaleY(1.1);
    }
    
    /* 进度条动画优化 */
    #progress-bar {
      transition: width 0.1s linear;
      will-change: width;
    }
    
    #volume-slider::-webkit-slider-thumb {
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--neon-blue);
      cursor: pointer;
      box-shadow: 0 0 8px rgba(15, 240, 252, 0.5);
      transition: all 0.3s ease;
    }
    
    #volume-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 12px rgba(15, 240, 252, 0.8);
    }
    
    /* 播放列表项动画 */
    .playlist-item {
      transition: all 0.3s ease;
    }
    
    .playlist-item:hover {
      transform: translateX(5px);
      background: rgba(15, 240, 252, 0.1) !important;
    }
    
    /* 音乐播放器按钮动画 */
    .music-btn {
      transition: all 0.3s ease;
    }
    
    .music-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 0 15px rgba(15, 240, 252, 0.3);
    }
    
    /* 专辑封面旋转动画 - 优化版 */
    .album-cover {
      transition: transform 0.3s ease;
      transform-style: preserve-3d;
      perspective: 1000px;
      position: relative;
      z-index: 1;
    }
    
    .album-cover.playing .album-cover-inner {
      animation: perfectSpin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    
    .album-cover.paused {
      animation-play-state: paused;
    }
    
    /* 专辑封面内部容器 - 专门负责旋转 */
    .album-cover-inner {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }
    
    /* 专辑封面图片 */
    .album-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }
    
    @keyframes perfectSpin {
      0% { 
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      25% { 
        transform: rotateX(3deg) rotateY(90deg) rotateZ(0deg);
      }
      50% { 
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
      }
      75% { 
        transform: rotateX(-3deg) rotateY(270deg) rotateZ(0deg);
      }
      100% { 
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
      }
    }
    
    /* 播放时的发光效果 - 圆角正方形强弹跳 */
    .album-cover.playing::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      background: conic-gradient(from 0deg, #00f0ff, #ff0080, #00f0ff, #00ff80, #ffff00, #ff0080, #00f0ff);
      border-radius: 16px;
      z-index: -1;
      animation: glowBounce 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
      opacity: 0.8;
    }
    
    /* 内层发光圈强弹跳 */
    .album-cover.playing::after {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 2px solid rgba(0, 240, 255, 0.8);
      border-radius: 12px;
      z-index: -1;
      animation: borderBounce 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
    }
    
    /* 强弹跳发光动画 - 明显弹跳效果 */
    @keyframes glowBounce {
      0% { 
        opacity: 0.4;
        filter: blur(5px) brightness(0.9);
        transform: scale(0.85) translateY(0px);
      }
      15% { 
        opacity: 0.9;
        filter: blur(12px) brightness(1.5);
        transform: scale(1.15) translateY(-2px);
      }
      35% { 
        opacity: 0.7;
        filter: blur(8px) brightness(1.2);
        transform: scale(0.95) translateY(1px);
      }
      55% { 
        opacity: 0.95;
        filter: blur(10px) brightness(1.4);
        transform: scale(1.05) translateY(-1px);
      }
      75% { 
        opacity: 0.8;
        filter: blur(9px) brightness(1.3);
        transform: scale(0.98) translateY(0.5px);
      }
      100% { 
        opacity: 0.9;
        filter: blur(8px) brightness(1.25);
        transform: scale(1.02) translateY(-0.5px);
      }
    }
    
    /* 边框强弹跳动画 */
    @keyframes borderBounce {
      0% { 
        border-color: rgba(0, 240, 255, 0.6);
        box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
        transform: scale(0.9) translateY(0px);
      }
      15% { 
        border-color: rgba(255, 0, 128, 1);
        box-shadow: 0 0 35px rgba(255, 0, 128, 0.8);
        transform: scale(1.1) translateY(-3px);
      }
      35% { 
        border-color: rgba(0, 255, 128, 0.9);
        box-shadow: 0 0 25px rgba(0, 255, 128, 0.7);
        transform: scale(0.95) translateY(2px);
      }
      55% { 
        border-color: rgba(255, 128, 0, 1);
        box-shadow: 0 0 30px rgba(255, 128, 0, 0.9);
        transform: scale(1.04) translateY(-1px);
      }
      75% { 
        border-color: rgba(128, 255, 0, 0.8);
        box-shadow: 0 0 28px rgba(128, 255, 0, 0.6);
        transform: scale(0.99) translateY(1px);
      }
      100% { 
        border-color: rgba(255, 0, 255, 0.9);
        box-shadow: 0 0 32px rgba(255, 0, 255, 0.7);
        transform: scale(1.01) translateY(-0.5px);
      }
    }
    

    
    #lyrics-container {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    /* 歌词滚动效果 */
    #lyrics-content p {
      transition: all 0.3s ease;
      opacity: 0.7;
    }
    
    #lyrics-content p:hover {
      opacity: 1;
      color: var(--neon-blue);
      text-shadow: 0 0 10px var(--neon-blue);
    }
    

    
    /* 移动端音乐播放器优化 */
    @media (max-width: 768px) {
      /* 音乐播放器容器 */
      #music-player-container {
        padding: 0.5rem;
        height: auto;
        min-height: 120px;
      }
      
      #music-player-container .flex {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
      }
      
      /* 歌曲信息区域 */
      #music-player-container .flex > div:first-child {
        width: 100%;
        max-width: 100%;
        order: 1;
      }
      
      /* 播放控制区域 */
      #music-player-container .flex > div:nth-child(2) {
        order: 2;
        justify-content: center;
        width: 100%;
      }
      
      /* 进度条区域 */
      #music-player-container .flex > div:nth-child(3) {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin: 0;
      }
      
      /* 音量控制区域 */
      #music-player-container .flex > div:nth-child(4) {
        order: 4;
        justify-content: center;
        width: 100%;
      }
      
      /* 功能按钮区域 */
      #music-player-container .flex > div:nth-child(5) {
        order: 5;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      
      /* 播放列表侧边栏 */
      #playlist-sidebar {
        width: 100vw;
        height: calc(100vh - 70px - 120px); /* 减去移动端导航栏高度和音乐播放器高度 */
        max-height: calc(100vh - 190px); /* 确保不超过视口高度 */
        right: 0;
        top: 70px; /* 从移动端导航栏下方开始 */
        border-radius: 0;
      }
      

      
      /* 歌词容器 */
      #lyrics-container {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 140px;
        max-height: 200px;
      }
      
      /* 帮助面板 */
      #help-panel {
        width: calc(100vw - 2rem);
        right: 1rem;
        bottom: 140px;
      }
      
      /* 音乐控制按钮 */
      #music-player-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 3.5rem;
        height: 3.5rem;
      }
      
      #help-toggle {
        bottom: 1rem;
        right: 5rem;
        width: 3rem;
        height: 3rem;
      }
      
      /* 按钮大小调整 */
      #music-player-container button {
        min-width: 2.5rem;
        min-height: 2.5rem;
      }
      
      #play-pause-btn {
        width: 3rem;
        height: 3rem;
      }
      
      /* 进度条优化 */
      #progress-slider {
        height: 1.5rem;
      }
      
      #volume-slider {
        height: 1.5rem;
      }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 480px) {
      #music-player-container {
        padding: 0.25rem;
        min-height: 100px;
      }
      
      #music-player-container .flex {
        gap: 0.5rem;
      }
      
      #music-player-toggle {
        width: 3rem;
        height: 3rem;
        bottom: 0.5rem;
        right: 0.5rem;
      }
      
      #help-toggle {
        width: 2.5rem;
        height: 2.5rem;
        bottom: 0.5rem;
        right: 4rem;
      }
      
      /* 播放列表侧边栏 */
      #playlist-sidebar {
        width: 100vw;
        height: calc(100vh - 55px - 100px); /* 减去超小屏幕导航栏高度和音乐播放器高度 */
        max-height: calc(100vh - 155px); /* 确保不超过视口高度 */
        right: 0;
        top: 55px; /* 从超小屏幕导航栏下方开始 */
        border-radius: 0;
      }
      
      #lyrics-container {
        bottom: 120px;
        font-size: 0.9rem;
      }
    }
    
    /* 移动端专用样式 */
    .mobile-device {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-device * {
      -webkit-tap-highlight-color: transparent;
    }
    
    /* 移动端滚动优化 */
    .mobile-device {
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    
    /* 移动端按钮优化 */
    .mobile-device button,
    .mobile-device .neon-btn {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    /* 移动端输入框优化 */
    .mobile-device input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }
    
    .mobile-device input[type="range"]::-webkit-slider-track {
      background: transparent;
      height: 1rem;
      border-radius: 0.5rem;
    }
    
    .mobile-device input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: var(--neon-blue);
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(15, 240, 252, 0.5);
    }
    
    /* 移动端通知优化 */
    .mobile-device .notification {
      position: fixed;
      top: 1rem;
      left: 1rem;
      right: 1rem;
      z-index: 9999;
      padding: 1rem;
      border-radius: 0.5rem;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: slideInDown 0.3s ease-out;
    }
    
    @keyframes slideInDown {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }


        .waves {
          position: absolute;
          width: 100%;
          height: 100px;
          bottom: 0;
          left: 0;
          z-index: 5;
        }
        
        .parallax > use {
          animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
        }
        
        .parallax > use:nth-child(1) {
          animation-delay: -2s;
          animation-duration: 4s;
        }
        
        .parallax > use:nth-child(2) {
          animation-delay: -3s;
          animation-duration: 10s;
        }
        
        .parallax > use:nth-child(3) {
          animation-delay: -4s;
          animation-duration: 12s;
        }
        
        .parallax > use:nth-child(4) {
          animation-delay: -5s;
          animation-duration: 14s;
        }
        
        @keyframes move-forever {
          0% { transform: translate3d(-90px, 0, 0); }
          100% { transform: translate3d(85px, 0, 0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
          .waves {
            height: 50px;
          }
        }