/* ============================================================
   LB 新站 · 皮肤系统（v2）
   html[data-skin] 决定「风格」：排版 / 卡片形态 / 背景质感 / 动效
   html[data-theme] 只决定明暗底子
   四套皮肤 = 四套设计语言，不是四组颜色：
     rock     暗黑摇滚 —— 黑底霓虹、直角硬朗、扫描线 + 红光、鼠标光斑
     magazine 明亮杂志 —— 白纸衬线、零圆角、报头双线、图片悬浮
     retro    复古胶片 —— 暖褐颗粒、相纸白边、暗角、呼吸暖光
     fresh    现代清新 —— 玻璃渐变、大圆角、漂浮光斑、卡片上浮
   ============================================================ */

/* ---------- 0. 通用基底：主色可被后台「主题色」整体接管 ----------
   注意用 html:root 而不是 html —— app.css 里有一份 `:root{--accent:#e11d48}`，
   它的特异性 (0,1,0) 比 html (0,0,1) 高，会把四套皮肤的主色全压成同一个红，
   结果就是"换了皮肤只有底色变、主色不变"。html:root (0,1,1) 稳压它一头。 */
html:root{
  --accent-default:#e11d48;
  --accent:var(--accent-default);
  --accent-weak:color-mix(in srgb,var(--accent) 15%,transparent);
  --glow:0 0 42px color-mix(in srgb,var(--accent) 30%,transparent);
  --spot:color-mix(in srgb,var(--accent) 22%,transparent); /* 鼠标光斑颜色 */
}
/* 光斑是「叠加」出来的：深色皮要够亮才看得出，浅色皮只要一层淡淡的染色 */
html:root[data-theme="dark"]{--spot:color-mix(in srgb,var(--accent) 30%,transparent)}
html:root[data-theme="light"]{--spot:color-mix(in srgb,var(--accent) 11%,transparent)}
/* 各皮肤的主色：同样要压住 app.css 的 :root */
html:root[data-skin="rock"]{--accent-default:#e11d48;--accent-2:#ff7a59}
html:root[data-skin="magazine"]{--accent-default:#b1121f;--accent-2:#1a1a1a}
html:root[data-skin="retro"]{--accent-default:#c8763c;--accent-2:#7a4b22}
html:root[data-skin="fresh"]{--accent-default:#3b6cf6;--accent-2:#8b5cf6}
html:root[data-skin]{
  --accent:var(--accent-default);
  --accent-weak:color-mix(in srgb,var(--accent) 15%,transparent);
  --glow:0 0 42px color-mix(in srgb,var(--accent) 30%,transparent);
}

/* ============================================================
   1. 暗黑摇滚
   ============================================================ */
html[data-skin="rock"]{
  --accent-2:#ff7a59;   /* 主色/辅助色统一在文件顶部的 html:root[data-skin=...] 里定义 */
  --r-sm:4px; --r:6px; --r-lg:10px; --maxw:1280px;
}
html[data-skin="rock"][data-theme="dark"]{
  --bg:#07070a; --bg2:#0d0d13; --surface:#12121a; --surface2:#1b1b25;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.18);
  --tx:#f2f2f6; --tx2:#a4a4b4; --tx3:#6a6a7c;
  --shadow:0 12px 40px rgba(0,0,0,.66);
  --glow:0 0 46px rgba(225,29,72,.30);
  --scan:rgba(255,255,255,.028);
  --deco-1:rgba(225,29,72,.30); --deco-2:rgba(122,20,64,.24);
}
html[data-skin="rock"][data-theme="light"]{
  --bg:#f4f4f6; --bg2:#fff; --surface:#fff; --surface2:#efeff3;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.2);
  --tx:#121218; --tx2:#55555f; --tx3:#8a8a95;
  --shadow:0 8px 26px rgba(15,15,35,.12);
  --scan:rgba(0,0,0,.02);
  --deco-1:rgba(225,29,72,.13); --deco-2:rgba(255,122,89,.11);
}
/* 背景：两团红光 + 细扫描线，缓慢上浮 */
html[data-skin="rock"] body::before{
  content:''; position:fixed; inset:-12% -6% -12% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 34% at 12% 6%,var(--deco-1),transparent 70%),
    radial-gradient(42% 30% at 88% 20%,var(--deco-2),transparent 72%),
    repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px);
  animation:rockDrift 28s ease-in-out infinite alternate;
}
@keyframes rockDrift{to{transform:translate3d(0,-4%,0) scale(1.08)}}
html[data-skin="rock"] .site-head{border-bottom:1px solid var(--line)}
html[data-skin="rock"][data-theme="dark"] .site-head{background:rgba(7,7,10,.8)}
html[data-skin="rock"] .brand-mark{font-weight:900;letter-spacing:.16em;filter:none}
html[data-skin="rock"] .nav-item{border-radius:3px}
html[data-skin="rock"] .nav-item.on{background:var(--accent);box-shadow:0 0 22px rgba(225,29,72,.45)}
html[data-skin="rock"] .blk-head{position:relative;border-bottom:1px solid var(--line2)}
html[data-skin="rock"] .blk-head::after{
  content:''; position:absolute; left:0; bottom:-1px; width:86px; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
html[data-skin="rock"] .blk-head h2{font-weight:800;letter-spacing:.01em}
html[data-skin="rock"] .blk-head h2::before{
  width:4px; height:20px; border-radius:1px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 16px var(--accent);
}
/* 卡片：直角 + 左侧霓虹竖条 */
html[data-skin="rock"] .cg-item,
html[data-skin="rock"] .side-card,
html[data-skin="rock"] .topic-card,
html[data-skin="rock"] .rescard{position:relative;border-radius:var(--r)}
html[data-skin="rock"] .cg-item::before,
html[data-skin="rock"] .side-card::before,
html[data-skin="rock"] .topic-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:linear-gradient(180deg,var(--accent),transparent);
}
html[data-skin="rock"] .cg-item:hover,
html[data-skin="rock"] .topic-card:hover,
html[data-skin="rock"] .rescard:hover{border-color:var(--accent);box-shadow:var(--glow)}
html[data-skin="rock"] .btn-primary{box-shadow:0 0 26px rgba(225,29,72,.45);border-radius:var(--r)}
html[data-skin="rock"] .hero-title{letter-spacing:.03em}

/* ============================================================
   2. 明亮杂志（白纸 + 衬线 + 报刊分隔线）
   ============================================================ */
html[data-skin="magazine"]{
  --accent-2:#1a1a1a;
  --r-sm:0; --r:0; --r-lg:0; --maxw:1140px;
  --font:"Songti SC","Noto Serif SC",Georgia,"Times New Roman","PingFang SC","Microsoft YaHei",serif;
}
html[data-skin="magazine"][data-theme="light"]{
  --bg:#fbfaf7; --bg2:#fff; --surface:#fff; --surface2:#f4f2ec;
  --line:rgba(0,0,0,.12); --line2:rgba(0,0,0,.34);
  --tx:#111; --tx2:#4a4a4a; --tx3:#8c8c8c;
  --shadow:none; --glow:none; --spot:rgba(177,18,31,.07);
}
html[data-skin="magazine"][data-theme="dark"]{
  --bg:#111; --bg2:#171717; --surface:#1a1a1a; --surface2:#232323;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.4);
  --tx:#f2f0ea; --tx2:#b5b2a9; --tx3:#82817a;
  --shadow:none; --glow:none; --spot:rgba(255,255,255,.06);
}
/* 极淡的纸纹网点 */
html[data-skin="magazine"] body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:22px 22px; color:var(--tx); opacity:.045;
}
html[data-skin="magazine"] body{font-size:15.5px;line-height:1.9}
html[data-skin="magazine"] h1,
html[data-skin="magazine"] h2,
html[data-skin="magazine"] h3{font-weight:700;letter-spacing:0;font-family:var(--font)}
html[data-skin="magazine"] .site-head{background:var(--bg);border-bottom:2px solid var(--tx)}
html[data-skin="magazine"] .head-inner{height:68px}
/* 顶栏高 68px，同步给吸顶偏移量（app.css 里那一堆 top:var(--head-h) 都读它），
   否则下方吸顶导航会压在顶栏底下 6px，滚动时看着像错位跳动。 */
html[data-skin="magazine"]{--head-h:68px}
html[data-skin="magazine"] .brand-mark{
  background:none;-webkit-text-fill-color:var(--tx);color:var(--tx);
  font-family:var(--font);font-weight:700;letter-spacing:.2em;font-size:21px;
}
html[data-skin="magazine"] .brand-cn{font-family:var(--font)}
html[data-skin="magazine"] .nav-item{background:none!important;border-radius:0;position:relative}
html[data-skin="magazine"] .nav-item.on{color:var(--tx);font-weight:700}
html[data-skin="magazine"] .nav-item.on::after{
  content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--accent);display:block;
}
html[data-skin="magazine"] .head-search input{border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--line2)}
html[data-skin="magazine"] .theme-btn,
html[data-skin="magazine"] .menu-btn{border-radius:0}
html[data-skin="magazine"] .btn,
html[data-skin="magazine"] .btn-primary,
html[data-skin="magazine"] .mem-link{border-radius:0}
/* 报头：粗黑线 + 主色短线 */
html[data-skin="magazine"] .blk-head{border-bottom:0;padding-bottom:9px;position:relative;margin-bottom:20px}
html[data-skin="magazine"] .blk-head::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tx);
}
html[data-skin="magazine"] .blk-head::after{
  content:'';position:absolute;left:0;bottom:5px;right:0;height:1px;background:var(--line2);
}
html[data-skin="magazine"] .blk-head h2{font-size:21px;letter-spacing:.04em}
html[data-skin="magazine"] .blk-head h2::before{display:none}
html[data-skin="magazine"] .card,
html[data-skin="magazine"] .cg-item,
html[data-skin="magazine"] .topic-card,
html[data-skin="magazine"] .rescard,
html[data-skin="magazine"] .side-card,
html[data-skin="magazine"] .lnk,
html[data-skin="magazine"] .chart,
html[data-skin="magazine"] .gitem,
html[data-skin="magazine"] .album-cover{border-radius:0;box-shadow:none}
html[data-skin="magazine"] .cg-item,
html[data-skin="magazine"] .topic-card,
html[data-skin="magazine"] .rescard{transition:border-color .25s var(--ease)}
html[data-skin="magazine"] .cg-item:hover,
html[data-skin="magazine"] .topic-card:hover,
html[data-skin="magazine"] .rescard:hover{border-color:var(--accent);transform:none;box-shadow:none}
html[data-skin="magazine"] .gitem img,
html[data-skin="magazine"] .album-cover img{transition:transform .5s var(--ease)}
html[data-skin="magazine"] .gitem:hover img,
html[data-skin="magazine"] .album:hover .album-cover img{transform:scale(1.045)}
html[data-skin="magazine"] .album:hover{transform:none}
html[data-skin="magazine"] .cg-ic{border-radius:0}
html[data-skin="magazine"] .hb,
html[data-skin="magazine"] .tip,
html[data-skin="magazine"] .page-head{border-radius:0}

