/* ==========================================================================
   音乐播放器全局主题微调变量定义
   ========================================================================== */

/* 深夜 (Midnight) */
[data-player-theme="midnight"] {
  --mp-accent: rgba(255, 255, 255, 0.08);
  --mp-accent-hover: rgba(255, 255, 255, 0.15);
  --mp-glow: rgba(255, 255, 255, 0.05);
  --mp-bubble-bg: rgba(15, 15, 20, 0.65);
}

/* 迷雾 (Foggy) */
[data-player-theme="foggy"] {
  --mp-accent: rgba(126, 168, 149, 0.12);
  --mp-accent-hover: rgba(126, 168, 149, 0.2);
  --mp-glow: rgba(126, 168, 149, 0.08);
  --mp-bubble-bg: rgba(22, 28, 25, 0.65);
}

/* 深海 (Deep Sea) */
[data-player-theme="deepsea"] {
  --mp-accent: rgba(126, 164, 204, 0.12);
  --mp-accent-hover: rgba(126, 164, 204, 0.2);
  --mp-glow: rgba(126, 164, 204, 0.08);
  --mp-bubble-bg: rgba(8, 16, 30, 0.65);
}

/* 雪季 (Snow Season) */
[data-player-theme="snow"] {
  --mp-accent: rgba(144, 164, 174, 0.12);
  --mp-accent-hover: rgba(144, 164, 174, 0.2);
  --mp-glow: rgba(144, 164, 174, 0.08);
  --mp-bubble-bg: rgba(33, 37, 40, 0.65);
}

/* ==========================================================================
   全局容器与悬浮控制 (完美融合 theme.css)
   ========================================================================== */
.music-player-container {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 999;
  font-family: inherit;
  user-select: none;
}

@media (min-width: 481px) {
  .music-player-container {
    right: calc(50% - 240px + 20px);
  }
}

/* 悬浮微章 - 音乐符号 */
.music-player-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: rgba(255, 255, 255, 0.6);
  animation: mp-float-y 6s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s, visibility 0.3s;
}

/* 当被用户设置隐藏时 */
.music-player-badge.hidden-badge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.music-player-badge:hover {
  transform: scale(1.08);
  color: rgba(255, 255, 255, 0.95);
}

.music-player-badge svg {
  width: 18px;
  height: 18px;
}

/* 徽章飘移动效 */
@keyframes mp-float-y {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ==========================================================================
   控制台小挂件 (磨砂透色，不遮挡全局 theme)
   ========================================================================== */
.music-player-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 260px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(30px) saturate(130%);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  transform: scale(0.95) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  transform-origin: bottom right;
  color: rgba(255, 255, 255, 0.8);
}

.music-player-panel.expanded {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mp-panel-decor {
  text-align: right;
  margin-bottom: 6px;
}

.mp-decor-text {
  font-size: 9px;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mp-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-album-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.mp-album-cover svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

.mp-song-info {
  flex-grow: 1;
  min-width: 0;
}

.mp-song-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.mp-song-status {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.mp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-icon-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
}

.mp-icon-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.05);
}

/* 进度条 */
.mp-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mp-time-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 28px;
  font-family: monospace;
}

.mp-time-label.right {
  text-align: right;
}

.mp-progress-bar-wrap {
  flex-grow: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  position: relative;
  cursor: pointer;
}

.mp-progress-bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  width: 0;
  position: relative;
}

