@charset "utf-8";
/* ==========================================================================
   显卡档案 GPU ATLAS —— /gpu/ 独立工具区样式

   * 只作用于 .g-* / #g-* 命名空间，不碰站上任何既有选择器
   * 刻意用 px 而不是 rem：站上 html{font-size:calc(100vw/19.2)} 在 1440 屏上
     1rem=75px，用 rem 会让这个数据密集区的字号在中等屏上缩到 10px
   * 主色用 logo 品牌蓝 #1169fd（不是站点默认的 #0073c3）

   版式（2026-10-16 改版）：
   * 页面底白，和官网产品页一致；靠 1px 细线分割，不再层层白盒子套灰底
   * 内容宽度用站上的 .c-container.max-width（62.5% / 84% / 100%），
     和面包屑、页头 logo 左右对齐，两侧留白明显
   * 二级导航从整条通栏挪进内容区左上角
   ========================================================================== */

/* 无限滚动追加卡片时关掉滚动锚定：
   否则浏览器会把视口钉在「加载更多」那条上，随着新卡片插入一路往下跟，
   scroll 事件连发，触底一次就把 1000 多张全部加载出来。 */
html { overflow-anchor: none; }

/* 变量挂 :root 而不是 .g-page —— 面包屑是 #c-tool 的兄弟节点，不在 .g-page 里面，
   挂在 .g-page 上它取不到值，color:var(--g-mut) 会静默退回「继承」，颜色就不生效。
   这些名字都是 --g-* 前缀、只被本文件的 .g-* 规则引用，挂到 :root 不会影响站点其他部分。 */
:root {
  --g-blue: #1169fd;
  --g-blue-d: #0b52cc;
  --g-blue-l: #eff5ff;
  --g-ink: #16233a;
  --g-txt: #3c4a60;
  --g-mut: #7f8c9e;
  --g-line: #e8edf4;
  --g-line-2: #dde5ef;
  --g-fill: #f7f9fc;
  --g-nv: #76b900;
  --g-amd: #e0323b;
  --g-intel: #0068b5;
}

.g-page {
  background: #fff;
  color: var(--g-txt);
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 56px;
}

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

.g-page a { color: inherit; text-decoration: none; }
.g-page ul, .g-page ol { margin: 0; padding: 0; list-style: none; }
.g-page button { font: inherit; cursor: pointer; }

/* 键盘可达性：所有可聚焦元素统一焦点圈 */
.g-page a:focus-visible,
.g-page button:focus-visible,
.g-page input:focus-visible,
.g-page select:focus-visible,
.g-page label:focus-within {
  outline: 2px solid var(--g-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.g-page .g-facet-l label:focus-within { outline: none; }

/* ==========================================================================
   一、页头：面包屑 + 二级导航 + 标题
   ========================================================================== */

/* --- 面包屑 ---
   站上的 #c-top-site 会带一条 #f7f7f7 的灰底带、用 rem 做上下留白（1rem 在 1440
   屏上是 75px），整条能撑到 78px 高，放在白底页面上就成了一条孤零零的灰杠。
   这里用 .g-crumb 提一级特异性压掉它：去背景、字号收到 12px、图标缩到 14px。
   （#c-top-site.g-crumb = 1,1,0，比站上的 #c-top-site 1,0,0 高；
     后代选择器同理都多带一个类，所以站点样式和它的媒体查询都盖不过。）
   ------------------------------------------------------------------------- */
#c-top-site.g-crumb {
  padding: 20px 0 0;
  background: none;
  color: var(--g-mut);
  font-size: 12px;
  line-height: 1.4;
}
#c-top-site.g-crumb .c-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 0;
}
#c-top-site.g-crumb .c-container a {
  color: var(--g-mut);
  font-size: 12px;
  transition: color .16s;
}
#c-top-site.g-crumb .c-container > a:first-child {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-right: 1px;
  background-size: 14px auto;
  opacity: .5;
  transition: opacity .16s;
}
#c-top-site.g-crumb .c-container > a:first-child:hover { opacity: 1; }
#c-top-site.g-crumb .c-container .c-separator {
  margin: 0 6px;
  color: #c6d0dd;
  font-size: 12px;
}
#c-top-site.g-crumb .c-container .on {
  color: var(--g-ink);
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g-head { padding-top: 4px; }

/* 挂载点抽掉盒子，让 .g-bar 直接参与 .c-container 的布局 */
#g-bar-mount { display: contents; }

/* --- 导航条：品牌 + 分页 + 搜索，整条压在一条细线上 ---
   不吸顶：用户要的是「列表自己内部滚动」，这条跟着页面上滚即可。 */
.g-bar {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  min-height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--g-line-2);
}
.g-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.g-brand b {
  font-size: 17px;
  color: var(--g-ink);
  font-weight: 700;
  letter-spacing: .5px;
}
.g-brand span {
  font-size: 10px;
  color: var(--g-mut);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.g-tabs { display: flex; gap: 2px; }
.g-tabs a {
  position: relative;
  padding: 20px 14px;
  font-size: 15px;
  color: var(--g-txt);
  white-space: nowrap;
  transition: color .16s;
}
.g-tabs a:hover { color: var(--g-blue); }
.g-tabs a.on { color: var(--g-blue); font-weight: 700; }
.g-tabs a.on::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--g-blue);
  border-radius: 2px 2px 0 0;
}

