/* ==========================================================
   樱花街道 · Sakura Street Blog Theme
   昼樱 / 夜樱 双主题 · 纯 CSS，无框架
   ========================================================== */

:root {
  --bg: #fff7f9;
  --bg-2: #fdeef3;
  --ink: #43303e;
  --ink-2: #7f6a79;
  --pink: #f2719c;
  --pink-strong: #e85b8a;
  /* 承载白字的实心底色：品牌粉太亮，白字压上去只有 2.9:1。
     这里给同色系压深的一版（白字 4.7:1），只用于按钮/选中标签/表头这类实心块；
     描边、光晕、❀ 装饰仍然用上面那个轻快的 --pink */
  --pink-deep: #cc3f6b;
  --pink-deep-2: #b03059;
  /* 浅粉底上的文字色：夜樱里 --pink-deep 压在深紫底上只有 2:1，
     所以「文字」和「实心底色」分开两个变量，hover/选中文字统一用它 */
  --pink-ink: #cc3f6b;
  --pink-soft: #ffd9e4;
  /* 导航面板：比文章卡片更实一点，压在街景上才读得清 */
  --panel: rgba(255, 255, 255, 0.94);
  /* 弹层（日历）：必须实色。试过 backdrop-filter + 半透明底，
     在这个合成层里模糊后的背板会压在底色上，卡片文字会透出来 */
  --popover: #fffdfe;
  --sky: #7f9bff;
  --gold: #f7a83c;
  --card: rgba(255, 255, 255, 0.88);
  --card-border: rgba(242, 113, 156, 0.18);
  --nav-bg: rgba(255, 247, 250, 0.78);
  --line: rgba(67, 48, 62, 0.1);
  --petal: #ffb7cb, #ff9dbb, #ffd0e0;
  --scrollbar: rgba(242, 113, 156, 0.38);
  --scrollbar-hover: rgba(232, 91, 138, 0.62);
  --bg-veil: linear-gradient(180deg, rgba(255, 247, 250, 0.08) 0%, rgba(253, 238, 243, 0.26) 45%, rgba(253, 238, 243, 0.52) 100%);
  --nav-scrim: linear-gradient(180deg, rgba(255, 247, 250, 0.6), rgba(255, 247, 250, 0) 100%);
  --shadow: 0 18px 40px -18px rgba(232, 91, 138, 0.35);
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, "Segoe UI", sans-serif;
  /* 标题类中文字体：中文必须排在日文字体前面，
     否则「直 / 骨 / 者 / 每」这些字会落到 Yu Gothic 的日文字形上 */
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", var(--font-sans);
  /* 纯日文装饰文字（假名为主）：优先日文字体 */
  --font-jp: "Yu Gothic", "Yu Gothic UI", "Hiragino Maru Gothic ProN",
    "Hiragino Kaku Gothic ProN", "PingFang SC", "Microsoft YaHei", var(--font-sans);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="night"] {
  --bg: #16132a;
  --bg-2: #1d1836;
  --ink: #f3ecf5;
  --ink-2: #b3a3c2;
  --pink: #ff9dc0;
  --pink-strong: #ffb3cf;
  --pink-ink: #ffb3cf;
  --pink-soft: rgba(255, 157, 192, 0.16);
  --sky: #8fa5ff;
  --gold: #ffcf7d;
  --card: rgba(45, 37, 76, 0.66);
  --card-border: rgba(255, 157, 192, 0.16);
  --panel: rgba(36, 29, 62, 0.9);
  --popover: #1f1935;
  --nav-bg: rgba(22, 19, 42, 0.72);
  --line: rgba(255, 255, 255, 0.09);
  --petal: #d98cae, #c77fa5, #e8a8c6;
  --scrollbar: rgba(255, 157, 192, 0.3);
  --scrollbar-hover: rgba(255, 157, 192, 0.55);
  --bg-veil: linear-gradient(180deg, rgba(15, 11, 26, 0.22) 0%, rgba(22, 19, 42, 0.4) 45%, rgba(22, 19, 42, 0.66) 100%);
  --nav-scrim: linear-gradient(180deg, rgba(15, 11, 26, 0.72), rgba(15, 11, 26, 0) 100%);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 作者样式里的 display 会盖掉 UA 的 [hidden]{display:none}，这里补一刀 */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Android Chrome / 部分国产系统会给可点元素盖一层蓝绿色方块（手机上点哪儿哪儿发蓝）。
     站内的 :active 缩放、位移已经提供了点击反馈，这里把系统高亮关掉 */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 500px at 85% -100px, var(--pink-soft) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a { color: var(--pink-strong); text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--pink-deep); color: #fff; }

/* 键盘导航时清晰可见的焦点环（无障碍）。
   用中性色而不是品牌粉：实心粉底（选中标签、主按钮）上的粉色焦点环会叠成"双圈"，
   看起来像渲染错误 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* 标签在横向滚动容器里，画在盒子外侧的焦点环会被 overflow 裁掉一截，
   改成内描边，滚到任何位置都是完整的一圈 */
.chip:focus-visible {
  outline-offset: -3px;
}

.chip:active { transform: scale(0.94); }

/* ---------- 滚动条：桌面细巧悬浮胶囊，触屏设备隐藏 ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 99px;
  border: 2px solid transparent;   /* 配合 background-clip 让胶囊更纤细 */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
  background-clip: padding-box;
}

