@layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(90deg, #3b82f6, #60a5fa, #06b6d4, #14b8a6, #3b82f6);
        background-size: 200% 100%;
        animation: gradientText 4s ease infinite;
      }
      .backdrop-blur {
        backdrop-filter: blur(8px);
      }
      .lyric-active {
        transform: scale(1.05);
        font-weight: bold;
        color: #3b82f6;
      }
      /* 玻璃效果 - 基础样式，无模糊 */
      .glass-effect {
        background: rgba(255, 255, 255, 0);
        backdrop-filter: none;
        border: 1px solid rgba(226, 232, 240, 0);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }
      
      .dark-theme .glass-effect {
        background: rgba(15, 23, 42, 0);
        border: 1px solid rgba(51, 65, 85, 0);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      }
      /* 简化边框效果 */
      .neon-border {
        border: 1px solid rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
      }
      /* 渐变文字 */
      .flow-text {
        background: linear-gradient(90deg, #3b82f6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      /* 动画关键帧 */
      @keyframes auroraFlow {
        0% { background-position: 0% 0%; }
        100% { background-position: 200% 0%; }
      }
      @keyframes gradientBorder {
        0% { background-position: 0% 0%; }
        50% { background-position: 100% 0%; }
        100% { background-position: 0% 0%; }
      }
      @keyframes gradientText {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      /* 移除过度装饰效果 */
      /* 移除扫描线效果 */
      /* 移除数字噪点效果 */
      /* 简化背景加载样式 */
      [data-bg-loaded="false"] {
        background: #0f172a;
      }
      
      [data-bg-loaded="true"] {
        transition: background-image 0.5s ease-in-out;
      }
      .album-rotate {
        animation: rotate 20s linear infinite;
      }
      @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      
      /* 简化的音频可视化动画 */
      .audio-visualizer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 20px;
      }
      
      .audio-bar {
        width: 3px;
        background-color: #3b82f6;
        border-radius: 2px;
        animation: audio-bar 1.5s ease-in-out infinite;
      }
      
      .audio-bar:nth-child(2) { animation-delay: 0.1s; }
      .audio-bar:nth-child(3) { animation-delay: 0.2s; }
      .audio-bar:nth-child(4) { animation-delay: 0.3s; }
      .audio-bar:nth-child(5) { animation-delay: 0.4s; }
      
      @keyframes audio-bar {
        0%, 100% { height: 4px; }
        50% { height: 20px; }
      }
      
      /* 简化的发光效果 */
      .glow-strong {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        transition: box-shadow 0.3s ease;
      }
      
      .glow-strong:hover {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
      }
      .search-result-item {
        transition: all 0.3s ease;
      }
      .search-result-item:hover {
        background-color: rgba(59, 130, 246, 0.1);
        border-left: 2px solid;
        border-image: linear-gradient(to bottom, #3b82f6, #60a5fa) 1;
      }
      .search-result-item.active {
        background-color: rgba(59, 130, 246, 0.2);
        border-left: 2px solid;
        border-image: linear-gradient(to bottom, #3b82f6, #06b6d4) 1;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
      }
      .lyric-item {
        transition: all 0.3s ease;
        padding: 2px 0;
      }
      
      /* 播放速度设置模态框 */
      .speed-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }
      .speed-modal-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .speed-modal {
        background-color: #0f172a;
        border-radius: 1rem;
        width: 90%;
        max-width: 400px;
        padding: 1.5rem;
        border: 1px solid rgba(59, 130, 246, 0.3);
        transform: translateY(20px) scale(0.95);
        transition: transform 0.3s ease;
      }
      .speed-modal-overlay.open .speed-modal {
        transform: translateY(0) scale(1);
      }
      .speed-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
      }
      .speed-modal-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3b82f6;
      }
      .speed-modal-close {
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;
      }
      .speed-modal-close:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .speed-options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
      }
      .speed-option {
        padding: 0.75rem 0;
        text-align: center;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
      }
      .speed-option:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .speed-option.active {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
        color: #3b82f6;
        font-weight: 600;
      }
      .lyric-select-item {
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      .lyric-select-item:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .toast-message {
        transition: all 0.3s ease;
      }
      .search-error-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 40vh;
        text-align: center;
      }
      /* 设置模态框 */
      .settings-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }
      .settings-modal-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .settings-modal {
        background-color: #0f172a;
        border-radius: 1rem;
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 1.5rem;
        border: 1px solid rgba(59, 130, 246, 0.3);
        transform: translateY(20px) scale(0.95);
        transition: transform 0.3s ease;
      }
      .settings-modal-overlay.open .settings-modal {
        transform: translateY(0) scale(1);
      }
      .settings-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      }
      .settings-modal-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3b82f6;
      }
      .settings-modal-close {
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;
      }
      .settings-modal-close:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .settings-section {
        margin-bottom: 1.5rem;
      }
      .settings-section-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #cbd5e1;
      }
      .settings-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(59, 130, 246, 0.05);
      }
      .settings-item-label {
        display: flex;
        flex-direction: column;
      }
      .settings-item-name {
        font-weight: 500;
      }
      .settings-item-desc {
        font-size: 0.8rem;
        color: #94a3b8;
      }
      /* 开关样式 */
      .toggle-switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
      }
      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #64748b;
        transition: .4s;
        border-radius: 20px;
      }
      .toggle-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
      }
      input:checked + .toggle-slider {
        background-color: #3b82f6;
      }
      input:checked + .toggle-slider:before {
        transform: translateX(20px);
      }
      /* 提示框 */
      .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
      }
      .toast {
        background-color: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        animation: toastIn 0.3s ease forwards, toastOut 0.3s ease forwards 3s;
        opacity: 0;
        transform: translateY(10px);
      }
      .toast i {
        margin-right: 0.5rem;
        color: #3b82f6;
      }
      @keyframes toastIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes toastOut {
        to {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      /* 侧边栏样式 */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        background-color: transparent;
        backdrop-filter: blur(15px);
        border-right: none;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
      }
      .sidebar.open {
        transform: translateX(0);
      }
      .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      }
      .sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .sidebar-section {
        padding: 1.5rem 1rem;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      }
      .sidebar-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        color: #3b82f6;
      }
      .sidebar-section-title i {
        margin-right: 0.5rem;
      }
      .sidebar-menu-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .sidebar-menu-item:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .sidebar-menu-item.active {
        background-color: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
      }
      .sidebar-menu-item i {
        width: 1.5rem;
        margin-right: 1rem;
        text-align: center;
      }
      .history-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .history-item:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .history-item-info {
        flex: 1;
        margin-left: 0.75rem;
      }
      .history-item-title {
        font-size: 0.9rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .history-item-artist {
        font-size: 0.8rem;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .history-item-time {
        font-size: 0.7rem;
        color: #64748b;
      }
      .history-clear {
        text-align: center;
        margin-top: 1rem;
        color: #94a3b8;
        font-size: 0.85rem;
        cursor: pointer;
        transition: color 0.2s ease;
      }
      .history-clear:hover {
        color: #ec4899;
      }
      .sidebar-header {
        padding: 1.5rem 1rem;
        border-bottom: 1px solid rgba(124, 58, 237, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .sidebar-close {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }
      .sidebar-close:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      .menu-toggle {
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease;
      }
      .menu-toggle:hover {
        background-color: rgba(59, 130, 246, 0.1);
      }
      
      /* 主题切换样式 */
      .light-theme {
        color: #000000 !important;
      }
      
      .light-theme body {
        background: #ffffff !important;
      }
      
      .light-theme .bg-gradient-to-br {
        background: linear-gradient(to bottom right, #f8fafc, #e2e8f0, #cbd5e1) !important;
      }
      
      .light-theme .from-dark {
        background: #f8fafc !important;
      }
      
      .light-theme .via-gray-900 {
        background: #e2e8f0 !important;
      }
      
      .light-theme .to-darker {
        background: #cbd5e1 !important;
      }
      
      .light-theme .text-light {
        color: #000000 !important;
      }
      
      .light-theme .sidebar {
        background-color: rgba(248, 250, 252, 0) !important;
        border-right: 1px solid rgba(139, 92, 246, 0) !important;
        backdrop-filter: blur(15px) !important;
      }
      
      .light-theme .sidebar-menu-item:hover {
        background-color: rgba(139, 92, 246, 0.1) !important;
      }
      
      .light-theme .sidebar-section-title {
        color: #000000 !important;
      }
      
      .light-theme .lyric-select-item:hover {
        background-color: rgba(139, 92, 246, 0.1) !important;
      }
      
      .light-theme .history-item:hover {
        background-color: rgba(139, 92, 246, 0.1) !important;
      }
      
      .light-theme .menu-toggle:hover {
        background-color: rgba(139, 92, 246, 0.1) !important;
      }
      
      /* 浅色模式下的输入框和表单控件 */
      .light-theme input[type="text"],
      .light-theme input[type="search"],
      .light-theme input[type="range"],
      .light-theme input[type="file"],
      .light-theme select,
      .light-theme textarea {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #000000 !important;
      }
      
      .light-theme input[type="range"] {
        background: #f1f5f9 !important;
      }
      
      .light-theme input::placeholder {
        color: #64748b !important;
      }
      
      /* 浅色模式下的按钮样式 */
      .light-theme button:not(.speed-option-btn):not(.speed-option):not(.toggle-slider):not(.preset-bg-btn):not(.sidebar-menu-item):not(.lyric-select-item):not(.history-item):not(.delete-favorite-btn):not(.delete-history-item):not(.clear-btn):not(.settings-content *) {
        background-color: #e2e8f0 !important;
        border-color: #cbd5e1 !important;
        color: #000000 !important;
      }
      
      .light-theme button:hover:not(.speed-option-btn):not(.speed-option):not(.toggle-slider):not(.preset-bg-btn):not(.sidebar-menu-item):not(.lyric-select-item):not(.history-item):not(.delete-favorite-btn):not(.delete-history-item):not(.clear-btn):not(.settings-content *) {
        background-color: #cbd5e1 !important;
      }
      
      /* 浅色模式下的速度选择按钮 */
      .light-theme .speed-option-btn {
        background-color: #e2e8f0 !important;
        color: #000000 !important;
      }
      
      .light-theme .speed-option-btn:hover {
        background-color: #cbd5e1 !important;
      }
      
      .light-theme .speed-option-btn.bg-primary {
        background-color: #3b82f6 !important;
        color: #000000 !important;
      }
      
      /* 浅色模式下的文本颜色 */
      .light-theme .text-gray-400,
      .light-theme .text-gray-500,
      .light-theme .text-gray-600 {
        color: #64748b !important;
      }
      
      .light-theme .text-gray-300 {
        color: #475569 !important;
      }
      
      .light-theme .text-gray-700 {
        color: #374151 !important;
      }
      
      /* 浅色模式下的背景色 */
      .light-theme .bg-gray-600,
      .light-theme .bg-gray-700,
      .light-theme .bg-gray-800 {
        background-color: #e2e8f0 !important;
      }
      
      .light-theme .bg-gray-600:hover {
        background-color: #cbd5e1 !important;
      }
      
      .light-theme .bg-gray-800\/50,
      .light-theme .bg-gray-800\/30 {
        background-color: #f1f5f9 !important;
      }
      
      .light-theme .bg-gray-800\/50:hover {
        background-color: #e2e8f0 !important;
      }
      
      /* 浅色模式下的边框颜色 */
      .light-theme .border-gray-600,
      .light-theme .border-gray-700 {
        border-color: #cbd5e1 !important;
      }
      
      /* 浅色模式下的进度条 */
      .light-theme #progress-bar,
      .light-theme .h-1.bg-gray-700 {
        background-color: #e2e8f0 !important;
      }
      
      /* 浅色模式下的下拉菜单 */
      .light-theme .bg-gray-800 {
        background-color: #f8fafc !important;
        color: #1e293b !important;
      }
      
      .light-theme .bg-gray-800:hover,
      .light-theme .bg-gray-700 {
        background-color: #e2e8f0 !important;
      }
      
      /* 浅色模式下的文本容器 */
      .light-theme .p-3.bg-gray-800\/50 {
        background-color: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
      }
      
      /* 浅色模式下的歌词容器 */
      .light-theme #lyrics-container {
        color: #000000 !important;
      }
      
      /* 更强制的浅色主题覆盖 */
      .light-theme * {
        color-inherit: inherit !important;
      }
      
      /* 确保所有灰色文本被正确覆盖 */
      .light-theme [class*="text-gray"],
      .light-theme .text-gray-100,
      .light-theme .text-gray-200,
      .light-theme .text-gray-300,
      .light-theme .text-gray-400,
      .light-theme .text-gray-500,
      .light-theme .text-gray-600,
      .light-theme .text-gray-700,
      .light-theme .text-gray-800,
      .light-theme .text-gray-900 {
        color: #000000 !important;
      }
      
      /* 背景覆盖 */
      .light-theme [class*="bg-gray"],
      .light-theme .bg-gray-100,
      .light-theme .bg-gray-200,
      .light-theme .bg-gray-300,
      .light-theme .bg-gray-400,
      .light-theme .bg-gray-500,
      .light-theme .bg-gray-600,
      .light-theme .bg-gray-700,
      .light-theme .bg-gray-800,
      .light-theme .bg-gray-900,
      .light-theme .bg-gray-800\/50,
      .light-theme .bg-gray-800\/30,
      .light-theme .bg-gray-900\/50 {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
      }
      
      /* 强制移除所有深色相关的阴影和边框 */
      .light-theme * {
        --tw-shadow-color: #e2e8f0 !important;
        border-color: inherit !important;
      }
      
      /* 设置页面特定覆盖 */
      .light-theme #settings-modal .bg-gray-800 {
        background-color: #f8fafc !important;
        color: #000000 !important;
        border: 1px solid #cbd5e1 !important;
      }
      
      .light-theme #settings-modal .bg-gray-700 {
        background-color: #e2e8f0 !important;
        color: #000000 !important;
      }
      
      .light-theme #settings-modal input[type="range"] {
        background: #e2e8f0 !important;
      }
      
      .dark-theme {
        color: #000000 !important;
      }
      
      .dark-theme body {
        background: #0f172a !important;
      }
      
      .dark-theme .bg-gradient-to-br {
        background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
      }
      
      .dark-theme .from-dark {
        background: #0f172a !important;
      }
      
      .dark-theme .via-gray-900 {
        background: #1e293b !important;
      }
      
      .dark-theme .to-darker {
        background: #334155 !important;
      }
      
      .dark-theme .text-light {
        color: #000000 !important;
      }
      
      /* 系统主题样式 - 根据系统偏好设置 */
      @media (prefers-color-scheme: light) {
        .system-theme {
          color: #000000 !important;
        }
        
        .system-theme body {
          background: #ffffff !important;
        }
        
        .system-theme .bg-gradient-to-br {
          background: linear-gradient(to bottom right, #f8fafc, #e2e8f0, #cbd5e1) !important;
        }
        
        .system-theme .from-dark {
          background: #f8fafc !important;
        }
        
        .system-theme .via-gray-900 {
          background: #e2e8f0 !important;
        }
        
        .system-theme .to-darker {
          background: #cbd5e1 !important;
        }
        
        .system-theme .text-light {
          color: #000000 !important;
        }
        
        .system-theme .sidebar {
          background-color: rgba(248, 250, 252, 0) !important;
          border-right: 1px solid rgba(139, 92, 246, 0) !important;
          backdrop-filter: blur(15px) !important;
        }
        
        .system-theme .sidebar-menu-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .sidebar-section-title {
          color: #000000 !important;
        }
        
        .system-theme .lyric-select-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .history-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .menu-toggle:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
      }
      
      @media (prefers-color-scheme: dark) {
        .system-theme {
          color: #000000 !important;
        }
        
        .system-theme body {
          background: #0f172a !important;
        }
        
        .system-theme .bg-gradient-to-br {
          background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
        }
        
        .system-theme .from-dark {
          background: #0f172a !important;
        }
        
        .system-theme .via-gray-900 {
          background: #1e293b !important;
        }
        
        .system-theme .to-darker {
          background: #334155 !important;
        }
        
        .system-theme .text-light {
          color: #000000 !important;
        }
        
        .system-theme .sidebar {
          background-color: rgba(15, 23, 42, 0) !important;
          border-right: 1px solid rgba(139, 92, 246, 0) !important;
          backdrop-filter: blur(15px) !important;
        }
        
        .system-theme .sidebar-menu-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .sidebar-section-title {
          color: #000000 !important;
        }
        
        .system-theme .lyric-select-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .history-item:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
        
        .system-theme .menu-toggle:hover {
          background-color: rgba(139, 92, 246, 0.1) !important;
        }
      }
    }

/* 底栏和功能菜单栏模糊效果 */
/* 顶部导航栏（功能菜单栏） */
header.glass-effect {
  backdrop-filter: blur(15px);
}

/* 底部播放器控制区（底栏） */
#player-controls {
  backdrop-filter: blur(15px);
}

