/* ==== src/styles/tokens.css ==== */
/* ============================================================================
   tokens.css · 设计令牌（优秀产品经理导航网 · 1:1 风格复刻版）
   依据：docs/03b-reference-spec.md（**真浏览器实测计算值**，非读源码推测）
   仅亮色。零外部字体。所有资源引用使用绝对路径 /assets/…
   ========================================================================== */

:root {
  /* ---------- 品牌蓝（**参考站的主色体系**，实测算得）----------
     上一版误把橙色当主色、导致"相差很大"。实测：参考站页头/英雄区/页脚**全是蓝**，
     橙色 #ff6000 仅作 hover 强调。这里按实测值建立蓝色体系。 */
  --c-brand: #417ff9;              /* 页头 & 页脚版权区实测 rgb(65,127,249) */
  --c-brand-deep: #2770ff;         /* 页脚上区实测 rgb(39,112,255) */
  --c-brand-header: rgba(65, 127, 249, 0.9);   /* 页头实测带 0.9 透明 */
  --c-hero-from: #4a89f0;          /* 英雄区渐变起点 实测 rgb(74,137,240) */
  --c-hero-to: #7bb3f4;            /* 英雄区渐变终点 实测 rgb(123,179,244) */
  --c-brand-light: #4093fb;        /* 辅助蓝（实测出现 11 次） */
  --c-brand-soft: #eef4ff;         /* 蓝色淡染（本地推导，用于 hover 底） */

  /* ---------- 强调橙（**仅小面积**，实测 #ff6000 出现 27 次）---------- */
  --c-accent: #ff6000;
  --c-accent-hover: #e55600;

  /* ---------- 正文与灰阶（实测） ---------- */
  --c-text: #3c3c3c;               /* 卡片标题 实测 rgb(60,60,60) */
  --c-heading: #000000;            /* 分区标题 实测 rgb(0,0,0) */
  /* 卡片描述色：参考站原值 #8f8f8f 对白底仅 3.23:1（AA 不达标）。
     描述覆盖 264 张卡片，是主要阅读文字，故按可达性要求调深至 #6B6B6B = 5.71:1 ✓ AA。 */
  --c-text-2: #6b6b6b;
  --c-text-3: #5a5a5a;

  /* ---------- 角标（实测） ---------- */
  --c-tag-bg: #f1f7fc;             /* 实测 rgb(241,247,252) */
  --c-tag-text: #9ca7ae;           /* 实测 rgb(156,167,174) */

  /* ---------- 底线与底色 ---------- */
  --c-line: #ececec;
  --c-line-soft: #f4f4f4;
  --c-surface: #ffffff;
  --c-page: #f5f6f8;
  --c-surface-2: #fafafa;

  /* ---------- 焦点环 ---------- */
  --c-focus: #417ff9;
  --c-focus-ring: rgba(65, 127, 249, 0.35);

  /* ---------- 圆形字母牌（自有识别 ①）----------
     依据：docs/03 第 3.1 节（含全 3600 采样点实测）。
     朴素「色相均匀铺满 0–359°」的写法会在黄绿区（h≈60）严重跌破对比度：
       hsl(h 62% 45%) → 2.07:1；hsl(h 58% 38%) → 3.02:1，字形几乎糊在底上。
     采用方案：把色相**压缩到 210°→380°**（蓝—紫—洋红—红—橙），跳过黄绿区。
     实测全色相最差 4.93:1（亮端）/ 8.23:1（暗端），全部 ≥4.5:1。
     色相映射由 build.mjs 内联的 --mark-h 经下面两个变量换算；此处给出端点参数。 */
  --mark-hue-base: 210;
  --mark-hue-span: 170;
  --mark-s-1: 62%;
  --mark-l-1: 43%;
  --mark-s-2: 62%;
  --mark-l-2: 30%;

  /* ---------- 字体栈（系统栈，禁止外部字体） ---------- */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- 字号 ---------- */
  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-title: 16px;
  --fs-block: 20px;   /* .c-title .l strong */
  --fs-h1: 32px;      /* .search-title */
  --fs-h1-lg: 40px;

  /* ---------- 行高 ---------- */
  --lh-base: 1.6;
  --lh-title: 28px;
  --lh-title-lg: 32px;
  --lh-desc: 18px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 30px;
  --sp-8: 40px;
  --sp-9: 60px;

  /* ---------- 尺寸（docs/03b 真浏览器实测值） ----------
     参考站是**流式布局**（非固定 1720 容器）：.container 宽 100%、左侧 padding 170/180px、
     内容 max-width 1660 居中；≤1659px 时 .f-box padding 10px、≥1660px 时 20px。 */
  --container-w: 100%;         /* 实测：.container 满宽，靠 padding-left + .main-wrap 居中 */
  --content-w: 1660px;         /* .main-wrap 实测 max-width */
  --container-pad-l-sm: 170px; /* ≤1659px 实测 padding-left */
  --container-pad-l-lg: 180px; /* ≥1660px 实测 padding-left */
  --header-pad-x-sm: 15px;     /* ≤1329px 时 .header-main 左右内距 */
  --header-pad-x-lg: 30px;     /* ≥1330px 时 .header-main 左右内距 */
  --wrap-left-w: 177px;        /* .wrap-left 实测固定宽 */
  --wrap-left-pad: 17px;       /* ≤1659px 时左内距 */
  --wrap-left-pad-lg: 27px;    /* ≥1660px */
  --ico-size: 28px;          /* .item-ico；实测默认 28px，≥1660px 为 32px */
  --card-pad: 14px;            /* .f-box padding 实测 1440；≥1660px 为 20px */
  --card-radius: 10px;         /* 实测（与 --radius-card 同值，保留以对齐文档口径） */
  --header-h: 64px;            /* 实测页头高 */
  --hero-h: 346px;             /* .part-search 实测高 */
  --hero-radius: 10px;
  --footer-top-h: 88px;        /* .part-footer-top 实测高 */
  --sidebar-w: 167px;          /* .part-sidebar 实测；≥1660px 为 177px */
  --search-form-w: 396px;      /* 英雄区搜索表单实测宽 */
  --input-h: 46px;             /* 英雄区输入框实测高 */
  --radius-card: 10px;
  --radius-tag: 3px;
  --radius-pill: 999px;

  /* ---------- 层级 ---------- */
  --z-sticky: 20;
  --z-header: 100;
  --z-fixed: 110;
  --z-skip: 200;

  /* ---------- 动效 ---------- */
  --d-fast: 0.2s;            /* 规格：transition:all .2s */
  --d-base: 0.28s;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---------- 阴影 ---------- */
  --sh-card-hover: 0 4px 20px rgba(0, 0, 0, 0.04);
  --sh-pop: 0 8px 28px rgba(0, 0, 0, 0.10);
  --sh-header: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* 圆形字母牌的默认色相兜底（build.mjs 以内联 --mark-h:0-359 注入） */
.p-item {
  --mark-h: 20;
}

/* ==== src/styles/base.css ==== */
/* ============================================================================
   base.css · reset / 排版 / 无障碍基础
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 页头 is-fixed 常驻吸顶，锚点跳转需补偿 */
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--c-brand);
}

