/* ===========================================================
   Read · 阅读舒适度层（第 3 层，在 v5.css 之后、polish.css 之前）
   管三件事：版心更宽、字号更大、护眼配色。
   只调「尺寸与颜色」，不动布局结构与断点逻辑。
   =========================================================== */

/* ---------- 1. 版心与字号基准 ---------- */
:root { --wrap: 1720px; }

/* 关键：rem 是相对 html 计算的。
   只改 body 的 font-size 不会让 .row-title 这类 rem 字号变大 ——
   要放大全站，必须动这里的基准。16 → 17px，所有 rem 同步 +6.25%。 */
html { font-size: 17px; }

/* ---------- 2. 配色：白底 + 白卡 + 清晰边框 ----------
   参考成熟内容站（如 xuanyuancode.com）的做法：
   底色纯白、卡片纯白、分隔完全靠 1px 边框和留白，
   而不是靠"灰底+近白卡"的微弱色差 —— 那种做法整体发闷。
   本站保留一点青蓝色相（h=198），不惨白也不发灰。 */
body {
  /* 底色贴近纯白，只留一丝色相 */
  --bg: hsl(var(--h) 24% 99.4%);
  --bg-2: hsl(var(--h) 22% 96.5%);
  /* 卡片比底色亮一档，形成"纸上白卡"的层次 */
  --surface: #ffffff;
  /* 正文对比度对齐参考站 #333：约 12:1，清楚不扎眼 */
  --ink: hsl(var(--h) 18% 18%);
  --muted: hsl(var(--h) 8% 41%);
  /* 边框要比原来深一档：白底上要看得见，但不抢戏 */
  --rule: hsl(var(--h) 14% 87%);
  --soft: hsl(var(--h) 26% 95.5%);

  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .005em;
}

/* ---------- 3. 刊头：青蓝 hero 区（对齐参考站"大面积品牌色首屏"） ----------
   内容区保持纯白，清晰度不受影响；首屏有一个和品牌同色的焦点块。
   渐变跟随 --primary 变量，5 套主题和深色模式自动适配。 */
