/* =========================================================================
   来复百科 · 中性工具风主题层（2026-10-30 建立 / 2026-10-31 B+ 提亮）
   -------------------------------------------------------------------------
   本文件只做“覆盖”，不改 style.css：
     - 在 base.jinja 里排在 style.css 之后加载
     - 只调色调/圆角/字号/间距：改下面 :root 的令牌即可，不用动模板
     - 整体回滚：scripts/restore_ui_20261030.ps1（模板 + 静态 + jinja2.py 一次性还原）
   设计约束：
     - 页面标题 h1 / 栏目标题 h2 / 卡片标题 h3 三级
     - 单一主色（蓝）+ 单一强调色（赭红）；语义色只表达状态
     - 圆角 6/10，1px 描边替代阴影；不改变信息密度

   2026-10-31「B+ 提亮」修订（依据 docs/UI提亮方案-20261031.md）：
     旧版的问题不是"灰多"，而是**彩色几乎没有 + 白卡片只靠发丝边区分**（实测首屏 93.9%
     的像素彩度 < 8/255，只有 4% 像素"有颜色"）。这次做三件事，都不改变信息密度：
       ① 纸面分层：bg 略冷（#f3f7fb）、描边略实、卡片阴影真正可见、卡片之间留 20px；
       ② 可点对象上色：chip 按类型填色（分类冷灰蓝 / 站点浅蓝 / 话题浅紫），
          但**文字标签始终在**，色弱用户不依赖颜色也不丢信息；
       ③ 强调色上岗：--c-accent 只用于「当前位置 / 热度」这类非交互状态（当前分页、火热图标）。
     刻意**没做**：给列表标题上蓝色（会和 chip、URL 抢色）、按色相编码功能、
     动广告区的合规灰（#767676 是《广告法》可识别性的下限，不是装饰色）。

   2026-10-31 夜「R2 微调」修订（用户 6 条反馈，只动本文件 + 两处模板结构）：
     ① chip 底色再淡一档，醒目度改由「发丝边 + 字重」承担；分类 600 / 站点 500 / 话题 500；
        hover 恢复**按钮级**浮动（translateY(-1px) + 极轻投影，卡片仍然不浮）。
     ② h1 32 → 27（小屏 24 → 22）：详情页标题多是一两个词，32px 时整页重心全跑到标题上。
     ③ tab 条与下方内容之间加 --lf-gap-tabs(22px)：之前只有卡片自带的 16px/0px，
        两条横线（tab 下边框 / 卡片上边框）像贴在一起。
     ④ 左栏索引的组名与 chip 之间加间隙（表头 padding-bottom 归零、正文 padding-top 7px）。
     ⑤ 广告条目的标题与描述改为各自成行（两者原本都是 inline-block，短内容会并排、
        字号不同导致底边差 7px）。 — 见下方「广告」段注释。
   本文件之外只改了两处模板（不经 CSS 无法解决）：`qukuai/sousuo_fenlei.jinja`
   （「更多搜索」对齐「更多 AI」的结构、图标兜底）与 `qukuai/gai_links.jinja`（文案 更多 AI）。

   2026-11-01「R3」修订（用户 6 条反馈）：
     ① chip 分成两套（都不加粗，font-weight 400）—— **R7 已取消，见下**；
     ② 三组 chip 的默认底统一压到近白，hover 才给颜色与 1px 浮动；
     ③ 页脚「新窗口打开页面」挪进 meta 行最右、`.lf-switch` 用 flex 对齐、补状态字（已开启/已关闭）、
        默认开启（与内容链接的 target="_blank" 对齐）。
     ④ 复制按钮（标题旁）与工作台的「复制分类 / 复制话题」重做反馈：可见文字 + role=status + 剪贴板兜底。
     ⑤ 新增 `.lf-switch--stack`（窄栏里名称与状态分两行）与 `.lf-delete-facts`（删除确认页清单）。
   本文件之外：`macros/x_block.jinja`（复制按钮文案/播报）、`qukuai/new_window_control.jinja`、
   `base.jinja`（开关位置）、`base.js`（默认开启 + 状态字）、`laifu.js`（copyText 重写）、
   `xiangqing/category_detail.jinja`（复制按钮组 + 删除入口）、`xiangqing/link_detail.jinja`（默认继承）、
   新增 `bianji/delete_category.jinja` 与 `guan` 的删除视图/路由。

   2026-11-01「R7 简洁明快」修订（用户：「分类背景色不好看，改成无背景或其他背景」
   「站点和话题按钮的背景也不好看、字体不够鲜明，这两个可以参考云端 laifubaike」
   「改成简洁明快风吧，配色不要太复杂」）：
     · **chip 从"3 色 × 2 套 = 6 组彩色底"收敛成"1 块中性底 + 3 种字色"** ——
       分类的暖米底（#fefaf8/#fdf7f3）、站点的粉蓝底、话题的淡紫底全部撤掉，
       连同 12 个 `*-strong` 令牌；A/B 两套只剩内边距差别。
     · 字色取云端那两支（站点 #0071b3、话题深紫），分类用墨色 —— 云端本来就是
       "近白底 + 满饱和字色"，我们只是把底也统一了。
     · 这一轮只动配色，**没有改布局、字号、间距、动效**。
   ========================================================================= */