/* 数字统一等宽，避免计数变化时抖动 */
.num,
.c-count,
.show-stat .num,
.sidebar-menu .num,
time,
strong.num {
  font-variant-numeric: tabular-nums;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

svg {
  display: block;
}

/* 隐去原生清除按钮，统一由 #q-clear 承担 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
}

/* ---------- 布局基元（build.mjs 输出的 .container/.main/.main-wrap/.wrap-left/.flex） ----------
   参考站实测结构（docs/03b §2）：**.container 满宽，靠左侧 padding 让出 170/180px 的左栏槽**，
   左栏 .wrap-left 绝对定位到该槽内；主内容由 .main-wrap 在扣除该槽与 .main 内距后居中。
   不是「主内容居中 + 侧栏在旁」——这是本轮最重要的结构对齐点。

   实测推导（.container 内容宽 = 视口 − padding-left，再减 .main 左右内距 = .main-wrap）：
     1000 → 830−30 = 800 | 1200 → 1030−30 = 1000 | 1330 → 1160−60 = 1100
     1440 → 1270−60 = 1210 | 1659 → 1489−60 = 1429 | 1660 → 1480−60 = 1420
     1899 → 1719−60 = 1659 | 1920 → 1720−60 = 1660（max-width 生效后内容封顶 1720） */

.container {
  position: relative;          /* 实测 position:relative，供 .wrap-left 绝对定位 */
  width: 100%;
  margin-inline: 0;
  padding-left: var(--container-pad-l-sm);   /* ≤1659px 实测 170px */
  padding-right: 0;
}

@media (min-width: 1660px) {
  .container {
    padding-left: var(--container-pad-l-lg);   /* ≥1660px 实测 180px */
  }
}

/* ≥1900px 实测：内容宽封顶（1720），且带 10px 外边距 —— 1920 − 180 − 20 = 1720 */
@media (min-width: 1900px) {
  .container {
    max-width: 1900px;
    margin-inline: 10px;
  }
}

/* 左栏槽：绝对定位在容器左侧预留区内（含 Logo 与固定侧栏） */
.wrap-left {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--wrap-left-w);   /* 实测 177px */
  padding-left: var(--wrap-left-pad);
}

@media (min-width: 1660px) {
  .wrap-left {
    padding-left: var(--wrap-left-pad-lg);   /* 实测 27px */
  }
}

.main {
  width: 100%;
  padding-inline: var(--header-pad-x-sm);    /* 实测 ≤1329px 为 15px */
}

@media (min-width: 1330px) {
  .main {
    padding-inline: var(--header-pad-x-lg);  /* 实测 ≥1330px 为 30px */
  }
}

/* 主内容在扣除左栏槽与 .main 内距后居中 */
.main-wrap {
  width: 100%;
  max-width: var(--content-w);   /* 实测 1660px */
  margin-inline: auto;
}

/* 页脚是满宽通栏 + 自身容器居中；页头容器**与主体同构**（保留左栏槽，Logo 由 CSS 定位进槽内） */
.part-footer-top > .container,
.part-footer-copyright > .container {
  padding-left: 0;
  margin-inline: 0;
  max-width: none;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

/* ---------- 隐藏工具类 ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* hidden 属性须压过组件自身 display（.f-item 等为 flex/block） */
[hidden] {
  display: none !important;
}

/* ---------- 跳转链接 ---------- */

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  padding: 10px 16px;
  border-radius: var(--radius-tag);
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-pop);
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 焦点可见 ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-tag);
}

/* 深色实底上的焦点环需反色 */
.btn.a-more:focus-visible,
.fav-toggle[aria-pressed="true"]:focus-visible,
.search-btn:focus-visible,
.go_top:focus-visible,
.skip-link:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px var(--c-focus-ring);
}

::selection {
  background: var(--c-brand-soft);
  color: var(--c-text);
}

/* ---------- 滚动条（点缀，非关键路径） ---------- */

@supports (scrollbar-width: thin) {
  .submenu,
  .search-keywords {
    scrollbar-width: thin;
  }
}

/* ---------- 动效降级 ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 强制对比度（Windows 高对比度） ---------- */

@media (forced-colors: active) {
  .f-box,
  .kw,
  .fav-toggle,
  #q,
  .search-btn,
  .go_top,
  .item-fav {
    border: 1px solid CanvasText;
  }

  .item-ico {
    forced-color-adjust: none;
  }
}

/* ---------- 打印 ---------- */

@media print {
  .header,
  .part-footer-fixed,
  .fav-toggle,
  .item-fav,
  .kw {
    display: none !important;
  }

  .part-item-website {
    break-inside: avoid;
  }

  body {
    background: #fff;
  }
}

/* ==== src/styles/layout.css ==== */
/* ============================================================================
   layout.css · 页头 / 英雄区 / 分类块 / 侧栏 / 页脚 / 响应式
   规格依据：docs/02 第七节（容器 1720 / 内容 1660 / 栅格断点 750·1000·1330）
   ========================================================================== */

/* ================= 页头（is-fixed 常驻吸顶） =================
   参考站实测：满宽 × 64px、背景 rgba(65,127,249,0.9)、菜单文字 rgba(255,255,255,0.8) 14px */

.header.is-fixed {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-brand-header);
}

.header-bar {
  background: transparent;
}

/* 页头容器：与主体同构（保留左栏槽），Logo 由 CSS 绝对定位进槽内 */
.header .container {
  padding-left: var(--container-pad-l-sm);
}

@media (min-width: 1660px) {
  .header .container {
    padding-left: var(--container-pad-l-lg);
  }
}

@media (min-width: 1900px) {
  .header .container {
    max-width: 1900px;
    margin-inline: 10px;
  }
}

/* .header-main 实测：flex、高 64px、左右内距 15px（≤1329）/ 30px（≥1330） */
.header-main {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0 var(--header-pad-x-sm);
}

@media (min-width: 1330px) {
  .header-main {
    padding: 0 var(--header-pad-x-lg);
  }
}

/* ---- 标志（绝对定位进左侧栏槽内；实测槽宽 177px、左内距 17/27px、高 64px） ---- */

.header .logo-a {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--wrap-left-w);
  height: var(--header-h);
  padding-left: var(--wrap-left-pad);
  color: #fff;
}

@media (min-width: 1660px) {
  .header .logo-a {
    padding-left: var(--wrap-left-pad-lg);
  }
}

