/* ==========================================================================
   nphy.top · 高级视觉升级层（v1.5.0）
   --------------------------------------------------------------------------
   这一层只做「质感升级」，不改变任何结构：
     · 更沉稳的配色与更细腻的层次（保留蓝白基调，压掉糖果色）
     · 更讲究的排版节奏（字阶、行高、字距、留白）
     · 更精致的组件细节（渐变描边、分层阴影、悬浮反馈、导航指示）
     · 全部基于现有 CSS 变量，5 套皮肤（科技/动漫/复古/风景/自然）继续生效
   加载顺序在 style.css 之后，同优先级下覆盖它；
   想回滚只需在 partials/header.php 里删掉这一行的 <link>。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌：更克制的蓝白 + 更细腻的阴影
   （:root 只影响默认皮肤；body.theme-* 的变量优先级更高，不会被这里覆盖）
   -------------------------------------------------------------------------- */

:root {
  --bg: #f4f6fa;
  --bg-2: #ffffff;
  --bg-3: #e9edf5;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --border: #e4e9f2;
  --border-soft: #eef2f8;
  --text: #0f172a;
  --text-dim: #47536b;
  --muted: #8592a8;
  --accent: #2563eb;
  --accent-deep: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, .10);
  --accent-2: #f59e0b;
  --accent-2-soft: rgba(245, 158, 11, .14);
  --pink: #ec4899;
  --pink-soft: rgba(236, 72, 153, .12);
  --green: #10b981;
  --danger: #ef4444;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 40px -18px rgba(16, 24, 40, .22);
  --maxw: 1280px;
  --code-bg: #f6f8fc;

  /* 升级层新增令牌 */
  --grad-accent: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --grad-line: linear-gradient(90deg, rgba(37, 99, 235, .0), rgba(37, 99, 235, .55), rgba(124, 58, 237, .0));
  --ring: 0 0 0 3px rgba(37, 99, 235, .14);
  --header-h: 66px;
}

[data-theme="dark"] {
  --bg: #0a0e14;
  --bg-2: #0f141c;
  --bg-3: #161c26;
  --panel: #121821;
  --panel-2: #161d27;
  --border: #232c39;
  --border-soft: #1b232e;
  --text: #e9eef7;
  --text-dim: #a6b4c8;
  --muted: #74839a;
  --accent: #5b8cff;
  --accent-deep: #8bb0ff;
  --accent-soft: rgba(91, 140, 255, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 44px -20px rgba(0, 0, 0, .8);
  --code-bg: #0d121a;
  --grad-accent: linear-gradient(135deg, #4f7cff 0%, #a855f7 100%);
  --ring: 0 0 0 3px rgba(91, 140, 255, .18);
}

/* 背景：从「糖果云」改成「冷调柔光」，更克制 */
.bg-deco {
  background:
    radial-gradient(760px 420px at 6% -8%, rgba(37, 99, 235, .10), transparent 66%),
    radial-gradient(620px 380px at 96% -2%, rgba(124, 58, 237, .08), transparent 64%),
    radial-gradient(900px 480px at 50% 108%, rgba(16, 185, 129, .06), transparent 70%);
}

[data-theme="dark"] .bg-deco {
  background:
    radial-gradient(760px 420px at 6% -8%, rgba(79, 124, 255, .14), transparent 66%),
    radial-gradient(620px 380px at 96% -2%, rgba(168, 85, 247, .10), transparent 64%);
}

/* --------------------------------------------------------------------------
   2. 排版：字阶、字距、留白
   -------------------------------------------------------------------------- */

body {
  font-size: 15.5px;
  line-height: 1.78;
  letter-spacing: .01em;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4 {
  letter-spacing: -.018em;
  line-height: 1.32;
  font-weight: 700;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: rgba(37, 99, 235, .18); color: inherit; }

/* 细滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* 键盘聚焦可见 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   3. 顶部导航：玻璃感 + 渐变指示
   -------------------------------------------------------------------------- */

.site-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--bg); }
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--grad-line);
  opacity: .55;
}

.header-inner { min-height: var(--header-h); gap: 18px; }

.brand { font-size: 17px; letter-spacing: -.02em; }
.brand img {
  width: 34px; height: 34px;
  border: 2px solid var(--panel);
  box-shadow: var(--shadow);
}
.brand-name span { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-link {
  position: relative;
  padding: 7px 13px;
  font-size: 14.5px;
  color: var(--text-dim);
  transition: color .18s, background .18s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) cubic-bezier(.22, .8, .28, 1);
}
.nav-link:hover { background: transparent; color: var(--text); }
.nav-link:hover::after { transform: scaleX(.55); }
.nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.nav-link.is-active::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. 布局与区块节奏：更宽的内容区、更舒展的留白
   -------------------------------------------------------------------------- */

.container { padding: 0 24px; }

.layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  padding: 28px 24px 12px;
}

.section { padding: 34px 0; }

.section-head { margin-bottom: 20px; gap: 14px; }

.section-title {
  font-size: 19px;
  font-weight: 700;
  gap: 12px;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 19px;
  border-radius: var(--r-xs);
  background: var(--grad-accent);
  box-shadow: 0 2px 10px -2px rgba(37, 99, 235, .5);
}

