/*!
 * NavHub 导航主题样式
 *
 * 结构：
 *   0. 设计令牌（来源 design/tokens.css，三层：primitive → semantic → 主题别名）
 *   1. 基础重置与布局（左右两栏切换、响应式）
 *   2. 组件：卡片网格、详情页、表单、分页、空状态
 *   3. W6 增补（参考 JackSite）：聚合搜索 / 权重 / 评估 / 相关站点 / 排行
 *   4. W7 增补：分类页 / 标签页 / 文章页三套 UI（报刊编辑风）
 *   5. W8 增补：外链确认页 / 自定义链接 / 推荐位
 *   6. W19 增补：设计规范系统落地 —— 青绿强调色、语义文本层级、反白块统一
 *
 * 配色方向（W19 起）
 *   品牌深蓝延续 #123a8f；强调色由 W7 的朱橙 #ff4d00 收敛为**青绿三档**：
 *     500 #00a887 —— 装饰（图形 / 色条 / 徽章底），不得承载文字
 *     600 #007a63 —— 浅底（含画布）上的强调文字，4.98:1
 *     700 #00654f —— 承载浅色文字的按钮底，7.06:1
 *     800 #00483a —— 按钮硬投影
 *   三档不可混用；改任何一个值都要先跑
 *     python tools/_work/design_token_check.py nav_hub/style/style.css --alias
 *
 * 为什么要有「主题别名层」
 *   模板与既有 4000 行规则只认 --navhub-*。把别名层全部指向 semantic 令牌后，
 *   暗色模式只需重定义 semantic 层，别名层自动跟随 —— 不必再为每个变量写一遍
 *   暗色值，也不会出现"某个变量忘了写暗色档"这类漏洞。
 */

:root {
  /* ============================================================ 0.1 primitive
     原始色阶。规则：本层只被 semantic 层引用，组件里不要直接写 --navy-700。 */

  --navy-50:  #f4f7fd;
  --navy-100: #e8eefb;
  --navy-200: #c9d8f2;
  --navy-300: #9db6e6;
  --navy-500: #2f63d4;
  --navy-600: #1b4bb0;
  --navy-700: #123a8f;   /* 品牌基准色 */
  --navy-800: #0e2a5c;
  --navy-900: #0a1f47;

  --teal-100: #dcf5ee;
  --teal-300: #5ad1b0;
  --teal-400: #2bbd9b;
  --teal-500: #00a887;
  --teal-600: #007a63;
  --teal-700: #00654f;
  --teal-800: #00483a;

  --neutral-0:   #ffffff;
  --neutral-25:  #fbfcfe;
  --neutral-50:  #f6f8fc;
  --neutral-100: #eef2f8;
  --neutral-200: #e2e8f2;
  --neutral-300: #cbd5e6;
  --neutral-400: #a8b4c8;
  --neutral-500: #8592a8;
  --neutral-600: #66738a;
  --neutral-700: #5d6980;
  --neutral-800: #46536b;
  --neutral-900: #2b3549;
  --neutral-950: #101a2e;

  --green-600: #0f7a4e;
  --green-100: #e3f4ec;
  --amber-600: #a45c07;
  --amber-100: #fdf2e0;
  --red-600:   #c33b3b;
  --red-100:   #fdeeee;

  /* ============================================================ 0.2 semantic
     语义层。暗色模式只重定义这一层（见文件下方两处暗色块）。 */

  --color-canvas:      var(--neutral-50);
  --color-surface:     var(--neutral-0);
  --color-surface-alt: var(--neutral-100);
  --color-ink-surface: var(--navy-900);
  --color-ink-surface-2: #0d2653;

  --color-text:             var(--neutral-950);
  --color-text-secondary:   var(--neutral-800);
  --color-text-tertiary:    var(--neutral-700);
  --color-text-placeholder: var(--neutral-600);
  --color-text-on-ink:      #ffffff;
  --color-text-on-ink-2:    #8b9abb;
  --color-text-on-ink-3:    #7b8bab;

  --color-brand:        var(--navy-700);
  --color-brand-strong: var(--navy-800);
  --color-brand-soft:   var(--navy-100);
  --color-on-brand:     #ffffff;
  --color-accent:       var(--teal-500);
  --color-accent-text:  var(--teal-600);
  --color-accent-btn:   var(--teal-700);
  --color-accent-deep:  var(--teal-800);
  --color-accent-soft:  var(--teal-100);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-danger:  var(--red-600);
  --color-success-soft: var(--green-100);
  --color-warning-soft: var(--amber-100);
  --color-danger-soft:  var(--red-100);
  --color-focus: var(--navy-700);
  --color-divider: #e6ecf5;
  --color-info:    var(--navy-700);

  --shadow-xs: 0 1px 2px rgba(16, 26, 46, 0.05);
  --shadow-sm: 0 2px 6px rgba(16, 26, 46, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 26, 46, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 31, 71, 0.14);
  --shadow-focus: 0 0 0 3px var(--navy-100);

  /* ============================================================ 0.2b 排版
     （规范 3.1 / 3.2）字体栈全部走系统本地字形：零网络请求、零 FOUT。
     --font-num 承担数字与编号，配 tabular-nums 形成等宽「表格数字」观感，
     这是本主题区别于普通导航站的字形签名，且不付出字体加载成本。 */

  --font-ui: system-ui, -apple-system, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
             "Noto Sans SC", sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display",
              var(--font-ui);

  --text-caption: 0.75rem;    /* 12px 辅助信息、徽章 */
  --text-sm:      0.8125rem;  /* 13px 元信息 */
  --text-base:    0.875rem;   /* 14px 密集 UI */
  --text-body:    1rem;       /* 16px 正文下限，不再更低 */
  --text-lg:      clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --text-xl:      clamp(1.25rem, 0.7vw + 1.08rem, 1.5rem);
  --text-2xl:     clamp(1.5rem, 1.4vw + 1.15rem, 2rem);
  --text-hero:    clamp(1.75rem, 2.2vw + 1.2rem, 2.75rem);

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;    /* 深底浅字观感更轻，需要更多呼吸 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --tracking-tight: -0.011em;  /* 中文标题默认字距偏松，收紧后更紧实 */
  --tracking-caps:  0.06em;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- 间距（4pt 基准，规范 3.3）---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: clamp(40px, 4vw, 64px);

  --container-max: 1200px;
  --container-pad: 16px;
  --grid-gap:      var(--space-lg);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 120ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    520ms;
  --dur-exit-factor: 0.75;   /* 退场比进场快 25% */

  /* ---- 层级（z-index 只在定位元素上生效）---- */
  --z-base:     1;
  --z-sticky:   40;
  --z-dropdown: 60;
  --z-overlay:  80;
  --z-modal:    100;
  --z-toast:    120;

  /* ---- 资讯卡策展渐变（规范 2.3）----
     六组全部满足白字正文 AA，最差 5.23:1；同取自深蓝→青绿一条谐波，
     一屏内多卡并置仍是一套体系，不引入跳色。 */
  --grad-1: linear-gradient(135deg, #0b2149, #123a8f);
  --grad-2: linear-gradient(135deg, #123a8f, #1e60c4);
  --grad-3: linear-gradient(135deg, #0d4f6e, #12709c);
  --grad-4: linear-gradient(135deg, #0a5b52, #0b7a63);
  --grad-5: linear-gradient(135deg, #1c2f6b, #3b4fa8);
  --grad-6: linear-gradient(135deg, #0e2a5c, #0f7a6a);

  /* ---- 首页 Hero / 轮播（规范 4.9）---- */
  --hero-min-h: clamp(320px, 34vw, 440px);
  --carousel-interval: 5500ms;

  /* ---- 轮播幻灯片渐变（规范 4.9）----
     比 --grad-* 多一个中间停靠点：slide 的面积远大于卡片，两点渐变在大屏上
     会出现肉眼可见的色带。三档与 --grad-1/3/5 同族，不会跳出体系。
     白字在三个停靠点上最差 4.74:1，仍满足正文 AA。 */
  --hero-grad-1: linear-gradient(120deg, #0b2149 0%, #123a8f 62%, #15499b 100%);
  --hero-grad-2: linear-gradient(120deg, #0d4f6e 0%, #12709c 60%, #0f7a6a 100%);
  --hero-grad-3: linear-gradient(120deg, #1c2f6b 0%, #3b4fa8 55%, #123a8f 100%);

  /* ============================================================ 0.3 主题别名
     既有规则只认这一层。改配色只需要动这里，不动 4000 行组件代码。 */

  --navhub-primary:       var(--color-brand);
  --navhub-primary-dark:  var(--color-brand-strong);
  --navhub-primary-soft:  var(--color-brand-soft);
  /* 品牌色填充上的文字（主按钮 / 选中分页 / 置顶标签）：
     浅色下品牌色是深蓝，用白字；暗色下品牌色变成亮蓝，必须改用深字，
     否则会掉到 2:1 —— 这是 W18 及以前真实存在的暗色缺陷。 */
  --navhub-on-brand:      var(--color-on-brand);

  --navhub-accent:        var(--color-accent);       /* 500 装饰 */
  --navhub-accent-text:   var(--color-accent-text);  /* 600 浅底文字 */
  --navhub-accent-btn:    var(--color-accent-btn);   /* 700 白字按钮底 */
  --navhub-accent-deep:   var(--color-accent-deep);  /* 800 硬投影 */
  --navhub-accent-soft:   var(--color-accent-soft);
  /* 兼容旧名：--navhub-accent-dark 的剩余 7 处用法全部是**文字**
     （页型眉标 hover / 面包屑 hover / 目录高亮 / mark / 正文链接 hover），
     所以它接的是"强调文字再深一档"，不是按钮填充色。
     亮色下往深走（#00483a）；暗色下没有更深的空间，改为提亮（见暗色块）。 */
  --navhub-accent-dark:   var(--color-accent-deep);

  --navhub-ok:        var(--color-success);
  --navhub-ok-soft:   var(--color-success-soft);
  --navhub-bad:       var(--color-danger);
  --navhub-bad-soft:  var(--color-danger-soft);
  --navhub-warn:      var(--color-warning);
  --navhub-warn-soft: var(--color-warning-soft);

  --navhub-bg:            var(--color-canvas);
  --navhub-surface:       var(--color-surface);
  --navhub-surface-2:     var(--color-surface-alt);
  --navhub-border:        var(--color-border);
  --navhub-border-strong: var(--color-border-strong);

  --navhub-text:   var(--color-text);
  --navhub-text-2: var(--color-text-secondary);
  --navhub-text-3: var(--color-text-tertiary);

  /* 反白组：--navhub-ink 恒定是**深色**（浅色 #0a1f47 / 暗色 #0b1220）。
     W19 取消了 W7 的「墨色反转」——那套机制下暗色时 ink 会变成亮色，
     于是「强调色落在 ink 上」「浅字落在强调色上」两组搭配会同时失效。
     现在两种模式下都是「深底 + 浅字 / 浅底 + 深字」，配色只有一个方向。 */
  --navhub-ink:        var(--color-ink-surface);
  --navhub-on-ink:     var(--color-text-on-ink);
  --navhub-on-ink-2:   var(--color-text-on-ink-2);

  /* 无 semantic 对应物的主题专有令牌 */
  --navhub-dot-on-ink: rgba(255, 255, 255, 0.22);   /* 深色块上的网点纹理 */
  --navhub-code-bg:    #0e1424;
  --navhub-code-fg:    #e9eefb;

  --navhub-radius:       var(--radius-sm);
  --navhub-radius-lg:    var(--radius-md);
  /* 报刊风硬边档：比 --radius-xs(4px) 更锐，是本主题的视觉签名，不并入设计系统 */
  --navhub-radius-sharp: 3px;

  --navhub-shadow:       var(--shadow-xs);
  --navhub-shadow-hover: var(--shadow-sm);
  --navhub-ease:         var(--ease-out-quart);

  --navhub-sidebar-width: 300px;
  --navhub-gap:           var(--space-lg);
  --navhub-container:     var(--container-max);
  --navhub-head-h:        60px;
}

/* ---------------------------------------------------------------- 暗色模式
   只重定义 semantic 层；--navhub-* 映射组自动跟随，不需要重复声明。

   两处暗色声明必须保持逐字一致，CSS 没有在
   「媒体查询」与「属性选择器」之间共享声明的语法，只能写两遍：
     ① 跟随系统：@media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
     ② 手动切换：:root[data-theme="dark"]（写在后面，同权重下后者胜出） */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas:        #0f1626;
    --color-surface:       #18213a;
    --color-surface-alt:   #1e2841;
    --color-ink-surface:   #0b1220;
    --color-ink-surface-2: #131c30;

    --color-text:             #e8edf7;
    --color-text-secondary:   #a9b6cc;
    --color-text-tertiary:    #8b98b0;
    --color-text-placeholder: #7d8aa2;
    --color-text-on-ink:      #f2f5fb;
    --color-text-on-ink-2:    #9aa6bd;
    --color-text-on-ink-3:    #7f8ba3;

    --color-brand:        #8fb0f0;
    --color-brand-strong: #a8c4f7;
    --color-brand-soft:   #1b2745;
    --color-on-brand:   #0b1220;
    --color-accent:       #4fd1b1;
    --color-accent-text:  #4fd1b1;
    --color-accent-btn:   #0f7359;
    --color-accent-deep:  #083d2f;
    --color-accent-soft:  #10312a;

    --color-border:        #253150;
    --color-border-strong: #35446a;

    --color-success: #4ec98d;
    --color-warning: #e0a44c;
    --color-danger:  #f08a8a;
    --color-success-soft: #0d2b21;
    --color-warning-soft: #2e2310;
    --color-danger-soft:  #2e1418;
    --color-focus: #8fb0f0;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px #1b2745;

    /* 主题专有令牌的暗色档 */
    --navhub-accent-dark: #6ee0c4;
    --navhub-code-bg:  #0a0f1c;
  }
}

:root[data-theme="dark"] {
  --color-canvas:        #0f1626;
  --color-surface:       #18213a;
  --color-surface-alt:   #1e2841;
  --color-ink-surface:   #0b1220;
  --color-ink-surface-2: #131c30;

  --color-text:             #e8edf7;
  --color-text-secondary:   #a9b6cc;
  --color-text-tertiary:    #8b98b0;
  --color-text-placeholder: #7d8aa2;
  --color-text-on-ink:      #f2f5fb;
  --color-text-on-ink-2:    #9aa6bd;
  --color-text-on-ink-3:    #7f8ba3;

  --color-brand:        #8fb0f0;
  --color-brand-strong: #a8c4f7;
  --color-brand-soft:   #1b2745;
  --color-on-brand:   #0b1220;
  --color-accent:       #4fd1b1;
  --color-accent-text:  #4fd1b1;
  --color-accent-btn:   #0f7359;
  --color-accent-deep:  #083d2f;
  --color-accent-soft:  #10312a;

  --color-border:        #253150;
  --color-border-strong: #35446a;

  --color-success: #4ec98d;
  --color-warning: #e0a44c;
  --color-danger:  #f08a8a;
  --color-success-soft: #0d2b21;
  --color-warning-soft: #2e2310;
  --color-danger-soft:  #2e1418;
  --color-focus: #8fb0f0;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px #1b2745;
  --navhub-accent-dark: #6ee0c4;
  --navhub-code-bg:  #0a0f1c;
}

/* ---------------------------------------------------------------- 基础重置 */

.navhub-body,
.navhub-body * {
  box-sizing: border-box;
}

.navhub-body {
  margin: 0;
  padding: 0;
  background: var(--navhub-bg);
  color: var(--navhub-text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

.navhub-body a {
  color: inherit;
  text-decoration: none;
}

.navhub-body img {
  max-width: 100%;
  height: auto;
}

.navhub-container {
  width: 100%;
  max-width: var(--navhub-container);
  margin: 0 auto;
  padding: 0 16px;
}

.navhub-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- 顶部导航 */

.navhub-sitehead {
  background: var(--navhub-surface);
  border-bottom: 1px solid var(--navhub-border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.navhub-sitehead-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
}

.navhub-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navhub-text);
  flex: 0 0 auto;
}

.navhub-logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--navhub-primary);
  display: inline-block;
}

.navhub-topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.navhub-topnav-link {
  color: var(--navhub-text-2);
  font-size: 14px;
  transition: color 0.15s;
}

.navhub-topnav-link:hover {
  color: var(--navhub-primary);
}

.navhub-topnav-user {
  color: var(--navhub-text-3);
  font-size: 13px;
}

.navhub-sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid var(--navhub-border);
  border-radius: 8px;
  background: var(--navhub-surface);
  cursor: pointer;
  padding: 10px 9px;
  flex-direction: column;
  justify-content: space-between;
}

.navhub-sidebar-toggle span {
  display: block;
  height: 2px;
  background: var(--navhub-text-2);
  border-radius: 4px;
}

/* ---------------------------------------------------------------- 主布局 */

.navhub-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--navhub-gap);
  padding-top: 20px;
  padding-bottom: 32px;
  min-height: 60vh;
}

.navhub-main {
  flex: 1 1 auto;
  min-width: 0;
}

.navhub-sidebar {
  flex: 0 0 var(--navhub-sidebar-width);
  width: var(--navhub-sidebar-width);
}

/* 侧栏在左：调换视觉顺序，DOM 顺序保持不变，利于无障碍与 SEO */
.navhub-body.navhub-layout-left .navhub-layout {
  flex-direction: row-reverse;
}

/* ---------------------------------------------------------------- 列表头 */

.navhub-listhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.navhub-listhead-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--navhub-text);
}

.navhub-listhead-meta {
  font-size: 13px;
  color: var(--navhub-text-3);
}

/* ---------------------------------------------------------------- 卡片网格 */

.navhub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.navhub-card {
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  box-shadow: var(--navhub-shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.navhub-card:hover {
  border-color: var(--navhub-border-strong);
  box-shadow: var(--navhub-shadow-hover);
  transform: translateY(-2px);
}

.navhub-card.is-top {
  border-color: var(--navhub-primary);
}

.navhub-card-main {
  display: flex;
  gap: 12px;
  padding: 14px 14px 10px;
  flex: 1 1 auto;
  align-items: flex-start;
}

.navhub-card-icon {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--navhub-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.navhub-card-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  background: var(--navhub-surface);
}

.navhub-card-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-primary);
  z-index: 0;
}

.navhub-card-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navhub-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navhub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-card-domain {
  font-size: var(--text-sm);
  color: var(--navhub-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-card-desc {
  font-size: var(--text-sm);
  color: var(--navhub-text-3);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.navhub-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 14px 12px;
  border-top: 1px solid var(--navhub-border);
  padding-top: 9px;
  margin-top: auto;
}

.navhub-card-more {
  margin-left: auto;
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-card-more:hover {
  color: var(--navhub-primary);
}

/* ---------------------------------------------------------------- 标签 */

/* ---- 标签 / 徽章（规范 4.3）
   只读徽章：高 20px、12px 字号、pill 圆角；语义色只用「文字色 + 同色软底」，
   不做实底——一屏多处高饱和会互相削弱，反而看不出重点。 */

.navhub-tag {
  display: inline-block;
  height: 20px;
  padding: 0 var(--space-xs);
  font-size: var(--text-caption);
  line-height: 18px;          /* 20px 高 - 上下各 1px 边框 */
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--navhub-surface-2);
  color: var(--navhub-text-2);
  border: 1px solid var(--navhub-border);
  white-space: nowrap;
}

.navhub-tag.is-ok {
  background: var(--navhub-ok-soft);
  color: var(--navhub-ok);
  border-color: transparent;
}

.navhub-tag.is-bad {
  background: var(--navhub-bad-soft);
  color: var(--navhub-bad);
  border-color: transparent;
}

.navhub-tag.is-friend {
  background: var(--navhub-primary-soft);
  color: var(--navhub-primary);
  border-color: transparent;
}

.navhub-tag.is-direct {
  background: var(--navhub-ok-soft);
  color: var(--navhub-ok);
  border-color: transparent;
}

.navhub-tag.is-quick {
  background: var(--navhub-warn-soft);
  color: var(--navhub-warn);
  border-color: transparent;
}

.navhub-tag.is-top {
  background: var(--navhub-primary);
  color: var(--navhub-on-brand);
  border-color: transparent;
}

/* ---------------------------------------------------------------- 按钮 */

/* ---- 按钮（规范 4.1）
   尺寸 sm32 / md40 / lg48；圆角 --navhub-radius；触控目标 ≥44px；
   状态 hover 提亮、active 压下 1px、focus-visible 3px 环、disabled 0.45。
   变体：默认（描边）/ primary（品牌填充）/ accent（青绿 700 档）/ ghost / quiet。 */

.navhub-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding: 0 var(--space-md);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--navhub-radius);
  border: 1px solid var(--navhub-border-strong);
  background: var(--navhub-surface);
  color: var(--navhub-text);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--navhub-ease),
              border-color var(--dur-fast) var(--navhub-ease),
              color var(--dur-fast) var(--navhub-ease),
              box-shadow var(--dur-fast) var(--navhub-ease),
              transform var(--dur-instant) var(--navhub-ease);
}

