/* ==========================================================================
   QuickFind · ui.css —— R65 视觉语言重塑（去 AI 感）
   --------------------------------------------------------------------------
   定位：在 tokens.css（取值真源）+ v4-skin.css（三站换肤）之后加载，
        用同一批变量做**排版与质感**的重写，不新增任何色值、不改 HTML 结构、
        不改任何 JS 行为。取不到 --qf-* 时全部退回中性灰阶，绝不闪回彩色。

   ★ 为什么要单独一层而不是改 site.css
     site.css 是 140KB 的历史累积文件，同时服务桌面端风格的后台页与官网页。
     直接改它必须逐页回归（140KB × 29 页）。用覆盖层把「排版决策」抽出来，
     可以在不改布局的前提下单独演进视觉语言，将来回退只需摘掉一个 <link>。

   ★ 「AI 感」的六个来源与本文件的对应处置
     1. 渐变当主色（82 处，含 3 处渐变文字）→ 收敛为 0，纯色 + 边框表达层级
     2. 三段式标题（英文大写 kicker + 居中标题 + 居中副标题）× 8
        → 左对齐 editorial，kicker 改为中文小标签并可选隐藏
     3. 每段末尾居中按钮 → 改为左对齐、且降级为文字链
     4. 16px 大圆角 + hover 上浮 3px → 8px 圆角，hover 改为边框/底色，不位移
     5. 首屏 8 层信息 → 由 index.html 结构性精简（本层只负责视觉降噪）
     6. 彩色发光阴影 (--brand-glow) → 中性分层阴影

   ★ 反AI 的具体手法（不是"变朴素"，是换一套排版语法）
     - 章节标题靠左，正文限宽 62ch，形成稳定的左侧阅读起点
     - 卡片去掉"漂浮"感：不用阴影堆叠，用 1px 边框 + 极浅底色区分
     - 强调色只出现在可交互元素与状态，装饰性元素一律中性
     - 数字/图标不再用渐变填充，改用字重与留白建立层级
     - 按钮：主按钮纯色实心，次按钮描边；不再用阴影"发光"
   ========================================================================== */

/* ==========================================================================
   0. 令牌消费：本层不定义色相，只把渐变/发光重新解释为中性表达
   ========================================================================== */
:root {
  /* 几何：圆角整体收紧一档。16px 是「营销页」信号，8px 是「工具页」信号。 */
  --ui-r-sm: 5px;
  --ui-r:    8px;
  --ui-r-lg: 10px;

  /* 阴影：取消彩色发光（--brand-glow），改为中性分层。
     工具类站点的阴影只用于「浮起」这一件事，不用来发光。 */
  --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --ui-shadow-2: 0 2px 6px -1px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --ui-shadow-3: 0 8px 24px -8px rgba(16, 24, 40, .14);

  /* 章节标题左对齐后的宽度约束 */
  --ui-measure: 62ch;
  --ui-gutter: 28px;
}

[data-theme="dark"] {
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --ui-shadow-2: 0 2px 6px -1px rgba(0, 0, 0, .40);
  --ui-shadow-3: 0 8px 24px -8px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   1. 渐变收敛：把 --brand-grad 的每一次使用改为纯色
   ★ 注意：不改 site.css 的 --brand-grad 定义（两站换肤层与后台在消费它），
     只在具体组件上覆盖 background —— 渐变字符串本身不出现即可。
   ========================================================================== */

/* --- 按钮：主按钮纯色实心 + 细边框，去掉发光阴影 --- */
.btn {
  border-radius: var(--ui-r);
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active { transform: none; }
.btn-lg { border-radius: var(--ui-r); padding: 13px 26px; }
.btn-sm { border-radius: var(--ui-r-sm); }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--ui-shadow-1);
}
.btn-primary:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
  transform: none;
  box-shadow: var(--ui-shadow-2);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
  color: var(--ink);
  transform: none;
}

