/* ============================================================
   MicroBlog — 微语为主的微博式个人主题
   基于 Typecho 1.3 模板 API
   ============================================================ */

/* ---------- 字体：与 niRvana-diy 同一套（Play 本地字体 + 系统中文字体回退） ---------- */
@font-face {
  font-family: Play;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Play-regular.ttf) format("truetype");
}

@font-face {
  font-family: Play;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Play-bold.ttf) format("truetype");
}

/* 庞门正道标题体：中文标题字（头图横幅 / 博主资料卡）
   文件来自 fonts/PangMenZhengDaoBiaoTiTi.woff2，子集字体，只用于标题，
   正文仍用 Play + 系统字体，避免小字号笔画糊在一起 */
@font-face {
  font-family: PangMenZhengDao;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/PangMenZhengDaoBiaoTiTi.woff2) format("woff2");
}

/* 锐字云字库行楷体（GBK）子集：页面标题条的「主标题 + 副标题」共用
   主标题 39 字：关于博主 / 左邻右舍 / 留言榜单 / 文章归档 / 博友动态 / 微言微语 / 熊霸天下
   + 友情链接 + 日记 生活 新 我 最 全 部 更 多（改标题时的常用字）
   副标题又并进 6 条实际文案的全部用字（含 0 8 与，、。等全角标点），合计 108 字。
   源文件「锐字云字库行楷体GBK.TTF」6.96MB / 11045 字符，
   子集后 fonts/xingkai-title.woff2 34.7KB（108 字 + .notdef）。
   只供 .page-microblog-title h1 / p（独立页 / 首页的标题条）使用：
   头图横幅 .mb-page-hero-title、横幅副标题 .mb-page-hero-sub 仍用原有字体，别混。
   字体族名用自造的 "MB XingKai"，避免命中访客本机安装的同名字体。
   注意：字集外的字会逐个回退系统楷体，后台改标题 / 副标题文案出现生字要重跑子集
   （脚本见 历史修改/MicroBlog-after-subbar-xbd-font-20261112/build_xingkai.py），
   且重跑后必须提升 ?v= 版本号（文件名不变时浏览器会吃旧缓存）。 */
@font-face {
  font-family: "MB XingKai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/xingkai-title.woff2?v=3) format("woff2");
}

/* ---------- 设计令牌 ---------- */
:root {
  /* 行楷字体栈：挂在页面标题条的主标题与副标题（.page-microblog-title h1 / p）；
     头图横幅 .mb-page-hero-title 用的是 PangMenZhengDao，两者别混。
     想临时用在别处可加 class="mb-xbd" */
  --mb-font-xbd: "MB XingKai", "CloudKaiXingGBK", "锐字云字库行楷体GBK", "KaiTi", "STKaiti", serif;

  --mb-accent: #1e88e5;
  --mb-accent-2: #00b0ff;
  --mb-accent-deep: #1565c0;

  --mb-glass-bg: rgba(255, 255, 255, 0.55);
  --mb-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --mb-glass-bg-soft: rgba(255, 255, 255, 0.38);
  --mb-glass-bg-soft-2: rgba(216, 216, 219, 0.38);
  --mb-glass-border: rgba(255, 255, 255, 0.65);
  --mb-glass-border-2: rgba(31, 80, 160, 0.1);
  --mb-glass-highlight: rgba(255, 255, 255, 0.85);

  /* 平涂卡内凹面（进度条轨道 / 未达成刻度点 / 日期块）：描边皮肤下卡片是
     平涂浅底，白色 glass 令牌白上白不可见，改用灰蓝；暗色取暗玻璃现值，
     暗色主题外观不变。2026-11-11 十年之约区块修复引入 */
  --mb-inset-bg: rgba(216, 216, 219, 0.38);
  --mb-inset-line: #a6b5c7;

  --mb-text-1: #475669;
  --mb-text-2: #48627f;
  --mb-text-3: #7c93ac;

  --mb-shadow: 0 8px 32px rgba(30, 84, 160, 0.14);
  --mb-shadow-hover: 0 14px 40px rgba(30, 84, 160, 0.20);

  --mb-radius: 18px;
  --mb-radius-lg: 24px;
  --mb-radius-sm: 12px;

  /* 标题字体栈：庞门正道标题体优先，缺字时回退 Play / 系统字体 */
  --mb-font-title: PangMenZhengDao, Play, "PingFang SC", "Microsoft YaHei", sans-serif;

  --mb-blur: 26px;

  /* 后台「全局宽度」由 <html style> 注入 --mb-width；此处为兜底值。
     .mb-container 的左右 padding 各 24px，故容器外框 +48px，
     内部可见区块（导航/横幅/微语流/分页/页脚/文章卡片）恰好都是 --mb-width。 */
  --mb-width: 880px;
  --mb-container: calc(var(--mb-width) + 48px);

  --mb-grad-hero: linear-gradient(135deg, #0d47a1 0%, #1565c0 38%, #1e88e5 66%, #00b0ff 100%);
  --mb-link: #1565c0;

  /* PANDA Studio 视觉令牌：原在 css/panda.css 的 :root / html[data-dark]，
     2026-11-11 合并到本文件，style.css 自此是唯一权威。 */
  --pn-primary: #1f8bff;
  --pn-analogous: #33bbff;
  --pn-gray: #5578a1;
  --pn-dark: #32465e;
  --pn-nav-top: #cdd8e9;
  --pn-nav-bg: rgba(210, 230, 255, .65);
  --pn-white-6: rgba(255, 255, 255, .6);
  --pn-white-8: rgba(255, 255, 255, .8);
  --pn-white-15: rgba(255, 255, 255, .15);
  --pn-nav-line: rgba(255, 255, 255, .95);
  --pn-nav-sheen-3: rgba(255, 255, 255, .3);
  --pn-nav-sheen: rgba(255, 255, 255, .65);
  --pn-hair: rgba(85, 120, 161, .05);
  --pn-shadow-1: rgba(85, 120, 161, .2);
  --pn-shadow-2: rgba(31, 139, 255, .05);
  --pn-footer-fade: rgba(85, 120, 161, .2);
  --pn-footer-shadow: rgba(85, 120, 161, .1);
  --pn-anchor-shadow: rgba(31, 139, 255, .6);
  --pn-hover-bg: rgba(31, 139, 255, .08);
  --pn-edge-line: rgba(85, 120, 161, .15);
  --pn-edge-glow: rgba(255, 255, 255, .2);
  --pn-sub-bg: rgba(213, 234, 255, .84);
  /* 页脚版权行浮雕字效：对应参考站 --white-opacity-5 / --primary-gray-opacity-4
     （--primary-gray 已由上面的 --pn-gray 承担，同值 #5578a1） */
  --pn-foot-hi: rgba(255, 255, 255, .3);
  --pn-foot-sh: rgba(85, 120, 161, .4);
  /* 参考站 .text-embossed 的原样值：一条 1px 白色下高光 */
  --pn-foot-emboss: 0 1px 0 rgba(255, 255, 255, .5);
  /* 页脚链接色：参考站 --primary-gray-opacity-7（.7 的灰蓝） */
  --pn-gray-7: rgba(85, 120, 161, .7);
}

html[data-dark="1"] {
  --mb-glass-bg: rgba(17, 28, 46, 0.58);
  --mb-glass-bg-strong: rgba(22, 34, 54, 0.78);
  --mb-glass-bg-soft: rgba(17, 28, 46, 0.40);
  --mb-glass-border: rgba(255, 255, 255, 0.09);
  --mb-glass-highlight: rgba(255, 255, 255, 0.14);

  /* 平涂卡内凹面：暗色沿用原暗玻璃值，外观不变 */
  --mb-inset-bg: rgba(17, 28, 46, 0.40);
  --mb-inset-line: rgba(255, 255, 255, 0.09);

  --mb-text-1: #e8f1fd;
  --mb-text-2: #a7bbd4;
  --mb-text-3: #6d84a0;

  --mb-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --mb-shadow-hover: 0 14px 44px rgba(0, 0, 0, 0.55);

  --mb-link: #64b5f6;
  --mb-grad-hero: linear-gradient(135deg, #0a2a5e 0%, #0d47a1 40%, #1565c0 70%, #0277bd 100%);

  /* PANDA Studio 视觉令牌：原在 css/panda.css 的 :root / html[data-dark]，
     2026-11-11 合并到本文件，style.css 自此是唯一权威。 */
  --pn-primary: #64b5f6;
  --pn-analogous: #4fc3f7;
  --pn-gray: #a6bedb;
  --pn-dark: #e8f1fd;
  --pn-nav-top: #0a101d;
  --pn-nav-bg: rgba(18, 34, 58, .72);
  --pn-white-6: rgba(255, 255, 255, .1);
  --pn-white-8: rgba(255, 255, 255, .14);
  --pn-white-15: rgba(255, 255, 255, .04);
  --pn-nav-line: rgba(255, 255, 255, .22);
  --pn-nav-sheen-3: rgba(255, 255, 255, .04);
  --pn-nav-sheen: rgba(255, 255, 255, .07);
  --pn-hair: rgba(120, 160, 210, .16);
  --pn-shadow-1: rgba(0, 0, 0, .38);
  --pn-shadow-2: rgba(0, 0, 0, .22);
  --pn-footer-fade: rgba(120, 160, 210, .12);
  --pn-footer-shadow: rgba(0, 0, 0, .3);
  --pn-anchor-shadow: rgba(100, 181, 246, .45);
  --pn-hover-bg: rgba(100, 181, 246, .12);
  --pn-edge-line: rgba(120, 160, 210, .2);
  --pn-edge-glow: rgba(255, 255, 255, .06);
  --pn-sub-bg: rgba(18, 34, 58, .92);
  /* 浮雕字效在深色下翻转：白描边压到几乎不可见，投影换成纯黑 */
  --pn-foot-hi: rgba(255, 255, 255, .06);
  --pn-foot-sh: rgba(0, 0, 0, .45);
  --pn-foot-emboss: 0 1px 0 rgba(0, 0, 0, .45);
  /* 深色下拉高不透明度，保证 .7 合成后仍有足够对比度 */
  --pn-gray-7: rgba(166, 190, 219, .8);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* 预留固定的滚动条槽位：短页面（关于/留言/友情链接）不显示滚动条时也占住同一宽度，
   否则从这些页面回到主页会因滚动条凭空出现（15px）导致整页内容横移约 7.5px。
   stable 而非 overflow-y:scroll —— 后者会让短页面右侧常驻一条可见滚动条轨道。 */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  /* 底色必须画在 html 上，body 保持透明。
     一旦 html 有背景，body 的背景就不再「传播到画布」而是自己铺一层实色，
     而 .mb-bg（z-index:-1）在绘制顺序里排在 body 背景之下 —— 于是三枚彩色柔光
     被整片盖掉，背景就退化成一整块平涂的 #dfeaf7。
     底色留在 html 还有个好处：header.php 首屏内联的 html{background:#dfeaf7}
     与这里同值，样式表到货前就不会白闪。 */
  background: #dfeaf7;
  transition: background 0.5s ease;
}

html[data-dark="1"] { background: #0a101d; }

body {
  margin: 0;
  min-height: 100vh;
  /* 竖向 flex：main 可伸展，内容再少页脚也贴在视口底部（sticky footer）。
     不用 100vh 的固定计算，pjax 换页 / 长页短页都自适应。 */
  display: flex;
  flex-direction: column;
  font-family: Play, "微软雅黑", "Microsoft YaHei UI", "Microsoft YaHei",
    "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mb-text-1);
  /* 透明：让 z-index:-1 的 .mb-bg 柔光透上来，底色由 html 负责 */
  background: transparent;
  transition: color 0.35s ease;
  overflow-x: hidden;
}

/* 正文吃掉剩余高度，页脚自然被压到底 */
main.mb-container {
flex: 1 0 auto;

  padding-top: 14px;
}

html[data-dark="1"] body { background: transparent; }

a { color: var(--mb-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--mb-accent-2); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(30, 136, 229, 0.28); }

/* ---------- 背景光斑（毛玻璃的"底料"） ---------- */
.mb-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* 说明：开 scrollbar-gutter 后，fixed 层按布局宽度（视口 - 滚动条）铺开，右侧 15px
   槽位露出的是画布底色（= html 的 #dfeaf7 / --bd-bg）。该层外扩进不去槽位
   （被滚动视口裁掉，实测），所以让柔光在右缘 18px 内淡出，槽位与相邻背景自然衔接。
   只在桌面宽度生效：移动端是覆盖式滚动条、没有槽位，淡出反而会平白削掉一条光。 */
@media (min-width: 721px) {
  .mb-bg {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  }
}

.mb-bg::before,
.mb-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

/* 三枚柔光读 --mb-bg-a/b/c 与透明度变量，缺省值即「极光蓝」预设 */
.mb-bg::before {
  width: 56vw; height: 56vw;
  top: -18vw; right: -14vw;
  background: var(--mb-bg-a, radial-gradient(circle, #6ec3ff 0%, #4f8ef7 45%, transparent 72%));
  opacity: var(--mb-bg-op-a, 0.55);
}

.mb-bg::after {
  width: 44vw; height: 44vw;
  bottom: -16vw; left: -10vw;
  background: var(--mb-bg-b, radial-gradient(circle, #9ad8ff 0%, #37c6f4 40%, transparent 70%));
  opacity: var(--mb-bg-op-b, 0.55);
}

.mb-bg .mb-bg-blob {
  position: absolute;
  width: 34vw; height: 34vw;
  top: 34vh; left: 30vw;
  border-radius: 50%;
  filter: blur(100px);
  background: var(--mb-bg-c, radial-gradient(circle, #b48cff 0%, #6f7bff 50%, transparent 74%));
  opacity: var(--mb-bg-op-c, 0.35);
}

html[data-dark="1"] .mb-bg::before { opacity: var(--mb-bg-op-a-d, 0.30); }
html[data-dark="1"] .mb-bg::after  { opacity: var(--mb-bg-op-b-d, 0.26); }
html[data-dark="1"] .mb-bg .mb-bg-blob { opacity: var(--mb-bg-op-c-d, 0.20); }

/* ------------------------------------------------------------
   背景主题预设（后台「设置外观 → 背景主题」）
   html[data-bg] 由 header.php 输出；底色（--bd-bg）在首屏内联样式里给出，
   这里只定义三枚柔光的渐变与明暗两套透明度。
   aurora（默认）不写规则，直接走上面 var() 的缺省值。
   新增预设：在 functions.php 的 mblog_bg_presets() 上加一行底色，
   再在下面补一个同名 html[data-bg="id"] 区块即可。
   ------------------------------------------------------------ */
html[data-bg="sakura"] {
  --mb-bg-a: radial-gradient(circle, #ffd1e6 0%, #ff9dc4 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #ffe1cf 0%, #ffb08c 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #e2c0ff 0%, #b18cff 50%, transparent 74%);
  --mb-bg-op-a: 0.55; --mb-bg-op-b: 0.50; --mb-bg-op-c: 0.35;
  --mb-bg-op-a-d: 0.30; --mb-bg-op-b-d: 0.24; --mb-bg-op-c-d: 0.20;
}

html[data-bg="mint"] {
  --mb-bg-a: radial-gradient(circle, #c6f7e2 0%, #6fdcb4 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #d6fbf0 0%, #86e3d6 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #bfe3ff 0%, #7fb8ff 50%, transparent 74%);
  --mb-bg-op-a: 0.50; --mb-bg-op-b: 0.46; --mb-bg-op-c: 0.30;
  --mb-bg-op-a-d: 0.26; --mb-bg-op-b-d: 0.22; --mb-bg-op-c-d: 0.18;
}

html[data-bg="sunset"] {
  --mb-bg-a: radial-gradient(circle, #ffdca8 0%, #ffab6b 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #ffc2cf 0%, #ff8fa6 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #cdb0ff 0%, #8f7bff 50%, transparent 74%);
  --mb-bg-op-a: 0.50; --mb-bg-op-b: 0.46; --mb-bg-op-c: 0.30;
  --mb-bg-op-a-d: 0.28; --mb-bg-op-b-d: 0.24; --mb-bg-op-c-d: 0.18;
}

html[data-bg="lavender"] {
  --mb-bg-a: radial-gradient(circle, #e3d4ff 0%, #b49aff 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #cfdcff 0%, #9db6ff 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #ffd4ec 0%, #ffa9d4 50%, transparent 74%);
  --mb-bg-op-a: 0.52; --mb-bg-op-b: 0.48; --mb-bg-op-c: 0.32;
  --mb-bg-op-a-d: 0.28; --mb-bg-op-b-d: 0.24; --mb-bg-op-c-d: 0.20;
}

html[data-bg="ocean"] {
  --mb-bg-a: radial-gradient(circle, #8fd8ff 0%, #3d92e6 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #9df0e6 0%, #3cc0b8 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #a3b6ff 0%, #6b78e6 50%, transparent 74%);
  --mb-bg-op-a: 0.45; --mb-bg-op-b: 0.42; --mb-bg-op-c: 0.28;
  --mb-bg-op-a-d: 0.26; --mb-bg-op-b-d: 0.22; --mb-bg-op-c-d: 0.16;
}

html[data-bg="galaxy"] {
  --mb-bg-a: radial-gradient(circle, #b79cff 0%, #7a5cff 45%, transparent 72%);
  --mb-bg-b: radial-gradient(circle, #8fb8ff 0%, #4f7bff 40%, transparent 70%);
  --mb-bg-c: radial-gradient(circle, #ff9ee0 0%, #d06bff 50%, transparent 74%);
  --mb-bg-op-a: 0.50; --mb-bg-op-b: 0.46; --mb-bg-op-c: 0.30;
  --mb-bg-op-a-d: 0.34; --mb-bg-op-b-d: 0.30; --mb-bg-op-c-d: 0.26;
}

/* ---------- 毛玻璃面板基类 ---------- */
.mb-glass {
  position: relative;
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
}

/* 顶部镜面高光（Liquid Glass 质感核心） */
.mb-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    var(--mb-glass-highlight) 0%,
    rgba(255, 255, 255, 0.12) 28%,
    transparent 55%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  pointer-events: none;
}

/* ---------- 布局容器 ---------- */
.mb-container {
  /* width:100% 不能省：body 是竖向 flex，下面的 margin:0 auto 会在交叉轴上
     吸收剩余空间，让容器放弃 stretch 退化成 fit-content（友链页实测只有 776px）。 */
  width: 100%;
  max-width: var(--mb-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 顶部导航 ---------- */
.mb-nav-wrap {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  position: sticky;
  top: 0;
  z-index: 999;
  height: 56px;
  padding: 0;
  background: linear-gradient(var(--pn-nav-top), transparent);
}

.mb-nav {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
  margin: 4px 7px 0;
  padding: 0;
  border-radius: 8px; /* 目标站 .5em @16px = 8px */
  background-color: var(--pn-nav-bg);
  /* 目标站的两层高光：顶部 1px 白线 + 上半部玻璃反光 + 底部渐亮 */
  background-image:
    linear-gradient(transparent 1px, var(--pn-nav-line) 1px, var(--pn-nav-sheen-3) 26px,
                    transparent 26px, transparent),
    linear-gradient(transparent, var(--pn-nav-sheen));
  background-repeat: no-repeat;
  background-position: 0 -1px, 0;
  -webkit-backdrop-filter: blur(8px) brightness(.6) saturate(6);
  backdrop-filter: blur(8px) brightness(.6) saturate(6);
  box-shadow:
    0 0 0 1px var(--pn-white-6) inset,
    0 0 0 1px var(--pn-hair),
    0 8px 10px var(--pn-shadow-1),
    0 8px 10px var(--pn-shadow-2);
  transition: ease-out .35s;
}

.mb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  color: var(--mb-text-1);
  letter-spacing: 0.5px;
}

.mb-brand:hover { color: var(--mb-text-1); }

.mb-brand-dot {
display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;

  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--pn-analogous), var(--pn-primary));
  box-shadow: 0 3px 8px var(--pn-shadow-1);
}

.mb-nav-menu {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  /* 下拉菜单要超出导航条显示，这里不能裁切；窄屏再单独打开横向滚动 */
  overflow: visible;
}

.mb-nav-menu a {
  position: relative;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--mb-text-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.mb-nav-menu a:hover {
  color: var(--mb-accent);
  background: rgba(30, 136, 229, 0.10);
}

.mb-nav-menu a.current {
  color: var(--mb-accent);
  background: rgba(30, 136, 229, 0.14);
  font-weight: 600;
}

.mb-nav-menu a.current::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mb-accent-deep), var(--mb-accent-2));
}

.mb-nav-actions {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 8px;
}

.mb-icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mb-text-2);
  font-size: 17px;
  transition: all 0.25s ease;
}

.mb-icon-btn:hover {
  color: var(--mb-accent);
  border-color: rgba(30, 136, 229, 0.4);
  transform: translateY(-1px);
}

/* ---------- 横幅 Hero ---------- */
.mb-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mb-radius-lg);
  min-height: calc(210px * 1.25);   /* 原 210px，+25% → 262.5px（与独立页 .mb-page-hero 同高，视觉统一） */
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--mb-grad-hero);
  box-shadow: var(--mb-shadow);
  margin-bottom: 28px;
}

.mb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(340px 340px at 86% 22%, rgba(255,255,255,0.22), transparent 70%),
    radial-gradient(240px 240px at 70% 90%, rgba(0, 176, 255, 0.35), transparent 70%);
  pointer-events: none;
}

/* 首页横幅头图（后台「首页横幅头图」上传后生效；留空则用上面的蓝色渐变） */
.mb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* 头图上的暗色蒙版：保证白色标题在明亮照片上也读得清 */
.mb-hero.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 18, 40, .26) 0%, rgba(5, 18, 40, .46) 52%, rgba(5, 18, 40, .80) 100%),
    linear-gradient(90deg, rgba(4, 16, 34, .50) 0%, rgba(4, 16, 34, .10) 72%);
}

/* 文字与装饰方块压在蒙版之上 */
.mb-hero.has-img .mb-hero-title,
.mb-hero.has-img .mb-hero-sub,
.mb-hero.has-img .mb-hero-cube { z-index: 2; }

/* 装饰玻璃立方 */
.mb-hero-cube {  position: absolute;
  border-radius: 22%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: rotate(18deg);
  box-shadow: 0 8px 28px rgba(9, 40, 90, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.mb-hero-cube.c1 { width: 110px; height: 110px; top: 26px;  right: 120px; }
.mb-hero-cube.c2 { width: 70px;  height: 70px;  top: 130px; right: 250px; transform: rotate(-14deg); }
.mb-hero-cube.c3 { width: 46px;  height: 46px;  top: 60px;  right: 40px;  transform: rotate(32deg); }

/* 有天气时立方不挪位置：天气直接叠在立方之上（DOM 里天气在立方之后、同为 z-index:2，
   后者绘制在上层），让右缘保持原本的玻璃簇构图。 */


/* 横幅天气：融入背景的「此刻」天气水印。
   不加卡片底色，靠右缘那团柔光 + hero 自带的玻璃立方做衬托，
   温度与天气文字沿用 hero 标题的斜体标题体与柔影，看起来像背景的一部分。
   数据由 js/page_microblog_weather.js 的 niRvanaHeroWeatherInit 填入；
   接口失败 / 城市解析不到时一直 opacity:0，等于不存在。 */
.mb-hero-weather {
  position: absolute;
  right: 40px;
  top: 50%;
  width: 20%;               /* 图标占头图宽度的 20%，靠右放 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 读数左对齐，落在图标左下方 */
  transform: translateY(-50%);
  z-index: 2;               /* 压在头图蒙版（has-img::after, z-index:1）之上 */
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
}
.mb-hero-weather.is-ready { opacity: 1; }

/* 柔光：让图标与温度像是从背景光斑里透出来 */
.mb-hero-weather::before {
  content: "";
  position: absolute;
  right: -54px;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.mb-hero-weather-icon {
  position: relative;
  display: block;
  width: 100%;
}
.mb-hero-weather-icon svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.82;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  filter: drop-shadow(0 3px 8px rgba(6, 42, 96, .28)) drop-shadow(0 14px 30px rgba(6, 42, 96, .34));
}

.mb-hero-weather-read {
  position: relative;
  margin: -14px 0 0 -2px;    /* 收进图标左下角一点，紧贴图标 */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}
.mb-hero-weather-temp {
  font-family: var(--mb-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: .06em .06em rgba(255, 255, 255, .18), .09em .09em .18em rgba(0, 0, 0, .18);
}
.mb-hero-weather-temp i {
  font-style: inherit;
  font-size: .55em;
  vertical-align: .58em;
  margin-left: -1px;      /* 斜体数字带右侧倾斜留白，度符号贴紧才不显得漂浮 */
  opacity: .85;
}
.mb-hero-weather-desc {
  font-family: var(--mb-font-title);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 3px 14px rgba(6, 42, 96, .35);
}

/* 给天气让出右侧空间，长昵称 / 长介绍也不会压到温度上 */
.mb-hero.has-weather .mb-hero-profile { padding-right: 260px; }

/* 头图名片：头像 + 博主昵称 + 博主介绍 */
.mb-hero-profile {
  position: relative;
  z-index: 2;                /* 压在头图蒙版（.has-img::after, z-index:1）之上 */
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.mb-hero-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 20%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px rgba(6, 42, 96, 0.28);
}

.mb-hero-text { min-width: 0; position: relative; top: 5px; }   /* 与头像视觉中线对齐（标题+介绍整体下移 5px） */

/* 头图文字：仿 dsm-blog 参考站 main-title（斜体标题体 + 渐变 mask + 柔影，
   副标题前两条渐变短横线模拟长破折号） */
.mb-hero-profile .mb-hero-title {
  font-family: var(--mb-font-title);
  /* 标题体只有 400 字重，写 800 会触发浏览器合成加粗、笔画发糊 */
  font-weight: 400;
  font-style: italic;
  font-size: 30px;
  letter-spacing: 0.5px;
  -webkit-mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  text-shadow: .1053em .1053em rgba(255, 255, 255, .2), .1842em .1842em .2em rgba(0, 0, 0, .2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-hero-profile .mb-hero-sub {
  font-family: var(--mb-font-title);
  font-style: italic;
  position: relative;
  margin-top: 6px;
  padding-left: 1.6em;
  letter-spacing: 0.5px;
  -webkit-mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  text-shadow: .1053em .1053em rgba(255, 255, 255, .2), .1842em .1842em .2em rgba(0, 0, 0, .2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 副标题前置的双横线（参考站 type-2 的破折号装饰） */
.mb-hero-profile .mb-hero-sub::before,
.mb-hero-profile .mb-hero-sub::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  background: linear-gradient(-90deg, currentColor, hsla(0, 0%, 100%, 0));
}
.mb-hero-profile .mb-hero-sub::before { top: 41%; width: 1.5em; }
.mb-hero-profile .mb-hero-sub::after  { top: 59%; left: .45em; width: 1em; }

.mb-hero-title {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 3px 14px rgba(6, 42, 96, 0.45);
}

.mb-hero-sub {
  position: relative;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  letter-spacing: 0.5px;
}

/* ---------- 微语卡片 ---------- */
.mb-card {
  padding: 22px 26px;
  margin-bottom: 22px;
  transition: box-shadow 0.3s ease;
}

.mb-card:hover {
  box-shadow: var(--mb-shadow-hover);
}

.mb-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.mb-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.25);
  flex-shrink: 0;
}

html[data-dark="1"] .mb-avatar { border-color: rgba(255,255,255,0.18); }

.mb-meta { min-width: 0; }

.mb-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--mb-text-1);
  line-height: 1.4;
}

.mb-name:hover { color: var(--mb-accent); }

.mb-time {
  font-size: 12.5px;
  color: var(--mb-text-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.mb-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mb-accent);
  background: rgba(30, 136, 229, 0.12);
  border: 1px solid rgba(30, 136, 229, 0.22);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
  vertical-align: 2px;
}

.mb-content {
  color: var(--mb-text-1);
  font-size: 15px;
  line-height: 1.75;
  word-break: break-word;
}

.mb-content p { margin: 0 0 10px; }
.mb-content p:last-child { margin-bottom: 0; }

.mb-content a { border-bottom: 1px dashed rgba(30, 136, 229, 0.5); }

.mb-content img { border-radius: var(--mb-radius-sm); }

.mb-content blockquote {
  margin: 10px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--mb-accent);
  border-radius: 0 10px 10px 0;
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
}

.mb-content code {
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  background: var(--mb-glass-bg-soft);
  border: 1px solid var(--mb-glass-border);
  border-radius: 6px;
  padding: 1px 6px;
}

.mb-content pre {
  overflow: auto;
  padding: 14px 16px;
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-soft);
  border: 1px solid var(--mb-glass-border);
}

.mb-content pre code { background: none; border: none; padding: 0; }

/* 微语配图 */
.mb-pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  border-radius: var(--mb-radius-sm);
  overflow: hidden;
}

.mb-pics img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.mb-pics img:hover { transform: scale(1.03); }

/* 标签 */
.mb-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.mb-tag {
  font-size: 12px;
  color: var(--mb-text-2);
  background: var(--mb-glass-bg-soft);
  border: 1px solid var(--mb-glass-border);
  border-radius: 999px;
  padding: 3px 12px;
  transition: all 0.2s ease;
}

.mb-tag:hover {
  color: #fff;
  background: linear-gradient(90deg, var(--mb-accent-deep), var(--mb-accent-2));
  border-color: transparent;
}

/* 卡片底部操作栏 */
.mb-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--mb-cm-name-line);
  font-size: 13px;
  color: var(--mb-text-3);
}

.mb-foot a { color: var(--mb-text-3); display: inline-flex; align-items: center; gap: 5px; }
.mb-foot a:hover { color: var(--mb-accent); }
.mb-foot .mb-foot-spacer { flex: 1; }

/* ---------- 评论 ----------
   版式对齐 niRvana（dsm-blog）：头像 8px 圆角方图、昵称 1px 下划线、
   日期右对齐、回复是一个独立在行右侧的胶囊按钮。规则数值一一对应
   niRvana 的 .comment-list（1em=16px 的那套），换成 px 落在这里。 */
.mb-comments { padding: 24px 26px; margin-top: 26px; }

/* 评论区专用令牌：niRvana 用 --text-color-2/3 与 --primary-gray-opacity-*，
   这里给同一组视觉重量起一套独立名字，避免跟卡片皮肤令牌互相牵连。 */
:root {
  --mb-cm-name: var(--mb-text-2);
  --mb-cm-name-line: #a6b5c7;
  --mb-cm-text: var(--mb-text-3);
  --mb-cm-date: rgba(85, 120, 161, 0.45);
  --mb-cm-line: rgba(85, 120, 161, 0.2);
  --mb-cm-line-hi: rgba(255, 255, 255, 0.9);
  --mb-cm-reply-bg: rgba(85, 120, 161, 0.15);
  --mb-cm-reply-fg: rgba(85, 120, 161, 0.75);
  --mb-cm-reply-gloss: rgba(255, 255, 255, 0.72);
  --mb-cm-av-ring: rgba(255, 255, 255, 0.8);
  --mb-cm-av-shadow: rgba(0, 30, 60, 0.2);
}

html[data-dark="1"] {
  --mb-cm-name: #cfe0f4;
  --mb-cm-name-line: rgba(150, 180, 215, 0.5);
  --mb-cm-text: #93a9c4;
  --mb-cm-date: rgba(150, 180, 215, 0.45);
  --mb-cm-line: rgba(150, 180, 215, 0.18);
  --mb-cm-line-hi: rgba(255, 255, 255, 0.07);
  --mb-cm-reply-bg: rgba(150, 180, 215, 0.14);
  --mb-cm-reply-fg: rgba(178, 205, 235, 0.8);
  --mb-cm-reply-gloss: rgba(255, 255, 255, 0.08);
  --mb-cm-av-ring: rgba(255, 255, 255, 0.13);
  --mb-cm-av-shadow: rgba(0, 0, 0, 0.5);
}

/* 顶层 <ol class="mb-comment-thread"> 与子层 <ol class="mb-comment-children">
   都是真列表（comments.php 的 threadedComments 回调负责分层），
   这里把浏览器默认的序号 / 缩进清掉，缩进完全交给 .mb-comment-children。 */
.mb-comment-thread,
.mb-comment-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mb-comment-item { margin: 0; padding: 0; }

/* 每条评论：头像 48 + 16 间距；上下各 12px 留白。
   niRvana 行间不画线，分隔完全交给下面 .mb-comment-head 的下边框，
   所以这里不再加 border-top（否则一条评论会出现两道线）。 */
.mb-comment {
  display: flex;
  gap: 16px;
  padding: 12px 0;
}

/* 头像：8px 圆角方图 + 1px 白色内环 + 一层软投影 */
.mb-comment .mb-avatar {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--mb-cm-av-ring), 0 8px 10px var(--mb-cm-av-shadow);
}