:root {
    /* ---- 中性层：墨色比 10-30 版深一档，描边略实 ---- */
    /* ---- 中性层：2026-11-01 R5 回到云端那套"中性台面" ----
       云端（原 style.css，线上仍是它）实测：台面 #f6f7f8（中性浅灰）、卡片 #ffffff。
       我们上一版把台面调成 #eff5fa —— 那是**带蓝调的**，整页像隔了一层蓝玻璃，
       详情页尤其明显（卡片多、留白多，蓝调被放大）。这里换回云端的中性灰：
       卡片仍然靠 1px 描边分层，但纸面恢复中性，彩色只留在 chip 与链接上。 */
    --c-ink: #111a23;
    --c-ink-2: #2c3b49;
    --c-muted: #4b5b6b;
    --c-faint: #74849a;          /* 只用于图标/装饰，禁止用于正文（白底 3.8:1） */
    --c-line: #e3e7eb;
    --c-line-strong: #ccd3da;
    --c-bg: #f6f7f8;             /* 台面：与云端同一取值，中性、不偏蓝 */
    --c-surface: #ffffff;
    --c-surface-2: #eef1f4;      /* hover 底也中性：冷灰底上再叠蓝灰会发脏 */

    /* ---- 主色 / 强调色 ---- */
    --c-primary: #0071b3;        /* 云端原链接蓝（白底 5.23:1，比旧值 5.18 还高一点） */
    --c-primary-strong: #005a90;
    --c-accent: #b4432f;         /* ⚠ 只用于“当前位置/热度”这类状态，不要拿它当交互色 */

    /* ---- chip：**一块中性底 + 三色文字**（2026-11-01 R7「简洁明快」）----
       R6 还是"三组彩色底"（分类暖米 / 站点冷蓝 / 话题淡紫），结果：
         · 分类的米色底在白卡片上像一层洗不掉的茶渍，一屏 20 多个直接糊成一片；
         · 站点 / 话题的底发闷，字色又压得太深（#10496f / #3a2d64），既不鲜也不亮。
       这一轮把三块彩色底**全部撤掉**，换成同一块中性浅灰，类型只由**文字颜色**表达：
         · 底与描边只回答"这是不是一个可以点的东西"，不再携带类型；
         · 类型色全部取满饱和度的高对比值 —— 这正是云端那套的做法（云端三组字色是
           #222 / rgb(0,113,179) / #3d037f），云端还各带一块粉/蓝/紫底，我们只留字色。
       于是全站可点对象只有**一种底盘**，配色复杂度从"3 色 × 2 套 = 6 组底"降到 1 组，
       页面立刻干净；文字对比度反而更高（smoke D 段实算：墨 16.2 / 蓝 4.83 / 紫 10.1）。
       ⚠ 色弱用户分不出"站点还是话题" —— 所以**文字标签始终在**，颜色只是加速识别，
         不是信息本身（原来靠三块淡底的区分，本来也没几个人读得出来）。 */
    --chip-bg: #f4f6f9;              /* 唯一底盘：比台面 #f6f7f8 略亮、比卡片 #fff 略暗 */
    --chip-bg-hover: #eaf0f7;        /* hover 加深一档（同色系，不换色相；亮度仍 ≥0.86） */
    --chip-bd: #dde4ea;              /* 描边比底色实一档：形状靠它，别靠加深底色 */
    --chip-bd-hover: #c6d4e1;
    --chip-cat-fg: #111a23;          /* 分类：墨色，最“重”的一档（站内主路径） */
    --chip-cat-fg-hover: #111a23;
    --chip-site-fg: #0071b3;         /* 站点：云端原链接蓝（与 --c-primary 同值，5.23:1） */
    --chip-site-fg-hover: #005a90;
    --chip-topic-fg: #4c1d95;        /* 话题：云端那支深紫，提亮一档到 10.1:1 仍清晰 */
    --chip-topic-fg-hover: #3b1475;

    /* ---- 圆角 / 字体 / 阴影 ---- */
    --radius-sm: 6px;
    --radius-lg: 8px;
    --card-shadow: none;         /* 卡片默认不投影：投影只出现在 hover（去“卡墙感”的关键） */
    /* 按钮/chip 悬浮时的那一层极轻的影。只给按得动的东西，卡片不用。 */
    --shadow-lift: 0 2px 6px -2px rgba(16, 40, 64, .3);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

    /* ---- 动效：曲线来自 emil-design-eng（内置 ease 太弱，撑不起“灵动”）----
       只用于 transform / opacity / 颜色，不碰 layout 属性。 */
    --ease-out: cubic-bezier(.23, 1, .32, 1);      /* 进入、按下反馈 */
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* 屏内位移 */

    /* 卡片竖向节奏：卡片直接挨着会糊成一片白，统一走令牌，别在模板里写死间距 */
    --lf-gap-card: 1.25rem;      /* 20px：常规卡片 */
    --lf-gap-card-sm: .75rem;    /* 12px：.mb-2 的紧凑卡（搜索入口 / AI 站点） */
    /* tab 条与下方内容之间：比卡片间隙略大一档。tab 下面紧跟卡片时，
       两条横线（tab 下边框 / 卡片上边框）会像"合在一起"，需要一段空白把它们分开。
       值取 22px：既明显大于 tab 与标题之间的 10~14px，又不至于把 tab 和它的内容读散。 */
    --lf-gap-tabs: 1.375rem;

    /* 导航栏高度只在 md 以下才有意义（md 以上 navbar 也是同一个高度）：
       body 顶距、移动搜索层 top、跳转条 sticky top、锚点 scroll-margin 全部引用这里。
       改导航高度只改 --lf-nav-h，别再在别处写 56 / 76 / 120 这类字面量。 */
    --lf-nav-h: 56px;
    --lf-page-top: 76px;        /* body 顶距 = 导航高度 + 留白 */
    --lf-page-top-sm: 68px;     /* <576px */
    --lf-anchor-offset: 120px;  /* 页内锚点落点，需大于导航高度 + 跳转条高度 */

    /* ---- 字号倍率（2026-11-01 R4：用户可切 4 档）----
       本文件里所有 `font-size` 都写成 calc(<基准>px * var(--lf-fs))，
       `<html data-lf-fs="…">` 改这一个变量就整站等比缩放（见下方四档规则）。
       ⚠ 新增样式请沿用这个写法，否则那一处不会跟着字号档位走。
       ⚠ 默认档 = 1（等价于两侧栏那套 15px 的基准，用户 11-01 的要求）。 */
    --lf-fs: 1;
}

/* 四档字号：步长约 8%。三档太粗（13% 一跳，不是太小就是太大），五档以上又要重排布局；
   四档是"小屏阅读 / 标准 / 偏大 / 最大"这四种真实需求的自然分段。 */
html[data-lf-fs="s"] { --lf-fs: .92; }
html[data-lf-fs="m"] { --lf-fs: 1; }
html[data-lf-fs="l"] { --lf-fs: 1.08; }
html[data-lf-fs="xl"] { --lf-fs: 1.17; }

/* ---------- 基础排版 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: calc(16px * var(--lf-fs));
    line-height: 1.7;
    color: var(--c-ink);
    background-color: var(--c-bg);
    /* 固定导航栏留出的顶距（原先是 base.jinja 里的内联 <style>，见 --lf-page-top 注释） */
    padding-top: var(--lf-page-top);
}

@media (max-width: 575.98px) {
    body { padding-top: var(--lf-page-top-sm); }
}

h1, h2, h3, h4, h5, h6 { color: var(--c-ink); font-weight: 600; }
/* 标题阶梯（R4 再收一档：h1 27→24、h2 19→17。详情页标题多是一两个词的分类名，
   24px 已经明显压过栏目标题，再大就把整页重心拽到标题上）。
   所有字号都乘 --lf-fs：用户选「大 / 特大」时整站等比放大，选「小」时等比缩小。 */
h1 { font-size: calc(24px * var(--lf-fs)); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: calc(17px * var(--lf-fs)); }
h3 { font-size: calc(16px * var(--lf-fs)); }
h4 { font-size: calc(15px * var(--lf-fs)); }
h5 { font-size: calc(14px * var(--lf-fs)); }
h6 { font-size: calc(13px * var(--lf-fs)); }
p { font-size: calc(16px * var(--lf-fs)); }

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

hr { border-color: var(--c-line); opacity: 1; }

.text-muted { color: var(--c-muted) !important; }

