/* ============================================================
   星梦共创舞台 · style.css
   深色渐变 + 玻璃拟态 + 微动效
   ============================================================ */

:root{
  --bg-1:#0b0618;
  --bg-2:#160a2e;
  --bg-3:#27104f;
  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.12);
  --text:#f3eefc;
  --text-dim:#c3b4e0;
  --text-faint:#8f7fb0;
  --accent:#a78bfa;
  --accent-2:#f0abfc;
  --accent-3:#67e8f9;
  --pink:#f472b6;
  --gold:#fbbf24;
  --green:#4ade80;
  --red:#fb7185;
  --grad-main:linear-gradient(135deg,#7c3aed,#c026d3 55%,#f0abfc);
  --grad-cyan:linear-gradient(135deg,#22d3ee,#818cf8);
  --grad-gold:linear-gradient(135deg,#fbbf24,#fb7185);
  --shadow-glow:0 8px 40px rgba(124,58,237,.35);
  --radius:18px;
  --radius-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 700px at 0% 20%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(1000px 800px at 100% 90%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2) 55%,#0d0620);
  min-height:100vh;
  overflow-x:hidden;
}

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
::selection{ background:rgba(167,139,250,.4); }

/* ---------- 背景层 ---------- */
#bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:orbFloat 16s ease-in-out infinite; }
.orb-1{ width:340px; height:340px; left:-80px; top:12%; background:rgba(124,58,237,.55); }
.orb-2{ width:300px; height:300px; right:-60px; top:38%; background:rgba(236,72,153,.42); animation-delay:-5s; }
.orb-3{ width:360px; height:360px; left:30%; bottom:-120px; background:rgba(34,211,238,.35); animation-delay:-10s; }
@keyframes orbFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-40px) scale(1.12); }
}

.app{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 18px 110px; }

