/* ============================================================
   岁时 · Suishi
   四季配色（春新芽 / 夏沉碧 / 秋丹枫 / 冬暮雪）× 明暗（自动/浅/深）
   ============================================================ */

/* ---------- 字体与基础变量 ---------- */
:root {
  --sans: "LXGW WenKai Screen", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  --bd: 1px solid var(--line);
  /* 圆角三档：小控件 / 控件、内容与媒体 / 大卡片与面板 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  /* 图片加载动效的涟漪环高光色，深色模式下压低透明度 */
  --sheen-soft: rgba(255, 255, 255, .3);
}
/* 深色模式下统一压暗加载高光（选择器权重高于 :root，覆盖四个季节的深色配置） */
html[data-effective-mode="dark"] { --sheen-soft: rgba(255, 255, 255, .05) }

/* ---- 春 · 新芽 ---- */
html[data-season="spring"] {
  --bg: #f5f7f3; --card: #fff; --ink: #2a3028; --sub: #68736b; --faint: #9da79f;
  --line: #e4e8e3; --accent: #5a8a5e; --accent-deep: #45704a; --accent-soft: rgba(90, 138, 94, .08); --accent-light: #5a8a5e; --accent-dark: #8ec094;
}
html[data-season="spring"][data-effective-mode="dark"] {
  --bg: #131611; --card: #1b1f1a; --ink: #e2e8df; --sub: #96a09a; --faint: #5f6a63;
  --line: #2a302c; --accent: #8ec094; --accent-deep: #a0d0a6; --accent-soft: rgba(142, 192, 148, .12);
}
/* ---- 夏 · 沉碧 ---- */
html[data-season="summer"] {
  --bg: #f3f6f8; --card: #fff; --ink: #1f2832; --sub: #6b7682; --faint: #9da7b3;
  --line: #e2e8ee; --accent: #2c6f9f; --accent-deep: #1f567f; --accent-soft: rgba(44, 111, 159, .08); --accent-light: #2c6f9f; --accent-dark: #5fa0d0;
}
html[data-season="summer"][data-effective-mode="dark"] {
  --bg: #11161e; --card: #191e27; --ink: #dde4ec; --sub: #96a0ac; --faint: #5f6a76;
  --line: #28303a; --accent: #5fa0d0; --accent-deep: #75b5e0; --accent-soft: rgba(95, 160, 208, .12);
}
/* ---- 秋 · 丹枫 ---- */
html[data-season="autumn"] {
  --bg: #f7f4f0; --card: #fff; --ink: #2d2520; --sub: #7a6f65; --faint: #a89e94;
  --line: #ebe3da; --accent: #a85c30; --accent-deep: #8a4825; --accent-soft: rgba(168, 92, 48, .08); --accent-light: #a85c30; --accent-dark: #d4855a;
}
html[data-season="autumn"][data-effective-mode="dark"] {
  --bg: #16120e; --card: #1e1a15; --ink: #ebe2d4; --sub: #a0958a; --faint: #6d6258;
  --line: #2e2820; --accent: #d4855a; --accent-deep: #e09a72; --accent-soft: rgba(212, 133, 90, .12);
}
/* ---- 冬 · 暮雪 ---- */
html[data-season="winter"] {
  --bg: #f4f6f8; --card: #fff; --ink: #232830; --sub: #6b727c; --faint: #9da4ae;
  --line: #e3e7ed; --accent: #5a6f8c; --accent-deep: #475a73; --accent-soft: rgba(90, 111, 140, .08); --accent-light: #5a6f8c; --accent-dark: #8fa3c0;
}
html[data-season="winter"][data-effective-mode="dark"] {
  --bg: #111317; --card: #191c20; --ink: #dde2e8; --sub: #969da7; --faint: #5f6670;
  --line: #282c32; --accent: #8fa3c0; --accent-deep: #a5b5cc; --accent-soft: rgba(143, 163, 192, .12);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  line-height: 1.75; font-size: 1rem; -webkit-font-smoothing: antialiased;
  transition: background .35s, color .35s; min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.2rem }
/* 内容不足一屏时 footer 贴底（粘性页脚）；宽高显式定义避免 flex 交叉轴 auto 外边距触发收缩 */
main { flex: 1 0 auto; width: min(960px, 100%); margin-left: auto; margin-right: auto }
.footer { flex-shrink: 0 }

/* ---- 全局滚动条 ---- */
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-sm); transition: background .2s }
::-webkit-scrollbar-thumb:hover { background: var(--faint) }
::-webkit-scrollbar-track { background: transparent }
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin }

/* ---------- 顶栏 ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  padding: .8rem 0;
}
/* 磨砂放在伪元素上：backdrop-filter 若直接写在 .top 会使其成为 fixed 后代（全屏菜单弹层）的包含块 */
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* 全屏弹层（菜单/搜索）打开时，header 的 logo 与按钮需浮在弹层之上并可点击 */
.top .logo, .top .acts { position: relative; z-index: 45 }
.top .row { display: flex; align-items: center; gap: .7rem; position: relative }
.logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1rem; color: var(--accent-deep);
  white-space: nowrap;
}

