/* ============================================================
   拾光集 · JerryGao 高保真复刻
   设计令牌取自 https://www.jerrygao.cn/ 的全局变量与排版
   （不含友链，不搬内容，仅复刻版式 / 动画 / 标题结构）
   ============================================================ */

/* hidden 属性必须真正隐藏：任何 author 级 display 都会压过浏览器默认的
   [hidden]{display:none}（曾导致非实况照片误显示 LIVE 角标） */
[hidden]{display:none !important}

:root{
  /* 原站浅色主题令牌 */
  --bg-primary:#f8f5f0;
  --bg-secondary:#f0ebe3;
  --bg-tertiary:#e8e0d4;
  --surface:hsla(0,0%,100%,.7);
  --surface-hover:hsla(0,0%,100%,.9);
  --text-primary:#1a1614;
  --text-secondary:#4a4240;
  --text-muted:#675e58;
  --accent:#c9873a;
  --accent-hover:#b5722e;
  --accent-muted:rgba(201,135,58,.12);
  /* 品牌橙的「文字版」：底色/描边/图标继续用 --accent（品牌色不动），
     凡是以小字压在实底上的橙色文字一律用 --accent-text。
     原因：--accent #c9873a 压在白天实底上只有 2.29~2.92:1，远低于 AA 4.5:1。
     #8f5314 同色相、明度更低：卡片面 6.00:1 / 页面底 5.65:1 /
     压在 accent-muted 胶囊底上 5.36:1，全部达标且观感仍是同一支橙。
     黑夜主题 --accent #e09a4a 本身已 6.34~7.54:1，文字色沿用品牌橙即可。 */
  --accent-text:#8f5314;
  --accent-text-hover:#7d4710;
  --border:rgba(26,22,20,.12);
  --border-subtle:rgba(26,22,20,.06);
  --scrollbar-thumb:#cfc4b2;
  --scrollbar-thumb-hover:#b3a791;
  /* 警示红（必填星号 / 已点赞 / 危险操作）：明暗两套。
     同一个红无法同时压住米白底和深棕底（实测 #e0533d 只有 3.46:1 / 3.92:1），
     所以按主题分别取值，两边都过 AA 4.5:1 */
  --req:#c0392b;

  /* 阴影（原站：soft / md / lg / glow） */
  --shadow-soft:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  --shadow-glow:0 0 40px rgba(201,135,58,.22);

  /* 字体（霞鹜文楷屏幕版为主，DM Sans / Playfair 兜底拉丁与数字） */
  --font-body:"LXGW WenKai Screen","DM Sans",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"LXGW WenKai Screen","Playfair Display","Noto Serif SC","Songti SC",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* Hero 深色渐变（原站 hero-g1..g4） */
  --hero-g1:#1a0a00;
  --hero-g2:#2d1200;
  --hero-g3:#0d1a2e;
  --hero-g4:#1a0d2e;

  --radius:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
/* 横向钉死：通栏元素（100vw 出血）在有滚动条的桌面端会多出滚动条宽度、
   造成页面可左右拖动数 px——html 层直接裁掉横向溢出（clip 不产生滚动容器、
   不影响 sticky/fixed；旧内核回退 hidden）。手机端同样防橡皮筋横向晃动 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}

body{
  margin:0;
  background-color:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.75;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}

/* ---------- 键盘焦点可见（WCAG 2.4.7）----------
   全站默认没有焦点环，键盘用户 Tab 时完全看不到位置。
   只在键盘导航（:focus-visible）时显示，鼠标点击不出现，不影响现有视觉。
   已有自定义 :focus（输入框光环等）的元素保持原样，这里只兜底补齐。 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 鼠标/触摸点击不显示焦点环，避免"点一下多个圈" */
:focus:not(:focus-visible){outline:none}
/* 圆形/胶囊元素：焦点环贴合外形 */
.fchip:focus-visible,.tag-chip:focus-visible,.pg-btn:focus-visible,
.nt-like:focus-visible,.nt-mini-btn:focus-visible,.hero-btn:focus-visible,
.about-btn:focus-visible,.gd-sort select:focus-visible,select.fchap:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:999px;
}
/* 正文内的链接：焦点时给底色便于定位 */
.nt-body a:focus-visible,.md-body a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;background:var(--accent-muted);border-radius:3px}

.wrap{max-width:72rem;margin:0 auto;padding:0 24px}
main.wrap{padding-bottom:0}
/* 非首页页面：在固定顶栏下方留白 */
#app > *:first-child:not(.hero-section):not(.pm-layout):not(.admin-layout){margin-top:96px}

/* ---------- 渐变文字（原站 .text-gradient） ---------- */
.text-gradient{
  background:linear-gradient(135deg,#e09a4a,#c9873a 45%,#a3b18a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ============================================================
   顶栏（原站：fixed 透明，进入后吸顶变实；入场下滑动画）
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease,box-shadow .5s ease;
  border-bottom:1px solid transparent;
  opacity:0;transform:translateY(-80px);
  transition:opacity .6s ease,transform .6s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.site-header.show{opacity:1;transform:none}
.site-header.scrolled{
  background:rgba(248,245,240,.85);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--border);
  box-shadow:var(--shadow-soft);
}
.header-inner{
  max-width:72rem;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .3s ease;
}
.site-header.scrolled .header-inner{padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{
  width:32px;height:32px;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#e09a4a,#b5722e);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .3s;
}
.logo-icon img{width:100%;height:100%;object-fit:cover;display:block}
.logo:hover .logo-icon{box-shadow:var(--shadow-glow)}
.logo-name{
  font-family:var(--font-display);font-weight:700;font-size:19px;
  color:var(--text-primary);transition:color .2s;
}
.logo:hover .logo-name{color:var(--accent-text)}
.main-nav{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:2px;
}
.nav-item{
  position:relative;padding:8px 16px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--text-secondary);
  transition:color .2s,background .2s;
}
.nav-item:hover{color:var(--text-primary);background:var(--bg-secondary)}
.nav-item.active{color:var(--accent-text)}
.nav-item.active::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:var(--accent-muted);z-index:-1;
}
/* 导航内的搜索项：与导航项同款隐藏式(ghost)，加长+左分隔线与文字项区分 */
.main-nav .search-item{
  background:none;border:none;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 22px;margin-left:14px;position:relative;
  font-family:inherit;color:var(--text-secondary);
}
.main-nav .search-item:hover{color:var(--accent-text);background:var(--accent-muted)}
.main-nav .search-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:var(--border);
}
/* 章节文页：章节进度 + 目录入口 */
.nt-chap-bar{display:flex;justify-content:center;align-items:center;gap:16px;margin:30px 0 14px;font-size:13px;color:var(--text-secondary)}
.nt-chap-bar a{color:var(--accent-text);text-decoration:none}
.nt-chap-bar a:hover{text-decoration:underline}
/* 移动端专用搜索键：仅 ≤900px 显示（桌面用导航内的 search-item） */
.search-toggle.search-toggle-mobile{display:none}
@media(max-width:900px){.search-toggle.search-toggle-mobile{display:inline-flex;margin-left:2px}}
.nav-right{display:flex;align-items:center;gap:10px}

/* ============================================================
   Hero（原站：深色渐变 + 浅色大字 + 渐变名字 + 光晕）
   ============================================================ */
.hero-section{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(224,154,74,.35), transparent 60%),
    radial-gradient(800px 520px at 90% 10%, rgba(13,26,46,.9), transparent 55%),
    linear-gradient(135deg,var(--hero-g1),var(--hero-g2) 40%,var(--hero-g3) 75%,var(--hero-g4));
  color:#f0ebe3;
  /* 通栏铺满：突破 72rem 容器限制（与首页 hero 一致） */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:158px 24px 96px;
  text-align:center;
}
.hero-title{
  font-family:var(--font-display);
  font-size:56px;line-height:1.05;font-weight:900;letter-spacing:-1px;
  margin:0 0 18px;color:#f0ebe3;
}
.hero-title .text-gradient{
  background:linear-gradient(135deg,#f0aa58,#e09a4a 55%,#a3b18a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{
  font-size:17px;color:rgba(240,235,227,.75);
  letter-spacing:1px;margin:0;
}
/* 子页 hero 副标题：与页首金色小标签同色（用户指定），链接一并跟随 */
.hero-section.page-hero .hero-sub{color:var(--accent-text)}
/* 子页 hero 的 mono 小标签（画廊「影像与音乐」等），与 nt-kicker 同款 */
.hero-section .hero-kicker{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.35em;color:var(--accent-text);margin-bottom:14px}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
  opacity:.55;
}
.hero-orb.a{width:420px;height:420px;left:-80px;top:-140px;background:rgba(224,154,74,.5)}
.hero-orb.b{width:380px;height:380px;right:-100px;top:60px;background:rgba(120,90,220,.35)}

/* ============================================================
   首页区块（原站标题结构：技术博客 / 影像与音乐 / 画廊 / 关于我）
   ============================================================ */
.section{margin-top:56px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;
}
.section-title{
  font-family:var(--font-display);
  font-size:26px;font-weight:800;letter-spacing:.5px;margin:0;
}
.section-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--text-muted);transition:color .2s;
}
.section-link .arrow{transition:transform .2s}
.section-link:hover{color:var(--accent-text)}
.section-link:hover .arrow{transform:translateX(4px)}

/* ---------- 博客卡片网格（原站：竖版封面卡） ---------- */
.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.post-card{
  display:block;height:100%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:box-shadow .3s,transform .3s,border-color .3s;
}
.post-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px);border-color:rgba(201,135,58,.35)}
.post-cover{
  position:relative;height:190px;overflow:hidden;
  background:linear-gradient(135deg,#e8e0d4,#d9cfc0);
  display:flex;align-items:center;justify-content:center;
}
.post-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s ease;
}
.post-card:hover .post-cover img{transform:scale(1.05)}
.post-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg-primary),transparent 55%);
}
.post-cover-ph{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.post-cover-ph i{
  font-style:normal;font-size:50px;position:relative;z-index:1;
  text-shadow:0 8px 20px rgba(70,35,0,.28);
  transform:translateY(2px);transition:transform .7s ease;
}
/* 纸纹 + 柔光，让渐变封面带「账本纸」质感 */
.post-cover-ph::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 26px,rgba(255,255,255,.06) 26px 27px);
}
.post-cover-ph::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(140px 90px at 72% 18%,rgba(255,255,255,.28),transparent 62%);
}
.post-card:hover .post-cover-ph i{transform:translateY(0) scale(1.14) rotate(-5deg)}
.post-card-body{padding:18px 20px 20px}
.post-card-tag{
  display:inline-block;margin-bottom:9px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;
  color:var(--accent-text);background:var(--accent-muted);
  border-radius:6px;padding:2px 9px;
}
.post-card-title{
  font-size:17.5px;font-weight:600;line-height:1.45;margin:0 0 8px;
  transition:color .2s;
}
.post-card:hover .post-card-title{color:var(--accent-text-hover)}
.post-card-desc{
  color:var(--text-muted);font-size:13.5px;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--text-muted);
}
.post-meta-item{display:inline-flex;align-items:center;gap:5px}
.post-meta-nums{display:inline-flex;gap:12px;align-items:center}
.music-flag{color:var(--accent-text);font-weight:600}