.masthead {
  margin: 26px 0 24px;
  padding: 46px 52px 40px;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(72% 120% at 88% -20%, hsl(0 0% 100% / .14), transparent 60%),
    linear-gradient(135deg, var(--primary-dp), var(--primary));
  box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--primary) 45%, transparent);
}
.mast-title {
  font-size: clamp(2.1rem, 3.1vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  color: #fff;
}
/* hero 上的高亮词用暖黄——深底上要亮，同时呼应蝶翼的点睛橙 */
.mast-title .hl { color: #F6C15C; }
.mast-desc {
  margin: 14px 0 0;
  max-width: 42em;
  color: hsl(0 0% 100% / .85);
  font-size: 1.04rem;
  line-height: 1.7;
}
/* 统计行并入 hero：白字系，去掉原来的底边线 */
.masthead .statusbar {
  margin-top: 26px;
  padding: 16px 0 0;
  border-top: 1px solid hsl(0 0% 100% / .22);
  border-bottom: 0;
  color: hsl(0 0% 100% / .78);
}
.masthead .statusbar b { color: #fff; }
.masthead .statusbar .sep { background: hsl(0 0% 100% / .3); }
.masthead .statusbar .sb-right a {
  color: hsl(0 0% 100% / .85);
  border-color: hsl(0 0% 100% / .3);
}
.masthead .statusbar .rss-link .dot { background: #F6C15C; }

/* 深色模式：--primary 会被亮化（小元素要用亮的），但 hero 是大面积色块，
   亮底白字会发飘。这里压暗成深青蓝，白字始终清晰，也与深色页面协调。 */
html[data-mode="dark"] .masthead {
  background:
    radial-gradient(72% 120% at 88% -20%, hsl(0 0% 100% / .06), transparent 60%),
    linear-gradient(135deg, hsl(var(--h) 44% 16%), hsl(var(--h) 42% 24%));
  box-shadow: none;
  border: 1px solid hsl(var(--h) 30% 26%);
}

/* ---------- 4. 顶栏：字号、图标、行高整体抬一档 ---------- */
.topbar-in {
  min-height: 76px;
  padding-top: 0;
  padding-bottom: 0;
}
.brand {
  font-size: 1.55rem;
  gap: 12px;
  letter-spacing: -.02em;
}
.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.nav a {
  font-size: 1.12rem;
  padding: 0 16px;
  /* 中文会在任意字间断行，空间一紧就变成竖排 —— 必须禁止 */
  white-space: nowrap;
  flex-shrink: 0;
}
.nav a::after {
  left: 16px;
  right: 16px;
}

/* ---------- 4. 正文排版：行高、段距、标题层级 ---------- */
/* 治"雾"：① 不加字距（手写体一字距就发撒）
   ② 0.5px 极描边——细笔画字体屏幕发虚的标准解法，肉眼看不见描边但笔画变实 */
.prose {
  font-size: 1.04rem;
  line-height: 1.78;
  letter-spacing: 0;
  text-shadow: 0 0 .5px currentColor;
}
.prose p { margin: 0 0 1.25em; }
.prose li { margin-bottom: .5em; line-height: 1.8; }
.prose h2 {
  font-size: 1.48rem;
  margin: 2em 0 .8em;
  letter-spacing: -.008em;
}
.prose h3 {
  font-size: 1.2rem;
  margin: 1.8em 0 .65em;
}
.prose blockquote {
  font-size: 1.01rem;
  line-height: 1.8;
}
.prose table { font-size: .94rem; }
.prose pre { font-size: .9rem; line-height: 1.7; }
.prose code { font-size: .92em; }

/* ---------- 5. 列表页：标题与摘要往上抬一档 ---------- */
/* 日期列要跟着字号一起加宽：.row 的第一列是固定 px，
   字号变大后 "10.26" 会溢出格子压到标题上。 */
.row { grid-template-columns: 80px minmax(0, 1fr); padding-top: 18px; padding-bottom: 18px; }
.row-title { font-size: 1.25rem; }
.row-desc { font-size: 1rem; line-height: 1.72; }
.row-meta { font-size: .9rem; }
.row-date b { font-size: 1.55rem; }
.row-date span { font-size: .72rem; }

/* ---------- 5. 文章页：把限宽放开一点，右侧别空一大块 ----------
   原来整块限宽 1040px（正文列只剩约 800px），大屏上右侧大片留白。
   正文仍限在 ~70 字/行，超过这个宽度眼睛要来回扫，反而累。 */
/* 正文 70ch（≈743px）+ 间距 + 目录 260px ≈ 1050：
   容器再宽，正文和目录之间就会空出一条，看着像没对齐。 */
.post-layout { max-width: 1050px; }
.prose { max-width: 70ch; }

@media (min-width: 1080px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
}

/* 首页两栏：大屏下侧栏给到 336，右边不再是一条窄缝 */
@media (min-width: 1080px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 60px; }
}

/* 文章头图区：无封面时不再用灰蓝渐变块（那是"雾茫茫"的来源之一），
   改纯白 + 底部细线，和列表卡片同一套语言；有封面图时仍是深色蒙版方案 */
.post-hero { min-height: 240px; }
.post-hero.no-cover {
  min-height: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.post-hero.no-cover .post-hero-in { padding-top: 34px; padding-bottom: 34px; }

/* 首页统计行的字号（位置已并入 hero，样式见第 3 节） */
/* 侧栏正文：行距比正文紧一档，但别挤成一坨 */
.side-about, .side-card p { line-height: 1.75; font-size: .9rem; }

/* ---------- 6. 特稿：封面别抢戏，文字区留足 ---------- */
/* 封面原来占 48%，一张纯色渐变占比过大显得空；收到 42%，标题不再折行 */
.feature { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); }
.feature-body { padding: 28px 30px; gap: 12px; }
.feature-badge { font-size: .74rem; }

/* ---------- 6. 侧栏与辅助文字 ---------- */
.side-card { font-size: .92rem; }
.hint { font-size: .88rem; line-height: 1.7; }
.footnote, .footer-in { font-size: .88rem; }

/* ---------- 7. 后台：表单与列表，别让人眯眼 ---------- */
.side-link { font-size: .95rem; }
.admin-main { font-size: .96rem; }
.stat-card .k { font-size: .8rem; }
.stat-card .v { font-size: 1.56rem; }
.stat-card .d { font-size: .8rem; }
.row-item .t { font-size: 1.02rem; }
.row-item .m { font-size: .85rem; }
.input, .textarea, .select { font-size: .95rem; }
.btn { font-size: .92rem; }

/* ---------- 9. 窄屏：基准收回 16px，别把版面挤爆 ---------- */
@media (max-width: 720px) {
  html { font-size: 16px; }
  body { line-height: 1.78; }
  .topbar-in { min-height: 64px; }
  .brand { font-size: 1.16rem; gap: 8px; }
  .brand .mark { width: 26px; height: 26px; }
  .nav a { font-size: .98rem; padding: 0 9px; }
  .nav a::after { left: 9px; right: 9px; }
  .prose { font-size: 1.04rem; line-height: 1.82; }
  .masthead { margin: 16px 0 18px; padding: 30px 26px 26px; border-radius: 20px; }
  .mast-title { font-size: 2.1rem; }
  .mast-desc { font-size: .96rem; margin-top: 10px; }
  .masthead .statusbar { margin-top: 18px; padding-top: 13px; }
  .prose h2 { font-size: 1.42rem; margin: 2.1em 0 .75em; }
  .prose h3 { font-size: 1.2rem; }
  .row { grid-template-columns: 62px minmax(0, 1fr); }
  .row-title { font-size: 1.12rem; }
  .row-desc { font-size: .95rem; }
  .row-date b { font-size: 1.2rem; }
  .feature-body { padding: 22px 22px; }
}

@media (max-width: 420px) {
  html { font-size: 15.5px; }
  .row-title { font-size: 1.06rem; }
}

/* ---------- 8. 回到顶部：青蓝渐变圆钮 + 白蝶 ----------
   56px 大触达、进场弹跳（cubic-bezier 回弹）、待机每 3 秒轻浮一下。
   小蝶用站点 IP，和顶栏 logo 同源。 */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dp), var(--primary));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 42%, transparent),
              0 2px 6px hsl(220 12% 32% / .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.55);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
              opacity .28s ease, visibility .28s, box-shadow .25s ease;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.to-top.show:hover {
  transform: translateY(-5px) scale(1.07);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--primary) 50%, transparent),
              0 3px 8px hsl(220 12% 32% / .14);
}
.to-top.show:active { transform: translateY(-1px) scale(1.02); }
.to-top svg { display: block; }
/* 待机轻浮：像蝴蝶停在指尖 */
.to-top.show svg { animation: btFloat 3.2s ease-in-out infinite; }
@keyframes btFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top.show svg { animation: none; }
  .to-top { transition: opacity .2s, visibility .2s; }
}

