/* ===== 爱少引导页 · 前台样式（四套主题 + 两套版式） ===== */

*,*::before,*::after{box-sizing:border-box}

/* ---------- 主题 1：暗黑霓虹 ---------- */
html[data-theme="dark-neon"]{
  --bg:#0b0c13;
  --bg-image:
    radial-gradient(900px 520px at 12% -8%, rgba(124,92,255,.34) 0%, transparent 62%),
    radial-gradient(820px 520px at 92% 4%, rgba(34,211,238,.24) 0%, transparent 58%),
    radial-gradient(700px 500px at 50% 108%, rgba(255,86,170,.18) 0%, transparent 60%);
  --panel:rgba(22,24,34,.72);
  --panel-solid:#161822;
  --line:rgba(255,255,255,.09);
  --txt:#eceefb;
  --mut:#8b91a8;
  --shadow:0 22px 60px rgba(0,0,0,.5);
  --def-accent:#7c5cff;--def-accent-2:#22d3ee;
  --glow:0 0 34px rgba(124,92,255,.4);
}
/* ---------- 主题 2：极简白净 ---------- */
html[data-theme="minimal"]{
  --bg:#f5f6fa;
  --bg-image:linear-gradient(180deg,#ffffff 0%,#f2f4fa 100%);
  --panel:#ffffff;
  --panel-solid:#ffffff;
  --line:#e6e9f2;
  --txt:#12141d;
  --mut:#71778c;
  --shadow:0 14px 34px rgba(20,30,60,.08);
  --def-accent:#2b2f3a;--def-accent-2:#6b7280;
  --glow:none;
}
/* ---------- 主题 3：二次元粉紫 ---------- */
html[data-theme="sakura"]{
  --bg:#fff6fb;
  --bg-image:
    radial-gradient(760px 460px at 8% -6%, rgba(255,150,205,.42) 0%, transparent 60%),
    radial-gradient(760px 520px at 96% 6%, rgba(168,145,255,.34) 0%, transparent 58%),
    linear-gradient(180deg,#fff8fd 0%,#fdf1ff 100%);
  --panel:rgba(255,255,255,.82);
  --panel-solid:#ffffff;
  --line:#ffdcee;
  --txt:#3b2440;
  --mut:#8d7896;
  --shadow:0 18px 44px rgba(214,120,180,.18);
  --def-accent:#ff6fb5;--def-accent-2:#a98bff;
  --glow:0 0 30px rgba(255,111,181,.32);
}
/* ---------- 主题 4：赛博青蓝 ---------- */
html[data-theme="cyber"]{
  --bg:#05101a;
  --bg-image:
    linear-gradient(rgba(34,211,238,.045) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(34,211,238,.045) 1px,transparent 1px) 0 0/34px 100%,
    radial-gradient(880px 520px at 84% -8%, rgba(34,211,238,.26) 0%, transparent 60%),
    radial-gradient(700px 480px at 6% 104%, rgba(0,255,196,.16) 0%, transparent 58%);
  --panel:rgba(9,28,40,.7);
  --panel-solid:#0a1f2c;
  --line:rgba(34,211,238,.22);
  --txt:#d9f6ff;
  --mut:#7fa8ba;
  --shadow:0 22px 60px rgba(0,0,0,.55);
  --def-accent:#22d3ee;--def-accent-2:#00ffc4;
  --glow:0 0 30px rgba(34,211,238,.4);
}

html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background-color:var(--bg);
  background-image:var(--custom-bg,var(--bg-image));
  background-size:cover;background-position:center;background-attachment:fixed;
  color:var(--txt);
  font:15.5px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* 背景点缀层 */
.bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0}
html[data-theme="dark-neon"] .bg-fx::after,
html[data-theme="cyber"] .bg-fx::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,transparent 46%,rgba(0,0,0,.42) 100%);
}
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:1}

.wrap{position:relative;z-index:2;max-width:940px;margin:0 auto;padding:56px 22px 150px}

