/* GooDu 独立搜索站 —— 样式总文件
 * ============================================================================
 *
 * 本文件分两段，**边界是页面角色**，不是「新旧」：
 *
 *   ① 公共基础（顶栏 / 品牌 / hint / loading / note …）
 *      —— 运维四页（ops / console / demands / dashboard 的 link 部分）与
 *      公开面共用。dashboard 不链本文件（它有自己的深色皮肤 dash-hud.css）。
 *      ⚠️ 这一段里任何一个选择器被删之前，先 grep 四个运维页与它们的 js：
 *         `.note` 就是个例子 —— 三页各自只重定义了颜色，盒子样式靠本文件。
 *
 *   ② 公开面皮肤（body.home / body.res 作用域）
 *      —— 2026-10-12 按用户批准的 prototypes/search-v1 图片样稿重排。
 *         唯一设计来源是 prototypes/search-v1/ui.css；本段是它的**移植**，
 *         不是重新创作。移植时刻意保留的三处适配：
 *           · 选择器全部加 body.home / body.res 作用域（运维页不受影响）
 *           · 样稿的 `.wrap` / `.foot` 只服务公开面（已确认无运维页使用）
 *           · 令牌用别名指向上面 --accent 四令牌（改品牌只改一处）
 *
 * ⚠️ 2026-10-12 同批删除的旧公开面样式：hero / searchbox / summary / facet /
 *    cards / table.rt / detail 三栏 / 抽屉 / body.searched。它们服务的
 *    「左筛选 + 中列表 + 右档案」三栏形态已被样稿的「标签行 + 5 列表格 +
 *    右侧渐进披露档案栏」取代 —— 留着一个不再渲染的选择器，下一个人会
 *    以为它是「暂时关掉的」，于是把它打开（样稿自己删 .vswitch 时写的
 *    理由，同样适用于这里）。
 */

:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #fafbfc;
  --border:    #e3e6ea;
  --border-2:  #eef0f3;
  --text:      #0f172a;
  --text-2:    #475569;
  --muted:     #8b95a5;
  /* 品牌三令牌 = 鼹鼠风格（2026-10-12 用户拍板「全部都换」）。
     采样自鼹鼠素材（D:\xshare\临时\66），设计源 prototypes/search-v1/ui.css：
     navy 是鼹鼠身体（品牌主色），dark 用于 hover 压深，soft/line 是选中与
     徽章的底色/边线。**黄 #fed51e 不进来** —— 它只做字标尾点（.name i.dot），
     大面积黄底在白底页面上发虚，那是样稿已验证的结论。 */
  --accent:    #103a7e;
  --accent-2:  #0b2b5e;
  --accent-bg: #eef3fb;
  --accent-line: #dbe6f8;
  --warn:      #b45309;
  --warn-bg:   #fffbeb;
  /* critical（严重）比 warn 更硬：warn 是「需要人介入」，critical 是
     「机制断了、有输入而输出为 0」（探测全失败 / 索引为空）。
     两级底色分开，是因为只靠文字颜色区分时，一屏琥珀色告警里那一条红的
     并不显眼 —— 而它恰恰是最该被先看到的那条。 */
  --crit:      #b91c1c;
  --crit-bg:   #fef2f2;
  --dead:      #94a3b8;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.12);

  /* ---- 公开面皮肤令牌（样稿 ui.css 的 :root，值一一对应）----
     品牌四令牌做**别名**而不是复制值：改品牌色只改上面 --accent 四处，
     公开面自动跟随。样稿里它们是独立字面量，照抄就会有两个地方要改，
     而漏改的那一处不报错。 */
  --brand:      var(--accent);
  --brand-dark: var(--accent-2);
  --brand-soft: var(--accent-bg);
  --brand-line: var(--accent-line);
  /* 字标尾点的品牌黄 —— 全页唯一一处黄（呼应鼹鼠的矿工帽）。 */
  --dot:   #fed51e;
  /* 公开面纸面白。运维面是 --bg 灰底，两者刻意分开：
     样稿的结论是「纯白底 + 大面积留白」，灰底只属于工作台。 */
  --paper: #ffffff;
  /* 结果标题用亮蓝而**不是**品牌色：四个参照站（Google/Bing/Baidu/Yandex）
     全都用亮蓝，用户扫一屏靠「蓝色 = 可点的结果」定位；用 navy 会和
     logo 混成一片。 */
  --link:  #1a4fd6;
  /* 中性色：刻意不用纯黑。Google 用的是 #202124，纯黑在纯白底上发涩。 */
  --ink:   #1f2328;
  --ink-2: #4b5563;
  --ink-3: #70757a;
  --line:  #e3e5e8;
  --line-2: #f1f3f4;
  --pill:  999px;
  /* 结果区列宽：652(结果) + 52(间距) + 336(档案) = 1040 内宽，与 Google 的 652 对齐。
     `.wrap` 自带 26px 左右内边距，所以 --col = 1040 + 52 = 1092。
     ⚠️ `.body` 不要再加一层左右内边距 —— 加了之后结果列会缩到 548，标题多折一行。 */
  --col: 1092px;
  /* 两级阴影 = 搜索框的「悬浮 / 聚焦」。照抄 Google 的观感：
     悬浮是「浮起来一点」，聚焦是「更明显且带一圈光晕」。 */
  --shadow-hover: 0 1px 6px rgba(32,33,36,.18);
  --shadow-focus: 0 1px 2px rgba(60,64,67,.30), 0 2px 8px 2px rgba(60,64,67,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* hidden 必须真的隐藏。
   本页多处用 grid/flex 控制显示，那些 display 声明会盖掉浏览器默认的
   `[hidden] { display: none }`，于是「隐藏」的区块照样占位 —— 首页/结果页
   切换、档案栏渐进披露都会失效。显式兜底，避免依赖优先级巧合。 */
[hidden] { display: none !important; }

/* ⚠️ 必须预留滚动条槽位 —— 否则「页面高度跨过视口高度」的任何操作
   都会让整页横向跳一下。
   实测：表格视图（10 条，scrollH=1779）有滚动条 ⇒ clientW=1425；
         很矮的页面没滚动条 ⇒ clientW=1440。
   `.wrap` 是 margin:0 auto 居中，于是容器左边缘在 193 ↔ 200 之间跳 7px。
   **受影响的远不止翻页**：改每页条数、换标签、换排序、展开档案栏 ——
   只要页面高度跨过视口，全都跳。
   scrollbar-gutter 在现代浏览器上「预留槽位但不画轨道」；
   老浏览器回退到 overflow-y: scroll（常驻轨道，观感略重但绝不跳）。 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   ① 公共基础（运维四页 + 公开面共用）
   ============================================================ */

/* ---------- 顶栏 ----------
   运维四页的直接消费者。公开面结果页的顶栏在下面 `.res .topbar`
   重新定义（白底、无 brand、sticky 位置相同）—— 两处刻意分开：
   运维顶栏带品牌与统计，公开顶栏只有 lockup + 搜索框 + 文档链接。 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
/* 品牌标识 = 鼹鼠图（mole-mark.png，256×256 透明底）。
   2026-10-12 前这里是字母徽章（accent 底方块 + 白字 G）—— 换成代言人
   是「全部都换」的一部分，图由 make-assets.py 从原始素材抠出真透明通道。 */
.brand .mark {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  flex: none;
}
.brand .mark img { width: 30px; height: 30px; display: block; }
/* 字标尾点的品牌黄 —— 全页唯一一处黄（呼应鼹鼠的矿工帽）。
   用 i 而不是 span：样式意图（点缀）与语义（无）分开。 */
.brand .name i.dot { font-style: normal; color: var(--dot); }
.brand .name { font-weight: 650; font-size: 15px; letter-spacing: -.2px; }
.brand .name em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  margin-left: 7px;
  font-size: 13px;
}
.topstats { display: flex; gap: 18px; color: var(--muted); font-size: 12.5px; }
.topstats b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 居中容器 ----------
   公开面专用（顶栏 / 标签行 / 结果区 / 页脚全部用它，logo 的左边缘和
   结果列的左边缘在同一条竖线上 —— Google 就是这么对齐的）。
   运维页用各自的 *-wrap，不经过这里。 */
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 26px; }

/* ---------- 提示 / 空态 / 加载 ----------
   `.hint` 家族是**跨页基础设施**：ops.js / console.js / demands.js 直接
   拼 `<p class="hint">`，且那三页没有在本地重定义它。删这里 = 运维页
   的空态全部失去盒子样式。 */
.hint {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 13.5px;
}
.hint.err { color: var(--warn); background: var(--warn-bg); border-color: #fcd9a4; }
/* 空结果里的操作区。
   空结果不只是「说一声没找到」——它要给下一步动作（清空筛选 / 触发发现），
   否则用户只能自己猜该怎么办。 */
.hintops { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hintnote { color: var(--muted); font-size: 11.5px; }

.loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

.ghost {
  height: 30px;
  padding: 0 13px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all .12s;
}
.ghost:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-bg); }
.ghost:disabled { opacity: .45; cursor: default; }

/* 可用性附注：「在线」是宽口径（拿到了响应），这一条说的是严口径（页面能打开）。
   ⚠️ 用 warn 色而不是红 —— 它是「值得注意」，不是「错误」：
   514 / 702 这类响应确实说明站在（只是拦我们），只是页面打不开。 */
.avail { display: inline-block; margin-left: 5px; font-size: 11px; color: var(--muted); }
.avail.never {
  color: var(--warn); background: var(--warn-bg);
  padding: 1px 6px; border-radius: 999px;
}

/* `.note` 的盒子样式在这里，颜色由各页自己加 —— ops / console / demands
   三页都只重定义了 `color/font-size/margin-top`（已 grep 确认）。
   ⚠️ 所以这段**不能删**，也不能只留颜色。 */
