/* ============================================================
   Kinetic 动卡 · 动感卡片式主题 — 主样式表（系统自动注入）
   ------------------------------------------------------------
   七层结构：
   ① Token        核心变量重定义（全站换肤层）+ 主题专属 token
   ② 骨架         玻璃胶囊吸顶导航 / 主区 / 页脚 / 通知 / 底部导航
   ③ 组件         按钮 / 徽章 / chips / 分页 / 表单 / 弹窗 / 提示
   ④ 模板结构     首页 Hero / 版块卡网格 / 专题卡 / 列表卡 / 侧栏卡
   ⑤ 页面适配     回退页核心类作用域适配（.kn-body 前缀，零交互风险）
   ⑥ 动效系统     进场 reveal / 光斑漂浮 / 脉冲 / 微交互（reduced-motion 全量守卫）
   ⑦ 响应式       断点对齐核心：1024（栅格收窄/搜索收起）/ 720（抽屉导航/移动端）
   ============================================================ */

/* ---------- ① Token ---------- */
:root {
  /* 核心变量重定义 —— 电光靛紫 · 冷调浅底 */
  --bg: #F4F5FB;
  --card: #FFFFFF;
  --soft: #ECEDF7;
  --soft-2: #F6F6FC;
  --bd: #E4E6F2;
  --bd-2: #D6D9EC;
  --tx: #191D33;
  --tx-2: #4B5169;
  --tx-3: #878DA6;
  --ac: #6366F1;
  --ac-2: #4F46E5;
  --ac-soft: #ECEDFE;
  --ok: #16A34A;
  --ok-soft: #E7F6EE;
  --warn: #D97706;
  --warn-soft: #FCF3E3;
  --err: #DC2626;
  --err-soft: #FDECEC;
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(25, 29, 51, .04), 0 8px 24px rgba(79, 70, 229, .06);
  --shadow-lg: 0 12px 32px rgba(79, 70, 229, .10), 0 24px 64px rgba(79, 70, 229, .10);
  /* 动感主题 = 无衬线视觉（标题与统计数字全站统一 sans，重定义即约定手段）；
     栈内追加 HarmonyOS Sans SC / MiSans：华为小米设备原生渲染更利落，无则零成本回退 */
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 主题专属 token（渐变语汇 / 缓动 / 抬升阴影 / 间距刻度） */
  --kn-grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A855F7 100%);
  --kn-grad-2: linear-gradient(135deg, #06B6D4 0%, #6366F1 100%);
  --kn-grad-3: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  --kn-grad-4: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --kn-grad-5: linear-gradient(135deg, #8B5CF6 0%, #D946EF 100%);
  --kn-grad-text: linear-gradient(120deg, #4F46E5 0%, #8B5CF6 45%, #C026D3 100%);
  --kn-ring: 0 0 0 3px rgba(99, 102, 241, .18);
  --kn-ease: cubic-bezier(.22, .61, .36, 1);       /* ease-out-quint：进场与位移 */
  --kn-ease-out: cubic-bezier(.16, 1, .3, 1);      /* ease-out-expo：决断型反馈 */
  --kn-lift: 0 14px 36px rgba(79, 70, 229, .16);
  --kn-topbar-h: 64px;
  /* 间距刻度（结构节奏值一律取自此刻度；2-7px 级光学微调值除外） */
  --kn-sp-1: 4px;
  --kn-sp-2: 8px;
  --kn-sp-3: 12px;
  --kn-sp-4: 16px;
  --kn-sp-5: 20px;
  --kn-sp-6: 24px;
  --kn-sp-8: 32px;
  --kn-sp-10: 40px;
  --kn-sp-12: 48px;
}

/* 页面底色：冷调浅底 + 顶部靛紫氛围光晕（静态渐变，无动画成本） */
.kn-body {
  background-color: var(--bg);
  background-image: radial-gradient(1100px 460px at 50% -120px, rgba(99, 102, 241, .09), transparent 72%);
}
.kn-body ::selection { background: rgba(99, 102, 241, .22); }
.kn-body :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   ② 骨架 — 玻璃胶囊吸顶导航
   ============================================================ */
.kn-topbar {
  position: sticky;
  top: 10px;
  z-index: 100;
  padding: 0 14px;
}
/* 吸顶缝隙遮蔽条：内容上滑穿过胶囊上方 10px 缝隙时被底色遮住（浮动胶囊的标准处理） */
.kn-topbar::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 10px;
  background: var(--bg);
  pointer-events: none;
}
.kn-topbar-in {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--kn-topbar-h);
  padding: 0 12px 0 20px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border: 1px solid rgba(99, 102, 241, .14);
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(79, 70, 229, .10);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
/* 滚动态（app.js 滚动 >8px 切换）：玻璃加深 + 阴影沉降——吸顶元素的「状态变化」反馈 */
.kn-topbar-in.is-scrolled {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(99, 102, 241, .2);
  box-shadow: 0 14px 40px rgba(79, 70, 229, .16);
}
/* 品牌名：重磅字重 + 渐变点缀 */
.kn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--tx);
  margin-right: 4px;
  white-space: nowrap;
}
.kn-brand:hover { color: var(--tx); }
.kn-brand .brand-mark {
  background: var(--kn-grad);
  border-radius: 12px;
  transition: transform .3s var(--kn-ease);
}
.kn-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }

/* 导航链接：滑移渐变下划线（横向留出呼吸间距，缓解拥挤） */
.kn-topbar .main-nav { flex: 0 1 auto; gap: 4px; }  /* 自然宽度：富余空间交给搜索框弹性吸收 */
.kn-topbar .nav-link {
  position: relative;
  color: var(--tx-2);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 9px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.kn-topbar .nav-link:hover { color: var(--ac-2); background: none; }
.kn-topbar .nav-link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--kn-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s var(--kn-ease-out); /* 退出快于进入（exits outpace entrances） */
}
.kn-topbar .nav-link:hover::after { transform: scaleX(1); transition-duration: .3s; }
.kn-topbar .nav-link .ic { transition: transform .25s var(--kn-ease); }
.kn-topbar .drop-btn:hover .ic { transform: translateY(1px); }
.kn-topbar .nav-checkin { color: var(--ac-2); font-weight: 600; }

/* 顶栏全局搜索：弹性胶囊（吸收品牌/导航/工具区之间的富余空间，贴右对齐；
   拥挤时优雅收缩而非挤压导航，替代原固定宽度方案） */
.kn-topsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 340px;
  margin-left: auto;
  background: var(--soft-2);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tx-3);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.kn-topsearch input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--tx);
  width: 100%;
  min-width: 0;
}
.kn-topsearch input::placeholder { color: var(--tx-3); }
.kn-topsearch:focus-within {
  background: var(--card);
  border-color: var(--ac);
  box-shadow: var(--kn-ring);
}
/* 焦点表现由外层胶囊 :focus-within 统一承担：输入框自身不画环
   （特异性压过第⑤层全局表单焦点规则，防「双层框」叠加） */
.kn-body .kn-topsearch input[type="search"]:focus,
.kn-body .kn-topsearch input[type="search"]:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}
/* 抽屉内搜索框（核心 .nav-search-form）同口径：焦点环画在表单容器上，输入框不叠环 */
.kn-body .nav-search-form:focus-within {
  border-color: var(--ac);
  box-shadow: var(--kn-ring);
}
.kn-body .nav-search-form input:focus,
.kn-body .nav-search-form input:focus-visible {
  outline: none;
  box-shadow: none;
}
/* 三栏首页布局（body.nav-three，核心隐藏横向导航）：顶栏只剩品牌+搜索+用户区，
   搜索框升级为主角——居中伸展填补中段空白 */
.nav-three .kn-topsearch {
  flex: 1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* 顶栏工具与账户 */
.kn-topbar .header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kn-topbar .icon-btn {
  border-radius: 12px;
  color: var(--tx-2);
  transition: background .2s, color .2s, transform .2s var(--kn-ease);
}
.kn-topbar .icon-btn:hover { background: var(--ac-soft); color: var(--ac-2); transform: translateY(-1px); }
.kn-topbar .user-menu-btn { border-radius: 50%; transition: transform .25s var(--kn-ease), box-shadow .25s; }
.kn-topbar .user-menu-btn:hover { transform: translateY(-1px); box-shadow: var(--kn-ring); }

/* 登录 / 注册 CTA */
.kn-login {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-2);
  border: 1px solid var(--bd);
  transition: border-color .2s, color .2s, background .2s, transform .2s var(--kn-ease);
}
.kn-login:hover { color: var(--ac-2); border-color: var(--ac); background: var(--ac-soft); transform: translateY(-1px); }
.kn-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--kn-grad);
  background-size: 150% 150%;
  box-shadow: 0 6px 18px rgba(99, 102, 241, .35);
  transition: background-position .35s var(--kn-ease), transform .22s var(--kn-ease), box-shadow .22s;
}
.kn-cta:hover {
  color: #fff;
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(99, 102, 241, .42);
}
.kn-cta:active { transform: translateY(0) scale(.97); }

/* 主内容区 */
.kn-main { flex: 1; padding: var(--kn-sp-6) 0 var(--kn-sp-2); }
.kn-main-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--kn-sp-6); }

/* 横幅公告（核心组件 · 作用域适配）：靛紫渐变条 */
.kn-body .site-banner {
  background: linear-gradient(90deg, var(--ac-soft), #F3EEFE);
  border-bottom: 1px solid #E2DEFA;
}
.kn-body .site-banner .wrap { color: var(--ac-2); }
.kn-body .site-banner a { color: var(--ac-2); }
.kn-body .banner-close { color: var(--ac-2); }

/* 页脚 */
.kn-footer {
  position: relative;
  margin-top: var(--kn-sp-10);
  background: var(--card);
  border-top: 1px solid var(--bd);
}
/* 渐变发丝线：页脚顶缘中央一道靛紫流光 */
.kn-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #6366F1, #A855F7, transparent);
}
.kn-footer-wrap { max-width: 1240px; margin: 0 auto; padding: var(--kn-sp-10) var(--kn-sp-6) 0; }
.kn-footer-top { display: flex; gap: var(--kn-sp-12); justify-content: space-between; flex-wrap: wrap; padding-bottom: 28px; }
.kn-footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.kn-footer-brand .brand-mark { background: var(--kn-grad); border-radius: 12px; }
.kn-footer-name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.kn-footer-desc { color: var(--tx-3); font-size: 13px; line-height: 1.8; }
.kn-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.kn-footer-col { display: flex; flex-direction: column; gap: 9px; }
.kn-footer-col-title { font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.kn-footer-col a { color: var(--tx-3); font-size: 13px; transition: color .2s, transform .2s var(--kn-ease); width: fit-content; }
.kn-footer-col a:hover { color: var(--ac-2); transform: translateX(3px); }
.kn-footer-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0 22px;
  border-top: 1px solid var(--bd);
  color: var(--tx-3);
  font-size: 12.5px;
}