.navhub-btn:hover {
  border-color: var(--navhub-primary);
  color: var(--navhub-primary);
  background: var(--navhub-primary-soft);
}

.navhub-btn:active {
  transform: translateY(1px);
}

/* 焦点环用 outline：不占布局、不被 overflow 裁剪，对比度可独立保证 */
.navhub-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.navhub-btn-primary {
  background: var(--navhub-primary);
  border-color: var(--navhub-primary);
  color: var(--navhub-on-brand);
}

.navhub-btn-primary:hover {
  background: var(--navhub-primary-dark);
  border-color: var(--navhub-primary-dark);
  color: var(--navhub-on-brand);
}

/* 强调按钮：青绿族里只有 700 档能承载浅字（7.06:1）。
   装饰用的 500 档（#00a887）白底仅 3.02:1，绝不能拿来做按钮底。 */
.navhub-btn-accent {
  background: var(--navhub-accent-btn);
  border-color: var(--navhub-accent-btn);
  color: var(--navhub-on-ink);
}

.navhub-btn-accent:hover {
  background: var(--navhub-accent-deep);
  border-color: var(--navhub-accent-deep);
  color: var(--navhub-on-ink);
}

.navhub-btn-ghost {
  background: transparent;
  border-color: var(--navhub-primary);
  color: var(--navhub-primary);
}

.navhub-btn-ghost:hover {
  background: var(--navhub-primary-soft);
  color: var(--navhub-primary-dark);
}

.navhub-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--navhub-text-2);
}

.navhub-btn-quiet:hover {
  background: var(--navhub-surface-2);
  border-color: transparent;
  color: var(--navhub-text);
}

.navhub-btn-sm {
  min-height: 32px;
  padding: 0 var(--space-sm);
  font-size: var(--text-sm);
}

/* 视觉 32px 不足 44px 触控下限，用伪元素把热区外扩到 44px */
.navhub-btn-sm::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.navhub-btn-lg {
  min-height: 48px;
  padding: 0 var(--space-lg);
  font-size: var(--text-lg);
}

.navhub-btn-block {
  display: flex;
  width: 100%;
}

.navhub-btn[disabled],
.navhub-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 侧栏 */

.navhub-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}

.navhub-widget {
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  padding: 14px 16px;
  box-shadow: var(--navhub-shadow);
}

.navhub-widget-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navhub-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.navhub-widget-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--navhub-text-3);
  text-align: center;
}

.navhub-widget-submit {
  text-align: center;
}

.navhub-search {
  display: flex;
  gap: 8px;
}

.navhub-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--navhub-border);
  border-radius: 8px;
  background: var(--navhub-surface-2);
  color: var(--navhub-text);
  font-size: 14px;
  font-family: inherit;
}

.navhub-search input:focus {
  outline: none;
  border-color: var(--navhub-primary);
  background: var(--navhub-surface);
}

.navhub-search button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--navhub-primary);
  background: var(--navhub-primary);
  color: var(--navhub-on-brand);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.navhub-stat-list,
.navhub-cate-list,
.navhub-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navhub-stat-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--navhub-text-2);
}

.navhub-stat-value {
  color: var(--navhub-text);
  font-variant-numeric: tabular-nums;
}

.navhub-cate-list li,
.navhub-recent-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--navhub-border);
}

.navhub-cate-list li:last-child,
.navhub-recent-list li:last-child {
  border-bottom: 0;
}

.navhub-cate-list a,
.navhub-recent-list a {
  color: var(--navhub-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-cate-list a:hover,
.navhub-recent-list a:hover {
  color: var(--navhub-primary);
}

.navhub-cate-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

/*
 * 网站分类（两层：一级分类 + 其子分类）
 *
 * 层级必须靠视觉说出来，否则一级和二级在读者眼里就是一串平级名词：
 *   一级 → 独立一行，正常字号，右侧收录量
 *   子级 → 缩进挂在上一行下面，用小号胶囊 + 左侧竖线归组
 * 这里显式覆盖 .navhub-cate-list li 的 flex 布局（那是给单行列表用的）。
 */
.navhub-cate-list.is-tree li {
  display: block;
  padding: 0;
  border-bottom: 0;
}

.navhub-ctree-node {
  padding: 7px 0;
  border-bottom: 1px dashed var(--navhub-border);
}

.navhub-ctree-node:last-child {
  border-bottom: 0;
}

.navhub-ctree-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.navhub-ctree-name {
  font-size: 13px;
  color: var(--navhub-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-ctree-name:hover {
  color: var(--navhub-primary);
}

.navhub-ctree-node.is-current > .navhub-ctree-top .navhub-ctree-name {
  color: var(--navhub-primary);
  font-weight: 700;
}

.navhub-ctree-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 1px 2px;
  padding-left: 10px;
  border-left: 2px solid var(--navhub-border);
}

.navhub-ctree-kid {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--navhub-text-3);
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.16s var(--navhub-ease), background 0.16s var(--navhub-ease),
    border-color 0.16s var(--navhub-ease);
}

.navhub-ctree-kid:hover {
  color: var(--navhub-on-ink);
  background: var(--navhub-ink);
  border-color: var(--navhub-ink);
}

.navhub-ctree-kid b {
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.navhub-ad {
  text-align: center;
  overflow: hidden;
}

.navhub-ad img {
  display: block;
  margin: 0 auto;
}

/* 列表页顶部/底部广告位 */
.navhub-main > .navhub-ad {
  margin-bottom: 16px;
  border-radius: var(--navhub-radius-lg);
  overflow: hidden;
}

/* ---------------------------------------------------------------- 详情页 */

.navhub-detail {
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  padding: 22px;
  box-shadow: var(--navhub-shadow);
}

.navhub-detail-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--navhub-border);
}

.navhub-detail-icon {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--navhub-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.navhub-detail-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  background: var(--navhub-surface);
}

.navhub-detail-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--navhub-primary);
  z-index: 0;
}

.navhub-detail-headtext {
  min-width: 0;
  flex: 1 1 auto;
}

.navhub-detail-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--navhub-text);
  line-height: 1.35;
}

.navhub-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
}

.navhub-detail-domain {
  color: var(--navhub-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.navhub-detail-action {
  margin: 18px 0;
  text-align: center;
}

/* （巡检事实块已并入头部 Hero 统计带 navhub-detail-headstats，见 W26） */

.navhub-detail-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--navhub-text-2);
  word-wrap: break-word;
}

.navhub-detail-content a {
  color: var(--navhub-primary);
  word-break: break-all;
}

.navhub-detail-content img {
  border-radius: var(--navhub-radius);
}

.navhub-detail-keywords {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--navhub-border);
}