@media (pointer: coarse), (max-width: 720px) {
  html { scrollbar-width: none; }
  ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* 跨文档视图过渡（支持的浏览器自动获得丝滑转场） */
/* 页面间直接切换（浏览器默认行为，避免新旧页面叠影） */

/* ---------- 首页双视图：封面 ⇄ 手记（独立页面 + 切换动画） ---------- */
body.home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* 封面 ⇄ 手记：手势是「往上拉」，所以封面不是整屏滑走，而是后景式地退开——
   只移动手势距离的 42%，并随进度淡出；手记则 1:1 跟手、提前变实。
   两层速度不同才有纵深，也不会在中间出现「封面已走、手记还没实」的空档 */
.view-cover {
  position: fixed;
  inset: 0;
  z-index: 10;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
  will-change: transform, opacity;
}

.view-notes {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 竖向 flex：文章少时让 main 撑满，页脚才会贴在视口底部而不是浮在半空 */
  display: flex;
  flex-direction: column;
  /* 透明度比位移更早结束：手记在滑行途中就已经是「实体」，
     不会出现卡片半透明、像没加载完的中间态 */
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  will-change: transform, opacity;
  box-shadow: 0 -24px 60px rgba(24, 18, 34, 0.28);
}
/* flex-grow 撑满剩余高度、flex-shrink 0 保证文章多时按内容撑开照常滚动 */
.view-notes > main { flex: 1 0 auto; }
/* 页脚必须显式禁止收缩：它自己带 overflow: hidden，会让 flex 的
   「min-height: auto」失效（自动最小尺寸变 0），文章一多就被压成一条被裁掉的空带 */
.view-notes > .footer { flex: 0 0 auto; }

.view-about {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 离开关于：先快速退场，把位置让给下一个视图 */
  transition: opacity 0.2s ease;
  display: flex;
}
.view-about .section { margin: auto; width: 100%; padding-top: 48px; padding-bottom: 48px; }

body.home .view-notes {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
body.home .view-about {
  opacity: 0;
  pointer-events: none;
}
body.home.at-notes .view-notes {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
body.home.at-notes .view-cover {
  transform: translateY(-42%);
  opacity: 0;
  pointer-events: none;
}
body.home.at-about .view-about {
  opacity: 1;
  pointer-events: auto;
  /* 进入关于：等旧视图先退干净再浮现（关于页是透明的，
     同时淡入会让旧版式从它背后透出来） */
  transition: opacity 0.34s ease 0.16s;
}
/* 关于视图下，另两个页面只做淡出——不产生上下滑动。
   注意封面这里不能再写 transform: none：从手记切过来时封面正停在视口上方（-100%），
   而这条规则只过渡 opacity，把 transform 归零会让它在不透明度还是 1 的瞬间弹回原位，
   看起来就是"闪了一下主页"。保持原位移，它只会在屏幕外安静地淡出。
   回到封面时 transform 才归零，那时 opacity 还是 0，跳变看不见。 */
body.home.at-about .view-cover {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body.home.at-about .view-notes {
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 归档视图：和关于一样是独立整页，靠透明度进出 */
.view-archive {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 0.2s ease;
}
body.home .view-archive { opacity: 0; pointer-events: none; }
body.home.at-archive .view-archive {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.34s ease 0.16s;
}
body.home.at-archive .view-cover {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body.home.at-archive .view-notes {
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ---------- 樱花画布 ---------- */
#petals {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* ---------- 导航：顶部透明融入背景，滚动后铺毛玻璃 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
/* 透明状态下的柔光衬底：保证导航文字压在深浅不一的视频帧上都可读 */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-scrim);
  pointer-events: none;
}
.nav.is-scrolled::before { content: none; }
.nav.is-scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--ink);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.nav-logo svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(242, 113, 156, 0.4)); }
.nav-logo:hover { color: var(--pink-strong); }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a, .nav-links button {
  position: relative;
  padding: 7px 13px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.25s, background-color 0.25s;
}
.nav-links a:hover, .nav-links button:hover {
  color: var(--pink-strong);
  background: var(--pink-soft);
}
.nav-links a.is-active { color: var(--pink-strong); }

/* 导航链接下划线：悬停/激活时从左生长 */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--pink), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

/* 昼夜按钮：太阳与月亮是两张手绘 SVG，切换时一进一出（旋转 + 淡入淡出） */
#themeToggle {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  transition: background-color 0.25s, transform 0.3s var(--ease);
}
#themeToggle:active { transform: scale(0.88); }
#themeToggle svg {
  position: absolute;
  width: 22px;
  height: 22px;
  transition: transform 0.5s var(--ease), opacity 0.28s ease;
}
#themeToggle .ico-sun { opacity: 1; transform: rotate(0deg) scale(1); }
#themeToggle .ico-moon { opacity: 0; transform: rotate(-70deg) scale(0.55); }
html[data-theme="night"] #themeToggle .ico-sun { opacity: 0; transform: rotate(70deg) scale(0.55); }
html[data-theme="night"] #themeToggle .ico-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* 全站文字不可选中：避免拖拽封面时把标题选蓝，也让整站更像「翻阅」而不是「网页」。
   只有文章页的正文与头图区例外——引用、复制需要能选中 */
body,
body * {
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
.article,
.article *,
.post-hero-inner,
.post-hero-inner * {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- 全站固定动态背景（所有页面一致，不随滚动消失） ---------- */
.bg-media { position: fixed; inset: 0; z-index: -2; transition: filter 0.8s ease; }

/* 夜樱：把白天的素材真正压成夜色。
   只换 CSS 变量的话，视频仍是正午晴天，加紫纱只会显得"发灰的白天" */
html[data-theme="night"] .bg-media {
  filter: brightness(0.44) saturate(0.62) hue-rotate(-14deg);
}

.bg-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* 海报直接写进 CSS（原来靠 JS 赋值，要等脚本跑完才开始下载）；
     WebP 比原 JPEG 小一半，手机再换 720 宽的版本 */
  background-image: url("../img/poster.webp");
  transform: scale(1.03);
}

/* 手机换 720 宽的版本：55KB，比桌面版再省 90KB */
@media (max-width: 720px) {
  .bg-poster { background-image: url("../img/poster-sm.webp"); }
}

#bgVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 与海报一致的过扫描取景：淡入前后画面完全对齐，不会有一次轻微缩放 */
  transform: scale(1.03);
  transition: opacity 1.2s ease;
}
#bgVideo.is-on { opacity: 1; }

/* 纱罩：顶部轻透（保持视频鲜艳），越往下越重（保证内容可读） */
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-veil);
}

.hero-content {
  position: relative;
  text-align: center;
  padding: 0 24px;
  max-width: 820px;
}