/* ---- 站标：机器人（圆角方脑袋 + 两只竖眼，没有嘴） ---- */
.logo-bot { position: relative; flex: none; width: 2rem; height: 2rem; margin-right: .5rem; display: block }
.logo-bot .face {
  position: absolute; inset: 0; border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.logo-bot .look {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  animation: bot-look 7s ease-in-out infinite;
}
.logo-bot .eyes { display: flex; align-items: center; gap: .28rem; transition: gap .25s, transform .25s }
.logo-bot .eye {
  position: relative; width: .26rem; height: .55rem; border-radius: .15rem; background: var(--accent);
  transition: background .18s; animation: bot-blink 7s ease-in-out infinite;
}
/* 眯眼笑的那道上弧：平时藏起来，悬停时顶掉竖眼 */
.logo-bot .eye::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  border-top: 2px solid var(--accent); border-radius: 50% 50% 0 0 / 68% 68% 0 0;
  transition: opacity .18s;
}
/* 悬停（键盘聚焦同款）：描边发光、眼睛眯成上弧、吐舌头；按下时脑袋缩一下作为点击反馈 */
.logo:hover .logo-bot .face, .logo:focus-visible .logo-bot .face {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.logo:hover .logo-bot .look, .logo:focus-visible .logo-bot .look { animation: none }
.logo:hover .logo-bot .eyes, .logo:focus-visible .logo-bot .eyes { gap: .34rem; transform: scale(1.06) }
.logo:hover .logo-bot .eye, .logo:focus-visible .logo-bot .eye { background: transparent; animation: none }
.logo:hover .logo-bot .eye::before, .logo:focus-visible .logo-bot .eye::before { opacity: 1 }
.logo:active .logo-bot .face { transform: scale(.94) }
/* 眨眼：与张望共用同一条 7s 时间轴——每轮回正之后（81% 处）眨一次，约 0.28s；
   整段行为 7s 一循环，眨眼不再有自己的独立节奏 */
@keyframes bot-blink {
  0%, 79%, 83%, 100% { transform: scale(1, 1) }
  81% { transform: scale(1.55, .12) }
}
/* 东张西望：眼睛整体左右各瞄一下 */
@keyframes bot-look {
  0%, 24%, 100% { transform: translateX(0) }
  34%, 44% { transform: translateX(-.12rem) }
  58%, 68% { transform: translateX(.12rem) }
  78% { transform: translateX(0) }
}
.nav { display: flex; gap: .3rem; margin-left: 2rem; flex-wrap: wrap }
.nav a {
  font-weight: 700; font-size: .875rem; padding: .34rem .85rem; border-radius: var(--r-md);
  color: var(--sub); border: 1.5px solid transparent; transition: all .15s;
}
.nav a:hover { color: var(--accent-deep); background: var(--card); border-color: var(--line) }
.nav a.active { background: var(--accent); color: #fff; border-color: var(--accent) }
.acts { margin-left: auto; display: flex; align-items: center; gap: .5rem }

/* ---------- 全屏搜索弹层（所有断点；header 露出，搜索按钮切换为 ×） ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.search-overlay.open { opacity: 1; visibility: visible }
.search-form { width: min(560px, 86vw) }
.search-form input {
  width: 100%; border: none; border-bottom: 2px solid var(--accent); border-radius: 0;
  background: none; color: var(--ink); font-family: var(--sans); font-size: 1.375rem;
  text-align: center; padding: .5rem .2rem; transition: border-color .2s;
}
.search-form input:focus { outline: none }
.search-form input::placeholder { color: var(--faint) }
/* 搜索按钮：弹层打开时放大镜切换为 × */
[data-search-open] .ic-close { display: none }
[data-search-open].open .ic-search { display: none }
[data-search-open].open .ic-close { display: block }

/* ---------- 主题（季节 × 明暗）下拉选择 ---------- */
.theme-select { position: relative }
.theme-btn {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  width: 2.2rem; height: 2.2rem; background: var(--card); border: var(--bd);
  border-radius: var(--r-md); padding: 0; cursor: pointer; font: inherit;
  transition: border-color .15s;
}
.theme-btn:hover { border-color: var(--accent) }
.theme-btn .swatch {
  width: .85rem; height: .85rem; border-radius: 50%; flex: none;
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  transition: background .3s;
}
html[data-mode="light"] .theme-btn .swatch { background: var(--accent-light) }
html[data-mode="dark"] .theme-btn .swatch { background: var(--accent-dark) }
html[data-mode="auto"] .theme-btn .swatch { background: linear-gradient(90deg, var(--accent-light) 50%, var(--accent-dark) 50%) }
.theme-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; min-width: 8rem;
  background: var(--card); border: var(--bd); border-radius: var(--r-md); padding: .4rem; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.theme-select.is-open .theme-menu { opacity: 1; visibility: visible; transform: translateY(0) }
.theme-menu button {
  display: flex; align-items: center; gap: .55rem; width: 100%; border: none; background: none;
  font: inherit; font-size: .875rem; color: var(--sub); padding: .4rem .6rem; border-radius: var(--r-md); cursor: pointer;
  transition: background .12s, color .12s; text-align: left;
}
.theme-menu button:hover { background: var(--accent-soft); color: var(--ink) }
.theme-menu button[aria-checked="true"] { color: var(--accent-deep); font-weight: 700 }
.theme-menu button .dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none }
.theme-menu button .dot-light { background: var(--bg); border: 1px solid var(--line) }
.theme-menu .sep { height: 1px; background: var(--line); margin: .3rem 0 }

/* ---------- 图标按钮 / 汉堡菜单 ---------- */
.ibtn {
  width: 2.2rem; height: 2.2rem; border: var(--bd); border-radius: var(--r-md); background: var(--card);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  font-weight: 800; font-size: .875rem;
  transition: border-color .15s, color .15s;
}
/* hover 统一：仅描边变色，不填充不上浮 */
.ibtn:hover { border-color: var(--accent); color: var(--accent-deep) }
.menu-btn.active { color: var(--accent-deep); border-color: var(--accent) }
/* 全站图标统一为纯 CSS 实现（与汉堡菜单同一套动画语言） */

/* 放大镜 → ×：圆环收缩淡出，手柄滑到中心长成一条对角线，第二条对角线淡入交叉 */
.search-glass { position: relative; width: 1.05rem; height: 1.05rem; display: block }
.search-glass .ring {
  position: absolute; left: 0; top: 0; width: .66rem; height: .66rem;
  border: 2px solid currentColor; border-radius: 50%;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.search-glass .stem {
  position: absolute; left: .8rem; top: .8rem; width: .42rem; height: 2px;
  background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: left .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1), width .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1);
}
.search-glass .stem::before {
  content: ""; position: absolute; inset: 0; background: currentColor; border-radius: 1px;
  opacity: 0; transform: rotate(0deg) scaleX(.4);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
[data-search-open].open .search-glass .ring { transform: scale(0); opacity: 0 }
[data-search-open].open .search-glass .stem { left: 50%; top: 50%; width: 1rem; transform: translate(-50%, -50%) rotate(45deg) }
[data-search-open].open .search-glass .stem::before { opacity: 1; transform: rotate(90deg) scaleX(1) }

/* 回到顶部：双层上折角（⏫），两层错落、间距清晰 */
.icon-top { position: relative; width: 15px; height: 15px; display: block }
.icon-top::before,
.icon-top::after {
  content: ""; position: absolute; left: 3px;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(-45deg);
}
.icon-top::before { top: 2px }
.icon-top::after { top: 9px }
.ibtn-top { opacity: 0; pointer-events: none; transition: opacity .3s ease }
.ibtn-top.visible { opacity: 1; pointer-events: auto }

.burger { width: 1.05rem; height: .9rem; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch }
.burger .line { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s }
.menu-btn.active .line:nth-child(1) { transform: translateY(.39rem) rotate(45deg) }
.menu-btn.active .line:nth-child(2) { opacity: 0; transform: scaleX(.2) }
.menu-btn.active .line:nth-child(3) { transform: translateY(-.39rem) rotate(-45deg) }
.menu-btn { display: none }

/* ---------- 通用卡片 / 小节标题 ---------- */
.tile {
  background: var(--card); border: var(--bd); border-radius: var(--r-lg); padding: 1.4rem 1.5rem;
  min-width: 0; transition: border-color .18s, transform .18s;
}
.tile.hoverable:hover { border-color: var(--accent); transform: translateY(-2px) }
.tile .k { font-family: var(--mono); font-size: .75rem; letter-spacing: .28em; color: var(--faint); margin-bottom: .7rem }
.sect-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem }
.sect-head .k { margin-bottom: 0 }
.sect-head .more {
  margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--accent-deep);
  border-bottom: 2px solid var(--accent); padding-bottom: 1px; transition: opacity .15s;
}
.sect-head .more:hover { opacity: .7 }