/* ---------- 画廊双卡（原站：影像与音乐 → 画廊） ---------- */
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gal-card{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .3s,transform .3s;
}
.gal-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.gal-cover{
  height:210px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:22px;
  background-size:cover;background-position:center;
}
.gal-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,16,10,.62),transparent 60%)}
.gal-cover-content{position:relative;z-index:1;color:#f6f1e8}
.gal-tag{
  display:inline-block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;
  color:#f0aa58;
  white-space:nowrap;
}
.gal-title{
  font-family:var(--font-display);font-size:22px;font-weight:800;margin:0 0 4px;
}
.gal-sub{font-size:13.5px;color:rgba(246,241,232,.82);margin:0}
.gal-arrow{
  position:absolute;right:20px;bottom:20px;z-index:2;
  font-size:22px;color:rgba(246,241,232,.9);
  transition:transform .25s,color .25s;
}
.gal-card:hover .gal-arrow{transform:translateX(6px);color:#f0aa58}

/* ---------- 首页画廊区块（复刻 jerrygao.cn 首页：影像/音乐大卡 + 最近上传小图排） ---------- */
.home-gal-head-left .home-gal-kicker{
  margin:0 0 6px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.35em;color:var(--accent-text);
}
.home-gal-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.home-gal-card{
  position:relative;display:block;height:300px;border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-soft);
  isolation:isolate;
}
.home-gal-card .home-gal-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.home-gal-card:hover .home-gal-img{transform:scale(1.06)}
.home-gal-card .home-gal-shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(22,14,8,.72) 0%,rgba(22,14,8,.18) 45%,rgba(22,14,8,.05) 70%,transparent);
}
.home-gal-card .home-gal-shade.ph-img{background:linear-gradient(135deg,#141f3a,#2d4a7a)}
.home-gal-card .home-gal-shade.ph-bgm{background:linear-gradient(135deg,#3a1410,#7a2a22)}
.home-gal-card .home-gal-info{position:absolute;left:22px;right:70px;bottom:20px;z-index:2;color:#f6f1e8}
.home-gal-card .home-gal-info .gal-tag{
  margin-bottom:8px;color:#ffd9a3;
  background:rgba(22,14,8,.55);padding:4px 10px;border-radius:7px;
}
.home-gal-card .home-gal-title{
  font-family:var(--font-display);font-size:26px;font-weight:800;margin:0 0 5px;
  letter-spacing:.5px;
}
.home-gal-card .home-gal-sub{margin:0;font-size:13.5px;color:rgba(246,241,232,.85)}
.home-gal-arrow{
  position:absolute;right:18px;top:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(250,247,240,.92);color:#1c1208;font-size:17px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .25s,background .25s;
}
.home-gal-card:hover .home-gal-arrow{transform:translateX(4px);background:#fff}
.home-gal-recent{
  margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.home-gal-thumb{
  display:block;height:118px;border-radius:12px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
}
.home-gal-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.home-gal-thumb:hover img{transform:scale(1.07)}

/* ---------- 关于我（原站标题：关于我；无友链） ---------- */
.about-card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  padding:30px 34px;
}
.about-title{
  font-family:var(--font-display);font-size:22px;font-weight:800;margin:0 0 12px;
}
.about-text{font-size:15px;color:var(--text-secondary);margin:0 0 18px;max-width:56rem}
.about-sub{color:var(--text-muted);font-size:13.5px;margin-top:14px}
.about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.about-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:999px;font-size:14px;font-weight:500;
  background:var(--accent);color:var(--on-accent);
  box-shadow:var(--shadow-soft);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.about-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-glow)}
.about-btn.ghost-btn{
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border);
  box-shadow:none;
}
.about-btn.ghost-btn:hover{color:var(--accent-text-hover);border-color:rgba(201,135,58,.4)}

/* ---------- 随笔列表（极简行列表） ---------- */
.notes-list{display:flex;flex-direction:column;gap:2px}
.note-item{
  display:flex;align-items:center;gap:14px;padding:18px 8px;
  border-bottom:1px solid var(--border-subtle);
  transition:background .2s,padding-left .2s;
}
.note-item:hover{background:var(--accent-muted);padding-left:16px}
.note-date{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.note-dot{color:var(--text-muted);opacity:.5}
.note-title{flex:1;font-size:16px;font-weight:500;color:var(--text-primary);transition:color .2s}
.note-item:hover .note-title{color:var(--accent-text-hover)}
.note-arrow{color:var(--text-muted);font-size:18px;transition:transform .2s,color .2s}
.note-item:hover .note-arrow{transform:translateX(5px);color:var(--accent-text)}

/* ---------- 画廊子页面网格 ---------- */
.gallery-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gallery-page-grid .gal-card .gal-cover{height:240px}
/* 音乐卡封面（竖构图动漫图）：偏上显示，露出人物头部 */
.gal-cover.cover-top{background-position:center 20%}
.home-gal-card .home-gal-img.cover-top{object-position:50% 20%}

/* 删除按钮（作者/管理员可见） */
.card-del{
  position:absolute;top:10px;right:10px;z-index:3;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);background:rgba(255,255,255,.9);
  color:var(--text-muted);font-size:12px;cursor:pointer;
  opacity:0;transition:opacity .2s,color .2s,transform .2s;
  line-height:1;
}
.post-card:hover .card-del{opacity:1}
.card-del:hover{color:#c0392b;transform:scale(1.1)}

/* ============================================================
   滚动渐显（原站 scroll-reveal：opacity + translateY(30px)）
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
/* 渐显结束后由 JS 释放 will-change 并清掉内联过渡（见 revealObs），
   避免常驻合成层占显存、也把 hover 过渡还给卡片（清掉内联 transition-delay） */

/* ============================================================
   页脚（原站：border-top + bg-secondary + 三栏 + 版权行）
   ============================================================ */
.site-footer{
  margin-top:0;
  border-top:none;
  background:var(--bg-secondary);
}
/* 页脚波浪分隔（与首页 hero 底部波浪同一语言） */
.footer-wave{line-height:0;margin-top:72px}
.footer-wave svg{width:100%;height:54px;display:block}
.footer-wave path{fill:var(--bg-secondary);transition:fill .45s ease}
.footer-wave .wave-soft{fill:var(--bg-primary);opacity:.18}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;
  padding:56px 24px 40px;
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-brand-name{
  font-family:var(--font-display);font-weight:700;font-size:18px;
}
.footer-desc{font-size:13.5px;color:var(--text-muted);margin:0;max-width:22rem}
.footer-col-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  margin-bottom:12px;letter-spacing:1px;
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13.5px;color:var(--text-muted);transition:color .2s}
.footer-links a:hover{color:var(--accent-text)}
.footer-copy{
  border-top:1px solid var(--border-subtle);
  text-align:center;font-size:12.5px;color:var(--text-muted);
  padding:20px 24px 26px;letter-spacing:1px;
}
.footer-admin-link{color:var(--text-muted);text-decoration:none;opacity:.55;transition:opacity .2s,color .2s}
.footer-admin-link:hover{opacity:1;color:var(--accent-text)}

/* ============================================================
   通用状态
   ============================================================ */
.hidden{display:none !important}
.loading,.empty{text-align:center;color:var(--text-muted);padding:70px 0;font-size:15px}
.empty.small{padding:18px 0;font-size:13.5px}
.loading::before{
  content:'';display:block;width:30px;height:30px;margin:0 auto 16px;
  border:3px solid var(--bg-tertiary);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 入场动画 */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .55s cubic-bezier(.2,.7,.3,1) both}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;top:76px;transform:translateX(-50%);
  background:rgba(26,22,20,.92);color:#fff;
  padding:10px 22px;border-radius:999px;
  font-size:13.5px;z-index:300;opacity:0;transition:opacity .25s;
  pointer-events:none;box-shadow:var(--shadow-lg);letter-spacing:1px;
  white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;
}
#toast.show{opacity:1}

/* ============================================================
   头像
   ============================================================ */
.avatar{
  display:inline-flex;width:30px;height:30px;border-radius:50%;
  align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;font-family:inherit;
}
.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.avatar-img.big{width:72px;height:72px}
.avatar-img.sm{width:22px;height:22px;font-size:12px}
.avatar-img.xs{width:20px;height:20px;font-size:11px}
.post-meta .avatar,.post-meta .avatar-img{width:24px;height:24px;font-size:13px}
.author-name{color:var(--accent-text-hover);font-weight:600}
.meta-dot{opacity:.5}
.time{color:var(--text-muted);font-size:11.5px;margin-left:auto;letter-spacing:1px}

/* ============================================================
   文章详情（沿用原站卡片语言）
   ============================================================ */
.post{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:44px 48px;
}
.post h1{
  font-family:var(--font-display);
  font-size:32px;line-height:1.3;margin:0 0 14px;font-weight:800;
}
.post-meta{
  color:var(--text-muted);font-size:13px;letter-spacing:1px;
  display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.post-content{margin-top:22px}
.post-content p{margin-bottom:15px;font-size:16px;word-break:break-word;color:var(--text-secondary)}

/* ---------- BGM 播放器 ---------- */
.player{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--accent-muted);
  border:1px solid rgba(201,135,58,.3);
}
.play-btn{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#e09a4a,#b5722e);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
  transition:transform .2s,box-shadow .2s,filter .2s;flex-shrink:0;
}
.play-btn:hover{transform:scale(1.07);filter:brightness(1.06);box-shadow:var(--shadow-glow)}
.play-btn:active{transform:scale(.95)}
.player-info{flex:1;min-width:0}
.player-title{
  font-size:13.5px;font-weight:600;color:var(--accent-text-hover);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.progress{
  height:5px;border-radius:99px;background:rgba(26,22,20,.14);
  margin-top:8px;cursor:pointer;position:relative;overflow:hidden;
}
.progress-fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#e09a4a,#b5722e);
  transition:width .15s linear;position:relative;
}
.progress-fill::after{
  content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(201,135,58,.4);
}
.player-time{font-size:11px;color:var(--text-muted);margin-top:6px;letter-spacing:1px}

/* ---------- 图集 ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-top:22px;
}
.gallery-img{
  width:100%;height:180px;object-fit:cover;border-radius:var(--radius-sm);
  cursor:zoom-in;border:1px solid var(--border);
  transition:transform .3s ease,box-shadow .3s,border-color .3s;
}
.gallery-img:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow);border-color:rgba(201,135,58,.35)}

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  background:rgba(20,16,12,.85);backdrop-filter:blur(6px);cursor:zoom-out;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:92vw;max-height:78vh;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.5)}
.lightbox .lb-cap{
  max-width:min(760px,90vw);padding:0 6px;text-align:center;
  font-size:13px;line-height:1.8;color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
@media (max-width:600px){
  .lightbox img{max-height:66vh}
  .lightbox .lb-cap{font-size:12.5px;max-width:88vw}
}

/* ============================================================
   文章操作栏：点赞 / 分享 / 删除
   ============================================================ */
.post-actions{display:flex;gap:12px;margin-top:26px;padding-top:18px;border-top:1px dashed var(--border)}
.action-btn{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);font-size:13.5px;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,transform .2s,box-shadow .25s;
}
.action-btn:hover{color:var(--accent-text-hover);border-color:rgba(201,135,58,.4);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.action-btn:disabled{opacity:.7;cursor:default}
.action-btn.danger:hover{color:#c0392b;border-color:#eab3a8}
.like-btn .heart{transition:transform .25s}
.like-btn.liked{
  color:#fff;border-color:transparent;
  background:linear-gradient(90deg,#e09a4a,#b5722e);
  box-shadow:var(--shadow-glow);
}
.like-btn.liked .heart{
  fill:currentColor;stroke:currentColor;
  animation:heartPop .45s cubic-bezier(.17,.89,.32,1.49);
}
@keyframes heartPop{
  0%{transform:scale(.55)}
  55%{transform:scale(1.4)}
  100%{transform:scale(1)}
}
.burst{
  position:absolute;top:6px;pointer-events:none;z-index:2;
  animation:burstFloat .95s ease-out forwards;
}
@keyframes burstFloat{
  0%{opacity:1;transform:translateY(0) scale(.6)}
  70%{opacity:.9}
  100%{opacity:0;transform:translateY(-52px) scale(1.25) rotate(14deg)}
}

/* ============================================================
   评论区
   ============================================================ */
.comments-section{margin-top:32px}
.comments-section h3{
  display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600;
  color:var(--text-primary);margin:0 0 18px;
}
.comments-section h3::after{content:'';flex:1;height:1px;background:var(--border)}
.comment{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 16px;margin-bottom:12px;
  transition:border-color .25s,box-shadow .25s;
}
.comment:hover{border-color:rgba(201,135,58,.35);box-shadow:var(--shadow-soft)}
.comment p{font-size:14px;margin:6px 0 8px;word-break:break-word;color:var(--text-secondary)}
.comment-head{display:flex;align-items:center;gap:10px}
.comment-head b{font-size:14px;color:var(--text-primary)}
.reply-at{color:var(--accent-text-hover);font-weight:600}
.reply-btn{
  border:none;background:none;cursor:pointer;color:var(--text-muted);
  font-size:12px;padding:0;transition:color .2s;
}
.reply-btn:hover{color:var(--accent-text-hover)}
.replies{margin-top:12px;padding-left:16px;border-left:2px solid rgba(201,135,58,.35)}
.replies .comment{background:transparent;border:none;padding:9px 0 0;margin-bottom:6px}

/* ============================================================
   表单 & 按钮
   ============================================================ */
.cform{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-top:20px;display:flex;flex-direction:column;gap:12px;
}
.me-row{display:flex;align-items:center;gap:10px;font-size:14px}
.input{
  width:100%;padding:12px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);color:var(--text-primary);
  font-size:14.5px;font-family:inherit;outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.input::placeholder{color:var(--text-muted)}
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(201,135,58,.15);
}
textarea.input{resize:vertical}
.nick-input{max-width:230px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 26px;border:none;border-radius:999px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--on-accent);letter-spacing:1px;
  background:var(--accent);box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s,background .25s;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-glow)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn.ghost{
  background:transparent;border:1px solid var(--border);
  color:var(--text-secondary);box-shadow:none;
}
.btn.ghost:hover{border-color:rgba(201,135,58,.4);color:var(--accent-text-hover)}
.danger-btn{background:linear-gradient(90deg,#c0392b,#e07a5f)}
.danger-btn:hover{background:linear-gradient(90deg,#a93226,#c0392b)}
.reply-banner{
  background:var(--accent-muted);border:1px solid rgba(201,135,58,.3);
  color:var(--accent-text-hover);border-radius:var(--radius-sm);
  padding:8px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;
}
.reply-banner button{border:none;background:none;color:inherit;cursor:pointer;font-size:12px}

/* ============================================================
   页头（留言板 / 写博客 / 个人中心）
   ============================================================ */
.page-head{margin-bottom:24px}
.page-head h1{
  font-family:var(--font-display);
  font-size:30px;font-weight:800;letter-spacing:1px;margin:0 0 6px;
}
.page-head .sub{color:var(--text-muted);font-size:14px}
.head-rule{height:1px;background:var(--border);margin-top:16px}

/* ============================================================
   留言板
   ============================================================ */
.msg-list{display:flex;flex-direction:column;gap:14px}
.msg{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 18px;transition:border-color .25s,box-shadow .25s;
}
.msg:hover{border-color:rgba(201,135,58,.35);box-shadow:var(--shadow-soft)}
.msg p{font-size:14.5px;word-break:break-word;margin:6px 0 0;color:var(--text-secondary)}

/* ============================================================
   写博客
   ============================================================ */
.new-post form{display:flex;flex-direction:column;gap:14px}
.form-label{font-size:13.5px;color:var(--text-muted);margin-top:6px}
.file-label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 18px;border-radius:999px;border:1px dashed rgba(201,135,58,.45);
  color:var(--accent-text-hover);font-size:13.5px;background:var(--accent-muted);
  transition:background .25s,border-color .25s;width:max-content;
}
.file-label:hover{background:rgba(224,154,74,.18)}
.previews{display:flex;flex-wrap:wrap;gap:12px}
.preview{position:relative;width:110px;height:110px}
.preview img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border)}
.preview .rm{
  position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);
  cursor:pointer;font-size:11px;line-height:1;box-shadow:var(--shadow-soft);
}
.bgm-info{
  border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;
  background:var(--accent-muted);border:1px solid rgba(201,135,58,.3);color:var(--accent-text-hover);
}
.bgm-info button{border:none;background:none;color:inherit;cursor:pointer;float:right}

/* ============================================================
   登录 / 注册
   ============================================================ */
.auth-page{display:flex;justify-content:center;padding:40px 0}
.auth-card{
  width:100%;max-width:400px;padding:36px 34px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.auth-tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--bg-secondary);border-radius:999px;padding:5px}
.auth-tab{
  flex:1;padding:9px 0;border:none;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;
  transition:all .3s ease;
}
.auth-tab.active{
  background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-soft);
}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-btn{margin-top:6px}

/* ============================================================
   个人中心
   ============================================================ */
.me-page{max-width:520px;margin:0 auto;padding-top:40px}
.me-card{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:30px;
}
.me-avatar-row{display:flex;align-items:center;gap:20px;margin-bottom:22px}
#avatarPreview .avatar,#avatarPreview .avatar-img{width:72px;height:72px;font-size:28px}
.me-username{font-size:18px;font-weight:700;margin-bottom:2px}
.me-avatar-row .file-label{margin-top:8px}
.me-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.me-field label{font-size:13px;color:var(--text-muted)}

/* 顶栏用户区 */
.nav-right{position:relative}
.login-link{color:var(--accent-text) !important;font-weight:600}
.pm-link{position:relative;white-space:nowrap;color:var(--text-secondary);font-size:14px;transition:color .2s}
.pm-link:hover{color:var(--text-primary)}
.badge{
  display:inline-flex;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-size:11px;align-items:center;justify-content:center;
  font-weight:700;vertical-align:2px;margin-left:2px;
}
.user-menu{position:relative}
.user-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:5px 8px;
  border-radius:999px;border:1px solid transparent;transition:border-color .2s,background .2s;
}
.user-chip:hover{border-color:var(--border);background:var(--surface)}
.chip-nick{font-size:13px;color:var(--text-secondary);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-arrow{font-size:10px;color:var(--text-muted)}
.menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:130px;
  background:var(--surface-hover);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px;z-index:60;box-shadow:var(--shadow-lg);
  animation:fadeIn .2s ease;
}
.menu button,.menu a{
  display:block;width:100%;text-align:left;padding:9px 14px;border:none;
  background:none;color:var(--text-secondary);font-size:13.5px;cursor:pointer;
  border-radius:8px;transition:background .2s,color .2s;
}
.menu button:hover,.menu a:hover{background:var(--accent-muted);color:var(--accent-text-hover)}
.login-notice{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--accent-muted);border:1px solid rgba(201,135,58,.3);
  border-radius:var(--radius-sm);padding:14px 18px;color:var(--accent-text-hover);
}
.login-notice .btn{padding:8px 18px;font-size:13px}

/* ============================================================
   私信（微博风格双栏）
   ============================================================ */