.lf-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.lf-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2100;
    background: var(--c-surface);
    color: var(--c-ink);
    padding: 10px 14px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-size: calc(14px * var(--lf-fs));
    text-decoration: none;
}
.lf-skip-link:focus { left: 0; outline: 2px solid var(--c-primary); }

/* ---------- 页面容器 ---------- */
.lf-page { padding-top: 12px; }

.lf-page-title {
    font-size: calc(24px * var(--lf-fs));
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.lf-title-copy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.lf-title-copy .copy-content { flex: 0 1 auto; }
/* 栏目后缀（" - 站点" / " - 站点更新"）：必须留在 h1 内部，否则会掉到下一行单独成行。
   字号取 .66em 而不是 .72em：h1 收到 27 之后，.72 会让后缀（约 19.4px）几乎等于栏目标题，
   反而像第二个标题。 */
.lf-title-suffix {
    flex: 0 1 auto;
    font-size: .66em;
    font-weight: 500;
    color: var(--c-muted);
    line-height: 1.95;
}

/* 复制按钮（标题旁那一颗）：图标 + 「已复制」文字反馈。
   2026-11-01：原先只有图标从"复制"换成"对勾"，两秒后弹回 —— 看不出到底复制成了没有，
   读屏也完全没有提示。现在文案 + aria-live（模板里）一起给，失败也有明确状态。 */
.copy-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: var(--c-faint);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
.copy-button:hover { color: var(--c-primary); background: var(--c-surface-2); }
.copy-button .copy-icon { font-size: calc(15px * var(--lf-fs)); }
.copy-button .copy-label {
    display: none;
    font-size: calc(12.5px * var(--lf-fs));
    font-weight: 500;
    white-space: nowrap;
}
.copy-button.is-copied { color: #1c7a4a; }
.copy-button.is-copied .copy-label { display: inline; }
.copy-button.is-failed { color: var(--c-accent); }
.copy-button.is-failed .copy-label { display: inline; }

/* 工作台里的「复制分类 / 复制话题」按钮组（仅 staff）。
   原先塞在 .btn-group 里还带 me-2，边角与间距都是错的；这里改成普通 flex 组。 */
.lf-staff-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.lf-staff-copy .btn { display: inline-flex; align-items: center; gap: 5px; }
.lf-copy-count {
    font-size: calc(11.5px * var(--lf-fs));
    font-variant-numeric: tabular-nums;
    line-height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
}
.lf-copy-status { font-size: calc(12.5px * var(--lf-fs)); color: var(--c-muted); }
.lf-copy-status.is-ok { color: #1c7a4a; }
.lf-copy-status.is-fail { color: var(--c-accent); }

/* 删除确认页的「会失去什么 / 不会失去什么」清单 */
.lf-delete-facts {
    margin: 8px 0 12px;
    padding-left: 18px;
    font-size: calc(14px * var(--lf-fs));
    line-height: 1.7;
    color: var(--c-ink-2);
}
.lf-delete-facts li + li { margin-top: 4px; }
.lf-delete-facts a { color: var(--c-primary); }

.lf-gap-sm { height: 8px; }

/* ---------- 栏目标题 ---------- */
.lf-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 34px 0 14px;
    /* R4：19 → 17。它是「站点 / 话题 / 相关」这类区块标题，跟页面标题差两档就够；
       19px 在 1440 屏上几乎和卡片标题（16）拉不开，反而显得每节都很大声。 */
    font-size: calc(17px * var(--lf-fs));
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: .005em;
}
/* 栏目标题图标：**保留**。它是分组语义（站点 / 子分类 / 话题 / 链接…），不是装饰 ——
   2026-10-31 曾试过换成 3px 竖条，竖条不编码任何信息，反而把辨识度丢了，已改回。 */
.lf-section-title > i {
    font-size: calc(15px * var(--lf-fs));
    color: var(--c-primary);
    opacity: .85;
}
/* 条数徽标：2026-11-01 R7 从"淡蓝底 + 深蓝字"改成中性块（同 chip 底盘）——
   栏目标题已经有一颗蓝色图标了，再给徽标上蓝就是第二处蓝，纯属配色噪声。 */
.lf-section-title .lf-count {
    font-size: calc(12px * var(--lf-fs));
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
    background: var(--chip-bg);
    border: 1px solid var(--chip-bd);
    border-radius: 999px;
    padding: 0 7px;
    line-height: 18px;
}
.lf-section-more {
    margin-left: auto;
    font-size: calc(13px * var(--lf-fs));
    font-weight: 400;
    color: var(--c-muted);
    text-decoration: none;
    white-space: nowrap;
}
.lf-section-more:hover { color: var(--c-primary); text-decoration: none; }
.lf-section-more i { font-size: calc(11px * var(--lf-fs)); }

.lf-page-title + .lf-section-title { margin-top: 26px; }

.lf-section-hint {
    margin: -4px 0 10px;
    font-size: calc(13px * var(--lf-fs));
    color: var(--c-muted);
}

.lf-card-title { font-size: calc(16px * var(--lf-fs)); margin: 0; }

/* ---------- 卡片与列表 ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    /* 默认不投影：一屏十几张卡各带一层浅影，正是“AI 卡片堆”的观感来源。
       纸面靠 1px 描边 + 略蓝的台面区分，浮起只留给 hover（见文末动效段）。 */
    box-shadow: var(--card-shadow);
}
/* 卡片之间的竖向间隙：模板里写的是 Bootstrap 的 mb-3 / mb-2，
   那两个工具类带 !important，只能同权重 + !important 覆盖，否则卡片会挨着。 */
.card.mb-3 { margin-bottom: var(--lf-gap-card) !important; }
.card.mb-2 { margin-bottom: var(--lf-gap-card-sm) !important; }

.card-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    padding: 12px 14px;
}
.card-body { padding: 14px; }

/* ---------- 左栏索引面板（2026-10-31 R 方案） ----------
   15 张独立卡 → 1~2 块面板。组与组之间只有 1px 发丝，组名降为小字标签。 */
.lf-index {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    margin-bottom: var(--lf-gap-card);
}
.lf-index-group + .lf-index-group { border-top: 1px solid #eef0f2; }
.lf-index .card-header {
    background: transparent;
    border: 0;
    /* 2026-10-31 夜（R2，按反馈）：组名与它下面的 chip 之前只有 ~8px 视觉间隙，
       读起来像"标题粘在第一行 chip 上"。表头不再留 padding-bottom，由正文的
       padding-top 统一给 7px，实算视觉间隙约 12px（含标题行自身行距）。 */
    padding: 12px 14px 0;
}
.lf-index .card-header h4.card-text {
    margin: 0;
    font-size: calc(13px * var(--lf-fs));
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--c-muted);
}
/* 组名旁边保留图标（bi-film / bi-cpu / bi-calendar-event …）：15 个分组靠它一眼区分，
   去掉之后整块索引只剩一堆小字（2026-10-31 试过，已改回）。 */