/* ---------- 首页 Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; padding: 1.2rem 0 2.4rem; align-items: stretch }

/* hero */
.t-hero { grid-column: span 8; padding: 2rem 2.1rem; border-color: var(--accent); position: relative; overflow: hidden }
.t-hero::before { content: ""; position: absolute; right: -3rem; top: -3rem; width: 9rem; height: 9rem; border-radius: 50%; background: var(--accent-soft) }
.t-hero h1 { font-size: clamp(1.375rem, 4vw, 1.75rem); font-weight: 800; line-height: 1.4; position: relative }
.t-hero h1 em { font-style: normal; color: var(--accent-deep); border-bottom: 4px solid var(--accent); padding-bottom: .04em }
.t-hero p { color: var(--sub); margin: .9rem 0 1.3rem; max-width: 30rem; position: relative }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .875rem;
  border: var(--bd); border-radius: var(--r-md); padding: .55rem 1.3rem; background: var(--bg);
  color: var(--ink); cursor: pointer; transition: all .15s; position: relative;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep) }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent-deep) }
.btn.primary:hover { background: var(--accent-deep); color: #fff }

/* 个人名片（预留区块：暂无内容，仅占位） */
.t-card { grid-column: span 4; display: flex; flex-direction: column; gap: .8rem }
.t-card-empty { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--accent) 3%, transparent) 14px 28px); border-style: dashed; border-color: var(--line) }
.t-card .face {
  width: 3rem; height: 3rem; border: 1.5px solid var(--accent); border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center;
  font-weight: 800; font-size: 1.125rem;
}
.t-card .name { font-weight: 800; font-size: 1rem }
.t-card .role { font-size: .75rem; color: var(--faint); margin-top: .1rem }
.t-card .bio { font-size: .875rem; color: var(--sub); line-height: 1.85 }
.t-card .links { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: auto }
.t-card .links a {
  font-size: .75rem; font-weight: 700; border: 1.5px solid var(--accent); border-radius: var(--r-sm);
  padding: .22rem .85rem; background: var(--card); color: var(--accent-deep);
  transition: background .15s, color .15s;
}
.t-card .links a:hover { background: var(--accent); color: #fff }

/* 首页碎语区：与文章区等高，内部滚动 */
.t-memos { grid-column: span 7; display: flex; flex-direction: column; min-height: 0; overflow: hidden }
.memos-wrap { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden }
.memos-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll; outline: none }
/* 滚动条遮罩：hover 时露出 */
.memos-wrap::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 9px;
  background: var(--card); z-index: 2; pointer-events: none; transition: opacity .25s;
}
.memos-wrap:hover::before { opacity: 0 }
.memos-wrap::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2.2rem;
  background: linear-gradient(to bottom, transparent, var(--card)); pointer-events: none; z-index: 1;
}
.memos-scroll {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: scroll; outline: none;
  padding-bottom: 1.5rem;
}
.mrow { padding: .7rem 0; border-bottom: 1px dashed var(--line) }
.mrow:last-child { border-bottom: none }
.mrow .txt { font-size: .875rem }
.mrow .when { font-family: var(--mono); font-size: .75rem; color: var(--faint); margin-top: .2rem; display: flex; gap: 1.1em; flex-wrap: wrap }
.mrow .when .pin { color: var(--accent-deep); font-weight: 700 }
.mrow .when a, .mcard .when a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); padding-bottom: 1px; transition: color .2s, border-color .2s }
.mrow .when a:hover, .mcard .when a:hover { color: var(--accent); border-color: var(--accent) }