.note {
  margin-top: 26px; padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

/* ============================================================
   ② 公开面皮肤（prototypes/search-v1 移植，body.home / body.res 作用域）
   ============================================================ */

/* 公开面 = 纯白纸面。与运维面的 --bg 灰底分开（见 --dot/--paper 注释）。 */
body.home, body.res { background: var(--paper); color: var(--ink); }
body.home a, body.res a { color: inherit; text-decoration: none; }
body.home img, body.res img { display: block; }
body.home button, body.home input, body.home select,
body.res button, body.res input, body.res select { font-family: inherit; }

/* ---------- 品牌锁定（鼹鼠 + 字标） ----------
   首页 92px / 结果页顶栏 34px，同一套结构的两个尺寸（样稿原样）。
   ⚠️ 运维顶栏的 .brand 是另一套（34px 常驻 + 运营看板副标），不要合并。 */
.lockup { display: flex; align-items: center; gap: 12px; }
.lockup img { height: 44px; width: auto; }
.lockup .word {
  font-size: 30px; font-weight: 800; letter-spacing: -1.2px;
  color: var(--brand); line-height: 1;
}
/* 字标末尾的黄色句点 —— 唯一一处「品牌黄」。
   让整个标识只用两个颜色，比给字母上色更干净，也避开黄色在白底上发虚。 */
.lockup .word i { font-style: normal; color: var(--dot); }

/* ---------- 拼写纠正提示（Google 的 "Showing results for …" 那一行） ----------
   2026-10-12 用户指定照 Google 做，并点明了两行的**视觉权重不同**：
   第一行的词是**粗体蓝字**（那是结论），第二行的词是**蓝色不加粗**
   （那是补救，整行更淡）。这个差别不是装饰 —— 它决定了眼睛先落在哪一句。

   ⚠️ 两行用 `display: block` 堆叠，不是横排：Google 也是竖着的，
   而横排会把「结论」和「补救」读成同一句话的两个成分。 */
.spellnote {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
  text-align: left;
}
.spellnote .line1 { display: block; }
.spellnote .line1 a { color: var(--link); font-weight: 700; }
.spellnote .line2 {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3);
}
.spellnote .line2 a { color: var(--link); font-weight: 400; }
.spellnote a:hover { text-decoration: underline; }

/* ---------- 搜索框（页面上唯一的重元素） ---------- */
/* ⚠️ 静止态的边框用**品牌色**（navy `--brand`），不是中性灰线。
   2026-10-12 用户原话：「搜索框的外框，不应该用灰色的线条，应该是用一条
   我们的UI色系的蓝色线条」。参考站正是这个做法（Yandex 的搜索框就是一条
   主题色实线边框 + 纯白底），因为它让页面上唯一的重元素**属于品牌**，
   而灰线会把它降级成一个普通的输入控件。
   悬浮/聚焦仍靠两级阴影表达（照抄 Google 的观感），边框不再变化。 */
