:root{
  interpolate-size:allow-keywords;
  --bg:#eef0f4;
  --card:#ffffff;
  --card-2:#f6f7f9;
  --text:#1f2328;
  --muted:#6b7280;
  --border:#e6e8eb;
  --accent:#4f46e5;
  --accent-soft:#eef0ff;
  --track:#b9cdf0;
  --code-bg:#f2f3f6;
  --shadow:0 12px 40px rgba(20,20,40,.08);
  --radius:12px;
  --maxw:1180px;
  --page-pad:clamp(6px,2.2vw,28px);
  --card-gap:clamp(6px,1.6vw,16px);
  --post-gap:.5rem;
  --bg-soft:#f6f7f9;
}
[data-theme="dark"]{
  --bg:#0c0f14;
  --card:#141a21;
  --card-2:#1b232c;
  --text:#e6edf3;
  --muted:#8b98a5;
  --border:#2a333d;
  --accent:#8b9bff;
  --accent-soft:rgba(139,155,255,.18);
  --track:#a9c0ee;
  --code-bg:#1c252f;
  --bg-soft:#1b232c;
  --shadow:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.7;
  font-size:16px;
}
.viewport{container-type:inline-size;width:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center}
a{color:inherit;text-decoration:none}
/* 全站文字默认不加粗：覆盖 h1–h6、strong/b 及所有组件（天气/评论/标签/计数等），
   手机与电脑一致生效。个别确需加粗处请用 font-weight:600 !important 单独声明 */
*,*::before,*::after{font-weight:400 !important}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{line-height:1.3}

.page{
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  background:var(--card);
  border-radius:28px;
  height:calc(100dvh - 2 * clamp(14px,3vw,42px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.page-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;scroll-behavior:smooth}
.page-scroll::-webkit-scrollbar{display:none}
.main{padding:var(--page-pad)}

.site-header{
  display:flex;align-items:center;gap:16px;
  padding:clamp(13px,1.7vw,19px) var(--page-pad);
  background:linear-gradient(to top,
    transparent 0%,
    transparent 30%,
    color-mix(in srgb, var(--card) 45%, transparent) 80%,
    color-mix(in srgb, var(--card) 70%, transparent) 100%);
  position:sticky;top:0;z-index:30;
  transition:transform .3s ease;will-change:transform;
}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 85%);
  mask-image:linear-gradient(to top, transparent 0%, #000 85%);
}
.brand{font-size:20px;letter-spacing:.5px;white-space:nowrap}
.brand::before{content:"";display:inline-block;width:34px;height:34px;background:url("/logo.png") center/contain no-repeat;margin-right:8px;vertical-align:middle}
.nav{
  display:flex;gap:6px;margin-left:auto;align-items:center;
  background:var(--card-2);border:1px solid var(--border);
  border-radius:999px;padding:4px;
}
.nav-inline{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.nav-inline a{position:relative;z-index:0;display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;color:var(--muted);font-size:13px;transition:color .15s;white-space:nowrap}
.nav-inline a::before{content:"";position:absolute;inset:0;border-radius:999px;background:transparent;transform:scale(1);transform-origin:center;transition:background .15s,transform .15s;z-index:-1;pointer-events:none}
.nav-inline a.active{color:var(--accent)}
.nav-inline a.active::before{background:var(--accent-soft);transform:scale(.9)}

.nav-more{display:none;position:relative}
.nav-more-btn{
  list-style:none;cursor:pointer;user-select:none;
  height:var(--icon-btn,40px);padding:0 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--card-2);color:var(--text);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-family:inherit;font-size:14px;line-height:1;margin:0;
}
/* 汉堡菜单（Uiverse by JulanDeAlb，配色改主题色、尺寸适配） */
.hamburger{cursor:pointer;display:inline-flex;pointer-events:none}
.hamburger input{display:none}
.hamburger svg{height:1.5em;width:1.5em;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hamburger .line{fill:none;stroke:var(--text);stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.hamburger .line-top-bottom{stroke-dasharray:12 63}
.nav-more.is-open .hamburger svg{transform:rotate(-45deg)}
.nav-more.is-open .hamburger svg .line-top-bottom{stroke-dasharray:20 300;stroke-dashoffset:-32.42}
.nav-more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-dropdown{
  display:grid;position:absolute;right:0;top:calc(100% + 8px);
  padding:10px;grid-template-columns:repeat(4,auto);gap:8px 6px;
  width:max-content;max-width:85vw;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow);z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);
  transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.nav-more.is-open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity .18s ease,transform .18s ease,visibility 0s}
.nav-dropdown a{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;color:var(--muted);font-size:13px;background:var(--card-2);border:1px solid var(--border);white-space:nowrap;transition:background .15s,color .15s}
html.can-hover .nav-dropdown a:hover{background:var(--border);color:var(--text)}
.nav-dropdown a.active{background:var(--accent-soft);color:var(--accent)}

@container (max-width: 820px){
  .nav-inline{display:none}
  .nav-more{display:block}
  .nav{background:none;border:none;padding:0}
  .site-header{padding:9px var(--page-pad);gap:10px;--icon-btn:34px}
  .brand{font-size:16px}
  .brand::before{width:28px;height:28px;margin-right:6px}
  .theme-toggle svg{width:17px;height:17px}
  .nav-more-btn{padding:0 12px;font-size:13px}
}
.theme-toggle{width:var(--icon-btn,40px);height:var(--icon-btn,40px);border-radius:50%;border:1px solid var(--border);background:var(--card-2);color:var(--text);cursor:pointer;display:grid;place-items:center}
.theme-toggle svg{width:20px;height:20px;stroke-width:1.3}
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:inline-block}

/* home-head 用 grid 布局：
   手机 illust 上 / brand 中 / home-cards（含热力图+最近日记，横向 snap 切换）下；
   desktop brand 跨列1-2 在上 / home-cards 在第二行（内部 grid 两列横排）/ illust 右整列。
   断点由 layouts/partials/head.html 在首帧前同步注入 html[data-breakpoint] */
.home-head{
  margin-bottom:10px;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"illust" "brand" "cards" "dots";
  gap:14px
}
.home-head .home-brand{grid-area:brand;display:flex;align-items:center;gap:12px}
.home-head .home-illust{grid-area:illust;width:100%;max-width:min(360px,60vw);height:auto;flex:none;align-self:center;margin:0 auto;animation:fadeIn .5s ease backwards;animation-delay:.15s}
.home-head .home-cards{grid-area:cards}

/* 首页卡片圆点指示器（苹果分页风：药丸容器 + 线条圆点，active 拉长成粗药丸）
   位于 .home-cards 外部；由 .home-dots-row 包裹，手机靠右、桌面隐藏 */
.home-dots-row{
  grid-area:dots;
  margin-top:-6px;
  display:flex;justify-content:flex-start;align-items:center
}
/* 手机：随机按钮 + 天气靠左，圆点指示器推到最右 */
.home-dots-row .home-cards-dots{margin-left:auto}
.home-cards-dots{
  display:flex;justify-content:center;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 6px color-mix(in srgb,var(--fg) 14%,transparent)
}
.hcdot{
  -webkit-appearance:none;appearance:none;border:none;padding:0;margin:0;cursor:pointer;
  width:6px;height:6px;border-radius:999px;
  background:color-mix(in srgb,var(--muted) 45%,transparent);
  transition:width .3s cubic-bezier(.4,0,.2,1);
  flex:none;touch-action:manipulation
}
.hcdot:active,
.hcdot:focus-visible{outline:none;background:color-mix(in srgb,var(--muted) 45%,transparent)}
.hcdot.is-active{
  width:18px;
  background:color-mix(in srgb,var(--accent) 55%,transparent)
}

/* 随机文章按钮 */
.home-random{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);
  background:var(--card);transition:color .2s,border-color .2s;
  flex:none;text-decoration:none;gap:5px
}
.home-random svg{width:14px;height:14px}
.home-random span{font-size:12px}
html.can-hover .home-random:hover{color:var(--text);border-color:var(--text)}
/* 手机端：brand 内的随机按钮隐藏，仅在 dots-row 左侧显示 */
.hrb-brand{display:none}

/* 手机：home-cards 横向滑动 + snap，两张卡片各占满宽度，轻滑切换一张，不撑开页面 */
.home-cards{
  display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  gap:14px
}
.home-cards::-webkit-scrollbar{display:none}
.home-cards > .home-footprints,
.home-cards > .home-recent{
  scroll-snap-align:start;scroll-snap-stop:always;
  flex:none;width:100%;min-width:0
}