/* 首页文章区 */
.t-posts { grid-column: span 5; display: flex; flex-direction: column }
.prow { display: block; padding: .6rem .2rem; position: relative; transition: padding-left .25s }
.prow:not(:last-child) { border-bottom: 1px dashed var(--line) }
.prow:hover { padding-left: .5rem }
.prow .p-title {
  font-size: .875rem; font-weight: 400; line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; display: block;
}
.prow:hover .p-title { color: var(--accent-deep) }
.p-meta {
  font-family: var(--mono); font-size: .75rem; color: var(--faint); letter-spacing: .04em;
  margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-meta .date { color: var(--faint) }
.p-meta .sep { opacity: .4; margin: 0 .4em }
.p-meta .cat, .p-meta .tag { color: var(--faint); transition: color .15s; cursor: pointer }
.p-meta .cat:hover, .p-meta .tag:hover { color: var(--accent-deep) }
.p-empty { font-size: .875rem; color: var(--faint); padding: .6rem .2rem }

/* 首页列表视图（分类 / 标签 / 搜索 / 首页翻页）与分页 */
.t-plain { margin-bottom: 2rem }
.t-plain .pagenav { padding: .6rem .2rem 0 }
.pagenav ol { list-style: none; display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; padding: 0; font-family: var(--mono); font-size: .75rem }
.pagenav ol li a, .pagenav ol li span {
  display: block; padding: .25rem .8rem; border: var(--bd); border-radius: var(--r-md); color: var(--sub); transition: all .15s;
}
.pagenav ol li span { border-color: transparent; color: var(--faint) }
.pagenav ol li a:hover { border-color: var(--accent); color: var(--accent-deep) }
.pagenav ol li.current a { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700 }

/* 关于条（首页 / 404） */
.t-about {
  grid-column: span 12; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  background: var(--accent-soft); border-color: var(--accent);
}
.t-about .face {
  width: 3rem; height: 3rem; border: 1px solid var(--accent); border-radius: var(--r-md);
  display: grid; place-items: center; font-weight: 800; font-size: 1.125rem;
  background: var(--card); color: var(--accent-deep);
}
.t-about p { font-size: .875rem; font-weight: 600; flex: 1; min-width: 14rem }
.t-about .links { display: flex; gap: .5rem; flex-wrap: wrap }
.t-about .links a {
  font-size: .75rem; font-weight: 700; border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: .25rem .9rem; background: var(--card); color: var(--accent-deep);
  transition: background .15s, color .15s;
}
.t-about .links a:hover { background: var(--accent); color: #fff }

/* 空状态 */
.t-empty { text-align: center; padding: 3rem 1.5rem; margin-bottom: 2rem }
.t-empty h2 { font-size: 1.125rem; font-weight: 800; margin-bottom: .4rem }
.t-empty p { font-size: .875rem; color: var(--sub) }
/* 空状态下「前往后台」入口（仅登录且具编辑权限的访客可见） */
.t-empty .tile-link {
  display: inline-block; margin-top: .9rem; padding: .38rem 1.1rem;
  font-size: .875rem; font-weight: 700; color: var(--accent-deep);
  border: 1.5px dashed var(--accent); border-radius: var(--r-md);
  transition: transform .15s, background .15s, color .15s;
}
.t-empty .tile-link:hover { transform: translateY(-2px); background: var(--accent); color: #fff }

/* ---------- 子页头部横幅 ---------- */
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 1.4rem; align-items: stretch }
.page-hero {
  background: var(--card); border: var(--bd); border-radius: var(--r-lg);
  margin: 1.5rem 0 1.4rem; padding: 1.5rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.page-hero h1 { font-size: 1.375rem; font-weight: 800; line-height: 1.4 }
.page-hero p { color: var(--sub); font-size: .875rem }
.page-hero .count { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--faint); text-align: right; line-height: 1.9 }
.page-hero .count b { color: var(--accent-deep); font-size: 1rem }
/* 碎语页左卡：标题行（左右分栏）+ 四栏数据统计，纵向撑开使首尾行与右侧热力图共用同一基线 */
.hero-row .page-hero { margin: 0; flex-direction: column; align-items: stretch; justify-content: space-between }
.hero-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100% }
.hero-head h1 { white-space: nowrap }
.hero-head p { text-align: right }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100% }
.hero-stats .stat { display: flex; flex-direction: column; align-items: center; gap: .15rem }
.hero-stats .stat b { font-size: .75rem; font-weight: 700; color: var(--faint); white-space: nowrap }
.hero-stats .stat i { font-style: normal; font-family: var(--mono); font-size: 1rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums }
.hm-card { background: var(--card); border: var(--bd); border-radius: var(--r-lg); padding: 1.5rem; display: flex; align-items: stretch; justify-content: safe center; min-width: 0; overflow: hidden }
@media (max-width: 820px) {
  .hero-row { grid-template-columns: 1fr }
  /* 移动端只滚矩阵本身：滚动容器从卡片下放到 hm-body，页脚（近半年说明 + 图例）
     留在滚动区外固定不动、默认即可见；左右 1.5rem 留白由卡片内边距提供，
     滚动两端天然对称（卡片不再是滚动容器，无末端 padding 失效问题） */
  .hm-wrap { width: 100% }
  .hm-body { overflow-x: auto; overflow-y: hidden }
}

/* ---- 碎语日历热力图 ---- */
/* 格子固定 11px 保证边缘不被子像素抹糊，wrap 收紧到矩阵实际宽度后
   页脚说明与图例的左右两端正好落在矩阵首尾列上；卡片负责把整块居中 */
.hm-wrap { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; font-family: var(--mono); font-size: .75rem; color: var(--faint); width: fit-content; max-width: 100%; min-width: 0 }
.hm-body { display: grid; grid-template-columns: repeat(var(--weeks, 28), 11px); gap: 3px }
.hm-cell, .hm-legend i { display: block; border-radius: 2px; background: var(--line) }
.hm-cell { aspect-ratio: 1; transition: transform .12s }
.hm-cell:not([data-lvl]) { background: transparent }
.hm-cell[data-lvl="1"], .hm-legend i[data-lvl="1"] { background: color-mix(in srgb, var(--accent) 35%, var(--card)) }
.hm-cell[data-lvl="2"], .hm-legend i[data-lvl="2"] { background: color-mix(in srgb, var(--accent) 60%, var(--card)) }
.hm-cell[data-lvl="3"], .hm-legend i[data-lvl="3"] { background: color-mix(in srgb, var(--accent) 85%, var(--card)) }
.hm-cell[data-lvl="4"], .hm-legend i[data-lvl="4"] { background: var(--accent) }
.hm-cell[data-today] { outline: 1px solid var(--accent-deep); outline-offset: -1px }
.hm-cell:hover { transform: scale(1.3) }
.hm-foot { margin: 0; display: flex; align-items: center; gap: .6rem; justify-content: space-between }
.hm-legend { display: flex; align-items: center; gap: 3px }
.hm-legend i { width: 11px; height: 11px; flex: none }