/* ---------- 9. 阅读进度条（文章页） ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.read-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-dp));
  border-radius: 0 2px 2px 0;
  transition: width .12s linear;
}

/* ---------- 10. 移动端 ---------- */
@media (max-width: 720px) {
  .to-top { width: 50px; height: 50px; right: 18px; bottom: 18px; }
  .to-top svg { width: 26px; height: 26px; }
}

/* ============================================================
   主题差异化：原来 5 套主题只换 --h（色相），
   但背景是 99.4% 亮度，再换色相也看不出区别 —— 这就是"没啥变化"。
   现在每套主题都给：独立的背景氛围 + 独立的 hero 渐变。
   ============================================================ */
:root {
  --hero-a: hsl(198 46% 34%);
  --hero-b: hsl(198 44% 44%);
}
/* 海盐苏打：冷冽清爽（默认） */
body:has(#t-sky:checked) {
  --bg: hsl(198 26% 99.2%);
  --bg-2: hsl(198 24% 96.2%);
  --soft: hsl(198 28% 95.2%);
  --hero-a: hsl(198 46% 33%);
  --hero-b: hsl(196 45% 45%);
}
/* 薄荷汽水：绿意通透，背景带一层薄荷 */
body:has(#t-mint:checked) {
  --bg: hsl(158 30% 98.9%);
  --bg-2: hsl(158 28% 95.8%);
  --soft: hsl(158 30% 94.8%);
  --rule: hsl(158 16% 87%);
  --hero-a: hsl(165 42% 28%);
  --hero-b: hsl(160 44% 42%);
}
/* 蜜桃乌龙：奶油暖调，背景偏米黄 */
body:has(#t-peach:checked) {
  --bg: hsl(32 46% 98.2%);
  --bg-2: hsl(30 42% 95.4%);
  --soft: hsl(30 44% 94.2%);
  --rule: hsl(28 22% 87.5%);
  --ink: hsl(24 22% 18%);
  --muted: hsl(24 12% 41%);
  --hero-a: hsl(18 54% 34%);
  --hero-b: hsl(26 62% 48%);
}
/* 莓果气泡：淡紫粉，背景带一点甜 */
body:has(#t-berry:checked) {
  --bg: hsl(316 32% 98.9%);
  --bg-2: hsl(316 30% 95.8%);
  --soft: hsl(316 32% 94.8%);
  --rule: hsl(316 16% 88%);
  --ink: hsl(300 18% 18%);
  --muted: hsl(300 9% 41%);
  --hero-a: hsl(310 44% 30%);
  --hero-b: hsl(325 52% 46%);
}
/* 青柠气泡：清新黄绿 */
body:has(#t-lime:checked) {
  --bg: hsl(78 34% 98.7%);
  --bg-2: hsl(78 32% 95.6%);
  --soft: hsl(78 34% 94.6%);
  --rule: hsl(78 18% 87%);
  --ink: hsl(80 16% 18%);
  --hero-a: hsl(88 38% 27%);
  --hero-b: hsl(82 40% 40%);
}
/* hero 渐变跟随主题 */
.masthead {
  background:
    radial-gradient(72% 120% at 88% -20%, hsl(0 0% 100% / .14), transparent 60%),
    linear-gradient(135deg, var(--hero-a), var(--hero-b));
}
html[data-mode="dark"] .masthead {
  background:
    radial-gradient(72% 120% at 88% -20%, hsl(0 0% 100% / .06), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--hero-a) 55%, #070c10),
                            color-mix(in srgb, var(--hero-b) 40%, #070c10));
  border-color: color-mix(in srgb, var(--hero-b) 30%, transparent);
}

/* ============================================================
   右上角入口：登录 / 后台
   原来塞在导航里（"文章 归档 关于 登录"），不显眼也不好点。
   现在独立成胶囊按钮，用 order 排到最右（外观图标之后）。
   ============================================================ */
.nav { order: 1; }
.appearance { order: 2; }
.topbar-entry {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
}
.entry-btn svg { width: 17px; height: 17px; flex: none; }
.entry-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--rule));
  color: var(--primary-dp);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}