/* ---------- 玻璃卡片与通用按钮 ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.28);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:scale(.96); }
.btn.primary{
  background:var(--grad-main);
  color:#fff; box-shadow:0 6px 20px rgba(192,38,211,.4);
}
.btn.primary:hover{ filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 10px 26px rgba(192,38,211,.55); }
.btn.ghost{
  background:var(--glass-strong); color:var(--text); border:1px solid var(--glass-border);
}
.btn.ghost:hover{ background:rgba(167,139,250,.16); transform:translateY(-2px); }
.btn.mini{ padding:7px 14px; font-size:13px; }
.btn.mini.primary{ box-shadow:none; }
.btn.mini.voted{ background:rgba(74,222,128,.16); color:#86efac; border:1px solid rgba(74,222,128,.35); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none!important; }

/* ---------- 顶部导航 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; margin:14px 0 22px;
  border-radius:16px;
}
.logo{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.logo-mark{
  font-size:20px; color:var(--accent-2);
  animation:twinkle 2.6s ease-in-out infinite;
  text-shadow:0 0 14px var(--accent-2);
}
.logo-text{ font-size:17px; font-weight:800; letter-spacing:1px;
  background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes twinkle{ 0%,100%{opacity:1; transform:scale(1) rotate(0);} 50%{opacity:.55; transform:scale(1.25) rotate(18deg);} }

.desktop-nav{ display:flex; gap:4px; }
.nav-btn{
  padding:8px 16px; border-radius:10px; font-size:14px; font-weight:600;
  color:var(--text-dim); position:relative; transition:color .2s, background .2s;
}
.nav-btn:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-btn.active{ color:#fff; background:rgba(167,139,250,.18); }
.nav-btn.active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:16px; height:3px; border-radius:3px; background:var(--grad-main);
}

.hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span{ width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 移动端抽屉 ---------- */
.drawer-mask{
  position:fixed; inset:0; z-index:60; background:rgba(5,2,14,.6);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .28s;
}
.drawer-mask.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:61; width:280px;
  border-radius:0 20px 20px 0; padding:20px 16px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(-105%); transition:transform .3s cubic-bezier(.2,.9,.3,1);
  background:rgba(16,8,36,.88);
}
.drawer.show{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; margin-bottom:18px; }
.drawer-close{ margin-left:auto; font-size:26px; color:var(--text-dim); line-height:1; padding:2px 8px; }
.drawer-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px;
  font-size:15px; font-weight:600; color:var(--text-dim); transition:.2s;
}
.drawer-item span{ font-size:19px; }
.drawer-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.drawer-item.active{ background:rgba(167,139,250,.2); color:#fff; }
.drawer-foot{ margin-top:auto; text-align:center; color:var(--text-faint); font-size:12px; letter-spacing:2px; }

/* ---------- 底部导航（移动端） ---------- */
.bottom-nav{
  display:none; position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:55; width:calc(100% - 28px); max-width:520px;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  border-radius:20px; justify-content:space-around;
  background:rgba(18,9,38,.78);
}
.bnav-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; border-radius:12px; font-size:11px; color:var(--text-faint);
  transition:.2s; flex:1;
}
.bnav-btn .bnav-icon{ font-size:20px; filter:grayscale(.4); transition:.25s; }
.bnav-btn.active{ color:#fff; }
.bnav-btn.active .bnav-icon{ filter:none; transform:translateY(-2px) scale(1.12);
  text-shadow:0 4px 14px rgba(240,171,252,.8); }
.bnav-btn.active{ background:rgba(167,139,250,.16); }

/* ---------- 主内容 ---------- */
.main{ animation:pageIn .45s ease; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.page{ display:flex; flex-direction:column; gap:22px; padding-top:4px; }

.section-title{
  display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; margin-top:6px;
}
.section-title::before{ content:""; width:5px; height:20px; border-radius:4px; background:var(--grad-main); box-shadow:0 0 12px rgba(192,38,211,.7); }
.section-title .more{ margin-left:auto; font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; }

.page-head{ text-align:center; padding:10px 0 4px; }
.page-head h1{ font-size:26px; font-weight:900; letter-spacing:1px; }
.page-head p{ color:var(--text-dim); margin-top:8px; font-size:14px; }
.page-head .head-icon{ font-size:30px; display:block; margin-bottom:6px; }

/* 滚动显现 */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- 首页 Hero ---------- */
.hero{
  position:relative; text-align:center; padding:56px 18px 42px; overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(600px 320px at 50% -10%, rgba(192,38,211,.4), transparent 65%),
    radial-gradient(400px 260px at 15% 110%, rgba(34,211,238,.25), transparent 60%),
    linear-gradient(180deg, rgba(20,9,44,.4), rgba(11,6,24,.55));
  border:1px solid rgba(255,255,255,.1);
}
.hero::before{
  content:""; position:absolute; inset:-60% -20% auto; height:180%;
  background:conic-gradient(from 0deg, transparent, rgba(167,139,250,.16), transparent 30%);
  animation:spinSlow 16s linear infinite; pointer-events:none;
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.hero-badge{
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px;
  background:rgba(167,139,250,.16); border:1px solid rgba(167,139,250,.35);
  font-size:13px; color:var(--accent-2); letter-spacing:1px; margin-bottom:18px;
}
.hero-title{
  font-size:clamp(38px, 8vw, 62px); font-weight:900; letter-spacing:4px; line-height:1.1;
  background:linear-gradient(120deg,#fff 10%,#f0abfc 40%,#a78bfa 70%,#67e8f9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 26px rgba(192,38,211,.4));
  animation:titleGlow 3.6s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,100%{ filter:drop-shadow(0 4px 22px rgba(192,38,211,.35)); }
  50%{ filter:drop-shadow(0 4px 34px rgba(240,171,252,.65)); }
}
.hero-sub{ color:var(--text-dim); margin:16px auto 26px; font-size:15px; line-height:1.8; }

/* 倒计时 */
.countdown{ display:flex; justify-content:center; gap:12px; margin:26px 0 30px; }
.cd-box{
  min-width:74px; padding:12px 8px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.cd-box span{ display:block; font-size:28px; font-weight:800; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-box label{ font-size:12px; color:var(--text-faint); letter-spacing:2px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 总进度卡 ---------- */
.total-card{ padding:22px 22px 18px; }
.total-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.total-head h2{ font-size:17px; font-weight:800; }
.total-pct{ font-size:22px; font-weight:900; background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }

.progress{
  height:14px; border-radius:999px; background:rgba(255,255,255,.08);
  overflow:hidden; position:relative;
}
.progress-fill{
  height:100%; border-radius:999px; position:relative;
  background:linear-gradient(90deg,#7c3aed,#d946ef,#f0abfc);
  background-size:200% 100%; animation:gradShift 3s linear infinite;
  transition:width .8s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 0 16px rgba(217,70,239,.7);
}
@keyframes gradShift{ to{ background-position:200% 0; } }
.progress-fill::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.45), transparent 55%);
}
.total-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:13px; color:var(--text-dim); }
.total-meta b{ color:#fff; font-size:15px; }
.total-meta .fans{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-2); }

.milestones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.milestone{
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; border:1px solid var(--glass-border);
  color:var(--text-faint); transition:.25s;
}
.milestone .dot{ width:8px; height:8px; border-radius:50%; background:#3b2f5e; }
.milestone.locked{ filter:grayscale(.4); }
.milestone.locked::after{ content:"· 未达成"; opacity:.7; }
.milestone.reached{
  color:#c4b5fd; border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.14);
}
.milestone.reached .dot{ background:#a78bfa; box-shadow:0 0 10px #a78bfa; }
.milestone.reached::after{ content:"· 已达成"; color:#86efac; }

/* ---------- 歌曲卡片（通用） ---------- */
.grid{ display:grid; gap:14px; }
.top-songs{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }

.song-card{ display:flex; gap:14px; padding:16px; align-items:flex-start; transition:transform .25s, box-shadow .25s; }
.song-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(124,58,237,.25); }

.song-cover{
  position:relative; width:86px; height:86px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.song-cover.grad1{ background:linear-gradient(135deg,#6366f1,#a855f7); }
.song-cover.grad2{ background:linear-gradient(135deg,#22d3ee,#818cf8); }
.song-cover.grad3{ background:linear-gradient(135deg,#d946ef,#fb7185); }
.song-cover.grad4{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.song-cover.grad5{ background:linear-gradient(135deg,#10b981,#22d3ee); }
.song-cover.grad6{ background:linear-gradient(135deg,#8b5cf6,#ec4899); }
.cover-note{ animation:noteFloat 2.6s ease-in-out infinite; text-shadow:0 0 16px rgba(255,255,255,.8); }
@keyframes noteFloat{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-6px) rotate(6deg);} }
.unlock-badge{
  position:absolute; top:-8px; right:-8px; font-size:11px; font-weight:700; padding:4px 9px;
  border-radius:999px; color:#052e16; background:linear-gradient(135deg,#bef264,#4ade80);
  box-shadow:0 4px 14px rgba(74,222,128,.5); animation:popIn .4s cubic-bezier(.3,1.4,.5,1);
}
@keyframes popIn{ from{ transform:scale(0);} to{ transform:scale(1);} }

.song-info{ flex:1; min-width:0; }
.song-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.song-title-row h3{ font-size:16px; font-weight:800; }
.song-tag{
  font-size:11px; padding:2px 9px; border-radius:999px; font-weight:600;
  color:var(--accent-2); background:rgba(240,171,252,.14); border:1px solid rgba(240,171,252,.3);
}
.song-artist{ color:var(--text-faint); font-size:12.5px; margin:4px 0 12px; }
.song-progress{ height:9px; }
.song-meta{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim); margin-top:8px; }
.song-meta b{ color:#fff; }
.song-meta .pct{ color:var(--accent-2); font-weight:700; }
.song-actions{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.remain{ font-size:12.5px; color:var(--gold); font-weight:600; margin-left:auto; }

/* ---------- 特效 ---------- */
.effect-grid{ grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); }
.effect-card{ padding:16px; display:flex; flex-direction:column; gap:12px; transition:transform .25s, box-shadow .25s; }
.effect-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(192,38,211,.22); }

.effect-preview{
  position:relative; height:150px; border-radius:14px; overflow:hidden;
  background:radial-gradient(circle at 50% 130%, rgba(124,58,237,.4), rgba(8,4,20,.92));
  border:1px solid rgba(255,255,255,.08);
}
.effect-head{ display:flex; align-items:center; gap:10px; }
.effect-icon{ font-size:26px; filter:drop-shadow(0 0 10px rgba(240,171,252,.7)); animation:twinkle 3s ease-in-out infinite; }
.effect-name{ font-size:16px; font-weight:800; }
.effect-desc{ color:var(--text-dim); font-size:13px; line-height:1.7; }
.effect-progress{ font-size:12.5px; color:var(--text-dim); margin-top:4px; }
.effect-progress b{ color:#fff; }
.effect-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.effect-trigger{ font-size:12.5px; color:var(--gold); font-weight:600; }
.triggered-badge{ color:var(--green); font-weight:800; font-size:13px; }

/* --- 特效预览动画 --- */
.fx-float{ position:absolute; opacity:0; pointer-events:none; }
/* 烟花 */
.fw-p{ position:absolute; left:50%; top:78%; width:6px; height:6px; border-radius:50%;
  animation:fw 1.9s ease-out infinite; }
@keyframes fw{
  0%{ transform:translate(-50%,0) scale(1); opacity:1; }
  28%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), var(--dy)) scale(.2); opacity:0; }
}
.fw-launch{ position:absolute; left:50%; bottom:0; width:3px; height:26px;
  background:linear-gradient(to top,#fff,transparent); animation:fwUp 1.9s ease-out infinite; }
@keyframes fwUp{ 0%{ transform:translateY(0); opacity:0;} 18%{ opacity:1;} 55%{ transform:translateY(-86px); opacity:0;} 100%{ transform:translateY(-86px); opacity:0;} }
/* 激光 */
.laser-beam{
  position:absolute; left:50%; top:112%; width:4px; height:230px;
  background:linear-gradient(to top, transparent 0%, var(--lc) 55%, #fff 100%);
  transform-origin:top center; animation:laserSweep 3.4s ease-in-out infinite;
  box-shadow:0 0 14px var(--lc), 0 0 30px var(--lc);
}
@keyframes laserSweep{
  0%,100%{ transform:rotate(var(--a1)); opacity:.9; }
  50%{ transform:rotate(var(--a2)); opacity:.55; }
}
.laser-flash{ position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); animation:flashPulse 3.4s ease-in-out infinite; }
@keyframes flashPulse{ 0%,100%{opacity:.25;} 50%{opacity:.85;} }
/* 爱心光雨 */
.fall-item{ position:absolute; top:-40px; animation:fallDown linear infinite; }
@keyframes fallDown{
  0%{ transform:translateY(0) rotate(0); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateY(200px) rotate(var(--rot)); opacity:0; }
}
/* 彩带 */
.conf-ribbon{
  position:absolute; top:-16px; width:9px; height:16px; border-radius:2px;
  animation:confDown linear infinite; box-shadow:0 0 6px rgba(255,255,255,.25);
}
@keyframes confDown{
  0%{ transform:translateY(0) rotate(0); opacity:1; }
  100%{ transform:translateY(185px) rotate(var(--rot)); opacity:.2; }
}
/* 星光雨 */
.star-dot{
  position:absolute; top:-24px; font-size:16px; color:#fff;
  text-shadow:0 0 12px #67e8f9, 0 0 24px #a5f3fc;
  animation:starDown linear infinite;
}
@keyframes starDown{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(190px) scale(.6); opacity:0; }
}
/* AR 弹幕 */
.dan-line{
  position:absolute; white-space:nowrap; font-size:13px; font-weight:700;
  color:var(--lc, #fff); animation:danMove linear infinite;
  text-shadow:0 0 8px currentColor; opacity:.9;
}
@keyframes danMove{ from{ transform:translateX(100%);} to{ transform:translateX(-110%);} }

/* ---------- 共创广场 ---------- */
.slogan-form{ display:flex; gap:10px; padding:14px; }
.slogan-form input{
  flex:1; padding:12px 16px; border-radius:12px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); color:#fff; font-size:14px; outline:none;
  transition:border .2s, box-shadow .2s;
}
.slogan-form input::placeholder{ color:var(--text-faint); }
.slogan-form input:focus{ border-color:rgba(167,139,250,.7); box-shadow:0 0 0 3px rgba(167,139,250,.2); }

.slogan-wall{ display:flex; flex-direction:column; gap:12px; }
.slogan{
  padding:15px 16px; display:flex; flex-direction:column; gap:10px;
  transition:transform .25s, box-shadow .25s;
}
.slogan:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(124,58,237,.2); }
.slogan-text{ font-size:15px; font-weight:600; line-height:1.6; }
.slogan-foot{ display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:12.5px; }
.slogan-author{ font-weight:700; color:var(--accent-2); }
.like-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border); color:var(--text-dim); font-size:12.5px; transition:.2s;
}
.like-btn:hover{ border-color:rgba(244,114,182,.5); }
.like-btn.liked{ color:#fda4af; background:rgba(244,114,182,.15); border-color:rgba(244,114,182,.5); animation:popIn .3s ease; }

.polls{ display:flex; flex-direction:column; gap:16px; }
.poll{ padding:18px; }
.poll-q{ font-size:15px; font-weight:800; margin-bottom:14px; }
.poll-option{
  display:flex; flex-direction:column; gap:6px; width:100%; text-align:left;
  padding:11px 14px; margin-bottom:10px; border-radius:12px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); transition:.2s;
}
.poll-option:hover{ border-color:rgba(167,139,250,.5); }
.poll-option .opt-bar{
  position:absolute; inset:0; width:0; border-radius:12px; transition:width .8s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(90deg, rgba(124,58,237,.45), rgba(217,70,239,.35));
}
.poll-option .opt-row{ display:flex; justify-content:space-between; align-items:center; position:relative; font-size:13.5px; font-weight:600; }
.poll-option .opt-pct{ color:var(--accent-2); font-weight:800; }
.poll-option.voted{ border-color:rgba(240,171,252,.6); background:rgba(167,139,250,.12); }
.poll-vote-hint{ font-size:12px; color:var(--text-faint); text-align:right; }

/* ---------- 我的贡献 ---------- */
.profile{ display:flex; align-items:center; gap:18px; padding:22px; flex-wrap:wrap; }
.avatar{
  width:74px; height:74px; border-radius:50%; flex:none;
  background:var(--grad-main); display:flex; align-items:center; justify-content:center;
  font-size:32px; box-shadow:var(--shadow-glow); position:relative;
  animation:avatarGlow 3s ease-in-out infinite;
}
@keyframes avatarGlow{ 0%,100%{ box-shadow:0 0 20px rgba(192,38,211,.4);} 50%{ box-shadow:0 0 34px rgba(240,171,252,.7);} }
.avatar::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--accent-3); border-right-color:var(--pink);
  animation:spinSlow 4s linear infinite;
}
.profile-info{ flex:1; min-width:180px; }
.profile-name-row{ display:flex; align-items:center; gap:10px; }
.profile-name{ font-size:20px; font-weight:900; }
.name-edit{ color:var(--text-faint); font-size:14px; padding:4px; transition:.2s; }
.name-edit:hover{ color:var(--accent-2); transform:rotate(20deg); }
.name-input{
  padding:6px 10px; border-radius:10px; border:1px solid rgba(167,139,250,.6);
  background:rgba(255,255,255,.07); color:#fff; font-size:16px; font-weight:800; width:170px; outline:none;
}
.profile-level{ color:var(--text-dim); font-size:13px; margin-top:6px; }
.level-bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.09); margin-top:10px; overflow:hidden; }
.level-bar .progress-fill{ height:100%; }
.profile-rank{ text-align:center; }
.profile-rank .rank-num{ font-size:30px; font-weight:900; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.profile-rank .rank-label{ font-size:12px; color:var(--text-faint); }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat{ padding:18px 10px; text-align:center; transition:transform .25s; }
.stat:hover{ transform:translateY(-4px); }
.stat .num{ font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.stat .num.grad-pink{ background:linear-gradient(120deg,#f0abfc,#f472b6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .num.grad-cyan{ background:linear-gradient(120deg,#67e8f9,#818cf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .num.grad-gold{ background:linear-gradient(120deg,#fbbf24,#fb7185); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .label{ font-size:12px; color:var(--text-faint); margin-top:4px; }

.achieve-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.achieve{ padding:18px 14px; text-align:center; transition:transform .25s; position:relative; }
.achieve:hover{ transform:translateY(-4px); }
.achieve .a-icon{ font-size:34px; margin-bottom:8px; display:block; }
.achieve .a-name{ font-size:14px; font-weight:800; }
.achieve .a-desc{ font-size:11.5px; color:var(--text-faint); margin-top:5px; line-height:1.5; }
.achieve.got{ border-color:rgba(240,171,252,.45); background:linear-gradient(160deg, rgba(167,139,250,.18), rgba(217,70,239,.08)); }
.achieve.got .a-icon{ animation:twinkle 2.6s ease-in-out infinite; }
.achieve.locked{ opacity:.5; filter:grayscale(.8); }
.achieve .got-tag{
  position:absolute; top:10px; right:10px; font-size:10px; padding:2px 7px; border-radius:999px;
  color:#052e16; background:linear-gradient(135deg,#bef264,#4ade80); font-weight:800;
}
.achieve.locked::after{ content:"🔒"; position:absolute; bottom:12px; right:12px; font-size:14px; }

.record-list{ display:flex; flex-direction:column; gap:10px; }
.record{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  transition:transform .2s;
}
.record:hover{ transform:translateX(4px); }
.record-icon{ font-size:22px; width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(167,139,250,.14); }
.record-info{ flex:1; min-width:0; }
.record-title{ font-size:14px; font-weight:700; }
.record-time{ font-size:12px; color:var(--text-faint); margin-top:2px; }
.record-amount{ font-weight:800; color:var(--accent-2); }
.empty-state{ text-align:center; color:var(--text-faint); padding:36px 16px; font-size:14px; line-height:2; }
.empty-state .e-icon{ font-size:40px; display:block; margin-bottom:8px; filter:grayscale(.3); }

/* ---------- 贡献榜 ---------- */
.board-list{ display:flex; flex-direction:column; gap:10px; }
.board-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; }
.board-rank{
  width:26px; text-align:center; font-weight:900; color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.board-row:nth-child(1) .board-rank{ color:var(--gold); font-size:18px; }
.board-row:nth-child(2) .board-rank{ color:#e2e8f0; font-size:16px; }
.board-row:nth-child(3) .board-rank{ color:#c084fc; font-size:15px; }
.board-avatar{ width:34px; height:34px; border-radius:50%; background:var(--grad-main); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.board-name{ font-weight:700; font-size:14px; flex:1; }
.board-name.me{ color:var(--accent-2); }
.board-name .me-tag{ margin-left:6px; font-size:10px; padding:1px 6px; border-radius:999px; background:rgba(240,171,252,.2); color:var(--accent-2); }
.board-amount{ font-weight:800; color:var(--gold); font-size:14px; }

/* ---------- 首页预告块 ---------- */
.teaser{ padding:20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.teaser-btn{
  width:64px; height:64px; border-radius:50%; flex:none; position:relative;
  background:var(--grad-main); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; box-shadow:var(--shadow-glow); animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(217,70,239,.5), var(--shadow-glow); }
  70%{ box-shadow:0 0 0 16px rgba(217,70,239,0), var(--shadow-glow); }
  100%{ box-shadow:0 0 0 0 rgba(217,70,239,0), var(--shadow-glow); }
}
.teaser-info{ flex:1; min-width:200px; }
.teaser-info h3{ font-size:16px; font-weight:800; }
.teaser-info p{ color:var(--text-dim); font-size:13px; margin-top:6px; line-height:1.7; }
.teaser-stats{ display:flex; gap:22px; margin-top:12px; }
.teaser-stats .t-stat{ text-align:center; }
.teaser-stats .t-num{ font-size:18px; font-weight:900; color:var(--accent-3); }
.teaser-stats .t-label{ font-size:11.5px; color:var(--text-faint); }

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed; inset:0; z-index:90; background:rgba(5,2,14,.65);
  backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .28s;
}
.modal-mask.show{ opacity:1; pointer-events:auto; }
.modal{
  position:fixed; z-index:91; left:50%; top:50%; width:calc(100% - 40px); max-width:400px;
  padding:26px 24px 22px; transform:translate(-50%,-50%) scale(.92); opacity:0;
  pointer-events:none; transition:transform .3s cubic-bezier(.2,1.1,.3,1), opacity .25s;
  background:rgba(20,10,44,.92);
}
.modal.show{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.modal-close{ position:absolute; top:14px; right:16px; font-size:24px; color:var(--text-faint); line-height:1; padding:2px 6px; }
.modal-close:hover{ color:#fff; }
.modal-title{ font-size:19px; font-weight:900; margin-bottom:6px; }
.modal-desc{ color:var(--text-dim); font-size:13.5px; line-height:1.7; margin-bottom:18px; }
.amount-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.amount-btn{
  padding:14px 6px; border-radius:12px; font-size:14px; font-weight:800; color:var(--text-dim);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); transition:.2s;
}
.amount-btn:hover{ border-color:rgba(167,139,250,.5); color:#fff; }
.amount-btn.active{
  border-color:transparent; color:#fff;
  background:var(--grad-main); box-shadow:0 6px 18px rgba(192,38,211,.4);
}
.custom-amount{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.custom-label{ font-size:13px; color:var(--text-dim); }
.custom-amount input{
  flex:1; padding:11px 14px; border-radius:12px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); color:#fff; font-size:14px; outline:none; min-width:0;
}
.custom-amount input:focus{ border-color:rgba(167,139,250,.7); }
.custom-unit{ font-size:12px; color:var(--text-faint); }
.modal-actions{ display:flex; gap:12px; margin-top:22px; }
.modal-actions .btn{ flex:1; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px); z-index:120;
  padding:12px 22px; border-radius:999px; font-size:14px; font-weight:600;
  background:rgba(20,10,44,.92); border:1px solid rgba(240,171,252,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s; max-width:88vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.ok{ border-color:rgba(74,222,128,.5); }

/* ---------- 庆祝彩带 ---------- */
.confetti{
  position:fixed; width:9px; height:14px; border-radius:2px; z-index:130; pointer-events:none;
  animation:confettiFly 1.6s ease-out forwards;
}
@keyframes confettiFly{
  0%{ opacity:1; transform:translate(-50%,0) rotate(0); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot)); }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(167,139,250,.35); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(167,139,250,.6); }

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .app{ padding:0 14px 100px; }
  .desktop-nav{ display:none; }
  .hamburger{ display:flex; }
  .topbar{ padding:11px 16px; }
  .hero{ padding:44px 14px 34px; }
  .cd-box{ min-width:64px; padding:10px 6px; }
  .cd-box span{ font-size:23px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .bottom-nav{ display:flex; }
  .effect-preview{ height:132px; }
  .modal{ padding:22px 18px 18px; }
}
@media (max-width:420px){
  .song-card{ flex-direction:column; }
  .song-cover{ width:100%; height:110px; }
  .top-songs{ grid-template-columns:1fr; }
  .hero-cta .btn{ flex:1; }
}
@media (min-width:769px){
  .bottom-nav{ display:none; }
}