/* LB 新站 · 设计系统：明暗双主题 */
:root{
  --accent:#e11d48; --accent-weak:rgba(225,29,72,.12);
  --r-sm:8px; --r:14px; --r-lg:20px;
  --sp:16px; --maxw:1240px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 顶栏实际高度。下面所有吸顶元素（相册导航/正文导航/侧栏…）统一用
     calc(var(--head-h) + N) 定位，别再写死 62px ——
     杂志皮的顶栏是 68px，写死就会错位 6px，滚动时看着像「跳一下」。 */
  --head-h:62px;
}
html[data-theme="dark"]{
  --bg:#0a0a0d; --bg2:#101015; --surface:#15151d; --surface2:#1c1c26;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --tx:#ececf1; --tx2:#b4b4c2; --tx3:#85859a;
  --shadow:0 8px 30px rgba(0,0,0,.5);
  --glow:0 0 40px rgba(225,29,72,.25);
}
html[data-theme="light"]{
  --bg:#f7f7f9; --bg2:#fff; --surface:#fff; --surface2:#f1f1f5;
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.16);
  --tx:#16161c; --tx2:#5a5a68; --tx3:#8a8a99;
  --shadow:0 6px 24px rgba(20,20,40,.10);
  --glow:0 0 30px rgba(225,29,72,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 轮播图有个 1.06 的缓慢缩放，动画中途会短暂超出视口宽度。
   这里用 clip（不是 hidden —— hidden 会把 html 变成滚动容器，吸顶头会失效）。 */
html{overflow-x:clip}
/* 全屏浮层（图片灯箱 / 搜索面板 / 沉浸阅读）打开时锁整页滚动，配套 app.js 的 lbLockPage()。
   ⚠ 必须锁 <html>：本站 html 是 overflow-x:clip，而此时 body 的 overflow **不会**传播到
   视口，所以「body{overflow:hidden}」在本站等于没锁 —— 实测灯箱打开后滚轮照样能把整页
   滚 1200px，且不报任何错，属于静默失效。
   这里锁 html 是安全的：html 本来就是滚动容器，不像 body 变容器会让吸顶头失效（见上面注释）。 */
html.lb-noscroll{overflow-y:hidden}
html.lb-noscroll body{padding-right:var(--lb-sbw,0px)}
body{
  background:var(--bg); color:var(--tx); font-family:var(--font); font-size:15px;
  line-height:1.7; -webkit-font-smoothing:antialiased; transition:background .3s var(--ease),color .3s var(--ease);
  /* 用 clip 而非 hidden：hidden 会让 body 变成滚动容器，导致 .site-head 的
     position:sticky 失效（顶栏会跟着页面一起滚走、不再吸顶）。clip 同样能
     兜住 hero 1.06 缩放短暂溢出的横向宽度，但不会创建滚动容器。 */
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.3;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

/* ===== 顶栏 ===== */
/* 顶栏常驻吸顶、且压在一切页面内容/浮层之上（汉堡、搜索、会员钮都不会被遮）。
   z-index 阶梯：普通内容0 < 浮层(迷你播放器/皮肤FAB等)≤161 < 顶栏1000
   < 阅读进度条1001 < 全屏弹层(灯箱/歌词阅读器)2000 < 皮肤装饰颗粒9998/9999。 */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:1001;transition:width .1s linear}
.site-head{
  position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  border-bottom:1px solid var(--line);transition:background .3s;
}
/* 顶栏常驻吸顶（不随滚动隐藏），下方吸顶元素（相册导航/正文导航）固定压在顶栏下沿 */
.head-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:8px;flex-shrink:0}
.brand-mark{
  font-weight:700;letter-spacing:.14em;font-size:19px;
  background:linear-gradient(92deg,var(--accent),#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-cn{font-size:12px;color:var(--tx3)}
.main-nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.nav-item{
  padding:7px 12px;border-radius:999px;font-size:14px;color:var(--tx2);white-space:nowrap;
  transition:all .22s var(--ease);position:relative;
}
.nav-item:hover{color:var(--tx);background:var(--surface2)}
.nav-item.on{color:#fff;background:var(--accent)}
.nav-item.on::after{display:none}
.head-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.head-search input{
  width:150px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface2);outline:none;transition:all .25s var(--ease);font-size:13px;
}
.head-search input:focus{width:210px;border-color:var(--accent);background:var(--surface)}
.theme-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);
  cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:all .25s var(--ease);position:relative;
}
.theme-btn:hover{border-color:var(--accent);transform:rotate(20deg)}
.theme-btn .t-moon{display:none}
html[data-theme="light"] .theme-btn .t-sun{display:none}
html[data-theme="light"] .theme-btn .t-moon{display:block}
.menu-btn{display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--surface2);border-radius:10px;cursor:pointer}
.menu-btn span{display:block;width:16px;height:2px;background:var(--tx);margin:3px auto;border-radius:2px;transition:.3s var(--ease)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;isolation:isolate}
.hero.h-short{min-height:320px}.hero.h-medium{min-height:460px}
.hero.h-tall{min-height:78vh}.hero.h-full{min-height:100vh}
/* 手机端地址栏收起/展开会改变 100vh 的真实像素 —— 首屏高度随之变高变矮，
   下方整页内容跟着上下跳（就是「滚一下排版缩一下」的元凶之一）。
   svh = 地址栏展开时的最小视口高度，滚不滚都不变 → 页面高度恒定。
   不支持 svh 的老浏览器自动退回上面的 vh。 */
@supports (min-height:100svh){
  .hero.h-tall{min-height:78svh}.hero.h-full{min-height:100svh}
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transform:scale(1.06);animation:slowZoom 22s ease-in-out infinite alternate}
@keyframes slowZoom{to{transform:scale(1.14)}}
/* 首屏背景的缓慢推近：rich 档照旧；soft 档减幅拉慢；off 档停住。
   （它在 hero 内部 absolute，不影响排版，但会加重「页面在动」的感觉） */
html[data-motion="soft"] .hero-bg{animation-name:slowZoomSoft;animation-duration:44s}
@keyframes slowZoomSoft{to{transform:scale(1.10)}}
html[data-motion="off"] .hero-bg{animation:none}
.hero-mask{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 40%,transparent 20%,var(--bg) 78%),linear-gradient(180deg,transparent,var(--bg));}
.hero-inner{padding:60px 20px;max-width:900px;position:relative}
.hero-title{
  font-size:clamp(34px,7vw,74px);font-weight:700;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--tx),color-mix(in srgb,var(--tx) 55%,var(--accent)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px var(--accent-weak);
}
.hero-sub{margin-top:14px;color:var(--tx2);font-size:clamp(14px,2.2vw,19px);letter-spacing:.06em}
.hero .btn-primary{margin-top:26px}
.btn-primary{
  display:inline-block;padding:12px 30px;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:500;box-shadow:var(--glow);transition:transform .25s var(--ease),box-shadow .25s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(225,29,72,.4)}
.btn{padding:9px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:5px 12px;font-size:13px;border-radius:8px}
.btn.ghost{background:transparent}
.btn.sm.ghost,.edit-bar .btn{color:var(--tx)}

/* ===== 布局与区块外壳 ===== */
.lb-section.w-container>.lb-row{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.lb-section.w-full>.lb-row{max-width:100%;padding:0}
.lb-section.pad-none{padding:0}.lb-section.pad-sm{padding:18px 0}
.lb-section.pad-md{padding:40px 0}.lb-section.pad-lg{padding:70px 0}
/* 相邻两行之间只保留一次留白。
   原来「上一行下留白 40 + 下一行上留白 40 + 块自身下边距 22」＝ 实测两行文字之间
   空出 102px，一行行看下来全是断层。改成：上一行只要自带下留白，下一行的上留白就收 0，
   间距交给上一行的下留白 + .lb-block 的下边距（现在合计 58px）。
   ⚠ 判定条件是「上一行确实是 pad-sm/md/lg」，不能写成 `.lb-section + .lb-section`——
   否则紧跟通栏头图（pad-none/is-bleed）的那一行会被贴死，连 1px 缝都不剩。 */
.lb-section.pad-sm + .lb-section,
.lb-section.pad-md + .lb-section,
.lb-section.pad-lg + .lb-section{padding-top:0}
/* 公告条这类「贴导航的窄条」，天生不该按 40px 大留白算：
   它自己已有 9px 内边距，上下再各来 40px、底下还叠 22px 的块边距，
   就会在导航和头图之间空出 100px 的「空气」——这就是「导航下方留白太多」的真凶。
   放在 pad-* 之后写，靠同特异性+书写顺序把 pad-md 压掉。 */
.lb-section.has-notice{padding:10px 0 8px}
.lb-section.has-notice>.lb-row>.lb-col>.lb-block{margin-bottom:0}
/* 破了容器的行（头图/宽屏轮播）不该再留块下边距 */
.lb-section.is-bleed>.lb-row>.lb-col>.lb-block{margin-bottom:0}
.lb-row{--gap:22px;display:flex;flex-wrap:wrap;gap:var(--gap)}
.lb-col{flex:1 1 0;min-width:0}
/* 12 栅格：同排两列每列让半个间隙，三列每列让三分之二 */
.lb-col.span-12{flex:0 0 100%}
.lb-col.span-9{flex:0 0 calc(75% - var(--gap)/2)}
.lb-col.span-8{flex:0 0 calc(66.667% - var(--gap)/2)}
.lb-col.span-6{flex:0 0 calc(50% - var(--gap)/2)}
.lb-col.span-4{flex:0 0 calc(33.333% - var(--gap)*2/3)}
.lb-col.span-3{flex:0 0 calc(25% - var(--gap)*2/3)}
.span-1{flex:0 0 8.33%}.span-2{flex:0 0 16.66%}.span-3{flex:0 0 25%}
.span-4{flex:0 0 33.33%}.span-5{flex:0 0 41.66%}.span-6{flex:0 0 50%}
.span-7{flex:0 0 58.33%}.span-8{flex:0 0 66.66%}.span-9{flex:0 0 75%}
.span-10{flex:0 0 83.33%}.span-11{flex:0 0 91.66%}.span-12{flex:0 0 100%}
.lb-block{position:relative;margin-bottom:18px}
.lb-empty{
  padding:36px 20px;text-align:center;color:var(--tx3);font-size:14px;
  border:1px dashed var(--line2);border-radius:var(--r);background:var(--surface);
}

/* ===== 会员中心 ===== */
.form-foot{margin-top:14px;text-align:center;font-size:13.5px;color:var(--tx3)}
.form-foot a{color:var(--accent)}
.head-tools .mem-link{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2);
  padding:5px 10px;border:1px solid var(--line2);border-radius:20px;text-decoration:none;transition:.2s;
}
.head-tools .mem-link:hover{color:var(--accent);border-color:var(--accent)}
.head-tools .mem-link.ghost{background:transparent;color:var(--tx3)}
.head-tools .mem-link .mem-pt{color:var(--accent);font-weight:600}
.head-tools .mem-face{
  width:20px;height:20px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--accent);
}
.mem-card{
  display:flex;align-items:center;gap:14px;padding:18px;margin:6px 0 14px;
  background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--line2);
  border-radius:var(--r);
}
.mem-av{
  width:54px;height:54px;border-radius:16px;flex:0 0 auto;background:var(--accent);position:relative;
}
.mem-av::after{content:"B";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}
.mem-meta{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.mem-meta b{font-size:17px}
.mem-sub{font-size:12.5px;color:var(--tx3)}
.mem-pts{display:flex;flex-direction:column;align-items:center;line-height:1.1;margin:0 6px}
.mem-pts strong{font-size:22px;color:var(--accent)}
.mem-pts em{font-size:11px;color:var(--tx3);font-style:normal}
.mem-rank{font-size:12.5px;color:var(--tx2);background:var(--surface);padding:5px 10px;border-radius:20px;border:1px solid var(--line2)}
.mem-actions{margin:10px 0 18px}
.pt-up{color:#16a34a;font-weight:600}
.pt-down{color:#dc2626;font-weight:600}
/* 头像色块（1-8 随机） */
.av-1{background:#e11d48}.av-2{background:#f59e0b}.av-3{background:#10b981}.av-4{background:#3b82f6}
.av-5{background:#8b5cf6}.av-6{background:#ec4899}.av-7{background:#14b8a6}.av-8{background:#ef4444}


/* ===== 通用内容组件 ===== */
.blk{background:transparent}
.blk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.blk-head h2{font-size:19px;display:flex;align-items:center;gap:10px}
.blk-head h2::before{content:"";width:3px;height:17px;background:var(--accent);border-radius:2px;display:inline-block}
.more-link{font-size:13px;color:var(--tx3);transition:.2s}
.more-link:hover{color:var(--accent)}
.sec-head{margin:0 0 18px}
.sec-head h2{font-size:22px}
.sec-head .sec-sub{color:var(--tx3);font-size:14px;margin-top:6px}
.sec-head.align-center{text-align:center}.sec-head.align-right{text-align:right}
.sec-head.style-big h2{font-size:clamp(26px,4vw,40px)}
.rich-text{font-size:15.5px;line-height:1.85;color:var(--tx)}
.rich-text.narrow{max-width:760px;margin:0 auto}
.rich-text img{border-radius:var(--r);margin:14px 0}

.txt-list{list-style:none;margin:0;padding:0}
.txt-list li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)}
.txt-list li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.2s}
.txt-list li a:hover{color:var(--accent);padding-left:6px}
.txt-list li span{font-size:12px;color:var(--tx3);flex-shrink:0}

.card-grid{display:grid;gap:18px}
.card-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;display:block;
}
.ccard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.ccard-img{aspect-ratio:16/9;background:var(--surface2);display:grid;place-items:center;overflow:hidden}
.ccard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ccard:hover .ccard-img img{transform:scale(1.06)}
.ccard-b{padding:14px 16px}
.ccard-b h3{font-size:15.5px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard-b p{font-size:13px;color:var(--tx2);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard-b .meta{font-size:12px;color:var(--tx3)}
.ph{color:var(--tx3);font-size:12px}

.headline{display:grid;grid-template-columns:1.1fr 1.4fr;gap:20px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px;transition:.3s}
.headline:hover{border-color:var(--accent)}
.headline img{width:100%;height:220px;object-fit:cover}
.headline h3{font-size:19px;margin-bottom:8px}
.headline p{color:var(--tx2);font-size:14px;margin:0;padding-right:16px}

.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px}
.rank-list li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.2s}
.rank-list li a:hover{color:var(--accent)}
.rank-list li em{font-style:normal;font-size:12px;color:var(--tx3)}
.rk{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-style:normal;
  background:var(--surface2);color:var(--tx2);flex-shrink:0}
.rk-1{background:var(--accent);color:#fff}.rk-2{background:#f97316;color:#fff}.rk-3{background:#eab308;color:#2a2a10}

.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:5px 12px;border-radius:999px;background:var(--surface2);font-size:13px;transition:.22s;border:1px solid transparent}
.tag:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.tag i{font-style:normal;font-size:11px;opacity:.6;margin-left:5px}

.search-box{display:flex;gap:8px}
.search-box input{flex:1;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);outline:none}
.search-box input:focus{border-color:var(--accent)}
.search-box button{padding:10px 22px;border-radius:999px;border:0;background:var(--accent);color:#fff;cursor:pointer}
.search-box.big input{padding:16px 24px;font-size:16px}
.search-box.big button{padding:16px 30px}

.ad-slot .ad-list{display:flex;flex-direction:column;gap:10px}
.ad-item img{border-radius:var(--r);width:100%}

/* ===== 音乐 ===== */
.album-wall{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.album-wall.v-coverflow{display:flex;overflow-x:auto;gap:22px;padding:20px 0;scroll-snap-type:x mandatory}
.album-wall.v-coverflow .album{flex:0 0 200px;scroll-snap-align:center}
.album{display:block;transition:transform .3s var(--ease)}
.album:hover{transform:translateY(-6px)}
.album-cover{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--surface2);box-shadow:var(--shadow)}
.album-cover img{width:100%;height:100%;object-fit:cover}
.album-cover .play-mark{
  position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#fff;
  background:rgba(0,0,0,.45);opacity:0;transition:.3s
}
.album:hover .play-mark{opacity:1}
.album h3{font-size:14.5px;margin:10px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album p{font-size:12.5px;color:var(--tx3);margin:0}
/* ===== 音乐分类选项卡（浮动吸顶） =====
   老大要的：在音乐作品页往下翻专辑墙时，分类条要一直悬在顶上，
   不用一路划回页首才能换分类。做法和 .albnav / .artnav 一致：
   负边距撑到 .wrap 两侧、背景做半透明毛玻璃，滚动时压住下面的专辑卡。
   ⚠ 绝不能给祖先加 overflow:hidden —— 会创建滚动容器，sticky 立刻失效。
     全站已统一用 overflow-x:clip（见 html/body 顶部注释），这里不用再动。 */
.music-tabs{
  position:sticky;top:var(--head-h);z-index:57;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 -20px 22px;padding:12px 20px 13px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:top .3s var(--ease);
}
/* 顶栏收起时（往下滚）让它顶到最上面，别留一条空档 —— 和 .albnav/.artnav 同一套约定 */
body.head-hidden .music-tabs{top:0}
/* 毛玻璃生效前的兜底：不支持 backdrop-filter 的浏览器直接把底色做实，
   否则半透明底下会透出专辑封面，字看不清 */
@supports not (backdrop-filter:blur(4px)){
  .music-tabs{background:var(--bg)}
}
.mtab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line2);
  color:var(--tx2);font-size:13px;background:var(--surface2);transition:all .25s var(--ease);text-decoration:none}