.lf-index .card-header h4.card-text > i {
    color: var(--c-primary);
    opacity: .8;
    font-size: calc(12.5px * var(--lf-fs));
    margin-right: 5px;
}
.lf-index-body { padding: 7px 14px 12px; }
/* 索引里的 chip：比正文小半档（13.5 太小，14.5 是 2026-10-31 反馈后的定值）。
   2026-11-01 R7：底色/边框/字色不再单独写 —— 四组 chip 现在共用一块底盘，
   这里**只调尺寸**，否则索引又会自己长出一套颜色（那正是这一轮要收敛的东西）。
   ⚠ 选择器仍是 (0,4,0)：`.lf-main` 那条只加了内边距（0,2,0），
     不把权重抬上去，索引里的 4px/10px 内边距会被主区的 6px/12px 盖掉。 */
.lf-index .lf-index-body .btn.lei {
    padding: 4px 10px;
    font-size: calc(14.5px * var(--lf-fs));
    margin: 0 5px 5px 0;
}
.lf-index-title {
    margin: 2px 0 10px;
    font-size: calc(13px * var(--lf-fs));
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-muted);
}
.lf-index-title > i { color: var(--c-primary); opacity: .85; margin-right: 5px; }

.list-group-item {
    background: transparent;
    border-color: var(--c-line);
    padding: 13px 14px;
}
.list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.lf-list .lf-item { padding: 15px 16px; border-left: 0; border-right: 0; }
.lf-list .lf-item:first-child { padding-top: 15px; }
.lf-list .lf-item:last-child { border-bottom: 0; padding-bottom: 15px; }