html[data-breakpoint="desktop"] .home-head{
  margin-bottom:26px;
  /* 第一列固定宽度：避免 auto 取 grid item 内部 max-content（footprint-grid 是 max-content ≈634px）
     撑大列宽。第三列 illust 固定。中间 cards 跨列1-2 */
  grid-template-columns:min(440px,32vw) minmax(0,1fr) clamp(200px,22vw,340px);
  grid-template-areas:"brand brand illust" "cards cards illust";
  align-items:center;gap:18px 28px
}
html[data-breakpoint="desktop"] .home-head .home-illust{width:100%;max-width:none;align-self:center;margin-right:clamp(40px,8vw,120px)}
html[data-breakpoint="desktop"] .home-head .home-brand{align-self:end}
/* desktop: cards 改 grid 两列横排，不滑动；footprint 固定列宽，recent 占剩余 */
html[data-breakpoint="desktop"] .home-cards{
  display:grid;
  grid-template-columns:min(440px,32vw) minmax(0,1fr);
  overflow:visible;gap:28px
}
html[data-breakpoint="desktop"] .home-cards > .home-footprints,
html[data-breakpoint="desktop"] .home-cards > .home-recent{
  width:auto;align-self:stretch
}
/* 桌面端两卡并排全显示，隐藏圆点指示器行（含随机按钮、圆点）且不占布局 */
html[data-breakpoint="desktop"] .home-dots-row{display:none}
/* 桌面：brand 内的随机按钮显示，推到右侧 */
html[data-breakpoint="desktop"] .hrb-brand{display:inline-flex;align-self:end;margin-left:12px}

/* 天气药丸：紧随随机文章按钮右侧；桌面用 hw-brand，手机用 hw-dots */
.home-weather{position:relative;display:none;flex:none}
/* 手机：hw-dots 用 inline-flex 确保宽度紧贴内容，margin-left 固定与随机按钮的间距（与桌面一致 4px） */
.hw-dots{display:inline-flex;margin-left:6px}
html[data-breakpoint="desktop"] .hw-dots{display:none}
html[data-breakpoint="desktop"] .hw-brand{display:inline-flex;align-self:end;margin-left:2px}

.hw-pill{
  display:inline-flex;align-items:center;justify-content:flex-start;
  height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);
  background:var(--card);cursor:pointer;
  flex:none;gap:5px;white-space:nowrap;transition:color .2s,border-color .2s,background .2s,width .15s cubic-bezier(.4,0,.2,1);
  -webkit-appearance:none;appearance:none;font:inherit;overflow:hidden
}
/* 切换时只 fade 子元素（文字/图标），药丸框（边框/背景）保持不变 */
.hw-pill > *{transition:opacity .1s}
.hw-pill.is-swapping > *{opacity:0}
.hw-pill svg{width:14px;height:14px;flex:none}
.hw-temp{font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.hw-text{font-size:12px;color:var(--muted)}
.hw-city{font-size:12px}
html.can-hover .hw-pill:hover{color:var(--text);border-color:var(--text)}
.home-weather.is-open .hw-pill{color:var(--text);border-color:var(--text);background:var(--card-2)}
.home-weather.is-error .hw-city{opacity:.6}

/* 加载中：文字逐字波浪淡入淡出（复用 aiWave 动画，与 AI 总结同款） */
.hw-loading-text{font-size:12px;color:var(--muted)}
.hw-loading-text .ai-ch{animation:aiWave .9s ease-in-out infinite;animation-delay:calc(var(--i) * .03s)}

/* 点击展开的 3 天预报面板：统一一套定位，兼容手机/电脑
   left:0 让面板左边缘对齐药丸左边缘、向右展开，避免手机端右侧被截断
   显示/收回用 transition 双向过渡：opacity + 轻微上移 + 轻微缩放 */
.hw-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:240px;max-width:min(320px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
  box-shadow:0 8px 30px color-mix(in srgb,var(--fg) 20%,transparent);
  opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top left;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1);
  pointer-events:none
}
.home-weather.is-open .hw-panel{opacity:1;transform:none;pointer-events:auto}
.hw-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hw-head strong{font-size:13px;font-weight:600;color:var(--text);margin-right:auto}
.hw-update{font-size:10px;color:var(--muted);white-space:nowrap}
.hw-refresh{
  flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:none;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:4px;-webkit-appearance:none;appearance:none
}
.hw-refresh svg{width:14px;height:14px;display:block;transform-box:fill-box;transform-origin:50% 50%;will-change:transform;-webkit-tap-highlight-color:transparent}
.hw-refresh:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hw-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hw-day{display:flex;align-items:center;gap:9px;font-size:12px}
.hw-day-label{flex:none;width:48px;display:flex;align-items:baseline;gap:3px;color:var(--text);font-weight:500}
.hw-day-label small{font-size:10px;color:var(--muted);font-weight:400}
.hw-day-ico{flex:none;display:inline-flex;color:var(--accent)}
.hw-day-ico svg{width:18px;height:18px}
.hw-day-text{flex:1 1 auto;min-width:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-day-temps{flex:none;color:var(--text);font-variant-numeric:tabular-nums;font-size:12px}
/* 卡片底部行：左下位置图标+城市名，右下数据来源图片 */
.hw-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.hw-loc{display:inline-flex;align-items:center;gap:3px;border:none;background:none;cursor:pointer;padding:0;font-size:11px;color:var(--muted);transition:color .2s;flex:none}
.hw-loc svg{width:14px;height:14px;flex:none}
html.can-hover .hw-loc:hover{color:var(--text)}
.hw-src{display:flex;align-items:center;gap:0;font-size:10px;color:var(--muted);text-decoration:none;flex:none}
html.can-hover .hw-src:hover{color:var(--accent)}

/* 视图切换：天气视图 ↔ 城市选择视图 */
.hw-view[hidden]{display:none}
/* 城市选择视图 */
.hw-view-city{display:flex;flex-direction:column;gap:8px}
.hw-city-bar{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--text)}
.hw-city-back{border:none;background:none;cursor:pointer;padding:0;display:inline-flex;color:var(--muted);transition:color .2s}
.hw-city-back svg{width:16px;height:16px}
html.can-hover .hw-city-back:hover{color:var(--text)}
.hw-city-input{width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--card)}
.hw-city-input:focus{outline:none;border-color:var(--accent)}
/* 小方块网格：一行多个，有边框，长名省略号 */
.hw-city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:5px;max-height:170px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.hw-city-grid[hidden]{display:none}
.hw-city-grid::-webkit-scrollbar{display:none}
.hw-city-grid .item{border:1px solid var(--border);border-radius:4px;padding:4px 2px;font-size:11px;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,border-color .15s;color:var(--text)}
html.can-hover .hw-city-grid .item:hover{background:var(--card-2);border-color:var(--accent)}
.hw-city-grid .item.active{background:var(--card-2);border-color:var(--accent)}
.hw-city-grid .item.empty{grid-column:1/-1;color:var(--muted);cursor:default;border:none;text-align:center;padding:10px}
html.can-hover .hw-city-grid .item.empty:hover{background:none;border-color:transparent}
.hw-city-reset{margin-left:auto;border:none;background:none;cursor:pointer;padding:0;font-size:11px;color:var(--accent)}
html.can-hover .hw-city-reset:hover{color:var(--text)}

.home-head .home-logo{width:80px;height:80px;object-fit:contain;border-radius:10px;flex:none}
.home-brand-text{display:flex;flex-direction:column}
.home-head h1{font-size:clamp(26px,4vw,40px);margin:0 0 4px;line-height:1.1}
.home-head p{color:var(--muted);margin:0;font-size:13px}

/* 更新足迹热力图：白底灰边卡片，53×7 网格，按文章数深浅着色 */
.home-footprints{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card-2);padding:14px 16px;min-width:0;
  animation:pageIn .5s cubic-bezier(.4,0,.2,1) backwards;animation-delay:.06s
}
.footprint-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;gap:8px}
.footprint-title strong{font-size:13px;color:var(--text);font-weight:600}
.footprint-title .footprint-sub{font-size:11px;color:var(--muted)}
/* 滚动容器必须 max-width:100% + 父级 min-width:0，否则 grid 子项会被 max-content 撑破网页 */
.footprint-wrap{max-width:100%;overflow:hidden}
.footprint-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.footprint-scroll::-webkit-scrollbar{display:none}
/* chart 用 grid 2×2：左上空 / 右上月份标签 / 左下星期标签(sticky 固定) / 右下网格。
   grid 自动对齐行，星期标签和网格在同一行(row2)，行高一致，无需 margin-top hack */