.mb-comment-body { flex: 1; min-width: 0; }

/* 昵称/日期一行，回复按钮单独挂在右侧 —— 分隔线只画到按钮左边为止 */
.mb-comment-row { display: flex; align-items: flex-start; }

.mb-comment-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  line-height: 1.55;
  border-bottom: 1px solid var(--mb-cm-line);
  box-shadow: 0 1px 0 var(--mb-cm-line-hi);
}

/* 昵称：加粗 + 自己那条更深的 1px 下划线（niRvana 的 .info .name）。
   留言榜与微语回复共用这一处定义。inset 画在盒内，ellipsis 截断时线也不会被
   overflow 裁掉；再补一层 0 1px 0 的外阴影，把粗线压到 .mb-comment-head 的
   1px 分隔线同一行上 —— 只写 inset 时粗线会比细线高 1px，看起来像浮在线上方。 */
.mb-comment-author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--mb-cm-name);
  box-shadow: inset 0 -1px 0 var(--mb-cm-name-line),
              0 1px 0 var(--mb-cm-name-line);
}

.mb-comment-author a { color: inherit; }
.mb-comment-author a:hover { color: var(--mb-accent); }

/* 博主徽标：与微语卡片里的作者标记同一套语气（浅蓝底 + 主色字） */
.mb-comment-badge {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--mb-accent-deep);
  background: rgba(30, 136, 229, 0.12);
  border: 1px solid rgba(30, 136, 229, 0.22);
}

/* 日期贴右，右侧留 14px 让开回复按钮 */
.mb-comment-head time {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 14px;
  padding-left: 12px;
  font-size: 13px;
  color: var(--mb-cm-date);
  white-space: nowrap;
}

/* 两套日期格式：宽屏「年-月-日 时:分」，窄屏「月-日 时:分」（见下面的媒体查询） */
.mb-cm-date-short { display: none; }

/* 回复：只留箭头图标的胶囊按钮，向下错开 11px 与分隔线脱开（照搬 niRvana 的 translateY(0.75em)） */
.mb-comment-reply {
  flex: 0 0 auto;
  margin-left: 0;
  transform: translateY(11px);
}

.mb-comment-reply a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0;                 /* 文字收起来，只留图标（读屏仍能读到「回复」） */
  line-height: 1;
  color: var(--mb-cm-reply-fg);
  background-color: var(--mb-cm-reply-bg);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 55%, var(--mb-cm-reply-gloss));
  box-shadow: inset 0 0 0 1px var(--mb-cm-reply-gloss),
              0 6px 8px var(--mb-cm-line),
              0 0 0 1px var(--mb-cm-line);
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mb-comment-reply a::before {
  content: "\e622";
  font-family: font_family;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.mb-comment-reply a:hover {
  color: var(--mb-accent);
  background-color: rgba(30, 136, 229, 0.18);
}

.mb-comment-text {
  padding: 5px 0 1px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mb-cm-text);
  word-break: break-word;
}

.mb-comment-text p { margin: 0 0 8px; }
.mb-comment-text p:last-child { margin-bottom: 0; }
.mb-comment-text a { color: var(--mb-accent); }
.mb-comment-text img { max-width: 100%; height: auto; vertical-align: middle; }
.mb-comment-text code {
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--mb-glass-bg-soft);
  border: 1px solid var(--mb-glass-border);
}

/* 子评论缩进（对齐 niRvana 的 4em；移动端在下面的媒体查询里收窄到 24px） */
.mb-comment-children { margin-left: 64px; }

html[data-dark="1"] .mb-comment-badge {
  color: #90caf9;
  background: rgba(100, 181, 246, 0.16);
  border-color: rgba(100, 181, 246, 0.28);
}

/* 评论表单 */
.mb-form { margin-top: 20px; }

.mb-form-row { display: flex; gap: 12px; margin-bottom: 12px; }

.mb-input {
  flex: 1;
  height: 42px;
  border-radius: var(--mb-radius-sm);
  border: 1px solid var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0 14px;
  font-size: 14px;
  color: var(--mb-text-1);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.mb-input {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
  width: 100%;
}

.mb-input:focus {
  border-color: var(--mb-accent);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18);
}

.mb-input::placeholder { color: var(--mb-text-3); }

/* 评论表单底部动作行：表情按钮靠左、发表按钮靠右。
   表情按钮由 functions.php 的 page_microblog_face_button() 输出，
   其自带 margin（微语表单里靠 margin 定位）在这里归零，交给 flex 对齐。 */
.mb-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
}

.mb-form-actions .ni-memo-face-toggle { margin: 0; height: 32px; }

.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 26px;
  border: none;
  border-radius: var(--mb-radius-sm);
  background: linear-gradient(135deg, var(--mb-accent-deep), var(--mb-accent) 55%, var(--mb-accent-2));
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mb-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mb-btn:active { transform: translateY(0); }

/* ---------- 分页 ---------- */
.mb-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px 0 10px;
  flex-wrap: wrap;
}

.mb-pager a, .mb-pager .mb-page-num {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--mb-text-2);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.mb-pager a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--mb-accent-deep), var(--mb-accent-2));
  border-color: transparent;
  transform: translateY(-1px);
}

.mb-pager .mb-page-current {
  color: #fff;
  background: linear-gradient(135deg, var(--mb-accent-deep), var(--mb-accent-2));
  border-color: transparent;
  font-weight: 700;
}

/* ---------- 页脚 ---------- */
.mb-footer {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  width: 100%;
  max-width: none;
  margin-top: 46px;
  padding: 32px 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.8;
  color: var(--pn-dark);
  background:
    linear-gradient(var(--pn-white-8), var(--pn-white-15) 16px, transparent 16px),
    linear-gradient(var(--pn-footer-fade) 40%, rgba(85, 120, 161, 0));
  box-shadow:
    0 1px var(--pn-white-8) inset,
    0 -1px var(--pn-hair),
    0 -5px 10px var(--pn-footer-shadow);
}

.mb-footer a {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。
     2026-11-12：链接色改参考站 --primary-gray-opacity-7 = rgba(85,120,161,.7)，
     过渡沿用参考站的 .25s（全属性）。 */
  color: var(--pn-gray-7);
  text-decoration: none;
  transition: .25s;
}
.mb-footer a:hover {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。
     2026-11-12：改为参考站的 hover:text-primary-gray —— 由 70% 变回不透明，
     不再跳成亮蓝（深色下 --pn-gray 是 #a6bedb，同样是"变清晰"）。 */
  color: var(--pn-gray);
}

/* 主题版权行（支持 HTML）；与备案行拉开一点距离 */
.mb-footer-theme { margin-top: 6px; }

/* 这一行里的 <a> 与周围文字同色（都是不透明的 --pn-gray），
   不沿用页脚通用的 70% 链接色；hover 也保持一致，不做变色。 */
.mb-footer-theme a,
.mb-footer-theme a:hover {
  color: var(--pn-gray);
}

/* 备案行；多条时默认横排，is-col 时逐行 */
.mb-footer-links {
  /* PANDA 视觉的最终值：原由后加载的 css/panda.css 同名规则覆盖，
     2026-11-11 合并到本文件。以后改导航/页脚只需改 style.css。 */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 4px;
}
.mb-footer-links.is-col {
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.mb-footer-icp img { opacity: .8; }
.mb-footer-icp img:hover { opacity: 1; }

/* ---------- 404 / 归档 ---------- */
.mb-404 { text-align: center; padding: 90px 30px; }

.mb-404-code {
  font-size: 92px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--mb-accent-deep), var(--mb-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

/* ---------- 归档 / 分类 / 搜索列表卡片 ---------- */
.mb-archive-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.mb-archive-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mb-archive-item:hover {
  background: var(--mb-glass-bg-strong);
  border-color: var(--mb-glass-highlight);
  box-shadow: var(--mb-shadow);
  transform: translateY(-1px);
}

.mb-archive-thumb {
  display: block;
  flex: 0 0 108px;
  width: 108px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mb-glass-bg);
}

.mb-archive-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mb-archive-item:hover .mb-archive-thumb img { transform: scale(1.06); }

.mb-archive-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.mb-archive-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--mb-text-1);
  transition: color 0.2s ease;
}

.mb-archive-item:hover .mb-archive-title { color: var(--mb-accent); }

.mb-archive-meta {
  font-size: 12.5px;
  color: var(--mb-text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .mb-archive-thumb { flex-basis: 84px; width: 84px; height: 60px; }
  .mb-archive-item { gap: 12px; }
  .mb-archive-title { font-size: 14.5px; }
}

/* ---------- 灯箱 ---------- */
.mb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 16, 30, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: zoom-out;
}

.mb-lightbox.active { display: flex; }

.mb-lightbox img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

/* ---------- 浮动工具条：登录 / 明暗切换 / 返回顶部 ----------
   竖排在右下角，排布对齐 niRvana 的 .floatTools。
   容器 pointer-events:none，只有按钮吃事件，不会挡住正文右下角的可点区域。 */
.mb-float-tools {
  position: fixed;
  right: max(12px, calc((100vw - var(--mb-width, 1170px)) / 2 - 52px));
  bottom: 240px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}

.mb-tool-btn {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--mb-glass-border);
  border-radius: 13px;
  background: var(--mb-glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  color: var(--mb-text-2);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--mb-shadow);
  transition: color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.mb-tool-btn:hover {
  color: var(--mb-accent);
  box-shadow: var(--mb-shadow-hover);
}

.mb-tool-btn:focus-visible {
  outline: 2px solid var(--mb-accent);
  outline-offset: 2px;
}

/* 已登录：右上角一枚小绿点表示在线，点击直接进后台 */
.mb-tool-btn.is-logged::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35c46a;
  box-shadow: 0 0 0 2px var(--mb-glass-bg-strong);
}

/* 明暗图标只显示其中一个（2026-11-12 图标换成 icon font 的 icon-a-yejianyueliang / icon-taiyang，
   类名 .mb-ico-moon/.mb-ico-sun 保留，只当显隐钩子用） */
.mb-tool-btn .mb-ico-sun { display: none; }
html[data-dark="1"] .mb-tool-btn .mb-ico-moon { display: none; }
html[data-dark="1"] .mb-tool-btn .mb-ico-sun { display: inline-block; }

/* 登录 / 明暗按钮的图标字号：对齐原来那两枚 17px 的内联 SVG。
   这个字体族（font_family）的字形都坐在行盒偏下 .6px 处（4 倍截图逐像素量的），补掉 */
.mb-tool-btn .font_family {
  font-size: 17px;
  transform: translateY(-.6px);
}

/* 月亮（\e6bc）/ 太阳（\e643）的墨迹天生比登录图标小一档
   （15.3 vs 17.3），也偏左 1px → 放大到 19px 并右移补中心 */
.mb-tool-btn .mb-ico-moon,
.mb-tool-btn .mb-ico-sun {
  font-size: 19px;
  transform: translate(1.12px, .13px);
}

/* 返回顶部：没滚过 420px 之前不占位（display:none），出现时轻轻弹出 */
.mb-top-btn { display: none; }

/* 图标换成 icon font 的 icon-rocket（2026-11-12 用户指定），
   尺寸对齐原来那枚 16px 的内联 SVG，颜色照旧继承 .mb-tool-btn 的 currentColor。
   字形本身是斜指右上的（约 45°），用户要求「向上」→ rotate(-45deg) 扳正；
   旋转后墨迹绕行盒中心画了圆，中心跑到盒中心上方 2.33px，
   最外层 translate 补回（屏幕坐标系，先平移再旋转） */
.mb-top-btn .font_family {
    font-size: 17px;
    transform: translate(-.25px, 2.33px) rotate(-45deg) translate(0, -.5px);
}

.mb-top-btn.show {
  display: inline-flex;
  animation: mbToolIn 0.22s ease both;
}

@keyframes mbToolIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 登录弹窗 ---------- */
.mb-login-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 26, 48, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: mbLoginFade 0.18s ease both;
}

.mb-login-mask[hidden] { display: none; }

@keyframes mbLoginFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mbLoginUp {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mb-login-card {
  position: relative;
  width: 340px;
  max-width: 100%;
  padding: 28px 26px 24px;
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  /* 弹窗背后是正文，透明度压到 0.94 才不会透出字与图片的色块 */
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 24px 70px rgba(12, 34, 66, 0.28);
  animation: mbLoginUp 0.22s ease both;
}

/* 玻璃皮肤：0.94 白 + 背景模糊，透一点背后光影但不透字（描边皮肤见 border.css） */
body[data-card-style="glass"] .mb-login-card { background: rgba(255, 255, 255, 0.94); }
html[data-dark="1"] body[data-card-style="glass"] .mb-login-card { background: rgba(17, 28, 46, 0.96); }

html[data-dark="1"] .mb-login-card { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }

.mb-login-close {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--mb-text-3);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mb-login-close:hover { color: var(--mb-text-1); }

.mb-login-title {
  margin-bottom: 18px;
  color: var(--mb-text-1);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}

.mb-login-field { display: block; margin-bottom: 13px; }

.mb-login-label {
  display: block;
  margin-bottom: 6px;
  color: var(--mb-text-3);
  font-size: 12px;
}

.mb-login-field input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-1);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mb-login-field input::placeholder { color: var(--mb-text-3); }

.mb-login-field input:focus {
  border-color: var(--mb-accent);
  background: var(--mb-glass-bg);
}

.mb-login-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 14px;
  color: var(--mb-text-3);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}

.mb-login-remember input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--mb-accent);
  cursor: pointer;
}

.mb-login-err {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(214, 69, 65, 0.12);
  color: #d64541;
  font-size: 13px;
}