.section-sub { font-size: 13.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   5. 卡片：分层阴影 + 渐变描边 + 悬浮抬升
   -------------------------------------------------------------------------- */

.card,
.side-card,
.post-card,
.demo-card,
.tool-card,
.page-head,
.toolbar,
.msg-item,
.log-item,
.stat-box,
.admin-panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: border-color var(--t-base), box-shadow var(--t-slow), transform var(--t-slow);
}

.card:hover,
.post-card:hover,
.demo-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .card:hover, .post-card:hover, .demo-card:hover { border-color: var(--accent); }
}

.card-title,
.post-title {
  font-size: 17px;
  letter-spacing: -.012em;
  transition: color .18s;
}

.card-excerpt,
.post-excerpt { line-height: 1.75; color: var(--text-dim); }

/* 卡片封面：轻微放大 + 底部渐隐，显得更"实" */
.post-cover { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.post-cover img { transition: transform var(--t-slower) cubic-bezier(.22, .8, .28, 1); }
.post-card:hover .post-cover img { transform: scale(1.06); }
.post-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(10, 15, 25, .28));
  opacity: 0;
  transition: opacity var(--t-slow);
}
.post-card:hover .post-cover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   6. 按钮：渐主色 + 细腻描边
   -------------------------------------------------------------------------- */

.btn {
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: .01em;
  transition: transform .18s, box-shadow var(--t-base), background .18s, border-color .18s, color .18s;
}

.btn-primary {
  background: var(--grad-accent);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, .7);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(37, 99, 235, .8);
  color: #fff;
}

.btn-ghost {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--panel);
}

.btn-sm { padding: 6px 13px; border-radius: var(--r-sm); }

.icon-btn {
  border-radius: var(--r-md);
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.icon-btn:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   7. 侧边栏：更精致的个人信息卡
   -------------------------------------------------------------------------- */

.sidebar { top: calc(var(--header-h) + 16px); gap: 18px; }

.side-card { padding: 18px 18px 20px; }

.side-title { font-size: 14px; letter-spacing: .02em; text-transform: none; }
.side-title::before {
  width: 5px; height: 5px;
  box-shadow: var(--ring);
}

.profile-card { padding-top: 26px; }

/* 头像：渐变圆环 */
.profile-avatar {
  width: 92px; height: 92px;
  padding: 3px;
  border: 0;
  background: var(--grad-accent);
  box-shadow: 0 10px 26px -12px rgba(37, 99, 235, .8);
}
.profile-avatar img {
  border-radius: 50%;
  border: 3px solid var(--panel);
  background: var(--bg-3);
}

.profile-name { font-size: 17.5px; letter-spacing: -.01em; }
.profile-sign { color: var(--muted); }

/* 数据三栏：加分隔线，更像"数据卡" */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 14px 0 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel-2);
}
.profile-stats > * {
  padding: 11px 6px;
  border-left: 1px solid var(--border-soft);
}
.profile-stats > *:first-child { border-left: 0; }
.profile-stats b { display: block; font-size: 18px; letter-spacing: -.02em; }
.profile-stats span { font-size: 11.5px; color: var(--muted); }

/* 侧栏列表项：更细腻的分隔 */
.side-item {
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}
.side-item:first-child { border-top: 0; padding-top: 0; }
.side-item a { font-size: 13.5px; line-height: 1.55; }
.side-item a:hover { color: var(--accent-deep); }
.side-item span { font-size: 11.5px; color: var(--muted); }
.side-thumb img { border-radius: var(--r-sm); }

/* 标签云：胶囊化 */
.tag-cloud a {
  border-radius: var(--r-pill);
  background: var(--panel-2);
  transition: .18s;
}
.tag-cloud a:hover { background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   8. 首页 Hero：更高级的排版与玻璃质感
   -------------------------------------------------------------------------- */

.hero-inner { padding-top: 78px; padding-bottom: 62px; }

.hero-title,
.hero-typed {
  letter-spacing: -.03em;
  text-shadow: 0 2px 30px rgba(6, 12, 24, .35);
}

.hero-badge {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11.5px;
}

.hero-hi { letter-spacing: .18em; opacity: .82; }

.hero-quote {
  backdrop-filter: blur(10px);
  background: rgba(12, 18, 30, .28);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}
.hq-text { line-height: 1.85; }
.hq-author { letter-spacing: .04em; opacity: .78; }

/* Hero 里的站点数据：做成玻璃胶囊 */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hero-meta > *,
.hero-meta .hm-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9);
}
.hero-meta .hm-item b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.hero-meta .dot-sep { display: none; }

/* 头像：白环 + 光晕 */
.hero-avatar {
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------------
   9. 首页：欢迎条 / 归档快按钮 / 分类 chips
   -------------------------------------------------------------------------- */

.welcome-box {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  font-size: 14.5px;
}

.archive-btn {
  border-radius: var(--r-lg);
  border-width: 1px;
  padding: 15px 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: var(--shadow);
  transition: transform var(--t-base), box-shadow var(--t-slow), border-color var(--t-base);
}
.archive-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.archive-btn small { font-weight: 500; opacity: .78; }

.chip {
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 7px 15px;
  font-size: 13.5px;
  transition: .18s;
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.chip.is-active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .8);
}

