/* ============================================================
   AOYII · 统一组件样式（aoyii-ui.css）
   来源：aoyii-homepage.html 内联样式逐字沉淀（唯一权威来源）
   用法：在页面 <head> 中于「内联 <style> 之前」引入：
     <link rel="stylesheet" href="assets/fonts/fonts.css">
     <link rel="stylesheet" href="assets/components/aoyii-ui.css">
   内联 <style> 只保留页面专属样式（引入在后，可覆盖组件默认值）。
   模块：tokens/reset · 顶部导航栏 · 面包屑 .crumbs · 页头 .page-head · 分页 .pagination ·
        语言切换 · Hero · 区块标题 · 工具卡片/网格 · 相关区 .related-* 与 .side-news ·
        分类云 · CTA · 页脚 · 焦点环/无障碍 · 响应式
   公用模块样式只此一份：页面 <style> 内不得重复定义
   （否则会覆盖组件默认值，破坏统一）。
   ============================================================ */
/* ===== AOYII Design Tokens ===== */
:root {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --fg: #111111;
  --muted: #6b7280;
  --border: #d9dee7;
  --accent: #1677ff;
  --accent-secondary: #7c5cf5;
  --radius: 8px;
  --grid: 8px;
  --font: "Inter", "Source Han Sans CN", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --container: 1200px;
  --brand-nav-bg: #1677ff;
  --brand-nav-fg: #ffffff;
  --brand-nav-fg-soft: rgba(255,255,255,0.82);
  --brand-nav-active-bg: rgba(255,255,255,0.16);
  --brand-nav-link-bg-hover: rgba(255,255,255,0.12);
  --brand-nav-control-bg: rgba(255,255,255,0.16);
  --brand-nav-control-border: rgba(255,255,255,0.32);
  --brand-nav-control-bg-hover: rgba(255,255,255,0.26);
  --brand-nav-control-border-hover: rgba(255,255,255,0.5);
  --brand-nav-submit-bg: #ffffff;            /* 提交AI 已改并入菜单（按钮无消费方）；token 保留，与各页内联兜底副本保持一致 */
  --brand-nav-submit-bg-hover: #e6f4ff;
  --brand-nav-divider: rgba(255,255,255,0.16);
  --brand-color-primary: #1677ff;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input { font: inherit; }

/* ===== Sticky Nav ===== */
/* 提级说明：线上旧主题以 .nav-wrap .nav-links a（0,2,1）定义链接色，原型低一档会输——
   生产集成时本段选择器统一加 .nav-wrap 前缀，移动端下拉段同步提级（否则白面板白字） */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-nav-bg);
  border-bottom: 1px solid var(--brand-nav-divider);
  height: 56px;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  color: var(--brand-nav-fg);
}
.nav-logo img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.nav-wrap .nav-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-wrap .nav-links::-webkit-scrollbar { display: none; }
.nav-wrap .nav-links a {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-nav-fg-soft);
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-wrap .nav-links a:hover {
  color: var(--brand-nav-fg);
  background: var(--brand-nav-link-bg-hover);
}
.nav-wrap .nav-links a.active {
  color: var(--brand-nav-fg);
  background: var(--brand-nav-active-bg);
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--brand-nav-fg);
  background: var(--brand-nav-control-bg);
  border: 1px solid var(--brand-nav-control-border);
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-search-btn:hover {
  color: var(--brand-nav-fg);
  background: var(--brand-nav-control-bg-hover);
  border-color: var(--brand-nav-control-border-hover);
}
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--brand-nav-fg);
  background: var(--brand-nav-control-bg);
  border: 1px solid var(--brand-nav-control-border);
  border-radius: var(--radius);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.nav-menu-btn::after { content: ""; position: absolute; inset: -4px; }
.nav-menu-btn:hover {
  background: var(--brand-nav-control-bg-hover);
  border-color: var(--brand-nav-control-border-hover);
}
.nav-menu-btn .icon-close { display: none; }
.nav-wrap.menu-open .nav-menu-btn .icon-open { display: none; }
.nav-wrap.menu-open .nav-menu-btn .icon-close { display: block; }