/* ---------- 碎语页（瀑布墙） ---------- */
.wall { padding-bottom: 1rem }
.mcard {
  break-inside: avoid; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem 1.15rem .85rem; margin-bottom: 1rem;
  transition: transform .18s, border-color .18s;
}
.mcard:hover { transform: translateY(-2px); border-color: var(--accent) }
.mcard .txt { font-size: 1rem }
.mcard .txt a, .mrow .txt a {
  color: var(--accent-deep);
  text-decoration: none;
  transition: color .2s;
}
.mcard .txt a:hover, .mrow .txt a:hover {
  color: var(--accent);
}
.mcard .when { font-family: var(--mono); font-size: .75rem; color: var(--faint); margin-top: .3rem; display: flex; gap: 1.2em; flex-wrap: wrap }
.mrow .when .pin { color: var(--accent-deep); font-weight: 700 }
.mrow-end {
  padding: 1rem 0 .6rem;
  border-bottom: none;
  text-align: center;
}
.end-link {
  font-size: .875rem;
  color: var(--faint);
  text-decoration: none;
  transition: color .2s;
}
.end-link:hover {
  color: var(--accent-deep);
}
.end-link em {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}
.mcard .imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  margin-top: .55rem;
  line-height: 0;
}
.mcard .imgs .img-link {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s;
}
.mcard .imgs .img-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.mcard .imgs .img-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* 首页碎语滚动区小图：4 列紧凑缩略图 */
.memos-scroll .imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .2rem;
  margin-top: .3rem;
}
.memos-scroll .imgs .img-link {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s;
}
.memos-scroll .imgs .img-link:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.memos-scroll .imgs .img-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ---- 图片 lightbox ---- */
.suishi-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.8);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}
.suishi-lightbox.is-open {
  display: flex;
}
.suishi-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--r-md);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.mcard .imgs .img-link img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

/* ---- 图片加载骨架：图片未加载或加载失败时露出涟漪扩散动效 ----
   中心圆环自内向外扩散（纯 CSS background 动画，加载中与失败时可见），
   图片加载成功后整幅盖住背景；透明 PNG 会隐约透出底色，故透明度压得很低；
   系统偏好减弱动效时退化为静态底色 */
.imgs .img-link img,
.memo-imgs .img-link img,
.prose img {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 30%, var(--sheen-soft) 44%, transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 0 0;
  background-color: color-mix(in srgb, var(--faint) 16%, transparent);
  animation: suishi-img-ripple 2.4s linear infinite;
}
@keyframes suishi-img-ripple {
  from { background-size: 25% 33%, 100% 100% }
  to   { background-size: 250% 333%, 100% 100% }
}
@media (prefers-reduced-motion: reduce) {
  .imgs .img-link img,
  .memo-imgs .img-link img,
  .prose img {
    animation: none;
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%);
  }
}

/* ---------- 碎语单条页 ---------- */
.prose.memo-prose p { text-indent: 0 }
.memo-meta { margin-top: 1.15rem; padding-top: .9rem; border-top: 1px dashed var(--line) }
.a-meta .pin { color: var(--accent-deep); font-weight: 700 }
.memo-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin-top: .7rem;
  line-height: 0;
}
.memo-imgs .img-link {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow .2s;
}
.memo-imgs .img-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14) }
.memo-imgs .img-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ---------- 碎语语音播放器 ---------- */
.audio {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s;
}
.audio:hover,
.audio.is-playing,
.audio.is-dragging { border-color: var(--accent) }
.audio.is-error { opacity: .6; cursor: default }
.ma-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--card);
  cursor: pointer;
}
.ma-btn:active { transform: scale(.94) }
.audio.is-error .ma-btn { background: var(--line); color: var(--faint); cursor: not-allowed }
.ma-btn svg { width: 12px; height: 12px; fill: currentColor; display: block }
.audio .ma-i-pause { display: none }
.audio.is-playing .ma-i-play { display: none }
.audio.is-playing .ma-i-pause { display: block }
.ma-track {
  position: relative;
  display: block;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
  touch-action: none;
}
.ma-track::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px }
.ma-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.ma-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--accent) }
.ma-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .18s ease;
  pointer-events: none;
}
.ma-track:hover .ma-knob,
.audio.is-dragging .ma-knob,
.ma-track:focus-visible .ma-knob { transform: translate(-50%, -50%) scale(1) }
.ma-time { flex: none; font-family: var(--mono); font-size: .72rem; color: var(--faint); white-space: nowrap }
.ma-sep { margin: 0 .15em }
.audio.is-loading .ma-time { opacity: .6 }
@media (prefers-reduced-motion: reduce) {
  .ma-knob, .ma-btn { transition: none }
}

/* ---------- 视频与其他附件 ---------- */
.memo-video { width: 100%; margin-top: .6rem; border-radius: var(--r-md); background: #000; display: block }
.memo-file {
  display: inline-block;
  margin-top: .55rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent-deep);
  border-bottom: 1px dashed var(--line);
}
.memo-file:hover { border-color: var(--accent) }
.pn .pn-link { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--ink); transition: color .15s }
.pn:hover .pn-link { color: var(--accent-deep) }
.pn .pn-link.none { color: var(--faint); font-weight: 400 }
.load { display: flex; justify-content: center; padding: 1.4rem 0 2.6rem }
.load button:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent); color: #fff }

