* { margin: 0; padding: 0; box-sizing: border-box; }
/* 滚动条槽恒定：短页与长页切换时内容不再横向抖 15px */
html { scrollbar-gutter: stable; }

/* 外链标记：target=_blank 的链接自动带 ↗，勿在文案里手写箭头 */
a[target="_blank"]::after {
  content: "↗";
  font-size: .85em;
  margin-left: 3px;
  opacity: .6;
  display: inline-block;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f3ff;
  color: #1e1b4b;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { -webkit-tap-highlight-color: transparent; }

/* ===== 头部（urdf 同款：白底 标题+副标题 左 / 栏目导航 右） ===== */
.site-head {
  background: #fff;
  border-bottom: 1px solid #e8e4f2;
  position: sticky; top: 0; z-index: 30;
}
.head-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-badge {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #fbbf24);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff; font-weight: 800;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
}
.logo-text { font-size: 20px; font-weight: 800; color: #1e1b4b; letter-spacing: .5px; }
.logo-text em { font-style: normal; color: #f59f3b; }
.head-sub { font-size: 12px; color: #8b87a3; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a {
  color: var(--ink-700); text-decoration: none; font-size: var(--fs-md);
  padding: 7px 14px; border-radius: var(--r-pill); transition: all .2s;
}
.nav a:hover, .nav a.active { color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }
/* 导航高亮原则（2026-10-31 站长定案）：不设常驻主按钮，人在哪个页面才高亮哪个（active 类由 header.php 按 $page 输出） */

/* ===== 页面页头行（1:1 照搬 urdf 工具页 header 样式） ===== */
.page-head {
  background: #fff; border-bottom: 1px solid #E5E4F5;
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 25; flex-wrap: wrap; gap: 10px;
}
.page-head .ph-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.page-head .ph-dot {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.page-head .ph-logo small { display: block; font-size: 11px; color: #6D6A8A; font-weight: 400; margin-top: 2px; }
.page-head .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-btn {
  border: none; border-radius: 12px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .12s; text-decoration: none; display: inline-block;
}
.ph-btn:active { transform: scale(.96); }
.ph-btn-primary { background: #7C3AED; color: #fff; }
.ph-btn-primary:hover { box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.ph-btn-ghost { background: #EDE9FE; color: #5B21B6; }
.ph-btn-ghost:hover { box-shadow: 0 4px 12px rgba(124,58,237,.15); }
.ph-btn-danger { background: #fff; color: #DC2626; border: 1px solid #FCA5A5; }
.ph-btn-danger:hover { background: #FEF2F2; box-shadow: 0 4px 12px rgba(220,38,38,.2); }

.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center;
}
.hamburger span, .hamburger span::before, .hamburger span::after {
  content: ""; display: block; width: 20px; height: 2.5px; border-radius: 2px;
  background: #6d28d9; position: relative; transition: all .25s;
}
.hamburger span::before { position: absolute; top: -7px; }
.hamburger span::after { position: absolute; top: 7px; }
.hamburger.open span { background: transparent; }
.hamburger.open span::before { top: 0; transform: rotate(45deg); }
.hamburger.open span::after { top: 0; transform: rotate(-45deg); }
.mobile-nav {
  display: none; border-top: 1px solid #ede9f7; background: #fff;
  padding: 8px 20px 12px;
}
.mobile-nav a {
  display: block; padding: 13px 4px; color: #4c4460; text-decoration: none;
  font-size: 15.5px; border-bottom: 1px solid #f4f1fa;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:active { color: #7c3aed; }

/* ===== PC 三栏 ===== */
.layout {
  max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px;
  display: grid; grid-template-columns: 240px 1fr 240px; gap: 22px; align-items: start;
}
.col-left, .col-right { position: sticky; top: 78px; }
.col-mid { min-width: 0; }

/* 左侧 UP 主卡（urdf 同款白卡风格） */
.up-card {
  background: #fff;
  border-radius: 16px; padding: 26px 22px; position: relative; overflow: hidden;
  border: 1px solid #ede9f7;
  box-shadow: 0 4px 18px rgba(76,29,149,.08);
}
.up-card::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(251,191,36,.22), transparent 70%); border-radius: 50%;
}
.up-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, #fbbf24, #f59f3b);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #4c1d95;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.25);
}
.up-name { text-align: center; }
.up-name h2 { font-size: 21px; font-weight: 800; letter-spacing: 1px; color: #1e1b4b; }
.up-badge {
  display: inline-block; font-size: 10.5px; background: #fbbf24; color: #4c1d95;
  font-weight: 700; padding: 2px 10px; border-radius: 10px; margin-top: 6px;
}
.up-id { text-align: center; font-size: 12px; color: #8b87a3; margin-top: 8px; }
.up-desc { font-size: 13px; color: #6b6580; margin-top: 14px; line-height: 1.75; border-top: 1px solid #f0edf8; padding-top: 14px; }
.up-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.up-tag {
  font-size: 11.5px; color: #7c3aed; background: #f3ecfd;
  border: 1px solid #e3d9fb; padding: 2px 10px; border-radius: 12px;
}
.up-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.btn-bili {
  background: linear-gradient(135deg, #fbbf24, #f59f3b); color: #4c1d95;
  font-weight: 700; font-size: 13.5px; text-decoration: none; padding: 8px 0; border-radius: 20px;
  text-align: center; box-shadow: 0 4px 14px rgba(251,191,36,.35); transition: transform .2s;
}
.btn-bili:hover { transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid #c4b5fd; color: #7c3aed; font-size: 12.5px; text-decoration: none;
  padding: 6px 0; border-radius: 18px; text-align: center; transition: background .2s;
}
.btn-ghost:hover { background: #f3ecfd; }

/* UP 卡内 3D 机器人窗口（浅紫底，urdf 同款浅色） */
.up-model {
  margin-top: 16px; background: linear-gradient(180deg, #ede9fe, #f5f3ff);
  border-radius: 12px; padding: 10px 10px 12px; position: relative; overflow: hidden;
  border: 1px solid #ddd3f5;
}
.up-model .lab { text-align: center; font-size: 11.5px; color: #6d28d9; letter-spacing: 1px; margin-bottom: 8px; }
.up-model .lab b { color: #d97706; }
#robotWin { width: 100%; height: 180px; display: block; border-radius: 8px; cursor: grab; }
#robotWin:active { cursor: grabbing; }
.up-model .tip { text-align: center; font-size: 10.5px; color: #8b87a3; margin-top: 8px; }

/* 中间文章列表 */
.section-title { font-size: 14.5px; color: #8a85a0; font-weight: 700; margin: 0 0 14px 4px; letter-spacing: 2px; }
.section-title::before { content: "◆ "; color: #f59f3b; }
.post-list { list-style: none; }
.post-item {
  background: #fff; border-radius: 16px; padding: 20px 24px; margin-bottom: 13px;
  box-shadow: 0 1px 4px rgba(76,29,149,.06); border-left: 4px solid transparent;
  transition: all .22s ease; display: block; text-decoration: none; color: inherit;
}
.post-item:hover {
  box-shadow: 0 10px 28px rgba(124,58,237,.14); border-left-color: #a855f7; transform: translateY(-2px);
}
.post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.post-date { font-size: 12px; color: #9b96ad; background: #f4f1fa; padding: 2px 10px; border-radius: 10px; }
.post-cat { font-size: 12px; color: #7c3aed; background: #ede9fe; padding: 2px 10px; border-radius: 10px; font-weight: 600; }
.post-title { font-size: 18.5px; font-weight: 700; color: #2d2a37; line-height: 1.5; }
.post-item:hover .post-title { color: #7c3aed; }
.post-summary { font-size: 13.5px; color: #7b7688; margin-top: 7px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 26px 0; }
.pager a { color: #7c3aed; text-decoration: none; font-size: 13.5px; }
.pager span { color: #b5b0c4; font-size: 13px; }

/* 右侧侧边栏 */
.side-card { background: #fff; border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(76,29,149,.06); }
.side-title { font-size: 13.5px; font-weight: 700; color: #6d28d9; margin-bottom: 12px; }
.side-title::after { content: ""; display: block; width: 26px; height: 3px; background: linear-gradient(90deg, #fbbf24, #a855f7); border-radius: 2px; margin-top: 5px; }
.search-box {
  display: flex; align-items: center; background: #f4f1fa; border-radius: 18px; padding: 6px 14px;
  border: 1px solid transparent; transition: border .2s;
}
.search-box:focus-within { border-color: #c4b5fd; background: #fff; }
.search-box input { border: none; outline: none; width: 100%; font-size: 13px; background: transparent; color: #333; }
.search-box .icon { color: #a78bfa; font-size: 13px; margin-left: 6px; }
.cat-list { list-style: none; }
.cat-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #eee; }
.cat-list li:last-child { border-bottom: none; }
.cat-list a { color: #5b5670; text-decoration: none; font-size: 13.5px; }
.cat-list a:hover { color: #7c3aed; }
.cat-list .n { font-size: 12px; color: #a78bfa; background: #f4f1fa; padding: 1px 9px; border-radius: 9px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-cloud a { font-size: 12px; color: #7c3aed; background: #f4f1fa; text-decoration: none; padding: 3px 11px; border-radius: 13px; }
.tag-cloud a:hover { background: #ede9fe; }
.link-list { list-style: none; }
.link-list li { padding: 6px 0; }
.link-list a { color: #5b5670; text-decoration: none; font-size: 13.5px; }
.link-list a:hover { color: #7c3aed; }
.link-list .dot { color: #f59f3b; margin-right: 6px; }

/* 页脚（urdf 同款：白底小字落款） */
.site-foot { background: #fff; border-top: 1px solid #e8e4f2; color: #6d6a8a; font-size: 12px; padding: 14px 20px; margin-top: 26px; text-align: center; }
.site-foot a { color: #7c3aed; text-decoration: none; }

/* ===== 移动端（<960px） ===== */
.bottom-tab { display: none; }
@media (max-width: 959px) {
  .page-head { padding: 12px 14px; }
  .page-head .ph-logo { font-size: 16px; }
  .page-head .ph-logo small { font-size: 10.5px; }
  .page-head .ph-dot { width: 30px; height: 30px; font-size: 16px; }
  .ph-btn { padding: 8px 14px; font-size: 13px; }

  .hamburger { display: flex; }
  .nav { display: none; }
  .layout { grid-template-columns: 1fr; padding: 16px 14px 70px; gap: 14px; }
  .col-left, .col-right { position: static; }
  .up-card { display: none; }
  .up-card-m {
    display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px;
    padding: 14px 14px; box-shadow: 0 1px 4px rgba(76,29,149,.08);
  }
  .up-avatar-m {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #fbbf24, #f59f3b);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: #4c1d95;
  }
  .up-info-m { flex: 1; min-width: 0; }
  .up-info-m .n { font-size: 16.5px; font-weight: 800; color: #4c1d95; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .up-info-m .id { font-size: 12px; color: #9b96ad; }
  .up-info-m .desc { font-size: 12.5px; color: #6b6580; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .btn-bili-m {
    flex-shrink: 0; background: linear-gradient(135deg, #fbbf24, #f59f3b); color: #4c1d95;
    font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 18px;
  }
  .post-item { padding: 18px 16px; margin-bottom: 11px; border-left-width: 3px; }
  .post-title { font-size: 17.5px; }
  .post-summary { font-size: 14.5px; }
  .post-date, .post-cat { font-size: 12px; padding: 3px 11px; }
  .col-right { order: 2; }
  .bottom-tab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-top: 1px solid #ede9f7;
    display: flex; justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-tab a {
    flex: 1; text-align: center; text-decoration: none; color: #9b96ad;
    padding: 9px 0 7px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .bottom-tab a .ic { font-size: 20px; line-height: 1; }
  .bottom-tab a.active { color: #7c3aed; }
  .bottom-tab a:active { color: #a855f7; }
}
@media (max-width: 380px) {
  .up-info-m .desc { -webkit-line-clamp: 1; }
  .btn-bili-m { padding: 8px 10px; }
}

/* ===== 全站统一宽度 1280px（首页与工具页一致） ===== */
.site-head .head-inner{max-width:var(--container)}
.layout{max-width:var(--container);grid-template-columns:240px 1fr 300px}

/* ===== 全站统一页脚贴底：内容不足一屏时页脚同样贴窗口底部，与工具页一致（2026-10-29） ===== */
/* 横向拖动保险（2026-10-30）：禁掉平板浏览器“橡皮筋”横拉；用 clip 不破坏 sticky */
html,body{overflow-x:clip}
body{min-height:100vh;display:flex;flex-direction:column}
.site-head,.mobile-nav,.site-foot{flex:0 0 auto}
.layout{flex:1 1 auto}

/* ===== 首页首屏幻灯片（2026-10-29） ===== */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;margin-bottom:18px;background:#fff;box-shadow:0 10px 26px rgba(124,58,237,.18)}
.hs-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hs-slide{flex:0 0 100%;min-width:100%;height:230px;box-sizing:border-box;padding:26px 30px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hs-slide:nth-child(1){background:linear-gradient(120deg,#6D28D9 0%,#7C3AED 55%,#A78BFA 100%)}
.hs-slide:nth-child(2){background:linear-gradient(120deg,#5B21B6 0%,#7C3AED 50%,#EC4899 100%)}
.hs-slide:nth-child(3){background:linear-gradient(120deg,#7C3AED 0%,#8B5CF6 55%,#F59E0B 100%)}
.hs-slide::after{content:"";position:absolute;right:-46px;top:-56px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hs-slide::before{content:"";position:absolute;right:56px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hs-tag{position:relative;z-index:1;display:inline-block;width:fit-content;font-size:12px;line-height:1.6;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.22);margin-bottom:10px;letter-spacing:.4px}
.hs-title{position:relative;z-index:1;margin:0 0 8px;font-size:23px;line-height:1.4;font-weight:800;color:#fff}
.hs-sub{position:relative;z-index:1;margin:0;font-size:13px;line-height:1.75;color:rgba(255,255,255,.92);max-width:86%}
.hs-cta{position:relative;z-index:1;display:inline-block;width:fit-content;margin-top:12px;padding:6px 16px;border-radius:999px;background:#fff;color:#5B21B6;font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s}
.hs-cta:hover{transform:translateX(3px)}
.hs-dots{position:absolute;right:18px;bottom:14px;display:flex;gap:7px;z-index:2}
.hs-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;background:rgba(255,255,255,.5);transition:all .25s}
.hs-dots button.on{width:22px;background:#fff}
@media (max-width:900px){.hs-slide{height:200px;padding:20px 18px}.hs-title{font-size:19px}.hs-sub{max-width:100%;font-size:12.5px}.hs-dots{right:12px;bottom:10px}}
/* ===== 文章列表左侧缩略图（2026-10-29） ===== */
.post-item{display:flex;align-items:flex-start;gap:18px}
.post-thumb{flex:0 0 150px;width:150px;height:104px;border-radius:12px;overflow:hidden;background:#ede9fe;box-shadow:0 4px 14px rgba(76,29,149,.14)}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .38s ease}
.post-item:hover .post-thumb img{transform:scale(1.06)}
.post-body{flex:1 1 auto;min-width:0}
@media (max-width:640px){
  /* 手机端：右侧文字块高度对齐左侧缩略图（2026-10-30） */
  .post-item{gap:12px;align-items:center;padding:12px 14px}
  .post-thumb{flex:0 0 112px;width:112px;height:104px;border-radius:10px}
  .post-top{margin-bottom:3px}
  .post-title{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .post-summary{font-size:12px;line-height:1.5;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ===== 窄屏单列修复：必须位于统一宽度覆盖之后，否则三列定义会压过 959px 媒体查询（2026-10-29） ===== */
@media (max-width:959px){.layout{grid-template-columns:1fr;max-width:100%}}

/* ===== 首页页脚固定视口底部（与 URDF 工具页一致，2026-10-29） ===== */
body.page-home .site-foot{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;height:var(--footer-h);
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 20px;
  z-index:35;box-shadow:0 -2px 12px rgba(76,29,149,.06)}
/* 内容底部预留页脚高度，避免滚动到底时被遮住 */
body.page-home .layout{padding-bottom:var(--footer-reserve)}

/* ===== 文章详情页（2026-10-29） ===== */
.article-page{flex:1 1 auto;width:100%;max-width:var(--container);margin:0 auto;padding:22px var(--gutter) 30px}
.article-card{max-width:880px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:34px 40px 38px}
.article-crumb{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--color-text-weak);margin-bottom:14px}
.article-crumb a{color:var(--color-primary);text-decoration:none}
.article-title{margin:0 0 14px;font-size:27px;line-height:1.45;font-weight:800;color:var(--color-text-title);letter-spacing:.2px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;color:var(--color-text-weak);padding-bottom:18px;border-bottom:1px solid var(--line)}
.article-cat{background:var(--brand-100);color:var(--color-primary);padding:2px 10px;border-radius:999px;font-weight:600}
.article-cover{margin:20px 0 6px;border-radius:12px;overflow:hidden;background:var(--brand-100);box-shadow:var(--sh-1)}
.article-cover img{display:block;width:100%;height:auto}
.article-body{font-size:14.5px;line-height:1.95;color:var(--color-text);padding-top:10px;word-break:break-word}
.article-body p{margin:0 0 16px}
.article-body h3{margin:28px 0 12px;font-size:17px;font-weight:700;color:var(--color-text-title);padding-left:11px;border-left:3px solid var(--color-primary);line-height:1.4}
.article-body ul,.article-body ol{margin:0 0 16px;padding-left:22px}
.article-body li{margin:6px 0}
.article-body img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.article-body code{background:var(--brand-50);color:var(--brand-700);padding:1px 6px;border-radius:5px;font-size:12.5px}
.article-body pre{background:#1E1B4B;color:#EDE9FE;padding:16px 18px;border-radius:12px;overflow:auto;margin:0 0 18px;font-size:12.5px;line-height:1.7}
.article-body pre code{background:none;color:inherit;padding:0}
.article-body blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--brand-300);background:var(--brand-50);color:var(--color-text-muted);border-radius:0 10px 10px 0}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.article-tags a{font-size:12px;color:var(--color-primary);background:var(--brand-50);border:1px solid var(--brand-100);padding:4px 12px;border-radius:999px;text-decoration:none}
.article-tags a:hover{background:var(--brand-100)}
.article-foot{margin:24px 0 0;font-size:13px}
.article-foot a{font-weight:600;color:var(--color-primary);text-decoration:none}
.article-empty{margin:6px 0 0;color:var(--color-text-muted);font-size:13.5px}
.post-empty{padding:26px 4px;color:var(--color-text-muted);font-size:13.5px;list-style:none}
.side-empty{color:var(--color-text-weak);font-size:12.5px;list-style:none;padding:4px 0}
@media (max-width:640px){.article-card{padding:22px 18px 26px}.article-title{font-size:22px}.article-body{font-size:14px}.article-page{padding:14px var(--gutter-sm) 22px}}
/* ===== 首页分页局部刷新（2026-10-29） ===== */
.post-list.is-loading{opacity:.35;transition:opacity .18s}
.pager.is-loading{opacity:.45}
.pager a[data-p]{cursor:pointer}

/* ===== 文章页左右结构（2026-10-29） ===== */
.article-page{padding:22px var(--gutter) 30px}
.article-wrap{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.article-card{max-width:none;margin:0}
.article-card-solo{max-width:880px;margin:0 auto}
.article-side{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px}
.article-side .side-card{margin-bottom:0}
.as-info{list-style:none}
.as-info li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #eee;font-size:12.5px}
.as-info li:last-child{border-bottom:0}
.as-info span{color:#9b96ad}
.as-info b{color:#3b3552;font-weight:600}
.as-rel{list-style:none}
.as-rel li{padding:8px 0;border-bottom:1px dashed #eee}
.as-rel li:last-child{border-bottom:0}
.as-rel a{display:block;font-size:13px;line-height:1.6;color:#4b4560;text-decoration:none}
.as-rel a:hover{color:var(--color-primary)}
.as-rel .d{font-size:11.5px;color:#a9a4bb}
.as-back{display:block;font-size:13px;color:var(--color-primary);text-decoration:none;padding:6px 0}
.as-back:hover{text-decoration:underline}
@media (max-width:1100px){.article-wrap{grid-template-columns:minmax(0,1fr) 260px}}
@media (max-width:959px){
  .article-wrap{grid-template-columns:1fr;gap:16px}
  .article-side{position:static;order:2}
}
/* ===== 分类筛选与高亮（2026-10-29） ===== */
.cat-list a.on{color:var(--color-primary);font-weight:700}
.cat-list a.on::before{content:"▸ ";color:var(--brand-500)}
.filter-clear{margin-left:10px;font-size:12px;font-weight:400;color:#8b87a3;text-decoration:none;letter-spacing:0;border:1px solid #e3d9fb;padding:2px 10px;border-radius:999px;vertical-align:2px}
.filter-clear:hover{color:var(--color-primary);border-color:#c4b5fd}
.article-tags a{font-variant-numeric:tabular-nums}
/* ===== 首页左右结构 + 页头搜索（2026-10-29） ===== */
/* 左：我的介绍 + 文章分类；右：轮播 + 文章列表。替代原三栅 */
.layout.layout-home{grid-template-columns:300px minmax(0,1fr);gap:22px}
.layout-home .col-left{display:flex;flex-direction:column;gap:16px}
.layout-home .col-left .side-card{margin-bottom:0}
.layout-home .up-card{padding:24px 20px}

/* 页头右上角站内搜索 */
.head-search{display:flex;align-items:center;gap:6px;width:214px;flex:0 0 auto;
  background:#f4f1fa;border:1px solid transparent;border-radius:999px;padding:4px 5px 4px 14px;
  transition:background .2s,border-color .2s,box-shadow .2s}
.head-search:focus-within{background:#fff;border-color:#c4b5fd;box-shadow:0 4px 14px rgba(124,58,237,.12)}
.head-search input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  font-size:13px;color:#333;font-family:inherit;line-height:1.6}
.head-search input::-webkit-search-cancel-button{display:none}
.head-search button{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:#7c3aed;color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.head-search button:hover{background:#6d28d9}
@media (max-width:1100px){.head-search{width:158px}}

@media (max-width:959px){
  .layout.layout-home{grid-template-columns:1fr}
  .layout-home .col-left{order:2}
  .layout-home .up-card{display:block}
  .layout-home .up-avatar{width:60px;height:60px;font-size:24px;margin-bottom:10px}
  .head-search{width:auto;flex:1 1 auto;max-width:200px;margin-left:auto}
  .head-search input{font-size:12.5px}
}
@media (max-width:640px){
  .site-head .head-inner{flex-wrap:wrap;padding:12px 14px}
  .head-search{order:3;flex:1 0 100%;max-width:none;width:100%;margin:8px 0 0}
}
/* ===== 小屏页头收紧：logo 副标题隐藏，避免换行过高（2026-10-29） ===== */
@media (max-width:640px){
  .logo-text{font-size:17px}
  .logo-text small{display:none}
  .hamburger{margin-left:auto}
}
/* ===== 首页左右调换：文章在左、介绍与分类在右（2026-10-29） ===== */
.layout.layout-home{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:959px){
  .layout.layout-home{grid-template-columns:1fr}
  .layout-home .col-left{order:0}
}
/* ===== SEO 修复批次（2026-10-29）：正文 h2 / 404 页 / 关于页 ===== */
/* 正文 h2：数据库文章原用 h3 作小节标题，已统一提升为 h2（语义层级修正），样式与原 h3 一致 */
.article-body h2{margin:28px 0 12px;font-size:17px;font-weight:700;color:var(--color-text-title);padding-left:11px;border-left:3px solid var(--color-primary);line-height:1.4}
.article-body h2:first-child{margin-top:8px}

/* 404 页 */
.e404{max-width:760px;margin:0 auto;padding:60px 20px 78px;text-align:center}
.e404-code{font-size:74px;font-weight:800;line-height:1;letter-spacing:4px;color:var(--color-primary);opacity:.92}
.e404-title{margin:16px 0 10px;font-size:22px;font-weight:800;color:var(--color-text-title)}
.e404-sub{margin:0 auto 22px;max-width:520px;font-size:14px;line-height:1.9;color:#6f6a85}
.e404-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.e404-btn{display:inline-block;padding:9px 20px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:13.5px;font-weight:600;text-decoration:none}
.e404-btn.ghost{background:#f4f1fa;color:#4b4560}
.e404-cats{font-size:13px;line-height:2;color:#8a85a0}
.e404-cats a{color:var(--color-primary);text-decoration:none;margin:0 2px}

/* 关于页 */
.about-page{max-width:860px;margin:0 auto;padding:22px 20px 40px}
.about-page .article-body p{margin:0 0 14px}
.about-page .article-body ul{margin:0 0 16px;padding-left:20px}
.about-page .article-body li{margin:6px 0}
.about-page .article-body code{background:#f4f1fa;padding:1px 5px;border-radius:4px;font-size:12.5px}
@media (max-width:640px){.e404{padding:40px 16px 56px}.e404-code{font-size:56px}.about-page{padding:14px 14px 30px}}
/* ===== 文章页上下篇内链（2026-10-29） ===== */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 8px}
.article-nav .an-item{display:block;padding:12px 14px;border:1px solid #ece9f5;border-radius:10px;
  text-decoration:none;background:#faf9fd;transition:border-color .2s,background .2s}
.article-nav .an-item:hover{border-color:#c4b5fd;background:#fff}
.article-nav .an-lb{display:block;font-size:11.5px;color:#8a85a0;margin-bottom:4px;letter-spacing:.5px}
.article-nav .an-item strong{display:block;font-size:13.5px;font-weight:600;color:var(--color-text-title);line-height:1.5}
.article-nav .an-next{text-align:right}
@media (max-width:640px){.article-nav{grid-template-columns:1fr}.article-nav .an-next{text-align:left}}
/* 头像图片（2026-10-29）：文字头像升级为真实头像图 */
.up-avatar img,.up-avatar-m img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* 栏目配图（2026-10-29）：分类/标签归档页与固定页头图，兼作百度正文取图 */
.archive-cover{margin:0 0 18px}
.archive-cover img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(15,7,32,.28)}
/* 归档文字横幅（2026-10-29）：尺寸/圆角/阴影与首页 hero 完全一致，视觉对齐 */
.archive-hero{position:relative;overflow:hidden;border-radius:16px;margin:0 0 18px;height:230px;box-sizing:border-box;
  padding:26px 30px;color:#fff;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(120deg,#6D28D9 0%,#7C3AED 55%,#A78BFA 100%);
  box-shadow:0 10px 26px rgba(124,58,237,.18)}
.archive-hero::before{content:"";position:absolute;right:-46px;top:-56px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.archive-hero::after{content:"";position:absolute;right:56px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.ah-inner{position:relative;z-index:1}
.ah-kicker{display:inline-block;width:fit-content;font-size:12px;line-height:1.6;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;letter-spacing:.4px;margin-bottom:10px}
.ah-title{margin:0 0 8px;font-size:26px;line-height:1.4;font-weight:800;color:#fff}
.ah-sub{margin:0;font-size:13px;line-height:1.75;color:rgba(255,255,255,.92);max-width:86%}
.archive-hero .filter-clear{position:relative;z-index:1;display:inline-block;width:fit-content;margin:12px 0 0;padding:6px 16px;border:0;border-radius:999px;background:#fff;color:#5B21B6;font-size:13px;font-weight:700;transition:transform .2s}
.archive-hero .filter-clear:hover{color:#4C1D95;background:#fff;border:0;transform:translateX(3px)}

/* ====================================================================
   动效规范落地（2026-10-30）
   组件统一引用 tokens.css 的 --dur-* / --ease-* / --tr-*。
   本段位于全部组件规则之后，用同名选择器覆盖上方的临时硬编码时长；
   以后改快慢只动 tokens.css，组件里不要再写数字。
   ==================================================================== */
.nav a{transition:color var(--tr-hover), background-color var(--tr-hover)}
.ph-btn{transition:transform var(--tr-press), box-shadow var(--tr-press), opacity var(--tr-press)}
.hamburger span{transition:background-color var(--tr-hover), transform var(--tr-hover)}
.btn-bili{transition:transform var(--tr-hover)}
.btn-ghost{transition:background-color var(--tr-hover)}
.post-item{transition:transform var(--tr-hover), box-shadow var(--tr-hover), border-color var(--tr-hover)}
.search-box{transition:border-color var(--tr-hover), background-color var(--tr-hover)}
.hs-track{transition:transform var(--dur-4) var(--ease-std)}
.hs-cta{transition:transform var(--tr-hover)}
.hs-dots button{width:22px;transform:scaleX(.36);transition:transform var(--tr-hover), background-color var(--tr-hover)}
.hs-dots button.on{width:22px;transform:scaleX(1)}
.post-thumb img{transition:transform var(--dur-3) var(--ease-out)}
.post-list.is-loading{transition:opacity var(--dur-2) var(--ease-out)}
.head-search{transition:background-color var(--tr-hover), border-color var(--tr-hover), box-shadow var(--tr-hover)}
.head-search button{transition:background-color var(--tr-hover)}
.article-nav .an-item{transition:border-color var(--tr-hover), background-color var(--tr-hover)}
.archive-hero .filter-clear{transition:transform var(--tr-hover), color var(--tr-hover)}
.cat-list a,.tag-cloud a,.link-list a,.article-tags a,.as-rel a,.as-back{transition:color var(--tr-hover), background-color var(--tr-hover), border-color var(--tr-hover)}

/* ---------- 触摸端：hover 不粘滞，改用按下反馈 ---------- */
@media (hover: none){
  .post-item:hover{transform:none;box-shadow:var(--sh-1);border-left-color:transparent}
  .post-item:hover .post-title{color:var(--ink-800)}
  .post-item:hover .post-thumb img{transform:none}
  .nav a:hover:not(.active){background:transparent;color:#5b5670}
  .btn-bili:hover{transform:none}
  .hs-cta:hover,.archive-hero .filter-clear:hover{transform:none}
  .ph-btn:hover{box-shadow:none}
  .head-search button:hover{background:#7c3aed}
  .cat-list a:hover,.link-list a:hover,.as-rel a:hover{color:inherit}
  .tag-cloud a:hover,.article-tags a:hover{background:#f4f1fa}
  .article-nav .an-item:hover{border-color:#ece9f5;background:#faf9fd}
  .post-item:active{transform:scale(.99)}
  .btn-bili:active{transform:scale(.97)}
  .nav a:active:not(.active){background:var(--brand-100);color:var(--brand-700)}
  .tag-cloud a:active,.article-tags a:active{background:var(--brand-100)}
}

/* ---------- 无障碍：系统「减弱动态效果」时关闭位移与缩放 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .hs-track{transition:none!important}
  .post-item:hover,.post-item:hover .post-thumb img,.btn-bili:hover,.hs-cta:hover,.archive-hero .filter-clear:hover{transform:none}
}
/* 种子图：视觉不可见，保留在 DOM 中供爬虫取图，同时作为 og:image 来源 */
.archive-seed{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:900px){.archive-hero{height:200px;padding:20px 18px}.ah-title{font-size:20px}.ah-sub{max-width:100%;font-size:12.5px}}
/* 文章封面种子图（2026-10-29）：不再在正文显示大图，仅供爬虫取图与分享调用 */
.article-cover--seed{position:absolute;left:0;top:0;margin:0;width:1px;height:1px;opacity:0;overflow:hidden;box-shadow:none;border-radius:0}
.article-cover--seed img{width:1px;height:1px}

/* ===== 2026-10-29 修复：flex 容器内的横向 auto 外边距 =====
   body 是 flex 纵向容器（页脚贴底），子项的 margin:0 auto 会覆盖横向 stretch，
   容器宽度退化为 max-content —— 文章越少整页越窄（随笔页曾窄到 1109px）。
   显式 width:100% 恢复撑满，max-width 仍然封顶。 */
.layout,
.article-wrap,
.about-page { width: 100%; }

/* ===== 2026-10-29 移动端底部导航栏 ===== */
.tabbar{display:none}

@media (max-width:959px){
  /* 首页右栏（个人介绍 + 文章分类）在手机上隐藏，信息入口移到底部导航 */
  body.page-home .col-left{display:none}

  /* 给固定底栏留出空间，页脚不被遮住 */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}

  .tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    height:calc(62px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -4px 16px rgba(0,0,0,.05);
  }
  .tab-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; font-size:11px; color:#8a8f9d; text-decoration:none;
    transition:color var(--tr-hover), transform var(--tr-press);
  }
  .tab-item svg{display:block}
  .tab-item:active{transform:scale(.94)}
  /* 当前页高亮（2026-10-31：tabbar 改 首页/装饰徽章/关于 三位，去工具项） */
  body.page-home  .tabbar a[href="/"],
  body.page-about .tabbar a[href="/about.php"]{color:#7C3AED; font-weight:700}
  /* 中间纯装饰品牌徽章（2026-10-31 站长要求）：仿 logo 圆底「子」，不可点、不参与高亮 */
  .tab-badge{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#7c3aed,#a855f7 55%,#fbbf24);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:800;color:#fff;
    box-shadow:0 2px 8px rgba(124,58,237,.35);
    transform:translateY(-4px);
  }
}