/* 本地化Bootstrap 5核心样式 - 前缀fxz- */
.fxz-container {
  width: 100%;
  padding-right: var(--fxz-gutter-x, 0.75rem);
  padding-left: var(--fxz-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .fxz-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .fxz-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .fxz-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .fxz-container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .fxz-container {
    max-width: 1320px;
  }
}

.fxz-row {
  --fxz-gutter-x: 1.5rem;
  --fxz-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--fxz-gutter-y));
  margin-right: calc(-0.5 * var(--fxz-gutter-x));
  margin-left: calc(-0.5 * var(--fxz-gutter-x));
}

.fxz-row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--fxz-gutter-x) * 0.5);
  padding-left: calc(var(--fxz-gutter-x) * 0.5);
  margin-top: var(--fxz-gutter-y);
}

.fxz-col {
  flex: 1 0 0%;
}

.fxz-col-auto {
  flex: 0 0 auto;
  width: auto;
}

.fxz-col-1 { width: 8.33333333%; }
.fxz-col-2 { width: 16.66666667%; }
.fxz-col-3 { width: 25%; }
.fxz-col-4 { width: 33.33333333%; }
.fxz-col-5 { width: 41.66666667%; }
.fxz-col-6 { width: 50%; }
.fxz-col-7 { width: 58.33333333%; }
.fxz-col-8 { width: 66.66666667%; }
.fxz-col-9 { width: 75%; }
.fxz-col-10 { width: 83.33333333%; }
.fxz-col-11 { width: 91.66666667%; }
.fxz-col-12 { width: 100%; }

@media (min-width: 576px) {
  .fxz-col-sm-1 { width: 8.33333333%; }
  .fxz-col-sm-2 { width: 16.66666667%; }
  .fxz-col-sm-3 { width: 25%; }
  .fxz-col-sm-4 { width: 33.33333333%; }
  .fxz-col-sm-5 { width: 41.66666667%; }
  .fxz-col-sm-6 { width: 50%; }
  .fxz-col-sm-7 { width: 58.33333333%; }
  .fxz-col-sm-8 { width: 66.66666667%; }
  .fxz-col-sm-9 { width: 75%; }
  .fxz-col-sm-10 { width: 83.33333333%; }
  .fxz-col-sm-11 { width: 91.66666667%; }
  .fxz-col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .fxz-col-md-1 { width: 8.33333333%; }
  .fxz-col-md-2 { width: 16.66666667%; }
  .fxz-col-md-3 { width: 25%; }
  .fxz-col-md-4 { width: 33.33333333%; }
  .fxz-col-md-5 { width: 41.66666667%; }
  .fxz-col-md-6 { width: 50%; }
  .fxz-col-md-7 { width: 58.33333333%; }
  .fxz-col-md-8 { width: 66.66666667%; }
  .fxz-col-md-9 { width: 75%; }
  .fxz-col-md-10 { width: 83.33333333%; }
  .fxz-col-md-11 { width: 91.66666667%; }
  .fxz-col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .fxz-col-lg-1 { width: 8.33333333%; }
  .fxz-col-lg-2 { width: 16.66666667%; }
  .fxz-col-lg-3 { width: 25%; }
  .fxz-col-lg-4 { width: 33.33333333%; }
  .fxz-col-lg-5 { width: 41.66666667%; }
  .fxz-col-lg-6 { width: 50%; }
  .fxz-col-lg-7 { width: 58.33333333%; }
  .fxz-col-lg-8 { width: 66.66666667%; }
  .fxz-col-lg-9 { width: 75%; }
  .fxz-col-lg-10 { width: 83.33333333%; }
  .fxz-col-lg-11 { width: 91.66666667%; }
  .fxz-col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .fxz-col-xl-1 { width: 8.33333333%; }
  .fxz-col-xl-2 { width: 16.66666667%; }
  .fxz-col-xl-3 { width: 25%; }
  .fxz-col-xl-4 { width: 33.33333333%; }
  .fxz-col-xl-5 { width: 41.66666667%; }
  .fxz-col-xl-6 { width: 50%; }
  .fxz-col-xl-7 { width: 58.33333333%; }
  .fxz-col-xl-8 { width: 66.66666667%; }
  .fxz-col-xl-9 { width: 75%; }
  .fxz-col-xl-10 { width: 83.33333333%; }
  .fxz-col-xl-11 { width: 91.66666667%; }
  .fxz-col-xl-12 { width: 100%; }
}