.mb-login-submit {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--mb-radius-sm);
  background: var(--mb-accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.mb-login-submit:hover { background: var(--mb-accent-deep); }
.mb-login-submit[disabled] { opacity: 0.62; cursor: not-allowed; }

/* 弹窗打开时锁住页面滚动 */
body.mb-login-open { overflow: hidden; }

/* ---------- 入场动画 ---------- */
@keyframes mbRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2026-11-11 取消：刷新页面时整块内容「从下往上」升起的入场动画。
   元素直接按终态呈现（不位移、不淡入），d1/d2/d3 的延迟随之失效。
   想恢复就把下面这行改回：animation: mbRise 0.55s ease both; */
.mb-rise { animation: none; }
.mb-rise.d1 { animation-delay: 0.06s; }
.mb-rise.d2 { animation-delay: 0.12s; }
.mb-rise.d3 { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .mb-rise { animation: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  :root { --mb-container: calc(var(--mb-width) + 28px); }
  .mb-container { padding: 0 14px; }
  /* 导航 / 页脚的窄屏内边距早先一直被后加载的 panda.css 基础规则盖住、从未生效；
     同名规则合并到 style.css 后这两条会意外激活，故移除。真正生效的窄屏值
     由 css/panda.css 的 720px 断点与 .mb-footer-inner 决定。 */
  .mb-nav-menu a { padding: 8px 10px; font-size: 13.5px; }
  .mb-hero { padding: 30px 24px; min-height: calc(170px * 1.25); border-radius: var(--mb-radius); }   /* 原 170px，+25% → 212.5px */
  .mb-hero-title { font-size: 25px; }
  .mb-hero-profile { gap: 13px; }
  .mb-hero-avatar { width: 54px; height: 54px; }
  .mb-hero-profile .mb-hero-title { font-size: 24px; }
  .mb-hero-profile .mb-hero-sub { font-size: 13px; margin-top: 1px; }   /* 窄屏两行贴紧：行间 6 → 1px */
  .mb-hero-cube.c1, .mb-hero-cube.c2 { display: none; }
  /* 窄屏天气缩到右上角，资料卡在下方，互不干扰；角落那颗立方让位给天气 */
  /* 窄屏天气贴右上角叠放：绝对定位，不参与高度，横幅高度由 .mb-hero 自身 min-height 决定（213） */
  .mb-hero.has-weather .mb-hero-profile { padding-right: 0; }
  .mb-hero-weather { right: 12px; top: 2px; width: min(26%, 96px); transform: none;
    align-items: center; }   /* 窄屏天气贴右上角叠放，与左下资料卡错开，不再撑高横幅 */
  .mb-hero-weather::before { right: -30px; width: 150px; height: 150px; }
  .mb-hero-weather-read { flex-direction: column; align-items: center; gap: 0; margin: -8px 0 0; }   /* 温度居中落在图标正下方，天气名再下一行 */
  .mb-hero-weather-temp { font-size: 17px; }
  .mb-hero-weather-temp i { font-size: .62em; opacity: .95; }   /* 小字号下度符号要提亮提大才看得见 */
  .mb-hero-weather-desc { font-size: 10px; letter-spacing: 1px; }
  .mb-hero.has-weather .mb-hero-cube.c3 { display: none; }
  .mb-card { padding: 18px 18px; }
  .mb-pics { grid-template-columns: repeat(2, 1fr); }
  /* 窄屏把评论区整体收一档：头像 40、间距 12、子评论缩进 24，
     日期换成「月-日 时:分」并缩小回复按钮，保证「昵称 + 徽标 + 日期」仍在一行。 */
  .mb-comment { gap: 12px; padding: 10px 0; }
  .mb-comment .mb-avatar { width: 40px; height: 40px; border-radius: 7px; }
  .mb-comment-children { margin-left: 24px; }
  .mb-comment-head { flex-wrap: wrap; }
  /* 昵称不截断：实在放不下就让日期换到第二行，别把名字压成「Polar…」 */
  .mb-comment-author { font-size: 14.5px; overflow: visible; text-overflow: clip; }
  .mb-comment-badge { font-size: 10px; padding: 2px 6px; margin-left: 5px; }
  .mb-comment-head time { font-size: 12px; margin-right: 10px; padding-left: 8px; }
  .mb-cm-date-full { display: none; }
  .mb-cm-date-short { display: inline; }
  .mb-comment-reply { transform: translateY(9px); }
  .mb-comment-reply a { height: 24px; padding: 0 8px; }
  .mb-comment-text { font-size: 14.5px; }
  .mb-form-row { flex-direction: column; gap: 10px; }
  .mb-float-tools { right: 14px; bottom: 18px; gap: 8px; }
  .mb-tool-btn { width: 40px; height: 40px; border-radius: 12px; }
}

/* 380 及以下：默认那组尺寸会让「昵称 + 博主 + 日期」差 6px 折行（实测 182 vs 176），
   这里把头像收到 38、徽标与日期边距各收一点，换回一行。 */
@media (max-width: 380px) {
  /* 小屏横幅：天气叠右上角后，昵称行会碰上去，这里把资料卡右内边距让出来 */
  .mb-hero.has-weather .mb-hero-profile { padding-right: 26px; }
  .mb-hero-weather { top: 0; width: min(24%, 80px); }
  .mb-comment { gap: 10px; }
  .mb-comment .mb-avatar { width: 38px; height: 38px; border-radius: 7px; }
  .mb-comment-author { font-size: 14px; }
  .mb-comment-badge { padding: 2px 5px; margin-left: 4px; }
  .mb-comment-head time { font-size: 11.5px; margin-right: 4px; padding-left: 4px; }
}

/* ---------- pjax 换页过渡（后台可切换 fade / blur / none） ---------- */
#mb-pjax { transform-origin: 50% 0; }

#mb-pjax.mb-pjax-leave {
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity .17s ease, transform .17s ease, filter .17s ease;
  pointer-events: none;
}
#mb-pjax.mb-pjax-leave[data-mb-anim="blur"] { filter: blur(4px); }

@keyframes mbPjaxIn {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes mbPjaxInBlur {
  from { opacity: 0; transform: translateY(10px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
#mb-pjax.mb-pjax-enter { animation: mbPjaxIn .34s cubic-bezier(.22,.8,.3,1) both; }
#mb-pjax.mb-pjax-enter[data-mb-anim="blur"] {
  animation-name: mbPjaxInBlur;
  animation-duration: .4s;
}

@media (prefers-reduced-motion: reduce) {
  #mb-pjax.mb-pjax-leave,
  #mb-pjax.mb-pjax-enter {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------- pjax 进度条 ---------- */
.mb-pjax-bar {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0;
  z-index: 1000;
  /* 五彩流光进度条：彩虹渐变 + 背景横向流动 */
  background: linear-gradient(90deg,
    #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #32ade6, #5856d6, #af52de, #ff2d55, #ff3b30);
  background-size: 300% 100%;
  background-position: 0% 50%;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px rgba(90, 150, 255, .55), 0 0 20px rgba(180, 90, 255, .30);
  opacity: 0;
  transition: width .42s cubic-bezier(.22, .8, .3, 1), opacity .3s ease;
  animation: mb-pjax-flow 1.1s linear infinite;
  animation-play-state: paused;
}

.mb-pjax-bar.active {
  opacity: 1;
  animation-play-state: running;
}

@keyframes mb-pjax-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* 系统要求减少动态效果：只保留静态彩虹，不做流动 */
@media (prefers-reduced-motion: reduce) {
  .mb-pjax-bar { animation: none; }
}

/* ---------- 打印 ---------- */
@media print {
  .mb-nav-wrap, .mb-float-tools, .mb-login-mask, .mb-bg { display: none !important; }
  body { background: #fff; }
  .mb-glass, .mb-card { box-shadow: none; border: 1px solid #ddd; background: #fff; }
}


/* ============================================================
   01  图标字体（icon-xxx，fonts/font_family.woff2）
   原 css/icons.css，2026-11-11 并入（内容原样，顺序不变）
   2026-11-12：删除 39 条画不出字形的类名（字体 cmap 无对应码点，
   前台与后台预览都是空白），剩 65 条。后台 css/admin.css 的镜像
   清单须同步（脚本见 历史修改/MicroBlog-after-drop-empty-icons-20261112/RESTORE.md）
   ============================================================ */

/*!
 * MicroBlog · icon font（从 niRvana 移植，字体文件 fonts/font_family.woff2）
 * 用法：<i class="font_family icon-home"></i>
 */

@font-face {
  font-family: font_family;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/font_family.woff2?v=5) format("woff2");
}

.font_family {
  font-family: font_family !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-a-icon_Paymentlinks:before { content: "\e62a"; }
.icon-a-yejianyueliang:before { content: "\e6bc"; }
.icon-about-dot-me:before { content: "\eb31"; }
.icon-about1:before { content: "\e605"; }
.icon-admin:before { content: "\ea49"; }
.icon-admin1:before { content: "\e6ed"; }
.icon-administrator:before { content: "\e668"; }
.icon-announcement2:before { content: "\e633"; }
.icon-archive:before { content: "\e707"; }
.icon-arrow-down:before { content: "\e625"; }
.icon-bookmark:before { content: "\e60b"; }
.icon-check:before { content: "\e618"; }
.icon-chevron-left:before { content: "\e621"; }
.icon-chevron-right:before { content: "\e620"; }
.icon-clock:before { content: "\e60e"; }
.icon-comments:before { content: "\e60c"; }
.icon-describe:before { content: "\e62b"; }
.icon-document1:before { content: "\e606"; }
.icon-document_fill:before { content: "\e6f4"; }
.icon-exclamation:before { content: "\e624"; }
.icon-feather-alt:before { content: "\e611"; }
.icon-friends02:before { content: "\e63a"; }
.icon-guestbook:before { content: "\e60d"; }
.icon-home:before { content: "\e61f"; }
.icon-icannouncement:before { content: "\e64e"; }
.icon-info:before { content: "\e623"; }
.icon-line-administration:before { content: "\e699"; }
.icon-link-solid1:before { content: "\e62b"; }
.icon-list-ul:before { content: "\e619"; }
.icon-makeup_admin:before { content: "\e62c"; }
.icon-museum:before { content: "\e697"; }
.icon-nav_Micro-blogV:before { content: "\e602"; }
.icon-next:before { content: "\203a"; }
.icon-notice:before { content: "\e6d5"; }
.icon-notice-fill:before { content: "\e83e"; }
.icon-paper-plane:before { content: "\e614"; }
.icon-pinglun:before { content: "\e627"; }
.icon-prev:before { content: "\2039"; }
.icon-qq:before { content: "\e607"; }
.icon-qrcode:before { content: "\e608"; }
.icon-reply:before { content: "\e622"; }
.icon-rocket:before { content: "\e616"; }
.icon-rss1:before { content: "\e68d"; }
.icon-search:before { content: "\e61b"; }
.icon-star:before { content: "\e617"; }
.icon-starr:before { content: "\e626"; }
.icon-suijibofang:before { content: "\e622"; }
.icon-taiyang:before { content: "\e643"; }
.icon-times:before { content: "\e613"; }
.icon-user:before { content: "\e615"; }
.icon-wchat:before { content: "\e705"; }

/* —— 2026-11-12 新增：iconfont 项目 5251249（002）下载的一批（17 个）——
   已合并进 fonts/font_family.woff2（71 → 88 码点），族名仍是 font_family，
   用法不变：<i class="font_family icon-xxx"></i>。
   与旧字体撞码点的 7 个字形合并时重映射到 0xE900..0xE906，不会串到旧图标：
   double-left→e900 · double-up→e901 · double-down→e902 · double-right→e903
   biaoqian→e904（原 e602 是 nav_Micro-blogV）· tongji1→e905（原 e61b 是 search）
   tongji2→e906（原 e623 是 info）。
   4 个双箭头原类名是 Gc_05/07/08/06_public-Double*Outlined，其中 05 和 06 都叫
   DoubleRight（iconfont 项目里重名），实测 05 是「双左」、06 是「双右」，
   按实际朝向改名成 icon-double-left/right/up/down（原名太长，后台格子里会折成三行）。
   taiyang 用 icon-taiyang2：现有 .icon-taiyang 是 \e643（天气组件在用），
   新字形与它不同，别直接覆盖。
   2026-11-12 22:47 按用户要求删除：icon-tongji2（e906 已从 cmap 释放）、
   icon-tongji3（=\e608，与 icon-qrcode 同一字形，只删类名、字形留给 qrcode）。 */
.icon-double-left:before { content: "\e900"; }
.icon-double-right:before { content: "\e903"; }
.icon-double-up:before { content: "\e901"; }
.icon-double-down:before { content: "\e902"; }
.icon-QQ:before { content: "\e882"; }
.icon-Mail:before { content: "\eae4"; }
.icon-house-user:before { content: "\e791"; }
.icon-house-user1:before { content: "\e91c"; }
.icon-biaoqian:before { content: "\e904"; }
.icon-suiji:before { content: "\e7b8"; }
.icon-tongji1:before { content: "\e905"; }
.icon-24gf-tags3:before { content: "\e886"; }
.icon-zuirepinglun:before { content: "\e81c"; }
.icon-pengyou1:before { content: "\e601"; }
.icon-yueliang:before { content: "\e63e"; }
.icon-taiyang2:before { content: "\e635"; }

/* —— 2026-11-12 第二批新增：iconfont 项目 5252665（1）下载的 11 个 ——
   同样并入 fonts/font_family.woff2（88 → 99 码点），族名仍是 font_family。
   两处撞码点重映射，不会串到旧图标：
     pinglun  \e60c（旧字体里是 icon-comments）→ e907，类名改 icon-pinglun1
              —— icon-pinglun 这个类名已存在（\e627，字形其实是 book-reader 书），不能覆盖
     fenlei   \e601（旧字体里是 icon-pengyou1）→ e908
   其余 9 个沿用包里的原码点。类名保留 iconfont 的 font_class 原样
   （含 wenzhang1-copy 的 -copy 后缀），方便与原包对照。
   2026-11-12 22:47 按用户要求删除：icon-fenlei（e908）、icon-fenlei1（e755），
   两个码点已从 cmap 释放，可复用。 */
.icon-shijian:before { content: "\e647"; }
.icon-rili2:before { content: "\e73b"; }
.icon-shijian1:before { content: "\e6ad"; }
.icon-wenzhang2:before { content: "\e681"; }
.icon-pinglun1:before { content: "\e907"; }
.icon-rili:before { content: "\e685"; }
.icon-lianjie:before { content: "\e645"; }
.icon-lianjie1:before { content: "\e832"; }
.icon-wenzhang1-copy:before { content: "\e600"; }

/* —— 2026-11-12 第三批新增：iconfont 项目 5252665（1）重新导出的 3 个 ——
   同样并入 fonts/font_family.woff2（99 → 102 码点），族名仍是 font_family。
   两处撞码点重映射，不会串到旧图标：
     用户        \e621（旧字体里是 chevron-left，.icon-chevron-left 在用）→ e909
     用户组      \e61c（旧字体里是 link 字形，无类名引用）                → e90a
     用户-群组-F \e648 空闲，原样并入。
   包里的 font_class 是 "1"，数字开头不好用，按中文名改成 icon-yonghu；
   另两个沿用 font_class 原样（含末尾的 -F，代表填充版），方便与原包对照。 */
.icon-yonghu:before { content: "\e909"; }
.icon-yonghuzu:before { content: "\e90a"; }
.icon-yonghu-qunzu-F:before { content: "\e648"; }


/* ============================================================
   02  微语信息流（.page-microblog-* / .page-*）
   原 css/page_microblog.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/* ============================================================
   page_microblog.php 微语页样式 —— niRvana 视觉版
   功能层沿用 riven page_microblog_*（类名 page-* 保留，供 memos.js 交互依赖），
   视觉层完全继承 niRvana 主题体系：
     卡片  #fff / 边框 #e8e8e8 / 圆角 12px / 阴影 rgba(31,45,61,.05)
     正文/标题 #657487（跟随主页 niRvana 正文色）· 次要/链接 #738192 · 强调/hover #20a0ff
     字体  Play, 微软雅黑, PingFang SC, Helvetica Neue...
     深色  html[data-dark="1"]（卡片 #1c2029 跟随主页深色卡 / 边框 #3b4963 / 次级块 #28374a）
     深色字体跟随主页：标题 #e3e8ee · 正文 #657487
   ============================================================ */

:root {
    --page-card: #fff;
    --page-soft: #f8fafc;
    --page-soft-bg: #fff;
    --page-border: #e8e8e8;
    --page-border-strong: #d5dce4;
    --page-line-soft: #eef1f5;
    /* 注：本组会被下方「描边皮肤 1. 设计令牌」的 :root 整组覆盖，
       实际生效的 --page-text 是那边的 #475669（2026-11-12） */
    --page-text: #475669;
    --page-heading: #657487;
    --page-sub: #738192;
    --page-light: #9aa7b8;
    --page-accent: #20a0ff;
    --page-accent-soft: #5cb8ff;
    --page-radius: 12px;
    --page-radius-sm: 8px;
    --page-gap: 12px;
    --page-shadow: 0 10px 18px rgba(31, 45, 61, .05);
    --page-shadow-hover: 0 14px 26px rgba(31, 45, 61, .12);
    --page-shadow-float: 0 8px 20px rgba(31, 45, 61, .10);
    --page-mask-border: #fff;
    --page-font: Play, "微软雅黑", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-dark="1"] {
    --page-card: #28374a;
    --page-soft: #1f2d3d;
    /* 用户 2026-11-11 新增的浅色白底令牌（--page-soft-bg: #fff）的深色对应值：
       取深色 --page-soft 同值，深色外观与改前一致 */
    --page-soft-bg: #1f2d3d;
    --page-border: #3b4963;
    --page-border-strong: #4a5a76;
    --page-line-soft: #3b4963;
    --page-text: #657487;
    --page-heading: #e3e8ee;
    --page-sub: #9aa7b8;
    --page-light: #7d8ba0;
    --page-accent: #4db3ff;
    --page-accent-soft: #5cb8ff;
    --page-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    --page-shadow-hover: 0 16px 28px rgba(0, 0, 0, .42);
    --page-shadow-float: 0 10px 24px rgba(0, 0, 0, .45);
    --page-mask-border: #34425a;
}

.page-microblog-wrap {
    width: 100%;
    max-width: var(--mb-width, 880px) !important;
    min-height: 600px;
    margin: 0 auto;
    color: var(--page-text);
    padding-top: 5px;
    padding-bottom: 10px;
    font-family: var(--page-font);
}

/* 单条详情页：内容短，不沿用列表页的 600px 最小高度，避免底部大片空白 */
.page-microblog-wrap-single {
    min-height: 0;
}

.page-microblog-head,
.page-microblog-card,
.page-microblog-card-m,
.page-empty,
.page-modal {
    border: 1px solid var(--page-border);
    background: var(--page-card);
    color: var(--page-text);
    box-shadow: var(--page-shadow);
}

/* 标题字效令牌（2026-11-12）：标题条的 h1 与微语卡片里的作者名共用同一套，
   要改标题的颜色 / 浮雕影只改这里 */
.page-microblog-head,
.page-microblog-author {
    --pmb-title-color: #475669;
    --pmb-desc-color: #758397;
    /* 参考站标题的浮雕字效：
       text-shadow: 2px 2px 2px var(--gray-opacity-2), -1px -1px var(--white-default)
       即「右下方灰影（rgba(0,30,60,.2) + 2px 模糊）+ 左上方 1px 纯白高光」 */
    --pmb-title-shadow: 2px 2px 2px rgba(0, 30, 60, .2), -1px -1px 0 #fff;
    /* 副标题字效：脚下 1px 白色投影（参考站 .name 的计算值同为 rgba(255,255,255,.7) 0 1px 0） */
    --pmb-desc-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.page-microblog-head {
    /* 标题条文字规格（2026-11-12 按参考站 blog.panda-studio.cn 的资料卡实测）：
       .name 19.2px/400 #475669  +  .description 16px/400 #758397，两行紧贴 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    margin: 28px 0 16px;
    padding: 0 18px;
    border-radius: var(--page-radius);
}

html[data-dark="1"] .page-microblog-head,
html[data-dark="1"] .page-microblog-author {
    --pmb-title-color: var(--page-text);
    --pmb-desc-color: var(--page-sub);
    /* 深底上白光会变成刺眼的描边，翻转为「黑影 + 极淡高光」 */
    --pmb-title-shadow: 2px 2px 2px rgba(0, 0, 0, .45), -1px -1px 0 rgba(255, 255, 255, .07);
    /* 深底上白投影会变成发亮的下边缘，改成暗影压住 */
    --pmb-desc-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.page-microblog-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1 1 auto;
    /* 与「发布动态」按钮同高（.page-publish-btn 的 34px）：
       否则只有博主登录时首页标题条被按钮撑到 76px，微语详情页仍是 73px（2026-11-12） */
    min-height: 34px;
}

.page-leaf {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    color: var(--page-accent);
}

.page-microblog-title-text {
    min-width: 0;
    display: flex;
    /* 标题与副标题同一排（2026-11-12 按用户要求从参考站的两行竖排改回横排） */
    align-items: center;
    gap: 14px;
    line-height: 1;
}

.page-microblog-title h1,
.page-microblog-author strong,
.page-modal-head strong {
    color: var(--page-heading);
    letter-spacing: 0;
    text-shadow: none;
}

.page-microblog-title h1 {
    margin: 0;
    /* 标题条主标题：锐字云字库行楷体子集（2026-11-12 用户指定；这是「图标 + 标题 + 副标题」
       那条浅色标题条，不是头图横幅。子集 39 字，字集外的字回退系统楷体） */
    font-family: var(--mb-font-xbd);
    /* 参考站 .name 是 19.2px / 400；用户要求更重更大：22px / 500（2026-11-12） */
    font-size: 25px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--pmb-title-color);
    /* 浮雕字效（参考站同款），深色由 --pmb-title-shadow 翻转 */
    text-shadow: var(--pmb-title-shadow);
    white-space: nowrap;
    /* 独立页（关于 / 友链 / 归档 / 文章页）标题可能很长，允许收缩加省略号，
       避免 nowrap 顶掉右侧「发布动态」按钮或把副标题挤成 0 宽（2026-11-12） */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-microblog-title p {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 14px;
    /* 与主标题同一套行楷（2026-11-12 用户要求）；子集已含 6 条副标题的全部用字 */
    font-family: var(--mb-font-xbd);
    /* 颜色沿用参考站 .description 的 #758397；行楷笔画细，14px 发虚，回落到 15px */
    color: var(--pmb-desc-color);
    font-size: 15.5px;
    line-height: 1.4;
    /* 脚下 1px 投影（深色由 --pmb-desc-shadow 翻转成暗影） */
    text-shadow: var(--pmb-desc-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 行楷子集的例外：通用独立页的副标题是 slug（纯拉丁）、微语详情页是「← 返回首页」链接，
   两者都不在字集里，保持正文字体与 14px，避免混排跳字（2026-11-12） */
.page-microblog-title p.page-head-sub-latin,
.page-microblog-title p.page-head-back {
    font-family: inherit;
    font-size: 14px;
}

/* 标题与副标题之间的竖线（横排时恢复） */
.page-microblog-title p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--page-border-strong);
}

.page-publish-btn,
.page-comment-submit,
.page-btn.primary {
    height: 34px;
    border: 1px solid var(--page-accent);
    border-radius: var(--page-radius-sm);
    background: var(--page-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(32, 160, 255, .28);
    cursor: pointer;
}

.page-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    font-size: 13px;
    white-space: nowrap;
}

.page-publish-btn:hover,
.page-comment-submit:hover,
.page-btn.primary:hover {
    transform: translateY(0px);
    box-shadow: 0 10px 24px rgba(32, 160, 255, .35);
    background: var(--page-accent-soft);
}

.page-microblog-card {
    position: relative;
    display: grid;
    grid-template-columns: clamp(42px, 6vw, 52px) minmax(0, 1fr);
    gap: clamp(8px, 1.6vw, var(--page-gap));
    margin-bottom: 20px;
    padding: clamp(14px, 2.3vw, 18px);
    border-radius: var(--page-radius);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.page-microblog-card:hover {
    border-color: var(--page-border-strong);
    box-shadow: var(--page-shadow-hover);
}

.page-microblog-card-m {
    position: relative;
    display: grid;
    grid-template-columns: clamp(42px, 6vw, 52px) minmax(0, 1fr);
    gap: clamp(8px, 1.6vw, var(--page-gap));
    margin-bottom: 30px;
    padding: clamp(14px, 2.3vw, 18px);
    border-radius: var(--page-radius);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.page-microblog-card-m:hover {
    border-color: var(--page-border-strong);
    box-shadow: var(--page-shadow-hover);
}

.page-avatar {
    width: clamp(38px, 5.6vw, 44px);
    height: clamp(38px, 5.6vw, 44px);
    border: 1px solid var(--page-border-strong);
    border-radius: 50%;
    background: var(--page-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.page-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.page-avatar-text {
    width: 100%;
    height: 100%;
    line-height: 1.05;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--page-accent);
    font-size: 12px;
    writing-mode: vertical-rl;
    letter-spacing: .08em;
}

.page-microblog-main {
    min-width: 0;
}

.page-microblog-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.page-microblog-author strong {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pmb-title-color);
    text-shadow: var(--pmb-title-shadow);
}

.page-microblog-time {
    display: block;
    margin-top: 3px;
    /* 与标题条副标题（记录生活碎片…）同款：14px / #758397 / 1.4 / 脚下 1px 白投影（2026-11-12） */
    color: var(--pmb-desc-color);
    font-size: 14px;
    line-height: 1.4;
    text-shadow: var(--pmb-desc-shadow);
}

.page-more-wrap {
    position: relative;
    flex: 0 0 auto;
}

.page-more-btn,
.page-menu-item,
.page-comment-cancel,
.page-btn,
.page-comment-more {
    border: 1px solid var(--page-border-strong);
    background: var(--page-card);
    color: var(--page-text);
    box-shadow: none;
}

.page-more-btn {
    width: 31px;
    height: 29px;
    border-radius: var(--page-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-more-btn::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
    opacity: .78;
}

.page-more-btn:hover,
.page-more-wrap.active .page-more-btn,
.page-comment-cancel:hover,
.page-btn:hover,
.page-comment-more:hover {
    border-color: var(--page-border-strong);
    background: var(--page-soft);
    color: var(--page-heading);
    box-shadow: none;
}

.page-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 20;
    min-width: 104px;
    padding: 7px;
    border: 1px solid var(--page-border);
    border-radius: 10px;
    background: var(--page-card);
    box-shadow: var(--page-shadow-float);
}

.page-more-wrap.active .page-more-menu {
    display: block;
}

.page-menu-item {
    width: 100%;
    height: 35px;
    border: 0;
    border-radius: var(--page-radius-sm);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .16s ease, color .16s ease;
}

.page-menu-item svg.page-menu-ico {
    flex: none;
    display: block;
}

.page-menu-item:hover {
    background: var(--page-soft);
    color: var(--page-heading);
}

.page-menu-item.danger {
    color: #e05555;
}

html[data-dark="1"] .page-menu-item.danger {
    color: #ff8080;
}

.page-microblog-body,
.page-microblog-body.only-text,
.page-microblog-body.only-text .page-microblog-text {
    display: block;
    width: 100%;
    max-width: none;
}

.page-microblog-text {
    color: var(--page-text);
    font-size: clamp(14px, 1.8vw, 15px);
    line-height: 1.9;
    letter-spacing: 0;
    word-break: break-word;
}

.page-microblog-text a {
    color: var(--page-accent);
    border-bottom: 1px dotted rgba(32, 160, 255, .4);
}

.page-media-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    justify-self: start;
    margin-top: 12px;
}

.page-media-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--page-radius-sm);
    background: var(--page-soft);
    display: block;
    cursor: zoom-in;
    text-decoration: none;
    aspect-ratio: 1 / 1;
}

.page-media-item img,
.page-media-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease, opacity .35s ease;
}

.page-media-item:hover img,
.page-media-item:hover video {
    transform: scale(1.045);
    opacity: .94;
}

.page-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    backdrop-filter: blur(4px);
}

/* ===== 卡片底部操作条（样式移植 keepmins 的 card-footer，配色沿用本主题变量） ===== */
.page-microblog-actions {
    /* 卡片内边距 / 头像列宽 / 列间距，用来把这条色带横向撑满卡片 */
    --memo-pad: clamp(14px, 2.3vw, 18px);
    --memo-avatar: clamp(42px, 6vw, 52px);
    --memo-gap: clamp(8px, 1.6vw, var(--page-gap));
    margin: 16px calc(-1 * var(--memo-pad)) 0 calc(-1 * (var(--memo-pad) + var(--memo-avatar) + var(--memo-gap)));
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--page-soft);
    border-top: 1px solid var(--page-border);
    color: var(--page-sub);
    font-size: 12.8px;
    line-height: 1;
}

/* 没有评论时它是卡片最后一块：向下贴住卡片底边，圆角跟随卡片 */
.page-microblog-actions.is-last {
    margin-bottom: calc(-1 * var(--memo-pad));
    border-radius: 0 0 calc(var(--page-radius) - 1px) calc(var(--page-radius) - 1px);
}

/* 设备信息行后面直接接底栏时，压掉默认 16px 的大空隙
   （评论预览与评论表单收起时高度为 0，不影响这条判断） */
.page-microblog-main:has(.page-microblog-device-row) .page-microblog-actions {
    margin-top: 6px;
}
/* 评论表单展开时，表单 → 底栏 10px */
.page-comment-form-wrap:has(.page-comment-form.show) + .page-microblog-actions {
    margin-top: 10px;
}

/*
 * 评论表单现在位于底栏之上，底栏恒定是卡片最后一块，
 * 所以贴底圆角无需按展开状态取消，这里不再需要 :has 覆盖。
 */

/* 互动按钮留在左侧，工具栏（编辑/删除/固定链接）推到右侧 */
.page-act-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

/* 设备信息：跟在正文下方、白卡片内右下角 */
.page-microblog-device-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
.page-microblog-device {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 62%;
    color: var(--page-light);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .01em;
}
.page-microblog-device svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    opacity: .85;
}
.page-microblog-device b {
    min-width: 0;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-dark="1"] .page-microblog-device { color: #7f8ea3; }

.page-action-btn {
    border: 0;
    background: transparent;
    color: var(--page-sub);
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
    font-size: 12.8px;
    font-family: inherit;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.page-action-btn svg {
    width: 16px;
    height: 16px;
}

.page-action-btn:hover,
.page-action-btn.liked {
    color: var(--page-accent);
}

/* 悬停在淡色带上时轻微凸起，和 keepmins 的按钮反馈一致 */
.page-action-btn:hover {
    background: var(--page-card);
    box-shadow: 0 1px 2px rgba(31, 45, 61, .07);
}
html[data-dark="1"] .page-action-btn:hover {
    background: #3d4c66;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.page-permalink-btn {
    color: var(--page-sub) !important;
    text-decoration: none;
    opacity: 1;
}

.page-permalink-btn:hover {
    color: var(--page-accent) !important;
    opacity: 1;
}


/*
 * 评论表单：外层用 0fr → 1fr 的网格行高做展开/收起，
 * 高度真实参与布局，所以底栏会跟着一起被推开，不会先跳一块再淡入。
 */
.page-comment-more {
    margin-top: 10px;
    width: auto;
    min-width: 24px;
    height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 12px/1 var(--page-font);
    color: var(--page-sub);
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.page-comment-more-arrow {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.page-comment-more-arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.45px solid currentColor;
    border-bottom: 1.45px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    border-radius: 1px;
    transition: transform .18s ease;
}

.page-comment-more.is-expanded .page-comment-more-arrow::before {
    transform: translateY(2px) rotate(225deg);
}

/*
 * 评论预览（分隔线 + 评论列表 + 展开按钮）默认整块收起，
 * 点底栏 💬 打开评论框时跟着一起从上往下展开，
 * 和评论表单共用同一套 0fr → 1fr 的网格行高过渡。
 */
.page-comment-preview {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    overflow: clip;
    transition:
        grid-template-rows .36s cubic-bezier(.4, 0, .2, 1),
        margin-top .36s cubic-bezier(.4, 0, .2, 1),
        opacity .26s ease,
        visibility 0s linear .36s;
}

.page-comment-preview > .page-comment-preview-clip {
    min-height: 0;
    /* 和表单裁剪层一样用 clip：hidden 仍可被程序化滚动，聚焦输入框会把内容顶跑 */
    overflow: clip;
}

.page-microblog-main:has(.page-comment-form.show) .page-comment-preview {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* 评论区顶部一条细分隔线，把评论和上方正文/设备行分开。
   条目本身的视觉（头像 / 作者行 / 分隔线 / 日期 / 回复箭头 / 子评论缩进）
   全部复用留言榜 comments.php 的 .mb-comment-* 一套 CSS（style.css）：
   HTML 同时带 page-comment-* 与 mb-comment-* 两套 class，前者只作折叠、
   回复框搬移等 JS 钩子，不再定义外观，避免两套样式各写一份导致
   名字下划线与分隔线错开、日期位置不一致。
   padding-top 交给 .mb-comment 的 12px，避免首条评论多出 12px。 */
.page-comment-list {
    padding-top: 0;
    border-top: 1px solid var(--mb-cm-name-line);
}

/* 折叠时只隐藏第 3 条起的评论，前 2 条直接可见 */
.page-comment-preview:not(.expanded) .page-comment-thread.is-extra {
    display: none;
}

/* @某人的前缀：微语回复独有，留言榜没有，保留在这里 */
.page-comment-at {
    margin-right: 4px;
    color: var(--page-sub);
}

/* 第三方 comment_level 插件输出的等级徽标（站长徽标已改用 .mb-comment-badge） */
.page-comment-meta .commentapprove,
.page-comment-meta .tp-comment-level,
.page-comment-meta .comment-level {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(32, 160, 255, .35);
    border-radius: 4px;
    background: var(--page-accent);
    box-shadow: 0 4px 10px rgba(32, 160, 255, .20);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.page-comment-form-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    overflow: clip;
    transition:
        grid-template-rows .36s cubic-bezier(.4, 0, .2, 1),
        margin-top .36s cubic-bezier(.4, 0, .2, 1),
        opacity .26s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear .36s;
}
.page-comment-form-wrap:has(.page-comment-form.show) {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
    visibility: visible;
    transition:
        grid-template-rows .36s cubic-bezier(.4, 0, .2, 1),
        margin-top .36s cubic-bezier(.4, 0, .2, 1),
        opacity .26s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 0s;
}
/* 裁剪层不带宽高，0fr 时才能真正压到 0（form 自身的 padding/border 会被它裁掉） */
.page-comment-form-wrap > .page-comment-form-clip {
    min-height: 0;
    /* 用 clip 而不是 hidden：hidden 仍可被程序滚动，聚焦 textarea 会把内容顶到中段 */
    overflow: clip;
}

/* 评论表单横向铺满卡片内容区：
   默认位置（main 直接子元素）时用负 margin 越过头像列，
   与底栏一样从卡片左内边距开始；回复时表单被 JS 搬进线程里，
   不满足「直接子元素」选择器，保持线程缩进不变 */
.page-microblog-main > .page-comment-form-wrap {
    --memo-avatar: clamp(42px, 6vw, 52px);
    --memo-gap: clamp(8px, 1.6vw, var(--page-gap));
    margin-left: calc(-1 * (var(--memo-avatar) + var(--memo-gap)));
}

@media (prefers-reduced-motion: reduce) {
    .page-comment-form-wrap,
    .page-comment-form-wrap:has(.page-comment-form.show) {
        transition: none;
    }
}

.page-comment-form {
    display: block;
    margin-top: 0;
    padding: 12px;
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius-sm);
    background: var(--page-soft);
    box-shadow: none;
}

.page-comment-form.show {
    display: block;
}

.page-comment-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.page-input,
.page-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--page-border-strong);
    background: var(--page-card);
    color: var(--page-text);
    border-radius: var(--page-radius-sm);
    outline: none;
    font: 14px / 1.7 var(--page-font);
    /* 联动聚焦态：边框色与外发光缓入缓出，避免聚焦/失焦瞬间跳变 */
    transition:
        border-color .25s ease-in-out,
        box-shadow .25s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .page-input,
    .page-textarea {
        transition: none;
    }
}

.page-input {
    height: 34px;
    padding: 0 10px;
}

.page-textarea {
    min-height: 74px;
    padding: 10px;
    resize: vertical;
}

.page-input:focus,
.page-textarea:focus {
    border-color: var(--page-accent);
    background: var(--page-card);
    box-shadow: 0 0 0 3px rgba(32, 160, 255, .14);
}

.page-comment-form-actions {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.page-comment-form .tp-comment-captcha {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 118px;
    height: 32px;
    border: 1px solid var(--page-border-strong);
    border-radius: var(--page-radius-sm);
    background: var(--page-card);
    overflow: hidden;
}

.page-comment-form .tp-comment-captcha-input {
    flex: 0 0 56px;
    width: 56px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--page-text);
    font-size: 13px;
    line-height: 30px;
    text-transform: lowercase;
}

.page-comment-form .tp-comment-captcha-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 30px;
    padding: 0;
    border-left: 1px solid var(--page-border-strong);
    background: var(--page-soft);
    color: var(--page-accent);
    cursor: pointer;
}

.page-comment-form .tp-comment-captcha-code img {
    width: 60px;
    height: 30px;
    display: block;
    object-fit: cover;
}

.page-comment-submit,
.page-comment-cancel,
.page-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--page-radius-sm);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.page-empty {
    padding: 42px 18px;
    border-radius: var(--page-radius);
    text-align: center;
    color: var(--page-sub);
    font-size: 14px;
}

.page-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(31, 45, 61, .45);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.page-modal-mask.show {
    display: flex !important; /* 覆盖主题 css.css 全局 .show{display:block!important}，保证模态框 flex 居中 */
}

.page-modal {
    width: min(620px, 100%);
    background: var(--page-card);
    border: 1px solid var(--page-border);
    box-shadow: var(--page-shadow);
    border-radius: var(--page-radius);
    overflow: hidden;
}

.page-modal-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--page-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-modal-titlebar {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.page-modal-leaf {
    width: 40px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-block;
    opacity: .82;
    color: var(--page-accent);
    background: currentColor;
    -webkit-mask: radial-gradient(ellipse at 35% 55%, #000 0 36%, transparent 37%) left center / 50% 80% no-repeat, radial-gradient(ellipse at 65% 45%, #000 0 34%, transparent 35%) right center / 55% 76% no-repeat;
    mask: radial-gradient(ellipse at 35% 55%, #000 0 36%, transparent 37%) left center / 50% 80% no-repeat, radial-gradient(ellipse at 65% 45%, #000 0 34%, transparent 35%) right center / 55% 76% no-repeat;
}

.page-modal-head strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

/* 关闭按钮：旧版是一个裸 × 字符，浏览器默认 button 外观（灰底 + 圆角方框）
   叠在弹窗白底上很脏。改成 icon font 的 icon-times，去掉 UA 边框与底色，
   只留克制的 hover 底和一档主色（2026-11-12 用户指定） */
.page-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--page-radius-sm);
    background: transparent;
    color: var(--page-sub);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.page-modal-close:hover {
    color: var(--page-accent);
    background: var(--page-line-soft);
}

.page-modal-close:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
}

/* icon-times 的墨迹在自己的前进盒里偏左上：盒子（15×15）明明居中，
   但叉号视觉上左移 2.5px、上移 0.5px（4 倍截图逐像素量出来的）。
   只把 <i> 盒居中不够，得把这块墨迹补回去（2026-11-12） */
.page-modal-close .font_family {
    display: block;
    transform: translate(2.5px, .25px);
}

.page-modal-body {
    padding: 18px 20px;
}

.page-field {
    margin-bottom: 13px;
}

.page-field.is-main-text {
    margin-bottom: 15px;
}

.page-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--page-heading);
    font-size: 13px;
}

.page-field small {
    color: var(--page-sub);
    font-size: 12px;
}

.page-microblog-textarea-shell {
    position: relative;
}

.page-microblog-media-input {
    display: none;
}

.page-microblog-textarea-shell .page-textarea {
    min-height: 164px;
    padding: 18px 18px 34px;
    background-color: var(--page-card);
    font-size: 15px;
    line-height: 1.8;
}

.page-text-count {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--page-sub);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

.page-modal textarea.page-textarea {
    min-height: 112px;
}

.page-modal #pageMemoImages,
.page-modal #pageMemoVideo {
    min-height: 82px;
}

.page-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 18px;
}

