/* =========================================================================
   Anywiki · 中性工具风主题层（2026-11-01，对标 laifu365 同款 UI）
   -------------------------------------------------------------------------
   本文件只做“覆盖”，不改 style.css：
     - 在 base.jinja 里排在 style.css 之后加载（顺序不能反）
     - 只调色调/圆角/字号/间距：改下面 :root 的令牌即可，不用动模板
     - 整体回滚：`git checkout -- templates baike/static` 并删除本文件

   设计约定（与 laifu365 2026-10-30~11-01 那 12 轮同一套）：
     - 页面标题 h1 / 栏目标题 h2 / 卡片标题 h3 三级
     - 单一主色（蓝）+ 单一强调色（赭红）；语义色只表达状态
     - 圆角 6/8，1px 描边替代阴影；卡片默认不投影
     - 可点对象（chip）只有**一块中性底盘**，类型只由**文字颜色**表达
     - 字号是用户的一档设置：<html data-lf-fs="s|m|l|xl"> → --lf-fs

   ⚠ 与 laifu365 的三处有意差异（本站是英文站，改之前先读这几条）：
     1. **字体栈英文化**：laifu365 面向中文，首位放 PingFang / 微软雅黑；本站正文是
        英文，先走系统 UI 字体（Segoe UI / SF / Roboto），中文字体只作为回退。
     2. **长词换行交给 style.css**：英文分类名 p50=21、p95=41、最长 102 字符，
        style.css 里已有 `.lei/.dian/.tag... { white-space: normal; overflow-wrap: anywhere }`
        那一段。本文件**不再重复**，也不要在这里写 white-space: nowrap —— 会让长名字撑破卡片。
     3. **广告位是 Google AdSense**（本站 `qukuai/adsense_*.jinja`），不是 laifu365 的
        自建广告卡。AdSense 的 `<ins>` 由脚本注入，高度不可控，故只给外层留白与最小高度，
        不套 `.ad-label` 那套《广告法》标注（Google 自带 "Ads by Google" 标识）。

   2026-11-01 首版：结构、令牌、四档字号、导航栏显示偏好与 laifu365 现版同源；
   页面级栅格沿用本站既有的 3/6/3 与详情页 2/7/3，只把断点从 md 提到 lg/xxl
   （768px 就切三栏在英文长名下会挤成一列字）。
   ========================================================================= */

:root {
    /* ---- 中性层 ---- */
    --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;        /* 与原 style.css 的链接蓝同值（白底 5.23:1） */
    --c-primary-strong: #005a90;
    --c-accent: #b4432f;         /* ⚠ 只用于“当前位置/热度”这类状态，不要当交互色 */

    /* ---- chip：一块中性底 + 三色文字 ----
       底与描边只回答“这是不是一个可以点的东西”，不再携带类型；
       类型色全部取高对比值：分类墨 / 站点蓝 / 话题紫。 */
    --chip-bg: #f4f6f9;              /* 唯一底盘：比台面 #f6f7f8 略亮、比卡片 #fff 略暗 */
    --chip-bg-hover: #eaf0f7;        /* hover 加深一档（同色系，不换色相） */
    --chip-bd: #dde4ea;              /* 描边比底色实一档：形状靠它，别靠加深底色 */
    --chip-bd-hover: #c6d4e1;
    --chip-cat-fg: #111a23;          /* 分类：墨色，最“重”的一档（站内主路径） */
    --chip-cat-fg-hover: #111a23;
    --chip-site-fg: #0071b3;         /* 站点：链接蓝（与 --c-primary 同值） */
    --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 */
    --shadow-lift: 0 2px 6px -2px rgba(16, 40, 64, .3);
    /* 英文站在前、中文回退在后：正文是英文，中文字体只用来兜底中文摘要/标题 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", sans-serif;

    /* ---- 动效：只用于 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：紧凑卡 */
    --lf-gap-tabs: 1.375rem;     /* 22px：tab 条与下方内容之间 */

    /* 导航栏高度：body 顶距、移动搜索层 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;  /* 页内锚点落点，需大于导航高度 */

    /* ---- 字号倍率（四档，默认 1）----
       本文件里所有 font-size 都写成 calc(<基准>px * var(--lf-fs))；
       新增样式请沿用这个写法，否则那一处不会跟着字号档位走。 */
    --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> 里，已移除） */
    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; }
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); }

/* ---------- 页面容器 ---------- */
/* 原来的 .container.mt-5 会把正文压低 48px，且与固定导航叠加后首屏只剩半屏；
   现在顶距统一由 body 的 --lf-page-top 给，.lf-page 只补一点点呼吸位。 */