/* 回顶按钮：渐变圆钮 + 滚动进度环（--kn-scroll 由 app.js rAF 节流写入，反馈层非装饰动画） */
.kn-body .back-top {
  border-radius: 50%;
  border: none;
  color: #fff;
  background: var(--kn-grad);
  box-shadow: 0 8px 22px rgba(99, 102, 241, .38);
  transition: transform .25s var(--kn-ease), box-shadow .25s, opacity .25s;
  isolation: isolate; /* 建立层叠上下文：进度环负 z-index 稳定压在钮后、页面内容前 */
}
.kn-body .back-top:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(99, 102, 241, .46); color: #fff; }
.kn-body .back-top::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(rgba(99, 102, 241, .55) calc(var(--kn-scroll, 0) * 360deg), rgba(99, 102, 241, .12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

/* 移动端底部导航：玻璃 + 渐变主操作 */
.kn-body .bottom-nav {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--bd);
}
.kn-body .bn-item { color: var(--tx-3); transition: color .2s; }
.kn-body .bn-item.is-active { color: var(--ac-2); }
.kn-body .bn-post {
  color: #fff;
  background: var(--kn-grad);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
  transition: transform .22s var(--kn-ease);
}
.kn-body .bn-post:active { transform: scale(.94); }
.kn-body .bn-dot { background: var(--kn-grad); }

/* ============================================================
   ③ 组件 — 按钮 / 徽章 / chips / 分页 / 表单 / 弹窗
   ============================================================ */
/* 主题按钮（主题模板自用；核心 .btn 的适配见第⑤层） */
.kn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .22s var(--kn-ease), box-shadow .22s, background-position .35s var(--kn-ease), border-color .2s, background .2s, color .2s;
}
.kn-btn-grad {
  color: #fff;
  background: var(--kn-grad);
  background-size: 150% 150%;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .32);
}
.kn-btn-grad:hover { color: #fff; background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99, 102, 241, .4); }
.kn-btn-grad:active { transform: translateY(0) scale(.97); }
.kn-btn-ghost { color: var(--tx-2); background: var(--soft-2); border-color: var(--bd); }
.kn-btn-ghost:hover { color: var(--ac-2); border-color: var(--ac); background: var(--ac-soft); transform: translateY(-1px); }
.kn-btn-block { width: 100%; }

/* 列表行徽章 */
.kn-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--ac-soft);
  color: var(--ac-2);
}
.kn-flag-ess { background: var(--warn-soft); color: var(--warn); }
.kn-flag-rec { background: #FBF0FF; color: #A21CAF; }
.kn-flag-cat { background: var(--soft); color: var(--tx-2); }
.kn-row-flags { margin-right: 2px; }
.kn-row-flags .tag { margin-right: 6px; }

/* 主题 chip（标签胶囊） */
.kn-chip {
  display: inline-block;
  font-size: 11.5px;
  color: var(--tx-3);
  background: var(--soft-2);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 1px 10px;
  margin: 0 4px 4px 0;
  transition: color .2s, border-color .2s, background .2s;
}
.kn-chip:hover { color: var(--ac-2); border-color: var(--ac); background: var(--ac-soft); }

/* 面板头「更多」链接 */
.kn-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-3);
  transition: color .2s;
}
.kn-more .ic { transition: transform .25s var(--kn-ease); }
.kn-more:hover { color: var(--ac-2); }
.kn-more:hover .ic { transform: translateX(3px); }

/* 空状态 */
.kn-empty {
  text-align: center;
  color: var(--tx-3);
  padding: 46px 16px;
  font-size: 14px;
  border: 1.5px dashed var(--bd);
  border-radius: var(--radius);
  background: var(--soft-2);
}

/* ============================================================
   ④ 模板结构 — 首页 / 列表 / 侧栏
   ============================================================ */
/* --- 主视觉 Hero：居中标题 + 悬浮统计阵列 ---
   架构：主卡只承载标题/描述（光斑层自裁剪，主卡可溢出），四张渐变描边统计卡
   以负 margin 骑在主卡下边缘悬浮（SaaS 落地页经典 overhang 形态），
   常驻错相位漂浮 + 交错进场 + 数字滚动 */
.kn-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kn-sp-6);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: var(--kn-sp-10) var(--kn-sp-12) var(--kn-sp-6);
  margin-bottom: 0;
}
.kn-hero-text { position: relative; z-index: 1; min-width: 0; }
.kn-hero-title {
  /* 流体标题（typeset：内容页大标题随视口伸缩，body 保持固定）；
     字重 700——中文系统字体无真 800，合成加粗叠渐变填充会笔画发糊 */
  font-size: clamp(26px, 1.35vw + 22.5px, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: var(--kn-sp-3);
  background: var(--kn-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 站点描述：价值主张排版（hero 中唯一正文段，给足字号与呼吸，居中收窄保证可读行宽） */
.kn-hero-desc { color: var(--tx-2); font-size: 16px; line-height: 1.85; max-width: 620px; margin: 0 auto; }

/* 漂浮光斑：裁剪内移到光斑层自身（主卡需可溢出供统计卡骑边） */
.kn-hero-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.kn-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; will-change: transform; }
.kn-blob-a { width: 420px; height: 420px; background: #A78BFA; top: -180px; right: -60px; }
.kn-blob-b { width: 320px; height: 320px; background: #818CF8; bottom: -160px; left: -80px; opacity: .4; }
.kn-blob-c { width: 220px; height: 220px; background: #22D3EE; top: 30%; right: 32%; opacity: .22; }

/* 悬浮统计阵列：负 margin 真实占位下沉 40px 骑边（横向微溢出对齐主卡边线），
   渐变描边白卡（双层背景：padding-box 实底 + border-box 渐变） */
.kn-hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kn-sp-3);
  margin: 0 calc(-1 * var(--kn-sp-4)) calc(-1 * var(--kn-sp-10));
}
.kn-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--kn-sp-4) var(--kn-sp-2) 14px;
  min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--kn-grad) border-box;
  box-shadow: var(--shadow);
  transition: box-shadow .28s;
}
.kn-stat:hover { box-shadow: var(--kn-lift); }
.kn-stat strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: var(--kn-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.kn-stat span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--tx-3);
}
.kn-stat span .ic { opacity: .7; }