.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
  box-shadow: none;
}
.btn-danger:hover { background: var(--bad); transform: none; box-shadow: none; }

/* --- 语言切换 / 分段控件：选中态纯色，不再是渐变胶囊 --- */
.lang-switch, .seg { border-radius: var(--ui-r); }
.lang-switch button.on,
.seg button.on,
.api-lang-btn.active {
  background: var(--brand);
  color: #fff;
}

/* R66 · 登录页标签页：这里原本把 .auth-sub-btn.active 一并改成实心主色块，
   但 site.css 对它的设计是**下划线标签页**（border-bottom + margin-bottom:-1px
   让下划线压住容器的底边框）。加实心底块后：
     1) 下划线语义消失，标签页看起来像两个并列按钮，不再表达「同一区域的子页签」
     2) margin-bottom:-1px 的对齐补偿失效 → 下划线与容器底边错开 1px
   现改为「纯色下划线」：语义保留，渐变消失，与本站去渐变方向一致。 */
.auth-sub-btn.active {
  background: transparent;
  color: var(--brand);
  border-bottom-color: var(--brand);
}
/* 分段按钮（登录/注册切换）是真分段控件，实心选中态是正确的 */
.auth-mode-btn.active { background: var(--card); color: var(--brand); }

/* --- 通知条：改为细底色 + 边框，不再大面积渐变 --- */
.site-banner { background: var(--brand); }
.announce { background: var(--ink); }

/* --- 导航项悬停/选中：软底色而非渐变胶囊 --- */
/* 注：.docs-sidebar 在当前版本已无元素（文档页改用 .doc-toc / .doc-tree），
   其样式属 site.css 历史残留，不在本层覆盖 —— 给死规则化妆只会掩盖真正的问题。 */
.nav-links a:hover, .nav-links a.active { background: var(--brand-soft); }

/* --- 品牌标记与徽标：纯色 --- */
.logo, .mock-input { background: none; }
.logo { color: var(--brand); }
.tag, .plan-badge, .plan-pill {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--line);
}
.plan-pill.free { background: transparent; color: var(--brand); }

/* --- 表单聚焦：聚焦环用主色实边，不再渐变光晕 --- */
.form-input:focus, .form-select:focus, .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--qf-primary-ring, rgba(37,99,235,.18));
}

/* --- 卡片图标底：纯色软底，不再渐变 --- */
.card .icon,
.tile-ic,
.support-card .p-icon,
.principle .p-icon,
.sec-badge.ok,
.sec-item.ok .sec-ic,
.doc-cat h3 .dc-ic {
  background: var(--brand-soft);
}

/* --- 用户中心问候条：深底纯色 + 细描边，替代大面积渐变 --- */
.dash-welcome {
  background: var(--brand);
  box-shadow: none;
  border: 1px solid var(--brand);
}

/* --- 步骤序号：纯色 --- */
.flow-item .fi-n { background: var(--brand); }

/* --- 步骤卡片顶部条 / 时间轴节点 / 对比条：纯色 --- */
.step::before, .tl-item::before { background: var(--brand); }
.cmp-score .cs-bar i { background: var(--brand); }