.lf-page { padding-top: 12px; }

/* ---------- AdSense 自动广告注入的容器（2026-11-02 实测定） ----------
   Auto ads 会往 .row 里插一个 `<div class="google-auto-placed"
   style="width:100%;height:auto;clear:both">`。它作为 flex 子项要独占一整行，
   三栏栅格当场被撑断：中栏与右栏被挤到下一行，整页看起来只剩左栏（线上实测）。
   修法不是隐藏它（那会违反 AdSense 政策），而是用 order 把它**排到三栏之后**：
   栅格恢复原样，广告照常渲染在整行末尾。⚠ 别改成 display:none。 */
.lf-page .row > .google-auto-placed {
    order: 99;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: var(--lf-gap-card);
}

.lf-page-title {
    font-size: calc(24px * var(--lf-fs));
    line-height: 1.35;
    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; }
/* 栏目后缀（" - Sites" / " - Site updates"）：必须留在 h1 内部，
   否则 h1 是块级元素，后缀会掉到下一行单独成行。 */
.lf-title-suffix {
    flex: 0 1 auto;
    font-size: .66em;
    font-weight: 500;
    color: var(--c-muted);
    line-height: 1.95;
}

/* 复制按钮（标题旁那一颗）：与标题**底部（基线）对齐**，不再浮在字顶。
   2026-11-02 按反馈调：① 图标 bi-files → bi-copy（小尺寸下更干净）；
   ② align-self:flex-end + 下边距把它落到基线上（24px 标题的行盒底部比基线低约 8px）；
   ③ 点击区补到 26px 高、颜色提到 --c-muted（原 --c-faint 偏淡，像禁用态）。
   「Copied」文字与失败态见下面两条规则。 */
.copy-button {
    flex: 0 0 auto;
    align-self: flex-end;
    /* 3px = 让图标底边正好落在标题基线上（实测：h1 高 32.4、基线在 114.2，
       按钮盒高 22、底部内边距 3 → 底边与基线相差 0） */
    margin: 0 0 3px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 3px 6px;
    border: 0;
    background: transparent;
    color: var(--c-muted);
    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(16px * var(--lf-fs)); }
/* 反馈只靠图标：成功 ✓ 绿、失败 ⚠ 红（文字反馈 2026-11-02 按用户意见去掉，
   避免按钮变宽把标题挤开；读屏仍由 aria-label + .copy-status 播报）。 */
.copy-button.is-copied { color: #1c7a4a; }
.copy-button.is-failed { color: var(--c-accent); }

/* 工作台里的「复制分类 / 复制话题」按钮组（仅 staff） */
.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-gap-sm { height: 8px; }

/* ---------- 栏目标题 ---------- */
/* laifu365 把「栏目名」从 h4 收敛成 h2.lf-section-title：标题层级从 h1 往下走，
   屏幕阅读器不再遇到“h1 之后直接跳 h4”。图标保留 —— 它是分组语义，不是装饰。 */
.lf-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 34px 0 14px;
    font-size: calc(17px * var(--lf-fs));
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: .005em;
}
.lf-section-title > i {
    font-size: calc(15px * var(--lf-fs));
    color: var(--c-primary);
    opacity: .85;
}
.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; }

/* 每栏**第一个**栏目标题不要带 34px 上边距：三栏顶部会各按各的间距起跑，
   视觉上第一行标题就错开了（首页左栏是索引标题、中/右栏是 h2）。 */
.lf-page .row > [class*="col-"] > .lf-section-title:first-child { margin-top: 6px; }

.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);
    /* 默认不投影：一屏十几张卡各带一层浅影，正是“卡片墙”的观感来源。
       纸面靠 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; }

/* ---------- 左栏索引面板 ----------
   原先左栏是 17 张独立卡竖着叠（“卡墙”）：每张同圆角、同描边、同阴影，
   一屏看下来没有任何一处比别处重要。现在改成 1~2 块 .lf-index 面板，
   组与组之间只有 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;
    /* 组名与它下面的 chip 之间留 7px，由正文的 padding-top 给，
       表头不再留 padding-bottom —— 否则两段内边距会叠加成一大块空白。 */
    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);
}
/* 组名旁边保留图标：17 个分组靠它一眼区分，去掉之后整块索引只剩一堆小字。 */
.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：比正文小半档。只调尺寸，不调颜色 ——
   四组 chip 共用一块底盘，这里再写颜色就会长回第二套配色。 */
.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; }