.navhub-detail-keywords-label {
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-kw {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  color: var(--navhub-text-2);
}

.navhub-detail-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--navhub-border);
  font-size: 12px;
  color: var(--navhub-text-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 提交表单 */

.navhub-submit {
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  padding: 24px;
  box-shadow: var(--navhub-shadow);
}

.navhub-submit-head {
  margin-bottom: 20px;
}

.navhub-submit-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.navhub-submit-hint {
  margin: 0;
  font-size: 13px;
  color: var(--navhub-text-3);
}

.navhub-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.navhub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.navhub-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--navhub-text-2);
}

.navhub-required {
  color: var(--navhub-bad);
  font-style: normal;
}

.navhub-field-row {
  display: flex;
  gap: 10px;
}

/* 控件高度 44px 起（触控达标）；聚焦用「品牌色边 + 3px 光晕」两层，
   错误态换红并同步红色光晕——两层同时变，避免只换边框被忽略。 */
.navhub-input {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-sm);
  border: 1px solid var(--navhub-border-strong);
  border-radius: var(--navhub-radius);
  background: var(--navhub-surface);
  color: var(--navhub-text);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--navhub-ease),
              box-shadow var(--dur-fast) var(--navhub-ease);
}

.navhub-input::placeholder {
  color: var(--color-text-placeholder);
}

.navhub-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}

.navhub-input.is-error {
  border-color: var(--navhub-bad);
  box-shadow: 0 0 0 3px var(--navhub-bad-soft);
}

.navhub-field-note {
  margin: 0;
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-field-note.is-ok {
  color: var(--navhub-ok);
}

.navhub-field-note.is-error {
  color: var(--navhub-bad);
}

.navhub-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.navhub-form-msg {
  font-size: 13px;
  color: var(--navhub-text-2);
}

.navhub-form-msg.is-ok {
  color: var(--navhub-ok);
}

.navhub-form-msg.is-error {
  color: var(--navhub-bad);
}

.navhub-detect-result {
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--navhub-radius);
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
}

.navhub-detect-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--navhub-text-2);
}

.navhub-detect-list {
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

.navhub-detect-list dt {
  color: var(--navhub-text-3);
}

.navhub-detect-list dd {
  margin: 0;
  color: var(--navhub-text-2);
  word-break: break-word;
}

/* ---------------------------------------------------------------- 空状态 */

/* 空状态（规范 4.16）：图形 76px + 标题 + 说明 + 1–2 个出口按钮。
   出口原则：先给「换个方向」，再给「提交内容」。 */
.navhub-empty {
  background: var(--navhub-surface);
  border: 1px dashed var(--navhub-border-strong);
  border-radius: var(--navhub-radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.navhub-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--navhub-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navhub-text-3);
}

.navhub-empty-icon svg {
  width: 24px;
  height: 24px;
}

.navhub-empty-title {
  font-size: var(--text-body);
  font-weight: 700;
  margin: 0 0 var(--space-2xs);
  color: var(--navhub-text-2);
}

.navhub-empty-desc {
  font-size: var(--text-sm);
  color: var(--navhub-text-3);
  margin: 0 0 var(--space-md);
}

.navhub-404-code {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--navhub-primary);
  opacity: 0.35;
}

/* ---------------------------------------------------------------- 分页 */

.navhub-pagebar-wrap {
  margin-top: 22px;
}

.navhub-pagebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 页码一律走 --font-num + tabular-nums：等宽数字让位数不同的页码左对齐，
   快速扫读时不会左右跳动（规范 4.16）。 */
.navhub-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-sm);
  font-family: var(--font-num);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  border-radius: var(--navhub-radius);
  border: 1px solid var(--navhub-border);
  background: var(--navhub-surface);
  color: var(--navhub-text-2);
  transition: border-color var(--dur-fast) var(--navhub-ease),
              background var(--dur-fast) var(--navhub-ease),
              color var(--dur-fast) var(--navhub-ease);
}

.navhub-page:hover {
  border-color: var(--navhub-primary);
  background: var(--navhub-primary-soft);
  color: var(--navhub-primary);
}

.navhub-page.is-current {
  background: var(--navhub-primary);
  border-color: var(--navhub-primary);
  color: var(--navhub-on-brand);
  font-weight: 700;
}

/* ---------------------------------------------------------------- 页脚 */

.navhub-footer {
  border-top: 1px solid var(--navhub-border);
  background: var(--navhub-surface);
  padding: 22px 0;
  margin-top: 12px;
}

.navhub-footer-inner {
  text-align: center;
}

.navhub-footer p {
  margin: 2px 0;
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-footer a {
  color: var(--navhub-text-2);
}

.navhub-footer a:hover {
  color: var(--navhub-primary);
}

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 980px) {
  .navhub-layout {
    display: block;
  }

  .navhub-main {
    width: 100%;
  }

  /* 移动端：仅在开启时提供侧栏抽屉入口 */
  .navhub-body.navhub-mobile-on .navhub-sidebar-toggle {
    display: flex;
  }

  .navhub-body.navhub-mobile-off .navhub-sidebar {
    display: none;
  }

  .navhub-body.navhub-mobile-on .navhub-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 60;
    width: 300px;
    max-width: 84vw;
    background: var(--navhub-bg);
    overflow-y: auto;
    padding: 16px;
    box-shadow: 0 0 0 100vmax rgba(16, 24, 40, 0.45);
    transition: transform 0.24s ease;
    will-change: transform;
  }

  /* 默认（侧栏在右）：从右侧滑出 */
  .navhub-body.navhub-mobile-on .navhub-sidebar {
    right: 0;
    transform: translateX(102%);
  }

  /* 侧栏在左：改为从左侧滑出（更具体的选择器，覆盖上一条） */
  .navhub-body.navhub-mobile-on.navhub-layout-left .navhub-sidebar {
    left: 0;
    right: auto;
    transform: translateX(-102%);
  }

  .navhub-body.navhub-mobile-on .navhub-sidebar.is-open {
    transform: translateX(0);
  }

  .navhub-sidebar-inner {
    position: static;
  }

  .navhub-topnav {
    display: none;
  }

  .navhub-sitehead-inner {
    min-height: 54px;
  }
}

@media (max-width: 620px) {
  .navhub-container {
    padding: 0 12px;
  }

  .navhub-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .navhub-detail,
  .navhub-submit {
    padding: 16px;
  }

  .navhub-detail-title,
  .navhub-submit-title {
    font-size: 19px;
  }

  .navhub-detail-headstats {
    gap: 10px 22px;
  }

  .navhub-detect-list {
    grid-template-columns: 78px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navhub-body * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
 * W6 增补（参考 JackSite）：聚合搜索 / 报错按钮 / 权重条 /
 * 搜索一下 / 网站评估 / 相关网站 / 浏览排行 / 收录说明
 * ============================================================ */

/* ---- 详情页操作行（访问 / 网址报错） ---- */
.navhub-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.navhub-report-msg {
  font-size: 13px;
  color: var(--navhub-text-3);
}

.navhub-detail-actions .navhub-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- 详情页搜索引擎数据（数值条见 W28 增补段；此处仅容器与说明行） ---- */
.navhub-weights {
  margin: 18px 0;
  padding: 0;
}

.navhub-weights-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--navhub-text-3);
}

/* W28.5：权重「查询成功但全 0」的空态行（不显示会让人以为没抓） */
.navhub-weights-none {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--navhub-text-2);
}

/* ---- 详情页「搜索一下」外链组 ---- */
.navhub-searchlinks {
  margin: 18px 0;
}

.navhub-searchlinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.navhub-searchlink {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--navhub-text-2);
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.navhub-searchlink:hover {
  color: var(--navhub-primary);
  border-color: var(--navhub-primary);
}

/* ---- 详情页网站评估块 ---- */
.navhub-evaluate {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--navhub-surface-2);
  border-left: 3px solid var(--navhub-primary);
  border-radius: 0 var(--navhub-radius) var(--navhub-radius) 0;
}

.navhub-evaluate-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--navhub-text);
}

.navhub-evaluate-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--navhub-text-2);
}

/* ---- 详情页相关网站（W26：编号列表 → 首字徽记卡片） ---- */
.navhub-related {
  margin: 18px 0;
}

.navhub-related-title {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--navhub-text);
}

.navhub-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: navhubRelated;
}

.navhub-related-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 9px 12px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-sharp);
  color: var(--navhub-text-2);
  text-decoration: none;
  transition: border-color 0.15s var(--navhub-ease, ease),
              color 0.15s var(--navhub-ease, ease);
}

.navhub-related-list a:hover {
  color: var(--navhub-primary);
  border-color: var(--navhub-primary);
}

.navhub-related-letter {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--navhub-ink);
  border-radius: var(--navhub-radius-sharp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--navhub-on-ink);
}

.navhub-related-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 侧栏浏览排行 ---- */
.navhub-rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: navhub-rank;
}

.navhub-rank-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--navhub-border);
  counter-increment: navhub-rank;
}

.navhub-rank-list li:last-child {
  border-bottom: 0;
}

.navhub-rank-list li::before {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--navhub-text-3);
  background: var(--navhub-surface-2);
  border-radius: 4px;
  content: counter(navhub-rank);
}

.navhub-rank-list li:nth-child(-n + 3)::before {
  color: var(--navhub-on-brand);
  background: var(--navhub-primary);
}

.navhub-rank-list a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--navhub-text-2);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-rank-list a:hover {
  color: var(--navhub-primary);
}

.navhub-rank-num {
  flex: none;
  font-size: 12px;
  color: var(--navhub-text-3);
}

/* ---- 提交页收录说明 ---- */
.navhub-submit-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--navhub-warn-soft);
  border: 1px solid var(--navhub-border);
  border-left: 3px solid var(--navhub-warn);
  border-radius: 0 var(--navhub-radius) var(--navhub-radius) 0;
}

.navhub-submit-notice-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--navhub-text);
}

.navhub-submit-notice-body {
  font-size: 13px;
  line-height: 1.9;
  color: var(--navhub-text-2);
}

.navhub-submit-notice-body p {
  margin: 0 0 6px;
}

/* ---- 窄屏适配 ---- */
@media screen and (max-width: 640px) {
  .navhub-related-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * W7 增补：分类页 / 标签页 / 文章页（普通文章 + 网站信息文章）
 *
 * 设计方向：「报刊头版 × 工业标识」——高饱和撞色（宝蓝 × 朱橙）、
 * 3px 硬规则线代替柔和阴影做分隔、方块序号、斜向条纹与首字描边。
 *
 * 三条贯穿全层的规则：
 *   1. 一屏只允许一个"最重"元素（主按钮 / 页型标题），其余全部降级；
 *   2. 装饰一律 content-driven（用分类名首字、标签的 #），不放无意义花纹；
 *   3. 反白块统一用 --navhub-ink / --navhub-on-ink，暗色模式下自动反转，
 *      不需要为每个组件单独写暗色规则。
 * ============================================================ */

/* ---------------------------------------------------- 公共件 */

/* 小标签眉：给每个页型一个"这是哪一栏"的定位信号 */
.navhub-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navhub-text-3);
}

.navhub-kicker-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--navhub-accent);
}

.navhub-kicker-link {
  color: var(--navhub-accent-text);
}

.navhub-kicker-link:hover {
  color: var(--navhub-accent-dark);
}

.navhub-kicker-sep {
  flex: none;
  width: 1px;
  height: 11px;
  background: var(--navhub-border-strong);
}

/* 元信息里的圆点分隔：比竖线更轻，比空格更清晰 */
.navhub-dotsep {
  display: inline-block;
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--navhub-text-3);
}

/* 区块标题：文字 + 一根贯穿到右侧的硬规则线。
   这条线是本层的"分隔语汇"，替代卡片套卡片。 */
.navhub-blocktitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navhub-text);
}

.navhub-blocktitle-rule {
  flex: 1 1 auto;
  height: 3px;
  background: var(--navhub-ink);
}

/* 面包屑 */
.navhub-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--navhub-text-3);
}

.navhub-crumbs a {
  color: var(--navhub-text-2);
}

.navhub-crumbs a:hover {
  color: var(--navhub-accent-text);
}

.navhub-crumbs-sep {
  color: var(--navhub-border-strong);
}

.navhub-crumbs-sep-text {
  color: var(--navhub-text-3);
}

.navhub-crumbs-current {
  color: var(--navhub-text);
  font-weight: 700;
}

/* ---------------------------------------------------- 分类页 Hero */

/* W25 重构：从「两栏大块」收紧为「一行标题 + 一条统计带」。
   原版 grid 两栏（右侧 300px 装饰区）在 870px 主列里把标题压到半栏；
   现在标题占满整行，装饰缩成右上角一枚首字徽记，整卡高度约减半。 */
.navhub-cathero {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: 24px 28px 20px;
  background: var(--navhub-ink);
  color: var(--navhub-on-ink);
  border-radius: var(--navhub-radius-lg);
}

.navhub-cathero-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.navhub-cathero-main {
  flex: 1 1 auto;
  min-width: 0;
}

.navhub-cathero .navhub-kicker {
  color: var(--navhub-on-ink-2);
}

.navhub-cathero .navhub-kicker-dot {
  background: var(--navhub-accent);
}

.navhub-cathero-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navhub-on-ink);
  word-break: break-word;
}

.navhub-cathero-intro {
  max-width: 52em;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--navhub-on-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.navhub-cathero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--navhub-dot-on-ink);
}

.navhub-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.navhub-stat-num {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navhub-accent);
}

.navhub-stat-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navhub-on-ink-2);
}

/* 首字徽记：装饰从「半屏描边大字」缩成右上角一枚圆徽。
   仍然 content-driven（取分类名首字），但不再抢占版面。 */
.navhub-cathero-glyph {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--navhub-on-ink-2);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--navhub-accent);
  background: var(--navhub-ink);
  user-select: none;
}

/* ---------------------------------------------------- 子分类导航 */

.navhub-subcates {
  margin: 0 0 30px;
}

.navhub-subcates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navhub-subcate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
  transition: border-color 0.18s var(--navhub-ease), transform 0.18s var(--navhub-ease);
}

