/* ==========================================================================
   x_playlist 2.0 - 高清清爽浅色主题 (高对比度 / 零错位 / 优雅动效)
   ========================================================================== */

:root {
    /* 核心色彩 - 高对比度、温润不刺眼 */
    --xp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --xp-card-bg: #ffffff;
    --xp-card-border: #e2e8f0;
    --xp-card-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    --xp-card-radius: 12px;

    /* 文字颜色 - 高清晰度与对比度，杜绝灰蒙刺眼 */
    --xp-text-title: #0f172a;       /* 标题：深黑蓝，清晰醒目 */
    --xp-text-artist: #475569;      /* 歌手：中深灰，层次分明 */
    --xp-text-time: #64748b;        /* 时间：清爽冷灰 */
    --xp-text-lrc: #64748b;         /* 普通歌词 */
    --xp-text-lrc-active: #2563eb;  /* 当前歌词：清晰宝蓝 */

    /* 主题色 - 雅致护眼蓝 */
    --xp-primary: #2563eb;
    --xp-primary-light: #eff6ff;
    --xp-primary-border: #bfdbfe;

    /* 进度条与滑块 */
    --xp-bar-bg: #e2e8f0;
    --xp-bar-loaded: #cbd5e1;
    --xp-bar-played: #2563eb;

    /* 列表相关 */
    --xp-list-bg: #ffffff;
    --xp-list-hover: #f8fafc;
    --xp-list-active: #eff6ff;
    --xp-list-active-text: #1d4ed8;
    --xp-list-border: #f1f5f9;
}

/* 1. 播放器主体卡片 */
.aplayer {
    font-family: var(--xp-font) !important;
    background: var(--xp-card-bg) !important;
    border: 1px solid var(--xp-card-border) !important;
    box-shadow: var(--xp-card-shadow) !important;
    border-radius: var(--xp-card-radius) !important;
    margin: 16px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.aplayer:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09) !important;
}

/* 2. 封面图片区 (保证不扭曲、不错位) */
.aplayer .aplayer-pic {
    float: left !important;
    height: 72px !important;
    width: 72px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 8px !important;
    margin: 10px !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.aplayer.aplayer-withlrc .aplayer-pic {
    height: 86px !important;
    width: 86px !important;
    margin: 10px !important;
}

/* 封面居中播放按钮美化 */
.aplayer .aplayer-pic .aplayer-button {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    opacity: 0.85 !important;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease !important;
}

.aplayer .aplayer-pic:hover .aplayer-button {
    opacity: 1 !important;
    background: var(--xp-primary) !important;
    border-color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* 播放时的封面黑胶光晕微动效 */
.aplayer.aplayer-playing .aplayer-pic {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--xp-primary-border), 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* 3. 信息区域 */
.aplayer .aplayer-info {
    margin-left: 92px !important;
    padding: 10px 14px 10px 4px !important;
    height: 92px !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
}

.aplayer.aplayer-withlrc .aplayer-info {
    margin-left: 106px !important;
    height: 106px !important;
    padding: 10px 14px 10px 4px !important;
}

/* 4. 歌曲标题与歌手 - 高清晰、绝不错位 */
.aplayer .aplayer-info .aplayer-music {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--xp-text-title) !important;
    letter-spacing: -0.01em !important;
}

.aplayer .aplayer-info .aplayer-music .aplayer-author {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--xp-text-artist) !important;
    margin-left: 8px !important;
}

/* 5. 律动音频小波形 (紧随歌手之后，不破坏布局) */
.xp-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.xp-wave span {
    width: 2.5px;
    height: 3px;
    background: #94a3b8;
    border-radius: 1px;
    transition: height 0.15s ease, background 0.3s ease;
}

.aplayer.aplayer-playing .xp-wave span {
    background: var(--xp-primary);
    animation: xp-wave-jump 0.9s ease-in-out infinite alternate;
}