/* ---------- 归档页 ---------- */
.year { background: var(--card); border: var(--bd); border-radius: var(--r-lg); margin-bottom: 1.3rem; overflow: hidden }
.year-h { display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 1.4rem .9rem; border-bottom: 1.5px dashed var(--line); flex-wrap: wrap }
.year-h .y { font-size: 1.75rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums }
.year-h .n { font-family: var(--mono); font-size: .75rem; color: var(--faint); letter-spacing: .15em }
.year-h .bar { flex: 1; min-width: 6rem; height: 10px; border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg) }
.year-h .bar i { display: block; height: 100%; background: var(--accent); transition: width 1s cubic-bezier(.22, 1, .36, 1) }
.alist { padding: .5rem 1rem .8rem }
.arow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem;
  padding: .55rem .6rem; border-radius: var(--r-md); align-items: baseline;
}
.arow:hover { background: var(--accent-soft) }
/* 日期与评论数恒为次要淡色，行链接 hover 时不随之变色 */
.arow time { font-family: var(--mono); font-size: .875rem; color: var(--faint); white-space: nowrap }
.arow .t { font-size: 1rem; font-weight: 400; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.arow:hover .t { color: var(--accent-deep) }
.arow .cnt { font-family: var(--mono); font-size: .875rem; color: var(--faint); white-space: nowrap; text-align: right }

/* ---------- 友邻页 ---------- */
.group-h { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0 .9rem }
.group-h .blk { width: .95rem; height: .95rem; border: 1.5px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft) }
.group-h h2 { font-size: 1.125rem; font-weight: 800 }
.group-h .sub { font-family: var(--mono); font-size: .75rem; color: var(--faint); letter-spacing: .2em }
.group-h::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line) }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem }
.fcard {
  display: flex; align-items: center; gap: .95rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1rem 1.15rem; transition: transform .18s, border-color .18s;
}
.fcard:hover { transform: translateY(-2px); border-color: var(--accent) }
.fcard .ava {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; overflow: hidden;
}
.fcard .ava img { width: 100%; height: 100%; display: block; object-fit: cover }
.fcard .info { min-width: 0 }
.fcard .name { font-weight: 800; font-size: 1rem }
.fcard:hover .name { color: var(--accent-deep) }
.fcard .desc { font-size: .75rem; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block }
/* 失联友邻：卡片整体虚线边框，头像灰度淡化，不显示标签，仍可访问其归档页 */
.fcard.lost { border-style: dashed }
.fcard.lost .ava { color: var(--faint); background: transparent }
.fcard.lost .ava img { filter: grayscale(1); opacity: .55 }
/* 上浮需赢过入场动画终态 .rv.in（同优先级且更靠后，会覆盖 transform） */
.fcard.rv:hover { transform: translateY(-2px) }
/* 失联友邻 hover 不上强调色，边框与昵称转灰，与灰化头像保持一致 */
.fcard.lost:hover { border-color: var(--faint) }
.fcard.lost:hover .name { color: var(--faint) }
.note {
  margin-top: 2rem; background: var(--accent-soft); border: 1.5px dashed var(--accent); border-radius: var(--r-lg);
  padding: 1rem 1.3rem; text-align: center; font-size: .875rem; color: var(--sub); margin-bottom: 1rem;
}
.note b { color: var(--accent-deep); font-weight: 700 }

/* ---------- 文章页 ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90 }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear }

.a-card { background: var(--card); border: var(--bd); border-radius: var(--r-lg); padding: 2.2rem 2.4rem 2rem; margin-top: 2rem }
.a-card h1 { font-size: clamp(1.375rem, 4vw, 1.75rem); font-weight: 800; line-height: 1.5 }
.a-meta {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem 1rem;
}
.a-meta .left { font-family: var(--mono); font-size: .75rem; color: var(--faint); display: flex; align-items: center; flex-wrap: wrap }
.a-meta .sep { opacity: .4; margin: 0 .4em }
.a-meta .cat, .a-meta .tag { color: var(--faint); transition: color .15s }
.a-meta .cat:hover, .a-meta .tag:hover { color: var(--accent-deep) }
.a-meta .right { font-family: var(--mono); font-size: .75rem; color: var(--faint) }

/* 正文排版（Markdown 输出） */
.prose { font-size: 1rem; margin-top: 2rem; line-height: 2 }
.prose p { margin-bottom: 1.4em; text-indent: 2em; }
.prose p:has(.video) { text-indent: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: 800; margin: 1.8em 0 .8em; line-height: 1.5 }
.prose h1 { font-size: 1.75rem }
.prose h2 { font-size: 1.375rem; padding-left: .8rem; border-left: 3px solid var(--accent) }
.prose h3 { font-size: 1.125rem }
.prose h4 { font-size: 1rem }
.prose h5, .prose h6 { font-size: 1rem; color: var(--sub) }
.prose a {
  color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color .2s;
}
.prose a:hover { text-decoration-color: var(--accent) }
.prose strong { font-weight: 800 }
.prose em { font-style: italic; color: var(--sub) }
.prose del { color: var(--faint); text-decoration-color: var(--faint) }
.prose code {
  font-family: var(--mono); font-size: .875rem; background: var(--accent-soft); color: var(--accent-deep);
  border-radius: var(--r-sm); padding: .15em .45em; border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.prose pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.5em 0; line-height: 1.75 }