.navhub-subcate:hover {
  border-color: var(--navhub-ink);
  transform: translateY(-2px);
}

.navhub-subcate-num {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navhub-ink);
  color: var(--navhub-on-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  border-radius: var(--navhub-radius-sharp);
  transition: background 0.18s var(--navhub-ease);
}

.navhub-subcate-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-subcate-count {
  flex: none;
  font-size: 12px;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

.navhub-subcate:hover .navhub-subcate-num,
.navhub-subcate.is-current .navhub-subcate-num {
  background: var(--navhub-accent-btn);
}

.navhub-subcate:hover .navhub-subcate-name {
  color: var(--navhub-accent-dark);
}

.navhub-subcate.is-current {
  border-color: var(--navhub-accent);
  background: var(--navhub-accent-soft);
}

/* ---------------------------------------------------- 分类页目录网格 */

/* 目录式卡片：左侧 3px 硬色条做"书脊"，比阴影更干净也更有辨识度 */
.navhub-grid.is-dir {
  /* 272px 档在 870px 主列里正好卡在 2/3 列的边界上（3×272+2×16=848 > 870 的可用宽），
     结果分类页只出 2 列、每张卡片 410px 宽却填不满，右侧留大片空白。
     240px 档稳定 3 列，卡片信息密度与首页推荐区对齐。 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.navhub-grid.is-dir .navhub-card {
  border-radius: var(--navhub-radius);
  border-left: 3px solid var(--navhub-border-strong);
  box-shadow: none;
}

.navhub-grid.is-dir .navhub-card:hover {
  border-left-color: var(--navhub-accent);
  box-shadow: var(--navhub-shadow-hover);
}

.navhub-grid.is-dir .navhub-card.is-top {
  border-left-color: var(--navhub-accent);
}

.navhub-grid.is-dir .navhub-card .navhub-card-main {
  padding: 14px 14px 11px;
  gap: 10px;
}

.navhub-grid.is-dir .navhub-card-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--navhub-radius-sharp);
  background: var(--navhub-ink);
}

.navhub-grid.is-dir .navhub-card-icon img {
  width: 38px;
  height: 38px;
}

.navhub-grid.is-dir .navhub-card-letter {
  font-size: 15px;
  font-weight: 700;
  color: var(--navhub-on-ink);
}

.navhub-grid.is-dir .navhub-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.navhub-grid.is-dir .navhub-card-desc {
  font-size: 12.5px;
  -webkit-line-clamp: 2;
}

.navhub-grid.is-dir .navhub-card-tags {
  padding: 9px 14px 11px;
}

/* 标签在目录卡片里改成硬边小方块，与圆角胶囊区分开 */
.navhub-grid.is-dir .navhub-tag {
  border-radius: var(--navhub-radius-sharp);
  font-weight: 700;
}

/* ---------------------------------------------------- 标签页 Hero */

.navhub-taghero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 0 0 20px;
  padding: 24px 26px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-left: 6px solid var(--navhub-accent);
  border-radius: var(--navhub-radius);
}

.navhub-taghero-glyph {
  flex: none;
  font-size: 86px;
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--navhub-accent);
  opacity: 0.2;
  user-select: none;
}

.navhub-taghero-main {
  min-width: 0;
}

.navhub-taghero-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--navhub-text);
  word-break: break-word;
}

.navhub-taghero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--navhub-text-3);
}

.navhub-taghero-num {
  color: var(--navhub-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- 标签页流式列表 */

/* 密集扫读列表：一条一行，只靠 1px 分隔线与 hover 时的橙色滑入边条定位。
   刻意不用卡片 —— 卡片会把扫读速度拖慢一个数量级。 */
.navhub-stream {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--navhub-ink);
}

.navhub-stream-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px 11px 14px;
  border-bottom: 1px solid var(--navhub-border);
  transition: background 0.16s var(--navhub-ease), padding-left 0.16s var(--navhub-ease);
}

.navhub-stream-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--navhub-accent);
  transition: width 0.16s var(--navhub-ease);
}

.navhub-stream-item:hover {
  background: var(--navhub-surface);
  padding-left: 20px;
}

.navhub-stream-item:hover::before {
  width: 3px;
}

.navhub-stream-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--navhub-text-3);
}

.navhub-stream-item:hover .navhub-stream-num {
  color: var(--navhub-accent-text);
}

.navhub-stream-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.navhub-stream-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--navhub-radius-sharp);
  background: var(--navhub-ink);
}

.navhub-stream-icon img {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: var(--navhub-surface);
}

.navhub-stream-letter {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--navhub-on-ink);
}

.navhub-stream-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.navhub-stream-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navhub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-stream-item:hover .navhub-stream-title {
  color: var(--navhub-accent-dark);
}

.navhub-stream-desc {
  font-size: 12px;
  color: var(--navhub-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-stream-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.navhub-stream-host {
  font-size: 12px;
  color: var(--navhub-text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.navhub-stream-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}

.navhub-stream-badges .navhub-tag {
  border-radius: var(--navhub-radius-sharp);
  font-weight: 700;
}

.navhub-stream-more {
  font-size: 12px;
  color: var(--navhub-text-3);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.navhub-stream-more:hover {
  color: var(--navhub-accent-text);
  border-bottom-color: var(--navhub-accent);
}

.navhub-stream-go {
  font-size: 14px;
  line-height: 1;
  color: var(--navhub-border-strong);
  transition: transform 0.16s var(--navhub-ease), color 0.16s var(--navhub-ease);
}

.navhub-stream-item:hover .navhub-stream-go {
  color: var(--navhub-accent-text);
  transform: translateX(2px);
}

/* ---------------------------------------------------- 侧栏标签云 */

.navhub-tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.navhub-tagcloud-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navhub-text-2);
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-sharp);
  transition: color 0.16s var(--navhub-ease), background 0.16s var(--navhub-ease),
    border-color 0.16s var(--navhub-ease);
}

.navhub-tagcloud-item:hover {
  color: var(--navhub-on-ink);
  background: var(--navhub-ink);
  border-color: var(--navhub-ink);
}

/* 三档密度：字号 + 字重 + 颜色同时变化，扫一眼就能看出哪些标签更"厚" */
.navhub-tagcloud-item.is-lv2 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-tagcloud-item.is-lv3 {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navhub-accent-dark);
  background: var(--navhub-accent-soft);
  border-color: var(--navhub-accent);
}

.navhub-tagcloud-item.is-current {
  color: var(--navhub-on-ink);
  background: var(--navhub-accent-btn);
  border-color: var(--navhub-accent-btn);
}

.navhub-tagcloud-count {
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- 普通文章：杂志长文 */

.navhub-longform {
  position: relative;
  padding: 36px 40px 34px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  box-shadow: var(--navhub-shadow);
}

/* 阅读进度：贴在粘性页头下方，滚到卡片顶部才开始"生效" */
.navhub-progress {
  position: sticky;
  top: var(--navhub-head-h);
  z-index: 15;
  height: 3px;
  margin: -36px -40px 28px;
  background: var(--navhub-border);
  border-radius: var(--navhub-radius-lg) var(--navhub-radius-lg) 0 0;
  overflow: hidden;
}

.navhub-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--navhub-accent);
  transition: width 0.1s linear;
}

.navhub-longform-head {
  max-width: 44em;
  margin: 0 auto 30px;
  padding-bottom: 24px;
}

/* 报刊双规则签名：3px 主线 + 7px 空隙 + 1px 细线。
   用 ::after 的双层背景画（::after 画在边框内侧，没法放到 border 之下），
   高 10px 的盒子上 3px 贴顶、1px 贴底，间隙天然是 7px。 */
.navhub-longform-head::after {
  content: "";
  display: block;
  height: 10px;
  background:
    linear-gradient(var(--navhub-ink), var(--navhub-ink)) left top / 100% 3px no-repeat,
    linear-gradient(var(--navhub-ink), var(--navhub-ink)) left bottom / 100% 1px no-repeat;
}

.navhub-longform-title {
  margin: 0 0 16px;
  font-size: clamp(27px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--navhub-text);
  word-break: break-word;
}

.navhub-longform-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

/* 目录：默认 hidden，由脚本填充标题后解除，无 JS 时不出现空壳 */
.navhub-toc {
  max-width: 44em;
  margin: 0 auto 30px;
  padding: 16px 20px;
  background: var(--navhub-surface-2);
  border-left: 4px solid var(--navhub-accent);
  border-radius: 0 var(--navhub-radius) var(--navhub-radius) 0;
}

.navhub-toc-title {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navhub-text-3);
}

.navhub-toc-list {
  margin: 0;
  padding-left: 1.3em;
  font-size: 13.5px;
  line-height: 1.9;
}

.navhub-toc-list li.is-lv3 {
  margin-left: 1em;
  list-style: circle;
}

.navhub-toc-list a {
  color: var(--navhub-text-2);
}

.navhub-toc-list a:hover,
.navhub-toc-list a.is-active {
  color: var(--navhub-accent-dark);
}

.navhub-toc-list a.is-active {
  font-weight: 700;
}

/* ---------------- 正文排版：18px / 1.85，行宽压到约 42 个汉字 ---------------- */

.navhub-longform-body {
  max-width: 44em;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.85;
  color: var(--navhub-text-2);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.navhub-longform-body > p {
  margin: 0 0 1.35em;
}

/* 首段引导：字号微增 + 颜色提升 + 首字下沉，一眼落进正文 */
.navhub-longform-body > p:first-child {
  font-size: 1.05em;
  font-weight: 500;
  color: var(--navhub-text);
}

.navhub-longform-body > p:first-child::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-size: 3.1em;
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.02em;
  color: var(--navhub-accent-text);
}

.navhub-longform-body h2 {
  margin: 2.1em 0 0.7em;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navhub-text);
  scroll-margin-top: calc(var(--navhub-head-h) + 24px);
}

/* 每个二级标题上方压一根短橙条：目录感的来源，也让长文有呼吸节点 */
.navhub-longform-body h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 4px;
  margin: 0 0 14px;
  background: var(--navhub-accent);
}

.navhub-longform-body h3 {
  margin: 1.7em 0 0.55em;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--navhub-text);
  scroll-margin-top: calc(var(--navhub-head-h) + 24px);
}

.navhub-longform-body h4 {
  margin: 1.4em 0 0.5em;
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-longform-body a {
  color: var(--navhub-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--navhub-border-strong);
  transition: color 0.16s var(--navhub-ease), text-decoration-color 0.16s var(--navhub-ease);
}

.navhub-longform-body a:hover {
  color: var(--navhub-accent-dark);
  text-decoration-color: var(--navhub-accent);
}

.navhub-longform-body strong,
.navhub-longform-body b {
  color: var(--navhub-text);
  font-weight: 700;
}

.navhub-longform-body mark {
  padding: 1px 4px;
  color: var(--navhub-accent-dark);
  background: var(--navhub-accent-soft);
  border-radius: 3px;
}

/* 引用：朱橙竖线 + 右下角引号水印，不斜体（中文斜体既难读也不好看） */
.navhub-longform-body blockquote {
  position: relative;
  overflow: hidden;
  margin: 2em 0;
  padding: 6px 60px 6px 26px;
  border-left: 4px solid var(--navhub-accent);
  font-size: 1.02em;
  line-height: 1.8;
  color: var(--navhub-text);
}

.navhub-longform-body blockquote::after {
  content: '\201D';
  position: absolute;
  right: 6px;
  bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 0.8;
  color: var(--navhub-accent);
  opacity: 0.12;
  pointer-events: none;
}

.navhub-longform-body blockquote p {
  margin: 0 0 0.8em;
}

.navhub-longform-body blockquote p:last-child {
  margin-bottom: 0;
}

/* 行内代码 */
.navhub-longform-body code {
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.87em;
  color: var(--navhub-text);
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: 4px;
  word-break: break-word;
}

/* 代码块：深墨底 + 顶部橙条，与正文形成强对比的"停机位" */
.navhub-longform-body pre {
  margin: 1.8em 0;
  padding: 20px 22px;
  background: var(--navhub-code-bg);
  color: var(--navhub-code-fg);
  border-top: 3px solid var(--navhub-accent);
  border-radius: var(--navhub-radius);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.75;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}

.navhub-longform-body pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  white-space: pre;
  word-break: normal;
}

.navhub-longform-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.8em auto;
  border-radius: var(--navhub-radius);
}

.navhub-longform-body figure {
  margin: 1.8em 0;
}

.navhub-longform-body figure img {
  margin: 0 auto;
}

.navhub-longform-body figcaption,
.navhub-longform-body .wp-caption-text {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--navhub-text-3);
}

.navhub-longform-body figcaption::before,
.navhub-longform-body .wp-caption-text::before {
  content: '图 · ';
  font-weight: 700;
  color: var(--navhub-accent-text);
}

.navhub-longform-body ul,
.navhub-longform-body ol {
  margin: 0 0 1.35em;
  padding-left: 1.45em;
}

.navhub-longform-body li {
  margin: 0 0 0.5em;
}

.navhub-longform-body li::marker {
  color: var(--navhub-accent-text);
  font-weight: 700;
}

.navhub-longform-body table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}

.navhub-longform-body th,
.navhub-longform-body td {
  padding: 10px 12px;
  border: 1px solid var(--navhub-border);
  text-align: left;
  vertical-align: top;
}

.navhub-longform-body thead th {
  color: var(--navhub-on-ink);
  background: var(--navhub-ink);
  border-color: var(--navhub-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navhub-longform-body tbody tr:nth-child(even) td {
  background: var(--navhub-surface-2);
}

.navhub-longform-body hr {
  width: 56px;
  height: 4px;
  margin: 2.6em auto;
  border: 0;
  background: var(--navhub-ink);
}

.navhub-longform-body > *:last-child {
  margin-bottom: 0;
}

/* ---------------- 文章尾部：标签 + 上下篇 ---------------- */

.navhub-longform-foot {
  max-width: 44em;
  margin: 36px auto 0;
  padding-top: 26px;
  border-top: 3px solid var(--navhub-ink);
}

.navhub-posttags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}

.navhub-posttags-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navhub-text-3);
}

