/* ============================================================================
   免费节点笔记 —— 单文件样式表（最终版 / 瑞士网格 · 编辑排版）
   零外部请求 · 零 JS · 系统字体栈 · 深浅双主题
   ----------------------------------------------------------------------------
   五条铁律（改任何一行前先读这里）：
   1. 一套网格。全站只有两个宽度：--shell（外壳 1120，内容区 1024）与
      --measure（阅读栏 672）。1024 = 672 + 64(--s8) + 288(目录轨道)。
      ≥1080px 时正文栏左对齐到外壳左边缘，所有内容共享同一条左边界。
   2. 间距只能取 --s1..--s9（4px 基数）；字号只能取 --t1..--t9（17px×√1.25）；
      行高只能取 --lh / --lh-2 / --lh-3 / --lh-4；字距只能取 --ls / --ls-2 / --ls-h；
      圆角只有 --r(4px) / --r-sm(2px)；线宽只有 1px / 2px；时长只有 --dur / --dur-2。
   3. 颜色只能取 token。:root 定义完整浅色一套，dark 块只覆盖 token，
      任何 @media 里不得出现颜色字面量。
   4. 文章内的纵向节奏用「猫头鹰模型」：.post>*{margin:0} + .post>*+*{margin-top}。
      外边距永不合并，流布局与宽屏网格布局的间距完全一致。
   5. 中文优先。正文 17px / 行高 1.85 / 39.5 汉字每行；不用 opacity 调灰；
      任何次级文本都有实色 token；表格与代码在自己的容器里横滚，页面本身不横滚。
   ========================================================================== */

/* ============================================================ 1. 设计令牌 */
:root{
  /* --- 字号刻度：17px 基准，公比 √1.25 ≈ 1.118（每两步 = ×1.25）--- */
  --t1:.6875rem;  /* 11.0px  拉丁微型标签（大写 + 字距），只用于代码语言标签 */
  --t2:.85rem;    /* 13.6px  meta / 日期 / 面包屑 / 披露 / 页脚小字 */
  --t3:.95rem;    /* 15.2px  导航 / 卡片摘要 / 表格 / 目录 / 按钮 */
  --t4:1.0625rem; /* 17.0px  正文基准（提示块 / FAQ 答案同级）*/
  --t5:1.1875rem; /* 19.0px  导语 / h3 / 列表标题 / CTA 标题 / 广告标题 */
  --t6:1.328rem;  /* 21.3px  h2 下限 / 相关阅读标题 */
  --t7:1.66rem;   /* 26.6px  h2 上限 / h1 下限 */
  --t8:2.075rem;  /* 33.2px  文章 h1 上限 / 栏目 h1 上限 */
  --t9:2.59rem;   /* 41.5px  首页 h1 上限 */

  /* --- 标题插值曲线：四条，各自成名，杜绝「只差 0.1vw」的双胞胎曲线 --- */
  --fs-hero:clamp(var(--t7),1.3rem + 3.2vw,var(--t9));
  --fs-h1:  clamp(var(--t7),1.2rem + 2.6vw,var(--t8));
  --fs-hub: clamp(var(--t7),1.1rem + 1.4vw,var(--t8));
  --fs-h2:  clamp(var(--t6),1.15rem + .9vw,var(--t7));

  /* --- 间距刻度：4px 基数 --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* --- 版面模块（全部落在 4px 网格上）--- */
  --shell:1120px;   /* 外壳外沿；减去两侧 48px 天沟 = 1024 内容区 */
  --measure:672px;  /* 中文阅读栏 ≈ 39.5 汉字/行 */
  --measure-2:38em; /* 次级文本（列表摘要 / 页脚段落）随字号缩放的测量宽 */
  --gut:clamp(var(--s5),4vw,var(--s7));
  --hd-h:56px;      /* = --s7 + --s2 */
  --col-min:272px;  /* 卡片网格 / 弹性列的最小列宽（4px 网格上）*/
  --tbl-min:460px;  /* 数据表可读下限：低于此宽度列会挤成两行，改为容器内横滚 */

  /* --- 行高（按语种切换，见 html[lang="en"]）--- */
  --lh:1.85;    /* 正文：中文长文的舒适区中上部 */
  --lh-2:1.7;   /* 次级正文：导语 / 摘要 / 表格 / 代码 / FAQ / 页脚 */
  --lh-3:1.45;  /* 小标题 / 按钮 / 标签 / 卡片标题 */
  --lh-4:1.25;  /* 大标题 h1 */

  /* --- 字距：中文一律 ≤.04em；≥.08em 只给拉丁大写 --- */
  --ls:.04em;   /* 小标签（中文安全值；英文页自动放宽到 .08em）*/
  --ls-2:.1em;  /* 纯拉丁大写标签 */
  --ls-h:0;     /* 标题字距：中文 0，英文页 -.02em */
  --t-inline:.9em;  /* 行内代码：相对所在行的字号，不能取绝对档 */
  --ul-off:.22em;   /* 下划线基线偏移：同样必须随字号缩放 */

  /* --- 圆角刻度 / 层次 / 时长 ---
     4px 的极小圆角是「复古」的主要来源之一：它既不是直角的硬朗，
     也不是当代产品那种明确的柔和，读起来像 2010 年前后的网页。 --- */
  --r-sm:4px; --r:8px; --r-lg:12px; --r-pill:999px;
  /* 极轻的两级层次。不是拟物阴影，是让「面」浮起 1~2px 的程度 */
  --sh-1:0 1px 2px rgba(17,18,26,.05), 0 1px 3px rgba(17,18,26,.04);
  --sh-2:0 6px 20px rgba(17,18,26,.09), 0 2px 6px rgba(17,18,26,.05);
  --sh-a:0 4px 16px rgba(67,56,202,.20);   /* 主按钮：带强调色的投影 */
  --dur:.15s; --dur-2:.25s;

  /* --- 字体栈（纯系统字体，零请求）--- */
  --ff:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",
       "Source Han Sans SC","Source Han Sans CN",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
       "DejaVu Sans Mono","Liberation Mono",monospace;
  --smooth:auto;   /* 深色下切 antialiased（macOS 生效；Windows 忽略，无害）*/

  /* --- 纸与墨：冷中性近白。
         暖报纸底（hue 45~73）配发丝线是"印刷品"的语汇，在屏幕上读起来偏旧；
         换成极淡冷调的近白 + 一层真正的 surface，让卡片能"浮"起来。 --- */
  --bg:#FBFBFD;      /* 页底 */
  --surface:#FFFFFF; /* 浮起的面：卡片 / 目录 / 表格 / FAQ —— 新增的关键 token */
  --sunken:#F3F4F8;  /* 下沉面：页脚 / note / 次要按钮 hover */
  --code:#F5F6FA;    /* 代码面 */
  --fg:#15161C;      /* 墨 */
  --fg-2:#3B3E4A;    /* 成段次级文字 */
  --mut:#5E6270;     /* 标签 */
  --mut-2:#767A88;   /* 最弱可读（全站零 opacity 调灰）*/
  --rule:#E7E8EF;    /* 内容细线 */
  --rule-2:#D5D7E0;  /* 结构细线 */

  /* --- 品牌色（靛）：唯一强调色，只用于「可点」与「编辑动作」 --- */
  --accent:#4338CA;
  --accent-h:#312BA0;
  --accent-soft:#EFEEFC;  /* 淡色面：hover 底、tip 提示块、标记 */
  --on-accent:#FFFFFF;
  --sel-bg:#DDDAFB;

  /* --- 商业色（绿）：只给 .cta 与广告，与品牌靛跨色相分离 --- */
  --promo:#047857;
  --promo-h:#03604A;
  --on-promo:#FFFFFF;

  /* --- 栏目色：五个栏目各一个色相，只用在标签与栏目标记上。
         这是全站"个性"和"扫读效率"的主要来源：读者一眼能认出内容属于哪一类。
         用法是 [data-cat] 设 --cat，组件内部一律 var(--cat) 取用。 --- */
  --cat-free-vpn:#4338CA;   /* 靛  —— 与品牌同色，主栏目 */
  --cat-free-node:#047857;  /* 绿 */
  --cat-tutorial:#9A5B08;   /* 琥珀 */
  --cat-compare:#7E22CE;    /* 紫 */
  --cat-faq:#BE123C;        /* 玫红 */

  /* --- 提示块：淡色面 + 3px 左色条 + 同色标签 --- */
  --warn:#9A5B08;           --warn-bg:#FDF6E9;
  --tip-ink:var(--accent);  --tip-bg:var(--accent-soft);
  --note-ink:var(--mut);    --note-bg:#F3F4F8;
  --test-ink:var(--promo);  --test-bg:#E8F5F0;

  /* --- 广告位：两主题共用，dark 块里刻意不覆盖（硬约束 7）--- */
  --ad-bg:#0F241E;
  --ad-line:#2E6C58;
  --ad-title:#F0FBF6;
  --ad-body:#A9C6BC;
  --ad-label:#8AA79D;
  --ad-btn:#2ED39A; --ad-btn-h:#4FE0B0; --ad-btn-fg:#052018;
  --ad-badge:#7EE8C4; --ad-badge-fg:#062019;
  --ad-ico:#6FE0C2; --ad-ico-bg:rgba(46,211,154,.12);

  /* 遮罩基准色：只当 alpha 用，与主题无关 */
  --mask:#000;
}

