:root{
  --bg:#eef2f9;
  --surface:#fff;
  --surface-alt:#eef4fc;
  --text:#1b2330;
  --text-soft:#5b6675;
  --line:#dbe4ef;
  --brand:#3f5bd9;
  --brand-hover:#3349b8;
  --brand-soft:#e8edfd;
  --accent:#e0a33e;
  --accent-soft:#fbf1dd;
  --radius:10px;
  --shadow:0 1px 2px rgba(23,43,77,.05),0 6px 20px rgba(23,43,77,.07);
  /* 新增：动态背景与玻璃拟态 */
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.75);
  --blob-1:#7f9cff;
  --blob-2:#ffd28a;
  --blob-3:#8fe3d2;
  --blob-4:#f2a9c8;
  --disc:rgba(63,91,217,.16);
  --shell:880px;
  --shell-half:calc(var(--shell) / 2);
}

*{padding:0;margin:0;box-sizing:border-box;font-family:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;}

html{
  /* 不设底色：html 自带背景时浏览器会把它提到画布层，body 里的固定背景层就被整块盖住 */
  background:transparent;
  /* 只有比内容列宽时才让出滚动条位置，避免手机端白白少 15px */
  scrollbar-gutter:stable;
}
@supports not (scrollbar-gutter:stable){ html{overflow-y:scroll;} }

body{
  position:relative;
  min-height:100vh;
  padding:9px 14px 0;
  line-height:1.7;
  font-size:16px;
  color:var(--text);
  background:var(--bg);
  /* 柔和光晕铺满整页，页面高起来也不会出现断层色块 */
  background-image:
    radial-gradient(56vw 40vw at 12% -6%, rgba(127,156,255,.28), transparent 62%),
    radial-gradient(50vw 38vw at 92% 10%, rgba(255,210,138,.32), transparent 64%),
    radial-gradient(58vw 44vw at 80% 98%, rgba(143,227,210,.26), transparent 66%),
    radial-gradient(44vw 32vw at 4% 92%, rgba(242,169,200,.2), transparent 68%);
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* 内容列居中 + 三层盒子把 APlayer 的 offsetParent 链顶着：
   三个嵌套层的 offsetLeft 之和 = 内容列左边距，进度条点击坐标才准。
   若用 body{max-width} 居中，APlayer 拿不到居中偏移，
   会出现「点哪都跳到歌曲结尾」。 */
.shell,
.shell-mid,
.shell-in{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
}
@media (min-width:calc(var(--shell) + 30px)){
  .shell-mid{position:relative;right:var(--shell-half);}
  .shell-in{position:relative;left:var(--shell-half);}
}
@media (min-width:768px){ body{font-size:19px;} }

/* ---------- 动态背景 ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  /* 别在这里放不透明底色：这层会把 body 的光晕整块盖掉 */
  animation:breathe 36s ease-in-out infinite;
}
.blob{
  position:absolute;
  width:46vmax;
  height:46vmax;
  border-radius:50%;
  filter:blur(64px);
  opacity:.5;
  will-change:transform;
}
.blob-1{background:var(--blob-1);top:-14vmax;left:-10vmax;animation:drift-a 26s ease-in-out infinite;}
.blob-2{background:var(--blob-2);right:-16vmax;top:18vmax;animation:drift-b 32s ease-in-out infinite;}
.blob-3{background:var(--blob-3);bottom:-18vmax;left:22vmax;animation:drift-c 38s ease-in-out infinite;}
.blob-4{background:var(--blob-4);width:34vmax;height:34vmax;bottom:6vmax;right:6vmax;animation:drift-b 44s ease-in-out infinite reverse;}

@keyframes breathe{
  0%,100%{filter:saturate(100%) brightness(1);}
  50%{filter:saturate(122%) brightness(1.04);}
}

@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(8vmax,6vmax,0) scale(1.12);}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.05);}
  50%{transform:translate3d(-10vmax,8vmax,0) scale(.92);}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,0) scale(.95);}
  50%{transform:translate3d(6vmax,-8vmax,0) scale(1.1);}
}