/* 登录态下的「后台」是实心主色，一眼能找到入口 */
.entry-btn-solid {
  border-color: transparent;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  color: #fff;
}
.entry-btn-solid:hover { color: #fff; filter: brightness(1.06); }
.entry-btn.is-out svg { transform: scaleX(-1); }

/* ============================================================
   功能按钮统一升级：返回、到顶
   .back-link 原来是个 0.84rem 的小灰字链接，几乎点不着
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px 0 16px;
  margin-bottom: 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .95rem;
  font-family: inherit;
  letter-spacing: 0;
  text-decoration: none;
  transition: all .18s ease;
}
.back-link:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--rule));
  background: var(--soft);
  color: var(--primary-dp);
  transform: translateX(-2px);
}
.back-link svg, .back-link .arw { font-size: 1rem; line-height: 1; }

/* 到顶按钮再放大一档：56 → 62（移动端 54），蝴蝶也放大 */
.to-top { width: 62px; height: 62px; right: 28px; bottom: 28px; }
.to-top svg { width: 34px; height: 34px; }

/* ============================================================
   首屏冲击：hero 标题放大 + 统计数字成"数据亮点" + 巨蝶剪影
   ============================================================ */
.masthead { position: relative; overflow: hidden; }
.masthead > * { position: relative; z-index: 1; }
/* 右上角一只巨大的淡蝶，纯氛围不抢字 —— 品牌感与视觉冲击都来自它 */
.masthead::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -54px;
  width: 360px;
  height: 360px;
  background: #fff;
  opacity: .055;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
  transform: rotate(-16deg);
  pointer-events: none;
  z-index: 0;
}
.mast-title { font-size: clamp(2.4rem, 4.2vw, 3.7rem); line-height: 1.06; }
.mast-desc { font-size: 1.1rem; }
.masthead .statusbar { font-size: .92rem; }
.masthead .statusbar b { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; }