.lf-item-title {
    font-size: calc(16.5px * var(--lf-fs));
    line-height: 1.55;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lf-item-title .title {
    display: inline;
    color: var(--c-ink);
    text-decoration: none;
}
.lf-item-title .title:hover { color: var(--c-primary); text-decoration: underline; }

.lf-url {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    margin-top: 4px;
    font-size: calc(13.5px * var(--lf-fs));
    line-height: 1.6;
    text-decoration: none;
    color: var(--c-primary);
    overflow: hidden;
    white-space: nowrap;
}
.lf-url .lf-url-host { color: inherit; font-weight: 400; }
.lf-url .lf-url-path { color: inherit; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.lf-url i { color: inherit; opacity: .65; font-size: calc(11px * var(--lf-fs)); }
.lf-url:hover { color: var(--c-primary-strong); text-decoration: underline; }
.lf-url-lg { font-size: calc(14.5px * var(--lf-fs)); margin-top: 6px; }
.lf-search-q { color: var(--c-muted); font-weight: 400; margin-left: 3px; }

/* chip 里的品牌图标：与文字基线对齐。默认 baseline 会让图标整体偏高 3~4px，
   chip 看起来像"图标往上掉了半截"（2026-10-31 夜顺手修，搜索入口 / AI 站点共用）。 */
.dian > img,
.lei > img,
.tag > img { vertical-align: -4px; margin-right: 5px; }

/* 兜底符号：数据源没有品牌图标的条目（豆瓣 / 360 / 头条）用一个中性放大镜，
   尺寸与 18px 的 <img> 视觉等重 —— 宁可通用，也不要一条裂图。 */
.lf-chip-glyph {
    font-size: calc(14px * var(--lf-fs));
    color: var(--chip-site-fg);
    opacity: .8;
    margin-right: 5px;
    vertical-align: -1px;
}

/* 详情页左栏只有 220px：广告字号略降，避免每行只放得下 6~8 个字 */
.lf-rail-left .ad-title { font-size: calc(14.5px * var(--lf-fs)); }
.lf-rail-left .ad-desc { font-size: calc(12.5px * var(--lf-fs)); }
.lf-rail-left .sm-tag { font-size: calc(12px * var(--lf-fs)); }
.lf-rail-left .ad-label-row { padding: 4px 12px 6px; }
.lf-url-path { min-width: 0; }
section[id] { scroll-margin-top: var(--lf-anchor-offset); }
.lf-url img { width: 16px; height: 16px; }

.lf-item-desc {
    margin: 5px 0 0;
    font-size: calc(14px * var(--lf-fs));
    line-height: 1.65;
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lf-item-tags { display: flex; flex-wrap: wrap; margin-top: 7px; }

/* ---------- 标签 / 按钮（chip 体系：**一套底盘 + 三色文字**） ----------
   2026-11-01 R7，按用户三条反馈重做：
     「分类背景色不好看，改成无背景或其他背景」→ 撤掉分类的暖米底；
     「站点和话题按钮的背景也不好看、字体不够鲜明」→ 撤掉粉蓝 / 淡紫底，字色取云端那两支；
     「改成简洁明快风，配色不要太复杂」→ 全站只留**一块底盘**。
   于是：底 = `--chip-bg`（中性浅灰，四种 chip 共用）；形 = 1px 发丝边
   （R8 起，没有可读 URL 的子分类改成**同一条实线的空心底**，不再用虚线）；
   类型 = **文字颜色**（分类墨 / 站点蓝 / 话题紫）。原来 3 色 × 2 套 = 6 组底，现在 1 组。
   两套（A：`.lf-main` / B：侧栏与分类导航）**只剩内边距**的差别 —— 字号归 --lf-fs，
   字重统一 400（中文 600 在密排时整块糊粗，R3 已否过）。 */
.lei, .dian, .tag, .hot, .hot_pk {
    border-radius: var(--radius-sm);
    padding: 5px 11px;
    margin: 0 6px 6px 0;
    font-size: calc(15px * var(--lf-fs));
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
    animation: none;
    background: var(--chip-bg);
    border: 1px solid var(--chip-bd);
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease,
                transform .12s var(--ease-out);
}

/* 分类 / 子分类：墨色字 —— 站内主路径，四组里最“重”的一档 */
.lei, .hot { color: var(--chip-cat-fg); }
.lei:hover, .lei:focus,
.hot:hover, .hot:focus {
    background: var(--chip-bg-hover);
    border-color: var(--chip-bd-hover);
    color: var(--chip-cat-fg-hover);
}

/* 站点：蓝色字（云端原链接蓝）—— 颜色表示“站外” */
.dian { color: var(--chip-site-fg); }
.dian:hover, .dian:focus {
    background: var(--chip-bg-hover);
    border-color: var(--chip-bd-hover);
    color: var(--chip-site-fg-hover);
}

/* 话题：深紫字（云端那支，提亮一档） */
.tag { color: var(--chip-topic-fg); }
.tag:hover, .tag:focus {
    background: var(--chip-bg-hover);
    border-color: var(--chip-bd-hover);
    color: var(--chip-topic-fg-hover);
}

/* 子分类里没有可读 URL 的那一档（`.hot_pk`）：**实心 → 空心**。
   2026-11-01 R8（用户：「无 slug 的，没必要用虚线框」「字体和字号都相同」）：
     ① 虚线在界面语言里是“占位 / 待填”，比实线**更**抢眼 —— 恰恰把最不重要的那几个
        顶到了最前面，与“它更不重要”正好相反；
     ② 主次改用「**实心 / 空心**」表达：形状、尺寸、边框（同一条 1px 实线）、字号、字色
        **五样全部相同**，唯一差别是填充 —— 有 URL 的填 `--chip-bg`（浅灰），
        没有的填 `--c-surface`（卡片白，等于没填）。
        hover 时两者都填 `--chip-bg-hover`，即“都能点”这件事在同一刻对齐。
   ⚠ 不要退回虚线，也不要给这一类改字号 / 字色 —— 用户明确要求两者同字同号。 */
.hot_pk {
    background: var(--c-surface);
    color: var(--chip-cat-fg);
}
.hot_pk:hover, .hot_pk:focus {
    background: var(--chip-bg-hover);
    border-color: var(--chip-bd-hover);
    color: var(--chip-cat-fg-hover);
}

/* 主区（.lf-main）**只加内边距**：R7 起没有第二套底色了
   （原 12 个 *-strong 令牌已删除，别再往回加 —— 一加就又是两套配色）。 */
.lf-main .lei,
.lf-main .dian,
.lf-main .tag,
.lf-main .hot,
.lf-main .hot_pk {
    padding: 6px 12px;
}

.sm-tag {
    /* 条目下方那排"所属分类"小标：比 chip 小一号，但**同一块底盘** ——
       R7 之前它是 #eff1f3 的另一种灰，与 chip 并排时能看出是两种灰。
       小一号靠字号与内边距，不靠换色。 */
    background: var(--chip-bg);
    color: var(--c-ink-2);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: calc(13px * var(--lf-fs));
    margin: 0 5px 4px 0;
    transition: background-color .15s ease, color .15s ease;
}
.sm-tag:hover { background: var(--chip-bg-hover); color: var(--c-ink); text-decoration: none; }

/* 旧版链接样式（仍被少量 JS 生成的列表使用） */
.title { color: var(--c-ink); font-size: calc(15.5px * var(--lf-fs)); text-decoration: none; }
.title:hover { color: var(--c-primary); text-decoration: underline; }
.link { color: var(--c-primary); font-size: calc(13.5px * var(--lf-fs)); font-weight: 400; text-decoration: none; overflow-wrap: anywhere; }
.link:hover { color: var(--c-primary-strong); text-decoration: underline; }
.sm-title { color: var(--c-muted); }

/* 更多：卡片底部的“更多”做成轻量文字链接，不再是一条全宽按钮 */
.lf-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 0;
    font-size: calc(13px * var(--lf-fs));
    border-radius: var(--radius-sm);
    color: var(--c-muted);
}
.card > .lf-more {
    align-self: flex-start;
    margin: 2px 14px 10px;
    border: 0;
    background: transparent;
}
.card > .lf-more:hover,
.card > .lf-more:focus {
    background: transparent;
    color: var(--c-primary);
}
.lf-more i { font-size: calc(11px * var(--lf-fs)); }

/* 折叠面板（「更多搜索」/「更多 AI」）：展开后要跟上面的开关按钮分开一点，
   否则第一行 chip 直接顶在"收起"下面，看着像同一行。 */
.lf-collapse { margin-top: 8px; }

/* Bootstrap 按钮收敛 */
.btn { border-radius: var(--radius-sm); font-size: calc(14px * var(--lf-fs)); }
/* chip 本身也是 .btn：上面这条同权重的 14px 会把 chip 的 15px 盖掉（更靠后）。
   显式补一条 `.btn.lei` 等（0,2,0），chip 的字号才稳定在 15px。 */
.btn.lei, .btn.dian, .btn.tag, .btn.hot, .btn.hot_pk { font-size: calc(15px * var(--lf-fs)); }
.btn-sm { font-size: calc(13px * var(--lf-fs)); padding: 4px 10px; border-radius: var(--radius-sm); }
.btn-primary {
    --bs-btn-bg: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary-strong);
    --bs-btn-hover-border-color: var(--c-primary-strong);
    --bs-btn-active-bg: var(--c-primary-strong);
    --bs-btn-active-border-color: var(--c-primary-strong);
    --bs-btn-focus-shadow-rgb: 31, 111, 178;
}
.btn-light {
    --bs-btn-bg: var(--c-surface);
    --bs-btn-border-color: var(--c-line);
    --bs-btn-color: var(--c-ink-2);
    --bs-btn-hover-bg: var(--c-surface-2);
    --bs-btn-hover-border-color: var(--c-line-strong);
    --bs-btn-hover-color: var(--c-ink);
    --bs-btn-active-bg: var(--c-surface-2);
    --bs-btn-active-border-color: var(--c-line-strong);
}

/* 后台语义按钮降饱和：推荐 / 置顶 / 修订版本 不再抢内容视线 */
.btn-warning {
    --bs-btn-bg: #fff8e6;
    --bs-btn-border-color: #efdcae;
    --bs-btn-color: #7a5200;
    --bs-btn-hover-bg: #fdf0cf;
    --bs-btn-hover-border-color: #e6cd93;
    --bs-btn-hover-color: #5f3f00;
    --bs-btn-active-bg: #fdf0cf;
    --bs-btn-active-border-color: #e6cd93;
    --bs-btn-active-color: #5f3f00;
}
.btn-info {
    --bs-btn-bg: #eef6fb;
    --bs-btn-border-color: #cfe3f1;
    --bs-btn-color: #17557d;
    --bs-btn-hover-bg: #e2eff8;
    --bs-btn-hover-border-color: #b6d4e8;
    --bs-btn-hover-color: #10405f;
    --bs-btn-active-bg: #e2eff8;
    --bs-btn-active-border-color: #b6d4e8;
    --bs-btn-active-color: #10405f;
}
.btn-success {
    --bs-btn-bg: #eef7f1;
    --bs-btn-border-color: #cfe6d8;
    --bs-btn-color: #1c5b3a;
    --bs-btn-hover-bg: #e2f1e8;
    --bs-btn-hover-border-color: #b8dcc7;
    --bs-btn-hover-color: #144429;
    --bs-btn-active-bg: #e2f1e8;
    --bs-btn-active-border-color: #b8dcc7;
    --bs-btn-active-color: #144429;
}

/* ---------- 导航栏 ---------- */
.lf-navbar {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-line);
    /* 页面滚动时内容会从下面穿过去，只有一条 1px 边线会显得“贴着”。
       给导航一条常驻的柔和投影，等于给内容区留出视觉间隙。 */
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px -6px rgba(16, 24, 40, .12);
}
.lf-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(17px * var(--lf-fs));
    font-weight: 650;
    color: var(--c-ink);
    margin-right: 16px;
}
.lf-navbar .navbar-brand img { width: 26px; height: 25px; }
.lf-navbar .nav-link {
    color: var(--c-ink-2);
    font-size: calc(14.5px * var(--lf-fs));
    padding: 6px 11px;
    border-radius: var(--radius-sm);
}
.lf-navbar .nav-link:hover,
.lf-navbar .nav-link:focus { background: var(--c-surface-2); color: var(--c-ink); }
.lf-navbar .navbar-toggler {
    border-color: var(--c-line);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
}
.lf-navbar .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(22, 104, 179, .35); }