.logo-img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #fff;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  min-width: 0;
}

.logo-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.logo-text span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 顶部下拉菜单 ---- */

.h-menus {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--header-h);
}

.menu-item {
  position: relative;
}

/* 顶部菜单项 .menu-a 实测：padding 8px 10px、margin 0 15px、radius 6px、14px、
   文字 rgba(255,255,255,0.8)、display:block。
   ★ 必须限定在 .h-menus 内：侧栏/快捷入口也用 .menu-a 类名，无作用域的裸选择器会串味
   （实测曾把侧栏项撑成 margin 0 15px、白字，即由此而来）。 */
/* 实测 .menu-a：高 32px（padding 8px 10px + 行高 16px）、无下拉箭头内联
   （参考站箭头是独立元素/伪元素，不参与行盒高度；我们不把 .ico-more 放进行内） */
.h-menus .menu-item > .menu-a {
  display: block;
  height: 32px;
  padding: 8px 10px;
  margin: 0 15px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.8);
}

/* 菜单里的下拉箭头改为绝对定位，避免撑高 .menu-a */
.h-menus .menu-item > .menu-a .ico-more {
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: -2px;
}

.h-menus .menu-item > .menu-a:hover,
.h-menus .menu-item > .menu-a:focus-visible,
.h-menus .menu-item.is-open > .menu-a {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* 下拉箭头：纯 CSS 三角，零图片 */
.ico-more {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--d-fast) var(--ease);
}

.menu-item.is-open .ico-more {
  transform: rotate(180deg);
}

/* 下拉面板：默认不可见且不占位；hover / focus-within / .is-open 时显示 */
.submenu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-fixed);
  min-width: 260px;
  padding: 14px 16px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  box-shadow: var(--sh-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
    visibility var(--d-fast) var(--ease);
}

.menu-item:hover > .submenu-wrap,
.menu-item:focus-within > .submenu-wrap,
.menu-item.is-open > .submenu-wrap {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.submenu-desc {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

.submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}

.submenu-item {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-tag);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}

.submenu-item strong {
  font-weight: 400;
}

.submenu-item:hover,
.submenu-item:focus-visible {
  color: var(--c-brand);
  background: var(--c-brand-soft);
}

/* ---- 页头搜索 ---- */

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: 300px;
  margin-left: auto;
}

#q {
  width: 100%;
  height: 36px;
  padding: 0 62px 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

#q::placeholder {
  color: var(--c-text-2);
}

#q:hover {
  border-color: var(--c-text-2);
}

#q:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-xs);
  transition: background-color var(--d-fast) var(--ease);
}

.search-btn:hover {
  background: var(--c-accent-hover);
}

/* 清除按钮：仅有输入时显示 */
.search-clear {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--c-line-soft);
  color: var(--c-text-3);
  font-size: 14px;
  line-height: 1;
}

.header-search.has-value .search-clear {
  display: grid;
}

.search-clear:hover {
  background: var(--c-line);
  color: var(--c-text);
}

/* ================= 英雄区 =================
   参考站真浏览器实测（docs/03b §2）：高 346px、渐变 #4a89f0→#7bb3f4、radius 10px、
   margin-bottom 30px、display:flex、宽 = 容器内宽（1210@1440 / 1660@1920）。
   .search-main 实测：宽 396px 居中、padding 48px 0 80px、text-align:center。
   标题实测：40px / 行高 47.06px / 白 / 居中 / margin-bottom 35.29px。
   搜索表单实测：396×76；输入框实测：396×46、padding 15px 20px、radius 6px、#fff 底。
   热门词实测：高 30px、居中。 */

.part-search {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: var(--hero-h);
  margin-bottom: var(--sp-7);
  border-radius: var(--hero-radius);
  background-image: linear-gradient(var(--c-hero-from) 0%, var(--c-hero-to) 100%);
  overflow: hidden;
}

.part-search .bg-l,
.part-search .bg-r {
  display: none;
}

.search-main {
  flex: 0 0 auto;
  align-self: flex-start;      /* 实测：内容高 218px，不被 346px 的父级拉伸 */
  width: var(--search-form-w);
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 0 80px;
  text-align: center;
}

.search-title {
  font-size: 40px;
  line-height: 1.176;          /* 实测 47.06/40 */
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin: 0 0 35px;
}

/* 上一版的主色下划线属自有元素，参考站没有 —— 移除，避免"相差很大" */
.search-title::after {
  content: none;
}

/* ---- 英雄区搜索表单（实测 396×76 居中） ---- */

.search-form {
  width: var(--search-form-w);
  height: 76px;
  margin: 0 auto;
}

.part-search-form {
  width: 100%;
}

/* 实测：输入框自身带白底与 6px 圆角，右侧留出按钮空间（padding-right 200px）。
   这里把白底/圆角放在 input 上（更贴近实测），按钮绝对定位在右侧预留位内。 */
.hero-search {
  position: relative;
  display: block;
  width: 100%;
  height: var(--input-h);
}

.hero-search input {
  display: block;
  width: 100%;
  height: var(--input-h);
  /* 实测 padding: 15px 200px 15px 20px —— 右侧 200px 是给「搜 索」按钮预留的空间 */
  padding: 15px 200px 15px 20px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-base);
  color: var(--c-text-2);
  text-align: left;
}

.hero-search input::placeholder {
  color: var(--c-text-2);
}

.hero-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: var(--input-h);
  padding: 0 20px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  font-size: var(--fs-base);
  color: var(--c-text-2);
  white-space: nowrap;
}

.hero-search-btn:hover {
  color: var(--c-accent);
}

