/* ============================================================================
非洲观察官网 — 样式
----------------------------------------------------------------------------
单文件、零依赖、零外链字体（离线可跑、首屏无第三方请求）。
【配色：与会员站（frontend/src/styles.css）**同一套色板】**
----------------------------------------------------------------------------
原来这里是「近黑底 + 暖砂文字 + 黄铜强调」，与会员站的绿完全两套语言。
现在整份色板来自会员站的 :root，**变量名也照抄**（--bg / --panel / --ink /
--ink-2 / --ink-3 / --line / --accent / --accent-2 / --accent-ink），
这样以后改主题只需要改一处，而且改的时候不会因为「官网的 --ink 是背景色、
会员站的 --ink 是文字色」这种同名不同义而搞错。
⚠️ 三个**必须理解**的映射（两站结构不同，逐元素抄不过来）：
① 会员站 --ink 是**文字色**，官网原来 --ink 是**背景色** —— 名字相同、语义
相反。所以这一版不是"把值换掉"，而是"把语义摆正"：
`--ink` 在两边都指最深的那一层文字。
② 官网原来 --brass（黄铜）承担了"主色"角色（eyebrow、区块标题竖条、名次
数字、按钮底色）。它对应会员站的 `--accent`（主题绿）；而 --brass-2
（更亮的黄铜，用在数字大字与链接 hover）对应 `--accent-ink`（深绿）——
在浅底上"更亮"要反过来变成"更深"才能保住对比度。
③ 风险三档色不在会员站的 :root 里，而在它的 `--lv-hot / --lv-mid / --lv-low`
（需求 TOP30-M 定义的档位色）。这里直接取那三个值 —— 包括
**中风险刻意用琥珀不用绿**：这套界面里绿色读出来是"安全/正常"，
拿来标中风险会和"低"混。这条口径两边必须一致。
为什么浅色底比深色底更需要小心：
· 深色下靠"颜色深浅叠加"就能分层，浅色下必须靠**描边 + 阴影**。所以
`.qr` 加了 box-shadow、`.qr__img` 加了描边（白图在白卡上否则没有边界）。
· `.brief__rank` 原来 `opacity: .82` 是为了压住黄铜的亮度；绿在浅底上直接
降透明度会发脏，改成不降。
· 页眉原来是深色半透明，现在改成**白色半透明** —— 保持 blur 效果不变。
第一轮只动了颜色（+ 层级阴影）。第二轮加了动效与移动端适配。第三轮把
字体改成「粗大硬朗」（黑体 + 700 + 收紧字距 + 方角），并把会员登录入口
整块移除 —— 见下方 :root 里的字体注释。栅格与断点始终没动。
⚠️ 三轮改动里唯一**同时**碰颜色和形状的只有 `--r`（10px → 3px）：
配色仍与会员站一致，圆角是刻意偏离，理由写在 `--r` 旁边。
========================================================================== */
:root {
/* —— 底色与层级 —— */
--bg: #f4f6f8; /* 页面底（会员站 --bg） */
--panel: #ffffff; /* 卡片 / 交替区块底（会员站 --panel） */
--hover: #f7f9fb; /* 白卡 hover（比 --bg 更淡，避免整块变灰） */
/* —— 文字 —— */
--ink: #1f2329; /* 主文字（会员站 --ink） */
--ink-2: #5a6068; /* 次级文字（会员站 --ink-2） */
--ink-3: #9aa0a8; /* 弱化文字 / 占位（会员站 --ink-3） */
/* —— 描边 —— */
--line: #e8eaed; /* 标准描边（会员站 --line） */
--line-2: #f0f2f4; /* 更弱的分隔（区块内部细线） */
/* —— 主色：主题绿 —— */
--accent: #18a058; /* 会员站 --accent */
--accent-2: #e8f6ee; /* 浅绿底：hover / 高亮（会员站 --accent-2） */
--accent-ink: #14703f; /* 深绿字（会员站 --accent-ink） */
/* —— 风险三档：与会员站 --lv-hot / --lv-mid / --lv-low 同值 —— */
--risk-high: #cf3a24;
--risk-mid: #b26b06;
--risk-none: #6b7280;
--shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .05);
/* ══════════════════════════════════════════════════════════════════
字体：粗大、硬朗 —— 对齐安保公司的专业形象
------------------------------------------------------------------
① **全站单一字族，不再用衬线**。原来标题走 `--serif`（Georgia /
Songti / 宋体），那是"书卷气"：文学、学术、杂志的调性，靠的是
笔画粗细对比和末端的小衬线。安保要的是「力量、条理、不含糊」，
衬线的收笔恰恰在削弱这一点。所以 `--serif` **整个删掉**，
标题与正文都落在 `--sans` 上，靠**字重**而不是字族做层级。
② 英文栈把 Helvetica / Arial 提到最前：笔画直、字腔方、末端平切。
原来打头的 `-apple-system`（SF Pro）笔画末端带圆角、字腔偏圆，
是 iOS 的亲和力语言，不是安保的语言。
中文回落 PingFang SC / 微软雅黑 —— 黑体本身就是方头平尾。
③ 字重只用 400 / 600 / 700 三档，**上限就是 700**。
写 800/900 会怎样：Windows 的微软雅黑只有 Regular + Bold 两档，
浏览器为了凑出 800 会做"合成加粗"（把字形沿轮廓描粗一圈），
中文字笔画立刻粘连、小字发糊 —— 看起来更重，实际更难读。
所以"再粗一档"要靠**放大字号 + 收紧字距**，不是堆 font-weight。
══════════════════════════════════════════════════════════════════ */
--sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
"Noto Sans CJK SC", sans-serif;
/* 三档字重，语义化命名：以后整体"再粗/再细一档"只改这三行 */
--w-black: 700; /* 主标题 / 区块标题 / 卡片标题 / 大数字 / 小标签 */
--w-bold: 600; /* 条目标题 / 按钮 / 导航 / 次级强调 */
--w-body: 400; /* 正文 */
--wrap: 1180px;
--gut: 28px;
/* 圆角：硬朗的关键一半在"方"。
原来 10px 是照会员站 `.btn` 抄的（为了配色统一），但 10px 的圆角
读出来是"线上产品的柔和感"；安保要的是**方头方脑的标牌感**。
3px 保留一点点边缘抗锯齿，视觉上仍是直角。
⚠️ 这是形状层面的有意偏离，不是漏改 —— 配色仍与会员站一致。 */
--r: 3px;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* iOS 横屏会自动放大正文（它觉得 12px 太小），一放大版式就全乱了。
显式声明 100% 关掉这个"贴心的"自动调整文字大小。 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ⚠️ 锚点跳转必须补 scroll-margin-top。
页眉是 `position: sticky` 的 68px 高，点导航「服务 / 每日评估」跳过去时，
目标区块的标题正好**压在页眉底下** —— 看起来像"跳歪了"，其实是被盖住了。
这个是手机上尤其明显的老问题（手机上还有个抽屉收起的过程，观感更差）。 */
section[id] { scroll-margin-top: 78px; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
/* 拆成长属性而不是 `font:` 简写：简写里混 var() 一旦变量名打错，
整条声明会**静默失效**（字体退回 Times），而长属性只会丢一处。 */
font-family: var(--sans);
font-size: 16px;
font-weight: var(--w-body);
/* 行高 1.65 → 1.62：硬朗感一半来自"密"。留 1.62 是中文正文的可读下限，
再紧长段落就开始串行。 */
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* 数字等宽：分数、日期、条数在列表里上下对齐才像"数据"，不像"文案" */
font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
/* `height: auto` 是必须的：只写 max-width: 100% 时，如果 ![]()
带了 height 属性
（或父级用 height 拉伸），浏览器会保持原高度 ⇒ 图被压扁。
宽高比交给浏览器按内在比例算，这是图片自适应唯一的正确写法。 */
img { display: block; max-width: 100%; height: auto; }
/* 标题基线：700 + 负字距。负字距是"硬"的另一个来源 —— 字挨得紧才显得
有秩序、有压迫感；松散的字距读起来是"从容"，那是另一类品牌气质。 */
h1, h2, h3 { margin: 0; font-weight: var(--w-black); letter-spacing: -.02em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
/* 载入中：先藏内容避免 FOUC，配置到位后由 JS 摘掉 is-loading */
.app.is-loading main,
.app.is-loading .ftr { opacity: 0; }
main, .ftr { opacity: 1; transition: opacity .28s ease; }
/* ── 页眉 ───────────────────────────────────────────────────────────── */
.hdr {
position: sticky; top: 0; z-index: 40;
/* 深色版是 rgba(10,16,22,.82)；浅色版换成白。透明度与 blur 保持不变，
这样"内容从页眉底下滚过去"的观感与原来一致。 */
background: rgba(255, 255, 255, .86);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.hdr__in {
display: flex; align-items: center; gap: 26px;
height: 68px;
}
/* ⚠️ 品牌名是**后台可配**的，长度不受控（实测有人把它填成
「利剑安保 · Sharp Sword Security」这种 26 字符的）。原来这里是 `flex: 0 0 auto`
—— 不许收缩 —— 于是 390px 窄屏上「品牌名 + 语言切换 + 右侧按钮」直接撑出
450px，页面横向溢出（而品牌名短的时候一切正常，所以这个 bug 藏了很久）。
现在改成可收缩 + 省略号：宁可把品牌名截尾，也不能让整页横向滚动。
（会员登录按钮已下线，右侧那组只剩语言与汉堡，但这条纪律不能撤 ——
后台可配字段的"长度不受控"是长期约束，不是这一次的偶然。） */
.brand { display: flex; align-items: center; gap: 11px; flex: 0 1 auto; min-width: 0; }
.brand__mark { width: 26px; height: 26px; color: var(--accent); flex: 0 0 auto; }
/* `gap: 4px` 是 2026-10-30 加的：原来两行的 line-height 都是 1.1，
行盒**紧贴**（实测 b 的 bottom 与 i 的 top 完全相等，gap = 0），
17.5px 的品牌名和 10.5px 的副标题字面只差 2px 左右，看起来是"粘"在一起的。
折算下来实际视觉空隙 ≈ 1.4px（两行各自的半行距） + 4px = 5.4px，
约等于品牌名的 31%，既拉开又不散 —— 副标题仍是"从属"，不会被读成第二行标题。
⚠️ 行高本身**不能加大**：`.hdr__in` 是固定高 68px，品牌块只有 30.8px，
加行高会让文字在 68px 里往上浮、和 26px 的盾牌图标不再视觉居中。
用 gap 只加"两行之间"这一处，块高 30.8 → 34.8，仍远小于 68，页眉高度不变。 */
.brand__txt {
display: flex; flex-direction: column; gap: 4px;
line-height: 1.1; min-width: 0;
}
.brand__txt b {
font-family: var(--sans);
font-size: 17.5px; font-weight: var(--w-black);
/* 品牌字用**正**字距（.01em）：其余标题一律负字距，唯独它放开一点点，
让"标识"与"标题"区分开 —— 全站都紧到极限会变成一个声音。 */
letter-spacing: .012em; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__txt i {
font-style: normal; font-size: 10.5px; font-weight: var(--w-bold);
color: var(--ink-3);
letter-spacing: .15em; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a {
font-size: 13.5px; font-weight: var(--w-bold); color: var(--ink-2);
letter-spacing: .04em;
padding: 4px 0; border-bottom: 1px solid transparent;
transition: color .18s, border-color .18s;
}
/* hover 的下划线做到 2px：1px 在浅底上几乎看不见，2px 才有"选中"的力度。
⚠️ 不用 `border-bottom-width: 2px` —— 那会让盒子长高 1px，
hover 的瞬间整条导航往下一抖。用 inset 阴影叠出一条，总厚度 2px 而盒子不变。 */
.nav a:hover {
color: var(--ink);
border-bottom-color: var(--accent);
box-shadow: inset 0 -1px 0 var(--accent);
}
/* 右侧一组（语言切换 + 汉堡）**不许收缩**：按钮被压窄会换行，比品牌名截尾更难看 */
.hdr__act { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.lang { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.lang a {
color: var(--ink-3); font-weight: var(--w-bold); letter-spacing: .04em;
padding: 2px 1px; transition: color .18s;
}
.lang a:hover { color: var(--ink); }
/* 当前语言（13px 小字）同样用深绿，理由见 .eyebrow 的注释 */
.lang a.is-on { color: var(--accent-ink); font-weight: var(--w-black); }
.lang__sep { color: var(--line); }
/* 按钮：底色/描边/文字对齐会员站 `.btn` 与 `.btn.primary`。
⚠️ `.btn--ghost`（白底 + 描边）随会员登录按钮一起下线了 ——
它当时只有那一个使用者，留着就是死样式。 */
.btn {
display: inline-flex; align-items: center; gap: 8px;
border-radius: var(--r); cursor: pointer;
font-size: 13.5px; font-weight: var(--w-bold); letter-spacing: .05em;
transition: background .18s, border-color .18s, color .18s, filter .18s;
}
.btn svg { width: 15px; height: 15px; }
/* 会员站 `.btn.primary`：--accent 底 + 白字 + 同色描边。
字重 700、字距 .06em、内边距放大一号 —— 首屏主按钮要"沉"，
它必须比正文重一档才压得住版心。 */
.btn--solid {
padding: 14px 26px;
background: var(--accent); color: #fff;
font-weight: var(--w-black); letter-spacing: .06em;
border: 1px solid var(--accent);
}
.btn--solid:hover { filter: brightness(1.06); }
/* ── 首屏 ───────────────────────────────────────────────────────────── */
/* 背景不设色 ⇒ 透出 body 的 --bg。深色版靠底色分层，浅色版靠这层淡网格线
提供"纸面"质感（线色用 --line，在 #f4f6f8 上可辨但不抢字）。 */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 68px 68px;
mask-image: radial-gradient(ellipse 78% 68% at 22% 34%, #000 22%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 78% 68% at 22% 34%, #000 22%, transparent 78%);
}
.hero__in {
position: relative;
/* 只改上下内边距，**不要**写 `padding: 104px 0 96px` ——
那会把 .wrap 的左右 28px 一起清零，首屏文字比下方区块左移一格。
曾经就是这么写的，肉眼看着"好像有点歪"，只有量出 123 vs 151 才发现。 */
padding-top: 104px;
padding-bottom: 96px;
/* 刻意**不**收窄这个容器：首屏文字的左边界必须和下面各区块对齐（都走 .wrap）。
曾经给它 max-width: 880px，配合 .wrap 的 margin:auto 结果首屏整块被居中，
比其它段落内缩了 120px，看起来像对不齐。收窄交给标题自身的 ch 宽度。 */
}
.eyebrow {
font-size: 11.5px; font-weight: var(--w-black);
letter-spacing: .2em; text-transform: uppercase;
/* ⚠️ 小号绿字一律用 --accent-ink（深绿），**不要**用 --accent。
实测对比度：#18a058 在白底上 3.38:1（低于正文 AA 的 4.5:1），
#14703f 是 6.14:1。会员站也是这个口径 —— 亮绿只做按钮底/图标/描边，
要写字就用深绿（见它的 .pill-btn:hover / .more-btn:hover）。 */
color: var(--accent-ink); margin-bottom: 20px;
}
/* 首屏主标题：56px → 64px、400 → 700、字族 serif → sans、行高 1.16 → 1.14。
「粗大」的全部手段都在这一行：**放大 + 加粗 + 收紧**，三者同时做才成立 ——
只放大不收紧会显得稀松，只加粗不放大像"加粗的正文"。 */
.hero__title {
font-size: clamp(34px, 5.6vw, 64px);
font-weight: var(--w-black);
line-height: 1.14;
letter-spacing: -.025em;
/* 23ch：字号变大后每行容字变少，放宽一点避免标题被切成三行 */
max-width: 23ch;
/* 断行交给浏览器均衡。不写的话 64px 下会断成
「让每一支出海队伍都有可靠的 / 安全底座」= 13 字 + 4 字，
第二行右边空一大片，整块重心往左上坠；balance 会摊成 9 / 8。
不支持的浏览器直接忽略这一行 —— 退化成现状，不会更糟。 */
text-wrap: balance;
color: var(--ink);
}
.hero__sub {
margin-top: 24px; max-width: 46ch;
font-size: 17.5px; line-height: 1.62; color: var(--ink-2);
}
.hero__cta { margin-top: 38px; }
/* ── 数字条 ─────────────────────────────────────────────────────────── */
/* 白底条：与首屏（灰）和下面的服务区（灰）形成一明一暗的节奏，
这正是会员站"灰底上铺白卡"的同一手法。 */
.stats { border-bottom: 1px solid var(--line); background: var(--panel); }
.stats__in {
display: grid; grid-template-columns: repeat(3, 1fr);
/* 不写 padding: 0 —— 那会清零 .wrap 的左右 28px，整条数字比其它区块左移一格 */
}
.stat { padding: 32px 0; border-right: 1px solid var(--line-2); padding-left: 26px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat__v {
font-size: 34px; font-weight: var(--w-black);
line-height: 1.02; letter-spacing: -.03em;
/* 34px 深绿数字：大字 AA 门槛 3:1，深绿 6.14:1 远超要求；
不用 --accent（亮绿）是因为这个字号还不够"大字"到可以放宽对比度。 */
color: var(--accent-ink);
display: block; margin-bottom: 8px;
}
/* 标签做全大写 + 700 + .1em 字距 —— 这是"铭牌"的排版语法，
和上面的粗数字配在一起就是一块仪表盘，而不是三句说明。 */
.stat__l {
font-size: 12px; font-weight: var(--w-bold);
color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase;
}
/* ── 通用分区 ───────────────────────────────────────────────────────── */
.sec { padding: 86px 0; border-bottom: 1px solid var(--line); }
.sec__head {
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
margin-bottom: 44px;
}
.sec__title {
font-size: 31px; font-weight: var(--w-black);
line-height: 1.18; letter-spacing: -.022em;
position: relative; padding-left: 20px;
/* 与首屏标题同一口径：窄屏上「每日评估 · 今日前三」会断行，
不加 balance 会断出孤字。单行标题不受影响。 */
text-wrap: balance;
color: var(--ink);
}
/* 竖条 3px → 4px、并拉满字高：区块标题的"锚"要够重，
否则 31px 的粗字旁边一根 3px 细线会被压得看不见。 */
.sec__title::before {
content: ""; position: absolute; left: 0; top: .04em;
width: 4px; height: .96em; background: var(--accent);
}
.sec__meta {
font-size: 13px; font-weight: var(--w-bold);
color: var(--ink-3); letter-spacing: .04em;
}
/* ── 服务卡 ─────────────────────────────────────────────────────────── */
/* 1px gap + 底色 --line ⇒ 卡片之间的"缝"就是描边，不需要每张都写 border */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.card {
background: var(--panel); padding: 34px 28px 32px;
transition: background .2s;
}
.card:hover { background: var(--hover); }
.card__ico {
width: 34px; height: 34px; color: var(--accent);
margin-bottom: 20px;
}
.card__t {
font-size: 20px; font-weight: var(--w-black);
line-height: 1.3; letter-spacing: -.015em;
margin-bottom: 10px; color: var(--ink);
}
.card__d { font-size: 15.5px; color: var(--ink-2); line-height: 1.66; }
/* ── 每日评估前三 ───────────────────────────────────────────────────── */
.sec--briefs { background: var(--panel); }
.briefs { display: grid; gap: 1px; background: var(--line); }
.brief {
display: grid;
grid-template-columns: 84px 1fr;
gap: 26px;
background: var(--panel);
padding: 30px 26px 30px 0;
transition: background .2s;
}
.brief:hover { background: var(--hover); }
.brief__rank {
/* 名次数字 40px → 44px + 700 + 行高 .92：序号是这一屏的视觉重音，
tabular-nums 让 01/02/03 的数字宽度一致，右对齐时不会参差。
⚠️ 颜色从 --accent（亮绿）改成 --accent-ink（深绿），三条理由：
① **统一**：首屏数字条 `.stat__v` 本来就是深绿，同一页上两套大数字
两种绿，属于"看起来都对、但说不出哪里乱"的那类不统一；
② **硬朗**：亮绿读出来轻快，深绿才沉、才压得住 700 的粗字；
③ **对比度**：3.38:1 → 6.14:1，44px 虽够大字门槛，但没理由停在及格线上。
而它**不降透明度**：绿在浅底上降透明度只会让字发灰、看着像没渲染完。 */
font-size: 44px; font-weight: var(--w-black);
/* ⚠️ 数字的字距**不能**跟标题一样收到 -.035em：tabular-nums 下 "1" 本身
就在格子里居中、左右留白多，再压负字距会让 "01" 的两位几乎粘在一起，
远看像 "01" 糊成一团。-.01em 只是把多余的空气收掉。 */
line-height: .92; letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
color: var(--accent-ink);
text-align: right;
}
.brief__body { min-width: 0; }
.brief__tags {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
/* 方角 + 700 + 更紧的字距：风险徽章是"标记"不是"药丸"，
圆角会把它读成标签化的 UI 组件。 */
.pill {
font-size: 10.5px; font-weight: var(--w-black);
letter-spacing: .12em; text-transform: uppercase;
padding: 4px 8px; border-radius: 0;
border: 1px solid currentColor;
white-space: nowrap;
}
.pill--high { color: var(--risk-high); }
.pill--mid { color: var(--risk-mid); }
.pill--none { color: var(--risk-none); }
.brief__theme {
font-size: 10.5px; font-weight: var(--w-black);
letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-3);
}
.brief__t {
font-size: 21px; font-weight: var(--w-black);
line-height: 1.38; letter-spacing: -.015em;
margin-bottom: 10px;
color: var(--ink);
}
.brief__t a { transition: color .18s; }
.brief__t a:hover { color: var(--accent-ink); }
.brief__d { font-size: 15.5px; color: var(--ink-2); line-height: 1.66; }
.brief__f {
margin-top: 14px; display: flex; align-items: center; gap: 14px;
font-size: 12px; font-weight: var(--w-bold);
color: var(--ink-3); letter-spacing: .05em;
}
.brief__f .dot { color: var(--line); }
.briefs__empty {
padding: 40px 0; color: var(--ink-3); font-size: 15.5px;
border-top: 1px solid var(--line);
}
/* ── 关于 ───────────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.about__r p { font-size: 16px; line-height: 1.72; color: var(--ink-2); max-width: 64ch; }
/* ── 联系：二维码 ───────────────────────────────────────────────────── */
/* ⚠️ 这一块的底**必须留灰**（不设 background），二维码卡片才是白的。
第一版把这里也设成 --panel 白，结果「白底 + 白卡 + 1px #e8eaed 描边」——
实测截图上卡片的四条边**完全看不见**，两个二维码像直接飘在页面上。
根部原因：--line 在白底上的明度差太小，会员站的卡片边界从来不靠描边，
靠的是「白卡 vs 灰底」这一档明度差。所以这里跟会员站用同一个手法。 */
.qrwrap { display: flex; gap: 26px; flex-wrap: wrap; }
.qr {
background: var(--panel); border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 22px; width: 232px;
display: flex; flex-direction: column; align-items: center;
transition: border-color .2s;
}
.qr:hover { border-color: var(--accent); }
/* ⚠️ 白底 + 内边距是必须的：二维码需要静区(quiet zone)，贴在深色底上扫不出来。
这里**不加**描边 —— 二维码是白图、卡片是白底，静区本来就该与卡片白融成一片；
加一圈 --line 反而在图上画了个框，看着像图被裁过。 */
.qr__img {
background: #fff; padding: 12px; border-radius: 0;
width: 100%; aspect-ratio: 1/1;
display: flex; align-items: center; justify-content: center;
}
.qr__img img { width: 100%; height: 100%; object-fit: contain; }
.qr__img--none {
color: var(--ink-3); font-size: 12px; letter-spacing: .06em; text-align: center;
}
.qr__l {
margin-top: 16px; font-size: 13px; font-weight: var(--w-bold);
color: var(--ink-2);
text-align: center; letter-spacing: .03em;
}
/* 12.5px 的小链接 → 深绿；下划线仍用亮绿，hover 时露出来 */
.qr__go {
margin-top: 10px; font-size: 12.5px; font-weight: var(--w-bold);
letter-spacing: .03em;
color: var(--accent-ink);
border-bottom: 1px solid transparent; transition: border-color .18s;
}
.qr__go:hover { border-bottom-color: var(--accent); }
.contact-lines {
list-style: none; margin: 38px 0 0; padding: 26px 0 0;
border-top: 1px solid var(--line);
display: flex; gap: 34px; flex-wrap: wrap;
}
.contact-lines li { font-size: 15px; color: var(--ink-2); }
/* 这一条作用于 app.js 生成的 .contact-lines__k。
原来 CSS 里写的是 `.contact-lines dt`，而 JS 造的是