/* ===== Breadcrumbs（面包屑：全站统一，页内不再重复定义） ===== */
.crumbs { max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted); }
.crumbs a { transition: color 0.15s; }
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current="page"] { color: var(--fg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px; }
/* ===== Page Head（页头渐变带：全站公用，页面仅保留标题/简介内容，不再重复定义） =====
   宽度统一 = 全站内容列：max-width 取 container-48，卡片左右边缘与 .crumbs/.section/工具卡
   内容区边界对齐；三档自动适配：>768 桌面 / ≤768 平板（紧凑内边距+16px 页边距） / ≤480 手机（标题降级）。
   高度一致：简介列 840px 保证桌面端各页单行等高；≤1024 预留两行等高；text-wrap: balance 换行均匀无孤行。 */
.page-head { max-width: calc(var(--container) - 48px);
  width: calc(100% - 48px);
  margin: 24px auto 0;
  padding: 28px 32px 26px;
  background: linear-gradient(135deg, rgba(22,119,255,0.08) 0%, rgba(124,92,245,0.08) 100%);
  border: 1px solid var(--border);
  border-radius: 12px; }
.page-head h1 { font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25; }
.page-head h1 .grad { background: linear-gradient(92deg, var(--accent) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent); }
.page-head p { margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
  max-width: 840px;   /* 实测最长简介 792px（all-categories EN）：840 保证桌面端全站单行 → 页头等高、无孤行 */
  text-wrap: balance; }
/* ===== Page navigation（分页公用：首页/上一页/页码/下一页/尾页；由 AoyiiUI.pageNav 渲染，页面不再自带样式） ===== */
.pagination { display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 0 8px; }
.page-btn { position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, color 0.15s; }
.page-btn svg { display: block; }
.page-btn::after { content: "";
  position: absolute;
  inset: -4px; }
.page-btn:hover:not(:disabled):not(.is-disabled):not(.current):not([aria-current="page"]) { color: var(--fg);
  border-color: #c0c5cf; }
.page-btn.current, .page-btn[aria-current="page"] { color: var(--accent);
  border-color: rgba(22,119,255,0.35);
  background: rgba(22,119,255,0.08);
  font-weight: 600; }
.page-btn:disabled, .page-btn.is-disabled { color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
  opacity: 0.55;
  cursor: not-allowed; }
.page-btn:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.page-dots { display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  padding: 0 2px;
  user-select: none; }

/* ===== Hero ===== */
.hero {
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding: 56px 24px 44px;
  text-align: center;
  background: var(--accent);
  border: none;
  border-radius: 0;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 20px;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  color: #fff;
}
.hero h1 span { color: #3cdcf4; }
.hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.88);
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.5;
  text-wrap: balance;
}
.hero-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
}
.hero-search input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 20px;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 15px;
  color: var(--fg);
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(22,119,255,0.12);
}
.hero-search button {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  transition: background 0.15s;
}
.hero-search button:hover { background: #0958d9; }

/* ===== Hero Hot Search Words（搜索栏下方热门搜索词行） ===== */
.hero-hot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}
.hero-hot button {
  font: inherit;
  color: rgba(255,255,255,0.82);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.hero-hot button::after { content: ""; position: absolute; inset: -4px; }
.hero-hot button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* 生产站热词为 <a class="hero-hot-word">（SEO 与 /search/ 行为保留），样式与原型 button 对齐 */
.hero-hot a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  position: relative;
  transition: color 0.15s;
}
.hero-hot a::after { content: ""; position: absolute; inset: -4px; }
.hero-hot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Section ===== */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 24px 16px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-head h2 .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}
.section-head h2 .icon svg { width: 100%; height: 100%; display: block; }
.section-more {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s;
}
.section-more:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Tool Grid ===== */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* ===== Tool Card ===== */
.tool-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.tool-card:hover {
  background: #fff;
  border-color: #c0c5cf;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tool-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tool-body { min-width: 0; }
.tool-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.tool-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ===== Related sections（详情页底部相关区/相关卡 + 侧栏相关列表；页面不再重复定义） ===== */
.related-section { max-width: var(--container);
  margin: 8px auto 0;
  padding: 0 24px 8px; }
.related-section h2 { font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px; }
/* 标题行改用统一 .section-head 后，间距交给容器，避免双倍下边距 */
.related-section .section-head h2 { margin-bottom: 0; }
.related-section h2 .icon { width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent); }
.related-section h2 .icon svg { width: 100%; height: 100%; display: block; }
.related-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; }
.related-card { display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s; }
.related-card:hover { border-color: #c0c5cf;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.related-icon { flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-secondary);
  background: rgba(124,92,245,0.10);
  border-radius: var(--radius); }