/* 实体描述段（SEO 契约语料）：悬浮阵列下方的小字脚注（居中，Wikipedia 式数据注释；
   margin-top 补偿骑边占位：卡下半 40px + 呼吸 12px） */
.kn-hero-foot {
  position: relative;
  max-width: 760px;
  margin: calc(var(--kn-sp-10) + var(--kn-sp-3)) auto var(--kn-sp-6);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--tx-3);
  text-align: center;
}

/* 三栏布局中栏较窄：Hero 进一步收紧内距 */
.nav-three .kn-hero { padding: var(--kn-sp-8) var(--kn-sp-8) var(--kn-sp-5); }

/* --- 首页栅格（双栏 / 三栏，断点收窄见第⑦层） --- */
.kn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.kn-grid.is-three { grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 20px; }
.kn-grid-side { position: sticky; top: calc(var(--kn-topbar-h) + 26px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 侧栏内插件注入的 .card（钩子位输出）与主题卡间距口径统一（间距交给 flex gap） */
.kn-grid-side .card { margin-bottom: 0; }
.kn-grid-left { position: sticky; top: calc(var(--kn-topbar-h) + 26px); min-width: 0; }

/* --- 版块分类卡 + 版块卡网格 --- */
.kn-forums { display: flex; flex-direction: column; gap: var(--kn-sp-5); margin-bottom: var(--kn-sp-6); scroll-margin-top: calc(var(--kn-topbar-h) + 30px); }
.kn-cat {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--kn-sp-5) var(--kn-sp-6);
  scroll-margin-top: calc(var(--kn-topbar-h) + 26px);
}
.kn-cat-head { display: flex; align-items: baseline; gap: var(--kn-sp-3); margin-bottom: var(--kn-sp-4); flex-wrap: wrap; }
/* 标题不参与 flex 收缩：长分类描述不再把标题挤压成竖排断行 */
.kn-cat-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--kn-sp-2); flex-shrink: 0; white-space: nowrap; }
.kn-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 17px;       /* emoji 分类图标字号 */
  background: var(--ac-soft);
  color: var(--ac-2);
}
.kn-cat-desc { color: var(--tx-3); font-size: 12.5px; }
.kn-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kn-sp-3); }

/* 版块卡：图标渐变瓦片（5 色循环）+ 悬浮微交互 */
.kn-forum-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--kn-sp-4);
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  color: var(--tx);
  min-width: 0;
  transition: transform .28s var(--kn-ease), box-shadow .28s, border-color .28s;
}
.kn-forum-cell:hover { transform: translateY(-3px); box-shadow: var(--kn-lift); border-color: rgba(99, 102, 241, .35); color: var(--tx); }
/* 版块卡图标瓦片：按图标形态分流（forum_icon_html 三种输出）——
   emoji / 图片图标（站长自定义）→ 浅靛底原色显示，彩色图标在渐变底上会看不清；
   SVG 兜底图标 → 渐变底 + 白色（:has 渐进增强，不支持 :has 的浏览器全部浅底，功能无损） */
.kn-forum-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 22px;       /* emoji 文本图标字号 */
  background: var(--ac-soft);
  color: var(--ac-2);    /* SVG 兜底色（浅底场景） */
  flex-shrink: 0;
  transition: transform .3s var(--kn-ease);
}
.kn-forum-ic .c-icon { width: 26px; height: 26px; }  /* 图片图标固定尺寸（覆盖 1.15em 相对值） */
.kn-forum-ic:has(> svg) { background: var(--kn-grad); color: #fff; }
.kn-forum-cell:nth-child(5n+2) .kn-forum-ic:has(> svg) { background: var(--kn-grad-2); }
.kn-forum-cell:nth-child(5n+3) .kn-forum-ic:has(> svg) { background: var(--kn-grad-5); }
.kn-forum-cell:nth-child(5n+4) .kn-forum-ic:has(> svg) { background: var(--kn-grad-3); }
.kn-forum-cell:nth-child(5n+5) .kn-forum-ic:has(> svg) { background: var(--kn-grad-4); }
.kn-forum-cell:hover .kn-forum-ic { transform: rotate(-6deg) scale(1.06); }
.kn-forum-main { flex: 1; min-width: 0; }
.kn-forum-name { display: block; font-weight: 600; font-size: 14.5px; }
.kn-forum-desc {
  display: block;
  font-size: 12.5px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kn-forum-count { text-align: center; flex-shrink: 0; }
.kn-forum-count strong { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kn-forum-count span { font-size: 11px; color: var(--tx-3); }
/* 锁定版块（无权访问锁定展示）：降透明 + 虚线 + 悬停不抬升 */
.kn-forum-cell.is-locked { opacity: .62; border-style: dashed; }
.kn-forum-cell.is-locked:hover { transform: none; box-shadow: none; border-color: var(--bd); }
.kn-forum-lock, .kn-body .nav-locked svg { vertical-align: -2px; }

/* --- 专题精选：渐变卡（面板壳已透明，仅余区块头 + 渐变卡网格） --- */
.kn-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--kn-sp-3); }
.kn-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  color: #fff;
  background: var(--kn-grad);
  overflow: hidden;
  transition: transform .28s var(--kn-ease), box-shadow .28s;
}
.kn-topic-card:nth-child(4n+2) { background: var(--kn-grad-2); }
.kn-topic-card:nth-child(4n+3) { background: var(--kn-grad-5); }
.kn-topic-card:nth-child(4n+4) { background: var(--kn-grad-4); }
.kn-topic-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(99, 102, 241, .35); color: #fff; }
.kn-topic-card strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.kn-topic-desc { font-size: 12.5px; opacity: .85; }
.kn-topic-count { font-style: normal; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; opacity: .85; margin-top: 4px; }
.kn-topic-card .ic { transition: transform .25s var(--kn-ease); }
.kn-topic-card:hover .ic { transform: translateX(4px); }