.footprint-chart{
  display:grid;
  grid-template-columns:auto max-content;
  grid-template-rows:auto max-content;
  gap:3px 4px;
  width:max-content
}
.footprint-axis-x{
  grid-column:2;grid-row:1;
  display:grid;grid-template-columns:repeat(53,10px);gap:2px;
  height:12px;font-size:9px;color:var(--muted);line-height:1
}
.footprint-axis-x span{white-space:nowrap}
.footprint-axis-y{
  grid-column:1;grid-row:2;
  /* sticky:left:0 让星期标签横向滚动时固定在左侧，不跟随网格滑走 */
  position:sticky;left:0;
  display:grid;grid-template-rows:repeat(7,10px);gap:2px;
  font-size:9px;color:var(--muted);line-height:1;width:10px;
  /* background 遮住从下方滚过的网格；padding-right+margin-right 让背景覆盖到列间隙 */
  background:var(--card-2);padding-right:4px;margin-right:-4px;
  z-index:1
}
.footprint-axis-y span{display:flex;align-items:center;white-space:nowrap}
.footprint-grid{
  grid-column:2;grid-row:2;
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(7,10px);grid-auto-columns:10px;gap:2px;
  width:max-content
}
.footprint-cell{
  width:10px;height:10px;border-radius:2px;display:inline-block;
  background:color-mix(in srgb,var(--border) 35%,transparent);
}
.footprint-cell[data-empty="true"]{background:transparent}
.footprint-cell[data-level="0"]{background:color-mix(in srgb,var(--border) 35%,transparent)}
.footprint-cell[data-level="1"]{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.footprint-cell[data-level="2"]{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.footprint-cell[data-level="3"]{background:color-mix(in srgb,var(--accent) 78%,transparent)}
.footprint-cell[data-level="4"]{background:var(--accent)}
.footprint-legend{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:11px;color:var(--muted);margin-top:10px
}
/* 自定义滑动进度条：拖动控制热力图横向滚动，宽度 120px 不影响观看 */
.footprint-slider{
  width:120px;flex:none;
  display:flex;align-items:center;cursor:pointer;
  touch-action:none;user-select:none
}
.footprint-slider-track{
  position:relative;width:100%;height:2px;
  border-radius:999px;background:var(--border);
  cursor:pointer
}
/* thumb 是 track 内可移动的胶囊条：宽度反映可视区占比，位置随滚动移动 */
.footprint-slider-thumb{
  position:absolute;top:0;left:0;height:100%;
  min-width:24px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 55%,transparent);
  cursor:pointer
}
.footprint-legend-items{display:flex;align-items:center;gap:4px}
.footprint-legend-items .footprint-cell{width:8px;height:8px}

/* 最近日记卡片：纵向列表，一行一条，hover 整行左移 + 蓝色高亮；
   含图片的标蓝色「图片」徽标。
   手机端这张卡片与热力图一起在 .home-cards 容器内横向 snap 切换 */
.home-recent{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card-2);padding:14px 16px;
  display:flex;flex-direction:column;min-width:0;
  animation:pageIn .5s cubic-bezier(.4,0,.2,1) backwards;animation-delay:.1s
}
.recent-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:8px}
.recent-head strong{font-size:13px;color:var(--text);font-weight:600}
.recent-head .recent-more{font-size:11px;color:var(--muted);text-decoration:none}
.recent-head .recent-more:hover{color:var(--accent)}

.recent-list{list-style:none;margin:0;padding:0}
.recent-item a{
  /* 单行布局：日期 + 摘要(ellipsis) + 图片徽标，一行排开，禁止换行 */
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;
  padding:4px 0;color:inherit;text-decoration:none;
  font-size:13px;line-height:1.5
}
/* recent-top 用 display:contents 让子元素直接参与父 flex，配合 order 重排为 日期→摘要→徽标 */
.recent-top{display:contents}
.recent-date{
  order:1;color:var(--muted);font-size:12px;flex:none;width:34px;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.recent-text{
  order:2;flex:1;min-width:0;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.recent-badge{
  order:3;flex:none;font-size:10px;color:var(--accent);
  border:1px solid var(--accent);border-radius:3px;
  padding:0 4px;line-height:1.4;white-space:nowrap
}

/* 从首页「最近日记」跳转到日记列表时，高亮目标日记背景强调；
   全设备兼容终极方案：
     1. 不用伪元素/z-index/注入DOM —— 直接把背景色写在 .diary-item 自己身上
     2. 不用绝对定位溢出（会被 .diary-list 的 container-type 裁剪）
        —— 用 margin ±16px + padding ±16px 实现「内容位置不变，但元素自身左右延伸 16px」
     3. 颜色：background-color 用 color-mix 贴合主题 + rgba 硬蓝 fallback；
        渐隐完全由 JS 递减内联 style.backgroundColor 的 alpha 值，不依赖 CSS transition/keyframes
   JS 通过 history.replaceState 清 URL hash，用户始终看到干净 /diary/ */
.diary-item.diary-highlight{
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
  border-radius:8px;
  /* 默认高亮色：color-mix 主题色 18%，fallback 硬蓝 18% */
  background-color:rgba(59,130,246,.18);
  background-color:color-mix(in srgb,var(--accent) 18%,transparent)
}
/* desktop 时 diary-list 有 padding 所以 margin -16 能看到溢出；
   mobile 时 diary-list 是 max-width:100%，同样能正常溢出；
   desktop 下 diary-list 的左右留白和 mobile 一致，保持相同溢出 */
/* 兜底：如果某些浏览器不识别 margin ±16px 的溢出（极端罕见），
   用 outline 再补一层同色，保证视觉上至少有高亮背景 */
.diary-item.diary-highlight{
  outline:8px solid transparent
}

.articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,23cqw,260px),1fr));column-gap:var(--card-gap);row-gap:calc(var(--card-gap) * .25)}
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:8px}
.list-head h1{font-size:clamp(22px,3vw,30px);margin:0}
.list-head .count{color:var(--muted);font-size:14px}