.related-name { min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.related-by { min-width: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.related-arrow { flex-shrink: 0;
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color 0.15s, transform 0.15s; }
.related-card:hover .related-arrow { color: var(--fg);
  transform: translateX(2px); }
.related-arrow svg { width: 100%; height: 100%; display: block; }
.side-news { display: grid;
  gap: 2px; }
.side-news a { display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s; }
.side-news a:last-child { border-bottom: none; }
.side-news .sn-title { font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }
.side-news a:hover .sn-title { color: var(--accent); }
.side-news .sn-date { margin-top: 2px;
  font-size: 12px;
  color: var(--muted); }
/* ===== 分享卡（AoyiiUI.shareCard 渲染；detail 侧栏 Share 版块公用） ===== */
.side-share { display: flex;
  gap: 8px; }
.side-share .share-btn { flex: 1; }
.share-btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color 0.15s, border-color 0.15s; }
.share-btn:hover { color: var(--fg);
  border-color: #c0c5cf; }
/* ===== CTA Banner ===== */
.cta-banner {
  margin: 32px auto 0;
  max-width: var(--container);
  padding: 0 24px;
}
.cta-inner {
  padding: 32px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-inner h2 {
  font-size: 20px;
  font-weight: 700;
}
.cta-inner p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 4px;
}
.cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius);
  transition: background 0.15s;
}
.cta-btn:hover { background: #0958d9; }

/* ===== Footer ===== */
.footer {
  margin-top: 40px;
  padding: 24px;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  /* 与 .section 内容边界对齐（section=1200 含 24px 内边距，内容 1152） */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: 16px;
}
.footer-links a { transition: color 0.15s; }
.footer-links a:hover { color: var(--fg); }
@media (max-width: 480px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-inner > span { line-height: 1.5; }
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}

/* ===== Category Cloud ===== */
.cat-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cloud-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cloud-tag:hover {
  color: var(--fg);
  border-color: #c0c5cf;
  background: var(--surface);
}
.cloud-group + .cloud-group { margin-top: 16px; }
.cloud-group-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 10px;
}

/* ===== Language Switch ===== */
.lang-switch { position: relative; }
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-nav-fg);
  background: var(--brand-nav-control-bg);
  border: 1px solid var(--brand-nav-control-border);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}
.lang-trigger:hover {
  background: var(--brand-nav-control-bg-hover);
  border-color: var(--brand-nav-control-border-hover);
}
.lang-trigger[aria-expanded="true"] {
  background: var(--brand-nav-control-bg-hover);
  border-color: var(--brand-nav-control-border-hover);
}
.lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
.lang-chevron { transition: transform 0.15s; }
.lang-globe { flex-shrink: 0; }
.signin-btn { display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s; }
.signin-btn:hover { background: rgba(255,255,255,0.12);
  border-color: #fff; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,17,17,0.10);
  z-index: 110;
}
.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.lang-item:hover {
  color: var(--fg);
  background: var(--surface);
}
.lang-item.current {
  color: var(--fg);
}
.lang-item.current svg { color: var(--fg); }
.lang-item .lang-check { display: none; }
.lang-item.current .lang-check { display: block; }

/* ===== Focus Visible ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-wrap a:focus-visible,
.nav-wrap button:focus-visible {
  outline-color: var(--brand-nav-fg);
}
.tool-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ===== Screen-reader only / Skip link ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 200;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--bg);
  background: var(--fg);
  border-radius: var(--radius);
  transition: top 0.15s;
}
.skip-link:focus-visible { top: 12px; }

/* ===== Touch hit-area expansion（视觉不变，热区扩至 ≥44px） ===== */
.nav-search-btn, .lang-trigger, .cloud-tag, .section-more { position: relative; }
.nav-search-btn::after, .lang-trigger::after, .cloud-tag::after, .section-more::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.scroll-top::after { content: ""; position: absolute; inset: -2px; }