/* 英文版：只切排版轴（测量宽 / 行高 / 字距），一个颜色都不改 */
html[lang="en"]{
  --measure:592px;   /* ≈ 72 拉丁字符/行 */
  --lh:1.65; --lh-2:1.55; --lh-3:1.35; --lh-4:1.15;
  --ls:.08em; --ls-h:-.02em;
}

/* ================================================ 2. 深色主题（只覆盖 token）*/
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1015; --surface:#171922; --sunken:#1A1C25; --code:#15171F;
    --fg:#D9DAE2;      /* 刻意压住，抑制中文密集笔画在近黑底上的光晕 */
    --fg-2:#B0B2BE;
    --mut:#8E91A0;
    --mut-2:#7C7F8E;
    --rule:#252833; --rule-2:#383C4B;

    --accent:#A5B4FC;
    --accent-h:#C7D2FE; --accent-soft:#1E2040; --on-accent:#141438; --sel-bg:#2A2C5C;
    --promo:#34D399; --promo-h:#6EE7B7; --on-promo:#04231A;

    --cat-free-vpn:#A5B4FC; --cat-free-node:#34D399; --cat-tutorial:#E0A93C;
    --cat-compare:#C89AF5;  --cat-faq:#F98FA8;

    --warn:#E0A93C;  --warn-bg:#28210F;
    --tip-bg:#1A1C33;
    --note-bg:#1A1C25;
    --test-bg:#122320;

    /* 深色下投影几乎不可见，改用「面比底亮一档 + 边框提亮」建立层次 */
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 8px 24px rgba(0,0,0,.5);
    --sh-a:0 4px 16px rgba(165,180,252,.14);

    --smooth:antialiased;
    /* --ad-* 刻意不覆盖 */
  }
}

/* --- 栏目色钩子：[data-cat] 只负责把对应色相灌进 --cat，
       组件内部一律 var(--cat, 回退值) 取用，不必为每个栏目各写一遍规则 --- */
[data-cat="free-vpn"] {--cat:var(--cat-free-vpn)}
[data-cat="free-node"]{--cat:var(--cat-free-node)}
[data-cat="tutorial"] {--cat:var(--cat-tutorial)}
[data-cat="compare"]  {--cat:var(--cat-compare)}
[data-cat="faq"]      {--cat:var(--cat-faq)}