.mtab:hover{border-color:var(--accent);color:var(--accent)}
.mtab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.mtab i{font-style:normal;font-size:11px;background:rgba(127,127,127,.18);padding:1px 7px;border-radius:999px}
.mtab.on i{background:rgba(255,255,255,.22)}
/* 手机端：分类条改成一条横滑带，只占一行，手指左右拨就能到头。
   换行会吃掉 2~3 行高度把首屏压扁，而且超出的分类会被挤到看不见（等于没有）。 */
@media(max-width:680px){
  .music-tabs{
    flex-wrap:nowrap;overflow-x:auto;gap:6px;
    margin:14px -16px 16px;padding:10px 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .music-tabs::-webkit-scrollbar{display:none}
  .mtab{flex:0 0 auto;padding:6px 12px;font-size:12.5px}
}
.album-cover .dl-badge{position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;display:grid;place-items:center;backdrop-filter:blur(4px)}
/* 专辑网盘下载区 */
/* 背景用「实色」而不是半透明 accent-weak：
   半透明底会把背后的文字透出来，一屏里同时有歌词和下载框时，
   看着就像二者「糊在一起」（长截图/低端机渲染尤其明显）。 */
.dl-box{
  position:relative;margin-top:34px;border:1px dashed var(--accent);border-radius:var(--r);
  padding:18px 20px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));
}
.dl-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--accent);color:#fff}
.dl-t{flex:1;min-width:200px}
.dl-t b{font-size:15px;display:block;margin-bottom:2px}
.dl-t .hint{margin:0;font-size:12px}
.dl-lock{margin-top:14px}
.dl-lock-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dl-lock-row input{max-width:220px}
.dl-err{color:var(--danger, #ef4444);font-size:12.5px}
.dl-link{display:inline-flex;margin-top:10px;color:var(--accent);font-weight:600}
.dl-link[hidden]{display:none}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chart-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);transition:.2s}
.chart-row:last-child{border-bottom:0}
.chart-row:hover{background:var(--surface2)}
.chart-row.playing{background:var(--accent-weak)}
.cplay{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);cursor:pointer;font-size:11px;transition:.2s}
.cplay:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cinfo{flex:1;min-width:0}
.cinfo b{display:block;font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cinfo span{font-size:12px;color:var(--tx3)}
.ctime{font-size:12px;color:var(--tx3)}

/* ===== 视频 ===== */
.video-grid{display:grid;gap:18px}
.video-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.video-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.video-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vcard{display:block;transition:transform .3s var(--ease)}
.vcard:hover{transform:translateY(-4px)}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface2)}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vcard:hover .vthumb img{transform:scale(1.05)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:18px;backdrop-filter:blur(4px);transition:.3s}
.vcard:hover .vplay{background:var(--accent);transform:translate(-50%,-50%) scale(1.12)}
.vdur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:2px 7px;border-radius:5px}
.vsegs{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:2px 7px;border-radius:5px}
/* 角标文案走 Video::platBadge() 已本地化（B站/YouTube/优酷…），
   不再用 uppercase —— 那会把 YouTube 顶成 YOUTUBE，对中文标签也毫无意义。 */
.vplat{position:absolute;left:8px;top:8px;background:var(--accent);color:#fff;font-size:11px;padding:2px 8px;border-radius:5px}
.plat-bilibili{background:#00a1d6}.plat-youtube{background:#ff0000}.plat-douyin{background:#111}
.plat-youku{background:#0057ff}.plat-qq{background:#12b7f5}.plat-kuaishou{background:#ff6600}
.vcard h3{font-size:14px;margin-top:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 怀念家驹 · 独立专题页（/koma）===== */
.koma-topic{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.kt-side{position:sticky;top:calc(var(--head-h) + 12px);background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px}
.kt-head h1{font-size:21px;margin:0 0 2px;letter-spacing:.02em}
.kt-head p{font-size:11.5px;color:var(--tx3);letter-spacing:.12em;margin:0 0 14px}
.kt-nav{display:flex;flex-direction:column;gap:4px}
.kt-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;
  color:var(--tx2);text-decoration:none;font-size:14px;transition:.2s var(--ease)}
.kt-link:hover{background:var(--surface);color:var(--tx)}
.kt-link.on{background:var(--accent);color:#fff;font-weight:600}
.kt-link.on em{color:rgba(255,255,255,.85)}
.kt-link em{font-style:normal;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.kt-link.zero{opacity:.5}
.kt-note{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--tx3);line-height:1.8}
.kt-main{min-width:0}
.kt-bar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.kt-bar b{font-size:18px}
.kt-bar span{font-size:12.5px;color:var(--tx3)}
@media(max-width:860px){
  .koma-topic{grid-template-columns:1fr}
  .kt-side{position:static;top:auto;margin-bottom:6px}
  .kt-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .kt-link{font-size:13px;padding:7px 11px}
  .kt-note{display:none}
}
/* 歌迷写家驹：文章卡直接铺开 */
.kgm-articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kart{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--surface2);
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:.24s var(--ease)}
.kart:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.kart-b h3{font-size:15.5px;margin:0 0 4px;line-height:1.45;color:var(--tx);transition:color .18s}
.kart:hover .kart-b h3{color:var(--accent)}
.kart-au{display:inline-block;font-size:11.5px;color:var(--tx3);margin-bottom:2px}
.kart-b p{font-size:13px;color:var(--tx2);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kart .meta{font-size:12px;color:var(--tx3)}
@media(max-width:640px){.kgm-articles{grid-template-columns:1fr}}
/* 页内阅读浮层（歌迷写家驹） */
.kreader-mask{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .22s var(--ease)}
/* ⚠ display:flex 会覆盖 [hidden] 默认的 display:none，必须显式补，否则浮层永远挡在页面上吃掉所有点击 */
.kreader-mask[hidden]{display:none}
.kreader-mask.open{opacity:1}
.kreader{position:relative;width:min(760px,100%);max-height:min(86vh,860px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.985);transition:transform .22s var(--ease)}
.kreader-mask.open .kreader{transform:none}
.kreader-x{position:absolute;top:12px;right:14px;z-index:2;width:32px;height:32px;border-radius:50%;border:0;
  background:var(--surface2);color:var(--tx2);font-size:15px;cursor:pointer;transition:.18s}
.kreader-x:hover{background:var(--accent);color:#fff}
.kreader h2{font-size:19px;margin:0;padding:20px 52px 6px 22px;line-height:1.4;color:var(--tx)}
.kreader-meta{font-size:12.5px;color:var(--tx3);margin:0;padding:0 22px 12px;border-bottom:1px solid var(--line)}
.kreader-body{overflow-y:auto;padding:16px 22px 26px;font-size:15.5px;line-height:1.95;color:var(--tx);word-break:break-word;overscroll-behavior:contain}
.kreader-body img{max-width:100%;height:auto;border-radius:8px}
.kreader-body p{margin:0 0 12px}
.kreader-body br{line-height:2}

/* ===== 首页 · 怀念家驹专题入口卡 ===== */
.koma-hero{display:block;position:relative;overflow:hidden;margin-bottom:14px;padding:24px 18px 22px;
  border-radius:var(--r);text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#18181e 0%,#2b1220 55%,#4a1226 100%);
  border:1px solid rgba(255,255,255,.08);transition:.25s var(--ease)}
.koma-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(225,29,72,.35),transparent 70%)}
.koma-hero:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.koma-hero .kh-in{position:relative;z-index:1}
.koma-hero b{display:block;font-size:19px;letter-spacing:.03em;margin-bottom:6px}
.koma-hero span{font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.68)}
.koma-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.koma-cats a{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:12.5px;
  color:var(--tx2);text-decoration:none;background:var(--surface2);border:1px solid var(--line);transition:.2s var(--ease)}
.koma-cats a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-weak)}
.koma-count{font-size:12.5px;color:var(--tx3);margin:0;line-height:1.7}
.koma-count b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}

/* ===== 相册 ===== */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.masonry{columns:3;column-gap:14px}
.gallery.masonry .gitem{break-inside:avoid;margin-bottom:14px;display:block}
.gitem{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface2);transition:transform .3s var(--ease)}
.gitem:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* height:auto 配合 <img width height> 属性：图没到之前浏览器就按比例留出高度，
   瀑布流不会「先挤成一堆、图来了再撑开」。display:block 去掉 inline 基线间隙。 */
.gitem img{width:100%;height:auto;display:block;border-radius:var(--r)}
/* 家驹相册（#1388）整理后的干净网格：去装饰框、去嵌套 table，真照片平铺 */
.koma-album{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ka-intro{margin:0 0 16px;color:var(--tx2);font-size:13.5px;line-height:1.7}
.ka-intro a{color:var(--accent)}
.kj-intro{margin:0 0 18px;color:var(--tx2);font-size:14px;line-height:1.8}
.kj-intro a{color:var(--accent)}
/* ===== koma 专题索引列表（1387 新闻旧事 / 1389 歌迷写家驹 / 1390 家驹资料）===== */
.kj-list{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.kj-list li{display:flex;align-items:baseline;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.kj-list li:hover{background:var(--surface2)}
.kj-list .kj-date{flex:0 0 auto;font-size:12px;color:var(--tx3);letter-spacing:.03em;font-variant-numeric:tabular-nums;min-width:86px}
.kj-list a{color:var(--tx);text-decoration:none;font-size:15px;line-height:1.55;transition:color .18s var(--ease);word-break:break-word}
.kj-list a:hover{color:var(--accent)}
.kj-list a::after{content:"›";margin-left:6px;opacity:0;transform:translateX(-4px);transition:.2s var(--ease);color:var(--accent)}
.kj-list a:hover::after{opacity:1;transform:translateX(0)}
.kj-list-h li{display:flex;flex-direction:column;gap:3px}
.kj-list-h .kj-date{font-size:12px}
.kgm-photo{text-align:center;margin:0 0 6px}
.kgm-photo img{max-width:150px;border-radius:10px;box-shadow:var(--shadow)}
.kj-body p{margin:0 0 12px;font-size:15px;line-height:1.9}
@media(max-width:760px){.koma-album{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(max-width:480px){.koma-album{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}}
.gcap{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 10px;font-size:12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:.3s}
.gitem:hover .gcap{opacity:1}

/* ===== 时间轴 ===== */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:22px}
.tl-dot{position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.tl-item time{font-size:12px;color:var(--accent);letter-spacing:.04em}
.tl-item h3{font-size:16px;margin:3px 0 5px}
.tl-item h3 a:hover{color:var(--accent)}
.tl-item p{font-size:13.5px;color:var(--tx2);margin:0}

/* ===== 友链 / 留言 / 倒计时 ===== */
.links.style-logo{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.links.style-text{display:flex;flex-wrap:wrap;gap:10px}
.lnk{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);transition:.25s;font-size:13.5px}
.lnk:hover{border-color:var(--accent);transform:translateY(-2px)}
.lnk img{width:22px;height:22px;border-radius:5px;object-fit:cover}
/* 显式单列轨道：隐式 auto 轨道会按 min-content 撑宽，导致窄屏整排溢出 */
.gb-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:18px;background:var(--surface);padding:16px;border-radius:var(--r);border:1px solid var(--line)}
.gb-form>*{min-width:0}
.gb-form input,.gb-form textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);outline:none;resize:vertical}
.gb-form input:focus,.gb-form textarea:focus{border-color:var(--accent)}
.gb-form>button{justify-self:start;width:auto}
.gb-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gb-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.gb-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.gb-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff7a59)}
.gb-h b{font-size:14px}.gb-h em{font-style:normal;font-size:11px;color:var(--tx3)}
.gb-h time{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.gb-list p{font-size:14px;margin:0}
.gb-reply{margin-top:9px;padding:9px 12px;background:var(--surface2);border-radius:10px;font-size:13.5px;color:var(--tx2);border-left:2px solid var(--accent)}
.countdown{text-align:center;padding:34px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.countdown h2{font-size:20px;margin-bottom:14px}
/* 数字在上、单位在下（老版是「数字 天 时 分 秒」挤一行，改成竖排单位更像纪念牌） */
.cd-nums{display:flex;justify-content:center;gap:clamp(14px,4vw,38px);font-weight:600}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px}
.cd-u b{font-size:clamp(24px,4.5vw,40px);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.cd-u i{font-style:normal;font-size:12.5px;color:var(--tx3)}
/* elapsed（已经多久）显 年/天/时/分，不显秒；倒计时/周年反之不显年 */
.countdown[data-mode="elapsed"] .cd-s{display:none}
.countdown:not([data-mode="elapsed"]) .cd-y{display:none}
.cd-note{color:var(--tx3);font-size:13px;margin:10px 0 0}

/* ===== 分页 ===== */
/* 「共 X 条 / Y 页」从 .pager 里拿出来单独一行 —— 它挤在同一行时会把
   「下一页」顶到第二行（手机上尤其明显）。 */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin:34px 0 0;flex-wrap:wrap}
.pg{padding:7px 14px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;transition:.2s}
.pg:hover{border-color:var(--accent);color:var(--accent)}
.pg.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pg-info{display:block;text-align:center;font-size:12.5px;color:var(--tx3);margin:10px 0 34px}

/* ===== 页脚 / 播放器 / 工具 ===== */
.site-foot{border-top:1px solid var(--line);margin-top:60px;background:var(--bg2)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:44px 20px;text-align:center}
.foot-brand .brand-mark{font-size:22px}
.foot-brand p{color:var(--tx3);font-size:13px;margin:6px 0 18px;letter-spacing:.18em}
.foot-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:var(--tx2);margin-bottom:16px}
.foot-nav a:hover{color:var(--accent)}
.foot-copy{font-size:12px;color:var(--tx3);margin:0}
/* ===== 底部迷你播放器 =====
   grid 两块：第一行 封面 | 信息 | 控制键，第二行整行给进度条。
   播放列表从播放器上方展开（.list-open）。 */