/* ============================================================
   3. 复古胶片（暖褐 + 颗粒 + 相纸白边）
   ============================================================ */
html[data-skin="retro"]{
  --accent-2:#7a4b22;
  --r-sm:6px; --r:10px; --r-lg:16px; --maxw:1200px;
}
html[data-skin="retro"][data-theme="dark"]{
  --bg:#171310; --bg2:#1e1915; --surface:#221c17; --surface2:#2b231c;
  --line:rgba(220,190,150,.16); --line2:rgba(220,190,150,.30);
  --tx:#f0e3cf; --tx2:#c3ae92; --tx3:#8e7c66;
  --shadow:0 12px 34px rgba(0,0,0,.6);
  --glow:0 0 44px rgba(200,118,60,.3);
  --paper:#f6ecd9; --deco-1:rgba(200,118,60,.26); --deco-2:rgba(120,60,20,.3);
}
html[data-skin="retro"][data-theme="light"]{
  --bg:#f3e9d9; --bg2:#fbf5ea; --surface:#fffaf0; --surface2:#efe2cd;
  --line:rgba(120,90,50,.2); --line2:rgba(120,90,50,.34);
  --tx:#3a2c1e; --tx2:#6b563c; --tx3:#9a8570;
  --shadow:0 10px 28px rgba(120,80,30,.2);
  --glow:0 0 34px rgba(200,118,60,.24);
  --paper:#fffdf6; --deco-1:rgba(200,118,60,.20); --deco-2:rgba(150,90,40,.16);
}
/* 背景：暖光晕 + 暗角；颗粒在 body::after 上叠加 */
html[data-skin="retro"] body::before{
  content:''; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 22% 10%,var(--deco-1),transparent 72%),
    radial-gradient(60% 50% at 80% 90%,var(--deco-2),transparent 70%),
    radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(30,18,8,.34) 100%);
  animation:retroBreath 14s ease-in-out infinite alternate;
}
@keyframes retroBreath{to{opacity:.72;transform:scale(1.05)}}
html[data-skin="retro"] body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.065;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:retroGrain 1.1s steps(3) infinite;
}
@keyframes retroGrain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}
html[data-skin="retro"] img:not(.no-filter){filter:sepia(.12) saturate(1.05) contrast(1.02)}
html[data-skin="retro"] .site-head{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:1px solid var(--line2);
}
html[data-skin="retro"] .site-head::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8;
}
html[data-skin="retro"] h1,html[data-skin="retro"] h2,html[data-skin="retro"] h3{letter-spacing:.03em;font-weight:600}
html[data-skin="retro"] .blk-head{border-bottom:1px dashed var(--line2)}
html[data-skin="retro"] .blk-head h2::before{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
html[data-skin="retro"] .progress-bar{height:3px}
html[data-skin="retro"] .nav-item.on{background:var(--accent);box-shadow:0 0 20px rgba(200,118,60,.4)}
/* 相纸白边：照片像冲印出来的 */
html[data-skin="retro"] .gallery .gitem{
  padding:7px;background:var(--paper);border-radius:3px;
  box-shadow:0 8px 20px rgba(40,22,8,.4);
}
html[data-skin="retro"] .gallery .gitem img{border-radius:1px;filter:sepia(.16) saturate(1.06) contrast(1.03)}
html[data-skin="retro"] .gallery .gitem:nth-child(3n){transform:rotate(-.7deg)}
html[data-skin="retro"] .gallery .gitem:nth-child(4n){transform:rotate(.6deg)}
html[data-skin="retro"] .gallery .gitem:hover{transform:rotate(0) translateY(-4px);box-shadow:0 14px 30px rgba(40,22,8,.5)}
html[data-skin="retro"] .album-cover{box-shadow:0 8px 22px rgba(40,22,8,.45);border-radius:4px}
html[data-skin="retro"] .lnk:hover{border-color:var(--accent)}

/* ============================================================
   4. 现代清新（玻璃 + 渐变光斑 + 大圆角）
   ============================================================ */
html[data-skin="fresh"]{
  --accent-2:#8b5cf6;
  --r-sm:10px; --r:18px; --r-lg:26px; --maxw:1280px;
}
html[data-skin="fresh"][data-theme="light"]{
  --bg:#f4f6fb; --bg2:#fff; --surface:#fff; --surface2:#f0f3fb;
  --line:rgba(24,42,92,.09); --line2:rgba(24,42,92,.18);
  --tx:#101a33; --tx2:#4d5a78; --tx3:#8892ab;
  --shadow:0 10px 30px rgba(24,42,92,.10);
  --glow:0 0 34px rgba(59,108,246,.22);
  --deco-1:rgba(59,108,246,.30); --deco-2:rgba(34,211,238,.26); --deco-3:rgba(139,92,246,.24);
}
html[data-skin="fresh"][data-theme="dark"]{
  --bg:#0a0e1a; --bg2:#101728; --surface:#141c30; --surface2:#1b2540;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --tx:#eaeefb; --tx2:#9fabcd; --tx3:#6c7a9c;
  --shadow:0 12px 36px rgba(0,0,0,.55);
  --glow:0 0 40px rgba(59,108,246,.3);
  --deco-1:rgba(59,108,246,.3); --deco-2:rgba(34,211,238,.2); --deco-3:rgba(139,92,246,.26);
}
/* 三团大光斑缓慢漂浮 —— 这是这套皮肤的「动」 */
html[data-skin="fresh"] body::before{
  content:''; position:fixed; inset:-14%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 14% 8%,var(--deco-1),transparent 68%),
    radial-gradient(34% 28% at 86% 16%,var(--deco-3),transparent 70%),
    radial-gradient(40% 30% at 60% 92%,var(--deco-2),transparent 72%);
  filter:blur(24px); animation:freshFloat 22s ease-in-out infinite alternate;
}
@keyframes freshFloat{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,2%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2%,0) scale(1.03)}
}
html[data-skin="fresh"] .site-head{
  background:color-mix(in srgb,var(--bg2) 76%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
}
html[data-skin="fresh"] .brand-mark{
  background:linear-gradient(94deg,#3b6cf6,#8b5cf6 55%,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin="fresh"] .nav-item.on{
  background:linear-gradient(94deg,#3b6cf6,#8b5cf6);color:#fff;
  box-shadow:0 6px 18px rgba(59,108,246,.38);
}
html[data-skin="fresh"] .head-search input{border-radius:999px;background:color-mix(in srgb,var(--bg2) 70%,transparent)}
html[data-skin="fresh"] .card,
html[data-skin="fresh"] .side-card,
html[data-skin="fresh"] .rescard,
html[data-skin="fresh"] .topic-card,
html[data-skin="fresh"] .cg-item,
html[data-skin="fresh"] .chart,
html[data-skin="fresh"] .lnk,
html[data-skin="fresh"] .filelist li{
  box-shadow:0 2px 12px rgba(24,42,92,.07);
  border-color:color-mix(in srgb,var(--line) 70%,transparent);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
html[data-skin="fresh"] .card:hover,
html[data-skin="fresh"] .cg-item:hover,
html[data-skin="fresh"] .rescard:hover,
html[data-skin="fresh"] .topic-card:hover,
html[data-skin="fresh"] .lnk:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(59,108,246,.2);
  border-color:rgba(59,108,246,.35);
}
html[data-skin="fresh"] .cg-ic{background:linear-gradient(135deg,rgba(59,108,246,.18),rgba(139,92,246,.18))}
html[data-skin="fresh"] .btn-primary,
html[data-skin="fresh"] .lb-btn.primary{
  background:linear-gradient(94deg,#3b6cf6,#7c5cf7);border-color:transparent;
  box-shadow:0 10px 26px rgba(59,108,246,.34);
}
html[data-skin="fresh"] .hero-title,
html[data-skin="fresh"] .hc-txt h2{letter-spacing:-.02em}
html[data-skin="fresh"] .blk-head h2::after{
  content:'';display:block;width:46px;height:3px;margin-top:9px;border-radius:2px;
  background:linear-gradient(90deg,#3b6cf6,#22d3ee);
}
html[data-skin="fresh"] .blk-head{border-bottom:0}
html[data-skin="fresh"] .blk-head h2::before{display:none}
html[data-skin="fresh"] .blk-head h2{display:block;font-weight:700}

/* ============================================================
   7. 风格化层：把「换配色」变成「换形态」
   同样的 HTML，四套皮用不同的排版语言呈现 ——
   列表是分隔线还是编号、快捷入口是方块还是胶囊、标题是衬线还是无衬线，
   这些结构差异才是"整体皮肤风格改了"的直观感受来源。
   ============================================================ */

/* ---------- 7.1 暗黑摇滚：编号列表 + 硬边方块入口 + 大写间距 ---------- */
html[data-skin="rock"] .blk-head h2{text-transform:uppercase;letter-spacing:.06em;font-size:17px}
html[data-skin="rock"] .txt-list li{border-bottom:1px solid var(--line2);position:relative;padding-left:34px}
/* li 里没有编号节点，用 CSS 计数器按序号生成 —— 摇滚榜的感觉 */
html[data-skin="rock"] .txt-list{counter-reset:rk}
html[data-skin="rock"] .txt-list li{counter-increment:rk}
html[data-skin="rock"] .txt-list li::before{
  content:counter(rk,decimal-leading-zero);
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--tx3);
  font-variant-numeric:tabular-nums;
}
html[data-skin="rock"] .txt-list li:hover::before{color:var(--accent)}
html[data-skin="rock"] .txt-list li a:hover{padding-left:4px}
html[data-skin="rock"] .cg-item{border-radius:2px;background:linear-gradient(135deg,var(--surface2),var(--surface))}
html[data-skin="rock"] .cg-ic{border-radius:2px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#000));
  color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
html[data-skin="rock"] .cg-t b{text-transform:uppercase;letter-spacing:.04em;font-size:13.5px}
html[data-skin="rock"] .more-link{text-transform:uppercase;letter-spacing:.1em;font-size:11.5px}
html[data-skin="rock"] .hc-txt h2{text-transform:uppercase;letter-spacing:.05em;font-weight:900}

/* ---------- 7.2 明亮杂志：双线报头 + 衬线大标 + 首字下沉 ---------- */
html[data-skin="magazine"] .txt-list li{
  border-bottom:1px solid var(--line);padding:13px 0;align-items:baseline;
}
html[data-skin="magazine"] .txt-list li a{font-family:var(--font);font-size:15.5px;white-space:normal}
html[data-skin="magazine"] .txt-list li a:hover{padding-left:0;text-decoration:underline;text-underline-offset:3px}
html[data-skin="magazine"] .txt-list li span{font-family:var(--font);font-style:italic}
html[data-skin="magazine"] .cg-item{
  flex-direction:column;align-items:flex-start;gap:9px;background:transparent;
  border:0;border-top:2px solid var(--tx);padding:12px 0 16px;
}
html[data-skin="magazine"] .cg-item:hover{transform:none;box-shadow:none;border-top-color:var(--accent)}
html[data-skin="magazine"] .cg-ic{
  width:auto;height:auto;flex:none;background:none;color:var(--accent);
  font-size:20px;padding:0;border-radius:0;border-bottom:1px solid var(--accent);display:inline-block;
}
html[data-skin="magazine"] .cg-t b{font-family:var(--font);font-size:16px;font-weight:700}
html[data-skin="magazine"] .cg-t em{font-family:var(--font)}
html[data-skin="magazine"] .cg-items{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
html[data-skin="magazine"] .more-link{font-style:italic}
html[data-skin="magazine"] .hc-txt h2{font-family:var(--font);font-weight:700;letter-spacing:.02em}
html[data-skin="magazine"] .ccard-b h3{font-family:var(--font);font-size:17px}
html[data-skin="magazine"] .blk-head h2{text-transform:none}
html[data-skin="magazine"] .hero-title,
html[data-skin="magazine"] .hero-sub{font-family:var(--font)}

/* ---------- 7.3 复古胶片：点线列表 + 圆形编号 + 票据式入口 ---------- */
html[data-skin="retro"] .txt-list li{
  border-bottom:1px dotted var(--line2);padding:12px 0;font-family:var(--font);
}
html[data-skin="retro"] .txt-list{counter-reset:rt}
html[data-skin="retro"] .txt-list li{counter-increment:rt;padding-left:30px;position:relative}
html[data-skin="retro"] .txt-list li::before{
  content:counter(rt);position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
html[data-skin="retro"] .txt-list li a:hover{padding-left:4px;color:var(--accent)}
html[data-skin="retro"] .cg-item{
  border-radius:var(--r);border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--accent)));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 22%,transparent);
}
html[data-skin="retro"] .cg-ic{
  border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
}
html[data-skin="retro"] .cg-t b{font-weight:600;letter-spacing:.02em}
html[data-skin="retro"] .hc-txt h2{text-shadow:0 3px 26px rgba(0,0,0,.7),0 0 60px color-mix(in srgb,var(--accent) 45%,transparent)}
html[data-skin="retro"] .blk-head h2{font-weight:600}

/* ---------- 7.4 现代清新：无边框玻璃卡 + 渐变图标 + 胶囊入口 ---------- */
html[data-skin="fresh"] .txt-list li{
  border-bottom:0;padding:0;margin-bottom:8px;
}
html[data-skin="fresh"] .txt-list li a{
  padding:11px 15px;border-radius:12px;background:color-mix(in srgb,var(--surface) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .26s var(--ease),background .26s,border-color .26s;
}
html[data-skin="fresh"] .txt-list li a:hover{
  padding-left:15px;transform:translateX(3px);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
html[data-skin="fresh"] .txt-list li span{
  align-self:center;padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);
}
html[data-skin="fresh"] .cg-item{
  border-radius:20px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
html[data-skin="fresh"] .cg-ic{
  border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 34%,transparent);
}
html[data-skin="fresh"] .hc-txt h2{background:none;-webkit-text-fill-color:#fff;color:#fff}
html[data-skin="fresh"] .blk-head h2{text-transform:none}

/* ---------- 7.5 相册 / 专辑：三种截然不同的照片框 ---------- */
html[data-skin="rock"] .gitem{border-radius:3px;border:1px solid var(--line2)}
html[data-skin="rock"] .gitem:hover{box-shadow:0 0 30px color-mix(in srgb,var(--accent) 40%,transparent)}
html[data-skin="rock"] .album-cover{border-radius:4px;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 0 1px var(--line2)}
html[data-skin="magazine"] .album-cover{box-shadow:none;border:1px solid var(--line2)}
html[data-skin="magazine"] .album p{font-family:var(--font);font-style:italic}
html[data-skin="fresh"] .gitem{border-radius:20px;box-shadow:0 6px 20px rgba(24,42,92,.1)}
html[data-skin="fresh"] .album-cover{border-radius:20px;box-shadow:0 10px 28px rgba(24,42,92,.14)}

/* ---------- 7.6 页脚：四套皮各自的收束方式 ---------- */
html[data-skin="rock"] .site-foot{border-top:2px solid var(--accent)}
html[data-skin="magazine"] .site-foot{border-top:3px double var(--tx);background:var(--bg)}
html[data-skin="magazine"] .foot-brand p{font-family:var(--font);font-style:italic}
html[data-skin="retro"] .site-foot{border-top:1px dashed var(--line2)}
html[data-skin="fresh"] .site-foot{border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 6%,transparent))}

/* ---------- 7.7 按钮形态 ---------- */
html[data-skin="rock"] .btn,.html[data-skin="rock"] .btn-primary,.html[data-skin="rock"] .mem-link{border-radius:3px}
html[data-skin="rock"] .btn-primary{text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600}
html[data-skin="magazine"] .btn-primary,.html[data-skin="magazine"] .hc-cta{border-radius:0}
html[data-skin="magazine"] .btn-primary{font-family:var(--font);box-shadow:none;background:var(--accent)}
html[data-skin="retro"] .btn-primary,.html[data-skin="retro"] .hc-cta{border-radius:var(--r)}
html[data-skin="fresh"] .btn-primary,.html[data-skin="fresh"] .hc-cta{border-radius:999px}

/* ============================================================
   7.8 暗黑摇滚 · 加厚层
   ------------------------------------------------------------
   7.1 的 rock 已经有「直角 + 霓虹竖条 + 编号列表」，但那还只是一套深色主题。
   真正让它「一看就是摇滚」的是下面这几件事：
     ① 墙面噪点 + 斜向扫光 —— 深色底不再死平，有颗粒和光在动
     ② 舞台顶灯 —— 标题栏上方漏一道光，像演出前的聚光灯
     ③ 撕边 —— 卡片对角切一刀，金属板的工业感（替代圆角）
     ④ 节奏线 —— 标题底下压一条等宽点列，机架走字灯的味道
     ⑤ 硬阴影标题 / 推子式导航 / 斜纹页脚
   全部走伪元素 + background，不动 HTML 结构；因为写在文件末尾，
   同特异性时按顺序稳压前面 7.1 的规则，其它皮肤零影响。
   ============================================================ */

/* ① 墙面：细密颗粒 + 一道缓慢横扫的斜光。
   body::before 已被背景光晕占用，这里用 body::after（rock 皮此前是空的）。 */
html[data-skin="rock"] body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(104deg,transparent 0 42%,rgba(255,255,255,.05) 50%,transparent 58% 100%),
    radial-gradient(rgba(255,255,255,.06) .5px,transparent .5px),
    radial-gradient(rgba(0,0,0,.30) .5px,transparent .5px);
  background-size:100% 100%,3px 3px,4px 4px;
  background-position:0 0,0 0,1px 2px;
  animation:rockSweep 19s ease-in-out infinite alternate;
}
@keyframes rockSweep{
  from{background-position:0 0,0 0,1px 2px}
  to{background-position:190% 0,26px 0,27px 2px}
}
/* 浅色底上颗粒要反过来（黑影）并且更淡，否则像屏幕脏了 */
html[data-skin="rock"][data-theme="light"] body::after{
  background-image:
    linear-gradient(104deg,transparent 0 44%,rgba(225,29,72,.05) 50%,transparent 56% 100%),
    radial-gradient(rgba(0,0,0,.045) .5px,transparent .5px);
  background-size:100% 100%,3px 3px;
}

/* ② 标题栏：只留一条「底线导轨」，不再整块铺色。
   原先这里是「舞台顶灯」——整条标题栏铺一层 accent 渐隐底，再在它上方 15px 抹一道光晕。
   深色皮肤下看是蒙了层脏雾、边界糊掉；浅色皮肤下直接成一条粉带，和下面的卡片连成一片。
   现在：整块底色去掉、上方光晕去掉，只保留 7.1 那条 86px 主色短轨 + 底部一条细线。
   光感全部集中到标题竖条与文字上，「分割」这件事交给一条干净的线就够了。 */
html[data-skin="rock"] .blk-head{position:relative;background:none}
html[data-skin="rock"] .blk-head::before{content:none}

/* ③ 撕边：左上 + 右下各切一刀。
   注意 .cg-item 的左侧霓虹竖条是 7.1 用 ::before 画在卡片内部的，
   clip-path 只裁外形，竖条照样留着。 */
html[data-skin="rock"] .cg-item,
html[data-skin="rock"] .side-card,
html[data-skin="rock"] .topic-card,
html[data-skin="rock"] .rescard{
  border-radius:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
/* 切角会把 border 一起切掉，改用内阴影补轮廓，看上去仍是完整一圈 */
html[data-skin="rock"] .cg-item,
html[data-skin="rock"] .topic-card,
html[data-skin="rock"] .rescard{
  box-shadow:inset 0 0 0 1px var(--line);
}
html[data-skin="rock"] .cg-item:hover,
html[data-skin="rock"] .topic-card:hover,
html[data-skin="rock"] .rescard:hover{
  box-shadow:inset 0 0 0 1px var(--accent),var(--glow);
}
html[data-skin="rock"] .gitem,
html[data-skin="rock"] .album-cover{
  border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}

/* ④ 节奏线：标题底下一条等宽点列 */
html[data-skin="rock"] .blk-head h2{
  position:relative; font-weight:900; letter-spacing:.1em;
}
/* 标题下面原本还压了一条等宽点线（"节奏线"）。它离整行底部那条细线只有十几像素，
   浅色皮肤下两条线叠着看就是一圈毛边，所以去掉——分割交给底部一条线就够。 */
html[data-skin="rock"] .blk-head h2::after{content:none}
/* 主色竖条改成两端收尖的霓虹管 */
html[data-skin="rock"] .blk-head h2::before{
  width:3px; height:19px; border-radius:0;
  background:linear-gradient(180deg,transparent,var(--accent) 22%,var(--accent-2) 78%,transparent);
  box-shadow:0 0 14px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ⑤ 标题 / 导航 / 页脚 */
html[data-skin="rock"] .hero-title,
html[data-skin="rock"] .hc-txt h2{
  text-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 55%,transparent),0 4px 34px rgba(0,0,0,.72);
}
/* 导航选中项：底部一道渐变亮线 + 光晕，像调音台的推子。
   注意 app.css:63 有 `.nav-item.on::after{display:none}`，
   ::after 被全局关掉了，所以这里改用 ::before 画亮线。 */
html[data-skin="rock"] .nav-item.on{
  position:relative; background:transparent; color:var(--accent); box-shadow:none;
}
html[data-skin="rock"] .nav-item.on::before{
  content:''; display:block; position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),var(--accent),transparent);
  box-shadow:0 0 12px var(--accent);
}
html[data-skin="rock"] .site-foot{
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--accent) 7%,transparent) 0 6px,transparent 6px 14px);
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="rock"] body::after{animation:none}
}