/* 教程专题横卡 */
.topic-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-base);
}
.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.topic-cover img { transition: transform var(--t-slower) cubic-bezier(.22, .8, .28, 1); }
.topic-card:hover .topic-cover img { transform: scale(1.05); }
.topic-tag {
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  background: rgba(10, 15, 25, .5);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   10. 文章页：阅读体验的"出版级"细节
   -------------------------------------------------------------------------- */

.article-wrap { max-width: 820px; }

.article-head h1 {
  font-size: clamp(25px, 4vw, 34px);
  letter-spacing: -.028em;
  line-height: 1.34;
}

.article-banner img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.article-body {
  font-size: 16.5px;
  line-height: 1.92;
  color: var(--text-dim);
}
.article-body > p { margin: 0 0 18px; }

/* 二级标题：渐变竖条 + 更明确的层级 */
.article-body h2 {
  position: relative;
  font-size: 22px;
  margin: 40px 0 16px;
  padding-left: 15px;
  color: var(--text);
}
.article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .18em;
  width: 4px;
  border-radius: var(--r-xs);
  background: var(--grad-accent);
}
.article-body h3 {
  font-size: 18.5px;
  margin: 32px 0 12px;
  color: var(--text);
}

/* 行内代码 */
.article-body code {
  border-radius: var(--r-sm);
  padding: 2px 7px;
  font-size: .88em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 代码块：深色卡 + 顶部工具条 */
pre {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #0c1118;
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.72;
}
[data-theme="dark"] pre { background: #0a0f16; }
pre::before {
  content: "";
  display: block;
  height: 10px;
  margin: -20px -22px 14px;
  background:
    radial-gradient(circle at 16px 0, #ff5f57 0 5px, transparent 5px),
    radial-gradient(circle at 32px 0, #febc2e 0 5px, transparent 5px),
    radial-gradient(circle at 48px 0, #28c840 0 5px, transparent 5px);
  background-position: 0 5px, 0 5px, 0 5px;
  background-repeat: no-repeat;
  opacity: .9;
}
.code-copy { border-radius: var(--r-sm); backdrop-filter: blur(6px); }

/* 引用块：加引号装饰 */
.article-body blockquote {
  position: relative;
  border-left: 3px solid transparent;
  border-image: var(--grad-accent) 1;
  background: var(--panel-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 20px 16px 22px;
  font-size: 15.5px;
}
.article-body blockquote::before {
  content: "“";
  position: absolute;
  left: 10px;
  top: -6px;
  font-size: 42px;
  line-height: 1;
  color: var(--accent);
  opacity: .18;
  font-family: Georgia, serif;
}

/* 元信息条 */
.article-meta {
  border-top: 0;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 18px;
  gap: 16px;
}

/* 上一篇 / 下一篇 */
.pn-item {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: var(--t-base);
}
.pn-item:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   11. 列表 / 表格 / 分页 / 表单
   -------------------------------------------------------------------------- */

.list-item {
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: border-color var(--t-base), box-shadow var(--t-slow), transform var(--t-base);
}
.list-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateX(3px);
}

.toolbar {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.input, .select, .textarea {
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--panel);
}

table.data th {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--muted);
}
table.data tr:hover td { background: var(--panel-2); }

.pager-btn, .pager-num {
  border-radius: var(--r-sm);
  min-width: 38px;
  text-align: center;
  transition: .18s;
}
.pager-num.is-active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .8);
}

/* 标签 */
.tag {
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  color: var(--muted);
}
.tag:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

.badge { border-radius: var(--r-sm); font-weight: 600; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   12. 页脚：更清晰的分层
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 72px;
  padding: 44px 0 46px;
  background: var(--bg-2);
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-line);
  opacity: .6;
}

/* 风景皮肤：背景图很亮，页脚用更实的磨砂底，保证小字能看清 */
body.theme-scenery .site-footer {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -12px 34px rgba(10, 30, 50, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

.footer-stats { gap: 18px; padding-bottom: 30px; }
.stat-num {
  font-size: 22px;
  letter-spacing: -.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { font-size: 11.5px; letter-spacing: .02em; }
.footer-bottom { gap: 8px; padding-top: 0; }
.footer-copy a:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   13. 订阅页 / 消息 / 空状态等零散组件
   -------------------------------------------------------------------------- */

.notice {
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}

.msg-item { border-radius: var(--radius); }
.msg-avatar {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(37, 99, 235, .9);
}

.topic-chip {
  border-radius: var(--r-pill);
  transition: transform .18s, border-color .18s, background .18s, color .18s;
}
.topic-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.topic-chip.is-on { box-shadow: 0 8px 20px -14px rgba(37, 99, 235, .9); }

.empty { color: var(--muted); }

/*
 * 卡片入场：改成「只做位移，不做透明度」。
 * 原来的 html.js .reveal{opacity:0} 在慢网络 / JS 未执行完 / 观察器没触发时，
 * 会让正文长时间发灰甚至看不见；改成位移后最坏也只是偏几像素，内容始终可读。
 */
html.js .reveal {
  opacity: 1;
  transform: translateY(12px);
  transition: transform var(--t-slower) cubic-bezier(.22, .8, .28, 1);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* 筛选区与工具条：统一节奏，避免三行控件"各站各的" */
.chip-row { gap: 10px; margin-bottom: 16px; align-items: center; }
.chip-row + .chip-row { margin-top: -6px; }
.toolbar { gap: 10px; }
.toolbar .input,
.toolbar .select,
.toolbar .btn { height: 40px; }
.toolbar .btn { display: inline-flex; align-items: center; }

/* 回到顶部：更圆润 */
.to-top {
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   14. 响应式微调（大屏更舒展，小屏不局促）
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  :root { --maxw: 1320px; }
}

@media (max-width: 1080px) {
  /* 关键：本层把 .layout 写成了固定两列，这里必须把原有断点补回来，
     否则窄屏 / 手机会横向溢出（侧栏被挤出屏幕外）。 */
  .layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px 8px; }
  .sidebar { position: static; top: auto; }
  .side-order { order: 2; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero-inner { padding-top: 56px; padding-bottom: 44px; }
  .section { padding: 26px 0; }
  .site-footer { padding: 34px 0 36px; margin-top: 52px; }
  pre { padding: 16px 16px 18px; }
  /* 手机上归档快按钮两列，别再横向溢出 */
  .archive-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-meta { gap: 8px; }
  .hero-meta .hm-item { padding: 8px 13px; font-size: 12px; }
  .profile-stats b { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   15. 尊重系统「减少动态效果」
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .post-card:hover,
  .demo-card:hover,
  .topic-card:hover,
  .archive-btn:hover,
  .list-item:hover,
  .pn-item:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   16. 底部导航栏 & 友链图标（v1.66.0）

   两件事：
     a) 页脚那条链接行从「文字 · 文字 · 文字」改成带图标的胶囊行，
        窄屏折行时不再出现孤零零的「·」；
     b) 友链图标统一在「白色圆底 + contain」里显示，深色 logo、透明 logo
        都有底色衬托，也不会被裁掉边角。
   -------------------------------------------------------------------------- */

/* ---------- a. 页脚导航：图标 + 胶囊 ---------- */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
}

/* 分隔符已由间距取代（HTML 里也不再输出），留着是为了兼容旧缓存页面 */
.footer-links .dot-sep { display: none; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}

.footer-links a .fn-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: .72;
  transition: opacity .18s, transform .18s;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: var(--border);
  transform: translateY(-1px);
}

.footer-links a:hover .fn-ico,
.footer-links a:focus-visible .fn-ico { opacity: 1; }

/* 触屏：图标常显（本来就在），点击区抬到 44px，手指点得准 */
@media (hover: none) and (pointer: coarse) {
  .footer-links a { min-height: 40px; padding: 8px 14px; }
  .footer-links a:hover { transform: none; }
}

/* ---------- b. 徽章条：图标更大、层次更清楚 ---------- */

.footer-badges {
  gap: 10px;
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
}

.fb {
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--panel);
  border-color: var(--border-soft);
  color: var(--text-dim);
}

.fb-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.fb-ico img {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  /* 深色 favicon 在深色皮肤上容易糊成一块，给个浅底托盘 */
  background: rgba(255, 255, 255, .88);
  padding: 1px;
  box-sizing: content-box;
}

a.fb:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ---------- 「品牌 + 服务」双色徽章 ----------
   左半边白底放品牌图标与名称，右半边用品牌色写「它给本站提供了什么」。
   右半边的颜色由行内 --fb2 决定，所以一个组件能管住所有服务商。 */

.fb2 {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(16, 40, 70, .14);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.fb2:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 40, 70, .2);
}

.fb2-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #fff;
  color: #1f2a37;
  white-space: nowrap;
}