.mini-player{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"cover info ctl" "prog prog prog";
  align-items:center;gap:6px 14px;
  padding:10px 18px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.mp-cover{grid-area:cover;width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:grid;place-items:center;color:#fff;font-size:18px;flex-shrink:0}
.mp-cover.spin span{animation:spin 4s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.mp-info{grid-area:info;min-width:0}
.mp-info b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-info span{font-size:12px;color:var(--tx3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-ctl{grid-area:ctl;display:flex;gap:8px;align-items:center}
.mp-ctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);cursor:pointer;
  display:grid;place-items:center;line-height:1;color:var(--tx2);position:relative;font-size:13px}
.mp-ctl button:hover{border-color:var(--accent);color:var(--accent)}
.mp-ctl .mp-play{background:var(--accent);color:#fff;border-color:var(--accent);font-size:12px}
.mp-ctl .mp-listbtn{border-radius:10px}
.mp-ctl .mp-listbtn i{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:10px;font-style:normal;line-height:16px;padding:0 4px;font-weight:600}

/* 进度条：用原生 range，各浏览器默认外观差异极大，四段伪元素都得写 */
.mp-prog{grid-area:prog;display:flex;align-items:center;gap:10px;min-width:0}
.mp-time{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums;flex:0 0 auto}
/* 已播部分靠 input 自身的渐变背景画出来 —— 伪元素轨道（::-webkit-slider-runnable-track）
   接不了 CSS 变量，只能在 input 上做，--p 由 app.js 在 timeupdate 里更新 */
.mp-seek{flex:1;min-width:0;height:20px;-webkit-appearance:none;appearance:none;cursor:pointer;margin:0;
  background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--p,0%),var(--line) var(--p,0%),var(--line) 100%) no-repeat;
  background-size:100% 4px;background-position:left center;border-radius:2px}
.mp-seek:disabled{cursor:default;opacity:.45}
.mp-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:transparent}
.mp-seek::-moz-range-track{height:4px;border-radius:2px;background:transparent}
.mp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);margin-top:-4.5px;box-shadow:0 0 0 1px var(--accent)}
.mp-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}

/* 播放列表面板：贴在播放器上方 */
.mp-queue{display:none;position:absolute;left:0;right:0;bottom:100%;max-height:min(54vh,420px);overflow:auto;
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(0,0,0,.28);padding:6px 0}
.mini-player.list-open .mp-queue{display:block}
.mpq-empty{padding:18px;text-align:center;color:var(--tx3);font-size:13px}
.mpq-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 18px;background:none;border:0;cursor:pointer;
  text-align:left;color:inherit;font:inherit}
.mpq-row:hover{background:var(--surface2)}
.mpq-row.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mpq-no{width:22px;flex:0 0 auto;text-align:center;font-size:12px;color:var(--tx3);font-style:normal}
.mpq-row.on .mpq-no{color:var(--accent)}
.mpq-t{flex:1;min-width:0}
.mpq-t b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpq-t small{font-size:11.5px;color:var(--tx3)}
.mpq-lock{font-style:normal;font-size:12px;flex:0 0 auto}
/* 播放列表行内的「✕ 移除」：hover 才显眼，平时低调不抢视线 */
.mpq-del{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;line-height:1;color:var(--tx3);cursor:pointer;opacity:.35;transition:.15s;margin-left:2px}
.mpq-row:hover .mpq-del{opacity:1}
.mpq-del:hover{color:#fff;background:var(--bad,#dc2626);opacity:1}
/* 播放器出现时给页面底部留出空间（class 由 app.js 在显示播放器时挂上）。
   ⚠ 要加在 body 上而不是 #main —— footer 是 <main> 的兄弟节点，
   只给 main 留白的话页脚照样被 fixed 的播放器盖住。 */
body.has-mini{padding-bottom:104px}

/* ===== 轻提示（toast） =====
   z-index 要压过搜索面板（1200）与顶栏（1000），否则在搜索面板里加入列表时看不见提示 */
.lb-tipbox{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:1400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:max-content;max-width:92vw}
.lb-tip{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:92vw;
  padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:13.5px;color:var(--tx);animation:lbTipIn .22s var(--ease)}
.lb-tip.out{opacity:0;transform:translateY(8px);transition:.28s var(--ease)}
.lb-tip.lock{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.lb-tip-act{flex:0 0 auto;padding:5px 12px;border-radius:8px;background:var(--accent);color:#fff;
  font-size:12.5px;text-decoration:none;font-weight:600}
@keyframes lbTipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== 全站实时搜索（顶栏放大镜 → 弹出面板） =====
   移动端原来连搜索框都没有（.head-search 被 display:none 藏了），
   现在所有端统一有一个放大镜按钮，点开就是输入即出结果的搜索面板。 */
.head-sbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);
  color:var(--tx2);cursor:pointer;display:grid;place-items:center;font-size:16px;flex:none}
.head-sbtn:hover{border-color:var(--accent);color:var(--accent)}
/* ⚠ z-index 要高于顶栏（.site-head 是 sticky + z-index:1000），
   否则面板会被顶栏整条盖住 —— 关闭按钮点不动，实测踩过。 */
.search-pop{position:fixed;inset:0;z-index:1200;background:color-mix(in srgb,#000 46%,transparent);
  backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;
  padding:max(24px,8vh) 16px 16px}
.search-pop[hidden]{display:none}
.sq-inner{width:min(680px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.42);overflow:hidden;display:flex;flex-direction:column;
  max-height:min(76vh,700px)}
.sq-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
.sq-ic{color:var(--tx3);font-size:18px;flex:none}
.sq-input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:var(--tx);outline:none;padding:6px 0}
.sq-close{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);
  color:var(--tx2);cursor:pointer;flex:none}
.sq-close:hover{border-color:var(--accent);color:var(--accent)}
.sq-panel{overflow:auto;padding:6px 0 10px;overscroll-behavior:contain}
.sq-head{padding:10px 16px 6px;font-size:12.5px;color:var(--tx3)}
.sq-head b{color:var(--tx)}
.sq-empty{padding:26px 16px;text-align:center;color:var(--tx3);font-size:13.5px}
.sq-keys{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 4px}
.sq-kwlabel{font-size:12.5px;color:var(--tx3);align-self:center}
.sq-gbody{color:var(--tx3);font-size:11.5px}
.sq-key{padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--surface2);
  color:var(--tx2);font-size:12.5px;cursor:pointer}
.sq-key:hover{border-color:var(--accent);color:var(--accent)}
.sq-grp{margin-top:4px}
.sq-grp-h{display:flex;align-items:center;gap:8px;padding:9px 16px 4px;font-size:12px;color:var(--tx3);
  letter-spacing:.06em}
.sq-grp-h em{font-style:normal;background:var(--surface2);border-radius:9px;padding:1px 7px;font-size:11px}
.sq-item{display:flex;align-items:center;gap:11px;padding:8px 16px;text-decoration:none;color:inherit}
.sq-item:hover,.sq-item.hot{background:var(--surface2)}
.sq-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none;background:var(--surface2)}
.sq-tx{min-width:0;flex:1}
.sq-tx b{display:block;font-size:13.8px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-tx small{display:block;font-size:11.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-item mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.sq-more{display:block;padding:7px 16px 4px;font-size:12.5px;color:var(--accent);text-decoration:none}
.sq-foot{padding:8px 16px 10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--tx3);flex:none}
@media (max-width:760px){
  .search-pop{padding:0}
  .sq-inner{width:100%;max-height:100%;height:100%;border-radius:0;border:0}
  .sq-input{font-size:16px}   /* ≥16px 才不会触发 iOS 自动放大 */
}

/* 搜索页：按模块分组的结果列表 */
.sres-grp{margin-bottom:28px}
.sres-grp .sect-h{display:flex;align-items:center;gap:8px}
.sres-grp .sect-h em{font-style:normal;font-size:12px;background:var(--surface2);border-radius:9px;
  padding:1px 8px;color:var(--tx3);font-weight:500}
.sres-grp .sect-h small{font-size:11.5px;color:var(--tx3);font-weight:400}
.sres-ic{color:var(--accent)}
/* ⚠ bottom 必须让开右下角的「外观设置」圆钮（.skin-fab 在 skin.css，right:16px/bottom:76px/46px 高，
   z-index:160），否则两者叠在一起、回顶按钮被整个盖住点不到。这里放到它正上方留 12px 间隙。 */
.to-top{position:fixed;right:20px;bottom:134px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:80}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
@media (max-width:760px){.to-top{right:14px;bottom:134px}}

/* ===== 灯箱 ===== */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:grid;place-items:center;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:8px}
.lightbox .lb-close{position:absolute;right:22px;top:22px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;cursor:pointer;font-size:18px}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;font-size:20px}
.lightbox .lb-prev{left:20px}.lightbox .lb-next{right:20px}
.lightbox .lb-nav:hover{background:rgba(255,255,255,.26)}
/* 只有一张图时不摆左右箭头：点了也没反应，就是个死按钮 */
.lightbox.single .lb-nav{display:none}
.lightbox.single img{max-width:96vw}
/* 手机上让图尽量吃满屏幕，控件贴边但不挡图 */
@media(max-width:680px){
  .lightbox img{max-width:97vw;max-height:82vh}
  .lightbox .lb-close{right:12px;top:12px;width:38px;height:38px}
  .lightbox .lb-nav{width:40px;height:40px;background:rgba(255,255,255,.18)}
  .lightbox .lb-prev{left:8px}.lightbox .lb-next{right:8px}
}

/* ===== 编辑条 ===== */
.edit-bar{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:12px;
  padding:9px 20px;background:linear-gradient(90deg,#111827,#1f2937);color:#fff;font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.eb-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.25)}
.eb-actions{margin-left:auto;display:flex;gap:8px}
.edit-bar .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.edit-bar .btn:hover{border-color:#fff;color:#fff}

/* ===== 页面容器 ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 20px}
.page-head{margin:34px 0 22px}
.page-head h1{font-size:clamp(24px,4vw,34px)}
.ph-sub{color:var(--tx3);font-size:14px;margin-top:6px}
.crumb{font-size:13px;color:var(--tx3);padding:20px 0}
.crumb a:hover{color:var(--accent)}
/* 面包屑末端「正文」：不是链接，压暗一档与可点项区分开 */
.crumb-here{color:var(--tx2)}
.tip{padding:10px 14px;border-radius:10px;font-size:13.5px;margin-bottom:14px}
.tip.ok{background:rgba(34,197,94,.12);color:#16a34a}
.tip.err{background:rgba(239,68,68,.12);color:#dc2626}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;color:var(--tx2);transition:.2s;display:inline-block}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.cat-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cat-nav .chip em{font-style:normal;margin-left:6px;font-size:11.5px;opacity:.6}
.cat-nav .chip.on em{opacity:.85}
.cat-nav .chip.zero{opacity:.45;border-style:dashed}
.cat-nav .chip.zero:hover{border-color:var(--line);color:var(--tx2);cursor:not-allowed}

/* ===== 资料大卡片 ===== */
.zl-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.zl-card{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:.35s var(--ease)}
.zl-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)}
.zl-img{aspect-ratio:4/3;background:var(--surface2);overflow:hidden}
.zl-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.zl-card:hover .zl-img img{transform:scale(1.07)}
.zl-txt{padding:16px 18px}
/* 标题/摘要都限行数：老站迁移过来的 summary 常有 60+ 字，
   不限行的话卡片高度参差不齐，手机上还会被挤成一条竖着读的窄柱。 */
.zl-txt h2{font-size:17px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zl-txt p{font-size:13px;color:var(--tx2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 乐队资料页顶部介绍 */
.zl-intro{margin:0 0 18px;padding:18px 22px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--surface2));font-size:14px;line-height:1.9;color:var(--tx2)}
.zl-intro h2,.zl-intro h3{color:var(--tx);margin:0 0 8px}
.zl-intro p{margin:0 0 10px}
.zl-intro p:last-child{margin-bottom:0}
.zl-intro b{color:var(--accent)}
/* 列表页头部：只留引子 + 查看详情（完整内容在 /zl/about），别让 566 字占掉手机整屏 */
.zl-intro{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 22px}
.zi-lead{margin:0!important;flex:1 1 320px;min-width:0;font-size:14px;line-height:1.8;color:var(--tx2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.zi-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--accent);
  padding:8px 16px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:999px;transition:.22s}
.zi-more:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.zi-more span{transition:transform .22s}
.zi-more:hover span{transform:translateX(3px)}

/* ===== 乐队简介内页（/zl/about） ===== */
.za-hero{position:relative;margin:0 0 22px;padding:30px 26px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--surface2))}
.za-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
.za-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.za-hero h1{margin:10px 0 0;font-size:clamp(24px,5vw,36px);letter-spacing:.02em}
.za-meta{display:flex;gap:20px;flex-wrap:wrap;margin:14px 0 0;font-size:13px;color:var(--tx3)}
.za-meta b{color:var(--tx);font-size:17px;margin-right:4px;font-variant-numeric:tabular-nums}
.za-intro{font-size:16px;line-height:2;color:var(--tx2)}
.za-intro p{margin:0 0 16px}
.za-intro p:last-child{margin-bottom:0}
.za-intro b{color:var(--accent);font-weight:600}
.za-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.za-cta .btn-primary,.za-cta .btn{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){
  .za-hero{padding:24px 20px}
  .za-intro{font-size:15px;line-height:1.95}
  .zl-intro{padding:14px 18px;gap:12px}
  .zi-lead{flex:1 1 100%}
  .zi-more{width:100%;justify-content:center}
}

/* ===== 大片式专题页 ===== */
.story-page{background:var(--bg)}
.story-hero{
  position:relative;min-height:88vh;display:grid;place-items:center;text-align:center;
  /* 同上：手机端用 svh 锁死高度，避免地址栏收放时整页跳动 */
  background-size:cover;background-position:center;background-attachment:fixed;
}
.story-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),var(--bg) 92%),radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.6))}
.story-hero-inner{position:relative;z-index:2;padding:0 24px;max-width:1000px}
.story-kicker{display:inline-block;padding:5px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:12.5px;letter-spacing:.1em;margin-bottom:20px;backdrop-filter:blur(6px)}
/* 改成可点的「返回分类」后：去掉链接下划线，hover 给个主色底，看得出能点 */
a.story-kicker{text-decoration:none;transition:.22s var(--ease)}
a.story-kicker:hover{background:var(--accent);border-color:var(--accent)}
.story-title{
  font-size:clamp(34px,8vw,86px);line-height:1.08;font-weight:700;color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.7);letter-spacing:-.02em;
}
.story-meta{margin-top:18px;color:rgba(255,255,255,.75);font-size:14px;letter-spacing:.06em}
.story-scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);
  font-size:12px;letter-spacing:.2em;z-index:2;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,8px)}}