.navhub-posttag {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navhub-text-2);
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-sharp);
  transition: color 0.16s var(--navhub-ease), background 0.16s var(--navhub-ease),
    border-color 0.16s var(--navhub-ease);
}

.navhub-posttag:hover {
  color: var(--navhub-on-ink);
  background: var(--navhub-ink);
  border-color: var(--navhub-ink);
}

.navhub-prevnext {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}

.navhub-prevnext-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
  transition: border-color 0.18s var(--navhub-ease), transform 0.18s var(--navhub-ease);
}

.navhub-prevnext-item:hover {
  border-color: var(--navhub-ink);
  transform: translateY(-2px);
}

.navhub-prevnext-item.is-next {
  align-items: flex-end;
  text-align: right;
}

.navhub-prevnext-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navhub-accent-text);
}

.navhub-prevnext-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navhub-text);
}

.navhub-longform-end {
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--navhub-text-3);
}

/* ---------------------------------------------------- 网站信息文章（站点详情） */

.navhub-navsite {
  padding: 28px;
}

/* W26 重构：头部升级为墨色 Hero（与分类页 cathero 同语言）。
   头部行、主行动按钮、统计带全部收进这块深色区 ——
   「身份 → 行动 → 事实」的决策链在视觉上成为一整块锚点，
   下方各区块（简介 / 搜索 / 标签 / 相关）退为浅色续篇。
   负外边距出血到卡片边缘，圆角跟随卡片但减去 1px 边框。 */
.navhub-navsite .navhub-detail-head {
  display: block;
  margin: -28px -28px 26px;
  padding: 26px 28px 22px;
  background: var(--navhub-ink);
  border-bottom: 0;
  border-radius: calc(var(--navhub-radius-lg) - 1px) calc(var(--navhub-radius-lg) - 1px) 0 0;
}

.navhub-detail-hrow {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.navhub-navsite .navhub-detail-head .navhub-kicker {
  color: var(--navhub-on-ink-2);
}

.navhub-navsite .navhub-detail-head .navhub-kicker-dot {
  background: var(--navhub-accent);
}

.navhub-navsite .navhub-detail-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--navhub-radius-sharp);
  background: var(--navhub-ink);
  border: 1px solid var(--navhub-dot-on-ink);
}

.navhub-navsite .navhub-detail-icon img {
  width: 64px;
  height: 64px;
}

.navhub-navsite .navhub-detail-letter {
  font-size: 28px;
  font-weight: 700;
  color: var(--navhub-on-ink);
}

.navhub-navsite .navhub-detail-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.1vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navhub-on-ink);
}

/* 域名：墨底上改成描边胶囊（mono 字体保留机器可读感） */
.navhub-navsite .navhub-detail-domain {
  padding: 2px 8px;
  font-size: 12.5px;
  color: var(--navhub-on-ink);
  background: transparent;
  border: 1px solid var(--navhub-dot-on-ink);
  border-radius: var(--navhub-radius-sharp);
}

/* 状态徽标组：浅色软底徽标在墨底上会糊成一片，统一改为描边款；
   只有连通状态保留彩色文字（这是唯一需要一眼读出的信号）。 */
.navhub-navsite .navhub-detail-head .navhub-tag {
  background: transparent;
  border-color: var(--navhub-dot-on-ink);
  color: var(--navhub-on-ink-2);
  border-radius: var(--navhub-radius-sharp);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navhub-navsite .navhub-detail-head .navhub-tag.is-ok {
  color: var(--navhub-on-ink);
  border-color: var(--navhub-accent);
}

.navhub-navsite .navhub-detail-head .navhub-tag.is-bad {
  color: #ff8a80;
  border-color: #ff8a80;
}

/* 主行动按钮：全站唯一使用朱橙实心 + 硬描边投影的按钮，视线必然落上去 */
.navhub-btn-visit {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 30px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navhub-on-ink);
  background: var(--navhub-accent-btn);
  border-color: var(--navhub-accent-btn);
  box-shadow: 0 6px 0 -1px var(--navhub-accent-deep);
}

.navhub-btn-visit:hover {
  color: var(--navhub-on-ink);
  background: var(--navhub-accent-deep);
  border-color: var(--navhub-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 -1px var(--navhub-accent-deep);
}

.navhub-btn-visit:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 -1px var(--navhub-accent-deep);
}

.navhub-btn-host {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.82;
}

/* Hero 内的报错按钮：白描边 ghost（对齐轮播上的 ghost 用法） */
.navhub-navsite .navhub-detail-actions .navhub-btn-ghost {
  background: transparent;
  color: var(--navhub-on-ink);
  border-color: rgba(255, 255, 255, 0.4);
}

.navhub-navsite .navhub-detail-actions .navhub-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--navhub-on-ink);
}

.navhub-navsite .navhub-detail-actions {
  margin: 20px 0 0;
}

.navhub-navsite .navhub-report-msg {
  color: var(--navhub-on-ink-2);
}

/* 统计带：与 cathero-stats 同构（数字强调色 / 大写小标签），
   常驻两项（分类 / 收录天数）+ 巡检后有事实项（耗时 / HTTP / 检测时间）。
   文本型数值（分类名）降一号并用反白，与数字拉开层级。 */
.navhub-detail-headstats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 20px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--navhub-dot-on-ink);
}

.navhub-detail-headstats .navhub-stat-num.is-txt {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--navhub-on-ink);
}

/* 权重：W28 起改为原型同款数值条（navhub-metrics），旧胶囊规则已整体移除 */
.navhub-navsite .navhub-weights {
  margin: 22px 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* 评估块：对齐原型 —— 与其它小节同一张白卡（描边卡），不再用灰底强调 */
.navhub-navsite .navhub-evaluate {
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
}

.navhub-navsite .navhub-evaluate-text {
  font-size: 13.5px;
  line-height: 1.85;
}

.navhub-navsite-about {
  margin: 22px 0;
}

.navhub-navsite .navhub-detail-content {
  font-size: 15px;
  line-height: 1.85;
}

.navhub-navsite .navhub-detail-content h2,
.navhub-navsite .navhub-detail-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-navsite .navhub-searchlinks {
  margin: 22px 0;
}

.navhub-navsite .navhub-searchlink {
  border-radius: var(--navhub-radius-sharp);
  font-weight: 700;
}

.navhub-navsite .navhub-searchlink:hover {
  color: var(--navhub-on-ink);
  background: var(--navhub-ink);
  border-color: var(--navhub-ink);
}

.navhub-navsite .navhub-kw {
  border-radius: var(--navhub-radius-sharp);
}

/*
 * 「本文标签」区块（真标签，可点击）。
 *
 * 复用长文页的胶囊按钮，只把与上下区块的间距改回详情页的节奏；
 * 与「站点关键词」相邻时靠 border-top 明确切开——两者语义不同：
 * 上面是目标站的 TDK 词，下面是本站真实的标签。
 */
.navhub-navsite-tags {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--navhub-border);
}

.navhub-navsite-tags .navhub-posttags-label {
  letter-spacing: 0.08em;
}

.navhub-navsite .navhub-related-title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--navhub-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navhub-text);
}

.navhub-navsite .navhub-detail-foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 3px solid var(--navhub-ink);
  font-size: 12.5px;
}

.navhub-detail-foot-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------- 暗色模式

   W19 起 --navhub-ink 恒定是深色（浅色 #0a1f47 / 暗色 #0b1220），
   分类 Hero 在暗色下仍是深色块，所以这里原有的整套「反白改卡片」微调
   已失去存在前提，整体删除（原第 2978–3028 行）。

   反白块（Hero / 表头 / 标签 hover / 序号方块）在两种模式下都是
   「深底 + 浅字」，无需逐组件补暗色规则 —— 这正是取消墨色反转的收益。 */

/* ---------------------------------------------------- 响应式 */

@media (max-width: 980px) {
  :root {
    --navhub-head-h: 54px;
  }

  /* 分类 Hero（W25 起为单列 flex）：窄屏只收紧内边距与徽记尺寸 */
  .navhub-cathero {
    padding: 20px 18px 16px;
  }

  .navhub-cathero-glyph {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .navhub-cathero-stats {
    gap: 26px;
    margin-top: 22px;
    padding-top: 18px;
  }

  /* 流式列表：元信息折到标题下方一行，标题始终占满整行宽度 */
  .navhub-stream-item {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 8px 12px;
    padding: 12px 12px 12px 14px;
  }

  .navhub-stream-num {
    padding-top: 5px;
  }

  .navhub-stream-link {
    grid-column: 2;
  }

  .navhub-stream-meta {
    grid-column: 2;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .navhub-stream-host {
    max-width: none;
  }

  .navhub-navsite {
    padding: 20px;
  }

  /* Hero 出血量必须与卡片内边距逐断点一致，否则深色头会探出卡片边缘 */
  .navhub-navsite .navhub-detail-head {
    margin: -20px -20px 22px;
    padding: 20px 20px 18px;
  }
}

@media (max-width: 620px) {
  .navhub-cathero {
    padding: 24px 18px 20px;
  }

  .navhub-cathero-stats {
    gap: 20px;
  }

  .navhub-stat-num {
    font-size: 25px;
  }

  .navhub-subcates-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .navhub-taghero {
    gap: 12px;
    padding: 20px 18px;
    border-left-width: 5px;
  }

  .navhub-taghero-glyph {
    font-size: 56px;
  }

  .navhub-stream-desc {
    display: none;
  }

  /* 长文：窄屏收紧内边距，代码块与图片改为通栏 */
  .navhub-longform {
    padding: 24px 18px 26px;
  }

  .navhub-progress {
    margin: -24px -18px 22px;
  }

  .navhub-longform-body {
    font-size: 17px;
    line-height: 1.8;
  }

  .navhub-longform-body > p:first-child::first-letter {
    margin: 4px 8px 0 0;
    font-size: 2.6em;
  }

  .navhub-longform-body pre {
    margin-left: -18px;
    margin-right: -18px;
    padding: 16px 16px;
    border-radius: 0;
    font-size: 12.5px;
  }

  .navhub-longform-body table {
    font-size: 13.5px;
  }

  .navhub-longform-body th,
  .navhub-longform-body td {
    padding: 8px 9px;
  }

  .navhub-detail-headstats .navhub-stat-num {
    font-size: 20px;
  }

  .navhub-detail-headstats .navhub-stat-num.is-txt {
    font-size: 15px;
    line-height: 20px;
  }

  .navhub-btn-visit {
    width: 100%;
    align-items: center;
    padding: 12px 20px;
  }
}

/* W8 增补：级联筛选导航（行式多级）
 * ------------------------------------------------------------------
 * 结构：一行一个维度（全部分类 / 一级 / 二级 / 标签），左侧固定列宽的维度名，
 *       右侧是可换行的选项组；选项过多时由 JS 折叠，右侧出现「更多」。
 *
 * 无 JS 时：不加 is-foldable / is-extra / is-on，全部选项可见、按钮不显示，
 *           因此折叠是渐进增强，不是功能依赖。
 * 折叠阈值：JS 里 FOLD_AFTER = 10，CSS 用 .is-extra 隐藏，两处需保持一致。
 */

/* W25 收紧：外框只承担水平留白（6px 20px），行内边距归零到纵向，
   行间用分隔线而不是每行自带内边距 —— 四行筛选的整体高度约降 1/3。
   选中项对齐原型：品牌色实底 + 反白文字（原来「浅底+描边」胶囊描边噪声大）。 */
.navhub-filter {
  padding: 6px 20px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  margin: 0 0 16px;
  overflow: hidden;
}

.navhub-frow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
}

.navhub-frow + .navhub-frow {
  border-top: 1px solid var(--navhub-border);
}

.navhub-frow-label {
  flex: 0 0 74px;
  padding-top: 5px;
  font-size: 13px;
  color: var(--navhub-text-3, #7b8694);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.navhub-frow-list {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.navhub-frow-list li {
  margin: 0;
  padding: 0;
}

.navhub-fitem {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--navhub-radius);
  border: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navhub-text-2, #4a5361);
  text-decoration: none;
  transition: background-color 0.14s var(--navhub-ease, ease),
              color 0.14s var(--navhub-ease, ease),
              border-color 0.14s var(--navhub-ease, ease);
}

.navhub-fitem:hover {
  color: var(--navhub-primary);
  background: var(--navhub-surface-2);
}

.navhub-fitem.is-none {
  color: var(--navhub-text-3, #7b8694);
}

.navhub-fitem.is-current {
  background: var(--navhub-primary);
  border-color: var(--navhub-primary);
  color: var(--navhub-on-brand);
  font-weight: 700;
}

.navhub-fitem-count {
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--navhub-text-3, #7b8694);
}

.navhub-fitem.is-current .navhub-fitem-count {
  color: var(--navhub-on-brand);
  opacity: 0.72;
}

/* 折叠：JS 负责 is-foldable（可折叠）与 is-extra（超出的项）两个标记 */
.navhub-frow-list.is-foldable.is-folded .is-extra {
  display: none;
}

.navhub-fmore {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--navhub-text-3, #7b8694);
  cursor: pointer;
  white-space: nowrap;
}

.navhub-fmore.is-on {
  display: inline-flex;
}

.navhub-fmore:hover {
  color: var(--navhub-primary);
}

.navhub-fmore-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s var(--navhub-ease, ease);
}

.navhub-fmore[aria-expanded="true"] .navhub-fmore-caret {
  transform: rotate(-135deg) translateY(-2px);
}

@media (max-width: 980px) {
  .navhub-filter {
    padding: 4px 16px;
  }

  .navhub-frow {
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 0;
  }

  .navhub-frow-label {
    flex: 0 0 100%;
    padding-top: 0;
  }

  .navhub-frow-list {
    flex: 1 1 100%;
  }

  .navhub-fmore {
    margin-left: 84px;
  }
}

@media (max-width: 620px) {
  .navhub-filter {
    padding: 3px 12px;
    border-radius: var(--navhub-radius);
  }

  .navhub-frow {
    padding: 8px 0;
  }

  .navhub-fitem {
    padding: 3px 8px;
    font-size: 13px;
  }

  .navhub-fmore {
    margin-left: 0;
  }
}

/* ================================================================
   W9 增补：富页脚 / 收录条数 / 侧栏作者卡
   ================================================================ */

/* ---- 富页脚 ---- */
.navhub-footer-rich {
  margin-top: 32px;
}

.navhub-footer-main {
  border-top: 3px solid var(--navhub-ink);
  background: var(--navhub-surface-2);
  padding: 32px 0 24px;
}

.navhub-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
}