/* ================================================================ 3. 基础 */
*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;          /* clip 而非 hidden：不创建滚动容器，.hd 的 sticky 仍生效 */
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--fg);
  /* 不用 font: 简写 —— 简写会把 font-variant-numeric 静默重置回 initial */
  font-family:var(--ff);
  font-size:var(--t4);
  line-height:var(--lh);
  font-kerning:normal;
  font-variant-numeric:tabular-nums lining-nums;  /* ¥29 / 8.4Mbps / 2026-08-26 列对齐 */
  -webkit-font-smoothing:var(--smooth);
  -moz-osx-font-smoothing:auto;
}

/* 渐进增强：中西文自动间距 + 行首全角标点收紧。老浏览器安静忽略 */
@supports (text-spacing-trim:space-first){ body{text-spacing-trim:space-first} }
@supports (text-autospace:normal){ body{text-autospace:normal} }

/* 中文标题：全角标点等比压缩（PingFang SC 生效；YaHei 无此特性表，空转无害）*/
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] .cta-t,
html[lang="zh-Hans"] .ad-t{font-feature-settings:"palt" 1}

h1,h2,h3,h4{font-weight:600;letter-spacing:var(--ls-h);text-wrap:balance}
strong,b{font-weight:600}
.logo{display:flex;align-items:center;gap:var(--s3);flex:none;color:var(--fg);font-size:var(--t4);font-weight:700;letter-spacing:var(--ls-h);line-height:var(--lh-3);white-space:nowrap}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:var(--ul-off);text-decoration-thickness:1px}

img,svg,video{max-width:100%}
img{height:auto}

::selection{background:var(--sel-bg);color:var(--fg)}

/* 锚点定位避开粘性页眉；一条规则覆盖目录里全部 h2/h3 与 #faq */
[id]{scroll-margin-top:calc(var(--hd-h) + var(--s5))}

/* 焦点环不改元素几何（不写 border-radius，否则 summary 聚焦时会跳圆角）*/
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================ 4. 版面外壳 */
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* 阅读型模块统一落在同一个测量宽上；宽屏时（第 19 节）整体左对齐到外壳左边缘，
   页眉 / 面包屑 / 正文 / 广告 / CTA / 相关阅读共享一条连续左边界。
   同一个组件（.ad / .cta）在首页、栏目页、文章页宽度完全一致。
   margin-inline:0 auto = 一律左对齐：只要外壳比阅读栏宽，右侧多出来的空间就是
   同一条轨道（≥1080px 时目录搬进去住）。若改成居中，1024px 下广告卡会比
   正文栏往里缩 127px，同一页出现两条左边界 */
.crumb,.hub,.post,.rel,.ad,.cta{max-width:var(--measure);margin-inline:0 auto}

.mut{color:var(--mut)}
.small{font-size:var(--t3)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:99;
  background:var(--accent);color:var(--on-accent);
  padding:var(--s3) var(--s4);border-radius:var(--r)}

/* ================================================================ 5. 页眉 */
/* 页眉：半透明 + 背景模糊。内容从下方滑过时有真实的层次，
   而不是一条贴死的白条。不支持 backdrop-filter 的浏览器退化为半透明底，无害 */
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.hdr{display:flex;align-items:center;gap:var(--s5);height:var(--hd-h)}

.logo{display:flex;align-items:center;gap:var(--s2);flex:none;
  color:var(--fg);font-size:var(--t3);font-weight:600;
  line-height:var(--lh-3);white-space:nowrap}
.logo:hover{text-decoration:none;color:var(--accent)}
/* 标志块：正方形而非圆点 —— 瑞士视觉词汇里的记号，且不占用强调色 */
/* logo 标记：8px 纯黑方块 → 带渐变和投影的圆角块，全站唯一的品牌视觉锚点 */
/* 品牌标记容器：图形本身是内联 SVG（见 build.js 的 brandMark），这里只管尺寸与交互 */
.dot{display:flex;flex:none;line-height:0;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-a);transition:transform var(--dur-2),box-shadow var(--dur-2)}
.dot svg{display:block;width:22px;height:22px}
.logo:hover .dot{transform:rotate(-6deg) scale(1.08);box-shadow:var(--sh-2)}

.nav{display:flex;gap:var(--s5);flex:1;min-width:0;  /* min-width:0 修 flex item 撑破页眉 */
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--mut);font-size:var(--t3);line-height:var(--lh-3);
  white-space:nowrap;padding:var(--s2) 0;transition:color var(--dur)}