.pm-layout{
  display:flex;height:min(680px,calc(100vh - 190px));margin-top:96px;
  border-radius:var(--radius);overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.pm-side{
  width:300px;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  background:var(--bg-secondary);
}
.pm-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.pm-side-title{
  font-family:var(--font-display);
  font-size:17px;font-weight:800;letter-spacing:1px;
}
.pm-new{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--accent-text-hover);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.pm-new:hover{border-color:rgba(201,135,58,.4);box-shadow:var(--shadow-soft)}
.conv-list{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.conv{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border-subtle);
  transition:background .2s;position:relative;
}
.conv:hover{background:var(--surface)}
.conv.active{background:var(--accent-muted)}
.conv-ava{position:relative;flex-shrink:0}
.conv-ava .avatar,.conv-ava .avatar-img{width:40px;height:40px;font-size:17px}
.dot-badge{
  position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;
  background:#c0392b;color:#fff;border-radius:9px;
  font-size:10px;line-height:17px;text-align:center;padding:0 4px;
  border:2px solid var(--bg-secondary);font-weight:700;
}
.conv-body{flex:1;min-width:0}
.conv-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.conv-top b{font-size:14.5px}
.conv-top .time{font-size:11px;margin-left:0}
.conv-last{color:var(--text-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.me-tag{color:var(--accent-text-hover)}

.pm-chat{flex:1;display:flex;flex-direction:column;min-width:0}
.pm-placeholder{align-items:center;justify-content:center;background:var(--bg-secondary)}
.placeholder-inner{text-align:center;color:var(--text-muted);font-size:14px;line-height:2}
.placeholder-icon{font-size:44px;margin-bottom:8px;opacity:.6}
.chat-head{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-head .back-link{display:none}
.chat-peer{display:flex;flex-direction:column;line-height:1.4}
.chat-peer b{font-size:15px}
.chat-sub{font-size:11.5px;color:var(--text-muted)}
.back-link{color:var(--text-secondary);text-decoration:none;font-size:18px;margin-right:2px;white-space:nowrap}
.back-link:hover{color:var(--accent-text-hover)}
.bubble-list{
  flex:1;overflow-y:auto;padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.day-divider{display:flex;justify-content:center;margin:2px 0}
.day-divider span{
  font-size:11px;color:var(--text-muted);background:var(--bg-secondary);
  padding:3px 12px;border-radius:999px;letter-spacing:1px;
}
.bubble-row{display:flex;align-items:flex-end;gap:8px;justify-content:flex-start}
.bubble-row.mine{justify-content:flex-end}
.bubble-row .avatar,.bubble-row .avatar-img{width:30px;height:30px;font-size:13px}
.bubble-wrap{display:flex;flex-direction:column;max-width:70%}
.bubble-row.mine .bubble-wrap{align-items:flex-end}
.bubble{
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:16px 16px 16px 4px;padding:10px 14px;
  font-size:14.5px;word-break:break-word;line-height:1.6;
}
.bubble-row.mine .bubble{
  background:linear-gradient(135deg,#e09a4a,#b5722e);
  border:none;color:#fff;border-radius:16px 16px 4px 16px;
  box-shadow:var(--shadow-soft);
}
.bubble-time{font-size:10px;color:var(--text-muted);margin-top:3px;letter-spacing:1px}
.pm-form{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border);margin:0}
.pm-form .input{flex:1}
.pm-send{flex-shrink:0}

/* ============================================================
   弹窗（确认 / 分享 / 选人）
   ============================================================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(26,22,20,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.modal{
  border-radius:var(--radius);max-width:380px;width:100%;text-align:center;
  background:var(--surface-hover);
  border:1px solid var(--border);
  padding:28px 30px;
  box-shadow:var(--shadow-lg);
}
.modal-title{
  font-family:var(--font-display);
  font-size:19px;font-weight:800;margin:0 0 6px;
}
.modal-text{font-size:14.5px;line-height:1.7;margin-bottom:6px;color:var(--text-secondary)}
.modal-tip{font-size:12.5px;color:var(--text-muted);margin-bottom:16px}
.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}
.modal-actions .btn{white-space:nowrap;flex:0 0 auto}
.share-link{
  font-size:12.5px;color:var(--text-secondary);word-break:break-all;
  background:var(--bg-secondary);border:1px dashed var(--border);
  border-radius:10px;padding:10px 12px;margin-top:14px;
}
.qr-box{
  display:flex;justify-content:center;padding:14px;
  background:var(--bg-secondary);border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.qr-img{width:200px;height:200px;image-rendering:pixelated;border-radius:8px}
.loading.small,.empty.small{font-size:13px;padding:12px 0}
/* 分享弹窗：微信引导 + 朋友圈海报 */
.share-modal .wechat-tip{color:var(--text-secondary)}
.share-modal .wechat-tip b{color:var(--accent-text)}
.poster-img{
  display:block;width:auto;max-width:320px;max-height:56vh;margin:4px auto 0;
  border-radius:12px;box-shadow:var(--shadow-md);
}
@media (max-width:520px){ .poster-img{max-width:78vw;max-height:52vh} }
.picker-modal{text-align:left;max-width:420px}
.picker-modal .modal-title{text-align:center;margin-bottom:14px}
.picker-modal .input{margin-bottom:12px}
.picker-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.picker-user{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .15s}
.picker-user:hover{background:var(--accent-muted)}
.picker-user .time{margin-left:auto}
.picker-modal .modal-actions{margin-top:16px;justify-content:center}

/* ============================================================
   滚动条（跟随白天/黑夜主题变量；手机端交还系统 overlay 滚动条）
   ============================================================ */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
/* 触屏设备（手机/平板）：隐藏自定义滚动条，用系统触摸滚动自带的悬浮细条 */
@media (pointer:coarse){
  ::-webkit-scrollbar{width:0;height:0;display:none}
  html{scrollbar-width:none}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:980px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .post-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr}
  .gallery-page-grid{grid-template-columns:1fr}
  .gallery-page-grid .gal-card .gal-cover{height:200px}
  .home-gal-cards{grid-template-columns:1fr;gap:16px}
  .home-gal-card{height:210px}
  .home-gal-card .home-gal-title{font-size:22px}
  .home-gal-recent{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
  .home-gal-thumb{height:96px}
  .pm-layout{height:calc(100vh - 150px);margin-top:80px}
  .pm-side{width:100%;border-right:none}
  .pm-chat{display:none}
  .pm-layout.chat-open .pm-side{display:none}
  .pm-layout.chat-open .pm-chat{display:flex}
  .chat-head .back-link{display:inline}
}
@media (max-width:640px){
  .hero-section{padding:122px 20px 70px}
  .hero-title{font-size:38px}
  .post{padding:26px 22px}
  .post h1{font-size:25px}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding:40px 24px 28px}
  .main-nav{position:static;transform:none}
  .header-inner{flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 24px}
  .nav-right{position:static}
  .chip-nick{display:none}
  .login-notice{flex-direction:column;align-items:flex-start}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .gallery-img{height:120px}
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- 关于本站页（复刻 jerrygao.cn/about） ---------- */
.ab-hero{padding:120px 24px 36px;text-align:center}
.ab-title{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--text-primary);letter-spacing:.5px}
.ab-sub{margin-top:12px;color:var(--text-muted);font-size:15px}
.ab-body{max-width:56rem;margin:0 auto;padding:8px 24px 90px}
.ab-sec{margin-bottom:40px}
.ab-sec-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:16px}
.sec-ico{width:17px;height:17px;color:var(--accent-text);flex-shrink:0}
.ab-sec-sub{font-size:13px;color:var(--text-muted);margin:-6px 0 16px}
.ab-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:26px 28px;box-shadow:var(--shadow-soft);
  transition:box-shadow .3s,transform .3s;
}
.ab-card:hover{box-shadow:var(--shadow-md)}
.ab-prose p{font-size:14.5px;line-height:1.9;color:var(--text-secondary);margin-bottom:14px}
.ab-prose p:last-child{margin-bottom:0}
.ab-prose b{color:var(--text-primary)}
.ab-link{color:var(--accent-text);text-decoration:none;border-bottom:1px dashed var(--accent);transition:color .2s}
.ab-link:hover{color:var(--accent-text-hover)}
.tech-pills{display:flex;flex-wrap:wrap;gap:10px}
.tech-pill{
  padding:5px 14px;font-size:12px;border-radius:999px;
  border:1px solid var(--accent);color:var(--accent-text);background:var(--accent-muted);
  font-family:var(--font-mono);transition:background .25s,color .25s,transform .2s;
}
.tech-pill:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:22px 12px;text-align:center;box-shadow:var(--shadow-soft);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--accent)}
.stat-num{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stat-label{margin-top:6px;font-size:11.5px;color:var(--text-muted);letter-spacing:1px}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:18px}
.trend-chart{display:flex;align-items:flex-end;gap:3px;height:170px}
.trend-col{flex:1;height:100%;display:flex;align-items:flex-end}
.trend-bar{
  width:100%;min-height:3px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--accent),var(--accent-hover));
  opacity:.85;transition:height .8s cubic-bezier(.22,.9,.36,1);
}
.trend-col:hover .trend-bar{opacity:1;box-shadow:var(--shadow-glow)}
.trend-axis{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--text-muted)}
.hbars{display:flex;flex-direction:column;gap:16px}
.hbar-row{display:flex;align-items:center;gap:12px}
.hbar-label{width:60px;font-size:12.5px;color:var(--text-secondary);flex-shrink:0}
.hbar-track{flex:1;height:9px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden}
.hbar-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--bg-tertiary),var(--accent));
  transition:width .9s cubic-bezier(.22,.9,.36,1);
}
.hbar-fill.accent{background:linear-gradient(90deg,var(--accent-hover),var(--accent))}
.hbar-val{width:52px;text-align:right;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}
@media (max-width:900px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .ab-hero{padding-top:100px}
  .ab-title{font-size:32px}
  .ab-body{padding:8px 18px 70px}
  .ab-card{padding:20px 18px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .trend-chart{height:130px;gap:2px}
}

/* ---------- 留言板（复刻 jerrygao.cn/guestbook） ---------- */
.gb-hero{padding:110px 24px 40px;text-align:center}
.gb-title{font-family:var(--font-display);font-size:52px;font-weight:900;color:var(--text-primary);letter-spacing:-1px;line-height:1.15}
.gb-sub{margin-top:14px;color:var(--text-muted);font-size:15px}
.gb-sub-n{color:var(--accent-text);font-weight:700;font-family:var(--font-mono)}
.gb-body{max-width:56rem;margin:0 auto;padding:0 24px 90px}
/* 写留言 / 取消 切换按钮 */
.gb-toggle-wrap{display:flex;justify-content:center;margin:6px 0 34px}
.gb-toggle{
  display:inline-flex;align-items:center;gap:7px;padding:11px 26px;
  border:none;border-radius:12px;background:var(--accent);color:var(--on-accent);
  font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;
  box-shadow:var(--shadow-md);transition:background .2s,transform .15s,box-shadow .25s,color .2s;
}
.gb-toggle:hover{background:var(--accent-hover);transform:translateY(-1px)}
.gb-toggle.is-open{background:var(--accent-muted);color:var(--accent-text);box-shadow:none}
.gb-toggle.is-open:hover{background:rgba(201,135,58,.18)}
/* 展开的留言表单卡 */
.gb-panel{padding:26px 28px;margin-bottom:40px}
.gb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gb-field{margin-bottom:18px}
.gb-field label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-primary)}
.gb-field label i{color:var(--req);font-style:normal}
.gb-input{
  width:100%;height:42px;padding:0 14px;font-size:14px;font-family:var(--font-body);
  border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-primary);outline:none;transition:border-color .2s,box-shadow .2s;
}
.gb-input::placeholder{color:var(--text-muted)}
.gb-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.gb-textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.7}
.gb-textarea.sm{min-height:64px}
.gb-char-row{display:flex;justify-content:flex-end;margin-top:6px}
.gb-char-row span{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
/* 手写算术验证码 */
.gb-captcha-row{display:flex;align-items:center;gap:14px}
.gb-captcha-input{max-width:220px}
.gb-captcha{border-radius:8px;cursor:pointer;user-select:none;box-shadow:var(--shadow-soft)}
.gb-form-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:12px;flex-wrap:wrap}
.gb-note{font-size:12.5px;color:var(--text-muted)}
.gb-submit{
  display:inline-flex;align-items:center;gap:6px;padding:10px 22px;
  border:none;border-radius:12px;background:var(--accent);color:var(--on-accent);
  font-size:13.5px;font-weight:600;font-family:var(--font-body);cursor:pointer;
  box-shadow:var(--shadow-soft);transition:background .2s,transform .15s,box-shadow .25s;
}
.gb-submit:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.gb-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
.gb-submit.sm{padding:7px 16px;font-size:12.5px;border-radius:10px}
.gb-list{display:flex;flex-direction:column;gap:16px}
.gb-msg{
  display:flex;gap:14px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s,border-color .3s;
}
.gb-msg:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(201,135,58,.35)}
.gb-msg-body{flex:1;min-width:0}
.gb-msg-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gb-msg-name{font-size:14.5px;color:var(--text-primary);text-decoration:none}
a.gb-msg-name.is-link{color:var(--accent-text)}
a.gb-msg-name.is-link:hover{text-decoration:underline}
.gb-msg-meta{font-size:11.5px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.3px}
.gb-msg-text{margin-top:8px;font-size:14.5px;line-height:1.8;color:var(--text-secondary);word-break:break-word;white-space:pre-wrap}
.gb-reply-btn{
  margin-top:10px;padding:3px 10px;border:none;background:transparent;
  color:var(--text-muted);font-size:12px;font-family:var(--font-body);cursor:pointer;
  border-radius:6px;transition:color .2s,background .2s;
}
.gb-reply-btn:hover{color:var(--accent-text);background:var(--accent-muted)}
.gb-replies{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.gb-msg.is-reply{padding:14px 16px;box-shadow:none;background:hsla(36,45%,94%,.55);border:1px solid var(--border-subtle)}
.gb-msg.is-reply:hover{transform:none;box-shadow:var(--shadow-soft)}
.gb-inline-form{margin-top:12px}
.gb-inline-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.gb-cancel{
  padding:7px 16px;border:1px solid var(--border);border-radius:10px;background:transparent;
  color:var(--text-muted);font-size:12.5px;font-family:var(--font-body);cursor:pointer;transition:color .2s,border-color .2s;
}
.gb-cancel:hover{color:var(--accent-text);border-color:var(--accent)}
@media (max-width:640px){
  .gb-hero{padding:90px 20px 30px}
  .gb-title{font-size:36px}
  .gb-body{padding:0 18px 70px}
  .gb-msg{padding:16px;gap:10px}
  .gb-grid2{grid-template-columns:1fr;gap:0}
  .gb-panel{padding:20px 18px}
}

/* ---------- 画廊专区（复刻 jerrygao.cn/gallery/drone 与 /drums） ---------- */
.gd-page{max-width:72rem;margin:0 auto;padding:0 24px 90px}
/* 面包屑 */
.gd-crumb{padding:26px 0 18px;font-size:12.5px;color:var(--text-muted)}
.gd-crumb a{color:var(--text-muted);text-decoration:underline dotted;text-underline-offset:3px}
.gd-crumb a:hover{color:var(--accent-text)}
.gd-crumb i{margin:0 8px;font-style:normal;opacity:.6}
.gd-crumb-cur{color:var(--text-secondary)}
/* 头部：暖白渐变 + 细网格 */
.gd-hero{
  position:relative;padding:34px 28px 30px;border-radius:18px;margin-bottom:26px;
  background:
    linear-gradient(rgba(26,22,20,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,22,20,.035) 1px,transparent 1px),
    linear-gradient(135deg,rgba(201,135,58,.08),rgba(201,135,58,.015) 55%,transparent);
  background-size:26px 26px,26px 26px,100% 100%;
  border:1px solid var(--border-subtle);overflow:hidden;
}
.gd-kicker{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.35em;color:var(--accent-text);margin-bottom:12px}
.gd-title-row{display:flex;align-items:center;gap:14px}
.gd-icon-badge{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--accent-muted);color:var(--accent-text);box-shadow:var(--shadow-soft);flex:none;
}
.gd-icon-badge svg{width:22px;height:22px}
.gd-title{font-family:var(--font-display);font-size:40px;font-weight:900;color:var(--text-primary);letter-spacing:-.5px;line-height:1.1}
.gd-sub{margin-top:12px;font-size:14.5px;color:var(--text-secondary)}
.gd-n{color:var(--accent-text);font-weight:700;font-family:var(--font-mono)}
.gd-meta{margin-top:10px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.gd-meta i{margin:0 8px;font-style:normal;opacity:.6}
/* 工具条：排序 + 分页 */
.gd-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:22px}
.gd-sort select{
  height:34px;padding:0 12px;font-size:12.5px;font-family:var(--font-body);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:9px;background:var(--surface);outline:none;cursor:pointer;
}
.gd-sort select:focus{border-color:var(--accent)}
.gd-pager{display:flex;gap:6px}
.gd-page-btn{
  min-width:30px;height:30px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  color:var(--text-muted);font-size:12.5px;font-family:var(--font-mono);cursor:pointer;transition:color .2s,border-color .2s;
}
.gd-page-btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* 瀑布流 */
.gd-content{min-height:320px}
.gd-masonry{columns:2;column-gap:20px}
.gd-item{
  break-inside:avoid;margin:0 0 20px;border-radius:14px;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--border);box-shadow:var(--shadow-soft);background:var(--surface);
  transition:transform .3s,box-shadow .3s;
}
.gd-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.gd-item img{display:block;width:100%;height:auto}
/* 影像网格 */
.gd-media{position:relative;-webkit-touch-callout:none;user-select:none}
/* 实况照片：静态图打底，video 层只在悬停 / 长按时淡入。
   平时它就是一张带 LIVE 角标的照片，不是视频播放器 */
.gd-item video.gd-live{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease;pointer-events:none;
}
.gd-item.live-on video.gd-live{opacity:1}
.gd-live-tag{
  position:absolute;right:9px;bottom:9px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;border-radius:999px;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:#141010;
  box-shadow:0 2px 8px rgba(0,0,0,.22);transition:opacity .3s;pointer-events:none;
}
.gd-live-tag i{
  width:6px;height:6px;border-radius:50%;background:#ff3b30;flex:none;
  animation:livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}
}
.gd-item.live-on .gd-live-tag{opacity:0}
.gd-item-cap{padding:10px 13px 12px;display:flex;flex-direction:column;gap:2px}
.gd-item-cap b{font-size:13px;color:var(--text-primary);font-weight:600}
.gd-item-cap span{font-size:12px;color:var(--text-muted);line-height:1.5}
.gd-empty{padding:90px 0;text-align:center;color:var(--text-muted);font-size:13.5px}
/* 灯箱（v2）：参数条改图片正下方独立一行，不再叠在照片上 */
.gd-lightbox{
  position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  background:rgba(20,16,12,.86);opacity:0;pointer-events:none;transition:opacity .25s;
}
/* 灯箱开着时锁背景滚动（手机端滑灯箱不透传到底层页面） */
body.gd-lb-lock{overflow:hidden}
/* 手机端：参数行允许换行——长相机名+参数一行放不下，尾部（ISO/焦距）会被截断 */
@media(max-width:640px){
  .gd-lb-exif{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.7}
}
.gd-lightbox.show{opacity:1;pointer-events:auto}
/* 灯箱：实况照片长按 / 悬停播放，带声音（跟系统相册一致） */
.gd-lb-stage{position:relative;display:inline-flex;-webkit-touch-callout:none;user-select:none}
.gd-lb-stage img{display:block;max-width:92vw;max-height:78vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);transition:opacity .22s ease}
/* 换图加载态：新图到手前藏旧图 + 转圈——浏览器换 src 会一直显示上一张的位图
   （桌面「闪一下旧图」、手机「点了别的照片还是显示之前的」都是它）
   隐藏必须瞬时（transition:none），淡出会让旧图残影多停 0.2s；新图到手后再淡入 */