.navhub-footer-col {
  min-width: 120px;
  flex: 0 1 auto;
}

.navhub-footer-col-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--navhub-text);
}

.navhub-footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navhub-footer-col-list li {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--navhub-text-3);
}

.navhub-footer-col-list a {
  color: var(--navhub-text-2);
  text-decoration: none;
}

.navhub-footer-col-list a:hover {
  color: var(--navhub-primary);
  text-decoration: underline;
}

.navhub-footer-col-contact {
  flex: 1 1 180px;
}

.navhub-footer-contact p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--navhub-text-2);
}

.navhub-footer-col-qr {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.navhub-footer-qr {
  margin: 0;
  text-align: center;
}

.navhub-footer-qr img {
  display: block;
  width: 88px;
  height: 88px;
  background: #fff;
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
  padding: 4px;
}

.navhub-footer-qr figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--navhub-text-3);
}

/* W18：友情链接横排（页脚主体与底栏之间） */
.navhub-footer-friends {
  background: var(--navhub-surface-2);
  border-top: 1px solid var(--navhub-border);
  padding: 12px 0;
}

.navhub-footer-friends-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.navhub-footer-friends-title {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-footer-friends-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 13px;
}

.navhub-footer-friends-list a {
  color: var(--navhub-text-2);
  text-decoration: none;
}

.navhub-footer-friends-list a:hover {
  color: var(--navhub-primary);
  text-decoration: underline;
}

.navhub-footer-friends-sep {
  color: var(--navhub-border-strong);
}

.navhub-footer-bar {
  background: var(--navhub-ink);
  color: var(--navhub-on-ink, #fff);
  padding: 14px 0;
}

.navhub-footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.navhub-footer-bar p {
  margin: 0;
  font-size: 13px;
}

.navhub-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.navhub-footer-links a {
  color: var(--navhub-on-ink, #fff);
  opacity: 0.85;
  text-decoration: none;
}

.navhub-footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.navhub-footer-links-sep {
  opacity: 0.35;
  margin: 0 2px;
}

.navhub-footer-legal {
  opacity: 0.7;
}

.navhub-footer-legal a {
  color: inherit;
}


/* ============================================================
 * W11 增补
 *   1. 外链跳转确认页（独立整页，不套主题母版）
 *   2. 自定义链接区块
 *   3. 推荐位（首页大卡片 + 侧栏紧凑列表）
 * 全部只使用 :root 变量，暗色模式自动跟随，不额外写媒体查询。
 * ============================================================ */

/* ---- 1. 外链跳转确认页 ------------------------------------ */

.navhub-body-go {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navhub-bg);
  padding: 24px 16px;
}

.navhub-go {
  width: 100%;
  max-width: 520px;
}

.navhub-go-card {
  position: relative;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--navhub-shadow);
  /* 顶部硬规则线：与站内文章页的报刊头版风格保持一致 */
  border-top: 4px solid var(--navhub-accent);
}

.navhub-go-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navhub-accent-text);
}

.navhub-go-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navhub-text);
}

.navhub-go-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--navhub-surface-2);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
}

.navhub-go-icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--navhub-radius);
  background: var(--navhub-primary-soft);
}

.navhub-go-icon img {
  position: relative;
  z-index: 1;
  border-radius: var(--navhub-radius);
  object-fit: contain;
}

.navhub-go-letter {
  font-size: 18px;
  font-weight: 700;
  color: var(--navhub-primary);
}

.navhub-go-target-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.navhub-go-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navhub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-go-domain {
  font-size: 12px;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

.navhub-go-url {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--navhub-code-fg);
  background: var(--navhub-code-bg);
  border-radius: var(--navhub-radius-sharp);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.navhub-go-notice {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--navhub-text-2);
}

.navhub-go-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.navhub-go-countdown {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--navhub-text-3);
  text-align: center;
}

/* ---- 2. 自定义链接区块 ------------------------------------ */

.navhub-linklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navhub-linklist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--navhub-border);
}

.navhub-linklist-item:last-child {
  border-bottom: 0;
}

.navhub-linklist-name {
  font-size: 13px;
  color: var(--navhub-text-2);
  text-decoration: none;
}

a.navhub-linklist-name:hover {
  color: var(--navhub-primary);
}

.navhub-linklist-plain {
  color: var(--navhub-text-3);
}

.navhub-linklist-desc {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--navhub-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 3. 推荐位 -------------------------------------------- */

.navhub-featured {
  margin: 0 0 22px;
  padding: 18px 18px 6px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-left: 4px solid var(--navhub-accent);
  border-radius: var(--navhub-radius-lg);
  box-shadow: var(--navhub-shadow);
}

.navhub-featured-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.navhub-featured-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-featured-mark {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: var(--navhub-on-ink);
  background: var(--navhub-accent-btn);
  border-radius: var(--navhub-radius-sharp);
}

.navhub-featured-note {
  margin: 0;
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-grid-featured {
  margin-bottom: 16px;
}

/* 侧栏推荐位：紧凑列表，序号用方块，与「浏览排行」区分开（那是圆形角标） */
.navhub-featured-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: navhub-feat;
}

.navhub-featured-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--navhub-border);
  counter-increment: navhub-feat;
}

.navhub-featured-item:last-child {
  border-bottom: 0;
}

.navhub-featured-rank {
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--navhub-on-ink);
  background: var(--navhub-accent-btn);
  border-radius: var(--navhub-radius-sharp);
}

.navhub-featured-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--navhub-text-2);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-featured-link:hover {
  color: var(--navhub-primary);
}

.navhub-featured-domain {
  flex: none;
  max-width: 84px;
  overflow: hidden;
  font-size: 11px;
  color: var(--navhub-text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .navhub-go-actions .navhub-btn {
    width: 100%;
  }

  .navhub-featured-domain {
    display: none;
  }
}

/* ============================================================================
 * 板块③ 网站导航：一级 tab + 二级侧栏 + 站点行
 *
 * 为什么是三栏，而不是再加一行筛选条：
 *   筛选条把两级分类压成同样的视觉重量，读者要读完两整行才知道
 *   「影视短剧」属于「影音娱乐」。三栏把「上下级」变成空间关系 ——
 *   横排的是同级，左栏的从属于上方选中的那一个。
 *
 * 无 JS 可用：tab 与侧栏项全部是真实链接（指向分类页），点击即跳转。
 *
 * 分节头部（.navhub-sec / -sec-head / -sec-num / -sec-title / -sec-note /
 * -sec-more）统一在 W21 块定义，此处不再重复。理由：同一选择器两处定义时，
 * 旧定义里独有的属性会静默存活 —— 曾让 -sec-title 带着 W19 的 inline-flex
 * 布局跑了两代，而页面看起来「基本正常」（硬约定 32）。
 * ========================================================================= */

.navhub-dirpanel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* ---- 一级分类 tab 条 ---- */

.navhub-navtabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-sm);
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto;
  scrollbar-width: none;
}

.navhub-navtabs::-webkit-scrollbar {
  display: none;
}

.navhub-navtab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 var(--space-md);
  font-size: 15px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.navhub-navtab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.navhub-navtab.is-current {
  color: var(--color-text);
  font-weight: 500;
}

/* 选中下划线压到容器边框上（bottom:-1px），做出「页签与内容连成一体」的观感 */
.navhub-navtab.is-current::after {
  content: "";
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: -1px;
  height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--color-brand);
}

.navhub-navtab-count {
  font-family: var(--font-num);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.navhub-navtab.is-current .navhub-navtab-count {
  color: var(--navhub-accent-text);
}

/* ---- 三栏主体：侧栏固定 240px，右侧自适应 ---- */

.navhub-dirlayout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 420px;
}

.navhub-subnav {
  padding: var(--space-sm);
  border-right: 1px solid var(--color-divider);
  background: var(--navy-50);
}

.navhub-subnav-title {
  margin: 0;
  padding: 8px 10px 6px;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.navhub-subnav-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 10px 10px 10px 12px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

/* 悬停底色用语义面层而不是 #fff：暗色下 #fff 会刺成一片白斑 */
.navhub-subnav-item:hover {
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.navhub-subnav-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navhub-subnav-count {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.navhub-subnav-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ---- 右侧站点列表 ---- */

.navhub-sitelist {
  min-width: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.navhub-sitelist-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.navhub-sitelist-title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--navhub-text);
}

.navhub-sitelist-sub {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}


.navhub-siterow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) var(--space-xs);
  border-bottom: 1px solid var(--color-divider);
  transition: transform var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) linear;
}

.navhub-siterow:last-child {
  border-bottom: 0;
}

.navhub-siterow:hover {
  transform: translateX(2px);
  background: var(--navy-50);
  text-decoration: none;
}

.navhub-siterow-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--navy-100);
  color: var(--navy-700);
}

.navhub-siterow-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* favicon 与首字母叠在同一格：图加载失败时 onerror 会把 img 隐藏，字母兜底立即显形 */
.navhub-siterow-icon img + .navhub-siterow-letter {
  position: absolute;
  z-index: -1;
}

.navhub-siterow-letter {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--text-body);
}

.navhub-siterow-main {
  min-width: 0;
}

.navhub-siterow-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-siterow-domain {
  display: block;
  font-family: var(--font-num);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.navhub-siterow-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.navhub-siterow-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.navhub-siterow-date {
  font-family: var(--font-num);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.navhub-sitelist-more {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-md);
  font-size: var(--text-base);
  color: var(--color-brand);
}

.navhub-sitelist-empty {
  margin: 0;
  padding: var(--space-lg) 0;
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
}

/* ---- 窄屏：三栏折成单列，侧栏变横向滑动条 ---- */

@media (max-width: 899px) {
  .navhub-dirlayout {
    grid-template-columns: 1fr;
  }

  .navhub-subnav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm);
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
    overflow-x: auto;
  }

  .navhub-subnav-title,
  .navhub-subnav-empty {
    display: none;
  }

  .navhub-subnav-item {
    flex: none;
    width: auto;
    padding: 6px 14px;
    border-left: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
  }
}

@media (max-width: 640px) {
  .navhub-siterow {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .navhub-siterow-meta {
    display: none;
  }
}

/* ============================================================================
 * W21 首页一比一还原（对齐 preview/design/home-redesign.html）
 *
 * 映射关系（原型 → 主题）：
 *   .hero / __search / __searchwrap / __hot   → .navhub-hero / -search / -searchwrap / -hot
 *   .carousel / __viewport / __track          → .navhub-hero-carousel / -viewport / -track
 *   .slide / __body / __eyebrow / __title ... → .navhub-slide / -body / -eyebrow / -title ...
 *   .catgrid / .catcard*                      → .navhub-catgrid / .navhub-catcard*
 *   .newsgrid / .newscard*                    → .navhub-newsgrid / .navhub-newscard*
 *   .latestlayout / .statgrid / .stat / .latest
 *                                             → .navhub-latestlayout / .navhub-statgrid
 *                                               .navhub-statcard / .navhub-latestbox
 *
 * 所有数值直接取自原型，不做「差不多」的换算。四项机械约束（规范 7.3）：
 * 圆角只用 4/8/12/16/pill；字重只用 400/500/700；过渡 ≤520ms；悬停位移 ≤2px。
 *
 * 一处有意的取舍：分节编号（.navhub-sec-num）与分类卡编号（.navhub-catcard-no）
 * 用了原型的浅色档（--navy-300 / --neutral-400），对比度约 2:1。它们是**纯装饰**
 * 序号（紧邻的同义文字就在旁边，模板里已标 aria-hidden），保留了原型「水印式编号」
 * 的观感；如果你更看重 WCAG 正文 4.5:1，把这两处换成 --color-text-tertiary 即可。
 * ========================================================================= */

/* ---- 分节头部：编号 + 标题 + 说明 + 右侧「更多」 ---- */

.navhub-sec {
  margin-top: 0;
  padding-block: var(--space-section);
}

/* 连续的分节之间只留一份间距：原型里 ③④⑤ 都用 padding-top:0 压掉重复留白 */
.navhub-sec + .navhub-sec {
  padding-top: 0;
}

.navhub-sec-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: 0;
  border-bottom: 0;
}

.navhub-sec-num {
  font-family: var(--font-num);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-bottom: 2px;
  color: var(--navy-300);
}

.navhub-sec-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--navhub-text);
}

.navhub-sec-note {
  margin: 0;
  padding-bottom: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.navhub-sec-more {
  margin-left: auto;
  padding-bottom: 2px;
  font-size: var(--text-base);
  white-space: nowrap;
  color: var(--navhub-primary);
}

/* ---- 通用小件：网点、胶囊徽章、等宽数字 ---- */

.navhub-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 徽章底色用 primitive 而不是 semantic：它在两种模式下都必须是「浅底 + 深字」，
   跟着 semantic 翻转会得到深底深字。 */
.navhub-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: var(--text-caption);
  font-weight: 500;
  white-space: nowrap;
}

.navhub-pill-hot {
  background: var(--teal-100);
  color: var(--teal-700);
}

.navhub-pill-new {
  background: var(--navy-100);
  color: var(--navy-700);
}

.navhub-pill-muted {
  background: var(--color-surface-alt);
  color: var(--color-text-tertiary);
}