.hero-kicker {
  font-family: var(--font-jp);
  color: var(--pink-strong);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
html[data-theme="night"] .hero-kicker { text-shadow: 0 0 14px rgba(255, 157, 192, 0.65); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  /* 流光渐变文字：粉色光带周期性扫过标题 */
  background: linear-gradient(115deg, var(--ink) 0%, var(--ink) 38%, var(--pink-strong) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 20px rgba(255, 255, 255, 0.65)) drop-shadow(0 1px 3px rgba(67, 48, 62, 0.22));
}
html[data-theme="night"] .hero-title { filter: drop-shadow(0 0 26px rgba(255, 157, 192, 0.4)); }

/* 逐字绽放模式（JS 拆分后启用）：关掉渐变，让每个字独立入场 */
.hero-title.is-split {
  background: none;
  color: var(--ink);
  filter: drop-shadow(0 2px 20px rgba(255, 255, 255, 0.6)) drop-shadow(0 1px 3px rgba(67, 48, 62, 0.22));
}
html[data-theme="night"] .hero-title.is-split { filter: drop-shadow(0 0 26px rgba(255, 157, 192, 0.4)); }

/* 逐字入场结束后（JS 打上 .is-settled）：把被关掉的流光渐变接回来。
   子元素此时必须去掉 transform，否则会建立层叠上下文，父级的 background-clip:text 透不出来。
   选择器带上 .is-split 是为了压过下面 `.hero-title.is-split { animation: none }` 的同权重声明 */
.hero-title.is-split.is-settled {
  background: linear-gradient(115deg, var(--ink) 0%, var(--ink) 38%, var(--pink-strong) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 8s ease-in-out 0.6s infinite;
}
.hero-title.is-settled .ch { transform: none; animation: none; }
.hero-title .ch {
  display: inline-block;
  animation: charIn 0.8s var(--ease) backwards;
  transform-origin: 50% 100%;
}
@keyframes charIn {
  from { opacity: 0; transform: translateY(0.55em) rotate(9deg) scale(0.7); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes sheen {
  0%, 12% { background-position: 115% 0; }
  46%, 100% { background-position: -55% 0; }
}

.hero-tagline {
  margin-top: 18px;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--ink);
  opacity: 0.85;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.65);
}

.hero-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 入场动画 */
.hero-kicker, .hero-title, .hero-tagline, .hero-actions {
  animation: rise 0.9s var(--ease) backwards;
}
/* 标题：入场后接粉色流光扫过（逐字模式下由 .is-split 关闭 rise） */
.hero-title { animation: rise 0.9s var(--ease) 0.12s backwards, sheen 8s ease-in-out 1.8s infinite; }
.hero-title.is-split { animation: none; }
.hero-tagline { animation-delay: 0.24s; }
.hero-actions { animation-delay: 0.36s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 封面内容随鼠标轻微视差漂浮（--px/--py 由 JS 每帧插值写入，故此处不加 transition，
   否则每帧都被过渡再平滑一次，手感会拖） */
.hero-content {
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  will-change: transform;
}

/* 右侧竖排日文 */
.hero-side {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  color: var(--ink);
  opacity: 0.5;
  border-right: 1px solid var(--line);
  padding-right: 14px;
}

/* 漫画网点装饰 */
.hero::after {
  content: "";
  position: absolute;
  left: 4%; top: 12%;
  width: 150px; height: 150px;
  background-image: radial-gradient(var(--pink) 1.3px, transparent 1.3px);
  background-size: 11px 11px;
  opacity: 0.28;
  z-index: -1;
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.scroll-hint i {
  width: 1.5px;
  height: 34px;
  background: linear-gradient(180deg, var(--pink), transparent);
  animation: drip 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drip {
  0% { transform: scaleY(0); opacity: 0; }
  45% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(0.98); }

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-deep-2) 62%, var(--gold) 185%);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { box-shadow: 0 22px 44px -16px rgba(232, 91, 138, 0.55); }
/* 悬停时一道高光扫过按钮 */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -90%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-22deg);
  transition: left 0.65s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }

.btn-ghost {
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--card-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink-strong); }

/* ---------- 通用区块 ---------- */
.section {
  max-width: 1100px;
  margin: 0 auto;
  /* 顶部原本 96px，导航只有 64px 高，标题压得偏低；收 16px 更贴合 */
  padding: 76px 24px 20px;
}

.section-head { text-align: center; margin-bottom: 22px; position: relative; }

.section-jp {
  font-family: var(--font-jp);
  color: var(--pink-strong);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  opacity: 0.85;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.section-title::before, .section-title::after {
  content: "❀";
  font-size: 1rem;
  color: var(--pink);
  opacity: 0.7;
}

/* ---------- 工具栏：标签 + 搜索 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* 手记：工具栏 / 时间条横跨整行，分类栏从卡片那一行才开始（原来和工具栏齐平，显得太高） */
.view-notes .section { max-width: 1240px; }
.notes-layout {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* 宽屏：卡片列居中（940），分类栏挂到它左边。
   工具栏和时间条用同样的宽度居中，三者左边缘对齐 */
@media (min-width: 1440px) {
  .notes-wrap > .toolbar,
  .notes-wrap > .date-bar { max-width: 900px; margin-left: auto; margin-right: auto; }
  .notes-layout {
    grid-template-columns: 0 minmax(0, 900px);
    gap: 0;
    justify-content: center;
  }
  .cat-rail {
    width: 212px;
    justify-self: end;
    margin-right: 24px;
  }
}

/* 分类栏：卡片式导航，滚动时吸顶；分类变多时自己在内部滚动，不把整页撑长 */
.cat-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 116px);
  max-height: calc(100dvh - 116px);
  padding: 14px 12px 12px;
  /* 直接浮在街景上对比度不够，垫一层比文章卡片更实的玻璃 */
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 16px 36px -24px rgba(60, 28, 48, 0.45);
}

.cat-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 8px;
  padding: 0 8px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}
.cat-title em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 左右留 4px：焦点环画在盒子外侧，滚动容器会把它裁掉一截 */
  margin: 0 -4px;
  padding: 2px 4px;
  scrollbar-width: thin;
}

.cat-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.25s, transform 0.15s ease;
}
.cat-name {
  flex: 1 1 auto;
  min-width: 0;
  /* 长分类名（CNSS2026 writeup）优先在空格处折行，必要时才硬断，别把整行挤爆 */
  overflow-wrap: break-word;
}
/* 计数做成小胶囊：和名字的第一行对齐，名字折成两行时也不会飘到中间 */
.cat-item em {
  flex: 0 0 auto;
  min-width: 20px;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--pink-soft);
  color: var(--ink-2);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, color 0.2s;
}

/* 悬停 / 选中：选中态用实心渐变（和标签 chip 一致），
   比「浅底 + 左侧竖条」更清楚——竖条压在圆角上会被裁掉，看着像渲染错误 */
.cat-item:not(.is-active):hover {
  background: var(--pink-soft);
  color: var(--pink-ink);
}
.cat-item:not(.is-active):hover em { background: var(--card-border); }
.cat-item:not(.is-active):active { transform: scale(0.985); }

