<!-- Mini Player -->
<div class="music-player__mini" id="mp-mini" title="双击打开面板 / 单击播放暂停">
    <div class="music-player__mini-cover" id="mp-mini-cover" style="background-image: url('/images/music.png')"></div>
    <svg class="music-player__progress-ring" viewBox="0 0 80 80">
        <circle
            stroke="var(--music-player-theme)"
            stroke-width="3"
            fill="transparent"
            r="34"
            cx="40"
            cy="40"
            style="stroke-dasharray: 213.6; stroke-dashoffset: 213.6;"
            id="mp-mini-progress"
        />
    </svg>
    <div class="music-player__mini-overlay">
        <div class="music-player__mini-status" id="mp-mini-status">
            <i class="fa fa-play"></i>
        </div>
    </div>
</div>

<!-- Background Lyrics Container -->
<div class="music-player__bg-lyrics" id="mp-bg-lyrics">
    <div class="music-player__bg-lyrics-inner" id="mp-bg-lyrics-inner"></div>
</div>

<!-- Main Panel -->
<div class="music-player__panel" id="mp-panel">
    <div class="music-player__backdrop" id="mp-backdrop"></div>
    <aside class="music-player__content">
        <header class="music-player__header">
            <div class="music-player__info">
                <h3 class="music-player__title" id="mp-title">Loading...</h3>
                <div class="music-player__artist" id="mp-artist">-</div>
            </div>
            <button class="music-player__close-btn" id="mp-close">✕</button>
        </header>
        
        <section class="music-player__main">
            <div class="music-player__cover-wrap">
                <div class="music-player__cover" id="mp-cover" style="background-image: url('/images/music.png')"></div>
                <div class="music-player__loading" id="mp-loading" style="display: none;">
                    <div class="music-player__loading-spinner"></div>
                    <div class="music-player__loading-text">加载中...</div>
                </div>
            </div>

            <!-- Lyrics Container -->
            <div class="music-player__lyrics" id="mp-lyrics-container" style="display: none;">
                <div class="music-player__lyrics-inner" id="mp-lyrics-inner"></div>
            </div>

            <div class="music-player__controls">
                <div class="music-player__progress">
                    <span class="music-player__time" id="mp-time-current">0:00</span>
                    <div class="music-player__seek-wrapper" id="mp-seek-wrapper">
                        <div class="music-player__seek-bg"></div>
                        <div class="music-player__seek-buffered" id="mp-seek-buffered"></div>
                        <div class="music-player__seek-progress" id="mp-seek-progress"></div>
                        <input type="range" class="music-player__seek" id="mp-seek" min="0" max="100" value="0">
                    </div>
                    <span class="music-player__time" id="mp-time-total">0:00</span>
                </div>

                <div class="music-player__btn-group">
                    <button class="music-player__btn" id="mp-prev" title="上一首">
                        <i class="fa fa-step-backward"></i>
                    </button>
                    <button class="music-player__btn music-player__btn--main" id="mp-play" title="播放/暂停">
                        <i class="fa fa-play"></i>
                    </button>
                    <button class="music-player__btn" id="mp-next" title="下一首">
                        <i class="fa fa-step-forward"></i>
                    </button>
                </div>

                <div class="music-player__extra-controls">
                    <button class="music-player__text-btn" id="mp-mode" title="顺序播放">
                        <i class="fa fa-sort-amount-asc"></i>
                    </button>
                    <button class="music-player__text-btn" id="mp-lrc-toggle" title="显示歌词">
                        <i class="fa-regular fa-file-lines"></i>
                    </button>
                    <button class="music-player__text-btn" id="mp-list-toggle" title="播放列表">
                        <i class="fa fa-list-ul"></i>
                    </button>
                </div>
            </div>
        </section>

        <section class="music-player__list" id="mp-list">
            <!-- List Header with search and scroll controls -->
            <!-- Mobile List Close Button (Hidden on PC, visible on mobile when list is open) -->
            <button type="button" class="music-player__list-close-mobile" id="mp-list-close-mobile" style="display: none;">
                <span class="music-player__list-close-handle"></span>
                <span class="music-player__list-close-text">播放列表</span>
                <i class="fa-solid fa-angles-down"></i>
            </button>

            <div class="music-player__list-header">
                <div class="music-player__search-box">
                    <i class="fa fa-search music-player__search-icon"></i>
                    <input type="text" class="music-player__search-input" id="mp-search" placeholder="搜索歌曲或歌手...">
                    <button class="music-player__search-clear" id="mp-search-clear" style="display: none;">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <button class="music-player__scroll-to-current" id="mp-scroll-to-current" title="定位到当前播放">
                    <i class="fa fa-location-arrow"></i>
                </button>
            </div>
            <div class="music-player__list-content" id="mp-list-content">
                <div id="mp-list-items">
                    <!-- List items injected here -->
                </div>
                <div class="music-player__list-empty" id="mp-list-empty" style="display: none;">
                    <i class="fa fa-inbox"></i>
                    <span>未找到匹配的歌曲</span>
                </div>
            </div>
        </section>
    </aside>
</div>