.card{display:flex;flex-direction:column;background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-cover{aspect-ratio:16/10;background:var(--code-bg);overflow:hidden;border-radius:var(--radius)}
/* 仅文章卡片：透明背景、无边框、无圆角，圆角移到图片 */
.articles .card{background:transparent;border:none;border-radius:0}
.card-cover img{width:100%;height:100%;object-fit:cover}
.card-cover.empty{display:grid;place-items:center;color:var(--muted);font-size:13px;letter-spacing:2px}
.card-body{padding:6px;display:flex;flex-direction:column;gap:2px;flex:1}
.card-title{font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{color:var(--muted);font-size:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{margin-top:auto;color:var(--muted);font-size:11px;display:flex;gap:8px;align-items:center}
.tag-chip{font-size:11px;color:var(--accent);background:transparent;padding:0;border-radius:0;white-space:nowrap}
.tag-chip::before{content:"#";margin-right:2px;font-size:11px;font-weight:600}

/* 友链顶部 hero：手机默认纵向（图在上、文在下），desktop 横向（文在左、图在右）。
   断点同样由 head.html 注入的 html[data-breakpoint] 控制，不用媒体查询。 */
.friends-hero{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:26px}
.friends-hero-illust{order:-1;width:100%;max-width:min(320px,56vw);height:auto;flex:none;align-self:center;animation:fadeIn .5s ease backwards;animation-delay:.15s}
html[data-breakpoint="desktop"] .friends-hero{flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
html[data-breakpoint="desktop"] .friends-hero-illust{order:0;width:clamp(220px,26vw,380px);max-width:none;align-self:auto}

/* Tab 组件：顶部纯文字 tab + 滑动蓝色下划线，容器高度取两个面板最大值不跳动 */
.friends-tabs{flex:1 1 auto;min-width:0;width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--card-2);overflow:hidden}
.tabs-bar{position:relative;display:flex;gap:24px;padding:0 14px;border-bottom:1px solid var(--border);background:var(--card-2)}
.tab-btn{
  padding:12px 2px;font:inherit;font-size:13px;font-weight:400;line-height:1.4;
  color:var(--muted);background:transparent;cursor:pointer;
  border:0;border-radius:0;
  transition:color .2s;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.is-active{color:var(--accent)}
/* 滑动下划线：绝对定位贴 tabs-bar 底边，由 JS 设置 translateX/width，transition 产生滑动 */
.tab-underline{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent);pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);
}

/* tabs-body 用 grid 叠层：两个面板都在同一 cell，非激活的 visibility:hidden 仍参与高度计算，
   这样容器高度自动取两个面板的最大值，切换时不跳。 */
.tabs-body{position:relative;display:grid;padding:18px}
.tabs-body > .tab-panel{grid-area:1/1/-1/-1}
.tab-panel{visibility:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease}
.tab-panel.is-active{visibility:visible;pointer-events:auto;opacity:1}

/* 申请须知列表 / 本站信息行 完全统一行高与间距，避免两者高度差引发布局跳动（哪怕很微小） */
.notice-list{margin:0;padding:0;list-style:none}
.notice-list li,
.self-row{
  display:flex;align-items:baseline;gap:10px;
  font-size:14px;line-height:1.8;color:var(--text);
  padding:2px 0;flex-wrap:wrap;
}
.self-label{color:var(--muted);flex:none;width:40px}
.self-value{color:var(--text);word-break:break-all;min-width:0}
a.self-value{color:var(--accent);text-decoration:none}
a.self-value:hover{text-decoration:underline}

.friends-section{container-type:inline-size}
.friends-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(150px,23cqw,260px),1fr));
  gap:var(--card-gap);
}
.friend-card{
  align-items:center;text-align:center;gap:10px;
  padding:24px 18px;
}
.friend-avatar{
  width:68px;height:68px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--code-bg);display:grid;place-items:center;
  color:var(--muted);font-size:24px;user-select:none;
}
.friend-avatar img{width:100%;height:100%;object-fit:cover}
.friend-name{font-size:17px;margin:0;line-height:1.3}
.friend-url{
  font-size:12px;color:var(--accent);word-break:break-all;line-height:1.4;
}
.friend-bio{
  font-size:14px;color:var(--muted);margin:0;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* 手机端：友链卡片头像/文字缩小（电脑端不变，用容器查询自适应） */
@container (max-width:768px){
  .friend-card{padding:18px 14px;gap:8px}
  .friend-avatar{width:54px;height:54px;font-size:20px}
  .friend-name{font-size:15px}
  .friend-bio{font-size:10px;-webkit-line-clamp:1;line-clamp:1}
}

.friend-disclaimer{
  margin-top:32px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card-2);overflow:hidden;
}
.friend-disclaimer .disclaimer-toggle{
  width:100%;cursor:pointer;text-align:left;font:inherit;color:inherit;
  background:none;border:0;padding:14px 18px;font-size:15px;
  display:flex;align-items:center;gap:8px;user-select:none;
}
.friend-disclaimer .disclaimer-icon{
  flex:none;margin-left:auto;color:var(--muted);
  transform:rotate(-90deg);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.friend-disclaimer.open .disclaimer-icon{transform:rotate(0deg)}
.friend-disclaimer .disclaimer-body{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.friend-disclaimer.open .disclaimer-body{opacity:1}
.friend-disclaimer .disclaimer-inner{
  overflow:hidden;min-height:0;
  padding:4px 18px 18px;color:var(--muted);font-size:14px;line-height:1.8;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1);
}
.friend-disclaimer.open .disclaimer-inner{opacity:1;transform:translateY(0)}
.friend-disclaimer .disclaimer-inner p{margin:10px 0}
.friend-disclaimer .disclaimer-inner ul{margin:8px 0;padding-left:22px}
.friend-disclaimer .disclaimer-inner li{margin:4px 0}
.friend-disclaimer .disclaimer-inner a{color:var(--accent)}

/* 页面元素入场动画：渐显上移（顶栏 .site-header 除外） */
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* 首页插画独立淡入：晚于 .home-head 主体上移，仅 opacity 不与父级 transform 叠加 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 标题/正文/区块等稳定容器：整体淡入上移。
   注意：含 position:fixed 后代的元素（.post-layout / .toc-sidebar）绝不参与动画，
   否则 transform 会创建包含块、破坏其固定定位；故只给 .post-header/.post-content 等安全块加。
   用 backwards 填充：延迟期间显示初始态，动画结束不残留 transform，避免影响内部 fixed。 */
.home-head,.list-head,
.post-header,.toc-toggle,.post-content,.ai-summary,
.terms,.friend-disclaimer,
.search-form,.search-banner,.comments,.pagination,
.site-footer,.friends-hero,.home-recent,.guest-hero{
  animation:pageIn .5s cubic-bezier(.4,0,.2,1) backwards;
}
/* 卡片 / 列表项错落上移 */
.articles .card,
.diary-item,
.friend-card,
.arc-card{
  animation:pageIn .5s cubic-bezier(.4,0,.2,1) backwards;
}
.articles .card:nth-child(1),.diary-item:nth-child(1),.arc-card:nth-child(1){animation-delay:.04s}
.articles .card:nth-child(2),.diary-item:nth-child(2),.arc-card:nth-child(2){animation-delay:.08s}
.articles .card:nth-child(3),.diary-item:nth-child(3),.arc-card:nth-child(3){animation-delay:.12s}
.articles .card:nth-child(4),.diary-item:nth-child(4),.arc-card:nth-child(4){animation-delay:.16s}
.articles .card:nth-child(5),.diary-item:nth-child(5),.arc-card:nth-child(5){animation-delay:.20s}
.articles .card:nth-child(6),.diary-item:nth-child(6),.arc-card:nth-child(6){animation-delay:.24s}
.articles .card:nth-child(7),.diary-item:nth-child(7),.arc-card:nth-child(7){animation-delay:.28s}
.articles .card:nth-child(8),.diary-item:nth-child(8),.arc-card:nth-child(8){animation-delay:.32s}
.articles .card:nth-child(9),.diary-item:nth-child(9),.arc-card:nth-child(9){animation-delay:.36s}
.articles .card:nth-child(10),.diary-item:nth-child(10),.arc-card:nth-child(10){animation-delay:.40s}
.articles .card:nth-child(11),.diary-item:nth-child(11),.arc-card:nth-child(11){animation-delay:.44s}
.articles .card:nth-child(12),.diary-item:nth-child(12),.arc-card:nth-child(12){animation-delay:.48s}
.post-content{animation-delay:.06s}
.friend-disclaimer,.search-form,.comments,.pagination,.site-footer{animation-delay:.1s}

@media (prefers-reduced-motion:reduce){
  .home-head,.list-head,.post-header,.toc-toggle,.post-content,
  .terms,.friend-disclaimer,.search-form,.search-banner,.comments,.pagination,.site-footer,.friends-hero,.home-footprints,.home-recent,
  .articles .card,.diary-item,.friend-card,.arc-card,.home-head .home-illust,.friends-hero .friends-hero-illust{animation:none}
  .friend-disclaimer .disclaimer-body,
  .friend-disclaimer .disclaimer-inner,
  .friend-disclaimer .disclaimer-icon,
  .friends-tabs .tab-underline{transition:none}
  .hw-panel{transition:none}
  .hw-loading-text .ai-ch{animation:none}
  .hw-refresh svg{transform:none!important}
}

.post-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,17vw,230px);gap:clamp(24px,3vw,48px);align-items:start}
.post-content-wrap{display:flex;flex-direction:column;min-width:0}
.post-header{margin-bottom:18px}
.post-title{font-size:clamp(24px,3.4vw,34px);margin:0 0 10px}
.post-meta{color:var(--muted);font-size:14px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.post-content{font-size:clamp(15px,calc(0.25vw + 14px),17px);line-height:2;letter-spacing:.08em;max-width:100%;word-break:break-word;overflow-x:hidden}
.post-content img{border-radius:12px;margin:0 0 calc(var(--post-gap) * 2)}
.post-content p{margin:0 0 calc(var(--post-gap) * 2)}
.post-content ul,.post-content ol{margin:0 0 calc(var(--post-gap) * 2);padding-left:1.4em}
.post-content li{margin:0 0 var(--post-gap)}
.post-content table{width:auto;table-layout:auto;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:0 0 calc(var(--post-gap) * 2)}
.post-content th,.post-content td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:.55em .75em;word-break:break-word;overflow-wrap:break-word;text-align:center}
.post-content th:last-child,.post-content td:last-child{border-right:none}
.post-content tr:last-child td,.post-content tr:last-child th{border-bottom:none}
.post-content th{background:var(--card-2);font-weight:600}
/* 表格横向滚动容器：列数过多时可左右滑动（无媒体查询，靠 JS 判断设备） */
/* 隐藏浏览器默认横向滚动条，但保留滚动能力（触摸/拖动自定义进度条均可滑） */
.post-content .table-scroll{position:relative;max-width:100%;width:100%;margin:0 0 calc(var(--post-gap) * 2);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none;-ms-overflow-style:none}
.post-content .table-scroll::-webkit-scrollbar{display:none;height:0}
.post-content .table-scroll > table{margin:0;width:max-content}
.post-content .table-scroll > table th,.post-content .table-scroll > table td{min-width:0}
/* 自定义横向进度条：拖动可左右滑动表格（替代按钮与默认滚动条） */
.table-track{position:relative;height:2px;margin:calc(var(--post-gap) + .1em) 0 var(--post-gap);border-radius:999px;background:var(--border);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.table-track .table-thumb{position:absolute;top:0;left:0;height:100%;min-width:24px;border-radius:999px;background:var(--track);cursor:pointer}
.table-track .table-thumb:active, .table-track:active .table-thumb{cursor:pointer;filter:brightness(.92)}
.post-content .highlight{display:block;max-width:100%;overflow:hidden;margin:0 0 calc(var(--post-gap) * 2)}
.post-content .highlight > pre{margin:0}
.post-content pre{background:var(--code-bg);margin:0 0 calc(var(--post-gap) * 2);padding:16px;border-radius:12px;overflow:auto;max-width:100%;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}
.post-content code{background:var(--code-bg);padding:2px 6px;border-radius:6px;font-size:.9em}
.post-content pre code{background:none;padding:0}
.post-content blockquote{border-left:3px solid var(--accent);margin:0 0 calc(var(--post-gap) * 2);padding:4px 16px;color:var(--muted);background:var(--card-2);border-radius:0 10px 10px 0}
.post-content blockquote > :last-child,.post-content .highlight > :last-child,.post-content li > :last-child{margin-bottom:0}
.post-content h1,.post-content h2,.post-content h3{margin:calc(var(--post-gap) * 3) 0 calc(var(--post-gap) * 2);scroll-margin-top:90px}
.post-content a{color:var(--accent);border-bottom:1px solid transparent}

.toc-sidebar{position:sticky;top:24px}
.toc-title{font-size:13px;letter-spacing:1px;color:var(--muted);margin:0 0 10px;text-transform:uppercase}
.toc-nav ul{list-style:none;margin:0;padding:0}
.toc-nav > ul{border-left:2px solid var(--border)}
.toc-nav li{margin:0}
.toc-nav a{display:block;padding:6px 12px;color:var(--muted);border-left:2px solid transparent;margin-left:-2px;font-size:14px;transition:color .25s ease,border-color .25s ease,background .25s ease}
.toc-nav a.active{color:var(--accent);border-left-color:var(--accent)}
/* 点击目录跳转到某标题时，目标标题做一次柔和的高亮淡入（内容切换的动画反馈） */
@keyframes tocFlash{0%{background:var(--accent-soft);box-shadow:-6px 0 0 var(--accent-soft)}100%{background:transparent;box-shadow:-6px 0 0 transparent}}
.post-content h1:target,.post-content h2:target,.post-content h3:target{animation:tocFlash 1.1s ease both;border-radius:8px;scroll-margin-top:90px}
.toc-nav ul ul{padding-left:14px;font-size:13px}
.toc-toggle{display:none}

/* AI 文章总结 */
.ai-summary{margin-bottom:14px;min-width:0}
.ai-summary-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;
  border:1px solid var(--border);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--card-2);
}
.ai-summary-title{
  display:inline-flex;align-items:center;
  font-size:13px;color:var(--accent);letter-spacing:.3px;
}
.ai-summary-note{font-size:10px;color:var(--muted);margin-left:auto}
.ai-refresh{
  flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:none;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:4px;-webkit-appearance:none;appearance:none
}
.ai-refresh svg{width:13px;height:13px;display:block;transform-box:fill-box;transform-origin:50% 50%;will-change:transform;-webkit-tap-highlight-color:transparent}
.ai-refresh:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ai-summary-body{
  padding:14px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;max-width:100%;
  max-height:50px;
  transition:max-height .3s ease;
}
.ai-summary-text{margin:0;font-size:14px;line-height:1.7;color:var(--text);overflow-wrap:break-word;word-break:break-word}
.ai-summary-loading,.ai-summary-err{margin:0;color:var(--muted);font-size:14px}
.ai-summary-loading::after{
  content:"";
  animation:aiDots 1.4s steps(4,end) infinite;
}
.ai-summary-loading .ai-ch{
  animation:aiWave .9s ease-in-out infinite;
  animation-delay:calc(var(--i) * .03s);
}
@keyframes aiBlink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
@keyframes aiDots{
  0%{content:""}
  25%{content:"."}
  50%{content:".."}
  75%{content:"..."}
  100%{content:""}
}
@keyframes aiWave{0%,100%{opacity:.35}50%{opacity:1}}