.fxz-g-4 {
  --fxz-gutter-x: 1.5rem;
  --fxz-gutter-y: 1.5rem;
}

.fxz-d-flex { display: flex !important; }
.fxz-flex-column { flex-direction: column !important; }
.fxz-h-100 { height: 100% !important; }
.fxz-mb-3 { margin-bottom: 1rem !important; }
.fxz-mt-auto { margin-top: auto !important; }
.fxz-justify-content-between { justify-content: space-between !important; }
.fxz-align-items-center { align-items: center !important; }
.fxz-gap-2 { gap: 0.5rem !important; }
.fxz-gap-3 { gap: 1rem !important; }
.fxz-position-relative { position: relative !important; }
.fxz-position-absolute { position: absolute !important; }
/* 文字溢出处理 */
.track-info h2 {
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.track-info p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
:root {
            --main-color: #4CAF50;
            --bg-dark: #111;
            --text-light: rgb(219 47 103 / 70%);
        }

        .player-container {
            background: var(--main-bg-color);
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            padding: 20px;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            border: 1px dashed var(--focus-color);
        }

        .album-cover {
            border-radius: 5px;
            overflow: hidden;
            aspect-ratio: 1/1;
            background: #000;
             /* 新增禁用样式 */
  pointer-events: none;     /* 禁止所有鼠标事件 */
  user-select: none;        /* 禁止文本选择 */
  -webkit-touch-callout: none; /* 禁用iOS长按菜单 */
        }

        .album-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .track-info h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .track-info p {
            color: var(--text-light);
            font-size: 1.5rem;
        }

       .waveform-container {
    position: relative;
    flex-grow: 1;
    height: 72px;
    top: -15px;
    overflow: hidden;
    border-radius: 1px;
}

#waveform {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 350%;
    transform: translate(-50%, -50%);
    z-index: 0; /* 降低优先级，确保 waveform-progress 在上面 */
    pointer-events: none; /* 避免波形图遮挡鼠标交互 */
}

/* 确保 waveform-progress 在最上层 */
.waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;width: 0;
    background: linear-gradient(to right, var(--main-color), #8BC34A);
    mix-blend-mode: multiply;transition: width 0.1s linear;
    pointer-events: none;
    mask-image: linear-gradient(toright,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1)100%
    );
    z-index: 2;/* 提高优先级 */
}

.waveform-progress::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width:16px;
    height: 16px;
    background: var(--main-color);
    border-radius: 50%;
    box-shadow: 02px 8px rgba(0,0,0,0.3);
    opacity: 0;
    transition: all 0.2s;
}

/*.waveform-container:hover .waveform-progress::after {*/
/*    opacity: 1;*/
/*}*/

.waveform-container #waveform {
    max-height: unset!important;
}

        .control-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--main-bg-color);
            border: 1px solid var(--text-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            transition: all 0.2s;
        }

        .control-btn:hover {
            color: white;
            border-color: white;
            transform: scale(1.05);
        }

        .extra-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            transition: all 0.2s;
            position: relative;
            background: none;
            border: none;
        }

        .extra-btn:hover {
            color: white;
            transform: scale(1.1);
        }

        .volume-slider-container {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 120px;
            border-radius: 8px;
            padding: 15px 5px;
            display: none;
            z-index: 100;
        }

        .volume-slider-container.show {
            display: block;
        }

        #volume-slider {
            width: 120px;
            height: 4px;
            transform: rotate(-90deg) translate(-45px, -55px);
            background: #555;
            -webkit-appearance: none;
            cursor: pointer;
        }

        #volume-slider::-webkit-slider-thumb {
            width: 14px;
            height: 14px;
            background: var(--main-color);
            border-radius: 50%;
            -webkit-appearance: none;
            transition: all 0.2s;
        }

        .speed-options {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: #222;
            border-radius: 5px;
            min-width: 100px;
            display: none;
            z-index: 100;
        }

        .speed-options.show {
            display: block;
        }

        .speed-option {
            padding: 8px 16px;
            cursor: pointer;
            transition: background 0.2s;
            color: var(--text-light);
        }

        .speed-option:hover {
            background: #333;
            color: white;
        }

        .active {
            color: var(--main-color) !important;
        }

        /* 新增时间显示样式 */
        .time-display {
            position: absolute;
            right: -2px;
            bottom: -2px;
            font-size: 12px;
            color: var(--text-light);
            display: flex;
            gap: 5px;
            background: rgba(0,0,0,0.0);
            padding: 2px 8px;
            border-radius: 3px;
        }