.search-sub {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* 热门词（实测容器高 30px、居中、单行不换行） */
.search-keywords {
  display: block;
  height: 30px;
  line-height: 30px;
  margin-top: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.kw-label {
  display: inline-block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  vertical-align: middle;
}

.kw {
  display: inline-block;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-tag);
  background: rgba(255, 255, 255, 0.18);
  font-size: var(--fs-xs);
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
}

.kw:hover {
  background: #fff;
  color: var(--c-hero-from);
}

/* ================= 主页内容容器 ================= */

/* 参考站实测骨架：容器左侧预留左槽，左栏（侧栏）绝对定位「挖」在主内容之外。
   1440 视口：padding-left 170px；≥1660 视口：180px。 */
.part-main > .container {
  position: relative;
  padding-left: 0;
}
@media (min-width: 1000px) {
  .part-main > .container { padding-left: 170px; }
}
@media (min-width: 1660px) {
  .part-main > .container { padding-left: 180px; }
}
.wrap-left {
  display: none;
}
@media (min-width: 1000px) {
  .wrap-left {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 177px;
    box-sizing: border-box;
    padding-left: 17px;
  }
}

main > .container {
  padding-block: var(--sp-7);
}

main > .container + .container {
  padding-top: 0;
}

/* ================= 快捷入口 ================= */

.part-quick {
  margin-bottom: var(--sp-8);
}

.qa-loop {
  margin: 0 calc(-1 * var(--sp-2));
}

.qa-loop > .f-item {
  width: 25%;
  padding: var(--sp-2);
}

.qa-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.qa-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.qa-text strong {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-text span {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-item:hover .qa-text strong {
  color: var(--c-brand);
}

/* 快捷入口图标：纯 CSS 绘制的圆角方块（零图片；形状由 data-icon 区分） */
.qa-ico {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--c-brand-soft);
  border: 1px solid rgba(232, 88, 12, 0.18);
}

.qa-ico::before,
.qa-ico::after {
  content: "";
  position: absolute;
  background: var(--c-brand);
}

/* 8 种图形：以几何组合区分，避免任何图片/图标字体 */
.qa-ico::before {
  left: 11px;
  top: 11px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-brand);
  background: none;
  border-radius: 3px;
}

.qa-ico::after {
  left: 16px;
  top: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.qa-ico[data-icon="search"]::before { border-radius: 50%; width: 12px; height: 12px; }
.qa-ico[data-icon="search"]::after { left: 22px; top: 22px; width: 6px; height: 2px; border-radius: 1px; transform: rotate(45deg); }
.qa-ico[data-icon="spark"]::before { border-radius: 50%; }
.qa-ico[data-icon="spark"]::after { left: 24px; top: 9px; width: 3px; height: 3px; }
.qa-ico[data-icon="frame"]::before { width: 15px; height: 11px; border-radius: 2px; }
.qa-ico[data-icon="chart"]::before { border-radius: 2px; }
.qa-ico[data-icon="chart"]::after { left: 13px; top: 20px; width: 3px; height: 5px; border-radius: 1px; }
.qa-ico[data-icon="kanban"]::before { width: 6px; height: 14px; border-radius: 2px; left: 11px; }
.qa-ico[data-icon="kanban"]::after { left: 20px; top: 11px; width: 6px; height: 9px; border-radius: 2px; }
.qa-ico[data-icon="user"]::before { border-radius: 50%; width: 10px; height: 10px; left: 13px; top: 9px; }
.qa-ico[data-icon="user"]::after { left: 11px; top: 21px; width: 14px; height: 7px; border-radius: 7px 7px 0 0; }
.qa-ico[data-icon="flask"]::before { width: 12px; height: 12px; border-radius: 2px 2px 6px 6px; }
.qa-ico[data-icon="flask"]::after { left: 17px; top: 8px; width: 4px; height: 4px; border-radius: 1px; }
.qa-ico[data-icon="book"]::before { width: 14px; height: 13px; border-radius: 2px; }
.qa-ico[data-icon="book"]::after { left: 18px; top: 11px; width: 2px; height: 13px; border-radius: 0; }

/* ================= 区块标题（.c-title） ================= */

.b-title {
  font-size: var(--fs-block);
  line-height: 1.4;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: var(--sp-6);
}

/* 分区标题：参考站实测 .c-title 高 26px、margin-bottom 24px、display:flex、两端对齐 */
.c-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 26px;
  line-height: 26px;
  margin-bottom: var(--sp-6);
}

.c-title .l {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

/* 实测：20px / 700 / 行高 26px / 色 rgb(0,0,0) */
.c-title .l strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--c-heading);
  white-space: nowrap;
}

/* 自有识别 ②：分类编号 01–21 大字标 */
.c-index {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--stage-color);
  letter-spacing: 0.02em;
  user-select: none;
}

.c-blurb {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-title .r {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.c-count {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}

/* ================= 分类块 ================= */

/* 实测 .part-cat-block：padding 0、margin-bottom 40px、宽 = 容器内宽（1210/1660）。
   ★ 不能有 padding-left —— .c-loop 靠 margin 0 -10px 外扩成 1230，卡片才能正好 205px；
     曾因加了 16px 左内距，把 1230 压成 1214，卡片宽度随之变成 202.33（实测发现的偏差）。 */
.part-cat-block {
  position: relative;
  margin-bottom: var(--sp-8);
  padding: 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* 自有识别 ②：阶段色条 —— 放在 .c-loop 的负边距槽内（-10px），
   因此完全不占布局宽度，卡片宽度与参考站一致 */
.part-cat-block::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--stage-color);
}

/* 精选块（跨分类，无编号）用主色色条以区分 */
.part-cat-block[data-hot]::before {
  background: var(--c-brand);
}

/* ================= 卡片栅格（规格：50% → 33.33% → 25% → 16.67%） ================= */

/* 卡片栅格：参考站实测 .c-loop margin 0 -10px -20px（容器负边距），
   .p-item padding 0 10px、margin-bottom 20px。 */
.c-loop {
  margin: 0 -10px -20px;
}

.p-item {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}

.part-item-website {
  position: relative;
}

/* ================= 侧栏（位于左栏槽内） =================
   参考站实测：宽 167px（1440）/ 177px（≥1660）；侧栏项 padding 11px 20px 11px 15px、
   radius 10px；**当前项是橙底白字 #ff6000**（橙色在参考站仅用于这种小面积强调）。 */

.part-sidebar {
  width: var(--sidebar-w);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 1660px) {
  .part-sidebar {
    width: var(--wrap-left-w);   /* 实测 177px */
  }
}

/* .sn-title 实测：字号 16.38px / 700 / 左内距 17-27px / 高 42px */
.sn-title {
  display: flex;
  align-items: center;
  height: 42px;
  margin-bottom: 0;
  padding-left: var(--wrap-left-pad);
  border-bottom: 0;
  font-size: 16.38px;
  font-weight: 700;
  color: var(--c-heading);
}

@media (min-width: 1660px) {
  .sn-title {
    padding-left: var(--wrap-left-pad-lg);
  }
}

/* 侧栏改为单列竖排（参考站是竖排列表，不是网格） */
.sidebar-menu ul {
  display: block;
}

.sidebar-menu .menu-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  /* 实测 padding 11px 20px 11px 15px、radius 10px */
  padding: 11px 20px 11px 15px;
  border-radius: 10px;
  font-size: var(--fs-base);
  color: var(--c-text-3);
}

.sidebar-menu .menu-a:hover {
  background: #fff;
  color: var(--c-accent);
}

.sidebar-menu .num {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

/* 当前页分类高亮（子页由 JS 依据内联数据 pageCat 添加）
   实测：参考站用 `.menu-a.active`，橙底白字 #ff6000、radius 10px
   —— 橙色在参考站正是这种小面积强调用法。
   JS 目前写入的是 `is-active`，这里两种类名都支持，避免依赖 JS 的类名拼写。 */
.sidebar-menu .menu-a.is-active,
.sidebar-menu .menu-a.active {
  background: var(--c-accent);
  color: #fff;
  font-weight: 400;
}

.sidebar-menu .menu-a.is-active .num,
.sidebar-menu .menu-a.active .num {
  color: #fff;
}

/* ================= 收录概览 ================= */

.part-show {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-8);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}