.prose pre code { background: none; border: none; padding: 0; color: var(--ink); font-size: .875rem }
.prose blockquote {
  margin: 1.6em 0; padding: .8rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--sub);
}
.prose blockquote p { margin: 0 0 .4em; text-indent: 0 }
.prose blockquote p:last-child { margin: 0 }
.prose blockquote blockquote { margin: .6em 0; border-left-color: var(--faint) }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.5em }
.prose li { margin: .4em 0 }
.prose ul li::marker { color: var(--accent) }
.prose ol li::marker { color: var(--accent); font-weight: 700 }
.prose li > ul, .prose li > ol { margin: .3em 0 }
.prose hr { border: none; height: 1px; background: var(--line); margin: 2.2em auto; width: 60% }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .875rem }
.prose th, .prose td { padding: .55rem .8rem; border: 1px solid var(--line); text-align: left }
.prose th { background: var(--accent-soft); font-weight: 700; color: var(--accent-deep) }
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent) 3%, transparent) }
/* 图片加载失败占位 */
.prose img { max-width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); margin: 1em auto; display: block; aspect-ratio: auto 16 / 9 }
/* 加载失败的图片：虚线边框（柔色） */
/* 图片加载失败占位：主题色淡底 */
img[src*="data:image/svg"] { background: var(--accent-soft) }
.prose figcaption { text-align: center; font-size: .75rem; color: var(--faint); margin-top: .5em }
/* DiguKit 多图集 — 按张数组合排版 */
.prose .post-gallery { display: grid; gap: .6rem; margin: 1.2em 0 }
/* 1 张居中 1:2:1 */ 
.prose .post-gallery-1 { grid-template-columns: 1fr 2fr 1fr }
.prose .post-gallery-1 > * { grid-column: 2 }
/*2 张等宽并排 */
.prose .post-gallery-2 { grid-template-columns: 1fr 1fr }
/*3 张三等分 */
.prose .post-gallery-3 { grid-template-columns: repeat(3, 1fr) }
/*4 张两行两列 */
.prose .post-gallery-4 { grid-template-columns: 1fr 1fr }
/*5 张2+3 组合（6 列网格，前 2 张跨3 列，后 3 张跨 2 列） */
.prose .post-gallery-5 { grid-template-columns: repeat(6, 1fr) }
.prose .post-gallery-5 > *:nth-child(1),
.prose .post-gallery-5 > *:nth-child(2) { grid-column: span 3 }
.prose .post-gallery-5 > *:nth-child(3),
.prose .post-gallery-5 > *:nth-child(4),
.prose .post-gallery-5 > *:nth-child(5) { grid-column: span 2 }
/*6 张两行三列 */
.prose .post-gallery-6 { grid-template-columns: repeat(3, 1fr) }
/* 网格内图片铺满单元格 */
.prose .post-gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: none; border-radius: var(--r-md); aspect-ratio: auto 4 / 3 }
.prose .post-gallery a.image { height: 100%; border-radius: var(--r-md); overflow: hidden }
.prose .post-gallery figcaption { grid-column: 1 / -1; margin-top: .4em }
/* DiguKit 图床灯箱：点击查看原图 */
.prose a.image { display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s }
.prose a.image:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15) }
.prose a.image:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.prose a.image img { pointer-events: none; margin: 0; border: none }
/* DiguKit 哔哩哔哩视频 — 1:2:1 居中布局，同单图样式 */
.prose .video { display: grid; grid-template-columns: 1fr 2fr 1fr; margin: 1.2em 0; border-radius: var(--r-md); overflow: hidden }
.prose .video a.video { display: block; grid-column: 2; text-decoration: none; border-radius: var(--r-md); min-height: 200px; position: relative; overflow: hidden }
.prose .video a.video:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15) }
.prose .video a.video::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.08); opacity: 0; transition: opacity .2s }
.prose .video a.video:hover::after { opacity: 1 }
/* VIDEO 角标 */
.prose .video a.video::before { content: 'VIDEO'; position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); border-radius: var(--r-sm); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1; pointer-events: none }
/* 站内历史文章使用 <gallery> 自定义标签包裹多图，排成自适应网格 */
.prose gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin: 1.2em 0 }
.prose gallery br { display: none }
.prose gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3 }

/* 上一篇 / 下一篇 */
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0 }
.pn {
  display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1.1rem;
  background: var(--card); border: var(--bd); border-radius: var(--r-md); transition: border-color .18s, transform .18s;
}
.pn:hover { border-color: var(--accent); transform: translateY(-2px) }
.pn .pn-label { font-family: var(--mono); font-size: .75rem; color: var(--faint); letter-spacing: .1em }
.pn .pn-title { font-size: .875rem; font-weight: 700; color: var(--ink); transition: color .15s }
.pn .pn-title a { color: inherit }
.pn:hover .pn-title { color: var(--accent-deep) }
.pn.next { text-align: right; align-items: flex-end }

/* ---------- 评论（徽章卡） ---------- */
.comments-h { display: flex; align-items: center; gap: .8rem; margin: 2.4rem 0 1.1rem }
.comments-h h2 { font-size: 1.125rem; font-weight: 800 }
.comments-h .n { font-size: .75rem; font-weight: 800; color: var(--accent-deep); border: 1px solid var(--accent); border-radius: var(--r-sm); padding: .08rem .7rem }

.cmt { background: var(--card); border: var(--bd); border-radius: var(--r-lg); padding: 1rem 1.15rem; margin-bottom: .8rem; transition: border-color .18s, transform .18s }
.cmt:hover { border-color: var(--accent); transform: translateY(-1px) }
.cmt .d-top { display: flex; align-items: center; gap: .75rem }
.cmt .ava {
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex: none;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); overflow: hidden;
}
.cmt .ava img { width: 100%; height: 100%; border-radius: var(--r-md); display: block }
.cmt .ava.ava-ai { border-style: dashed; font-size: .75rem; font-weight: 400 }
.cmt .d-info { flex: 1; min-width: 0 }
.cmt .d-line1 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap }
.cmt .who { font-weight: 800; font-size: .875rem }
.cmt .who.who-ai { color: var(--accent-deep) }
/* 徽章：博主 / AI */
.cmt .badge {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; border-radius: var(--r-sm);
  padding: .05rem .4rem; border: 1px solid var(--line); color: var(--faint);
}
.cmt .badge.owner { color: #fff; background: var(--accent); border-color: var(--accent) }
.cmt .badge.ai { color: var(--accent-deep); border-color: var(--accent); border-style: dashed }
.cmt time { font-family: var(--mono); font-size: .75rem; color: var(--faint) }
.cmt .meta { font-family: var(--mono); font-size: .75rem; color: var(--faint); display: flex; align-items: center; flex-wrap: wrap }
.cmt .meta .sep { opacity: .4; margin: 0 .4em }
/* 回复：把核心输出的文字链接做成图标按钮（文字保留给读屏） */
.cmt .d-acts { flex: none; display: flex; gap: .35rem }
.cmt .d-acts a {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; font-size: 0;
  color: var(--faint); border: var(--bd); border-radius: var(--r-md); text-decoration: none; transition: all .15s;
}
.cmt .d-acts a::before {
  content: ""; width: 14px; height: 14px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4h4c3.9 0 6.6 1.3 8 4-1-5-4.8-8-12-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4h4c3.9 0 6.6 1.3 8 4-1-5-4.8-8-12-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cmt .d-acts a:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft) }