.gd-lightbox.gd-lb-loading .gd-lb-stage img{opacity:0;transition:none}
.gd-lightbox.gd-lb-loading .gd-lb-stage::after{
  content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid rgba(240,235,227,.22);border-top-color:rgba(240,235,227,.85);
  animation:gdLbSpin .9s linear infinite;z-index:3;pointer-events:none;
}
@keyframes gdLbSpin{to{transform:rotate(360deg)}}
.gd-lb-stage video.gd-lb-live{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.gd-lb-stage video.gd-lb-live.on{opacity:1}
.gd-lb-tag{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;border-radius:999px;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#141010;
  transition:opacity .3s;pointer-events:none;
}
.gd-lb-tag i{width:6px;height:6px;border-radius:50%;background:#ff3b30;animation:livePulse 1.8s ease-out infinite}
.gd-lb-tag.dim{opacity:0}
.gd-lb-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  padding:4px 11px;border-radius:999px;background:rgba(20,16,12,.62);color:#fff;
  font-size:11px;letter-spacing:.04em;white-space:nowrap;pointer-events:none;transition:opacity .3s;
}
.gd-lb-hint.gone{opacity:0}
.gd-lb-close{
  position:absolute;top:22px;right:26px;width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:16px;cursor:pointer;transition:background .2s;
}
.gd-lb-close:hover{background:rgba(255,255,255,.28)}
/* 音乐 Tab */
.gd-tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:26px}
.gd-tab{
  display:inline-flex;align-items:center;gap:7px;padding:10px 2px;border:none;background:transparent;
  color:var(--text-muted);font-size:13.5px;font-family:var(--font-body);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.gd-tab span{font-family:var(--font-mono);font-size:11.5px;opacity:.75}
.gd-tab-ico{width:15px;height:15px}
.gd-tab:hover{color:var(--text-primary)}
.gd-tab.is-on{color:var(--accent-text);border-bottom-color:var(--accent)}
/* 乐曲列表 */
.gd-tracks{display:flex;flex-direction:column;gap:14px;max-width:56rem}
.gd-track{
  display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);
  transition:transform .3s,box-shadow .3s;
}
.gd-track:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gd-track-cover{
  width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;
  background:var(--accent-muted);display:flex;align-items:center;justify-content:center;color:var(--accent-text);
}
.gd-track-cover img{width:100%;height:100%;object-fit:cover}
.gd-track-ph svg{width:24px;height:24px}
.gd-track-body{flex:1;min-width:0}
.gd-track-name{display:block;font-size:14.5px;color:var(--text-primary)}
.gd-track-meta{display:block;margin-top:3px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.gd-track-meta i{margin:0 7px;font-style:normal;opacity:.6}
.gd-audio{width:100%;margin-top:9px;height:34px}
.gd-audio::-webkit-media-controls-panel{background:hsla(36,40%,96%,.9)}
@media (max-width:760px){
  .gd-page{padding:0 16px 70px}
  .gd-masonry{columns:1}
  .gd-title{font-size:32px}
  .gd-toolbar{justify-content:space-between}
}
/* 画廊主页：最近上传缩略图条 */
.gal-recent{margin-top:44px}
.gal-recent-label{font-size:12.5px;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:14px}
.gal-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.gal-recent-item{border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s}
.gal-recent-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.gal-recent-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.gal-recent-grid{grid-template-columns:repeat(2,1fr)}}
/* 画廊主页：亮色 hero（复刻 jerrygao.cn/gallery） */
.gal-hero-light{padding:64px 24px 44px;text-align:center}
.gal-hero-light .hero-kicker{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.35em;color:var(--accent-text);margin-bottom:14px}
.gal-hero-light .hero-title{font-family:var(--font-display);font-size:48px;font-weight:900;color:var(--text-primary);letter-spacing:-1px;line-height:1.15}
.gal-hero-light .hero-sub{margin-top:14px;color:var(--text-muted);font-size:15px}
/* 卡片：照片底 + 色罩，文字沉底 */
.gallery-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:64rem;margin:0 auto}
.gal-card{display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .35s,box-shadow .35s}
.gal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gal-cover{
  position:relative;height:240px;background-size:cover;background-position:center;background-blend-mode:normal;
  display:flex;align-items:flex-end;
}
.gal-cover-content{padding:20px 22px;color:#fff}
.gal-tag{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-family:var(--font-mono);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);margin-bottom:10px;
}
.gal-title{font-family:var(--font-display);font-size:26px;font-weight:800;color:#fff;margin:0 0 4px}
.gal-sub{font-size:12.5px;color:rgba(255,255,255,.85);margin:0}
.gal-arrow{position:absolute;right:22px;bottom:20px;color:#fff;font-size:13px;font-weight:600;opacity:.9;transition:transform .25s}
.gal-card:hover .gal-arrow{transform:translateX(4px)}

/* ---------- 随笔（复刻 jerrygao.cn/notes 与详情页） ---------- */
/* 列表：碎片墙头部 */
.nt-hero{
  padding:72px 24px 40px;text-align:center;
  /* 通栏铺满：渐变带延伸到屏幕两侧 */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:linear-gradient(180deg,rgba(201,135,58,.09),rgba(201,135,58,0))
}
.nt-kicker{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.35em;color:var(--accent-text);margin-bottom:14px}
.nt-big-title{font-family:var(--font-display);font-size:48px;font-weight:900;color:var(--text-primary);letter-spacing:-1px;line-height:1.15}
.nt-hero-sub{margin-top:14px;color:var(--text-muted);font-size:15px}
/* 时间线卡片流 */
.nt-timeline{position:relative;max-width:44rem;margin:0 auto;padding-left:26px;display:flex;flex-direction:column;gap:22px}
.nt-timeline::before{content:'';position:absolute;left:5px;top:14px;bottom:14px;width:2px;background:var(--border-subtle)}
.nt-card{position:relative;display:block;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);padding:20px 22px;transition:transform .3s,box-shadow .3s,border-color .3s}
.nt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(201,135,58,.35)}
.nt-dot{position:absolute;left:-26px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 2px var(--accent-muted)}
.nt-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.nt-card-meta i,.nt-card-nums i{margin:0 2px;font-style:normal;opacity:.6}
.nt-tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11px;background:var(--accent-muted);color:var(--accent-text);font-weight:600}
.nt-card-title{margin-top:10px;font-family:var(--font-display);font-size:18.5px;font-weight:800;color:var(--text-primary);line-height:1.4}
.nt-card-excerpt{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-card-nums{margin-top:12px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
/* 详情页 */
.nt-page{max-width:46rem;margin:0 auto}
/* 文章纸张：平底素净卡片（与随笔/列表卡片同一质感：surface 底 + 细边 + 柔投影） */
.nt-article{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);border-radius:16px;
  padding:clamp(26px,5vw,54px) clamp(20px,4.5vw,50px) clamp(34px,5vw,58px);
  box-shadow:var(--shadow-soft);
  overflow-wrap:anywhere;
}
.nt-article>*{position:relative;z-index:1}
@media(max-width:640px){
  .nt-article{border-radius:14px}
}
.nt-detail-title{font-family:var(--font-display);font-size:30px;font-weight:900;color:var(--text-primary);line-height:1.4;letter-spacing:-.3px;overflow-wrap:anywhere;word-break:break-word}
.nt-detail-meta{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--text-muted);font-family:var(--font-mono)}
.nt-detail-meta i{margin:0 2px;font-style:normal;opacity:.6}
.nt-body{margin-top:26px}
.nt-p{margin-bottom:18px;font-size:15px;line-height:2;color:var(--text-secondary);word-break:break-word}
.nt-h2{margin:34px 0 16px;font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--accent-text)}
.nt-quote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--accent-muted);color:var(--text-primary);font-size:14.5px;line-height:1.8}
.nt-fig{margin:24px 0}
.nt-fig img{display:block;width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-soft)}
/* 点赞胶囊 */
.nt-like-wrap{display:flex;justify-content:center;align-items:center;gap:16px;margin:44px 0 10px}
.nt-like{
  display:inline-flex;align-items:center;gap:8px;padding:10px 26px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--text-secondary);
  font-size:14px;font-family:var(--font-body);cursor:pointer;box-shadow:var(--shadow-soft);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.nt-like:hover{border-color:var(--accent);color:var(--accent-text)}
.nt-like.is-liked{color:var(--req);border-color:rgba(224,83,61,.4);background:rgba(224,83,61,.06)}
.nt-like.is-liked .nt-like-heart{color:var(--req)}
.nt-like.pop{animation:ntHeartPop .45s cubic-bezier(.2,2.2,.4,1)}
@keyframes ntHeartPop{
  0%{transform:scale(1)}30%{transform:scale(1.25)}55%{transform:scale(.92)}100%{transform:scale(1)}
}
/* 评论区 */
.nt-comments{margin-top:44px}
.nt-cm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.nt-cm-title{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text-primary)}
/* 写评论 / 取消 切换按钮（同 jerrygao：橙色胶囊，展开变浅色取消） */
.nt-cm-toggle{
  display:inline-flex;align-items:center;padding:8px 20px;border:none;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;box-shadow:var(--shadow-soft);transition:background .2s,color .2s,transform .15s;
}
.nt-cm-toggle:hover{background:var(--accent-hover);transform:translateY(-1px)}
.nt-cm-toggle.is-open{background:var(--accent-muted);color:var(--accent-text);box-shadow:none}
.nt-cm-toggle.is-open:hover{background:rgba(201,135,58,.18)}
.nt-cm-list{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.nt-comment.is-reply{margin-left:34px}
/* 悬浮按钮：目录 + 回到顶部 */
.nt-fab{position:fixed;right:26px;bottom:88px;display:flex;flex-direction:column;gap:12px;z-index:60}
.nt-fab-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);font-size:18px;cursor:pointer;box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,color .2s;
}
.nt-fab-btn:hover{transform:translateY(-2px)}
.nt-fab-btn.is-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nt-toc{
  position:fixed;right:80px;bottom:88px;z-index:60;min-width:180px;max-width:280px;padding:12px 8px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);
  backdrop-filter:blur(8px);
}
.nt-toc-item{display:block;padding:7px 12px;border-radius:8px;font-size:13px;color:var(--text-secondary);text-decoration:none;transition:color .2s,background .2s;cursor:pointer}
.nt-toc-item:hover{color:var(--accent-text);background:var(--accent-muted)}
@media (max-width:640px){
  .nt-hero{padding:52px 18px 30px}
  .nt-big-title{font-size:36px}
  .nt-timeline{padding-left:20px}
  .nt-fab{right:16px;bottom:70px}
  .nt-toc{right:64px}
  .nt-comment.is-reply{margin-left:18px}
}

/* ---------- 博客详情：版权声明 / 相关文章 / 上一篇下一篇 ---------- */
.nt-cover{margin:0 0 26px}
.nt-cover img{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow-md)}
/* 迷你操作（分享/删除，仅作者可见） */
.nt-admin-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.nt-mini-btn{
  padding:5px 14px;border:1px solid var(--border);border-radius:999px;background:transparent;
  color:var(--text-muted);font-size:12px;font-family:var(--font-body);cursor:pointer;transition:color .2s,border-color .2s;
}
.nt-mini-btn:hover{color:var(--accent-text);border-color:var(--accent)}
.nt-mini-btn.is-danger:hover{color:var(--req);border-color:var(--req)}
/* 版权声明（原站橙色提示卡） */
.nt-license{
  margin-top:40px;padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(201,135,58,.10),rgba(201,135,58,.04));
  border:1px solid rgba(201,135,58,.25);
}
.nt-license-title{display:block;font-size:13.5px;font-weight:700;color:var(--accent-text);margin-bottom:8px}
.nt-license-text{font-size:13px;line-height:1.7;color:var(--text-secondary)}
.nt-license-text b{color:var(--accent-text)}
.nt-license-url{margin-top:8px;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);word-break:break-all;line-height:1.6}
/* 相关文章 */
.nt-related{margin-top:44px}
.nt-related-title{margin:0 0 18px;font-size:20px}
.nt-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nt-related-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;
  border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);
  text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.nt-related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(201,135,58,.35)}
.nt-related-name{font-size:13.5px;line-height:1.55;color:var(--text-primary);font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-related-date{font-size:11.5px;color:var(--text-muted);font-family:var(--font-mono)}
/* 上一篇 / 下一篇 */
.nt-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.nt-pn-card{
  display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);
  text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;
}
a.nt-pn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(201,135,58,.35)}
.nt-pn-card.is-empty{opacity:.55}
.nt-pn-label{font-size:11.5px;color:var(--text-muted);font-family:var(--font-mono)}
.nt-pn-name{font-size:13px;color:var(--text-primary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){
  .nt-related-grid{grid-template-columns:1fr}
  .nt-pn{grid-template-columns:1fr}
}

/* ============================================================
   白天 / 黑夜模式（顶栏太阳/月亮切换，localStorage 记忆）
   ============================================================ */
html[data-theme="dark"]{
  --bg-primary:#151210;
  --bg-secondary:#1b1714;
  --bg-tertiary:#241f1a;
  --surface:hsla(28,12%,17%,.72);
  --surface-hover:hsla(28,12%,21%,.9);
  --text-primary:#f0ebe3;
  --text-secondary:#cfc7bc;
  --text-muted:#988d80;
  --accent:#e09a4a;
  --accent-hover:#f0aa58;
  --accent-muted:rgba(224,154,74,.16);
  /* 黑夜主题品牌橙本身对比度已达标（卡片面 6.34:1），文字色沿用品牌橙 */
  --accent-text:#e09a4a;
  --accent-text-hover:#f0aa58;
  --req:#f4735c;
  --border:rgba(240,235,227,.14);
  --border-subtle:rgba(240,235,227,.07);
  --shadow-soft:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 4px 16px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 10px 40px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
  --header-bg:rgba(21,18,16,.82);
  --hero-g1:#0a0400;
  --hero-g2:#160900;
  --hero-g3:#060c18;
  --hero-g4:#0d0618;
  --scrollbar-thumb:#4a4138;
  --scrollbar-thumb-hover:#5d5245;
}
/* 黑夜 + 全站壁纸：内容面提到近实底，防止亮壁纸（白毛衣/水面反光）透出淹没文字 */
html[data-theme="dark"] body.wp-site{
  --surface:hsla(28,12%,15%,.94);
  --surface-hover:hsla(28,12%,18%,.96);
}
/* 黑夜模式：正文里写死的黑色内联文字色（iOS 备忘录等粘贴源）强制恢复主题色 */
html[data-theme="dark"] .nt-body [style*="color:#000"],
html[data-theme="dark"] .nt-body [style*="color:black"],
html[data-theme="dark"] .nt-body [style*="color:rgb(0, 0"],
html[data-theme="dark"] .nt-body [style*="color:rgb(0,0"],
html[data-theme="dark"] .nt-body [style*="color: rgb(0, 0"],
html[data-theme="dark"] .nt-body [style*="color: rgb(0,0"],
html[data-theme="dark"] .nt-body [style*="color:#111"],
html[data-theme="dark"] .nt-body [style*="color:#1a1a1a"],
html[data-theme="dark"] .nt-body [style*="color:#222"],
html[data-theme="dark"] .nt-body [style*="color:#333"]{color:var(--text-secondary)!important}
:root{--header-bg:rgba(248,245,240,.85)}
.site-header.scrolled{background:var(--header-bg)}
body{transition:background-color .45s ease,color .45s ease}

/* 顶栏切换按钮（太阳/月亮） */
.theme-toggle{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);cursor:pointer;flex:none;
  transition:color .25s,border-color .25s,transform .25s,background .45s;
}
.theme-toggle:hover{color:var(--accent-text);border-color:var(--accent);transform:rotate(24deg)}
html[data-theme="dark"] .theme-toggle .ico-sun{display:none}
html:not([data-theme="dark"]) .theme-toggle .ico-moon{display:none}