/* ===== Search empty state ===== */
.search-empty {
  text-align: center;
  padding: 48px 0 56px;
  color: var(--muted);
}
.search-empty svg { display: block; margin: 0 auto 12px; color: var(--border); }
.search-empty p { margin-bottom: 16px; }
.search-empty-reset {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}
.search-empty-reset:hover { border-color: #c0c5cf; background: var(--surface); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ===== Responsive ===== */
/* 中宽屏（1025-1200）：8 菜单项横排尚未折叠，先紧凑化间距，保证完整展示且不贴边 */
@media (max-width: 1200px) {
  .nav-inner { gap: 24px; }
  .nav-links a { padding: 6px 10px; }
  .nav-right { gap: 10px; }
}
/* 平板及以下（≤1024）：横排放不下 8 项，与移动端一致折叠为汉堡 + 下拉面板 */
@media (max-width: 1024px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  /* 平板档简介预留两行：窄列下各行简介行数不一，预留后页头仍全站等高（配 balance 均匀换行） */
  .page-head p { min-height: 3.3em; }
  .nav-menu-btn { display: inline-flex; }
  .nav-wrap .nav-links {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(17,17,17,0.08);
    overflow: visible;
    z-index: 99;
  }
  .nav-wrap.menu-open .nav-links { display: flex; }
  .nav-wrap .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 15px;
    color: var(--muted);
  }
  .nav-wrap .nav-links a:hover { color: var(--fg); background: var(--surface); }
  .nav-wrap .nav-links a.active { color: var(--brand-color-primary); background: rgba(22,119,255,0.06); }
}
@media (max-width: 768px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 14px; }
  .cta-inner { flex-direction: column; text-align: center; }
  .crumbs { padding-left: 16px; padding-right: 16px; }
  .page-head { margin-top: 16px; padding: 20px 20px 18px; width: calc(100% - 32px); }
  .page-head h1 { font-size: 26px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tool-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
  .page-head { padding: 18px 16px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 14px; min-height: 4.95em; } /* 手机列窄：按最长简介 3 行预留（实测 320px 视口亦不超 3 行），页头等高 */
  .nav-inner { gap: 16px; padding: 0 16px; }
  .nav-links a { padding: 6px 10px; }
  .nav-logo-text { display: none; }
  .related-grid { grid-template-columns: 1fr; }
  .related-section { padding-left: 16px; padding-right: 16px; }
}