.cmt .d-body { margin-top: .6rem; font-size: .9rem }
/* AI 快评：虚线描边 + 强调底色，与访客评论区分 */
.cmt.cmt-ai { border-style: dashed; border-color: var(--accent); background: var(--accent-soft) }
.cmt-list { list-style: none; padding: 0 }
.cmt-list .cmt-node { list-style: none }
/* 嵌套回复：向左收窄缩进 + 左边缘竖线，子级去掉卡片外观 */
.cmt-list .child {
  list-style: none; position: relative;
  margin: .8rem 0 0; padding: 0 0 0 1rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.cmt-list .child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--line);
}
.cmt-list .child .cmt { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; transform: none }
.cmt-list .child .cmt:hover { transform: none; border: none }
.cmt-list .child .ava { width: 2rem; height: 2rem; font-size: .75rem }
.cmt-list .child .d-body { margin-top: .35rem }
.cmt-empty { font-size: .875rem; color: var(--faint); text-align: center; padding: 1.6rem 0 3rem }
.cmt-pagenav { display: flex; justify-content: center; padding: .4rem 0 .2rem }

/* 评论表单（紧凑：昵称/邮箱/网址 一行三格） */
.form { background: var(--card); border: var(--bd); border-radius: var(--r-lg); padding: 1.5rem 1.7rem; margin: .8rem 0 }
.form h2 { font-size: 1rem; font-weight: 800; margin-bottom: 1.1rem }
.form .f-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem }
.form .f-row input { flex: 1; min-width: 9rem }
.form .f-user { font-size: .875rem; color: var(--sub); margin-bottom: .8rem }
.form .f-user a { color: var(--accent-deep) }
.form .f-user .logout { margin-left: .6em }
.form input, .form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: .875rem; padding: .58rem .8rem; transition: border-color .2s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent) }
.form textarea { resize: vertical; min-height: 4.8rem }
/* 回复时核心脚本会把表单移入被回复的评论卡内，换底色避免同色卡片套卡片 */
.cmt .form { margin: .8rem 0 0; padding: 1.1rem 1.2rem; background: var(--bg) }
.cmt .form h2 { font-size: 1rem; margin-bottom: .9rem }
.f-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem }
.f-foot #cancel-comment-reply-link { font-size: .75rem; font-weight: 700; color: var(--faint); cursor: pointer }
.f-foot #cancel-comment-reply-link:hover { color: var(--accent-deep) }
.send {
  font-size: .875rem; font-weight: 800; color: #fff; background: var(--accent);
  border: 1px solid var(--accent-deep); border-radius: var(--r-md); padding: .6rem 1.7rem; cursor: pointer;
  transition: background .15s;
}
.send:hover { background: var(--accent-deep) }
.send:active { transform: translateY(1px) }
.ai-text { white-space: pre-line }

/* ---------- 页脚 ---------- */
.footer { border-top: var(--bd); margin-top: 2rem; padding: 1.5rem 0 2rem }
.footer .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-family: var(--mono); font-size: .75rem; color: var(--faint) }
/* 备案号独立成 span 以便移动端单独换行；分隔符放伪元素，换行时可随行隐藏 */
.footer .f-icp::before { content: " · " }
.footer a { color: var(--sub) }
.footer a:hover { color: var(--accent-deep) }

/* ---------- 入场动画 ---------- */
.js .rv { opacity: 0; transform: translateY(8px) }
.rv.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important }
  .rv { opacity: 1 }
}

/* ---------- 响应式 ---------- */
/* 平板：Bento 塌成单列，碎语恢复自然流 */
@media (max-width: 900px) {
  .t-hero, .t-card, .t-memos, .t-posts, .t-about { grid-column: span 12 }
  .t-memos { overflow: visible }
  .memos-wrap { position: static; flex: none; overflow: visible }
  .memos-scroll { position: static; overflow: visible; scrollbar-gutter: auto }
  /* wrap 转 static 后遮罩会逃逸到视口右缘（hover 碎语时呈现"白条变色"），移动端无内部滚动条，直接隐藏 */
  .memos-wrap::before, .memos-wrap::after { display: none }
}
/* 手机：导航折叠为全屏居中弹层（header 露出 logo 与关闭按钮）、单列布局 */
@media (max-width: 760px) {
  .nav {
    display: flex; position: fixed; inset: 0; z-index: 40; margin: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    background: var(--bg); padding: 1.2rem; flex-wrap: nowrap;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    /* 过渡放在移动端基础态：开（上滑渐入）/关（下滑渐出）双向平滑，与搜索弹层一致；
       桌面态不含这些属性，断点切换不受影响 */
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.m-open { opacity: 1; visibility: visible; transform: none }
  .nav a { font-size: 1.375rem; font-weight: 600; padding: .55rem 1.3rem; border: none; border-radius: var(--r-md) }
  .nav a:hover { background: none; border-color: transparent }
  .nav a.active { background: none; color: var(--accent-deep) }
  .menu-btn { display: grid }
  .a-card, .cmt, .form { padding-left: 1.3rem; padding-right: 1.3rem }
  .f-grid { grid-template-columns: 1fr }
  .cmt .body { padding-left: 0 }
  .cmt-list .child { margin-left: 0; padding-left: .8rem }
.a-meta { flex-direction: column; align-items: flex-start }
	  .page-hero .count { text-align: left; margin-left: 0 }
  .year-h .bar { flex-basis: 100% }
  .arow { grid-template-columns: auto minmax(0, 1fr) }
  .arow .cnt { display: none }
  /* minmax(0, 1fr)：轨道最小值为 0，避免长描述（nowrap）的最小内容宽度把单列撑出视口 */
  .cards { grid-template-columns: minmax(0, 1fr) }
		  .mcard .imgs { grid-template-columns: repeat(2, 1fr) }
  /* 页脚改三行居中：版权+RSS / 备案号 / 右侧技术栈 */
  .footer .wrap { flex-direction: column; align-items: center; gap: .4rem; text-align: center }
  .footer .f-icp { display: block }
  .footer .f-icp::before { content: none }
		}