.part-show .b-title {
  width: 100%;
  margin-bottom: var(--sp-2);
}

.show-stat,
.show-meta {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.show-stat .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-brand);
  margin-right: 2px;
}

.show-meta {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

/* ================= 面包屑 / 子页 ================= */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.breadcrumb a {
  color: var(--c-text-3);
}

.breadcrumb a:hover {
  color: var(--c-brand);
}

.breadcrumb span:last-child {
  color: var(--c-text);
}

.cat-back {
  margin-top: var(--sp-6);
}

/* ================= 页脚 ================= */

.part-footer-top {
  margin-top: 0;
  background: var(--c-brand-deep);
  color: #fff;
}

/* 实测：上区总高 88px，内部 .pt 为 flex、padding 25px 0（25+38+25=88） */
.part-footer-top .pt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-7);
  min-height: 88px;
  padding: 25px 0;
  box-sizing: border-box;
}

.pt-l {
  margin: 0;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 20px;
  color: #fff;
}

.footer-about {
  /* 参考站页脚上区仅一行 88px；本站的「关于」说明默认收起，避免把页脚撑高 */
  display: none;
}

.footer-block {
  margin-bottom: 0;
}

.footer-block h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}

.footer-matrix,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
}

.part-footer-copyright {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 25px;
  /* 可达性修正：参考站用 rgba(255,255,255,.7) on #417ff9 = 2.62:1（AA 不达标）。
     版权文字是本站自有内容，故改用纯白 + 深一档品牌蓝 = 4.85:1 ✓ AA。 */
  color: #fff;
  background: #2b6ae8;
  padding: 22px 24px;
  border-top: 0;
}

.part-footer-copyright .statement {
  font-size: var(--fs-xs);
  line-height: 25px;
  /* 纯白：与父级一致，确保 4.85:1 生效（此前这里的 0.7 半透明把对比度拉回 2.62:1） */
  color: #fff;
  text-align: center;
}

.part-footer-copyright .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.footer-link {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
}

.footer-link:hover {
  color: #fff;
}

/* ================= 回到顶部（.go_top） ================= */

.part-footer-fixed {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: var(--z-fixed);
}

/* 实测 .go_top：36×36（1440）/ 46×46（1920）、radius 6px、蓝底白字 */
.go_top {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  font-size: 18px;
  line-height: 1;
  /* 默认隐藏，滚动后由 JS 加 .is-visible */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease),
    visibility var(--d-base) var(--ease), background-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}

/* 实测 ≥1660px 时为 46×46 */
@media (min-width: 1660px) {
  .go_top {
    width: 46px;
    height: 46px;
  }
}

.go_top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.go_top:hover {
  background: var(--c-brand);
  color: #fff;
}

/* ================= 响应式：≥750px 3 列 / ≥1000px 4 列 / ≥1330px 6 列 ================= */

@media (min-width: 750px) {
  .p-item {
    width: 33.3333%;
  }

  .qa-loop > .f-item {
    width: 25%;
  }
}

@media (min-width: 1000px) {
  .p-item {
    width: 25%;
  }

  .sidebar-menu ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1330px) {
  .p-item {
    width: 16.6667%;
  }
}

/* 中等屏：侧栏 3 列；快捷入口 3 列 */
@media (max-width: 1200px) {
  .header-search {
    width: 220px;
  }
}

@media (max-width: 992px) {
  /* 中屏取消左栏槽（参考站的槽位是 ≥1000px 的桌面规格） */
  .container,
  .header .container {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }

  .header .logo-a {
    position: static;
    width: auto;
    height: auto;
    padding-left: 0;
  }

  .part-sidebar {
    width: 100%;
  }

  .part-footer-fixed .part-navigations {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-main {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    height: auto;
    min-height: var(--header-h);
    padding-block: var(--sp-2);
  }

  .h-menus {
    order: 3;
    width: 100%;
    height: auto;
    overflow-x: auto;
  }

  .header-search {
    width: 260px;
  }

  .qa-loop > .f-item {
    width: 33.3333%;
  }
}

@media (max-width: 750px) {
  /* 小屏取消左栏槽：左栏在主内容之外绝对定位，窄屏没有空间给它 */
  .container,
  .header .container {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  /* 英雄区小屏改为自适应高度（参考站的 346px 是桌面规格） */
  .part-search {
    height: auto;
    padding: 0;
  }

  .search-main {
    width: 100%;
    padding: 32px 16px 40px;
  }

  .search-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
    white-space: normal;
  }

  .search-form {
    width: 100%;
  }

  /* 单列卡片：规格在 <750px 为 2 列，仅极小屏降为 1 列（见下方 480 断点） */

  .c-title {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }

  .c-title .r {
    width: 100%;
    justify-content: space-between;
  }

  .part-cat-block {
    margin-bottom: 15px; /* 规格：移动端 15px */
    padding-left: 0;     /* 小屏同样不加左内距，保持卡片宽度公式一致 */
  }

  .part-quick,
  .part-show {
    margin-bottom: var(--sp-6);
  }

  .qa-loop > .f-item {
    width: 50%;
  }

  /* Logo 与侧栏在小屏回归正常流，不再绝对定位进左槽 */
  .header .logo-a {
    position: static;
    width: auto;
    height: auto;
    padding-left: 0;
  }

  .part-sidebar {
    width: 100%;
  }

  .sidebar-menu .menu-a {
    padding: 9px 12px;
  }

  .part-footer-fixed {
    right: 14px;
    bottom: 20px;
  }
}

@media (max-width: 480px) {
  .p-item {
    width: 100%;
  }

  .qa-loop > .f-item {
    width: 100%;
  }

  .header-search {
    width: 100%;
    order: 4;
  }
}

/* ==== src/styles/components.css ==== */
/* ============================================================================
   components.css · 卡片 / 圆形字母牌 / 角标 / 搜索 / 收藏 / 按钮 / 空态
   规格依据：docs/02 第七节（f-box padding:20px radius:10px transition:all .2s 等）
   ========================================================================== */

/* ================= 卡片盒 .f-box ================= */

.f-box {
  display: block;
  position: relative;
  background: var(--c-surface);
  border-radius: 10px;
  padding: 14px;
  transition: all 0.2s ease;
}@media (min-width: 1660px) {
.f-box { padding: 20px; }
}

@media (min-width: 1660px) {
  .f-box {
    padding: 20px;
  }
}

.f-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--c-line-soft);
}