.cat-item.is-active {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 20px -12px rgba(176, 48, 89, 0.9);
}
.cat-item.is-active em {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* 焦点环必须画在盒子内侧：.cat-list 是 overflow 容器、内边距只有 2px，
   outline-offset: 2px 的环伸出 4px，底部和顶部会被裁掉一截（看起来像"框被遮住了"） */
.cat-item:focus-visible { outline-offset: -3px; }

.cat-current { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }

/* 当前筛选 + 清除：分类和搜索同时生效时给一个一键还原的出口 */
.toolbar-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.filter-clear:hover { color: var(--pink-ink); border-color: var(--pink); }

/* ---------- 时间范围筛选条 ---------- */
.date-bar {
  position: relative;   /* 日历弹层的定位基准 */
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 22px;
  padding: 12px 16px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 30;
}

.db-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
}
.db-title svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--pink-strong); }

.db-field { display: flex; flex-direction: column; gap: 4px; }
.db-field > span {
  padding-left: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  opacity: 0.85;
}

/* 整个日期框就是按钮：点哪儿都能开日历，不再依赖那个小小的图标 */
.db-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 148px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.db-trigger:hover { border-color: var(--pink); }
.db-trigger[aria-expanded="true"] { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }
.db-val { flex: 1 1 auto; text-align: left; letter-spacing: 0.01em; }
.db-val.is-empty { color: var(--ink-2); opacity: 0.6; }
.db-ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--pink-strong); opacity: 0.85; }
.db-trigger:hover .db-ico { opacity: 1; }

.db-arrow {
  margin-bottom: 10px;
  color: var(--pink);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
  user-select: none;
}

/* 右侧操作区：提示 / 重置 / 应用 一起顶到最右 */
.db-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px auto;
}
.db-hint {
  font-size: 0.74rem;
  color: var(--ink-2);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.db-reset {
  height: 26px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.db-reset:hover { color: var(--pink-ink); border-color: var(--pink); }

/* 应用：没改动时是灰的，选了日期才亮起来（实心渐变 = 可点） */
.db-apply {
  height: 34px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  color: #fff;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(176, 48, 89, 0.9);
  transition: transform 0.2s var(--ease), opacity 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.db-apply:not(:disabled):hover { transform: translateY(-1px); }
.db-apply:not(:disabled):active { transform: translateY(0) scale(0.98); }
.db-apply:disabled {
  background: var(--card);
  border-color: var(--card-border);
  color: var(--ink-2);
  opacity: 0.6;
  box-shadow: none;
  cursor: default;
}

/* ---------- 自绘日历弹层 ---------- */
.dp {
  /* 挂在 body 上、相对视口定位：祖先的 transform / 合成层都不会影响它 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 272px;
  padding: 12px 12px 8px;
  background: var(--popover);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 26px 50px -22px rgba(20, 12, 30, 0.6);
  /* 强制自成一个合成层：否则会被卡片（自带 transform）压到下面去 */
  transform: translateZ(0);
  animation: dpIn 0.16s var(--ease);
}
.dp.is-up { animation-name: dpInUp; }
@keyframes dpIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
@keyframes dpInUp {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.dp-month {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dp-nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}
.dp-nav:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-ink); }
.dp-nav:disabled { opacity: 0.22; cursor: default; }

.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week { margin-bottom: 2px; }
.dp-week span {
  padding: 3px 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--ink-2);
  opacity: 0.7;
}

.dp-day {
  position: relative;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.dp-day:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-ink); }
/* 区间内的日子铺一层淡粉，一眼看出选的是哪一段 */
.dp-day.is-inrange { background: var(--pink-soft); }
/* 另一头（不是当前正在选的那端）用淡粉 + 粉字标出来 */
.dp-day.is-edge { background: var(--pink-soft); color: var(--pink-ink); font-weight: 700; }
.dp-day.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--pink-strong);
}
.dp-day.is-sel {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 16px -10px rgba(176, 48, 89, 0.9);
}
.dp-day.is-sel::after { background: #fff; }
/* 相邻月份的日子：只作参照，不可点 */
.dp-day.is-out { color: var(--ink-2); opacity: 0.28; cursor: default; }
/* 超出「有文章」的日期区间 */
.dp-day.is-off { opacity: 0.22; cursor: default; }
.dp-day:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.dp-link {
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pink-ink);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s;
}
.dp-link:hover:not(:disabled) { background: var(--pink-soft); }
.dp-link:disabled { color: var(--ink-2); opacity: 0.4; cursor: default; }

@media (max-width: 720px) {
  .date-bar { gap: 8px; padding: 12px 14px 14px; }
  /* 窄屏：标题省掉（两个框自带「开始/结束日期」标签），字段平分一行 */
  .db-title { display: none; }
  .db-field { flex: 1 1 0; min-width: 0; }
  .db-trigger { width: 100%; padding: 0 9px; font-size: 0.82rem; }
  .db-arrow { margin-bottom: 10px; }
  .db-actions { width: 100%; margin: 2px 0 0; justify-content: flex-end; }
  .db-hint { margin-right: auto; }
  .dp { width: min(272px, calc(100vw - 40px)); }
}