.navhub-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---- ① Hero：满宽深蓝通栏 + 悬浮搜索 + 多轮转换图 ---- */

.navhub-hero {
  position: relative;
  isolation: isolate;
  margin: 0;
  /* 顶部不留白：设计稿里 .hero 只有 padding-bottom，上方的留白由
     .navhub-hero-search 的 padding-top 提供 —— 两处都留会变成双倍空隙 */
  padding: 0 0 var(--space-xl);
  border-radius: 0;
  background: var(--color-ink-surface);
  color: var(--color-text-on-ink);
  overflow: hidden;
}

/* 极细网格纹理：秩序感，不喧哗。用 mask 收在右上角，避免整屏都是格子 */
.navhub-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 80% 0%, #000 20%, transparent 75%);
}

.navhub-hero-inner {
  position: relative;
  z-index: 1;
}

.navhub-hero-search {
  position: relative;
  z-index: 2;
  padding-top: var(--space-xl);
}

.navhub-hero-searchwrap {
  max-width: 760px;
  margin-inline: auto;
}

/* 搜索药丸：下拉 + 竖分隔 + 输入 + 主按钮，合成一个整体控件 */
.navhub-hero-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 6px 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) var(--ease-out-quart);
}

.navhub-hero-bar:focus-within {
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

.navhub-hero-cate {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 22px 0 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--neutral-500) 50%),
    linear-gradient(135deg, var(--neutral-500) 50%, transparent 50%);
  background-position: calc(100% - 11px) 52%, calc(100% - 6px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.navhub-hero-divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
}

.navhub-hero-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--text-body);
  color: var(--color-text);
}

.navhub-hero-input::placeholder {
  color: var(--color-text-placeholder);
}

.navhub-hero-submit {
  height: 40px;
  padding: 0 18px;
  font-size: var(--text-body);
}

.navhub-hero-hot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  padding-left: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-on-ink-2);
}

.navhub-hero-hot a {
  padding-bottom: 1px;
  color: var(--color-text-on-ink-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.navhub-hero-hot a:hover {
  color: #ffffff;
  text-decoration: none;
}

.navhub-hero-fallback {
  padding: var(--space-2xl) 0 var(--space-lg);
  text-align: center;
}

.navhub-hero-fallback-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-text-on-ink);
}

.navhub-hero-fallback-desc {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-on-ink-2);
}

/* ---- ①-b 轮播 ---- */

.navhub-hero-carousel {
  position: relative;
  z-index: 1;
  margin-top: var(--space-lg);
}

.navhub-hero-viewport {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
}

.navhub-hero-track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.navhub-slide {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-xl);
  min-height: var(--hero-min-h);
  padding: clamp(24px, 3.5vw, 48px);
  overflow: hidden;
}

.navhub-slide--1 { background: var(--hero-grad-1); }
.navhub-slide--2 { background: var(--hero-grad-2); }
.navhub-slide--3 { background: var(--hero-grad-3); }
/* 推荐位超过 3 条时退回 6 组策展渐变，不会出现相邻同色的空白卡 */
.navhub-slide--4 { background: var(--grad-4); }
.navhub-slide--5 { background: var(--grad-5); }
.navhub-slide--6 { background: var(--grad-6); }

.navhub-slide-body {
  position: relative;
  z-index: 2;
  max-width: 56ch;
}

.navhub-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-md);
  padding: 4px 12px;
  font-size: var(--text-sm);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
}

.navhub-slide-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
}

.navhub-slide-desc {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-body);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}

.navhub-slide-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* 深底上的按钮要反过来：主按钮用白底深字，次按钮透明描边 */
.navhub-slide-actions .navhub-btn-primary {
  background: #ffffff;
  color: var(--navy-800);
}

.navhub-slide-actions .navhub-btn-primary:hover {
  background: #eef2fb;
  color: var(--navy-800);
}

.navhub-slide-actions .navhub-btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.navhub-slide-actions .navhub-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* 右侧「索引编号」图形：纯 CSS，无图片依赖 */
.navhub-slide-art {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 180px;
}

.navhub-slide-artnum {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(88px, 14vw, 180px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.1);
}

.navhub-slide-artgrid {
  position: absolute;
  inset: 8% 4%;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(160deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(160deg, #000 30%, transparent 78%);
}

.navhub-slide-stat {
  position: absolute;
  right: 6%;
  bottom: 10%;
  z-index: 2;
  text-align: right;
  color: #ffffff;
}

.navhub-slide-stat b {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(24px, 3vw, 36px);
  font-variant-numeric: tabular-nums;
}

.navhub-slide-stat span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}

/* ---- ①-c 轮播控件 ---- */

.navhub-hero-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(10, 31, 71, 0.55);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.navhub-hero-arrow:hover {
  background: rgba(10, 31, 71, 0.85);
}

.navhub-hero-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navhub-hero-arrow-prev { left: var(--space-md); }
.navhub-hero-arrow-next { right: var(--space-md); }

.navhub-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.navhub-hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navhub-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: width var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) linear;
}

.navhub-hero-dot[aria-selected="true"],
.navhub-hero-dot.is-active {
  width: 28px;
  background: #ffffff;
}

.navhub-hero-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text-on-ink-2);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.navhub-hero-pause:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ---- ② 热门推荐分类：卡片网格 ---- */

.navhub-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.navhub-catcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) linear,
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}

.navhub-catcard:hover {
  border-color: var(--navy-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.navhub-catcard-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.navhub-catcard-no {
  font-family: var(--font-num);
  font-size: var(--text-sm);
  color: var(--neutral-400);
}

.navhub-catcard-top .navhub-pill {
  margin-left: auto;
}

.navhub-catcard-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* 收录数最高的两栏用品牌色压住 —— 用别名而不是 --navy-700，
   否则暗色下深蓝落在深卡上会掉到 1.6:1 */
.navhub-catcard--top .navhub-catcard-name {
  color: var(--navhub-primary);
}

.navhub-catcard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.navhub-catcard-bar {
  display: block;
  height: 3px;
  margin-top: 2px;
  overflow: hidden;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
}

.navhub-catcard-bar i {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
}

/* ---- ④ 行业资讯：渐变卡 ---- */

.navhub-newsgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.navhub-newscard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 208px;
  padding: var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #ffffff;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}

.navhub-newscard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.navhub-newscard--g1 { background: var(--grad-1); }
.navhub-newscard--g2 { background: var(--grad-2); }
.navhub-newscard--g3 { background: var(--grad-3); }
.navhub-newscard--g4 { background: var(--grad-4); }
.navhub-newscard--g5 { background: var(--grad-5); }
.navhub-newscard--g6 { background: var(--grad-6); }

.navhub-newscard--featured {
  grid-column: span 2;
  min-height: 284px;
  padding: var(--space-xl);
}

.navhub-newscard-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-size: var(--text-caption);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
}

.navhub-newscard-body {
  position: relative;
  z-index: 1;
  display: block;
}

.navhub-newscard-title {
  margin: 0 0 var(--space-xs);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.navhub-newscard--featured .navhub-newscard-title {
  max-width: 26ch;
  font-size: 1.25rem;
}

.navhub-newscard-excerpt {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.navhub-newscard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
}

/* 卡面装饰：右下角索引编号，弱化但延续编号母题 */
.navhub-newscard-no {
  position: absolute;
  right: var(--space-lg);
  bottom: calc(var(--space-lg) - 6px);
  z-index: 0;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
}

.navhub-newscard--featured .navhub-newscard-no {
  right: var(--space-xl);
  bottom: var(--space-lg);
  font-size: 112px;
}

/* ---- ⑤ 最新收录 + 数据概览 ---- */

.navhub-latestlayout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-lg);
}

.navhub-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.navhub-statcard {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.navhub-statcard-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.navhub-statcard-value {
  margin-top: 6px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}

.navhub-statcard-unit {
  margin-left: 4px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

.navhub-statcard-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 10px;
}

/* 「涨」用青绿文字档：浅底 7.06:1，暗色下语义层自动翻亮 */
.navhub-statcard-delta {
  font-size: var(--text-sm);
  color: var(--color-accent-text);
}

.navhub-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.navhub-spark i {
  width: 4px;
  background: var(--teal-300);
  border-radius: var(--radius-pill);
}

.navhub-spark i:last-child {
  background: var(--color-accent);
}

.navhub-latestbox {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.navhub-latest-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.navhub-latest-head h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.navhub-latest-list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navhub-latest-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}

.navhub-latest-item:last-child {
  border-bottom: 0;
}

.navhub-latest-main {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.navhub-latest-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.navhub-latest-domain {
  font-family: var(--font-num);
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.navhub-latest-time {
  margin-left: auto;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.navhub-latest-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider);
}

.navhub-latest-cta p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.navhub-latest-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ---- chip 对齐原型：中性浅底 + 次级文字（原 W19-f 版是品牌浅底）---- */

.navhub-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  /* chip 内容常是「N 个站点」，等宽数字避免计数跳动 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 响应式 ---- */

@media (max-width: 899px) {
  .navhub-slide {
    grid-template-columns: 1fr;
  }

  .navhub-slide-art {
    display: none;
  }

  .navhub-newsgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navhub-newscard--featured {
    grid-column: span 2;
  }

  .navhub-latestlayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  :root {
    --hero-min-h: 320px;
  }

  .navhub-catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navhub-newsgrid {
    grid-template-columns: 1fr;
  }

  .navhub-newscard--featured {
    grid-column: span 1;
    min-height: 220px;
  }

  .navhub-hero-arrow {
    display: none;
  }

  /* 窄屏下搜索药丸只留输入框与按钮：下拉和分隔线会把输入框挤到看不见 */
  .navhub-hero-cate,
  .navhub-hero-divider {
    display: none;
  }
}

/* 减少动效：位移全部关掉，信息仍然完整可见 */
@media (prefers-reduced-motion: reduce) {
  /* 不自动播放，暂停按钮就成了一个没有作用的开关 */
  .navhub-hero-pause {
    display: none;
  }

  .navhub-hero-track {
    transition: none;
  }

  .navhub-hero-dot,
  .navhub-hero-arrow,
  .navhub-catcard,
  .navhub-newscard,
  .navhub-card {
    transition: none;
  }

  .navhub-catcard:hover,
  .navhub-newscard:hover,
  .navhub-card:hover {
    transform: none;
  }
}

/* ==========================================================================
 * W22 首页板块改造（用户 5 图需求）
 *
 *   ③ 板块④「网站导航」站内切换的状态样式（JS 拦截点击后加 is-loading）
 *   ④ 板块③「站点推荐」纯文本卡（recgrid/reccard，替代原 post-multi 名片卡）
 *   ⑤ 资讯卡首图（newscard-thumb）
 *   ① 幻灯自定义照片背景（--slide-bg + 压暗层）与「提交网站」按钮
 *
 * 本段只新增选择器，不重复定义任何既有选择器 —— 同名两处定义时旧定义
 * 独有的属性会静默存活（硬约定 32，W21 刚清完一轮）。
 * ========================================================================== */

/* ---- 板块 ④ 网站导航：站内切换 ---- */

/* 切换请求进行中：面板降透明度并锁交互，防止连点打出竞态 */
.navhub-dirpanel.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* 状态行（role=status）：位于面板下方，仅切换期间可见 */
.navhub-dirstatus {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* 二级侧栏选中项：与一级 tab 同一套品牌语言（左侧 3px 品牌条 + 浅底） */
.navhub-subnav-item.is-current {
  border-left-color: var(--color-brand);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 500;
}

.navhub-subnav-item.is-current .navhub-subnav-count {
  color: var(--navhub-accent-text);
}

/* ---- 板块 ③ 站点推荐：紧凑文字链网格（W23，参照用户截图） ---- */

/* 一行多个「图标 + 名称」，宽度自适应；128px 下限在 1200px 容器出约 8 列，
   窄屏自然降列，不写死列数 */
.navhub-recgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--space-xs) var(--space-sm);
}

.navhub-recitem {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) linear;
}

.navhub-recitem:hover {
  background: var(--color-surface-alt);
  text-decoration: none;
}

.navhub-recitem-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

/* 首字符兜底铺在底层：favicon 没配 / 加载失败时露出，图标位永远不塌 */
.navhub-recitem-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--navhub-accent-text);
  background: var(--color-surface-alt);
  border-radius: var(--radius-xs);
}

.navhub-recitem-icon img {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
}

.navhub-recitem-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.navhub-recitem:hover .navhub-recitem-name {
  color: var(--color-text);
}

/* ---- 板块 ⑤ 资讯卡：首图 ---- */

/* 渐变卡加图后改为上图下文：图占卡顶，正文压在下方 */
.navhub-newscard.has-thumb {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
}

.navhub-newscard-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.navhub-newscard-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 有图卡的文字区恢复内边距（卡面 padding 已归零给通栏图） */
.navhub-newscard.has-thumb .navhub-newscard-tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
}

.navhub-newscard.has-thumb .navhub-newscard-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.navhub-newscard.has-thumb .navhub-newscard-no {
  bottom: calc(var(--space-lg) - 6px);
  right: var(--space-lg);
}

/* ---- 板块 ① Hero：自定义照片背景与提交按钮 ---- */

/* 后台填了背景图的 slide：照片铺满 + 压暗层保证白字对比度。
   渐变底仍保留在元素上，照片加载失败时自然露出，不会闪白。
   注意：背景图由模板以 --slide-bg 内联变量注入，这里**必须**把它
   接到 background-image 上 —— 只写 size/position 而不引用变量，
   图片永远不会渲染（W23 踩过：后台填了图、前台无动静）。 */
.navhub-slide--photo {
  background-image: var(--slide-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.navhub-slide--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(10, 22, 52, 0.82) 0%, rgba(10, 22, 52, 0.55) 55%, rgba(10, 22, 52, 0.35) 100%);
}

/* slide 内容已在 z-index:2（.navhub-slide-body），压暗层不遮交互 */