/* --- 区块面板（最新动态 / 专题精选）：透明区块 + 渐变锚点标题 ---
   反模式修复（arrange）：列表行卡片是唯一的卡层，包裹容器不再做卡中卡——
   面板退为「区块头 + 卡片堆叠」，分组交给间距与标题锚点本身。
   scroll-margin 供分页锚点 #kn-latest / #kn-list-anchor 跳转避让吸顶导航 */
.kn-panel {
  margin-bottom: var(--kn-sp-6);
  scroll-margin-top: calc(var(--kn-topbar-h) + 30px);
}
.kn-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kn-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--kn-sp-4);
  padding: 0 2px;
}
.kn-panel-head h3 {
  position: relative;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--kn-sp-2);
  padding-left: 14px;
}
/* 区块标题渐变竖条：squint test 层级锚点（与版块头卡渐变语汇同源） */
.kn-panel-head h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--kn-grad);
}

/* 在线脉冲点（热门/在线面板头共用） */
.kn-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
}

/* --- 卡片式列表（.kn-list 主题容器 / .thread-list 回退页容器共用形态） --- */
.kn-list, .kn-body .thread-list { display: flex; flex-direction: column; gap: var(--kn-sp-3); }

/* 列表行卡片（isolation 建立层叠上下文：头像渐变光环负 z-index 稳定压在卡片背景之上） */
.kn-row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--kn-sp-4) var(--kn-sp-5);
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  transition: transform .28s var(--kn-ease), box-shadow .28s, border-color .28s;
}
.kn-row:hover { transform: translateY(-3px); box-shadow: var(--kn-lift); border-color: rgba(99, 102, 241, .32); }
.kn-row-idx {
  font-size: 20px;
  font-weight: 800;
  color: var(--bd-2);
  font-variant-numeric: tabular-nums;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.kn-row-ava { position: relative; z-index: 1; flex-shrink: 0; border-radius: 50%; }
/* 头像不做任何悬停装饰（环/背景等）：卡片悬停已有抬升+阴影+标题变色+箭头渐变四重反馈，
   头像区再叠加光环易被误认为头像框特效；z-index:1 保证头像链接在拉伸链接之上可点 */
.kn-row-main { flex: 1; min-width: 0; }
.kn-row-title { font-size: 15px; font-weight: 600; line-height: 1.55; letter-spacing: -.005em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 0; }
.kn-row-link { color: var(--tx); transition: color .2s; }
.kn-row-link:hover { color: var(--ac-2); }
/* 整卡可点击（interaction-design 拉伸链接）：标题链接 ::after 覆盖整行；
   后续内嵌链接提层（positioned + z-index:1，按 DOM 序压过拉伸层）保持独立可点 */
.kn-row-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.kn-row:hover .kn-row-link { color: var(--ac-2); } /* 任意位置悬停即标题反馈 */
/* 插件行内徽章（评分五星 .trt-row / 书架 .bs-row，经 thread_row_extra 注入 meta 行）：
   提层到拉伸链接之上，保证 data-tip 悬浮提示可触发 */
.kn-row-meta .trt-row, .kn-row-meta .bs-row { position: relative; z-index: 1; }
.kn-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--tx-3);
}
.kn-dot { color: var(--bd-2); }
.kn-row-meta a { position: relative; z-index: 1; }
.kn-row-author { color: var(--tx-2); font-weight: 500; }
.kn-row-author:hover { color: var(--ac-2); }
.kn-row-forum { color: var(--tx-3); }
.kn-row-forum:hover { color: var(--ac-2); }
.kn-row-gifts { color: var(--tx-3); }
.kn-row-last { color: var(--tx-3); }
.kn-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.kn-row-tags .kn-chip { position: relative; z-index: 1; }
.kn-row-side { display: flex; align-items: center; gap: var(--kn-sp-3); flex-shrink: 0; }
.kn-nums { display: inline-flex; gap: 14px; }
.kn-num { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; min-width: 34px; }
.kn-num strong { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tx-2); }
.kn-num span { font-size: 10.5px; color: var(--tx-3); }
/* 行尾阅读箭头：悬浮时渐变显形 + 滑移 */
.kn-row-go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--tx-3);
  background: var(--soft-2);
  opacity: .75;
  transition: opacity .25s, background .25s, color .25s, transform .3s var(--kn-ease);
}
.kn-row:hover .kn-row-go {
  opacity: 1;
  color: #fff;
  background: var(--kn-grad);
  transform: translateX(2px);
}