/* ---------- 头像区 ---------- */
.hero{text-align:center;margin-bottom:40px}
.avatar{
  width:120px;height:120px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 4px rgba(255,255,255,.07),var(--shadow),var(--glow);
  position:relative;
}
html[data-theme="minimal"] .avatar{box-shadow:0 0 0 6px #fff,var(--shadow)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-initial{font-size:46px;font-weight:700;color:#fff;letter-spacing:2px}
.site-name{margin:0 0 8px;font-size:32px;font-weight:800;letter-spacing:.5px}
.tagline{margin:0;color:var(--mut);font-size:15.5px;min-height:26px}
.tagline .caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.bio{margin:14px auto 0;max-width:560px;color:var(--mut);font-size:14.5px}
.hero-stats{margin-top:22px;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--panel);backdrop-filter:blur(10px);font-size:13px;color:var(--mut)}
.hero-stats b{color:var(--txt);font-size:15px}
.hero-stats .dot{width:4px;height:4px;border-radius:50%;background:var(--mut);opacity:.6}

.announce{margin:0 0 34px;padding:13px 18px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);font-size:14px;text-align:center;color:var(--txt)}

/* ---------- 链接卡片 ---------- */
.cards{display:grid;gap:13px;grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s;
  animation:cardIn .5s both;animation-delay:calc(var(--i,0) * 60ms);
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow),var(--glow)}
.card:active{transform:translateY(-1px) scale(.995)}
.card-ico{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid var(--line)}
html[data-theme="minimal"] .card-ico,html[data-theme="sakura"] .card-ico{background:#f3f5fb}
html[data-theme="sakura"] .card-ico{background:#fff2f9}
.card-body{flex:1;min-width:0}
.card-title{display:block;font-size:15.5px;font-weight:600}
.card-title .badge{font-style:normal;font-size:11px;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;vertical-align:1px}
.card-desc{display:block;font-size:13px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-arrow{color:var(--mut);transition:transform .22s,color .22s}
.card:hover .card-arrow{transform:translateX(4px);color:var(--accent)}
.empty-tip{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px;border:1px dashed var(--line);border-radius:var(--radius)}

/* ---------- 歌单 ---------- */
.playlist{margin-top:40px}
.playlist h2{font-size:16px;margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline}
.playlist h2 span{font-size:12.5px;color:var(--mut);font-weight:400}
.track-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);backdrop-filter:blur(10px)}
.track{display:flex;align-items:center;gap:13px;width:100%;padding:13px 16px;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--txt);font-size:14.5px;cursor:pointer;text-align:left;font-family:inherit;transition:background .18s}
.track:last-child{border-bottom:0}
.track:hover{background:rgba(255,255,255,.05)}
.track.on{color:var(--accent)}
.track-idx{width:20px;color:var(--mut);font-size:12.5px}
.track-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-title em{font-style:normal;color:var(--mut);font-size:12.5px;margin-left:8px}
.track-play{color:var(--mut);font-size:12px}

/* ---------- 页脚 ---------- */
.foot{text-align:center;margin-top:52px;color:var(--mut);font-size:13px}
.foot p{margin:4px 0}
.foot .tiny a{opacity:.5;font-size:12px;border-bottom:1px dotted currentColor}
.foot .tiny a:hover{opacity:1}

/* ---------- 右下角挂件 ---------- */
#dock{position:fixed;right:16px;bottom:96px;z-index:20;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.dock-item{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:13px;color:var(--txt)}
.dock-btn{width:42px;height:42px;padding:0;justify-content:center;font-size:17px;cursor:pointer}
.dock-btn:hover{border-color:var(--accent)}
.dock-shell{position:relative;padding:0;border:0;background:none;box-shadow:none}
.dock-panel{display:none;position:absolute;right:0;bottom:0;min-width:190px;padding:14px;border-radius:16px;border:1px solid var(--line);
  background:var(--panel-solid);box-shadow:var(--shadow)}