.fb2-brand img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.fb2-brand b { font-weight: 600; }

.fb2-svc {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--fb2, #04314D);
  color: #fff;
  white-space: nowrap;
}

/* 深色皮肤下左半边跟着面板走，不然一排刺眼的白块 */
[data-theme="dark"] .fb2-brand { background: var(--panel); color: var(--text); }

/* 倍信通认证标识（官方嵌入的是 35px 高的图片，比双色徽章略高，居中即可） */
.fb-cert {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--t-base);
}

.fb-cert:hover { transform: translateY(-1px); }

.fb-cert img {
  display: block;
  height: 35px;
  width: auto;
  max-width: none;
}

/* 三年之约电子标识（官方横幅 130×45，比胶囊徽章高，单独占一行） */
.footer-march {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
}

.footer-march a {
  display: inline-block;
  line-height: 0;
  border-radius: 5px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.footer-march a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(208, 16, 41, .22);
}

.footer-march img {
  display: block;
  width: 130px;
  height: 45px;
}

/* 证书脚本插入的徽章：官方默认 100px 宽，这里限制一下并让它跟电子标识垂直居中 */
.footer-march-cert {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer-march-cert #snzy-badge-link img {
  width: 100px !important;
  height: auto !important;
}

/* Trust SSL 蓝色商务安全签章：和电子标识同高，点击弹出官方验证页 */
.footer-trustssl {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: 5px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.footer-trustssl:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 150, 170, .22);
}