/* --- 侧栏卡 --- */
.kn-side {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--kn-sp-5);
  transition: transform .28s var(--kn-ease), box-shadow .28s, border-color .28s;
}
.kn-side:hover { transform: translateY(-2px); box-shadow: var(--kn-lift); border-color: rgba(99, 102, 241, .26); }
.kn-side-head { display: flex; align-items: center; margin-bottom: 14px; }
.kn-side-head h3 { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.kn-side-head .ic { color: var(--ac); }

/* 热门榜：渐变序号 */
.kn-hot-list { list-style: none; counter-reset: knhot; display: flex; flex-direction: column; gap: 2px; }
.kn-hot-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--soft); }
.kn-hot-list li:last-child { border-bottom: none; }
.kn-hot-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--soft-2);
  flex-shrink: 0;
  transform: translateY(3px);
}
.kn-hot-rank.is-top { color: #fff; background: var(--kn-grad); }
.kn-hot-link { flex: 1; min-width: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.6; transition: color .2s; }
.kn-hot-link:hover { color: var(--ac-2); }

/* 在线头像墙 */
.kn-online-nums { font-size: 12px; color: var(--tx-3); font-weight: 400; margin-left: 6px; }
.kn-online-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-online-avatars a { border-radius: 50%; transition: transform .25s var(--kn-ease); }
.kn-online-avatars a:hover { transform: translateY(-3px) scale(1.08); }
.kn-online-empty { color: var(--tx-3); font-size: 13px; }

/* 新成员 / 友链 / PWA 卡 */
.kn-newest { font-size: 13px; color: var(--tx-2); margin-bottom: 12px; line-height: 1.7; }
.kn-newest a { font-weight: 600; }
.kn-side-actions { display: flex; flex-direction: column; gap: 9px; }
.kn-friend-links { display: flex; flex-wrap: wrap; gap: 7px; }
.kn-friend-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--tx-2);
  background: var(--soft-2);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 3px 12px;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--kn-ease);
}
.kn-friend-link:hover { color: var(--ac-2); border-color: var(--ac); background: var(--ac-soft); transform: translateY(-1px); }
.kn-pwa-tip { font-size: 12.5px; color: var(--tx-3); line-height: 1.7; margin-bottom: 12px; }

/* ============================================================
   ⑤ 页面适配 — 回退页核心类作用域覆盖（.kn-body 前缀）
   ============================================================ */
/* 卡片：统一圆角与阴影（不抬升——静态内容卡不做悬浮，动效留给交互卡） */
.kn-body .card { border-radius: var(--radius); border-color: var(--bd); box-shadow: var(--shadow); }
.kn-body .card-head h1, .kn-body .card-head h2, .kn-body .card-head h3 { letter-spacing: -.01em; }

/* 列表容器扁平化（app.js 对 .thread-list/.kn-list 的直接父级 .card 标记 .kn-flat）：
   消除「卡片套卡片」——列表行卡片是唯一卡层，外层 .card 退为透明区块（与首页 .kn-panel 同构）。
   作用：版块页 / 搜索 / 标签 / 收藏 / 用户主页主题与回答列表 */
.kn-body .card.kn-flat {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* 扁平卡内的区块头：与 .kn-panel-head 同款渐变竖条锚点 */
.kn-body .card.kn-flat > .card-head { margin-bottom: var(--kn-sp-4); padding: 0 2px; }
.kn-body .card.kn-flat > .card-head h2,
.kn-body .card.kn-flat > .card-head h3 {
  position: relative;
  padding-left: 14px;
}
.kn-body .card.kn-flat > .card-head h2::before,
.kn-body .card.kn-flat > .card-head h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--kn-grad);
}
/* 扁平卡内残留的核心行（用户主页「已解决回答」硬编码 .thread-row，非主题 partial）：
   统一为卡片行语言，避免扁平化后裸行悬空 */
.kn-body .thread-list .thread-row {
  display: flex;
  align-items: center;
  gap: var(--kn-sp-3);
  padding: var(--kn-sp-4) var(--kn-sp-5);
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  transition: transform .28s var(--kn-ease), box-shadow .28s, border-color .28s;
}
.kn-body .thread-list .thread-row:hover { transform: translateY(-3px); box-shadow: var(--kn-lift); border-color: rgba(99, 102, 241, .32); }

