/* ===== 主题变量：白天/深色 ===== */
:root{
--bg:#f5f7fa;--card:#ffffff;--soft:#f5f6f8;--text:#333333;--text2:#2b3345;
--muted:#999999;--muted2:#8a93a6;--border:#eef1f5;--border2:#dddddd;
--hover:#f3f6ff;--chip:#f1f5ff;--shadow:0 6px 24px rgba(28,32,48,.06);
/* 主色梯度：统一品牌色，方便整体换肤 */
--p1:#748ffc;--p2:#4c6ef5;--p3:#3b5bdb;--p-soft:rgba(76,110,245,.10);
--grad:linear-gradient(135deg,var(--p1),var(--p2));
--grad-h:linear-gradient(135deg,#8599ff,var(--p3));
--radius:16px;--radius-s:12px;
--shadow-h:0 10px 30px rgba(76,110,245,.16);
/* 导航栏三个图标（会员/深色/汉堡）的统一颜色 */
--nav-icon:#5a6478;
--ease:cubic-bezier(.32,.72,.35,1)
}
body.dark{
--bg:#12141a;--card:#1d2029;--soft:#262b37;--text:#e6e8ef;--text2:#e9ecf4;
--muted:#9aa3b2;--muted2:#9aa3b2;--border:#2a2e3a;--border2:#3a4150;
--hover:#242a3a;--chip:#253050;--shadow:0 6px 24px rgba(0,0,0,.4);
--p-soft:rgba(116,143,252,.16);
--shadow-h:0 10px 30px rgba(0,0,0,.5);
--nav-icon:#c3cad9
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);font-family:"Microsoft YaHei",sans-serif;color:var(--text);transition:background .25s;min-height:100vh;display:flex;flex-direction:column}
/* 页面主内容撑满，让 footer 始终贴底 */
/* 页面主内容撑满，让 footer 始终贴底 */
.container{flex:1 0 auto;width:100%;box-sizing:border-box}
a{text-decoration:none;color:inherit}ul{list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--p2);outline-offset:2px;border-radius:6px}
.navbar{width:100%;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:999;transition:background .25s}
.nav-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;height:64px;padding:0 15px;gap:24px}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:bold;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:.2s}
.logo .iconfont{font-size:22px;color:var(--p2);-webkit-text-fill-color:var(--p2)}
.logo:hover{filter:brightness(1.08)}
.nav-menu{display:flex;gap:22px;font-size:15px}
.nav-menu a{position:relative;padding:4px 0;transition:color .2s}
.nav-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--grad);transition:right .25s var(--ease)}
.nav-menu a:hover{color:var(--p2)}
.nav-menu a:hover::after{right:0}
/* 当前栏目高亮（由 JS 按路径标记） */
.nav-menu a.active{color:var(--p2);font-weight:600}
.nav-menu a.active::after{right:0}
/* ===== 独立搜索栏模块（与内容区同宽的圆角卡片） ===== */
.search-wrap{width:100%;background:transparent;border-bottom:none;box-shadow:none}
.search-inner{max-width:1000px;margin:16px auto 0;padding:0 15px}
.search-box{display:flex;width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:5px;margin:0;transition:box-shadow .25s,border-color .25s}
.search-box:focus-within{border-color:var(--p1);box-shadow:var(--shadow-h)}
.search-box input{flex:1;border:none;background:transparent;padding:9px 16px;border-radius:12px;outline:none;font-size:14px;transition:box-shadow .2s;color:var(--text)}
.search-box input:focus{box-shadow:none}
.search-box button{border:none;background:var(--grad);color:#fff;width:52px;padding:0;border-radius:12px;cursor:pointer;font-size:19px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.search-box button:hover{background:var(--grad-h);transform:translateX(1px)}
.search-box button:active{transform:scale(.96)}
/* ===== 导航栏用户头像 + 下拉菜单 ===== */
.nav-user{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.nav-user-main{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 4px;
border-radius:18px;color:var(--text2);font-size:14px;font-weight:600;text-decoration:none;
transition:.2s var(--ease);max-width:160px}
.nav-user-main:hover{background:var(--p-soft);color:var(--p2)}
.nav-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 圆形头像：有图用图，无图用品牌渐变 + 首字（无边框） */
.nav-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
border:none;display:inline-block;vertical-align:middle}
.nav-avatar-txt{display:inline-flex;align-items:center;justify-content:center;
background:var(--grad);color:#fff;font-size:15px;font-weight:700;border:none;
line-height:1;letter-spacing:0}
/* 未登录访客头像：**无背景、无底色**，只保留图标本身。
   与深色 / 汉堡 两个图标完全同规格（无边框、无背景、同色、同尺寸），
   三者在导航栏右侧形成一致的线性图标组。 */
.nav-avatar-guest{display:inline-flex;align-items:center;justify-content:center;
background:none;color:var(--nav-icon);border:none;box-shadow:none;
transition:color .2s var(--ease),transform .16s var(--ease);
-webkit-tap-highlight-color:transparent}
.nav-avatar-guest .iconfont{font-size:18px;color:inherit}
.nav-user-guest{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;text-decoration:none;
transition:background .2s var(--ease)}
.nav-user-guest:hover{background:var(--p-soft)}
.nav-user-guest:hover .nav-avatar-guest{color:var(--p2)}
.nav-user-guest:active .nav-avatar-guest{transform:scale(.93)}
.nav-user-caret{width:22px;height:22px;padding:0;border:none;border-radius:50%;cursor:pointer;
background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
transition:.2s var(--ease)}
.nav-user-caret .iconfont{font-size:15px}
.nav-user-caret:hover{background:var(--p-soft);color:var(--p2)}
.nav-user.open .nav-user-caret span{transform:rotate(90deg)}
.nav-user-caret span{transition:transform .25s var(--ease)}
/* 下拉卡片 */
.nav-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:6px;
background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-h);
opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top right;
transition:.2s var(--ease);z-index:1200}
.nav-user.open .nav-user-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav-user-menu a,.nav-user-menu button{display:flex;align-items:center;gap:9px;width:100%;
padding:9px 12px;border-radius:8px;border:none;background:transparent;color:var(--text);
font-size:13.5px;font-family:inherit;text-align:left;cursor:pointer;transition:.16s;white-space:nowrap}
.nav-user-menu a:hover,.nav-user-menu button:hover{background:var(--hover);color:var(--p2)}
.nav-user-menu button:hover{color:#e03131}
.nav-user-menu .iconfont{font-size:15px;opacity:.85}
.nav-auth{display:flex;gap:0;align-items:center}
.user-name{color:var(--p2);font-size:14px;font-weight:600;text-decoration:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.user-name:hover{text-decoration:underline}
/* 会员头像：去边框，实心圆（有图用图，无图用品牌渐变+人像） */
.nav-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;border:none;
box-shadow:none;display:inline-block;vertical-align:middle}
/* ===== 导航栏图标统一规范 =====
   会员头像 / 深色模式 / 汉堡 三个图标：
   → 一律无边框、无底色、无背景描边
   → 统一尺寸 34×34（图标本体 18px）
   → 统一颜色 var(--nav-icon)
   → 统一间距（只由 .nav-tools 的 gap 控制，图标自身不带 margin）
   → 统一垂直居中（三者同为 inline-flex + align-items:center）
   这样三个图标在导航栏右侧是严格对齐的一条线。 */
.theme-btn{width:34px;height:34px;padding:0;border-radius:50%;font-size:18px;cursor:pointer;
border:none;background:transparent;color:var(--nav-icon);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:background .2s var(--ease),color .2s var(--ease),transform .16s var(--ease);
-webkit-tap-highlight-color:transparent}
/* 图标容器统一 18px，与访客头像/汉堡线宽视觉重量一致 */
.theme-btn .iconfont{font-size:18px;line-height:1}
.theme-btn:hover{color:var(--p2);background:var(--p-soft)}
.theme-btn:active{transform:scale(.93)}
/* 深色模式下同样保持统一色，不再单独用暖色 */
body.dark .theme-btn{color:var(--nav-icon)}
body.dark .theme-btn:hover{color:var(--p2);background:var(--p-soft)}
.btn-login,.btn-reg{padding:6px 18px;border-radius:18px;font-size:14px;cursor:pointer;border:none;transition:.2s}
.btn-login{background:var(--card);border:1px solid var(--p2);color:var(--p2)}
.btn-login:hover{background:var(--p-soft)}
.btn-reg{background:var(--grad);color:#fff;box-shadow:0 4px 12px var(--p-soft)}
.btn-reg:hover{background:var(--grad-h);box-shadow:0 6px 16px rgba(76,110,245,.3)}
/* ===== 汉堡菜单按钮（与头像/主题图标统一：无边框、无底色、同色） ===== */
.hamburger{display:none;cursor:pointer;margin-left:0;width:34px;height:34px;
border-radius:50%;background:transparent;border:none;
transition:background .22s var(--ease),color .22s var(--ease),transform .16s var(--ease);
z-index:1001;flex-shrink:0;align-items:center;justify-content:center;
color:var(--nav-icon);-webkit-tap-highlight-color:transparent;padding:0}
.hamburger:hover{background:var(--p-soft);color:var(--p2)}
.hamburger:active{transform:scale(.93)}
/* 线宽 2.2 + 24px 画布 → 实际视觉线宽 ≈2.2，与 18px 线性图标重量一致 */
.hamburger svg{width:19px;height:19px;display:block;pointer-events:none}
.hamburger svg line{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
transition:transform .3s var(--ease),opacity .25s var(--ease)}
.hamburger svg line:nth-child(1){transform-origin:12px 6.5px}
.hamburger svg line:nth-child(2){transform-origin:12px 12px}
.hamburger svg line:nth-child(3){transform-origin:12px 17.5px}
/* 展开态：上下两线合并成 ✕，中线淡出；同时去掉圆形底色，保持线条风格统一 */
.hamburger.active{color:var(--p2);background:transparent;box-shadow:none}
.hamburger.active svg line:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.active svg line:nth-child(2){opacity:0}
.hamburger.active svg line:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* 导航栏右侧工具区：三个图标的**唯一**间距来源（图标自身 margin 全部为 0） */
.nav-tools{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.m-auth{display:none}
/* ===== 内容容器：左右留白严格相等 =====
   关键点：width 必须用 auto（配合 max-width），绝不能用 width:100%。
   若写成 width:100% + margin:12px auto，元素已被撑满父宽，
   auto 的左右 margin 会被算成 0，表现为「左边留白、右边贴边」，
   这正是手机端左右空出距离不一致的根因。
   改成 max-width + auto 后，左右两侧自动等分剩余空间。 */
/* ===== 内容容器：左右留白严格相等 =====
   根因：.container 宽度是 100%（被 body 的 flex stretch 撑满），
         此时 margin:20px auto 的左右 auto 会被算成 0，
         于是「左边靠某处 padding 留白、右边直接贴到屏幕边」，
         看起来左右空出来的距离不一样多。
   解决：不用 margin 留白，改用左右**对称的 padding**：
         padding 由元素内部消化，左右数值必然相等，
         再配上 max-width + margin:auto，宽屏时整体居中，两侧依旧对称。 */
.container{width:100%;max-width:1000px;margin:20px auto;padding:0 15px;box-sizing:border-box}
.module{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;margin-bottom:20px;transition:background .25s,border-color .25s}
.module-head{display:flex;align-items:center;gap:14px;margin:0 2px 16px;font-size:20px;font-weight:700;color:var(--text2)}
.module-head .title-icon{width:46px;height:46px;border-radius:14px;background:var(--p-soft);box-shadow:0 4px 14px var(--p-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--p2);font-size:22px;flex-shrink:0}
.module-head .title-line{flex:1;height:2px;border-radius:1px;background:linear-gradient(to right,var(--border),transparent)}
/* ===== 首页分类歌曲模块 ===== */
.cat-section{animation:fadeUp .34s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cat-section .module-head .title-icon{overflow:hidden}
.cat-section .module-head .title-icon img{width:100%;height:100%;object-fit:cover;display:block}
.cat-section .cat-title-name{white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
/* 分类模块按顺序渐次出现，避免整页同时闪动 */
.cat-section:nth-child(1){animation-delay:.02s}
.cat-section:nth-child(2){animation-delay:.06s}
.cat-section:nth-child(3){animation-delay:.10s}
.cat-section:nth-child(4){animation-delay:.14s}
.cat-section:nth-child(5){animation-delay:.18s}
.cat-section:nth-child(6){animation-delay:.22s}
/* ===== 歌曲列表 ===== */
.song-list li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--border);margin-bottom:8px;transition:all .18s}
.song-list li:hover{background:var(--hover);border-color:#c3d0fa;box-shadow:0 4px 14px var(--p-soft);transform:translateX(2px)}
.song-list li:last-child{margin-bottom:0}
.song-icon{width:44px;height:44px;border-radius:var(--radius-s);background:var(--soft);color:var(--p2);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.song-icon img{width:100%;height:100%;object-fit:cover;display:block}
.song-name{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-artist{color:var(--muted);font-size:13px;margin-left:10px}
.cat-chip{font-size:11px;color:var(--p2);background:var(--chip);border:1px solid var(--border);border-radius:20px;padding:3px 11px;flex-shrink:0;white-space:nowrap}
.btn-play{width:38px;height:38px;border-radius:50%;border:none;background:var(--grad);color:#fff;cursor:pointer;font-size:15px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px var(--p-soft);transition:.2s;flex-shrink:0}
.btn-play:hover{transform:scale(1.12);box-shadow:0 6px 18px rgba(76,110,245,.42);background:var(--grad-h)}
/* 列表行"正在播放"标识：三根跳动的音柱（替代已移除的播放按钮） */
.cur-bars{display:inline-flex;align-items:flex-end;gap:2px;height:15px;flex-shrink:0;margin-right:-4px}
.cur-bars i{width:3px;border-radius:2px;background:var(--p2);display:block;animation:curBar .9s ease-in-out infinite}
.cur-bars i:nth-child(1){height:6px;animation-delay:0s}
.cur-bars i:nth-child(2){height:12px;animation-delay:.18s}
.cur-bars i:nth-child(3){height:9px;animation-delay:.36s}
@keyframes curBar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.song-list li.playing .song-name{color:var(--p2);font-weight:600}
.song-list li.playing::before{height:70%}
/* 收藏心形按钮 */
.btn-fav{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:#c9c9c9;font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.btn-fav:hover{color:var(--p2);border-color:#c3d0fa;transform:scale(1.12)}
.btn-fav.faved{color:var(--p2);border-color:#c3d0fa;background:var(--chip)}
/* 列表占位状态：加载中 / 空 / 失败 */
.list-loading,.list-empty{display:flex;align-items:center;justify-content:center;padding:38px 0;color:var(--muted);font-size:14px;border:1px dashed var(--border2);border-radius:var(--radius-s);background:transparent}
.list-loading::before{content:"";width:16px;height:16px;margin-right:9px;border:2px solid var(--border2);border-top-color:var(--p2);border-radius:50%;animation:spin .7s linear infinite}
.links{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--muted)}
.links a{padding:6px 14px;border-radius:20px;background:var(--soft);border:1px solid var(--border);transition:.2s}
.links a:hover{color:var(--p2);border-color:#c3d0fa;background:var(--chip);transform:translateY(-1px)}
.links-empty{color:var(--muted);font-size:13px}
/* ===== 播放器 ===== */
.player{text-align:center}
.player-cover-wrap{position:relative;width:220px;height:220px;margin:14px auto 4px;cursor:pointer}
.player-cover{width:220px;height:220px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 12px var(--soft),0 0 0 13px var(--border),0 12px 36px rgba(0,0,0,.18);animation:spin 20s linear infinite;animation-play-state:paused;transition:box-shadow .3s}
@keyframes spin{to{transform:rotate(360deg)}}
.player.playing .player-cover{animation-play-state:running;box-shadow:0 0 0 12px var(--chip),0 0 0 13px #c3d0fa,0 12px 36px rgba(76,110,245,.28)}
.cover-ctrl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;z-index:2}
.c-btn{border:none;background:rgba(255,255,255,.92);color:var(--p2);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:19px;box-shadow:0 2px 12px rgba(0,0,0,.18);transition:.18s}
.c-btn:hover{transform:scale(1.1);background:#fff}
/* 主播放按钮：白色半透明玻璃态，叠在彩色唱片上对比清晰 */
.c-main{width:68px;height:68px;border:1.5px solid rgba(255,255,255,.70);border-radius:50%;
background:rgba(255,255,255,.30);color:#fff;font-size:30px;cursor:pointer;
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
text-shadow:0 1px 3px rgba(0,0,0,.32);
box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.42);
transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.c-main:hover{background:rgba(255,255,255,.46);border-color:rgba(255,255,255,.88);transform:scale(1.07);
box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.55)}
.c-main:active{transform:scale(.97)}
/* 封面下方一层浅色压暗，保证白色播放图标在浅色封面上也清晰可辨 */
.player-cover-wrap::after{content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 50% 50%,rgba(20,26,45,.20) 0%,rgba(20,26,45,.06) 46%,transparent 68%);
pointer-events:none;z-index:1}
/* 播放中：暂停图标稍作强调 */
.player.playing .c-main{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.player.playing .c-main:hover{background:rgba(255,255,255,.40)}
/* 播放按钮固定到封面正中心（用 inset+margin 定位，悬停缩放不影响居中） */
#playBtn{position:absolute;inset:0;margin:auto;z-index:2}
.player-cover img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;position:relative;z-index:0}
.player-modebar{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:10px}
.mode-btn{border:1px solid var(--border);background:var(--card);cursor:pointer;color:var(--text2);font-size:18px;transition:.18s;width:42px;height:42px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(20,30,60,.06)}
.mode-btn:hover{color:var(--p2);border-color:var(--p1);transform:translateY(-2px);background:var(--p-soft);box-shadow:0 6px 16px rgba(76,110,245,.22)}
.mode-btn:active{transform:translateY(0) scale(.96)}
.mode-btn.on{color:var(--p2)}
.cover-tip{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:4px 14px;border-radius:20px;display:none;z-index:3;backdrop-filter:blur(2px)}
.cover-tip.show{display:block}
.player-info h2{margin:12px 0 4px;color:var(--text2);font-size:20px}
.player-info p{color:var(--muted);min-height:20px}
/* 播放页操作条：收藏/下载/复制链接 */
.p-acts{display:flex;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.p-act{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;cursor:pointer;transition:.2s;user-select:none;font-family:inherit}
.p-act span{font-size:15px}
.p-act:hover{color:var(--p2);border-color:#c3d0fa;background:var(--hover);transform:translateY(-1px)}
.p-act.faved{color:var(--p2);border-color:#c3d0fa;background:var(--chip)}
.player-bar{margin:18px auto;width:88%}
.player-bar input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(to right,var(--p2) var(--p,0%),var(--border2) var(--p,0%))}
.player-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--p2);box-shadow:0 1px 5px rgba(0,0,0,.25);transition:transform .15s}
.player-bar input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.player-bar input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--p2);box-shadow:0 1px 5px rgba(0,0,0,.25)}
.player-bar input[type=range]::-moz-range-progress{background:var(--p2);height:6px;border-radius:3px}
.time{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.footer{width:100%;margin-top:30px;padding:25px 0;background:var(--card);box-shadow:0 -2px 10px rgba(0,0,0,.04);text-align:center;color:var(--muted);font-size:13px;transition:background .25s}
.footer a{color:var(--p2)}
.pagebar{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.pagebar a,.pagebar span{padding:6px 14px;border:1px solid var(--border2);border-radius:8px;font-size:14px;transition:.18s;background:var(--card);color:var(--text)}
.pagebar a:hover{border-color:var(--p2);color:var(--p2);background:var(--p-soft)}
.pagebar .cur{color:#fff;background:var(--grad);border-color:transparent;font-weight:600}
.pagebar .gap{border:none;background:transparent;color:var(--muted);padding:6px 2px}
.pagebar .page-total{border:none;background:transparent;color:var(--muted);font-size:13px;margin-left:6px}
/* ===== 首页 Hero 横幅 ===== */
.hero{width:100%;margin-top:16px}
.hero-inner{max-width:1000px;margin:0 auto;padding:0 15px}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,#4c6ef5 0%,#7048e8 55%,#9c36b5 100%);border-radius:20px;padding:32px 34px;color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 34px rgba(76,110,245,.28)}
.hero-inner::before,.hero-inner::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hero-inner::before{width:240px;height:240px;top:-110px;right:14%}
.hero-inner::after{width:150px;height:150px;bottom:-80px;right:-30px;background:rgba(255,255,255,.08)}
.hero-text{position:relative;z-index:1;min-width:0}
.hero-text h1{font-size:27px;margin-bottom:8px;letter-spacing:.5px}
.hero-text p{font-size:14px;opacity:.88;margin-bottom:18px}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:24px;border:none;background:#fff;color:#4c6ef5;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;box-shadow:0 6px 18px rgba(0,0,0,.16);font-family:inherit}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.hero-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none}
.hero-btn.ghost:hover{background:rgba(255,255,255,.26)}
.hero-art{position:relative;z-index:1;flex-shrink:0;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff;animation:spin 26s linear infinite}
/* ===== 分类卡片宫格 ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--soft);transition:.22s;text-align:center}
.cat-card .iconfont{width:44px;height:44px;border-radius:13px;background:var(--card);color:var(--p2);font-size:21px;box-shadow:0 3px 10px var(--p-soft)}
.cat-card b{font-size:14px;color:var(--text2);font-weight:600}
.cat-card em{font-size:11px;color:var(--muted);font-style:normal}
.cat-card:hover{transform:translateY(-3px);border-color:#c3d0fa;background:var(--card);box-shadow:var(--shadow-h)}
.cat-card:hover .iconfont{background:var(--grad);color:#fff}
/* 模块标题右侧「更多」入口 */
.more-link{margin-left:auto;font-size:13px;color:var(--muted);font-weight:400;transition:.2s;white-space:nowrap}
.more-link:hover{color:var(--p2)}
@media (max-width:768px){
.hero-inner{padding:24px 20px;border-radius:16px}
.hero-text h1{font-size:21px}
.hero-text p{font-size:13px;margin-bottom:14px}
.hero-btn{padding:9px 18px;font-size:13px}
.hero-art{display:none}
.cat-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.cat-card{padding:14px 6px;gap:4px}
.cat-card .iconfont{width:38px;height:38px;font-size:18px}
.cat-card b{font-size:13px}
.cat-card em{display:none}
}
/* ===== 播放列表（标签页 + 复选行 + 底部操作栏） ===== */
.pl-tabs{display:flex;flex-wrap:wrap;gap:24px;padding:0 4px;border-bottom:1px solid var(--border)}
.pl-tabs span{cursor:pointer;font-size:15px;color:var(--muted);padding:9px 2px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.pl-tabs span:hover{color:var(--p2)}
.pl-tabs span.on{color:var(--p2);font-weight:600;border-color:var(--p2)}
.pl-body{margin-top:8px}
.pl-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;transition:background .15s}
.pl-row:hover{background:var(--hover)}
.pl-row.cur{background:var(--chip)}
.pl-num{width:18px;flex-shrink:0;display:flex;align-items:center}
.pl-num input{accent-color:var(--p2);width:14px;height:14px;cursor:pointer;margin:0}
.pl-name{flex:1;min-width:0;font-size:14px}
.pl-name a{display:flex;align-items:center;gap:7px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.pl-name a:hover{color:var(--p2)}
.pl-row.cur .pl-name a{color:var(--p2);font-weight:600}
.pl-cur-ico{font-size:13px;flex-shrink:0}
.pl-del{width:26px;flex-shrink:0;text-align:center;color:var(--muted);cursor:pointer;font-size:13px;visibility:hidden;border-radius:50%;transition:.15s}
.pl-row:hover .pl-del{visibility:visible}
.pl-del:hover{color:#e03131;background:rgba(224,49,49,.1)}
/* 触屏设备(手机)无悬停，删除按钮常显 */
@media (hover:none){.pl-del{visibility:visible}}
.pl-empty{padding:30px 0;text-align:center;color:var(--muted);font-size:13px}
.pl-bar{display:flex;align-items:center;gap:20px;margin-top:8px;padding:10px 6px 2px;border-top:1px solid var(--border);flex-wrap:wrap}
.pl-sel{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.pl-sel input{accent-color:var(--p2);width:14px;height:14px;cursor:pointer;margin:0}
.pl-act{font-size:13px;color:var(--muted);cursor:pointer;padding:4px 12px;border:1px solid var(--border);border-radius:14px;transition:.15s;user-select:none}
.pl-act:hover{color:var(--p2);border-color:#c3d0fa;background:var(--hover)}
/* 返回顶部 */
.to-top{position:fixed;right:22px;bottom:26px;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;border:none;cursor:pointer;font-size:20px;box-shadow:0 6px 18px rgba(76,110,245,.4);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:900;display:flex;align-items:center;justify-content:center}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:scale(1.08)}
/* 提示气泡 */
.qy-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(8px);background:rgba(28,32,48,.86);color:#fff;padding:10px 22px;border-radius:22px;font-size:14px;opacity:0;transition:.25s;z-index:1200;pointer-events:none;backdrop-filter:blur(4px);max-width:86vw;text-align:center}
.qy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:768px){
.hamburger{display:inline-flex;align-items:center;justify-content:center}
/* 移动端：登录/注册按钮收进抽屉；顶部栏始终保留「用户头像」入口。
   已登录 → 显示圆形头像（点击进用户中心）；未登录 → 显示访客头像（点击去登录）。 */
.nav-auth .btn-login,.nav-auth .btn-reg{display:none}
.nav-auth{display:flex;margin-left:0;gap:0}
/* 顶部栏只显示头像圆点，隐藏用户名与下拉箭头，节省宽度 */
.nav-user-main{padding:0;max-width:none;height:auto;gap:0}
.nav-user-name{display:none}
.nav-user-caret{display:none}
/* 移动端三个图标统一 34px，无边框无背景（与桌面端规范一致），
   间距由 .nav-tools 的 gap 单独控制，其余断点不再覆盖，保证任何宽度都排得整齐 */
.nav-user .nav-avatar{width:34px;height:34px;font-size:15px;border:none}
.nav-user .nav-avatar-txt{font-size:15px}
.nav-avatar-guest{width:34px;height:34px}
.nav-avatar-guest .iconfont{font-size:18px}
/* 导航栏工具区：三图标统一间距 + 靠右，整体压缩不溢出 */
.nav-tools{margin-left:auto;gap:7px}
.nav-inner{gap:0;padding:0 14px}
/* 下拉菜单在移动端改为右对齐宽一点，便于点按 */
.nav-user-menu{min-width:170px;padding:6px}
.nav-user-menu a,.nav-user-menu button{padding:12px 15px;font-size:15px}
/* 移动端浏览器地址栏会变化，改用 100dvh 保证抽屉不被裁切 */
/* 手机端搜索栏：圆角卡片 */
.search-inner{margin:12px auto 0;padding:0 12px}
.search-box{padding:4px}
.search-box button{width:46px;font-size:17px}
/* 汉堡菜单：右侧滑出抽屉
   注意：.navbar / .nav-inner 带 backdrop-filter，会创建新的包含块，
   使抽屉的 position:fixed 不再相对视口定位（表现为抽屉高度塌陷）。
   因此显式用 100dvh 撑满高度，并加 inset 兜底。 */
.nav-menu{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(290px,84vw);
height:100vh;height:100dvh;background:var(--card);flex-direction:column;gap:0;
padding:78px 20px 22px;box-shadow:-8px 0 30px rgba(28,32,48,.18);
transform:translateX(105%);transition:transform .32s var(--ease);z-index:998;overflow-y:auto;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 抽屉内顶部关闭按钮（移动端更易点） */
.nav-menu .drawer-head{display:none}
.nav-menu.open{transform:translateX(0)}
/* 抽屉导航项：加左侧色条 + 点按反馈，触控更明确 */
.nav-menu a{display:flex;align-items:center;padding:15px 14px;border-bottom:1px solid var(--border);
font-size:16px;font-weight:500;border-radius:0;transition:background .18s var(--ease),color .18s var(--ease);
-webkit-tap-highlight-color:transparent}
.nav-menu a::after{display:none}
.nav-menu a:active{background:var(--p-soft);color:var(--p2)}
.nav-menu a.active{color:var(--p2);background:var(--p-soft);font-weight:600;
box-shadow:inset 3px 0 0 var(--p2)}
.nav-menu .m-auth{display:flex;gap:12px;margin-top:auto;padding:18px 0 0;border-bottom:none}
.m-auth button{flex:1;padding:13px 0;font-size:15px;border-radius:12px;
min-height:46px;-webkit-tap-highlight-color:transparent}
/* 主题按钮已移到导航栏（与头像并列），抽屉内的旧容器一律隐藏 */
.nav-menu .theme-li{display:none !important}
/* 主题图标尺寸由桌面端规范统一（34×34 圆形无边框），移动端无需重复定义 */
/* 遮罩：同样受 backdrop-filter 包含块影响，用 dvh 兜底撑满 */
.nav-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
background:rgba(28,32,48,.42);opacity:0;visibility:hidden;transition:.3s;z-index:997}
.nav-mask.show{opacity:1;visibility:visible}
/* 移动端容器：同步收紧左右对称内边距（留白只走 padding，左右必然相等） */
.container{margin:12px auto;padding:0 14px}
.module{padding:16px 14px}
.module-head{font-size:18px;gap:10px;margin-bottom:12px}
.module-head .title-icon{width:40px;height:40px;border-radius:12px;font-size:19px}
.song-list li{padding:10px 8px;gap:11px}
.song-list li:hover{transform:none}
.song-icon{width:38px;height:38px;font-size:17px}
.song-name{font-size:14px}
.song-artist{display:block;margin-left:0;font-size:12px}
.btn-play{width:34px;height:34px;font-size:14px;box-shadow:0 3px 10px rgba(76,110,245,.22)}
.btn-fav{width:34px;height:34px;font-size:15px}
.player-cover-wrap{width:170px;height:170px}
.player-cover{width:170px;height:170px;box-shadow:0 0 0 8px var(--soft),0 0 0 9px var(--border),0 10px 28px rgba(0,0,0,.16)}
.cover-ctrl{bottom:8px;gap:10px}
.c-main{width:54px;height:54px;font-size:24px;background:rgba(255,255,255,.32)}
.player-modebar{gap:16px}
.mode-btn{width:38px;height:38px;font-size:16px}
.pagebar a,.pagebar span{padding:6px 11px;font-size:13px}
.to-top{right:16px;bottom:18px;width:40px;height:40px;font-size:18px}
}
/* ===== 窄屏增强（≤430px：主流手机竖屏，含 iPhone 14/15 Pro Max 等） =====
   手机竖屏下歌曲行的固定元素（图标 38 + 分类标签 68 + 收藏 34 + 播放 34
   + 间距）几乎吃满整行，歌名只剩 120px 左右，稍长的歌名就被截断。
   这里做两步让位：① 行内间距收紧；② 隐藏分类标签（分类页已按分类浏览，
   标签信息冗余），把省下的宽度全部让给歌名。 */
@media (max-width:430px){
.container{margin:10px auto;padding:0 12px}
.module{padding:14px 12px}
.module-head{font-size:17px;gap:8px}
.module-head .title-icon{width:36px;height:36px;font-size:17px}
.module-head .more-link{font-size:13px}
.song-list li{padding:9px 7px;gap:8px}
.song-icon{width:36px;height:36px;font-size:16px}
.song-name{font-size:13.5px}
.song-artist{font-size:11.5px}
.cat-chip{display:none}          /* 让位给歌名 */
.btn-fav{width:32px;height:32px;font-size:14px}
.search-inner{padding:0 14px}
.nav-inner{padding:0 14px}
.nav-tools{gap:6px}
.logo{font-size:20px}
.logo .iconfont{font-size:20px}
.player-cover-wrap,.player-cover{width:150px;height:150px}
.player-info h2{font-size:18px}
.mode-btn{width:36px;height:36px;font-size:15px}
.player-modebar{gap:12px}
.pagebar a,.pagebar span{padding:5px 10px;font-size:12.5px}
.ucard{gap:14px}
.uavatar{width:70px;height:70px;font-size:32px}
.uinfo h2{font-size:19px}
.footer{font-size:12px}
}
/* 超窄屏（≤340px）：进一步压缩，保证歌名仍有可读宽度 */
@media (max-width:340px){
.song-list li{gap:6px;padding:9px 6px}
.song-icon{width:34px;height:34px;font-size:15px}
.song-name{font-size:13px}
.btn-fav{width:30px;height:30px;font-size:13px}
.nav-tools{gap:5px}
.logo{font-size:18px}
.logo .iconfont{font-size:18px}
.search-box button{width:42px;font-size:16px}
}
/* ===== 用户中心 ===== */
.ucard{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:6px 2px}
.uavatar-wrap{position:relative;cursor:pointer;flex-shrink:0}
.uavatar{width:84px;height:84px;border-radius:50%;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 8px 22px rgba(76,110,245,.3);overflow:hidden;transition:.2s}
.uavatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.uavatar-wrap:hover .uavatar{box-shadow:0 8px 26px rgba(76,110,245,.5);transform:scale(1.03)}
.uavatar-edit{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);background:var(--p2);color:#fff;font-size:11px;padding:3px 10px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 8px rgba(76,110,245,.4)}
.uinfo{flex:1;min-width:200px}
.uinfo h2{font-size:22px;color:var(--text2);margin-bottom:6px}
.umeta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted2);font-size:13px}
.umeta b{color:var(--p2);font-weight:600}
.uacts{display:flex;gap:12px;flex-wrap:wrap}
.uacts .btn-reg,.uacts .btn-login{padding:9px 24px}
.uc-empty{padding:26px 0;text-align:center;color:var(--muted);font-size:13px}
/* ===== 账号安全表单 ===== */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sec-grid h3{font-size:16px;margin-bottom:14px;color:var(--text2)}
.qy-form{display:flex;flex-direction:column;gap:12px;max-width:420px}
.qy-form input{padding:10px 14px;border:1px solid var(--border2);border-radius:10px;outline:none;font-size:14px;background:var(--card);color:var(--text);transition:border .2s,box-shadow .2s;font-family:inherit}
.qy-form input:focus{border-color:var(--p2);box-shadow:0 0 0 3px var(--p-soft)}
.qy-form .code-row{display:flex;gap:10px}
.qy-form .code-row input{flex:1}
.qy-form .code-btn{width:auto;padding:0 14px;border:none;border-radius:10px;background:var(--chip);color:var(--p2);font-size:13px;cursor:pointer;white-space:nowrap;transition:.2s}
.qy-form .code-btn:hover:not(:disabled){background:var(--p-soft)}
.qy-form .code-btn:disabled{opacity:.55;cursor:not-allowed}
.qy-form .msg{font-size:13px;min-height:16px;color:var(--p2)}
.qy-form .msg.ok{color:#27ae60}
.qy-form button{width:100%;padding:11px;border:none;border-radius:10px;background:var(--grad);color:#fff;font-size:14px;cursor:pointer;margin:0;transition:.2s}
.qy-form button:hover:not(:disabled){background:var(--grad-h);box-shadow:0 6px 16px var(--p-soft)}
.qy-form button:disabled{opacity:.6;cursor:not-allowed}
.bind-ok{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:14px;padding:10px 0}
.bind-ok b{color:var(--p2)}
@media (max-width:768px){.sec-grid{grid-template-columns:1fr}.uinfo h2{font-size:19px}.uavatar{width:70px;height:70px;font-size:32px}}
/* ===== 深色模式细节修补 ===== */
body.dark .module-head .title-line{background:var(--border)}
body.dark .player-cover{box-shadow:0 0 0 12px #262b37,0 0 0 13px #333947,0 12px 36px rgba(0,0,0,.5)}
body.dark .player.playing .player-cover{box-shadow:0 0 0 12px #253050,0 0 0 13px #2c3a66,0 12px 36px rgba(0,0,0,.5)}
body.dark .player-cover-wrap .player-cover img{opacity:.9}
body.dark .c-main{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55);
box-shadow:0 6px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.36)}
body.dark .c-main:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.78)}
body.dark .player.playing .c-main{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
body.dark .search-box,body.dark .module,body.dark .song-list li{background:var(--card)}
body.dark .song-list li:hover{border-color:#3a4a7a}
body.dark .links a{background:var(--soft)}
body.dark .pagebar .cur{box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* ===== 深色模式：图标移除圆形底色 / 描边 / 发光 =====
   需求：深色下各类图标外层的「圆形描边 / 圆角底色 / 光晕」全部去掉，只保留图标本身，
   视觉更干净、线条更利落，避免深底上出现一圈圈灰色轮廓。 */
body.dark .module-head .title-icon,
body.dark .cat-card .iconfont,
body.dark .song-icon{
  background:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
  filter:none !important;
}
/* 标题图标：改为纯品牌色线条，不再有胶囊底色 */
body.dark .module-head .title-icon{color:var(--p1)}
/* 分类图标：保留品牌色，去掉渐变底与发光 */
body.dark .cat-card .iconfont{color:var(--p1);border-radius:0}
body.dark .cat-card:hover .iconfont{background:none;color:#fff;filter:none}
/* 歌曲图标：去掉灰底方块 */
body.dark .song-icon{color:var(--p1)}
/* 圆形操作按钮：去描边，仅保留填充态，避免深色下一圈细线 */
body.dark .btn-fav,
body.dark .mode-btn,
body.dark .theme-btn,
body.dark .c-btn{
  border-color:transparent !important;
  box-shadow:none !important;
}
body.dark .btn-fav{background:var(--soft)}
body.dark .btn-fav:hover{background:var(--chip)}
body.dark .btn-fav.faved{background:var(--chip)}
body.dark .mode-btn{background:var(--soft)}
body.dark .mode-btn:hover{background:var(--chip)}
/* 播放/主按钮：去掉外圈光晕环 */
body.dark .btn-play{box-shadow:none !important}
body.dark .btn-play:hover{box-shadow:0 6px 18px rgba(0,0,0,.45) !important}
body.dark .search-box button{box-shadow:none}
/* 用户头像：深色下去掉描边 */
body.dark .nav-avatar{border-color:transparent}

/* ===== 横向溢出兜底 =====
   移动端导航是 translateX(105%) 的右侧抽屉，未展开时仍占据文档宽度，
   表现为 390px 视口下出现约 12px 的横向滚动条。在此全局兜底。
   （auth.html / login.html 用独立内联样式，已在各自页面内单独处理） */
html,body{max-width:100%;overflow-x:hidden}
/* 装饰元素不参与交互与布局计算 */
.blob{pointer-events:none}

/* ===== 视觉美化：滚动条 / 层次感 / 细节 ===== */
/* 细滚动条，贴合品牌色，避免系统默认样式打断整体观感 */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--p1);background-clip:content-box}
body.dark ::-webkit-scrollbar-thumb{background:#3a4150;background-clip:content-box}
body.dark ::-webkit-scrollbar-thumb:hover{background:var(--p1);background-clip:content-box}
/* 导航栏：滚动后进入毛玻璃悬浮态，内容层级更清晰 */
.navbar{backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);background:color-mix(in srgb,var(--card) 88%,transparent)}
/* 列表项 hover：左侧品牌色指示条 + 轻微位移，指向性更强 */
.song-list li{position:relative;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.song-list li::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--grad);transform:translateY(-50%);transition:height .25s var(--ease)}
.song-list li:hover::before{height:58%}
/* 模块卡片 hover 微抬升，强化可点击/可聚焦区域 */
.module{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover) and (min-width:769px){
  .module:hover{box-shadow:var(--shadow-h)}
}
/* 空状态图标化：统一居中留白，避免大片空白显得页面"坏了" */
.uc-empty,.pl-empty{padding:34px 0;line-height:2;color:var(--muted)}
.uc-empty::before,.pl-empty::before{content:"♪";display:block;font-size:30px;line-height:1;margin-bottom:10px;opacity:.28}
/* 页脚：与主体留出呼吸空间，深色下不突兀 */
.footer{margin-top:28px;padding:22px 0;text-align:center;font-size:13px;color:var(--muted);border-top:1px solid var(--border)}
.footer a{color:var(--muted2)}
/* 搜索框：聚焦时描边扩散，交互反馈更明确 */
.search-box{transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.search-box:focus-within{box-shadow:0 0 0 4px var(--p-soft)}
/* 返回顶部按钮：深色下阴影收敛 */
body.dark .to-top{box-shadow:0 6px 18px rgba(0,0,0,.5)}
/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===== 分类卡片：彩色渐变图标，让「音乐分类」区成为视觉锚点 =====
   原先所有分类图标同为 var(--card) 白底 + 品牌蓝，5 个格子长得一样、难以快速区分。
   这里按格子序号分配不同色相（逐个 nth-child 覆盖，无需改 JS/HTML）。 */
.cat-card{position:relative;overflow:hidden}
.cat-card .iconfont{transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)}
.cat-grid .cat-card:nth-child(6n+1) .iconfont{background:linear-gradient(135deg,#ffb26b,#ff7e5f);color:#fff;box-shadow:0 4px 12px rgba(255,126,95,.30)}
.cat-grid .cat-card:nth-child(6n+2) .iconfont{background:linear-gradient(135deg,#7ee8fa,#3aa0ff);color:#fff;box-shadow:0 4px 12px rgba(58,160,255,.30)}
.cat-grid .cat-card:nth-child(6n+3) .iconfont{background:linear-gradient(135deg,#ff9a9e,#f6416c);color:#fff;box-shadow:0 4px 12px rgba(246,65,108,.30)}
.cat-grid .cat-card:nth-child(6n+4) .iconfont{background:linear-gradient(135deg,#a18cd1,#7b5cf0);color:#fff;box-shadow:0 4px 12px rgba(123,92,240,.30)}
.cat-grid .cat-card:nth-child(6n+5) .iconfont{background:linear-gradient(135deg,#43e97b,#26c281);color:#fff;box-shadow:0 4px 12px rgba(38,194,129,.30)}
.cat-grid .cat-card:nth-child(6n)   .iconfont{background:linear-gradient(135deg,#5ee7df,#38b6ff);color:#fff;box-shadow:0 4px 12px rgba(56,182,255,.30)}
/* 悬停：图标轻微放大 + 卡片描边，反馈更明显 */
.cat-card:hover .iconfont{transform:scale(1.08)}
/* 深色模式下降低发光，避免刺眼 */
body.dark .cat-card .iconfont{box-shadow:none;filter:saturate(.88) brightness(.94)}
body.dark .cat-card:hover{border-color:#4a5680}
/* 标题图标：沿用同样的彩色胶囊，与分类卡片呼应 */
.module-head .title-icon{background:var(--grad);color:#fff;box-shadow:0 4px 12px var(--p-soft)}

/* ===================================================================
   ===== 手机端专属：隐藏页脚 + 底部 mini 播放器 =====
   需求：手机端底部不要页脚，改为常驻的迷你播放器
        （显示封面 / 歌名 / 播放暂停 / 上一首下一首 / 可拖动进度条）。
   桌面端不受影响：mini 播放器默认 display:none。
   =================================================================== */
.mini-player{display:none}
@media (max-width:768px){
  /* ① 手机端隐藏页脚（底部让位给 mini 播放器） */
  .footer{display:none !important}
  /* ② 内容区底部留出 mini 播放器的高度，避免遮住最后一屏内容 */
  body.has-mini{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* ③ 返回顶部按钮上移，避免与 mini 播放器重叠 */
  .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}

  .mini-player{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;bottom:0;z-index:996;
    background:color-mix(in srgb,var(--card) 94%,transparent);
    backdrop-filter:blur(14px) saturate(1.7);
    -webkit-backdrop-filter:blur(14px) saturate(1.7);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgba(28,32,48,.08);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(0);
    overflow:hidden;   /* 防止进度条圆点/发光溢出到播放器之外 */
  }
  body.dark .mini-player{box-shadow:0 -4px 18px rgba(0,0,0,.45)}

  /* 进度条：贴在最上沿的一条细线，可拖动。
     整条轨做在 padding 内部，圆点用 left 百分比定位，
     外层留 overflow:hidden 防止拖动时圆点溢出到播放器外。 */
  .mp-bar{position:relative;height:14px;margin:-7px 0 -7px;display:flex;align-items:center;
    padding:0 14px;touch-action:none;overflow:hidden}
  .mp-bar-track{position:relative;width:100%;height:3px;border-radius:3px;background:var(--border2)}
  .mp-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--grad)}
  .mp-bar-dot{position:absolute;top:50%;left:0;width:11px;height:11px;margin-left:-5.5px;
    border-radius:50%;background:var(--p2);transform:translateY(-50%);
    box-shadow:0 1px 5px rgba(76,110,245,.55);transition:transform .15s}
  .mp-bar:active .mp-bar-dot{transform:translateY(-50%) scale(1.25)}

  /* 主体行：封面 + 信息 + 控制键 */
  .mp-row{display:flex;align-items:center;gap:10px;padding:7px 12px 9px}
  .mp-cover{width:40px;height:40px;border-radius:10px;flex-shrink:0;overflow:hidden;
    background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;
    font-size:18px}
  .mp-cover img{width:100%;height:100%;object-fit:cover;display:block}
  .mp-cover.spin{animation:spin 16s linear infinite;animation-play-state:paused}
  .mp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .mp-name{font-size:13.5px;font-weight:600;color:var(--text2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
  .mp-artist{font-size:11.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
  .mp-acts{display:flex;align-items:center;gap:2px;flex-shrink:0}
  .mp-btn{width:36px;height:36px;padding:0;border:none;border-radius:50%;cursor:pointer;
    background:transparent;color:var(--text2);display:inline-flex;align-items:center;justify-content:center;
    font-size:19px;transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease);
    -webkit-tap-highlight-color:transparent}
  .mp-btn:active{transform:scale(.9)}
  .mp-btn:hover{color:var(--p2);background:var(--p-soft)}
  /* 主播放键：品牌渐变实心圆，视觉焦点 */
  .mp-play{width:42px;height:42px;font-size:21px;background:var(--grad);color:#fff;
    box-shadow:0 4px 12px var(--p-soft)}
  .mp-play:hover{background:var(--grad-h);color:#fff}
  /* 无歌曲时的空态 */
  .mini-player.mp-empty .mp-name{color:var(--muted);font-weight:400}
  .mini-player.mp-empty .mp-acts .mp-btn:not(.mp-play){opacity:.35;pointer-events:none}
}