/* ===== Scroll to top ===== */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.scroll-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.scroll-top:hover { background: #0958d9; }

/* ============================================================
   分类详情页 v2（2026-10-03，对齐 MCP category-detail.html 原型）
   居中 Hero（数字高亮 + 渐变词）+ 筛选页签 + 单列工具行（星级/收藏）
   + 右侧 sticky 侧栏（TOP10 / 热门资讯 / 精选 Skills）+ 计数分页
   ============================================================ */
.cat-hero { text-align: center; margin-top: 28px; }
.cat-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.3; color: var(--fg); text-wrap: balance; }
.cat-hero h1 .num { color: var(--accent); font-variant-numeric: tabular-nums; }
.cat-hero h1 .grad { background: linear-gradient(92deg, var(--accent) 0%, var(--accent-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); }
.cat-hero-sub { margin: 10px auto 0; max-width: 860px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* 筛选页签（下划线样式）+ 右侧站内搜索 */
.cat-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-top: 24px; }
.cf-tab { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.cf-tab:hover { color: var(--fg); }
.cf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cat-filters .channel-search { margin-left: auto; width: 300px; max-width: 100%; margin-top: 0; padding: 6px 0; }
.cat-filters .channel-search input[type="search"] { height: 36px; }
.cat-filters .channel-search button { width: 36px; height: 36px; }

/* 两栏（复用主题 .cat-layout 1fr+300px） */
.taxonomy-wrap .cat-layout { margin-top: 20px; padding-bottom: 40px; }

/* 左列：单列工具行 */
.cat-list { display: flex; flex-direction: column; min-width: 0; }
.cat-list .tr + .tr { margin-top: 10px; }
.cat-empty { padding: 56px 24px; text-align: center; font-size: 14px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.tr { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.tr:hover { background: var(--bg); border-color: #c0c5cf; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.tr:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--muted); }
.tr-icon img { width: 100%; height: 100%; object-fit: contain; }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; transition: color 0.15s; }
.tr-name::after { content: ""; position: absolute; inset: 0; }
.tr-name:hover { color: var(--accent); }
.tr-desc { font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-side { flex-shrink: 0; display: flex; align-items: center; gap: 16px; }

/* 星级（editor_score 10 分制 → 5 星展示） */
.tr-rating { display: inline-flex; align-items: center; gap: 6px; }
.stars { position: relative; display: inline-flex; flex-shrink: 0; }
.stars .s-bg, .stars .s-fg { display: flex; gap: 2px; }
.stars svg { flex-shrink: 0; width: 14px; height: 14px; display: block; }
.stars .s-bg { color: var(--border); }
.stars .s-fg { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; color: #faad14; }
.star-val { font-size: 13px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

/* 收藏按钮（仅本地保存态） */
.tr-fav { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.tr-fav::after { content: ""; position: absolute; inset: -3px; }
.tr-fav svg { width: 15px; height: 15px; display: block; }
.tr-fav:hover { color: var(--fg); border-color: #c0c5cf; }
.tr-fav.is-on { color: var(--accent); border-color: rgba(22,119,255,0.35); background: rgba(22,119,255,0.08); }
.tr-fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 分页：左计数 + 右翻页 */
.cat-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 0 4px; }
.cat-pager-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-pager-nav { margin-left: auto; }
.cat-pager-nav .pagination { justify-content: flex-end; padding: 0; margin: 0; }
.cat-pager-nav button.page-numbers { font: inherit; cursor: pointer; background: none; }

/* 右侧：TOP10 / 热门资讯 / 精选 Skills */
.cat-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
.cat-side .side-card { padding: 16px; }
.cat-side .side-card--flush { padding: 0; overflow: hidden; }
.cat-side .side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cat-side .side-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--fg); }
.cat-side .side-card--flush .side-head { padding: 12px 14px; border-bottom: 1px solid var(--border); margin: 0; background: var(--bg); }
.cat-side .side-more { font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.cat-side .side-more:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cat-side .side-list { list-style: none; margin: 0; padding: 0; }
.cat-side .side-row { display: block; padding: 9px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.cat-side .side-row:first-child { border-top: 0; }
.cat-side .news-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--fg); }
.cat-side .side-row:hover .news-title { color: var(--accent); }
.cat-side .news-date { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.cat-side .sp-name { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.cat-side .sp-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-side .side-row:hover .sp-name { color: var(--accent); }

/* 响应式 */
@media (max-width: 900px) {
  .cat-side { position: static; }
}
@media (max-width: 768px) {
  .cat-hero h1 { font-size: 26px; }
  .cat-filters .channel-search { width: 100%; order: 10; }
}
@media (max-width: 560px) {
  .tr { flex-wrap: wrap; row-gap: 12px; }
  .tr-main { flex-basis: calc(100% - 66px); }
  .tr-side { flex-basis: 100%; justify-content: space-between; }
}

/* ============================================================
   工具详情页 v2（2026-10-04，对齐 MCP tool-detail.html 原型）
   头部 v2（星级/收藏/分类标签行/更新行 + 右侧 1/3 官网截图）
   + 结构化正文（简介/主要功能/特色优势/适用人群/常见问题）
   主题层已有 .tool-head 壳与 .detail-layout 双栏，这里做 v2 增量。
   ============================================================ */
/* 卡片边缘对齐内容轨道（同原型 .page-head：盒宽 container-48，左缘 144） */
.tool-head { max-width: calc(var(--container) - 48px); width: calc(100% - 48px); align-items: stretch; gap: 24px; }
.tool-head-main { flex: 1 1 0; }
.tool-head-main h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; }
.tool-head-top { display: flex; align-items: flex-start; gap: 14px; }
.tool-head-id { min-width: 0; flex: 1; }
.tool-stars { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; color: var(--accent-secondary); }
.tool-stars .stars svg { width: 15px; height: 15px; }
.tool-stars-score { margin-left: 6px; font-size: 14px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.tool-head-actions { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.fav-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--bg); border: 1px solid rgba(22,119,255,0.4); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.fav-btn svg { width: 18px; height: 18px; }
.fav-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.fav-btn.is-on { color: #fff; background: var(--accent-secondary); border-color: var(--accent-secondary); }
.head-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.head-label { flex-shrink: 0; min-width: 64px; font-size: 13px; font-weight: 700; color: var(--fg); }
.head-value { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.head-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-head-shot { flex: 0 0 33%; align-self: stretch; margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 8px 24px rgba(17,17,17,0.07); }
.tool-head-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* 结构化正文 */
.detail-section h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.detail-section h2 .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); display: inline-flex; }
.detail-section h2 .icon svg { width: 100%; height: 100%; display: block; }
.detail-lead { font-size: 16px; line-height: 1.7; color: var(--fg); text-wrap: pretty; }
.detail-lead p { margin: 0 0 12px; }
.detail-lead p:last-child { margin-bottom: 0; }
.feature-list { display: grid; grid-template-columns: 1fr; gap: 12px 24px; }
.fl-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--fg); }
.fl-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); display: inline-flex; }
.fl-icon svg { width: 100%; height: 100%; }
.fl-item strong { font-weight: 600; }
.hl-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hl-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--fg); }
.hl-item .hl-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); display: inline-flex; }
.hl-item .hl-check svg { width: 100%; height: 100%; display: block; }
.hl-item strong { font-weight: 600; }
.who-card { padding: 18px 20px; background: linear-gradient(135deg, rgba(22,119,255,0.05) 0%, rgba(124,92,245,0.05) 100%); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; line-height: 1.7; color: var(--fg); text-wrap: pretty; }
.who-card p { margin: 0 0 8px; }
.who-card p:last-child { margin-bottom: 0; }
.who-card ul { margin: 8px 0 0; padding-left: 18px; }
.who-card li { margin: 4px 0; }
.faq-list p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; }
.faq-list p:last-child { margin-bottom: 0; }
.faq-list .faq-q { display: block; font-weight: 700; color: var(--fg); }
.faq-list .faq-a { display: block; color: var(--muted); }