/* 控制按钮 */
.mp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.mp-btn-main {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.mp-btn-main:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   角色低语半透明气泡
   ========================================================================== */
.music-player-bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: var(--mp-bubble-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 24px 10px 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11.5px;
  line-height: 1.6;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  letter-spacing: 0.5px;
}

.music-player-bubble.show {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.mp-bubble-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.mp-bubble-close:hover {
  opacity: 1;
}

.mp-bubble-author {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ==========================================================================
   全新设计：完整独立全屏设置子页面 (毛玻璃透明透色，完美适配 theme.css)
   ========================================================================== */
.mp-page-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px; /* 桌面端居中限制 */
  height: 100vh;
  /* 使用毛玻璃低饱和底色，能够让全局 theme.css 背景色完全透现，不会产生色块割裂 */
  background: rgba(0, 0, 0, 0.35);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  backdrop-filter: blur(35px) saturate(140%);
  -webkit-backdrop-filter: blur(35px) saturate(140%);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.85);
}

.mp-page-overlay.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.mp-page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 24px calc(24px + env(safe-area-inset-bottom)) 24px;
  box-sizing: border-box;
}

.mp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
}

.mp-page-back {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}

.mp-page-back:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: scale(1.05);
}

.mp-header-title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mp-page-title {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 4px 0;
  letter-spacing: 2px;
}

/* ==========================================================================
   星轨 / 时间轴导航 (Timeline Navigation)
   ========================================================================== */
.timeline-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 16px 24px;
  margin-top: 12px;
}

.timeline-track {
  position: absolute;
  top: 20px; /* 精准对齐圆点中心 */
  left: 36px;
  right: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%; /* JS 动态计算平移 */
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
  cursor: pointer;
  width: 68px;
}

.node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(18, 18, 22, 0.8);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: content-box;
}

.node-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  transition: color 0.4s, transform 0.4s;
  white-space: nowrap;
}

/* 激活节点扩展动效 */
.timeline-node.active .node-dot {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.timeline-node.active .node-label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  transform: translateY(2px);
}

/* ==========================================================================
   页面视图与内容排版
   ========================================================================== */
.mp-page-body {
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
}

.mp-page-body::-webkit-scrollbar {
  display: none;
}

.mp-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 6px 0 30px 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-view.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* 歌曲列表与 Equalizer 律动跳跃 */
.mp-list-songs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.mp-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.3s;
}

.mp-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.mp-list-item.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.mp-item-track-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* 律动音柱跳跃动画 */
.mp-equalizer {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.mp-equalizer span {
  width: 2px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  animation: mp-bounce 1.2s infinite ease-in-out alternate;
}

.mp-equalizer span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.mp-equalizer span:nth-child(2) { height: 14px; animation-delay: 0.4s; }
.mp-equalizer span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.mp-equalizer span:nth-child(4) { height: 8px; animation-delay: 0.5s; }

@keyframes mp-bounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

.mp-list-item.active .mp-item-track-icon svg { display: none; }
.mp-list-item.active .mp-equalizer { display: flex; }

.mp-item-info {
  flex-grow: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-item-name {
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.mp-item-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* 表单组件 */
.mp-section-title {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 24px 0 12px 0;
  letter-spacing: 1px;
}

.mp-form-group {
  margin-bottom: 16px;
}

.mp-form-group label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
}

.mp-input, .mp-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s;
}

.mp-input:focus, .mp-select:focus {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
}

.mp-btn-submit {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.mp-btn-submit:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 偏好设置项与极简开关 */
.mp-switch-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mp-switch-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-switch-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.mp-switch-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

.mp-switch-btn {
  position: relative;
  width: 42px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.mp-switch-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mp-switch-btn.active {
  background: rgba(255, 255, 255, 0.85);
}

.mp-switch-btn.active::after {
  transform: translateX(20px);
  background: #000;
}

/* 字卡碎片云 */
.mp-word-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mp-word-tag {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.mp-word-tag:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.mp-word-tag-del {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.mp-word-tag-del:hover {
  color: #ff4d4d;
}

/* 四格主题选择 */
.mp-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.mp-theme-option {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 0;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s;
}

.mp-theme-option.active {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  background: var(--mp-accent);
}

/* 主界面导航触发入口 */
.music-page-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  vertical-align: middle;
}

.music-page-trigger-btn:hover {
  transform: scale(1.05);
}

.music-page-trigger-btn svg {
  width: 100%;
  height: 100%;
}