/* 条目标题：原先用 h4 当正文（标题层级错位 + 字号忽大忽小），
   现在统一成 div.lf-item-title，两行截断。 */
.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; min-width: 0; }
.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-url img { width: 16px; height: 16px; }
.lf-search-q { color: var(--c-muted); font-weight: 400; margin-left: 3px; }

/* chip 里的品牌图标：与文字基线对齐。默认 baseline 会让图标整体偏高 3~4px。 */
.dian > img,
.lei > img,
.tag > img { vertical-align: -4px; margin-right: 5px; }

/* 兜底符号：数据源没有品牌图标的条目用一个中性放大镜，宁可通用，也不要一条裂图。 */
.lf-chip-glyph {
    font-size: calc(14px * var(--lf-fs));
    color: var(--chip-site-fg);
    opacity: .8;
    margin-right: 5px;
    vertical-align: -1px;
}

/* 侧栏窄，广告字号略降，避免每行只放得下 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; }
section[id] { scroll-margin-top: var(--lf-anchor-offset); }

.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 体系：一套底盘 + 三色文字） ----------
   原来是 5 种彩色底（分类米 / 站点蓝 / 话题紫 / 有 slug 红边 / 无 slug 绿边），
   一屏几十个 chip 会糊成一片；现在：
     底 = --chip-bg（中性浅灰，四种 chip 共用）
     形 = 1px 发丝边
     类型 = 文字颜色（分类墨 / 站点蓝 / 话题紫）
   两套（主区 / 侧栏）只剩内边距差别，字重统一 400。 */
.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);
}

/* 子分类里没有 slug（没有可读 URL）的那一档：**实心 → 空心**。
   虚线在界面语言里是“占位 / 待填”，比实线更抢眼 —— 恰恰把最不重要的那几个顶到最前面。
   主次改用「实心 / 空心」表达：形状、尺寸、边框、字号、字色五样全部相同，只差填充。 */
.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);
}

/* 主区 chip 只加内边距（密度差别），不加第二套底色 */
.lf-main .lei,
.lf-main .dian,
.lf-main .tag,
.lf-main .hot,
.lf-main .hot_pk {
    padding: 6px 12px;
}

.sm-tag {
    /* 条目下方那排“所属分类”小标：比 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); }

/* 更多：卡片底部的“More …”做成轻量文字链接，不再是一条全宽浅色按钮 */
.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)); }

/* 折叠面板（「More search」/「More AI」）：展开后与上面的开关分开一点 */
.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: 0, 113, 179;
}
.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 .nav-link.active {
    background: var(--c-surface-2);
    color: var(--c-ink);
    font-weight: 600;
}
.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; }

/* ---------- 导航栏显示偏好（打开方式 + 字号） ----------
   两个偏好放在导航栏同一处，不再放页脚（页脚是“说明区”，控件在下面既看不见也不好点）：
     · 打开方式：一个控件、**标签即状态**（New window / Same window）+ title 详细说明；
     · 字号：Aa 下拉，面板里用**完整标签**（S / Default / Large / Largest + 示例行）。
   不做独立设置页：字号是“看一眼就要调”的东西，跳页会打断即时反馈。 */
.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)); }
/* 当前处于「New window」：给一点主色，让“已开启”在导航栏上就能看出来 */
.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: 248px;
    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(12.5px * 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）时两个控件跟着折叠菜单竖排，跟导航链接分开 */
@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);
        flex-wrap: wrap;
    }
}

.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; }
/* 「Hot Categories」的火焰是“热度”语义（不是交互），用强调色 */
.lf-hero-title i.bi-fire { color: var(--c-accent); }
.lf-hero-title i.bi-chat-dots { color: var(--c-primary); opacity: .85; }
.lf-hero-split { display: flex; flex-wrap: wrap; gap: var(--lf-gap-card); }
.lf-hero-split > .lf-hero-col { flex: 1 1 320px; min-width: 0; }

/* ---------- 侧栏 ---------- */
.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; }

/* ---------- 广告 ---------- */
/* 广告条目的标题与描述各自成行：两者原本都是 inline-block，短内容会并排、
   字号不同导致底边差 7px。只作用于「条目直接子元素」，不影响搜索页标题里的同名链接。 */
.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;          /* 4.54:1，是广告可识别性的下限，不许再调浅 */
    border-color: #dcdcdc;
}
.ad-label-row { padding: 6px 14px 8px; }

/* AdSense 槽位：<ins> 由 Google 脚本注入，高度不可控，只给外层留白与最小高度，
   避免广告未填充时把整页撑出一次跳动（CLS）。 */