.footer-trustssl img {
  display: block;
  height: 45px;
  width: auto;
}

/* ---------- c. 友链图标 ---------- */

.link-avatar {
  background: #fff;
  padding: 3px;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(90, 150, 200, .2), 0 0 0 1px var(--border-soft) inset;
}

/* contain 而不是 cover：logo 不做裁切，边缘不会被切掉 */
.link-avatar img { object-fit: contain; border-radius: 50%; }

.link-info b { line-height: 1.35; }

/* 友链动态里的站点名前面也带上自家图标，扫一眼就知道是哪家 */
.ff-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.ff-site .ff-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: var(--r-xs);
  object-fit: contain;
  background: #fff;
  padding: 1px;
  box-sizing: content-box;
}

/* 手机档：页脚导航两列，别把长文字挤成一条线 */
@media (max-width: 479px) {
  .footer-links { gap: 4px; }
  .footer-links a { padding: 5px 10px; font-size: 12.5px; }
  .footer-badges { gap: 8px; }
}

/* ==========================================================================
   17. 液态玻璃导航栏（v1.70.0）

   液态玻璃（Liquid Glass）的观感由四层叠出来，少一层就退化成"普通毛玻璃"：
     ① 折射底：backdrop-filter 的 blur + saturate，把背后的内容揉开并提色
     ② 高光棱：顶边一条 1px 内高光，模拟光打在玻璃边缘
     ③ 柔光：跟随指针的一团径向高光 —— 玻璃"活着"靠的就是它
     ④ 指示块：会滑动、带一点回弹的玻璃胶囊，这才是"液态"那部分

   性能取舍：backdrop-filter 只用在两处（整条栏 + 一块指示块），
   而不是给 8 个导航项各挂一个 —— 后者会一口气建出 8 个合成层，
   在带背景动画的首页上，低配机直接掉帧。
   ========================================================================== */

:root {
  --glass-blur: 22px;
  --glass-sat: 175%;

  /* 实心底上的玻璃（普通页面、滚动之后） */
  --glass-bar: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56));
  --glass-edge: rgba(255, 255, 255, .9);       /* 顶部高光棱 */
  --glass-hair: rgba(255, 255, 255, .5);       /* 底部细高光 */
  --glass-shadow: 0 12px 32px -14px rgba(16, 40, 70, .3);
  --glass-sheen: rgba(255, 255, 255, .5);

  /* 指示块：淡主色 + 白玻璃 */
  --glass-blob-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38)), rgba(37, 99, 235, .16);
  --glass-blob-ring: rgba(37, 99, 235, .2);
}

[data-theme="dark"] {
  --glass-bar: linear-gradient(180deg, rgba(26, 34, 46, .76), rgba(16, 22, 32, .64));
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-hair: rgba(255, 255, 255, .07);
  --glass-shadow: 0 12px 32px -14px rgba(0, 0, 0, .6);
  --glass-sheen: rgba(255, 255, 255, .16);
  --glass-blob-bg: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)), rgba(96, 165, 250, .14);
  --glass-blob-ring: rgba(255, 255, 255, .22);
}

/* ---------- ① 玻璃底：单独一层，不和「首页透明 / 滚过实心」那几条状态规则打架 ---------- */
.site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* ③ 柔光层：位置由 JS 写的 --sheen-x 决定。
       默认值故意放在画面外 —— 没跑 JS（或禁用了脚本）时就是一团没有， */
    /* 而不是在栏顶中间留一坨不明所以的白光 */
    radial-gradient(420px circle at var(--sheen-x, -999px) var(--sheen-y, -999px),
                    var(--glass-sheen), transparent 68%),
    var(--glass-bar);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 0 1px 0 var(--glass-edge),      /* ② 顶部高光棱 */
    inset 0 -1px 0 var(--glass-hair),
    var(--glass-shadow);
  transition: opacity .32s ease;
}

/* 首页还在横幅上：整条不铺底，把大图完整让出来（导航项自己变成玻璃胶囊） */
body.has-hero .site-header:not(.is-solid)::before { opacity: 0; }

/* 首页滚过横幅之后：原来这里是一条 90% 不透明的实心背景，现在交给玻璃层 */
body.has-hero .site-header.is-solid {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* 浏览器不支持 backdrop-filter：退回接近实心的底色，别糊成一片 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header::before {
    background: var(--bg-2);
    box-shadow: inset 0 -1px 0 var(--border), var(--glass-shadow);
  }
}

/* ---------- ④ 指示块：在导航项之间滑动的玻璃胶囊 ---------- */
.main-nav { position: relative; }

.nav-liquid {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 34px;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  background: var(--glass-blob-bg);
  border: 1px solid var(--glass-blob-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 8px 20px -10px rgba(16, 40, 70, .5);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  /* 带一点回弹的曲线才是"液态"，换成 ease 就是生硬的平移 */
  transition:
    transform .38s cubic-bezier(.22, 1.18, .36, 1),
    width .38s cubic-bezier(.22, 1.18, .36, 1),
    height .28s cubic-bezier(.22, 1.18, .36, 1),
    opacity .22s ease;
}

.nav-liquid.is-on { opacity: 1; }

/* 首帧定位时不要动画（页面刚打开，胶囊应该直接"在"当前位置） */
.nav-liquid.no-anim { transition: none; }

/* 下划线指示器退休：一个导航项挂两个指示器只会打架，统一交给上面那块玻璃 */
.nav-link::after { display: none; }

/* ---------- 首页横幅上：导航项自己就是浮在大图上的玻璃胶囊 ---------- */
body.has-hero .site-header:not(.is-solid) {
  --glass-blob-bg: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12));
  --glass-blob-ring: rgba(255, 255, 255, .42);
}