@media (max-width: 980px) {
  .notes-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* 窄屏：分类栏变成横向滚动的一排胶囊 */
  .cat-rail {
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cat-title { display: none; }
  .cat-list {
    flex-direction: row;
    gap: 8px;
    margin: 0;
    padding: 2px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cat-list::-webkit-scrollbar { display: none; }
  /* 还能往右滑时右缘渐隐，滑过去了左缘也渐隐，免得胶囊像被硬生生切掉 */
  .cat-list.is-more {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .cat-list.is-prev {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
  }
  .cat-list.is-prev.is-more {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .cat-item {
    flex: 0 0 auto;
    width: auto;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--card-border);
    border-radius: 99px;
    background: var(--card);
  }
  .cat-name { overflow-wrap: normal; white-space: nowrap; }
  .cat-item em { margin-top: 0; line-height: 16px; }
  .cat-item.is-active { border-color: transparent; }
  .cat-item:not(.is-active):active { transform: none; }
}

/* 工具栏右侧：排序 / 视图切换 + 搜索 */
.tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.tool-btn:hover { color: var(--pink-ink); border-color: var(--pink); }
.tool-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  border-color: transparent;
  color: #fff;
}

/* 归档视图的年份筛选 */
.year-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toolbar .year-bar { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
.year-bar .chip em { font-style: normal; opacity: 0.6; margin-left: 3px; font-size: 0.92em; }

/* ---------- 归档视图 ---------- */
.archive { display: grid; gap: 16px; }
.arc-year {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 4px 22px 10px;
  /* 网格项的自动最小尺寸 = 内容的 min-content，行标题是 nowrap，
     会把整张卡片顶得比容器还宽（手机上尤其明显） */
  min-width: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.arc-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.arc-head em { font-style: normal; font-size: 0.76rem; font-weight: 600; color: var(--ink-2); }
.arc-list { list-style: none; margin: 0; padding: 0; }
.arc-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 8px;
  border-top: 1px dashed var(--card-border);
  border-radius: 10px;
  color: var(--ink);
  transition: background-color 0.2s, color 0.2s;
}
.arc-list li:first-child .arc-row { border-top: 0; }
.arc-row:hover { background: var(--pink-soft); color: var(--pink-ink); }
.arc-date {
  flex: 0 0 auto;
  width: 44px;
  font-size: 0.8rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.arc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-tags { flex: 0 0 auto; font-size: 0.76rem; color: var(--ink-2); }
@media (max-width: 720px) {
  .arc-tags { display: none; }
  /* 手机上标题被截成"元信息、图片…"太憋屈：允许折两行，日期仍占左边一列 */
  .arc-row { padding: 11px 6px; }
  .arc-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .arc-year { padding: 4px 14px 8px; }
}

/* 标签栏：单行横向滚动。
   标签数量会随文章增长，换行会把文章列表越推越低；改成一行可横拖，
   高度恒定，多到几十个也不影响版面。溢出时才淡出右边缘提示「还有更多」 */
.tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  /* flex-basis 必须是 0：用 auto 时内容宽度会把搜索框挤到下一行，标签一多工具栏就变高 */
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;              /* 给 chip 的上浮与阴影留空间，否则会被裁掉 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tags::-webkit-scrollbar { display: none; }
.tags.is-overflowing { cursor: grab; }
.tags.is-dragging { cursor: grabbing; }
.tags.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.tags.is-overflowing.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
}

.chip {
  /* 行高与边框都用整数像素：normal 的行高约 18.2px、边框 1.2px，
     两者都带小数，在 125% 这类非整数缩放下会被取整到一边，
     文字就往下偏 1px。改成 18px + 1px 后高度正好 30px，各缩放比下都居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 上下不等：中文字形的视觉重心略低于几何中心（全的底横、部的右耳旁都压在下半），
     几何居中看起来反而偏低，所以上 4 下 6 做一点光学修正，总高仍是 30px */
  padding: 4px 14px 6px;
  border-radius: 99px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  /* 标签永远不换行、不被压缩：否则在窄容器里会被挤成 "#" / "Markdown" 两截 */
  white-space: nowrap;
  flex: 0 0 auto;
}
.chip:hover { border-color: var(--pink); color: var(--pink-strong); transform: translateY(-1px); }
.chip.is-active {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(176, 48, 89, 0.5);
}

/* 草稿标记：只在本地预览出现，部署后自动消失 */
.chip-draft {
  border-style: dashed;
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: default;
  pointer-events: none;
}
.chip-draft:hover { border-color: var(--gold); color: var(--gold); transform: none; }
.post-meta .chip-draft { background: rgba(255, 255, 255, 0.16); }

.search {
  padding: 9px 18px;
  border-radius: 99px;
  border: 1.2px solid var(--card-border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.9rem;
  outline: none;
  width: 240px;
  flex: 0 0 auto;
  transition: border-color 0.25s, box-shadow 0.25s;
}
/* 聚焦时不再改变宽度：那会把左侧标签整排推一下，属于无谓的布局抖动 */
.search:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }
.search::placeholder { color: var(--ink-2); }

/* ---------- 文章卡片 ---------- */
.grid {
  display: grid;
  /* 280 而不是 300：宽屏卡片列定在 900，三列要 3×280+2×22 = 884 才放得下 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* 卡片入场由外层包裹元素承载：.card 的 transform 只服务于悬停上浮与 3D 倾斜。
   透明度与位移由 JS 每帧按滚动位置写入（见 paintReveal），这里只保留初始隐藏态，
   不加 transition——否则每帧写入的值又被过渡平滑一次，反而拖慢 */
.card-wrap { opacity: 0; translate: 0 16px; min-width: 0; }
.card-wrap > .card { height: 100%; }

.card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  /* 上浮交给独立 translate（CSS 过渡），倾斜交给 transform（由 JS 每帧插值，故不设过渡），
     两者分开后既不会互相覆盖，也不会因为 transform 上的过渡而发黏 */
  translate: 0 var(--ty, 0);
  transform: perspective(720px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: translate 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
.card:hover {
  --ty: -7px;
  box-shadow: var(--shadow), 0 0 28px -8px rgba(242, 113, 156, 0.4);
  border-color: var(--pink);
}

/* 指针离开卡片时临时恢复 transform 过渡，让倾斜角度平滑归零（平时靠 JS 逐帧插值） */
.card.is-settling {
  transition: translate 0.45s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.45s var(--ease), border-color 0.3s;
}

/* 悬停时一道柔光斜扫过卡片 */
/* 悬停时掠过卡片的那道白光（暂时停用，想恢复就把这段注释放开） */
/*
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 48%, transparent 64%);
  transform: translateX(-110%);
  transition: transform 0.85s var(--ease);
  pointer-events: none;
}
html[data-theme="night"] .card::before {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.09) 48%, transparent 64%);
}
.card:hover::before { transform: translateX(110%); }
*/

/* 卡片角落的樱花水印 */
.card::after {
  content: "❀";
  position: absolute;
  right: 14px;
  top: 8px;
  font-size: 1.6rem;
  color: var(--pink);
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
  transition: all 0.4s var(--ease);
}
.card:hover::after { opacity: 0.5; transform: scale(1) rotate(0); }

.card-link { display: flex; flex-direction: column; padding: 24px 24px 20px; height: 100%; color: inherit; }

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.card-meta .dot { opacity: 0.5; }

.card-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 10px 0 8px;
  line-height: 1.45;
  transition: color 0.25s;
}
.card:hover .card-title { color: var(--pink-strong); }

.card-excerpt {
  color: var(--ink-2);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* 标签多了不能把「阅读全文」挤出去：超出的标签裁掉，右侧入口保持完整 */
.card-foot .chip-row {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-go { flex: 0 0 auto; }
.card-foot .chip { padding: 3px 11px; font-size: 0.78rem; line-height: 15px; pointer-events: none; }
.card-go {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink-strong);
  white-space: nowrap;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
.card:hover .card-go { transform: translateX(6px); }

.empty {
  text-align: center;
  padding: 70px 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
/* 空状态给一个出口：分类/关键词筛空时不必自己回头找「全部」 */
.grid > .empty { grid-column: 1 / -1; }   /* 别被 auto-fill 挤成 300px 的一格 */
.empty-actions { margin-top: 18px; }
.empty-actions .chip { letter-spacing: 0.04em; }

/* ---------- 关于 ---------- */
.about-box {
  position: relative;
  display: flex;
  gap: 34px;
  align-items: center;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 26px;
  padding: clamp(28px, 5vw, 52px);
  overflow: hidden;
}
.about-box::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 190px; height: 190px;
  background-image: radial-gradient(var(--pink) 1.4px, transparent 1.4px);
  background-size: 13px 13px;
  opacity: 0.22;
  transform: rotate(8deg);
}

.avatar {
  flex: 0 0 auto;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-soft), #fff);
  border: 3px solid var(--pink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
html[data-theme="night"] .avatar { background: linear-gradient(135deg, var(--pink-soft), var(--bg-2)); }
.avatar svg { width: 64px; height: 64px; }

.about-text h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.about-text p { color: var(--ink-2); font-size: 0.98rem; }

/* ---------- 提示块 :::tip … ::: ---------- */
.admonition {
  margin: 1.3em 0;
  padding: 13px 18px 15px;
  border-left: 3px solid var(--adm, #5a96ff);
  border-radius: 6px 14px 14px 6px;
  background: color-mix(in srgb, var(--adm, #5a96ff) 8%, transparent);
  font-size: 0.97em;
}
.admonition > *:first-child { margin-top: 0; }
.admonition > *:last-child { margin-bottom: 0; }
.adm-title {
  margin: 0 0 6px;
  color: var(--adm, #5a96ff);
  font-weight: 700;
  font-size: 0.84em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adm-note { --adm: #5a96ff; }
.adm-tip { --adm: #3fbf8f; }
.adm-important { --adm: #9b6cf0; }
.adm-warning { --adm: #e59a2f; }
.adm-caution { --adm: #ef5f6b; }

/* ---------- 图片灯箱 ---------- */
/* 正文里的图默认显示放大镜光标，点一下铺满全屏 */
.article-body img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
  background: rgba(10, 8, 18, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
  transform: scale(0.96);
  transition: transform 0.2s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
/* 放大到原始尺寸：容器可滚，图片顶到左上角 */
.lightbox.is-zoomed { overflow: auto; padding: 0; align-items: flex-start; justify-content: flex-start; }
.lightbox.is-zoomed img {
  max-width: none;
  max-height: none;
  border-radius: 0;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.lightbox.is-zoomed img:active { cursor: grabbing; }
/* 放大后给个提示，免得不知道还能还原 */
.lightbox-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.lightbox.is-zoomed .lightbox-hint { opacity: 1; }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
/* 灯箱打开时锁住页面滚动 */
html.lightbox-open { overflow: hidden; }

/* ---------- 页脚 ---------- */
.footer {
  /* 顶部留白原本 90 + 170，滚到底时会露出一大块空白；
     收成 30 + 104，既保留渐变过渡的空间，又不至于空出一屏 */
  margin-top: 30px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(24, 18, 34, 0) 0%,
    rgba(24, 18, 34, 0.06) 26%,
    rgba(24, 18, 34, 0.2) 48%,
    rgba(24, 18, 34, 0.42) 72%,
    rgba(24, 18, 34, 0.76) 100%
  );
  color: #f4e9f1;
  text-align: center;
  padding: 104px 24px 46px;
}
html[data-theme="night"] .footer {
  background: linear-gradient(
    180deg,
    rgba(15, 11, 26, 0) 0%,
    rgba(15, 11, 26, 0.08) 26%,
    rgba(15, 11, 26, 0.26) 48%,
    rgba(15, 11, 26, 0.5) 72%,
    rgba(15, 11, 26, 0.85) 100%
  );
}

.footer::before {
  content: "サクラ";
  position: absolute;
  left: 50%;
  bottom: -0.32em;
  transform: translateX(-50%);
  font-family: var(--font-jp);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 182, 205, 0.13);
  white-space: nowrap;
  pointer-events: none;
}

.footer-divider { font-size: 1.3rem; color: #ffb6cd; letter-spacing: 1.2em; text-indent: 1.2em; margin-bottom: 22px; text-shadow: 0 1px 10px rgba(24, 18, 34, 0.7); }
.footer p { position: relative; font-size: 0.9rem; opacity: 0.88; text-shadow: 0 1px 10px rgba(24, 18, 34, 0.7); }
.footer a { color: #ffb6cd; }
.footer a:hover { color: #ffd3e2; }
.footer .footer-jp { margin-bottom: 8px; font-family: var(--font-jp); letter-spacing: 0.3em; font-size: 0.8rem; opacity: 0.6; }

/* ---------- 滚动浮现 ----------
   用独立的 translate 属性承载位移，把 transform 完整留给悬停/倾斜。
   同样由 JS 每帧按位置写入，CSS 只负责初始隐藏 */
.reveal { opacity: 0; translate: 0 16px; }

/* ==========================================================
   文章页
   ========================================================== */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 110;
  background: transparent;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pink), var(--sky));
  border-radius: 0 99px 99px 0;
}

.post-hero {
  position: relative;
  min-height: clamp(340px, 46vh, 480px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  /* front matter 里写了 cover 时，post.js 会把它设为局部背景 */
  background-size: cover;
  background-position: center;
}
.post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 顶部稍深保证标题可读，向下完全渐隐，与页面自然衔接 */
  background: linear-gradient(
    180deg,
    rgba(24, 18, 34, 0.38) 0%,
    rgba(24, 18, 34, 0.22) 52%,
    rgba(24, 18, 34, 0) 100%
  );
}

.post-hero-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(96px, 15vh, 152px) 24px 48px;
  color: #fff;
}
.post-kicker {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 18px;
}
.post-crumb { margin-bottom: 20px; font-size: 0.94rem; }
/* 文章页唯一的"回到列表"入口，做成醒目的胶囊：
   半透明底 + 描边 + 加粗，压在头图上也读得清 */
.post-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  background: rgba(24, 18, 34, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  border-radius: 99px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.post-crumb a:hover {
  background: rgba(24, 18, 34, 0.5);
  border-color: rgba(255, 157, 192, 0.75);
  transform: translateY(-1px);
}
/* 夜樱下头图本身很暗，深色底会糊成一片，换成浅色玻璃 */
html[data-theme="night"] .post-crumb a {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
}
html[data-theme="night"] .post-crumb a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 157, 192, 0.8);
}

#postTitle {
  font-family: var(--font-display);
  /* 收小一档、字距收紧，常见的十几个字标题就能压在一行里 */
  font-size: clamp(1.7rem, 4.1vw, 2.55rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
  word-break: break-word;
  /* 折行时均分两行，避免末行只剩一个字 */
  text-wrap: balance;
}
.post-title-bar {
  width: 76px;
  height: 4px;
  border-radius: 99px;
  margin: 20px auto 18px;
  background: linear-gradient(90deg, var(--pink), var(--sky), var(--pink));
  background-size: 200% 100%;
  box-shadow: 0 2px 10px rgba(232, 91, 138, 0.45);
  animation: barflow 3.2s linear infinite;
}
@keyframes barflow { to { background-position: 200% 0; } }

.post-meta {
  margin: 0 auto;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  max-width: 100%;
  /* 头图是视频，白字直接压上去的对比度会随画面剧烈波动（实测最低 1.87:1），
     给整条信息加一层深色玻璃底，任何一帧上都读得清 */
  background: rgba(24, 18, 34, 0.52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 9px 18px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.post-meta .dot { opacity: 0.55; }
.post-meta .chip {
  pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  padding: 3px 12px;
  line-height: 15px;
  text-shadow: none;
}

/* 正文容器 */
.post-wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 0;
  position: relative;
}

.article {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 56px);
  font-size: 1.02rem;
  line-height: 1.95;
  word-break: break-word;
}

/* --- 文章排版 --- */
.article > *:first-child { margin-top: 0; }
.article h1, .article h2, .article h3, .article h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin: 1.9em 0 0.7em;
}
/* 锚点跳转时给固定导航留出偏移，否则标题会藏在导航栏后面 */
.article h2, .article h3 { scroll-margin-top: 88px; }
.article h2 { font-size: 1.5rem; padding-left: 16px; border-left: 4px solid var(--pink); }
.article h3 { font-size: 1.2rem; }
.article h3::before { content: "❀ "; color: var(--pink); font-size: 0.85em; }
.article h4 { font-size: 1.05rem; color: var(--ink-2); }

.article p { margin: 0.9em 0; }
.article a { border-bottom: 1.5px solid transparent; transition: border-color 0.2s; }
.article a:hover { border-color: var(--pink); }

.article strong { color: var(--pink-strong); }

.article ul, .article ol { padding-left: 1.6em; margin: 0.9em 0; }
.article li { margin: 0.35em 0; }
.article li::marker { color: var(--pink); }

.article blockquote {
  margin: 1.2em 0;
  padding: 14px 22px;
  border-left: 4px solid var(--pink);
  border-radius: 0 14px 14px 0;
  background: var(--pink-soft);
  color: var(--ink);
  opacity: 0.95;
}

.article code {
  background: var(--pink-soft);
  color: var(--pink-strong);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.88em;
  font-family: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
}
.article pre {
  background: #2a2139;
  color: #f3e9f5;
  padding: 18px 22px;
  border-radius: 14px;
  overflow-x: auto;
  margin: 1.2em 0;
  font-size: 0.88rem;
  line-height: 1.7;
  box-shadow: var(--shadow);
}
.article pre code { background: transparent; color: inherit; padding: 0; }

.article img {
  border-radius: 14px;
  margin: 1.2em auto;
  display: block;
  box-shadow: 0 12px 30px -12px rgba(67, 48, 62, 0.35);
}

.article hr {
  border: 0;
  height: 2px;
  margin: 2.2em auto;
  width: 60%;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  position: relative;
}
.article hr::after { content: "❀"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); color: var(--pink); background: transparent; font-size: 0.9rem; padding: 0 10px; }

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.92rem;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid var(--card-border);
}
.article th {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-deep-2));
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
}
.article td { padding: 9px 14px; border-top: 1px solid var(--line); }
.article tr:nth-child(even) td { background: var(--pink-soft); opacity: 0.65; }

.article input[type="checkbox"] { accent-color: var(--pink); margin-right: 6px; }

/* --- 文章底部 --- */
.post-foot {
  max-width: 880px;
  margin: 26px auto 0;
  padding: 6px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.post-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
}
.post-nav a {
  flex: 0 1 330px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 18px;
  padding: 16px 20px;
  color: var(--ink);
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.post-nav a:hover { transform: translateY(-4px); border-color: var(--pink); box-shadow: var(--shadow); }
.post-nav .dir { font-size: 0.78rem; color: var(--ink-2); display: block; margin-bottom: 4px; }
.post-nav .t { font-weight: 700; font-size: 0.95rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-nav a.next { text-align: right; }

/* --- 目录 TOC（毛玻璃面板，浮在任何背景上都清晰） --- */
.toc {
  position: fixed;
  right: max(18px, calc((100vw - 1440px) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  max-height: 62vh;
  overflow-y: auto;
  font-size: 0.82rem;
  z-index: 40;
  background: var(--card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  padding: 14px 12px 10px;
  box-shadow: 0 12px 32px -20px rgba(67, 48, 62, 0.4);
  scrollbar-width: none;
  /* 目录由 JS 动态插入：纯透明度淡入（无位移），与正文同帧出现、静静浮现，
     即使插入时机略有先后也不会显得突兀 */
  animation: tocFade 0.8s ease backwards;
}
@keyframes tocFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 目录骨架：页面第一帧就占位（无入场动画），微光扫动表示正在加载 */
.toc.is-ghost { animation: none; }
.toc-line {
  height: 8px;
  margin: 8px 8px;
  border-radius: 99px;
  background: linear-gradient(100deg, var(--card-border) 30%, var(--pink-soft) 50%, var(--card-border) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
/* 骨架退场：淡出后由 JS 移除 */
.toc.is-leaving {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* 正文内容渲染后与目录同款淡入，两者同步浮现 */
.article-body { animation: tocFade 0.8s ease backwards; }
.toc::-webkit-scrollbar { display: none; }
/* 正文加宽后，1200–1400 这段侧栏空间变窄：目录收窄并贴边，避免压到文章卡片上 */
@media (max-width: 1400px) {
  .toc { width: 142px; right: 8px; font-size: 0.76rem; }
}
.toc-title { font-weight: 800; letter-spacing: 0.2em; color: var(--ink-2); margin: 0 0 8px 8px; font-size: 0.75rem; }
.toc a {
  display: block;
  color: var(--ink-2);
  padding: 4.5px 8px 4.5px 12px;
  border-left: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc a.lv3 { padding-left: 26px; }
.toc a:hover { color: var(--pink-strong); }
.toc a.active {
  color: var(--pink-strong);
  border-left-color: var(--pink);
  background: var(--pink-soft);
  font-weight: 700;
}

/* ---------- 提示气泡 ---------- */
.toast {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: rgba(42, 33, 57, 0.92);
  color: #ffe3ee;
  padding: 11px 26px;
  border-radius: 99px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease);
  z-index: 120;
  border: 1px solid rgba(255, 182, 205, 0.35);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 加载骨架 ---------- */
.skeleton {
  height: 180px;
  border-radius: 20px;
  background: linear-gradient(100deg, var(--card) 40%, var(--pink-soft) 50%, var(--card) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border: 1.5px solid var(--card-border);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 错误面板 ---------- */
.error-panel {
  text-align: center;
  padding: 90px 24px;
  color: var(--ink-2);
}
.error-panel h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin: 16px 0 10px; }
.error-panel .big { font-size: 3rem; }

/* ---------- 响应式 ---------- */
@media (max-width: 920px) {
  .hero-side { display: none; }
  .toc { display: none; }
}

@media (max-width: 720px) {
  .nav-links a:not(.nav-keep) { display: none; }
  .section { padding: 72px 18px 10px; }  .search { width: 100%; }
  .search:focus { width: 100%; }
  .post-nav { grid-template-columns: 1fr; }
  .about-box { flex-direction: column; text-align: center; }
  .toolbar { flex-direction: column; align-items: stretch; }
  /* 窄屏：当前分类名省掉（胶囊已经高亮了），排序和搜索并排一行 */
  .cat-current { display: none; }
  /* 「清除筛选」在窄屏也省掉：胶囊就在上面，点「全部」一步到位 */
  .filter-clear { display: none; }
  .tools { flex-wrap: nowrap; width: 100%; }
  .tools .search { flex: 1 1 auto; width: auto; min-width: 0; }
  .grid { grid-template-columns: 1fr; }

  /* 文章页：手机上去掉卡片「框」——左右不留缝、无边框无圆角，
     正文变成整幅通栏（390 屏约 358px / 92%）。
     底色仍保留：正文压在背景视频上，没有这层就没法读 */
  .post-wrap { padding: 16px 0 0; }
  .article {
    padding: 20px 16px 26px;
    border: none;
    border-radius: 0;
  }
}

/* 手机导航：四个链接 + 主题按钮在 390 宽就会顶出屏幕（实测右边缘到 412），
   收紧内边距和间距，把主题按钮留在视野内 */
@media (max-width: 560px) {
  .nav { padding: 0 12px; }
  .nav-logo { gap: 6px; }
  .nav-logo span { font-size: 0.98rem; }
  .nav-links { gap: 0; }
  .nav-links a, .nav-links button { padding: 7px 9px; font-size: 0.88rem; }
  .nav-links a::after { left: 9px; right: 9px; }
}

/* 再窄（320/360）就只剩花标，否则标题 + 四个链接 + 按钮排不下 */
@media (max-width: 380px) {
  .nav-logo span { display: none; }
  .nav-links a, .nav-links button { padding: 7px 8px; font-size: 0.84rem; }
  .nav-links a::after { left: 8px; right: 8px; }
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .card-wrap { opacity: 1; translate: none; }
  #bgVideo { display: none; }
}

/* ---------- 跨页过渡：首页 ⇄ 文章页的淡入淡出（Chromium 系浏览器生效，其余平滑降级为直接切换） ---------- */
@view-transition { navigation: auto; }

/* 昼夜切换的圆形扩散：只在这一瞬间接管 root 的快照动画。
   不能全局写 animation:none，否则会把上面跨页的默认淡入淡出一并吃掉 */
html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.theme-switching::view-transition-old(root) { z-index: 1; }
html.theme-switching::view-transition-new(root) { z-index: 2; }

/* 切主题这一瞬间把所有颜色过渡关掉。
   全站有 40 多条 transition（背景色/描边/文字色，0.25~0.5s），切主题时它们会同时起跑，
   而此刻页面正被 ::view-transition 的快照盖住——这些过渡一帧都看不见，纯属白烧 CPU。
   实测（4 倍降速 + DPR 3 的手机模拟）：不关时 60 帧里有 15 帧超过 20ms，关掉后只剩 3 帧 */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* ---------- 文章页入场：头图与正文轻微上浮淡入（复用 rise 关键帧） ---------- */
.post-hero-inner { animation: rise 0.7s var(--ease) backwards; }
.post-wrap { animation: rise 0.7s var(--ease) 0.08s backwards; }

@media (prefers-reduced-motion: reduce) {
  .post-hero-inner, .post-wrap { animation: none; }
}

/* ---------- 背景视频出处链接卡片（关于页） ---------- */
.video-credit {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 26px;
  padding: 24px 30px;
  margin-top: 26px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s;
}
.video-credit:hover {
  transform: translateY(-5px);
  border-color: var(--pink);
  box-shadow: var(--shadow);
}
.vc-icon {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pink-soft), #fff);
  border: 2px solid var(--pink);
  color: var(--pink-strong);
}
html[data-theme="night"] .vc-icon { background: linear-gradient(135deg, var(--pink-soft), var(--bg-2)); }
.vc-icon svg { width: 34px; height: 34px; }
.vc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vc-text b { font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; letter-spacing: 0.03em; }
.vc-text i { font-style: normal; color: var(--ink-2); font-size: 0.92rem; }
.vc-go { flex: 0 0 auto; color: var(--pink-strong); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 640px) {
  .video-credit { gap: 14px; padding: 20px 22px; }
  .vc-icon { width: 52px; height: 52px; border-radius: 15px; }
  .vc-icon svg { width: 28px; height: 28px; }
  .vc-go { display: none; }
}

/* ---------- 文章内嵌视频：B站 iframe / 本地 video 自动铺满 16:9 ---------- */
.article iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 16px;
  background: #000;
  margin: 6px 0;
}
.article video {
  display: block;
  width: 100%;
  border-radius: 16px;
  background: #000;
}