.navhub-slide-submit svg {
  width: 18px;
  height: 18px;
  margin-right: 2px;
  vertical-align: -3px;
}

.navhub-hero-fallback-actions {
  margin-top: var(--space-lg);
}

/* ---- W23 响应式 ---- */

/* recgrid 用 auto-fill 自适应降列，无需媒体查询覆写 */

/* 减少动效：新增的过渡一并关掉 */
@media (prefers-reduced-motion: reduce) {
  .navhub-recitem {
    transition: none;
  }
}

/* ============================================================================
 * W25 增补：归档页（标签归档 /tags.html + 文章归档 /archives.html）
 *
 * 设计取向：这两页是「索引」不是「内容」，所以整页用浅色 + 描边 + 细规则线，
 * 不复制首页的深蓝通栏 —— 索引页要的是扫读效率，不是视觉冲击。
 * 全部走 --navhub-* 别名，暗色模式自动跟随，无需单独写暗色规则。
 * ============================================================ */

/* ---- 两个归档页共用的索引条（年份条同构，用逗号组避免复制一份） ---- */

.navhub-tagarc-index,
.navhub-arcyear {
  position: sticky;
  top: calc(var(--navhub-head-h) + 10px);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  margin-bottom: 26px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius);
  box-shadow: var(--navhub-shadow);
}

.navhub-tagarc-index-cap,
.navhub-arcyear-cap {
  flex: none;
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--navhub-text-3);
}

.navhub-tagarc-index-link,
.navhub-arcyear-link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--navhub-border);
  border-radius: var(--radius-pill);
  background: var(--navhub-bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navhub-text-2);
  transition: color var(--dur-fast) var(--navhub-ease),
              background-color var(--dur-fast) var(--navhub-ease),
              border-color var(--dur-fast) var(--navhub-ease);
}

.navhub-tagarc-index-link:hover,
.navhub-arcyear-link:hover {
  background: var(--navhub-accent-btn);
  border-color: var(--navhub-accent-btn);
  color: #fff;
  text-decoration: none;
}

.navhub-tagarc-index-link sup,
.navhub-arcyear-link sup {
  font-size: 10px;
  font-weight: 700;
  color: var(--navhub-text-3);
}

.navhub-tagarc-index-link:hover sup,
.navhub-arcyear-link:hover sup {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 归档页头部（浅色卡 + 左侧强调竖条） ---- */

.navhub-archero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 40px;
  padding: 22px 24px;
  margin-bottom: 22px;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-left: 4px solid var(--navhub-accent);
  border-radius: var(--navhub-radius-lg);
}

.navhub-archero-main {
  flex: 1 1 340px;
  min-width: 0;
}

.navhub-archero-title {
  margin: 0 0 6px;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navhub-text);
}

.navhub-archero-sub {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--navhub-text-3);
}

.navhub-archero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navhub-archero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navhub-archero-num {
  font-family: var(--font-num);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--navhub-text);
  font-variant-numeric: tabular-nums;
}

.navhub-archero-cap {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--navhub-text-3);
}

/* ---- 标签归档：分组 + 云 ---- */

.navhub-tagarc-group {
  margin-bottom: 34px;
  /* 锚点跳转后标题不被粘性索引条压住 */
  scroll-margin-top: calc(var(--navhub-head-h) + 72px);
}

.navhub-tagarc-grouphead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.navhub-tagarc-grouptitle {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--navhub-text);
}

.navhub-tagarc-groupnum {
  font-size: 12.5px;
  color: var(--navhub-text-3);
}

.navhub-tagarc-grouprule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--navhub-border);
}

.navhub-tagarc-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navhub-tagarc-item {
  margin: 0;
}

.navhub-tagarc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--navhub-border);
  border-radius: var(--radius-pill);
  background: var(--navhub-surface);
  color: var(--navhub-text-2);
  line-height: 1.3;
  transition: color var(--dur-fast) var(--navhub-ease),
              border-color var(--dur-fast) var(--navhub-ease),
              background-color var(--dur-fast) var(--navhub-ease),
              box-shadow var(--dur-fast) var(--navhub-ease);
}

.navhub-tagarc-tag:hover {
  border-color: var(--navhub-accent);
  background: var(--navhub-accent-soft);
  color: var(--navhub-accent-text);
  text-decoration: none;
  box-shadow: var(--navhub-shadow);
}

.navhub-tagarc-tagname {
  word-break: break-all;
}

/* 计数角标：等宽数字，避免数字跳动时云的整体节奏晃 */
.navhub-tagarc-tagcount {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--navhub-surface-2);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

/* 字号档位：level 由收录数相对最热标签算出（1 冷 → 5 热）。
   只调字号与字重，不改盒子尺寸 —— 云的整齐度比「大小对比夸张」重要。 */
.navhub-tagarc-tag.is-l1 .navhub-tagarc-tagname { font-size: 12.5px; }
.navhub-tagarc-tag.is-l2 .navhub-tagarc-tagname { font-size: 13.5px; }
.navhub-tagarc-tag.is-l3 .navhub-tagarc-tagname { font-size: 14.5px; }
.navhub-tagarc-tag.is-l4 .navhub-tagarc-tagname { font-size: 15.5px; }
.navhub-tagarc-tag.is-l5 .navhub-tagarc-tagname {
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-tagarc-tag.is-l5 {
  border-color: var(--navhub-accent);
}

/* ---- 文章归档：时间轴 ---- */

.navhub-tl-year {
  margin-bottom: 44px;
  scroll-margin-top: calc(var(--navhub-head-h) + 72px);
}

.navhub-tl-yearhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.navhub-tl-yeartitle {
  margin: 0;
  font-family: var(--font-num);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navhub-text);
  font-variant-numeric: tabular-nums;
}

.navhub-tl-yearnum {
  font-size: 13px;
  color: var(--navhub-text-3);
}

.navhub-tl-yearrule {
  flex: 1 1 auto;
  height: 3px;
  background: var(--navhub-ink);
  opacity: 0.14;
}

/* 月组：左侧竖线 + 节点。竖线画在 ::before，节点画在 ::after，
   两者绝对定位，行高变化时不会错位。 */
.navhub-tl-month {
  position: relative;
  padding-left: 30px;
  margin-bottom: 24px;
}

.navhub-tl-month::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: -6px;
  width: 2px;
  background: var(--navhub-border);
}

.navhub-tl-month:last-child::before {
  bottom: auto;
  height: 28px;
}

.navhub-tl-month::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navhub-accent);
  box-shadow: 0 0 0 3px var(--navhub-bg);
}

.navhub-tl-monthlabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}

.navhub-tl-monthname {
  font-size: 15px;
  font-weight: 700;
  color: var(--navhub-text);
}

.navhub-tl-monthcount {
  font-size: 12px;
  color: var(--navhub-text-3);
}

.navhub-tl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--navhub-surface);
  border: 1px solid var(--navhub-border);
  border-radius: var(--navhub-radius-lg);
  overflow: hidden;
}

.navhub-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-divider);
  transition: background-color var(--dur-fast) linear;
}

.navhub-tl-item:hover {
  background: var(--navhub-surface-2);
}

.navhub-tl-item:last-child {
  border-bottom: 0;
}

.navhub-tl-day {
  flex: none;
  width: 30px;
  padding-top: 2px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navhub-text-3);
  font-variant-numeric: tabular-nums;
}

.navhub-tl-body {
  flex: 1 1 auto;
  min-width: 0;
}

.navhub-tl-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--navhub-text);
}

.navhub-tl-title:hover {
  color: var(--navhub-accent-text);
  text-decoration: none;
}

.navhub-tl-intro {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: var(--leading-normal);
  color: var(--navhub-text-3);
}

.navhub-tl-cate {
  flex: none;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--navhub-surface-2);
  font-size: 12px;
  line-height: 1.6;
  color: var(--navhub-text-2);
  white-space: nowrap;
}

.navhub-tl-cate:hover {
  background: var(--navhub-accent-soft);
  color: var(--navhub-accent-text);
  text-decoration: none;
}

/* ---- W25 响应式 ---- */

@media (max-width: 720px) {
  .navhub-archero {
    padding: 18px 16px;
  }

  .navhub-archero-num {
    font-size: 1.375rem;
  }

  .navhub-tagarc-index,
  .navhub-arcyear {
    /* 窄屏不再粘性：索引条换行后会占掉大半屏，粘住反而挡内容 */
    position: static;
  }

  .navhub-tagarc-tag {
    padding: 5px 10px;
  }

  .navhub-tl-month {
    padding-left: 22px;
  }

  .navhub-tl-item {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 11px 13px;
  }

  .navhub-tl-cate {
    margin-left: 42px;
  }
}

/* 减少动效：新增的过渡一并关掉 */
@media (prefers-reduced-motion: reduce) {
  .navhub-tagarc-tag,
  .navhub-tl-item {
    transition: none;
  }
}

/* ============================================================
 * W26 增补：友链免审（提交页加链指引 + 检测回执）
 *
 * 「加链即可免审」是本站唯一一条**用户自己就能操作**的免审通道，
 * 因此它不能混在普通的收录说明里 —— 要看起来像一件「马上能做的事」：
 * 品牌色（而不是警示黄）、可直接复制的代码块、复制按钮。
 *
 * 检测回执里的友链行复用同一套颜色语言（有=品牌色，无=中性灰），
 * 用户点提交之前就能判断自己会不会进审核队列，避免「提交完才发现要等人工」。
 * ============================================================ */

/* ---- 加链指引：从「警示」换档到「品牌」，与收录说明拉开层级 ---- */
.navhub-submit-friend {
  background: var(--navhub-accent-soft);
  border-left-color: var(--navhub-accent);
}

.navhub-submit-friend .navhub-submit-notice-title {
  color: var(--navhub-accent-text);
}

.navhub-submit-friend strong {
  color: var(--navhub-accent-text);
  font-weight: 700;
}

.navhub-friend-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
}

.navhub-friend-code code {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--navhub-text);
  background: var(--navhub-surface);
  border: 1px dashed var(--navhub-border-strong);
  border-radius: var(--navhub-radius);
  /* 源码要能被整段选中带走，长行也不能撑破卡片 */
  word-break: break-all;
  user-select: all;
}

.navhub-friend-code .navhub-btn {
  flex: none;
}

/* ---- 检测回执里的友链行 ---- */
.navhub-detect-item-friend {
  color: var(--navhub-accent-text);
  font-weight: 700;
}

.navhub-detect-item-friend-no {
  color: var(--navhub-text-3);
}

/*
 * 「未检测到友链」的中性提示档。
 *
 * 这里刻意不用 .is-error：站点本身是通的、能收录，只是走审核队列而已，
 * 标红会让人以为提交失败了。用 600 档品牌色（已验过对比度）与加链指引呼应。
 */
.navhub-field-note.is-warn,
.navhub-form-msg.is-warn {
  color: var(--navhub-accent-text);
}

/* 复制按钮的瞬时反馈：只改文字，不弹层，不打断填写 */
.navhub-friend-code .navhub-btn.is-copied {
  color: var(--navhub-accent-text);
  border-color: var(--navhub-accent);
  background: var(--navhub-accent-soft);
}

@media screen and (max-width: 640px) {
  /* 窄屏代码与按钮不再并排：代码本来就长，挤在一起两头都读不清 */
  .navhub-friend-code code {
    flex-basis: 100%;
  }
}

/* ============================================================
 * W28 增补：详情页小节头 + 「搜索引擎数据」数值条（对齐原型 site-detail）
 *
 * 原型的搜索引擎数据是两组「标签 / 数值条 / 数值」的横向条形
 * （权重一组、收录一组），旧版是竖排小胶囊 —— 用户对照原型指出不一致。
 * 条形只表达相对量级（权重 = 值 × 10%；收录 = 占最大值比例，最大者 88%；
 * 二值引擎给示意宽度），精确数字永远在右侧一列。
 *
 * 小节头同时补上原型的「编号眉标」（数据 / 简介 / 工具），
 * 并在详情页范围内把小节头换成「正常字号粗标题 + 1px 细线」——
 * 全站通用的小号大写字 + 3px 墨线语汇留在长文页，页面语汇不混用。
 * ============================================================ */

/* ---- 小节头：编号眉标 ---- */
.navhub-blocktitle-no {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navhub-accent-text);
}

/* 详情页小节头：正常字号 + 细线（原型 sec-head 同构） */
.navhub-navsite .navhub-blocktitle {
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: none;
}

.navhub-navsite .navhub-blocktitle-rule {
  height: 1px;
  background: var(--navhub-border);
}

/* 网站评估：原型不给眉标与规则线，就是卡内一个粗标题 */
.navhub-evaluate-heading {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navhub-text);
}

/* ---- 数值条（权重 / 收录两组共用） ---- */
.navhub-metrics-group + .navhub-metrics-group {
  margin-top: 18px;
}

.navhub-metrics-cap {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--navhub-text-3);
}

.navhub-metrics {
  display: grid;
  gap: 12px;
}

.navhub-metric {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 12px;
}

.navhub-metric-label {
  font-size: 12.5px;
  color: var(--navhub-text-3);
}

.navhub-metric-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--navhub-surface-2);
  overflow: hidden;
}

.navhub-metric-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--navhub-primary), var(--navhub-accent));
}

/* 「未收录」没有量级可画：灰条 + 灰字，与「已收录」明显拉开 */
.navhub-metric-fill.is-none {
  background: var(--navhub-border);
}

.navhub-metric-value {
  min-width: 4.5ch;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navhub-text);
}

/* 文本型取值（已收录 / 未收录）：不是数字，退回正文字号 */
.navhub-metric-value.is-txt {
  font-family: inherit;
  font-size: 13px;
}

.navhub-metric-value.is-none {
  color: var(--navhub-text-3);
}

@media screen and (max-width: 640px) {
  /* 窄屏：标签列收窄、间距收紧，条形仍是主角 */
  .navhub-metric {
    grid-template-columns: 68px 1fr auto;
    gap: 8px;
  }
}