/* 微语图片上传行（整合 FileManager 插件） */
.page-upload-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: var(--page-soft);
    border: 1px dashed var(--page-border-strong);
    border-radius: var(--page-radius-sm);
}

.page-upload-btn {
    height: 30px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid var(--page-accent);
    background: var(--page-accent);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(32, 160, 255, .25);
    transition: background .2s, box-shadow .2s;
}

.page-upload-btn:hover {
    background: var(--page-accent-soft);
    box-shadow: 0 6px 14px rgba(32, 160, 255, .35);
}

.page-field .page-webp-opt {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    gap: 6px;
    margin-bottom: 0;
    background: var(--page-card);
    border: 1px solid var(--page-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--page-text);
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, box-shadow .2s;
}

.page-field .page-webp-opt:hover {
    border-color: var(--page-accent);
    box-shadow: 0 2px 8px rgba(32, 160, 255, .12);
}

.page-webp-opt input[type="checkbox"] {
    width: 14px;
    height: 14px;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--page-accent);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
}

.page-webp-opt em {
    font-style: normal;
    color: var(--page-light);
    font-size: 11px;
    line-height: 1;
}

.page-upload-hint {
    font-size: 12px;
    color: var(--page-light);
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .page-microblog-head {
        min-height: auto;
        padding: 12px;
        gap: 12px;
    }
    .page-microblog-title-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        line-height: normal;
        /* 竖排时吃满图标右侧剩余宽度，副标题折行才不会提前断在 268px 处（2026-11-12） */
        flex: 1 1 auto;
        min-width: 0;
    }
    .page-microblog-title p {
        padding-left: 0;
        /* 行楷 15px 比原来 14px 宽，窄屏竖排时整行会顶出卡片（实测 390px 下溢出 16px），
           这里允许折行并夹住宽度，必要时分两行（2026-11-12） */
        max-width: 100%;
        white-space: normal;
    }
    .page-microblog-title p::before {
        display: none;
    }
    .page-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 窄屏下的评论缩进与日期格式统一由 style.css 的
   .mb-comment-children / .mb-cm-date-* 媒体查询负责，这里不再覆盖。 */


/* ===== 微语翻页：延续 niRvana panda_pagi 胶囊分段条风格 ===== */


.page-microblog-pagi .home-pagination {
    position: relative;
    white-space: nowrap;
    margin: 28px auto -20px;
    padding: 1;
    text-align: center;
    display: block;
    width: max-content;
    background: #e0e4ec;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px rgba(255,255,255,.5), 0 5px 10px rgba(31,45,61,.15) inset;
    box-shadow: 0 1px rgba(255,255,255,.5), 0 5px 10px rgba(31,45,61,.15) inset;
    list-style: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.page-microblog-pagi .home-pagination > li {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}
.page-microblog-pagi .home-pagination > li > a {
    display: block;
    text-decoration: none;
    position: relative;
    color: #99a9bf;
    text-shadow: 0 1px rgba(255,255,255,.75);
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    -webkit-transition: .25s;
    transition: .25s;
    border-radius: 100px;
}
.page-microblog-pagi .home-pagination > li:not(.active) > a:hover {
    text-shadow: 0 0 10px #fff, 0 0 13px #fff;
}
.page-microblog-pagi .home-pagination > li.active > a {
    color: #738192;
    font-weight: 600;
}
.page-microblog-pagi .home-pagination > li.anchor {
    position: absolute;
    top: 1px;
    left: 0;
    width: 38px;
    height: 38px;
    background: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f7f8fa));
    background: -webkit-linear-gradient(#fff,#f7f8fa);
    background: linear-gradient(#fff,#f7f8fa);
    border-radius: 100px;
    -webkit-box-shadow: 0 6px 6px rgba(31,45,61,.05), 0 10px 10px rgba(31,45,61,.15), 0 -1px 2px rgba(255,255,255,.5) inset;
    box-shadow: 0 6px 6px rgba(31,45,61,.05), 0 10px 10px rgba(31,45,61,.15), 0 -1px 2px rgba(255,255,255,.5) inset;
    -webkit-transition: left .25s ease, width .25s ease, opacity .25s ease;
    transition: left .25s ease, width .25s ease, opacity .25s ease;
    pointer-events: none;
}
.page-microblog-pagi .home-pagination .home-page-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
.page-microblog-pagi .home-pagination .home-page-text {
    display: none;
}


/* ===== 微语卡片天气：右上角「图标 + 天气 / 温度」 =====
   绝对定位悬浮在卡片右上角，完全脱流：既不占宽度也不占高度，
   卡片的头部高度只由作者名/时间/心情胶囊自身决定。
   头部只加 .has-weather 的右侧 padding 做水平避让（横向让位不产生高度），
   避免长名字或长心情胶囊钻到天气底下。
   数据由 js/page_microblog_weather.js 异步填充；未取到数据时保持透明，不留空框。 */
.page-microblog-topline.has-weather {
    padding-right: 128px;
}

.page-microblog-weather {
    position: absolute;
    top: 14px;
    right: 16px;
    flex: 0 0 auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 84px;
    max-width: 112px;
    min-height: 58px;
    color: #8d97a5;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.page-microblog-weather.is-ready { opacity: 1; }
/* svg 同时给出 max-* 与 flex 基线：容器一旦被 flex/grid 拉伸（或尺寸规则没命中），
   图标也不会撑满整行变成「大图标」 */
.page-microblog-weather svg {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    color: #c4cbd5;
}
.page-microblog-weather b { font-weight: 400; white-space: nowrap; letter-spacing: .01em; }
html[data-dark="1"] .page-microblog-weather { color: #8b9bb0; }
html[data-dark="1"] .page-microblog-weather svg { color: #8a9cb6; }
@media (max-width: 720px) {
    .page-microblog-topline.has-weather { padding-right: 100px; }
    .page-microblog-weather {
        top: 12px;
        right: 12px;
        width: auto;
        min-width: 64px;
        max-width: 92px;
        min-height: 50px;
        gap: 2px;
        font-size: 11px;
    }
    .page-microblog-weather svg { width: 34px; height: 34px; }
}


/* ===== 管理员「编辑 / 删除」：常驻卡片底部操作栏（原右上角 ··· 菜单已移除） ===== */
.page-microblog-actions .page-admin-del-form { display: inline-flex; margin: 0; }
.page-microblog-actions .page-admin-edit,
.page-microblog-actions .page-admin-del { color: var(--page-sub); }
.page-microblog-actions .page-admin-edit:hover { color: var(--page-accent); }
.page-microblog-actions .page-admin-del,
.page-microblog-actions .page-admin-del:hover { color: #e05555; }
html[data-dark="1"] .page-microblog-actions .page-admin-del,
html[data-dark="1"] .page-microblog-actions .page-admin-del:hover { color: #ff8080; }
@media (max-width: 720px) {
    .page-microblog-actions .page-admin-edit,
    .page-microblog-actions .page-admin-del { font-size: 12px; }
    .page-microblog-actions { gap: 2px; flex-wrap: wrap; row-gap: 4px; padding: 7px 12px; }
    .page-action-btn { padding: 6px 8px; font-size: 12px; }
    /* 手机上设备信息右对齐，避免被压缩成「Windows10 Edge156…」 */
    .page-microblog-device-row { margin-top: 13px; }
    .page-microblog-device {
        max-width: 100%;
        font-size: 11px;
        gap: 5px;
    }
    .page-microblog-device svg { width: 12px; height: 12px; }
}


/* ===== 心情表情：卡片徽标 / 发布弹窗选择行 / 选择器弹层 ===== */
.page-microblog-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.page-microblog-meta-row .page-microblog-time { margin-top: 0; }

.page-microblog-mood {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 9px 2px 3px;
    border: 1px solid var(--mood-line, var(--page-border));
    border-radius: 999px;
    background: var(--mood-bg, var(--page-soft));
    color: var(--page-sub);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    transition: border-color .18s ease, color .18s ease;
}
.page-microblog-mood:hover { border-color: var(--mood-c, var(--page-border-strong)); }
.page-microblog-mood-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mood-bg, rgba(32, 160, 255, .12));
    color: var(--mood-c, var(--page-accent));
}
.page-microblog-mood-ico svg { display: block; }
.page-microblog-mood em {
    font-style: normal;
    color: var(--page-sub);
    letter-spacing: .01em;
}
html[data-dark="1"] .page-microblog-mood { background: var(--page-soft); border-color: var(--mood-line, var(--page-border)); }
html[data-dark="1"] .page-microblog-mood-ico { background: rgba(255, 255, 255, .06); }

/* 深色底上把彩色图标整体提亮一点，避免深蓝/深棕糊在背景里 */
html[data-dark="1"] .page-microblog-mood-ico svg,
html[data-dark="1"] .page-mood-ico svg,
html[data-dark="1"] .page-mood-trigger-ico svg { filter: brightness(1.18) saturate(1.06); }

/* 发布 / 编辑弹窗里的选择行 */
.page-field.page-mood-field { margin-bottom: 15px; }
.page-mood-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.page-mood-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--page-border-strong);
    border-radius: var(--page-radius-sm);
    background: var(--page-card);
    color: var(--page-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.page-mood-trigger:hover {
    border-color: var(--page-accent);
    color: var(--page-accent);
    box-shadow: 0 2px 10px rgba(32, 160, 255, .14);
}
.page-mood-trigger-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--page-accent);
}
.page-mood-trigger-ico svg { display: block; width: 16px; height: 16px; }
.page-mood-trigger-arrow {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .5;
}

/* ---------------------------------------------------------------
   发布 / 编辑弹窗：表情 + 添加心情 并排一行（2026-11-12 用户要求）
   原来表情按钮留在正文框下面、心情字段自己一条 + 13~15px 外边距，
   于是两块上下叠着、左侧还错开。这里把两者塞进同一个 flex 行，
   并把表情按钮的尺寸/描边/底色对齐 .page-mood-trigger（34px 高、
   --page-border-strong、--page-card），看起来才像一对。
   注意表情按钮的样式来自 functions.php 内联注入的 <style>（在 body 里、
   晚于 style.css），所以覆盖必须靠更高特异性。
   --------------------------------------------------------------- */
.page-compose-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.page-compose-actions > .page-field.page-mood-field {
    margin: 0;
}

/* 心情字段的 <label> 是空标签，在行里会占一段无意义宽度 */
.page-compose-actions > .page-field.page-mood-field > label {
    display: none;
}

.page-compose-actions .ni-memo-face-toggle {
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border-color: var(--page-border-strong);
    border-radius: var(--page-radius-sm);
    background: var(--page-card);
    font-size: 13px;
}

.page-compose-actions .ni-memo-face-toggle svg {
    width: 16px;
    height: 16px;
}

/* functions.php 内联的深色规则是 html[data-dark="1"] .ni-memo-face-toggle（0,2,0），
   这里再高一档，保证两边同色 */
html[data-dark="1"] .page-compose-actions .ni-memo-face-toggle {
    background: var(--page-card);
    border-color: var(--page-border-strong);
    color: var(--page-text);
}
.page-mood-wipe {
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--page-sub);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.page-mood-wipe:hover { color: #e05555; background: rgba(224, 85, 85, .08); }
.page-mood-wipe[hidden] { display: none; }

/* 选择器弹层 */
.page-mood-mask {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(31, 45, 61, .45);
    backdrop-filter: blur(5px);
}
.page-mood-mask.show { display: flex !important; }
html.page-mood-lock, html.page-mood-lock body { overflow: hidden; }

.page-mood-dialog {
    display: flex;
    flex-direction: column;
    width: min(600px, 100%);
    max-height: min(86vh, 720px);
    background: var(--page-card);
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius);
    box-shadow: var(--page-shadow-hover);
    overflow: hidden;
    font-family: var(--page-font);
}
.page-mood-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px 12px;
}
.page-mood-head strong {
    color: var(--page-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}
.page-mood-close {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--page-sub);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.page-mood-close:hover { color: var(--page-accent); background: var(--page-soft); }

.page-mood-tabs {
    display: flex;
    gap: 0;
    margin: 0 18px;
    padding: 4px;
    border-radius: var(--page-radius-sm);
    background: var(--page-soft);
}
.page-mood-tab {
    flex: 1 1 0;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--page-sub);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.page-mood-tab:hover { color: var(--page-accent); }
.page-mood-tab.is-active {
    background: var(--page-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(32, 160, 255, .3);
}

.page-mood-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px 6px;
    -webkit-overflow-scrolling: touch;
}
.page-mood-grid {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}
.page-mood-grid.is-active { display: grid; }

.page-mood-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--page-radius-sm);
    background: transparent;
    color: var(--page-sub);
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.page-mood-item:hover { background: var(--mood-bg, var(--page-soft)); color: var(--mood-c, var(--page-accent)); }
.page-mood-item.is-selected {
    border-color: var(--mood-c, var(--page-accent));
    background: var(--mood-bg, rgba(32, 160, 255, .08));
    color: var(--mood-c, var(--page-accent));
}
.page-mood-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}
.page-mood-ico svg { display: block; width: 34px; height: 34px; }
.page-mood-item em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    word-break: keep-all;
}