/* 日记列表：微信朋友圈风格 —— 单列信息流，居中，无气泡 */
.diary-list{max-width:620px;margin:0 auto;display:flex;flex-direction:column;container-type:inline-size}
.diary-item{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid var(--border)}
.diary-main{display:flex;flex-direction:column;gap:5px;min-width:0}
/* 正文：白底直接铺，无气泡、无边框 */
.diary-body{font-size:15px;line-height:1.7;color:var(--text);word-break:break-word}
.diary-body h2{font-size:16px;margin:0 0 4px;font-weight:600}
.diary-body p{margin:0}
/* 正文里的原始 Markdown 图片已抽到九宫格，不再重复显示 */
.diary-body img{display:none}
/* 九宫格：占满容器宽度，PC 4 列，窄屏 3 列（容器查询，无媒体查询） */
.diary-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px;width:100%}
.diary-imgs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block}
@container (min-width:560px){
  .diary-imgs{grid-template-columns:repeat(4,1fr)}
}
/* 时间行 + 更多按钮 */
.diary-bar{margin-top:4px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.diary-bar-icon{flex:none;cursor:pointer}
.diary-bar time{font-size:12px;color:var(--muted)}
/* 微信朋友圈风格评论区：仅展示已发布评论，昵称+内容一行，无头像无时间 */
/* 灰色卡片展开动画：grid 0fr→1fr 平滑增高，顶下其他帖子；灰底随之渐显 */
.diary-comments{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.diary-comments.has-comments,.diary-comments.form-open{grid-template-rows:1fr;opacity:1}
.diary-comments-wrap{min-height:0;overflow:hidden}
.diary-comments-inner{overflow:hidden;background:transparent;border-radius:8px;transition:background .4s ease}
/* 灰底背景随展开渐显，避免灰块瞬间弹出；padding/margin 仅展开时生效，保证无评论时高度严格为 0 */
.diary-comments.has-comments .diary-comments-inner{background:var(--bg-soft,#f5f5f5);padding:8px 10px;margin-top:8px}
/* 点击灰色 @昵称：原评论文字变主题蓝（--accent）并平滑恢复（变色动画，无背景） */
.diary-comment-text{transition:color .35s ease}
.diary-comment-row .diary-comment-text.diary-comment-text-flash{color:var(--accent)}
/* 避免多次点击图标时误选帖子内文字；输入框内仍可选中文字 */
.diary-item{user-select:none}
.diary-item input,.diary-item textarea,.diary-item .cf-email,.diary-item .cf-content{user-select:text}
.diary-comments .comment-form-slot{width:100%;overflow:hidden;height:0;opacity:0;transition:height .28s ease,margin .28s ease,opacity .28s ease}
.diary-comments .comment-form-slot.reply-open{margin:10px 0;opacity:1}
.diary-comments .comment-form,.diary-comments .cf-email-box{margin:0}
.diary-comment-list{display:flex;flex-direction:column;gap:4px}
/* 评论加载完成后整块淡入，避免突然弹出 */
.diary-comment-list.is-loaded{animation:diaryCommentsFade .35s ease both}
@keyframes diaryCommentsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.diary-comment-row{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word;animation:diaryCommentRowIn .3s ease both}
/* 每行错峰滑入，营造逐条出现的效果 */
.diary-comment-row{opacity:0}
.diary-comment-list.is-loaded .diary-comment-row{opacity:1}
@keyframes diaryCommentRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.diary-comment-list.is-loaded .diary-comment-row{animation-name:diaryCommentRowIn}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(1){animation-delay:0s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(2){animation-delay:.05s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(3){animation-delay:.1s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(4){animation-delay:.15s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(5){animation-delay:.2s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(6){animation-delay:.25s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(7){animation-delay:.3s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(8){animation-delay:.35s}
.diary-comment-list.is-loaded .diary-comment-row:nth-child(n+9){animation-delay:.4s}
.diary-comment-name{color:var(--accent,#07c160);font-weight:600}
.diary-comment-at{color:var(--muted);font-weight:500;margin-left:2px}
.diary-comment-sep{color:var(--text)}
.diary-comment-text{color:var(--text)}
.diary-single .post-content{max-width:720px}

.terms{display:flex;flex-wrap:wrap;gap:10px}
.terms a{padding:8px 16px;border:1px solid var(--border);border-radius:999px;color:var(--text)}
.terms .num{color:var(--muted);font-size:13px;margin-left:6px}
.terms-section{margin-bottom:28px}
.terms-section:last-child{margin-bottom:0}
.terms-section-title{
  font-size:14px;color:var(--muted);margin-bottom:12px;
  padding-left:10px;border-left:3px solid var(--accent);
  font-weight:400 !important;letter-spacing:.3px
}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination .current{padding:8px 14px;border-radius:10px;border:1px solid var(--border)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

.search-page{display:flex;flex-direction:column;gap:18px}
.search-form{display:flex}
.search-box{position:relative;flex:1;display:flex;align-items:center}
.search-banner{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-height:0;margin-top:120px;gap:14px}
.search-banner-icon{width:120px;height:120px;display:block}
.search-banner-hint{margin:0;color:var(--muted);font-size:14px}
#search-input{width:100%;padding:14px 44px 14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card-2);color:var(--text);font-size:16px;outline:none}
#search-input:focus{border-color:var(--accent)}
#search-input::-webkit-search-cancel-button{display:none}
#search-input::-moz-search-cancel-button{display:none}
.search-clear{position:absolute;right:8px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:50%}
.search-clear[hidden]{display:none}
#search-results{display:flex;flex-direction:column;gap:10px}
.search-item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card-2);border:1px solid var(--border);border-radius:14px}
.search-item-title{font-size:17px;color:var(--text)}
.search-item-meta{font-size:13px;color:var(--muted)}
#search-empty{color:var(--muted);font-size:14px;margin:0}

.site-footer{flex-shrink:0;margin-top:auto;border-top:1px solid var(--border);padding:22px clamp(18px,3vw,40px);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* 手机端：底栏文字分行居中（电脑端保持一行不变，用容器查询自适应） */
@container (max-width:768px){
  .site-footer{flex-direction:column;align-items:center;text-align:center;justify-content:center;font-size:11px}
}

@container (max-width: 768px){
  .page{margin:0;max-width:100%;border-radius:0;height:100vh}
  .post-layout{grid-template-columns:1fr}
  .card-title{font-size:13px}
  /* 移动端：目录按钮改为右下角悬浮圆钮，不随内容滚动（电脑端保持隐藏） */
  .toc-toggle{
    position:fixed;right:14px;bottom:64px;z-index:60;
    width:42px;height:42px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;margin:0;
    border:1px solid var(--border);border-radius:50%;
    background:color-mix(in srgb, var(--card) 35%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    backdrop-filter:blur(16px) saturate(180%);
    border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
    color:var(--accent);
    cursor:pointer;font-size:0;
    transition:transform .25s ease,opacity .25s ease;
  }
  .toc-toggle svg{width:22px;height:22px}
  /* 滑到评论区时隐藏悬浮按钮 */
  .toc-toggle.toc-hidden{opacity:0;transform:scale(.6);pointer-events:none}
  .toc-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:80vh;width:auto;background:var(--card);border-left:none;border-top:1px solid var(--border);border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));overflow:auto;z-index:70;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(100%);opacity:0;visibility:hidden;will-change:transform;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .34s ease,visibility 0s linear .34s}
  .toc-sidebar::before{content:"";display:block;width:40px;height:4px;border-radius:999px;background:var(--border);margin:0 auto 14px}
  body.toc-open .toc-sidebar{transform:translateY(0);opacity:1;visibility:visible;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .34s ease,visibility 0s}
  body::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
  body.toc-open::after{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s}
  .diary-item{padding:14px 0}
  .diary-list{max-width:100%}
}

.comments{margin-top:36px;border-top:1px solid var(--border);padding-top:28px}
/* 日记列表里作为评论表单宿主时，去掉上间距、上内边距和上边框，避免与图标点击区域间出现空隙 */
.comments[data-mode="form-only"]{margin-top:0;padding-top:0;border-top:none}
/* 与回复框(.comment-form-slot)完全一致的纯 height 展开过渡：
   默认收起(height:0;overflow:hidden)，由 JS 测真实高度设像素并 transitionend 交还 auto；
   只作用于本宿主自身，不影响评论列表(.diary-comment-list)。 */
.comments[data-mode="form-only"]{overflow:hidden;height:0;opacity:0;transition:height .28s ease,opacity .28s ease}
.comments[data-mode="form-only"].cf-reveal{opacity:1}
/* 关闭评论表单时收起（height 归零），同回复框 closeSlot 逻辑 */
.comments[data-mode="form-only"].cf-fade-out{opacity:0}
.comments-title{font-size:20px;margin:0;line-height:1.4}

/* 评论标题与 Cookie 提示同一行：标题在左，提示在右，底部对齐 */
.comments-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.comments-head .comments-title{margin:0;line-height:1.4}

/* Cookie 邮箱提示：标题右侧，灰色文字 + 灰色图标，底部与标题文字对齐 */
.cf-cookie-hint{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:13px;line-height:1.4;cursor:pointer;user-select:none}
.cf-cookie-hint:hover{color:var(--text)}
.cf-cookie-hint:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.cf-cookie-hint .cf-cookie-icon{width:15px;height:15px;flex:none;color:var(--muted)}
.comment-form{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.comment-fields{display:flex;gap:12px;flex-wrap:wrap}
.comment-fields input{flex:1 1 160px;min-width:0}
.cf-author,.cf-email,.cf-website,.cf-content{padding:11px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card-2);color:var(--text);font-size:15px;outline:none;font-family:inherit}
.cf-content{min-height:96px;height:96px;resize:none}
.cf-author:focus,.cf-email:focus,.cf-website:focus,.cf-content:focus{border-color:var(--accent)}
.cf-submit{align-self:flex-start;padding:10px 22px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
.cf-submit:disabled{opacity:.5;cursor:default}

/* 顶层评论初始：灰色矩形框 + 邮箱 + 圆形箭头按钮 */
.cf-email-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--card-2);border:1px solid var(--border);border-radius:16px;padding:18px 14px;margin-bottom:26px}
/* 回复框顶部「回复 @被回复者」：居中，紧贴邮箱框，回复灰色、@名蓝色 */
.cf-reply-to{width:100%;text-align:center;margin:0 0 -6px;color:var(--muted);font-size:13px;line-height:1.4}
.cf-reply-to-name{color:var(--accent);font-weight:500}
/* 回复框昵称输入框后的灰色「@被回复昵称」 */
.cf-author-reply-to{color:var(--muted);font-size:13px;align-self:center;white-space:nowrap}
:root{interpolate-size:allow-keywords;--avatar-w:clamp(33px, calc(33px + 0.6vw), 44px);--avatar-w-child:clamp(25px, calc(25px + 0.5vw), 34px)}
/* 回复框容器：高度过渡用 grid-template-rows:0fr→1fr（兼容所有设备，含旧手机浏览器，
   不依赖 interpolate-size:allow-keywords）。interpolate-size 仅作渐进增强，缺失时由 grid 兜底。
   内层直接子元素需 overflow:hidden + min-height:0 才能被 0fr 裁切。
   收起时 grid 行 + margin 同步归零，DOM 移除无残余 margin，下方评论不二次跳动。
   对齐逻辑（让回复框左右边缘 = 主评论输入框左右边缘）：
     slot 在 .comment-main 内，main 宽 = 主评论宽 - item.padding(左右各10px) - 头像宽 - gap(12px)
            = 主评论宽 - (32px + 头像宽)
     故：margin-left:-(10px + 头像宽 + 12px) 拉回左侧；
        width:calc(100% + 32px + 头像宽) 补回右侧（多出的10px正好是 item.padding-right）。
   左右用同一 --avatar-w 变量，响应式精确，不写死数字。 */
.comment-main .comment-form-slot{width:calc(100% + 32px + var(--avatar-w));margin:0 0 0 calc(-22px - var(--avatar-w));overflow:hidden;height:0;opacity:0;transition:height .28s ease,margin .28s ease,opacity .28s ease}
.comment-main .comment-form-slot.reply-open{margin:14px 0 14px calc(-22px - var(--avatar-w));opacity:1}
/* 子级（第2、3类，均平铺在同一 .comment-children 内，结构相同）：
   目标：对齐到【顶层输入框】的左右缘（= 主评论 item 的左右缘，即容器左右缘）。
   坐标（设主item左缘=0、宽=W、顶层头像=aw、子头像=cw）：
     .comment-children 左移 -35px 但宽度撑满父 main，故第2类 item 左缘 = aw-13、右缘≈W-10；
     第2类 main 左缘 = aw + cw + 9，第2类 main 宽 = W - aw - cw - 29。
   左缘 → margin-left = -(aw + cw + 9) 拉回主item左缘(0)；
   右缘 → width = 100% + (aw + cw + 29) 补到主item右缘(W)。
   第3类同容器同结构，自然一并对齐。两变量不能省，否则响应式下差 8~10px。 */
.comment-children .comment-form-slot{width:calc(100% + 29px + var(--avatar-w) + var(--avatar-w-child));overflow:hidden;height:0;opacity:0;transition:height .28s ease,margin .28s ease,opacity .28s ease}
.comment-children .comment-form-slot.reply-open{opacity:1}
.comment-children .comment-form-slot,
.comment-children .comment-form-slot.reply-open{margin-left:calc(-9px - var(--avatar-w) - var(--avatar-w-child))}
/* slot 直接子元素（邮箱框 / 回复表单）保持自然高度即可，slot 本体 overflow:hidden 负责裁切 */
.comment-main .comment-form-slot > *,
.comment-children .comment-form-slot > *{min-height:0}
.comment-main .comment-form,
.comment-main .cf-email-box{margin:0}
.cf-email-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.cf-email-box .cf-email{flex:none;width:min(80%,420px);height:44px;box-sizing:border-box;border:1px solid var(--border);background:var(--card);border-radius:10px;padding:0 12px;color:var(--text);outline:none;transition:border-color .2s ease}
.cf-email-box .cf-email::placeholder{color:var(--muted)}
.cf-email-box .cf-email:focus{border-color:var(--accent)}
.cf-arrow{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.cf-arrow:disabled{opacity:.5;cursor:default}
html.can-hover .cf-arrow:hover{background:var(--accent-soft);border-color:var(--accent)}

/* 箭头按钮加载中：圆形旋转动画替换箭头图标 */
.cf-arrow .cf-spinner{display:none;width:18px;height:18px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;box-sizing:border-box;animation:cfSpin .7s linear infinite}
.cf-arrow.loading .cf-arrow-icon{display:none}
.cf-arrow.loading .cf-spinner{display:block}
@keyframes cfSpin{to{transform:rotate(360deg)}}

/* 邮箱框下方提示行：盾牌对勾图标 + 文案，图标用强调蓝 */
.cf-email-hint{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:0;color:var(--accent);font-size:13px;line-height:1.4}
.cf-email-hint .cf-hint-icon{width:16px;height:16px;flex:none;color:var(--accent)}
.comment-list{display:flex;flex-direction:column;gap:18px}
/* 评论项：恒定左右内边距(上下为0) → 高亮时评论框位置零位移、评论间距不变；
   position:relative 供高亮 ::before 定位；inset:0 让背景铺满盒子 → 左右对称 */
.comment-item{display:flex;gap:12px;padding:0 10px;position:relative;overflow:visible}
.comment-avatar{flex:none;width:clamp(33px,calc(33px + 0.6vw),44px);height:clamp(33px,calc(33px + 0.6vw),44px);border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-soft,#7c9eff));color:#fff;display:grid;place-items:center;font-size:clamp(15px,calc(15px + 0.3vw),20px);user-select:none}
.comment-avatar--admin{background:none;border-radius:10px;overflow:hidden;padding:0}
.comment-avatar--admin .comment-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.comment-main{flex:1;min-width:0}
.comment-head{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap;line-height:1.3}
.comment-name{color:var(--muted);font-size:13px;font-weight:400}
.comment-name a{color:inherit;text-decoration:none}
.comment-time{color:var(--muted);font-size:12px;line-height:1}
/* 站长徽标（Uiverse 风格，使用主题强调色、不加粗） */
.comment-badge{
  --main-color:var(--accent);
  --main-bg-color:color-mix(in srgb,var(--accent) 22%,transparent);
  --pattern-color:color-mix(in srgb,var(--accent) 22%,transparent);
  display:inline-flex;align-items:center;gap:5px;
  cursor:default;letter-spacing:.12em;text-transform:uppercase;
  font-size:11px;font-weight:400;line-height:1.4;
  background:radial-gradient(circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95%),
    linear-gradient(var(--pattern-color) .5px,transparent .5px),
    linear-gradient(to right,var(--pattern-color) .5px,transparent .5px);
  background-size:cover,7px 7px,7px 7px;
  background-position:center center,center center,center center;
  border-image:radial-gradient(circle,var(--main-color) 0%,rgba(0,0,0,0) 100%) 1;
  border-width:1px 0 1px 0;
  color:var(--main-color);
  padding:3px 12px;
  transition:background-size .2s ease-in-out;
}
.comment-badge:hover{background-size:cover,4px 4px,4px 4px}
.comment-badge span{color:var(--main-color)}
.comment-body{color:var(--text);font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;margin:2px 0}
.comment-foot{display:flex;align-items:center;gap:14px;margin-top:0;line-height:1}
.comment-reply-btn{padding:0;background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:400;line-height:1;cursor:pointer;text-decoration:none}
.comment-reply-btn:hover{color:var(--muted)}
.comment-reply-form{display:flex;flex-direction:column;gap:12px;margin-top:0}
/* 评论子级容器：第 2 类（回复）缩进 + 左边线；第 3 类及更深直接挂在其内，不二次缩进 */
#comments .comment-children{margin-top:14px;margin-left:-35px;padding-left:0;display:flex;flex-direction:column;gap:14px}
#comments .comment-children .comment-avatar{width:clamp(25px,calc(25px + 0.5vw),34px);height:clamp(25px,calc(25px + 0.5vw),34px);font-size:clamp(12px,calc(12px + 0.2vw),16px)}
/* @被回复者（抖音式，默认蓝色可点击） */
.comment-name a.comment-at,.comment-at{color:var(--accent);text-decoration:none;font-weight:500;margin-left:4px}
.comment-at:hover{text-decoration:none}
/* 点击 @ 后滑动到被回复评论的高亮背景 */
/* 点击 @ 后滑动到被回复评论的高亮背景：::before 上下各扩 8px(inset:-8px 0) → 高度更大有包裹感，
   左右=评论项边界(评论项自身左右 padding 10px)保持对称；评论项 padding 仍为 0 10px → 评论间距不变 */
.comment-item::before{content:'';position:absolute;inset:-8px 0;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);opacity:0;pointer-events:none;transition:opacity .25s ease}
.comment-item.comment-highlight::before{opacity:1}
.comment-empty{color:var(--muted);font-size:14px}
.comment-note{color:var(--muted);font-size:14px;margin:0 0 14px;padding:10px 14px;background:var(--card-2);border:1px solid var(--border);border-radius:10px}

html.can-hover .nav-inline a:hover{color:var(--text)}
html.can-hover .nav-inline a:hover::before{background:var(--border);transform:scale(.9)}
html.can-hover .nav-inline a.active:hover{color:var(--bg)}
html.can-hover .nav-inline a.active:hover::before{background:var(--accent);transform:scale(.9)}
html.can-hover .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
html.can-hover .card:hover{border-color:var(--accent)}
html.can-hover .post-content a:hover{border-bottom-color:var(--accent)}
html.can-hover .toc-nav a:hover{color:var(--accent);border-left-color:var(--accent)}
html.can-hover .terms a:hover{border-color:var(--accent);color:var(--accent)}
html.can-hover .pagination a:hover{border-color:var(--accent);color:var(--accent)}
html.can-hover .search-clear:hover{color:var(--text)}
html.can-hover .search-item:hover{border-color:var(--accent)}
html.can-hover .comment-name a:hover{text-decoration:none}
html.can-hover .comment-reply-btn:hover{text-decoration:none}
html.can-hover .cf-submit:hover{opacity:.9}

html.can-hover .nav-inline a:focus-visible,
html.can-hover .theme-toggle:focus-visible,
html.can-hover .card:focus-visible,
html.can-hover .diary-item:focus-visible,
html.can-hover .terms a:focus-visible,
html.can-hover .pagination a:focus-visible,
html.can-hover .search-item:focus-visible,
html.can-hover .cf-submit:focus-visible{border-color:var(--accent);outline:none}
html.can-hover .post-content a:focus-visible{border-bottom-color:var(--accent)}
html.can-hover .toc-nav a:focus-visible{color:var(--accent);border-left-color:var(--accent)}

/* 评论区邮箱查询弹窗 */
.cf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;animation:cfFade .18s ease both}
.cf-modal-overlay.closing{animation:cfFadeOut .18s ease both}
.cf-modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 24px;max-width:400px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.32);animation:cfPop .22s cubic-bezier(.22,1,.36,1) both}
.cf-modal-overlay.closing .cf-modal{animation:cfPopOut .2s cubic-bezier(.55,0,.55,.2) both}
.cf-modal-head{display:flex;align-items:center;gap:10px;margin-bottom:0}
.cf-modal-title{font-size:16px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:0}
.cf-modal-body{font-size:14px;color:var(--muted);margin-top:10px;margin-bottom:18px}
.cf-modal-card{background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:4px 14px;margin-bottom:12px}
.cf-modal-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.cf-modal-row:last-child{border-bottom:none}
.cf-modal-row span{color:var(--muted);flex:none;width:42px}
.cf-modal-row b{color:var(--text);font-weight:500;word-break:break-all}
.cf-modal-tip{margin:0;line-height:1.6}
.cf-modal-error{color:var(--danger,#dc2626);margin:8px 0 0}
.cf-modal-passwrap{margin-top:12px}
.cf-admin-pass{width:100%;box-sizing:border-box;height:42px;border:1px solid var(--border);background:var(--card);border-radius:10px;padding:0 12px;color:var(--text);outline:none;transition:border-color .2s ease}
.cf-admin-pass:focus{border-color:var(--accent)}

/* Cookie 说明弹窗按钮区 */
.cf-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.cf-btn{padding:9px 18px;border:1px solid var(--border);border-radius:10px;background:var(--card-2);color:var(--text);font-size:14px;cursor:pointer;font-family:inherit}
.cf-btn:hover{opacity:.9}
.cf-btn-primary{border-color:var(--accent);background:var(--accent);color:#fff}
.cf-btn-primary:hover{opacity:.9}
.cf-btn-danger{border-color:var(--danger,#dc2626);background:var(--danger,#dc2626);color:#fff}
.cf-btn-danger:hover{opacity:.9}

/* 昵称锁定（站长身份） */
.cf-author.cf-locked{background:var(--card-2);color:var(--muted);cursor:not-allowed}

/* 评论昵称右侧“我是站长”标签（样式见上方 .comment-badge 渐变橙胶囊） */
@keyframes cfFade{from{opacity:0}to{opacity:1}}
@keyframes cfPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cfFadeOut{from{opacity:1}to{opacity:0}}
@keyframes cfPopOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
html.can-hover .comment-name a:focus-visible{text-decoration:none}
html.can-hover .comment-reply-btn:focus-visible{text-decoration:none}

html:not(.can-hover) a:focus,
html:not(.can-hover) .card:focus,
html:not(.can-hover) .diary-item:focus,
html:not(.can-hover) .terms a:focus,
html:not(.can-hover) .pagination a:focus,
html:not(.can-hover) .search-item:focus{outline:none;border-color:var(--border)}
html:not(.can-hover) .post-content a:focus{border-bottom-color:transparent;outline:none}
html:not(.can-hover) .toc-nav a:focus{color:var(--muted);border-left-color:transparent;outline:none}
html:not(.can-hover) .comment-name a:focus,
html:not(.can-hover) .comment-reply-btn:focus{text-decoration:none;outline:none}

::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*){animation:none !important}
::view-transition-old(root){animation:vt-fade-out .35s ease both !important}
::view-transition-new(root){animation:vt-fade-in .35s ease both !important}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}

/* 文章列表：归档风格 —— 独立 class，不影响首页 .articles/.card
   无媒体查询：grid auto-fill + minmax(min(100%,360px),1fr)
   → 宽屏多列、窄屏一列；末行孤卡保留单轨宽度，不再被拉伸成整行 */
.arc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:var(--card-gap);align-items:stretch}
.arc-card{display:flex;gap:16px;min-width:0;
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;overflow:hidden;text-decoration:none;color:inherit}
/* 左：标题/简介/时间/评论数 */
.arc-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.arc-title{font-size:16px;margin:0;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arc-desc{color:var(--muted);font-size:13px;margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arc-meta{margin-top:auto;color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.arc-comments{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.arc-comments .arc-count{color:var(--muted);font-weight:400}
.arc-comments-icon{flex:none;width:14px;height:14px;fill:currentColor;vertical-align:middle}
.arc-count{color:var(--accent);font-weight:600}
/* 右：封面图 */
.arc-cover{flex:none;width:46%;aspect-ratio:16/10;background:var(--code-bg);
  border-radius:10px;overflow:hidden;align-self:center}
.arc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.arc-cover.empty{display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:2px}
.arc-cover img{transition:transform .3s ease}
html.can-hover .arc-card:hover{border-color:var(--accent)}
html.can-hover .arc-card:hover .arc-cover img{transform:scale(1.03)}

/* ==================== 留言板：堆叠卡片 ==================== */
.guest-hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--card-2);padding:clamp(20px,3.5vw,40px);min-height:330px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:28px;align-items:center}
.guest-hero::before{content:"";position:absolute;z-index:-2;width:390px;height:390px;right:-155px;top:-195px;border:82px solid var(--accent-soft);border-radius:50%}
.guest-hero::after{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:46%;bottom:-210px;border:58px solid rgba(185,205,240,.32);border-radius:50%}
.guest-copy{max-width:610px}
.guest-kicker{display:inline-flex;align-items:center;color:var(--accent);font-size:12px;letter-spacing:.16em;margin-bottom:11px}
.guest-title{margin:0;font-size:clamp(34px,5.2vw,66px);font-weight:400;line-height:1.06;letter-spacing:.3px}
.guest-title span{color:var(--accent)}
.guest-subtitle{max-width:500px;margin:12px 0 0;color:var(--muted);font-size:15px;letter-spacing:.3px}
.guest-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.meta-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted);font-size:12px}

.message-stage{position:relative;min-height:300px;display:grid;place-items:start center;box-sizing:border-box;padding-top:12px;touch-action:pan-y;perspective:900px;outline:none}
.card-stack{position:relative;width:min(100%,430px);height:232px;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.card-stack.is-ready{opacity:1;transform:none}
.message-card{position:absolute;inset:0;padding:22px 22px 19px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);will-change:transform,opacity;transform-origin:50% 55%;transition:transform .46s cubic-bezier(.22,.75,.2,1),opacity .30s ease,box-shadow .25s ease;backface-visibility:hidden;user-select:none;-webkit-user-select:none;cursor:pointer;touch-action:pan-y}
.message-card[data-slot="0"]{z-index:3;transform:translate3d(0,0,0) rotate(-1.1deg) scale(1);opacity:1;pointer-events:auto}
.message-card[data-slot="1"]{z-index:2;transform:translate3d(8px,8px,-1px) rotate(-.45deg) scale(.995);opacity:.72;pointer-events:none}
.message-card[data-slot="2"]{z-index:1;transform:translate3d(16px,16px,-2px) rotate(.2deg) scale(.99);opacity:.42;pointer-events:none}
.message-card.is-leaving-next{z-index:4;transform:translate3d(-38px,-52px,0) rotate(-5deg) scale(.985);opacity:0;pointer-events:none}
.message-card.is-leaving-prev{z-index:4;transform:translate3d(38px,52px,0) rotate(5deg) scale(.985);opacity:0;pointer-events:none}
.message-card.is-settling{transition:none!important}
.message-card.is-returning{opacity:0!important}
html.can-hover .message-card[data-slot="0"]:hover{transform:translate3d(0,-3px,0) rotate(0) scale(1);box-shadow:0 18px 50px rgba(79,70,229,.12)}
.message-stage.is-dragging .message-card[data-slot="0"]{transform:translate3d(0,0,0) rotate(-1.1deg) scale(1);box-shadow:var(--shadow)}

.message-top{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px solid var(--border)}
.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-weight:600;letter-spacing:.04em}
.message-author{min-width:0;flex:1}
.message-author strong{display:block;font-size:14px;font-weight:500}
.message-author time{display:block;color:var(--muted);font-size:11px}
.quote-mark{align-self:flex-start;margin:-8px 1px 0 0;color:#eef0ff;font:64px/1 Georgia,serif;user-select:none;pointer-events:none}
.message-body{margin:18px 0 17px;font-size:15px;line-height:1.85;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.message-footer{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.message-tag{color:var(--accent)}
.message-tag::before{content:"#";font-weight:600;margin-right:2px}

.stack-controls{position:absolute;z-index:11;isolation:isolate;overflow:hidden;left:50%;top:282px;display:flex;align-items:center;gap:3px;padding:2px 5px;border:1px solid rgba(132,142,180,.2);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.18) 42%,rgba(215,225,255,.28) 70%,rgba(255,255,255,.5) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(105,115,160,.08),inset 8px 0 14px rgba(255,255,255,.16);backdrop-filter:blur(12px) saturate(165%) contrast(105%);-webkit-backdrop-filter:blur(12px) saturate(165%) contrast(105%);transform:translateX(-50%);opacity:0;transition:opacity .4s ease .1s}
.stack-controls.is-ready{opacity:1}
.stack-button{position:relative;z-index:1;width:clamp(0px,calc(100vw - 520px),22px);height:clamp(0px,calc(100vw - 520px),22px);display:grid;place-items:center;flex:0 0 clamp(0px,calc(100vw - 520px),22px);overflow:hidden;border:0;border-radius:50%;padding:0;background:transparent;color:var(--accent);cursor:pointer;transition:transform .2s ease,background-color .2s ease}
html.can-hover .stack-button:hover{background:var(--accent-soft)}
.stack-button:active{transform:scale(.92)}
.stack-button:focus-visible,.indicator-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stack-button svg{width:11px;height:11px}
.stack-indicator{position:relative;z-index:1;display:flex;align-items:center;gap:7px;min-width:52px;margin:7.5px 0;padding:0 2px;justify-content:center}
.indicator-item{width:7px;height:7px;border:0;border-radius:999px;padding:0;background:#e0e2e9;cursor:pointer;transition:width .28s ease,background-color .28s ease}
.indicator-item.is-active{width:24px;background:#9aaaf0}

@keyframes guestFloat{50%{transform:translateY(-7px)}}

@media(max-width:780px){
  .guest-hero{grid-template-columns:1fr;padding:20px 18px;gap:18px;min-height:auto}
  .guest-kicker{margin-bottom:8px}
  .guest-title{font-size:36px;line-height:1.05}
  .guest-subtitle{margin-top:8px;font-size:13.5px}
  .guest-meta{margin-top:12px;gap:8px}
  .meta-pill{padding:5px 10px;font-size:11px}
  .message-stage{min-height:280px;padding-top:6px}
  .card-stack{height:220px}
  .message-card{padding:18px 18px 15px}
  .message-top{gap:9px;padding-bottom:11px}
  .message-body{margin:13px 0 13px;font-size:14px;line-height:1.8}
  .message-card.is-leaving-next{transform:translate3d(-25px,-38px,0) rotate(-4deg) scale(.99)}
  .message-card.is-leaving-prev{transform:translate3d(25px,38px,0) rotate(4deg) scale(.99)}
  .stack-controls{top:262px;padding:2px 5px}
}
@media(max-width:420px){
  .guest-hero{padding:16px 14px;gap:14px}
  .guest-kicker{font-size:11px;letter-spacing:.14em;margin-bottom:6px}
  .guest-title{font-size:32px}
  .guest-subtitle{margin-top:6px;font-size:13px;letter-spacing:.2px}
  .guest-meta{margin-top:10px}
  .meta-pill{padding:4px 9px}
  .message-stage{min-height:250px;padding-top:2px}
  .card-stack{height:188px}
  .stack-controls{top:226px}
  .message-card{display:flex;flex-direction:column;padding:14px 15px 11px;border-radius:14px}
  .message-top{gap:8px;padding-bottom:9px}
  .avatar{width:38px;height:38px;border-radius:11px}
  .message-body{font-size:13.5px;line-height:1.72;margin:9px 0 5px}
  .message-footer{margin-top:0;padding-top:0;font-size:10.5px}
}

/* ===== 留言板翻动卡片 · 深色模式专属适配 =====
   浅色模式完全沿用上方硬编码的浅色值（不动）；
   深色模式改用主题变量 + 深色玻璃，避免纯白卡片 / 白色控件在深色页里刺眼突兀。 */
[data-theme="dark"] .message-card{
  background:linear-gradient(155deg,#26313f 0%,#1c2531 100%);
  box-shadow:0 12px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .message-card .quote-mark{color:rgba(169,192,238,.5)}
[data-theme="dark"] .indicator-item{background:rgba(255,255,255,.16)}
[data-theme="dark"] .indicator-item.is-active{background:var(--accent)}
[data-theme="dark"] .stack-controls{
  background:linear-gradient(135deg,rgba(46,55,70,.72) 0%,rgba(32,40,52,.6) 42%,rgba(52,62,78,.66) 70%,rgba(38,47,60,.72) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.22);
}

@media(prefers-reduced-motion:reduce){
  .message-card{transition:none}
  .indicator-item{transition:none}
}