/* ============================================================
   8. 动效层（滚动入场 / 鼠标光斑 / 页面淡入）
   ============================================================ */
/* 滚动入场：JS 只给「首屏之外」的元素加 .lb-rv，动画播完把类摘掉，
   这样不会跟卡片自带的 hover transform 抢样式。 */
.lb-rv{
  opacity:0; transform:translateY(24px);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
  transition-delay:var(--d,0ms);
}
.lb-rv.is-in{opacity:1;transform:none}
html[data-skin="magazine"] .lb-rv{transform:translateY(9px)}
html[data-skin="fresh"] .lb-rv{transform:translateY(28px) scale(.985)}
html[data-skin="retro"] .lb-rv{transform:translateY(18px);filter:blur(7px)}
html[data-skin="retro"] .lb-rv.is-in{filter:blur(0)}
html[data-skin="rock"] .lb-rv{transform:translateY(22px)}

/* ---- 动效强度分档（后台「站点设置 → 页面动效」，写在 <html data-motion> 上）----
   为什么要有这一档：rich 档下，首屏之外的每个区块初始都带 translateY(22px)
   （清新皮还叠了 scale(.985)），滚动进来时整块「浮上来 + 缩一下」——
   手指一滑，满屏内容都在动，观感就是「排版不固定、会收缩」。
   soft（默认）只保留淡入：元素的几何位置从头到尾不变，稳。
   off 由 JS 直接跳过，连 .lb-rv 都不会加。 */