.nav a:hover{color:var(--fg);text-decoration:none}
.nav a[aria-current]{color:var(--accent);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.lang{flex:none;font-size:var(--t2);line-height:var(--lh-3);color:var(--mut);
  border:1px solid var(--rule-2);border-radius:var(--r);padding:var(--s1) var(--s2);
  transition:color var(--dur),border-color var(--dur)}
.lang:hover{color:var(--fg);border-color:var(--fg);text-decoration:none}

/* ============================================================== 6. 面包屑 */
.crumb{font-size:var(--t2);line-height:var(--lh-2);color:var(--mut);
  padding:var(--s5) 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 var(--s2);color:var(--mut-2)}  /* 原 opacity:.5 = 2.13:1，不合规 */
.crumb [aria-current]{display:inline-block;max-width:min(36ch,100%);
  overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* ================================================================ 7. 首页 */
.hero{padding:var(--s9) 0 var(--s7)}
/* 不设 em 上限：CJK 没有词边界，硬套 em 宽必然在词中间断行（原版 16em 把
   「免费节点推荐」拦腰截断）。让标题吃满内容区，1024/41.5 ≈ 24 字，宽屏一行放得下 */
.hero h1{font-size:var(--fs-hero);line-height:var(--lh-4);margin:0 0 var(--s5)}
.hero-b{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 var(--s5)}
/* 灰上叠灰的第三段：用一条细线做空间隔断，而不是再降一档灰度；字号不低于 15.2px */
.hero .mut.small{max-width:var(--measure);margin:0;
  padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t3);line-height:var(--lh-2);color:var(--mut)}

/* 导语：比正文大一档、用 --fg-2 而不是 --mut —— 它决定读者要不要往下读 */
.lede{font-size:var(--t5);line-height:var(--lh-2);color:var(--fg-2);
  margin:0;max-width:var(--measure);text-wrap:pretty}

/* 分节：规则线在上方，节内上下对称 */
.hs{padding:var(--s7) 0;border-top:1px solid var(--rule-2)}
.hs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
/* 区块标题：左侧栏目色竖条。五个栏目在首页一眼可辨，同时是全站配色的出处 */
.hs h2{font-size:var(--fs-h2);line-height:var(--lh-3);margin:0;
  display:flex;align-items:center;gap:var(--s3)}
.hs h2::before{content:"";width:4px;height:1.05em;flex:none;
  border-radius:var(--r-pill);background:var(--cat,var(--accent))}

.hs > p.mut{margin:var(--s3) 0 0;max-width:var(--measure);
  font-size:var(--t3);line-height:var(--lh-2);color:var(--fg-2);text-wrap:pretty}
.more{font-size:var(--t2);line-height:var(--lh-3);white-space:nowrap;
  color:var(--cat,var(--accent));font-weight:600}

/* 卡片：去掉 6~24 个 1px 圆角矩形，改成规则线网格（外间距 48 > 内间距）。
   摘要不做 line-clamp —— 这是内容站，宁可参差也不裁字 */
.cards{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(var(--col-min),100%),1fr))}
/* 卡片：原来是「纯文字 + 一条 1px 上边线」，没有任何卡片形态 —— 这是全站最像
   早期博客的地方。改成真正的面：surface 底 + 12px 圆角 + 极轻投影 + hover 抬升 */
.cards a{display:grid;align-content:start;gap:var(--s2);height:100%;position:relative;padding:var(--s5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2)}
.cards a:hover{text-decoration:none;border-color:var(--cat,var(--accent));box-shadow:var(--sh-2);transform:translateY(-2px)}
.cards .tag::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:currentColor;flex:none}
.cards .tag{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t2);line-height:var(--lh-3);font-weight:600;color:var(--cat,var(--mut-2));letter-spacing:var(--ls)}
.cards strong{display:block;color:var(--fg);font-size:var(--t5);font-weight:600;line-height:var(--lh-3);text-wrap:balance;transition:color var(--dur)}
.cards a:hover strong{color:var(--cat,var(--accent))}
.cards .mut{display:block;font-size:var(--t2);line-height:var(--lh-2);
  color:var(--mut);text-wrap:pretty}

/* ============================================================== 8. 栏目页 */
.hub{padding:var(--s7) 0 var(--s6)}
.hub h1{font-size:var(--fs-hub);line-height:var(--lh-4);margin:0 0 var(--s4);
  display:flex;align-items:center;gap:var(--s4)}
.hub h1::before{content:"";width:5px;height:.92em;flex:none;
  border-radius:var(--r-pill);background:var(--cat,var(--accent))}
.hub > .lede{margin-bottom:var(--s6)}

/* 索引列表：标题 + 摘要在左栏，日期在右栏（等宽数字，右对齐）。
   摘要用 em 测量宽夹住 —— 字号越小行宽必须越窄，不能跟着栏宽一起长 */
.list{list-style:none;padding:0;margin:var(--s7) 0 0;border-top:1px solid var(--rule-2)}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);padding:var(--s5) var(--s4);margin-inline:calc(var(--s4)*-1);border-radius:var(--r);transition:background-color var(--dur)}
.list a:hover{text-decoration:none;background:var(--sunken)}
.list strong{grid-column:1;grid-row:1;display:block;font-size:var(--t5);font-weight:600;line-height:var(--lh-3);color:var(--fg);text-wrap:balance;transition:color var(--dur)}
.list a:hover strong{color:var(--accent)}
.list .mut{grid-column:1;grid-row:2;display:block;max-width:var(--measure-2);
  font-size:var(--t3);line-height:var(--lh-2);color:var(--fg-2);text-wrap:pretty}