/* --- 404 页视觉层：全部改为纯色 --- */
.qf404-eyebrow, .qf404-code, .qf404-lens, .qf404-go, .qf404-card-ic {
  background: var(--brand-soft);
  color: var(--brand);
}
.qf404-go { background: var(--brand); color: #fff; }

/* --- 镜像源标记：纯色 --- */
.mirror-chip.on.primary, .mirror-chip.on {
  background: var(--brand-soft);
  color: var(--brand);
}

/* --- 续费横幅：纯色底 --- */
.qf-renew-banner { background: var(--brand-soft); }

/* --- 内容面板微染：取消 --- */
.qf-panel-tint { background: var(--bg-2); }

/* --- 表格行悬停：改为中性底色 --- */
.tbl tbody tr:hover, .matrix tbody tr:hover {
  background: var(--qf-surface-hover, var(--bg-2));
}

/* --- 列表符号 / 行内代码 / 标签：统一中性 --- */
.tile .bullets li::before { border-color: var(--brand); }
.doc-article p code, .doc-article li code {
  background: var(--brand-soft);
  color: var(--brand);
}
.doc-toc-link.active, .doc-tree-link.active {
  background: var(--brand-soft);
  color: var(--brand);
}
.blog-tag { background: var(--brand-soft); color: var(--brand); }
.blog-content blockquote { border-color: var(--brand); }

/* --- 社交按钮 / 结账选项 / 搜索结果项：选中态纯色 --- */
.social-btn:hover, .qfo-ch-btn.on, .qfo-plan.on,
.qf-sr-item.on, .qf-sr-item:hover, .qfo-claim-done {
  background: var(--brand-soft);
  color: var(--brand);
}

/* --- 渐变文字：这是「AI 味」浓度最高的一处，改为纯色强调 --- */
.hero h1 .grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--brand);
}

/* ==========================================================================
   2. 章节标题：三段式 → editorial 左对齐
   ========================================================================== */
.section { padding: 68px 0; }
.section-tight { padding: 48px 0; }

/* 章节标题整体靠左，给读者一个稳定的起点 */
.section-head {
  text-align: left;
  margin-bottom: 34px;
  max-width: var(--ui-measure);
}
.section-head h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.28;
  margin-bottom: 12px;
}
.section-head .sub {
  font-size: 15.5px;
  color: var(--muted);
  max-width: 58ch;
  margin: 0;
  line-height: 1.75;
}

/* kicker：英文全大写 + .14em 字距是 AI 页签名。
   改为中文小标签：正常字距、小字号、无 uppercase、无彩色。 */
.section-head .kicker,
.kicker,
.page-hero .kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}
/* R66 · 移除 kicker 前面的短横线锚点
   R65 时我加了这段（18px 灰线 + 9px 间距）来替代彩色标签做「章节起点」标记，
   但它本质上仍是装饰性引导线。R66 统一移除所有装饰性引导线。
   章节的起点改由 kicker 自身的字重 + 与标题的间距表达，不再依赖线条。
   配套：margin-right: 9px 一并去掉，否则会留下 9px 空隙导致标题整体右移。 */
.section-head .kicker::before,
.page-hero .kicker::before {
  content: none;
}

/* ==========================================================================
   3. 段落末尾的居中按钮 → 左对齐文字链
   （HTML 里的 <p style="text-align:center"> 由 .ui-cta-row 接管）
   ========================================================================== */
.section > .container > p[style*="text-align:center"],
.section > .container > p[style*="text-align: center"] {
  text-align: left;
  margin-top: 28px;
}
/* 收尾按钮组：改为左对齐的链接式按钮，间距收紧 */
.section > .container > p[style*="text-align:center"] .btn,
.section > .container > p[style*="text-align: center"] .btn {
  font-weight: 500;
  padding: 0 0 2px;
  margin-right: 20px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.section > .container > p[style*="text-align:center"] .btn:hover,
.section > .container > p[style*="text-align: center"] .btn:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: transparent;
  transform: none;
}

/* ==========================================================================
   4. 卡片：去漂浮、去大圆角、去上浮
   ★ 只覆盖全站真实存在的类。price-card / pc-card / testi-card / blog-item /
     usage-card / err-code 在当前版本已无任何元素或由后台页私有生成，
     为它们写覆盖规则等于给死代码化妆 —— 已从本层移除，
     它们的样式问题应在各自所属页面单独处理。
   ========================================================================== */
.card, .syntax-card, .support-card, .principle,
.dash-card, .stat-card, .form-card, .auth-card, .tile {
  border-radius: var(--ui-r);
  box-shadow: none;
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color .16s ease, background-color .16s ease;
}
.card:hover, .syntax-card:hover,
.support-card:hover, .stat-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-strong);
}