/* 只在宽屏给导航项加玻璃胶囊：窄屏导航会收进抽屉，抽屉是实心面板，
   白玻璃胶囊在里面既看不出来、还会把抽屉挤变形 */
@media (min-width: 1025px) {
  body.has-hero .site-header:not(.is-solid) .nav-link {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  }
}

/* 悬停与当前项的底色统一交给玻璃块，这里只留文字变化 */
.nav-link.is-active,
.nav-group > .nav-parent,
.nav-group:hover > .nav-parent,
.nav-group.is-open > .nav-parent,
.nav-group.is-active > .nav-parent {
  background: transparent;
  box-shadow: none;
}

/* 当前页仍然要一眼看得出来：文字用主色加粗，底色交给玻璃块 */
.nav-link.is-active,
.nav-group.is-active > .nav-parent {
  color: var(--accent-deep);
  font-weight: 600;
}

body.has-hero .site-header:not(.is-solid) .nav-link:hover,
body.has-hero .site-header:not(.is-solid) .nav-link.is-active,
body.has-hero .site-header:not(.is-solid) .nav-group.is-active > .nav-parent,
body.has-hero .site-header:not(.is-solid) .main-nav .nav-link.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}

/* ---------- 窄屏：导航收进抽屉，绝对定位的指示块会算错位置，直接不显示 ---------- */
@media (max-width: 1024px) {
  .nav-liquid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-liquid { transition: opacity .2s ease; }
  .site-header::before { transition: none; }
}

/* ==========================================================================
   18. 归档页：写作热力图 + 年/月时间轴（v1.71.0）

   结构参考了 muyudada 的归档页（热力图 + 年 → 月 → 文章 三层）。
   配色没有照抄：热力图的深浅全部由当前皮肤的主色 `--accent` 混出来，
   所以科技/动漫/复古/风景/自然五套皮肤各自有各自的热力色，不用另配一套。
   ========================================================================== */

/* ---------- 热力图 ---------- */

.arc-heat {
  --arc-cell: 12px;
  --arc-gap: 3px;
  margin-bottom: 18px;
  padding: 20px 22px 18px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

.arc-heat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.arc-heat-head h2 {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.arc-heat-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--r-xs);
  background: var(--grad-accent);
}

.arc-heat-sub {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.arc-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.arc-legend i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.arc-legend-max { margin-left: 8px; }

/* 三块拼在一起：月份标签在右上，星期标签在左，格子区在右下 */
.arc-heat-body {
  display: grid;
  grid-template-columns: 16px auto;
  grid-template-rows: auto auto;
  gap: 6px 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.arc-heat-months {
  grid-column: 2;
  display: grid;
  gap: var(--arc-gap);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.arc-heat-days {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--arc-gap);
  font-size: 10px;
  line-height: var(--arc-cell);
  color: var(--muted);
  text-align: right;
}

.arc-heat-weeks {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: var(--arc-gap);
}

.arc-week {
  display: flex;
  flex-direction: column;
  gap: var(--arc-gap);
}

.arc-cell {
  display: block;
  width: var(--arc-cell);
  height: var(--arc-cell);
  border-radius: 3px;
  background: var(--arc-empty);
  transition: transform .12s ease, box-shadow .12s ease;
}

.arc-cell:hover {
  transform: scale(1.35);
  box-shadow: 0 0 0 2px var(--accent);
  position: relative;
  z-index: 2;
}

/* 热力色：由当前皮肤的主色混出来（老浏览器退回蓝色系） */
:root {
  --arc-empty: #e8eef7;
  --arc-l1: color-mix(in srgb, var(--accent) 24%, transparent);
  --arc-l2: color-mix(in srgb, var(--accent) 44%, transparent);
  --arc-l3: color-mix(in srgb, var(--accent) 66%, transparent);
  --arc-l4: var(--accent);
}

[data-theme="dark"] {
  --arc-empty: #1b2431;
  --arc-l1: color-mix(in srgb, var(--accent) 32%, transparent);
  --arc-l2: color-mix(in srgb, var(--accent) 52%, transparent);
  --arc-l3: color-mix(in srgb, var(--accent) 74%, transparent);
}

.arc-cell[data-lv="1"], .arc-legend i[data-lv="1"] { background: var(--arc-l1); }
.arc-cell[data-lv="2"], .arc-legend i[data-lv="2"] { background: var(--arc-l2); }
.arc-cell[data-lv="3"], .arc-legend i[data-lv="3"] { background: var(--arc-l3); }
.arc-cell[data-lv="4"], .arc-legend i[data-lv="4"] { background: var(--arc-l4); }
.arc-legend i[data-lv="0"] { background: var(--arc-empty); }

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --arc-l1: rgba(37, 99, 235, .22);
    --arc-l2: rgba(37, 99, 235, .42);
    --arc-l3: rgba(37, 99, 235, .64);
    --arc-l4: #2563eb;
  }
}