.list .date{grid-column:2;grid-row:1;display:block;text-align:right;
  padding-top:var(--s1);
  font-size:var(--t2);line-height:var(--lh-2);color:var(--mut-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ================================================================ 9. 文章 */
.post{padding:var(--s7) 0 0}

.ph{margin:0;padding:0 0 var(--s5);border-bottom:1px solid var(--rule-2)}
.kicker{margin:0 0 var(--s3);font-size:var(--t2);line-height:var(--lh-3);
  letter-spacing:var(--ls)}
.kicker a{color:var(--cat,var(--accent));font-weight:600}
.kicker a:hover{color:var(--accent)}
.post h1{font-size:var(--fs-h1);line-height:var(--lh-4);margin:0 0 var(--s4)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;
  font-size:var(--t2);line-height:var(--lh-3);color:var(--mut);
  font-variant-numeric:tabular-nums}

/* --- 9a. 标题层级：三种不同机制，任何视口下都不会互相冒充 ---
   h2 = 顶一条分节线 + 21.3→26.6px；h3 = 19px 无线；h4 = 17px + 字距。
   375px 实测：h1 28.9 / h2 21.8 / h3 19.0 / 正文 17，四档全部分得开 */
.post h2::before{content:"";position:absolute;left:calc(var(--s4)*-1);top:.34em;
  width:4px;height:1em;border-radius:var(--r-pill);background:var(--cat,var(--accent));
  opacity:0}
@media (min-width:900px){.post h2::before{opacity:1}}
.post h2{font-size:var(--fs-h2);line-height:var(--lh-3);position:relative}
.post h3{font-size:var(--t5);line-height:var(--lh-3)}
.post h4{font-size:var(--t4);line-height:var(--lh-3);letter-spacing:var(--ls)}

.post > h2{padding-top:var(--s4);border-top:1px solid var(--rule)}
/* 紧跟在文章头 / 目录之后的 h2 不重复画线（上一块自己已有下边线）*/
.post > .ph + h2,.post > .toc + h2{border-top:0;padding-top:0}

/* --- 9b. 猫头鹰纵向节奏：margin 全部归零，只用 margin-top 驱动。
   外边距永不合并 → 第 19 节的宽屏网格与窄屏流布局节奏一模一样，
   不需要在断点里逐个补偿，.faq / .toc 这类容器也不会突然多出 48px --- */
.post > *{margin:0;min-width:0}
.post > * + *{margin-top:var(--s5)}                       /* 24 默认 */
.post > ul,.post > ol{margin-top:var(--s4)}               /* 16 列表紧跟引导句 */
.post > .tw,.post > .code,.post > .cal,
.post > blockquote,.post > .toc{margin-top:var(--s6)}     /* 32 块级组件 */
.post > .ad,.post > .cta,.post > hr{margin-top:var(--s7)} /* 48 独立单元 */
.post > .faq,.post > .pf{margin-top:var(--s8)}            /* 64 文末分区 */
.post > h4{margin-top:var(--s6)}                          /* 32 */
.post > h3{margin-top:var(--s7)}                          /* 48 */
.post > h2{margin-top:var(--s8)}                          /* 64（+16 padding）*/
.post > .ph + *{margin-top:var(--s7)}
/* 组件在第 13/15/20 节自带的 margin-block 在 .post 内一律作废：纵向节奏
   只由 margin-top 驱动。少了这一条，网格里「上块 margin-bottom + 下块 margin-top」
   会相加而不是合并，同一个 h2 在 1079px 是 64、在 1080px 变 96/112 */
.post > .cal,.post > blockquote,.post > .ad,.post > .cta,
.post > .tw,.post > .code,.post > .toc,.post > hr{margin-bottom:0}
/* 独立单元上下留白对称 */
.post > .ad + *,.post > .cta + *{margin-top:var(--s7)}
.post > .ad + h2,.post > .cta + h2{margin-top:var(--s8)}
/* 标题之后收紧：三档递进，标题与它引导的内容成为一组 */
.post > h2 + *{margin-top:var(--s4)}
.post > h3 + *{margin-top:var(--s3)}
.post > h4 + *{margin-top:var(--s2)}
.post > h2 + .tw,.post > h2 + .code,.post > h2 + .cal,.post > h2 + blockquote,
.post > h3 + .tw,.post > h3 + .code,.post > h3 + .cal,.post > h3 + blockquote{
  margin-top:var(--s5)}

/* --- 9c. 正文 ---
   段距 24 / 行距 31.45 = 0.76。中文正文不首行缩进，段落边界全靠这口空白扛；
   行高抬到 1.85 之后段距必须跟着抬，否则段与段比原来更糊 */
.post > p + p{margin-top:var(--s5)}
.post p{text-wrap:pretty;overflow-wrap:break-word}
.post ul,.post ol{padding-left:var(--s5)}
.post li{margin:var(--s2) 0;text-wrap:pretty;overflow-wrap:break-word}
.post li::marker{color:var(--mut-2)}
.post img{border-radius:var(--r)}
.post hr{border:0;border-top:1px solid var(--rule-2)}

/* 整段强调：build.js 给「整段只有一个 <strong>」的段落加 class="lede"（见交付说明）。
   19px / --fg，靠字号与上方留白成为一个软标题，和 h3 的「无线 19px」区分靠上下文。
   —— 绝不用 :only-child 去猜：:only-child 不数文本节点，
   `<p><strong>结论</strong>：后半句</p>` 会被命中，全站 570 处句中加粗会被劈成两半、
   后半句以中文标点起行（违反避头尾）。这条是原方案的硬约束 5 违规点。
   若不改 build.js，这些段落就是普通粗体段落，一切照常，CSS 不依赖它 */
.post > p.lede{color:var(--fg);font-size:var(--t5);line-height:var(--lh-2);
  max-width:none;margin-top:var(--s6)}
.post > p.lede + p.lede{margin-top:var(--s3)}
/* 提示块 / FAQ / 引文内部若也出现整段强调，不升格 —— 它们已经有自己的容器语气 */
.cal .lede,details .lede,blockquote .lede{
  font-size:inherit;line-height:inherit;color:inherit;max-width:none}

/* 正文行内链接给下划线：颜色不是唯一线索（WCAG 1.4.1），扫读时也看得见 */
.post > p a,.post > ul a,.post > ol a,.cal p a,.cal li a,details p a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--rule-2);text-underline-offset:var(--ul-off)}
.post > p a:hover,.post > ul a:hover,.post > ol a:hover,
.cal p a:hover,.cal li a:hover,details p a:hover{text-decoration-color:currentColor}

blockquote{margin:var(--s6) 0;padding:0 0 0 var(--s5);
  border-left:2px solid var(--rule-2);color:var(--fg-2)}
blockquote p{margin:var(--s3) 0}
blockquote p:first-child{margin-top:0}
blockquote p:last-child{margin-bottom:0}