/* 主推套餐保留极轻的区分：1px 主色边框，而不是 2px 整圈 + 阴影 */
.price-card.popular { box-shadow: none; border-color: var(--brand); }

/* 卡片内图标：去掉「彩色圆角方块底」，改为线性图标直接放置 */
.card .icon,
.stat-ic, .pl-icon, .support-card .p-icon, .principle .p-icon,
.dev-ic, .qfo-success-ic {
  background: transparent;
  color: var(--brand);
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 0;
  display: inline-flex;
}
.card .icon { margin-bottom: 12px; }
.card .icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.stat-ic svg, .pl-icon svg, .support-card .p-icon svg,
.principle .p-icon svg, .dev-ic svg { width: 20px; height: 20px; stroke-width: 1.6; }

/* 徽标类（免费/Pro）保留极轻底色，但去掉渐变 */
.card-kicker.tier { border-radius: var(--ui-r-sm); }

/* ==========================================================================
   5. 首页 hero：降噪 + 收敛装饰
   ========================================================================== */
.hero { padding: 72px 0 64px; }
.hero-inner { gap: 48px; }

.hero h1 {
  font-size: clamp(30px, 3.9vw, 44px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}
.hero .lead {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 26px;
}
.hero-actions { gap: 12px; margin-bottom: 28px; }

/* 首屏徽章：胶囊改为直角小标签 */
.badge-pill {
  border-radius: var(--ui-r-sm);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge-pill .dot { box-shadow: none; background: var(--brand); width: 6px; height: 6px; }

/* 首屏指标行：改为带分隔竖线的文字清单，去掉胶囊底色 */
.hero-metrics > span {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--ui-r-sm);
  font-size: 13px;
  color: var(--ink-2);
  padding: 6px 11px;
}

/* 界面示意窗：去掉背后的彩色光晕（60px blur 渐变球），
   这是「AI 生成落地页」最典型的装饰 */
.mock::before { display: none; }
/* 404 页同款装饰球（v3 的 404.html 仍保留 .orb / .qf404-orb） */
.orb, .qf404-orb { display: none; }
.mock-win {
  border-radius: var(--ui-r);
  box-shadow: var(--ui-shadow-3);
  border: 1px solid var(--line);
}
.mock-row:hover { background: var(--bg-2); }
.mock-row em {
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.pill-row .pill {
  border-radius: var(--ui-r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
}

/* ==========================================================================
   6. CTA band：渐变大色块 → 中性边框区块
   ========================================================================== */
.cta-band {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ui-r-lg);
  color: var(--ink);
  padding: 40px var(--ui-gutter);
}
.cta-band::after { display: none; }
.cta-band h2 { color: var(--ink); margin-bottom: 10px; }
.cta-band p { color: var(--muted); opacity: 1; margin-bottom: 22px; }
/* 站内按钮保持主色；白底反色按钮改回常规主按钮样式 */
.cta-band .btn[style*="background:#fff"],
.cta-band .btn[style*="background: #fff"] {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: var(--ui-shadow-1);
}
.cta-band .btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.cta-band .btn-ghost:hover { background: var(--bg-2); color: var(--ink); }

/* R65 新增：原「安装包未签名」是一条 warn callout，删除下载中心 section 后
   并入此处降级为脚注 —— 它是购买前必读信息，但不该与主 CTA 抢视觉权重。 */
.cta-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.cta-note a { color: var(--brand); border-bottom: 1px solid var(--line-strong); }
.cta-note a:hover { border-bottom-color: var(--brand); }

/* ==========================================================================
   7. 内容组件：提示条 / 步骤 / 数据格 / 统计格
   ========================================================================== */
/* ==========================================================================
   信息提示组件（R67 重做）
   --------------------------------------------------------------------------
   诉求：优化美化，**不要顶边或底边强调线**。

   R65 → R66 的演进值得记：R66 我把 callout 的左侧竖条改成了顶部 2px 色条，
   结果只是把装饰线换了个方向 —— 顶部色条让视觉重心偏上，深色下尤其突兀。
   本轮的做法是**彻底不要线**：border 整个去掉，层级改由三重手段承担。

     1) 底色     —— --qf-*-note，区分语义（info / ok / warn / bad / 中性）
     2) 图标     —— 实心色块，是整个组件里唯一的强调点
     3) 文字层级 —— 标题 --qf-*-note-title（字重 700）/ 正文 --qf-*-note-text

   为什么「无边框」比「细边框」更好：
     - 边框在小尺寸下会与相邻文字产生视觉噪声，而这��组件常紧贴正文段落
     - 纯底色块的边界由底色本身界定，不需要额外描边
     - 深色模式下边框需要额外提亮才可见，纯底色则天然跟随主题

   图标为什么要填充实心色块（原来是描边）：
     无边框后若图标仍是描边线，组件会显得「空」—— 少了一个视觉落点。
     实心小圆 + 白色符号，缩小后依然可辨。
   ========================================================================== */

/* ---------- .callout：带图标的语义提示 ---------- */
.callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 0;                        /* ← R67：去掉边框（含顶边/底边强调线）*/
  border-radius: var(--ui-r);
  padding: 12px 14px;
  margin: 16px 0;
  background: var(--qf-info-note, rgba(37, 99, 235, .07));
  color: var(--qf-info-note-text, var(--qf-text));
  font-size: 13.5px;
  line-height: 1.72;
}

/* 图标：实心色块 + 反白符号，作为唯一强调点 */
.callout > .ci {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--ui-r-sm);
  background: var(--qf-info-note-ic, var(--qf-primary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.callout > .ci svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* 文字层级：b 承担标题角色 */
.callout b {
  color: var(--qf-info-note-title, #1D4ED8);
  font-weight: 700;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 6px; }
/* 链接在提示块内需要足够的对比度 */
.callout a { color: var(--qf-info-note-ic, var(--qf-primary)); font-weight: 600; }
.callout a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 语义变体 ---------- */
.callout-info {
  background: var(--qf-info-note, rgba(37, 99, 235, .07));
  color: var(--qf-info-note-text, var(--qf-text));
}
.callout-info > .ci { background: var(--qf-info-note-ic, var(--qf-primary)); }
.callout-info b { color: var(--qf-info-note-title, #1D4ED8); }

.callout-ok {
  background: var(--qf-success-note, rgba(14, 159, 91, .08));
  color: var(--qf-success-note-text, var(--qf-text));
}
.callout-ok > .ci { background: var(--qf-success-note-ic, var(--qf-success)); }
.callout-ok b { color: var(--qf-success-note-title, #046C4E); }

.callout-warn {
  background: var(--qf-warning-note, rgba(178, 106, 0, .09));
  color: var(--qf-warning-note-text, var(--qf-text));
}
.callout-warn > .ci { background: var(--qf-warning-note-ic, var(--qf-warning)); }
.callout-warn b { color: var(--qf-warning-note-title, #8A4B00); }

.callout-bad {
  background: var(--qf-danger-note, rgba(217, 45, 32, .07));
  color: var(--qf-danger-note-text, var(--qf-text));
}
.callout-bad > .ci { background: var(--qf-danger-note-ic, var(--qf-danger)); }
.callout-bad b { color: var(--qf-danger-note-title, #A81E14); }

/* ---------- .note / .note-box：纯文本补充说明（无图标）----------
   原用 --brand-grad-soft 渐变底 + --brand-2 彩色边框，视觉过重且与 callout 不一致。
   现统一为中性底色无边框 —— 它承担的是「补充说明」而非「状态告知」，
   不该和 callout 抢注意力。 */
.note,
.note-box,
.legal-highlight {
  background: var(--qf-note-neutral, rgba(16, 24, 40, .035));
  border: 0;
  border-radius: var(--ui-r);
  padding: 11px 14px;
  margin: 14px 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.legal-highlight { padding: 10px 13px; }

/* 代码示例块不是提示组件，保留边框以便与提示区分 */
.api-example {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--ui-r);
  color: var(--ink-2);
}

/* 步骤序号：圆形渐变 → 方形等宽数字 */
.fi-n {
  border-radius: var(--ui-r-sm);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  width: 24px; height: 24px;
}
.flow-item { border-radius: var(--ui-r); border: 1px solid var(--line); background: var(--card); }
.fi-code {
  background: var(--qf-code-bg, #0D1B24);
  border-radius: var(--ui-r-sm);
  font-size: 12px;
}

/* R66 · 数据格分隔：取消 1px 竖线，改用等宽间距分隔
   竖线在这里承担「这几格是同一组数据」的分隔功能，去掉后必须用间距补上，
   否则四格数字会糊成一片。gap 从 0 提到 28px 并补上分隔线的位置，
   视觉上仍能读出「同一行的四个数据」，但不再有竖线。 */
.q42-stats { gap: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.q42-stat { border-radius: 0; border: 0; }
.q42-stat b { font-weight: 700; }

.verdict {
  border-radius: var(--ui-r);
  border: 1px solid var(--line);
  background: var(--card);
}
.verdict.is-alt { background: var(--bg-2); border-style: dashed; }

/* 表格：去掉圆角裁切，改为标准直角表 + 清晰表头分隔 */
.table { border-radius: var(--ui-r); border: 1px solid var(--line); }
.table th { background: var(--bg-2); border-bottom: 1px solid var(--line); }

/* R66 · 用户中心侧栏选中态
   R65 我把选中态从渐变胶囊改成了 `box-shadow: inset 2px 0 0 var(--brand)`
   —— 那本质上仍是一条装饰竖线，只是实现方式换了。R66 统一移除。
   选中态改由「底色 + 主色文字 + 字重」三重表达，不依赖任何线条。
   padding 说明：site.css 里 .dash-sidebar a 的 padding 未变，这里原有的
   `padding-left: 10px` 是为 inset 竖条预留的内缩补偿；竖条移除后必须还原，
   否则选中态文字会比未选中态右移 2px，与 hover 态不对齐。 */
.dash-sidebar a { border-radius: var(--ui-r-sm); }
.dash-sidebar a:hover { background: var(--bg-2); color: var(--ink); }
.dash-sidebar a.active {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
  box-shadow: none;
}

/* FAQ / 博客 / 链接列表 */
.faq-item, .blog-item, .link-list a { border-radius: var(--ui-r); }
.link-list a { border-bottom-style: solid; border-bottom-color: var(--line-2); }
.link-list a:hover { background: var(--bg-2); padding-left: 8px; }

/* ==========================================================================
   8. 表单与状态提示
   --------------------------------------------------------------------------
   R65 新增：原本 auth/forgot 内联硬编码亮绿亮粉（深色下刺眼且绕过主题体系）。
   R67 统一：与 .callout / .note 共用 --qf-*-note 令牌，并去边框。
   注意此处去掉了上一版的 `border: 1px solid` + 各变体 `border-color` ——
   无边框后提示块完全由底色界定，语义色只体现在强调元素上。
   ========================================================================== */
.qf-msg {
  padding: 10px 14px;
  border-radius: var(--ui-r-sm);
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.7;
  border: 0;
}
.qf-msg--ok {
  background: var(--qf-success-note, rgba(14,159,91,.08));
  color: var(--qf-success-note-text, var(--qf-text));
}
.qf-msg--bad {
  background: var(--qf-danger-note, rgba(217,45,32,.07));
  color: var(--qf-danger-note-text, var(--qf-text));
}
.qf-msg--warn {
  background: var(--qf-warning-note, rgba(178,106,0,.09));
  color: var(--qf-warning-note-text, var(--qf-text));
}
/* 正文用主文字色保证可读；语义色只给强调元素，避免整段文字染色影响阅读 */
.qf-msg b, .qf-msg strong { font-weight: 700; }
.qf-msg--ok b, .qf-msg--ok strong { color: var(--qf-success-note-title, #046C4E); }
.qf-msg--bad b, .qf-msg--bad strong { color: var(--qf-danger-note-title, #A81E14); }
.qf-msg--warn b, .qf-msg--warn strong { color: var(--qf-warning-note-title, #8A4B00); }

/* R67 · 无边框后如何不只靠颜色区分状态（色觉障碍可访问性）
   R65 给 .qf-msg 加边框的初衷是「不只靠颜色区分」；R67 按用户要求去掉边框后，
   这个保障不能一起丢 —— 否则红绿色觉障碍用户无法分辨错误与警告。
   改用**形状符号**：三态各有独立的 ::before 字符（✓ / ! / ⚠），
   形状本身可辨，不依赖色相。padding-left 为符号预留固定宽度，
   避免多行文本时符号与文字重叠。 */
.qf-msg { position: relative; padding-left: 30px; }
.qf-msg::before {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.qf-msg--ok::before    { content: "\2713"; background: var(--qf-success-note-ic, var(--qf-success)); }
.qf-msg--bad::before   { content: "!";    background: var(--qf-danger-note-ic, var(--qf-danger)); }
.qf-msg--warn::before  { content: "\26A0"; background: var(--qf-warning-note-ic, var(--qf-warning)); font-size: 9.5px; }
/* 链接与可交互元素不受 padding 影响 */
.qf-msg a { color: var(--qf-info-note-ic, var(--qf-primary)); }

/* 提交中：按钮宽度不跳（防布局抖动） */
.btn[data-busy="1"] { cursor: progress; }

/* ==========================================================================
   9. 深色模式可读性（R65：--muted / --ink-2 原来同为 #5A6478，
      在 #1A2029 卡片上仅 2.75:1，远低于 WCAG AA 的 4.5:1）
   ========================================================================== */
[data-theme="dark"] {
  --muted: #93A1B8;
  --ink-2: #A8B4C8;
}

/* ==========================================================================
   10. 死代码清理（悬空规则：全站无元素使用，留着只会诱导后人重蹈）
   ========================================================================== */
/* .faq-item h3 当按钮用的折叠方案 —— 真实 FAQ 已是原生 <details>/<summary>，
   这套规则无元素使用且无 JS 支撑，留着容易被误用成键盘不可达的折叠。
   同时 .reveal 无 IntersectionObserver 实现，一旦有人给元素加上该类，
   内容将永久 opacity:0 不可见。两者都置为无副作用。 */
.faq-item h3 { cursor: default; }
.reveal { opacity: 1; transform: none; }

/* ==========================================================================
   11. 响应式：左对齐版式在窄屏的收敛
   ========================================================================== */
@media (max-width: 900px) {
  .section { padding: 52px 0; }
  .hero { padding: 44px 0 40px; }
  .section-head { max-width: none; }
  .cta-band { padding: 30px 22px; }
}
@media (max-width: 560px) {
  .section { padding: 42px 0; }
  .hero h1 { font-size: 27px; }
  .section-head h2 { font-size: 21px; }
  .hero-actions .btn { width: 100%; }
  /* 窄屏下段落末尾按钮改为纵向堆叠 */
  .section > .container > p[style*="text-align:center"] .btn,
  .section > .container > p[style*="text-align: center"] .btn {
    display: block;
    width: auto;
    margin: 0 0 8px;
  }
  /* R66 · 窄屏改为纵向堆叠：原本靠 border-top 顶部横线分隔，
     现统一为间距分隔，避免横线与桌面端的间距方案风格不一致。 */
  .q42-stats { gap: 14px; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}