/* 核心按钮：渐变实心 / 幽灵胶囊 */
.kn-body .btn {
  border-radius: 999px;
  background: var(--kn-grad);
  background-size: 150% 150%;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(99, 102, 241, .28);
  transition: background-position .35s var(--kn-ease), transform .22s var(--kn-ease), box-shadow .22s, color .2s;
}
.kn-body .btn:hover { background: var(--kn-grad); background-position: 100% 50%; color: #fff; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(99, 102, 241, .36); }
.kn-body .btn:active { transform: translateY(0) scale(.97); }
.kn-body .btn-ghost { background: var(--soft-2); color: var(--tx-2); border-color: var(--bd); box-shadow: none; }
.kn-body .btn-ghost:hover { background: var(--ac-soft); color: var(--ac-2); border-color: var(--ac); box-shadow: none; transform: translateY(-1px); }
.kn-body .btn-danger { background: var(--err); }
.kn-body .btn-danger:hover { background: var(--err); filter: brightness(1.08); }
.kn-body .btn-danger-ghost { background: transparent; color: var(--err); border-color: var(--err-soft); box-shadow: none; }
.kn-body .btn-danger-ghost:hover { background: var(--err); color: #fff; border-color: var(--err); }
.kn-body .logout-btn { color: var(--tx-2); }

/* chips / tags：胶囊化 + 激活渐变 */
.kn-body .chip { border-radius: 999px; transition: color .2s, border-color .2s, background .2s, transform .2s var(--kn-ease); }
.kn-body .chip:hover { border-color: var(--ac); color: var(--ac-2); transform: translateY(-1px); }
.kn-body .chip.is-on { background: var(--kn-grad); border-color: transparent; color: #fff; }
.kn-body .tag { border-radius: 999px; }
.kn-body .tag-chip { border-radius: 999px; }
.kn-body .tag-chip:hover { background: var(--ac-soft); }
.kn-body .empty-box { border: 1.5px dashed var(--bd); border-radius: var(--radius); background: var(--soft-2); }

/* 分页：胶囊页码 + 渐变当前页 */
.kn-body .pager { gap: 8px; }
.kn-body .pager-btn { border-radius: 999px; font-weight: 500; transition: transform .2s var(--kn-ease), border-color .2s, color .2s, box-shadow .2s; }
.kn-body .pager-btn:hover { transform: translateY(-2px); }
.kn-body .pager-btn.is-current { background: var(--kn-grad); border-color: transparent; box-shadow: 0 5px 14px rgba(99, 102, 241, .32); }

/* 提示条 / 表单 */
.kn-body .alert { border-radius: 14px; }
.kn-body .field label { color: var(--tx-2); }
.kn-body input[type=text], .kn-body input[type=password], .kn-body input[type=email], .kn-body input[type=search],
.kn-body input[type=url], .kn-body input[type=tel], .kn-body input[type=number], .kn-body input[type=time],
.kn-body input[type=date], .kn-body input[type=datetime-local], .kn-body select, .kn-body textarea {
  border-radius: 12px;
  border-color: var(--bd);
  transition: border-color .2s, box-shadow .2s;
}
.kn-body input:focus, .kn-body select:focus, .kn-body textarea:focus {
  border-color: var(--ac);
  box-shadow: var(--kn-ring);
  outline: none;
}

/* 面包屑 / 页头 */
.kn-body .page-head { margin-bottom: 20px; }
.kn-body .breadcrumb a:hover { color: var(--ac-2); }
.kn-body .breadcrumb .sep { color: var(--bd-2); }

/* 版块页头卡：靛紫渐变洗底 */
.kn-body .forum-head { background: linear-gradient(135deg, #FFFFFF 0%, #F0EDFE 100%); border-radius: var(--radius); }
.kn-body .forum-counts strong { font-variant-numeric: tabular-nums; }

/* 帖子详情：标题字重与主卡圆角 */
.kn-body .thread-title { letter-spacing: -.015em; }
.kn-body .thread-card { border-radius: 18px; }
.kn-body .post-floor { border-radius: 999px; }

/* 弹窗 / 下拉 / 通知面板：大圆角 */
.kn-body .drop-menu { border-radius: 16px; }
.kn-body .drop-menu a { border-radius: 10px; transition: background .18s, color .18s, padding-left .18s; }
.kn-body .drop-menu a:hover { padding-left: 14px; }
.kn-body .ntf-panel { border-radius: 16px; }
.kn-body .user-drop { border-radius: 16px; }
.kn-body .modal-box { border-radius: 20px; }
.kn-body .more-link { color: var(--tx-3); }
.kn-body .more-link:hover { color: var(--ac-2); }

/* 版块 cell（三栏左栏快捷导航 / 回退场景）轻适配 */
.kn-body .forum-cell { border-radius: 14px; transition: transform .25s var(--kn-ease), box-shadow .25s, border-color .25s, background .2s; }
.kn-body .forum-cell:hover { transform: translateY(-2px); box-shadow: var(--kn-lift); border-color: rgba(99, 102, 241, .3); }
.kn-body .forum-cell-icon { border-radius: 13px; background: var(--ac-soft); color: var(--ac-2); }
.kn-body .forum-cell-locked:hover { transform: none; box-shadow: none; }

/* ============================================================
   ⑥ 动效系统 — 进场 / 漂浮 / 脉冲（reduced-motion 全量守卫）
   ============================================================ */
/* 进场 reveal：仅 JS 可用（html.kn-js）且允许动画时启用；
   animation + backwards 填充——动画结束即回归自然样式，不干扰后续 hover 过渡 */
@media (prefers-reduced-motion: no-preference) {
  .kn-js .kn-reveal:not(.kn-in) { opacity: 0; }
  .kn-js .kn-reveal.kn-in { animation: knRevealIn .55s var(--kn-ease) backwards; }

  /* Hero 光斑漂浮（transform-only，GPU 合成） */
  .kn-blob-a { animation: knFloatA 17s ease-in-out infinite alternate; }
  .kn-blob-b { animation: knFloatB 21s ease-in-out infinite alternate; }
  .kn-blob-c { animation: knFloatC 15s ease-in-out infinite alternate; }

  /* 在线脉冲点：外扩涟漪 */
  .kn-live-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #10B981;
    animation: knPing 2.4s cubic-bezier(0, 0, .2, 1) infinite;
  }

  /* 悬浮统计卡双动画：进场淡入交错（CSS nth-child 接管时序，不经 JS stagger）
     + 常驻错相位漂浮（bob 接管 transform，进场位移由 bob 起点归零；1.2s 后启动） */
  .kn-js .kn-stat.kn-in {
    animation: knRevealIn .55s var(--kn-ease) backwards, knBob 5.5s ease-in-out 1.2s infinite alternate;
  }
  .kn-js .kn-stat:nth-child(2).kn-in { animation-delay: 70ms, -1.3s; }
  .kn-js .kn-stat:nth-child(3).kn-in { animation-delay: 140ms, -2.6s; }
  .kn-js .kn-stat:nth-child(4).kn-in { animation-delay: 210ms, -3.9s; }
}
@keyframes knBob {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}
@keyframes knRevealIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes knFloatA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-46px, 34px) scale(1.1); }
}
@keyframes knFloatB {
  from { transform: translate(0, 0) scale(1.05); }
  to { transform: translate(40px, -30px) scale(.95); }
}
@keyframes knFloatC {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-30px, -42px) scale(1.15); }
}
@keyframes knPing {
  0% { transform: scale(.5); opacity: .8; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
/* 减少动效偏好：进场隐藏规则本就只在 no-preference 媒体查询内生效（此处直接不触发）；
   opacity !important 为双保险，脉冲消隐、光斑静止（未注册动画） */
@media (prefers-reduced-motion: reduce) {
  .kn-reveal { opacity: 1 !important; }
  .kn-live-dot::after { content: none; }
}

/* 数字滚动容器：等宽数字防跳动 */
.kn-count { font-variant-numeric: tabular-nums; }

/* ============================================================
   ⑦ 响应式 — 断点对齐核心（1024 / 720）
   ============================================================ */
@media (max-width: 1024px) {
  /* 栅格单列：minmax(0,1fr) 防 min-content 撑爆（核心同款防线） */
  .kn-grid, .kn-grid.is-three { grid-template-columns: minmax(0, 1fr); }
  .kn-grid-side { position: static; }
  .kn-grid-left { display: none; }
  /* 平板收起顶栏搜索胶囊（保留图标入口）与品牌文字（防导航条目拥挤溢出） */
  .kn-topsearch { display: none; }
  .kn-brand .brand-name { display: none; }
  .kn-hero { padding: var(--kn-sp-8); }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .kn-topbar { top: 8px; padding: 0 10px; }
  .kn-topbar::before { top: -8px; height: 8px; }
  .kn-topbar-in { height: 56px; padding: 0 10px 0 14px; gap: 10px; border-radius: 18px; }
  .kn-brand { font-size: 15.5px; }
  .kn-brand .brand-name { display: none; }
  .kn-login, .kn-cta { height: 34px; padding: 0 14px; font-size: 12.5px; }
  .kn-login { padding: 0 12px; }

  /* 汉堡抽屉：胶囊下方滑出圆角面板（.open 由核心 app.js 切换） */
  .kn-topbar .nav-toggle { display: inline-flex; }
  .kn-topbar .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--kn-sp-3);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    z-index: 110;
  }
  .kn-topbar .main-nav.open { display: flex; }
  .kn-topbar .main-nav.open > * { animation: knDrawerIn .3s var(--kn-ease) backwards; }
  .kn-topbar .main-nav.open > *:nth-child(2) { animation-delay: .03s; }
  .kn-topbar .main-nav.open > *:nth-child(3) { animation-delay: .06s; }
  .kn-topbar .main-nav.open > *:nth-child(4) { animation-delay: .09s; }
  .kn-topbar .main-nav.open > *:nth-child(5) { animation-delay: .12s; }
  .kn-topbar .main-nav.open > *:nth-child(6) { animation-delay: .15s; }
  .kn-topbar .main-nav.open > *:nth-child(7) { animation-delay: .18s; }
  .kn-topbar .main-nav.open > *:nth-child(8) { animation-delay: .21s; }
  .kn-topbar .nav-link { padding: 11px 10px; font-size: 14.5px; }
  .kn-topbar .nav-link::after { display: none; }
  .kn-topbar .head-search-btn { display: inline-flex; }

  .kn-main { padding: var(--kn-sp-5) 0 6px; }
  .kn-main-wrap { padding: 0 14px; }

  /* Hero：移动端取消骑边（悬浮卡回归卡内常规流），统计 2×2 */
  .kn-hero { padding: var(--kn-sp-6) var(--kn-sp-5) var(--kn-sp-5); gap: var(--kn-sp-5); border-radius: 20px; }
  .kn-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kn-sp-3); margin: 0; }
  .kn-stat { padding: var(--kn-sp-3) var(--kn-sp-2) 12px; }
  .kn-stat strong { font-size: 22px; }
  .kn-hero-foot { margin: var(--kn-sp-5) auto; }

  .kn-cat { padding: var(--kn-sp-5) var(--kn-sp-4); }
  .kn-cat-grid { grid-template-columns: minmax(0, 1fr); }
  .kn-panel-head { margin-bottom: var(--kn-sp-3); }

  /* 列表行：统计下沉（窄屏空间让位给标题） */
  .kn-row { flex-wrap: wrap; padding: var(--kn-sp-3) var(--kn-sp-4); gap: 11px; }
  .kn-row-side { width: 100%; justify-content: space-between; order: 3; padding-top: 4px; border-top: 1px dashed var(--soft); }
  .kn-nums { gap: var(--kn-sp-5); }
  .kn-row-go { margin-left: auto; }

  .kn-footer-wrap { padding: var(--kn-sp-8) 14px 0; }
  .kn-footer-top { gap: 26px; }
  .kn-footer-cols { gap: 30px; }
}
@keyframes knDrawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}