/* --- 搜索框（对比页会在它下面挂建议列表） --- */
.g-search { margin-left: auto; position: relative; flex: 0 1 300px; min-width: 200px; }
.g-search > input {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 36px;
  border: 1px solid var(--g-line-2);
  border-radius: 19px;
  background: var(--g-fill);
  font-size: 13px;
  color: var(--g-ink);
  outline: none;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.g-search > input::placeholder { color: #a3aebe; }
.g-search > input:focus {
  border-color: var(--g-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(17,105,253,.10);
}
.g-search .g-search-ico {
  position: absolute; left: 13px; top: 50%;
  width: 14px; height: 14px; margin-top: -8px;
  border: 1.8px solid var(--g-mut);
  border-radius: 50%;
  pointer-events: none;
}
.g-search .g-search-ico::after {
  content: ""; position: absolute; right: -5px; bottom: -4px;
  width: 6px; height: 1.8px; background: var(--g-mut);
  transform: rotate(45deg); border-radius: 2px;
}
.g-search .g-search-clr {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--g-mut); font-size: 15px; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.g-search.filled .g-search-clr { display: flex; }
.g-search .g-search-clr:hover { background: var(--g-fill); color: var(--g-ink); }

/* --- 标题块 --- */
.g-title-block { padding: 24px 0 22px; border-bottom: 1px solid var(--g-line-2); }
.g-h1 { font-size: 26px; color: var(--g-ink); font-weight: 700; line-height: 1.25; }
.g-h1 small { font-size: 15px; color: var(--g-mut); font-weight: 400; margin-left: 10px; }
.g-sub { font-size: 14px; color: var(--g-mut); margin-top: 6px; }

/* --- Hero（仅全部显卡页）：浅蓝渐变带 + 三个统计数字 ---
   数据库规模本身就是卖点，一上来就亮出来；渐变到白底收掉，不抢下面卡片的戏。
   渐变带做成自带 padding 的圆角块，文字不贴边，和面包屑、卡片之间留出呼吸。 */
.g-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  margin: 20px 0 4px; padding: 30px 34px;
  border: 1px solid var(--g-line);
  border-radius: 12px;
  background: linear-gradient(120deg, #eef4ff 0%, #f7faff 55%, #ffffff 100%);
}
.g-hero-t { font-size: 30px; color: var(--g-ink); font-weight: 700; line-height: 1.2; margin: 0; }
.g-hero-t small { font-size: 14px; color: var(--g-mut); font-weight: 400; margin-left: 12px; letter-spacing: .5px; }
.g-hero-sub { font-size: 14px; color: var(--g-mut); margin-top: 10px; max-width: 56ch; }
.g-hero-stats { display: flex; gap: 0; margin: 0; padding: 0; flex-shrink: 0; }
.g-hero-stat { text-align: right; }
.g-hero-stat dd { margin: 0; }
.g-hero-stat dd b {
  font-size: 28px; color: var(--g-blue); font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px; white-space: nowrap;
}
.g-hero-stat dd span { font-size: 13px; color: var(--g-mut); }
.g-hero-stat dt { font-size: 12px; color: var(--g-mut); margin-top: 4px; letter-spacing: 1px; }
.g-hero-stat + .g-hero-stat { border-left: 1px solid var(--g-line-2); padding-left: 30px; margin-left: 30px; }

/* ==========================================================================
   二、通用件
   ========================================================================== */

.g-panel {
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: 8px;
}

.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  border: 1px solid var(--g-line-2);
  background: #fff;
  color: var(--g-ink);
  font-size: 14px;
  transition: border-color .16s, color .16s, background .16s;
}
.g-btn:hover { border-color: var(--g-blue); color: var(--g-blue); }
.g-btn.primary {
  background: var(--g-blue);
  border-color: var(--g-blue);
  color: #fff;
  font-weight: 700;
}
.g-btn.primary:hover { background: var(--g-blue-d); border-color: var(--g-blue-d); color: #fff; }
.g-btn[disabled] { opacity: .45; cursor: not-allowed; }
.g-btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ==========================================================================
   三、全部显卡：左筛选 + 右结果
   ========================================================================== */

.g-cols {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* 桌面端：筛选 + 结果区是一个视口高的内滚动区。
   列表在里面无限往下加载；鼠标停在列表外的空白处滚轮，滚的是整页，
   这样才能往下滑到 FAQ 和页脚。窄屏恢复普通文档流（见响应式一节）。 */
@media (min-width: 1081px) {
  .g-cols {
    height: calc(100vh - 24px);
    min-height: 560px;
    align-items: stretch;
  }
  .g-side { position: static; height: 100%; }
  .g-facets-wrap {
    height: 100%; display: flex; flex-direction: column;
    position: relative;                 /* 「清空」按钮的定位锚点 */
  }
  .g-side-body { flex: 1; max-height: none; }
  .g-results {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 列表内滚到头不把滚动串给外层页面 */
    overflow-anchor: none;
    padding-right: 6px;
  }
  /* 排行页：行列表同样是一个内滚动区 */
  .g-rank-scroll {
    height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
  }
  .g-rank-scroll, .g-results { scrollbar-width: none; -ms-overflow-style: none; }
  .g-rank-scroll::-webkit-scrollbar,
  .g-results::-webkit-scrollbar,
  .g-side-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* 静态排行（JS 接管前）锁成同样高度，避免整页高度跳变 */
  .g-page[data-gpu-page="rank"] .g-static {
    height: calc(100vh - 24px);
    overflow: hidden;
    overflow-anchor: none;
  }
  /* 隐藏内滚动条：左栏、结果区和排行列表都能滚，但不显示滚动条轨道 */
  .g-side-body { scrollbar-width: none; -ms-overflow-style: none; }
  .g-side-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* --- 侧栏：去掉「筛选」标题和右侧分隔线，第一个分组直接顶到上沿 --- */
.g-side { position: sticky; top: 16px; }
.g-side-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 12px 10px 0;
  font-size: 14px; color: var(--g-ink);
}
.g-side-h b { font-weight: 700; }
.g-side-h button {
  border: 0; background: none; color: var(--g-blue); font-size: 12px; padding: 0;
}
.g-side-h button:hover { text-decoration: underline; }
.g-side-h button[hidden] { display: none; }
/* 标题行收起来：不占高度，但保留「清空」按钮的容器（有筛选时它会浮到右上角） */
.g-side-h { padding: 0; min-height: 0; }
.g-side-h b { display: none; }
.g-side-h button { position: absolute; top: 6px; right: 12px; z-index: 2; }
.g-facets-wrap { position: relative; }
.g-side-body { max-height: calc(100vh - 200px); overflow-y: auto; padding: 0 12px 16px 0; }

/* 窄屏筛选折叠条：桌面端不渲染 */
.g-side-toggle { display: none; }

/* 第一个分组的标题直接顶到上沿，不再有上边框和上留白 */
.g-facet { border-top: 1px solid var(--g-line); padding: 12px 0; }
.g-facet:first-child { border-top: 0; padding-top: 0; }
.g-facet-t {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  border: 0; background: none; padding: 0 0 2px; margin-bottom: 6px;
  font-size: 13px; color: var(--g-ink); font-weight: 700;
  text-align: left;
}
.g-facet-t i {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid var(--g-mut); border-bottom: 1.6px solid var(--g-mut);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.g-facet.closed .g-facet-t i { transform: rotate(-135deg) translate(-2px, -2px); }
.g-facet.closed .g-facet-l { display: none; }
.g-facet-l li { margin: 1px 0; }
.g-facet-l label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; margin: 0 -8px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
  transition: background .14s;
}
.g-facet-l label:hover { background: var(--g-fill); }
.g-facet-l input { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--g-blue); cursor: pointer; }
.g-facet-l .n {
  margin-left: auto; color: var(--g-mut); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.g-facet-l label:has(input:checked) { color: var(--g-blue); font-weight: 700; }
.g-facet-l label:has(input:checked) .n { color: var(--g-blue); }
.g-facet-l .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-more {
  border: 0; background: none; color: var(--g-blue); font-size: 12px;
  padding: 6px 0 0; display: block;
}
.g-more:hover { text-decoration: underline; }

/* --- 结果区 --- */
.g-results { min-width: 0; }

/* 工具条 */
.g-tool {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px;
}
/* renderToolbar 的包裹层：抽掉盒子，让 .g-tool / .g-activebar 直接参与
   .g-results 的文档流，否则 sticky 的包含块只有这一小段高，粘不住。 */
.g-toolwrap { display: contents; }

/* 列表页：厂商筛选 + 共 N 款 + 排序 + 视图切换这一条，吸在结果区顶部。
   结果区本身是内滚动容器，所以 top:0 就是列表可视区的上沿——
   往下翻卡片时这条始终在，不会被滚走。
   只做桌面端：窄屏这条会折成两三行，吸顶太占屏幕。 */
@media (min-width: 1081px) {
  .g-page[data-gpu-page="list"] .g-tool {
    position: sticky;
    top: 0;
    z-index: 55;
    background: #fff;
    padding: 8px 0 12px;
  }
  .g-page[data-gpu-page="list"] .g-tool.stuck {
    box-shadow: 0 8px 18px rgba(22, 35, 58, .07);
  }
}
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.g-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: 16px;
  border: 1px solid var(--g-line-2); background: #fff;
  font-size: 13px; color: var(--g-txt);
  transition: border-color .16s, color .16s, background .16s;
}
.g-chip:hover { border-color: var(--g-blue); color: var(--g-blue); }
.g-chip.on { background: var(--g-blue); border-color: var(--g-blue); color: #fff; font-weight: 700; }
.g-chip .n { opacity: .75; font-size: 12px; font-variant-numeric: tabular-nums; }
.g-chip.on .n { opacity: .9; }
.g-chip .vb { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.g-tool-r {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--g-mut);
}
#g-count { font-variant-numeric: tabular-nums; }
#g-count b { color: var(--g-ink); font-weight: 700; }

.g-select {
  height: 32px; padding: 0 28px 0 11px; border: 1px solid var(--g-line-2); border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8c9e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 13px;
  font-size: 13px; color: var(--g-ink); appearance: none; outline: none;
  cursor: pointer;
}
.g-select:hover { border-color: #c6d3e3; }

.g-view { display: flex; border: 1px solid var(--g-line-2); border-radius: 6px; overflow: hidden; }
.g-view button {
  width: 33px; height: 30px; border: 0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s;
}
.g-view button:hover { background: var(--g-fill); }
.g-view button + button { border-left: 1px solid var(--g-line-2); }
.g-view button.on { background: var(--g-blue); }
.g-view button.on svg { stroke: #fff; }
.g-view svg { width: 15px; height: 15px; stroke: var(--g-mut); fill: none; stroke-width: 2; }

/* 已选条件条（只在有筛选时出现） */
.g-activebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 14px;
  font-size: 12px; color: var(--g-mut);
}
.g-activebar[hidden] { display: none; }
.g-fchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 6px 0 10px; border-radius: 13px;
  background: var(--g-blue-l); color: var(--g-blue);
  font-size: 12px;
}
.g-fchip i { font-style: normal; opacity: .65; }
.g-fchip button {
  border: 0; background: none; color: inherit; font-size: 14px; line-height: 1;
  padding: 0 3px; border-radius: 50%;
}
.g-fchip button:hover { background: rgba(17,105,253,.14); }
.g-activebar .g-clearall {
  border: 0; background: none; color: var(--g-blue); font-size: 12px;
  padding: 0; text-decoration: underline;
}

/* 结果条数摘要 */
.g-sum { font-size: 13px; color: var(--g-mut); padding-bottom: 12px; }
.g-sum b { color: var(--g-ink); font-weight: 700; }

/* --- 卡片网格 --- */
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 16px;
}
.g-grid.list { grid-template-columns: 1fr; gap: 12px; }

/* 首屏静态卡片：JS 接管前 / 无 JS 时展示，保证 FAQ 和页脚不会先出现再被顶走（CLS） */
.g-static-note { margin: 0 0 14px; font-size: 13px; color: var(--g-mut); }
.g-ph {
  display: flex; align-items: center; justify-content: center;
  width: 58%; height: 62%;
  border: 1px dashed var(--g-line-2); border-radius: 8px;
  background: rgba(255, 255, 255, .7);
  color: var(--g-mut); font-size: 12px; letter-spacing: 1px;
}
@media (min-width: 1081px) {
  /* 和 .g-cols 的「196px 侧栏 + 26px 间距」对齐；高度也锁成一样，
     JS 接管成内滚动区时页面高度不变，FAQ / 页脚不会跳。 */
  .g-static-grid {
    margin-left: 222px;
    height: calc(100vh - 24px);
    min-height: 560px;
    overflow: hidden;
  }
}
@media (min-width: 1081px) and (max-width: 1400px) {
  .g-static-grid { margin-left: 206px; }
}

.g-card {
  position: relative;
  border: 1px solid var(--g-line-2);
  border-radius: 10px;
  background: #fff;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.g-card:hover {
  border-color: #bed2f6;
  box-shadow: 0 8px 24px rgba(17,105,253,.10);
  transform: translateY(-2px);
}
.g-card.sel { border-color: var(--g-blue); box-shadow: 0 0 0 1px var(--g-blue) inset; }

/* 图区按厂商罩一层极淡的底色：不看字也能按颜色分区。
   vd-* class 由渲染时挂上（nvidia / amd / intel / other）。 */
.g-card-shot {
  height: 152px; padding: 36px 18px 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--g-fill) 0%, #fff 92%);
  border-bottom: 1px solid var(--g-line);
  border-radius: 10px 10px 0 0;
}
.g-card.vd-nvidia .g-card-shot { background: linear-gradient(180deg, rgba(118,185,0,.08) 0%, #fff 92%); }
.g-card.vd-amd    .g-card-shot { background: linear-gradient(180deg, rgba(224,50,59,.07) 0%, #fff 92%); }
.g-card.vd-intel  .g-card-shot { background: linear-gradient(180deg, rgba(0,104,181,.08) 0%, #fff 92%); }

.g-card-pick {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); border-radius: 6px; padding: 4px 9px 4px 7px;
  font-size: 12px; color: var(--g-txt); cursor: pointer;
  transition: color .16s, background .16s;
}
.g-card-pick:hover { color: var(--g-blue); }
.g-card.sel .g-card-pick { background: var(--g-blue); color: #fff; }
.g-card-pick input { width: 14px; height: 14px; accent-color: var(--g-blue); cursor: pointer; }

.g-shot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.g-card-body { padding: 0 14px 14px; }
.g-card-name {
  font-size: 15px; color: var(--g-ink); font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 40px;
  transition: color .16s;
}
.g-card-name:hover { color: var(--g-blue); }
.g-card-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12px; color: var(--g-mut);
  overflow: hidden; white-space: nowrap;
}
.g-card-meta > span { overflow: hidden; text-overflow: ellipsis; }
.g-card-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g-line);
}
.g-card-specs div { min-width: 0; }
.g-card-specs b {
  display: block; font-size: 14px; color: var(--g-ink); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.g-card-specs i { display: block; font-style: normal; font-size: 11px; color: var(--g-mut); margin-top: 2px; }

/* FP32 相对本页峰值的比例条：规格数字下面那条细蓝条 */
.g-card-meter {
  height: 4px; margin-top: 10px; border-radius: 2px;
  background: var(--g-line);
  overflow: hidden;
}
.g-card-meter i {
  display: block; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--g-blue) 0%, #5c94ff 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.g-card.vd-nvidia .g-card-meter i { background: linear-gradient(90deg, #5c9400 0%, var(--g-nv) 100%); }
.g-card.vd-amd    .g-card-meter i { background: linear-gradient(90deg, #b3232b 0%, var(--g-amd) 100%); }
.g-card.vd-intel  .g-card-meter i { background: linear-gradient(90deg, #004e87 0%, var(--g-intel) 100%); }

.g-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--g-line); margin-top: auto;
  font-size: 12px;
}
.g-card-foot a { color: var(--g-blue); }
.g-card-foot a:hover { text-decoration: underline; }
.g-card-foot a:last-child { color: var(--g-mut); }
.g-card-foot a:last-child:hover { color: var(--g-blue); }
.g-card.sel .g-card-foot a:last-child { color: var(--g-blue); font-weight: 700; }

/* 列表视图 */
.g-grid.list .g-card { flex-direction: row; align-items: center; }
.g-grid.list .g-card:hover { transform: none; }
.g-grid.list .g-card-shot { width: 148px; height: 92px; padding: 14px; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--g-line); border-radius: 10px 0 0 10px; }
.g-grid.list .g-card-body { flex: 1; padding: 14px; min-width: 0; }
.g-grid.list .g-card-name { min-height: 0; -webkit-line-clamp: 1; }
.g-grid.list .g-card-specs { border-top: 0; margin-top: 4px; padding-top: 0; max-width: 440px; }
.g-grid.list .g-card-meter { max-width: 440px; margin-top: 6px; }
.g-grid.list .g-card-foot { border-top: 0; margin-top: 0; padding: 14px 16px 14px 0; flex-shrink: 0; }
.g-grid.list .g-card-pick { position: static; margin: 0 0 6px -2px; background: none; padding: 0; }
.g-grid.list .g-card-shot-wrap { padding-left: 56px; }

/* ==========================================================================
   四、厂商徽标 / 空状态 / 底部
   ========================================================================== */

.g-vd {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  flex-shrink: 0;
}
.g-vd .dot { width: 8px; height: 8px; border-radius: 2px; }
.g-vd.nvidia { color: var(--g-nv); }
.g-vd.nvidia .dot { background: var(--g-nv); }
.g-vd.amd { color: var(--g-amd); }
.g-vd.amd .dot { background: var(--g-amd); }
.g-vd.intel { color: var(--g-intel); }
.g-vd.intel .dot { background: var(--g-intel); }
.g-vd.other { color: var(--g-mut); }
.g-vd.other .dot { background: var(--g-mut); }

.g-empty { padding: 84px 20px; text-align: center; color: var(--g-mut); grid-column: 1 / -1; }
.g-empty b { display: block; font-size: 16px; color: var(--g-ink); margin-bottom: 8px; font-weight: 700; }

.g-foot-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 28px 0 8px; font-size: 13px; color: var(--g-mut);
}
.g-foot-bar .g-btn { min-width: 140px; }

/* 数据来源说明：跟在内容后面，不和正文抢注意力 */
.g-src {
  font-size: 12px; color: #98a4b4; line-height: 1.8;
  padding: 26px 0 0;
  border-top: 1px solid var(--g-line);
  margin-top: 28px;
}
.g-src a { color: var(--g-blue); }

/* ==========================================================================
   五、对比选择栏（吸底）
   ========================================================================== */

.g-pick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--g-line-2);
  box-shadow: 0 -6px 24px rgba(16,35,58,.09);
  transform: translateY(115%); transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.g-pick.on { transform: translateY(0); }
.g-pick-in { display: flex; align-items: center; gap: 16px; padding: 11px 0; }
.g-pick-n { font-size: 13px; color: var(--g-txt); flex-shrink: 0; line-height: 1.4; }
.g-pick-n b { color: var(--g-blue); font-size: 17px; }
.g-pick-n i { display: block; font-style: normal; font-size: 12px; color: var(--g-mut); }
.g-pick-list { display: flex; gap: 10px; overflow-x: auto; flex: 1; min-width: 0; padding: 2px; }
.g-pick-item {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  border: 1px solid var(--g-line-2); border-radius: 8px; padding: 5px 8px 5px 5px;
  background: #fff; max-width: 218px;
}
.g-pick-item .th { width: 42px; height: 28px; flex-shrink: 0; }
.g-pick-item .tx { min-width: 0; }
.g-pick-item .tx b { display: block; font-size: 12px; color: var(--g-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-pick-item .tx i { display: block; font-style: normal; font-size: 11px; color: var(--g-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-pick-item .x {
  border: 0; background: none; color: var(--g-mut); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
}
.g-pick-item .x:hover { background: var(--g-fill); color: var(--g-ink); }
.g-pick-acts { display: flex; gap: 10px; flex-shrink: 0; }

/* ==========================================================================
   六、性能排行
   ========================================================================== */

.g-rank-head, .g-rank-row {
  display: grid;
  grid-template-columns: 44px 58px minmax(0, 1fr) minmax(120px, 240px) 104px 74px 76px;
  align-items: center; gap: 12px;
}
.g-rank-head {
  padding: 0 0 10px; border-bottom: 1px solid var(--g-line-2);
  font-size: 12px; color: var(--g-mut); letter-spacing: .4px;
}
.g-rank-head > div:last-child { text-align: right; }
.g-rank-row { padding: 11px 0; border-bottom: 1px solid var(--g-line); }
.g-rank-row:hover { background: #fbfcfe; }
.g-rank-row.sel { background: var(--g-blue-l); }
.g-rank-no {
  font-size: 16px; font-weight: 700; color: #b3becd;
  font-variant-numeric: tabular-nums;
}
.g-rank-row:nth-child(1) .g-rank-no,
.g-rank-row:nth-child(2) .g-rank-no,
.g-rank-row:nth-child(3) .g-rank-no { color: var(--g-blue); }
.g-rank-shot { height: 40px; display: flex; align-items: center; justify-content: center; }
.g-rank-name { min-width: 0; }
.g-rank-name a { display: block; font-size: 14px; color: var(--g-ink); font-weight: 700; }
.g-rank-name a:hover { color: var(--g-blue); }
.g-rank-name i {
  font-style: normal; font-size: 12px; color: var(--g-mut);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden;
}
.g-rank-name i .g-vd { display: inline-flex; }
.g-rank-bar { height: 12px; border-radius: 6px; background: var(--g-fill); overflow: hidden; }
.g-rank-bar span { display: block; height: 100%; border-radius: 6px; background: var(--g-blue); }
.g-rank-bar span.nvidia { background: var(--g-nv); }
.g-rank-bar span.amd { background: var(--g-amd); }
.g-rank-bar span.intel { background: var(--g-intel); }
.g-rank-bar span.other { background: #93a1b3; }
.g-rank-val {
  font-size: 15px; font-weight: 700; color: var(--g-ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.g-rank-note { font-size: 12px; color: var(--g-mut); font-variant-numeric: tabular-nums; }
.g-rank-row .g-rank-note:last-child { text-align: right; }
.g-cmp-link { color: var(--g-blue); }
.g-cmp-link:hover { text-decoration: underline; }
.g-cmp-link.on { color: var(--g-mut); }

/* ==========================================================================
   七、显卡对比
   ========================================================================== */

.g-cmp-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 0 0 16px;
}
.g-cmp-tip { font-size: 13px; color: var(--g-mut); }
.g-cmp-perma { margin: 16px 0 0; font-size: 12px; color: var(--g-mut); line-height: 1.7; }
.g-cmp-perma a { color: var(--g-blue); margin-left: 4px; word-break: break-all; }

.g-cmp-sw {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-txt);
  cursor: pointer; user-select: none;
}
.g-cmp-sw input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.g-cmp-sw .tk {
  width: 38px; height: 21px; border-radius: 11px; background: #d7dee8;
  position: relative; transition: background .18s;
}
.g-cmp-sw .tk::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.g-cmp-sw input:checked + .tk { background: var(--g-blue); }
.g-cmp-sw input:checked + .tk::after { transform: translateX(17px); }
.g-cmp-sw input:focus-visible + .tk { outline: 2px solid var(--g-blue); outline-offset: 2px; }

.g-cmp-scroll { overflow-x: auto; }
.g-cmp-table { min-width: 100%; border-collapse: collapse; font-size: 13px; }
.g-cmp-table th, .g-cmp-table td {
  border-bottom: 1px solid var(--g-line); border-right: 1px solid var(--g-line);
  padding: 11px 13px; vertical-align: top; text-align: left;
}
.g-cmp-table th:last-child, .g-cmp-table td:last-child { border-right: 0; }
.g-cmp-table thead th { background: #fff; position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--g-line-2); }
.g-cmp-table tbody tr:hover td:not(.g-lab) { background: #fbfcfe; }
.g-cmp-table .g-lab {
  width: 132px; min-width: 132px; background: #fff;
  color: var(--g-mut); font-weight: 400;
}
.g-cmp-table tbody tr:hover .g-lab { background: #fbfcfe; }
.g-cmp-table .g-col { min-width: 168px; width: 168px; }
.g-cmp-group td {
  background: var(--g-fill); color: var(--g-ink); font-weight: 700; font-size: 12px;
  letter-spacing: .6px; padding: 9px 13px; border-right: 0;
}
.g-cmp-table .g-hit { background: var(--g-blue-l); }
.g-cmp-table tbody tr:hover .g-hit { background: #e6efff; }

.g-cmp-headcard { text-align: center; padding: 4px 0 8px; position: relative; }
.g-cmp-headcard .x {
  position: absolute; top: 0; right: 0; border: 0; background: none;
  color: var(--g-mut); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.g-cmp-headcard .x:hover { background: var(--g-fill); color: var(--g-ink); }
.g-cmp-headcard .shot { height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.g-cmp-headcard .vd { display: block; font-size: 12px; }
.g-cmp-headcard .nm {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 14px; color: var(--g-ink); margin: 4px 0 8px; line-height: 1.35;
  overflow: hidden; min-height: 38px;
}
.g-cmp-headcard .nm:hover { color: var(--g-blue); }
.g-cmp-headcard .big {
  font-size: 19px; font-weight: 700; color: var(--g-ink);
  font-variant-numeric: tabular-nums;
}
.g-cmp-headcard .big em { font-style: normal; font-size: 12px; color: var(--g-mut); font-weight: 400; margin-left: 3px; }
.g-cmp-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--g-line-2); border-radius: 10px; margin: 4px 0 8px;
  min-height: 190px; color: var(--g-mut); font-size: 13px;
  transition: border-color .16s, color .16s;
}
.g-cmp-add:hover { border-color: var(--g-blue); color: var(--g-blue); }
.g-cmp-add .pl { font-size: 24px; line-height: 1; }

/* ==========================================================================
   八、显卡详情
   ========================================================================== */

.g-dt-top {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px;
  padding: 24px 0 0;
}
.g-dt-shot {
  height: 230px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fbfcff, #f3f7fd);
  border: 1px solid var(--g-line); border-radius: 10px;
}
.g-dt-shot > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.g-dt-shot-note { text-align: center; font-size: 12px; color: var(--g-mut); margin-top: 8px; }
.g-dt-vd { font-size: 13px; }
.g-dt-name { font-size: 28px; font-weight: 700; color: var(--g-ink); line-height: 1.22; margin: 8px 0 6px; }
.g-dt-lede { font-size: 14px; color: var(--g-mut); }
.g-dt-acts { display: flex; gap: 12px; margin: 18px 0 22px; flex-wrap: wrap; }
.g-dt-kv {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--g-line); padding-top: 16px;
}
.g-dt-kv div { min-width: 0; padding-right: 8px; }
.g-dt-kv b {
  display: block; font-size: 21px; font-weight: 700; color: var(--g-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.g-dt-kv b em { font-style: normal; font-size: 12px; color: var(--g-mut); font-weight: 400; margin-left: 3px; }
.g-dt-kv i { display: block; font-style: normal; font-size: 12px; color: var(--g-mut); margin-top: 3px; }

.g-dt-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--g-line-2); margin-top: 26px; }
.g-dt-tabs button {
  border: 0; background: none; padding: 14px 0; font-size: 15px; color: var(--g-txt);
  position: relative; transition: color .16s;
}
.g-dt-tabs button:hover { color: var(--g-blue); }
.g-dt-tabs button.on { color: var(--g-blue); font-weight: 700; }
.g-dt-tabs button.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--g-blue);
}
.g-dt-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
  padding: 22px 0 0; align-items: start;
}
.g-dt-sect { margin-bottom: 18px; overflow: hidden; }
.g-dt-sect-h {
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--g-ink);
  border-bottom: 1px solid var(--g-line); background: var(--g-fill);
}
.g-dt-sect-h small { font-weight: 400; font-size: 12px; color: var(--g-mut); margin-left: 8px; }
.g-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-kv > div {
  display: grid; grid-template-columns: 124px minmax(0, 1fr);
  border-bottom: 1px solid var(--g-line);
}
.g-kv > div:nth-child(2n+1) { border-right: 1px solid var(--g-line); }
.g-kv dt { padding: 9px 12px; background: #fafcfe; font-size: 13px; color: var(--g-mut); }
.g-kv dd { padding: 9px 12px; margin: 0; font-size: 13px; color: var(--g-ink); word-break: break-word; }

.g-calc-card { padding: 16px; }
.g-calc-lab { font-size: 13px; color: var(--g-mut); }
.g-calc-big {
  font-size: 38px; font-weight: 700; color: var(--g-blue); line-height: 1.1;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.g-calc-big em { font-style: normal; font-size: 14px; color: var(--g-ink); font-weight: 700; margin-left: 6px; }
.g-calc-note { font-size: 12px; color: var(--g-mut); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g-line); line-height: 1.7; }
.g-calc-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.g-calc-mini div { background: var(--g-fill); border-radius: 6px; padding: 10px 12px; }
.g-calc-mini b { display: block; font-size: 16px; color: var(--g-ink); font-variant-numeric: tabular-nums; }
.g-calc-mini i { font-style: normal; font-size: 11px; color: var(--g-mut); }

.g-dt-sect-b { padding: 16px; }
.g-perf-row { margin-bottom: 18px; }
.g-perf-row:last-child { margin-bottom: 0; }
.g-perf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--g-txt); margin-bottom: 8px;
}
.g-perf-head span:last-child { color: var(--g-mut); font-size: 12px; }
.g-perf-foot { font-size: 12px; color: var(--g-mut); margin-top: 6px; }

.g-kv.one { grid-template-columns: minmax(0, 1fr); }
.g-kv.one > div { border-right: 0; }

/* ==========================================================================
   九、缩略图与示意图
   ========================================================================== */

.g-shot img,
.g-rank-shot img,
.g-pick-item .th img,
.g-suggest-item .th img,
.g-rel-item .th img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.g-pick-item .th,
.g-suggest-item .th,
.g-rel-item .th {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.g-rank-shot { overflow: hidden; }
.g-rank-shot .g-face svg { max-height: 40px; }

.g-face { width: 100%; height: 100%; position: relative; }
.g-face svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   十、搜索建议 + 轻提示
   ========================================================================== */

.g-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--g-line-2); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(16,35,58,.16);
  max-height: 380px; overflow-y: auto; z-index: 85;
  display: none;
}
.g-suggest.on { display: block; }
.g-suggest-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--g-line);
}
.g-suggest-item:last-child { border-bottom: 0; }
.g-suggest-item:hover { background: var(--g-blue-l); }
.g-suggest-item .th { width: 50px; height: 32px; flex-shrink: 0; }
.g-suggest-item .tx { min-width: 0; flex: 1; }
.g-suggest-item .tx b { display: block; font-size: 13px; color: var(--g-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-suggest-item .tx i { font-style: normal; font-size: 11px; color: var(--g-mut); }
.g-suggest-item .add { font-size: 12px; color: var(--g-blue); flex-shrink: 0; }
.g-suggest-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--g-mut); }

.g-notice {
  position: fixed; left: 50%; bottom: 108px; z-index: 95;
  transform: translate(-50%, 12px);
  max-width: 80vw;
  background: rgba(22,35,58,.95); color: #fff;
  font-size: 13px; line-height: 1.5;
  padding: 10px 18px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.g-notice.on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   十一、详情页小件
   ========================================================================== */

.g-inline-link { color: var(--g-blue); word-break: break-all; }
.g-inline-link:hover { text-decoration: underline; }
.g-this { font-size: 12px; color: var(--g-mut); margin-left: 4px; }

.g-cmp-table.small { font-size: 13px; }
.g-cmp-table.small th, .g-cmp-table.small td { padding: 9px 12px; }
.g-cmp-table.small thead th { position: static; }
.g-cmp-table.small .g-lab { width: 220px; min-width: 220px; }

.g-rel-list { padding: 4px 0; }
.g-rel-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; transition: background .14s; }
.g-rel-item:hover { background: var(--g-blue-l); }
.g-rel-item .th { width: 52px; height: 34px; flex-shrink: 0; }
.g-rel-item .tx { min-width: 0; }
.g-rel-item .tx b { display: block; font-size: 13px; color: var(--g-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-rel-item .tx i { display: block; font-style: normal; font-size: 11px; color: var(--g-mut); }

/* ==========================================================================
   静态内容区：列表结束后的常见问题
   卡片 → FAQ → 页脚。以前结果区的内滚动容器结束后会多出一截空白，
   现在文档流正常结束，FAQ 正好落在页脚上面。
   ========================================================================== */
.g-faq {
  margin: 42px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--g-line-2);
}

/* 详情页：FAQ 左、推荐文章右 */
.g-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--g-line-2);
  align-items: start;
}
.g-faq-wrap .g-faq { margin: 0; padding-top: 0; border-top: 0; }
.g-faq-side h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--g-ink);
}
.g-faq-side ul { margin: 0; padding: 0; list-style: none; }
.g-faq-side li { border-bottom: 1px solid var(--g-line); }
.g-faq-side li:last-child { border-bottom: 0; }
.g-faq-side li a {
  display: block;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--g-txt);
}
.g-faq-side li a:hover { color: var(--g-blue); }
@media (max-width: 1080px) {
  .g-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
/* 没有实拍图/后台上传图时的详情页占位 */
.g-dt-shot-ph {
  display: flex; align-items: center; justify-content: center;
  width: 72%; height: 72%;
  border: 1px dashed var(--g-line-2); border-radius: 10px;
  background: #fff; color: var(--g-mut);
  font-size: 14px; letter-spacing: 1px;
}
.g-faq-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--g-ink);
}
.g-faq-h small {
  font-size: 12px;
  font-weight: 400;
  color: var(--g-mut);
  letter-spacing: .5px;
}
.g-faq-sub { margin: 0; font-size: 13px; color: var(--g-mut); }
.g-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 18px;
  align-items: start;
}
.g-faq details {
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 13px 16px;
  background: #fff;
}
.g-faq details[open] { border-color: #cfe0ff; background: #fbfdff; }
.g-faq summary {
  position: relative;
  padding-right: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink);
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--g-mut);
  border-bottom: 1.6px solid var(--g-mut);
  transform: rotate(45deg);
  transition: transform .18s;
}
.g-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.g-faq details p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--g-txt);
}
.g-faq details a { color: var(--g-blue); }
.g-faq details a:hover { text-decoration: underline; }