/* 细网格纹理，让背景更有层次 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(27,35,48,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,35,48,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 78%);
}

/* 背景里的黑胶唱片，旋转得很慢，只做氛围 */
.disc{
  position:fixed;
  z-index:-2;
  pointer-events:none;
  color:var(--disc);
}
.disc-1{
  width:min(34vw,380px);
  top:9vh;
  left:calc(50% - var(--shell-half) - min(30vw,300px));
  animation:spin 120s linear infinite;
  opacity:.9;
}
.disc-2{
  width:min(22vw,240px);
  bottom:8vh;
  right:calc(50% - var(--shell-half) - min(22vw,220px));
  animation:spin 160s linear infinite reverse;
  opacity:.8;
}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* 桌面端两侧不会这么挤，窄屏直接收起，免得跟卡片打架 */
@media (max-width:1100px){ .disc{display:none;} }

/* ---------- 头部 ---------- */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding-bottom:1em;
  margin-bottom:2em;
  border-bottom:1px solid var(--line);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0;}
.brand img{width:34px;height:34px;flex:none;filter:drop-shadow(0 4px 10px rgba(63,91,217,.28));}
h1{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.01em;
  background:linear-gradient(92deg, var(--text) 20%, var(--brand) 62%, var(--accent) 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tagline{
  font-size:.7rem;
  color:var(--text-soft);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:560px){ .tagline{display:none;} h1{font-size:1.25rem;} }

/* ---------- 播放器卡片 ---------- */
.stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:10px;
  padding:0 4px 10px;
  border-bottom:1px solid rgba(27,35,48,.07);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-soft);
  animation:rise .8s .06s cubic-bezier(.2,.7,.3,1) both;
}
.stage-head .now{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--brand);}
.stage-head .now::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
.stage-head .status{display:flex;align-items:center;gap:.45rem;white-space:nowrap;}
.stage-head .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#41c48a;
  box-shadow:0 0 0 0 rgba(65,196,138,.5);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(65,196,138,.45);}
  70%{box-shadow:0 0 0 7px rgba(65,196,138,0);}
  100%{box-shadow:0 0 0 0 rgba(65,196,138,0);}
}
@media (max-width:420px){ .stage-head .status{font-size:.62rem;} }

.stage{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:calc(var(--radius) + 6px);
  padding:14px;
  box-shadow:0 1px 2px rgba(23,43,77,.06), 0 18px 44px -18px rgba(23,43,77,.28), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  animation:rise .8s .08s cubic-bezier(.2,.7,.3,1) both;
}
@media (min-width:768px){ .stage{padding:18px;} }