/* 键盘聚焦时给同样的视觉反馈（hover 之外的等价提示） */
.f-box:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--c-focus-ring);
  outline: none;
}

/* 卡片内标题在 hover / focus 时变主色 */
.f-box:hover .item-title .title,
.f-box:focus-visible .item-title .title {
  color: var(--c-accent);
}

/* ================= 卡片标题行 ================= */

/* 实测 .item-title：display:block（不是 flex）、line-height 28px（≥1660 为 32px）、
   margin-bottom 12px、white-space:nowrap。图标为 inline-block，与文本同处一行。 */
.item-title {
  display: block;
  margin: 0 0 12px;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--c-text);
  /* 右侧预留收藏按钮空间：必须用 margin-right（真正缩小元素），
     因为 overflow:hidden 在 padding box 边缘裁剪，padding-right 挡不住文字。
     参考站没有收藏按钮，这是本站自有功能的必要差异。 */
  margin-right: 34px;
}

@media (min-width: 1660px) {
  .item-title {
    line-height: 32px;
  }
}

/* 实测 .title：font-weight 900（参考站用的是 900，不是 600）、16px */
.item-title .title {
  font-size: var(--fs-title);
  font-weight: 900;
  color: var(--c-text);
  vertical-align: top;
  transition: color var(--d-fast) var(--ease);
}

/* ---- 自有识别 ①：圆形站点图标 ----
   参考站实测：.item-ico 28×28（1440）/ 32×32（≥1660）、border-radius:100%、margin-right:5px，
   内部是站点图标 <img>。我们同构：真实图标用本地 /assets/icons/ 的 favicon 撑满圆形；
   抓不到时回退为 CSS 渐变字母牌（同尺寸同圆角，视觉协调）。 */

/* 真实站点图标（.item-ico > .thumb > img）：圆形裁切、撑满 */
.item-ico .thumb,
.item-ico .thumb-img {
  position: absolute;   /* 覆盖在兜底字母牌之上 */
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  background: transparent;   /* 白底会盖住底层字母牌，故改透明 */
}

/* 图标加载失败时的兜底字母牌：始终渲染在图片**之下**。
   图片 onerror 隐藏自身 → 字母牌自然透出，用户看不到"裂图"图标。 */
.item-ico .item-ico__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 100%;
  /* 与 .item-ico--fallback 同款渐变：图片失败后这就是用户看到的图标 */
  --mark-hue: calc(var(--mark-hue-base) * 1deg + var(--mark-h) * var(--mark-hue-span) * 1deg / 360);
  background: linear-gradient(
    135deg,
    hsl(var(--mark-hue) var(--mark-s-1) var(--mark-l-1)),
    hsl(var(--mark-hue) var(--mark-s-2) var(--mark-l-2))
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.item-ico .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  border-radius: 100%;
  /* favicon 多为白底小图，圆形裁切后加一圈内描边，避免与白卡融在一起看不清边界 */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.item-ico {
  position: relative;   /* 容纳底层兜底字母牌 */
  flex: 0 0 auto;
  /* 实测 display:inline-block（不是 grid）；用 line-height 居中回退字母牌 */
  display: inline-block;
  width: var(--ico-size);
  height: var(--ico-size);
  margin-right: 5px;
  border-radius: 100%;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  /* 回退字母牌需要垂直居中：inline-block 下靠 line-height 等于盒高来居中 */
  line-height: var(--ico-size);
  user-select: none;
  transition: transform var(--d-fast) var(--ease);
}

/* 回退字母牌：无真实图标时才画渐变底（真实图标卡片的 .item-ico 保持透明，
   避免在图标边缘露出渐变、也省掉无用的绘制）。
   由 id 派生的 --mark-h（0–359）**压缩映射**到 210°→380° 色相带（蓝—紫—洋红—红—橙），
   跳过对白字最不利的黄绿区；参数与实测依据见 tokens.css --mark-* 注释与 docs/03 第 3.1 节，
   全色相白字最差 4.93:1，达到正文 4.5:1。 */
.item-ico--fallback {
  --mark-hue: calc(var(--mark-hue-base) * 1deg + var(--mark-h) * var(--mark-hue-span) * 1deg / 360);
  background: linear-gradient(
    135deg,
    hsl(var(--mark-hue) var(--mark-s-1) var(--mark-l-1)),
    hsl(var(--mark-hue) var(--mark-s-2) var(--mark-l-2))
  );
  /* 白字在黄色相等亮色相上偏弱，用深色描边做边缘分离，保证字形可辨 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}


.f-box:hover .item-ico {
  transform: scale(1.06);
}

/* ================= 卡片描述 =================
   参考站实测：12px / 18px 行高 / #8f8f8f / height 36px / display:flow-root。
   参考站是**按固定高度裁剪**（flow-root + height 36px），不是 line-clamp；
   我们保留 line-clamp 作为更稳妥的跨浏览器兜底，同时对齐高度与字号。 */

.item-desc {
  font-size: 12px;
  line-height: var(--lh-desc);
  height: 36px;
  color: var(--c-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--d-fast) var(--ease);
}

.f-box:hover .item-desc,
.f-box:focus-visible .item-desc {
  color: var(--c-text-3);
}

/* ================= 角标 ================= */

/* 实测 .item-tag：display:block、margin-top 12px、高 20px */
.item-tag {
  display: block;
  margin-top: 12px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

/* 实测 .tag：底 #f1f7fc、字 #9ca7ae、12px/20px、radius 3px、padding 0 6px、margin-right 5px */
.item-tag .tag {
  display: inline-block;
  padding: 0 6px;
  margin-right: 5px;
  border-radius: var(--radius-tag);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: top;
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

/* 规格：角标 hover 变主色底白字 */
.item-tag .tag:hover {
  background: var(--c-accent);
  color: #fff;
}

/* 精选角标：橙底白字（橙色在参考站正是这种小面积强调用法；不用蓝色以免与页头/页脚抢） */
.item-tag .tag.tag-hot {
  background: var(--c-accent);
  color: #fff;
  font-weight: 400;
}

.item-tag .tag.tag-hot:hover {
  background: var(--c-accent-hover);
}

/* ================= 收藏按钮 .item-fav ================= */

.item-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-tag);
  color: #c8cdd2;
  background: var(--c-surface);
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease),
    opacity var(--d-fast) var(--ease);
  /* 默认弱化，指针进入卡片或键盘聚焦时显现，避免干扰阅读 */
  opacity: 0;
}

.f-box:hover ~ .item-fav,
.part-item-website:hover .item-fav,
.item-fav:focus-visible,
.item-fav[aria-pressed="true"] {
  opacity: 1;
}

.item-fav:hover {
  color: var(--c-brand);
  background: var(--c-brand-soft);
}

.item-fav[aria-pressed="true"],
.item-fav.is-fav {
  color: var(--c-brand);
}

.item-fav:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

/* 星形：clip-path 双星叠加实现「空星 / 实星」两态（零图片） */
.item-fav-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.item-fav-icon::before,
.item-fav-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.item-fav-icon::before {
  background: currentColor;
}

.item-fav-icon::after {
  background: var(--c-surface);
  transform: scale(0.62);
  transition: opacity var(--d-fast) var(--ease);
}

.item-fav[aria-pressed="true"] .item-fav-icon::after,
.item-fav.is-fav .item-fav-icon::after {
  opacity: 0;
}

/* 触屏无 hover：收藏按钮需常显 */
@media (hover: none) {
  .item-fav {
    opacity: 1;
  }
}

/* ================= 主按钮 / 「更多」 ================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}

/* 「更多」实测：白底 pill、radius 26px、padding 0 20px 0 10px、margin-left 10px、
   12px / 行高 26px / #8f8f8f、text-align:center、无边框、右侧带箭头 */
.btn.a-more {
  display: block;
  height: 26px;
  padding: 0 20px 0 10px;
  margin-left: 10px;
  border: 0;
  border-radius: 26px;
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 400;   /* 实测 400；.btn 基类未设，避免继承到 700 */
  line-height: 26px;
  color: var(--c-text-2);
  text-align: center;
  white-space: nowrap;
}

.btn.a-more .ico-more {
  border-top-color: currentColor;
}

.btn.a-more:hover {
  background: var(--c-accent);
  color: #fff;
}

.btn.a-more:hover .ico-more {
  border-top-color: currentColor;
}

/* ================= 热门词 .kw ================= */

.kw {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease);
}