/* ==========================================================================
   十二、响应式
   ========================================================================== */

/* 站上的 .c-container.max-width 在 1260 与 972 处换档，这里跟着换 */
@media (max-width: 1400px) {
  .g-cols { grid-template-columns: 184px minmax(0, 1fr); gap: 22px; }
  .g-rank-head, .g-rank-row {
    grid-template-columns: 40px 52px minmax(0, 1fr) minmax(100px, 190px) 96px 66px 68px;
    gap: 10px;
  }
  .g-dt-cols { grid-template-columns: minmax(0, 1fr); }
  .g-dt-top { grid-template-columns: 280px minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 1080px) {
  .g-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .g-side { position: static; }
  .g-side-body { max-height: none; padding-right: 0; overflow-x: hidden; }
  .g-side-h { padding-right: 0; }
  .g-side-h button { right: 0; }
  .g-facets-wrap {
    border-bottom: 1px solid var(--g-line-2); margin-bottom: 18px;
    overflow-x: hidden;
  }
  /* 手机端：筛选面板默认收起，只留一条「筛选条件」折叠条，让卡片紧跟 hero */
  .g-side-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 44px; padding: 0 14px; margin: 0 0 12px;
    border: 1px solid var(--g-line-2); border-radius: 8px;
    background: #fff; font-size: 14px; color: var(--g-ink); font-weight: 700;
  }
  .g-side-toggle i {
    width: 8px; height: 8px; flex-shrink: 0;
    border-right: 1.6px solid var(--g-mut); border-bottom: 1.6px solid var(--g-mut);
    transform: rotate(45deg); transition: transform .2s;
  }
  .g-side.open .g-side-toggle i { transform: rotate(-135deg); }
  .g-side .g-facets-wrap { display: none; }
  .g-side.open .g-facets-wrap { display: block; }
  .g-rank-head { display: none; }
  .g-rank-row { grid-template-columns: 36px 48px minmax(0, 1fr) 88px; }
  .g-rank-row .g-rank-bar, .g-rank-row .g-rank-note { display: none; }
  .g-kv { grid-template-columns: minmax(0, 1fr); }
  .g-kv > div:nth-child(2n+1) { border-right: 0; }
  .g-dt-top { grid-template-columns: minmax(0, 1fr); }
  .g-dt-shot { height: 200px; }
  .g-cmp-table thead th { position: static; }
  .g-pick-in { flex-wrap: wrap; }
  .g-pick-acts { width: 100%; }
  .g-pick-acts .g-btn { flex: 1; }
  .g-tool-r { width: 100%; margin-left: 0; }
  .g-tabs a { padding: 14px 10px; }
  .g-search { flex: 1 1 100%; margin-left: 0; }
}

