/* =====================================================================================
   无界搜索 · 样式
   =====================================================================================
   设计令牌全部集中在 :root，任何组件都不写死颜色 —— 否则浅色模式下必然有一块是坏的。
   响应式三层：手机（默认，≤640）/ 平板（641–960）/ 桌面（>960）。
   默认写手机，向上用 min-width 增强 —— 反过来写("桌面优先 + max-width 覆盖")在
   手机浏览器上会因为几像素的差异走进桌面分支，那是移动端最常见的一类错位。
   ===================================================================================== */

:root {
  color-scheme: dark light;

  --bg:        #0b0f1a;
  --bg-soft:   #0e1422;
  --fg:        #e8ecf4;
  --fg-2:      #c3cbdb;
  --muted:     #8b96ab;
  --card:      #131a29;
  --card-2:    #172033;
  --line:      #1e2739;
  --line2:     #263149;
  --input-bg:  #0f1522;

  --accent:    #5aa2ff;
  --accent-2:  #a78bfa;
  --brand:     #3b82f6;
  --brand-2:   #8b5cf6;

  --ok:        #34d399;
  --warn:      #fbbf24;
  --err:       #f87171;
  /* 热搜「热」的橙（2026-09-27）。单开一个令牌而不是复用 --warn：
     --warn 是"警告"语义（黄），这里要的是参考图里那种橙，两者混用会让
     将来调警告色时顺手把热搜也改掉。 */
  --hot:       #fb923c;
  /* 热搜「沸」的深红（比 --err 更重）。 */
  --boil:      #ef4444;
  /* 热/新/沸三个小标签的前景色：底色是固定语义色，所以文字恒为白，
     **不跟主题走**（用 --bg 会在深色模式下变成深字贴在橙底上）。 */
  --lab-fg:    #ffffff;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 8px 28px rgba(0, 0, 0, .34);
  --maxw:      860px;
  --pad:       clamp(14px, 4vw, 22px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:       #f6f8fc;
    --bg-soft:  #eef2f9;
    --fg:       #101728;
    --fg-2:     #2b3446;
    --muted:    #5c6880;
    --card:     #ffffff;
    --card-2:   #f4f7fc;
    --line:     #e3e9f2;
    --line2:    #d7dfeb;
    --input-bg: #ffffff;
    --accent:   #2563eb;
    --accent-2: #7c3aed;
    --ok:       #059669;
    --warn:     #b45309;
    --err:      #dc2626;
    --hot:      #ea580c;
    --boil:     #b91c1c;
    --shadow:   0 8px 24px rgba(16, 23, 40, .10);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
/* 结果页加宽 —— 两栏（结果列 + 侧栏）需要横向空间。
   首页刻意保持窄：居中的大搜索框在窄栏里更好看，也没必要为 5 个推荐词拉满屏。 */
.wrap.wide { max-width: 1180px; }

/* ---------- 顶栏 ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 14px; height: 54px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800;
}
.nav .spacer { flex: 1 1 auto; }
/* ★ `flex: 0 0 auto` + `white-space: nowrap` 是**必须的**，不是顺手加的：
 *   结果页把搜索框放进顶栏后，窄屏上链接会被挤到比自身内容还窄，
 *   于是「无界圈」竖着排成一列单字（无/界/圈）—— 页面不报错，但一眼就是坏的。
 *   让链接**不参与收缩**、把收缩让给搜索框，才不会再出现逐字换行。 */
.nav .links { display: flex; gap: 14px; align-items: center; font-size: 13.5px; flex: 0 0 auto; }
.nav .links a { color: var(--muted); white-space: nowrap; }
.nav .links a:hover { color: var(--fg); }

/* 首页：顶栏透明，叠在 hero-band 背景图上，露出 logo 背景图 */
.nav.home {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* 首页顶栏保持完全透明，背景图从顶栏后整幅透出；不随滚动补任何背景 */
.nav.home .brand { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.nav.home .links a { color: rgba(255,255,255,.88); text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.nav.home .links a:hover { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
/* 让 hero-band 上移到顶栏之后，背景图从顶栏后面露出来 */
.hero.hero-home { margin-top: -55px; }
.hero-home .hero-band { padding-top: 55px; }

/* ---------- 首页 hero ---------- */
.hero { padding: clamp(48px, 14vh, 130px) 0 clamp(22px, 5vh, 40px); text-align: center; }
.hero.small { padding: clamp(18px, 4vh, 30px) 0 6px; text-align: left; }
.hero h1 {
  margin: 0 0 10px; font-size: clamp(26px, 6.4vw, 44px); line-height: 1.2; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--fg) 20%, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.sub { margin: 0 0 26px; color: var(--muted); font-size: clamp(13.5px, 2.6vw, 15.5px); }
.hero.small h1 { font-size: clamp(19px, 4.4vw, 24px); background: none; color: var(--fg); -webkit-text-fill-color: currentColor; }
.hero.small p.sub { margin-bottom: 16px; font-size: 13px; }

/* ---------- 首页整幅横幅（品牌区：文字 logo + 搜索框 + 热搜面板） ----------
   横幅 .hero-band 铺满整页顶部：背景图 cover 铺满，未启用时回退品牌渐变。
   内容自上而下三件 —— 文字 logo「无界搜索」→ 搜索框 → 热搜面板，整体靠下叠在图上。
   「无界搜索」四字链到 /?q=<主题词>，点它直接搜背景图对应的主题。
   .hero-home 复用 .hero 但去掉顶部留白，让横幅紧贴顶栏。

   ★ ::before 是**上淡下深的纵向渐变蒙版**（不是一层均匀压暗）：
       · 顶部留通透，背景图露出来；logo 靠自身 text-shadow 保证可读；
       · 下半部压暗，给搜索框 / 热搜面板一个稳定的暗底 —— 这是"白字叠花背景"
         能读清的根本保障，比逐元素加阴影可靠得多。
   ★ 热搜面板 .hotbox 用**毛玻璃**（半透明深底 + backdrop blur）：既让背景图透过来，
      又给条目一个规整的"着陆面"，避免文字直接飘在插画上显得杂乱。
      不支持 backdrop-filter 的浏览器回退到更实的半透明深底（见下面 @supports not）。

   ★ 高度分三档（这是"扁横幅放不下三件内容"的解法，见下方媒体查询）：
       · >1200px：aspect-ratio 1600/650 宽度驱动 + min-height 640px 兜底
         （横幅必须比"三件内容"高出足够多，内容才谈得上"靠下"；否则窄屏时横幅随宽度变矮、
         内容几乎填满、靠下排列形同虚设）。背景图左右轻裁（装饰图无碍）；
       · 641–1200px：改由 min-height 固定高度（扁图放进高容器，左右轻裁，装饰图无碍）；
       · ≤640px：高度完全交给内容（单列 10 条热搜不能被裁），背景只当氛围底。 */
.hero.hero-home { padding: 0; }
.hero-band {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 650;   /* 与出图 1920×780 **完全同比例**（1600/650 = 1920/780 ≈ 2.4615），
                                 宽屏零裁切；给三组内容留「靠下」的空间。
                                 ⚠️ 别被旧注释误导：这里不是 1600×560（那是 v18 之前的出图尺寸）。 */
  min-height: 640px;          /* ★ 关键：横幅下限高度。否则窄屏时横幅随宽度变矮，三件内容几乎填满、
                                 靠下排列就没了效果（见文件上方说明） */
  max-height: 92vh;           /* 极宽屏防止横幅过高 */
  display: flex;
  flex-direction: column;     /* logo 在最上、搜索框居中、热搜在最下，三者贴底叠在背景图上 */
  align-items: center;
  justify-content: flex-end;   /* 三组内容整体靠下排列（logo→搜索框→热搜贴着横幅下半部） */
  gap: clamp(16px, 3vh, 28px);
  padding: 20px var(--pad) 42px;
  overflow: hidden;
  color: #fff;
  background-color: var(--brand);
  /* 默认用品牌渐变兜底；有 doodle 背景图时由 PHP 注入的 --ws-bg 变量覆盖。 */
  background-image: var(--ws-bg, linear-gradient(120deg, var(--brand), var(--brand-2)));
  background-size: cover;
  background-position: center;
}
/* =====================================================================================
   简洁 / 清屏模式（html.lite）—— 一整套独立的柔和浅色配色
   =====================================================================================
   ★ 2026-09-30 重做。用户反馈"简洁模式下主题配色看着不舒服"，根因两条，都不是"白底"本身：
     ① `.hero-band::before` 是给背景图压暗用的**上淡下深深色蒙版**，清屏后它照旧生效 ——
        于是"纯白底"被洗成一块上浅下深的**脏灰渐变**，而顶栏是纯白，灰横幅与白顶栏的
        接缝就是"不舒服"的最大来源；
     ② 热搜序号 / 热新沸标签用的仍是"给深色横幅看"的高饱和色（#ff9d8f / #ffb26b /
        #ffd166 和实心高饱和块）—— 那几色在白底上要么几乎看不见，要么吵得刺眼。
   所以简洁模式不再只是"把底色刷白"，而是：近白底 + 墨蓝字 + 细线 + 极淡阴影，
   品牌色降一档饱和。改动全部收在 `html.lite` 前缀下，**不影响**有背景图时的深色外观。
   ===================================================================================== */
html.lite {
  /* 清屏后让整页与横幅同调：若系统是深色主题，页面其余部分也跟着亮起来，
     不会出现"白横幅 + 黑页面"的割裂。 */
  color-scheme: light;
  --bg:        #f7f9fd;
  --bg-soft:   #eef3fa;
  --fg:        #161f31;
  --fg-2:      #2b3446;
  --muted:     #5c6880;
  --card:      #ffffff;
  --card-2:    #f4f7fc;
  --line:      #e8eef7;
  --line2:     #dbe3ef;
  --input-bg:  #ffffff;
  --accent:    #2f6fe4;
  --shadow:    0 10px 30px rgba(24, 45, 85, .08);
  /* 品牌渐变降饱和：原 #3b82f6→#8b5cf6 在白底上偏"电子紫"，安静不下来。 */
  --brand:     #4a86f0;
  --brand-2:   #7d7cf0;

  /* 简洁模式专用令牌（只有本模式引用，不污染全局主题） */
  --lite-ink:       #22304a;                       /* 正文墨色：不用纯黑，白底上纯黑偏硬 */
  --lite-ink-2:     #33415a;
  --lite-line:      #e8eef7;
  --lite-wash:      #f4f8fd;
  --lite-shadow:    0 10px 30px rgba(24, 45, 85, .08);
  --lite-shadow-s:  0 6px 18px rgba(24, 45, 85, .07);
}
html.lite .hero-band {
  /* 近白而非死白：顶部纯白，底部一丝极淡冷灰，与下方浅色页面自然衔接。 */
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #f7fafe 100%) !important;
  background-color: #ffffff !important;
  color: var(--lite-ink);
}
/* ★ 关键一条：清掉深色蒙版。没有它，"白底"永远会是一块脏灰。 */
html.lite .hero-band::before { background: none; }

/* 文字 logo：白底上转渐变红（原深墨色偏沉、压不住视觉冲击），用 background-clip:text 做文字渐变 */
html.lite .hero-band .brand-logo-text {
  background: linear-gradient(135deg, #d81e2c 0%, #ff5a5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}
html.lite .hero-band .brand-logo-sub { color: var(--muted); opacity: 1; text-shadow: none; }

/* 首页顶栏：纯白 + 一条细线，与横幅无缝同色 */
html.lite .nav.home {
  background: #ffffff;
  border-bottom-color: var(--lite-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.lite .nav.home .brand { color: var(--lite-ink); text-shadow: none; }
html.lite .nav.home .links a { color: var(--muted); text-shadow: none; }
html.lite .nav.home .links a:hover { color: var(--brand); }

/* 搜索框：深色横幅上那层 `0 14px 34px rgba(0,0,0,.30)` 在白底上会发灰发脏，
   换成细边 + 极淡阴影；聚焦环也从高饱和蓝圈降一档。 */
html.lite .hero-band > .search input[type=search] {
  background: #ffffff;
  color: var(--lite-ink);
  border-color: #9bbcf2;                    /* ★ 与默认态同调的高端蓝（白底上取更柔的一档，加深） */
  box-shadow: var(--lite-shadow-s);
}
html.lite .hero-band > .search input[type=search]::placeholder { color: #9aa7bb; }
html.lite .hero-band > .search .box svg { color: #5f7cb8; }
html.lite .hero-band > .search input[type=search]:focus {
  border-color: #8fb1ee;
  box-shadow: var(--lite-shadow-s), 0 0 0 3px rgba(47, 107, 220, .18);
}
html.lite .hero-band > .search button { box-shadow: var(--lite-shadow-s); }

/* 热搜面板：浅色卡片（原本是深色毛玻璃，白底上像贴了一块黑板），白底上再毛玻璃也无意义 */
html.lite .hero-band .hotbox {
  background: #ffffff;
  border-color: #a9c4f1;                    /* ★ 高端蓝描边（白卡片上的淡蓝，加深一档） */
  color: var(--lite-ink);
  box-shadow: var(--lite-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.lite .hero-band .hotbox-hd { border-bottom-color: #c7daf8; }
html.lite .hero-band .hotbox-title { color: var(--lite-ink); }
html.lite .hero-band .hotbox-title:hover { color: var(--brand); }
html.lite .hero-band .hotbox-title .arw { opacity: .45; }
html.lite .hero-band .hotbox-swap { color: var(--muted); }
html.lite .hero-band .hotbox-swap:hover { color: var(--brand); background: var(--lite-wash); }
html.lite .hero-band .hotitem a:hover { background: var(--lite-wash); }
html.lite .hero-band .hotkw { color: var(--lite-ink-2); }
html.lite .hero-band .hotitem a:hover .hotkw { color: var(--brand); }
/* 序号：基色中性灰；榜首/前三名改成"柔而稳"的红橙 —— 替掉深色横幅用的
   #ff9d8f / #ffb26b / #ffd166（那三色在白底上几乎看不见）。 */
html.lite .hero-band .hotno { color: #98a5b9; }
html.lite .hero-band .hotno.pin { color: #d95a48; }
html.lite .hero-band .hotno.n1  { color: #dd6a4e; }
html.lite .hero-band .hotno.n2  { color: #dd8f45; }
html.lite .hero-band .hotno.n3  { color: #cf9f3c; }
/* 热 / 新 / 沸标签：实心高饱和色块在白卡片上太吵，改成"淡底 + 深字"的轻标签 */
html.lite .hero-band .hotlab.lab-hot  { background: #fdf0e2; color: #b0561b; }
html.lite .hero-band .hotlab.lab-new  { background: #fdeaea; color: #bf4440; }
html.lite .hero-band .hotlab.lab-boil { background: #fbe6e4; color: #a8302a; }
/* 首页"简洁/背景模式"切换按钮（在搜索框下方居中，见下方 .lite-toggle 定义）。 */
/* 简洁/背景模式切换按钮 —— 从右上角移到了**搜索框正下方**、居中，做成一个精致的小药丸。
   默认（有背景图）是「高端蓝描边」的半透明深色药丸，与整站蓝调统一；
   开启简洁模式（白底，此时也带 .on）时变成「高端蓝实心填充」，作为"当前处于清屏态"的明确信号。 */
.lite-toggle {
  position: relative;            /* 仍在文档流内（search 与 hotbox 之间），靠 align-self 居中 */
  align-self: center;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 17px;
  border-radius: 999px;
  color: #dbe8ff;
  background: rgba(12, 18, 32, .42);
  border: 1px solid rgba(96, 165, 250, .55);     /* 高端蓝描边 */
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.lite-toggle .lt-ico { flex: 0 0 auto; }
.lite-toggle:hover { background: rgba(12, 18, 32, .60); border-color: rgba(96, 165, 250, .85); }
.lite-toggle:active { transform: translateY(1px); }
/* 简洁模式（白底）下：按钮变高端蓝实心，明确"当前处于清屏态" */
html.lite .lite-toggle {
  color: #fff;
  background: linear-gradient(135deg, #1f4fb0, #3a72d6);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 8px 22px rgba(31, 79, 176, .46);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.lite .lite-toggle:hover {
  background: linear-gradient(135deg, #2a61c9, #3f7ae6);
  border-color: rgba(255, 255, 255, .7);
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 减淡蒙版：顶部更通透，让预设背景图清晰透出（logo 靠自身 text-shadow 保证可读）；
     底部保留一定压暗，给搜索框/热搜面板稳定暗底。*/
  background: linear-gradient(180deg,
      rgba(6, 10, 20, .04) 0%,
      rgba(6, 10, 20, .16) 42%,
      rgba(6, 10, 20, .46) 100%);
}
/* 三件内容都抬到蒙版之上，并统一约束宽度，形成居中的"内容栏" */
.hero-band > .brand-logo,
.hero-band > .search,
.hero-band > .hotbox,
.hero-band > .lite-toggle { position: relative; z-index: 1; }
.hero-band > .search,
.hero-band > .hotbox { width: min(92vw, 620px); }
/* 文字 logo「无界搜索」+ 副站名 */
.hero-band > .brand-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  background: none;
}
.brand-logo-text {
  font-size: clamp(30px, 6.6vw, 50px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,.60), 0 0 5px rgba(0,0,0,.40);
}
.brand-logo-sub {
  font-size: clamp(11px, 2.4vw, 14px);
  font-weight: 600;
  letter-spacing: .32em;
  text-indent: .32em;   /* 抵消 letter-spacing 给末字带来的右偏，视觉居中 */
  text-transform: uppercase;
  opacity: .90;
  text-shadow: 0 1px 10px rgba(0,0,0,.60);
}

/* —— 搜索框：恒为白底深字（英雄区本就是图片区，像 Google/百度首页），
      浅色/深色模式下都是同一块清晰的视觉重心，配浮起阴影 —— */
.hero-band > .search { gap: 10px; }
.hero-band > .search input[type=search] {
  background: #fff;
  color: #101728;
  border: 1.5px solid #1f4fb0;                         /* ★ 高端蓝描边（加深一档） */
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.hero-band > .search input[type=search]::placeholder { color: #7a8494; }
.hero-band > .search .box svg { color: #1f4fb0; }      /* 搜索图标也用高端蓝 */
.hero-band > .search input[type=search]:focus {
  border-color: #2f6bdc;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 0 3px rgba(31, 79, 176, .34);
}
.hero-band > .search button {
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  /* ★ 首页「搜索」提交按钮统一到高端蓝渐变（原继承 --brand→--brand-2 是蓝偏紫 #3b82f6→#8b5cf6，
     与搜索框/热搜面板的高端蓝描边放一起紫调会跳）。与 .lite-toggle 同款，两态一致。
     结果页顶栏的 .nav .search button 不在本次范围，仍走 --brand 渐变。 */
  background: linear-gradient(135deg, #1f4fb0, #3a72d6);
}

/* —— 热搜面板：毛玻璃卡片，给条目一个规整的着陆面 —— */
.hero-band .hotbox {
  max-width: 620px;
  margin: 0;
  padding: 18px 18px 15px;
  border: 1px solid rgba(47, 107, 220, .62);          /* ★ 高端蓝描边（毛玻璃上的蓝边，加深一档） */
  border-radius: 18px;
  color: #fff;
  background: rgba(12,17,28,.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  overflow: hidden;        /* 兜底：即便极个别超长词也只裁切在面板内，不溢出整页 */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-band .hotbox { background: rgba(12,17,28,.74); }
}
.hero-band .hotbox-hd {
  margin: 0 0 10px;
  padding: 0 2px 9px;
  border-bottom: 1px solid rgba(47, 107, 220, .42);
}
.hero-band .hotbox-title { color: #fff; }
.hero-band .hotbox-title:hover { color: #dbeafe; }
.hero-band .hotbox-swap { color: rgba(255,255,255,.70); }
.hero-band .hotbox-swap:hover { color: #fff; background: rgba(255,255,255,.14); }
.hero-band .hotlist { column-gap: 26px; row-gap: 5px; }
.hero-band .hotitem a { padding: 8px 8px; border-radius: 9px; }
.hero-band .hotitem a:hover { background: rgba(255,255,255,.10); }
.hero-band .hotno { color: rgba(255,255,255,.52); }
.hero-band .hotno.pin { color: #ff8f8f; }
.hero-band .hotno.n1  { color: #ff9d8f; }
.hero-band .hotno.n2  { color: #ffb26b; }
.hero-band .hotno.n3  { color: #ffd166; }
.hero-band .hotkw { color: rgba(255,255,255,.94); }
.hero-band .hotitem a:hover .hotkw { color: #fff; }

/* —— 横幅高度分档（说明见文件上方 .hero-band） —— */
@media (max-width: 1200px) {
  .hero-band { aspect-ratio: auto; min-height: 640px; max-height: none; }
}
@media (max-width: 640px) {
  .hero-band {
    min-height: 0;
    gap: 15px;
    padding: 20px 16px 24px;
    background-position: center 26%;
  }
  .brand-logo-text { font-size: clamp(27px, 8vw, 38px); }
  .hero-band .hotbox { padding: 14px 14px 11px; border-radius: 16px; }
  .hero-band .hotitem a { padding: 7px 6px; }
}
/* —— 超小屏（≤380px）：面板更紧凑、字号略收，避免窄屏内挤压溢出 —— */
@media (max-width: 380px) {
  .hero-band { padding: 18px 12px 22px; gap: 13px; }
  .brand-logo-text { font-size: clamp(24px, 8.5vw, 32px); }
  .hero-band .hotbox { padding: 12px 11px 9px; border-radius: 14px; }
  .hotbox-hd { gap: 6px; margin-bottom: 4px; }
  .hero-band .hotitem a { padding: 6px 5px; }
  .hotkw { font-size: 13px; }
  .hotno { font-size: 12px; }
}
/* —— 大屏（≥1600px）：内容栏加宽，避免在超宽显示器上显得过小、留白过多 —— */
@media (min-width: 1600px) {
  .hero-band > .search,
  .hero-band > .hotbox { width: min(90vw, 760px); }
  .hero-band .hotbox { max-width: 760px; }
  .hotbox { max-width: 760px; }
}
/* 后台：当前涂鸦预览 */
.doodle-preview img {
  width: min(92vw, 520px); height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 32, 64, .16);
  background: #fff;
  object-fit: contain;
}
/* 后台：历史缩略图（宽横幅，按宽度给一个不大不小的尺寸） */
.doodle-thumb {
  width: 220px; height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(20, 32, 64, .14);
  background: #fff;
  object-fit: contain;
  vertical-align: middle;
}

/* ---------- 预设主题背景库（季节 / 节气 / 节假日 / 自定义） ---------- */
.slot-group { margin-top: 16px; }
.slot-group-title { font-size: 15px; font-weight: 700; color: var(--ink, #142); margin: 0 0 8px; }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.slot-card {
  border: 1px solid #e7e9f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.slot-thumb {
  width: 100%;
  aspect-ratio: 1600 / 560;
  background: #f3f4f8 center/cover no-repeat;
  overflow: hidden;
}
.slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-thumb.slot-empty {
  display: flex; align-items: center; justify-content: center;
  color: #9aa0b0; font-size: 13px; border-bottom: 1px solid #eee;
}
.slot-info { padding: 8px 10px 4px; }
.slot-name { font-size: 14px; font-weight: 700; color: #18203a; }
.slot-sub { font-size: 12px; color: #8089a0; margin-top: 2px; }
.slot-actions { padding: 8px 10px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-block; font-size: 11px; line-height: 1; padding: 3px 6px;
  border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.tag-cur { background: #e7f7ec; color: #1a8a4a; border: 1px solid #bfe9cd; }

/* ---------- 搜索框 ---------- */
.search { display: flex; gap: 9px; align-items: stretch; width: 100%; }
.search .box { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.search .box svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input[type=search] {
  width: 100%; padding: 15px 15px 15px 43px; font-size: 16px; font-family: inherit;
  color: var(--fg); background: var(--input-bg);
  border: 1px solid var(--line2); border-radius: var(--radius); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input[type=search]::placeholder { color: var(--muted); }
.search input[type=search]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.search button {
  flex: 0 0 auto; padding: 0 22px; font: inherit; font-weight: 600; font-size: 15px;
  color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  transition: filter .15s, transform .06s;
}
.search button:hover { filter: brightness(1.1); }
.search button:active { transform: scale(.985); }
.search button[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- 顶栏里的搜索框（结果页左上角）----------
 * ★ 2026-09-21 用户要求：结果页的搜索框搬到顶栏（原来 logo 的位置），
 *   随后又要求 **logo 加回来、放在搜索框左侧** —— 所以现在顶栏第一行是
 *   `[.brand logo] [.search 搜索框] … [.links]`，见 index.php。
 *
 * ★ 为什么必须另写一组尺寸 —— `.search` 是**首页大搜索框**的度量
 *   （padding 15px + font-size 16px ≈ 50px 高），塞进 54px 高的顶栏里会顶破；
 *   而且 `.search` 是 `width: 100%`，在顶栏那条 flex 行里会把 `.spacer`
 *   的位置吃光，右侧那排导航链接直接被挤出屏幕。
 *   所以这里同时收窄高度、并把 flex 从 `100%` 改成 `0 1 440px`。
 *
 * ★ specificity 说明：`.nav .search input[type=search]`(0,3,1) 稳赢
 *   基础的 `.search input[type=search]`(0,2,1)，不需要 `!important`。 */
.nav .search { flex: 0 1 440px; gap: 7px; }
.nav .search .box svg { left: 12px; }
.nav .search input[type=search] { padding: 9px 12px 9px 36px; font-size: 14px; border-radius: 9px; }
/* ★ `flex: 0 0 auto` + `white-space: nowrap` 和 `.nav .links` 那两条是**同一类防护**：
 *   顶栏一行里现在有 logo + 搜索框 + 链接，横向一紧张，可收缩的元素就轮流被压。
 *   按钮被压到窄于自身内容时，「搜索」两个字会**竖排成两行**（搜/索）——
 *   页面不报错、也不出横向滚动条。让按钮不收缩，把收缩全部交给输入框。 */
.nav .search button {
  padding: 0 15px; font-size: 13px; border-radius: 9px;
  flex: 0 0 auto; white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
/* 曾经有一条 `.hero.small .chips { justify-content: flex-start; }`（结果页那排推荐词左对齐）。
   2026-09-21 结果页的 hero 整块被删（搜索框搬进顶栏），这个组合不再可达 —— 删掉。
   ⚠️ 别因此把 `.hero.small` 或 `.chips` 当成"顺带一起清"的东西：
   `.hero.small` 仍活在 404.html / admin.php / submit/index.php / sso/callback.php 四个页面，
   `.chips` 仍活在首页 hero 里。死的只是这个**组合**。 */
.chip {
  font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line2);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: .15s; font-family: inherit;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* =====================================================================================
   热搜：首页「无界热搜」口袋版 + /top 完整榜单
   =====================================================================================
   形态取自用户 2026-09-27 给的参考图（百度首页搜索框下那块「百度热搜」）：
   小标题 + 右侧「换一换」、带序号的词条、前三名序号着色、词尾挂「热 / 新 / 沸」小标签。
   同一批样式两个页面复用，区别只在外层容器：
     · 首页 `.hotbox`  —— 两列 × 5 行，插在 hero 搜索框下面（`.hero` 是居中的，这里要拉回左对齐）
     · `/top`  `.board` —— 单列完整榜单，带时间窗口 tab

   ⚠️ 序号列宽要定死（`.hotno`/`.bno`），否则第 10 行（两位数）会把整列词往右推一格，
      看起来像"整个列表歪了"。`font-variant-numeric: tabular-nums` 是配套的 ——
      比例数字的 "1" 比 "8" 窄，序号列会随内容抖动。
   ===================================================================================== */

.hotbox { max-width: 620px; margin: 34px auto 0; text-align: left; overflow: hidden; }
.hotbox-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hotbox-title {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 14.5px; font-weight: 700; color: var(--fg);
  min-width: 0;            /* 允许在极窄场景下收缩，不顶破整行（标题很短，正常不会触发） */
  white-space: nowrap;
}
.hotbox-title:hover { color: var(--accent); }
.hotbox-title .arw { margin-top: 1.5px; opacity: .5; }
.hotbox-title:hover .arw { opacity: 1; }
.hotbox-swap {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; color: var(--muted);
  background: none; border: 0; padding: 5px 8px; border-radius: 8px;
  cursor: pointer; transition: .15s;
}
.hotbox-swap:hover { color: var(--accent); background: var(--card); }
.hotbox-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 手机默认单列；641px 以上才是「两列 × 5 行」（与百度首页同形）。 */
.hotlist { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.hotitem a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 4px 6px 0; border-radius: 8px; min-width: 0;
}
/* ★ grid 项默认 min-width:auto，会被内部 nowrap 长词条撑到「最小内容宽度」，
   导致 1fr 列无法收缩、两列 grid 整体被顶宽，.hotkw 的 ellipsis 永远没机会触发 → 长词溢出面板。
   归零后列才能收缩到 1fr 份额，ellipsis 才生效（各端都不会再横向溢出屏幕）。 */
.hotitem { min-width: 0; }
.hotitem a:hover .hotkw { color: var(--accent); }

.hotno {
  flex: 0 0 auto; min-width: 15px; text-align: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); line-height: 1.6;
}
.hotno.pin { color: var(--err); display: inline-flex; align-items: center; }
.hotno.n1 { color: var(--err); }
.hotno.n2 { color: var(--hot); }
.hotno.n3 { color: var(--warn); }
.hotkw {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; color: var(--fg-2); line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hotlab {
  flex: 0 0 auto; align-self: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px; color: var(--lab-fg);
  letter-spacing: .02em;
}
.hotlab.lab-hot  { background: var(--hot); }
.hotlab.lab-new  { background: var(--err); }
.hotlab.lab-boil { background: var(--boil); }

@media (min-width: 641px) {
  /* ★ `grid-auto-flow: column` 是"两列怎么分"的关键：默认的 row 会让
     第 6 条回到第一行第二列，两列读起来就变成了 1,6 / 2,7 …（错行）。
     column 才是 1–5 在左、6–10 在右。 */
  .hotlist {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 30px;
    row-gap: 0;
  }
}

/* ---------- /top 完整榜单 ---------- */
.board-wrap { max-width: 720px; margin: 0 auto; }
.board-hd { margin: 4px 0 18px; }
.board-hd h1 {
  margin: 0 0 6px; font-size: clamp(23px, 5vw, 31px); letter-spacing: -.6px;
}
.board-sub { margin: 0; color: var(--muted); font-size: 13px; }
.board-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.board-tab {
  font-size: 13px; color: var(--muted); background: var(--card);
  border: 1px solid var(--line2); padding: 6px 14px; border-radius: 999px;
  transition: .15s;
}
.board-tab:hover { color: var(--accent); border-color: var(--accent); }
.board-tab.on { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }

.board {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.board li + li { border-top: 1px solid var(--line); }
.board a { display: flex; align-items: baseline; gap: 13px; padding: 12px clamp(13px, 4vw, 18px); }
.board a:hover { background: var(--card-2); }
.board a:hover .bkw { color: var(--accent); }
.bno {
  flex: 0 0 auto; width: 22px; text-align: center;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.bno.n1 { color: var(--err); }
.bno.n2 { color: var(--hot); }
.bno.n3 { color: var(--warn); }
.bkw {
  flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bheat {
  flex: 0 0 auto; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.board-empty {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 28px 18px; text-align: center; color: var(--muted);
}
.board-note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* =====================================================================================
   结果区：百度式两栏（左结果列 + 右侧栏）
   =====================================================================================
   移动优先：默认**单列堆叠**（侧栏落到结果下面），961px 以上并排。
   反过来写（桌面优先 + max-width 覆盖）在手机上会因为几像素差异走进桌面分支 ——
   那是移动端最常见的一类错位。

   `min-width: 0` 不是装饰：grid/flex 项默认 `min-width: auto`，而结果条里的
   `.item .u`（URL 行）是 `white-space: nowrap` + 溢出省略。少了这一行，一个特别长
   的 URL 会把整个列撑破、页面出现横向滚动条。这个坑只在"长 URL + 两栏"同时成立时
   才复现 —— 正好是结果页的常态。
   ===================================================================================== */
.results { padding-bottom: 70px; }
.rcol  { min-width: 0; }
.rside { min-width: 0; }

.sec { margin-top: 20px; }
.sec > h2 {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 11px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .03em;
}
/* 曾经有一条 `.sec > h2 .n`（蓝色数字角标，给"索引结果 N"用）。
   2026-09-20 用户要求把结果列表的标题行整行删掉，它没有使用者了 —— 删掉。
   与下面 `.tag.local` 同一条规矩：**没有使用者的样式必须走**，
   否则下一个需要"数字角标"的人会以为它是个通用类名，而它其实已经死了。
   注意 `.hot .n`（右栏热词后面的次数）是**另一个**选择器，仍在用。 */
.sec > h2 .tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
/* 曾经有一条 `.tag.local`（绿色，"本站索引"专用）。结果列合并成一列、不分来源之后
   它没有使用者了 —— 删掉。留着的话，下一个需要"绿色小标签"的人会以为它是个语义
   类名，而它其实是一个已经死掉的来源标记。 */

.card {
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: clamp(14px, 3.4vw, 19px);
}

/* ---------- ① AI 回复 ---------- */
.ai-card { position: relative; overflow: hidden; }
.ai-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.ai-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-size: 12.5px; color: var(--muted);
}
.ai-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex: 0 0 auto;
}
.ai-head .who { font-weight: 600; color: var(--accent); }
.ai-body {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-size: 15.5px; line-height: 1.82; color: var(--fg);
}
/* 打字光标：只在"正在生成"时出现 */
.caret {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 2px;
  vertical-align: -2px; background: var(--accent); border-radius: 1px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* 阶段指示条 —— 这是"不让用户看不到在行动"的核心 */
.phase {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--muted); padding: 2px 0 10px;
}
.phase[hidden] { display: none; }
.spinner {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.phase .txt { transition: opacity .2s; }

/* 已完成的阶段留一行小字（"查过什么"是可回溯的） */
.trail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.trail span {
  font-size: 11.5px; color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}
.trail span.done::before { content: "✓ "; color: var(--ok); }
.trail span.fail::before { content: "× "; color: var(--err); }

/* AI 不可用时的说明块 */
.ai-fallback { font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.ai-fallback b { color: var(--fg-2); }

/* ---------- ② 「同步状态」整块已删除（2026-09-20）----------
   用户要求界面上不显示"这个是 AI 创作 / 那个来自无界圈"，于是那行
   "AI 回复已同步到无界圈"（`#syncRow` + `.sync .pill` + 那个可点开的链接）
   连同它的 DOM 一起删了。样式留着只会让后来的人以为还有东西在用 —— 清空。

   `publish` 事件**仍然发送**（它是"回答到底有没有写出去"的唯一可观测点），
   但前端只往 console 留痕，不上屏 —— 见 assets/app.js 与 api/ai-stream.php。 */

/* ---------- 结果条目 ---------- */
.list { display: flex; flex-direction: column; gap: 9px; }
.item {
  display: block; background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 13px 15px; transition: .16s;
}
.item:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.item .t { display: block; font-size: 15.5px; font-weight: 600; color: var(--fg); line-height: 1.45; }
.item .u { display: block; font-size: 12px; color: var(--ok); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 6px;
}
.item .m { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  color: var(--muted); font-size: 11.5px; margin-top: 8px; }
.item .m .chan {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}

/* =====================================================================================
   全网结果（2026-09-22 加）
   =====================================================================================
   ★ 这一段与上面的"本站索引结果"**必须看起来不一样**，这不是审美问题：
     索引结果的承诺是"我们收录了这些"，而全网结果是我们刚从网上抓来的、
     内容属于别人的网站。两者长得一样而不标来源，就是在把第三方的页面
     伪装成本站的收录。

   ⚠️ 2026-09-22 用户要求删掉了这里的**两处文案**：标题上的「来自网络」角标、
     以及一段「下面是互联网上关于…（经搜索引擎检索）…」的说明。
     于是"标来源"这件事只剩下面三个**视觉信号**（都不是文字）：

     · 卡片**虚线**边框（索引结果是实线）——"这不是我们的资产"；
     · **来源域名**做成彩色标签而不是灰色附属文字；
     · 悬停时边框转成 warn 色。

     ★ 这是本轮唯一一处**有意让步**的地方，写下来以免以后被误读成疏漏：
       去掉的是"用一段话解释来源"，**不是隐藏来源** ——
       来源域名仍在每张卡片上（`.src`），链接是 `nofollow` + 新窗口外链，
       点一下就知道内容来自哪个站。如果哪天要再削减，
       请保留域名标签：它是唯一还在说"这段内容是谁的"的东西。

   颜色用 `--warn` 而不是 `--err`：全网结果是正常功能，不是错误状态。

   ★ 下面两条选择器（`.tag.tag-web` / `.note.note-web`）随文案一起删掉了。
     留在这里的是**别让它们回来**的提醒：`_css_check.py` 里有"死样式"那一条，
     但它守的是文件名清单里的几个 —— 这两条要人工留意。
   ===================================================================================== */
.web-item { border-style: dashed; }
.web-item:hover { border-color: var(--warn); }
.item .m .src {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn);
}

/* =====================================================================================
   官网直达（2026-09-23 加）
   =====================================================================================
   认证官网库命中时，这一张卡片会在结果列**最前面**（用户要求"搜索结果第一个
   应该出现百度官网"）。所以它的样子要一眼能和下面的结果区分开 ——
   用户需要立刻知道"这是本站核准过的官方入口"，而不是又一条普通结果。

   做法只有两条规则，都刻意很轻：
     · 实线 + `--accent` 描边（普通结果 / 全网结果都是灰线，全网还是虚线）；
     · 「官网」小签用 `--accent`，与索引卡片的分类签（`.m .chan`）同色系 ——
       它是**内容属性**而不是来源标签，用同一种"属性签"的视觉语言表达。
   ⚠️ 刻意**不做**金色/盾牌/加粗大标题那类"认证徽章"：我们只是人工核对过域名，
      把视觉做得比证据重，就是在替用户下他没下的判断。
   ===================================================================================== */
.official-item { border-color: color-mix(in srgb, var(--accent) 55%, var(--line2)); }
.official-item:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.item .m .official-badge {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
/* 「已核验」用 `--ok`：与「官网」签分得开，且它是"机器复核过"而不是"人工标了官网"。 */
.item .m .official-ver {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok);
}

/* ---- 官网卡片两栏（需求 D：右侧空白放广告位）---- */
.official-card { display: flex; gap: 14px; align-items: stretch; }
.official-card .official-item { flex: 1 1 auto; margin: 0; }
.official-card.has-ad .official-item {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.official-ad { flex: 0 0 268px; display: flex; }
.official-ad .offad {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 100%; padding: 13px 15px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  border: 1px solid var(--line2); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  text-decoration: none; color: var(--fg); transition: .16s;
}
.official-ad .offad:hover {
  border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none;
}
.offad .offad-tag {
  align-self: flex-start; font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); margin-bottom: 5px;
}
.offad .t { font-size: 15px; font-weight: 600; color: var(--fg); line-height: 1.4; }
.offad .s { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.offad .u { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-all; }

/* 窄屏：两栏改上下堆叠，广告块接在官网卡下面 */
@media (max-width: 720px) {
  .official-card { flex-direction: column; gap: 0; }
  .official-card .official-item { border-radius: var(--radius) var(--radius) 0 0; }
  .official-card.has-ad .official-item {
    border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-right: 1px solid var(--line2);
  }
  .official-ad { flex-basis: auto; }
  .official-ad .offad {
    border: 1px solid var(--line2); border-top: 0; border-left: 1px solid var(--line2);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* =====================================================================================
   无界圈（2026-09-22 加）
   =====================================================================================
   索引与无界圈从"合并成一列"改成**分两段**之后，这一段必须有标题（用户要求
   索引在上、无界圈在下）—— 否则用户看到两段列表，分不清哪一段是哪儿。

   标题沿用 `.sec > h2` 的通用样式，这里只加一条**分隔感**：与上一段之间多留一点空。
   为什么不用横线或色块：结果列本来就长，再加装饰会让"两段结果"变成
   "两个页面区块"，而它们其实是一个答案的两半。
   ===================================================================================== */
#quanSection { margin-top: 26px; }

/* =====================================================================================
   右侧栏：热搜 + 推广位
   =====================================================================================
   两个板块共用 `.side-sec`；`.hot` 与 `.ad` 是各自的条目形态。
   右栏在桌面端 sticky（见文件末尾的 961px 媒体查询）—— 结果列很长时，
   热搜和推广位一直留在视野里；移动端堆叠在结果下面，不粘。
   ===================================================================================== */
.side-sec { margin-top: 20px; }
.side-sec > h3 {
  margin: 0 0 11px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .03em;
}

/* ---------- 热搜 ---------- */
.hot {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius-sm);
  transition: .16s;
}
.hot:hover { border-color: var(--accent); text-decoration: none; }
.hot .k {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hot .n {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 推广位 ---------- *
 * ★ 视觉上必须"看得出来是广告"：带一个写死的「推广」角标（见 inc/ads.php），
 *   底色比热搜略深、带虚线边框 —— 让它与自然结果在**形状**上就不同，
 *   而不是只靠一行小字。伪装成自然结果是违规的，也是骗人的。 */
.ad {
  display: block; position: relative;
  padding: 12px 13px; margin-bottom: 8px;
  background: var(--card-2); border: 1px dashed var(--line2); border-radius: var(--radius-sm);
  transition: .16s;
}
.ad:hover { border-color: var(--accent); text-decoration: none; }
.ad .ad-tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent);
  padding: 1px 7px; border-radius: 4px;
}
.ad .t { display: block; font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.45; }
.ad .s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 5px;
}
.ad .u { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ---------- 空 / 降级 ---------- */
.note {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.75;
}
.note b { color: var(--fg-2); }
.note p { margin: 0; }
.note p + p { margin-top: 7px; }
.note .diag { font-size: 11px; opacity: .7; font-family: ui-monospace, Menlo, Consolas, monospace; }
.note.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* 骨架屏（还没数据时占位，让布局不跳） */
.skel { background: var(--card-2); border-radius: 8px; height: 13px; margin: 8px 0;
  animation: pulse 1.4s ease-in-out infinite; }
.skel.w60 { width: 60%; } .skel.w80 { width: 80%; } .skel.w40 { width: 40%; }
@keyframes pulse { 0%, 100% { opacity: .55 } 50% { opacity: .95 } }

/* ---------- 页脚 ---------- */
.foot {
  margin-top: 34px; padding: 16px 0 30px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; line-height: 1.8;
  text-align: center;
}

/* ---------- 窄屏（≤640px）：结果页顶栏改成两行 ----------
 * 一行装不下：390px 屏上「搜索框 + 无界圈/提交站点/登录」实测会把每个链接挤成
 * **一列单字**（无/界/圈 竖着排）—— 而"装不下"的表现是逐字换行、不是溢出，
 * 所以光看"有没有横向滚动条"是发现不了的（第一版就是这么漏过去的）。
 * 管理员登录后还会多出「后台」「退出」两项，一行更不可能装下。
 *
 * 所以窄屏上让顶栏换行：
 *   **第一行 = logo 图标 + 搜索框**（logo 在左，这是用户要求的形态），
 *   导航链接缩到第二行右对齐。这样链接数量再怎么变都装得下。
 *
 * ★ 只对结果页生效（`.hasq`，见 index.php）：首页顶栏没有搜索框，
 *   brand + 三个链接一行放得下，没必要跟着变两行。
 *   `.hasq` 是动态拼出来的类名，`_css_check.py` 会跳过含 `?` 的 class 属性，
 *   但这里仍然实打实定义它 —— 别让"检查器看不见"变成"可以不写"。 */
@media (max-width: 640px) {
  .nav.hasq .wrap {
    flex-wrap: wrap; height: auto;
    padding-top: 8px; padding-bottom: 8px; row-gap: 7px;
  }
  /* ★ 窄屏 logo 只留图标（26px），把宽度让给搜索框。
     390px 上「图标 + 无界搜索」≈ 100px，搜索框会被挤到只剩一百多像素、
     输入框本身只剩几十像素 —— 那种坏法和"链接竖排"一样**不报错**。 */
  .nav.hasq .brand { order: 0; flex: 0 0 auto; }
  .nav.hasq .brand .word { display: none; }
  /* ★ 搜索框的 flex-basis 必须是 0，**不能是 100%**。
     flex 容器决定"要不要换行"看的是元素的**假设主轴尺寸**：
       · `flex: 1 1 100%` ⇒ 假设尺寸 = 整行 ⇒ 搜索框独占第一行、logo 被顶到上一行，
         "logo 在搜索框左侧"在窄屏上就没了（页面不报错，只是形态变了）；
       · `flex: 1 1 0`   ⇒ 假设尺寸 = 0 ⇒ **永远不会**为了它换行，
         logo 与搜索框必然并排在第一行。
     `min-width: 0` 也得给：不然 input 的最小内容宽度会把这一行撑出去。 */
  .nav.hasq .search { flex: 1 1 0; order: 1; gap: 7px; min-width: 0; }
  .nav.hasq .spacer { display: none; }
  .nav.hasq .links { order: 2; flex: 0 0 100%; justify-content: flex-end; gap: 12px; }
  .nav .search .box svg { left: 10px; width: 14px; height: 14px; }
  .nav .search input[type=search] { padding: 8px 10px 8px 31px; font-size: 13.5px; }
  .nav .search button { padding: 0 12px; font-size: 12.5px; }
  .nav .links { gap: 12px; font-size: 12.5px; }
}

/* ---------- 平板 / 桌面增强 ---------- */
@media (min-width: 641px) {
  .item .t { font-size: 16px; }
  .ai-body { font-size: 16px; }
}

@media (min-width: 961px) {
  .hero { padding: clamp(70px, 16vh, 160px) 0 clamp(26px, 5vh, 44px); }
  .results {
    padding-bottom: 90px;
    /* 两栏：结果列自适应吃掉剩余宽度，侧栏固定 300px。
       固定侧栏（而不是"1fr 1fr"）是因为热搜/推广位的内容都是短文本，
       让它们跟着宽屏一起变宽只会显得空旷。 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
  }
  /* 侧栏跟着滚。top 比顶栏（54px）多一点余量，免得板块标题贴着顶栏被切。 */
  .rside { position: sticky; top: 70px; }
  /* 侧栏第一个板块与左列第一个 .sec 顶对齐（.sec 自带 20px margin-top） */
  .rside .side-sec:first-child { margin-top: 20px; }
}

/* 尊重"减少动效"偏好 —— 打字机与 spinner 会关掉 */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .spinner { animation-duration: 2s; }
  .skel { animation: none; }
}

/* =====================================================================================
   工具箱（2026-09-22 加）
   =====================================================================================
   形态来自用户的要求：「用户搜 万年历 结果显示万年历工具其次是索引」。

   ## 为什么工具段要用**一套独立前缀**（`t-`）而不是复用 `.item` / `.note`

   `.item` / `.note` / `.card` 在别处都被赋予了**语义**：`.item` 是"一条搜索结果"、
   `.note` 是"一句说明"。工具不是搜索结果、也不是说明 —— 它是**答案本身**。
   复用那些类名的代价不是"看起来像"，而是下一个改结果卡片的人会**连带改到工具**
   （改 `.item` 的 hover 会让计算器的按键也跳一下），而那种耦合没人会主动想起来。

   所以：容器复用 `.card`（那是一个纯容器，没有语义），其余全部 `t-` 前缀。

   ## 颜色一律走 `:root` 的令牌

   否则浅色模式下必然有一块是坏的 —— 而这个站浅色是**默认**分支
   （`:root` 是深色、`prefers-color-scheme: light` 覆盖，两套都实打实存在）。

   ## 触控目标

   `.t-key` 与 `.t-btn` 的纵向内边距刻意给足（按键 12px）：
   计算器和日期的翻月按钮在手机上是要用手指点的，
   高度小于 ~40px 时误触率会明显上升，而这类问题在桌面浏览器上完全看不出来。
   ===================================================================================== */

/* ---------- 段容器 ---------- */
.tool-card { padding: clamp(13px, 3vw, 17px); }
/* 工具段的边框带一点强调色 —— 它是"现场可用的答案"，与下面的结果列表不是一类东西。
   只改边框、不加背景色：整块亮起来会把它变成页面主角，而用户明确要求
   "工具在前、索引在后"，两者是同一份答案的两部分，不是主次。 */
#toolSection .tool-card { border-color: color-mix(in srgb, var(--accent) 32%, var(--line2)); }
.tool-body { min-width: 0; }
.tool-today { margin: 0 0 11px; font-size: clamp(16px, 4.2vw, 19px); font-weight: 700; color: var(--fg); letter-spacing: .2px; }
.tool-hint { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.65; }

/* ---------- IP 那条"你当前的 IP"（**只有服务端算得出来**）---------- */
.ip-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ip-mine .k { font-size: 12.5px; color: var(--muted); }
.ip-mine .v {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 600; color: var(--accent);
  overflow-wrap: anywhere;
}

/* ---------- 万年历（公历月历 + 农历）----------
   视觉参照主流万年历 App 的月视图：数字在上、农历/节日在下，周末用红色区分，
   今天给一个强调色的圆底 + 「今天」二字。**所有颜色都走令牌** —— 深色模式
   （默认）与浅色模式（line 40 那段覆盖）用的是同一套规则，不写死任何一个色值。 */
.cal-wrap {
  margin-top: 12px; padding: clamp(9px, 2.6vw, 13px);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* 顶部工具条：`‹ 2026年9月 ›` 靠左，「今天」靠右 */
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-title {
  flex: 0 0 auto; min-width: 6.6em; text-align: center;
  font-size: clamp(14px, 3.8vw, 15.5px); font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cal-today-btn { margin-left: auto; font-weight: 600; }
.t-cal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 11px;
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--fg-2); background: var(--card);
  border: 1px solid var(--line2); border-radius: 999px; transition: .16s;
}
.t-cal-btn:hover { border-color: var(--accent); color: var(--accent); }
.t-cal-btn:active { transform: translateY(1px); }
.t-cal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* `table-layout: fixed`：7 列等宽。不写的话，某个月有一格放了两行农历字，
   那一列会被撑宽，整张表左右抖动 —— 翻月的时候尤其明显。
   `border-collapse: separate` + `border-spacing: 0`：给每格单独留圆角，
   今天那个圆底才不会和相邻格连成一片。 */
.cal { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cal th { padding: 2px 0 7px; font-size: 12px; font-weight: 500; color: var(--muted); }
/* 周六/周日表头用红 —— 与 `.t-msg-err` 是同一个 `--err`，两个模式都成立 */
.cal th.wkend { color: var(--err); }
.cal td {
  padding: clamp(4px, 1.3vw, 7px) 1px; text-align: center; vertical-align: top;
  border-radius: 10px; transition: background .14s;
}
/* 日期数字（与下面那行农历分开两层，今天才好在数字上单独画圆底） */
.t-day {
  display: block; font-size: clamp(15px, 4vw, 17.5px); line-height: 1.2;
  font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums;
}
.cal td.wkend .t-day { color: var(--err); }
/* 上/下月补白格：给数字但压暗，翻月时视觉连续，又不抢当前月 */
.cal td.adj .t-day { color: var(--muted); opacity: .5; font-weight: 400; }
.cal td.out { background: none; }
/* 农历 / 节日那一行 */
.t-lunar {
  display: block; margin-top: 1px;
  font-size: clamp(9.5px, 2.5vw, 11px); line-height: 1.35; color: var(--muted);
}
/* 节日比普通农历日名"重"一点，用 `--fg-2` 而不是彩色 —— 满屏彩字反而看不清 */
.t-fest { color: var(--fg-2); font-weight: 500; }
/* 今天：数字画成强调色圆底 + 反色字，下面一行写「今天」。
   `color: var(--bg)` 是"强调色之上的前景"：浅色模式下 `--bg` 近白（配蓝底）、
   深色模式下近黑（配浅蓝底），两个模式的对比度都够。 */
.cal td.today .t-day {
  width: 1.9em; height: 1.9em; margin: 0 auto; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg); font-weight: 700;
}
.cal td.today .t-lunar { color: var(--accent); font-weight: 600; }
/* 没有 JS 时 PHP 那份没有 `.t-day` 包裹，整格兜个底，别看起来像没样式 */
.cal td.today { color: var(--accent); font-weight: 700; }
/* ⚠️ 这里**故意不写 `td:hover` 高亮**：格子现在不可点，给悬停反馈等于承诺
   "点一下会有事发生"，而点了没反应比没有反馈更糟。将来若加上"点某天看农历"，
   再把高亮和点击一起补上。 */

/* ---------- 万年历底部信息面板 ---------- */
.cal-panel {
  margin-top: 11px; padding: clamp(10px, 2.6vw, 13px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.cal-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin-bottom: 8px; }
.cal-lunar-big { font-size: clamp(19px, 5vw, 23px); font-weight: 700; color: var(--fg); }
.cal-sub { font-size: 12.5px; color: var(--muted); }
.cal-panel .t-kv { margin-top: 2px; }

/* ---------- 表单行 ---------- */
.t-form { margin-top: 2px; }
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.t-label { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
.t-in {
  flex: 1 1 120px; min-width: 0;
  padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--fg); background: var(--input-bg);
  border: 1px solid var(--line2); border-radius: var(--radius-sm); outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.t-in::placeholder { color: var(--muted); }
/* 聚焦时给一圈柔和光环：只改边框颜色在浅色模式下不够明显 */
.t-in:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
select.t-in { flex: 0 1 auto; }
textarea.t-in {
  flex: 1 1 100%; resize: vertical; line-height: 1.6;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
}
.t-unit { flex: 0 0 auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-range { flex: 1 1 150px; min-width: 0; accent-color: var(--accent); }
.t-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px; }
.t-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--fg-2); cursor: pointer;
  accent-color: var(--accent);
}

/* ---------- 按钮 ---------- */
.t-btn {
  flex: 0 0 auto; padding: 8px 14px;
  font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  color: var(--fg-2); background: var(--card-2);
  border: 1px solid var(--line2); border-radius: var(--radius-sm);
  transition: background .16s, border-color .16s, color .16s, transform .1s;
}
.t-btn:hover {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-2));
}
.t-btn:active { transform: translateY(1px); }
.t-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* `.on` 是"当前选中/主操作"（等额本息 vs 等额本金、计算器的等号）。
   写 `.t-btn.on` 而不是单开一个 `.t-btn-on` 类：语义上是同一个控件的状态，
   拆成两个类名之后总有人只改一边。
   ⚠️ `.t-seg-on` 的**内边距 / 圆角 / 字号必须与 `.t-btn` 逐字一致** ——
   分段控件里未选中的项走 `.t-btn`、选中的走 `.t-seg-on`（见 tools.js 的 `seg()`），
   两边差一像素，切换时按钮就会"跳"一下。 */
.t-btn.on {
  font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.t-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.t-seg-on {
  padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
}

/* ---------- 结果区 ---------- */
.t-out {
  margin: 10px 0 0; padding: 12px 14px; overflow-x: auto;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13.5px; color: var(--fg);
}
pre.t-out {
  margin: 10px 0 0; white-space: pre; line-height: 1.65;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
}
/* 那个"最主要的数字"（换算结果、BMI 值、月供）—— 结果区里只该有一个 */
.t-out-big {
  margin: 0 0 6px; font-size: clamp(19px, 5.4vw, 24px); font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; letter-spacing: .2px;
}
.t-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.t-kv-k { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.t-kv-v { margin: 0; min-width: 0; font-size: 13.5px; color: var(--fg); overflow-wrap: anywhere; }
.t-msg { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }
/* ★ 错误态**必须与提示态在颜色上不同**（`--err`）。
   "算不出来"和"在浏览器里算、不联网"用同一句话的样式，用户会以为后者也出错了。 */
.t-msg-err { margin: 9px 0 0; font-size: 12.5px; color: var(--err); }

/* ---------- 计算器键盘 ---------- */
.t-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px; flex: 1 1 100%; margin-top: 2px;
}
.t-key {
  padding: 13px 0; font: inherit; font-size: 16.5px; cursor: pointer;
  color: var(--fg); background: var(--card-2);
  border: 1px solid var(--line2); border-radius: var(--radius-sm);
  transition: background .14s, border-color .14s, transform .1s;
}
.t-key:hover {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-2));
}
.t-key:active { transform: translateY(1px); }
.t-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-disp {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px; text-align: right;
}

/* ---------- 窄屏：键盘按键降低一点高度（4 列在 320px 上仍要放得下）---------- */
@media (max-width: 400px) {
  .t-key { padding: 10px 0; font-size: 15px; }
  .t-row { gap: 6px; }
  .t-label { font-size: 12px; }
  /* 万年历顶栏在 320px 上总共要塞下：年月 + 两个箭头 + 「今天」。
     不缩这一圈的话它会顶到右边（`今天` 被挤出去或换行）。 */
  .cal-head { gap: 4px; }
  .cal-title { min-width: 5.6em; }
  .t-cal-btn { min-width: 26px; height: 27px; padding: 0 8px; font-size: 13px; }
  .cal-wrap { padding: 8px; }
}

/* ===================== 爬网蜘蛛介绍页（/bot）===================== */
/* 复用 .wrap / .nav / .foot，这里只定义介绍页专属的排版与卡片。
   令牌全部来自 :root，不写死颜色。响应式三层：手机 1 列 / 平板 2 列 / 桌面 3 列。 */
.bot-hero { padding: clamp(40px, 10vh, 72px) 0 clamp(20px, 4vh, 30px); text-align: center; }
.bot-badge {
  display: inline-block; margin-bottom: 16px;
  font: 600 12.5px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--accent); letter-spacing: .3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 6px 12px; border-radius: 999px;
}
.bot-hero h1 { margin: 0; font-size: clamp(26px, 6vw, 38px); letter-spacing: -.5px; }
.bot-sub {
  margin: 12px auto 0; max-width: 620px; color: var(--muted);
  font-size: clamp(14px, 2.8vw, 16px);
}

.bot-section { margin-top: 36px; }
.bot-section h2 {
  margin: 0 0 12px; padding-bottom: 8px; font-size: 19px;
  border-bottom: 1px solid var(--line);
}
.bot-section p { margin: 0 0 12px; color: var(--fg-2); }
.bot-section p strong { color: var(--fg); }
.bot-section a { color: var(--accent); }
.bot-section code {
  font: .92em ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
.bot-tip { color: var(--muted); font-size: 13.5px; }

/* UA 代码块：等宽、浅底、可横向滚动，不撑破卡片 */
.bot-ua {
  margin: 6px 0 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line2);
  font: 13.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  white-space: pre; overflow-x: auto;
}

/* 抓取规矩卡片网格 */
.bot-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bot-card {
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: clamp(14px, 3.4vw, 18px);
}
.bot-card h3 { margin: 0 0 7px; font-size: 15px; color: var(--accent); }
.bot-card p { margin: 0; color: var(--fg-2); font-size: 13.5px; }
.bot-card code {
  font: .9em ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}

/* 抓取参数表 */
.bot-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
.bot-table th, .bot-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bot-table th { color: var(--muted); font-weight: 600; background: var(--card-2); }
.bot-table td { color: var(--fg-2); }
.bot-table td:nth-child(2) {
  color: var(--fg); font-weight: 600; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 收录清单 */
.bot-list { margin: 0; padding-left: 20px; color: var(--fg-2); }
.bot-list li { margin: 0 0 10px; }
.bot-list code {
  font: .9em ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}

/* 常见问题 */
.bot-faq { display: grid; gap: 0; }
.bot-q { margin-top: 14px; font-weight: 600; color: var(--fg); }
.bot-q:first-child { margin-top: 0; }
.bot-a { margin-top: 5px; color: var(--fg-2); }
.bot-a code {
  font: .9em ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}

@media (min-width: 641px)  { .bot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 961px)  { .bot-grid { grid-template-columns: 1fr 1fr 1fr; } }