/* =============================================================== 10. 目录 */
/* 目录：原来是「无底无框、只靠留白」，在长文里几乎看不出是个模块 */
.toc{padding:var(--s5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.toc-t{margin:0 0 var(--s3);font-size:var(--t2);line-height:var(--lh-3);
  font-weight:600;letter-spacing:var(--ls);color:var(--mut)}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;font-size:var(--t3)}
/* 01 / 02 / 03 排在固定栏里、等宽数字对齐 —— 成本为零的一处编辑个性 */
.toc li{counter-increment:toc;display:grid;
  grid-template-columns:var(--s5) minmax(0,1fr);align-items:baseline;
  margin:0 0 var(--s2);line-height:var(--lh-2)}
.toc li:last-child{margin-bottom:0}
.toc li::before{content:counter(toc,decimal-leading-zero);font-variant-numeric:tabular-nums;font-size:var(--t2);font-weight:600;color:var(--accent);line-height:var(--lh-2)}
.toc a{color:var(--fg-2)}
.toc a:hover{color:var(--accent);text-decoration:none}

/* =============================================================== 11. 表格 */
/* 容器只留上下两条规则线；横滚发生在容器内，页面本身永不横滚（硬约束 6）*/
.tw{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:var(--tbl-min);
  font-size:var(--t3);line-height:var(--lh-2)}

/* caption 是 <table> 的子元素，会跟着 min-width 一起被卷进横滚区、在窄屏被裁掉。
   sticky 把它钉在左边缘，容器查询把它的宽度锁到「可见宽度」而不是表格宽度。
   降级路径 width:100% 等于改造前的现状，无回退风险，且不需要动 build.js */
caption{caption-side:top;text-align:left;margin:0;
  padding:var(--s4) 0 var(--s3);
  font-size:var(--t2);line-height:var(--lh-2);color:var(--mut);
  position:sticky;left:0;width:100%}
@supports (width:100cqi){ caption{width:100cqi} }

th,td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4)}
th:first-child,td:first-child{padding-left:0}   /* 首列与正文左边缘对齐 */
th:last-child,td:last-child{padding-right:0}
th{font-size:var(--t2);font-weight:600;letter-spacing:var(--ls);color:var(--fg-2);background:var(--sunken);white-space:nowrap;text-align:left}
td{color:var(--fg);border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
tbody tr:last-child td{border-bottom:0}
.plans td:first-child{white-space:nowrap}
/* HTML 里首格是 <strong>…</strong><br><span class="mut">…</span>。
   .mut 变块级之后，两个块盒之间那个孤立 <br> 会生成一个空行盒，
   套餐表每行凭空多出约 25px。按掉它，不需要动 build.js */
.plans td:first-child br{display:none}
.plans td:first-child .mut{display:block;margin-top:var(--s1);
  font-size:var(--t2);white-space:normal}

/* =============================================================== 12. 代码 */
code{font-family:var(--mono);font-size:var(--t-inline);
  background:var(--code);padding:.1em .35em;  /* em 相对：行内代码必须随所在行缩放 */border-radius:var(--r-sm);
  overflow-wrap:break-word}
.code{padding:var(--s4);background:var(--code);
  border:0;border-radius:var(--r);
  font-family:var(--mono);font-size:var(--t2);line-height:var(--lh-2);
  tab-size:2;-moz-tab-size:2;        /* YAML 缩进不再被放大成 8 格 */
  overflow-x:auto;overscroll-behavior-x:contain;position:static}
.code code{background:0;padding:0;font-size:inherit}
/* 语言标签进入正常流并 sticky 在左边缘 —— 原来绝对定位在右上角，
   长行横滚时会跟着滚出屏幕，还压住第一行代码 */
.code[data-lang]::before{content:attr(data-lang);
  display:block;position:sticky;left:0;width:max-content;margin:0 0 var(--s3);
  font-size:var(--t1);line-height:var(--lh-3);letter-spacing:var(--ls-2);
  text-transform:uppercase;color:var(--mut-2)}

/* ============================================================= 13. 提示块 */
/* 四个变体共用一套机制：近纸底 + 2px 左色条 + 同色标签，变体只换两个局部
   自定义属性。正文字号回到 17px 与正文等重 —— 这个站最该被读进去的话
   （「不要在上面登录网银、公司邮箱、支付账号」）就住在这里，不能当附注处理。
   本节必须排在第 9 节之后：.cal p 与 .post p 特异性相同，靠源码顺序取胜 */
.cal{--cal-ink:var(--note-ink);--cal-bg:var(--note-bg);padding:var(--s5) var(--s5) var(--s5) var(--s5);background:var(--cal-bg);border:0;border-left:3px solid var(--cal-ink);border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);font-size:var(--t4);line-height:var(--lh)}
.cal p{margin:var(--s4) 0}
.cal p:first-child{margin-top:0}
.cal p:last-child{margin-bottom:0}
.cal ul,.cal ol{margin:var(--s4) 0;padding-left:var(--s5)}
.cal li{margin:var(--s2) 0}
.cal .cal-t{margin:0 0 var(--s2);font-size:var(--t3);line-height:var(--lh-3);
  font-weight:600;letter-spacing:var(--ls);color:var(--cal-ink)}  /* 无需 !important */
.cal-tip {--cal-ink:var(--tip-ink); --cal-bg:var(--tip-bg)}
.cal-warn{--cal-ink:var(--warn);    --cal-bg:var(--warn-bg)}
.cal-note{--cal-ink:var(--note-ink);--cal-bg:var(--note-bg)}
.cal-test{--cal-ink:var(--test-ink);--cal-bg:var(--test-bg)}

/* =============================================================== 14. 按钮 */
.btn,.btn2{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s3) var(--s5);
  border:1px solid transparent;border-radius:var(--r);
  font-size:var(--t3);font-weight:600;line-height:var(--lh-3);white-space:nowrap;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.btn:hover{transform:translateY(-1px)}
.btn2:hover{border-color:var(--accent);color:var(--accent)}
.btn{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-a);transition:background-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.btn:hover{background:var(--accent-h);color:var(--on-accent);text-decoration:none}
.btn2{background:var(--surface);border-color:var(--rule-2);color:var(--fg);box-shadow:var(--sh-1)}
.btn2:hover{background:var(--sunken);border-color:var(--fg);
  color:var(--fg);text-decoration:none}

/* ================================================================ 15. CTA */
/* 从「白盒 + 一圈饱和青边框」改成一条规则带：2px 商业绿顶线 + 1px 底线。
   颜色只留在里面那颗按钮上，整块安静下来 */