@media (max-width: 720px) {
  /* 390px 宽下 品牌114 + 导航146 + 外观42 + 登录77 会溢出 24px：
     入口在窄屏只留图标（aria-label 兜住可访问性），品牌名收一档 */
  .entry-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .entry-btn span { display: none; }
  .entry-btn svg { width: 18px; height: 18px; }
  .topbar-entry { margin-left: 2px; gap: 6px; }
  .brand { font-size: 1.06rem; }
  .masthead::after { width: 230px; height: 230px; right: -70px; top: -40px; opacity: .09; }
  .mast-title { font-size: 2.35rem; }
  .masthead .statusbar b { font-size: 1.25rem; }
  .to-top { width: 54px; height: 54px; right: 18px; bottom: 18px; }
  .to-top svg { width: 30px; height: 30px; }
  .back-link { height: 40px; font-size: .9rem; }
}

/* ============================================================
   归档页：从"光秃秃的列表"改成有时间感 + 领域入口的页面
   ============================================================ */
.arc-hero {
  padding: 40px 0 26px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 30px;
}
.arc-title {
  margin: 0;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.arc-sub {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-size: .98rem;
}
.arc-stats { display: flex; gap: 8px; }
.arc-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: .86rem;
}
.arc-stats b {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary-dp);
  font-variant-numeric: tabular-nums;
}

/* 列表 + 领域侧栏
   v5.css 把 .archive-layout 限死在 820px 并居中 —— 再加侧栏会把列表压成一条。
   这里放开宽度，改三栏自适应：年份导航 | 列表 | 领域。 */
.arc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1080px) {
  .archive-layout {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 48px;
    max-width: none;
    margin: 0;
  }
  .arc-main { grid-template-columns: minmax(0, 1fr) 264px; gap: 48px; }
  /* 年份导航被隐藏时退回单列，否则列表会被挤进 148px 的空列 */
  .archive-layout.no-yearnav { grid-template-columns: minmax(0, 1fr); }
}
.arc-side {
  border-left: 1px solid var(--rule);
  padding-left: 26px;
  align-self: start;
  position: sticky;
  top: 96px;
}
.arc-side-t {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 14px;
}
.arc-tags { display: flex; flex-direction: column; gap: 2px; }
.arc-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .16s, color .16s;
}
.arc-tag b {
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.arc-tag:hover { background: var(--soft); color: var(--primary-dp); }

/* 年份标签：大数字 + 篇数 + 12 个月的点阵 */
.year-label {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.yl-num {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--primary-dp);
  font-variant-numeric: tabular-nums;
}
.yl-cnt { font-size: .84rem; color: var(--muted); }
.month-dots {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.month-dots i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--rule);
  opacity: .7;
  transition: transform .16s, background-color .16s;
}
.month-dots i.on {
  background: var(--primary);
  opacity: 1;
}
.month-dots i:hover { transform: scale(1.35); }

/* 归档行：标题后面跟标签 */
.arow .t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arow-tag {
  font-size: .74rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 400;
  flex: none;
}
.arow:hover .arow-tag { color: var(--primary-dp); }