html[data-motion="soft"] .lb-rv,
html[data-motion="soft"] .lb-rv.is-in{
  transform:none; filter:none;
  transition:opacity .34s var(--ease); transition-delay:0ms;
}
html[data-motion="off"] .lb-rv{opacity:1;transform:none;filter:none;transition:none}
/* 全屏背景光晕：soft 下砍掉 scale（那才是「页面在呼吸/缩放」的来源），
   只留极缓慢的一点点位移，且拉长到 46s，几乎察觉不到。 */
html[data-motion="soft"] body::before{animation-name:decoDriftSoft;animation-duration:46s}
@keyframes decoDriftSoft{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-2.5%,0)}}
html[data-motion="off"] body::before{animation:none;transform:none}
/* 换肤擦除层：关闭档不再闪 */
html[data-motion="off"].lb-swap::before{animation:none;display:none}

/* 鼠标光斑：卡片上跟手的一团主色柔光。
   用混合模式叠加（深色皮 screen 提亮 / 浅色皮 multiply 上色），
   不靠 z-index 压内容，文字永远是清楚的。 */
.lb-spot{position:relative;isolation:isolate}
.lb-spot::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  border-radius:inherit; mix-blend-mode:screen;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 68%);
  transition:opacity .35s var(--ease);
}
html[data-theme="light"] .lb-spot::after{mix-blend-mode:multiply}
.lb-spot:hover::after{opacity:1}
html[data-skin="magazine"] .lb-spot::after{opacity:0!important}
/* 页面开场：整页轻微淡入上移，配合皮肤切换更明显 */
html.lb-enter body{animation:lbEnter .5s var(--ease) both}
@keyframes lbEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ⚠ 上面那条是 (0,1,2)，下面若要覆盖它必须写在它之后、或再抬一级特异性。
   这里写成 html[data-motion="soft"].lb-enter body → (0,2,2)，顺序 + 特异性双保险。
   rich 档保留 8px 上移；soft 档去掉位移（整页上下挪一下，正是「打开页面时
   收缩一下」的来源），只留淡入；off 档连淡入都不要。 */