.cta{padding:var(--s6);margin-block:var(--s7);background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--promo);border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);box-shadow:var(--sh-1)}
.cta-t{margin:0 0 var(--s3);font-size:var(--t5);font-weight:600;
  line-height:var(--lh-3);text-wrap:balance}
.cta-d{margin:0 0 var(--s5);font-size:var(--t3);line-height:var(--lh-2);
  color:var(--fg-2);text-wrap:pretty}
.cta-b{margin:0 0 var(--s4)}
.cta .btn{background:var(--promo);color:var(--on-promo)}   /* 商业按钮 ≠ 编辑按钮 */
.cta .btn:hover{background:var(--promo-h);color:var(--on-promo)}
.cta-n{margin:0;font-size:var(--t2);line-height:var(--lh-2);color:var(--mut-2)}
/* 同一篇里第二个及以后的 CTA 自动降噪，避免同一张横幅喊两次 */
.post .cta ~ .cta{border-top-width:1px;border-top-color:var(--rule-2)}

/* ================================================================ 16. FAQ */
/* 刻意不做 details::details-content 展开动画：在支持 interpolate-size 的
   Chromium 上，block-size + content-visibility 的过渡会把 <details> 永远锁在
   收起高度（答案区不可见且与下一条问题重叠）。FAQ 带 FAQPage 结构化数据，
   是 SEO 资产，不拿它换一个动画 */
.faq h2{font-size:var(--fs-h2);line-height:var(--lh-3);margin:0 0 var(--s5)}
/* FAQ 折叠块：与卡片、目录、表格同一套面语言，不再是裸文字 */
details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s4) var(--s5);box-shadow:var(--sh-1);transition:border-color var(--dur)}
details:hover{border-color:var(--rule-2)}
details[open]{border-color:var(--accent)}
/* 卡片之间用间距分隔，不再靠边框拼接 */
.faq details + details{margin-top:var(--s3)}
summary{position:relative;cursor:pointer;list-style:none;
  padding:var(--s1) var(--s6) var(--s1) 0;
  font-size:var(--t4);font-weight:600;line-height:var(--lh-3);
  text-wrap:balance;-webkit-tap-highlight-color:transparent;
  transition:color var(--dur)}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
summary:hover{color:var(--accent)}
summary::after{content:"";position:absolute;right:0;top:50%;
  width:var(--s2);height:var(--s2);
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-2)}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details > div{padding:var(--s4) 0 var(--s1)}
/* FAQ 答案是真内容，不是附注：与正文同字号 */
details p{margin:0 0 var(--s4);font-size:var(--t4);line-height:var(--lh-2);color:var(--fg-2)}
details p:last-child{margin-bottom:0}

/* ==================================================== 17. 文末 / 相关阅读 */
.pf{padding-top:var(--s5);border-top:1px solid var(--rule);font-size:var(--t2)}
.pf .mut{margin:0;line-height:var(--lh-2);color:var(--mut)}

.rel{margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--rule-2)}
.rel h2{font-size:var(--t6);line-height:var(--lh-3);margin:0}
.rel .cards{margin-top:var(--s5)}

/* =============================================================== 18. 页脚 */
/* 原来是 #fff，比页面还亮 —— 页脚应该后退，改用下沉面 */
.ft{margin-top:var(--s9);padding:var(--s7) 0 var(--s6);
  background:var(--sunken);border-top:1px solid var(--rule-2);font-size:var(--t3)}
.ftg{display:grid;gap:var(--s7) var(--s6);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.ftt{margin:0 0 var(--s3);font-size:var(--t2);line-height:var(--lh-3);
  font-weight:600;letter-spacing:var(--ls);color:var(--mut)}
.ftg > div:first-child .ftt{font-size:var(--t4);letter-spacing:var(--ls-h);color:var(--fg)}
.ftg a{display:block;padding:var(--s2) 0;color:var(--fg-2);
  font-size:var(--t3);line-height:var(--lh-3)}
.ftg a:hover{color:var(--accent)}
.ftg .mut{margin:0 0 var(--s3);max-width:var(--measure-2);
  font-size:var(--t2);line-height:var(--lh-2);color:var(--mut)}
/* .cp 坐在 --sunken 上：用 --mut（5.91:1）而不是 --mut-2（4.71:1）——
   佣金披露是合规文本，余量不能只剩 0.21 */
.cp{margin:var(--s7) 0 0;padding-top:var(--s5);
  border-top:1px solid var(--rule);max-width:var(--measure);
  font-size:var(--t2);line-height:var(--lh-2);color:var(--mut)}

/* ============================================================================
   19. 断点：三个，全部是结构变化。字号由 clamp() 连续插值，不在断点里跳。
   ========================================================================== */

/* --- ≥1080px：一套网格。正文栏左对齐到外壳左边缘、目录进右轨道，
       页眉 / 面包屑 / 正文 / 广告 / CTA / 相关阅读 / 页脚共享同一条左边界 --- */
@media (min-width:1080px){
  .post{max-width:none;margin-inline:0;
    display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);
    gap:0 var(--s8);align-items:start}
  .post > *{grid-column:1}
  /* 用 span 而不是 -1：-1 只指向显式网格，隐式网格里行为不确定。
     row-gap 为 0，空行不占高度；全站单篇最多 80 个直接子元素，余量充足 */
  .post > .toc{grid-column:2;grid-row:1 / span 999;align-self:start;
    position:sticky;top:calc(var(--hd-h) + var(--s5));
    max-height:calc(100vh - var(--hd-h) - var(--s7));overflow:auto;
    margin:0;padding:0 0 0 var(--s5);
    border:0;border-left:1px solid var(--rule-2)}
  /* 目录移出正文流之后，它后面那个 h2 要把分节线加回来 */
  .post > .toc + h2{border-top:1px solid var(--rule);padding-top:var(--s4)}
}

