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

 :root {
     --primary-color: #FF69B4;
     --secondary-color: #FFB6C1;
     --text-color: #8B4513;
     --glass-bg: rgba(255, 255, 255, 0.85);
     --glass-border: rgba(255, 182, 193, 0.3);
 }

 body {
     font-family: -apple-system, system-ui, sans-serif;
     background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 50%, #FFE4E1 100%);
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-color);
     overflow: hidden;
     padding: 10px;
 }

 .container {
     width: 100%;
     max-width: 800px;
     height: 98vh;
     background: var(--glass-bg);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     /* Safari支持 */
     border-radius: 20px;
     padding: 15px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 10px 40px rgba(255, 182, 193, 0.3);
 }

 h1 {
     text-align: center;
     margin-bottom: 10px;
     font-size: clamp(1rem, 4vw, 1.4rem);
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .visualizer-container {
     position: relative;
     flex: 1;
     background: rgba(255, 240, 245, 0.5);
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 10px;
 }

 #visualizer {
     width: 100%;
     height: 100%;
     display: block;
 }

 .controls {
     flex-shrink: 0;
     background: rgba(255, 240, 245, 0.5);
     border-radius: 15px;
     padding: 12px;
 }

 /* 动态控制输入框显示 */
 #url-zone {
     display: none;
     /* 默认隐藏 */
     gap: 8px;
     margin-bottom: 8px;
 }

 .url-input {
     flex: 1;
     padding: 8px 12px;
     border: 2px solid var(--glass-border);
     border-radius: 20px;
     font-size: 13px;
     outline: none;
 }

 .btn-main {
     padding: 6px 15px;
     background: var(--primary-color);
     color: white;
     border-radius: 20px;
     border: none;
     cursor: pointer;
     font-size: 12px;
     white-space: nowrap;
     transition: opacity 0.2s;
 }

 .btn-main:active {
     opacity: 0.8;
 }

 .btn-main:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }

 .track-info {
     text-align: center;
     margin-bottom: 8px;
 }

 .track-name {
     font-size: 0.9rem;
     font-weight: bold;
     color: var(--primary-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .player-controls {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     margin-bottom: 8px;
 }

 .control-btn {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: none;
     background: white;
     color: var(--primary-color);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .control-btn:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }

 .play-pause {
     width: 48px;
     height: 48px;
     background: var(--primary-color);
     border-radius: 50%;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
     /* 添加以下两行确保移动端显示为完美圆形 */
     overflow: hidden;
     -webkit-transform: translateZ(0);
     /* 确保按钮在移动端可以点击 */
     -webkit-appearance: none;
     appearance: none;
     touch-action: manipulation;
     /* 提高移动端触控性能 */
 }

 .play-pause:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 .play-pause:active {
     transform: scale(0.95);
 }

 .play-pause:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
     transform: scale(1.05);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 /* 播放图标 - CSS绘制 */
 .play-icon {
     width: 0;
     height: 0;
     border-left: 16px solid white;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     margin-left: 3px;
     display: none;
 }

 /* 暂停图标 - CSS绘制 */
 .pause-icon {
     display: none;
     position: relative;
     width: 16px;
     height: 20px;
 }

 .pause-icon::before,
 .pause-icon::after {
     content: '';
     position: absolute;
     width: 5px;
     height: 20px;
     background: white;
     top: 0;
 }

 .pause-icon::before {
     left: 0;
 }

 .pause-icon::after {
     right: 0;
 }

 /* 控制图标显示状态 */
 .play-pause.playing .play-icon {
     display: none;
 }

 .play-pause.playing .pause-icon {
     display: block;
 }

 .play-pause.paused .play-icon {
     display: block;
 }

 .play-pause.paused .pause-icon {
     display: none;
 }

 .progress-container {
     margin: 8px 0;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 11px;
 }

 .progress-bar {
     flex: 1;
     height: 5px;
     background: rgba(255, 182, 193, 0.3);
     border-radius: 3px;
     cursor: pointer;
     position: relative;
 }

 .progress {
     height: 100%;
     background: var(--primary-color);
     width: 0%;
     border-radius: 3px;
 }

 /* 新增：进度条悬浮圆点样式 - 添加过渡效果 */
 .progress-dot {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--primary-color);
     box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
     z-index: 10;
     pointer-events: none;
     /* 防止圆点影响点击事件 */
     transition: all 0.2s ease;
     opacity: 0;
     /* 初始状态为透明 */
     transform: translateY(-50%) scale(0);
     /* 初始状态为缩放0 */
 }

 .progress-bar:hover .progress-dot {
     opacity: 1;
     /* 悬停时显示 */
     transform: translateY(-50%) scale(1);
     /* 悬停时正常大小 */
 }

 .progress-bar:not(:hover) .progress-dot {
     opacity: 0;
     /* 非悬停时隐藏 */
     transform: translateY(-50%) scale(0);
     /* 非悬停时缩放为0 */
 }

 /* 当圆点存在时的过渡效果 */
 .progress-dot {
     transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
 }

 .bottom-settings {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     margin-top: 5px;
 }

 .setting-group {
     display: flex;
     gap: 5px;
 }

 .setting-btn {
     padding: 4px 10px;
     font-size: 11px;
     border: 1px solid var(--glass-border);
     background: white;
     border-radius: 10px;
     cursor: pointer;
 }

 .setting-btn.active {
     background: var(--primary-color);
     color: white;
 }

 .setting-btn:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }

 /* 音量条容器：防止溢出 */
 .volume-box {
     display: flex;
     align-items: center;
     gap: 8px;
     width: 120px;
     max-width: 30%;
     /* 限制占比防止移动端挤出线 */
 }

 #volumeRange {
     width: 100%;
     cursor: pointer;
     accent-color: var(--primary-color);
     height: 4px;
 }

 /* 引导图层 */
 #interaction-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     /* Safari支持 */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     cursor: pointer;
     color: var(--primary-color);
 }

 /* 樱花旋转动画 */
 .sakura-rotate {
     animation: rotate 3s linear infinite;
     display: inline-block;
     transform-origin: center center;
 }

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

     to {
         transform: rotate(360deg);
     }
 }

 @media (max-width: 768px) {
     .container {
         padding: 12px;
         height: 98vh;
     }

     .volume-box {
         width: 80px;
     }

     /* 修复：增大播放/暂停按钮尺寸，确保移动端可见 */
     .play-pause {
         width: 56px;
         height: 56px;
         min-width: 56px;
         /* 新增：确保按钮不会被压缩 */
         min-height: 56px;
     }

     /* 修复：确保按钮容器有足够的高度，防止按钮被裁剪 */
     .player-controls {
         min-height: 60px;
         margin-bottom: 12px;
         flex-wrap: wrap;
         /* 新增：允许按钮换行 */
         gap: 10px;
         /* 新增：减小间距以适应移动端 */
         padding: 5px 0;
         /* 新增：添加内边距 */
     }

     /* 新增：移动端调整按钮尺寸 */
     .player-controls .btn-main {
         padding: 6px 12px;
         font-size: 11px;
     }

/* 新增：确保播放按钮始终在移动端可见 */
.control-btn.play-pause {
    position: relative;
    z-index: 10;
    /* 提高层级 */
    background: var(--primary-color) !important;
    /* 确保背景色覆盖 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    /* 强制显示 */
    visibility: visible !important;
    /* 强制可见 */
    opacity: 1 !important;
    /* 强制不透明 */
}

/* 新增：确保播放按钮不会被其他元素重叠 */
#playPauseBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
}

     /* 新增：在竖屏时调整布局 */
     @media (max-width: 480px) {
         .player-controls {
             gap: 8px;
         }

         .play-pause {
             width: 52px;
             height: 52px;
             min-width: 52px;
             min-height: 52px;
         }

         .player-controls .btn-main {
             font-size: 10px;
             padding: 5px 10px;
         }

         /* 确保播放按钮不会被其他元素覆盖 */
         .control-btn.play-pause {
             order: -1;
             /* 确保播放按钮在最前面 */
             margin: 0 auto 8px !important;
             /* 居中并添加底部间距 */
             width: 52px !important;
             height: 52px !important;
             flex-shrink: 0;
             /* 防止按钮被压缩 */
         }

         /* 确保播放图标在移动端可见 */
         .play-pause .play-icon {
             border-left: 14px solid white;
             border-top: 9px solid transparent;
             border-bottom: 9px solid transparent;
         }

         .play-pause .pause-icon {
             width: 14px;
             height: 18px;
         }

         .pause-icon::before,
         .pause-icon::after {
             width: 4px;
             height: 18px;
         }
     }

     /* 横屏适配 */
     @media (min-width: 481px) and (max-height: 600px) and (orientation: landscape) {
         .player-controls {
             min-height: 50px;
             margin-bottom: 8px;
         }

         .play-pause {
             width: 48px;
             height: 48px;
             min-width: 48px;
             min-height: 48px;
         }
     }
 }

 /* 音频格式提示框样式 */
 .audio-alert {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     max-width: 400px;
     width: calc(100% - 40px);
     opacity: 0;
     transform: translateX(100%);
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     pointer-events: none;
 }

 .audio-alert.show {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
 }

 .alert-content {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 245, 0.95));
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     /* Safari支持 */
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2);
     border: 2px solid rgba(255, 182, 193, 0.3);
     display: flex;
     align-items: flex-start;
     gap: 15px;
     position: relative;
     overflow: hidden;
 }

 .alert-content::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
     border-radius: 20px 20px 0 0;
 }

 .alert-icon {
     font-size: 32px;
     animation: bounce 2s infinite;
     flex-shrink: 0;
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-5px);
     }
 }

 .alert-text {
     flex: 1;
 }

 .alert-text h3 {
     color: var(--primary-color);
     margin: 0 0 8px 0;
     font-size: 1.1rem;
     font-weight: bold;
 }

 .alert-text p {
     color: var(--text-color);
     margin: 0;
     font-size: 0.9rem;
     line-height: 1.4;
 }

 .alert-close {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(255, 182, 193, 0.2);
     border: none;
     color: var(--primary-color);
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     flex-shrink: 0;
 }

 .alert-close:hover {
     background: rgba(255, 105, 180, 0.3);
     transform: scale(1.1);
 }

 .alert-close:active {
     transform: scale(0.95);
 }

 .alert-close:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .audio-alert {
         top: 10px;
         right: 10px;
         left: 10px;
         width: auto;
         max-width: none;
     }

     .alert-content {
         padding: 15px;
         gap: 12px;
     }

     .alert-icon {
         font-size: 28px;
     }

     .alert-text h3 {
         font-size: 1rem;
     }

     .alert-text p {
         font-size: 0.85rem;
     }

     /* 更小的屏幕 */
     @media (max-width: 480px) {
         .alert-content {
             padding: 12px;
             gap: 10px;
         }

         .alert-icon {
             font-size: 24px;
         }

         .alert-text h3 {
             font-size: 0.9rem;
         }

         .alert-text p {
             font-size: 0.8rem;
         }
     }

     /* 横屏优化 */
     @media (min-width: 481px) and (max-height: 600px) and (orientation: landscape) {
         .audio-alert {
             top: 5px;
             left: 5px;
             right: 5px;
         }
     }
 }

 /* 播放列表样式 */
 .playlist-container {
     position: fixed;
     width: 90%;
     max-width: 500px;
     max-height: 70vh;
     min-width: 300px;
     min-height: 200px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 245, 0.95));
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     /* Safari支持 */
     border-radius: 20px;
     box-shadow: 0 10px 40px rgba(255, 105, 180, 0.3);
     border: 2px solid rgba(255, 182, 193, 0.3);
     display: flex;
     flex-direction: column;
     z-index: 1000;
     overflow: hidden;
     resize: both;
 }

 /* 拖拽手柄 */
 .playlist-header {
     cursor: move;
     user-select: none;
     -webkit-user-select: none;
 }

 /* 调整大小手柄 */
 .resize-handle {
     position: absolute;
     background: transparent;
     z-index: 1001;
 }

 .resize-handle-n {
     top: 0;
     left: 10px;
     right: 10px;
     height: 5px;
     cursor: n-resize;
 }

 .resize-handle-s {
     bottom: 0;
     left: 10px;
     right: 10px;
     height: 5px;
     cursor: s-resize;
 }

 .resize-handle-e {
     right: 0;
     top: 10px;
     bottom: 10px;
     width: 5px;
     cursor: e-resize;
 }

 .resize-handle-w {
     left: 0;
     top: 10px;
     bottom: 10px;
     width: 5px;
     cursor: w-resize;
 }

 .resize-handle-ne {
     top: 0;
     right: 0;
     width: 10px;
     height: 10px;
     cursor: ne-resize;
 }

 .resize-handle-nw {
     top: 0;
     left: 0;
     width: 10px;
     height: 10px;
     cursor: nw-resize;
 }

 .resize-handle-se {
     bottom: 0;
     right: 0;
     width: 10px;
     height: 10px;
     cursor: se-resize;
 }

 .resize-handle-sw {
     bottom: 0;
     left: 0;
     width: 10px;
     height: 10px;
     cursor: sw-resize;
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .playlist-container {
         top: 5%;
         left: 50%;
         transform: translate(-50%, 0);
         width: 95%;
         max-width: none;
         max-height: 80vh;
         border-radius: 15px;
     }

     .playlist-header {
         padding: 12px 15px;
         font-size: 14px;
     }

     .playlist-item {
         padding: 10px 12px;
         font-size: 13px;
     }

     .playlist-close {
         font-size: 20px;
         width: 28px;
         height: 28px;
     }

     /* 更小的屏幕 */
     @media (max-width: 480px) {
         .playlist-container {
             top: 3%;
             width: 98%;
             max-height: 75vh;
         }

         .playlist-header {
             padding: 10px 12px;
             font-size: 13px;
         }

         .playlist-item {
             padding: 8px 10px;
             font-size: 12px;
         }

         .playlist-close {
             font-size: 18px;
             width: 24px;
             height: 24px;
         }
     }

     /* 横屏优化 */
     @media (min-width: 481px) and (max-height: 600px) and (orientation: landscape) {
         .playlist-container {
             top: 2%;
             max-height: 70vh;
         }
     }
 }

 /* 平板端适配 */
 @media (min-width: 769px) and (max-width: 1024px) {
     .playlist-container {
         top: 8%;
         width: 85%;
         max-width: 600px;
     }
 }

 /* PC端大屏幕适配 */
 @media (min-width: 1921px) {
     .playlist-container {
         max-width: 600px;
         max-height: 75vh;
     }
 }

 .playlist-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 20px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
     color: white;
     font-weight: bold;
     font-size: 1rem;
 }

 .playlist-close {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     border: none;
     color: white;
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
 }

 .playlist-close:hover {
     background: rgba(255, 255, 255, 0.5);
     transform: scale(1.1);
 }

 .playlist-close:active {
     transform: scale(0.95);
 }

 .playlist-close:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }

 .playlist-content {
     flex: 1;
     overflow-y: auto;
     padding: 10px;
 }

 .playlist-item {
     padding: 12px 15px;
     margin-bottom: 8px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     gap: 10px;
     border: 1px solid transparent;
 }

 .playlist-item:hover {
     background: rgba(255, 182, 193, 0.2);
     border-color: var(--glass-border);
     transform: translateX(5px);
 }

 .playlist-item.active {
     background: linear-gradient(135deg, rgba(255, 105, 180, 0.2), rgba(255, 182, 193, 0.2));
     border-color: var(--primary-color);
 }

 .playlist-item-icon {
     font-size: 1.2rem;
     flex-shrink: 0;
 }

 .playlist-item-name {
     flex: 1;
     font-size: 0.9rem;
     color: var(--text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .playlist-item.active .playlist-item-name {
     color: var(--primary-color);
     font-weight: bold;
 }

 .playlist-empty {
     text-align: center;
     padding: 40px 20px;
     color: var(--text-color);
     opacity: 0.7;
 }

 .playlist-empty-icon {
     font-size: 3rem;
     margin-bottom: 10px;
 }

 /* 播放列表滚动条样式 */
 .playlist-content::-webkit-scrollbar {
     width: 6px;
 }

 .playlist-content::-webkit-scrollbar-track {
     background: rgba(255, 182, 193, 0.1);
     border-radius: 3px;
 }

 .playlist-content::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: 3px;
 }

 .playlist-content::-webkit-scrollbar-thumb:hover {
     background: var(--secondary-color);
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .playlist-container {
         width: 95%;
         max-height: 75vh;
         border-radius: 15px;
     }

     .playlist-header {
         padding: 12px 15px;
         font-size: 0.9rem;
     }

     .playlist-item {
         padding: 10px 12px;
     }

     .playlist-item-name {
         font-size: 0.85rem;
     }

     /* 更小的屏幕 */
     @media (max-width: 480px) {
         .playlist-container {
             width: 98%;
             max-height: 70vh;
         }

         .playlist-header {
             padding: 10px 12px;
             font-size: 0.85rem;
         }

         .playlist-item {
             padding: 8px 10px;
         }

         .playlist-item-name {
             font-size: 0.8rem;
         }
     }

     /* 横屏优化 */
     @media (min-width: 481px) and (max-height: 600px) and (orientation: landscape) {
         .playlist-container {
             max-height: 65vh;
         }
     }
 }