.dock-shell.open .dock-panel{display:block}

/* ---------- 播放器 ---------- */
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:30;
  display:flex;align-items:center;gap:11px;padding:9px 14px;width:min(560px,calc(100vw - 28px));
  border:1px solid var(--line);border-radius:999px;background:var(--panel);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.pbtn{border:0;background:none;color:var(--txt);font-size:14px;cursor:pointer;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .18s}
.pbtn:hover{background:rgba(255,255,255,.08)}
.pbtn.main{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;font-size:13px;box-shadow:var(--glow)}
.pinfo{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.pcover{width:36px;height:36px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff;font-size:15px;flex:0 0 36px}
.pcover img{width:100%;height:100%;object-fit:cover}
.pmeta{flex:1;min-width:0}
.ptitle{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar{height:3px;border-radius:3px;background:rgba(128,128,128,.28);margin-top:6px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s linear}
.pwave{display:flex;align-items:flex-end;gap:3px;height:20px}
.pwave i{width:3px;height:5px;border-radius:2px;background:var(--accent);opacity:.35}
.player.playing .pwave i{animation:wave .9s ease-in-out infinite;opacity:1}
.player.playing .pwave i:nth-child(2){animation-delay:.12s}
.player.playing .pwave i:nth-child(3){animation-delay:.24s}
.player.playing .pwave i:nth-child(4){animation-delay:.36s}
.player.playing .pwave i:nth-child(5){animation-delay:.48s}
@keyframes wave{0%,100%{height:5px}50%{height:19px}}

/* ---------- 安装引导弹窗 ---------- */
.onboard{position:fixed;inset:0;z-index:60;background:rgba(6,7,12,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.onboard[hidden]{display:none}
.onboard-box{width:100%;max-width:460px;padding:26px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel-solid);box-shadow:var(--shadow);animation:cardIn .35s both}
.onboard-box h3{margin:0 0 16px;font-size:19px}
.onboard-box ol{margin:0;padding-left:20px}
.onboard-box li{margin-bottom:12px;font-size:14px}
.onboard-box li b{display:block}
.onboard-box li span{color:var(--mut);font-size:13.5px}
.onboard-act{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.onboard-act button{border-radius:11px;padding:10px 18px;font-size:14px;cursor:pointer;font-family:inherit;border:1px solid var(--line);background:none;color:var(--txt)}
.onboard-act .primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));border:0;color:#fff;font-weight:600}

/* ---------- 插件：跑马灯 / 节日横幅 ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:9px 0;font-size:13.5px;z-index:25;
  border-bottom:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px)}
.marquee.fixed-top{position:fixed;top:0;left:0;right:0}
.marquee.fixed-bottom{position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--line);border-bottom:0}
.marquee span{display:inline-block;padding-left:100%;animation:marquee linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.festival{position:fixed;top:0;left:0;right:0;z-index:26;text-align:center;padding:8px;font-size:13px;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---------- 单屏版式 ---------- */
html[data-layout="single"] body{height:100vh;overflow:hidden}
html[data-layout="single"] .wrap{max-width:900px;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:34px;padding-bottom:120px}
html[data-layout="single"] .foot{position:absolute;left:0;right:0;bottom:78px;margin:0}
html[data-layout="single"] .avatar{width:96px;height:96px;margin-bottom:16px}
html[data-layout="single"] .site-name{font-size:27px}
html[data-layout="single"] .hero{margin-bottom:26px}
html[data-layout="single"] .playlist{display:none}
html[data-layout="single"] #dock{bottom:92px}

/* ---------- 移动端 ---------- */
@media(max-width:640px){
  .wrap{padding:40px 16px 140px}
  .site-name{font-size:26px}
  .avatar{width:100px;height:100px}
  .card{padding:14px}
  .pwave{display:none}
  .player{gap:8px;padding:8px 11px}
  .hero-stats{font-size:12px;padding:8px 14px;gap:9px}
  .foot .tiny a{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}