.lf-nav-search { flex: 0 1 420px; }
.lf-nav-search .form-control { font-size: calc(14px * var(--lf-fs)); border-color: var(--c-line); }
.lf-nav-search .form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(22, 104, 179, .12); }
.lf-nav-search .btn { padding-inline: 14px; }

/* ---------- 导航栏显示偏好（2026-11-01 R4） ----------
   两个偏好放在导航栏同一处，不再放页脚（页脚是"说明区"，控件在下面既看不见也不好点）：
     · 打开方式：**一个控件、标签即状态**（新窗口打开 / 当前窗口打开）+ title 详细说明 ——
       这是紧凑控件才适用的写法，一眼能看出当前是哪一种；
     · 字号：Aa 下拉，**面板里用完整标签**（小 / 标准 / 大 / 特大 + 示例行），不再用缩写。
   不做独立设置页：字号是"看一眼就要调"的东西，跳页会把即时反馈打断；
   两个控件也确实撑不起一个页面 —— 页面里还得用「打开方式：○当前窗口 ●新窗口」这种完整标签，
   跟上面的"标签即状态"变成两套说法。 */
.lf-display-prefs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}
.lf-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: calc(13.5px * var(--lf-fs));
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, transform .12s var(--ease-out);
}
.lf-nav-toggle:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-ink); }
.lf-nav-toggle:active { transform: scale(.97); }
.lf-nav-toggle > i { font-size: calc(14px * var(--lf-fs)); }
/* 当前处于「新窗口」：给一点主色，让"已开启"这件事在导航栏上就能看出来。
   R7 起借用 chip 的底盘令牌（那一套彩色底已删除），不再单写色值。 */
.lf-nav-toggle[aria-pressed="true"] {
    border-color: var(--chip-bd-hover);
    background: var(--chip-bg-hover);
    color: var(--c-primary-strong);
}
.lf-nav-toggle[aria-pressed="true"]:hover { background: #e0e9f2; }
.lf-nav-toggle .dropdown-toggle::after { margin-left: 2px; }

.lf-fs-menu {
    width: 244px;
    padding: 12px 12px 10px;
    border-color: var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px -8px rgba(16, 40, 64, .24);
}
.lf-fs-menu-title {
    font-size: calc(12.5px * var(--lf-fs));
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-muted);
    margin-bottom: 8px;
}
.lf-fs-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.lf-fs-option {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    padding: 6px 0;
    font-size: calc(13px * var(--lf-fs));
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.lf-fs-option:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.lf-fs-option[aria-pressed="true"] {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.lf-fs-sample {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--c-line);
    font-size: calc(13px * var(--lf-fs));
    line-height: 1.5;
    color: var(--c-muted);
}
/* 窄屏（<992）时两个控件跟着折叠菜单竖排：给一点上间距，跟导航链接分开。
   ⚠ 不要把文字收成图标 —— 竖排菜单里宽度够，收了反而只剩一个箭头和一个 T，看不懂。 */
@media (max-width: 991.98px) {
    .lf-navbar .navbar-collapse .lf-display-prefs {
        margin: 10px 0 4px;
        padding-top: 10px;
        border-top: 1px solid var(--c-line);
    }
}

.lf-icon-btn {
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-ink-2);
    font-size: calc(18px * var(--lf-fs));
    line-height: 1;
}
.lf-icon-btn:hover { background: var(--c-surface-2); }

.lf-mobile-search {
    position: fixed;
    top: var(--lf-nav-h);
    left: 0;
    right: 0;
    z-index: 1035;
    padding: 10px 12px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}
.lf-mobile-search .form-control { font-size: calc(15px * var(--lf-fs)); }

/* ---------- 首页 / 分类页首屏 ---------- */
.lf-hero-card .card-body { padding: 14px; }
.lf-hero-col .lf-hero-title {
    font-size: calc(15px * var(--lf-fs));
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--c-line);
}
.lf-hero-title i { color: var(--c-faint); margin-right: 6px; }
/* 「热门分类」的火焰是“热度”语义（不是交互），用强调色；
   其它首屏图标仍走主色，避免整块首屏只有一种颜色 */
.lf-hero-title i.bi-fire { color: var(--c-accent); }
.lf-hero-title i.bi-chat-dots { color: var(--c-primary); opacity: .85; }
.lf-topic-caption { color: #6b7280; font-size: calc(12px * var(--lf-fs)); }
.lf-topic-row { border-bottom-color: var(--c-line); }
.lf-topic-link { color: var(--c-ink-2); font-size: calc(14.5px * var(--lf-fs)); }
.lf-topic-link:hover { color: var(--c-primary); background: var(--c-surface-2); }

/* ---------- 侧栏 ---------- */
.lf-rail-nav, .lf-rail-left, .lf-rail-right { font-size: calc(14px * var(--lf-fs)); }
.lf-rail-right .lf-section-title, .lf-rail-left .lf-section-title { font-size: calc(15px * var(--lf-fs)); margin-top: 22px; }

/* ---------- 广告（保留合规标注口径） ---------- */
/* 2026-10-31 夜（R2，按反馈）：标题与描述各自独立成行。
   两条外链（.title / .sm-title）在 style.css 里都是 display:inline-block，
   短内容时会并排挤在同一行 —— 字号不同（15.5 / 13.5）导致两者底边差 7px 左右，
   读起来像"标题里多了一段小字"。改成块级后与内容列表（标题 → URL → 描述）同构，
   顺带解决"淘宝领券中心：抢大额官方补贴 领大额神券"被误读成一整句标题的问题。
   只作用于「条目直接子元素」，不影响 search_results 里 .lf-item-title 内的同名链接。 */
.list-group-item > a.title,
.list-group-item > a.sm-title,
.lf-item > a.title,
.lf-item > a.sm-title {
    display: block;
}
.ad-title {
    font-size: calc(15.5px * var(--lf-fs));
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-ink);
    margin-bottom: 2px;
}
.ad-title img { margin-right: 5px; }
.ad-desc {
    margin: 5px 0 0;
    font-size: calc(13.5px * var(--lf-fs));
    line-height: 1.6;
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ad-label {
    font-size: calc(11px * var(--lf-fs));
    padding: 1px 5px;
    border-radius: 3px;
    color: #767676;
    border-color: #dcdcdc;
}
.ad-label-row { padding: 6px 14px 8px; }

/* ---------- 分页 ---------- */
.pagination { margin: 20px 0 28px; }
.pagination .page-link {
    color: var(--c-ink-2);
    border-color: var(--c-line);
    font-size: calc(13.5px * var(--lf-fs));
    padding: 5px 10px;
}
.pagination .page-link:hover { background: var(--c-surface-2); color: var(--c-ink); }
/* 当前页用强调色：这是“你在哪”的定位信息，不是可点的交互色，
   正好是 --c-accent 该出场的地方（它不该拿去当按钮或链接色） */
.pagination .page-item.active .page-link {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--c-faint); background: var(--c-surface); }