html[data-motion="soft"].lb-enter body{animation:lbEnterSoft .42s var(--ease) both}
@keyframes lbEnterSoft{from{opacity:0}to{opacity:1}}
html[data-motion="off"].lb-enter body{animation:none}
/* 皮肤切换瞬间的一层「擦除」过渡，让换肤有明确的视觉反馈 */
html.lb-swap::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%);
  animation:lbSwap .62s var(--ease) both;
}
@keyframes lbSwap{from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(1.35)}}

/* ============================================================
   9. 外观面板（右下角 ◑）
   ============================================================ */
.skin-fab{
  position:fixed;right:16px;bottom:76px;z-index:160;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface);color:var(--tx);font-size:19px;cursor:pointer;
  box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;transition:.35s var(--ease)
}
.skin-fab.on{display:flex}
.skin-fab:hover{transform:rotate(24deg) scale(1.08);border-color:var(--accent);color:var(--accent)}
.skin-pop{
  position:fixed;right:16px;bottom:132px;z-index:161;width:270px;padding:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  display:none;animation:skin-in .3s var(--ease);
  /* 面板比一屏还高时要能滚，不然底部的「恢复默认」永远点不到 */
  max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain;
}
.skin-pop.on{display:block}
@keyframes skin-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.skin-pop-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.skin-pop-head b{font-size:14px}
.skin-pop-head span{font-size:11.5px;color:var(--tx3)}
.skin-pop h4{margin:12px 0 8px;font-size:11.5px;color:var(--tx3);font-weight:500;letter-spacing:.06em}
.skin-pop h4:first-of-type{margin-top:0}
.skin-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skin-chip{
  display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface2);transition:.24s var(--ease);position:relative;overflow:hidden
}
.skin-chip i{width:100%;height:22px;border-radius:5px;display:block;margin-bottom:5px}
.skin-chip em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--tx)}
.skin-chip small{font-size:10.5px;color:var(--tx3);line-height:1.35}
.skin-chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.skin-chip.on{border-color:var(--accent);background:var(--accent-weak)}
.skin-chip.on em{color:var(--accent)}
.sc-rock i{background:linear-gradient(120deg,#07070a 0 55%,#e11d48 100%)}
.sc-magazine i{background:linear-gradient(120deg,#fbfaf7 0 55%,#111 78%,#b1121f 100%)}
.sc-retro i{background:linear-gradient(120deg,#171310 0 50%,#c8763c 100%)}
.sc-fresh i{background:linear-gradient(120deg,#3b6cf6,#8b5cf6 60%,#22d3ee)}
.mode-row{display:flex;gap:8px}
.mode-chip{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface2);border-radius:10px;font-size:12.5px;color:var(--tx2);
  transition:.22s var(--ease)
}
.mode-chip b{font-size:14px;font-weight:400}
.mode-chip:hover{border-color:var(--accent);color:var(--tx)}
.mode-chip.on{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.skin-pop .hint{margin:12px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.6}
.skin-pop .hint a{display:inline-block;margin-top:5px;color:var(--accent);text-decoration:underline;white-space:nowrap}
.skin-admin{display:block;margin-top:9px;font-size:12px;color:var(--accent);text-align:center;
  padding:8px;border:1px dashed var(--line2);border-radius:9px;transition:.22s var(--ease)}
.skin-admin:hover{background:var(--accent-weak);border-style:solid}
@media (max-width:760px){
  .skin-fab{right:12px;bottom:82px;width:42px;height:42px}
  .skin-pop{right:12px;left:12px;width:auto;bottom:134px}
  .skin-row{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="rock"] body::before,
  html[data-skin="retro"] body::before,
  html[data-skin="retro"] body::after,
  html[data-skin="fresh"] body::before{animation:none}
  .lb-rv{opacity:1!important;transform:none!important;filter:none!important}
  html.lb-swap::before{display:none}
  html.lb-enter body{animation:none}
}