/* ---------- 工具行：年份跳转 + 即时筛选 ---------- */

.arc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.arc-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.arc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}

.arc-chip span {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.arc-chip:hover { border-color: var(--accent); color: var(--accent-deep); }

.arc-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.arc-chip.is-on span { color: rgba(255, 255, 255, .78); }

.arc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(320px, 100%);
  height: 38px;
  padding: 0 8px 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--panel);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.arc-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.arc-search-ico { font-size: 12px; opacity: .7; }

.arc-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}

.arc-search input::-webkit-search-cancel-button { display: none; }

.arc-clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.arc-clear:hover { background: var(--accent-soft); color: var(--accent-deep); }

.arc-result {
  margin: -4px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- 年 → 月 → 文章 ---------- */

.arc-year {
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.arc-year[hidden] { display: none; }
.arc-month[hidden],
.arc-post[hidden] { display: none; }

.arc-year-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.arc-year-head::-webkit-details-marker { display: none; }
.arc-year-head::marker { content: ""; }

.arc-year-head:hover { background: var(--accent-soft); }

.arc-year-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.arc-year-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.arc-caret {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) ease;
}

.arc-year[open] .arc-caret { transform: rotate(225deg) translate(-2px, -2px); }

.arc-year-body { padding: 2px 20px 18px; }

.arc-month-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.arc-node {
  display: block;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.arc-node-month { background: var(--border); box-shadow: none; width: 7px; height: 7px; flex-basis: 7px; }

.arc-month-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* 时间轴：左竖线 + 每篇一个小点 */
.arc-posts {
  margin: 0 0 4px 8px;
  padding: 2px 0 0 18px;
  border-left: 1px solid var(--border-soft);
  list-style: none;
}

.arc-post { position: relative; }

.arc-dot {
  position: absolute;
  left: -22px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--t-base), box-shadow var(--t-base);
}

.arc-post:hover .arc-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.arc-post-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--t-base);
}

.arc-post-link:hover { background: var(--accent-soft); }

.arc-post-title {
  font-size: 14.5px;
  color: var(--text);
  transition: color var(--t-base);
}

.arc-post-link:hover .arc-post-title { color: var(--accent-deep); }

.arc-post-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.arc-post-meta time { font-variant-numeric: tabular-nums; }

.arc-badge {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11.5px;
}

.arc-badge-daily { background: var(--pink-soft); color: var(--pink); }

.arc-tag { color: var(--muted); }

/* ---------- 窄屏 ---------- */

@media (max-width: 767px) {
  .arc-heat { padding: 16px 14px 14px; }
  .arc-heat-sub { display: block; margin: 4px 0 0; }
  .arc-legend-max { display: none; }
  .arc-tools { flex-direction: column; align-items: stretch; }
  .arc-search { width: 100%; }
  .arc-year-head { padding: 13px 16px; }
  .arc-year-body { padding: 2px 14px 16px; }
  .arc-post-meta .arc-tag { display: none; }
}

/* ==========================================================================
   19. 页面切换过渡 + 横幅缓推（v1.72.0）

   参考站是 Swup 做的单页切换（content 区域淡入淡出）。
   本站是多页 PHP，不引入 SPA 也能做到同样的观感 —— 跨文档 View Transitions：
   浏览器在跳转时给「旧页面」和「新页面」各拍一张快照，然后用 CSS 让两张
   快照之间做动画。零 JS、零路由改造，不支持的浏览器就是普通跳转。

   Chrome / Edge 126+、Safari 18+ 已默认开启，Firefox 仍在实验阶段。
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: npPageOut .18s ease both;
}

::view-transition-new(root) {
  animation: npPageIn .34s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes npPageOut {
  to { opacity: 0; }
}

@keyframes npPageIn {
  from { opacity: 0; transform: translateY(8px) scale(.996); }
  to   { opacity: 1; transform: none; }
}

/*
 * 主题切换走的是「圆形扩散」，不能套上面这套淡入淡出：
 *   · 新快照让位给 npThemeReveal（style.css 里已按 html.np-theme-swap 限定）
 *   · 旧快照必须保持不动，否则扩散动画底下会先淡出一层
 */
html.np-theme-swap ::view-transition-old(root) { animation: none; }

/* ---------- 横幅缓推（Ken Burns） ----------
   参考站的 kenburns：scale(1) → scale(1.1) + 轻微位移，慢速往返。
   这里只作用在首页横幅，30 秒一个来回，比"完全静止的大图"耐看。
   用 transform 而不是 background-size：前者走合成层，不触发重绘。
   -------------------------------------------------------------------------- */

@keyframes npKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1%, 0); }
}

.hero .hero-bg {
  will-change: opacity, transform;
  animation: npKenBurns 30s ease-in-out infinite alternate;
}

/* ---------- 降级 ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms !important; }
}

/* ==========================================================================
   20. 跟手反馈（v1.73.0）

   前几版做的都是"页面级"动效（滚动进场、页面过渡、横幅缓推），
   这一节补的是"指针级"的：鼠标移到卡片、按钮上时的即时反应。
   全部只在 (hover: hover) 且指针精确的设备上启用 —— 触屏没有 hover，
   套上去只会在点击瞬间闪一下。
   ========================================================================== */