/* 响应式 */
@media (max-width: 1024px) {
  .detail-layout { grid-template-columns: 1fr; gap: 32px; }
  .detail-side { position: static; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
@media (max-width: 768px) {
  .tool-head { flex-direction: column; }
  .tool-head-actions { width: 100%; margin-left: 0; }
  .tool-head-actions .fav-btn { flex: 1; }
  .tool-head-actions .visit-btn { flex: 1; justify-content: center; }
  .tool-head-shot { flex: auto; max-height: 300px; }
  .tool-head-top { flex-wrap: wrap; }
  .head-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .head-label { min-width: 0; }
  .detail-side { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tool-head-main h1 { font-size: 24px; }
}

/* ============================================================
   工具详情 v2.1（2026-10-04 第二轮，完整对齐 tool-detail.html）
   Follow 彩色圆标 · 侧栏大写卡题 · 分享 5 图标 · Reviews ·
   Related Tutorials · Related Tools 紧凑网格
   ============================================================ */
.head-row .head-label { min-width: 118px; }
.head-social { display: flex; flex-wrap: wrap; gap: 8px; }
.soc { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; transition: transform 0.15s; }
.soc:hover { transform: translateY(-2px); }
.soc svg { width: 10px; height: 10px; }
.soc-yt, .soc-youtube { background: #ff0000; }
.soc-li, .soc-linkedin { background: #0a66c2; }
.soc-x { background: #111111; }
.soc-ig, .soc-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.soc-gh, .soc-github { background: #24292f; }
.soc-mail, .soc-email { background: var(--accent); }

/* 侧栏卡题（原型大写字距样式） */
.detail-side .side-card h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin: 0 0 12px; }

/* 分享 5 图标（圆角方框描边样式） */
.detail-side .side-share { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-side .side-share .share-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--fg); cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.15s; }
.detail-side .side-share .share-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.detail-side .side-share .share-btn svg { width: 17px; height: 17px; }

/* Reviews（星级均分 + 打分器 + 评论框，一期本地保存） */
.reviews-sec .rv-hcount { font-size: 16px; font-weight: 400; color: var(--muted); }
.rv-card { border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: var(--bg); margin-top: 14px; }
.rv-summary { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.rv-stars .stars svg { width: 22px; height: 22px; }
.rv-stars .stars .s-bg { color: var(--accent-secondary); }
.rv-stars .stars .s-fg { color: var(--accent-secondary); }
.rv-avg { font-size: 14px; color: var(--fg); }
.rv-ask { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--fg); }
.rv-picker { display: flex; gap: 6px; margin-bottom: 18px; }
.rv-star { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--border); background: none; border: none; cursor: pointer; transition: color 0.15s; }
.rv-star svg { width: 100%; height: 100%; }
.rv-star:hover, .rv-star.selected { color: var(--accent-secondary); }
.rv-star.selected svg { fill: currentColor; }
.rv-inputrow { display: flex; gap: 14px; margin-bottom: 18px; }
.rv-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-secondary); color: #fff; display: flex; align-items: center; justify-content: center; }
.rv-avatar svg { width: 24px; height: 24px; }
.rv-inputwrap { flex: 1; position: relative; }
.rv-inputwrap textarea { width: 100%; min-height: 96px; padding: 12px 14px 28px; font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; resize: vertical; box-sizing: border-box; }
.rv-inputwrap textarea:focus { outline: none; border-color: var(--accent); }
.rv-count { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--muted); }
.rv-submit { min-width: 180px; }
.rv-mine { margin-top: 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.rv-mine b { display: block; margin-bottom: 6px; }
.rv-mine-stars { display: inline-flex; gap: 2px; color: var(--accent-secondary); }
.rv-mine-stars svg { width: 15px; height: 15px; }
.rv-mine-text { margin: 6px 0 0; color: var(--fg); }

/* Related Tutorials（5 列文章卡：16:9 封面 + 两行标题 + Read more） */
.tut-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tut-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s, border-color 0.15s; }
.tut-card:hover { border-color: #c0c5cf; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.tut-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); position: relative; }
.tut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-thumb-fallback, .tut-thumb .tut-thumb-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); }
.tut-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 14px 16px 16px; }
.tut-title { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tut-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Related Tools 紧凑网格（复用 ToolCard，5 列） */
.rel-tools-grid { grid-template-columns: repeat(5, 1fr); margin-top: 14px; }
.related-section .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.related-section .section-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; margin: 0; }
.related-section .section-head h2 .icon { width: 20px; height: 20px; color: var(--accent); display: inline-flex; }
.related-section .section-head h2 .icon svg { width: 100%; height: 100%; }
.related-section .section-more { font-size: 13px; font-weight: 500; color: var(--muted); }
.related-section .section-more:hover { color: var(--fg); }