/* 深色 hero 页面（首页/博客列表）：顶栏未滚动时用浅色文字，保证可读 */
.site-header.on-dark:not(.scrolled) .logo-name,
.site-header.on-dark:not(.scrolled) .nav-item{color:rgba(240,235,227,.78)}
.site-header.on-dark:not(.scrolled) .nav-item:hover{color:#f0ebe3;background:rgba(240,235,227,.1)}
.site-header.on-dark:not(.scrolled) .nav-item.active{color:#f0ebe3;background:rgba(240,235,227,.14)}
.site-header.on-dark:not(.scrolled) .theme-toggle{
  color:rgba(240,235,227,.82);
  border-color:rgba(240,235,227,.28);
  background:rgba(240,235,227,.08);
}
.site-header.on-dark:not(.scrolled) .nav-right a,
.site-header.on-dark:not(.scrolled) .nav-right button{color:rgba(240,235,227,.82)}

/* ============================================================
   主页 Hero（复刻 jerrygao.cn：星空 canvas + 徽章 + 打字机 + CTA + 波浪）
   ============================================================ */
.hero-section.home-hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  /* 底部 padding 必须 > 滚动提示区高度(bottom 104px + 自身高约 70px)，否则矮视口下内容与提示条穿模 */
  padding:150px 24px 190px;
  /* 通栏铺满：突破 72rem 容器限制（复刻原站全屏 hero） */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.hero-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-glow{
  position:absolute;left:50%;top:38%;width:640px;height:640px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,154,74,.28),rgba(224,154,74,.07) 45%,transparent 70%);
  filter:blur(40px);
  animation:heroGlowBreathe 7s ease-in-out infinite;
}
@keyframes heroGlowBreathe{
  0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
.home-hero-inner{position:relative;z-index:2;text-align:center;max-width:640px}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border-radius:999px;
  border:1px solid rgba(224,154,74,.55);
  background:rgba(224,154,74,.08);
  color:#e0a55c;font-size:11.5px;letter-spacing:2px;
  font-family:var(--font-mono);margin-bottom:26px;
}
.hero-tw{font-size:21px;color:rgba(240,235,227,.92);letter-spacing:2px;margin:16px 0 0}
.tw-underline{
  color:#f0ebe3;font-weight:600;
  border-bottom:2px solid #e09a4a;padding-bottom:1px;
}
.tw-caret{
  display:inline-block;margin-left:3px;color:#e09a4a;
  animation:twBlink 1s steps(1) infinite;font-weight:400;
}
@keyframes twBlink{50%{opacity:0}}
.hero-section.home-hero .hero-sub{margin-top:22px;font-size:15.5px;color:rgba(240,235,227,.66);letter-spacing:3px}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:36px}
.hero-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 30px;border-radius:12px;font-size:14px;font-weight:600;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.hero-btn.solid{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 24px rgba(201,135,58,.4);
}
.hero-btn.solid:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 32px rgba(201,135,58,.5)}
.hero-btn.ghost{
  background:rgba(240,235,227,.08);color:#f0ebe3;
  border:1px solid rgba(240,235,227,.35);
  /* 不用 backdrop-filter：iOS WKWebView（微信内置浏览器）在有持续动画的页面会错位合成，把模糊取样画到按钮外形成暗色斑块 */
}
.hero-btn.ghost:hover{border-color:rgba(240,235,227,.7);transform:translateY(-2px);background:rgba(240,235,227,.12)}
/* 向下滚动提示 */
.hero-scroll-hint{
  position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(240,235,227,.55);font-size:10.5px;letter-spacing:4px;
  font-family:var(--font-mono);
}
.hero-scroll-hint i{
  display:block;width:1.5px;height:44px;overflow:hidden;position:relative;
  background:rgba(240,235,227,.18);border-radius:2px;
}
.hero-scroll-hint i::after{
  content:'';position:absolute;left:0;top:-50%;width:100%;height:50%;
  background:#e09a4a;animation:scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{top:-50%}60%,100%{top:110%}
}
/* 底部波浪分割（填充色跟随日夜主题） */
.hero-wave{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;height:88px;
  display:block;z-index:1;pointer-events:none;
}
.hero-wave path{fill:var(--bg-primary);transition:fill .45s ease}
/* 黑夜模式下 hero 光晕更亮 */
html[data-theme="dark"] .hero-glow{background:radial-gradient(circle,rgba(224,154,74,.34),rgba(224,154,74,.09) 45%,transparent 70%)}
@media (max-width:760px){
  .hero-section.home-hero{padding:130px 20px 190px;min-height:92vh}
  .hero-glow{width:440px;height:440px}
  .hero-scroll-hint{bottom:84px}
}

/* ============================================================
   网站背景壁纸（视频）· 后台「站点设置 → 网站背景壁纸」
   hero 模式：视频铺满首页 Hero；site 模式：固定视频铺满全站 + 纸面遮罩
   ============================================================ */
:root{
  --wp-a:.34;                     /* 遮罩强度，后台可调（0–92） */
  --wp-veil-rgb:242,245,250;      /* 纸面遮罩颜色（白天·冷调，贴壁纸夜景色温）/ 黑夜在下方覆盖 */
  --wp-veil-a:var(--wp-a);
  --wp-hero-h:0px;                /* 首页 Hero 高度，由脚本写入，遮罩据此收放 */
}
html[data-theme="dark"]{
  --wp-veil-rgb:16,14,13;
  /* 深色遮罩更"吃"画面，等比放轻一点，让壁纸在黑夜模式下更可见 */
  --wp-veil-a:calc(var(--wp-a) * .82);
}
/* 白天主题：纸面遮罩薄薄一层 0.20（0.53 太白、0 太透，2026-09-19 用户取中），
   壁纸保持清晰可见；正文可读性由白色卡片（.78）承担。黑夜 .82 完全不受影响 */
html:not([data-theme="dark"]){
  --wp-veil-a:calc(var(--wp-a) * .25);
}
/* 白天 + 全站壁纸：内容卡片白底加厚一档，遮罩变薄后正文照旧压得住 */
html:not([data-theme="dark"]) body.wp-site{
  --surface:hsla(0,0%,100%,.78);
  --surface-hover:hsla(0,0%,100%,.88);
}

/* 视频本体：不参与布局、不吃点击 */
.wp-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;pointer-events:none;background:#0b0f18;
  animation:wpFade .9s ease both;
}
@keyframes wpFade{from{opacity:0}to{opacity:1}}

/* ---------- 全站模式 ---------- */
/* 手机端防「往下滑壁纸被放大」：不用 inset:0（fixed 层随地址栏收放实时变高，
   object-fit:cover 视频跟着缩放）。高度钉死「小视口」100svh（地址栏展开时的高度，
   即用户习惯的原始取景）——滑动时层尺寸恒定，画面永不缩放；顶部时视口恰好=svh 无缝，
   下滑收起地址栏后底部窄条由近满浓度纸面遮罩盖住。老内核回退 100vh（JS 里有二次兜底） */
#siteWall{
  position:fixed;top:0;left:0;width:100%;
  height:100vh;height:100svh;
  z-index:0;overflow:hidden;pointer-events:none;
}
body.wp-site{position:relative;background-color:#0b0f18}
/* 纸面遮罩必须整页铺满（#app 只是居中 1152px 的 wrap，画在它身上会露两侧），
   用 body 的伪元素做成「随文档滚动」的一层：Hero 区内透明（露出清晰壁纸），
   往下渐变为纸面，滚到哪正文都压得住 */
body.wp-site::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(180deg,
    rgba(var(--wp-veil-rgb),0) 0,
    rgba(var(--wp-veil-rgb),0) calc(var(--wp-hero-h) - 14vh),
    rgba(var(--wp-veil-rgb),calc(var(--wp-veil-a) * .55)) var(--wp-hero-h),
    rgba(var(--wp-veil-rgb),var(--wp-veil-a)) calc(var(--wp-hero-h) + 12vh));
  background-repeat:no-repeat;
}
/* 正文与页脚都要抬到遮罩之上（页脚在 #app 之外，别被一起洗白） */
body.wp-site #app,
body.wp-site .site-footer,
body.wp-site .footer-wave{position:relative;z-index:2}
/* 全站壁纸模式下，所有页面的 Hero 都去掉自带的深色渐变，露出动态壁纸
   （原本只对首页 .home-hero 生效，导致博客/归档等子页顶部渐变盖住壁纸） */
body.wp-site .hero-section{background:transparent}
body.wp-site .hero-wave{display:none}
/* 子页 hero 与首页同款：垫一层顶部压暗渐变（z-index:-1 落在 #app 层内、壁纸之上），
   文字用首页 Hero 同款浅色，昼夜一致 */
body.wp-site .hero-section.page-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,20,.55),rgba(8,11,20,.32) 55%,rgba(8,11,20,0) 100%);
}
body.wp-site .hero-section.page-hero{color:#f0ebe3}
body.wp-site .hero-section.page-hero .hero-title{color:#f0ebe3;text-shadow:none}
body.wp-site .hero-section.page-hero .hero-sub{color:var(--accent-text);text-shadow:none}
body.wp-site .hero-section.page-hero .hero-orb{display:none}
/* 白天模式：子页标题 = 浅青色 #a8d6d5（用户取色器截图选定，rgb 168,214,213），无任何光晕/描边。
   浅青落在标题区深蓝底 #151c34 上对比度约 10.6:1（远超 WCAG 4.5:1），字面本身已是亮色，无需光晕。
   黑夜模式不动（仍 #f0ebe3）。 */
html:not([data-theme="dark"]) .hero-section.page-hero .hero-title,
html:not([data-theme="dark"]) body.wp-site .hero-section.page-hero .hero-title{
  color:#a8d6d5;
  text-shadow:none;
}
/* 全站壁纸下，顶栏（未滚动）垫一层与首页同款的顶部压暗渐变：
   壁纸是动态视频、画面时明时暗，垫暗后顶栏浅色文字任何帧都可读，观感也与首页一致 */
body.wp-site .site-header:not(.scrolled)::before{
  content:'';position:absolute;inset:0 0 -30px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,20,.55),rgba(8,11,20,.30) 52%,rgba(8,11,20,.12) 78%,rgba(8,11,20,0));
}
/* 此处已落在纸面上，滚动提示改用主题文字色 */
body.wp-site .hero-scroll-hint{color:var(--text-secondary)}
body.wp-site .hero-scroll-hint i{background:rgba(140,132,124,.3)}

/* ---------- Hero 视频与压暗层 ---------- */
.hero-wall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hw-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(8,11,20,.62) 0%,rgba(8,11,20,.36) 48%,rgba(8,11,20,.20) 74%,rgba(8,11,20,0) 100%)}
/* 文字正下方再补一层椭圆暗角：壁纸亮部（海面灯光）扫过标题时也压得住 */
.hw-scrim::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(58% 50% at 50% 45%,rgba(6,9,18,.52),rgba(6,9,18,.18) 66%,transparent 100%);
}
/* hero 模式：Hero 下方紧接实色纸面，底部继续压暗，浅色提示条才看得清 */
body.wp-on:not(.wp-site) .hw-scrim{background:linear-gradient(180deg,
  rgba(8,11,20,.62) 0%,rgba(8,11,20,.42) 46%,rgba(8,11,20,.54) 100%)}
/* 壁纸在时星光收敛一点，别和画面打架 */
body.wp-on .hero-stars{opacity:.45}

/* 后台页面不铺壁纸，避免干扰编辑 */
body.admin-mode #siteWall{display:none}
body.admin-mode .hero-wall{display:none}

/* 移动端：与桌面同策略——白天薄遮罩 0.20、黑夜保持 .82（2026-09-19 同步） */
@media (max-width:760px){
  body.wp-site{--wp-veil-a:calc(var(--wp-a) * .25)}
  html[data-theme="dark"] body.wp-site{--wp-veil-a:calc(var(--wp-a) * .82)}
}

/* ============================================================
   手机端：汉堡菜单 + 全屏导航（复刻 jerrygao.cn 移动端）
   ============================================================ */
.menu-toggle{
  display:none;
  width:38px;height:38px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);
  flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  cursor:pointer;flex:none;transition:border-color .25s;
}
.menu-toggle .mt-bar{
  display:block;width:16px;height:1.8px;border-radius:2px;
  background:var(--text-secondary);transition:transform .3s,opacity .3s;
}
.menu-toggle:hover{border-color:var(--accent)}
.menu-toggle.open .mt-bar:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.menu-toggle.open .mt-bar:nth-child(2){opacity:0}
.menu-toggle.open .mt-bar:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:45;
  background:rgba(18,14,11,.6);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
  display:flex;align-items:center;justify-content:center;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu-nav{display:flex;flex-direction:column;align-items:center;gap:8px;padding:80px 0 40px}
.mm-item{
  display:block;padding:12px 34px;border-radius:14px;
  font-family:var(--font-display);font-size:24px;font-weight:700;
  color:rgba(240,235,227,.78);text-decoration:none;letter-spacing:2px;
  opacity:0;transform:translateY(16px);
  transition:color .25s,background .25s,opacity .4s ease,transform .4s ease;
}
.mobile-menu.open .mm-item{opacity:1;transform:none}
.mobile-menu.open .mm-item:nth-child(1){transition-delay:.06s}
.mobile-menu.open .mm-item:nth-child(2){transition-delay:.11s}
.mobile-menu.open .mm-item:nth-child(3){transition-delay:.16s}
.mobile-menu.open .mm-item:nth-child(4){transition-delay:.21s}
.mobile-menu.open .mm-item:nth-child(5){transition-delay:.26s}
.mobile-menu.open .mm-item:nth-child(6){transition-delay:.31s}
.mm-item:hover{color:#e09a4a}
.mm-item.active{color:#e09a4a}
html:not([data-theme="dark"]) .mobile-menu{background:rgba(38,28,20,.55)}

/* ≤900px：隐藏横排导航，显示汉堡按钮 */
@media (max-width:900px){
  .main-nav{display:none}
  .menu-toggle{display:flex}
  .header-inner{padding:14px 18px;gap:10px;justify-content:flex-start}
  .header-inner .theme-toggle{margin-left:auto}
  .nav-right{display:none}
}
/* 手机端 hero：标题缩小、按钮竖排居中（复刻 jerrygao 移动端） */
@media (max-width:640px){
  .home-hero-inner{max-width:88vw}
  /* 底部 padding > 提示区(bottom 92px + 自身高约 70px)：矮视口下按钮不再与滚动提示穿模 */
  .hero-section.home-hero{padding:130px 20px 200px}
  .hero-section.home-hero .hero-title{font-size:52px !important;line-height:1.12}
  .hero-tw{font-size:19px;margin-top:18px}
  .hero-section.home-hero .hero-sub{font-size:13.5px;letter-spacing:2px;margin-top:20px}
  .hero-badge{font-size:11px;padding:5px 12px;margin-bottom:22px}
  .hero-cta{flex-direction:column;align-items:center;gap:14px;margin-top:32px}
  .hero-btn{width:216px;justify-content:center;padding:14px 0;font-size:15px}
  .hero-scroll-hint{bottom:92px}
  .hero-wave{height:56px}
}

/* ============================================================
   站点数据系统（关于页：图标卡 + 折线趋势 + 环形分布图）
   ============================================================ */
.ana-grid{grid-template-columns:repeat(5,1fr)}
.stat-card.has-ico{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px;text-align:left}
.stat-card.has-ico .stat-num{line-height:1.15}
.stat-card.has-ico .stat-label{margin-top:0;font-size:12px;letter-spacing:.5px;line-height:1.5;white-space:normal}
.stat-ico{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-muted);color:var(--accent-text);
}
.ana-line-card{margin-top:18px}
.ana-t-ico{display:inline-flex;vertical-align:-2px;margin-right:7px;color:var(--accent-text)}
.ana-line-svg{display:block;width:100%;height:auto}
.ana-y{font-size:10px;fill:var(--text-muted);font-family:var(--font-mono)}
.ana-line-path{stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 2.2s ease .25s}
.ab-sec.in .ana-line-path{stroke-dashoffset:0}
.ana-x-axis{
  display:flex;justify-content:space-between;padding:8px 6px 0 40px;
  font-size:10.5px;color:var(--text-muted);font-family:var(--font-mono);
}
/* 环形图 */
.ana-donut-card{margin-top:18px}
.ana-donut-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.ana-donut-row{display:flex;align-items:center;justify-content:center;gap:40px;padding:10px 4px 4px}
.ana-donut-svg{width:172px;height:172px;flex:none}
.ana-seg{opacity:0;transition:opacity .8s ease}
.ab-sec.in .ana-seg{opacity:1}
.ana-legend{display:flex;flex-direction:column;gap:7px}
.ana-lg-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}
.ana-lg-dot{width:10px;height:10px;border-radius:3px;flex:none}
.ana-empty{padding:30px 10px;text-align:center;color:var(--text-muted);font-size:12.5px}
html[data-theme="dark"] .ana-y{fill:var(--text-muted)}
html[data-theme="dark"] .ana-line-svg line{stroke:rgba(240,235,227,.09)}
@media (max-width:900px){.ana-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .ana-grid{grid-template-columns:repeat(2,1fr)}
  .ana-donut-grid{grid-template-columns:1fr}
  .ana-donut-row{flex-direction:column;gap:16px}
  .ana-donut-svg{width:150px;height:150px}
  .ana-x-axis{padding-left:30px}
}