.sbox {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 7px 0 18px;
  background: var(--paper);
  border: 1px solid var(--brand);
  border-radius: var(--pill);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.sbox:hover  { box-shadow: var(--shadow-hover); border-color: var(--brand-dark); }
.sbox:focus-within { box-shadow: var(--shadow-focus); border-color: var(--brand-dark); }
.sbox .mag { flex: none; color: var(--ink-3); }
.sbox input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: 16px/1 var(--font); color: var(--ink);
}
.sbox input::placeholder { color: #9aa0a6; }
.sbox .go {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease;
}
.sbox .go:hover { background: var(--brand-dark); }

/* ---------- 设置菜单（右上角，两种形态共用） ----------
   对标 Yandex 的右上角菜单（2026-10-12 用户指定参考站）。
   ⚠️ 用 position:fixed 钉在**视口**右上角，而不是各自挂进首页/结果页：
   两块标记就是两处要同步的 id 与两套绑定逻辑，而它们迟早会分叉。
   一处标记 + fixed 定位，两种形态自动共用（公开面两种形态的 DOM 是同一份）。 */
.settings { position: fixed; top: 14px; right: 26px; z-index: 30; }
.settings .gear {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.settings .gear:hover { border-color: var(--brand); color: var(--brand); }
.settings .menu {
  position: absolute; top: 46px; right: 0;
  min-width: 232px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px -10px rgba(15,23,42,.28);
}
.settings .mrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.settings .mrow:hover { background: var(--brand-soft); color: var(--brand); }
.settings .mrow select {
  font: inherit; font-size: 12.5px; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 6px;
}
.settings .msep { border-top: 1px solid var(--line-2); margin: 6px 4px; }

/* ============================================================
   首页（body.home）
   ============================================================ */
.home { min-height: 100vh; display: flex; flex-direction: column; }
.home .stage {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center;
  /* 视觉中心略高于几何中心 —— 与 Google 一致。
     几何居中时整块看起来「往下掉」，因为下方留白总比上方多。 */
  justify-content: center; padding-bottom: 14vh;
}
.home .lockup img { height: 92px; width: auto; }
.home .lockup .word { font-size: 64px; letter-spacing: -2.6px; }
.home .lockup { margin-bottom: 34px; }
.home .sbox { width: min(584px, 90vw); height: 52px; }
.home .sbox input { font-size: 16px; }

/* 按钮行。2026-10-12 只剩「随便看看」一个按钮（「搜索」按钮删掉 ——
   搜索框右侧的箭头与回车都是提交入口，第三个同功能入口是纯冗余）。
   `justify-content:center` 是显式写出来的，不依赖「容器恰好收缩到内容宽度」
   这条隐含行为：将来再加一个按钮时，它仍然居中。 */
.home .acts { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-block; padding: 10px 22px;
  background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 6px;
  color: var(--ink-2); font-size: 14px; cursor: pointer;
}
.btn:hover { border-color: var(--line); box-shadow: 0 1px 1px rgba(0,0,0,.06); }
/* ⚠️ `.btn.primary` 两条规则已删（2026-10-12）：唯一的消费者是那个被删掉的
   「搜索」按钮。留着不渲染的样式，下一个人会以为它只是「暂时关掉的」。 */

/* 示例词：参照站里 Bing / Baidu / Yandex 都有「热词」这一行。
   它替代了原首页那段三行的产品说明 —— 用**例子**说「这里能搜什么」，
   比用句子说更短，也更符合「文字极少」。 */
/* 首页 chips（.home .try）——**已删除**（2026-10-12）：
   用户：「这一行内容也是不要的，它与搜索框内现在的内容是重复的」。
   示例词现在只存在于搜索框的 placeholder 与「随便看看」的随机词里。 */

/* ⚠️ 此处原有 `.home .meta`（语料规模 + 语言行）。
   2026-10-12 随那一行**整段删除**：规模数字与目标差着数量级（放出来是自曝
   短板），语言入口搬进了右上角设置菜单 —— 于是这一行什么都不剩了。
   留一个不再渲染的选择器，下一个人会以为它是「暂时关掉的」。 */

/* ============================================================
   结果页（body.res）
   ============================================================ */
/* 白底 + display:block 覆盖基础 .topbar 的 flex（那套是给运维顶栏的，
   这里只有一个子容器 .in，布局由 .in 自己做）。 */
.res .topbar {
  position: sticky; top: 0; z-index: 20;
  display: block;
  padding: 14px 0; background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.res .topbar .in { display: flex; align-items: center; gap: 22px; }
.res .topbar .lockup { flex: none; }
.res .topbar .lockup img { height: 34px; width: auto; }
.res .topbar .lockup .word { font-size: 24px; letter-spacing: -1px; }
.res .topbar .sbox { flex: 1 1 auto; max-width: 692px; height: 44px; }
/* ⚠️ 此处原有 `.res .topbar .right`（两个文档页链接 + 语言选择器）。
   2026-10-12 全部移走：链接与页脚重复（用户：只放右下角即可），语言进设置菜单。
   于是顶栏只剩「品牌 + 搜索框」——与参照站一致，一眼只有一个焦点。
   `.right` 容器也随之从 HTML 删掉了，不留在那里等一个不会再来的元素。 */

/* 标签行：参照站都有（Google「全部/图片/视频」、Baidu「网页/资讯」）。
   我们只有一种结果类型，所以这排 tab 指向的是**真实存在的筛选轴**
   （在线 / 自动发货 / 支付通道数），而不是凭空造出来的「图片 / 视频」分类。
   ⚠️ 用 button 而不是样稿里的 a：role=tablist 的语义要求，且没有 href 要阻止。 */
.res .tabs { border-bottom: 1px solid var(--line-2); }
.res .tabs .in { display: flex; gap: 26px; }
.res .tabs button {
  padding: 11px 0; font-size: 13.5px; color: var(--ink-3);
  background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px; cursor: pointer;
}
.res .tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.res .tabs button:hover { color: var(--ink); }
.res .tabs button .n {
  font-size: 12px; color: var(--ink-3); margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

.res .body {
  padding: 12px 0 44px;
  display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 52px;
}
/* ⚠️ 样稿里还有一条 `.res .body.no-panel`（单列态）。本实现**不移植它**：
   窄屏单列由下面 900px 媒体查询直接完成，而桌面端没有任何路径会
   「不要第二列」—— 关掉档案栏只是回到 #pick 空态（样稿的渐进披露）。
   留一个没有人切换的类，就是留一个「暂时关掉的」假开关。 */

.res .count {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--ink-3); padding: 6px 0 10px;
}
/* flex-wrap 与 .sel{flex:none} 是对样稿的两处小改：截断提示徽章让这一行
   比样稿的 mock 更长，不换行会把右侧排序控件挤没。 */
.res .count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.res .count .q { font-weight: 600; color: var(--ink); }
/* 截断提示单独成块、带底色：它是「你看到的不是全部」的告警，
   混在正文里就会被当成修辞。 */
.res .count .trunc {
  display: inline-block; margin-left: 7px; padding: 1px 9px;
  border-radius: 999px; background: var(--warn-bg);
  border: 1px solid #fcd9a4; color: var(--warn); font-size: 12px;
}
.res .count .sel { display: flex; align-items: center; gap: 7px; color: var(--ink-3); flex: none; }
.res .count .sel select {
  font: inherit; font-size: 12.5px;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- 合规提示条（反诈法第三十条：业务活动中应作出防范提示） ---------- */
/* ⚠️ 2026-10-19：必须是 block，不能是 flex。这段正文混排 <b> 强调与普通文本，
   flex 会把每个元素节点/文本节点变成一个独立的 flex item ⇒「…legal liability」
   与「. This page is generated…」被拆成两行，句号被孤立到行首（用户截图证据：
   「完全没考虑用户体验」）。flex 只适用于「图标 + 文字」这类并列子元素，
   不适用于一段带行内强调的正文。 */
.notice {
  display: block;
  margin: 10px 0 0; padding: 9px 13px;
  background: #fffdf5; border: 1px solid #f3e8c8; border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: #6b5a20;
}
.notice b { font-weight: 600; }
.notice a { color: #8a6100; text-decoration: underline; white-space: nowrap; }

/* ---------- 结果表（唯一视图） ----------
   2026-10-09 用户拍板「不要 list，只要表格」，列表视图整条删除。
   表格回答的是「哪个更…」：域名定位，其余四列横向可比。

   ⚠️ 第一列**只有域名**，没有站点名（2026-10-08 用户决定）。
   站点名大量是「XX号购买平台」这类**站点自述**，把它排进结果列表等于
   由我们**复述**一遍违法交易的招揽语 —— 而《反电信网络诈骗法》第二十五条
   第二款点名的正是「搜索」的合理注意义务。域名是**事实**（谁在哪儿），
   自述名称是**内容**（它在卖什么）—— 只放前者。
   ⚠️ 刻意**没有**的两列：
     商品数量  用户原话：「这个评价指标没意义，还容易误导用户」——
               用户搜「某个游戏账号」时关心的是**这一种**商品在不在，
               而站点 SKU 总数与这件事无关。
     收录时间  用户原话：「收藏时间不要在列表中，放到右侧去」——
               已移到档案栏的「首次收录」（那里能带上完整日期）。

   ⚠️ 表头**不可点**（样稿的 th 有 cursor:pointer，但样稿自己的 JS 也没实现
   它）：排序的唯一入口是上方 count 行的排序选择器。两个入口就要同步两份
   状态，而漏同步的那一次不报错。 */
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtable th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dtable td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtable tbody tr { cursor: pointer; }
.dtable tbody tr:hover { background: #fafbfc; }
.dtable tbody tr.on { background: var(--brand-soft); }
/* 域名列给回 38%：7 列时收窄是为了给数字列让位，删掉两列后让出来的宽度
   不还给域名就只是空着。**没有**留一条「.c-site span」的样式 ——
   留着一个没人用的选择器，下一个人会以为它是给站点名准备的。 */
.dtable .c-site { width: 38%; }
.dtable .c-site b { display: block; font-weight: 500; color: var(--link); font-size: 13px; }
.dtable .c-site b a:hover { text-decoration: underline; }
.dtable .n { text-align: right; font-variant-numeric: tabular-nums; }

/* 响应速度的「信号格」（2026-10-12 用户要求，判据与阈值见 app.js 的 signalBars）。
 *
 * 两个编码通道：**格数**（data-l，0~4）+ **颜色**（--sig-on 随档位变）。
 * 双通道是刻意的 —— 色弱用户靠格数读，黑白打印靠格数读，颜色只是加速识别。
 *
 * 未点亮的格用 --line（与表格分隔线同色），点亮用 --sig-on。
 * 档位 → 颜色：3/4 绿（快）· 2 琥珀 · 1 橙 · 0 红（慢到不可用）。 */
.sig {
  width: 15px; height: 11px; margin-left: 6px;
  vertical-align: -1px; flex: none;
}
.sig rect { fill: var(--line); }
.sig[data-l="1"] rect:nth-child(1),
.sig[data-l="2"] rect:nth-child(1), .sig[data-l="2"] rect:nth-child(2),
.sig[data-l="3"] rect:nth-child(1), .sig[data-l="3"] rect:nth-child(2),
.sig[data-l="3"] rect:nth-child(3),
.sig[data-l="4"] rect { fill: var(--sig-on); }
.sig[data-l="4"], .sig[data-l="3"] { --sig-on: #1a7f37; }
.sig[data-l="2"] { --sig-on: #b7791f; }
.sig[data-l="1"] { --sig-on: #dd6b20; }
.sig[data-l="0"] { --sig-on: #c53030; }
/* 首列（域名）与上方 count 行、notice 条左边缘对齐 —— 去掉 th/td 的 10px 左内边距。
   样稿原样；不加这一条，域名列会比其他内容整体缩进 10px。 */
.dtable th:first-child, .dtable td:first-child { padding-left: 0; }
/* 缺失 ≠ 0（项目硬规则 17）：0 / 空 / null 一律显示「未识别」。
   ⚠️ 单位不能跟着「未识别」一起拼：会拼出「未识别 种」这种话。 */
.dtable .na { color: #c4c7cc; }
.dtable .yes { color: #1a7f37; }
.dtable .no  { color: var(--ink-3); }

/* ---------- 分页 + 每页条数 ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 0 0; border-top: 1px solid var(--line-2); margin-top: 4px;
}
.pager .pages { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pager .pages a, .pager .pages button, .pager .pages span {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: grid; place-items: center; border-radius: 6px; color: var(--link);
}
.pager .pages button { border: 0; background: none; cursor: pointer; font: inherit; }
.pager .pages a:hover, .pager .pages button:hover { background: var(--line-2); }
.pager .pages .cur { color: var(--ink); font-weight: 700; background: var(--brand-soft); }
.pager .pages .off { color: #c4c7cc; }
/* 每页条数：用户点名要 10 / 20 / 50。放在分页行右侧 ——
   它和「翻页」是同一件事（一次看多少 vs 看第几屏），不该分两处。
   ⚠️ 分页是**客户端**对已返回批次（上限 50）做的：/api/search 没有 offset，
   「看全部 153 条」要走服务端分页，那是另一个决定（见 app.js doSearch 注释）。 */
.pager .perpage { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.pager .perpage select {
  font: inherit; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); color: var(--ink-2);
}

/* ---------- 右侧档案栏（对标 Google 的知识面板） ----------
   默认隐藏，点任意结果才出现 —— 渐进式披露。 */
.panel {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 18px; align-self: start;
}
/* ⚠️ 档案栏标题是**域名**，不是站点名（2026-10-09 用户拍板）：
   站点名是站点自己起的，摆在档案栏顶部等于我们**叫它这个名字**（=背书），
   而它可能叫「海外社交账号批发网」。域名是客观的。
   word-break 给长域名兜底（www.haiwaichong.com 在窄栏里要能换行）。 */
/* 档案栏标题行：域名 + 关闭钮（样稿 .hd2 / .close 原样移植）。 */
.panel .hd2 { display: flex; align-items: center; justify-content: space-between; }
.panel .close {
  border: 0; background: none; color: var(--ink-3); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.panel .close:hover { color: var(--ink); }
.panel h2 { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; word-break: break-all; }
/* 档案栏的十字段：标签列**按内容定宽且永不换行**，值列吃掉剩余空间。
 *
 * ⚠️ 样稿原文是 `grid-template-columns: 82px 1fr` —— 那是**按中文短标签定的**：
 * 中文标签最长 5 字（「支付通道」）约 65px，82px 放得下。而我们的标签要过
 * 9 种语言，`Payment channels` 约 95px、俄语 `Количество проверок` 约 129px，
 * 固定 82px 会让它们在窄栏里折成两行（用户 2026-10-12 截图回报：
 * 「严重影响美观」）。故此处**刻意偏离样稿**：列宽从「猜一个够用的数」
 * 改成「按最长的那个标签定」。
 *
 * 为什么值列是 `minmax(0, 1fr)` 而不是 `1fr`：`1fr` 在 grid 里等价于
 * `minmax(auto, 1fr)`，不会缩到自身 min-content 以下 —— 一个长值
 * （「2467 ms · P95 2587 ms」）就能把整行顶宽、让面板溢出。
 * `minmax(0, 1fr)` 让值列该缩就缩、该折就折，标签永远不动。 */
.panel dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 12px; font-size: 13px; }
.panel dt { color: var(--ink-3); white-space: nowrap; }
.panel dd { margin: 0; color: var(--ink); }
.panel dd .ok { color: #1a7f37; font-weight: 600; }
.panel dd .off { color: var(--ink-3); }
.panel dd .susp { color: var(--warn); }
.panel dd .na { color: var(--ink-3); }
.panel .sep { border-top: 1px solid var(--line-2); margin: 15px 0; }
.panel .more { font-size: 13px; color: var(--link); }
.panel .more:hover { text-decoration: underline; }
.panel .note { font-size: 11.5px; line-height: 1.5; color: #9aa0a6; margin: 6px 0 0; }

/* 档案栏内的分区标题（在售商品 / 收录判定 / 域名）。
   刻意比旧版 .dsec 收敛：档案栏是 336px 的窄栏，大标题会吃掉正文。 */
.panel .sec { margin-top: 18px; }
.panel .sec > h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 650;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* 标题旁的「这是干什么的」提示。用在会产生对外请求的动作上（按需深抓），
   让它别看起来像默认行为。 */
.panel .sec > h3 .tag {
  padding: 1px 8px; border-radius: 999px;
  background: var(--warn-bg); border: 1px solid #fcd9a4; color: var(--warn);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* 空态：没点任何结果时的提示 —— 它同时是「不给任何站特殊照顾」的视觉声明 */
.pick {
  border: 1px dashed var(--line); border-radius: 10px; padding: 22px 18px;
  text-align: center; color: var(--ink-3); font-size: 12.5px; line-height: 1.7;
  align-self: start;
}
.pick img { width: 96px; margin: 0 auto 10px; opacity: .9; }
.pick b { display: block; color: var(--ink-2); font-weight: 600; font-size: 13px; margin-bottom: 3px; }

/* ---------- 在售商品（L2 深抓）样式——**已删除**（2026-10-12） ----------
   用户拍板：「让用户自己去看就行，我们不需要在我们的网站去深度抓取」。
   入口从档案栏彻底移除后，`.prodbar / .prodlist / .pnote / .prodsort /
   .gtags / .gtag` 全部失去了消费者。留着不渲染的样式，
   下一个人会以为它只是「暂时关掉的」（与样稿自己删 .vswitch 同一理由）。 */
/* 收录判定：解释这个站点为什么进（或没进）索引。
   剔除必须可解释——用户看到某站没出现时，要能查到原因。 */
.rel { border-radius: 8px; padding: 11px 13px; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface-2); }
.rel .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.rel .head .kind { font-weight: 600; }
.rel ul.why { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.75; }
.rel.kept { border-color: var(--brand-line); background: var(--brand-soft); }
.rel.kept .head .kind { color: var(--brand); }
.rel.dropped { border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: 0 8px 8px 0; }
.rel.dropped .head .kind { color: var(--warn); }

/* 关联域名清单（档案栏「关联域名 N 个」的展开）。 */
.doms { display: flex; flex-wrap: wrap; gap: 7px; }
.doms span {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 9px;
  word-break: break-all;
}

/* ---------- 页脚 ----------
   2026-10-12 起页脚只有**一行**：一句极简说明 + 三个二级页入口。
   整段免责声明搬去 /en/about —— 它挂在搜索框同一视线区时会喧宾夺主
   （用户原话：「一看就喧宾夺主了，很容易抢占中心搜索框及周边的视线争夺」）。
   ⚠️ 精简的是**展示位置**，不是义务：全文一字未删，在 /en/about 上；
   结果页那条 notice（提示 + 警示法律责任）仍按法条要求常驻。 */
.foot {
  flex: none; border-top: 1px solid var(--line-2);
  padding: 14px 0; font-size: 12.5px; color: var(--ink-3);
}
/* 定位句：整页的**唯一**一句话，居中。
   2026-10-12 用户：「Global index of storefronts selling digital goods.
   这句话应该集中居中才对」—— 左对齐时它挂在左边缘，读起来像页脚的边角料；
   居中之后它是这一行的主体，也才配得上「整站对外只说这一句」的定位。 */
.foot .tagline {
  margin: 0 0 6px; color: #9aa0a6; text-align: center;
}
/* 页脚导航挂载点在公开面渲染为空（nav.js 在「可见项只剩当前页」时不渲染）。
   万一将来它渲染了，这一行仍然居中 —— 页脚是一句话，不该有第二个重心。 */
.foot .appnav { justify-content: center; }
/* 旧 .foot .mini / .foot .grp（一行说明 + 三个二级页入口）已删：
   2026-10-12 用户要求页脚只留定位句，其余入口全部收进设置菜单。 */


/* ---------- 披露浮层（结果页 count 行的【?】） ----------
   两段说明（公开运营指标声明 + 采集来源声明）不再常驻页面，
   而是在计数行放一个【?】，悬停或点击展开（见 app.js 的 initTip）。
   理由与免责声明搬家同源：常驻的长段说明会与搜索框争夺视线。 */
.count { position: relative; }
/* 问号与它的浮层的**共同定位容器**：浮层靠它才能挂在按钮上，而不是挂在整行上。
   `inline-flex` 让容器宽度恰好等于按钮，于是 `right: 0` 就等于「按钮的右边缘」。 */
.tipwrap { position: relative; display: inline-flex; flex: none; margin-left: 2px; }
.tipbtn {
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 11.5px; line-height: 1;
  color: var(--ink-3); background: var(--paper);
  border: 1px solid var(--line); border-radius: 50%; cursor: help;
}
.tipbtn:hover, .tipbtn[aria-expanded="true"] {
  color: var(--brand); border-color: var(--brand);
}
/* 浮层挂在按钮右下角：`right: 0` 对齐按钮右边缘，`top: 100%` 紧贴按钮下沿
   （原来写的是 `top: 26px; left: 0` —— 那两处正是「隔得太远」的来源）。
   `margin-top: 6px` 留一点呼吸，不能不留（贴死会显得和按钮是同一块）。 */
.tippanel {
  position: absolute; z-index: 25; top: 100%; right: 0; margin-top: 6px;
  width: min(520px, 88vw); padding: 11px 13px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,.28);
  font-size: 12px; line-height: 1.7; color: var(--ink-2);
  text-align: left; /* 页脚之类的外层若改成居中，别把这段长文也带偏 */
}
.tippanel p { margin: 0 0 7px; }
.tippanel p:last-child { margin-bottom: 0; }

/* ---------- 设置菜单里的多行分组（外观） ---------- */
.settings .mrow.mcol { flex-direction: column; align-items: stretch; gap: 7px; }
.settings .radios { display: flex; flex-direction: column; gap: 6px; }
.settings .radios label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.settings .radios input { accent-color: var(--brand); margin: 0; }

/* ============================================================
   深色皮肤（设置菜单的「一律深色」，或「跟随系统」且系统为深色）
   ============================================================
   挂点是 `<html data-theme="dark">`，由 app.js 的 applyTheme() 设置。
   ⚠️ 三件事必须一起做，只做前两件会得到「背景黑了、某些块还是白的」：
     ① 覆盖公开面令牌（--paper/--ink/--line/--link…）
     ② 覆盖**公共基础段**用到的令牌（--bg/--surface/--text/--muted…）——
        `.hint` / `.ghost` / `.note` 这些盒子用的是它们；
     ③ 覆盖少数**硬编码色**（表格行 hover、notice 条、售罄红字、可用性徽章）。
   ⚠️ 运维四页不设 data-theme，因此这一段不会影响工作台。
 */html[data-theme="dark"] {
  --bg:        #101215;
  --surface:   #191c21;
  --surface-2: #1d2026;
  --border:    #2c3036;
  --border-2:  #23262b;
  --text:      #e8eaed;
  --text-2:    #b8bcc4;
  --muted:     #9aa0a6;
  --paper:     #16181c;
  --ink:       #e8eaed;
  --ink-2:     #b8bcc4;
  --ink-3:     #9aa0a6;
  --line:      #2c3036;
  --line-2:    #23262b;
  --link:      #8ab4f8;
  --brand-soft: #1b2436;
  --brand-line: #2b3a55;
  --warn-bg:   #2f2513;
  --warn:      #f0c674;
  --crit-bg:   #3a1d1d;
  --crit:      #f28b82;
  --shadow-hover: 0 1px 6px rgba(0,0,0,.55);
  --shadow-focus: 0 1px 2px rgba(0,0,0,.6), 0 2px 8px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"] body.home,
html[data-theme="dark"] body.res { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .dtable tbody tr:hover { background: #1d2026; }
html[data-theme="dark"] .dtable .yes,
html[data-theme="dark"] .panel dd .ok { color: #6dd58c; }
/* 信号格在深色下整体提亮：原值（#b7791f/#dd6b20）在深底上饱和度不足，
   2 格与 1 格会糊成同一色。亮度统一抬到 0.55 以上。 */
html[data-theme="dark"] .sig[data-l="4"],
html[data-theme="dark"] .sig[data-l="3"] { --sig-on: #6dd58c; }
html[data-theme="dark"] .sig[data-l="2"] { --sig-on: #e3b341; }
html[data-theme="dark"] .sig[data-l="1"] { --sig-on: #f0883e; }
html[data-theme="dark"] .sig[data-l="0"] { --sig-on: #f85149; }
html[data-theme="dark"] .sig rect { fill: #3d444d; }
html[data-theme="dark"] .notice {
  background: #2a2415; border-color: #4a3f22; color: #e8d9a8;
}
html[data-theme="dark"] .hint {
  background: var(--surface); border-color: var(--border); color: var(--muted);
}
html[data-theme="dark"] .hint.err { background: var(--warn-bg); border-color: #5a4a22; }
html[data-theme="dark"] .settings .gear,
html[data-theme="dark"] .settings .menu,
html[data-theme="dark"] .sbox,
html[data-theme="dark"] .tippanel { background: var(--paper); }
html[data-theme="dark"] .tipbtn { background: var(--paper); }
html[data-theme="dark"] .btn { background: #23262b; border-color: #23262b; color: var(--ink-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .res .body { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .res .topbar .in { flex-wrap: wrap; gap: 12px; }
  /* 窄屏时搜索框会顶到右边缘，给右上角的设置按钮让出位置 ——
     不让的话按钮会压在搜索框上（那是「浮层挡住操作对象」，最难用的一种重叠）。 */
  .res .topbar .in { padding-right: 48px; }
  .res .topbar .sbox { max-width: none; order: 3; flex-basis: 100%; }
  .res .tabs .in { gap: 18px; overflow-x: auto; }
  /* 窄屏：浮层改为**向右**展开（`left: 0`）。它挂在按钮右下角、宽 520px，
     窄屏时按钮常在本行靠左的位置，往左展开会顶出视口左边缘被裁掉。
     ⚠️ 这是本页唯一一处「同一构件两种锚法」，改动锚法时两处都要看。 */
  .tippanel { right: auto; left: 0; }
  .home .lockup .word { font-size: 44px; }
  .home .lockup img { width: 64px; height: 64px; }
  .settings { top: 10px; right: 12px; }
  .foot .row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .notice { font-size: 12px; }
}