:root{
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
}

/* 基础 */
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text-primary);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #0f172a;
  min-height:100vh;
  overflow-x:hidden;
}

/* 页面模糊全屏背景（专辑封面的模糊版本） */
.album-background{
  position:fixed; inset:0;
  background-size:cover;
  background-position:center;
  filter: blur(20px) brightness(0.55);
  z-index:-2;
  transition: background-image .6s ease-in-out;
}

/* 加载中状态 */
.album-background.loading,
.album-art.loading {
  background: linear-gradient(90deg, #1e293b, #334155, #1e293b);
  background-size: 200% 200%;
  animation: loadingShimmer 2s infinite;
}

@keyframes loadingShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 页面主体 */
.music-container{
  max-width:1200px;
  margin:0 auto;
  padding:28px 18px;
  position:relative;
  z-index:1;
}

/* 头部文字 */
.header{text-align:center;padding:28px 0 18px}
.header h1{
  font-size:2.6rem;
  margin:0 0 6px;
  background:linear-gradient(90deg,#ff6b6b,#ffa86b,#ffe66d,#6bff9e,#6bc7ff,#9d6bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.header p{color:var(--text-secondary); margin:0; font-size:1rem}

/* player section：专辑作为背景，播放器叠加 */
.player-section{
  display:block;
  width:100%;
  margin-bottom:28px;
}

.album-art{
  position:relative;
  width:100%;
  max-width:500px;
  height:500px;
  margin:0 auto;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  transition: background-image 0.3s ease;
}

/* 播放器叠加层 */
.player-overlay{
  position:absolute;
  right:32px;
  bottom:28px;
  left:32px;
  max-width:760px;
  margin:0 auto;
  pointer-events:auto;
}

/* 备用封面图片 */
.album-art img#current-cover {
  display:none;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* APlayer 外观定制 */
.aplayer{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

.aplayer .aplayer-controls,
.aplayer .aplayer-list,
.aplayer .aplayer-body{
  background:transparent !important;
}

.aplayer .aplayer-bar{
  height:6px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius:999px !important;
  margin-top:8px !important;
}

.aplayer .aplayer-bar .aplayer-played{
  background: linear-gradient(90deg, rgba(255,107,107,0.9), rgba(107,199,255,0.9)) !important;
}

.aplayer .aplayer-slider-handler{
  width:10px !important;
  height:10px !important;
  margin-top:-2px !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.aplayer .aplayer-icon{
  color: #fff !important;
}

.aplayer-list{ background: transparent !important; }

.aplayer-list .aplayer-list-title {
    background: none;
  color: #222 !important;
}

/* 歌词区样式 */
.lyrics-section{ margin-top:20px; }
.section-title{ text-align:center; font-size:1.2rem; margin-bottom:12px; color:var(--text-secondary) }

.lyrics-container{
  max-height:320px;
  overflow-y:auto;
  padding:6px 10px;
  color:var(--text-secondary);
  line-height:2;
  text-align:center;
  font-style:italic;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lyrics-container::-webkit-scrollbar {
  display: none;
}

.lyric-line{
  opacity:0;
  transform:translateY(12px);
  transition: opacity .35s cubic-bezier(.2,.9,.25,1), transform .35s cubic-bezier(.2,.9,.25,1);
  padding:6px 0;
  font-size:1rem;
  color:var(--text-secondary);
}

.lyric-line.visible{ opacity:1; transform:translateY(0) }
.lyric-past{ color: rgba(255,255,255,0.65); font-weight:500; font-size:0.98rem }
.lyric-active{
  font-weight:700;
  font-size:1.12rem;
  background:linear-gradient(90deg,#ff6b6b,#ffa86b,#ffe66d,#6bff9e,#6bc7ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 3rem;
    background: transparent;
    color: #7f8c8d;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-links {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-links a {
    color: #7f8c8d;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-links a:hover {
    color: #3498db;
}