/* ---------- 关于页 · 访客省份分布（中国地图版） ---------- */
/* 地图自带独立底板，与壁纸解耦；所有颜色走昼夜变量，两种主题下都保证轮廓清晰 */
.ana-map-card{margin-top:18px}
.ana-map-wrap{display:flex;gap:22px;align-items:stretch;padding:10px 6px 6px}
.ana-map-box{
  flex:1;min-width:0;border-radius:14px;padding:12px 10px;   /* 地图占满除图例栏外全部宽度 */
  background:var(--mp-bg);border:1px solid var(--mp-line);
  /* 白天：暖白底板 · 陆地淡灰蓝 · 省界深灰 · 九段线更醒目 */
  --mp-bg:linear-gradient(168deg,rgba(249,247,243,.92),rgba(241,238,232,.88));
  --mp-line:rgba(96,106,122,.16);
  --land:rgba(104,114,130,.12);
  --land-line:rgba(78,88,104,.42);
  --jd:rgba(64,74,90,.72);
  --lb:#3c4350;
  --lb-halo:rgba(249,247,243,.85);
  --sea:#5a6474;
  --mp-frame:rgba(252,251,248,.75);
}
html[data-theme="dark"] .ana-map-box{
  /* 黑夜：深蓝黑底板 · 陆地淡白 · 省界浅色 */
  --mp-bg:linear-gradient(168deg,rgba(15,20,33,.85),rgba(11,15,26,.9));
  --mp-line:rgba(240,235,227,.09);
  --land:rgba(235,230,220,.07);
  --land-line:rgba(235,230,220,.26);
  --jd:rgba(240,235,227,.66);
  --lb:#f0ebe3;
  --lb-halo:rgba(9,12,20,.72);
  --sea:rgba(235,230,220,.8);
  --mp-frame:rgba(18,24,38,.6);
}
.ana-map-svg{width:100%;height:auto;display:block}
.ana-map-svg .prv{
  fill:var(--land);fill-opacity:1;
  stroke:var(--land-line);stroke-width:.7;stroke-linejoin:round;
  transition:fill .25s ease,fill-opacity .25s ease;
}
.ana-map-svg .prv:hover{fill:var(--accent);fill-opacity:.45}
.ana-map-svg .prv.hot{fill:var(--accent)}
.ana-map-svg .prv.hot:hover{fill-opacity:.96}
.ana-map-svg .jd{fill:var(--jd);stroke:none;pointer-events:none}
.ana-map-svg .jdl{
  fill:none;stroke:var(--jd);stroke-width:1.6;stroke-dasharray:5.5 3.5;
  stroke-linecap:round;pointer-events:none;
}
.ana-map-svg .map-lb{
  font-size:13px;font-weight:600;fill:var(--lb);text-anchor:middle;
  paint-order:stroke;stroke:var(--lb-halo);stroke-width:3px;pointer-events:none;
  font-family:var(--font-mono,monospace);
}
.ana-map-svg .map-sea{
  font-size:12px;fill:var(--sea);text-anchor:middle;
  letter-spacing:2px;pointer-events:none;
}
/* 钓鱼岛诸岛点（数据源 DataV 台湾省 feature 内钓鱼岛/黄尾屿/赤尾屿） */
.ana-map-svg .dy-isle{fill:var(--sea);stroke:none}
/* 侧栏 = 环形图同款图例：圆点 + 名称 + 百分比（窄栏，把宽度让给地图） */
.ana-map-side{flex:none;width:186px;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.ana-map-rows{display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:340px;padding-right:4px}
.ana-mrow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary)}
.ana-mrow .ana-mdot{
  width:9px;height:9px;border-radius:3px;flex:none;
  background:var(--border);            /* 未知/海外灰点；省份行内联金色 */
}
.ana-mrow .ana-mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-mrow .ana-mpct{flex:none;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}
@media (max-width:760px){
  .ana-map-wrap{flex-direction:column;gap:14px;padding:8px 2px 4px}
  .ana-map-box{width:100%;padding:10px 6px}          /* 手机端地图卡片内全宽 */
  .ana-map-side{width:100%;padding:0 4px}
  .ana-map-rows{max-height:220px}
}

/* ---------- 表情选择器（emoji.js 共享组件） ---------- */
.emoji-wrap{position:relative;display:inline-flex}
.emoji-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:10px;padding:4px 12px;cursor:pointer;font-size:13px;font-family:var(--font-body);transition:all .2s}
.emoji-btn:hover{color:var(--accent-text);border-color:var(--accent);background:var(--accent-muted)}
.emoji-btn.sm{padding:3px 9px;font-size:14px}
.emoji-panel{display:none;position:fixed;top:0;left:0;width:302px;max-width:min(86vw,340px);background:var(--bg-primary);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;z-index:4000}
.emoji-panel.open{display:block;animation:emojiIn .18s ease}
@keyframes emojiIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.emoji-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-subtle);padding-bottom:6px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none}
.emoji-tabs::-webkit-scrollbar{display:none}
.emoji-tab{flex-shrink:0;border:0;background:none;cursor:pointer;font-size:17px;padding:3px 8px;border-radius:9px;opacity:.5;transition:.15s}
.emoji-tab:hover{opacity:.85}
.emoji-tab.on{opacity:1;background:var(--accent-muted)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:176px;overflow-y:auto;padding-right:2px}
.emoji-grid::-webkit-scrollbar{width:6px}
.emoji-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.emoji-item{border:0;background:none;cursor:pointer;font-size:19px;padding:4px 0;border-radius:8px;line-height:1.35;transition:transform .12s}
.emoji-item:hover{background:var(--accent-muted);transform:scale(1.18)}
.gb-char-row{gap:12px}
.gb-char-row .emoji-wrap{order:-1}
.gb-char-row span:first-child{margin-left:auto}