.story-body{max-width:760px;margin:0 auto;padding:56px 20px 20px}
.story-lead{font-size:19px;line-height:1.9;color:var(--tx);border-left:3px solid var(--accent);padding-left:18px;margin-bottom:34px}
.story-content{font-size:18px;line-height:2.05;color:var(--tx)}
.story-content h2{font-size:26px;margin:46px 0 18px;padding-top:10px}
.story-content h3{font-size:21px;margin:32px 0 14px}
.story-content p{margin:0 0 26px}
.story-content img{border-radius:var(--r);margin:34px 0;width:100%;box-shadow:var(--shadow)}
.story-content figure{margin:44px calc(50% - 50vw);width:100vw;max-width:100vw}
.story-content figure img{width:100%;border-radius:0;margin:0}
.story-content figcaption{text-align:center;font-size:13px;color:var(--tx3);padding:10px 20px}
.story-content blockquote{margin:30px 0;padding:16px 22px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.story-content ul,.story-content ol{padding-left:24px;margin:0 0 26px}
.story-content li{margin-bottom:10px}
.story-tags{margin:40px 0;display:flex;gap:8px;flex-wrap:wrap}
.story-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0}
/* 正文读完的出口：先给「返回上级」，再是上下篇。
   以前读完只剩上一篇/下一篇，想回分类列表得往上划一屏找浮导。 */
.art-foot-back{margin:36px 0 0;display:flex;justify-content:center}
.afb{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-size:14px;color:var(--tx2);
  border:1px solid var(--line);background:var(--surface);transition:.25s var(--ease);
}
.afb:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.afb-ic{font-size:12px;opacity:.75}
.sn{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:.25s;overflow:hidden}
.sn:hover{border-color:var(--accent)}
.sn span{display:block;font-size:12px;color:var(--tx3);margin-bottom:4px}
.sn b{font-weight:500;font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn.next{text-align:right}
.story-comments{border-top:1px solid var(--line);padding:40px 0 60px;background:var(--bg2)}

/* ===== 文章详情（普通） ===== */
.article-page{padding-bottom:50px}
.atitle{font-size:clamp(24px,4vw,38px);margin:8px 0 12px;line-height:1.25}
.ameta{font-size:13px;color:var(--tx3)}
.acover{width:100%;border-radius:var(--r);margin:20px 0}
.alead{font-size:17px;color:var(--tx2);border-left:3px solid var(--accent);padding-left:16px;margin-bottom:26px}
.abody{font-size:16.5px;line-height:1.95}
.abody img{max-width:100%;border-radius:var(--r);margin:16px 0}
.abody h2{font-size:22px;margin:32px 0 14px}
.ai-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:16px 18px;margin:24px 0}
.ai-card h3{font-size:14px;color:var(--accent);margin-bottom:8px}
.ai-card div{font-size:14.5px;color:var(--tx2);line-height:1.8}