/* ---------- ① 卡片光斑：跟着指针走的一团柔光 ---------- */

.post-card,
.topic-card,
.demo-card { position: relative; }

.post-card::after,
.topic-card::after,
.demo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  /* 主色混出 16% 的半透明光斑：白底上看得见，深色底上也不刺眼 */
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              var(--spot, var(--accent-soft)), transparent 68%);
  transition: opacity .28s ease;
}

:root { --spot: color-mix(in srgb, var(--accent) 16%, transparent); }

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root { --spot: rgba(37, 99, 235, .14); }
}

.post-card:hover::after,
.topic-card:hover::after,
.demo-card:hover::after { opacity: 1; }

/* 卡片自己的内容要压在光斑上面 */
.post-card > *,
.topic-card > *,
.demo-card > * { position: relative; z-index: 1; }

/* ---------- ② 卡片微倾斜：跟随指针的 3D 角度由 JS 写入 inline transform ----------
   角度上限 2.2°，只是"有厚度"的感觉；再大就开始晃眼，长时间看会累。
   ---------- */
.post-card,
.topic-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ---------- ③ 主按钮：渐变随悬浮缓慢流动 ---------- */

.btn-primary {
  background-size: 180% 100%;
  background-position: 0% 50%;
  transition:
    background-position .6s cubic-bezier(.22, 1, .36, 1),
    transform var(--t-base),
    box-shadow var(--t-base);
}

.btn-primary:hover { background-position: 100% 50%; }

/* ---------- ④ 侧栏卡片：进页面时依次浮上来（只位移，不做透明度）---------- */

@keyframes npSideIn {
  from { transform: translateY(12px); }
  to   { transform: none; }
}

@media (min-width: 1024px) {
  .sidebar > .side-card {
    animation: npSideIn .55s cubic-bezier(.22, 1, .36, 1) both;
  }
  .sidebar > .side-card:nth-child(2) { animation-delay: .07s; }
  .sidebar > .side-card:nth-child(3) { animation-delay: .14s; }
  .sidebar > .side-card:nth-child(4) { animation-delay: .21s; }
}

/* ---------- 降级 ---------- */

@media (hover: none), (pointer: coarse) {
  .post-card::after,
  .topic-card::after,
  .demo-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card::after,
  .topic-card::after,
  .demo-card::after { transition: none; }
  .sidebar > .side-card { animation: none; }
  .btn-primary { transition: transform var(--t-base), box-shadow var(--t-base); }
}

/* ==========================================================================
   21. 跟随鼠标的柔光点（v1.74.0）

   一个半透明的圆形光点，带一点点延迟地跟着指针走。
   刻意**不隐藏系统光标** —— 换掉原生光标看着酷，但在输入框、
   拖拽边缘、文本选择这些地方会立刻露馅，可读性也变差。
   这里是"光标后面多一团柔光"，系统的箭头照样在。
   ========================================================================== */

.np-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;              /* 压在页面之上、弹窗 / 提示条之下 */
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  pointer-events: none;       /* 绝不能挡住点击 */
  opacity: 0;
  will-change: transform;
  /* 边缘是渐隐的，不用 filter: blur —— 移动元素上的模糊很吃 GPU */
  background: radial-gradient(circle at center,
              var(--follow-core, rgba(56, 224, 255, .26)) 0%,
              var(--follow-core, rgba(56, 224, 255, .26)) 52%,
              transparent 72%);
  transition:
    opacity .3s ease,
    width .28s cubic-bezier(.22, 1, .36, 1),
    height .28s cubic-bezier(.22, 1, .36, 1),
    margin .28s cubic-bezier(.22, 1, .36, 1),
    background .3s ease;
}

.np-follow.is-on { opacity: 1; }

/* 停在可点元素上：放大一点、亮一点，给出"这里能点"的暗示 */
.np-follow.is-hot {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  --follow-core: var(--follow-hot, rgba(56, 224, 255, .18));
}

/* 按住鼠标：轻微收缩，像被按了一下 */
.np-follow.is-down {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

/* 光点颜色跟着皮肤主色走 */
:root {
  --follow-core: color-mix(in srgb, var(--accent) 26%, transparent);
  --follow-hot: color-mix(in srgb, var(--accent) 16%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --follow-core: rgba(63, 182, 221, .26);
    --follow-hot: rgba(63, 182, 221, .16);
  }
}

/* 触屏没有指针，直接不创建；系统要求减少动态效果时也不做 */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .np-follow { display: none; }
}

/* 打印时不该出现 */
@media print {
  .np-follow { display: none !important; }
}

/* ==========================================================================
   22. 点击爆开的小圆点（v1.75.0）

   点哪儿，哪儿就散开一把彩色圆点。纯 DOM 粒子，每个粒子一次 WAAPI 动画，
   播完立刻从文档里删掉 —— 不用常驻的 canvas，也不用一直跑的 rAF 循环。
   ========================================================================== */

.np-spark {
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .np-spark { display: none; }
}