/* 移动端底部播放栏 */
.md\:hidden.fixed.bottom-0.left-0.right-0.glass-effect {
  backdrop-filter: blur(15px);
}

/* 在手机上隐藏桌面版底栏的封面 */
@media (max-width: 767px) {
  /* 隐藏整个封面容器 */
  #player-controls .w-14.h-14.bg-gradient-to-br.from-primary.to-secondary.rounded-xl.flex-shrink-0.overflow-hidden.glow.aurora-glow {
    display: none !important;
  }
  
  /* 调整手机上桌面版底栏的布局，移除封面后的空间 */
  #player-controls .flex.items-center.space-x-4.flex-1.min-w-0 {
    justify-content: center;
  }
  
  /* 调整主内容区高度，适配手机屏幕 */
  .w-full.md\:w-1\/3.lg\:w-1\/4.h-\[calc\(100vh-12rem\)\].overflow-y-auto.glass-effect {
    height: calc(100vh - 8rem) !important;
  }
  
  /* 调整右侧歌词区高度，适配手机屏幕 */
  .w-full.lg\:w-1\/4.glass-effect {
    height: calc(100vh - 8rem) !important;
  }
  
  /* 调整移动端专辑封面大小 */
  #album-cover-container {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto;
  }
  
  /* 调整移动端歌曲信息字体大小 */
  .text-xl.md\:text-2xl.font-bold.text-gradient {
    font-size: 1.25rem !important;
  }
  
  /* 调整移动端控制按钮大小 */
  .w-14.h-14.rounded-full.gradient-border {
    width: 12rem !important;
    height: 12rem !important;
  }
  
  /* 调整移动端播放按钮大小 */
  #play-btn {
    width: 4rem !important;
    height: 4rem !important;
  }
  
  /* 调整移动端播放按钮内部大小 */
  #play-btn .w-13.h-13.rounded-full.bg-dark {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  
  /* 调整移动端搜索结果项的间距 */
  .search-result-item {
    padding: 0.5rem !important;
  }
  
  /* 调整移动端侧边栏菜单项的间距 */
  .sidebar-menu-item {
    padding: 0.75rem 1rem !important;
  }
  
  /* 调整移动端歌曲列表字体大小 */
  .font-medium.truncate {
    font-size: 0.875rem !important;
  }
  
  .text-sm.text-gray-400.truncate {
    font-size: 0.75rem !important;
  }
  
  /* 调整移动端播放列表信息字体大小 */
  .playlist-info h2 {
    font-size: 1.5rem !important;
  }
  
  .playlist-info p {
    font-size: 0.75rem !important;
  }
  
  /* 调整移动端榜单信息字体大小 */
  .chart-title h2 {
    font-size: 1.5rem !important;
  }
}