/* ---------- Tabs ---------- */
/* 2026-10-31 夜（R2，按反馈）：tab 条下面原本只有卡片自带的 16px（my-3）甚至 0px（mb-3），
   tab 的下边框和卡片的上边框像两条并排的横线贴在一起。这里统一给 tab 下方一段
   --lf-gap-tabs 的空白 —— 分类详情（站点/链接）、分类推荐、站点推荐、更新等页面
   共用这一条规则，不用逐页改模板。 */
.nav-tabs { border-bottom: 1px solid var(--c-line); margin-bottom: var(--lf-gap-tabs); }
.nav-tabs .nav-link {
    color: var(--c-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 7px 12px;
    font-size: calc(14.5px * var(--lf-fs));
}
.nav-tabs .nav-link:hover { color: var(--c-ink); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--c-ink);
    background: transparent;
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

/* ---------- 空状态 ---------- */
.lf-empty {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 34px 24px;
    text-align: center;
}
.lf-empty-icon { font-size: calc(28px * var(--lf-fs)); color: var(--c-faint); display: block; margin-bottom: 8px; }
.lf-empty-title { font-size: calc(22px * var(--lf-fs)); margin: 8px 0 6px; }
.lf-empty p { color: var(--c-muted); margin-bottom: 8px; }
.lf-empty-hint { font-size: calc(13px * var(--lf-fs)); color: var(--c-muted); }
.lf-empty-code { font-size: calc(44px * var(--lf-fs)); line-height: 1; font-weight: 700; color: #d9dfe5; letter-spacing: .04em; }
.lf-empty-lg { padding: 48px 24px; }

.lf-inline-search { max-width: 440px; margin: 16px auto 8px; }

/* ---------- 详情页移动端区块条 ---------- */
/* 桌面：内容区顶部的区块跳转条（随滚动吸顶） */
.lf-subnav {
    position: sticky;
    top: var(--lf-nav-h);
    z-index: 20;
    margin: 14px 0 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
}

.lf-subnav-inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.lf-subnav-inner::-webkit-scrollbar { display: none; }
.lf-subnav a {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 8px 13px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: calc(13px * var(--lf-fs));
    line-height: 1.4;
    white-space: nowrap;
}
.lf-subnav a i { font-size: calc(15px * var(--lf-fs)); }
.lf-subnav a b { font-size: calc(11px * var(--lf-fs)); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.lf-subnav a.is-active,
.lf-subnav a.is-active b { color: var(--c-primary); }
.lf-subnav a:hover { text-decoration: none; color: var(--c-ink); }

@media (max-width: 991.98px) { body.has-subnav { padding-bottom: 48px; } }

/* ---------- 页脚 ---------- */
.lf-footer {
    margin-top: 48px;
    padding: 28px 0 22px;
    background: var(--c-surface);
    border-top: 1px solid var(--c-line);
}
.lf-footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px 32px;
}
.lf-footer-brand { font-size: calc(16px * var(--lf-fs)); font-weight: 650; color: var(--c-ink); }
.lf-footer-brand span {
    display: block;
    margin-top: 2px;
    font-size: calc(12.5px * var(--lf-fs));
    font-weight: 400;
    color: var(--c-muted);
}
.lf-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.lf-footer-links a { color: var(--c-ink-2); font-size: calc(13.5px * var(--lf-fs)); text-decoration: none; }
.lf-footer-links a:hover { color: var(--c-primary); text-decoration: underline; }
.lf-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lf-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line);
    font-size: calc(12.5px * var(--lf-fs));
    color: var(--c-muted);
}
.lf-footer-meta a { color: var(--c-muted); text-decoration: none; }
.lf-footer-meta a:hover { color: var(--c-primary); text-decoration: underline; }

/* ---------- 开关（链接详情页「新话题继承链接分类」，仅 staff） ----------
   ⚠ 打开方式**不在**这里：2026-11-01 R4 起它是导航栏的紧凑按钮（见「导航栏显示偏好」段），
   页脚那份已删除 —— 控件放说明区里既看不见也不好点。
   ⚠ 对齐靠 flex：Bootstrap 的 .form-check 是 `padding-left:1.5em` + 输入框 `float:left;
   margin-left:-1.5em`，开关和文字各按各的基线排，底部永远差一两像素（用户 2026-11-01 反馈）。
   这里把外层改成 flex、输入框 margin 归零，两个盒子才会真正垂直居中。 */
.lf-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-left: 0;              /* Bootstrap 给 .form-check 留的 1.5em 缩进在 flex 里是白占宽度 */
    min-height: 20px;
}
.lf-switch .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.lf-switch .form-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    font-size: calc(13px * var(--lf-fs));
    line-height: 1.4;
    color: var(--c-ink-2);
    cursor: pointer;
    /* 窄栏里名称会折行：balance 让两行长度接近，避免"…分 / 类"这种单字孤行 */
    text-wrap: balance;
}
/* 状态字（已开启 / 已关闭）：开关本身只是视觉，读屏和色弱用户靠这行字知道当前状态 */
.lf-switch .lf-switch-state {
    color: var(--c-muted);
    font-size: .92em;
    white-space: nowrap;
}
.lf-switch .lf-switch-state::before {
    content: "·";
    margin-right: 5px;
    color: var(--c-line-strong);
}
/* 窄栏版（详情页左栏只有 ~196px）：名称与状态分两行。
   挤在一行时名称会被折成三行、状态字还被顶到右边，读起来是碎的。 */
.lf-switch--stack { align-items: flex-start; }
.lf-switch--stack .form-check-input { margin-top: 2px; }
.lf-switch--stack .form-check-label { display: block; font-size: calc(12.5px * var(--lf-fs)); }
.lf-switch--stack .lf-switch-state { display: block; margin-top: 1px; }
.lf-switch--stack .lf-switch-state::before { content: none; margin-right: 0; }
.lf-switch .form-check-input:checked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.lf-switch .form-check-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(22, 104, 179, .14);
}

/* ---------- 表单 ---------- */
.lf-form-row { margin-bottom: 14px; align-items: flex-start; }
.lf-form-label { font-size: calc(14px * var(--lf-fs)); font-weight: 500; color: var(--c-ink-2); padding-top: 8px; }
.form-control, .form-select { font-size: calc(14.5px * var(--lf-fs)); border-color: var(--c-line); border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(22, 104, 179, .14);
}
.lf-form-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.lf-form-actions .btn { padding: 8px 22px; font-size: calc(15px * var(--lf-fs)); }
.prose-editor, .ProseMirror { min-height: 160px; }