/* APlayer 主题微调：更贴合卡片与主色 */
.aplayer{background:transparent !important;box-shadow:none !important;color:var(--text);}
.aplayer .aplayer-info{border-bottom-color:var(--line) !important;}
.aplayer .aplayer-list ol li{border-top-color:var(--line) !important;}
.aplayer .aplayer-list ol li:hover{background:var(--brand-soft) !important;}
.aplayer .aplayer-list ol li.aplayer-list-light{background:var(--brand-soft) !important;}
.aplayer .aplayer-list ol li .aplayer-list-index{color:var(--text-soft) !important;}
.aplayer .aplayer-list ol li .aplayer-list-author{color:var(--text-soft) !important;}
.aplayer .aplayer-lrc p{color:var(--text-soft) !important;}
.aplayer .aplayer-lrc p.aplayer-lrc-current{color:var(--brand) !important;font-weight:600;}
.aplayer .aplayer-info .aplayer-music .aplayer-title{color:var(--text) !important;}
.aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played{background:var(--brand) !important;}
.aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{background:var(--brand) !important;}
.aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{background:#cfd9ea !important;}
.aplayer .aplayer-bar-wrap .aplayer-bar{background:#e2e9f4 !important;}
.aplayer .aplayer-thumb{border:none !important;}

/* 封面：圆角 + 阴影，跟卡片呼应 */
.aplayer .aplayer-pic{
  border-radius:12px !important;
  overflow:hidden;
}
.aplayer.aplayer-withlrc .aplayer-pic,
.aplayer .aplayer-pic{
  box-shadow:0 6px 18px -8px rgba(23,43,77,.5);
}
/* 封面上的播放/暂停按钮：底色用主色，纯白图标 */
.aplayer .aplayer-pic .aplayer-button{background:rgba(28,38,60,.42) !important;}
.aplayer .aplayer-pic .aplayer-play{border-color:rgba(255,255,255,.92) !important;}

/* 曲名/歌手留点呼吸 */
.aplayer .aplayer-info .aplayer-music{margin:0 0 12px 4px !important;}
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-weight:600;letter-spacing:.01em;}
.aplayer .aplayer-info .aplayer-music .aplayer-author{color:var(--text-soft) !important;}

/* 播放列表：5 首全展开（index.html 里已不再传 listMaxHeight），
   行高 / 序号 / 当前曲目都用主色系，滚动条细一点 */
.aplayer .aplayer-list ol{
  counter-reset:none;
  padding:2px 0 4px !important;
}
.aplayer .aplayer-list ol li{
  height:38px !important;
  line-height:38px !important;
  font-size:13px !important;
  border-top-color:rgba(27,35,48,.06) !important;
  border-radius:8px;
  transition:background .22s ease, padding-left .22s ease !important;
}
.aplayer .aplayer-list ol li:first-child{border-top:none !important;}
.aplayer .aplayer-list ol li:hover{padding-left:20px !important;}
.aplayer .aplayer-list ol li .aplayer-list-index{
  display:inline-block;
  width:1.3em;
  margin-right:10px !important;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
  background:linear-gradient(90deg, var(--brand-soft), rgba(232,237,253,.35)) !important;
}
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-index{color:var(--brand) !important;font-weight:600;}
.aplayer .aplayer-list ol li .aplayer-list-cur{
  border-radius:0 2px 2px 0;
  height:18px !important;
  top:10px !important;
}
.aplayer .aplayer-list ol::-webkit-scrollbar{width:4px;}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb{background:rgba(63,91,217,.3);}

/* 歌词行距松一点，正在唱的那行更醒目 */
.aplayer .aplayer-lrc p{letter-spacing:.02em;}
.aplayer .aplayer-lrc p.aplayer-lrc-current{text-shadow:0 1px 12px rgba(63,91,217,.22);}

/* ---------- 提示 & 页脚 ---------- */
.hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  margin:1.6em 0 0;
  font-size:.72rem;
  color:var(--text-soft);
  text-align:center;
  letter-spacing:.06em;
}
footer{
  margin-top:auto;
  padding:2.2em 0 1.6em;
  text-align:center;
  font-size:.72rem;
  color:var(--text-soft);
  line-height:1.9;
  animation:rise .8s .16s cubic-bezier(.2,.7,.3,1) both;
}
footer .rule{
  display:block;
  width:56px;
  height:2px;
  margin:0 auto 1em;
  border-radius:2px;
  background:linear-gradient(90deg,transparent, var(--brand), var(--accent), transparent);
}
footer a{color:var(--brand);text-decoration:none;border-bottom:1px dashed rgba(63,91,217,.45);}
footer a:hover{color:var(--brand-hover);border-bottom-style:solid;}
.heart{color:#e2557a;display:inline-block;animation:beat 1.8s ease-in-out infinite;}

/* 提示行前的小声波：三根柱子高低起伏，延迟错开 */
.hint-wave{
  display:inline-flex;
  align-items:flex-end;
  gap:3px;
  height:11px;
}
.hint-wave i{
  display:block;
  width:3px;
  height:11px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--blob-3));
  transform-origin:bottom;
  animation:wave 1.5s ease-in-out infinite;
}
.hint-wave i:nth-child(2){animation-delay:.22s;}
.hint-wave i:nth-child(3){animation-delay:.44s;}

@keyframes wave{
  0%,100%{transform:scaleY(.35);}
  50%{transform:scaleY(1);}
}

@keyframes beat{
  0%,100%{transform:scale(1);}
  20%{transform:scale(1.22);}
  40%{transform:scale(1);}
}
@keyframes rise{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  .blob,.bg,.disc,.heart,.stage-head,.stage-head .dot{animation:none !important;}
  header,.stage,.stage-head,footer{animation:none !important;}
  .aplayer .aplayer-list ol li{transition:none !important;}
}