@media (max-width: 700px) {
  .g-brand span { display: none; }      /* 窄屏把 GPU ATLAS 收掉，省一行 */
  .g-bar { gap: 0 14px; min-height: 0; padding: 10px 0; }
  .g-tabs a { padding: 8px 10px; font-size: 14px; }
  .g-kv > div { grid-template-columns: 104px minmax(0, 1fr); }
  .g-grid { grid-template-columns: minmax(0, 1fr); }
  .g-grid.list .g-card { flex-direction: column; align-items: stretch; }
  .g-grid.list .g-card-shot { width: auto; }
  .g-grid.list .g-card-shot-wrap { padding-left: 0; }
  .g-grid.list .g-card-foot { padding: 12px 14px; border-top: 1px solid var(--g-line); }
  .g-dt-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-dt-kv div { padding-bottom: 12px; }
  .g-h1 { font-size: 21px; }
  .g-hero { padding: 16px 16px; gap: 12px; margin-top: 12px; }
  .g-hero-t { font-size: 22px; }
  .g-hero-t small { display: block; margin: 4px 0 0; font-size: 12px; }
  .g-hero-sub { font-size: 13px; margin-top: 6px; }
  .g-hero-stats { width: 100%; }
  .g-hero-stat { text-align: left; }
  .g-hero-stat dd b { font-size: 20px; }
  .g-hero-stat + .g-hero-stat { padding-left: 14px; margin-left: 14px; }
  /* 工具条收紧：厂商 chips 一行横滑，排序和视图放第二行 */
  .g-tool { gap: 8px; padding-bottom: 10px; }
  .g-chips {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .g-chips::-webkit-scrollbar { display: none; }
  .g-chips { scrollbar-width: none; }
  .g-chip { flex: 0 0 auto; height: 30px; }
  .g-tool-r { width: 100%; margin-left: 0; justify-content: space-between; }
  .g-dt-name { font-size: 22px; }
  .g-calc-big { font-size: 32px; }
  .g-brand { width: 100%; }
  .g-faq-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .g-faq { margin-top: 32px; }
  .g-faq-h { font-size: 18px; }
}

/* 尊重系统的减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .g-page *, .g-notice, .g-pick, .g-card, .g-btn { transition: none !important; animation: none !important; }
  .g-card:hover { transform: none !important; }
}

/* 站上的 a 选择器会盖掉下面这些链接的颜色（.g-page a 的特异性比单个类高），
   这里用 a.xxx 的形式把特异性补回来。必须放在本文件最后。 */
.g-page a.g-card-name { color: var(--g-ink); }
.g-page a.g-card-name:hover { color: var(--g-blue); }
.g-page a.g-rank-name-link { color: var(--g-ink); }
.g-page a.g-inline-link { color: var(--g-blue); }
.g-page a.g-suggest-item { color: inherit; }
.g-page a.g-cmp-add { color: var(--g-mut); }
.g-page a.g-cmp-add:hover { color: var(--g-blue); }
.g-page a.g-cmp-link { color: var(--g-mut); }
.g-page a.g-cmp-link:hover, .g-page a.g-cmp-link.on:hover { color: var(--g-blue); }
.g-page a.g-cmp-link.on { color: var(--g-blue); font-weight: 700; }
.g-page a.g-btn { color: var(--g-ink); }
.g-page a.g-btn.primary { color: #fff; }
.g-page a.g-rel-item, .g-page a.g-pick-add { color: inherit; }

/* 移动端点按区域补齐（2026-10-22） */
@media (max-width: 700px) {
  .g-card-pick { min-height: 44px; padding: 8px 12px 8px 10px; }
  .g-card-pick input { width: 18px; height: 18px; }
  .g-card-name { min-height: 44px; }
  .g-chip { height: 40px; }
}