/* logo 配色：内联 SVG 用变量，跟着主题一起变 —— 暖色主题里不会再突兀地立着一只蓝蝶 */
:root {
  --logo-u1: #5BA8C4; --logo-u2: #2C6076;
  --logo-l1: #8FD0C8; --logo-l2: #4E90A8;
  --logo-dot: #E8833A;
  --logo-body: #1E3A4A;
}
body:has(#t-mint:checked)  { --logo-u1: #5FC4A6; --logo-u2: #2A6B58;
                             --logo-l1: #A8E3CD; --logo-l2: #4DA48C;
                             --logo-dot: #E8A63A; --logo-body: #1B3A32; }
body:has(#t-peach:checked) { --logo-u1: #E8A173; --logo-u2: #8C4628;
                             --logo-l1: #F2C9A8; --logo-l2: #C67A4E;
                             --logo-dot: #8C3A24; --logo-body: #3A2118; }
body:has(#t-berry:checked) { --logo-u1: #C97FB6; --logo-u2: #6E2B63;
                             --logo-l1: #E8B3D9; --logo-l2: #B2387F;
                             --logo-dot: #E8A63A; --logo-body: #33102C; }
body:has(#t-lime:checked)  { --logo-u1: #A8C46B; --logo-u2: #47602B;
                             --logo-l1: #D0E3A8; --logo-l2: #718F3D;
                             --logo-dot: #E8833A; --logo-body: #26301A; }

/* ============================================================
   触达尺寸统一：WCAG 2.5.8 最低 24px，苹果 HIG 建议 44px。
   体检实测发现一批 22–38px 的按钮/链接，逐类提到 44（目录项 40）。
   ============================================================ */
/* 外观（明暗/配色）图标按钮：34 → 44 */
.ico-btn { width: 44px; height: 44px; }
.ico-btn svg { width: 21px; height: 21px; }

/* 首页排序切换：38 → 44 */
.sortbar button { min-height: 44px; padding: 0 20px; font-size: .9rem; }

/* 标签筛选：36 → 44 */
.tag-btn { min-height: 44px; padding: 0 18px; font-size: .86rem; }

/* 侧栏 RSS 链接 */
.statusbar .sb-right a, .rss-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color .18s, background-color .18s;
}
.statusbar .sb-right a:hover, .rss-link:hover { border-color: var(--rule); background: hsl(0 0% 100% / .1); }

/* 文章页右侧目录：条目 28 → 40，悬停更明显 */
.toc a { min-height: 40px; display: flex; align-items: center; padding: 0 0 0 4px; }
.toc a.lv3 { min-height: 38px; }

/* 文章工具栏的小按钮 */
.tool, .btn-sm { min-height: 40px; }

/* 登录页「返回首页」：22 → 44 */
.back-home, .auth-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: .92rem;
}

@media (max-width: 720px) {
  .ico-btn { width: 42px; height: 42px; }
  .tag-btn { min-height: 42px; padding: 0 15px; }
  .sortbar button { min-height: 42px; }
}

/* 零散小链接补齐（体检剩余项）：页脚、侧栏排行、登录页返回、代码复制 */
.lg-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: .92rem;
}
#rankList a, .side-hot a, .hot-list a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 4px 0;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
}
.btn-sm, #copyLink { min-height: 40px; }
.side-more, .side-title a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* 360px 及以下（iPhone SE 一代这类最窄机型）：再收一档内边距与品牌名，
   保证顶栏不产生横向滚动 */
@media (max-width: 380px) {
  .topbar-in { padding-left: 14px; padding-right: 14px; }
  .brand { font-size: .95rem; gap: 6px; }
  .brand .mark { width: 24px; height: 24px; }
  .nav a { padding: 0 7px; font-size: .93rem; }
  .entry-btn { width: 40px; height: 40px; }
  .ico-btn { width: 40px; height: 40px; }
}

/* ============================================================
   键盘可达：跳到主内容（平时移出视口，Tab 聚焦时滑出）
   ============================================================ */
.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 200;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--hero-a);
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 28px hsl(220 12% 20% / .28);
  transition: transform .2s ease;
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* 文章页 CLS：骨架屏撑住首屏高度，正文注入后不再整页下坠
   （实测骨架 → 内容的高度跳变是 CLS 0.12 的主因） */
#page { min-height: calc(100vh - 76px); }
@media (max-width: 720px) { #page { min-height: calc(100vh - 64px); } }