/* --- ≤760px：页眉 / 首页 / 页脚 / 表格收缩 --- */
@media (max-width:760px){
  .hdr{gap:var(--s3)}
  .logo{font-size:var(--t2)}
  .nav{gap:var(--s4);
    /* 右侧渐隐提示「还有栏目没露出来」，滚动条本身是隐藏的 */
    mask-image:linear-gradient(90deg,var(--mask) calc(100% - var(--s5)),transparent);
    -webkit-mask-image:linear-gradient(90deg,var(--mask) calc(100% - var(--s5)),transparent);
    scroll-snap-type:x proximity}
  .nav a{scroll-snap-align:start}

  .hero{padding:var(--s7) 0 var(--s6)}
  .hs{padding:var(--s6) 0}
  .cards{gap:0 var(--s5)}
  .hub{padding:var(--s6) 0 var(--s5)}
  .post{padding:var(--s6) 0 0}

  .ftg{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
  .ftg > div:first-child{grid-column:1 / -1}

  /* 只收内边距，不动字号：表格无论如何都要横滚，缩字号一寸空间都省不下来，
     纯粹是拿中文笔画的辨识度做无谓牺牲 */
  th,td{padding:var(--s3) var(--s3)}
  th:first-child,td:first-child{padding-left:0}
  th:last-child,td:last-child{padding-right:0}
}

/* --- ≤560px：两行式页眉 ---
   单行页眉在 375px 下只给 .nav 留 170px（内容 465px），五个栏目只露出两个，
   横滚全靠用户自己发现。栏目页是全站内链枢纽，入口不能这么憋。
   改成：第一行 logo + 语言切换，第二行 nav 独占整宽并允许折行，五项全部可见。
   同时取消 sticky —— 两行页眉钉在顶部会吃掉近 110px 首屏，对长文阅读是净损失；
   深入文章后的导航由面包屑、文末相关阅读和页脚三处承担，覆盖是够的。 */
@media (max-width:560px){
  .hd{position:static}
  .hdr{flex-wrap:wrap;height:auto;
    padding-block:var(--s4);row-gap:var(--s3);column-gap:var(--s4)}
  /* DOM 顺序是 logo → nav → lang，不 reorder 的话 lang 会被挤到第三行 */
  .logo{order:1;flex:1 1 auto}
  .lang{order:2;flex:none}
  .nav{order:3;flex:1 0 100%;flex-wrap:wrap;overflow:visible;
    row-gap:var(--s1);column-gap:var(--s5)}
  .nav a{padding-block:var(--s1)}
}

/* --- ≤480px：单栏页脚、列表日期下移、按钮占满 --- */
@media (max-width:480px){
  .ftg{grid-template-columns:minmax(0,1fr)}
  .ftg > div:first-child{grid-column:auto}
  .list a{grid-template-columns:minmax(0,1fr)}
  .list .date{grid-column:1;grid-row:3;text-align:left;padding-top:var(--s2)}
  .hero-b{flex-direction:column;align-items:stretch}
  .cta-b .btn{width:100%}
}

/* ============================================================================
   20. 广告位（luoboyun.vip）
   独立商业单元：两个主题下都保持深底。浅色页上靠 15.45:1 的明度差直接砸出来；
   深色页上靠 3.02:1 的边框 + 亮绿按钮跳出（深色页上「更深的卡」跳不出来）。
   色相与站点编辑蓝跨家族分离 —— 读者一眼能分清「编辑链接」和「付费推广」。
   ========================================================================== */
.ad{margin-block:var(--s7)}
.ad-a{position:relative;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s4) var(--s5);padding:var(--s5);
  background:var(--ad-bg);border:1px solid var(--ad-line);border-radius:var(--r);
  text-decoration:none;transition:border-color var(--dur)}
.ad-a:hover{text-decoration:none;border-color:var(--ad-btn)}

.ad-ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:var(--s7);height:var(--s7);border-radius:var(--r);
  background:var(--ad-ico-bg);color:var(--ad-ico)}

.ad-main{flex:1 1 var(--col-min);min-width:0}
.ad-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);
  margin-bottom:var(--s2)}
.ad-t{color:var(--ad-title);font-size:var(--t5);font-weight:600;
  letter-spacing:var(--ls-h);line-height:var(--lh-3)}
.ad-badge{flex:none;white-space:nowrap;
  padding:var(--s1) var(--s2);border-radius:var(--r-sm);
  background:var(--ad-badge);color:var(--ad-badge-fg);
  font-size:var(--t2);line-height:var(--lh-3);font-weight:600}
/* 不做 line-clamp：被裁掉的正是转化点（「不绑银行卡、不留支付实名记录」）*/
.ad-d{display:block;color:var(--ad-body);font-size:var(--t2);line-height:var(--lh-2)}

.ad-btn{flex:none;display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border-radius:var(--r);white-space:nowrap;
  background:var(--ad-btn);color:var(--ad-btn-fg);
  font-size:var(--t3);font-weight:600;line-height:var(--lh-3);
  box-shadow:none;transition:background-color var(--dur)}   /* 去掉彩色辉光 */
.ad-a:hover .ad-btn{background:var(--ad-btn-h)}

/* 披露标识：从绝对定位的 10.56px / 3.28:1 改成正常流里的 13.6px / 6.27:1 */
.ad-label{position:static;order:4;flex:1 1 100%;text-align:right;
  color:var(--ad-label);font-size:var(--t2);line-height:var(--lh-3);
  letter-spacing:var(--ls)}

@media (max-width:760px){
  .ad-a{gap:var(--s3) var(--s4);padding:var(--s4)}
  .ad-ico{width:calc(var(--s7) - var(--s2));height:calc(var(--s7) - var(--s2))}
  .ad-main{flex:1 1 100%;order:2}
  .ad-btn{flex:1 1 100%;order:3;justify-content:center;padding:var(--s3) var(--s4)}
  .ad-label{order:4}
}