.kw:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-brand-soft);
}

/* ================= 只看收藏 ================= */

.fav-toggle {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease);
}

.fav-toggle:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-brand-soft);
}

.fav-toggle[aria-pressed="true"] {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: #fff;
}

.fav-toggle[aria-pressed="true"]:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: #fff;
}

/* ================= 空态 ================= */

.c-empty {
  width: 100%;
  padding: var(--sp-5) var(--sp-4);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

/* 筛选无结果：由 JS 注入到 .c-loop 内 */
.c-empty-filter {
  width: 100%;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ================= ≥1660px 的尺寸细化（**实测**：图标 32px、标题行高 32px、卡片 padding 20px） ================= */

@media (min-width: 1660px) {
  :root {
    --ico-size: 32px;
  }

  .item-title {
    line-height: var(--lh-title-lg);
  }

  .item-ico {
    font-size: 13px;
  }
}

/* ==== src/styles/mobile.css ==== */
/* ============================================================================
   mobile.css · 移动端专项（**在最后加载，可覆盖前面的桌面规则**）
   依据：真浏览器实测参考站 375 / 768 视口的计算样式（见 docs/04c-mobile-spec.md）

   实测参考站移动端（≤749.5px）关键值：
     页头      fixed，高 **44px**；背景 rgba(65,127,249,.9)
     顶部菜单  **display:none**（收进移动菜单）
     移动菜单条 全宽 × 28px
     英雄区    高 **236px**；.search-main padding 30px 10px；标题 **24px**
     搜索框    全宽 × 40px
     卡片      **2 列**（.p-item 172×78，padding 0 9px）；**.f-box padding 0**
     图标      28×28
     分区标题  **16px**
     侧栏      **display:none**
     页脚上区  **display:none**（仅保留版权区）
   ========================================================================== */

/* ===================== 移动端：≤749.5px ===================== */
@media (max-width: 999.5px) {

  /* ---------- 页头：固定 44px，只留 Logo + 菜单按钮 + 搜索按钮 ---------- */
  .header,
  .header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--c-brand-header);
    box-shadow: none;
  }

  .header-bar {
    height: 44px;
    background: transparent;
  }

  .header-main {
    min-height: 44px;
    padding-block: 0;
    gap: 0;
    flex-wrap: nowrap;
  }

  /* Logo：绝对定位在左侧，宽 60px（实测 60x44，padding-left 20px） */
  .logo-a {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 44px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: 0;
  }
  .logo-img { width: 26px; height: 26px; }
  /* 移动端只留字标首字，避免挤压 */
  .logo-text { display: none; }

  /* 桌面横向菜单在移动端收起（实测 display:none） */
  .h-menus { display: none !important; }

  /* 页头搜索框：移动端收成一个图标按钮，点击后展开（避免占满 44px 高度） */
  .header-search {
    display: none;
    flex: 1 1 auto;
    height: 32px;
    align-self: center;
    margin-left: 0;
    margin-right: 8px;
  }
  body.is-search-open .header-search { display: flex; }

  /* 移动端展开后的搜索框：放宽宽度限制，防止被 sticky 页头挤出视口 */
  body.is-search-open .header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  /* 移动端：给搜索框留足空间，防止与 m-search-btn 挤在一起 */
  .header-main {
    flex-wrap: wrap;
  }

  /* 移动端：logo 与搜索区域之间保留适当间距 */
  .header-main .logo-a {
    flex: 0 0 auto;
    margin-right: 8px;
  }

  /* 只看收藏：移动端收成窄标签 */
  .fav-toggle {
    height: 32px;
    margin-left: auto;
    margin-right: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  /* 移动端菜单条（由 build 输出 .mobile-bar） */
  .mobile-bar {
    display: flex;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: 28px;
    z-index: calc(var(--z-header) - 1);
    background: var(--c-brand);
    padding: 0 10px;
    align-items: center;
  }

  /* ---------- 主体：给固定页头 + 菜单条留出高度 ---------- */
  main#main { padding-top: 72px; }

  .container,
  .header .container,
  .part-main > .container {
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
  }

  /* 左栏槽在移动端不适用（侧栏整体隐藏） */
  .wrap-left { display: none !important; }
  .part-sidebar { display: none !important; }

  /* ---------- 英雄区：高 236px，标题 24px，搜索框 40px ---------- */
  .part-search {
    height: 236px;
    flex-direction: column;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .part-search .bg-l,
  .part-search .bg-r { display: none !important; }

  .search-main {
    padding: 30px 10px;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .search-title {
    font-size: 24px;
    line-height: 1.17;
    margin-bottom: 20px;
    white-space: normal;
  }

  .search-form,
  .hero-search { width: 100%; }

  .hero-search input,
  .search-form input {
    height: 40px;
    padding: 12px 16px;
    font-size: 14px;
  }
  .hero-search-btn { padding: 0 16px; font-size: 14px; }

  /* 热门词：移动端**必须不溢出**（实测参考站用绝对定位单行收在 44x16 内）
     这里改为可换行 + 隐藏溢出，兼顾可点性与不越界。 */
  .search-keywords {
    margin-top: 12px;
    min-height: 16px;
  }
  .part-search-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    max-height: 44px;   /* 最多两行 */
  }
  .part-search-keywords .kw {
    height: 18px;
    line-height: 18px;
    padding: 0 8px;
    font-size: 12px;
  }

  /* 快捷入口：移动端 2 列 */
  .part-quick .qa-loop > .f-item { width: 50%; }

  /* ---------- 卡片：2 列，f-box padding 0（实测） ---------- */
  .p-item {
    width: 50%;
    padding: 0 9px;
    margin-bottom: 16px;
  }
  .p-item .f-box,
  .f-box {
    padding: 0;
    border-radius: 8px;
  }
  /* 移动端卡片内部：图标 + 标题一行，描述两行 */
  .item-ico { width: 28px; height: 28px; }
  .item-title {
    display: flex;              /* 让 gap 生效，图标与标题同行 */
    align-items: center;
    gap: 8px;                   /* 图标与标题之间留足间距 */
    line-height: 28px;
    margin-bottom: 10px;        /* 实测参考站移动端 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    /* 长标题显示省略号，不硬截断 */
    margin-right: 38px;         /* 给移动端收藏按钮（32px + 边距）留出足够空间 */
  }
  .item-title .title,
  .item-title strong { font-size: 14px; }
  .item-desc {
    font-size: 12px;
    line-height: 20px;    /* 实测参考站移动端：行高 20 / 高 40 */
    height: 40px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  /* 移动端卡片更紧凑，悬停上浮去掉（触屏无 hover） */
  .f-box:hover,
  .f-box:focus-visible { transform: none; }

  /* 收藏按钮：触屏上放大到可点尺寸（参考站桌面为 30px，移动端需 ≥32px 且不遮挡） */
  .item-fav { width: 32px; height: 32px; top: 2px; right: 2px; }

  /* ---------- 分区标题：20px → 16px（实测） ---------- */
  .part-cat-block { margin-bottom: 24px; }
  .c-title {
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .c-title .l { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .c-title .l strong,
  .c-title strong { font-size: 16px; }
  .c-title .c-index { font-size: 14px; }
  .c-title .c-blurb { display: none; }        /* 窄屏隐藏副标题，省空间 */
  .c-title .c-count { font-size: 12px; }
  .a-more { height: 26px; line-height: 26px; padding: 0 10px; font-size: 12px; }

  /* ---------- 页脚：上区隐藏，只保留版权区（实测 display:none） ---------- */
  .part-footer-top { display: none; }
  .part-footer-copyright {
    padding: 20px 14px;
    font-size: 12px;
    line-height: 1.9;
  }
  .part-footer-copyright .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
  }

  /* 回到顶部：避开刘海与手势区 */
  .part-footer-fixed { right: 12px; bottom: 16px; }
  .go_top { width: 40px; height: 40px; }
}

/* ===================== 极小屏：≤360px 仍保持 2 列（实测参考站） ===================== */
@media (max-width: 360px) {
  /* 实测参考站 360 视口依然是 2 列（.p-item 164px）；只把字号和内距再收一点 */
  .p-item { padding: 0 7px; margin-bottom: 14px; }
  .item-title .title,
  .item-title strong { font-size: 13px; }
  .search-title { font-size: 20px; }
  .part-search-keywords .kw { font-size: 11px; padding: 0 6px; }
  .mobile-bar__item { font-size: 11px; padding: 0 7px; }
}

/* ===================== ≥1000px：恢复桌面形态 ===================== */
@media (min-width: 1000px) {
  /* ≥1000px 起恢复桌面形态：侧栏可见、桌面菜单可见、卡片 4 列（由 layout.css 处理） */
  .wrap-left { display: block !important; }
  .part-sidebar { display: block !important; }
  .mobile-bar { display: none !important; }
  .m-search-btn { display: none !important; }
  .header-search { display: flex !important; }
  .part-footer-top { display: block; }
}

/* ===================== 移动端专用元素（桌面隐藏） ===================== */
.mobile-bar { display: none; }
.m-search-btn { display: none; }

@media (max-width: 999.5px) {
  /* 搜索展开按钮：44×44 触屏友好（实测参考站页头 44px 高） */
  .m-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
  }
  .m-search-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }

  /* 移动菜单条：全宽 × 44px，横向滚动不换行（保证不溢出，触摸友好） */
  .mobile-bar {
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: 44px;
    z-index: calc(var(--z-header) - 1);
    /* 加深一档：白字在 #417ff9 上仅 3.41:1，在 12px 小字下不可达；
       #2b6ae8 上白字 4.85:1 达标，观感仍是品牌蓝。 */
    background: #2b6ae8;
    box-shadow: none;
    color: #fff;
  }
  .mobile-bar__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-bar__inner::-webkit-scrollbar { display: none; }
  .mobile-bar__item {
    flex: 0 0 auto;
    /* 触摸目标：高度 44px，满足 WCAG 触摸目标最小尺寸 */
    height: 44px;
    line-height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    font-size: 13px;
    /* 纯白字 + 无半透明胶囊底：项链底会把对比度拉到 2.8:1 不达标 */
    color: #fff;
    background: transparent;
    text-decoration: none;
  }
  .mobile-bar__item:active { background: rgba(255, 255, 255, 0.18); }
  .mobile-bar__item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }
}

/* ===================== 平板：750–999.5px（实测参考站 768） ===================== */
@media (min-width: 750px) and (max-width: 999.5px) {
  /* 768 实测：卡片 3 列（252×116）、英雄区恢复 346px 高、标题 40px、
     侧栏仍隐藏、桌面菜单仍隐藏（参考站到 1000px 才切桌面） */
  .p-item { width: 33.3333%; padding: 0 9px; margin-bottom: 18px; }
  .part-search { height: 346px; }
  .search-main { padding: 48px 0 80px; }
  .search-title { font-size: 40px; line-height: 1.17; margin-bottom: 35px; }
  .search-form, .hero-search { width: 396px; margin: 0 auto; }
  .hero-search input, .search-form input { height: 46px; padding: 15px 20px; }
  .part-quick .qa-loop > .f-item { width: 25%; }
  .itme-ico, .item-ico { width: 28px; height: 28px; }
  /* 用与手机段相同的特异性覆盖，否则手机的 .p-item .f-box{padding:0} 会胜出 */
  .p-item .f-box,
  .f-box { padding: 20px; border-radius: 10px; }
  .item-title { line-height: 28px; margin-bottom: 12px; }
  /* 750–999.5 已不属移动端排版：把 desc 还原为桌面值（36px / 行高 18px），
     否则会继承上面移动端的 40px，导致卡片高度偏小（80 vs 参考站 116）。
     116 = f-box padding 20×2 + 标题 28 + mb 12 + desc 36 */
  .item-desc {
    line-height: 18px;
    height: 36px;
    font-size: 12px;
  }
}