.page-mood-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--page-border);
}
.page-mood-foot-right { display: flex; gap: 10px; }
.page-mood-btn,
.page-mood-wipe-btn {
    height: 34px;
    padding: 0 20px;
    border: 1px solid var(--page-border-strong);
    border-radius: var(--page-radius-sm);
    background: var(--page-card);
    color: var(--page-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.page-mood-btn:hover { border-color: var(--page-accent); color: var(--page-accent); }
.page-mood-btn.primary {
    border-color: var(--page-accent);
    background: var(--page-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(32, 160, 255, .26);
}
.page-mood-btn.primary:hover { background: var(--page-accent-soft); color: #fff; }
.page-mood-wipe-btn {
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    color: var(--page-light);
}
.page-mood-wipe-btn:hover { color: #e05555; background: rgba(224, 85, 85, .08); }

@media (max-width: 720px) {
    .page-mood-mask { padding: 10px; align-items: flex-end; }
    .page-mood-dialog { width: 100%; max-height: 88vh; border-radius: 14px; }
    .page-mood-head { padding: 13px 14px 10px; }
    .page-mood-head strong { font-size: 15px; }
    .page-mood-tabs { margin: 0 14px; }
    .page-mood-tab { height: 32px; font-size: 12.5px; }
    .page-mood-panels { padding: 10px 8px 4px; }
    .page-mood-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .page-mood-item { padding: 9px 2px 7px; gap: 6px; }
    .page-mood-ico { width: 28px; height: 28px; }
    .page-mood-ico svg { width: 28px; height: 28px; }
    .page-mood-item em { font-size: 11px; }
    .page-mood-foot { padding: 10px 14px 14px; }
    .page-mood-btn { padding: 0 16px; }
    .page-mood-wipe-btn { padding: 0 10px; font-size: 12px; }
    .page-microblog-mood { font-size: 11.5px; }
}


/* ============================================================
   03  描边卡片皮肤（body[data-card-style="border"]）
   原 css/border.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/* ============================================================
   MicroBlog — border.css  「描边卡片」皮肤
   参考 Panda Studio /guestbook 的真实结构（用户提供的原始 CSS + CDP 实测）：
     .model-wrapper  padding 7px / radius 1.25em / margin 20px 0
       box-shadow: inset 0 0 0 1px #ffffff80, inset 0 1px 0 #ffffff80, 0 1em 2em …
     .model          background: var(--white-opacity-85); border: 1px solid #fff
   本站不增加 DOM，用 border: 7px solid transparent 等效 wrapper 的透明 padding：
     边框带完全透明 → 透出页面背景；padding-box 背景 = 85% 白内层卡面；
     box-shadow = 外缘白细线 + 内层白边 + 顶部高光 + 大柔影。
   页面背景与 glass.css 共用 style.css 的 #dfeaf7 + 三枚彩色柔光（含暗色）。
   全站宽度由 <html style> 的 --mb-width 统一驱动，见 style.css。
   描边与阴影常态直接显示，hover 不产生任何变化、无过渡动画。
   在 page_microblog.css 之后加载，与 glass.css 二选一，互不干扰。
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计令牌（覆盖 page_microblog.css 的 --page-*）
   ------------------------------------------------------------ */
:root {
    /* 目标站卡面实测 (249,251,253)，非纯白 */
    --page-card: #f9fbfd;
    --page-soft: #f4f8fd;
    --page-border: #c3d5e8;
    --page-border-strong: #9dbce0;
    --page-line-soft: #e6edf6;
    /* 普通文字色（微语正文 / 独立页正文 / 友链信息行…）2026-11-12 由
       #3f5a78 调成 #475669：褪掉一点蓝、更中性，与设计稿「常规文字」一致。
       深色对应值在 html[data-dark="1"] 里单独给，不受影响。 */
    --page-text: #475669;
    --page-heading: #2c4a6e;
    --page-sub: #5578a1;
    --page-light: #8aa2bd;
    --page-accent: #1f8bff;
    --page-accent-soft: #6bb4ff;
    --page-radius: 18px;
    --page-radius-sm: 11px;
    --page-gap: 12px;
    --page-shadow: 0 2px 6px rgba(0, 30, 60, .05), 0 10px 24px rgba(0, 30, 60, .09);
    --page-shadow-hover: 0 4px 10px rgba(0, 30, 60, .07), 0 16px 34px rgba(0, 30, 60, .15);
    --page-shadow-float: 0 16px 34px rgba(0, 30, 60, .14);
    --page-mask-border: #ffffff;
    --page-font: Play, "微软雅黑", "Microsoft YaHei UI", "Microsoft YaHei",
        "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* 与 glass.css 共用底色 #dfeaf7 */
    --bd-bg: #dfeaf7;
    --bd-halo: rgba(31, 139, 255, .16);

    /* 相框结构：7px 透明 border 带 + 85% 白卡面 + 目标站三条阴影 */
    --bd-frame-w: 7px;                                   /* .model-wrapper padding */
    --bd-frame-radius: 20px;                             /* 1.25em */
    --bd-model-bg: rgba(255, 255, 255, .85);             /* --white-opacity-85 */
    --bd-wrapper-edge: rgba(255, 255, 255, .5);          /* #ffffff80 */
    --bd-wrapper-shadow: 0 16px 32px rgba(0, 30, 60, .15); /* 0 1em 2em gray15 */
    /* 横幅内圈白线：与 --bd-card-shadow 的两条 inset 同值，蒙版层单独复用 */
    --bd-inner-line: #ffffff;
    /* wrapper 外缘 1px 白边 + model 1px 纯白边 + 顶部白高光 + 大柔影 */
    --bd-card-shadow:
        0 0 0 1px var(--bd-wrapper-edge),
        inset 0 0 0 1px #ffffff,
        inset 0 1px 0 var(--bd-wrapper-edge),
        var(--bd-wrapper-shadow);
}

html[data-dark="1"] {
    --page-card: #1a2637;
    --page-soft: #223046;
    --page-border: #3b5270;
    --page-border-strong: #5c7ea8;
    --page-line-soft: #2b3c52;
    --page-text: #b9cbe0;
    --page-heading: #e2ecf8;
    --page-sub: #93aecb;
    --page-light: #6d88a6;
    --page-accent: #5cadff;
    --page-accent-soft: #8ec9ff;
    --page-shadow: 0 2px 6px rgba(0, 0, 0, .20), 0 14px 30px rgba(0, 0, 0, .42);
    --page-shadow-hover: 0 4px 10px rgba(0, 0, 0, .26), 0 20px 42px rgba(0, 0, 0, .55);
    --page-shadow-float: 0 18px 38px rgba(0, 0, 0, .50);
    --page-mask-border: rgba(255, 255, 255, .10);

    --bd-bg: #0a101d;                  /* 与 glass.css 暗色底色一致 */
    --bd-halo: rgba(92, 173, 255, .20);

    /* 暗色等价值（目标站无暗色，按同结构降亮） */
    --bd-model-bg: rgba(26, 38, 55, .88);
    --bd-wrapper-edge: rgba(255, 255, 255, .12);
    --bd-wrapper-shadow: 0 16px 32px rgba(0, 0, 0, .45);
    --bd-inner-line: rgba(255, 255, 255, .12);
    --bd-card-shadow:
        0 0 0 1px var(--bd-wrapper-edge),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 1px 0 var(--bd-wrapper-edge),
        var(--bd-wrapper-shadow);
}

/* ------------------------------------------------------------
   2. 页面背景：与 glass.css 共用 style.css 的同一套
      · body 底色 #dfeaf7 / 暗色 #0a101d
      · .mb-bg 三枚彩色柔光（蓝/青/紫，暗色降亮）由 style.css 提供
      · 这里不叠加任何额外背景层与动画
   ------------------------------------------------------------ */

/* 底色画在 html 上、body 透明 —— 否则 body 的实色背景会盖住 z-index:-1 的
   .mb-bg 三枚柔光，背景就变成一整块平涂色（详见 style.css 里 html 的注释） */
html { background: var(--bd-bg); }
html[data-dark="1"] { background: var(--bd-bg); }
body { background: transparent; }
html[data-dark="1"] body { background: transparent; }

/* 不叠加任何额外背景层与动画，三枚彩色柔光由 style.css 提供 */
.mb-bg { background-image: none; animation: none; }

/* ------------------------------------------------------------
   3. 全站玻璃基类 → 纯色实心；内容型卡片套白相框，导航条除外
   ------------------------------------------------------------ */
.mb-glass {
    background: var(--page-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--page-border);
    border-radius: var(--page-radius);
    box-shadow: var(--page-shadow), inset 0 1px 0 var(--page-mask-border);
}

/* 移除 Liquid Glass 镜面渐变描边（会造成边缘发虚） */
.mb-glass::before { display: none; }

.mb-glass:not(.mb-nav) {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    /* 只有内层 .model 的 85% 白卡面，边框带透明透出背景 */
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    box-shadow: var(--bd-card-shadow);
}

/* ------------------------------------------------------------
   3b. 独立页卡片：与首页 .mb-card / 微语卡同款 7px 白相框
       关于页 / 友链页 / 归档页 / 留言榜 / 博友动态的卡片在 pages.css
       里是「1px 描边 + 玻璃底」，这里统一升级成相框结构。
       pages.css 在本文件之后加载、且选择器同为 0,1,0，
       必须带 body[data-card-style] 前缀（0,2,1）才压得住它。

       归档页（2026-11-10 二次调整）：整页内容区合并为一张大相框卡——
       .ni-gd-wrap 套相框，统计 / 分类 / 标签 / 归档面板全部压平为
       卡内分区（细线分隔），不再各自成卡（见下方专属规则）。
       友情链接页（2026-11-10）：同样处理——.ni-links-wrap 套相框，
       申请规则 / 本站信息 / 分类导航 / 每个友链小卡全部压平。
   ------------------------------------------------------------ */
body[data-card-style="border"] .ni-ab-card,
body[data-card-style="border"] .ztj-rss-hero,
body[data-card-style="border"] .ztj-rss-stat,
body[data-card-style="border"] .ztj-rss-card,
body[data-card-style="border"] .ztj-rss-empty {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
}

/* 归档页整页大卡：wrap 从「透明纵向堆叠容器」升级为相框卡 */
body[data-card-style="border"] .ni-gd-wrap {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    padding: 24px;
}

/* 窄屏要盖过上面这条（0,2,1）的 24px 内边距 */
@media (max-width: 991px) {
    body[data-card-style="border"] .ni-gd-wrap { padding: 18px 14px; }
}

/* 统计组：降级为大卡内的浅底细线分区，四格透明（压过 pages.css 玻璃底） */
body[data-card-style="border"] .ni-gd-stats {
    border: 1px solid var(--page-line-soft);
    border-radius: 14px;
    background: var(--page-soft-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 12px 14px;
    gap: 8px;
    margin-bottom: 18px;
}

body[data-card-style="border"] .ni-gd-stat {
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 10px 12px;
}

/* 分类统计 / 标签统计 / 归档面板：去掉各自相框，压平为大卡内分区，
   用细线与大卡上沿区隔 */
body[data-card-style="border"] .ni-gd-cloud,
body[data-card-style="border"] .ni-gd-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-top: 1px solid var(--page-line-soft);
    padding: 18px 0 0;
    margin-bottom: 18px;
}

body[data-card-style="border"] .ni-gd-panel { margin-bottom: 0; }

/* ------------------------------------------------------------
   3c. 友情链接页：整页内容区合并为一张大相框卡
       申请规则 / 本站信息 / 分类导航 / 每个友链小卡全部降级为
       卡内浅底细线分区，不再各自成卡（选择器带 .ni-links-wrap 限定，
       避免影响别的页面）
   ------------------------------------------------------------ */
body[data-card-style="border"] .ni-links-wrap {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    padding: 24px;
}

@media (max-width: 991px) {
    body[data-card-style="border"] .ni-links-wrap { padding: 18px 14px; }
}

/* 左右两块说明面板 + 分类导航条：浅底 + 细线 */
body[data-card-style="border"] .ni-links-wrap .ni-panel,
body[data-card-style="border"] .ni-links-wrap .ni-sort-nav {
    border: 1px solid var(--page-line-soft);
    border-radius: 14px;
    background: var(--page-soft-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 友链小卡：压平为浅底细线（去掉白相框与投影），hover 只换描边 */
body[data-card-style="border"] .ni-links-wrap .ni-link-card {
    border: 1px solid var(--page-line-soft);
    border-radius: 12px;
    background: var(--page-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

body[data-card-style="border"] .ni-links-wrap .ni-link-card:hover {
    border-color: var(--page-accent);
    box-shadow: none;
}

/* 空状态框同步压平 */
body[data-card-style="border"] .ni-links-wrap .ni-links-empty {
    border-color: var(--page-line-soft);
    background: var(--page-soft);
}

/* ------------------------------------------------------------
   3d. 博友动态页：整页内容区合并为一张大相框卡
       标题条 / 统计 / 空状态 / 文章卡全部降级为卡内分区
   ------------------------------------------------------------ */
body[data-card-style="border"] .ztj-rss-wrap {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    padding: 24px;
}

@media (max-width: 991px) {
    body[data-card-style="border"] .ztj-rss-wrap { padding: 18px 14px; }
}

/* 标题条：压平为卡内标题区，底线分隔 */
body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-hero {
    border: 0;
    border-bottom: 1px solid var(--page-line-soft);
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0 0 14px;
    margin-bottom: 14px;
}

/* 统计组：浅底细线分区，四格透明 */
body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-stats {
    border: 1px solid var(--page-line-soft);
    border-radius: 14px;
    background: var(--page-soft-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 12px 14px;
    gap: 8px;
    margin-bottom: 16px;
}

body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-stat {
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 统计图标：淡蓝圆角块 + 深蓝图标（与归档页统计同款，避免浅灰看不清） */
body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-stat-icon {
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(31, 139, 255, .12);
    color: #0a5cb8;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-dark="1"] body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-stat-icon {
    background: rgba(92, 173, 255, .18);
    color: #8ec9ff;
}

/* 文章卡：压平为浅底细线，hover 只换描边 */
body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-card {
    border: 1px solid var(--page-line-soft);
    border-radius: 12px;
    background: var(--page-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-card:hover {
    border-color: var(--page-accent);
    box-shadow: none;
}

/* 空状态框同步压平 */
body[data-card-style="border"] .ztj-rss-wrap .ztj-rss-empty {
    border: 1px solid var(--page-line-soft);
    border-radius: 14px;
    background: var(--page-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* ------------------------------------------------------------
   3e. 关于页「大卡套小卡」：2026-11-11 用户要求外层加一张大卡，
       内部各小节仍是独立卡片（不是细线分区）。
       外层走站内同款白相框；内层小卡改用浅底 + 细描边、去掉相框与
       大投影，避免白上白糊成一片、也避免两层相框叠加过重。
   ------------------------------------------------------------ */
body[data-card-style="border"] .ni-ab-wrap {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    padding: 24px;
}

@media (max-width: 991px) {
    body[data-card-style="border"] .ni-ab-wrap { padding: 18px 14px; }
}

body[data-card-style="border"] .ni-ab-wrap .ni-ab-card {
    border: 1px solid var(--page-line-soft);
    border-radius: 14px;
    /* 内层小卡纯白，与外层半透白大卡拉开层次；暗色仍用 page-soft 深底（见下条） */
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

html[data-dark="1"] body[data-card-style="border"] .ni-ab-wrap .ni-ab-card {
    background: var(--page-soft);
}

/* 最后一卡贴底，避免与大卡内边距叠加出双倍留白 */
body[data-card-style="border"] .ni-ab-wrap .ni-ab-card:last-child {
    margin-bottom: 0;
}

/* 统计图标：浅底组上原为浅灰（--mb-text-3）+ 玻璃浅底，颜色相近糊在一起；
   改为淡蓝圆角块 + 深蓝图标、加粗描边（22px 小图上 1.8 太细，视觉发虚） */
body[data-card-style="border"] .ni-gd-stat-icon {
    background: rgba(31, 139, 255, .12);
    color: #0a5cb8;
}

body[data-card-style="border"] .ni-gd-stat-icon svg path { stroke-width: 2.1; }

html[data-dark="1"] body[data-card-style="border"] .ni-gd-stat-icon {
    background: rgba(92, 173, 255, .18);
    color: #8ec9ff;
}

/* 分类/标签统计标题图标：默认浅灰加深为次级文字色；hover 变蓝仍由 pages.css 提供 */
body[data-card-style="border"] .ni-gd-cloud-head svg { color: var(--page-sub); }

/* 留言榜：相框统一挂在外层 .ni-rank-wrap（与关于 / 友链 / 归档同构），
   内层 .ni-rank-board 降级为纯内容容器（无底 / 无框 / 无投影 / 无内边距）；
   统计格 / 领奖台 / 明细在 pages.css 里已去掉各自的底与外框 */
body[data-card-style="border"] .ni-rank-wrap {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    padding: 28px;
}

/* 窄屏要盖过上面这条（0,2,1）的 28px 内边距 */
@media (max-width: 991px) {
    body[data-card-style="border"] .ni-rank-wrap { padding: 18px 14px; }
}

body[data-card-style="border"] .ni-rank-board {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 原 hover 只换 1px 描边色 + 轻阴影；相框没有「描边色」可换，
   这里钉回常态值（transform 上浮仍由 pages.css 提供） */
body[data-card-style="border"] .ni-link-card:hover,
body[data-card-style="border"] .ztj-rss-card:hover {
    border-color: transparent;
    box-shadow: var(--bd-card-shadow);
}

/* ------------------------------------------------------------
   4. 横幅：与内容卡片同款白相框（参考站 banner 也是白框包深卡）
   ------------------------------------------------------------ */
.mb-hero {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    /* margin-top 归零：与独立页横幅（.mb-page-hero，margin-top 0）对齐，
       避免首页头图比其它独立页多出一段顶部空隙 */
    margin: 0 0 30px;
    /* 横幅自身是深蓝渐变，裁到 padding-box；边框带透明透出背景光影 */
    background: var(--mb-grad-hero) padding-box;
    /* 与微语卡片 / 独立页大卡完全同款的四层相框：
       外缘 1px 白边 + 内层 1px 纯白边 + 顶部高光 + 大柔影。
       以前这里只写了外缘 + 柔影两层，横幅看起来比其它相框「薄一圈」。 */
    box-shadow: var(--bd-card-shadow);
}

/* 横幅是深蓝渐变或照片，元素自身的 inset 白边会被全幅蒙版/图片盖住，
   因此把内圈白线与顶部高光补画在最上层（透明、不拦截点击）：
   · 首页无头图：新建一层透明覆盖层
   · 首页有头图 / 独立页横幅：复用原有的暗色蒙版 ::after（保持其 z-index:1，
     不能抬到文字之上，否则标题会被蒙版压暗） */
/* 内圈白线的圆角必须与「边框带以内」的卡面圆角同心：
   ::after 铺在 padding-box 上（inset:0 从 border 以内算），
   若沿用 inherit 的 20px，弧线会比卡面小一圈、斜切进深蓝渐变里，
   四角就会出现一道白弧 + 角外露出底色（用户反馈的「圆角有问题」）。
   同心半径 = 外框半径 − 边框带宽 = 20px − 7px。 */
body[data-card-style="border"] .mb-hero:not(.has-img):not(.mb-page-hero)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: calc(var(--bd-frame-radius) - var(--bd-frame-w));
    box-shadow: inset 0 0 0 1px var(--bd-inner-line), inset 0 1px 0 var(--bd-inner-line);
}

body[data-card-style="border"] .mb-hero.has-img::after,
body[data-card-style="border"] .mb-page-hero::after {
    border-radius: calc(var(--bd-frame-radius) - var(--bd-frame-w));
    box-shadow: inset 0 0 0 1px var(--bd-inner-line), inset 0 1px 0 var(--bd-inner-line);
}

/* ------------------------------------------------------------
   5. 微语卡片：严格对应目标站 .model-wrapper > .model
      border = wrapper 的 7px 透明 padding 带（透出 #full-bg 光影）
      padding-box 背景 = .model 的 85% 白半透明卡面
      box-shadow = wrapper 外缘白边 + model 1px 纯白边 + 顶部高光 + 大柔影
   ------------------------------------------------------------ */
.page-microblog-head,
.page-microblog-card,
.page-microblog-card-m {
    border: var(--bd-frame-w) solid transparent;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--bd-model-bg), var(--bd-model-bg)) padding-box;
    color: var(--page-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
    /* 直接显示，无过渡动画（压过基础样式的 transition） */
    transition: none;
}

.page-microblog-card   { margin-bottom: 20px; }
.page-microblog-card-m { margin-bottom: 26px; }
.page-microblog-head   { margin: 28px auto 16px; padding: 14px 20px; }

/* ------------------------------------------------------------
   5b. 鼠标划过不产生任何变化
   基础 page_microblog.css 的 .page-microblog-card:hover / -m:hover 会改
   border-color 与 box-shadow，style.css 的 .mb-card:hover 会改阴影；
   这里用后置、不低于其特异性的规则把 hover 状态显式钉回常态值，
   确保「描边与阴影直接显示，不随鼠标划过变化」。
   ------------------------------------------------------------ */
/* 常态也关闭过渡（style.css 的 .mb-card 带 box-shadow .3s），移出鼠标同样无动画 */
.mb-glass:not(.mb-nav),
.mb-hero,
.mb-card { transition: none; }

.page-microblog-head:hover,
.page-microblog-card:hover,
.page-microblog-card-m:hover,
.mb-glass:not(.mb-nav):hover,
.mb-card:hover {
    border-color: transparent;
    box-shadow: var(--bd-card-shadow);
    transition: none;
}

.mb-hero:hover {
    border-color: transparent;
    box-shadow: var(--bd-card-shadow);
    transition: none;
}

/* 弹窗 / 空态：单层描边，浮层阴影更重 */
.page-empty,
.page-modal {
    border: 1px solid var(--page-border);
    background: var(--page-card);
    color: var(--page-text);
    border-radius: var(--page-radius);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--page-shadow-float), inset 0 1px 0 var(--page-mask-border);
}

/* ------------------------------------------------------------
   6. 评论区：细分隔线 + 白底描边输入框
   条目级视觉已统一到 style.css 的留言榜 .mb-comment-* 一套 CSS，
   这里只留评论容器顶部那条分隔线与表单皮肤：不再单独给微语评论之间
   补虚线（留言榜没有，补了就会出现两套不一致的第二道线）。
   分隔色沿用留言榜令牌 --mb-cm-name-line，深浅色自动切换。
   ------------------------------------------------------------ */
.page-comment-list { border-top: 1px solid var(--mb-cm-name-line); }

.page-comment-form,
.page-comment-preview {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.page-comment-form {
    border: 1px solid var(--page-border);
    border-radius: 14px;
    background: var(--page-soft);
    box-shadow: inset 0 1px 0 var(--page-mask-border);
}

.page-input,
.page-textarea {
    border: 1px solid var(--page-border);
    background: var(--page-card);
    color: var(--page-text);
    border-radius: 10px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 2px rgba(0, 30, 60, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

html[data-dark="1"] .page-input,
html[data-dark="1"] .page-textarea { box-shadow: none; }

.page-input:focus,
.page-textarea:focus {
    border-color: var(--page-accent);
    background: var(--page-card);
    box-shadow: 0 0 0 3px var(--bd-halo);
    outline: none;
}

/* 九宫格配图：清晰圆角 + 细描边 */
.page-media-grid img,
.page-media-grid video {
    border-radius: 12px;
    border: 1px solid var(--page-line-soft);
}

/* ------------------------------------------------------------
   7. 按钮与下拉菜单
   ------------------------------------------------------------ */
.page-btn { border-radius: 10px; }
.page-btn:hover { transform: translateY(-1px); }

.page-btn.primary {
    background: linear-gradient(135deg, #1565c0, #1e88e5 55%, #00b0ff);
    border: 1px solid rgba(21, 101, 192, .55);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 139, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.page-btn.primary:hover { filter: brightness(1.06); }

.page-more-menu {
    background: var(--page-card);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    box-shadow: var(--page-shadow-float);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ------------------------------------------------------------
   8. 弹窗遮罩与表情面板
   ------------------------------------------------------------ */
.page-modal-mask {
    background: rgba(31, 45, 61, .42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.page-modal {
    background: var(--page-card);
    box-shadow: 0 24px 60px rgba(0, 30, 60, .25), inset 0 1px 0 var(--page-mask-border);
}

.ni-memo-face-panel {
    background: var(--page-card);
    border: 1px solid var(--page-border);
    box-shadow: var(--page-shadow-float);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-dark="1"] .ni-memo-face-panel { border-color: var(--page-border); }

/* ------------------------------------------------------------
   9. 分页：白色描边胶囊（对齐旧选择器特异性）
   ------------------------------------------------------------ */
.page-microblog-pagi .home-pagination {
    background: transparent;
    box-shadow: none;
}

.page-microblog-pagi .home-pagination > li > a {
    margin: 0 3px;
    border-radius: 10px;
    background: var(--page-card);
    border: 1px solid var(--page-border);
    color: var(--page-sub);
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 30, 60, .06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease,
        transform .25s ease;
}

.page-microblog-pagi .home-pagination > li:not(.active) > a:hover {
    text-shadow: none;
    color: #fff;
    background: linear-gradient(135deg, #1565c0, #1e88e5 55%, #00b0ff);
    border-color: transparent;
    transform: translateY(-1px);
}

.page-microblog-pagi .home-pagination > li.active > a {
    color: #fff;
    font-weight: 600;
    text-shadow: none;
    background: linear-gradient(135deg, #1565c0, #1e88e5 55%, #00b0ff);
    border-color: transparent;
}

.page-microblog-pagi .home-pagination > li.anchor {
    background: var(--bd-halo);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    box-shadow: none;
}

/* ------------------------------------------------------------
   10. 公共组件修复（与 glass.css 保持一致，切换风格不丢布局）
   ------------------------------------------------------------ */
.page-microblog-wrap {
    max-width: var(--mb-width, 880px) !important;
    min-height: 320px;
    /* 全站宽度统一：原左右各 4px 内边距会让卡片比横幅/导航窄 8px，去掉 */
    padding-left: 0;
    padding-right: 0;
}

.page-microblog-head { max-width: var(--mb-width, 880px); margin-left: auto; margin-right: auto; }
.page-microblog-pagi { max-width: var(--mb-width, 880px); margin: 0 auto; }

.page-like-btn.liked { color: #e53935; }
.page-like-btn.liked svg path { stroke: #e53935; }

.mblog-face,
.ni-comment-face { vertical-align: -6px; border-radius: 4px; }

.ni-sticky-badge {
    background: linear-gradient(135deg, #1565c0, #00b0ff);
    color: #fff;
    border-radius: 999px;
    padding: 1px 10px;
}

/* ------------------------------------------------------------
   11. 响应式：窄屏相框收窄
   ------------------------------------------------------------ */
@media (max-width: 760px) {
    :root { --bd-frame-w: 5px; --bd-frame-radius: 18px; }
    /* 侧边距归零：与 .mb-hero / .page-microblog-head 对齐，手机上不再「上下宽度不一致」（2026-11-12） */
    .page-microblog-wrap { max-width: 100% !important; padding-left: 0; padding-right: 0; }
    .mb-hero { margin: 0 0 26px; }
}

/* ------------------------------------------------------------
   12. 浮动工具条（登录 / 明暗 / 返回顶部）与登录弹窗
       与内容卡片同款白相框语言：85% 白卡面 + 1px 白边 + 柔影
   ------------------------------------------------------------ */
.mb-tool-btn {
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: var(--bd-model-bg);
    color: #5b7695;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bd-card-shadow);
}

.mb-tool-btn:hover {
    color: var(--page-accent);
    box-shadow: var(--bd-card-shadow), 0 0 0 1px var(--page-accent);
}

html[data-dark="1"] .mb-tool-btn {
    color: #9db4cc;
    border-color: rgba(255, 255, 255, .12);
}

/* 登录弹窗：白卡面 + 白相框，去掉玻璃模糊。
   弹窗背后是正文（文字/图片），半透明会让字透上来，这里用不透明卡面；
   选择器带上皮肤属性，压过 style.css 里那条玻璃皮肤的暗色规则。

   相框与站内卡片（.mb-glass:not(.mb-nav) / .mb-hero）同源，但有一处关键不同：
   卡片背后是浅色页面背景，边框用 transparent + padding-box 让光影透出来；
   弹窗背后是深色遮罩（rgba(10,26,48,.42) + blur），透明边框会变成一圈暗环，
   与参考图「环比背景亮」的效果相反。所以这里用半透明白做边框本身，
   叠在遮罩上呈现浅色环；卡面仍裁到 padding-box，圆角内层自动收 7px。 */
body[data-card-style="border"] .mb-login-card {
    /* 338 = 原卡宽 340 减两侧各 1px 原边框，再加回 2×7 边框厚度，内层内容宽度不变 */
    width: calc(338px + 2 * var(--bd-frame-w));
    /* 环色复刻参考图 (#dfe7f2)：不透明，否则会透出弹窗背后彩色卡片的色块而发花 */
    border: var(--bd-frame-w) solid #dfe7f2;
    border-radius: var(--bd-frame-radius);
    background: linear-gradient(var(--page-card), var(--page-card)) padding-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 0 0 1px var(--bd-wrapper-edge), 0 24px 70px rgba(12, 34, 66, .28);
}

html[data-dark="1"] body[data-card-style="border"] .mb-login-card {
    border-color: #2b3c52;
    box-shadow: 0 0 0 1px var(--bd-wrapper-edge), 0 24px 70px rgba(0, 0, 0, .55);
}

.mb-login-field input {
    border-color: var(--page-border);
    background: var(--page-soft);
}

.mb-login-field input:focus {
    border-color: var(--page-accent);
    background: var(--page-card);
}


/* ============================================================
   04  PANDA 导航 / 页脚补充
   原 css/panda.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/*!
 * MicroBlog · PANDA Studio 导航/页脚的「补充」样式
 * 参考 https://blog.panda-studio.cn/ 的 .nav-top / .nav / .menu / footer 真实规则。
 *
 * 2026-11-11：与 style.css 同选择器的 12 组规则（:root 令牌、导航/页脚基础规则）
 * 已整条合并进 style.css，本文件不再重复定义。style.css 是唯一权威：
 * 改导航高度、页脚内边距、颜色等，直接改 style.css 即可生效。
 *
 * 这里只保留 style.css 里没有的 PANDA 细节：两态导航（at-top）、胶囊内限宽、
 * LOGO、菜单 grid / 高亮条 / 二级浮层、功能按钮、页脚内层与响应式。
 * 仍需在 style.css 与皮肤 CSS 之后加载（这些规则依赖 --pn-* 令牌与高权重覆盖）。
 * 令牌前缀 --pn-*，避免与主题原有 --mb-* / --page-* 冲突。
 */

/* 顶部态：对应目标站 .nav-top .nav.at-top
   未滚动时导航通栏透明 —— 去掉圆角 / 底色 / 模糊 / 高光 / 投影，
   两层高光渐变靠 background-position 移出可视区（与目标站同法），
   只留「底部一条极淡描边 + 下方 1px 白色高光」的玻璃边缘感。

   注意：这里同时用 html:not(.mb-scrolled) 兜底 —— 让「顶部态」成为
   CSS 默认（html 上没有 mb-scrolled 时就是通栏），而不是等 JS 加 class。
   否则首屏/强制刷新时解析器可能在 JS 执行前先画一帧胶囊，
   会看到导航从「左右各 7px + 8px 圆角」回缩成通栏的动画。 */
.mb-nav.at-top,
html:not(.mb-scrolled) .mb-nav {
  margin: 0;
  padding: 0 7px;
  border-radius: 0;
  background-color: transparent;
  background-position: 0 -52px, 0 52px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 -1px 0 var(--pn-edge-line),
    0 1px 0 var(--pn-edge-glow);
  transition: ease-out .35s, backdrop-filter .25s, -webkit-backdrop-filter .25s;
}

/* 胶囊内部内容限宽，保证 logo / 菜单与正文卡片左右对齐 */
.mb-nav .nav-content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--mb-container);
  height: 52px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 品牌 / logo */
.mb-nav .mb-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--pn-gray);
  text-shadow: 0 1px var(--pn-white-6);
}
.mb-nav .mb-brand:hover { color: var(--pn-primary); }

/* 无 LOGO 图时的文字品牌（正文字体；行楷子集只用于独立页标题条，见 .mb-page-hero-title） */
.mb-brand-text {
  white-space: nowrap;
  letter-spacing: .04em;
}

/* 备用手写类：模板里写 <span class="mb-xbd">关于博主</span> 即用行楷子集
   （2026-11-12 起默认只由 .page-microblog-title h1 使用，这里留个显式入口）。
   子集 39 字，字集外的字回退系统楷体，别拿它排整段正文 */
.mb-xbd {
  font-family: var(--mb-font-xbd);
  font-weight: 400;
  letter-spacing: .04em;
}
/* 站点 LOGO：亮/暗两套按 html[data-dark] 切换；高度锁在导航条内可容纳的最大视觉尺寸，
   宽度自适应（不写死 img 宽高属性，避免无 CSS 时变形） */
.mb-nav .mb-brand-img {
  display: block;
  /* 2026-11-12 用户要求「导航 LOGO 缩小一点」：40px → 34px（移动端 34 → 30，见媒体查询）。
     高度锁在导航条内可容纳的最大视觉尺寸，宽度自适应（不写死宽高属性，避免无 CSS 时变形） */
  height: 34px;
  width: auto;
  max-height: 34px;
  object-fit: contain;
}
.mb-nav .mb-brand-img.is-dark { display: none; }
html[data-dark="1"] .mb-nav .mb-brand-img.is-light { display: none; }
html[data-dark="1"] .mb-nav .mb-brand-img.is-dark { display: block; }

/* ------------------------------------------------------------------
   2. 菜单：grid 横排 + 当前项底部滑动高亮条（.anchor）
   ------------------------------------------------------------------ */

.mb-nav-menu > ul.menu {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  height: 52px;
  /* 菜单整体靠右：左外边距吃掉品牌与菜单之间的全部剩余宽度。
     用 margin-left:auto 而不是 justify-content:flex-end —— 后者在窄屏溢出时
     会把左侧菜单项挤出容器且滚不回来（scrollLeft 不能为负），
     auto 外边距在空间不足时会自动归零，溢出后仍从第一项开始横向滚动。
     另：li.anchor 的 left 由 JS 按 li.offsetLeft 计算，offsetParent 是 ul.menu 本身，
     整块右移不会影响高亮条定位。 */
  margin: 0 0 0 auto;
  padding: 0 1px;
  list-style: none;
  overflow: visible;
}
.mb-nav-menu > ul.menu > li {
  height: inherit;
  list-style: none;
}
.mb-nav-menu > ul.menu > li > a {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  border-radius: 0;
  background: transparent;
  color: var(--pn-gray);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px var(--pn-white-6);
  transition: color .3s;
}
/* 划过只变文字颜色：不再叠加「左上白边 + 右下蓝影」的浮雕阴影。
   那组 shadow 是瞬间切换的（transition 只过渡 color），看起来像文字微微跳动/位移，
   2026-11-11 按需求取消。当前页（.current）保留原发光效果不变。 */
.mb-nav-menu > ul.menu > li > a:hover {
  color: var(--pn-primary);
}
.mb-nav-menu > ul.menu > li > a.current {
  color: var(--pn-primary);
  text-shadow: -1px -1px var(--pn-white-8), 2px 2px 2px rgba(31, 139, 255, .4);
}
/* 旧主题的 current 下划线由 .anchor 取代 */
.mb-nav-menu > ul.menu > li > a.current::after { display: none; }

/* 菜单图标（自定义导航菜单里的 icon-xxx） */
.mb-nav-menu > ul.menu > li > a > i,
.mb-nav-menu ul.sub-menu > li > a > i {
  margin-right: 7px;
  font-size: 15px;
  line-height: 1;
  opacity: .92;
}
/* 导航图标也支持直接贴 SVG 源码（后台导航第三列写 <svg …>，2026-11-12）：
   与字体图标同尺寸、同间距；SVG 的 width/height 属性只是兜底，这里用 CSS 统一 15px */
.mb-nav-menu > ul.menu > li > a > svg.mb-nav-ico,
.mb-nav-menu ul.sub-menu > li > a > svg.mb-nav-ico {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  flex: 0 0 auto;
  opacity: .92;
}
.mb-nav-menu > ul.menu > li > a > span.menu-text:empty { display: none; }

/* 二级菜单：子项命中时父项也高亮 */
.mb-nav-menu > ul.menu > li.is-current-parent > a {
  color: var(--pn-primary);
  font-weight: 600;
}
.mb-nav-menu > ul.menu > li.is-sub-open > a { color: var(--pn-primary); }

/* 二级菜单：玻璃浮层 */
.mb-nav-menu > ul.menu > li.menu-item-has-children { position: relative; }
.mb-nav-menu > ul.menu > li.menu-item-has-children > a { cursor: pointer; }
.mb-nav-menu ul.sub-menu,
ul.mb-sub-float {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  z-index: 1001;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background-color: var(--pn-sub-bg);
  background-image: linear-gradient(var(--pn-white-8), transparent 62%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 0 0 1px var(--pn-white-8) inset,
    0 0 0 1px var(--pn-hair),
    0 12px 28px var(--pn-shadow-1),
    0 2px 6px var(--pn-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(.96);
  transform-origin: top center;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.mb-nav-menu ul.sub-menu > li { list-style: none; }
.mb-nav-menu ul.sub-menu > li > a,
ul.mb-sub-float > li > a {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--pn-gray);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.mb-nav-menu ul.sub-menu > li > a:hover,
.mb-nav-menu ul.sub-menu > li > a.current,
ul.mb-sub-float > li > a:hover,
ul.mb-sub-float > li > a.current {
  color: var(--pn-primary);
  background: var(--pn-hover-bg);
}
@media (min-width: 901px) {
  .mb-nav-menu > ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
  .mb-nav-menu > ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
  }
}
/* 窄屏：由 JS 把二级菜单提到 body 上做浮层，避免被横向滚动容器裁切 */
ul.mb-sub-float {
  position: fixed;
  left: 0;
  top: 0;
  transform: none;
  max-height: 70vh;
  overflow-y: auto;
}
ul.mb-sub-float.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mb-nav-menu > ul.menu > li.anchor {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  padding: 0 15px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: left cubic-bezier(.1, 1.2, .5, 1) .5s,
              width cubic-bezier(.1, 1.2, .5, 1) .5s,
              opacity .5s;
}
.mb-nav-menu > ul.menu > li.anchor::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  background: linear-gradient(var(--pn-analogous) 20%, var(--pn-primary) 80%);
  box-shadow: 0 3px 4px var(--pn-anchor-shadow);
}

/* 右侧功能按钮（沿用原 #mbDarkToggle，只换外观） */

.mb-nav .mb-icon-btn {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--pn-gray);
  text-shadow: 0 1px var(--pn-white-6);
  font-size: 16px;
  transition: color .25s, background .25s;
}
.mb-nav .mb-icon-btn:hover {
  color: var(--pn-primary);
  background: var(--pn-hover-bg);
}

/* ------------------------------------------------------------------
   3b. 窄屏汉堡按钮 / 右侧功能按钮（桌面不占位）
   参考 PANDA Studio 手机端：左汉堡、中 LOGO、右功能键。
   汉堡三条线用 span 画，开合时变成叉。
   ------------------------------------------------------------------ */
.mb-nav-burger,
.mb-nav-func { display: none; }

/* 汉堡：三条线竖着排（flex 列 + gap），开合时上下两条各向中间平移并转 45°。
   尺寸对齐 PANDA 手机端实测：线条 22×2.5、间距 6（开合位移 = 2.5 + 6 = 8.5）。 */
.mb-nav-burger { flex-direction: column; gap: 6px; }
.mb-nav-burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  margin: 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
html.mb-nav-open .mb-nav-burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
html.mb-nav-open .mb-nav-burger span:nth-child(2) { opacity: 0; }
html.mb-nav-open .mb-nav-burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.mb-nav-func .mb-ico-sun { display: none; }
html[data-dark="1"] .mb-nav-func .mb-ico-moon { display: none; }
html[data-dark="1"] .mb-nav-func .mb-ico-sun { display: inline-block; }
/* 移动端导航的功能按钮：原来 20px SVG，换成 icon font 后对齐 */
.mb-nav-func .font_family { font-size: 20px; }

.mb-footer-inner {
  max-width: var(--mb-container);
  margin: 0 auto;
  padding: 0 24px;
  /* 页脚内容居中：外层 .mb-footer 仍是右对齐基调，这里把内部整体居中 */
  text-align: center;
}
/* 页脚版权行 / 主题行：浮雕字效（参考 PANDA Studio 站页脚）
   color: var(--primary-gray)                   → --pn-gray（#5578a1，同值）
   text-shadow: -1px -1px var(--white-opacity-5), 2px 2px 2px var(--primary-gray-opacity-4)
   → 走 --pn-foot-hi / --pn-foot-sh 两个令牌，深色模式已在 html[data-dark] 里翻转。
   注意第一段只有 x/y 两个长度（无 blur）是合法的，别"补"成三个。 */
.mb-footer-copy,
.mb-footer-theme {
  color: var(--pn-gray);
  text-shadow: -1px -1px var(--pn-foot-hi), 2px 2px 2px var(--pn-foot-sh);
  font-size: 14px;
}

/* 备案行：对应参考站的 .text-embossed 类（实测 computed 是
   color: rgb(85,120,161) + text-shadow: rgba(255,255,255,.7) 0 1px 0），
   比上面那行更轻——只有一条 1px 白色下高光，不投暗影。 */
.mb-footer-links {
  color: var(--pn-gray);
  text-shadow: var(--pn-foot-emboss);
}

/* ------------------------------------------------------------------
   4. 响应式 / 减少动效
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* 窄屏放不下时横向滚动；二级菜单由 JS 提到 body 上，不受这里裁切 */
  .mb-nav-menu { overflow-x: auto; scrollbar-width: none; }
  .mb-nav-menu::-webkit-scrollbar { display: none; }
}

/* 窄屏导航（汉堡 + 居中 LOGO + 抽屉面板）走 760px 断点：
   721–760 这一档横排菜单放不下（实测 ul 右缘 731 > 容器），
   只能横向滑动，最后一项永远看不全，所以和正文容器的 760 断点对齐。 */
@media (max-width: 760px) {
  .mb-nav { margin: 4px 5px 0; }
  /* 胶囊里的内容改为「汉堡左 / LOGO 中 / 功能键右」：
     菜单不再是横排条，而是从胶囊下方展开的竖排面板（见下） */
  .mb-nav .nav-content { position: relative; justify-content: center; padding: 0 14px; }
  .mb-nav-burger,
  .mb-nav-func {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    width: 44px;              /* 触控区对齐 PANDA 实测的 52 满高按钮（这里 44，留 4px 呼吸） */
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--pn-gray);
    text-shadow: 0 1px var(--pn-white-6);
    cursor: pointer;
  }
  .mb-nav-burger { left: 8px; }
  .mb-nav-func { right: 8px; }
  .mb-nav-burger:hover,
  .mb-nav-func:hover { color: var(--pn-primary); background: var(--pn-hover-bg); }

  /* LOGO 绝对居中：两头按钮都不参与布局，长菜单也不会把 LOGO 挤偏 */
  .mb-nav .mb-brand {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    padding: 0;
    font-size: 15px;
  }
  .mb-nav .mb-brand-img { height: 30px; max-height: 30px; }   /* 桌面 34px 的等比缩小版 */

  /* 展开形态对齐 PANDA 手机端：导航胶囊整体长高成一块玻璃板，
     菜单项在第二行横排、可左右滑，不弹白卡、不加遮罩。
     做法：.nav-content 用 display:contents 让汉堡/LOGO/菜单都成为 .mb-nav 的直接子项，
     三个定位元素 absolute 不占位，因此菜单是唯一的流内项 → 靠 margin-top 让到第二行。 */
  .mb-nav {
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    min-height: 52px;
    padding-bottom: 6px;
  }
  .mb-nav .nav-content { display: contents; }

  /* 展开时必须把胶囊的玻璃底补回来：顶部态导航本身是透明的
     （见 html:not(.mb-scrolled) .mb-nav），不补的话第二行菜单会直接浮在页面背景上。
     用 html.mb-nav-open:not(.mb-scrolled) 三重选择器压过那条兜底规则。 */
  html.mb-nav-open .mb-nav,
  html.mb-nav-open:not(.mb-scrolled) .mb-nav,
  html.mb-nav-open .mb-nav.at-top {
    margin: 4px 7px 0;
    padding: 0 0 6px;
    border-radius: 10px;
    background-color: var(--pn-nav-bg);
    background-position: 0 -1px, 0;
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
      0 0 0 1px var(--pn-white-6) inset,
      0 0 0 1px var(--pn-hair),
      0 10px 24px var(--pn-shadow-1);
  }
  .mb-nav-burger, .mb-nav-func { top: 0; margin-top: 4px; }   /* 44 高按钮在第一行居中：(52-44)/2 */
  .mb-nav .mb-brand { top: 0; height: 52px; display: flex; align-items: center; }

  .mb-nav-menu {
    display: none;
    position: relative;        /* 不再浮在胶囊外，改为流内第二行 */
    order: 9;
    flex: 0 0 100%;
    margin-top: 52px;          /* 让到第一行下方（第一行由 min-height 撑住） */
    overflow: visible;
    box-sizing: border-box;
  }
  .mb-nav-menu.is-open { display: block; }
  .mb-nav-menu > ul.menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 46px;
    width: 100%;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: mbNavDrop .18s ease-out;
  }
  .mb-nav-menu > ul.menu::-webkit-scrollbar { display: none; }
  @keyframes mbNavDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  .mb-nav-menu > ul.menu > li {
    flex: 0 0 auto;
    width: auto;
    height: 46px;
    border: 0;
  }
  .mb-nav-menu > ul.menu > li > a {
    height: 46px;
    padding: 0 16px;
    border-radius: 0;
    font-size: 15px;
    white-space: nowrap;
  }
  .mb-nav-menu > ul.menu > li > a.current {
    color: var(--pn-primary);
    background: transparent;
  }
  .mb-nav-menu > ul.menu > li.anchor { display: none; }
}

@media (max-width: 720px) {
  .mb-footer { padding: 26px 0; }
  .mb-footer-inner { padding: 0 14px; }
  main.mb-container { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-nav, .mb-nav.at-top, .mb-nav-menu > ul.menu > li.anchor,
  .mb-nav-menu > ul.menu > li > a, .mb-footer a { transition: none; }
}

/* ------------------------------------------------------------------
   5. 页脚居中后不再需要单边让位
   （原先页脚右对齐，右下角浮动工具条会压住备案文字，才补 padding-right；
     内容居中后文字离右侧按钮很远，这条让位反而会让居中偏左，故移除）
   ------------------------------------------------------------------ */


/* ============================================================
   05  独立页顶部横幅（头图 / 幻灯容器）
   原 css/banner.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/*!
 * MicroBlog · 独立页顶部横幅（头图 / 幻灯片容器）
 * 「独立页设置 → 顶部横幅」的前台样式，玻璃卡片语言，明暗共用。
 */

/* ---------- 无障碍标题（幻灯片 / 关闭时不显示可见标题） ---------- */
.mb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 头图横幅 ---------- */
.mb-page-hero {
  --mb-hero-pad-x: 32px;   /* 正文左右内边距，窄屏覆盖为 20px；全宽模式按它补回内容列偏移 */
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(210px * 1.25);   /* 原 210px，按需求 +25% → 262.5px */
  margin: 0 auto 22px;
  max-width: var(--mb-width, 880px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(140deg, #1f6fe0 0%, #2ea7ff 55%, #48c8ff 100%);
  box-shadow:
    0 18px 40px rgba(31, 80, 160, .18),
    0 2px 8px rgba(31, 80, 160, .1),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  isolation: isolate;
}
/* ---------- 头图接上首页 Hero 的边框 ----------
   页面头图同时也带 .mb-hero（与首页横幅同一套类名），
   这里只把 .mb-hero 里会干扰头图布局的声明钉回原值，
   并把边框语言补齐：描边皮肤下与首页一样是「7px 透明相框 + 1px 白边」，
   玻璃皮肤下是一圈 1px 高光描边。
   padding 归零是为了抵消 .mb-hero 的 44px 48px 内边距，
   否则头图正文会被再往里推一圈。 */
.mb-page-hero.mb-hero {
  padding: 0;
  flex-direction: row;
  border: 1px solid var(--mb-glass-border);
  box-shadow:
    0 18px 40px rgba(31, 80, 160, .18),
    0 2px 8px rgba(31, 80, 160, .1),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

html[data-dark="1"] .mb-page-hero.mb-hero {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .48),
    0 2px 8px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* 描边皮肤：与首页 .mb-hero 完全同款，背景裁到 padding-box，
   让 7px 的透明边框带透出页面背景的光影，形成一圈白相框 */
body[data-card-style="border"] .mb-page-hero.mb-hero {
  border: var(--bd-frame-w, 7px) solid transparent;
  border-radius: var(--bd-frame-radius, 20px);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  /* 与首页 .mb-hero、微语卡片、独立页大卡同款四层相框；
     内圈白线由 border.css 画在 ::after 蒙版层上（横幅全幅蒙版会盖住元素自身的 inset） */
  box-shadow: var(--bd-card-shadow);
}

.mb-page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ------------------------------------------------------------
   独立页头图「模糊渐清」动画（移植自 niRvana-diy 的 pagehero-clear）
   niRvana 在 #coverflow.pagehero-clear .imgColor 上跑 5s，这里按需求收到 3s：
       blur(12px) + scale(1.12)  →  blur(0) + scale(1)
   只作用于图片层，标题 / 副标题 / 渐变蒙版始终清晰。
   这里对应 .mb-page-hero-img（object-fit:cover 的 <img>）；::after 蒙版与
   .mb-page-hero-body 是兄弟层，不进 filter/transform 的渲染链。

   微语页（mblogMemoCid 指向的独立页，模板缺失回落到 page.php）由 page.php
   打上 .mb-no-hero-clear 排除；首页用的是 .mb-hero-img，类名不同天然不受影响。
   fill-mode 用 both 而非 niRvana 的 forwards：.1s 延迟期间就保持起始态，
   避免「先清晰 100ms 再突然糊掉」的闪帧；终态与不加动画时逐像素一致。
   ------------------------------------------------------------ */
.mb-page-hero:not(.mb-no-hero-clear) > .mb-page-hero-img {
  -webkit-animation: mbPageHeroClear 3s ease-out .1s both;
  animation: mbPageHeroClear 3s ease-out .1s both;
}

@-webkit-keyframes mbPageHeroClear {
  0%   { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: scale(1.12); transform: scale(1.12); }
  100% { -webkit-filter: blur(0);    filter: blur(0);    -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes mbPageHeroClear {
  0%   { filter: blur(12px); transform: scale(1.12); }
  100% { filter: blur(0);    transform: scale(1); }
}
.mb-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 18, 36, .05) 0%, rgba(6, 18, 36, .18) 45%, rgba(6, 18, 36, .62) 100%);
}
.mb-page-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 30px 32px 66px;
  color: #fff;
}
/* 横幅文字：与首页头图同款（斜体标题体 + 渐变 mask + 柔影 + 副标题破折号线） */
.mb-page-hero-title {
  margin: 0 0 8px;
  font-size: 45px;
  line-height: 1.3;
  font-weight: 400;   /* 标题体只有 400，写粗会合成加粗发糊 */
  font-style: italic;
  /* 头图横幅沿用旁门左道标题体（2026-11-12 用户确认：行楷只给下方标题条，横幅不动） */
  font-family: var(--mb-font-title, PangMenZhengDao, Play, "PingFang SC", "Microsoft YaHei", sans-serif);
  letter-spacing: .3px;
  color: #fff;
  -webkit-mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  text-shadow: .1053em .1053em rgba(255, 255, 255, .2), .1842em .1842em .2em rgba(0, 0, 0, .2);
}
.mb-page-hero-sub {
  position: relative;
  margin: 0;
  padding-left: 1.6em;
  font-size: 25px;
  line-height: 1.6;
  font-style: italic;
  font-family: var(--mb-font-title, PangMenZhengDao, Play, "PingFang SC", "Microsoft YaHei", sans-serif);
  color: rgba(255, 255, 255, .86);
  -webkit-mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  mask: linear-gradient(rgba(0,0,0,.55) 20%, #000 65%) 0 0/100% 1.3em;
  text-shadow: .1053em .1053em rgba(255, 255, 255, .2), .1842em .1842em .2em rgba(0, 0, 0, .2);
}
/* 副标题前置的双横线（参考站 type-2 破折号） */
.mb-page-hero-sub::before,
.mb-page-hero-sub::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  background: linear-gradient(-90deg, currentColor, hsla(0, 0%, 100%, 0));
}
.mb-page-hero-sub::before { top: 41%; width: 1.5em; }
.mb-page-hero-sub::after  { top: 59%; left: .45em; width: 1em; }

/* ---------- 幻灯片容器：全宽铺满视口（2026-11-11 由内容宽度大卡改全宽） ----------
   100vw 含经典滚动条宽度，--mb-sbw 由 header.php 内联脚本实测（悬浮滚动条为 0）；
   margin-left 的 50% 是容器内容宽的一半，减去半幅视口宽即精确贴到视口左右边缘 */
.mb-page-slider {
  width: calc(100vw - var(--mb-sbw, 0px));
  max-width: none;
  margin: 0 0 22px calc(50% - 50vw + var(--mb-sbw, 0px) / 2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.mb-page-slider .slider-wrapper { border-radius: 0; overflow: hidden; }
.mb-page-slider .coverflow-swiper {
  --card-width: min(100%, 1100px);
  border-bottom: 0;
  padding: 18px 0 34px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.mb-page-slider .coverflow-swiper .slider { --card-height: calc(320px * 1.25); }   /* 原 320px，+25% */

/* ---------- 头图全宽模式（后台「独立页横幅图片 → 头图宽度 = 全宽」） ----------
   与幻灯同款做法：100vw 收回滚动条占位，margin-left 抵消内容列居中偏移；
   全宽后去掉圆角与相框，否则视口左右边缘会露出半截圆角；
   文字层补回内容列的左偏移，标题仍与正文左缘对齐。
   第二条选择器专门压住描边皮肤的 .mb-page-hero.mb-hero 相框（0,3,1）。 */
body[data-hero-full="1"] .mb-page-hero,
body[data-card-style="border"][data-hero-full="1"] .mb-page-hero.mb-hero {
  width: calc(100vw - var(--mb-sbw, 0px));
  max-width: none;
  min-height: 350px;   /* 全宽模式高度（容器内仍按 262.5px / 窄屏 212.5px） */
  margin: 0 0 22px calc(50% - 50vw + var(--mb-sbw, 0px) / 2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-hero-full="1"] .mb-page-hero-body {
  padding-left: max(var(--mb-hero-pad-x, 32px), calc((100vw - var(--mb-sbw, 0px) - var(--mb-width, 880px)) / 2 + var(--mb-hero-pad-x, 32px)));
  padding-right: max(var(--mb-hero-pad-x, 32px), calc((100vw - var(--mb-sbw, 0px) - var(--mb-width, 880px)) / 2 + var(--mb-hero-pad-x, 32px)));
}
/* 全宽后内圈白线贴着视口边缘会变成一根突兀的细线，去掉；渐变蒙版保留 */
body[data-card-style="border"][data-hero-full="1"] .mb-page-hero::after {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .mb-page-hero { min-height: calc(170px * 1.25); border-radius: 20px; --mb-hero-pad-x: 20px; }   /* 原 170px，+25% */
  .mb-page-hero-body { padding: 22px 20px 20px; }
  .mb-page-hero-title { font-size: 22px; }
  .mb-page-slider .coverflow-swiper { --card-width: 100%; }
  .mb-page-slider .coverflow-swiper .slider { --card-height: calc(210px * 1.25); }   /* 原 210px，+25% */
}

@media (prefers-reduced-motion: reduce) {
  .mb-page-hero, .mb-page-slider { transition: none; }
  /* 系统开启「减少动态效果」时直接停在清晰终态，不做模糊渐清 */
  .mb-page-hero:not(.mb-no-hero-clear) > .mb-page-hero-img {
    -webkit-animation: none;
    animation: none;
  }
}


/* ============================================================
   06  底部分页（.mb-pager）
   原 css/pager.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/*!
 * MicroBlog · 底部分页：1:1 复刻 PANDA Studio 的 .main-pagination-wrapper
 *
 * 参考 https://blog.panda-studio.cn/articles 的真实规则（源码级）：
 *   .main-pagination-wrapper ul{display:grid;grid-auto-flow:column;justify-content:start;align-items:center;position:relative}
 *   .main-pagination-wrapper li{height:52px;min-width:52px;display:flex;color:var(--primary-gray);
 *     text-shadow:0 1px var(--white-opacity-7);z-index:1;position:relative;cursor:pointer}
 *   .main-pagination-wrapper li a{min-width:inherit;display:flex;justify-content:center;align-items:center;
 *     column-gap:.5em;padding:0 .5em;color:inherit}
 *   .main-pagination-wrapper li.anchor{position:absolute;background:
 *     linear-gradient(primary-5,transparent) no-repeat 0 0 / 1px 100%,
 *     linear-gradient(white,transparent) no-repeat 1px 0 / 1px 100%,
 *     linear-gradient(primary-5,transparent) no-repeat 100% 0 / 1px 100%,
 *     linear-gradient(white,transparent) no-repeat calc(100% - 1px) 0 / 1px 100%,
 *     linear-gradient(transparent,primary-15 16px,primary-2 0%,transparent)}
 *   .main-pagination-wrapper li.active{color:var(--primary-color)}
 *   .main-pagination-wrapper li:hover{color:var(--primary-color)}
 *
 * 所以本站也照这个来：**没有外框、没有卡片底、格子之间没有分隔线**，
 * 只有当前页那一格带一对 1px 竖向渐变边线 + 一层很淡的竖向渐变；
 * 其余格子是"裸字"。颜色换成主题的 --page-* / --mb-accent 令牌，
 * 这样亮暗、glass、border 三种状态都不用另写规则。
 *
 * 覆盖：
 *   .page-microblog-pagi .home-pagination  —— 首页微语流（index.php 手写 + li.anchor 滑动块）
 *   .mb-pager .page-navigator              —— 归档/分类/搜索（Typecho pageNav，静态 li.current）
 * 必须排在 style.css、page_microblog.css、皮肤 CSS、panda.css 之后加载。
 */

:root {
  --pgr-height: 52px;
  --pgr-cell: 52px;
  --pgr-text: var(--page-sub, #5578a1);          /* = 参考站 --primary-gray #5578a1 */
  --pgr-light: var(--page-light, #8aa2bd);
  --pgr-accent: var(--page-accent, #1e88e5);
  --pgr-edge: rgba(31, 139, 255, 0.5);        /* 参考站 --primary-opacity-5 = rgba(31,139,255,.5) 原值 */
  --pgr-edge-sheen: rgba(255, 255, 255, 1);      /* 参考站 --white-default 纯白 */
  --pgr-wash-top: rgba(31, 139, 255, 0.15);      /* 参考站 --primary-opacity-15（第 3 个色标） */
  --pgr-wash-bottom: rgba(31, 139, 255, 0.20);   /* 参考站 --primary-opacity-2（第 4 个色标，0% 被钳到 16px 后一直淡出到底） */
  --pgr-halo: rgba(31, 139, 255, 0.50);
  --pgr-text-sheen: rgba(255, 255, 255, 0.7);
  --pgr-arrow-size: 16px;
  --pgr-emboss: rgba(255, 255, 255, 0.72);   /* 参考站 white-opacity-7，只给文字投影用 */
}

html[data-dark="1"] {
  --pgr-edge: rgba(120, 190, 255, 0.5);
  --pgr-edge-sheen: rgba(255, 255, 255, 0.22);
  --pgr-wash-top: rgba(100, 181, 246, 0.20);
  --pgr-wash-bottom: rgba(100, 181, 246, 0.26);
  --pgr-halo: rgba(100, 181, 246, 0.50);
  --pgr-text-sheen: rgba(255, 255, 255, 0.10);
  --pgr-emboss: rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------
   1. 容器：只是一条居中的裸排，不画框、不铺底
   --------------------------------------------------------------- */
.page-microblog-pagi {
  display: flex;
  justify-content: center;
  /* 参考站的分页是 footer 的子元素、并被 -mt 拉到 footer 顶边，
     视觉上"坐在页脚带里、版权之上"。这里不改 DOM，用负底边距把页脚带提上来
     （.mb-footer 的 margin-top 46px + 分页自身高度），使页脚带的上沿正好落在
     分页的上沿；再用下面的 footer padding-top 给版权让出位置。
     高度用 var(--pgr-height) 参与计算，窄屏分页变矮时也自动对齐。 */
  position: relative;
  z-index: 3;
  margin: 20px 0 calc(-46px - var(--pgr-height));
  text-align: center;
}

/* 有分页的页面：页脚顶部内边距加高，给"坐进页脚带"的分页腾出 分页高 + 12px 间隙
   注意排除评论区分页：它在卡片内部，不参与这套页脚贴合，否则会多顶出一块空白。 */
body:has(.page-microblog-pagi) .mb-footer,
body:has(.mb-pager:not(.mb-comment-pager)) .mb-footer {
  padding-top: calc(var(--pgr-height) + 12px);
}

.page-microblog-pagi .home-pagination,
.mb-pager .page-navigator {
  /* 参考站：display:grid;grid-auto-flow:column;justify-content:start;align-items:center;padding:0 1px */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: 100%;
  height: var(--pgr-height);
  margin: 0;
  padding: 0 1px;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  box-sizing: border-box;
}

.mb-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 3;
  margin: 18px 0 calc(-46px - var(--pgr-height));
  padding: 0;
  flex-wrap: nowrap;
}

/* 评论区里的分页（comments.php 的 .mb-comment-pager）：
   它在 section#comments 卡片内部，分页之下还有评论表单，
   不能吃上面那条「把页脚带提上来」的负底边距，否则会直接压到输入框上。 */
.mb-pager.mb-comment-pager {
  margin: 22px 0 14px;
}

/* 评论分页的「上一页 / 下一页」：2026-11-12 起与归档页共用 icon font 的
   icon-double-left / icon-double-right（模板里直接输出 <i>，文字进了 .mb-sr-only）。
   以前这里靠「字号归零 + ::after 画 ‹ ›」把 Typecho 的文字链接改成裸箭头，
   现在图标是真的字形，伪元素那两段必须删掉，否则每个按钮会多出一个小箭头。 */
.mb-pager.mb-comment-pager .page-navigator > li.prev > a,
.mb-pager.mb-comment-pager .page-navigator > li.next > a {
  width: var(--pgr-cell);
  min-width: var(--pgr-cell);
  padding: 0;
  color: var(--pgr-light);
  line-height: 1;
}

/* 分页里的图标：字号跟箭头令牌走，别继承数字那档 16px；
   双箭头字形本身比 ‹ › 宽，字号收一档才不至于顶满 52px 的格子。 */
.mb-pager .page-navigator > li.prev > a .font_family,
.mb-pager .page-navigator > li.next > a .font_family,
.mb-pager .page-navigator > li.prev > span .font_family,
.mb-pager .page-navigator > li.next > span .font_family,
.page-microblog-pagi .home-pagination > li.prev > a .font_family,
.page-microblog-pagi .home-pagination > li.next > a .font_family {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  /* 墨迹在前进盒里偏左 0.7px（数字只偏 0.5），补回来才和数字同轴；
     竖向 dy 与数字一致（-0.5），不用动。实测见 2026-11-12 日志。 */
  transform: translateX(.7px);
}

/* ---------------------------------------------------------------
   2. 格子：参考站的 li 规则原样搬过来
      list-style:none; height:var(--height); min-width:52px; cursor:pointer;
      z-index:1; position:relative; display:flex; color:var(--primary-gray);
      text-shadow:0 1px var(--white-opacity-7); transition:.25s
   --------------------------------------------------------------- */
.page-microblog-pagi .home-pagination > li,
.mb-pager .page-navigator > li {
  position: relative;
  display: flex;
  min-width: var(--pgr-cell);
  height: var(--pgr-height);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pgr-text);
  cursor: pointer;
  z-index: 1;
  text-shadow: 0 1px var(--pgr-text-sheen);   /* 参考站 li 的 0 1px 高光 */
  transition: 0.25s;                          /* 参考站 transition:.25s */
}

.page-microblog-pagi .home-pagination > li > a,
.page-microblog-pagi .home-pagination > li > span,
.mb-pager .page-navigator > li > a,
.mb-pager .page-navigator > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  min-width: inherit;
  height: 100%;
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color 0.22s ease;
}

/* 上一页 / 下一页：仍然是裸箭头，比数字弱一档（保持上一版的样子，不在"数字"改动范围里）
   宽度交给 li 的 min-width，a 用参考站的 min-width:inherit */
.page-microblog-pagi .home-pagination > li.prev > a,
.page-microblog-pagi .home-pagination > li.next > a,
.mb-pager .page-navigator > li.prev > a,
.mb-pager .page-navigator > li.next > a {
  color: var(--pgr-light);
}

/* 省略号：参考站的两个点也是裸的、不可点 */
.page-microblog-pagi .home-pagination > li.dots > a,
.page-microblog-pagi .home-pagination > li > a:not([href]),
.mb-pager .page-navigator > li > span {
  color: var(--pgr-light);
  letter-spacing: 0.06em;
  cursor: default;
}

/* ---------------------------------------------------------------
   3. 当前页高亮块：照抄参考站那 5 层 background
       （左右各「1px 主色线 + 1px 高光线」凑成一道细槽，
        外加一层从 16px 处开始往下淡出的主色渐变）
   --------------------------------------------------------------- */
.page-microblog-pagi .home-pagination > li.anchor,
.mb-pager .page-navigator > li.anchor {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
  background: linear-gradient(var(--pgr-edge), transparent) no-repeat 0 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat 1px 0 / 1px 100%,
              linear-gradient(var(--pgr-edge), transparent) no-repeat 100% 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat calc(100% - 1px) 0 / 1px 100%,
              linear-gradient(transparent, var(--pgr-wash-top) 16px, var(--pgr-wash-bottom) 0%, transparent);
  pointer-events: none;
  transition: left 0.26s cubic-bezier(0.2, 0.75, 0.25, 1),
              width 0.26s cubic-bezier(0.2, 0.75, 0.25, 1),
              opacity 0.18s linear;
}

/* 没有滑动块时（脚本未加载）用同一个背景静态兜底 */
.page-microblog-pagi .home-pagination:not(:has(li.anchor)) > li.active {
  background: linear-gradient(var(--pgr-edge), transparent) no-repeat 0 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat 1px 0 / 1px 100%,
              linear-gradient(var(--pgr-edge), transparent) no-repeat 100% 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat calc(100% - 1px) 0 / 1px 100%,
              linear-gradient(transparent, var(--pgr-wash-top) 16px, var(--pgr-wash-bottom) 0%, transparent);
}

/* 静态 li.current：归档页/脚本未跑时兜底；一旦插入了滑动块就不再留静态底
   （否则悬停时会同时出现两块） */
.mb-pager .page-navigator:not(:has(li.anchor)) > li.current {
  background: linear-gradient(var(--pgr-edge), transparent) no-repeat 0 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat 1px 0 / 1px 100%,
              linear-gradient(var(--pgr-edge), transparent) no-repeat 100% 0 / 1px 100%,
              linear-gradient(var(--pgr-edge-sheen), transparent) no-repeat calc(100% - 1px) 0 / 1px 100%,
              linear-gradient(transparent, var(--pgr-wash-top) 16px, var(--pgr-wash-bottom) 0%, transparent);
}

/* 当前页只变文字色 + 参考站那两层文字阴影，不填实心块；也不加粗
   （旧皮肤 .page-microblog-pagi … li.active > a 里有 font-weight:600，这里同选择器、后加载把它压回 400） */
.page-microblog-pagi .home-pagination > li.active > a,
.mb-pager .page-navigator > li.current > a,
.mb-pager .page-navigator > li.current > span {
  color: var(--pgr-accent);
  background: transparent;
  font-size: 16px;
  font-weight: 400;
  text-shadow: -1px -1px var(--pgr-emboss),
               2px 2px 2px var(--pgr-halo);
}

/* ---------------------------------------------------------------
   4. 悬停：只换文字色（参考站 li:hover），不做填充、抬升、位移
   --------------------------------------------------------------- */
.page-microblog-pagi .home-pagination > li:not(.active):not(.anchor) > a:hover,
.mb-pager .page-navigator > li:not(.current) > a:hover {
  color: var(--pgr-accent);
  background: transparent;
  text-shadow: -1px -1px var(--pgr-emboss),
               2px 2px 2px var(--pgr-halo);
  transform: none;
}

.page-microblog-pagi .home-pagination > li.active > a:hover {
  color: var(--pgr-accent);
  background: transparent;
  transform: none;
}

/* ---------------------------------------------------------------
   5. 窄屏：格子收窄，仍然是一条裸排
   --------------------------------------------------------------- */
@media (max-width: 560px) {
  :root {
    --pgr-height: 44px;
    --pgr-cell: 40px;
  --pgr-arrow-size: 14px;
  }
  .page-microblog-pagi .home-pagination > li > a,
  .mb-pager .page-navigator > li > a,
  .mb-pager .page-navigator > li > span {
    font-size: 14px;
    padding: 0 6px;
  }
  .page-microblog-pagi {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-microblog-pagi .home-pagination > li > a,
  .mb-pager .page-navigator > li > a,
  .page-microblog-pagi .home-pagination > li.anchor,
.mb-pager .page-navigator > li.anchor {
    transition: none;
  }
}


/* ============================================================
   07  长页面（关于 / 友链 / 归档包装 / 留言榜）
   原 css/pages.css，2026-11-11 并入（内容原样，顺序不变）
   ============================================================ */

/* ============================================================
   独立页：关于 / 友情链接
   移植自 niRvana-diy 的 page_about.php、page_links.php，
   结构与尺寸保持一致，配色改由 MicroBlog 设计令牌驱动 ——
   一套规则同时覆盖明暗两套主题，因此不再需要 html[data-dark] 覆盖。
   ============================================================ */

/* ---------- 两页共用的卡片基底 ---------- */
.ni-ab-card,
.ni-panel,
.ni-link-card,
.ni-sort-nav {
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
}

/* 内层小方块（统计格 / 联系格 / 头像底座） */
.ni-ab-stat-box,
.ni-ab-contact-item,
.ni-ab-float-tag,
.ni-ab-avatar,
.ni-ab-ten-date,
.ni-rule-no,
.ni-site-row,
.ni-link-logo,
.ni-copy-btn,
.ni-sort-count,
.ni-sort-nav a {
  background: var(--mb-glass-bg-soft);
  border-color: var(--mb-glass-border);
}

/* ============================================================
   关于页
   ============================================================ */

/* ------------------------------------------------------------
   独立页标题下的短蓝条（关于 / 友链 / 归档云）
   三处原本各写一份、参数已漂移（分隔线偏深、阴影 0.35/0.4 不一、
   reduced-motion 漏归档），2026-11-11 合并为唯一一套：
   实色主色渐变短条压在极浅分隔线上，悬停 40px → 67px。
   只有起笔位置按标题前置图标宽度各自微调（写在末尾三条里）：
     关于页 图标 20px + 10px gap → 30px
     友链页 4px 色标 + 10px gap → 14px
     归档页 图标 20px +  9px gap → 29px
   ------------------------------------------------------------ */
.ni-ab-section-head,
.ni-sort-head,
.ni-gd-cloud-head { border-bottom: 1px solid var(--page-line-soft); }

.ni-ab-section-head:after,
.ni-sort-head:after,
.ni-gd-cloud-head:after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--mb-accent-2) 30%, var(--mb-accent) 70%);
  box-shadow: 0 3px 3px rgba(30, 136, 229, .4);
  z-index: 1;
  transition: width .25s;
}

.ni-ab-section-head:hover:after,
.ni-sort-head:hover:after,
.ni-gd-cloud-head:hover:after { width: 67px; }

.ni-ab-section-head:after { left: 30px; }
.ni-sort-head:after { left: 14px; }
.ni-gd-cloud-head:after { left: 29px; }

/* ------------------------------------------------------------
   关于页
   ============================================================ */
.ni-ab-wrap {
  max-width: var(--mb-width, 880px);
  margin: 0 auto;
  padding: 22px 0 10px;
}

.ni-ab-card {
  position: relative;
  margin-bottom: 18px;
  overflow: hidden;
}

.ni-ab-profile {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 30px 34px;
}

.ni-ab-avatar-zone {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-ab-avatar {
  width: 110px;
  height: 110px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid var(--mb-glass-border);
  box-shadow: var(--mb-shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}

.ni-ab-avatar-zone:hover .ni-ab-avatar {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--mb-shadow-hover);
}

.ni-ab-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mb-glass-bg-soft);
}

.ni-ab-avatar-inner img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.ni-ab-avatar-char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--mb-text-2);
  font-size: 31px;
  font-weight: 600;
}

/* 头像四周的技能标签 */
.ni-ab-float-tag {
  position: absolute;
  z-index: 2;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--mb-glass-border);
  color: var(--mb-text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(30, 84, 160, .06);
  transition: transform .22s, color .22s, border-color .22s;
}

.ni-ab-float-tag svg { width: 12px; height: 12px; }
.ni-ab-float-tag:hover { color: var(--mb-accent); border-color: var(--mb-accent); }
.ni-ab-float-tag-1 { left: 0; top: 18px; transform: rotate(-4deg); }
.ni-ab-float-tag-2 { left: 4px; bottom: 22px; transform: rotate(4deg); }
.ni-ab-float-tag-3 { right: 0; top: 20px; transform: rotate(4deg); }
.ni-ab-float-tag-4 { right: 4px; bottom: 20px; transform: rotate(-4deg); }

.ni-ab-profile-content h2 {
  margin: 0;
  color: var(--mb-text-1);
  font-size: 31px;
  line-height: 1.3;
  border-bottom: 0;
  /* 只在关于页这一处用小标体；优先自定义字体，缺字时回退到庞门正道/系统黑体 */
  font-family: 'xbtx2020', PangMenZhengDao, 'Play', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
}

.ni-ab-profile-content p {
  margin: 14px 0 0;
  color: var(--mb-text-2);
  font-size: 14px;
  line-height: 2;
}

.ni-ab-section { padding: 22px 24px; }

.ni-ab-section-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  /* 分隔线与短蓝条见上方「独立页标题下的短蓝条」统一区块 */
}

.ni-ab-section-head svg { width: 20px; height: 20px; color: var(--mb-accent); transition: color .25s; }

.ni-ab-section-head h2 {
  margin: 0;
  border-bottom: 0;
  color: var(--mb-text-1);
  font-size: 18px;
  font-weight: 400;
  transition: color .25s;
}

.ni-ab-section-head:hover svg,
.ni-ab-section-head:hover h2 { color: var(--mb-accent); }

.ni-ab-section-head span { margin-left: auto; color: var(--mb-text-3); font-size: 13px; }

.ni-ab-text { margin: 16px 0 0; color: var(--mb-text-2); font-size: 14px; line-height: 2; }
.ni-ab-text a { color: var(--mb-accent); text-decoration: none; }
.ni-ab-text a:hover { text-decoration: underline; }
.ni-ab-sign { margin-top: 16px; text-align: right; color: var(--mb-text-3); font-style: italic; font-size: 13px; }

/* ---------- 十年之约 ---------- */
.ni-ab-ten { padding: 26px 30px 12px; }

.ni-ab-ten-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 128px;
  gap: 24px;
  align-items: center;
}

.ni-ab-ten-date { text-align: center; }
.ni-ab-ten-date span { display: block; color: var(--mb-text-3); font-size: 13px; }

/* 日期块不再铺底色（2026-11-11 用户要求去掉背景），直接融入卡片；
   桌面端无边框，窄屏 ≤680 仍保留细边框盒 */
.ni-ab-ten-date { background: transparent; }

.ni-ab-ten-date strong {
  display: block;
  margin-top: 4px;
  color: var(--mb-text-1);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ni-ab-progress-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--mb-text-1);
  font-size: 16px;
  font-weight: 600;
}

.ni-ab-progress-badge {
  height: 25px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(30, 136, 229, .1);
  color: var(--mb-accent);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.ni-ab-progress {
  height: 14px;
  border-radius: 999px;
  background: var(--mb-inset-bg);
  border: 1px solid var(--mb-inset-line);
  overflow: hidden;
}

.ni-ab-progress i {
  display: block;
  width: var(--ni-pct, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mb-accent), var(--mb-accent-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: width .6s ease;
}

.ni-ab-ten-stat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mb-cm-name-line);
}

.ni-ab-ten-stat-item { text-align: center; }
.ni-ab-ten-stat-item span { display: block; color: var(--mb-text-3); font-size: 13px; }

.ni-ab-ten-stat-item strong {
  display: block;
  margin-top: 5px;
  color: var(--mb-text-1);
  font-size: 22px;
  font-weight: 700;
}

/* 里程碑刻度线 */
.ni-ab-milestone {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ni-ms, 5), minmax(0, 1fr));
  max-width: 660px;
  margin: 28px auto 0;
}

.ni-ab-milestone::before {
  content: "";
  position: absolute;
  left: calc(100% / var(--ni-ms, 5) / 2);
  right: calc(100% / var(--ni-ms, 5) / 2);
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--mb-accent) var(--ni-pct, 0%),
    var(--mb-inset-line) var(--ni-pct, 0%));
}

.ni-ab-milestone-item {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--mb-text-3);
  font-size: 13px;
  line-height: 1.5;
}

.ni-ab-milestone-dot {
  width: 14px;
  height: 14px;
  margin: 1px auto 8px;
  border-radius: 50%;
  background: var(--mb-inset-bg);
  border: 1px solid var(--mb-inset-line);
}

/* 未达成刻度点改不透明卡片底色：进度的连线从半透明圆点里透出来，
   视觉上像直线穿过圆圈（2026-11-11）。浅色内层卡是纯白，暗色是 page-soft 深底。
   注意用 :not(.is-done) 限定，避免压掉蓝点填充 */
body[data-card-style="border"] .ni-ab-milestone-item:not(.is-done) .ni-ab-milestone-dot { background: #fff; }
html[data-dark="1"] body[data-card-style="border"] .ni-ab-milestone-item:not(.is-done) .ni-ab-milestone-dot { background: var(--page-soft); }

.ni-ab-milestone-item.is-done .ni-ab-milestone-dot {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  box-shadow: 0 0 0 4px rgba(30, 136, 229, .12);
}

.ni-ab-milestone-item.is-ellipsis { color: var(--mb-text-3); font-size: 17px; letter-spacing: .1em; line-height: 1.3; }

.ni-ab-milestone-item.is-ellipsis .ni-ab-milestone-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  margin-bottom: 11px;
  box-shadow: none;
}

.ni-ab-ten-quote {
  margin: 22px 0 0;
  padding: 0 10px 22px;
  text-align: center;
  color: var(--mb-text-3);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .06em;
}

/* ---------- 建站历程时间线 ---------- */
.ni-ab-timeline { margin-top: 18px; }

.ni-ab-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 20px 18px;
}

/* 连线：原来用 --mb-glass-border（65% 白）画在纯白卡片上 = 完全看不见，
   用户反馈「圆点之间应该有线连起来」。改用主色的淡版，2px 居中压住圆点中心（x=0.5px）。

   bottom 用 -8px 而不是 0：每项自己的线从 top:8 开始画，如果停在项底（bottom:0），
   就会和「下一项顶部那 8px」之间空出一截，看起来断断续续。取 -8px 正好接上下一项的起点
   （项底 + 8 = 下一项顶 + 8），整条线连续。 */
.ni-ab-timeline-item::before {
  content: "";
  position: absolute;
  left: -.5px;
  top: 8px;
  bottom: -8px;
  width: 2px;
  border-radius: 1px;
  background: rgba(30, 136, 229, .28);
}

html[data-dark="1"] .ni-ab-timeline-item::before {
  background: rgba(130, 180, 245, .35);
}

.ni-ab-timeline-item:last-child { padding-bottom: 2px; }
.ni-ab-timeline-item:last-child::before { bottom: auto; height: 12px; }

.ni-ab-timeline-dot {
  position: absolute;
  left: -4px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mb-accent);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .12);
}

.ni-ab-timeline-time { color: var(--mb-accent); font-size: 13px; font-weight: 600; line-height: 1.8; white-space: nowrap; }
.ni-ab-timeline-content { color: var(--mb-text-2); font-size: 14px; line-height: 1.8; }
.ni-ab-timeline-content a { color: var(--mb-accent); text-decoration: none; }

/* ---------- 站点数据 / 关于读者 双列 ---------- */
.ni-ab-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 18px;
  margin-bottom: 18px;
}

.ni-ab-grid .ni-ab-card { margin-bottom: 0; }

.ni-ab-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ni-ab-stat-box {
  min-height: 64px;
  padding: 11px 13px;
  gap: 10px;
  border: 1px solid var(--mb-glass-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  transition: border-color .2s;
}

.ni-ab-stat-box:hover { border-color: var(--mb-accent); }

.ni-ab-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 136, 229, .1);
  color: var(--mb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ni-ab-stat-icon svg { width: 16px; height: 16px; }
.ni-ab-stat-text { min-width: 0; line-height: 1.2; }
.ni-ab-stat-text span { display: block; margin-bottom: 4px; color: var(--mb-text-3); font-size: 12px; white-space: nowrap; }
.ni-ab-stat-text strong { display: inline-block; color: var(--mb-text-1); font-size: 20px; line-height: 1.1; white-space: nowrap; }
.ni-ab-stat-text em { display: inline-block; margin-left: 3px; color: var(--mb-text-3); font-size: 12px; font-style: normal; white-space: nowrap; }

/* ---------- 联系与足迹 ---------- */
.ni-ab-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ni-ab-contact-item {
  position: relative;
  min-height: 68px;
  padding: 12px 13px;
  gap: 10px;
  border: 1px solid var(--mb-glass-border);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: transform .2s, border-color .2s;
}

.ni-ab-contact-item:hover { border-color: var(--mb-accent); }

.ni-ab-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30, 136, 229, .1);
  color: var(--mb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ni-ab-contact-icon svg { width: 17px; height: 17px; }
.ni-ab-contact-icon i { font-size: 16px; line-height: 1; }
.ni-ab-contact-text { min-width: 0; }

.ni-ab-contact-text strong,
.ni-ab-contact-text span {
  display: block;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ni-ab-contact-text strong { color: var(--mb-text-1); font-size: 14px; }
.ni-ab-contact-text span { margin-top: 3px; color: var(--mb-text-3); font-size: 12px; }

/* 联系卡片有二维码气泡时，卡片不能裁剪 */
.ni-ab-card:has(.ni-ab-contact-grid) { overflow: visible; }

.ni-ab-qr {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 8px);
  width: 172px;
  padding: 10px 10px 7px;
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  box-shadow: var(--mb-shadow-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
  text-align: center;
}

.ni-ab-qr img {
  display: block;
  width: 148px;
  height: 148px;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
}

.ni-ab-qr b { display: block; margin-top: 6px; color: var(--mb-text-1); font-size: 12px; font-weight: 600; line-height: 1.4; }

.ni-ab-qr i {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--mb-glass-bg-strong);
  border-right: 1px solid var(--mb-glass-border);
  border-bottom: 1px solid var(--mb-glass-border);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .ni-ab-contact-item.has-qr:hover { z-index: 80; }
  .ni-ab-contact-item.has-qr:hover .ni-ab-qr { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}

.ni-ab-contact-item.has-qr:focus-visible { z-index: 80; }
.ni-ab-contact-item.has-qr:focus-visible .ni-ab-qr { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 触屏隐藏内联气泡，改由 JS 生成全屏弹层 */
@media (hover: none), (pointer: coarse) {
  .ni-ab-qr { display: none; }
}

.ni-ab-qr-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 38, .55);
  opacity: 0;
  transition: opacity .2s ease;
}

.ni-ab-qr-mask.is-show { opacity: 1; }

.ni-ab-qr-modal {
  position: relative;
  width: 250px;
  max-width: 100%;
  padding: 16px 16px 12px;
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  background: var(--mb-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  text-align: center;
  transform: scale(.94);
  transition: transform .2s ease;
}

.ni-ab-qr-mask.is-show .ni-ab-qr-modal { transform: scale(1); }

.ni-ab-qr-modal img {
  display: block;
  width: 210px;
  height: 210px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.ni-ab-qr-modal b { display: block; margin-top: 10px; color: var(--mb-text-1); font-size: 13px; font-weight: 600; line-height: 1.5; }

.ni-ab-qr-close {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mb-accent);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 136, 229, .4);
}

.ni-ab-qr-copy {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: rgba(30, 136, 229, .12);
  color: var(--mb-accent);
  font-size: 13px;
  cursor: pointer;
}

@font-face {
  font-family: 'xbtx2020';
  src: url('https://fonts.polarbearsky.com/rb/pbs-xbtx-2020.woff2') format('woff2'),
       url('https://fonts.polarbearsky.com/rb/pbs-xbtx-2020.woff') format('woff'),
       url('https://fonts.polarbearsky.com/rb/pbs-xbtx-2020.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   友情链接页
   ============================================================ */
.ni-links-wrap { max-width: var(--mb-width, 880px); margin: 0 auto; padding: 22px 0 20px; }

.ni-links-intro { margin: 0 0 22px; color: var(--mb-text-3); font-size: 14px; line-height: 1.9; }

.ni-links-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.ni-panel { padding: 18px 20px; }

.ni-panel h3 {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  padding-bottom: 10px;
  /* 分隔线跟着截图走：浅蓝灰细线（原来的 --mb-cm-name-line 偏深，压在胶囊下面太抢眼） */
  border-bottom: 1px solid var(--page-line-soft);
  color: var(--page-heading);
  font-size: 17px;
  font-weight: 400;
}

.ni-panel h3 .ni-kicker {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 8px;
  /* 胶囊沿用页面皮肤的强调蓝（#20a0ff / 深色 #4db3ff），
     与截图里那枚亮蓝标签一致；--mb-accent 的 #1e88e5 偏深（2026-11-12） */
  background: var(--page-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.ni-rule-list { list-style: none; margin: 0; padding: 0; }
/* 申请规则保持「清单」形态（2026-11-12 按用户要求回退），分隔线用与
   面板标题下方同一条实线（--page-line-soft），不再是虚线 */
.ni-rule-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--page-line-soft); }
.ni-rule-list li:last-child { border-bottom: 0; }

.ni-rule-no {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(30, 136, 229, .12);
  border: 0;
  color: var(--mb-accent);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ni-rule-text strong { display: block; color: var(--mb-text); font-size: 14px; line-height: 1.5; font-weight: 700; }
/* 规则说明文字与全站正文同色（--page-text，描边皮肤下即 #475669，深色自动反白） */
.ni-rule-text span { display: block; margin-top: 2px; color: var(--page-text); font-size: 13px; line-height: 1.6; }

.ni-site-info { list-style: none; margin: 0; padding: 0; }

.ni-site-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  /* 描边与圆角按「本站信息」小卡片规格：--mb-glass-border 是 65% 白，
     铺在白卡面上几乎看不见；这里改用页面皮肤的浅蓝灰细线，一眼可分辨（2026-11-12） */
  border: 1px solid var(--page-line-soft);
  border-radius: 9px;
  margin-bottom: 10px;
}

.ni-site-row dt { flex: 0 0 62px; color: var(--page-sub); font-size: 13px; }
.ni-site-row dd { flex: 1; min-width: 0; margin: 0; color: var(--page-text); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ni-site-row dd .ni-copy-text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-site-row a { color: var(--page-text); text-decoration: none; }
.ni-site-row a:hover { color: var(--page-accent); }

.ni-copy-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--page-border);
  border-radius: 7px;
  background: var(--page-soft);
  color: var(--page-sub);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}

.ni-copy-btn:hover { border-color: var(--page-accent); color: var(--page-accent); background: rgba(32, 160, 255, .08); }

.ni-copy-btn.is-copied {
  border-color: #67c23a;
  color: #67c23a;
  background: rgba(103, 194, 58, .08);
}

.ni-links-empty-config {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(30, 136, 229, .08);
  color: var(--mb-text-2);
  font-size: 13px;
  line-height: 1.7;
}

.ni-sort-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 14px;
}

.ni-sort-label { padding-right: 12px; border-right: 1px solid var(--page-line-soft); color: var(--page-sub); font-size: 13px; white-space: nowrap; }

.ni-sort-nav a {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--page-line-soft);
  border-radius: 8px;
  color: var(--page-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}

.ni-sort-nav a:hover { border-color: var(--mb-accent); color: var(--mb-accent); background: rgba(30, 136, 229, .08); }
.ni-sort-nav a em { font-style: normal; font-size: 12px; color: var(--mb-text-3); }

.ni-links-section { scroll-margin-top: calc(var(--mb-nav-h, 66px) + 16px); margin-bottom: 24px; }

.ni-sort-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
}

.ni-sort-mark { width: 4px; height: 18px; border-radius: 8px; background: var(--mb-accent); }
.ni-sort-head h2 { margin: 0; border-bottom: 0; color: var(--mb-text-1); font-size: 19px; font-weight: 400; transition: color .25s; }
.ni-sort-head:hover h2 { color: var(--mb-accent); }

.ni-sort-count {
  margin-left: auto;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--page-line-soft);
  border-radius: 8px;
  color: var(--page-sub);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.ni-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ni-link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ni-link-card:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-hover); border-color: var(--mb-accent); }

.ni-link-logo {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--page-line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-link-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-link-logo .ni-link-char { color: var(--mb-text-3); font-size: 18px; }

.ni-link-info { min-width: 0; flex: 1; }
.ni-link-name { display: block; color: var(--page-text); font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-link-desc { display: block; margin-top: 3px; color: var(--mb-text-3); font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ni-links-empty {
  padding: 42px 18px;
  border: 1px dashed var(--mb-glass-border);
  border-radius: var(--mb-radius);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-3);
  text-align: center;
  line-height: 1.9;
}

.ni-links-empty strong { color: var(--mb-text-1); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .ni-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .ni-ab-profile,
  .ni-ab-grid { grid-template-columns: 1fr; }

  .ni-ab-profile { gap: 18px; padding: 26px 22px; text-align: center; }
  .ni-ab-avatar-zone { width: min(100%, 300px); margin: 0 auto; }
  .ni-ab-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 单列时必须写 minmax(0,1fr)：1fr 的最小值是 auto（= 内容 min-content），
     友链面板里有 nowrap 的长链接文本，会把这个「一列」撑到 510px，
     在小屏直接顶出容器。minmax(0,1fr) 才允许列宽被压回容器宽度。 */
  .ni-links-panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .ni-ab-ten-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ni-ab-ten-row > div:nth-child(2) { grid-column: 1 / -1; order: -1; margin-bottom: 6px; }

  .ni-ab-ten-date {
    padding: 10px 8px;
    border: 1px solid var(--mb-inset-line);
    border-radius: 10px;
  }

  .ni-ab-ten-stat { grid-template-columns: 1fr; gap: 9px; }
  .ni-ab-ten-stat-item { min-height: 46px; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .ni-ab-ten-stat-item strong { margin-top: 0; font-size: 18px; }

  .ni-ab-milestone {
    grid-template-columns: repeat(var(--ni-ms, 5), 58px);
    width: max-content;
    max-width: none;
    margin: 18px 0 0;
    padding: 0 2px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ni-ab-milestone::-webkit-scrollbar { display: none; }
  .ni-ab-milestone::before { left: 29px; right: auto; width: calc((var(--ni-ms, 5) - 1) * 58px); }

  .ni-ab-section { padding: 16px 14px; }
  .ni-ab-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ni-ab-contact-item { min-height: 60px; padding: 10px; }
  .ni-ab-float-tag-1 { left: 4px; top: 14px; }
  .ni-ab-float-tag-2 { left: 10px; bottom: 16px; }
  .ni-ab-float-tag-3 { right: 4px; top: 16px; }
  .ni-ab-float-tag-4 { right: 10px; bottom: 14px; }

  .ni-link-grid { grid-template-columns: 1fr; }
  .ni-sort-label { border-right: 0; padding-right: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ni-ab-avatar,
  .ni-ab-contact-item,
  .ni-link-card,
  .ni-ab-progress i,
  .ni-ab-section-head:after,
  .ni-sort-head:after { transition: none; }
  .ni-ab-avatar-zone:hover .ni-ab-avatar,
  .ni-link-card:hover { transform: none; }
}

/* ============================================================
   文章归档页
   移植自 niRvana-diy/page_archives.php 的内联样式，
   尺寸与原版对齐，配色改由 MicroBlog 令牌驱动。
   ============================================================ */
.ni-gd-wrap {
  max-width: var(--mb-width, 880px);
  margin: 0 auto;
  padding: 22px 0 10px;
}

.ni-gd-intro {
  margin: 0 0 20px;
  color: var(--mb-text-2);
  font-size: 14px;
  line-height: 1.9;
}

.ni-gd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.ni-gd-stat,
.ni-gd-cloud,
.ni-gd-panel {
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
}

.ni-gd-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.ni-gd-stat-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-gd-stat-icon svg { width: 22px; height: 22px; }
.ni-gd-stat-text span { display: block; color: var(--mb-text-2); font-size: 13px; }

.ni-gd-stat-text strong {
  display: block;
  margin-top: 2px;
  color: var(--page-text);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ni-gd-cloud { margin-bottom: 20px; padding: 18px 20px; }

.ni-gd-cloud-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.ni-gd-cloud-head svg { width: 20px; height: 20px; color: var(--mb-text-3); transition: color .25s; }

.ni-gd-cloud-head h2 {
  margin: 0;
  border-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--mb-text-1);
  transition: color .25s;
}

.ni-gd-cloud-head:hover svg,
.ni-gd-cloud-head:hover h2 { color: var(--mb-accent); }

.ni-gd-cloud-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ni-gd-cloud-grid .ni-gd-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 38px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--mb-glass-border);
  border-radius: 10px;
  background: var(--page-soft-bg);
  color: var(--mb-text-1);
  text-decoration: none;
  font-size: 14px;
  transition: border-color .2s, color .2s, background .2s;
}

.ni-gd-cloud-grid .ni-gd-tag:hover {
  border-color: var(--mb-accent);
  color: var(--mb-accent);
  background: var(--page-soft-bg);
}

.ni-gd-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ni-gd-tag em {
  flex: 0 0 auto;
  min-width: 40px;
  height: 22px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ni-gd-panel { padding: 16px; }

.ni-gd-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}

.ni-gd-toolbar .ni-gd-switch {
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--mb-glass-border);
  border-radius: 9px;
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-1);
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}

.ni-gd-toolbar .ni-gd-switch:hover { border-color: var(--mb-accent); color: var(--mb-accent); }

.ni-gd-toolbar .ni-gd-switch.active {
  color: #fff;
  border-color: var(--mb-accent);
  background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-deep));
  box-shadow: 0 4px 10px rgba(30, 136, 229, .28);
}

.ni-gd-list { display: flex; flex-direction: column; gap: 10px; }

.ni-gd-group {
  /* 年份折叠条与上方「统计卡」同一条浅描边（--mb-glass-border 是 65% 白，
     在白卡上等于看不见，2026-11-12 换成可见的 --page-line-soft #e6edf6） */
  border: 1px solid var(--page-line-soft);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-soft);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}

.ni-gd-group.is-open { border-color: var(--page-line-soft); box-shadow: 0 8px 16px rgba(30, 84, 160, .08); }

.ni-gd-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  background: 0 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
}

.ni-gd-group-left { display: flex; align-items: center; gap: 11px; min-width: 0; }

.ni-gd-chevron {
  width: 8px;
  height: 8px;
  border-top: 1.6px solid var(--mb-accent);
  border-right: 1.6px solid var(--mb-accent);
  transform: rotate(135deg);
  transition: transform .3s ease-in-out;
  flex: 0 0 auto;
}

.ni-gd-group.is-open .ni-gd-chevron { transform: rotate(45deg); }
.ni-gd-group-title { color: var(--page-text); font-size: 16px; white-space: nowrap; }

.ni-gd-group-count {
  flex: 0 0 auto;
  min-width: 78px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(30, 136, 229, .08);
  color: var(--mb-accent);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ni-gd-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s ease-in-out;
  padding: 0 16px;
}

.ni-gd-group-body.is-collapsed { grid-template-rows: 0fr; }

.ni-gd-group-body.is-collapsed .ni-gd-group-body-inner {
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}

.ni-gd-group-body-inner {
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
  /* 头部与文章列表之间的分隔线：与年份卡外框同一条浅描边
     （原 --mb-cm-name-line #a6b5c7 偏深，与白卡对比过强，2026-11-12） */
  border-top: 1px solid var(--page-line-soft);
  transition: padding-top .3s ease-in-out, padding-bottom .3s ease-in-out, border-top-width .3s ease-in-out;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 7px;
  padding: 16px 0 14px;
}

.ni-gd-item { display: flex; align-items: baseline; gap: 13px; min-width: 0; padding: 4px 0; }

.ni-gd-date {
  color: var(--mb-text-3);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.ni-gd-item .ni-gd-link {
  min-width: 0;
  /* 与微语正文同源：普通文字走 --page-text（现 #475669），深色由变量组兜底 */
  color: var(--page-text);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s, transform .18s;
}

.ni-gd-item .ni-gd-link:hover { color: var(--mb-accent); transform: translateX(7px); }

/* 归档里混排的「微语」条目角标（2026-11-12）：排在标题前，不参与截断 */
.ni-gd-item .ni-gd-kind {
  display: inline-block;
  margin-right: 7px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(32, 160, 255, .11);
  color: var(--page-accent);
  font-size: 11px;
  font-style: normal;
  line-height: 17px;
  vertical-align: 1px;
}

/* 深色底上 11% 的蓝几乎看不见，单独加一档 */
html[data-dark="1"] .ni-gd-item .ni-gd-kind { background: rgba(92, 173, 255, .18); }

.ni-gd-empty {
  padding: 44px 18px;
  text-align: center;
  border: 1px dashed var(--mb-glass-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  line-height: 1.9;
}

@media (max-width: 920px) {
  .ni-gd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ni-gd-cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .ni-gd-group-body-inner { grid-template-columns: 1fr; column-gap: 0; row-gap: 5px; }
  .ni-gd-toolbar { justify-content: stretch; }
  .ni-gd-switch { flex: 1 1 0; justify-content: center; }
}

/* ============================================================
   留言榜单页
   移植自 niRvana-diy/page_guestbook.php 的内联样式。
   前三名领奖台的金/银/铜是语义色，保持原值不动。
   ============================================================ */
.ni-rank-wrap {
  max-width: var(--mb-width, 880px);
  margin: 0 auto;
  padding: 22px 0 10px;
}

/* 大容器：统计 / 前三名 / 明细统一收进这一张卡。
   2026-11-11 起相框改挂外层 .ni-rank-wrap（与关于 / 友链 / 归档同构），
   本层在描边皮肤下已压平为纯内容容器（见 border 区块的 .ni-rank-board 规则），
   这里的玻璃底只在无皮肤时兜底。 */
.ni-rank-board {
  padding: 26px;
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
}

.ni-rank-intro { margin: 0 0 20px; color: var(--mb-text-2); font-size: 14px; line-height: 1.9; }

.ni-rank-stats { display: flex; gap: 14px; margin-bottom: 20px; }

.ni-rank-stat,
.ni-rank-top-card,
.ni-rank-list {
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
}

.ni-rank-stat { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; }

/* ---- 卡内小组件不再各自成卡 ----------------------------------
   大容器已经提供了底色与外框，里面的统计格 / 领奖台 / 明细只保留
   排版和极淡的分隔，避免「卡里套卡」。
   ---------------------------------------------------------------- */
.ni-rank-board .ni-rank-stat,
.ni-rank-board .ni-rank-top-card {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* 统计两格：各自一圈浅描边线框（2026-11-12 按要求加线框；
   原来是扁平两格 + 中间一条竖线，现在每格自带框，竖线取消） */
.ni-rank-board .ni-rank-stat {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--page-line-soft);
  border-radius: 10px;
}
.ni-rank-board .ni-rank-stat + .ni-rank-stat { padding-left: 16px; }

.ni-rank-board .ni-rank-top-card { padding: 18px; }
.ni-rank-board .ni-rank-top-card:hover { box-shadow: none; }
.ni-rank-board .ni-rank-quote { background: var(--page-soft); }

/* 明细：外层框去掉，网格自己排 */
.ni-rank-board .ni-rank-list {
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ni-rank-stat-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(30, 136, 229, .1);
  color: var(--mb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-rank-stat-icon svg { width: 22px; height: 22px; }
.ni-rank-stat-text span { display: block; color: var(--mb-text-2); font-size: 13px; }

.ni-rank-stat-text strong {
  display: block;
  margin-top: 2px;
  color: var(--mb-text-1);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ni-rank-top3 { display: flex; gap: 14px; margin-bottom: 20px; }

.ni-rank-top-card {
  flex: 1;
  padding: 18px 18px 16px;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ni-rank-top-card:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-hover); }
.ni-rank-top-card.ni-first { border-color: gold; transform: translateY(-8px); }
.ni-rank-top-card.ni-first:hover { transform: translateY(-11px); }
.ni-rank-top-card.ni-second { border-color: silver; }
.ni-rank-top-card.ni-third { border-color: #cd7f32; }

.ni-rank-top-head { display: flex; align-items: center; gap: 12px; padding-top: 20px; }
.ni-rank-top-card.ni-first .ni-rank-top-head { padding-top: 26px; }

.ni-rank-avatar-wrap { position: relative; flex: 0 0 64px; width: 64px; height: 64px; overflow: visible; }
.ni-rank-top-card.ni-first .ni-rank-avatar-wrap { flex-basis: 72px; width: 72px; height: 72px; }

.ni-rank-avatar {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--mb-glass-bg-strong);
  box-shadow: 0 10px 20px rgba(30, 84, 160, .16), 0 0 0 1px var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-rank-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 皇冠徽章：纯 CSS 画，不依赖图片 */
.ni-rank-badge {
  position: absolute;
  left: 50%;
  top: -25px;
  z-index: 9;
  width: 42px;
  height: 36px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 7px 10px rgba(31, 45, 61, .18));
}

.ni-rank-top-card.ni-first .ni-rank-badge { top: -29px; width: 48px; height: 42px; }
.ni-rank-badge::after,
.ni-rank-badge::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }

.ni-rank-badge::before {
  top: 0;
  width: 39px;
  height: 25px;
  clip-path: polygon(0% 100%, 0% 42%, 17% 58%, 28% 8%, 41% 56%, 50% 0%, 59% 56%, 72% 8%, 83% 58%, 100% 42%, 100% 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -6px 9px rgba(62, 57, 52, .16);
}

.ni-rank-badge::after {
  top: 21px;
  width: 42px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -4px 8px rgba(62, 57, 52, .14);
}

.ni-rank-badge span {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px rgba(31, 45, 61, .15);
}

.ni-rank-top-card.ni-first .ni-rank-badge::before { width: 45px; height: 30px; }
.ni-rank-top-card.ni-first .ni-rank-badge::after { top: 26px; width: 48px; height: 13px; }
.ni-rank-top-card.ni-first .ni-rank-badge span { width: 29px; height: 29px; font-size: 16px; }

.ni-rank-badge.b1::before { background: linear-gradient(135deg, #fff2a7 0, #f4b52d 38%, #c47a12 70%, #ffd56b 100%); }
.ni-rank-badge.b1::after { background: linear-gradient(180deg, #ffd975, #c47b16); }

.ni-rank-badge.b1 span {
  color: #fff;
  text-shadow: 0 1px 1px rgba(99, 52, 0, .55);
  background: linear-gradient(135deg, #efb33f, #a96512);
  border: 1px solid rgba(255, 235, 151, .78);
}

.ni-rank-badge.b2::before { background: linear-gradient(135deg, #fff 0, #cfd5da 40%, #7f8b95 72%, #f8fbff 100%); }
.ni-rank-badge.b2::after { background: linear-gradient(180deg, #f7fbff, #9ca7b0); }

.ni-rank-badge.b2 span {
  color: #fff;
  text-shadow: 0 1px 1px rgba(42, 51, 60, .5);
  background: linear-gradient(135deg, #cfd6dc, #7d8790);
  border: 1px solid rgba(255, 255, 255, .72);
}

.ni-rank-badge.b3::before { background: linear-gradient(135deg, #ffd3a7 0, #c8793f 42%, #85421d 76%, #f4b074 100%); }
.ni-rank-badge.b3::after { background: linear-gradient(180deg, #eaa36b, #944d25); }

.ni-rank-badge.b3 span {
  color: #fff4e6;
  text-shadow: 0 1px 1px rgba(79, 34, 8, .55);
  background: linear-gradient(135deg, #c4773c, #7f3f1d);
  border: 1px solid rgba(255, 202, 151, .68);
}

.ni-rank-top-name {
  color: var(--mb-text-1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ni-rank-top-count { margin-top: 4px; color: var(--mb-text-2); font-size: 13px; }
.ni-rank-top-count strong { color: var(--mb-accent); font-size: 18px; font-weight: 700; }

.ni-rank-quote {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  font-size: 13px;
  line-height: 1.7;
  max-height: 58px;
  overflow: hidden;
}

.ni-rank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

.ni-rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--mb-glass-border-2);
  border-radius: 10px;
  transition: background .2s;
}

.ni-rank-item:hover { border-color: var(--mb-accent);
    color: var(--mb-accent);
    background: rgba(30, 136, 229, .06); }

.ni-rank-index {
  flex: 0 0 34px;
  height: 26px;
  border-radius: 8px;
  background: var(--mb-glass-bg-soft-2);
  color: var(--mb-text-2);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-rank-item-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--mb-glass-border);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ni-rank-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-rank-item-body { flex: 1; min-width: 0; }
.ni-rank-item-top { display: flex; align-items: center; gap: 10px; }

.ni-rank-item-name {
  color: var(--mb-text-1);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ni-rank-item-count {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(30, 136, 229, .08);
  color: var(--mb-accent);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.ni-rank-item-text {
  margin-top: 3px;
  color: var(--mb-text-3);
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ni-rank-empty {
  padding: 36px 18px;
  border: 1px dashed var(--mb-glass-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-glass-bg-soft);
  color: var(--mb-text-2);
  text-align: center;
  line-height: 1.9;
}

/* ≤991（与主题手机断点一致）前三名改成横排领奖台：三张窄卡并排，
   皇冠 + 头像居中在上、名字居中、留言条数居中，不显示评论内容 */
@media (max-width: 991px) {
  .ni-rank-top3 { gap: 8px; }
  .ni-rank-top-card { padding: 8px 6px 12px; text-align: center; }
  .ni-rank-top-head { flex-direction: column; align-items: center; gap: 4px; padding-top: 28px; }
  /* 领奖台层次：显示顺序是 2/1/3，第 1 名（中间）头像最高，第 2 名（左）略低，第 3 名（右）最低 */
  .ni-rank-top-card.ni-first .ni-rank-top-head { padding-top: 20px; }
  .ni-rank-top-card.ni-third .ni-rank-top-head { padding-top: 36px; }
  .ni-rank-avatar-wrap { flex: 0 0 48px; width: 48px; height: 48px; }
  .ni-rank-top-card.ni-first .ni-rank-avatar-wrap { flex-basis: 56px; width: 56px; height: 56px; }
  .ni-rank-top-name { max-width: 100%; font-size: 13px; }
  .ni-rank-top-count { margin-top: 0; font-size: 11px; white-space: nowrap; }
  .ni-rank-top-count strong { font-size: 14px; }
  .ni-rank-avatar { font-size: 18px; }
  .ni-rank-badge { width: 34px; height: 30px; top: -20px; }
  .ni-rank-badge::before { width: 31px; height: 21px; }
  .ni-rank-badge::after { top: 17px; width: 34px; height: 10px; }
  .ni-rank-badge span { width: 21px; height: 21px; font-size: 13px; }
  .ni-rank-top-card.ni-first .ni-rank-badge { width: 34px; height: 30px; top: -20px; }
  .ni-rank-top-card.ni-first .ni-rank-badge::before { width: 31px; height: 21px; }
  .ni-rank-top-card.ni-first .ni-rank-badge::after { top: 17px; width: 34px; height: 10px; }
  .ni-rank-top-card.ni-first .ni-rank-badge span { width: 21px; height: 21px; font-size: 13px; }
  /* 手机端前三名不展示评论内容：只留 头像 + 皇冠 + 名字 + 留言条数 */
  .ni-rank-quote { display: none; }
  .ni-rank-top-card.ni-first { transform: none; }
  .ni-rank-top-card.ni-first:hover { transform: translateY(-2px); }
  .ni-rank-stats { gap: 10px; }
  /* 统计卡与皇冠卡一致保持横排；很窄的屏幕把内边距和图标略收一点防止挤压 */
  .ni-rank-stat { padding: 12px; gap: 10px; }
  .ni-rank-stat-icon { width: 36px; height: 36px; }
  .ni-rank-stat-icon svg { width: 20px; height: 20px; }
  /* 第 4 名起的明细：手机端两列网格，只留 序号 + 头像 + 名字 + 条数 */
  .ni-rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  .ni-rank-item { padding: 10px 8px; gap: 8px; border-radius: 10px; }
  .ni-rank-index { flex: 0 0 22px; height: 20px; font-size: 12px; border-radius: 6px; }
  .ni-rank-item-avatar { flex: 0 0 36px; width: 36px; height: 36px; font-size: 14px; border-radius: 8px; }
  .ni-rank-item-top { gap: 6px; flex-wrap: wrap; row-gap: 2px; }
  .ni-rank-item-name { font-size: 13px; max-width: 100%; }
  .ni-rank-item-count { padding: 0 6px; font-size: 11px; height: 20px; }
  .ni-rank-item-text { display: none; }

  /* 大容器在窄屏收一收内边距，把宽度让给内容
     （比桌面规则特异性高，必须在这里重新声明一遍小组件的 padding） */
  .ni-rank-board { padding: 16px 14px; }
  .ni-rank-board .ni-rank-stat { padding: 8px 10px; }
  .ni-rank-board .ni-rank-stat + .ni-rank-stat { padding-left: 10px; }
  .ni-rank-board .ni-rank-top-card { padding: 8px 6px 12px; }
  .ni-rank-board .ni-rank-list { padding: 0; }
}

/* ============================================================
   博友动态页
   移植自 niRvana-diy/css/page_rss.css（原文件把配色抽成了 --text-* 变量，
   这里直接映射到 MicroBlog 令牌，因此不再需要暗色覆盖块）。
   ============================================================ */
.ztj-rss-wrap {
  max-width: var(--mb-width, 880px);
  margin: 0 auto;
  padding: 22px 0 10px;
  color: var(--mb-text-1);
}

.ztj-rss-hero,
.ztj-rss-stat,
.ztj-rss-card,
.ztj-rss-empty {
  border: 1px solid var(--mb-glass-border);
  border-radius: var(--mb-radius);
  background: var(--mb-glass-bg);
  -webkit-backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  backdrop-filter: blur(var(--mb-blur)) saturate(170%);
  box-shadow: var(--mb-shadow);
}

.ztj-rss-hero {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 11px 18px;
  margin-bottom: 13px;
}

.ztj-rss-hero-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ztj-rss-hero-icon { width: 25px; height: 25px; flex: 0 0 auto; color: var(--mb-accent); }

.ztj-rss-hero-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.ztj-rss-hero-copy h1,
.ztj-rss-hero-copy .ztj-rss-hero-title {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .03em;
  white-space: nowrap;
  margin: 0;
  color: var(--mb-text-1);
  font-weight: 700;
}

.ztj-rss-hero-copy p { margin: 0; color: var(--mb-text-2); font-size: 13px; line-height: 1.6; white-space: nowrap; }
.ztj-rss-intro { margin: 0 0 13px; color: var(--mb-text-2); font-size: 13px; line-height: 1.9; }

.ztj-rss-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ztj-rss-stat { min-height: 70px; display: flex; align-items: center; gap: 12px; padding: 10px 15px; }
.ztj-rss-stat-icon { width: 31px; height: 31px; flex: 0 0 auto; color: var(--mb-text-3); }
.ztj-rss-stat-copy { min-width: 0; }
.ztj-rss-stat-label { display: block; color: var(--mb-text-2); font-size: 13px; line-height: 1.2; white-space: nowrap; }

.ztj-rss-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  color: var(--mb-text-1);
  font-size: 14px;
  font-weight: 700;
}

.ztj-rss-stat-value em { font-style: normal; font-size: 21px; line-height: 1; font-weight: 700; letter-spacing: 0; }

.ztj-rss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.ztj-rss-card {
  padding: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ztj-rss-card:hover {
  border-color: var(--mb-accent);
  box-shadow: var(--mb-shadow-hover);
  transform: translateY(-2px);
}

.ztj-rss-title { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; }
.ztj-rss-title a { color: var(--mb-text-1); text-decoration: none; }
.ztj-rss-title a:hover { color: var(--mb-accent); }

.ztj-rss-site {
  color: var(--mb-text-1);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ztj-rss-day-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.ztj-rss-day-badge.today { color: #e74c3c; background: rgba(231, 76, 60, .12); }
.ztj-rss-day-badge.yesterday { color: #3f8b5a; background: rgba(63, 139, 90, .14); }
.ztj-rss-day-badge.before-yesterday { color: var(--mb-accent); background: rgba(30, 136, 229, .14); }
.ztj-rss-card:hover .ztj-rss-day-badge.today { color: #fff; background: #e74c3c; }
.ztj-rss-card:hover .ztj-rss-day-badge.yesterday { color: #fff; background: #3f8b5a; }
.ztj-rss-card:hover .ztj-rss-day-badge.before-yesterday { color: #fff; background: var(--mb-accent); }

.ztj-rss-desc {
  margin: 6px 0 12px;
  color: var(--mb-text-2);
  font-size: 13px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ztj-rss-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--mb-cm-name-line);
  color: var(--mb-text-3);
  font-size: 12px;
}

.ztj-rss-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mb-glass-bg-soft);
  flex: 0 0 auto;
}

.ztj-rss-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ztj-rss-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--mb-accent);
  font-size: 12px;
  font-weight: 700;
}

.ztj-rss-date { margin-left: auto; white-space: nowrap; }
.ztj-rss-empty { padding: 42px 18px; text-align: center; line-height: 1.9; color: var(--mb-text-2); }
.ztj-rss-empty strong { color: var(--mb-text-1); }

@media (max-width: 820px) {
  .ztj-rss-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ztj-rss-grid { grid-template-columns: 1fr; }
  .ztj-rss-stat { gap: 9px; padding: 10px 12px; }
  .ztj-rss-stat-icon { width: 25px; height: 25px; }
  .ztj-rss-stat-value em { font-size: 19px; }
}

@media (max-width: 560px) {
  .ztj-rss-hero-copy p { width: 100%; white-space: normal; }
  .ztj-rss-card { padding: 14px; }
  .ztj-rss-title { font-size: 14px; }
}

@media (max-width: 380px) {
  .ztj-rss-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ni-gd-cloud-head:after,
  .ni-gd-group,
  .ni-gd-group-body,
  .ni-gd-group-body-inner,
  .ni-gd-item .ni-gd-link,
  .ni-rank-top-card,
  .ztj-rss-card { transition: none; }
  .ni-rank-top-card:hover,
  .ni-rank-top-card.ni-first,
  .ni-rank-top-card.ni-first:hover,
  .ni-gd-item .ni-gd-link:hover,
  .ztj-rss-card:hover { transform: none; }
}