/* ===== 评论 ===== */
.ctitle{font-size:17px;margin:34px 0 14px;display:flex;align-items:center;gap:8px}
.ctitle em{font-style:normal;font-size:12px;color:var(--tx3)}
.cform{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:var(--surface);padding:16px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:20px}
.cform>*{min-width:0}
.cform input,.cform textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);outline:none;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--accent)}
.cform>button{justify-self:start;width:auto}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.clist li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ch{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ch b{font-size:14px}.ch time{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.clist p{font-size:14.5px;margin:0}
.cchild{margin-top:8px;padding:8px 12px;background:var(--surface2);border-radius:9px;font-size:13.5px;color:var(--tx2)}

/* ===== 评论升级：表情 / AI / 传图 / 头像 / 属地 / 设备 ===== */
.comments-wrap{padding-top:8px}
.cform .c-row{display:flex;gap:10px;align-items:center}
.cform .c-row input{flex:1;min-width:0}
.cform .c-toolbar,.gb-form .c-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.c-tool{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.2s;padding:0}
.c-tool:hover{border-color:var(--accent);background:var(--surface)}
.c-aiw{justify-self:start}
/* 表情面板：点击小图标才展开（表格浮层），分组 tab 切换 */
.emoji-panel{display:none;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow);position:relative;z-index:20}
.emoji-panel.open{display:flex;animation:cp-in .18s ease}
@keyframes cp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.emoji-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 2px 8px}
.emoji-tab{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:8px;border:1px solid transparent;background:none;font-size:13px;color:var(--tx2);cursor:pointer;transition:.15s}
.emoji-tab img{width:20px;height:20px;object-fit:contain}
.emoji-tab:hover{background:var(--surface2);color:var(--tx)}
.emoji-tab.on{background:var(--accent-weak,rgba(225,29,72,.1));border-color:var(--accent);color:var(--accent)}
.emoji-bodies{display:block}
.emoji-body{display:none;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:190px;overflow-y:auto;padding:2px}
.emoji-body.on{display:grid}
.emoji-body .emoji{width:40px;height:40px;padding:4px;border:0;background:none;cursor:pointer;border-radius:8px;transition:.15s}
.emoji-body .emoji img{width:32px;height:32px;object-fit:contain;display:block;margin:auto}
.emoji-body .emoji:hover{background:var(--surface2);transform:scale(1.14)}
.c-bottom{display:flex;gap:12px;align-items:end;justify-content:space-between;flex-wrap:wrap}
.c-bottom .cap-row{display:flex;gap:8px;align-items:center}
.c-imgs{display:flex;gap:10px;flex-wrap:wrap}
.c-pre{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.c-pre img{width:100%;height:100%;object-fit:cover}
.c-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;line-height:1}
.c-repinfo{font-size:12.5px;color:var(--tx3);display:flex;align-items:center;gap:6px}
.c-repinfo b{color:var(--accent)}
.c-cxl{font-size:11px;color:var(--tx3);border:0;background:none;cursor:pointer;text-decoration:underline}
.c-head{display:flex;gap:10px;margin-bottom:8px}
.c-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:#fff;overflow:hidden}
.c-av.sm{width:26px;height:26px;flex-basis:26px;font-size:13px}
/* 会员色块头像（留言本/评论区复用 av-1..8 底色），加边框区分访客 emoji 头像 */
.c-av.mem{border:2px solid var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);font-weight:800}
.c-hm{flex:1;min-width:0}
.c-hm .ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.c-hm .ch b{font-size:14px}
.ch .c-reply{margin-left:auto;font-size:11.5px;color:var(--tx3);border:1px solid transparent;background:none;cursor:pointer;padding:2px 6px;border-radius:6px;transition:.15s}
.ch .c-reply:hover{color:var(--accent);border-color:var(--accent)}
.c-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--tx3);margin-top:2px}
.c-meta time{font-size:11.5px;color:var(--tx3)}
.c-emoji{font-size:16px;line-height:1}
.c-emimg{display:inline-block;width:22px;height:22px;object-fit:contain;vertical-align:-4px;margin:0 1px}
.c-geo{font-size:11.5px;color:var(--tx3)}
.c-ua{font-size:12px;color:var(--tx3)}
/* 留言本 · 会员徽章与锁定昵称 */
.gb-mem{font-style:normal;font-size:10.5px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);padding:0 5px;border-radius:6px;margin-left:5px;vertical-align:1px}
.gb-locked{background:var(--surface2)!important;color:var(--tx2);cursor:not-allowed;opacity:.85}
.c-body p{margin:0 0 6px}
.c-img{display:block;margin-top:8px;max-width:300px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.c-img img{width:100%;display:block;max-height:300px;object-fit:cover}
.c-childs{margin-top:10px;padding:10px 12px;background:var(--surface2);border-radius:12px;display:grid;gap:10px}
.c-child{display:flex;gap:9px}
.c-child > div{flex:1;min-width:0}
.c-child p{font-size:13.5px;margin:2px 0 0;color:var(--tx2)}
.c-child .ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.c-child .ch b{font-size:13px}
.gb-h{display:flex;align-items:flex-start;gap:9px;margin-bottom:7px}
.gb-row2{display:flex;gap:10px}
.gb-row2 input{flex:1;min-width:0}

/* ===== 专辑 / 曲目 ===== */
.album-head{display:grid;grid-template-columns:260px 1fr;gap:30px;margin:26px 0 34px;align-items:start}
.ah-cover{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--surface2);box-shadow:var(--shadow)}
.ah-cover img{width:100%;height:100%;object-fit:cover}
.ah-info h1{font-size:clamp(24px,4vw,40px)}
.ah-sub{color:var(--tx2);font-size:14.5px;margin:8px 0 14px}
.ah-intro{font-size:14.5px;color:var(--tx2);line-height:1.9}
.ah-stat{font-size:13px;color:var(--tx3);margin-top:12px}
.track-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.trow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);transition:.2s}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--surface2)}
.tno{width:24px;text-align:center;color:var(--tx3);font-size:13px}
.tplay{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);cursor:pointer;transition:.2s}
.tplay:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tplay.off{opacity:.3;cursor:not-allowed}
.tplay.off:hover{background:var(--bg2);color:inherit;border-color:var(--line)}
/* 有音源但未登录：保持可点（点了给登录引导），用主色区分于「没音源」的灰态 */
.tplay.need-login{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.tadd{width:28px;height:28px;border-radius:8px;border:1px dashed var(--line);background:transparent;
  color:var(--tx3);cursor:pointer;flex:none;font-size:14px;line-height:1;transition:.2s}
.tadd:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
/* 单曲页的播放条（只有一个 ▶，所以给它一条自己的容器） */
.single-play{display:flex;align-items:center;gap:12px;margin:18px 0 8px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.single-play .splay-tx{flex:1;font-size:14px;color:var(--tx2)}
.single-play .tadd{width:auto;height:32px;padding:0 12px;display:inline-flex;align-items:center;
  gap:5px;font-size:12.5px;color:var(--tx2)}
.trow.playing{background:var(--accent-weak)}
.trow.playing .tno{color:var(--accent);font-weight:700}
.tinfo{flex:1;min-width:0}
.tinfo b{font-weight:500;font-size:15px}
.tinfo .tdur{font-size:12px;color:var(--tx3);margin-left:10px}
.tlinks{display:flex;gap:6px;flex-wrap:wrap}
.tlinks.big{margin:20px 0;gap:10px}
.plat-btn{padding:4px 10px;border-radius:6px;font-size:12px;background:var(--surface2);border:1px solid var(--line);transition:.2s}
.plat-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.plat-netease{background:#c62f2f;color:#fff;border-color:#c62f2f}
.plat-qq{background:#12b7f5;color:#fff;border-color:#12b7f5}
.plat-kugou{background:#0099ff;color:#fff;border-color:#0099ff}
.plat-kuwo{background:#ff7a00;color:#fff;border-color:#ff7a00}
.plat-migu{background:#e60012;color:#fff;border-color:#e60012}
.plat-spotify{background:#1db954;color:#fff;border-color:#1db954}
.plat-youtube{background:#ff0000;color:#fff;border-color:#ff0000}
.nolink{font-size:12px;color:var(--tx3)}
.tlyric{padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;font-size:12px}
.lyric-box{padding:18px 20px;background:var(--surface2);border-bottom:1px solid var(--line)}
.lyric-box pre{white-space:pre-wrap;font-family:var(--font);font-size:14px;line-height:2;margin:0;color:var(--tx2)}

/* ===== 视频播放 ===== */
.vd-wrap{display:grid;grid-template-columns:1fr 340px;gap:24px;margin-top:20px}
.vd-player{position:sticky;top:calc(var(--head-h) + 18px)}
.vd-player .vplayer{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.vplayer{position:relative;background:#000;border-radius:var(--r);overflow:hidden;margin:24px 0}
.vp-facade{position:absolute;inset:0;background-size:cover;background-position:center;display:grid;place-items:center;cursor:pointer}
.vp-facade::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.vp-play{position:relative;width:76px;height:76px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);
  color:#fff;font-size:26px;cursor:pointer;transition:.3s;backdrop-filter:blur(4px)}
.vp-facade:hover .vp-play{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.vp-title{position:absolute;bottom:0;left:0;right:0;padding:16px 18px;color:#fff;font-size:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.7))}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 直链播放：原生 video/audio 铺满 16:9 容器 */
.vp-native{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vp-native.is-audio{position:absolute;left:0;right:0;bottom:0;top:auto;height:auto;background:rgba(0,0,0,.72);color-scheme:dark}
.vp-audbg{position:absolute;inset:0;background:#0b0b10 center/cover no-repeat}
/* 选集（演唱会多段） */
.vd-eps{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.vd-eps-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line)}
.vd-eps-hd h2{margin:0;font-size:15px}
.vd-eps-n{font-size:12.5px;color:var(--tx3)}
.vd-eps-list{max-height:322px;overflow:auto;padding:8px;display:grid;gap:5px}
.vd-ep{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--tx2);font:inherit;font-size:14px;text-align:left;cursor:pointer;
  transition:background .18s,color .18s}
.vd-ep:hover{background:var(--surface2);color:var(--tx)}
.vd-ep.on{background:var(--accent-weak);color:var(--accent);font-weight:600}
.vde-no{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:7px;background:var(--surface2);color:var(--tx3);font-size:12px}
.vd-ep.on .vde-no{background:var(--accent);color:#fff}
.vde-tx{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vde-tag{flex:none;font-size:11px;padding:1px 6px;border-radius:6px;background:var(--surface2);color:var(--tx3)}
.vde-sz{flex:none;font-size:12px;color:var(--tx3)}
.vd-tip{margin-top:12px;font-size:12.5px;color:var(--tx3)}
@media(max-width:900px){.vd-wrap{grid-template-columns:1fr}.vd-player{position:static}}
.vd-title{font-size:22px;margin:0 0 8px}
.vd-meta{font-size:13px;color:var(--tx3)}
.vd-desc{font-size:14.5px;color:var(--tx2);line-height:1.9;margin-top:14px}
.rel-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rel-list a{display:flex;gap:10px;align-items:center}
.rel-thumb{width:96px;height:56px;border-radius:8px;overflow:hidden;background:var(--surface2);flex-shrink:0}
.rel-thumb img{width:100%;height:100%;object-fit:cover}
.rel-list b{font-weight:500;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-list a:hover b{color:var(--accent)}

/* ===== 响应式 ===== */
@media (max-width:960px){
  /* 专辑墙列数阶梯（.album-wall 全站唯一，别处不要再写列数）：
     4(>960) → 3(≤960) → 2(≤760) → 2(≤680)，严格单调递减。
     历史坑：这里原写 2 列，而相册区段又有 ≤900 写 3 列且源顺序更靠后 →
     窗口 960→900 列数反而从 2 涨回 3（倒挂）。两条意图合并：3 列上提到 960，2 列下放到 760。 */
  .album-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .video-grid.cols-4,.video-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery,.gallery.masonry{grid-template-columns:repeat(2,minmax(0,1fr));columns:2}
  .card-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .menu-btn{display:block}
  /* 顶栏右侧按钮多（主题/登录/注册/汉堡）时总宽会顶出屏幕 —— 390px 机型实测
     溢出 42px，整个页面能横向拖动。收紧间距 + 缩按钮 + 允许换行兜底。 */
  .head-inner{padding:0 12px;gap:10px}
  .head-tools{gap:6px;min-width:0;flex-shrink:1;margin-left:auto}
  /* 移动端 .main-nav 已是 fixed（脱离文档流），head-inner 里只剩 brand + head-tools。
     用 margin-left:auto 把工具簇整体推到最右侧，汉堡（最后一项）即稳居最右、滚动时常驻最上层。 */
  .head-tools .mem-link{padding:5px 10px;font-size:12.5px}
  .theme-btn,.menu-btn{width:34px;height:34px;flex:none}
  .btn.sm{padding:5px 10px;font-size:12.5px;flex:none}
  .brand{min-width:0;flex-shrink:1}
  .brand-mark{font-size:17px;letter-spacing:.1em}
  .brand-cn{display:none}
  .main-nav{position:fixed;left:0;right:0;top:var(--head-h);flex-direction:column;background:var(--bg2);
    border-bottom:1px solid var(--line);padding:12px;gap:4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.28s var(--ease)}
  .main-nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav-item{padding:11px 14px;font-size:15px}
  .head-search{display:none}
  .lb-row{flex-direction:column;gap:0}
  .lb-col{flex:0 0 100%!important;width:100%}
  .album-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-grid.cols-2,.video-grid.cols-3,.video-grid.cols-4{grid-template-columns:1fr}
  .card-grid.cols-2,.card-grid.cols-3{grid-template-columns:1fr}
  .headline{grid-template-columns:1fr}
  .headline img{height:180px}
  .hero.h-tall{min-height:62vh}
  @supports (min-height:100svh){ .hero.h-tall{min-height:62svh} }

  /* 专辑页：封面 + 信息必须竖排。保持 260px+1fr 的话介绍文字只剩 ~80px 宽，
     会被挤成一条竖着读的窄柱（封面还大得离谱）。 */
  .album-head{grid-template-columns:1fr;gap:16px;margin:18px 0 26px}
  .ah-cover{width:220px;max-width:72%;justify-self:center}
  .ah-info h1{font-size:23px}
  .ah-sub{margin:6px 0 10px}
  .album-lyrics{margin-top:26px}
  .dl-box{margin-top:26px;padding:16px}

  /* 资料列表：3 列时每张卡只有 ~103px 宽，60 字的摘要排成一条竖长条。
     手机上降到 2 列，摘要限 3 行。 */
  .zl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .zl-txt{padding:12px 13px}
  .zl-txt h2{font-size:14.5px}
  .zl-txt p{font-size:12.5px}
  /* 分页：上一页 / 页码 / 下一页 必须留在同一行（「共 X 条」已单独占一行） */
  .pager{gap:4px;margin-top:26px}
  .pg{padding:6px 10px;font-size:13px;border-radius:9px}
  .pg-info{margin:8px 0 28px}
}
@media (max-width:420px){
  .head-inner{gap:8px;padding:0 10px}
  .head-tools .mem-link.ghost,.head-tools .btn.sm{padding:5px 8px;font-size:12px}
  .theme-btn,.menu-btn{width:32px;height:32px}
  .brand-mark{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===== 资源下载 ===== */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.rescard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
}
.rescard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.res-cover{position:relative;aspect-ratio:16/9;background:var(--surface2);display:grid;place-items:center;overflow:hidden}
.res-cover img{width:100%;height:100%;object-fit:cover}
.res-cover-ph{font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--tx3)}
.res-lock,.res-flag{position:absolute;top:8px;border-radius:999px;font-size:12px;padding:3px 9px;backdrop-filter:blur(6px)}
.res-lock{right:8px;background:rgba(0,0,0,.55);color:#fff}
.res-flag{left:8px;background:var(--accent);color:#fff}
.res-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.res-body h3{font-size:15px;line-height:1.45}
.res-sum{margin:0;font-size:13px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res-meta{display:flex;flex-wrap:wrap;gap:6px}
.res-foot{margin-top:auto;display:flex;gap:12px;font-size:12px;color:var(--tx3);flex-wrap:wrap}
.res-badge{border-radius:999px;font-size:11.5px;padding:2px 8px;background:var(--surface2);color:var(--tx2);border:1px solid var(--line)}
.mode-open{color:#12b76a} .mode-pwd{color:#f2890c} .mode-login{color:#3b7cff} .mode-inherit{color:var(--tx2)}
.plat-badge{
  --pc:#7a7f87;border-radius:6px;font-size:11.5px;padding:2px 7px;color:#fff;background:var(--pc);
  font-weight:500;white-space:nowrap;
}
.page-sub{color:var(--tx2);font-size:14px;margin:6px 0 0}
.res-hero{display:flex;gap:20px;align-items:flex-start;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.res-hero-cover{width:150px;border-radius:12px;object-fit:cover}
.res-hero-ph{width:150px;height:150px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--tx3)}
.res-hero-txt{flex:1;min-width:0}
.res-hero-txt h1{font-size:24px;margin-bottom:8px}
.res-hero-txt .res-badge{margin-right:6px}
.filelist{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.filelist li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.fi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fi-main b{font-size:14px;font-weight:600}
.fi-sub,.fi-code{font-size:12px;color:var(--tx3)}
.fi-code b{cursor:pointer;color:var(--accent);border-bottom:1px dashed var(--accent)}
.filelist .dl{flex-shrink:0}
.lockbox{
  margin:18px 0;padding:34px 24px;text-align:center;background:var(--surface);
  border:1px dashed var(--line2);border-radius:var(--r);
}
.lock-icon{font-size:38px;line-height:1}
.lockbox h2{font-size:19px;margin:10px 0 6px}
.lockbox p{color:var(--tx2);font-size:14px;margin-bottom:16px}
.lockform{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lockform input{padding:9px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);min-width:200px}
/* 会员门槛分支：视觉上跟「输密码解锁」区分开，别让人以为还要找密码 */
.lockbox-member{border-style:solid;border-color:color-mix(in srgb,var(--accent) 40%,var(--line2))}
.lock-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.lock-acts .btn,.lock-acts .btn-primary{padding:9px 18px;border-radius:10px;text-decoration:none}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.relcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px;padding:8px}
.relcard img{aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px}
.relcard span{display:block;color:var(--tx2)}
.tip{margin:12px 0;padding:9px 14px;border-radius:10px;font-size:13.5px}
.tip.ok{background:rgba(18,183,106,.12);color:#12b76a}
.tip.err{background:rgba(225,29,72,.12);color:var(--accent)}

/* ===== AI 卡片与提问 ===== */
.ai-card{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;background:var(--surface2);margin:16px 0}
.ai-card h3{font-size:14px;color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.ai-card .ai-body{font-size:14px;color:var(--tx2);white-space:pre-wrap}
.ai-ask{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.ai-ask input{flex:1;min-width:180px;padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2)}
.ai-answer{margin-top:10px;padding:12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:14px;white-space:pre-wrap;display:none}
.ai-answer.on{display:block}
.ai-loading{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 朗读条 ===== */
.listen-btn{border-radius:999px;font-size:13px;padding:5px 12px;border:1px solid var(--line2);background:var(--surface2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.listen-btn:hover{border-color:var(--accent);color:var(--accent)}
.listen-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.player-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  background:var(--surface);border-top:1px solid var(--line);padding:10px 16px;
  align-items:center;gap:12px;box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.player-bar.on{display:flex}
.player-bar .pb-title{flex:1;min-width:0;font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-bar audio{flex:2;min-width:160px;height:34px}
.pb-close{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:18px}

/* ===== 论坛精华（Discuz） ===== */
.forum-list{display:flex;flex-direction:column;gap:10px}
.forum-item{display:flex;gap:12px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;align-items:center}
.forum-item .fi-idx{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--surface2);color:var(--tx3);display:grid;place-items:center;font-size:12px;font-weight:700}
.forum-item .fi-t{flex:1;min-width:0}
.forum-item .fi-t b{font-size:14px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forum-item .fi-t span{font-size:12px;color:var(--tx3)}
@media (max-width:760px){
  .res-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .res-hero{flex-direction:column}
  .res-hero-cover,.res-hero-ph{width:100%;height:170px}
  .filelist li{flex-wrap:wrap}
  .filelist .dl{width:100%;text-align:center}
}

/* ===== 底部统计栏 ===== */
.foot-stats{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:14px 0 8px;font-size:12.5px;color:var(--tx2)}
.foot-stats b{color:var(--accent);font-weight:600;margin-left:4px}

/* ===== 资源栏目：轮播 / 统计条 / 排行 ===== */
/* 轮播现在跟正文一样在 .wrap 里，圆角对齐；以前是通栏的、跟上下内容错位显着很乱 */
.res-hero-car{position:relative;margin:0 0 22px;height:clamp(220px,32vw,340px);overflow:hidden;
  border-radius:16px;background:var(--surface2)}
.rc-track{position:relative;height:100%}
.rc-item{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;transition:opacity .7s var(--ease);padding:0 clamp(16px,5vw,64px) clamp(34px,5vw,58px)}
.rc-item.on{opacity:1}
/* 没封面时给个渐变兜底，不要留一块死黑 */
.rc-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,var(--surface2),var(--surface));
  filter:saturate(1.1);transform:scale(1.06);transition:transform 6s linear;background-color:var(--surface2)}
.rc-item.on .rc-bg{transform:scale(1)}
.rc-mask{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.1) 100%)}
.rc-txt{position:relative;color:#fff;max-width:640px}
.rc-tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);margin-bottom:10px}
.rc-txt h2{font-size:clamp(20px,3.4vw,34px);line-height:1.25;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.rc-txt p{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.82)}
.rc-meta{display:inline-block;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.7)}
.rc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(0,0,0,.35);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(4px);z-index:2}
.rc-arrow.prev{left:14px} .rc-arrow.next{right:14px}
.rc-arrow:hover{background:var(--accent)}
.rc-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:7px;justify-content:center}
.rc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
.rc-dots i.on{width:22px;border-radius:4px;background:var(--accent)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 0 18px}
.ss{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.ss i{font-style:normal;width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-weak);color:var(--accent);font-size:14px}
.ss b{font-size:18px;font-weight:600}
.ss span{font-size:12px;color:var(--tx3)}
.res-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.rt-right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sort-tabs{display:flex;background:var(--surface2);border-radius:999px;padding:3px;border:1px solid var(--line)}
.sort-tabs .st{padding:5px 14px;border-radius:999px;font-size:13px;color:var(--tx2)}
.sort-tabs .st.on{background:var(--accent);color:#fff}
.rt-search input{padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);width:170px}
.hot-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px;color:var(--tx3)}
.hot-tags a{padding:4px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--tx2)}
.hot-tags a:hover{border-color:var(--accent);color:var(--accent)}
.hot-tags em{font-style:normal;margin-left:6px;color:var(--accent);font-size:11.5px}
.res-layout{display:flex;gap:20px;align-items:flex-start}
.res-main{flex:1;min-width:0}
.res-side{width:280px;flex:0 0 280px;display:flex;flex-direction:column;gap:14px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.side-card h3{font-size:14px;margin-bottom:10px}
.side-tip{font-size:12.5px;color:var(--tx2);line-height:1.7}
.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.rank-list li:last-child{border-bottom:none}
.rk-no{width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:var(--surface2);color:var(--tx3);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.rk-no.top-1{background:var(--accent);color:#fff}
.rank-list a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.rank-list a:hover{color:var(--accent)}
.rank-list em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.res-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .8s var(--ease);pointer-events:none}
.rescard:hover .res-shine{transform:translateX(120%)}
.res-dl{position:absolute;left:8px;bottom:8px;border-radius:999px;font-size:11.5px;padding:2px 9px;
  background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px);display:flex;gap:4px;align-items:center}
.res-dl i{font-style:normal}
.grad-0{background:linear-gradient(135deg,#e11d48,#7f1d3a)}
.grad-1{background:linear-gradient(135deg,#3b82f6,#1e3a8a)}
.grad-2{background:linear-gradient(135deg,#f59e0b,#7c2d12)}
.grad-3{background:linear-gradient(135deg,#10b981,#064e3b)}
.grad-4{background:linear-gradient(135deg,#8b5cf6,#4c1d95)}
.res-cover-ph.grad-0,.res-cover-ph.grad-1,.res-cover-ph.grad-2,.res-cover-ph.grad-3,.res-cover-ph.grad-4{color:#fff;width:100%;height:100%;display:grid;place-items:center}
@media (max-width:900px){
  .res-layout{flex-direction:column}
  .res-side{width:100%;flex:none}
  .res-hero-car{height:220px}
  .rt-right{margin-left:0}
}

/* ===== 首页新版块 ===== */
/* 通栏头图：行宽度已经在 PHP 层破出容器（.w-full），这里只负责把内边距抹平，
   让轮播真的从屏幕左沿铺到右沿。 */
.lb-section.w-full>.lb-row>.lb-col>.lb-block[data-type="hero"]{margin-bottom:0}
.lb-section.w-full .lb-block[data-type="hero"]{border-radius:0}

.hero-car{position:absolute;inset:0;overflow:hidden}
.hc-item{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);display:block;
  pointer-events:none   /* 关键：没显示的图也 absolute 铺满全屏，不关掉会把有链接的层挡死
                           （点哪儿都是最上面那张——有链接跳链接、没链接就完全点不动） */ }
.hc-item.on{opacity:1;pointer-events:auto}
.hc-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);transition:transform 8s linear}
.hc-item.on .hc-bg{transform:scale(1)}
/* 压暗只留一点点：底部交给磨砂条，图本身别糊成黑片 */
.hc-mask{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,.06) 34%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.34))}

/* ---------- 底部磨砂玻璃条 ---------- */
/* 玻璃感三件套：blur + saturate + **brightness**。
   只叠半透明黑是看不出「玻璃」的——图还是那张图，只是暗了点。
   真正让磨砂实心感出来的是 brightness：把背后的画面整体压暗，
   再让模糊把它糊开，才像一块立在图前的毛玻璃。 */
.hc-band{
  position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:clamp(20px,3.4vw,34px) clamp(18px,4vw,64px) clamp(26px,3vw,34px);
  -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(.60);
  backdrop-filter:blur(28px) saturate(180%) brightness(.60);
  background:linear-gradient(to top,
    rgba(9,9,14,.74) 0%,rgba(9,9,14,.48) 44%,rgba(9,9,14,.18) 78%,rgba(9,9,14,0) 100%);
  /* 顶边高光 + 内投影：玻璃立起来的那道光 */
  border-top:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 -14px 40px rgba(0,0,0,.28);
  /* 顶部用遮罩淡出，避免磨砂条在图上切出一条生硬的直线 */
  -webkit-mask-image:linear-gradient(to top,#000 70%,rgba(0,0,0,.68) 89%,transparent);
  mask-image:linear-gradient(to top,#000 70%,rgba(0,0,0,.68) 89%,transparent);
}
/* 不支持 backdrop-filter 的老浏览器：退回高浓度渐变，保证文字照样看得清 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hc-band{background:linear-gradient(to top,rgba(9,9,14,.92),rgba(9,9,14,.72) 55%,rgba(9,9,14,0))}
}
.hero[data-noband="1"] .hc-band{display:none}
/* 文字默认居中；后台「磨砂条文字」选左对齐时走 data-band-align="left" */
.hc-band-in{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(14px,3vw,40px);text-align:center;
}
.hero[data-band-align="left"] .hc-band-in{text-align:left;justify-content:flex-start}
.hc-txts{flex:1 1 auto;min-width:0;position:relative}
.hc-txt{
  opacity:0;transform:translateY(14px);position:absolute;left:0;bottom:0;right:0;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.hc-txt.on{opacity:1;transform:none;position:relative}
.hc-txt h2{
  font-size:clamp(24px,4.4vw,50px);font-weight:700;letter-spacing:.01em;line-height:1.14;color:#fff;
  text-shadow:0 3px 30px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5);
}
.hc-txt p{
  margin:9px 0 0;color:rgba(255,255,255,.9);font-size:clamp(13px,1.5vw,16px);
  letter-spacing:.04em;text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.hc-cta{
  pointer-events:auto;flex:none;white-space:nowrap;
  padding:12px 30px;border-radius:999px;font-weight:500;
  background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.hc-cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.5)}
.hc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(34px,3.2vw,46px);height:clamp(34px,3.2vw,46px);border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(10,10,14,.4);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:.72;transition:.28s var(--ease);
}
.hc-arrow.prev{left:clamp(10px,2vw,26px)} .hc-arrow.next{right:clamp(10px,2vw,26px)}
.hero-car:hover .hc-arrow{opacity:1}
.hc-arrow:hover{background:var(--accent);border-color:transparent;transform:translateY(-50%) scale(1.08)}
.hc-dots{pointer-events:none;display:flex;gap:7px;justify-content:center;
  max-width:var(--maxw);margin:16px auto 0}
.hc-dots i{pointer-events:auto;width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.42);cursor:pointer;
  transition:.3s var(--ease)}
.hc-dots i:hover{background:rgba(255,255,255,.8)}
.hc-dots i.on{width:28px;background:#fff}
/* 手机：按钮落到文字下面、点更大，箭头缩到角落 */
@media (max-width:760px){
  .hc-band-in{flex-direction:column;align-items:stretch;text-align:center;gap:14px}
  .hc-txts{text-align:center}
  .hc-cta{text-align:center;padding:11px 22px;align-self:center}
  .hc-arrow{top:34%;width:38px;height:38px;font-size:20px}
  .hc-dots{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .hc-bg,.hc-txt{transition:none}
  .hc-item.on .hc-bg{transform:none}
}
.cg-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cg-item{display:flex;align-items:center;gap:11px;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;transition:.26s var(--ease)}
.cg-item:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.cg-ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:18px;
  background:var(--accent-weak);color:var(--accent)}
.cg-t{display:flex;flex-direction:column;min-width:0}
.cg-t b{font-size:14.5px;font-weight:600}
.cg-t em{font-style:normal;font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist{list-style:none;margin:0;padding:0}
.vlist li a{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);align-items:center}
.vlist li:last-child a{border-bottom:none}
.vl-thumb{width:92px;height:56px;flex:0 0 92px;border-radius:8px;overflow:hidden;background:var(--surface2);
  display:grid;place-items:center;color:var(--tx3)}
.vl-thumb img{width:100%;height:100%;object-fit:cover}
.vl-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.vl-t b{font-size:13.5px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vl-t em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.mrank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.mrank li a{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.mr-no{width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:var(--surface2);color:var(--tx3);
  display:grid;place-items:center;font-size:11.5px;font-weight:700}
.mr-no.top{background:var(--accent);color:#fff}
.mr-cov{width:38px;height:38px;flex:0 0 38px;border-radius:8px;overflow:hidden;background:var(--surface2);
  display:grid;place-items:center;color:var(--tx3)}
.mr-cov img{width:100%;height:100%;object-fit:cover}
.mr-t{flex:1;min-width:0;display:flex;flex-direction:column}
.mr-t b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-t em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.mr-n{font-size:11.5px;color:var(--tx3);flex:0 0 auto}
/* ---------- 首页模块 hover 交互层 ---------- */
.vlist li a{border-radius:10px;transition:background .22s var(--ease),padding .22s var(--ease)}
.vlist li a:hover{background:var(--surface);padding-left:10px;padding-right:8px}
.vl-thumb img{transition:transform .35s var(--ease)}
.vlist li a:hover .vl-thumb img{transform:scale(1.1)}
.vl-t b{transition:color .2s}
.vlist li a:hover .vl-t b{color:var(--accent)}
.mrank li a{border-radius:10px;transition:background .22s var(--ease),padding .22s var(--ease)}
.mrank li a:hover{background:var(--surface);padding-left:8px;padding-right:6px}
.mr-cov img{transition:transform .35s var(--ease)}
.mrank li a:hover .mr-cov img{transform:scale(1.12)}
.mrank li a:hover .mr-t b{color:var(--accent)}
.mr-n{transition:color .2s}
.mrank li a:hover .mr-n{color:var(--accent)}
.mr-no{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.mrank li a:hover .mr-no{transform:scale(1.12);box-shadow:0 0 0 3px rgba(225,29,72,.18)}
.lr-item{transition:transform .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease)}
.lr-item:hover{transform:translateX(4px);background:var(--surface2);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.lr-item span{transition:color .2s}
.lr-item:hover span{color:var(--tx2)}
.album-card{transition:transform .26s var(--ease)}
.album-card:hover{transform:translateY(-4px)}
.album-card .ac-cover img{transition:transform .4s var(--ease)}
.album-card:hover .ac-cover img{transform:scale(1.07)}
.album-card:hover .ac-cover{box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 1px rgba(225,29,72,.35)}
.album-card b{transition:color .2s}
.album-card:hover b{color:var(--accent)}
.photo-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pw-item{aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--surface2)}
.pw-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pw-item:hover img{transform:scale(1.08)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.album-card .ac-cover{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface2);
  display:grid;place-items:center;color:var(--tx3);font-size:22px;margin-bottom:7px}
.album-card .ac-cover img{width:100%;height:100%;object-fit:cover}
.album-card b{font-size:13.5px;font-weight:500;display:block}
.album-card span{font-size:11.5px;color:var(--tx3)}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.topic-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.26s var(--ease)}
.topic-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.topic-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.topic-card div{padding:10px 12px}
.topic-card b{display:block;font-size:14px}
.topic-card span{font-size:12px;color:var(--tx3)}
.carousel{position:relative;overflow:hidden}
.car-track{display:flex;gap:14px;transition:transform .5s var(--ease)}
.car-item{flex:0 0 calc((100% - 28px)/3);min-width:0}
.ci-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--surface2);
  display:grid;place-items:center;color:var(--tx3)}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:26px;
  background:rgba(0,0,0,.28);opacity:0;transition:.3s}
.car-item:hover .ci-play{opacity:1}
.car-item b{display:block;font-size:13.5px;margin-top:7px;font-weight:500}
.ci-plat{font-size:11.5px;color:var(--tx3)}
.car-prev,.car-next{position:absolute;top:38%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.car-prev{left:4px} .car-next{right:4px}
.stats-bar .sb-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px}
.sbi{text-align:center;padding:12px 8px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.sbi b{display:block;font-size:20px;font-weight:600}
.sbi span{font-size:12px;color:var(--tx3)}
.countdown .cd-inner{text-align:center;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.cd-num b{font-size:42px;color:var(--accent)}
.countdown time{display:block;color:var(--tx3);font-size:12.5px}
.lyrics-roll{display:flex;flex-direction:column;gap:10px}
.lr-item{padding:12px 14px;background:var(--surface);border-left:3px solid var(--accent);border-radius:10px}
.lr-item p{margin:0;font-size:14px;line-height:1.7}
.lr-item span{font-size:12px;color:var(--tx3)}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sp-item{display:grid;place-items:center;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.sp-item img{max-height:60px;object-fit:contain}
.gb-scroll ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gb-scroll li{display:flex;gap:10px;align-items:flex-start}
.gb-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:13px;font-weight:600}
.gb-scroll li b{font-size:12.5px;display:block}
.gb-scroll li p{margin:2px 0 0;font-size:13px;color:var(--tx2)}
.search-box .sb-form{display:flex;gap:8px;margin-top:10px}
.search-box .sb-form input{flex:1;padding:11px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2)}
.search-box .sb-form button{padding:11px 22px;border-radius:999px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.sb-words{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.sb-words a{padding:3px 10px;border-radius:999px;background:var(--surface2);color:var(--tx2)}
.sb-ai{display:flex;gap:8px;margin-top:12px}
.sb-ai input{flex:1;padding:10px 14px;border-radius:999px;border:1px dashed var(--line2);background:transparent}
.sb-ai button{padding:10px 18px;border-radius:999px;border:none;background:var(--surface2);color:var(--tx);cursor:pointer}
.ticker{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tk-label{flex:0 0 auto;font-size:12px;padding:2px 9px;border-radius:6px;background:var(--accent);color:#fff}
.tk-view{flex:1;height:22px;overflow:hidden}
.tk-list{list-style:none;margin:0;padding:0;animation:tk 24s linear infinite}
.tk-list li{height:22px;line-height:22px;font-size:13px}
.tk-list a{color:var(--tx2)}
@keyframes tk{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@media (max-width:760px){
  .mrank{grid-template-columns:1fr}
  .car-item{flex:0 0 78%}
  .cg-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== 导航菜单（自定义，含二级） ===== */
.nav-wrap{position:relative;display:flex;align-items:center}
.nav-ic{margin-right:5px;font-size:13px}
.nav-caret{margin-left:4px;font-size:9px;opacity:.7;transition:transform .24s var(--ease)}
.nav-wrap.has-sub:hover .nav-caret{transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:calc(100% + 10px);left:0;min-width:158px;padding:7px;z-index:120;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.24s var(--ease)
}
.nav-wrap.has-sub:hover .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-sub a{padding:8px 11px;border-radius:9px;font-size:13.5px;color:var(--tx2);white-space:nowrap;transition:.2s}
.nav-sub a:hover{background:var(--surface2);color:var(--accent)}
@media (max-width:900px){
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:none;padding:0 0 0 14px;display:none}
  .nav-wrap.has-sub.open .nav-sub{display:flex}
}

/* ===== 文章工具条：朗读 / AI ===== */
.ai-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;padding:11px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px}
.ai-tools-tip{font-size:12.5px;color:var(--tx3);margin-left:4px}
.ai-tools-tip.bad{color:var(--accent)}
.voice-pick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2)}
.voice-pick select{font-size:12.5px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface2);color:var(--tx);cursor:pointer;max-width:170px}
.voice-pick select:focus{outline:none;border-color:var(--accent)}
.ai-card em{font-style:normal;font-size:11.5px;color:var(--tx3);font-weight:400}
.ai-card h3{justify-content:space-between}
.ai-badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--accent-weak);color:var(--accent);margin-right:7px;vertical-align:1px}
.ai-card b{color:var(--tx3);font-weight:500}
.story-body .ai-tools,.story-body .ai-card{position:relative;z-index:2}

/* ===== 栏目头图（音乐 / 资源下载） ===== */
.sec-hero{position:relative;margin:18px 0 24px;border-radius:16px;overflow:hidden;
  min-height:220px;display:flex;align-items:flex-end;
  background-color:#2a0d0d;background-position:center;background-size:cover;background-repeat:no-repeat;
  box-shadow:0 10px 30px rgba(0,0,0,.12)}
.sec-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,0,0,.78) 0%,rgba(10,0,0,.35) 55%,rgba(10,0,0,.12) 100%)}
.sec-hero-inner{position:relative;z-index:1;padding:30px 34px;color:#fff}
.sec-hero-inner h1{margin:0;font-size:clamp(24px,3.6vw,34px);letter-spacing:1.5px;font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.sec-hero-inner p{margin:8px 0 0;font-size:13.5px;color:rgba(255,255,255,.82);letter-spacing:.5px}
.sec-hero-stats{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
.sec-hero-stats span{font-size:12.5px;color:rgba(255,255,255,.72)}
.sec-hero-stats b{color:#fff;font-size:16px;margin-right:3px}
@media (max-width:640px){
  .sec-hero{min-height:150px;border-radius:0;margin:0 -20px 18px}
  .sec-hero-inner{padding:20px 20px 18px}
  .sec-hero-inner h1{letter-spacing:.5px}
}

/* ===== 验证码 ===== */
.cap-row{display:flex;gap:10px;align-items:center;margin:10px 0 4px}
.cap-row input{flex:1;min-width:0}
.cap-img{height:42px;width:auto;border-radius:9px;border:1px solid var(--line);cursor:pointer;
  background:#1a1010;flex:none;user-select:none}
/* 验证码加载失败：给个一眼能看出来的坏态，别留一块黑乎乎让人以为是验证码本身 */
.cap-img.cap-bad{border-color:var(--accent);border-style:dashed;opacity:.75}
.cform-tip{margin-top:8px;font-size:12.5px;color:var(--tx3);min-height:17px}
.cform-tip.ok{color:#43a85f}
.cform-tip.err{color:var(--accent)}

/* ================= 相册目录导航（吸顶浮动条） ================= */
.albnav{
  position:sticky;top:var(--head-h);z-index:60;
  margin:0 -20px 14px;padding:0 20px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:top .3s var(--ease);
}
/* 顶栏收起时（滚动向下）让它顶到最上面，不留那条空档 */
body.head-hidden .albnav{top:0}
.albnav-in{
  display:flex;align-items:center;gap:10px;row-gap:8px;
  flex-wrap:wrap;                 /* 子目录多的时候换行，别把后面几个裁掉 */
  padding:9px 0;
}

.alb-up{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;font-size:13px;color:var(--tx2);
  border:1px solid var(--line);transition:.22s var(--ease);
}
.alb-up:hover{color:var(--accent);border-color:var(--accent);transform:translateX(-3px)}
.au-ic{font-size:11px;opacity:.75;transition:transform .22s var(--ease)}
.alb-up:hover .au-ic{transform:translateY(-2px)}
.alb-div{flex:none;width:1px;height:18px;background:var(--line)}

.alb-chips{display:flex;gap:7px;flex-wrap:wrap}
.alb-chip{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;font-size:13px;color:var(--tx2);
  border:1px solid var(--line);transition:.24s var(--ease);
}
.alb-chip em{font-style:normal;font-size:11px;color:var(--tx3);transition:.24s var(--ease)}
/* 鼠标移上去：指示条从中间撑开 + 轻微上浮，交互有个「活」的感觉 */
.alb-chip::after{
  content:'';position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;
  background:var(--accent);transition:left .26s var(--ease),right .26s var(--ease);
}
.alb-chip:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.alb-chip:hover em{color:var(--accent)}
.alb-chip:hover::after{left:24%;right:24%}
.alb-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.alb-chip.on em{color:rgba(255,255,255,.82)}
.alb-chip.on::after{background:#fff;left:34%;right:34%}
.alb-chip.on:hover{transform:none}

/* 子目录网格 + 区段小标题 */
.album-wall.subs{margin-bottom:26px}
.sect-h{
  font-size:15px;font-weight:500;margin:26px 0 14px;
  padding-left:11px;border-left:3px solid var(--accent);line-height:1.2;
}

/* 原这里有一条 @media(max-width:900px){.album-wall:3列} —— 已并入上方 960px 阶梯，
   否则它源顺序靠后，会把 ≤760 的 2 列又盖回 3 列（列数倒挂）。 */

@media(max-width:680px){
  .album-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .albnav{top:var(--head-h);margin:0 -16px 12px;padding:0 16px}
  /* 手机上换行会占掉太多屏幕，吸顶条封顶约 3 行，再多就让它自己滚 */
  .albnav-in{gap:7px;row-gap:7px;padding:8px 0;max-height:112px;overflow-y:auto}
  .alb-chip{padding:5px 11px;font-size:12.5px}
  .album h3{font-size:13px}
}

/* ================= 正文页浮动导航（吸顶） =================
   看正文想换板块，不用退回首页再点进来——这条跟着滚动吸在顶上。
   第一排是「板块」（新闻 / 文章 / 资料 / 怀念家驹 / 行程 / 论坛 / 公告），
   后面才是本板块的分类，且只列有内容的条目。 */
.artnav{
  position:sticky;top:var(--head-h);z-index:58;
  margin:0 0 16px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px;
  transition:top .3s var(--ease);
}
/* 顶栏收起时（往下滚）让它顶到最上面，别留一条空档 */
body.head-hidden .artnav{top:0}
.artnav-in{display:flex;align-items:center;gap:9px;row-gap:7px;flex-wrap:wrap;padding:9px 12px}

.art-back{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;font-size:13px;color:var(--tx2);
  border:1px solid var(--line);transition:.22s var(--ease);
}
.art-back:hover{color:var(--accent);border-color:var(--accent);transform:translateX(-3px)}
.ab-ic{font-size:11px;opacity:.75}
/* 返回文案可能很长（「返回「怀念家驹」列表（第 3 页）」），限宽截断免得把整排挤散 */
.ab-tx{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-div{flex:none;width:1px;height:18px;background:var(--line)}

.art-mods{display:flex;gap:7px;flex-wrap:wrap}
.art-mod{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;font-size:13px;color:var(--tx2);
  border:1px solid var(--line);transition:.24s var(--ease);
}
.art-mod em{font-style:normal;font-size:11px;color:var(--tx3);transition:.24s var(--ease)}
.art-mod:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.art-mod:hover em{color:var(--accent)}
.art-mod.on{background:var(--accent);border-color:var(--accent);color:#fff}
.art-mod.on em{color:rgba(255,255,255,.82)}
.art-mod.on:hover{transform:none}

/* 分类那排更轻：虚线描边，不跟板块抢注意力 */
.art-cats{display:flex;gap:6px;flex-wrap:wrap}
.art-cat{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--tx2);
  border:1px dashed var(--line);transition:.22s var(--ease);
}
.art-cat em{font-style:normal;font-size:11px;color:var(--tx3)}
.art-cat:hover{color:var(--accent);border-color:var(--accent);border-style:solid}
.art-cat.on{color:var(--accent);border-color:var(--accent);border-style:solid;
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.art-cat.on em{color:var(--accent)}

/* 大片阅读页（story）的 hero 是通栏的，浮导也去掉圆角跟着通栏，接得住 */
.story .artnav{border-radius:0;border-left:0;border-right:0;margin:0 0 0}

@media(max-width:680px){
  .artnav{margin:0 -16px 12px;border-radius:0;border-left:0;border-right:0}
  /* 手机上不换行 —— 7 个板块 + N 个分类换行会吃掉 4 行高度，
     主画面被压扁，而且超出的分类会被裁在滚动区外（等于没有）。
     改成一条横滑带：只占一行，手指左右拨就能到头。 */
  .artnav-in{
    flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .artnav-in::-webkit-scrollbar{display:none}
  .art-mods,.art-cats{flex-wrap:nowrap}
  .art-mod,.art-cat,.art-back,.art-div{flex:0 0 auto}
  .art-mod{padding:5px 11px;font-size:12.5px}
  .art-cat{padding:4px 10px;font-size:12px}
  .art-back{padding:5px 11px;font-size:12.5px}
}

/* 友链：没有真实地址的条目（老站遗留里 url 是占位符 #）不做成可点外链 */
.links .lnk-off{opacity:.55;cursor:default}
.links .lnk-off:hover{transform:none;border-color:var(--line)}

/* ================= 友情链接页（分组分节 + 简介 + 已下线标记） =================
   老站 23 个歌迷站点倒了一半，点进去就是 404。处理方式是「一条都不删」：
   打不开的做成灰显不可点，名称 / 简介 / 原址全部留在页面上，历史信息不丢。 */
.lnk-sec{margin:0 0 26px}
.lnk-h{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 4px}
.lnk-n{font-size:11.5px;font-weight:400;color:var(--tx2);background:var(--surface2);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;letter-spacing:.02em}
.lnk-n.live{color:var(--accent);border-color:var(--accent);background:transparent}
.lnk-d{font-size:13px;color:var(--tx2);margin:0 0 12px}

.links.style-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.links.style-card .lnk{display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:13px 15px;line-height:1.6}
.lnk-top{display:flex;align-items:center;gap:9px;min-width:0}
.lnk-logo{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:0 0 auto}
.lnk-ini{display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--accent),#ff7a59)}
.lnk-nm{font-size:14.5px;font-weight:600;color:var(--tx);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk-intro{font-size:12.5px;color:var(--tx2);display:block}
.lnk-url{font-size:11.5px;color:var(--tx2);opacity:.62;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk-badge{flex:0 0 auto;margin-left:auto;font-size:10.5px;font-weight:400;letter-spacing:.03em;
  color:var(--tx2);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:17px}

/* 打不开的：灰显、不可点、鼠标不变手 */
.links .lnk-dead{opacity:.62;cursor:default;background:transparent}
.links .lnk-dead:hover{transform:none;border-color:var(--line)}
.links .lnk-dead .lnk-nm{color:var(--tx2)}

/* 首页那种小格子塞不下「已下线」徽标，只靠灰显表达就够了 */
.links.style-logo .lnk-badge{display:none}
.links.style-logo .lnk{min-width:0}
.links.style-logo .lnk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 站点名长短差别大（「真的见证」4 字 vs 「Beyond1993原创民谣乐队」），
   120px 会把长名字截得只剩半个，放宽到 158px 后常见名字都能显示全。 */
.links.style-logo .lnk{gap:8px}
.links.style-logo .lnk.lnk-dead{opacity:.62}

@media(max-width:640px){
  .links.style-card{grid-template-columns:1fr;gap:10px}
  .lnk-h{font-size:15.5px}
}

/* ================= 专辑歌词（原老站「歌词」栏目，已整合进专辑页） =================
   老站用 <table> + 写死 width/height 做两栏排版，迁移时已把尺寸属性清掉，
   这里靠 CSS 接管：桌面两栏、手机一栏，歌名单独成行并压一条分隔线。 */
.album-lyrics{margin-top:36px}
.lyrics-body{margin-top:14px;padding:22px 26px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);font-size:14.5px;line-height:1.95;color:var(--tx2);overflow-wrap:break-word}
/* ⚠ 必须写 height:auto（以及 td 的）：
   老站歌词是 <table width="605" height="164"> 这种带写死尺寸属性的两栏排版。
   不覆盖 height 的话，表格高度被钉死在 164px，而内容常有 5000px 高 ——
   多出来的部分整片溢出容器，直接盖在下面的「专辑下载」框和页脚上，
   看起来就像「下载地址和歌词重叠」。CSS 的 height:auto 优先于 HTML 呈现属性，
   一句话就能救回所有存量数据，不用逐条改库。 */
.lyrics-body table{width:100%;height:auto;border-collapse:collapse;margin:0 0 20px}
.lyrics-body table:last-child{margin-bottom:0}
.lyrics-body td,.lyrics-body th{height:auto}
.lyrics-body td{padding:0 26px 0 0;vertical-align:top;border:0;font-size:14.5px;line-height:1.95}
.lyrics-body td:last-child{padding-right:0}
.lyrics-body div{margin-bottom:20px}
.lyrics-body div:last-child{margin-bottom:0}
/* 每首歌的第一个 <b> 是歌名 → 单独成行 + 一条分隔线 */
.lyrics-body div > b:first-child{display:block;color:var(--tx);font-size:15.5px;font-weight:600;
  margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.lyrics-body img{display:block;max-width:100%;height:auto;border-radius:var(--r-sm);margin:0 0 16px}
.lyrics-body br{line-height:1.95}

@media(max-width:760px){
  .lyrics-body{padding:16px 15px;font-size:14px;line-height:1.9}
  /* 手机上两栏挤成一团没法读，拆成一栏到底 */
  .lyrics-body table,.lyrics-body tbody,.lyrics-body tr,.lyrics-body td{display:block;width:100%}
  .lyrics-body td{padding:0 0 18px}
  .lyrics-body td:last-child{padding-bottom:0}
}

/* ===== 老站迁移正文（.legacy）=====
   老站正文是 table 排版 + 写死尺寸 + 内联字号，原样塞进现代版式会三种翻车：
   图片被拉满整屏、表格溢出容器、老字号跟正文打架。这里统一兜底。
   注：.story-content .legacy img 这种写法是故意提高优先级，压过故事页的「大图沉浸」。 */
.legacy{font-size:16.5px;line-height:1.9;color:var(--tx);overflow-wrap:break-word;word-break:break-word}
/* 同 .lyrics-body：老站 table 带写死的 width/height，不覆盖就会溢出盖住下方内容 */
.legacy table{width:100%;max-width:100%;height:auto;border-collapse:collapse;margin:0 0 12px}
.legacy tbody,.legacy thead,.legacy tr{max-width:100%}
.legacy td,.legacy th{max-width:100%;height:auto;padding:2px 0;vertical-align:top;border:0;background:none}
/* 图片恢复等比：只限宽，不再拉满（老站写死的 200×146 会把宽高比拉歪） */
.story-content .legacy img,.abody .legacy img{width:auto;max-width:100%;height:auto}
/* 全局重置里 img 是 display:block，会把并排的老式相册图拆成一张一行。
   老站正文里图片多是行内并排的，这里改回 inline-block。 */
.legacy img{display:inline-block;max-width:100%;height:auto;border-radius:8px;
  vertical-align:middle;margin:4px 6px 8px 0}
.legacy p{margin:0 0 12px}
.legacy p:last-child{margin-bottom:0}
.legacy div{margin:0 0 8px}
.legacy br{line-height:1.9}
.legacy hr{border:0;border-top:1px solid var(--line);margin:14px auto;max-width:280px}
.legacy a{color:var(--accent)}
/* 纯图块（只含图片/相册链接的格子与段落，由 tag_media_blocks.php 打好标记）：
   居中 + 去掉 inline-block 的基线空隙。不用 :has() 猜，避免把带正文的单元格也居中。 */
.legacy .imgcell,.legacy .imgs{text-align:center}
.legacy .imgs{line-height:0}

/* 段落小标题标记
   老站编辑习惯用 ■ □ ◆ ▲ ○ 当小标题前缀（例：「■诞生最艰难的唱片」）。
   这些字符本身没有样式，夹在正文里就是一个突兀的方块。
   迁移时统一换成了 <span class="lgh"></span>，由这里画一个 accent 色小方块 ——
   「小标题」的视觉层级还留着，那个奇怪的字符没了。 */
.legacy .lgh{display:inline-block;width:6px;height:6px;background:var(--accent);
  border-radius:1.5px;margin:0 9px 1px 1px;vertical-align:middle;flex:0 0 auto}

/* ===== 老站图层栏 → TAB 选项卡 =====
   #1446「Beyond 历程」原来是 5 张按钮 GIF + 5 个图层，靠 Dreamweaver 的
   MM_showHideLayers 切换。迁移时那套 JS 没跟过来，5 栏内容全平铺在一页上，
   中间还夹着一排糊掉的按钮图。这里换成标准 TAB：文字标签 + 点选切换。 */
.zlt{margin:4px 0 8px}
.zlt-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.zlt-t{appearance:none;font:inherit;font-size:14.5px;font-weight:600;line-height:1;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--tx2);
  transition:background .18s var(--ease),color .18s,border-color .18s,box-shadow .18s,transform .12s}
.zlt-t:hover{border-color:var(--accent);color:var(--accent)}
.zlt-t:active{transform:translateY(1px)}
.zlt-t.on{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 8px 20px -10px var(--accent)}
.zlt-p{display:none}
.zlt-p.on{display:block;animation:zltIn .3s var(--ease)}
@keyframes zltIn{from{opacity:0;transform:translateY(7px)}}
.zlt-y{margin:0 0 24px}
.zlt-y:last-child{margin-bottom:6px}
.zlt-y h4{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-size:17px;font-weight:700;color:var(--tx)}
.zlt-y h4::before{content:"";flex:0 0 auto;width:4px;height:16px;border-radius:2px;background:var(--accent)}
.zlt-y p{margin:0;color:var(--tx2);line-height:1.95;text-align:justify}
.zlt-empty{padding:30px 22px;border:1px dashed var(--line2);border-radius:var(--r);
  text-align:center;color:var(--tx3);line-height:2}
.zlt-empty a{color:var(--accent);font-weight:600}
.zlt-empty a:hover{text-decoration:underline}
@media(max-width:680px){
  /* 手机上标签横滑成一条，不换行占高 */
  .zlt-bar{flex-wrap:nowrap;overflow-x:auto;gap:7px;margin-bottom:16px;padding-bottom:12px;scrollbar-width:none}
  .zlt-bar::-webkit-scrollbar{display:none}
  .zlt-t{flex:0 0 auto;font-size:13.5px;padding:8px 15px}
  .zlt-y{margin-bottom:18px}
  .zlt-y h4{font-size:15.5px;gap:8px}
  .zlt-y h4::before{width:3px;height:14px}
  .zlt-y p{font-size:14.5px;line-height:1.9;text-align:left}
}

/* ===== 公告条 =====
   公告数据一直在库里（module=notice / 老站迁过来的那 5 条），只是前台从来没显示过。
   默认摆成首屏顶部的一条横向滚动带，鼠标移上去停住方便点。 */
.nbar{display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;
  padding:9px 20px;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.nbar-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--accent);background:var(--accent-weak);border-radius:999px;padding:4px 11px;letter-spacing:.02em}
.nbar-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:nbDot 1.8s ease-in-out infinite}
@keyframes nbDot{0%,100%{opacity:1}50%{opacity:.22}}
.nbar-view{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.nbar-view.static{overflow:visible;-webkit-mask-image:none;mask-image:none}
.nbar-inner{display:inline-flex;align-items:center;gap:34px;white-space:nowrap;will-change:transform}
.nbar-view.rolling .nbar-inner{animation:nbarRoll 30s linear infinite}
.nbar-view.rolling:hover .nbar-inner{animation-play-state:paused}
@keyframes nbarRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nbar-i{font-size:14px;color:var(--tx2);transition:color .16s}
.nbar-i:hover{color:var(--accent)}
.nbar-i i{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--accent);
  border-radius:4px;padding:1px 5px;margin-right:7px;vertical-align:1px}
.nbar-more{flex:0 0 auto;font-size:13px;color:var(--tx3)}
.nbar-more:hover{color:var(--accent)}
/* 卡片样式（放在栏内其它位置时用） */
.notice-card .nc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.notice-card .nc-list li a{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:border-color .18s,transform .18s var(--ease)}
.notice-card .nc-list li a:hover{border-color:var(--accent);transform:translateX(3px)}
.notice-card .nc-top{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:700;color:#fff;
  background:var(--accent);border-radius:4px;padding:2px 6px}
.notice-card .nc-list b{flex:0 0 auto;font-weight:600}
.notice-card .nc-list span{flex:1 1 auto;min-width:0;color:var(--tx3);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-card .nc-list em{flex:0 0 auto;font-style:normal;font-size:12.5px;color:var(--tx3)}
@media(max-width:680px){
  .nbar{padding:8px 14px;gap:9px}
  .nbar-tag{font-size:11.5px;padding:3px 9px}
  .nbar-i{font-size:13px}
  .nbar-inner{gap:26px}
  .nbar-more{display:none}
  .notice-card .nc-list li a{padding:12px 13px;gap:9px}
  .notice-card .nc-list span{display:none}
}

@media(max-width:760px){
  .legacy{font-size:15.5px}
  .legacy img{margin:3px 4px 6px 0;border-radius:6px}
}

/* ===== 成员档案（.mb-*）· Beyond四子介绍等人物卡 =====
   设计：人物照 + 手写签名 + 资料表；桌面 2 列，移动端 1 列。 */
.mb-page{margin:0 auto}
.mb-lead{font-size:17px;line-height:1.95;color:var(--tx2);margin:0 0 34px;
  padding-left:16px;border-left:3px solid var(--accent)}
.mb-grid{display:grid;gap:26px;grid-template-columns:repeat(2,minmax(0,1fr))}
.mb-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;transition:.35s var(--ease)}
.mb-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow)}
.mb-hero{position:relative;display:flex;gap:18px;align-items:flex-end;padding:20px 20px 16px;
  background:linear-gradient(135deg,var(--surface2),color-mix(in srgb,var(--accent) 9%,var(--surface)))}
.mb-photo{flex:0 0 auto;width:118px;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;
  background:var(--surface2);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.mb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mb-id{flex:1 1 auto;min-width:0;padding-bottom:2px}
.mb-no{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;padding:1px 9px;margin-bottom:9px}
.mb-name{font-size:25px;font-weight:800;margin:0 0 5px;letter-spacing:.02em}
.mb-role{font-size:12.5px;color:var(--tx3);margin:0 0 10px;line-height:1.6}
.mb-sign{height:30px;width:auto;max-width:150px;object-fit:contain;opacity:.82;
  filter:var(--mb-sign-filter,none)}
html[data-theme="dark"] .mb-sign{--mb-sign-filter:invert(1) brightness(1.65)}
.mb-list{margin:0;padding:16px 20px 6px}
.mb-list>div{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.mb-list>div:last-child{border-bottom:0}
.mb-list dt{flex:0 0 84px;font-size:12.5px;color:var(--tx3);font-weight:600}
.mb-list dd{flex:1 1 auto;min-width:0;margin:0;font-size:14.5px;line-height:1.7;color:var(--tx)}
.mb-quote{margin:8px 20px 16px;padding:14px 16px;border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface2));border:1px solid var(--line)}
.mb-quote p{margin:0 0 8px;font-size:13.5px;line-height:1.75;color:var(--tx2)}
.mb-quote p:last-child{margin-bottom:0}
.mb-quote b{color:var(--accent);margin-right:6px;font-weight:700}
.mb-more{margin:0 20px 18px;border-top:1px solid var(--line)}
.mb-more summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:600;color:var(--accent);
  list-style:none;display:flex;align-items:center;gap:6px}
.mb-more summary::-webkit-details-marker{display:none}
.mb-more summary::after{content:"▾";font-size:11px;transition:.25s var(--ease)}
.mb-more[open] summary::after{transform:rotate(180deg)}
.mb-more .mb-list{padding:0 0 6px}
.mb-note{text-align:center;font-size:13px;color:var(--tx3);margin:36px 0 0;
  padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:860px){
  .mb-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:480px){
  .mb-hero{padding:16px 15px 13px;gap:13px}
  .mb-photo{width:92px}
  .mb-name{font-size:21px}
  .mb-list{padding:13px 15px 4px}
  .mb-list dt{flex-basis:72px;font-size:12px}
  .mb-list dd{font-size:13.5px}
  .mb-quote{margin:6px 15px 13px;padding:12px 13px}
  .mb-more{margin:0 15px 15px}
}

/* ================= 相册瀑布流「无感加载」 =================
   老大原话：「也可以瀑布流的形式进行展示，鼠标或手势往下，自动加载后面的图，
             默认不用全部加载，无感瀑布流的加载」。
   底部哨兵进入视口就悄悄取下一批，不出现「加载更多」按钮，用户只管往下滚。 */
.ps-more{margin:22px 0 10px;text-align:center;min-height:24px}
.ps-more span{font-size:13px;color:var(--tx3)}
.ps-more [data-ps-done]{opacity:.7}
/* 续载进来的新图淡入，避免「啪」地一下整块跳出来 */
.gallery.masonry .gitem{animation:psFade .32s var(--ease)}
@keyframes psFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gallery.masonry .gitem{animation:none}
}

/* ===== 展示方式闸门（Vis）===== */
.vis-gate{
  max-width:420px;margin:0 auto;padding:34px 26px;text-align:center;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
}
.vis-gate-ic{font-size:34px;margin-bottom:10px}
.vis-gate-t{font-size:17px;font-weight:700;margin-bottom:8px}
.vis-gate-s{color:var(--tx2);font-size:13.5px;line-height:1.8;margin:0 0 14px}
.vis-gate-acts{display:flex;justify-content:center}
.vis-gate-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.vis-gate-form input[type=password]{
  flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface2);color:var(--tx)
}
.vis-gate .vis-err{width:100%;color:#ef4444;font-size:12.5px;margin:2px 0 0}

/* 专辑页曲目列表头部操作条 */
.tl-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:8px;
  border:1px dashed var(--line);border-radius:12px;background:var(--surface)
}
.tl-bar .hint{font-size:12.5px;color:var(--tx3)}

/* ── 底部播放器 播放/暂停 图标：内联 SVG，跨设备一致 ──
   （CSS border/字体字形方案在手机 WebView 上不可靠，均弃用） */
.mp-play .mp-ic{display:block;pointer-events:none}
.mp-play .ic-pause{display:none}
.mp-play.on .ic-pause{display:block}
.mp-play.on .ic-play{display:none}

/* ══════════ 纪念馆区块（memorial） ══════════
   皮肤 = 一张 16:9 WebP 背景景，碑面预留空白像框；
   .mm-portrait 用各皮肤实测的百分比坐标把遗像叠进框内（换皮肤不用重传照片）。
   明暗主题通用：场景是照片，文字统一走「深底白字/浅底深字」的皮肤级覆盖。 */
.memorial{max-width:860px;margin:0 auto}
.mm-scene{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--shadow)}
.mm-scene::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.28)}          /* 轻暗角，压住照片边缘让文字更稳 */
.mm-portrait{position:absolute;margin:0;z-index:2;overflow:hidden;background:#ddd}
.mm-portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* 各皮肤像框内沿坐标（按 1280×718 素材实测定标，全部百分比；换素材后需重校） */
.mk-classic .mm-portrait{left:43.2%;top:10.4%;width:14.6%;height:33.6%}
.mk-real    .mm-portrait{left:39.2%;top:36.4%;width:18.8%;height:25.8%}
.mk-modern  .mm-portrait{left:43.5%;top:30.2%;width:13.4%;height:13.8%}
.mk-guitar  .mm-portrait{left:45.0%;top:31.9%;width:9.8%;height:22.6%}
.mk-guitar2 .mm-portrait{left:43.6%;top:5.6%;width:12.6%;height:31.4%}
.mk-guitar3 .mm-portrait{left:44.0%;top:17.6%;width:11.6%;height:31.4%}
.mk-guitar4 .mm-portrait{left:39.2%;top:5.9%;width:18.7%;height:34.4%}
.mk-guitar5 .mm-portrait{left:38.0%;top:22.0%;width:22.9%;height:44.0%}
.mk-guitar6 .mm-portrait{left:42.3%;top:25.6%;width:14.5%;height:51.7%}
.mk-piano1  .mm-portrait{left:42.0%;top:45.5%;width:16.5%;height:32.0%}
.mk-piano2  .mm-portrait{left:43.0%;top:14.3%;width:15.6%;height:46.0%}
.mk-notes1  .mm-portrait{left:43.5%;top:56.2%;width:12.4%;height:30.4%}
/* 两侧竖排挽联 */
.mm-couplet{position:absolute;top:10%;z-index:3;writing-mode:vertical-rl;letter-spacing:.4em;
  font-size:clamp(13px,1.8vw,19px);font-weight:600;padding:.7em .3em;border-radius:8px;
  color:#e8c987;background:rgba(10,8,6,.45);border:1px solid rgba(232,201,135,.45);
  backdrop-filter:blur(2px)}
.mm-couplet.l{left:4.5%}
.mm-couplet.r{right:4.5%}
.mk-modern .mm-couplet{color:#4a3d2c;background:rgba(255,255,255,.62);border-color:rgba(74,61,44,.35)}
/* 姓名铭牌：底部居中悬浮 */
.mm-plate{position:absolute;left:50%;bottom:5.5%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.1em;text-align:center;
  padding:.45em 1.4em;border-radius:10px;color:#f3ead6;background:rgba(10,8,6,.52);
  border:1px solid rgba(232,201,135,.4);backdrop-filter:blur(3px);white-space:nowrap}
.mm-name{font-size:clamp(17px,2.6vw,26px);font-weight:700;letter-spacing:.18em;text-indent:.18em}
.mm-years{font-size:clamp(11px,1.3vw,13px);letter-spacing:.12em;color:#d9c9a4}
.mk-modern .mm-plate{color:#2c2a26;background:rgba(255,255,255,.72);border-color:rgba(74,61,44,.3)}
.mk-modern .mm-years{color:#6b6455}
/* 祭拜按钮 */
.mm-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.mm-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  font:inherit;font-size:14px;color:var(--tx);cursor:pointer;
  background:var(--surface);border:1px solid var(--line2);
  transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
.mm-btn i{font-style:normal;font-size:17px;line-height:1}
.mm-btn .mm-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.mm-btn:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 18px rgba(225,29,72,.16)}
.mm-btn.done{opacity:.55;cursor:default}
.mm-btn.done:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.mm-btn:disabled{pointer-events:none}
.mm-hint{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--tx3)}
/* 祭拜浮起动画：点击处飘出图标 */
.mm-fx{position:absolute;z-index:5;pointer-events:none;font-size:22px;line-height:1;
  animation:mmFloat 1.5s var(--ease) forwards}
@keyframes mmFloat{
  0%{transform:translate(-50%,0) scale(.6);opacity:0}
  18%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}
  100%{transform:translate(-50%,-110px) scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){.mm-fx{animation:none;opacity:0}}
@media (max-width:560px){
  .mm-couplet{top:6%;font-size:12px;padding:.5em .22em}
  .mm-actions{gap:8px}
  .mm-btn{padding:8px 13px;font-size:13px}
}

/* ── 纪念馆祭拜动态（mm-feed） ── */
.mm-feed{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;
  max-height:168px;overflow-y:auto;font-size:13px;scrollbar-width:thin}
.mm-feed li{display:flex;align-items:center;gap:7px;padding:4px 10px;border-radius:9px;
  background:rgba(127,127,127,.08);animation:mmIn .45s ease}
@keyframes mmIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.mm-feed li:first-child{background:var(--accent-weak)}
.mm-feed i{font-style:normal;flex:none}
.mm-feed .mf-who{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-feed .mf-act{color:var(--accent);flex:none}
.mm-feed time{margin-left:auto;font-size:12px;color:var(--tx3);flex:none}
.mm-feed .mm-empty{justify-content:center;color:var(--tx3);background:none}