:root{
  --c1:#7c5cfc; --c2:#ec4899;
  --bg-dark:0.25;
  --glow:0.6;
  --card:rgba(255,255,255,.08);
  --card-bd:rgba(255,255,255,.16);
  --txt:#f5f5fb;
  --txt-dim:rgba(255,255,255,.62);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--txt);
  background:#0a0a14;
  min-height:100vh;
  overflow-x:hidden;
  transition:background 1.2s ease;
}
/* 背景明暗遮罩：--bg-dark 大=抑郁深色，小=活泼浅亮 */
body::after{content:'';position:fixed;inset:0;z-index:1;background:rgba(6,7,13,var(--bg-dark));pointer-events:none;transition:background 1.2s ease}
#photo{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease, background-image 1.4s ease;
  filter:blur(40px) saturate(1.2);
  transform:scale(1.1);
  animation:kenburns 24s ease-in-out infinite alternate;
}
#photo.show{opacity:.38}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.18) translate(-1.5%,1.5%)}}
#bg{position:fixed; inset:0; z-index:1; width:100%; height:100%}
.wrap{
  position:relative; z-index:2;
  max-width:920px; margin:0 auto; padding:42px 22px 60px;
}
header{text-align:center; margin-bottom:38px}
.brand{
  font-family:'Fraunces',serif; font-weight:700; font-size:46px; letter-spacing:-.5px;
  background:linear-gradient(120deg,#fff,var(--txt-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.brand span{
  background:linear-gradient(120deg,var(--c1),var(--c2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tag{margin-top:10px; color:var(--txt-dim); font-size:14px}

.picker{animation:fade .5s ease}
.pick-title{font-family:'Fraunces',serif; font-size:28px; font-weight:600; text-align:center}
.pick-sub{text-align:center; color:var(--txt-dim); font-size:14px; margin:8px 0 26px}
.moods{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mood{
  cursor:pointer; border:1px solid var(--card-bd); border-radius:20px;
  background:var(--card); backdrop-filter:blur(14px);
  padding:22px 14px; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.mood:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.4); box-shadow:0 14px 40px rgba(0,0,0,.35)}
.mood .em{font-size:38px; display:block; margin-bottom:10px}
.mood .nm{font-weight:700; font-size:17px}
.mood .ds{font-size:12.5px; color:var(--txt-dim); margin-top:4px}

.player{animation:fade .5s ease}
.hidden{display:none!important}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.back{
  background:transparent; border:1px solid var(--card-bd); color:var(--txt-dim);
  padding:8px 16px; border-radius:12px; cursor:pointer; font-size:13px; margin-bottom:22px;
  transition:color .2s,border-color .2s;
}
.back:hover{color:#fff; border-color:rgba(255,255,255,.4)}

.now{display:flex; gap:20px; align-items:center; margin-bottom:22px}
.cover{
  width:120px; height:120px; border-radius:18px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cover img{width:100%; height:100%; object-fit:cover}
.cover-ph{font-size:46px; color:rgba(255,255,255,.85)}
.meta{min-width:0}
.mood-tag{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.4px;
  padding:4px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(120deg,var(--c1),var(--c2)); margin-bottom:10px;
}
.title{font-family:'Fraunces',serif; font-size:26px; font-weight:600; line-height:1.2; word-break:break-word}
.artist{color:var(--txt-dim); font-size:15px; margin-top:4px}

.broadcast{
  border:1px solid var(--card-bd); border-radius:18px; background:var(--card);
  backdrop-filter:blur(14px); padding:18px 20px; margin-bottom:22px;
}
.broadcast-label{font-size:12px; color:var(--txt-dim); letter-spacing:.5px; margin-bottom:8px}
.broadcast-text{font-size:17px; line-height:1.6; min-height:52px; font-weight:500}

.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.ctrl{
  border:1px solid var(--card-bd); background:var(--card); color:#fff;
  padding:12px 22px; border-radius:14px; cursor:pointer; font-size:15px; font-weight:600;
  transition:transform .15s, background .2s;
}
.ctrl:hover{transform:translateY(-2px)}
.ctrl.primary{background:linear-gradient(120deg,var(--c1),var(--c2)); border:none}
.ctrl.like{color:var(--txt-dim)}
.ctrl.like.active{color:#ff3b5c; border-color:#ff3b5c; background:rgba(255,59,92,.16); animation:likebeat .5s ease}
@keyframes likebeat{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.voice-row{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--txt-dim)}
.voice-row select{
  background:rgba(0,0,0,.3); color:#fff; border:1px solid var(--card-bd);
  border-radius:10px; padding:8px 10px; font-size:13px;
}
.progress{height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden}
.bar{height:100%; width:0; background:linear-gradient(90deg,var(--c1),var(--c2)); transition:width .25s linear}
.status{margin-top:12px; font-size:12.5px; color:var(--txt-dim); min-height:16px}
.pp-overlay{
  display:block; width:100%; margin-top:14px; padding:16px; border:none; border-radius:14px;
  background:linear-gradient(120deg,var(--c1),var(--c2)); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.95}50%{transform:scale(1.02); opacity:1}}

.home{
  display:inline-block; margin-top:34px; color:var(--txt-dim); text-decoration:none; font-size:13px;
  transition:color .2s;
}
.home:hover{color:#fff}

@media(max-width:680px){
  .moods{grid-template-columns:repeat(2,1fr)}
  .brand{font-size:38px}
  .now{flex-direction:column; text-align:center}
  .voice-row{margin-left:0}
}