/* ---------- 动效（2026-10-31「灵动」） ----------
   依据 emil-design-eng 的决策框架：
     · 频率高的东西不给入场动画（chip 每天被点几十次 → 只给按下反馈）
     · 只动 transform / opacity / 颜色，不触发 layout
     · 内置 ease 太弱，全部换成 --ease-out / --ease-in-out
     · hover 类动效包在 @media (hover:hover) 里，触屏不会误触发
     · reduce-motion 下由文末的媒体查询统一降为 0 时长（保留颜色变化） */

/* 1) chip / 按钮：hover 浮起、按下缩到 0.97 —— 两档反馈，都给“听到了”的回应 */
.lei, .dian, .tag, .hot, .hot_pk,
.btn, .page-link, .lf-topic-link {
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease,
                transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    /* 2) 按钮级「浮动」（2026-10-31 夜按反馈恢复，但只给按得动的东西）：
          上浮 1px + 一层 -2px 的极轻投影。1px 就够被感知 —— 密排的 chip 一次浮动 2px
          会像整行在跳；投影才是"离开纸面"的主要线索。
          卡片整卡浮起仍然不做（见下面 3）：那是装饰，不是可点性反馈。 */
    .lei:hover, .dian:hover, .tag:hover, .hot:hover, .hot_pk:hover,
    .btn:not(.lf-more):hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lift);
    }

    /* 2b) 按下：先回落到原位再缩小。顺序必须排在 hover 之后，否则 :active 会被浮动顶掉。 */
    .lei:active, .dian:active, .tag:active, .hot:active, .hot_pk:active,
    .btn:active, .page-link:active, .lf-topic-link:active {
        transform: scale(.97);
        box-shadow: none;
    }

    /* 3) 卡片**不做整体浮起**（2026-10-31 用户决定）：
          整张卡上下动 2px 属于"装饰性响应"，对内容没有帮助，鼠标扫过一列卡片时还容易晃。
          可点性的反馈统一落在按钮/chip 自己的 hover 与 :active 上（见上面 1 与 2）。 */
    .card, .lf-empty, .lf-index {
        transition: border-color .18s var(--ease-out);
    }
    .card:hover, .lf-empty:hover { border-color: var(--c-line-strong); }

    /* 3) 「更多」箭头：hover 时右移 3px，指明方向 */
    .lf-more i, .lf-section-more i {
        transition: transform .16s var(--ease-out);
    }
    .lf-more:hover i, .lf-section-more:hover i { transform: translateX(3px); }
}

/* 4) tab 下划线：切换时不是“啪”一下换色，而是 0.2s 淡入 */
.nav-tabs .nav-link {
    transition: color .16s ease, border-bottom-color .2s var(--ease-in-out);
}

/* 5) 首屏两栏错峰入场：整页**只有这一处编排**，60ms 间隔、总时长 < 400ms。
      不逐张卡片浮现 —— 那是“到处都在动”，反而更乱。 */
@media (prefers-reduced-motion: no-preference) {
    @keyframes lf-rise {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
    .lf-hero-split > .lf-hero-col { animation: lf-rise .3s var(--ease-out) both; }
    .lf-hero-split > .lf-hero-col:nth-child(2) { animation-delay: 60ms; }
    /* 索引面板按组分批浮现：8 组 × 25ms = 200ms，读完就停 */
    .lf-index-group { animation: lf-rise .28s var(--ease-out) both; }
    .lf-index-group:nth-child(1) { animation-delay: 0ms; }
    .lf-index-group:nth-child(2) { animation-delay: 25ms; }
    .lf-index-group:nth-child(3) { animation-delay: 50ms; }
    .lf-index-group:nth-child(4) { animation-delay: 75ms; }
    .lf-index-group:nth-child(5) { animation-delay: 100ms; }
    .lf-index-group:nth-child(n+6) { animation-delay: 125ms; }
}

/* ---------- 焦点可见 ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible,
.lf-topic-link:focus-visible,
.sm-tag:focus-visible {
    /* 焦点环用主色 60%：chip 现在有底色，环要够亮才看得出“焦点在哪一个” */
    outline: 2px solid rgba(22, 104, 179, .7);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 动效收敛 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* 减动效的含义是"不要位移"，不是"什么都别变"：颜色照旧，位移全部取消。
       上面的 hover 上浮是 1px 的位移，这里一并关掉，只留颜色与描边。 */
    .lei:hover, .dian:hover, .tag:hover, .hot:hover, .hot_pk:hover,
    .btn:not(.lf-more):hover {
        transform: none;
    }
}

/* ---------- 移动端 ---------- */
@media (max-width: 991.98px) {
    .lf-subnav {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 1030;
        margin: 0;
        border: 0;
        border-top: 1px solid var(--c-line);
        border-radius: 0;
        background: rgba(255, 255, 255, .98);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(110%);
        /* visibility 跟着一起切：只靠 transform 移出屏幕的话，条上的链接仍在 Tab 序列里，
           键盘用户能聚焦到屏幕外、且 fixed 定位不会滚动过来。transition 里带 visibility，
           收起时会等位移播完再隐藏（可见性离散转场，正好是想要的方向）。 */
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
    }
    .lf-subnav.is-visible { transform: none; visibility: visible; }
    .lf-subnav a {
        flex: 1 0 auto;
        justify-content: center;
        padding: 10px 8px;
        font-size: calc(12px * var(--lf-fs));
    }
}

@media (max-width: 767.98px) {
    /* 小屏密度优先：卡片间隙收一档，标题阶梯也按同比例收 */
    :root { --lf-gap-card: 1rem; --lf-gap-card-sm: .5rem; --lf-gap-tabs: 1.125rem; }
    .lf-footer-right { align-items: flex-start; }
    /* h1 桌面 24 → 小屏 20：与 16px 的栏目标题仍差两档，长站点名也不会占掉半屏 */
    .lf-page-title { font-size: calc(20px * var(--lf-fs)); }
    .lf-section-title { font-size: calc(16px * var(--lf-fs)); margin-top: 26px; }
    .lf-item-title { font-size: calc(16px * var(--lf-fs)); }
    .lf-item-desc { font-size: calc(14px * var(--lf-fs)); }
    /* ⚠ 用 `.btn.` 前缀：不然上面的 `.btn.lei`(0,2,0) 会盖掉这条 (0,1,0) 的 14.5px */
    .btn.lei, .btn.dian, .btn.tag, .btn.hot, .btn.hot_pk {
        font-size: calc(14.5px * var(--lf-fs));
        padding: 5px 10px;
        margin-right: 5px;
    }
    .card-body { padding: 12px; }
    .lf-hero-card .card-body { padding: 12px; }
    .lf-footer { margin-top: 32px; }
    .lf-section-more { font-size: calc(12.5px * var(--lf-fs)); }
    .lf-url { font-size: calc(12px * var(--lf-fs)); }
}