/* 左侧搜索结果栏 - 确保无模糊和边框 */
.w-full.md\:w-1\/3.lg\:w-1\/4.h-\[calc\(100vh-12rem\)\].overflow-y-auto.glass-effect {
  backdrop-filter: none;
  border: none !important;
  box-shadow: none !important;
}

/* 右侧歌词功能区 - 确保无模糊和边框 */
.w-full.lg\:w-1\/4.glass-effect {
  backdrop-filter: none;
  border: none !important;
  box-shadow: none !important;
}

/* 搜索结果容器和歌词容器 - 确保无边框 */
#search-results,
#lyrics-container {
  border: none !important;
  box-shadow: none !important;
}

/* 播放速度模态框文字颜色 */
.speed-modal {
  color: white !important;
}

.speed-modal-title {
  color: white !important;
}

.speed-option {
  color: white !important;
}

/* 设置模态框文字颜色 */
.settings-modal {
  color: white !important;
}

.settings-modal-title {
  color: white !important;
}

.settings-section-title {
  color: white !important;
}

.settings-item-name {
  color: white !important;
}

.settings-item-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

.toggle-switch {
  color: white !important;
}

/* 播放速度和音效设置和主题设置里面的文字改为白色 */
#theme-settings-content,
#audio-settings-content,
#playback-settings-content,
#help-settings-content,
#background-settings-content {
  color: white !important;
}

/* 均衡器预设文字颜色 */
#equalizer-presets {
  color: white !important;
}

/* 快捷键说明文字颜色 */
.settings-content .p-3.bg-gray-800\/50 {
  color: white !important;
}

.settings-content .p-3.bg-gray-800\/50 h4 {
  color: white !important;
}

.settings-content .p-3.bg-gray-800\/50 ul {
  color: rgba(255, 255, 255, 0.8) !important;
}