@media (max-width: 1024px) {
  .tut-grid, .rel-tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .tut-grid, .rel-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-inputrow { flex-direction: column; }
}
@media (max-width: 480px) {
  .tut-grid, .rel-tools-grid { grid-template-columns: 1fr; }
}

/* ===== 分类目录页快速跳转 v2（桌面 3×3 九宫索引 / ≤768 自定义下拉）——对齐 categories-homepage.html =====
   桌面：9 个锚点 = 3×3 等宽网格；每项 = 序号 + 分组图标（与版块头同图标）+ 名称。
   移动：收成带图标的自定义下拉面板，选择即跳转；当前版块高亮并回显到触发器。
   图标/序号用 muted，hover/当前项才点 accent —— accent 每屏最多两处（主 CTA + 当前项）。 */
.page-head h1 .grad,
.cat-hero h1 .grad { display: inline-block; }
#main:focus { outline: none; }

.cat-jump { max-width: var(--container);
  margin: 18px auto 0;
  padding: 0 24px; }
.cat-jump-num { flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color 0.15s; }
.cat-jump-icon { flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s; }
.cat-jump-icon svg { width: 100%; height: 100%; display: block; }
.cat-jump-label { min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.cat-jump-chevron { flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 0.15s; }
.cat-jump-chevron svg { width: 100%; height: 100%; display: block; }

.cat-jump-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; }
.cat-jump-grid a { display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s; }
.cat-jump-grid a:hover { background: var(--surface);
  border-color: var(--muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-2px); }
.cat-jump-grid a:hover .cat-jump-icon { color: var(--accent); }
.cat-jump-grid a:active { background: var(--surface);
  border-color: var(--muted);
  box-shadow: none;
  transform: translateY(0); }
.cat-jump-grid a[aria-current="true"] { color: var(--accent);
  border-color: var(--accent);
  background: var(--bg); }
.cat-jump-grid a[aria-current="true"] .cat-jump-num,
.cat-jump-grid a[aria-current="true"] .cat-jump-icon { color: var(--accent); }
.cat-jump-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cat-jump-dd { display: none;
  position: relative; }
.cat-jump-trigger { width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s; }
.cat-jump-trigger:hover { border-color: var(--muted); }
.cat-jump-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-jump-trigger[aria-expanded="true"] { border-color: var(--accent); }
.cat-jump-trigger .cat-jump-label { flex: 1; }
.cat-jump-trigger .cat-jump-chevron { margin-left: auto; }
.cat-jump-trigger[aria-expanded="true"] .cat-jump-chevron { transform: rotate(180deg); }
.cat-jump-menu { position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,17,17,0.10);
  max-height: 60vh;
  overflow-y: auto; }
.cat-jump-menu[hidden] { display: none; }
.cat-jump-menu a { display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s, color 0.15s; }
.cat-jump-menu a:hover { background: var(--surface); }
.cat-jump-menu a:hover .cat-jump-icon { color: var(--accent); }
.cat-jump-menu a[aria-current="true"] { background: var(--surface); font-weight: 700; }
.cat-jump-menu a[aria-current="true"] .cat-jump-num,
.cat-jump-menu a[aria-current="true"] .cat-jump-icon,
.cat-jump-menu a[aria-current="true"] .cat-jump-check { color: var(--accent); }
.cat-jump-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-jump-check { flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: none;
  margin-left: auto; }
.cat-jump-check svg { width: 100%; height: 100%; display: block; }
.cat-jump-menu a[aria-current="true"] .cat-jump-check { display: block; }

@media (prefers-reduced-motion: reduce) {
  .cat-jump-grid a { transition: none; }
  .cat-jump-grid a:hover,
  .cat-jump-grid a:active { transform: none; }
  .cat-jump-chevron { transition: none; }
}
@media (max-width: 768px) {
  .cat-jump { padding: 0 16px; }
  .cat-jump-grid { display: none; }
  .cat-jump-dd { display: block; }
}

/* ===== Ranking 页（/ranking/ 与 /zh/ranking/，对齐原型 Ranking-homepage.html） =====
   侧栏类名 side-* 全部挂在 .rank-side 作用域下，避免与 .cat-side .side-head 冲突 */