/* ---------- 留言板：后台回复展示块 ---------- */
.gb-owner-reply{margin-top:10px;padding:10px 14px;background:hsla(36,45%,94%,.55);border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
.gb-owner-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.gb-owner-tag{font-size:11px;line-height:1;color:var(--on-accent);background:var(--accent);border-radius:6px;padding:3px 7px}
.gb-owner-reply .gb-msg-text{margin:0}
.gb-inline-spacer{flex:1}
.adm-input-row{display:flex;align-items:flex-start;gap:8px}
.adm-input-row .adm-input{flex:1}

html[data-theme="dark"] .emoji-panel{background:var(--bg-secondary)}
html[data-theme="dark"] .gb-owner-reply{background:hsla(36,25%,18%,.5)}
/* ============ 全站搜索浮层 ============ */
.gs-mask{position:fixed;inset:0;z-index:1200;background:rgba(10,8,6,.55);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 20px;animation:gsFade .18s ease}
@keyframes gsFade{from{opacity:0}to{opacity:1}}
.gs-panel{width:100%;max-width:600px;background:var(--bg-primary,#fff);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;animation:gsUp .22s cubic-bezier(.2,.9,.3,1)}
html[data-theme=dark] .gs-panel{background:var(--bg-secondary,#1c1a18)}
@keyframes gsUp{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.gs-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--border)}
.gs-lens{flex:none;width:20px;height:20px;color:var(--accent-text)}
.gs-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:var(--text-primary)}
.gs-esc{flex:none;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-muted);border-radius:7px;padding:3px 9px;font-size:11px;cursor:pointer;letter-spacing:.5px}
.gs-esc:hover{color:var(--text-primary)}
.gs-tip{font-size:12px;color:var(--text-muted);padding:10px 16px 4px;min-height:20px}
.gs-results{overflow-y:auto;padding:2px 8px 10px}
.gs-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;text-decoration:none;color:inherit}
.gs-item.on,.gs-item:hover{background:var(--accent-muted)}
.gs-ico{flex:none;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.gs-ico i{font-style:normal;font-size:10.5px}
.gs-post{background:linear-gradient(135deg,#e0a45e,#c9873a);color:#fff}
.gs-note{background:linear-gradient(135deg,#7a9ec9,#54759e);color:#fff}
.gs-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gs-title{font-size:14px;color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-go{flex:none;color:var(--text-muted);opacity:.5}
.gs-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:24px 0}
.gs-foot{display:flex;gap:14px;justify-content:flex-end;border-top:1px solid var(--border);padding:8px 15px;font-size:10.5px;color:var(--text-muted)}

/* ============ 博客筛选胶囊 ============ */
.filter-bar{max-width:1080px;margin:0 auto 22px;padding:0 4px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer;transition:all .18s ease;font-family:inherit}
.fchip:hover{border-color:var(--accent);color:var(--accent-text)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 3px 10px rgba(201,135,58,.3)}
.fchip.is-tag{font-size:12px;padding:5px 12px}
/* 章节下拉（筛选栏内）：与胶囊同观感 */
select.fchap{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
select.fchap:focus{outline:none;border-color:var(--accent)}
select.fchap.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
/* 标签页：小说章节直达下拉 */
.chap-jump{display:flex;gap:10px;flex-wrap:wrap}
.chap-jump select{appearance:none;-webkit-appearance:none;min-width:280px;max-width:100%;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);padding:11px 40px 11px 16px;border-radius:12px;font-size:14px;font-family:inherit;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;transition:border-color .18s ease}
.chap-jump select:focus{outline:none;border-color:var(--accent)}

/* ============ 多部小说：书架卡片 + 继续阅读（2026-10-08） ============ */
/* 每部小说一个胶囊，与普通标签胶囊区分开一点 */
.fchip.is-novel{background:var(--accent-muted);border-color:rgba(201,135,58,.32)}
.fchip.is-novel:hover{border-color:var(--accent)}
/* 书架卡片：正文块可点 + 底部「继续阅读」按钮独立可点 */
.novel-card{display:flex;flex-direction:column}
.novel-card>a{flex:1 1 auto;min-height:0}
.novel-resume{
  display:block;margin:0 20px 18px;padding:9px 14px;
  border:1px solid var(--accent);border-radius:10px;text-align:center;
  font-size:13px;font-weight:600;color:var(--accent-text);text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.novel-resume:hover{background:var(--accent);color:var(--on-accent)}
.novel-resume i{font-style:normal;margin-left:5px}
.post-meta-item.rr-mini{color:var(--accent-text);font-weight:600}
/* 继续阅读条：博客页顶部「上次读到哪一篇」 */
.read-resume{
  display:flex;align-items:center;gap:12px;
  max-width:1080px;margin:0 auto 16px;padding:11px 18px;
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;
  background:var(--bg-secondary);text-decoration:none;color:inherit;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.read-resume:hover{border-color:var(--accent);background:var(--accent-muted);transform:translateX(2px)}
.read-resume .rr-label{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--on-accent);background:var(--accent);padding:3px 9px;border-radius:999px;
}
.read-resume .rr-title{flex:1;min-width:0;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-resume .rr-go{flex:none;font-size:12px;color:var(--accent-text)}
@media (max-width:640px){
  .read-resume .rr-title{font-size:13px}
  .read-resume .rr-go{display:none}
}

/* ============ 归档页 ============ */
.arch-wrap{max-width:800px;margin:0 auto}
.arch-year{margin-bottom:30px}
.arch-ym{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--text-primary);margin-bottom:6px;padding-left:2px}
.arch-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted);flex:none}
.arch-count{margin-left:auto;font-size:12px;color:var(--text-muted);font-weight:500}
.arch-list{border-left:2px solid var(--border-subtle);margin-left:4px;padding-left:22px}
.arch-item{display:flex;align-items:center;gap:14px;padding:12px 14px;text-decoration:none;color:inherit;border-radius:10px;position:relative;transition:background .16s ease}
.arch-item::before{content:'';position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--bg-primary);border:2px solid var(--accent)}
.arch-item:hover{background:var(--accent-muted)}
.arch-date{flex:none;width:44px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.arch-title{flex:1;min-width:0;font-size:14.5px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-item:hover .arch-title{color:var(--accent-text)}
.arch-meta{flex:none;display:flex;align-items:center;gap:10px}
.arch-type{font-style:normal;font-size:10.5px;background:var(--accent);color:var(--on-accent);border-radius:5px;padding:2px 7px;display:inline-block;min-width:42px;box-sizing:border-box;text-align:center}
.arch-type.is-note{background:var(--accent-deep,#8a8a99)}
.arch-views{font-size:11px;color:var(--text-muted);font-style:normal;display:inline-block;min-width:58px;text-align:left;font-variant-numeric:tabular-nums}
@media(max-width:600px){.arch-date{display:none}.arch-meta .arch-views{display:none}}

/* ============ 文章阅读进度条 ============ */
/* 阅读进度环（右下角悬浮，可点击回到顶部；参考 Medium / Linear 风格） */
.read-progress{position:fixed;right:24px;bottom:24px;width:48px;height:48px;z-index:300;cursor:pointer;display:none;opacity:0;transition:opacity .25s,transform .25s}
.read-progress.show{display:block;opacity:1}
.read-progress:hover{transform:translateY(-2px)}
.read-progress svg{width:100%;height:100%;overflow:visible;display:block}
.read-progress .rp-track{fill:none;stroke:var(--border);stroke-width:3}
.read-progress .rp-fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .12s linear}
.read-progress .rp-arrow{fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.read-progress:hover .rp-arrow{stroke:var(--accent)}
body.admin-mode .read-progress{display:none!important}
@media(max-width:640px){.read-progress{right:14px;bottom:14px;width:42px;height:42px}}

/* ============ 正文/画廊图片淡入（渐进增强：默认可见，JS 监测到 load 才淡入） ============ */
.gallery-item img,.gal-item img,.md-body img,.rte-content img,.md-body.rte-body img{opacity:1;transition:opacity .5s ease}
.gallery-item img.img-fade,.gal-item img.img-fade,.md-body img.img-fade,.rte-content img.img-fade,.md-body.rte-body img.img-fade{opacity:0}
.gallery-item img.img-fade.is-loaded,.gal-item img.img-fade.is-loaded,.md-body img.img-fade.is-loaded,.rte-content img.img-fade.is-loaded,.md-body.rte-body img.img-fade.is-loaded{opacity:1}

/* ============ 关于页：建站历程 + 友情链接 ============ */
.ab-timeline{position:relative;padding-left:30px;display:flex;flex-direction:column}
.ab-timeline::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--border-subtle);border-radius:2px}
.tl-node{position:relative;padding-bottom:22px}
.tl-node:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-30px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--bg-primary);border:3px solid var(--accent);box-sizing:border-box}
.tl-dot.is-now{background:var(--accent);box-shadow:0 0 0 5px var(--accent-muted);animation:tlPulse 2.4s infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 3px var(--accent-muted)}50%{box-shadow:0 0 0 7px transparent}}
.tl-date{display:inline-block;font-family:var(--font-mono);font-size:11px;color:var(--accent-text);font-weight:700;letter-spacing:.5px;background:var(--accent-muted);border-radius:5px;padding:2px 8px;margin-bottom:5px}
.tl-text{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:0}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.friend-card{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;text-decoration:none;background:var(--bg-primary);transition:all .18s ease}
.friend-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.09)}
.friend-av{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-deep,#b5722e))}
.friend-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.friend-body b{font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-body i{font-style:normal;font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-go{flex:none;color:var(--text-muted);opacity:.5;font-size:16px}
.search-toggle{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;flex:none;transition:color .25s,border-color .25s,background .45s;margin-right:auto}
.search-toggle:hover{color:var(--accent-text);border-color:var(--accent)}
.site-header.on-dark:not(.scrolled) .search-toggle{color:rgba(240,235,227,.82);border-color:rgba(240,235,227,.28);background:rgba(240,235,227,.08)}
@media(max-width:900px){.header-inner .search-toggle{margin-left:0;margin-right:0}}

/* ============================================================
   排版精修：代码块 mac 窗口 / 行内代码 / 引用 / 分割线 / 表格
   （作用域：文章正文 .nt-body / .md-body / .rte-body）
   ============================================================ */
.nt-body pre,.md-body pre,.rte-body pre{
  position:relative;margin:24px 0;padding:40px 18px 16px;border-radius:12px;
  background:#2b2620;color:#ece4d6;border:1px solid rgba(224,164,94,.15);
  overflow:auto;font-family:var(--font-mono);font-size:13px;line-height:1.75;
  box-shadow:var(--shadow-soft);
}
.nt-body pre::before,.md-body pre::before,.rte-body pre::before{
  content:'';position:absolute;top:15px;left:15px;width:11px;height:11px;border-radius:50%;
  background:#ff5f57;box-shadow:18px 0 0 #febc2e,36px 0 0 #28c840;
}
/* 代码块复制按钮（JS 注入） */
.code-copy{
  position:absolute;top:9px;right:10px;padding:3px 11px;border:none;border-radius:7px;
  background:rgba(255,255,255,.1);color:#d8cfc0;font-size:11.5px;font-family:var(--font-body);
  cursor:pointer;opacity:0;transition:opacity .2s,background .2s;
}
.nt-body pre:hover .code-copy,.md-body pre:hover .code-copy,.rte-body pre:hover .code-copy{opacity:1}
.code-copy:hover{background:rgba(224,154,74,.45);color:#fff}
/* 行内代码：琥珀调（pre 内还原） */
.nt-body code,.md-body code,.rte-body code{
  font-family:var(--font-mono);font-size:.86em;
  background:rgba(224,154,74,.12);color:#a3641f;
  border:1px solid rgba(224,154,74,.2);border-radius:6px;padding:2px 7px;
}
html[data-theme="dark"] .nt-body code,html[data-theme="dark"] .md-body code,html[data-theme="dark"] .rte-body code{color:#e6b072}
.nt-body pre code,.md-body pre code,.rte-body pre code{
  background:none;border:none;padding:0;color:inherit;font-size:inherit;border-radius:0;
}
/* 引用块（markdown / 富文本补齐，与旧格式 .nt-quote 同语言） */
.md-body blockquote,.rte-body blockquote{
  margin:22px 0;padding:14px 20px;border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--accent-muted);
  color:var(--text-secondary);font-size:14.5px;line-height:1.9;
}
/* 分割线 → ✦ 装饰符 */
.nt-body hr,.md-body hr,.rte-body hr{
  border:none;margin:36px 0;text-align:center;line-height:0;
}
.nt-body hr::after,.md-body hr::after,.rte-body hr::after{
  content:'✦  ✦  ✦';font-size:11px;color:var(--accent-text);opacity:.6;letter-spacing:8px;
}
/* 表格 */
.md-body table,.rte-body table{
  width:100%;border-collapse:separate;border-spacing:0;margin:22px 0;font-size:13.5px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-soft);
}
.md-body th,.rte-body th{background:var(--accent-muted);color:var(--text-primary);font-weight:600}
.md-body th,.md-body td,.rte-body th,.rte-body td{padding:9px 14px;border-bottom:1px solid var(--border-subtle);text-align:left}
.md-body tr:last-child td,.rte-body tr:last-child td{border-bottom:none}
/* markdown 正文基础排印（与旧格式 .nt-p 同节奏） */
.md-body p{margin:0 0 18px;font-size:15px;line-height:2;color:var(--text-secondary);word-break:break-word}
.md-body h2,.md-body h3{font-family:var(--font-display);color:var(--accent-text);margin:34px 0 16px;line-height:1.4}
.md-body h2{font-size:21px;font-weight:800}
.md-body h3{font-size:17px;font-weight:700}
.md-body ul,.md-body ol{margin:0 0 18px;padding-left:24px;color:var(--text-secondary);font-size:15px;line-height:2}
.md-body img,.rte-body img{border-radius:14px}
/* 手机端适配兜底：正文里的视频/内嵌块一律不超出版心（img 全局已有 max-width:100%） */
.md-body video,.rte-body video,.md-body iframe,.rte-body iframe,.nt-body video,.nt-body iframe{max-width:100%}
/* ---------- 一行两张（图文并排）与照片描述（图注） ----------
   并排 = flex 行，两侧等宽顶对齐；窄屏（≤560px）自动上下堆叠，
   保证任何屏宽下都不出现「两张图挤成一条」的不合理显示。 */
.rte-figrow{display:flex;gap:12px;align-items:flex-start;margin:22px 0;clear:both;justify-content:center}
.rte-figrow>.rte-fig{flex:1 1 0;min-width:0;margin:0;float:none;width:auto;display:block}
.rte-figrow>.rte-fig>img{width:100%;height:auto;display:block;margin:0 auto}
.rte-fig{margin:18px 0;text-align:center}
.rte-fig>img{display:block;margin:0 auto}
/* 兜底居中：缩放过（有 inline width）但从未设环绕方式的裸图 → 居中独立块。
   覆盖编辑器（.rte-content，所见即所得）与阅读端（.md-body/.rte-body）；
   浮动（float）/绝对定位（absolute）/已设 margin 的图一律不命中，环绕行为不受影响 */
.md-body img[style*="width"]:not([style*="float"]):not([style*="absolute"]):not([style*="margin"]),
.rte-body img[style*="width"]:not([style*="float"]):not([style*="absolute"]):not([style*="margin"]),
.rte-content img[style*="width"]:not([style*="float"]):not([style*="absolute"]):not([style*="margin"]){display:block;margin:10px auto}
.rte-fig figcaption,.rte-figcap{
  margin-top:8px;font-size:12.5px;line-height:1.75;color:var(--text-muted);text-align:center;font-style:normal;
}
@media (max-width:560px){
  .rte-figrow{flex-direction:column;gap:14px}
  /* 堆叠后主轴变纵向：inline 的 flex:0 0 30%（横排定宽用）会作用到高度上，必须重置；
     宽度分层：没缩过的成员走 CSS width:100% 全宽，缩过的成员 inline width 优先级更高
     自动保留缩放宽度（所见即所得），margin auto 居中 */
  .rte-figrow>.rte-fig{flex:initial !important;width:100%;margin:0 auto}
}
/* 「浮于文字上方 / 衬于文字下方」是编辑器里的排版手法：图片坐标是按编辑器版面写死的像素，
   阅读端（尤其手机）文字流宽窄高矮完全不同，钉在原坐标只会压在文字上 → 整页错乱。
   窄屏阅读时一律降级为普通流内块级图（保留百分比宽度），保证任何屏宽下排版正常。 */
@media (max-width:760px){
  .md-body img[style*="absolute"],.rte-body img[style*="absolute"],
  .md-body figure[style*="absolute"],.rte-body figure[style*="absolute"]{
    position:static !important;display:block !important;float:none !important;
    left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;
    z-index:auto !important;margin:18px auto !important;
  }
  /* 编辑器里的连续空行（<p><br></p>）是桌面上给「浮于文字上方」图片腾位置留的；
     手机端图片已降级为普通流内图，空行只剩一大段无意义空白 → 压成近零高度，
     图片与正文保持紧凑间距。:has 不支持的旧内核自动跳过（维持原样，不劣化）。 */
  .md-body p:has(>br:only-child),.rte-body p:has(>br:only-child){
    margin:0 !important;height:2px;font-size:0;line-height:2px;overflow:hidden;
  }
  /* 触摸目标：图标按钮与文字链撑到 ≥40px —— 视觉几乎不变，手指点得中
     （实测顶栏图标 34×34、面包屑 25×18、页脚链接 27×18，都低于 40 的推荐值） */
  .search-toggle,.theme-toggle{width:40px;height:40px}
  .menu-toggle{width:42px;height:42px}
  .section-link,.hero-link{display:inline-block;padding:8px 2px}
  .site-footer a{display:inline-block;padding:9px 3px}
  .gd-crumb a{padding:10px 4px}
  .ab-link{padding:7px 2px}
  .nt-mini-btn,.nt-cm-toggle{min-height:38px}
  /* 筛选栏胶囊 / 章节下拉：手机端撑到 40px 高（实测仅 32~33px） */
  .fchip,select.fchap{min-height:40px}
  /* 空状态里的行动链接（如「去看小说连载 →」实测 110×20，太扁） */
  .empty a{display:inline-block;padding:9px 2px}
  /* 站点 logo：用伪元素向外扩 4px 点击热区，不改动头部高度（实测 137×33） */
  .logo.group{position:relative}
  .logo.group::after{content:'';position:absolute;left:-2px;right:-2px;top:-5px;bottom:-5px}
  /* 小字号下限：11.5px（手机上看 10~11px 太吃力） */
  .post-card-tag,.gal-tag,.nt-tag,.arch-type,.hero-badge{font-size:11.5px}
}
/* 小节标题加 ✦ 前缀 */
.nt-h2::before,.md-body h2::before{content:'✦';margin-right:9px;font-size:14px;opacity:.75;vertical-align:2px}

/* ---------- 栏目标题装饰短线 ---------- */
.section-title::after{
  content:'';display:block;width:36px;height:3px;border-radius:2px;margin-top:10px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ---------- 空状态装饰 ---------- */
.empty::before{content:'✦';display:block;font-size:20px;color:var(--accent-text);opacity:.5;margin-bottom:10px}
.empty.small::before{display:none}

/* ============================================================
   黑胶唱片播放器（音乐页 · 网易云歌单）
   ============================================================ */
.vinyl-player{
  margin:0 0 34px;padding:clamp(18px,4vw,34px);
  border:1px solid var(--border);border-radius:18px;
  background:var(--bg-secondary);box-shadow:var(--shadow-soft);
  /* 首屏主内容：用进场动画而非滚动渐显——播放器很高，滚动观察器（阈值）可能判不出可见度，
     会导致“第一次打开音乐页什么都没有”。这里保证插入即显示。 */
  animation:vinylIn .8s cubic-bezier(.22,.68,.24,1) both;
}
@keyframes vinylIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.vinyl-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,42px);align-items:center}
/* 唱片：黑胶沟槽 + 专辑封面标签 + 高光，播放时旋转 */
.vinyl-stage{position:relative;width:clamp(180px,24vw,230px);aspect-ratio:1;margin:14px 26px 14px 6px}
.vinyl-disc{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#14120c 0 1.5px,#201d14 1.5px 3px,#1a1810 3px 4.5px);
  box-shadow:0 12px 32px rgba(60,45,20,.32),inset 0 0 0 1px rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  animation:vspin 18s linear infinite;animation-play-state:paused;
}
.vinyl-disc.playing{animation-play-state:running}
.vinyl-disc::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,transparent 0 40deg,rgba(255,255,255,.055) 55deg,transparent 75deg 185deg,rgba(255,255,255,.04) 205deg,transparent 235deg);
}
.vinyl-ph{
  position:absolute;width:42%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e7c896,var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(26px,4vw,34px);color:rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(224,154,74,.16),0 4px 14px rgba(0,0,0,.35);
}
.vinyl-label{
  position:relative;width:42%;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px rgba(224,154,74,.16),0 4px 14px rgba(0,0,0,.35);
}
.vinyl-label.noimg{display:none}
.vinyl-spindle{
  position:absolute;width:12px;height:12px;border-radius:50%;z-index:2;
  background:#0c0b08;box-shadow:inset 0 1px 2px rgba(255,255,255,.18);
}
@keyframes vspin{to{transform:rotate(360deg)}}
/* 唱针：暂停时抬起在盘外，播放时落下 */
.vinyl-arm{
  position:absolute;top:-16px;right:-8px;width:10px;height:82%;z-index:3;
  transform-origin:50% 13px;transform:rotate(-26deg);
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.vinyl-arm::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4432,#191712);
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.vinyl-arm i{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:4px;height:calc(100% - 14px);border-radius:3px;background:linear-gradient(180deg,#8a7c5c,#4a4232)}
.vinyl-arm .va-head{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:9px;height:24px;border-radius:5px;background:linear-gradient(180deg,#c9a562,#a3641f)}
.vinyl-arm.on{transform:rotate(6deg)}
/* 信息区 */
.vinyl-kicker{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11.5px;letter-spacing:.16em;color:var(--text-muted)}
.vpulse{width:8px;height:8px;border-radius:50%;background:var(--border);flex:none;transition:background .3s}
.vpulse.on{background:var(--accent);animation:vpulse 1.2s ease-in-out infinite}
@keyframes vpulse{50%{box-shadow:0 0 0 6px rgba(201,135,58,.18)}}
.vinyl-title{margin:0 0 6px;font-family:var(--font-display);font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--text-primary);line-height:1.4}
.vinyl-artist{margin:0 0 18px;font-size:13.5px;color:var(--text-secondary);opacity:.85}
.vinyl-bar{position:relative;height:6px;border-radius:4px;background:var(--border);cursor:pointer}
.vb-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:4px;background:linear-gradient(90deg,var(--accent),#e7c896)}
.vb-fill::after{
  content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;
  border:3px solid var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.vinyl-times{display:flex;justify-content:space-between;margin:8px 0 14px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}
.vinyl-ctrls{display:flex;align-items:center;gap:14px}
/* 播放模式：图标 + 文字胶囊（顺序 / 随机 / 单曲），非顺序模式高亮 */
.v-btn.v-mode{width:auto;padding:0 16px;border-radius:23px;gap:7px;font-size:12.5px;font-family:var(--font-body)}
.v-btn.v-mode svg{width:16px;height:16px}
.v-btn.v-mode.is-on{color:var(--accent-text);background:var(--accent-muted);border-color:transparent}
.v-btn.v-mode.is-on:hover{color:var(--accent-text);background:var(--accent-muted)}
.v-btn{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--border);border-radius:50%;background:var(--surface);
  color:var(--text-secondary);cursor:pointer;transition:transform .25s,background .25s,color .25s,box-shadow .25s;
}
.v-btn svg{width:20px;height:20px}
.v-btn:hover{background:var(--accent-muted);color:var(--accent-text);transform:translateY(-2px)}
.v-btn.v-main{
  width:56px;height:56px;border:none;color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  box-shadow:0 6px 18px rgba(201,135,58,.35);
}
.v-btn.v-main svg{width:24px;height:24px}
.v-btn.v-main:hover{color:#fff;transform:translateY(-2px) scale(1.04)}
/* 歌词：上下渐隐遮罩，当前行高亮放大 */
.vinyl-lyric{
  position:relative;margin-top:24px;max-height:192px;overflow-y:auto;padding:12px 6px;text-align:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  scrollbar-width:none;
}
.vinyl-lyric::-webkit-scrollbar{display:none}
.vinyl-lyric p{margin:0;padding:7px 0;font-size:13.5px;line-height:1.9;color:var(--text-secondary);opacity:.5;transition:opacity .4s,transform .4s,color .4s;cursor:pointer}
.vinyl-lyric p.on{opacity:1;color:var(--accent-text);font-weight:600;transform:scale(1.07)}
.vinyl-lyric p.v-oneline{cursor:default;color:var(--text-muted);opacity:.8}
/* 曲目列表（限高内部滚动：整张歌单可能上百首，铺开会让页面长到失去分寸） */
.vinyl-list{
  margin-top:20px;border-top:1px dashed var(--border);
  max-height:min(44vh,420px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.vinyl-list::-webkit-scrollbar{width:8px}
.vinyl-list::-webkit-scrollbar-track{background:transparent}
.vinyl-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.vinyl-list::-webkit-scrollbar-thumb:hover{background:var(--accent-muted)}
.v-track{display:flex;align-items:center;gap:14px;padding:11px 8px;border-bottom:1px dashed var(--border);cursor:pointer;transition:background .25s,padding-left .25s}
.v-track:hover{background:var(--accent-muted);padding-left:14px}
.v-track .v-idx{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);width:24px;flex:none}
.v-track .v-name{font-size:14.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-track .v-artist{font-size:12.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.v-track .v-dur{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);flex:none}
.v-track.on{background:var(--accent-muted)}
.v-track.on .v-idx{color:var(--accent-text);font-weight:700}
.v-track.on .v-name{color:var(--accent-text);font-weight:700}
.v-track.on .v-name::after{content:' ♪';font-size:12px}
/* 本地上传分隔线 */
.gd-divider{display:flex;align-items:center;gap:14px;margin:8px 0 20px;color:var(--text-muted);font-size:12px;letter-spacing:.14em}
.gd-divider::before,.gd-divider::after{content:'';flex:1;border-top:1px dashed var(--border)}
.gd-divider span{flex:none}
/* 手机端 */
@media(max-width:640px){
  .vinyl-top{grid-template-columns:1fr;text-align:center}
  .vinyl-stage{margin:8px auto 4px}
  .vinyl-kicker{justify-content:center}
  .vinyl-bar{max-width:340px;margin-left:auto;margin-right:auto}
  .vinyl-times{max-width:340px;margin-left:auto;margin-right:auto}
  .vinyl-ctrls{justify-content:center}
  .v-btn.v-mode{padding:0 12px}
  .vinyl-lyric{max-height:150px}
  .vinyl-list{max-height:min(50vh,330px)}
  .v-track .v-artist{display:none}
}

/* 试听片段标记（未填 Cookie 或账号无 VIP 时，网易云只给试听） */
.vtrial{
  margin-left:9px;padding:1px 8px;border-radius:20px;font-size:10.5px;letter-spacing:.04em;
  color:var(--accent-text);background:var(--accent-muted);border:1px solid rgba(224,154,74,.32);
  vertical-align:1px;
}

/* ============================================================
   健壮性补丁（2026-09-13）
   ============================================================ */
/* 代码块不做硬断行，保留横向滚动 */
.nt-body pre, .nt-body code, .md-body pre, .md-body code{overflow-wrap:normal;word-break:normal}
/* 图片加载失败：隐藏破图图标，露出底层的柔和占位（由 JS 打上 img-broken 类） */
img.img-broken{
  visibility:hidden;
  background:linear-gradient(135deg,var(--surface-2,rgba(127,127,127,.10)),var(--surface-3,rgba(127,127,127,.06)));
}
/* 带容器的图片破图时给容器一个占位底色，避免塌陷出空洞 */
.nt-fig.img-broken-wrap, .post-cover.img-broken-wrap{
  background:linear-gradient(135deg,rgba(127,127,127,.10),rgba(127,127,127,.05));
  border-radius:12px;
}
/* 列表分页控件 */
.pager{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin:34px 0 6px;
}
.pager:empty{display:none}
.pg-btn{
  min-width:38px;padding:8px 13px;border-radius:12px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;
  color:var(--text-secondary);background:var(--surface);
  border:1px solid var(--border);
  transition:all .2s ease;
}
.pg-btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-strong,rgba(127,127,127,.35));transform:translateY(-1px)}
.pg-btn.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.pg-btn:disabled{opacity:.45;cursor:not-allowed}
/* 页码省略号：闭合区间被折叠时的占位（不可点，仅视觉提示） */
.pg-dot{min-width:20px;text-align:center;color:var(--text-muted);font-size:14px;user-select:none}
/* 手机端：页码按钮收窄 + 触摸目标 ≥40px（WCAG 2.5.8） */
@media (max-width:640px){
  .pg-btn{min-width:40px;min-height:40px;padding:8px 10px;font-size:13px}
  .pg-step{padding:8px 12px}
  .pg-dot{min-width:14px}
}
/* 阅读进度条 */
.reading-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:320;
  background:var(--accent);pointer-events:none;
  transition:width .12s linear;
  box-shadow:0 0 8px rgba(224,154,74,.45);
}
/* 标签浏览页 */
.tag-wrap{max-width:860px;margin:0 auto}
.tag-sec-title{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-size:19px;font-weight:800;color:var(--text-primary);
}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.tag-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;text-decoration:none;
  font-size:14px;line-height:1;color:var(--text-secondary);
  background:var(--surface);border:1px solid var(--border);
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.tag-chip:hover{color:var(--accent-text);border-color:var(--accent);transform:translateY(-2px)}
.tag-chip i{font-style:normal;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.tag-chip:hover i{color:var(--accent-text)}
.tag-chip.lv1{font-size:13px;padding:6px 13px}
.tag-chip.lv2{font-size:14.5px}
.tag-chip.lv3{font-size:16.5px;font-weight:600}
.tag-chip.lv4{font-size:19px;font-weight:800;padding:9px 19px}
.tag-chip.is-cat{background:var(--accent-muted);border-color:transparent}
@media(max-width:600px){
  .tag-cloud{gap:8px}
  .tag-chip{padding:6px 12px;font-size:13px}
  .tag-chip.lv4{font-size:16px;padding:7px 15px}
  .tag-sec-title{font-size:17px}
}
/* ========== 跨页面悬浮播放器（网易云小窗：可拖拽，贴边收缩成小圆盘） ========== */
#neFloat{
  position:fixed;right:18px;bottom:26px;z-index:240;
  width:292px;padding:10px 12px 15px;border-radius:16px;
  background:rgba(252,250,246,.88);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);color:var(--text-primary);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  transition:box-shadow .25s,opacity .25s,transform .25s,width .25s,height .25s,border-radius .25s;
}
#neFloat:active{cursor:grabbing}
#neFloat.dragging{transition:none;box-shadow:0 18px 50px rgba(0,0,0,.22)}
#neFloat[hidden]{display:none}
.nf-main{display:flex;align-items:center;gap:10px}
.nf-disc{position:relative;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:var(--bg-tertiary);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.nf-disc img{width:100%;height:100%;object-fit:cover;display:block;animation:nf-spin 9s linear infinite;animation-play-state:paused}
#neFloat.playing .nf-disc img{animation-play-state:running}
.nf-disc .nf-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent-text);font-size:18px;font-style:normal}
.nf-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nf-title{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.nf-artist{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-ctrls{display:flex;align-items:center;gap:1px;flex:none}
.nf-btn{width:28px;height:28px;border:none;background:none;padding:0;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:color .2s,background .2s}
.nf-btn:hover{color:var(--accent-text);background:var(--accent-muted)}
.nf-btn svg{width:16px;height:16px;pointer-events:none}
.nf-btn.nf-play{width:32px;height:32px;color:var(--accent-text)}
.nf-btn.nf-play svg{width:20px;height:20px}
.nf-btn.nf-mode.on{color:var(--accent-text)}
.nf-bar{position:absolute;left:14px;right:14px;bottom:7px;height:3px;border-radius:2px;background:var(--border-subtle);overflow:hidden}
.nf-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.nf-close{position:absolute;top:3px;right:7px;width:20px;height:20px;border:none;background:none;padding:0;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .2s,color .2s}
.nf-close:hover{opacity:1;color:var(--text-primary)}
/* 收缩态：吸附在页面边缘的小圆盘，点按或拖出恢复完整形态 */
#neFloat.nf-dock{width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer}
#neFloat.nf-dock .nf-meta,
#neFloat.nf-dock .nf-ctrls,
#neFloat.nf-dock .nf-close,
#neFloat.nf-dock .nf-bar{display:none}
#neFloat.nf-dock .nf-main{width:48px;height:48px;justify-content:center}
#neFloat.nf-dock .nf-disc{width:36px;height:36px}
@keyframes nf-spin{to{transform:rotate(360deg)}}
html[data-theme=dark] #neFloat{background:rgba(26,23,20,.88);border-color:rgba(240,235,227,.14)}
@media (max-width:760px){
  /* 手机端：第一行 = 封面 + 歌名/歌手，第二行 = 控制键整行居中（避免信息列被挤没） */
  #neFloat{right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:236px;padding:10px 12px 17px}
  .nf-main{flex-wrap:wrap;row-gap:0}
  .nf-meta{flex:1 1 auto;min-width:0}
  .nf-ctrls{flex:1 0 100%;justify-content:center;gap:8px;margin-top:3px}
  #neFloat.nf-dock{width:44px;height:44px}
  #neFloat.nf-dock .nf-main{width:44px;height:44px}
  #neFloat.nf-dock .nf-disc{width:33px;height:33px}
  #neFloat.nf-dock .nf-ctrls{display:none}
}
/* ========== 白天+壁纸：裸底（卡片外）次级小字白色柔晕 ==========
   遮罩调薄(0.528)后，--text-muted(#675e58) 直接压在壁纸亮部（水面反光带），
   实测对比度最低 1.25:1。加多层白色柔晕把字形从亮底上托出来，
   不加深字色（保住「次要」层级）。黑夜壁纸深底不需要，不适用。 */
html:not([data-theme="dark"]) body.wp-site .section-link,
html:not([data-theme="dark"]) body.wp-site .footer-desc,
html:not([data-theme="dark"]) body.wp-site .footer-links a,
html:not([data-theme="dark"]) body.wp-site .footer-copy,
html:not([data-theme="dark"]) body.wp-site .footer-admin-link{
  text-shadow:
    0 0 5px rgba(255,255,255,.95),
    0 0 12px rgba(255,255,255,.75),
    0 0 22px rgba(255,255,255,.5),
    0 1px 1px rgba(255,255,255,.9);
}


/* ========== 2026-09-20 可读性修补（白天遮罩调薄 0.20 后的连带问题，UI 自检发现） ========== */
/* ① 空态/加载提示：无卡片直接压壁纸，改浅色字+轻暗晕，深浅壁纸都可读 */
html:not([data-theme="dark"]) body.wp-site .empty,
html:not([data-theme="dark"]) body.wp-site .loading{
  color:#f0ebe3;
  text-shadow:0 1px 2px rgba(8,11,20,.55),0 0 10px rgba(8,11,20,.4);
}
/* ② 子页金色副标题压壁纸亮部（人物毛衣）几乎看不清：加极轻柔和暗晕托底，
   不动金色、非硬描边 */
html:not([data-theme="dark"]) body.wp-site .hero-section.page-hero .hero-sub{
  text-shadow:0 1px 3px rgba(8,11,20,.5),0 0 10px rgba(8,11,20,.35);
}
/* ③ 「查看全部」小字压亮壁纸仍偏弱：白色柔晕保留，字色加深一档提对比 */
html:not([data-theme="dark"]) body.wp-site .section-link{
  color:#565d68;
}

/* ========== 2026-10-07 自检修补③：白天+全站壁纸，裸压壁纸的正文文字 ==========
   纸面遮罩全浓度要到 hero+12vh（首页 hero 92vh 时坡道藏在 hero 内看不见），
   但子页 hero 只有 ~350px，正文紧跟其后 ~16px —— 归档条目、区块标题、时间线
   等深色文字整段落在这段近乎无遮罩的坡道上，直接压在壁纸上（实测最低 1.07:1，
   「随笔 一」几乎隐形）。遮罩浓度（09-19 用户定稿）与 hero 暗晕（09-20 定稿）
   都不动；沿用页脚已验证的白色柔晕方案把字形从壁纸上托出来。黑夜不适用。 */
html:not([data-theme="dark"]) body.wp-site .arch-ym,
html:not([data-theme="dark"]) body.wp-site .arch-title,
html:not([data-theme="dark"]) body.wp-site .arch-date,
html:not([data-theme="dark"]) body.wp-site .arch-count,
html:not([data-theme="dark"]) body.wp-site .tag-sec-title,
html:not([data-theme="dark"]) body.wp-site .section-title,
html:not([data-theme="dark"]) body.wp-site .home-gal-kicker,
html:not([data-theme="dark"]) body.wp-site .gal-recent-label,
html:not([data-theme="dark"]) body.wp-site .ab-sec-title,
html:not([data-theme="dark"]) body.wp-site .ab-sec-sub,
html:not([data-theme="dark"]) body.wp-site .tl-date,
html:not([data-theme="dark"]) body.wp-site .tl-text,
html:not([data-theme="dark"]) body.wp-site .nt-kicker,
html:not([data-theme="dark"]) body.wp-site .hero-scroll-hint{
  text-shadow:
    0 0 5px rgba(255,255,255,.95),
    0 0 12px rgba(255,255,255,.75),
    0 0 22px rgba(255,255,255,.5),
    0 1px 1px rgba(255,255,255,.9);
}
/* 卡片上的标签胶囊：--accent-muted 只有 12% 不透明度，垫在 0.78 白卡上被壁纸
   透色（实测 3.49:1）——恢复成不透明等效色，与无壁纸时的观感/对比度完全一致。
   tech-pill:hover 换实底橙的交互要跟回来（上面规则特异性更高） */
html:not([data-theme="dark"]) body.wp-site .post-card-tag,
html:not([data-theme="dark"]) body.wp-site .nt-tag,
html:not([data-theme="dark"]) body.wp-site .tech-pill{
  background:#f7eee4;
}
html:not([data-theme="dark"]) body.wp-site .tech-pill:hover{
  background:var(--accent);
}
/* 卡片（0.78 白）上的次级小字：壁纸深色透入后余量不足（3.0~3.9:1），
   轻柔晕托底，不加深字色（保住「次要」层级观感） */
html:not([data-theme="dark"]) body.wp-site .post-meta-item,
html:not([data-theme="dark"]) body.wp-site .post-card-desc,
html:not([data-theme="dark"]) body.wp-site .nt-card-meta,
html:not([data-theme="dark"]) body.wp-site .nt-card-excerpt,
html:not([data-theme="dark"]) body.wp-site .ab-link{
  text-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 10px rgba(255,255,255,.65),
    0 1px 1px rgba(255,255,255,.85);
}


/* ============================================================
   代码块 v2（markdown.js 围栏渲染）：语言标签栏 + 常驻复制按钮 + 高亮
   深色暖底昼夜通用（沿用旧 mac 代码块的 #2b2620 底色）
   ============================================================ */
.codeblk{
  margin:24px 0;border-radius:12px;overflow:hidden;
  background:#2b2620;border:1px solid rgba(224,164,94,.15);
  box-shadow:var(--shadow-soft);
}
.codeblk-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px 7px 15px;
  background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.07);
}
.codeblk-lang{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:#a89880;text-transform:lowercase;user-select:none;
}
/* bar 里的复制按钮：常驻可见（手机没有 hover，覆盖旧 pre 内 hover 注入样式的定位） */
.codeblk-bar .code-copy{position:static;opacity:1;flex:none}
.codeblk-bar .code-copy.ok{background:rgba(76,175,80,.4);color:#fff}
.codeblk pre{
  margin:0;border:none;border-radius:0;box-shadow:none;background:transparent;
  padding:14px 18px;color:#ece4d6;overflow:auto;
  font-family:var(--font-mono);font-size:13px;line-height:1.75;
}
.codeblk pre::before{display:none}
/* 高亮配色（暖深底，琥珀为基准色） */
.codeblk .hl-cm{color:#8d8171;font-style:italic}
.codeblk .hl-str{color:#a9c88f}
.codeblk .hl-num{color:#e6b072}
.codeblk .hl-kw{color:#e8a0bf}
.codeblk .hl-tag{color:#82b8d8}

/* 灯箱 EXIF 参数行（v2·契合 UI）：照片正下方独立一行，无底色块不叠图，
   暖白低透明 + 等宽小字，与全站 #f0ebe3 文字体系一致的暗房气质 */
.gd-lb-exif{
  position:static;flex:none;max-width:92vw;padding:0 16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;line-height:1.6;
  color:rgba(240,235,227,.55);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  pointer-events:none;user-select:none;
}

/* ============================================================
   强调色填充上的文字对比度修正（WCAG 2.1 AA · 1.4.3）
   ------------------------------------------------------------
   实测：白字压在品牌橙上只有 2.36:1（#e09a4a 在白底/黑底同值），
   远低于 AA 要求的 4.5:1，小字号（如 11px 的归档类型徽标）尤难辨认。
   做法：品牌橙的色值一点不动（--accent / 渐变全部保留），
   只把「铺在橙底上的文字」换成深暖棕 → 对比度提升到 5.5~7.9:1。
   深色底上的白字（画廊遮罩、灯箱、代码块等）不在此列，保持原样。
   想回到白字：把下面 --on-accent 改成 #fff 即可，一行回滚。
   ------------------------------------------------------------ */
:root{--on-accent:#1f1002}
.hero-btn.solid,.about-btn,.btn,.play-btn,.like-btn.liked,
.auth-tab.active,.badge,.tech-pill:hover,.gb-toggle,.gb-submit,
.gd-page-btn.is-on,.nt-cm-toggle,.nt-fab-btn.is-accent,.gb-owner-tag,
.gs-post,.fchip.on,.pg-btn.on,.arch-type,.friend-av{
  color:var(--on-accent);
}



/* ===== 小说书架（App 式封面网格，10-19） ===== */
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:30px 22px}
.shelf-book{display:block;text-decoration:none}
.shelf-cover{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--card,#221c17);box-shadow:0 10px 26px rgba(0,0,0,.30);transition:transform .25s ease,box-shadow .25s ease}
.shelf-cover img{width:100%;height:100%;object-fit:cover;display:block}
.shelf-book:hover .shelf-cover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,.38)}
.shelf-badge{position:absolute;top:10px;right:10px;font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:1px;backdrop-filter:blur(4px)}
.shelf-resume{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:12px;padding:16px 10px 8px}
.shelf-title{margin-top:11px;font-weight:600;font-size:15px;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-meta{margin-top:3px;font-size:12px;color:var(--text-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 书目页头部 */
.nv-head{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap}
.nv-cover{width:200px;flex:0 0 auto;aspect-ratio:3/4}
.nv-info{flex:1;min-width:260px}
.nv-title{font-size:30px;font-weight:700;color:var(--text);margin:0 0 10px;letter-spacing:1px}
.nv-meta{font-size:13px;color:var(--accent-text);margin:0 0 12px;letter-spacing:.5px}
.nv-desc{font-size:14px;line-height:1.9;color:var(--text-muted);margin:0 0 22px;max-width:640px}
.nv-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){
  .shelf-grid{grid-template-columns:repeat(3,1fr);gap:20px 14px}
  .nv-head{gap:18px}
  .nv-cover{width:132px}
  .nv-title{font-size:23px}
}