.adsense-slot {
    margin: 16px 0;
    min-height: 90px;
    overflow: hidden;
}
.adsense-slot ins { display: block; }

/* ---------- 分页 ---------- */
.pagination { margin: 20px 0 28px; flex-wrap: wrap; gap: 2px; }
.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); }
/* 当前页用强调色：这是“你在哪”的定位信息，不是可点的交互色 */
.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 ---------- */
/* tab 条与下方内容之间统一给一段 --lf-gap-tabs 的空白：
   tab 下边框与卡片上边框贴在一起会看成“两条并排的横线”。 */
.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;
    /* 只在有内容的那一段宽度里出现：整栏宽的空白条会像一条“未填充的工具栏” */
    width: fit-content;
    max-width: 100%;
    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 .lf-subnav-label { font-size: calc(12.5px * 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; }

/* ---------- 后台左侧导航（guan/*，staff-only） ----------
   6 个管理页原本各自内联一份 `.admin-nav` + 全局 `.nav-link.active`（#0d6efd），
   内联样式排在主题层之后，会把导航栏的 nav-link 也一起改掉。搬到这里并收窄作用域。 */
.lf-admin-nav {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 12px;
}
.lf-admin-nav h5 {
    font-size: calc(14px * var(--lf-fs));
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-line);
}
.lf-admin-nav .nav-link {
    color: var(--c-ink-2);
    font-size: calc(13.5px * var(--lf-fs));
    padding: 6px 9px;
    border-radius: var(--radius-sm);
}
.lf-admin-nav .nav-link:hover { background: var(--c-surface-2); color: var(--c-ink); }
.lf-admin-nav .nav-link.active {
    background: var(--chip-bg-hover);
    color: var(--c-primary-strong);
    font-weight: 600;
}

/* ---------- 待办收集旗标（仅 staff，分类详情页左栏） ----------
   原先这段样式写在模板的内联 <style> 里 —— 内联样式排在 tool.css 之后，
   会绕过主题层的令牌（白底 / #dee2e6 描边 / 固定 rem 字号）。搬到这里统一。 */
.collect-flag-menu { display: none; }
.collect-flag-wrap:hover .collect-flag-menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .15);
    padding: 4px;
    white-space: nowrap;
}
.collect-flag-menu .collect-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    font-size: calc(13.5px * var(--lf-fs));
    border-radius: 4px;
    color: var(--c-ink);
    cursor: pointer;
}
.collect-flag-menu .collect-item:hover { background: var(--c-surface-2); }

/* ---------- 开关 ----------
   ⚠ 打开方式**不在**这里：它是导航栏的紧凑按钮（见「导航栏显示偏好」段）。
   对齐靠 flex：Bootstrap 的 .form-check 是 padding-left:1.5em + float，开关和文字
   各按各的基线排，底部永远差一两像素。 */
.lf-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-left: 0;
    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;
    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);
}
.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; }

/* ---------- 动效 ----------
   依据 emil-design-eng 的决策框架：
     · 频率高的东西不给入场动画（chip 每天被点几十次 → 只给按下反馈）
     · 只动 transform / opacity / 颜色，不触发 layout
     · hover 类动效包在 @media (hover:hover) 里，触屏不会误触发
     · reduce-motion 下由文末的媒体查询统一降为 0 时长（保留颜色变化） */
.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) {
    /* 按钮级「浮动」：上浮 1px + 一层 -2px 的极轻投影。1px 就够被感知 ——
       密排的 chip 一次浮动 2px 会像整行在跳；投影才是“离开纸面”的主要线索。 */
    .lei:hover, .dian:hover, .tag:hover, .hot:hover, .hot_pk:hover,
    .btn:not(.lf-more):hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lift);
    }

    /* 按下：先回落到原位再缩小。顺序必须排在 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;
    }

    /* 卡片**不做整体浮起**：整张卡上下动 2px 属于装饰性响应，
       可点性的反馈统一落在按钮/chip 自己的 hover 与 :active 上。 */
    .card, .lf-empty, .lf-index {
        transition: border-color .18s var(--ease-out);
    }
    .card:hover, .lf-empty:hover { border-color: var(--c-line-strong); }

    /* 「More」箭头：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); }
}

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

/* 首屏两栏错峰入场：整页**只有这一处编排**，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 {
    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;
    }
    /* 减动效的含义是“不要位移”，不是“什么都别变”：颜色照旧，位移全部取消。 */
    .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;
        width: auto;
        max-width: none;
        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 序列里。 */
        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; }
    .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)); }
}