.rank-layout { max-width: var(--container);
  margin: 24px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  align-items: start; }

/* 左侧：分类折叠导航（details/summary，无 JS 可用） */
.rank-side { position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px; }
.rank-side .side-title { padding: 8px 10px 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg); }
.rank-side .side-group { border-radius: var(--radius); }
.rank-side .side-head { display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s; }
.rank-side .side-head::-webkit-details-marker { display: none; }
.rank-side .side-head:hover { background: var(--surface); }
.rank-side .side-head:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -2px; }
.rank-side .s-chev { flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.15s; }
.rank-side .s-chev svg { width: 100%;
  height: 100%;
  display: block; }
.rank-side .side-group[open] > .side-head .s-chev { transform: rotate(180deg); }
.rank-side .side-item .s-ico,
.rank-side .side-head .s-ico { flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--muted); }
.rank-side .s-ico svg { width: 100%; height: 100%; display: block; }
.rank-side .s-name { flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.rank-side .s-count { flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums; }
.rank-side .side-items { display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 6px; }
.rank-side .side-item { position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  padding-left: 46px;   /* 二级缩进，对齐一级标题（原型值） */
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s; }
.rank-side .side-item:hover { background: var(--surface); }
.rank-side .side-item:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -2px; }

/* 右侧：排行榜面板（表头与行共用同一网格配方，五列对齐） */
.rank-panel { background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden; }
.rank-cols, .rank-row { display: grid;
  grid-template-columns: 56px 64px 210px 150px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 0 16px; }
.rank-cols { min-height: 40px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); }
.rank-row { position: relative;
  min-height: 68px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s; }
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: var(--surface); }
.rank-row:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1; }
/* 主题 .rank-row（TOP10 侧栏）同名类渗透隔离：榜单行应为无背景、仅底边分隔线的连续列表 */
.rank-panel .rank-row { background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  row-gap: 0; }
.rank-panel .rank-row:hover { background: var(--surface);
  border-color: var(--border);
  box-shadow: none; }
.rank-panel .rank-row:last-child { border-bottom: none; }
/* 排名徽标：前三名以品牌蓝强度分级，其余弱化为 muted 数字 */
.rk { width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted); }
.rank-row.top1 .rk { background: #0958d9;
  color: #fff; }
.rank-row.top2 .rk { background: rgba(22,119,255,0.16);
  color: var(--accent); }
.rank-row.top3 .rk { background: rgba(22,119,255,0.08);
  color: var(--accent); }
.rk-icon { flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent); }
.rk-icon img { width: 100%;
  height: 100%;
  object-fit: contain; }
.rk-name { display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; }
.rk-name .nm { font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.rank-panel .rk-stars { display: flex;
  align-items: center;
  gap: 8px; }
.rank-panel .stars svg { width: 15px; height: 15px; }
.rk-desc { min-width: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

@media (max-width: 1024px) {
  .rank-layout { grid-template-columns: 1fr; }
  .rank-side { position: static;
    max-height: none;
    overflow: visible; }
}
@media (max-width: 768px) {
  .rank-cols { display: none; }   /* 窄屏隐藏列头，行内两行自明 */
  .rank-row { grid-template-columns: 40px 44px minmax(0, 1fr) auto;
    grid-template-areas: "rk icon name stars" "rk icon desc desc";
    row-gap: 2px;
    padding: 12px; }
  .rank-row .rk { grid-area: rk; }
  .rank-row .rk-icon { grid-area: icon; }
  .rank-row .rk-name { grid-area: name; }
  .rank-row .rk-stars { grid-area: stars;
    justify-content: flex-end; }
  .rank-row .rk-desc { grid-area: desc; }
}
@media (max-width: 480px) {
  /* taxonomy-wrap 已有 24px 水平内边距，此处不再叠加，否则榜单列被双层 padding 挤压 */
  .rank-layout { padding: 0;
    margin-top: 16px; }
  .rank-cols, .rank-row { padding-left: 12px;
    padding-right: 12px; }
  .rank-row { column-gap: 10px; }
  /* 星级整列缩档，把宽度让给名称列（排行榜移动端的核心信息） */
  .rank-panel .stars svg { width: 12px; height: 12px; }
  .rank-panel .stars .s-bg, .rank-panel .stars .s-fg { gap: 1px; }
  .rank-panel .rk-stars { gap: 6px; }
  .rk { width: 26px;
    height: 26px;
    font-size: 13px; }
  .rk-icon { width: 40px;
    height: 40px; }
}