/* 基础样式设置 */
html, body {height: 100%;margin: 0;overflow: hidden;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
/* 隐藏音频元素 */
audio {display: none;}
/* 应用容器 */
#app {height: 100%;}
.normalMode {display: flex;flex-direction: column;height: 100%;}
/* 视图容器 */
.music-view {display: flex;justify-content: space-between;align-items: center;width: 90%;max-width: 1200px;margin: 0 auto;/* height: calc(100% - 6.4em); */padding: 1em 0;box-sizing: border-box;flex: 1;}
/* 信息展示区域 */
.music-view .track-info-container {width: 27%;display: flex;justify-content: center;flex-direction: column;align-items: center;height: 100%;max-height: 480px;}
.music-view .track-info {text-align: center;font-size: 1.5em;margin: 0;font-weight: 500;color: #333;}
.music-view .track-info.top {display: none;}
.music-view .track-info.bottom {margin: 1em 0 0;}
.music-view .track-info .artist {font-size: 0.7em;display: block;color: #767676;margin: 0.5em 0 0;}
/* 封面图片容器 */
.music-view .cover-container {overflow: hidden;max-width: min(100%, 300px);max-height: min(100%, 300px);width: 100%;}
.music-view .cover-wrapper {margin: 0 auto;height: 100%;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);position: relative;overflow: hidden;box-sizing: border-box;aspect-ratio: 1 / 1;transition: transform 0.3s ease;animation: rotate 30s linear infinite;animation-play-state: paused;border-radius: 50%;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);border: 3px solid #333;}
.music-view .cover-wrapper.playing {animation-play-state: running;}
.music-view .cover-wrapper:hover {transform: scale(1.03);}
.music-view .cover-image {position: absolute;height: 100%;left: 0;top: 0;object-fit: cover;}
/* 歌词显示区域 */
.music-view .lyrics-container {overflow: hidden;padding: 0;box-sizing: border-box;border-left: 1px solid #eee;padding: 0 2em;width: 67%;max-height: 480px;height: 100%;}
.music-view .lyrics-list {padding: 0;text-align: center;list-style: none;transition: transform 0.2s ease;margin: 0;display: flex;flex-direction: column;justify-content: center;height: 100%;}
.music-view .lyrics-list .lyrics-item {transition: 0.2s;color: #8a8a8a;width: 66.6%;margin: 0 auto;transition: none;line-height: 2;}
.music-view .lyrics-list .lyrics-item.active {color: #333;font-size: 1.3em;font-weight: 600;width: 100%;}
/* 控制区域 */
.player-controls {/* position: fixed; *//* bottom: 0; *//* left: 0; */width: 100%;background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);box-shadow: 0 -5px 20px rgba(0,0,0,0.1);backdrop-filter: blur(10px);z-index: 100;margin-top: auto;}
.player-controls .content-wrapper {max-width: 1200px;margin: 0 auto;padding: 0.625em 0;width: 90%;display: flex;justify-content: space-between;align-items: center;}
.player-controls .cover-container {width: 5em;background: #333;position: relative;aspect-ratio: 1 / 1;flex-shrink: 0;margin: 0 1em 0 0;border-radius: 8px;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.player-controls .cover-image {position: absolute;width: 100%;left: 0;top: 0;object-fit: cover;border-radius: 8px;}
.player-controls .controls-right {width: 100%;}
.player-controls .controls-row {width: 100%;display: flex;justify-content: space-between;position: relative;margin: 0;align-items: center;}
.player-controls .track-title {font-weight: 500;font-size: 1.1em;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;}
.player-controls .progress-container {width: 100%;height: 1.5em;overflow: hidden;cursor: pointer;margin: 0;}
.player-controls .progress-container::before {content: "";position: absolute;width: 100%;height: 4px;top: 0;bottom: 0;margin: auto;background: rgba(141, 141, 141, 0.3);z-index: 1;border-radius: 2px;}
.player-controls .progress-bar {display: block;background: linear-gradient(to right, #ff758c, #ff7eb3);height: 4px;z-index: 3;position: absolute;top: 0;bottom: 0;margin: auto;transition: width 0.1s ease;border-radius: 2px;}
.player-controls .buffered-container {position: absolute;left: 0;width: 100%;height: 4px;top: 0;bottom: 0;margin: auto;z-index: 2;list-style: none;padding: 0;transform-origin: 0 0;}
.player-controls .buffered-container .buffered-segment {position: absolute;height: 100%;background-color: rgba(51, 51, 51, 0.3);border-radius: 2px;}
/* 音乐控制按钮 */
.player-controls .control-buttons {display: flex;justify-content: space-between;align-items: center;gap: 1em;}
.player-controls .control-button {width: 2em;height: 2em;background: white;border-radius: 50%;text-align: center;display: flex;justify-content: center;align-items: center;color: #f06292;box-sizing: border-box;box-shadow: 0 4px 10px rgba(0,0,0,0.1);cursor: pointer;user-select: none;transition: all 0.2s ease;}
.player-controls .control-button:hover {transform: scale(1.1);box-shadow: 0 6px 15px rgba(0,0,0,0.2);}
.player-controls .control-button:active {transform: scale(0.95);}
.player-controls .control-button.play {font-size: 1.25em;padding-left: 0.15em;}
.player-controls .control-button.loading {font-size: 1.25em;animation: rotate 3s linear infinite;color: #666;}
.player-controls .control-button.pause {font-size: 1.25em;}
.player-controls .control-button.volume {margin: 0;background: transparent;box-shadow: none;color: #f06292;font-weight: bold;width: auto;height: auto;}
.player-controls .volume-container {display: flex;justify-content: space-between;align-items: center;}
.player-controls .volume-slider {width: 4em;height: 1.5em;position: relative;cursor: pointer;margin-left: 0.5em;}
.player-controls .volume-slider::before {content: "";position: absolute;width: 100%;height: 4px;top: 0;bottom: 0;margin: auto;background: rgba(0, 0, 0, 0.2);z-index: 1;border-radius: 2px;}
.player-controls .volume-level {content: "";position: absolute;width: 100%;height: 4px;top: 0;bottom: 0;margin: auto;background: linear-gradient(to right, #ff758c, #ff7eb3);z-index: 2;border-radius: 2px;}
.player-controls .time-display {font-style: normal;color: #333;font-weight: 500;}
.player-controls .time-display.bottom {display: none;}
/* 系统按钮区域 */
.player-controls .system-buttons {position: relative;display: flex;justify-content: space-between;align-items: center;gap: 1em;}
.player-controls .system-button {cursor: pointer;user-select: none;color: #333;display: flex;justify-content: center;align-items: center;border-radius: 50%;transition: all 0.2s ease;line-height: 2em;}
.player-controls .system-button:hover {/* background: rgba(255, 255, 255, 0.3); */transform: scale(1.1);}
.player-controls ul {padding: 0;margin: 0;list-style: none;}
/* 音乐列表 */
.player-controls .music-list {margin: 0;position: absolute;bottom: 100%;right: 0;width: 25em;background: white;color: #333;box-sizing: border-box;overflow: hidden;height: auto;padding: 0;z-index: 4;box-shadow: 0 -5px 25px rgba(0,0,0,0.2);border-radius: 12px 0 0 12px;transform: translateY(0);transition: transform 0.3s ease;display: none;}
.player-controls .music-list.active {display: block;}
.player-controls .music-list .icon {font-size: 1em;margin: 0;color: inherit;}
.player-controls .music-list .track-item.active-item,
.player-controls .music-list .tab-item.active-item {background: linear-gradient(to right, #ff9a9e, #fad0c4);color: white;font-weight: 500;}
.player-controls .music-list .tabs {width: 100%;display: flex;justify-content: space-between;align-items: center;background: #f8f9fa;}
.player-controls .music-list .tab-item {width: 100%;padding: 0;text-align: center;display: block;line-height: 3em;cursor: pointer;transition: all 0.2s ease;font-weight: 500;}
.player-controls .music-list .tab-item:hover {background: #e9ecef;}
.player-controls .music-list .playlists-container {overflow: hidden;width: 100%;}
.player-controls .music-list .playlist {overflow: auto;height: 25em;scrollbar-color: #cccccc #f0f0f0;scrollbar-width: thin;width: 100%;display: none;}
.player-controls .music-list .playlist.active-item {display: block;}
.player-controls .music-list .playlist-item {margin: 0;border-bottom: 1px solid #eee;}
.player-controls .music-list .playlist-header {white-space: nowrap;color: #333;line-height: 3em;display: flex;justify-content: space-between;position: sticky;padding: 0 1.5em;align-items: center;box-sizing: border-box;background: #f8f9fa;top: 0;cursor: pointer;font-weight: 500;transition: all 0.2s ease;z-index: 1;}
.player-controls .music-list .playlist-header:hover {background: #e9ecef;}
.player-controls .music-list .playlist-header.active {background: linear-gradient(to right, #ff9a9e, #fad0c4);color: white;}
.player-controls .music-list .track-item {position: relative;color: #333;cursor: pointer;padding: 0.75em 1.5em;transition: all 0.2s ease;}
.player-controls .music-list .track-item:hover {background: #f8f9fa;}
.player-controls .music-list .track-item.active {background: #ffe6ee;}
.player-controls .music-list .track-info {white-space: nowrap;line-height: 1.5em;position: relative;padding: 0 0 0 2em;}
.player-controls .music-list .track-number {position: absolute;left: 0;width: 1.5em;text-align: left;color: #999;font-size: 0.9em;}
.player-controls .music-list .track-artist {padding: 0.25em 0 0;line-height: 1.2em;font-size: 0.8em;display: block;color: #767676;}
.player-controls .music-list .track-controls {white-space: nowrap;line-height: 2em;position: absolute;top: 0.75em;right: 1em;display: flex;}
.player-controls .music-list .add-button,
.player-controls .music-list .love-button,
.player-controls .music-list .remove-button {padding: 0 0 0 0.75em;color: #999;transition: all 0.2s ease;}
.player-controls .music-list .add-button:hover,
.player-controls .music-list .love-button:hover,
.player-controls .music-list .remove-button:hover {color: #f06292;transform: scale(1.1);}
.player-controls .music-list .love-button.liked {color: #e74c3c;}
/* 设置列表 */
.player-controls .settings-panel {margin: 0;list-style: none;position: absolute;bottom: 100%;right: 0;width: fit-content;background: white;color: #333;box-sizing: border-box;overflow: auto;height: auto;padding: 0;z-index: 4;box-shadow: 0 -5px 25px rgba(0,0,0,0.2);border-radius: 12px 0 0 12px;transform: translateY(0);transition: transform 0.3s ease;/* min-width: 12em; */display: none;}
.player-controls .settings-panel.active {display: block;}
.player-controls .settings-panel .setting-item {white-space: nowrap;color: #333;/* line-height: 3em; */display: flex;justify-content: space-between;position: relative;padding: 0.5em 1em;align-items: center;border-bottom: 1px solid #eee;transition: all 0.2s ease;gap: 0.5em;}
.player-controls .settings-panel .setting-item:last-child {border-bottom: none;}
.player-controls .settings-panel .setting-item:hover {background: #f8f9fa;}
.player-controls .settings-panel .setting-option {}
.player-controls .settings-panel .setting-option input[type="checkbox"] {width: 1em;height: 1em;cursor: pointer;}
.player-controls .settings-panel .setting-option select {padding: 0.05em;border-radius: 4px;border: 1px solid #ddd;background: white;cursor: pointer;}
.player-controls .settings-panel .setting-label {font-weight: 500;}
/* 动画效果 */
@keyframes rotate {from {    transform: rotate(0deg);}to {    transform: rotate(360deg);}}
/* 竖屏模式 */
.portrait .music-view {flex-direction: column;width: 100%;padding: 0 0 1em 0;height: calc(100% - 7em);}
.portrait .music-view .track-info-container {width: 100%;padding: 2em 0;width: 100%;height: auto;}
.portrait .music-view .track-info.top {display: block;margin: 0 0 1em;}
.portrait .music-view .track-info.bottom {display: none;}
.portrait .music-view .cover-container {max-width: min(70%, 300px);max-height: min(40vh, 300px);}
.portrait .music-view .lyrics-container {width: 100%;border: none;height: 100%;max-height: initial;padding: 1em;}
.portrait .player-controls .content-wrapper {width: 90%;}
.portrait .player-controls .progress-container {height: 2em;}
.portrait .player-controls .track-title {display: none;}
/* 横屏模式 */
.landscape .music-view .track-info .artist {display: inline-block;margin: 0 0 0 1em;}
.landscape .player-controls .track-title {display: none;}
.landscape .player-controls .progress-container {height: 2em;margin: -0.5em 0 0.5em;}
.landscape .player-controls .time-display.top {display: none;}
.landscape .player-controls .time-display.bottom {display: block;text-wrap: nowrap;}
/* 滚动条样式 */
.player-controls .music-list .playlist::-webkit-scrollbar,
.music-view .lyrics-list::-webkit-scrollbar {width: 6px;}
.player-controls .music-list .playlist::-webkit-scrollbar-track,
.music-view .lyrics-list::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 3px;}
.player-controls .music-list .playlist::-webkit-scrollbar-thumb,
.music-view .lyrics-list::-webkit-scrollbar-thumb {background: #cccccc;border-radius: 3px;}
.player-controls .music-list .playlist::-webkit-scrollbar-thumb:hover,
.music-view .lyrics-list::-webkit-scrollbar-thumb:hover {background: #bbbbbb;}