.aplayer.aplayer-playing .xp-wave span:nth-child(1) { animation-delay: 0.1s; }
.aplayer.aplayer-playing .xp-wave span:nth-child(2) { animation-delay: 0.3s; }
.aplayer.aplayer-playing .xp-wave span:nth-child(3) { animation-delay: 0.2s; }
.aplayer.aplayer-playing .xp-wave span:nth-child(4) { animation-delay: 0.4s; }

@keyframes xp-wave-jump {
    0% { height: 3px; }
    50% { height: 12px; }
    100% { height: 6px; }
}

/* 6. 进度条 (清晰、不卡顿、平滑拖拽) */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0 !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    height: 4px !important;
    background: var(--xp-bar-bg) !important;
    border-radius: 4px !important;
    position: relative !important;
    transition: height 0.2s ease !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar {
    height: 6px !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    height: 100% !important;
    background: var(--xp-bar-loaded) !important;
    border-radius: 4px !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 100% !important;
    background: var(--xp-bar-played) !important;
    border-radius: 4px !important;
    position: relative !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important;
    margin-right: -6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid var(--xp-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.8) !important;
    transition: transform 0.2s ease !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
    transform: scale(1.15) !important;
}

/* 7. 时间与图标控制区 - 对齐与对比度优化 */
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
    color: var(--xp-text-time) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    height: 20px !important;
    line-height: 20px !important;
    margin-top: 4px !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-ptime {
    color: var(--xp-text-title) !important;
    font-weight: 600 !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-dtime {
    color: var(--xp-text-time) !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
    width: 16px !important;
    height: 16px !important;
    margin-left: 8px !important;
    opacity: 0.75 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
    fill: var(--xp-text-artist) !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover {
    opacity: 1 !important;
    transform: scale(1.15);
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
    fill: var(--xp-primary) !important;
}

/* 8. 歌词区域 */
.aplayer .aplayer-lrc {
    margin: 4px 0 !important;
    height: 32px !important;
}

.aplayer .aplayer-lrc p {
    font-size: 12px !important;
    color: var(--xp-text-lrc) !important;
    line-height: 16px !important;
    height: 16px !important;
    font-weight: 500 !important;
    opacity: 0.65 !important;
    transition: all 0.3s ease !important;
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    font-size: 13px !important;
    color: var(--xp-text-lrc-active) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* 9. 歌单列表 (清晰无错位、柔和浅色高亮) */
.aplayer .aplayer-list {
    border-top: 1px solid var(--xp-card-border) !important;
    background: var(--xp-list-bg) !important;
}

.aplayer .aplayer-list ol li {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
    border-top: 1px solid var(--xp-list-border) !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.aplayer .aplayer-list ol li:first-child {
    border-top: none !important;
}

.aplayer .aplayer-list ol li:hover {
    background: var(--xp-list-hover) !important;
}

.aplayer .aplayer-list ol li .aplayer-list-index {
    color: var(--xp-text-time) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-right: 10px !important;
}

.aplayer .aplayer-list ol li .aplayer-list-title {
    color: var(--xp-text-title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.aplayer .aplayer-list ol li .aplayer-list-author {
    color: var(--xp-text-artist) !important;
    font-size: 12px !important;
}

/* 激活的歌曲项 - 清晰浅蓝底色与深蓝文字，绝不刺眼 */
.aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--xp-list-active) !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-index {
    color: var(--xp-list-active-text) !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-title {
    color: var(--xp-list-active-text) !important;
    font-weight: 700 !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-author {
    color: var(--xp-list-active-text) !important;
    font-weight: 500 !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
    background: var(--xp-primary) !important;
    width: 3px !important;
    height: 18px !important;
    top: 9px !important;
    border-radius: 2px !important;
}

/* 列表滚动条优化 */
.aplayer .aplayer-list ol::-webkit-scrollbar {
    width: 6px !important;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-track {
    background: transparent !important;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}