/* ==========================================================================
   智言发 IM — 设计系统「交付清单」
   --------------------------------------------------------------------------
   概念：你买的是一整套可部署的源码，所以站点是这套东西的清单，不是宣传册。
   结构：消息线（spine）贯穿全页，区块挂在线上，左槽承载真实元信息。
   光源：页面是暗的，产品界面是唯一的亮面。
   强调：主色 indigo 为常态；mint 只用于「已送达 / 已读 / 已交付」这类状态。
   ========================================================================== */

/* 禁止选中复制正文；演示账号/密码与表单输入除外 */
html, body{
  -webkit-user-select:none;
  user-select:none;
}
.demo-strip code,
[data-cms="demo.account"],
[data-cms="demo.password"],
input, textarea, [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
.demo-strip code.is-copied,
[data-cms="demo.account"].is-copied,
[data-cms="demo.password"].is-copied{
  outline:1px solid var(--mint-400, #3DDC97);
}

/* 智能客服引导弹窗 */
.engage-pop{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  width:min(360px,calc(100vw - 32px));
  padding:18px 18px 16px;border-radius:16px;
  background:linear-gradient(160deg,#1b2238 0%,#12172a 100%);
  border:1px solid rgba(145,130,255,.32);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  color:#eef0f7;user-select:none;
  transform:translateY(16px);opacity:0;
  transition:transform .24s ease-out,opacity .24s ease-out;
}
.engage-pop.is-in{transform:translateY(0);opacity:1}
.engage-x{
  position:absolute;top:10px;right:10px;width:26px;height:26px;
  border:none;background:transparent;color:#9aa0be;font-size:18px;
  cursor:pointer;border-radius:8px;line-height:1;
}
.engage-x:hover{background:rgba(255,255,255,.08);color:#fff}
.engage-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff;padding-right:24px}
.engage-desc{margin-top:8px;font-size:13px;line-height:1.7;color:#b9bed6}
.engage-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.engage-btn{
  flex:1 1 auto;padding:9px 12px;border-radius:10px;font-size:13.5px;
  font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .18s;
}
.engage-primary{
  background:linear-gradient(135deg,#6D5EF8,#5445E4);color:#fff;
  box-shadow:0 6px 16px rgba(84,69,228,.42);
}
.engage-primary:hover{filter:brightness(1.08)}
.engage-ghost{background:transparent;border-color:rgba(255,255,255,.18);color:#c8cce0}
.engage-ghost:hover{background:rgba(255,255,255,.06);color:#fff}
@media (max-width:520px){
  .engage-pop{right:12px;left:12px;bottom:12px;width:auto}
}

/* --------------------------------------------------------------------------
   1. 原始层 primitive —— 只有原始色阶，不带语义
   -------------------------------------------------------------------------- */
:root{
  --ink-950:#05070E; --ink-900:#080B14; --ink-850:#0C1020; --ink-800:#121728;
  --ink-750:#161C2F; --ink-700:#1B2238; --ink-600:#252D48;

  --paper-000:#FFFFFF; --paper-050:#F6F7FB; --paper-100:#ECEFF7;
  --paper-200:#DDE2F0; --paper-300:#C7CDE2;

  --indigo-200:#D2CBFF; --indigo-300:#B4A9FF; --indigo-400:#9182FF;
  --indigo-500:#6D5EF8; --indigo-600:#5445E4; --indigo-700:#4133C4;

  --mint-300:#7BEDBC; --mint-400:#3DDC97; --mint-500:#16B978; --mint-600:#0E9F68;

  --slate-200:#C2C8E0; --slate-300:#A3AAC9; --slate-400:#848BAC; --slate-500:#666D8E;

  --rose-400:#F87171;

  /* 字体族
     英文标题与数字用自托管的 Bricolage Grotesque / JetBrains Mono，两个加起来 106KB。
     中文一律交给系统字体：Windows 是微软雅黑、苹果是苹方、Android 自带 Noto Sans CJK，
     观感和自托管 Noto Sans SC 几乎无差，却省掉 1MB —— 那份中文字体按 unicode-range
     切成上百个分片，本站文字覆盖面广，一进来就要拉二十来个。 */
  --f-display:'Bricolage Grotesque',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,'Microsoft YaHei',monospace;

  /* 字号：流体，避免断点跳变 */
  --t-mega:clamp(42px,6.2vw,86px);
  --t-xxl:clamp(32px,4.4vw,60px);
  --t-xl:clamp(26px,3.2vw,42px);
  --t-lg:clamp(20px,2.2vw,28px);
  --t-md:18.5px;
  --t-base:15.5px;
  --t-sm:13.5px;
  --t-xs:12px;
  --t-mono:11.5px;

  /* 间距：4px 基数 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* 圆角：克制，只有产品面板用大圆角 */
  --r-1:4px; --r-2:8px; --r-3:14px; --r-4:22px; --r-pill:999px;

  /* 版面 */
  --maxw:1240px;
  --gutter:170px;        /* 消息线左侧元信息槽宽度 */
  --pad-x:32px;
  --topbar-h:64px;
}

/* --------------------------------------------------------------------------
   2. 语义层 semantic —— 深色为默认
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"]{
  --bg:var(--ink-950);
  --bg-raised:var(--ink-850);
  --bg-sunken:var(--ink-900);
  --bg-hover:var(--ink-800);

  --fg:#E8EAF6;
  --fg-muted:var(--slate-300);
  --fg-subtle:var(--slate-500);

  --rule:rgba(150,165,220,.11);
  --rule-strong:rgba(150,165,220,.22);

  --brand:var(--indigo-500);
  --brand-hi:var(--indigo-300);
  --brand-lo:var(--indigo-700);
  --brand-wash:rgba(109,94,248,.12);
  --brand-glow:rgba(109,94,248,.32);

  --ok:var(--mint-400);
  --ok-wash:rgba(61,220,151,.12);
  --ok-ink:var(--mint-600);

  --danger:var(--rose-400);
  --danger-wash:rgba(248,113,113,.11);
  --danger-line:rgba(248,113,113,.28);

  /* 警示色：用在「有条件成立」的状态上，介于没有与具备之间 */
  --warn:#E9B949;
  --warn-wash:rgba(233,185,73,.11);
  --warn-line:rgba(233,185,73,.26);

  /* 产品界面：全站唯一的亮面 */
  --screen:var(--paper-050);
  --screen-2:var(--paper-100);
  --screen-3:var(--paper-200);
  --screen-fg:#0B0F1C;
  --screen-muted:#5B6383;

  --overlay:rgba(3,5,11,.84);
  --shadow-1:0 12px 30px -18px rgba(0,0,0,.6);
  --shadow-2:0 40px 90px -46px rgba(0,0,0,.85);
  --shadow-screen:0 48px 108px -40px rgba(60,50,180,.42),0 0 0 1px rgba(150,165,220,.14);

  --glow-a:rgba(109,94,248,.15);
  --glow-b:rgba(61,220,151,.05);

  color-scheme:dark;
}

html[data-theme="light"]{
  --bg:var(--paper-000);
  --bg-raised:var(--paper-000);
  --bg-sunken:var(--paper-050);
  --bg-hover:var(--paper-100);

  --fg:#0A0E1C;
  --fg-muted:#4B5375;
  --fg-subtle:#7E85A6;

  --rule:rgba(16,22,56,.10);
  --rule-strong:rgba(16,22,56,.18);

  --brand:var(--indigo-600);
  --brand-hi:var(--indigo-700);
  --brand-lo:var(--indigo-700);
  --brand-wash:rgba(84,69,228,.07);
  --brand-glow:rgba(84,69,228,.22);

  --ok:var(--mint-600);
  --ok-wash:rgba(14,159,104,.10);
  --ok-ink:var(--mint-600);

  /* 浅底上要压深一档，深色那套的红与黄在白纸色上对比度不够 */
  --danger:#B4232D;
  --danger-wash:rgba(180,35,45,.07);
  --danger-line:rgba(180,35,45,.24);
  --warn:#8A5A00;
  --warn-wash:rgba(138,90,0,.07);
  --warn-line:rgba(138,90,0,.22);

  --screen:var(--paper-000);
  --screen-2:var(--paper-050);
  --screen-3:var(--paper-200);
  --screen-fg:#0A0E1C;
  --screen-muted:#5B6383;

  --overlay:rgba(10,14,28,.44);
  --shadow-1:0 10px 26px -18px rgba(16,22,56,.16);
  --shadow-2:0 30px 64px -42px rgba(16,22,56,.22);
  --shadow-screen:0 40px 88px -46px rgba(84,69,228,.30),0 0 0 1px rgba(16,22,56,.12);

  --glow-a:rgba(84,69,228,.06);
  --glow-b:rgba(14,159,104,.03);

  color-scheme:light;
}

/* --------------------------------------------------------------------------
   3. 基础重置与排版
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  font-size:var(--t-base);
  line-height:1.75;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{max-width:100%}
img{border-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.028em;
  text-wrap:balance;
}
/* 标题里的强调一律用主色，不用斜体 —— 中文没有真斜体，合成出来是歪的 */
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--brand-hi)}
strong,b{font-weight:700}

:focus-visible{
  outline:2px solid var(--brand-hi);
  outline-offset:3px;
  border-radius:var(--r-1);
}

::selection{background:var(--brand-wash);color:var(--fg)}

/* 数字与编号一律走等宽，避免宽度跳动 */
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   4. 氛围层：一团锚定的辉光，没有装饰性网格
   -------------------------------------------------------------------------- */
.ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 44% 32% at 78% -4%,var(--glow-a),transparent 68%),
    radial-gradient(ellipse 38% 28% at 4% 92%,var(--glow-b),transparent 70%);
}

.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:var(--brand-hi);pointer-events:none;
  transition:width .1s linear;
}

/* --------------------------------------------------------------------------
   5. 版面容器与消息线 spine
   --------------------------------------------------------------------------
   .sheet 是全站唯一的内容网格：左槽 = 元信息，中间 1px = 消息线，右侧 = 正文。
   区块用 .row 挂到线上；需要满幅时用 .row.is-wide 跳出左槽。
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);width:100%}

.sheet{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  display:grid;
  grid-template-columns:var(--gutter) 1px minmax(0,1fr);
  column-gap:0;
}
/* 消息线本体：一条贯穿的竖线 */
.sheet::before{
  content:"";
  grid-column:2;grid-row:1 / -1;
  background:var(--rule);
  position:relative;
}

.row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:var(--gutter) 1px minmax(0,1fr);
  padding:var(--s-8) 0;
  position:relative;
}
.row + .row{border-top:1px solid var(--rule)}
/* 带 id 的行都是锚点目标。导航是吸顶的，不留这段余量的话，跳过去标题正好被压在
   导航底下，看着像跳错了地方。原来只有 .group 上有，页内跳转全都差这一截。 */
.row[id]{scroll-margin-top:calc(var(--topbar-h) + var(--s-4))}
/* 首屏自己控制上下留白，不再和行内距叠加 */
.row.is-hero{padding:var(--s-7) 0 var(--s-8)}

/* 左槽：等宽元信息，只放真实数据 */
.row > .meta{
  grid-column:1;
  padding-right:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-2);
  align-items:flex-start;
}
.row > .body{
  grid-column:3;
  padding-left:var(--s-6);
  min-width:0;
}
/* 节点：区块挂在消息线上的那个点 */
.row > .body::before{
  content:"";
  position:absolute;left:calc(var(--gutter) - 3px);top:calc(var(--s-8) + 9px);
  width:7px;height:7px;border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 0 1px var(--rule-strong);
}
.row.is-live > .body::before{
  background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-wash);
}

/* 满幅行：不占左槽，仍然在 sheet 网格里 */
.row.is-wide{grid-template-columns:1fr}
.row.is-wide > .body{grid-column:1;padding-left:0}
.row.is-wide > .body::before{display:none}

/* --------------------------------------------------------------------------
   6. 元信息与标签
   -------------------------------------------------------------------------- */
/* 槽位标签：区块编号 / 名称 */
.meta-key{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-subtle);
}
/* 槽位数据：一行一条真实事实 */
.meta-fact{
  font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--fg-muted);letter-spacing:.02em;
  display:flex;align-items:center;gap:var(--s-2);
}
.meta-fact .tick{color:var(--ok);letter-spacing:-.1em}

/* 眉标：正文内的小标签 */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-subtle);
}
.eyebrow .dot{
  width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-wash);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

/* 回执条：签名元素。只承载真实数据。 */
.receipt{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-5);
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--fg-muted);
}
.receipt i{
  font-style:normal;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.receipt i::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.45;
}
.receipt i:first-child::before{display:none}
.receipt b{color:var(--ok);font-weight:500;letter-spacing:-.08em}

/* 角标：真实计数，借用未读徽标的形状 */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  font-variant-numeric:tabular-nums;
  background:var(--bg-hover);color:var(--fg-muted);
  border:1px solid var(--rule);
}
.badge.is-brand{background:var(--brand-wash);color:var(--brand-hi);border-color:transparent}
.badge.is-ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}

/* --------------------------------------------------------------------------
   7. 标题层级
   -------------------------------------------------------------------------- */
.h-mega{font-size:var(--t-mega);font-weight:800;letter-spacing:-.04em;line-height:1.06}
.h-xxl{font-size:var(--t-xxl);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.h-xl{font-size:var(--t-xl);font-weight:800;letter-spacing:-.03em;line-height:1.16}
.h-lg{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;line-height:1.28}
.h-md{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em;line-height:1.4}

.h-mega em,.h-xxl em,.h-xl em,.h-lg em{font-style:normal;color:var(--brand-hi)}

.lede{
  font-size:var(--t-md);color:var(--fg-muted);line-height:1.72;
  max-width:38em;font-weight:400;
}
.prose{color:var(--fg-muted);max-width:40em}
.prose + .prose{margin-top:var(--s-3)}

/* 侧注：靠消息线的引文式段落 */
.aside-note{
  font-size:var(--t-sm);color:var(--fg-subtle);line-height:1.8;
  padding-left:var(--s-4);border-left:1px solid var(--rule-strong);
  max-width:34em;
}

/* --------------------------------------------------------------------------
   8. 按钮
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-sans);font-size:var(--t-sm);font-weight:700;
  letter-spacing:.01em;line-height:1;
  padding:13px 22px;border:1px solid transparent;border-radius:var(--r-2);
  cursor:pointer;transition:background-color .22s,border-color .22s,color .22s,transform .22s,box-shadow .22s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none}

.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-lo);transform:translateY(-1px);box-shadow:0 12px 26px -14px var(--brand-glow)}

.btn-ghost{background:transparent;color:var(--fg);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--fg-subtle);background:var(--bg-hover)}

.btn-quiet{background:transparent;color:var(--fg-muted);padding:9px 12px}
.btn-quiet:hover{color:var(--fg);background:var(--bg-hover)}

.btn-lg{padding:15px 28px;font-size:var(--t-base)}
.btn-sm{padding:9px 14px;font-size:var(--t-xs)}

/* 行内链接：带箭头，hover 时箭头走一步 */
.link-go{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-sm);font-weight:700;color:var(--brand-hi);
  transition:gap .2s;
}
.link-go:hover{gap:10px}

/* --------------------------------------------------------------------------
   9. 顶栏：会话切换器
   --------------------------------------------------------------------------
   导航保留在 HTML 里（SEO 与无 JS 可用），样式上做成 IM 的会话切换条。
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--s-5);
}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:30px;height:30px;border-radius:var(--r-2);flex:none}
.brand-text{line-height:1.15}
.brand-text b{
  display:block;font-family:var(--f-display);font-size:15px;font-weight:800;
  letter-spacing:-.02em;color:var(--fg);
}
.brand-text span{
  display:block;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.24em;color:var(--fg-subtle);
}

.nav{display:flex;align-items:center;gap:2px;margin-left:var(--s-4);min-width:0;flex:1}
.nav > a,
.nav-grp-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:var(--r-2);
  font-size:var(--t-sm);font-weight:500;color:var(--fg-muted);
  transition:color .2s,background-color .2s,border-color .2s;
  white-space:nowrap;
}
.nav > a:hover,
.nav-grp-btn:hover{color:var(--fg);background:var(--bg-hover)}
.nav > a[aria-current="page"],
.nav-grp-btn[aria-current="page"],
.nav-grp.is-active > .nav-grp-btn{
  color:var(--fg);background:var(--bg-hover);
}
.nav > a[aria-current="page"] .badge{background:var(--brand-wash);color:var(--brand-hi);border-color:transparent}

/* 分组下拉：把 10 个平铺项收成 6 个主入口，实证/交付两组藏二级页 */
.nav-grp{position:relative;flex:none}
.nav-grp-label{display:none}
.nav-grp-btn{
  border:0;background:transparent;cursor:pointer;font:inherit;line-height:inherit;
}
.nav-caret{width:10px;height:10px;opacity:.55;transition:transform .2s,opacity .2s}
.nav-grp.is-open > .nav-grp-btn .nav-caret{transform:rotate(180deg);opacity:.85}
@media(hover:hover) and (min-width:1081px){
  .nav-grp:hover > .nav-grp-btn .nav-caret{transform:rotate(180deg);opacity:.85}
}

.nav-drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:10.5em;
  padding:6px;display:flex;flex-direction:column;gap:2px;
  background:var(--bg-raised);border:1px solid var(--rule-strong);
  border-radius:var(--r-3);box-shadow:var(--shadow-2);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .18s,transform .18s;
  z-index:120;
}
.nav-grp.is-open > .nav-drop{opacity:1;pointer-events:auto;transform:none}
@media(hover:hover) and (min-width:1081px){
  .nav-grp:hover > .nav-drop{opacity:1;pointer-events:auto;transform:none}
}
.nav-drop a{
  display:block;padding:9px 12px;border-radius:var(--r-2);
  font-size:var(--t-sm);font-weight:500;color:var(--fg-muted);
  transition:color .2s,background-color .2s;
}
.nav-drop a:hover{color:var(--fg);background:var(--bg-hover)}
.nav-drop a[aria-current="page"]{color:var(--brand-hi);background:var(--brand-wash)}

.topbar-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex:none}

.icon-btn{
  width:36px;height:36px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-2);
  background:transparent;color:var(--fg-muted);cursor:pointer;
  transition:color .2s,border-color .2s,background-color .2s;
}
.icon-btn:hover{color:var(--fg);border-color:var(--rule-strong);background:var(--bg-hover)}
.icon-btn svg{width:16px;height:16px}

.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}
@keyframes spin-in{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.theme-toggle.is-spin svg{animation:spin-in .38s cubic-bezier(.2,.8,.3,1)}

/* 十个完整中文标签平铺。1400px 以下收进抽屉，避免和右侧按钮抢位；
   1401px 以上才横排展示，中间段略收紧内边距。 */
@media(min-width:1401px) and (max-width:1599px){
  .nav{gap:0}
  .nav > a{padding:8px 9px}
  .topbar-in{gap:var(--s-3)}
}

/* 窄屏抽屉：完整文案竖排，不做下拉 */
.nav-toggle{display:none}
@media(max-width:1400px){
  .nav{
    position:fixed;inset:var(--topbar-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--bg-raised);border-bottom:1px solid var(--rule);
    padding:var(--s-3) var(--pad-x) var(--s-5);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s,transform .22s;
    max-height:calc(100vh - var(--topbar-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav > a{padding:13px 14px;font-size:var(--t-base);justify-content:space-between}
  .nav-grp{padding:0}
  .nav-grp-btn{display:none}
  .nav-grp-label{
    display:block;padding:10px 14px 4px;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--fg-subtle);
  }
  .nav-drop{
    position:static;opacity:1;pointer-events:auto;transform:none;
    min-width:0;padding:0 0 6px;margin:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;
  }
  .nav-drop a{padding:11px 14px 11px 22px;font-size:var(--t-base)}
  .nav-toggle{display:inline-flex}
}

/* --------------------------------------------------------------------------
   10. 产品界面面板：全站唯一的亮面
   -------------------------------------------------------------------------- */
.screen{
  border-radius:var(--r-4);overflow:hidden;
  background:var(--screen);box-shadow:var(--shadow-screen);
  position:relative;z-index:2;
}
.screen-top{
  display:flex;align-items:center;gap:var(--s-3);
  padding:14px 17px;background:var(--screen-2);
  border-bottom:1px solid var(--screen-3);
}
.sc-av{
  width:33px;height:33px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:14px;
}
.sc-who{flex:1;min-width:0;line-height:1.34}
.sc-who b{
  display:block;font-family:var(--f-display);font-size:14px;font-weight:700;
  color:var(--screen-fg);letter-spacing:-.01em;
}
.sc-who i{
  display:block;font-style:normal;font-family:var(--f-mono);font-size:11px;
  color:var(--screen-muted);
}
.sc-live{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--screen-muted);
}
.sc-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--mint-400);
  box-shadow:0 0 0 3px var(--ok-wash);animation:pulse 1.8s ease-in-out infinite;
}

.screen-body{
  padding:var(--s-4) 17px var(--s-5);
  background:var(--screen);
  display:flex;flex-direction:column;
  min-height:280px;
}
.sc-day{
  align-self:center;flex:none;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--screen-muted);background:var(--screen-2);
  padding:3px 10px;border-radius:var(--r-pill);
}

.chat-feed{
  flex:1;display:flex;flex-direction:column;gap:var(--s-3);
  justify-content:flex-end;margin-top:var(--s-4);
}
.chat-row{
  display:flex;gap:9px;align-items:flex-end;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .46s cubic-bezier(.16,1,.3,1);
}
.chat-row.show{opacity:1;transform:none}
.chat-row.out{flex-direction:row-reverse}
.chat-row > div{max-width:82%;min-width:0}
.chat-av{
  width:26px;height:26px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--screen-3);color:var(--screen-muted);
  font-family:var(--f-display);font-size:11px;font-weight:700;
}
.chat-row.out .chat-av{background:var(--brand);color:#fff}
.bubble{
  padding:10px 14px;border-radius:14px 14px 14px 4px;
  background:var(--screen-2);color:var(--screen-fg);
  font-size:13.5px;line-height:1.62;
}
.chat-row.out .bubble{
  background:var(--brand);color:#fff;border-radius:14px 14px 4px 14px;
}
/* 回执在产品里的原型 */
.chat-state{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  color:var(--screen-muted);transition:color .3s;
}
.chat-state .tick{opacity:.35;letter-spacing:-.1em;transition:opacity .3s,color .3s}
.chat-state.is-sent .tick{opacity:.65}
.chat-state.is-read{color:var(--screen-fg)}
.chat-state.is-read .tick{opacity:1;color:var(--ok-ink)}

.screen-input{
  display:flex;align-items:center;gap:var(--s-3);padding:12px 17px;
  background:var(--screen-2);border-top:1px solid var(--screen-3);
}
.screen-input span{flex:1;font-size:13px;color:var(--screen-muted)}
.screen-input i{
  width:30px;height:30px;flex:none;border-radius:9px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.screen-input i::after{
  content:"";width:0;height:0;margin-left:2px;
  border-left:9px solid #fff;
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}

/* --------------------------------------------------------------------------
   11. 清单：交付项列表（本站最主要的内容形态）
   -------------------------------------------------------------------------- */
.manifest{border-top:1px solid var(--rule)}
.manifest-item{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:0 var(--s-4);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
}
.manifest-item .tick{
  font-family:var(--f-mono);font-size:12px;letter-spacing:-.08em;
  color:var(--fg-subtle);transition:color .28s;
}
.manifest-item:hover .tick{color:var(--ok)}
.manifest-item h4{
  font-size:var(--t-base);font-weight:700;color:var(--fg);
  letter-spacing:-.012em;
}
.manifest-item p{
  grid-column:2;font-size:var(--t-sm);color:var(--fg-muted);
  line-height:1.7;margin-top:5px;
}
.manifest-item .tag{
  font-family:var(--f-mono);font-size:var(--t-mono);color:var(--fg-subtle);
  letter-spacing:.08em;white-space:nowrap;
}

/* 两栏清单 */
.manifest.is-2col{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-7);
}

/* --------------------------------------------------------------------------
   12. 数据：巨号数字，无卡片
   -------------------------------------------------------------------------- */
.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rule);
}
.figure{
  padding:var(--s-6) var(--s-5) var(--s-6) 0;
  border-right:1px solid var(--rule);
}
.figure:last-child{border-right:none}
.figure b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,3.6vw,46px);letter-spacing:-.045em;line-height:1;
  color:var(--fg);font-variant-numeric:tabular-nums;
}
.figure.is-ok b{color:var(--ok)}
.figure span{
  display:block;margin-top:10px;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);
}

/* --------------------------------------------------------------------------
   13. 卡片与面板（用得很省）
   -------------------------------------------------------------------------- */
.panel{
  border:1px solid var(--rule);border-radius:var(--r-3);
  background:var(--bg-raised);padding:var(--s-5);
}
.panel-title{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-subtle);
  margin-bottom:var(--s-4);
}

/* 技术栈标签 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:6px 11px;border:1px solid var(--rule);border-radius:var(--r-1);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-muted);
  transition:color .2s,border-color .2s;
}
.chip:hover{color:var(--fg);border-color:var(--rule-strong)}
.chip.is-key{background:var(--brand-wash);border-color:transparent;color:var(--brand-hi)}

/* 技术栈分组：组名 + 该层的主技术，再摊开全部依赖 */
.panel-head{
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin-bottom:var(--s-4);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
}
.panel-head h4{font-size:var(--t-md);letter-spacing:-.01em}
.panel-key{
  font-family:var(--f-mono);font-size:var(--t-xs);
  padding:3px 9px;border-radius:var(--r-1);
  background:var(--brand-wash);color:var(--brand-hi);
}
.stack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media (max-width:820px){.stack-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   13b. 架构图（用元素画，不用图片：暗色原生、可选中、可翻译）
   -------------------------------------------------------------------------- */
.arch{
  border:1px solid var(--rule);border-radius:var(--r-3);
  background:var(--bg-raised);padding:var(--s-5);
}
.arch-layer{
  border:1px solid var(--rule);border-radius:var(--r-2);
  padding:var(--s-4);background:var(--bg);
}
.arch-lt{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);
}
.arch-lt em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--fg-muted)}
.arch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px}
.arch-row.is-tight{grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.arch-row.is-stack{grid-template-columns:1fr}
.arch-box{
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  padding:10px 12px;background:var(--bg-raised);min-width:0;
}
.arch-box b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--fg)}
.arch-box i{
  display:block;font-style:normal;margin-top:4px;
  font-family:var(--f-mono);font-size:11px;line-height:1.45;color:var(--fg-subtle);
  overflow-wrap:anywhere;
}
.arch-box.is-opt{border-style:dashed}
.arch-box.is-key{border-color:var(--brand);background:var(--brand-wash)}
.arch-box.is-key b{color:var(--brand-hi)}
.arch-box.is-main{grid-column:1/-1;background:var(--bg-raised)}
.arch-box.is-main>.arch-row{margin-top:var(--s-3)}

/* 层间连线：实线=长连接，虚线=可选或非必经 */
.arch-join{display:flex;justify-content:center;gap:var(--s-6);flex-wrap:wrap;padding:2px 0}
.arch-track{display:grid;justify-items:center}
.arch-track i{display:block;width:0;height:17px;border-left:1px solid var(--fg-subtle)}
.arch-track i.dash{border-left-style:dashed}
.arch-track b{
  padding:3px 0;font-family:var(--f-mono);font-weight:400;
  font-size:11px;color:var(--fg-subtle);text-align:center;
}
.arch-note{
  margin-top:var(--s-3);padding:9px 12px;
  border-left:2px solid var(--brand);border-radius:0 var(--r-1) var(--r-1) 0;
  background:var(--brand-wash);
  font-family:var(--f-mono);font-size:11px;line-height:1.55;color:var(--fg-muted);
}
@media (max-width:640px){
  .arch{padding:var(--s-4)}
  .arch-row,.arch-row.is-tight{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .arch-join{gap:var(--s-4)}
}

/* 图片框 */
.frame{
  border:1px solid var(--rule);border-radius:var(--r-3);
  overflow:hidden;line-height:0;background:var(--bg-raised);
}
.frame img{width:100%;height:auto;display:block}
.zoomable{cursor:zoom-in;transition:transform .35s,box-shadow .35s}
.zoomable:hover{transform:scale(1.008);box-shadow:0 20px 48px -28px var(--brand-glow)}

/* --------------------------------------------------------------------------
   13b. 界面截图 —— 产品界面是暗色页面里唯一的光源
   三种设备形态共用一套骨架，差别只在顶栏、圆角与画面比例。
   截图由后台上传，比例不可控，所以画面一律定比例 + cover + 顶部对齐，
   保证 App 顶部标题栏永远露出来，不会被裁掉。
   -------------------------------------------------------------------------- */
.dev{
  position:relative;border-radius:var(--r-3);background:var(--bg-raised);
  border:1px solid var(--rule-strong);box-shadow:var(--shadow-screen);
}
.dev-shot{
  position:relative;overflow:hidden;line-height:0;
  background:var(--screen-3);border-radius:inherit;
}
.dev-shot>img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
}
/* 斜向高光：让画面读起来是一块亮着的屏，而不是贴上去的一张图 */
.dev-shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,0) 46%);
}

/* 还没上传时的占位，页面不会看着像坏了，也顺手告诉运营图片放哪儿 */
.dev-shot>img:not([src]){display:none}
.dev-empty{
  display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:var(--s-3);text-align:center;
  font:500 var(--t-sm)/1.45 var(--f-sans);color:var(--fg-subtle);
  background:
    repeating-linear-gradient(135deg,transparent,transparent 9px,var(--rule) 9px,var(--rule) 10px),
    var(--bg-sunken);
}
.dev-empty i{
  font:500 var(--t-mono)/1 var(--f-mono);font-style:normal;
  color:var(--brand-hi);letter-spacing:.05em;
}
.dev-shot>img:not([src])~.dev-empty{display:flex}

/* 桌面窗口 */
.dev.is-desktop,.dev.is-web{overflow:hidden}
.dev-bar{
  display:flex;align-items:center;gap:7px;height:34px;
  padding:0 var(--s-3);background:var(--bg-hover);
  border-bottom:1px solid var(--rule);
}
.dev-bar i{width:9px;height:9px;border-radius:50%;flex:none}
.dev-bar i:nth-child(1){background:rgba(255,95,86,.55)}
.dev-bar i:nth-child(2){background:rgba(255,189,46,.55)}
.dev-bar i:nth-child(3){background:rgba(39,201,63,.5)}
.dev-bar span{
  margin-left:auto;min-width:0;
  font:500 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;color:var(--fg-subtle);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.dev.is-desktop .dev-shot,.dev.is-web .dev-shot{aspect-ratio:16/10;border-radius:0}

/* 浏览器：把顶栏那行文字撑成地址栏 */
.dev.is-web .dev-bar span{
  margin-left:var(--s-2);flex:1;text-align:center;
  padding:3px var(--s-3);background:var(--bg-sunken);
  border:1px solid var(--rule);border-radius:var(--r-pill);
}

/* 手机：外框当机身，屏幕嵌在机身里 */
.dev.is-phone{
  border-radius:30px;padding:7px;
  background:linear-gradient(180deg,var(--bg-hover),var(--bg-sunken));
}
.dev.is-phone .dev-shot{aspect-ratio:9/19;border-radius:24px}
.dev-notch{
  position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);
  width:30%;height:5px;border-radius:var(--r-pill);background:rgba(4,6,14,.5);
}

/* ---- 主视觉：桌面窗口打底，手机叠在右下角并越出边界 ---- */
.stagecast{position:relative;padding-bottom:var(--s-5)}
/* 光晕用阴影而不是铺一层渐变：它会贴着屏幕轮廓散开，读起来就是这块屏自己在发光，
   也不像绝对定位的渐变层那样把文档撑宽、在窄屏上多出一条横向滚动 */
/* 宽度收在 80%：手机与桌面只叠约 12px，比截图自己的内边距还窄，
   所以压住的只是画面外沿的留白。叠多了会切到右侧那列发出去的消息，
   句子断在半截看着像出了错，而不像层次 */
.stagecast-main{
  width:80%;
  box-shadow:0 0 120px -12px var(--brand-glow),0 0 42px -6px var(--brand-wash),var(--shadow-screen);
}
.stagecast .dev.is-phone{
  position:absolute;right:0;bottom:0;z-index:2;
  width:21%;min-width:132px;
  /* 外面那圈页面底色把手机从桌面画面里「抠」出来，叠放关系才读得清 */
  box-shadow:0 0 0 6px var(--bg),0 0 70px -10px var(--brand-glow),var(--shadow-screen);
}
.shot-hint{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  margin-top:var(--s-4);
  font:500 var(--t-mono)/1.5 var(--f-mono);letter-spacing:.04em;color:var(--fg-subtle);
}
.shot-hint .tick{color:var(--ok)}

/* ---- 端矩阵：手机占一格，桌面与 Web 占两格，dense 自动补空 ---- */
/* 四列是刚好的：手机一行放四台，桌面与 Web 各占两格正好填满一行，不留空格 */
.devwall{
  display:grid;gap:var(--s-5) var(--s-4);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:row dense;align-items:start;
}
.shot-card{display:flex;flex-direction:column;gap:var(--s-3);min-width:0;margin:0}
.shot-card.is-wide{grid-column:span 2}
.shot-card .dev{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.shot-card:hover .dev{transform:translateY(-5px)}
.shot-head{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.shot-head .tick{flex:none;color:var(--ok);font-size:var(--t-xs)}
.shot-head b{
  min-width:0;font:600 var(--t-base)/1.25 var(--f-sans);color:var(--fg);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.shot-card p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--fg-muted)}

@media (max-width:760px){
  .stagecast{padding-bottom:0}
  .stagecast-main{width:100%}
  .stagecast .dev.is-phone{
    position:static;width:56%;max-width:212px;
    margin:var(--s-4) auto 0;
  }
}
@media (max-width:900px){
  .devwall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .devwall{grid-template-columns:1fr;gap:var(--s-5)}
  .shot-card.is-wide{grid-column:auto}
  .shot-card .dev.is-phone{max-width:260px;margin-left:auto;margin-right:auto}
}

/* --------------------------------------------------------------------------
   14. 首屏（首页专用）
   -------------------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--s-8);align-items:center;
}
.hero-copy{max-width:36em}
.hero h1{font-size:var(--t-mega);margin:var(--s-4) 0 var(--s-5)}
.hero-sub{
  font-size:var(--t-lg);font-weight:400;color:var(--fg-muted);
  letter-spacing:-.01em;line-height:1.5;margin-bottom:var(--s-4);
}
.hero .lede{margin-bottom:var(--s-6)}
.hero-stage{position:relative}

/* 首屏 iPhone 外壳：内嵌真实网页端 H5 */
.iphone{position:relative;width:clamp(240px,80%,286px);margin:0 auto;aspect-ratio:295/604}
.iphone-body{
  position:relative;width:100%;height:100%;
  border-radius:52px;padding:11px;
  background:linear-gradient(150deg,#3b4050 0%,#0e1017 33%,#14161f 67%,#343a4c 100%);
  box-shadow:
    0 2px 3px rgba(255,255,255,.22) inset,
    0 0 0 2px rgba(0,0,0,.55),
    0 60px 120px -52px var(--brand-glow),
    var(--shadow-screen);
}
.iphone-screen{
  /* 缩放比：屏宽 264px ÷ 0.677 ≈ 390px 逻辑宽度，正好是真机 iPhone 宽度 */
  --s:.677;
  position:relative;width:100%;height:100%;
  border-radius:42px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.7) inset;
}
/* 网页端自己带状态栏和底部导航，这里让它铺满整块屏幕，和手机端完全一致；
   外壳只保留物理边框与灵动岛。逻辑尺寸由屏幕尺寸反算，缩放后精确填满，不依赖 JS 测量 */
.iphone-web{
  position:absolute;top:0;left:0;
  width:calc(100% / var(--s));
  height:calc(100% / var(--s));
  /* 全局重置里 iframe 有 max-width:100%，会把放大的逻辑宽度压回屏宽，必须解除 */
  max-width:none;
  border:0;display:block;background:#fff;
  transform:scale(var(--s));transform-origin:top left;
  opacity:0;transition:opacity .5s ease;
}
.iphone-screen.is-loaded .iphone-web{opacity:1}

/* 网页端自己没有状态栏和 Home 条，由外壳补上；背景全透明浮在网页之上，
   只有时间/信号/小横条这些元素，任何页面底色都不会出现色带。
   text-shadow 让深色文字在白/绿等任意底色上都清楚 */
.iphone-status{
  position:absolute;top:0;left:0;right:0;height:26px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 13px 0 17px;pointer-events:none;background:transparent;
  color:#0B0F1C;font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.01em;
  text-shadow:0 0 4px rgba(255,255,255,.6);
}
.ip-time{font-variant-numeric:tabular-nums}
.ip-ind{display:flex;align-items:center;gap:5px}
.ip-ind svg{display:block;height:10px;width:auto;fill:currentColor;filter:drop-shadow(0 0 2px rgba(255,255,255,.6))}
.iphone-home{
  position:absolute;bottom:0;left:0;right:0;height:18px;z-index:3;
  display:flex;align-items:center;justify-content:center;pointer-events:none;background:transparent;
}
.iphone-home i{
  width:36%;max-width:100px;height:4px;border-radius:var(--r-pill);
  background:#0B0F1C;opacity:.5;box-shadow:0 0 4px rgba(255,255,255,.5);
}
.iphone-island{
  /* 要压在状态栏之上，和真机一样：时间在左、信号在右、岛在中间 */
  position:absolute;z-index:4;top:13px;left:50%;transform:translateX(-50%);
  width:33%;height:25px;border-radius:var(--r-pill);background:#05060a;
  display:flex;align-items:center;justify-content:flex-end;padding-right:9px;
}
.ii-cam{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#26407a,#05060a 72%)}
.iphone-boot{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#fff;color:#5B6383;font-size:var(--t-sm);
  transition:opacity .45s;
}
.iphone-screen.is-loaded .iphone-boot{opacity:0;pointer-events:none}
.iphone-spin{
  width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(11,15,28,.12);border-top-color:var(--brand);
  animation:iphone-spin .8s linear infinite;
}
@keyframes iphone-spin{to{transform:rotate(360deg)}}
.iphone-boot-link{font-size:var(--t-xs);color:var(--brand);border-bottom:1px solid transparent}
.iphone-boot-link:hover{border-bottom-color:currentColor}
.iphone-btn{position:absolute;z-index:1;background:linear-gradient(180deg,#2a2e3a,#151821);border-radius:2px}
.iphone-btn.is-mute{left:-2px;top:19%;width:3px;height:24px}
.iphone-btn.is-volup{left:-2px;top:28%;width:3px;height:44px}
.iphone-btn.is-voldn{left:-2px;top:38%;width:3px;height:44px}
.iphone-btn.is-power{right:-2px;top:25%;width:3px;height:64px}
.iphone-cap{display:flex;justify-content:center;margin-top:var(--s-4);color:var(--fg-subtle)}
html.gsap-on .iphone-web{transition:none}

/* 演示账号条：商业化信任信号，摊在首屏 */
.demo-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);
  margin-top:var(--s-5);padding:13px var(--s-4);
  border:1px dashed var(--rule-strong);border-radius:var(--r-2);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-muted);
}
.demo-strip b{color:var(--fg-subtle);font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.demo-strip code{
  color:var(--fg);background:var(--bg-hover);
  padding:3px 8px;border-radius:var(--r-1);letter-spacing:.04em;
}

/* 六端投递：消息落在几块屏幕上，延迟是真实量级 */
.fanout{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);
  margin-top:var(--s-4);
}
.fan{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 12px;border:1px solid var(--rule);border-radius:var(--r-2);
  background:var(--bg-raised);
  transition:border-color .34s,background-color .34s,transform .34s;
}
.fan b{
  font-size:var(--t-xs);font-weight:700;color:var(--fg-muted);
  letter-spacing:-.005em;transition:color .34s;
}
.fan span{
  font-family:var(--f-mono);font-size:12px;line-height:1;color:var(--fg-subtle);
  letter-spacing:-.08em;transition:color .34s;
}
.fan.lit{border-color:var(--ok);background:var(--ok-wash);transform:translateY(-2px)}
.fan.lit b{color:var(--fg)}
.fan.lit span{color:var(--ok)}

/* --------------------------------------------------------------------------
   15. 链路（技术架构：编号成立，因为它确实是一条链）
   -------------------------------------------------------------------------- */
.chain{border-top:1px solid var(--rule)}
.chain-step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);
  padding:var(--s-5) 0;border-bottom:1px solid var(--rule);
  position:relative;
}
.chain-no{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
  letter-spacing:.1em;padding-top:4px;
}
.chain-step h4{font-size:var(--t-base);font-weight:700;letter-spacing:-.012em}
.chain-step p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.72;margin-top:6px;max-width:44em}
.chain-step:hover .chain-no{color:var(--brand-hi)}

/* 分组后的链路：组标题自带下边框，链路不再重复一条，
   改在编号一侧拉出竖线，让「这是一段连续流程」看得出来 */
.groups.is-chain .chain{border-top:none}
.groups.is-chain .chain-step{padding-left:var(--s-4)}
.groups.is-chain .chain-step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:1px;background:var(--rule-strong);
}
.groups.is-chain .chain-step:first-child::before{top:var(--s-5)}
.groups.is-chain .chain-step:last-child::before{bottom:calc(100% - var(--s-5) - 5px)}
.groups.is-chain .chain-step::after{
  content:"";position:absolute;left:-2px;top:calc(var(--s-5) + 5px);
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}
.groups.is-chain .chain-step:last-child{border-bottom:none;padding-bottom:0}

/* 语言标签 */
.langs{display:flex;flex-wrap:wrap;gap:6px}
.lang{
  padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:var(--t-xs);color:var(--fg-muted);
  transition:color .2s,border-color .2s;
}
.lang:hover{color:var(--fg);border-color:var(--rule-strong)}

/* --------------------------------------------------------------------------
   16. 自定义区块（后台通用扩展位）
   -------------------------------------------------------------------------- */
.cb{display:grid;gap:var(--s-6)}
.cb .cb-copy{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.cb-medias{display:grid;gap:var(--s-3)}
.cb-media{border:1px solid var(--rule);border-radius:var(--r-3);overflow:hidden;line-height:0;background:var(--bg-raised)}
.cb-media img,.cb-media video{width:100%;height:auto;display:block}
.cb-media iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.cb.layout-media-left,.cb.layout-media-right{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.cb.layout-media-left .cb-copy{order:2}
.cb.layout-media-left .cb-medias{order:1}
.cb.is-gallery .cb-medias{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* --------------------------------------------------------------------------
   16b. 内页页头
   -------------------------------------------------------------------------- */
.page-head{padding:var(--s-7) 0 var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.page-head h1{font-size:var(--t-xxl);max-width:24em}
.page-head .lede{max-width:44em}
.crumb{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);
}
.crumb a:hover{color:var(--brand-hi)}
.crumb span{opacity:.5}

/* --------------------------------------------------------------------------
   16c. 对照表
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{width:100%;border-collapse:collapse;min-width:600px}
.matrix th,.matrix td{
  text-align:left;padding:13px var(--s-4) 13px 0;
  border-bottom:1px solid var(--rule);vertical-align:middle;
}
.matrix thead th{
  font-family:var(--f-mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);
  border-bottom-color:var(--rule-strong);white-space:nowrap;
}
.matrix tbody th{font-size:var(--t-sm);font-weight:700;color:var(--fg)}
.matrix td{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-muted)}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:var(--bg-hover)}
.matrix .col-hi{color:var(--brand-hi)}

/* 单元格四态。回执符号继续承担语义：
   双勾=具备，单勾=有条件，破折号=没有，「未验证」不给勾。 */
.matrix td .mk{display:block;line-height:1}
.matrix td i{
  display:block;margin-top:4px;font-style:normal;
  font-size:11px;line-height:1.4;color:var(--fg-subtle);
  max-width:19em;
}
.matrix td.yes .mk{color:var(--ok);letter-spacing:-.08em}
.matrix td.part .mk{color:var(--fg-muted)}
.matrix td.no .mk{color:var(--fg-subtle)}
.matrix td.unk i{
  display:inline-block;margin:0;padding:2px 7px;border-radius:var(--r-1);
  border:1px dashed var(--rule-strong);color:var(--fg-subtle);
}

/* 能力对照的图例 */
.legend{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-4)}
.legend span{
  display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
}
.legend b{font-weight:400}
.legend .l-yes b{color:var(--ok);letter-spacing:-.08em}
.legend .l-part b{color:var(--fg-muted)}

/* 方案对比表：只有「我们」这一列上色，避免整张表都在自夸 */
.matrix.cmp{min-width:760px}
.matrix.cmp td{
  font-family:var(--f-body);font-size:var(--t-xs);line-height:1.55;
  padding-right:var(--s-5);vertical-align:top;max-width:17em;
}
.matrix.cmp thead th:last-child{color:var(--brand-hi)}
.matrix.cmp td.is-ours{
  color:var(--fg);font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand);padding-left:var(--s-4);
}

/* --------------------------------------------------------------------------
   16c-2. 分组清单：六十多项功能靠分组才扫得动
   -------------------------------------------------------------------------- */
.groups{display:flex;flex-direction:column;gap:var(--s-7)}
.group{scroll-margin-top:96px}
/* 计数紧跟标题，不推到最右边——右侧固定的快捷栏会盖住那里 */
.group-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s-3);padding-bottom:var(--s-3);margin-bottom:var(--s-4);
  border-bottom:1px solid var(--rule-strong);
}
.group-no{
  font-family:var(--f-mono);font-size:var(--t-mono);color:var(--brand-hi);
  letter-spacing:.1em;
}
.group-head h3{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;
  letter-spacing:-.02em;color:var(--fg);
}
.group-n{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
  white-space:nowrap;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--bg-hover);
}

/* 分组锚点目录 */
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-4)}
.jump{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 13px;border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:var(--t-xs);color:var(--fg-muted);
  transition:color .2s,border-color .2s,background-color .2s;
}
.jump:hover{color:var(--fg);border-color:var(--brand);background:var(--brand-wash)}
.jump b{
  font-family:var(--f-mono);font-size:10.5px;font-weight:400;color:var(--fg-subtle);
}
.jump:hover b{color:var(--brand-hi)}
/* 想让人一眼看到的那一项：技术页的容量估算在往下六屏，目录里不点亮就等于没有 */
.jump.is-hot{border-color:var(--brand);color:var(--brand-hi);background:var(--brand-wash)}
.jump.is-hot b{color:var(--brand-hi)}

/* --------------------------------------------------------------------------
   16c-3. 能力边界条目

   这一节专门写「没有什么」，所以不能像功能清单那样一行一条扫过去 —— 每条都要
   放得下一段解释和一行源码依据。左侧色带承担分类：红=本版本没有，黄=有条件成立，
   绿=功能齐全只是默认关着。依据那一行是这一页说服力的全部来源，样式上让它读起来
   像代码而不像文案，才不会被当成又一句自我声明。
   -------------------------------------------------------------------------- */
.gaps{display:flex;flex-direction:column;gap:var(--s-3)}
.gap-item{
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--rule);border-left:3px solid var(--rule-strong);
  border-radius:var(--r-2);background:var(--bg-raised);
}
.gap-top{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s-3);margin-bottom:8px;
}
.gap-top h4{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em;color:var(--fg)}
/* 行宽给个上限：这些段落比站内别处都长，铺满一整行会读得很累 */
.gap-item > p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.75;max-width:52em}

.state{
  font-family:var(--f-mono);font-size:var(--t-mono);white-space:nowrap;
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;
}
.state.is-no{color:var(--danger);background:var(--danger-wash);border-color:var(--danger-line)}
.state.is-warn{color:var(--warn);background:var(--warn-wash);border-color:var(--warn-line)}
.state.is-ok{color:var(--ok);background:var(--ok-wash);border-color:var(--ok-line,transparent)}
/* 色带跟着状态走，扫一眼就知道这一段是哪一类，不用读完标签 */
.gap-item:has(.state.is-no){border-left-color:var(--danger)}
.gap-item:has(.state.is-warn){border-left-color:var(--warn)}
.gap-item:has(.state.is-ok){border-left-color:var(--ok)}

/* 二十个只有开关的键名：铺成标签比列二十条卡片省地方，也更容易一眼扫完 */
.gap-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-3)}
.gap-keys span{
  font-size:var(--t-xs);color:var(--fg-subtle);
  padding:4px 10px;border-radius:var(--r-1);
  border:1px dashed var(--rule-strong);
}

.gap-ev{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px dashed var(--rule);
}
.gap-ev span{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
  color:var(--fg-subtle);flex:none;
}
.gap-ev code{
  font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--fg-muted);word-break:break-word;
}

/* 这个区间里右侧常驻联系栏正好压在卡片右缘上（更宽的屏放得下，更窄的屏它会自己隐藏），
   所以只在这一段给卡片留出让位的余量，标签才不会滑到按钮底下 */

/* --------------------------------------------------------------------------
   16c-4. 源码实证：代码量、目录分布、真实源码片段

   这一段的说服力来自「可核验」，所以样式上一路往等宽字体和表格感靠，
   刻意不做卡片与图标 —— 看着越像从工程里导出来的，越不像宣传页。
   -------------------------------------------------------------------------- */
.codesize{border-top:1px solid var(--rule-strong)}
.cz-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) auto auto;
  gap:4px var(--s-5);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
}
.cz-label{font-size:var(--t-base);font-weight:700;color:var(--fg);letter-spacing:-.01em}
.cz-lines{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);white-space:nowrap}
/* 行数用巨号：这一页就是靠这一列说话的 */
.cz-lines b{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;
  color:var(--brand-hi);letter-spacing:-.03em;margin-right:5px;
}
.cz-files{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);white-space:nowrap}
.cz-note{
  grid-column:1 / -1;font-size:var(--t-xs);color:var(--fg-subtle);
  line-height:1.6;max-width:52em;
}
@media (max-width:640px){
  .cz-row{grid-template-columns:1fr auto;gap:4px var(--s-4)}
  .cz-files{grid-column:2;text-align:right}
}

/* 口径说明：编号列表，逐条能被引用 */
.calibre{
  display:flex;flex-direction:column;gap:var(--s-3);
  margin:0;padding-left:1.6em;list-style:decimal;
}
.calibre li{
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.78;
  max-width:52em;padding-left:6px;
}
.calibre li::marker{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}

/* 目录分布 */
.dirs{border-top:1px solid var(--rule-strong)}
.dir-row{
  display:grid;grid-template-columns:minmax(0,auto) 4.5em;
  gap:6px var(--s-4);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
}
.dir-path{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg);
  word-break:break-all;
}
.dir-n{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
  text-align:right;white-space:nowrap;
}
.dir-n::after{content:" 个";}
.dir-row p{
  grid-column:1 / -1;font-size:var(--t-sm);color:var(--fg-muted);
  line-height:1.7;max-width:56em;
}

/* 源码片段 */
.snips{display:flex;flex-direction:column;gap:var(--s-6)}
.snip{
  margin:0;border:1px solid var(--rule-strong);border-radius:var(--r-3);
  background:var(--bg-raised);overflow:hidden;
}
.snip figcaption{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);
}
.snip-t{display:flex;flex-direction:column;gap:5px;flex:1 1 16em;min-width:0}
.snip-t h4{font-size:var(--t-base);font-weight:700;letter-spacing:-.012em;color:var(--fg)}
.snip-loc{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.snip-loc code{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--fg-subtle);word-break:break-all}
.snip-loc i{
  font-family:var(--f-mono);font-size:var(--t-mono);font-style:normal;
  color:var(--brand-hi);padding:2px 7px;border-radius:var(--r-1);
  background:var(--brand-wash);white-space:nowrap;
}
.snip-copy{
  flex:none;font-family:var(--f-mono);font-size:var(--t-mono);
  padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);
  color:var(--fg-subtle);background:transparent;cursor:not-allowed;
  opacity:.72;transition:color .2s,border-color .2s,background-color .2s;
}
.snip-copy:hover{color:var(--fg-subtle);border-color:var(--rule);background:transparent}
.snip-copy.is-ok,.snip-copy.is-disabled{color:var(--fg-subtle);border-color:var(--rule)}
.snip-why{
  padding:var(--s-4) var(--s-5) 0;font-size:var(--t-sm);
  color:var(--fg-muted);line-height:1.72;max-width:56em;
}
/* 行号列固定、代码列横向滚动，这样长行滚起来行号不会跟着跑 */
.snip-body{display:flex;align-items:stretch;margin-top:var(--s-4);border-top:1px solid var(--rule)}
.snip-ln,.snip-code{
  margin:0;padding:var(--s-4) 0;font-family:var(--f-mono);
  font-size:12.5px;line-height:1.75;tab-size:2;
}
.snip-ln{
  flex:none;padding-left:var(--s-5);padding-right:var(--s-4);
  text-align:right;color:var(--fg-subtle);opacity:.55;
  border-right:1px solid var(--rule);user-select:none;
}
.snip-code{
  flex:1 1 auto;min-width:0;overflow-x:auto;
  padding-left:var(--s-4);padding-right:var(--s-5);
  color:var(--fg-muted);
}
.snip-code code{font:inherit;color:inherit}
.c-kw{color:var(--brand-hi)}
.c-st{color:var(--ok)}
.c-cm{color:var(--fg-subtle);opacity:.8}
.c-nu{color:var(--warn)}
.c-fn{color:var(--fg)}
@media (max-width:640px){
  .snip-ln{display:none}
  .snip-code{padding-left:var(--s-4)}
  .snip figcaption,.snip-why{padding-left:var(--s-4);padding-right:var(--s-4)}
}

/* --------------------------------------------------------------------------
   16c-5. 表结构与接口清单
   -------------------------------------------------------------------------- */
/* 分隔线由每格自己的 1px 描边拼出来，不靠容器底色从 gap 里透上来。
   一行放不满时（比如某组只有两张表），透底色那种做法会在末尾留一块无来由的灰块；
   描边则各画各的，空位保持透明。相邻格的描边正好在 1px 的缝里重合成一条线。 */
.tbls{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:1px;
}
.tbl{
  padding:var(--s-3) var(--s-4);background:var(--bg);
  box-shadow:0 0 0 1px var(--rule);transition:background-color .2s;
}
.tbl:hover{background:var(--bg-hover)}
.tbl code{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--brand-hi);word-break:break-all;
}
.tbl p{margin-top:5px;font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.6}

/* 接口分组排行 */
.abars{display:flex;flex-direction:column;gap:7px}
.ab{
  display:grid;grid-template-columns:8.5em minmax(0,1fr) 2.6em;
  gap:var(--s-3);align-items:center;
}
.ab-name{font-size:var(--t-xs);color:var(--fg-muted);text-align:right}
.ab-track{
  height:9px;border-radius:var(--r-pill);
  background:var(--bg-hover);overflow:hidden;
}
.ab-track i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-hi));
  transition:width .7s cubic-bezier(.2,.7,.3,1);
}
.ab-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}
@media (max-width:520px){
  .ab{grid-template-columns:7em minmax(0,1fr) 2.4em;gap:8px}
  .ab-name{font-size:11px}
}


/* --------------------------------------------------------------------------
   16d. 授权档位
   -------------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--s-4);align-items:start}
.plan{
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-3);
  background:var(--bg-raised);position:relative;
}
.plan.is-key{border-color:var(--brand);box-shadow:0 24px 60px -40px var(--brand-glow)}
.plan-flag{
  position:absolute;top:-1px;right:var(--s-5);transform:translateY(-50%);
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.plan-name{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle);
}
.plan-price{
  font-family:var(--f-display);font-weight:800;font-size:clamp(26px,2.6vw,34px);
  letter-spacing:-.03em;line-height:1.1;color:var(--fg);
}
.plan-price small{font-size:var(--t-sm);font-weight:400;color:var(--fg-subtle);letter-spacing:0}
.plan-price i{
  font-style:normal;font-size:.62em;font-weight:700;
  color:var(--fg-subtle);margin-right:2px;vertical-align:.08em;
}
.plan.is-key .plan-price{color:var(--brand-hi)}
.plan.is-key .plan-price i{color:var(--brand)}
.plan-note{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.7}
.plan-count{
  padding-top:var(--s-3);border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
}
.plan-count b{color:var(--fg);font-weight:500}
.plan-list{display:flex;flex-direction:column;gap:9px}
.plan-list li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:9px;
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.6;
}
.plan-list .tick{font-family:var(--f-mono);font-size:11px;color:var(--ok);letter-spacing:-.08em}
.plan-list .off{color:var(--fg-subtle)}
.plan-list .off .tick{color:var(--fg-subtle)}
/* 自评算完后跳过来，得让人看清落在哪张卡上 */
.plan.is-hit{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash),0 24px 60px -40px var(--brand-glow);
}

/* --------------------------------------------------------------------------
   16d-2. 选型自评

   一次只做一件事：左边四道题，右边一张结果卡。结果卡在桌面端粘住，
   改答案时能直接看见档位跟着变，不用来回滚。
   -------------------------------------------------------------------------- */
.advisor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:var(--s-6);align-items:start}
.adv-qs{display:flex;flex-direction:column;gap:var(--s-5)}
.adv-q{border:0;padding:0;margin:0}
.adv-q legend{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-3);
  align-items:baseline;margin-bottom:var(--s-3);
}
.adv-no{
  grid-row:1 / span 2;
  display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--bg-hover);
  font-family:var(--f-mono);font-size:11px;color:var(--fg-subtle);
}
.adv-q legend b{font-size:var(--t-md);font-weight:600;color:var(--fg)}
.adv-q legend i{font-style:normal;font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.6}
.adv-opts{display:flex;flex-wrap:wrap;gap:9px;padding-left:calc(22px + var(--s-3))}
/* 单选钮本体收起来但仍在无障碍树里：键盘 Tab 与读屏都还认，视觉上由标签承担 */
.adv-opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.adv-opts label{
  padding:9px var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:var(--t-sm);color:var(--fg-muted);cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s;
}
.adv-opts label:hover{border-color:var(--rule-strong);color:var(--fg)}
.adv-opts input:checked + label{
  border-color:var(--brand);background:var(--brand-wash);color:var(--brand-hi);
}
.adv-opts input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px}

.adv-result{position:sticky;top:calc(var(--topbar-h) + var(--s-5))}
.adv-wait{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s-6) var(--s-5);border:1px dashed var(--rule);border-radius:var(--r-3);
  font-size:var(--t-sm);color:var(--fg-subtle);text-align:center;
}
.adv-wait b{font-family:var(--f-mono);font-size:var(--t-lg);color:var(--fg-muted)}
.adv-card{
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-5);border:1px solid var(--brand);border-radius:var(--r-3);
  background:var(--bg-raised);box-shadow:0 24px 60px -40px var(--brand-glow);
}
.adv-tag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-hi);
}
.adv-card h3{font-size:var(--t-lg);line-height:1.35}
.adv-pick{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--rule);
}
.adv-pick b{font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);letter-spacing:-.02em}
.adv-pick span{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--brand-hi)}
.adv-card p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.75}
.adv-card ul{display:flex;flex-direction:column;gap:8px}
.adv-card li{
  list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.6;
}
.adv-card li .tick{font-family:var(--f-mono);font-size:11px;color:var(--ok);letter-spacing:-.08em}
.adv-acts{display:flex;flex-wrap:wrap;gap:9px}
.adv-acts .btn{flex:1 1 auto}
@media (max-width:900px){
  .advisor{grid-template-columns:minmax(0,1fr)}
  .adv-result{position:static}
}
@media (max-width:520px){
  .adv-opts{padding-left:0}
  .adv-opts label{width:100%;text-align:center}
}

/* --------------------------------------------------------------------------
   16d-2b. 容量估算

   左边选配置、右边出人数。三个人数并排走等宽大字，是这一块唯一想让人记住的东西，
   所以除了数字之外一律压成小字灰字。下面那条档位刻度只是让人知道「我在梯子的哪一格」，
   纯装饰，不接受点击 —— 二十三格的点击热区在手机上没法用。
   -------------------------------------------------------------------------- */
.sizer{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:var(--s-6);align-items:start}

.sz-pick{
  display:flex;flex-direction:column;gap:var(--s-3);
  position:sticky;top:calc(var(--topbar-h) + var(--s-5));
}
.sz-label{font-size:var(--t-sm);font-weight:600;color:var(--fg)}
.sz-select{position:relative}
/* 自绘箭头：各家浏览器原生那个箭头样式差太多，深色下尤其突兀 */
.sz-select::after{
  content:'';position:absolute;right:var(--s-4);top:50%;width:7px;height:7px;
  margin-top:-5px;pointer-events:none;
  border-right:1.5px solid var(--fg-subtle);border-bottom:1.5px solid var(--fg-subtle);
  transform:rotate(45deg);
}
.sz-select select{
  width:100%;appearance:none;-webkit-appearance:none;
  padding:var(--s-4) calc(var(--s-4) + 18px) var(--s-4) var(--s-4);
  border:1px solid var(--rule);border-radius:var(--r-2);
  background:var(--bg-raised);color:var(--fg);
  font-family:var(--f-sans);font-size:var(--t-base);line-height:1.4;
  cursor:pointer;transition:border-color .2s;
}
.sz-select select:hover{border-color:var(--rule-strong)}
.sz-select select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sz-select optgroup{background:var(--bg-raised);color:var(--fg-subtle);font-style:normal}
.sz-select option{background:var(--bg-raised);color:var(--fg);font-style:normal}
.sz-hint{font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.7}

.sz-rung{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:var(--s-2)}
.sz-rung i{width:8px;height:4px;border-radius:2px;background:var(--bg-hover)}
.sz-rung i.is-under{background:var(--rule-strong)}
.sz-rung i.is-at{width:18px;background:var(--brand)}
.sz-rung span{
  margin-left:var(--s-2);font-family:var(--f-mono);font-size:10px;color:var(--fg-subtle);
  white-space:nowrap;
}

.sz-card{
  display:flex;flex-direction:column;gap:var(--s-5);
  padding:var(--s-5);border:1px solid var(--brand);border-radius:var(--r-3);
  background:var(--bg-raised);box-shadow:0 24px 60px -40px var(--brand-glow);
}
.sz-spec{display:flex;flex-wrap:wrap;gap:7px}
.sz-chip{
  padding:5px var(--s-3);border-radius:var(--r-pill);background:var(--bg-hover);
  font-family:var(--f-mono);font-size:var(--t-mono);color:var(--fg-muted);white-space:nowrap;
}
.sz-chip.is-limit{background:var(--warn-wash);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-line)}

/* 一行一个指标而不是三个并排：区间最长要写到「600 万 ~ 1200 万」，
   三分之一列宽装不下，会断行并把单位甩到下一行。竖排还顺带让三个数右端对齐。 */
.sz-nums{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.sz-num{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-5);
  align-items:baseline;padding:var(--s-4) 0;
}
.sz-num + .sz-num{border-top:1px dashed var(--rule)}
.sz-num > span{display:flex;flex-direction:column;gap:3px;font-size:var(--t-sm);color:var(--fg)}
.sz-num > span i{font-style:normal;font-size:var(--t-xs);color:var(--fg-subtle)}
.sz-num p{
  display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  font-family:var(--f-display);letter-spacing:-.02em;
}
.sz-num p b{font-weight:800;font-size:var(--t-lg);color:var(--fg)}
/* s 只是借它当分隔符，删除线得撤掉 */
.sz-num p s{text-decoration:none;font-size:var(--t-sm);color:var(--fg-subtle)}
.sz-num p em{
  font-style:normal;font-family:var(--f-sans);font-size:var(--t-xs);
  color:var(--fg-subtle);margin-left:2px;
}
/* 连接能力那一行是另一条天花板，不是推荐值。用品牌色和虚线左边框把它和人数区间
   区分开，免得客户把「能挂 6 万连接」直接读成「能上 6 万人」—— 那正是要防的误读。 */
.sz-num.is-cap{
  border-left:2px solid var(--brand);padding-left:11px;
  margin-left:-13px;
}
.sz-num.is-cap p b{color:var(--brand-hi)}

/* 取小值那句话：位置紧跟在数字下面，因为它就是在教人怎么读上面那两行 */
.sz-take{
  padding:11px 13px;border-radius:var(--r-2);
  background:var(--bg-hover);border:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.75;
}
.sz-fit{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.8}
.sz-acts{display:flex;flex-wrap:wrap;gap:9px}
.sz-acts .btn{flex:1 1 auto}

@media (max-width:1000px){
  .sizer{grid-template-columns:minmax(0,1fr)}
  .sz-pick{position:static}
}
@media (max-width:420px){
  /* 窄到放不下一行两列时，指标名和数字上下摞，数字仍然靠左读得顺 */
  .sz-num{grid-template-columns:minmax(0,1fr);gap:6px}
  .sz-num > span i{display:none}
}

/* --------------------------------------------------------------------------
   16d-2b. 压测报告

   这一页的可信度不来自数字大，来自「条件写全了」。所以环境那一块要和数据
   同等显眼，不能缩成一行小字；加压表要把失败率那几轮标出来 —— 一张只报
   成功轮次的表，看的人反而会怀疑。数字全部走等宽，方便逐位核对。
   -------------------------------------------------------------------------- */

/* 测试环境：键值对两列，键固定宽度好扫 */
.benv{display:flex;flex-direction:column;gap:0;max-width:52em}
.be-row{
  display:grid;grid-template-columns:7.5em minmax(0,1fr);
  gap:var(--s-4);align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule);
}
.be-row:first-child{border-top:1px solid var(--rule)}
.be-k{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
  letter-spacing:.04em;
}
.be-v{font-size:var(--t-sm);color:var(--fg);line-height:1.7}

/* 逐轮加压表。宽度收在 46em：正文能铺到 70em 宽，四列短数字摊在那么宽的行里，
   目标数和成功数会隔开三百多像素，眼睛得横着找一趟，表格的意义就没了。 */
.bramp{display:flex;flex-direction:column;gap:0;max-width:46em}
.br-head,
.br-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 4.5em 6.5em;
  gap:var(--s-3);align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.br-head{
  border-bottom:1px solid var(--rule-strong);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-subtle);
}
.br-head span:nth-child(n+3),
.br-row > span:nth-child(n+3){text-align:right}
.br-t{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg-muted)}
.br-ok{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg-subtle)}
.br-ok b{
  font-family:var(--f-display);font-size:var(--t-md);font-weight:800;
  color:var(--ok);letter-spacing:-.02em;
}
/* 有失败率的轮次换成警示色。压到极限本来就该有损耗，标出来比藏起来可信 */
.br-row.is-miss .br-ok b{color:var(--warn)}
.br-f{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}
.br-row.is-miss .br-f{color:var(--warn)}
.br-r{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}

/* 综合评测：一项一行，结果那一列是主角 */
.bscore{display:flex;flex-direction:column;gap:0;max-width:56em}
.bs-row{
  display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);
  gap:var(--s-3) var(--s-5);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
}
.bs-row:first-child{border-top:1px solid var(--rule)}
.bs-row h4{font-size:var(--t-sm);font-weight:600;color:var(--fg-muted)}
.bs-row p{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg);
  line-height:1.7;
}

/* 资源占用表 */
.bres{display:flex;flex-direction:column;gap:0;max-width:46em}
.bt-head,
.bt-row{
  display:grid;grid-template-columns:minmax(0,1fr) 5.5em 5em minmax(0,1.1fr);
  gap:var(--s-3);align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.bt-head{
  border-bottom:1px solid var(--rule-strong);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-subtle);
}
.bt-on{
  font-family:var(--f-display);font-size:var(--t-md);font-weight:800;
  color:var(--fg);letter-spacing:-.02em;
}
.bt-m,.bt-c{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-muted);
  text-align:right;
}
.bt-s{font-size:var(--t-sm);color:var(--fg-muted)}
.bt-head span:nth-child(2),
.bt-head span:nth-child(3){text-align:right}

@media (max-width:720px){
  /* 窄屏把两张宽表压成两列，表头去掉 —— 每行自己带标签更好读 */
  .br-head,.bt-head{display:none}
  .br-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px var(--s-3)}
  .br-f,.br-r{text-align:left;font-size:10.5px}
  .br-t::before{content:"目标 "}
  .br-f::before{content:"失败 "}
  .br-r::before{content:"建连 "}
  .bt-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px var(--s-3)}
  .bt-m,.bt-c{text-align:left}
  .bt-m::before{content:"内存 "}
  .bt-c::before{content:"CPU "}
  .bt-s{grid-column:1 / -1}
  .be-row{grid-template-columns:minmax(0,1fr);gap:3px}
  .bs-row{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   16d-3. 售后与质保条款

   承诺的数字单独占一列并走等宽：客户打出来给领导签的时候，看的就是那一列。
   -------------------------------------------------------------------------- */
.slas{display:flex;flex-direction:column}
.sla-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-5);
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.sla-row:first-child{border-top:1px solid var(--rule)}
.sla-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px}
.sla-k h4{font-size:var(--t-md);font-weight:600}
.sla-scope{
  padding:2px 8px;border-radius:var(--r-pill);background:var(--bg-hover);
  font-family:var(--f-mono);font-size:10px;color:var(--fg-subtle);
}
.sla-v{
  font-family:var(--f-mono);font-size:var(--t-md);font-weight:500;
  color:var(--brand-hi);text-align:right;white-space:nowrap;
}
.sla-note{
  grid-column:1 / -1;max-width:56em;
  font-size:var(--t-sm);color:var(--fg-subtle);line-height:1.75;
}
@media (max-width:640px){
  .sla-row{grid-template-columns:minmax(0,1fr)}
  .sla-v{text-align:left}
}

/* 明确不含。用叉号而不是回执符号：这一段的意思正好和站内别处相反 */
.exs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px}
.ex-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s-3);
  padding:var(--s-4);background:var(--bg);box-shadow:0 0 0 1px var(--rule);
}
.ex-mark{font-family:var(--f-mono);font-size:12px;color:var(--danger);line-height:1.7}
.ex-row h4{font-size:var(--t-sm);font-weight:600}
.ex-row p{grid-column:2;font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.7}

/* --------------------------------------------------------------------------
   16d-4. 交付验收清单

   要同时是屏上能勾的工具和纸上能签的单据，所以用真的 checkbox：
   键盘能选、读屏能念，打印出来正好是一个空方格供现场画勾。
   -------------------------------------------------------------------------- */
.ck-bar{
  position:sticky;top:calc(var(--topbar-h) - 1px);z-index:5;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3) var(--s-4);
  align-items:center;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-5);
  border:1px solid var(--rule);border-radius:var(--r-3);
  background:var(--bg-raised);
  /* 粘住时下面的条目会从边缘钻出来，加一层背景色的投影把边界收干净 */
  box-shadow:0 8px 24px -18px rgb(0 0 0 / .5);
}
.ck-num{font-family:var(--f-mono);font-size:var(--t-md);color:var(--fg);white-space:nowrap}
.ck-num b{font-size:var(--t-xl);font-weight:600;color:var(--brand-hi)}
.ck-num i{font-style:normal;color:var(--fg-subtle);margin:0 4px}
.ck-meter{display:flex;flex-direction:column;gap:6px;min-width:0}
.ck-track{height:7px;border-radius:var(--r-pill);background:var(--bg-hover);overflow:hidden}
.ck-track i{
  display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-hi));
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.ck-word{font-size:var(--t-xs);color:var(--fg-subtle)}
.ck-bar.is-clear .ck-num b,
.ck-bar.is-clear .ck-word{color:var(--ok)}
.ck-bar.is-clear .ck-track i{background:linear-gradient(90deg,var(--ok),var(--ok))}
.ck-acts{display:flex;gap:8px}
.ck-acts button{
  padding:7px var(--s-3);border:1px solid var(--rule);border-radius:var(--r-pill);
  background:transparent;color:var(--fg-muted);
  font-family:var(--f-mono);font-size:var(--t-xs);cursor:pointer;
  transition:border-color .2s,color .2s;
}
.ck-acts button:hover{border-color:var(--rule-strong);color:var(--fg)}
@media (max-width:760px){
  .ck-bar{grid-template-columns:minmax(0,1fr) auto}
  .ck-meter{grid-column:1 / -1}
}

.cks{display:flex;flex-direction:column}
.ck-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--rule);align-items:start;
}
.ck-row:last-child{border-bottom:0}
.ck-row input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;margin-top:2px;flex:none;
  border:1px solid var(--rule-strong);border-radius:5px;
  background:transparent;cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.ck-row input:hover{border-color:var(--brand)}
.ck-row input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ck-row input:checked{border-color:var(--ok);background:var(--ok)}
/* 勾用背景图画，这样打印时未勾的格子是空的、勾上的是实心，两者一眼可分 */
.ck-row input:checked::after{
  content:'';display:block;width:100%;height:100%;
  background:no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3 6-6.4' fill='none' stroke='%23081018' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ck-row label{display:flex;flex-direction:column;gap:3px;cursor:pointer}
.ck-row label b{font-size:var(--t-sm);font-weight:600;color:var(--fg);transition:color .15s}
.ck-row label span{font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.7}
.ck-row.is-done label b{color:var(--fg-subtle);text-decoration:line-through;text-decoration-color:var(--rule-strong)}
.ck-row.is-done label span{opacity:.55}
/* 整组过完时组号变绿，分批验收时不用逐条数 */
.group.is-clear .group-no{border-color:var(--ok);color:var(--ok)}
.group.is-clear .group-n{color:var(--ok)}
/* 屏上显示「已勾 / 总数」，纸上只留总数 —— 打印出来的方格都是空的 */
.group-n i{font-style:normal}
.group-n .ck-paper{display:none}

/* 签署栏。屏上是一行说明，纸上才是真正要用的那几条横线 */
.sign{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-5);
  padding:var(--s-5);border:1px dashed var(--rule);border-radius:var(--r-3);
}
.sign-cell{display:flex;flex-direction:column;gap:var(--s-5)}
.sign-cell span{font-size:var(--t-xs);color:var(--fg-subtle)}
.sign-cell i{display:block;border-bottom:1px solid var(--rule-strong);height:1px}

/* --------------------------------------------------------------------------
   16c-6. 给右侧常驻联系栏让位

   这几个组件都把内容顶到行的最右边，正好是那排按钮浮着的位置。更宽的屏放得下、
   更窄的屏按钮会自己隐藏，所以只有中间这一段需要留余量。
   写在这里而不是各组件内部，是因为媒体查询不提升优先级 —— 必须排在三者的
   padding 声明之后才盖得住，分散着写很容易被后面新加的规则悄悄推翻。
   -------------------------------------------------------------------------- */
@media (min-width:1081px) and (max-width:1360px){
  .gap-item,
  .cz-row,
  .dir-row,
  /* 质保条款的承诺数值、验收条的说明、清单顶上那排按钮都贴着右缘；
     自评的结果卡是右栏，整块顶到行的最右边 */
  .sla-row,
  .ck-row,
  .ck-bar,
  .exs,
  .sign,
  /* 容量估算的结果卡同样是右栏，三个人数并排时最右那个正好落在按钮下面 */
  .sizer,
  .advisor{padding-right:var(--s-8)}
  /* 接口排行在通栏区块里，右边没有栏杆挡着，条尾的数字会直接顶到按钮上 */
  .abars{padding-right:var(--s-8)}
  /* 表格网格用的是外边距而不是内边距：它的分隔线是靠容器底色透出来的，
     加内边距会在右侧露出一条无处可去的灰边 */
  .tbls{margin-right:var(--s-8)}
  /* 复制按钮是能点的东西，被浮层压住就是按不到，比文字被挡严重 */
  .snip figcaption{padding-right:var(--s-8)}
}

/* --------------------------------------------------------------------------
   16e. 更新日志
   -------------------------------------------------------------------------- */
/* 汇总条：先给一眼能看完的总量，再往下逐条看 */
.log-sum{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s-4);padding:var(--s-5);margin-bottom:var(--s-5);
  border:1px solid var(--rule);border-radius:var(--r-3);background:var(--bg-raised);
}
.log-sum div{display:flex;flex-direction:column;gap:5px}
.log-sum b{
  font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--fg);
}
.log-sum .is-feat b{color:var(--brand-hi)}
.log-sum .is-fix b{color:var(--ok)}
.log-sum span{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
}

/* 类型筛选 */
.log-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-5)}
.log-filter button{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 14px;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:none;cursor:pointer;font-family:inherit;
  font-size:var(--t-xs);color:var(--fg-muted);
  transition:color .2s,border-color .2s,background-color .2s;
}
.log-filter button:hover{color:var(--fg);border-color:var(--rule-strong)}
.log-filter button b{
  font-family:var(--f-mono);font-size:10.5px;font-weight:400;color:var(--fg-subtle);
}
.log-filter button.on{
  color:#fff;background:var(--brand);border-color:transparent;
}
.log-filter button.on b{color:rgba(255,255,255,.72)}

.log{border-top:1px solid var(--rule)}
.log-entry{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:0 var(--s-5);padding:var(--s-6) 0;border-bottom:1px solid var(--rule);
}
.log-entry[hidden]{display:none}
.log-entry.is-latest{
  padding-left:var(--s-5);margin-left:calc(var(--s-5) * -1);
  box-shadow:inset 2px 0 0 var(--brand);
}
.log-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.log-new{
  padding:2px 9px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
}
.log-ver{
  font-family:var(--f-mono);font-size:var(--t-base);font-weight:500;
  color:var(--fg);letter-spacing:.02em;
}
.log-date{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}
.log-kind{
  padding:2px 8px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg-hover);color:var(--fg-muted);border:1px solid var(--rule);
}
.log-kind.is-feat{background:var(--brand-wash);color:var(--brand-hi);border-color:transparent}
.log-kind.is-fix{background:var(--ok-wash);color:var(--ok);border-color:transparent}
.log-body h3{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em}
.log-body ul{margin-top:var(--s-3);display:flex;flex-direction:column;gap:7px}
.log-body li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:10px;
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.68;
}
.log-body li::before{
  content:"—";font-family:var(--f-mono);color:var(--fg-subtle);
}
.log-n{
  margin-top:var(--s-3);font-family:var(--f-mono);
  font-size:var(--t-xs);color:var(--fg-subtle);
}
.log-n b{color:var(--fg-muted);font-weight:400}

/* --------------------------------------------------------------------------
   16f. 常见问题
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) 0;cursor:pointer;list-style:none;
  font-size:var(--t-base);font-weight:700;color:var(--fg);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;
  font-family:var(--f-mono);font-size:17px;color:var(--fg-subtle);
  transition:transform .26s,color .26s;
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--brand-hi)}
.faq-item summary:hover{color:var(--brand-hi)}
.faq-item p{
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.78;
  padding-bottom:var(--s-5);max-width:52em;
}
/* 回答里指向别处的链接：在一段灰字里得看得出来能点，但不能抢过正文 */
.faq-item p a{
  color:var(--brand-hi);border-bottom:1px solid var(--brand);
  padding-bottom:1px;transition:color .2s,border-color .2s;
}
.faq-item p a:hover{color:var(--fg);border-color:var(--fg)}
@media print{
  /* 纸上点不动，但把去处写出来，看的人知道该翻哪一页 */
  .faq-item p a{color:#000;border-bottom:.5pt solid #000}
  .faq-item p a[href^="tech.html"]::after{content:"（技术架构页）";border:0}
}

/* --------------------------------------------------------------------------
   16g. 下载入口卡
   -------------------------------------------------------------------------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-3)}
.dl-card{
  display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-3);
  background:var(--bg-raised);
  transition:border-color .26s,transform .26s;
}
.dl-card:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.dl-ic{
  width:38px;height:38px;border-radius:var(--r-2);
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-wash);color:var(--brand-hi);
}
.dl-ic svg{width:19px;height:19px}
.dl-card h4{font-size:var(--t-base);font-weight:700}
.dl-card p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.65;flex:1}
.dl-card .mono{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle)}
.dl-card .btn{width:100%}

/* --------------------------------------------------------------------------
   17. 视频
   -------------------------------------------------------------------------- */
.video-frame{
  border:1px solid var(--rule);border-radius:var(--r-4);overflow:hidden;
  background:#000;box-shadow:var(--shadow-2);
}
.video-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* --------------------------------------------------------------------------
   18. 结尾转化区
   -------------------------------------------------------------------------- */
.close-panel{
  border:1px solid var(--rule);border-radius:var(--r-4);
  background:var(--bg-raised);padding:var(--s-8) var(--s-7);
  display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start;
  position:relative;overflow:hidden;
}
.close-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 100% 0%,var(--brand-wash),transparent 70%);
}
.close-panel > *{position:relative}

/* --------------------------------------------------------------------------
   19. 页脚
   -------------------------------------------------------------------------- */
.foot{border-top:1px solid var(--rule);background:var(--bg-sunken);margin-top:var(--s-8)}
.foot-in{
  max-width:var(--maxw);margin:0 auto;padding:var(--s-8) var(--pad-x) var(--s-5);
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-6);
}
.foot-brand{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;max-width:30em}
.foot-brand p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.75}
.foot-col h5{
  font-family:var(--f-mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-subtle);
  margin-bottom:var(--s-3);
}
.foot-col a,.foot-col span{
  display:block;font-size:var(--t-sm);color:var(--fg-muted);
  padding:4px 0;transition:color .2s;cursor:pointer;
}
.foot-col a:hover{color:var(--brand-hi)}
.foot-bottom{
  max-width:var(--maxw);margin:0 auto;padding:var(--s-4) var(--pad-x) var(--s-6);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
}
.foot-bottom .sep{flex:1}

/* --------------------------------------------------------------------------
   20. 右侧常驻联系栏
   -------------------------------------------------------------------------- */
.rail{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:6px;
  padding:7px;border:1px solid var(--rule);border-radius:var(--r-3);
  background:color-mix(in srgb,var(--bg-raised) 88%,transparent);
  backdrop-filter:blur(14px);box-shadow:var(--shadow-1);
}
.rail button{
  width:42px;height:42px;border:0;border-radius:var(--r-2);
  background:transparent;color:var(--fg-muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:color .2s,background-color .2s;
}
.rail button:hover{color:var(--fg);background:var(--bg-hover)}
.rail button svg{width:17px;height:17px}
.rail button i{font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.02em}
.rail .is-key{background:var(--brand);color:#fff}
.rail .is-key:hover{background:var(--brand-lo);color:#fff}
@media(max-width:1080px){.rail{display:none}}

/* --------------------------------------------------------------------------
   21. 浮层：遮罩与对话框
   -------------------------------------------------------------------------- */
.mask{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:var(--s-5);
  background:var(--overlay);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .26s;
}
.mask.open{opacity:1;pointer-events:auto}

.dialog{
  width:100%;max-width:420px;position:relative;
  background:var(--bg-raised);border:1px solid var(--rule-strong);
  border-radius:var(--r-4);padding:var(--s-6);
  box-shadow:var(--shadow-2);
  transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.mask.open .dialog{transform:none}
.dialog.is-gate{max-width:460px}
.dialog-x{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;border:0;border-radius:var(--r-2);
  background:transparent;color:var(--fg-subtle);cursor:pointer;
  font-size:19px;line-height:1;transition:color .2s,background-color .2s;
}
.dialog-x:hover{color:var(--fg);background:var(--bg-hover)}
.dialog-sub{font-size:var(--t-sm);color:var(--fg-muted);margin-top:var(--s-2);line-height:1.7}

.channels{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.channel{
  display:flex;align-items:center;gap:var(--s-3);
  padding:12px var(--s-4);border:1px solid var(--rule);border-radius:var(--r-2);
  background:var(--bg-sunken);cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.channel:hover{border-color:var(--rule-strong);background:var(--bg-hover)}
.ch-ic{
  width:34px;height:34px;flex:none;border-radius:var(--r-2);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.ch-ic svg{width:18px;height:18px}
.ch-ic.is-qq{background:#1E9AF0}
.ch-ic.is-tg{background:#2DA5E0}
.ch-ic.is-wx{background:#14BE5C}
.ch-body{flex:1;min-width:0;line-height:1.4}
.ch-body b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--fg)}
.ch-body span{
  display:block;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-subtle);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ch-go{flex:none}

.btn-row.is-center{justify-content:center;margin-top:var(--s-5)}

/* 门禁细节 */
.gate-step{display:none}
.gate-step.active{display:block}
.gate-custom{
  margin-top:var(--s-4);font-size:var(--t-sm);color:var(--fg-muted);
  padding:11px var(--s-4);border-radius:var(--r-2);background:var(--brand-wash);
}
.gate-qr{
  display:block;width:154px;margin:var(--s-4) auto 0;
  border-radius:var(--r-2);background:#fff;padding:7px;
}
.gate-input{
  width:100%;margin-top:var(--s-5);
  padding:14px var(--s-4);border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--bg-sunken);color:var(--fg);
  font-family:var(--f-mono);font-size:19px;letter-spacing:.34em;text-align:center;
  transition:border-color .2s,box-shadow .2s;
}
.gate-input::placeholder{font-size:var(--t-sm);letter-spacing:.02em;color:var(--fg-subtle)}
.gate-input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.gate-tip{
  min-height:20px;margin-top:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-muted);text-align:center;
}
.gate-tip.is-err{color:var(--danger)}

/* 二维码灯箱 */
.mask.is-plain{background:var(--overlay)}
.qr-card{
  background:#fff;padding:var(--s-4);border-radius:var(--r-3);
  box-shadow:var(--shadow-2);text-align:center;
  transform:scale(.94);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.mask.open .qr-card{transform:none}
.qr-card img{width:min(70vw,258px);height:auto;display:block;border-radius:var(--r-2)}
.qr-card figcaption{margin-top:11px;font-size:var(--t-xs);color:#5B6383;font-family:var(--f-mono)}

/* --------------------------------------------------------------------------
   22. 看图器
   -------------------------------------------------------------------------- */
.viewer{
  position:fixed;inset:0;z-index:320;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(3,5,11,.95);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .26s;
}
.viewer.open{opacity:1;pointer-events:auto}
.viewer-stage{
  max-width:92vw;max-height:80vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.viewer-stage img{
  max-width:92vw;max-height:80vh;display:block;
  border-radius:var(--r-2);transform-origin:center;
  transition:transform .18s ease-out;user-select:none;
}
.viewer-cap{
  margin-top:var(--s-4);font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--slate-400);text-align:center;max-width:70vw;
}
.viewer-tools{
  position:fixed;top:18px;right:18px;display:flex;gap:7px;
}
.viewer-tools .icon-btn{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#E8EAF6;
}
.viewer-tools .icon-btn:hover{background:rgba(255,255,255,.15)}
.viewer-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:50%;
  background:rgba(255,255,255,.07);color:#E8EAF6;cursor:pointer;
  font-size:23px;line-height:1;transition:background-color .2s;
}
.viewer-nav:hover{background:rgba(255,255,255,.18)}
.viewer-nav.is-prev{left:18px}
.viewer-nav.is-next{right:18px}

/* --------------------------------------------------------------------------
   23. 右键菜单
   -------------------------------------------------------------------------- */
.ctx{
  position:fixed;z-index:340;min-width:184px;
  padding:6px;border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--bg-raised);box-shadow:var(--shadow-2);
  opacity:0;pointer-events:none;transform:scale(.96);transform-origin:top left;
  transition:opacity .14s,transform .14s;
}
.ctx.open{opacity:1;pointer-events:auto;transform:none}
.ctx button{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border:0;border-radius:var(--r-1);
  background:transparent;color:var(--fg-muted);cursor:pointer;
  font-size:var(--t-sm);transition:color .16s,background-color .16s;
}
.ctx button:hover{color:var(--fg);background:var(--bg-hover)}
.ctx button:disabled,
.ctx button.is-disabled{opacity:.42;cursor:not-allowed}
.ctx button:disabled:hover,
.ctx button.is-disabled:hover{color:var(--fg-muted);background:transparent}
.ctx button.is-ok{color:var(--ok)}

/* --------------------------------------------------------------------------
   24. 响应式
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  :root{--gutter:120px}
  .manifest.is-2col{grid-template-columns:1fr;gap:0}
  .hero{grid-template-columns:1fr;gap:var(--s-7)}
  .hero-stage{max-width:520px}
  .foot-in{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
  .foot-brand{grid-column:1 / -1}
}

@media(max-width:860px){
  :root{--pad-x:20px;--s-8:48px}
  .row.is-hero{padding:var(--s-5) 0 var(--s-7)}
  .cb.layout-media-left,.cb.layout-media-right{grid-template-columns:1fr}
  .cb.layout-media-left .cb-copy{order:1}
  .cb.layout-media-left .cb-medias{order:2}
  .close-panel{padding:var(--s-6) var(--s-5)}
  .log-entry{grid-template-columns:1fr;gap:var(--s-4)}
  .log-entry.is-latest{padding-left:var(--s-4);margin-left:calc(var(--s-4) * -1)}
  .log-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--s-3)}
  .groups{gap:var(--s-6)}
  .group{scroll-margin-top:72px}
  .viewer-nav{width:38px;height:38px;font-size:19px}
  .viewer-nav.is-prev{left:8px}
  .viewer-nav.is-next{right:8px}
  /* 消息线在窄屏收起，左槽变成标题上方的一行元信息 */
  .sheet,.row{grid-template-columns:1fr}
  .sheet::before{display:none}
  .row > .meta{
    grid-column:1;padding-right:0;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
    margin-bottom:var(--s-4);
    padding-left:var(--s-3);border-left:2px solid var(--rule-strong);
  }
  .row > .body{grid-column:1;padding-left:0}
  .row > .body::before{display:none}
  .figures{grid-template-columns:1fr 1fr}
  .figure{border-right:none;border-bottom:1px solid var(--rule);padding:var(--s-5) var(--s-4) var(--s-5) 0}
  .figure:nth-child(2n){padding-left:var(--s-4)}
}

@media(max-width:520px){
  .figures{grid-template-columns:1fr}
  .figure{padding-left:0!important}
  .fanout{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 auto}
}

/* --------------------------------------------------------------------------
   25. 动效与可访问性底线
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.stack-2{display:flex;flex-direction:column;gap:var(--s-2)}
.stack-3{display:flex;flex-direction:column;gap:var(--s-3)}
.stack-4{display:flex;flex-direction:column;gap:var(--s-4)}
.stack-5{display:flex;flex-direction:column;gap:var(--s-5)}
.stack-6{display:flex;flex-direction:column;gap:var(--s-6)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
  .chat-row{opacity:1;transform:none}
}

html.gsap-on .reveal.in,
html.gsap-on .mask,
html.gsap-on .viewer,
html.gsap-on .mask .dialog,
html.gsap-on .mask .qr-card,
html.gsap-on .engage-pop,
html.gsap-on .tickr{transition:none}

/* --------------------------------------------------------------------------
   25b. 营销推广层：限时优惠条、促销价、老访客专属价、交易方式、成交动态、进站弹窗
   -------------------------------------------------------------------------- */
.plan-countdown{
  display:flex;align-items:center;gap:8px;
  margin:0 0 var(--s-4);padding:6px 11px;border-radius:9px;
  background:var(--brand-wash);
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);
}
.pcd-label{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--t-mono);font-weight:700;letter-spacing:.04em;color:var(--brand);
}
.pcd-label svg{width:13px;height:13px;flex:none}
.pc-time{
  margin-left:auto;display:inline-flex;align-items:baseline;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:800;color:var(--fg);
}
.pc-n{font-size:14px;letter-spacing:.03em}
.pc-c{font-style:normal;font-weight:700;color:var(--fg-subtle);padding:0 2px}
.pc-dsuffix{font-style:normal;font-size:10px;font-weight:600;color:var(--fg-muted);margin:0 5px 0 1px}
.is-d[hidden]{display:none}
.plan.has-promo:has(.plan-countdown){padding-top:var(--s-5)}
.plan.has-promo:has(.plan-countdown) .plan-deal{display:none}

.plan.has-promo{border-color:var(--warn-line);padding-top:calc(var(--s-5) + 20px)}
.plan-deal{
  position:absolute;top:-1px;left:-1px;
  padding:4px 11px;border-radius:var(--r-3) 0 var(--r-3) 0;
  font-size:var(--t-xs);font-weight:800;letter-spacing:.02em;
  background:var(--warn);color:#1B1403;
}
.plan-deal.is-loyal{background:var(--ok);color:#04231A}
.plan-price.is-promo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-was{
  font-size:var(--t-sm);font-weight:500;color:var(--fg-subtle);
  text-decoration:line-through;text-decoration-thickness:1px;
}

.loyal-panel{
  position:relative;padding:var(--s-5);
  border:1px solid var(--ok);border-radius:var(--r-3);
  background:var(--ok-wash);
}
.loyal-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.loyal-head h3{font-size:var(--t-lg);font-family:var(--f-display);letter-spacing:-.02em}
.loyal-tag{
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--ok);color:#04231A;font-size:var(--t-xs);font-weight:800;
}
.loyal-days{
  margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ok);
}
.loyal-desc{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--fg-muted);line-height:1.75}
.loyal-grid{
  margin-top:var(--s-4);display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.loyal-item{
  padding:var(--s-3) var(--s-4);border:1px solid var(--rule);
  border-radius:var(--r-2);background:var(--bg-raised);
  display:flex;flex-direction:column;gap:4px;
}
.loyal-item b{font-size:var(--t-sm);color:var(--fg-muted);font-weight:600}
.loyal-item span{display:flex;align-items:baseline;gap:8px}
.loyal-item s{font-size:var(--t-sm);color:var(--fg-subtle)}
.loyal-item em{
  font-family:var(--f-display);font-size:var(--t-lg);font-style:normal;
  font-weight:800;color:var(--ok);letter-spacing:-.02em;
}
.loyal-foot{
  margin-top:var(--s-4);display:flex;align-items:center;
  gap:var(--s-4);flex-wrap:wrap;
}
.loyal-code{font-size:var(--t-xs);color:var(--fg-muted);font-family:var(--f-mono)}
.loyal-code b{color:var(--ok);letter-spacing:.08em}
.loyal-foot .btn{margin-left:auto}
.loyal-note{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--fg-subtle);line-height:1.7}
@media(max-width:560px){.loyal-foot .btn{margin-left:0;width:100%}}

.pay-grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.pay-card{
  padding:var(--s-4) var(--s-5);border:1px solid var(--rule);
  border-radius:var(--r-3);background:var(--bg-raised);
  display:flex;flex-direction:column;gap:var(--s-2);
  transition:border-color .2s;
}
.pay-card:hover{border-color:var(--rule-strong)}
.pay-head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.pay-head h4{font-size:var(--t-md);letter-spacing:-.01em}
.pay-badge{
  padding:2px 8px;border-radius:var(--r-pill);font-size:var(--t-xs);
  background:var(--brand-wash);color:var(--brand-hi);border:1px solid var(--rule);
}
.pay-desc{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.72}
.pay-account{
  display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);
  padding-top:var(--s-2);border-top:1px dashed var(--rule);
}
.pay-account span{color:var(--fg-subtle);font-size:var(--t-xs)}
.pay-account b{font-family:var(--f-mono);color:var(--fg);user-select:text}
.pay-go{
  margin-top:auto;align-self:flex-start;font-size:var(--t-sm);
  color:var(--brand-hi);border-bottom:1px solid transparent;transition:border-color .2s;
}
.pay-go:hover{border-color:var(--brand-hi)}
.pay-invoice{
  margin-top:var(--s-4);padding:var(--s-4) var(--s-5);
  border:1px solid var(--rule);border-left:2px solid var(--ok);
  border-radius:var(--r-2);background:var(--bg-sunken);
}
.pay-invoice h4{font-size:var(--t-md)}
.pay-invoice p{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--fg-muted);line-height:1.72}
.pay-invoice ul{margin-top:var(--s-3);display:flex;flex-direction:column;gap:6px}
.pay-invoice li{
  position:relative;padding-left:16px;font-size:var(--t-sm);color:var(--fg-muted);
}
.pay-invoice li::before{
  content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--ok);
}

.tickr{
  position:fixed;z-index:95;display:flex;align-items:center;gap:10px;
  max-width:min(340px,calc(100vw - 32px));
  padding:11px 15px;border-radius:var(--r-3);
  background:color-mix(in srgb,var(--bg-raised) 94%,transparent);
  border:1px solid var(--rule-strong);
  box-shadow:var(--shadow-1);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .3s ease-out,transform .3s ease-out;
  pointer-events:none;
}
.tickr.is-bottom-left{left:18px;bottom:18px;transform:translateY(12px)}
.tickr.is-bottom-right{right:18px;bottom:18px;transform:translateY(12px)}
.tickr.is-top-left{left:18px;top:calc(var(--topbar-h) + 18px);transform:translateY(-12px)}
.tickr.is-top-right{right:18px;top:calc(var(--topbar-h) + 18px);transform:translateY(-12px)}
.tickr.is-in{opacity:1;transform:translateY(0)}
.tickr-dot{
  flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-wash);
}
.tickr-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.tickr-title{font-size:var(--t-xs);color:var(--fg-subtle);letter-spacing:.04em}
.tickr-text{font-size:var(--t-sm);color:var(--fg);line-height:1.5}
@media(max-width:560px){
  .tickr{left:12px;right:12px;max-width:none}
  .tickr.is-top-left,.tickr.is-top-right{top:calc(var(--topbar-h) + 12px)}
  .tickr.is-bottom-left,.tickr.is-bottom-right{bottom:12px}
}

html.has-arrival{overflow:hidden;padding-right:var(--sb-lock,0px)}
#arrivalModal{
  z-index:340;padding:var(--s-4);
  background:rgba(6,8,17,.66);backdrop-filter:blur(10px);
}
html.has-arrival #arrivalModal{margin-right:var(--sb-lock,0px)}
.dialog.is-arrival{
  max-width:min(940px,94vw);padding:0;overflow:hidden;
  display:grid;grid-template-columns:322px minmax(0,1fr);
  max-height:calc(100vh - 2 * var(--s-4));
  border-color:var(--rule-strong);
  box-shadow:0 48px 140px -48px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.2);
}
.dialog.is-arrival .dialog-x{
  top:16px;right:16px;width:38px;height:38px;font-size:22px;z-index:2;
  border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--bg-raised);color:var(--fg-muted);
  box-shadow:0 10px 24px -14px rgba(9,13,30,.45);
}
.arrival-btn-ic{
  width:18px;height:18px;display:inline-block;vertical-align:-4px;margin-right:8px;
}
.arrival-side{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:var(--s-6) var(--s-5);
  background-image:
    url("arrival/bg-left.png"),
    linear-gradient(168deg,#3D55E8,#3524B8 78%);
  background-size:cover,auto;
  background-position:center,0 0;
}
.arrival-side > *{position:relative;z-index:1}
.arrival-decor{
  display:block;width:min(224px,78%);margin:auto;
  filter:drop-shadow(0 24px 38px rgba(3,6,30,.52));
  pointer-events:none;
}
.arrival-brand{display:flex;align-items:center;gap:10px}
.arrival-brand img{width:32px;height:32px;border-radius:var(--r-2);flex:none}
.arrival-brand b{
  display:block;font-family:var(--f-display);font-size:15px;font-weight:800;
  letter-spacing:-.02em;color:#fff;line-height:1.2;
}
.arrival-brand i{
  display:block;font-family:var(--f-mono);font-size:9px;font-style:normal;
  letter-spacing:.24em;color:rgba(255,255,255,.62);
}
.arrival-side .h-md{
  margin-top:var(--s-6);
  font-family:var(--f-display);font-size:clamp(25px,2.6vw,31px);font-weight:800;
  letter-spacing:-.022em;line-height:1.28;color:#fff;
}
.arrival-side .dialog-sub{
  margin-top:var(--s-3);font-size:var(--t-sm);line-height:1.8;
  color:rgba(255,255,255,.78);
}
.arrival-demo{
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--f-mono);font-size:var(--t-xs);
}
.arrival-demo-k{
  font-size:var(--t-mono);letter-spacing:.12em;
  color:rgba(255,255,255,.66);margin-bottom:3px;
}
.arrival-demo-p{
  display:flex;align-items:center;gap:var(--s-3);
  padding:9px 13px;border-radius:10px;
  background:rgba(9,12,42,.4);border:1px solid rgba(255,255,255,.15);
}
.arrival-demo-p i{
  display:inline-flex;align-items:center;gap:7px;
  font-style:normal;color:rgba(255,255,255,.68);
  letter-spacing:.14em;font-size:var(--t-mono);
}
.arrival-demo-p i img{width:15px;height:15px;display:block;opacity:.92}
.arrival-demo code{margin-left:auto;color:#fff;letter-spacing:.05em;cursor:text}
.arrival-eye{
  flex:none;display:grid;place-items:center;width:22px;height:22px;
  padding:0;border:0;background:none;cursor:pointer;border-radius:6px;
  opacity:.75;transition:opacity .2s;
}
.arrival-eye:hover{opacity:1}
.arrival-eye img{width:16px;height:16px;display:block}
.arrival-note{
  margin-top:var(--s-4);font-size:var(--t-mono);line-height:1.75;
  color:rgba(255,255,255,.55);
}
.arrival-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-sunken)}
.arrival-body{flex:1;overflow:auto;padding:var(--s-6) var(--s-6) var(--s-5)}
.arrival-cap{
  display:block;font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.18em;color:var(--fg-subtle);
}
.arrival-dl{
  margin:var(--s-3) 0 0;display:flex;flex-direction:column;gap:12px;
}
.arrival-dl-btn{
  display:block;text-align:left;
  border:1px solid var(--rule);border-radius:14px;
  background:var(--bg-raised);color:var(--fg);cursor:pointer;
  box-shadow:0 8px 22px -18px rgba(9,13,30,.4);
  transition:border-color .2s,background-color .2s,transform .18s,box-shadow .2s;
}
.arrival-dl-btn:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--rule));
  transform:translateY(-1px);
  box-shadow:0 14px 30px -20px var(--brand-glow);
}
.arrival-dl-btn.is-pick{
  border-color:color-mix(in srgb,var(--brand) 62%,var(--rule));
  background:var(--brand-wash);
  box-shadow:0 12px 28px -18px var(--brand-glow);
}
.arrival-dl-btn > button,
.arrival-dl-btn > a{
  display:flex;align-items:center;gap:var(--s-4);width:100%;
  padding:13px var(--s-4);border:0;background:none;color:inherit;
  text-align:left;cursor:pointer;font:inherit;
}
.arrival-ic{
  flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;
  transition:transform .2s;
}
.arrival-ic img,.arrival-ic svg{width:100%;height:100%;display:block;object-fit:cover}
.arrival-dl-btn:hover .arrival-ic{transform:scale(1.05)}
.arrival-tx{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0}
.arrival-tx b{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--fg);letter-spacing:-.01em;
}
.arrival-tx > span{
  font-family:var(--f-mono);font-size:var(--t-mono);color:var(--fg-subtle);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arrival-pick{
  flex:none;padding:2.5px 8px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;
  font-size:var(--t-mono);font-style:normal;font-weight:800;letter-spacing:.05em;
  box-shadow:0 6px 14px -6px var(--brand-glow);
}
.arrival-go{
  flex:none;width:18px;height:18px;display:block;
  transition:transform .2s;
}
.arrival-dl-btn:hover .arrival-go{transform:translateX(3px)}
.arrival-contacts{
  margin-top:var(--s-5);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;
}
.arrival-contacts .arrival-cap{flex:1 0 100%;margin-bottom:var(--s-1)}
.arrival-ch{
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--bg-raised);color:var(--fg-muted);cursor:pointer;
  font-size:var(--t-xs);transition:border-color .2s,color .2s,box-shadow .2s;
  box-shadow:0 6px 16px -14px rgba(9,13,30,.35);
}
.arrival-ch-ic{width:18px;height:18px;display:block;flex:none}
.arrival-ch:hover{
  border-color:var(--brand);color:var(--fg);
  box-shadow:0 10px 22px -16px var(--brand-glow);
}
.arrival-ch b{font-weight:700;color:var(--fg)}
.arrival-ch span{user-select:text;font-family:var(--f-mono);font-size:var(--t-mono)}
.arrival-foot{
  padding:var(--s-4) var(--s-6);
  border-top:1px solid var(--rule);background:var(--bg-raised);
}
.dialog.is-arrival .btn-row{margin:0;gap:var(--s-3)}
.dialog.is-arrival .btn-row .btn{flex:1;min-width:0}
@media (max-width:720px){
  .dialog.is-arrival{
    display:flex;flex-direction:column;overflow:auto;max-width:min(560px,94vw);
  }
  .arrival-side{flex:none;padding:var(--s-5) var(--s-4)}
  .arrival-side .h-md{margin-top:var(--s-4)}
  .arrival-decor{width:150px;margin:var(--s-4) auto}
  .arrival-demo{margin-top:0}
  .arrival-main{flex:none;min-height:auto}
  .arrival-body{flex:none;overflow:visible;padding:var(--s-5) var(--s-4)}
  .arrival-foot{padding:var(--s-4) var(--s-4)}
  .dialog.is-arrival .btn-row{flex-direction:column}
  .dialog.is-arrival .btn-row .btn{width:100%}
}

/* --------------------------------------------------------------------------
   25c. Shoelace 组件桥接
   -------------------------------------------------------------------------- */
:root{
  --sl-font-sans:var(--f-sans);
  --sl-font-mono:var(--f-mono);
  --sl-font-size-x-small:var(--t-xs);
  --sl-font-size-small:var(--t-sm);
  --sl-font-size-medium:var(--t-base);
  --sl-font-size-large:var(--t-md);
  --sl-font-weight-semibold:700;
  --sl-border-radius-small:var(--r-1);
  --sl-border-radius-medium:var(--r-2);
  --sl-border-radius-large:var(--r-3);
  --sl-border-radius-x-large:var(--r-4);
  --sl-color-primary-500:var(--brand-hi);
  --sl-color-primary-600:var(--brand);
  --sl-color-primary-700:var(--brand-lo);
  --sl-color-warning-500:var(--warn);
  --sl-color-warning-600:var(--warn);
  --sl-color-success-600:var(--ok);
  --sl-color-danger-600:var(--danger);
  --sl-color-neutral-0:var(--bg-raised);
  --sl-color-neutral-50:var(--bg-sunken);
  --sl-color-neutral-100:var(--bg-hover);
  --sl-color-neutral-200:var(--rule);
  --sl-color-neutral-300:var(--rule-strong);
  --sl-color-neutral-400:var(--fg-subtle);
  --sl-color-neutral-500:var(--fg-subtle);
  --sl-color-neutral-600:var(--fg-muted);
  --sl-color-neutral-700:var(--fg-muted);
  --sl-color-neutral-800:var(--fg);
  --sl-color-neutral-900:var(--fg);
  --sl-color-neutral-1000:var(--fg);
  --sl-panel-background-color:var(--bg-raised);
  --sl-panel-border-color:var(--rule);
  --sl-focus-ring-color:var(--brand-glow);
  --sl-focus-ring-width:3px;
  --sl-input-height-small:32px;
  --sl-input-height-medium:40px;
  --sl-input-height-large:46px;
  --sl-transition-x-fast:.12s;
  --sl-transition-fast:.18s;
  --sl-transition-medium:.26s;
}

sl-button::part(base){
  font-family:var(--f-sans);font-weight:700;letter-spacing:-.005em;
  transition:transform .18s,box-shadow .2s,background-color .2s,border-color .2s;
}
sl-button[variant="primary"]::part(base){color:#fff;border-color:transparent}
sl-button[variant="primary"]:not([disabled]):hover::part(base){
  background:var(--brand-hi);transform:translateY(-1px);
  box-shadow:0 14px 30px -18px var(--brand-glow);
}
sl-button:not([variant="primary"])::part(base){background:var(--bg-sunken);color:var(--fg)}
sl-button:not([variant="primary"]):not([disabled]):hover::part(base){
  background:var(--bg-hover);border-color:var(--brand);color:var(--fg);transform:translateY(-1px);
}
sl-card::part(base){
  background:var(--bg-sunken);border-color:var(--rule);
  box-shadow:none;transition:border-color .2s,background-color .2s,transform .18s,box-shadow .2s;
}
sl-badge::part(base){font-family:var(--f-sans);font-weight:800;letter-spacing:.02em;box-shadow:none}
sl-divider{--color:var(--rule);--spacing:var(--s-5)}
sl-progress-bar{--height:3px;--track-color:rgba(255,255,255,.22);--indicator-color:#fff}

.pc-prog{--track-color:rgba(255,255,255,.2);--indicator-color:rgba(255,255,255,.92)}

html.sl-on .arrival-dl-btn::part(base){
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
html.sl-on .arrival-dl-btn::part(body){padding:0}
html.sl-on .dialog.is-arrival .btn-row .btn{padding:0;border:0;background:none;box-shadow:none}
html.sl-on .dialog.is-arrival .btn-row .btn::part(base){
  width:100%;justify-content:center;font-size:var(--t-base);font-weight:700;
}
html.sl-on .dialog.is-arrival .btn-row .btn.btn-primary::part(base){
  background:linear-gradient(94deg,#4463FF,#7A4FF6 88%);
  border:0;color:#fff;
  box-shadow:0 16px 34px -16px rgba(84,86,248,.5);
}
html.sl-on .dialog.is-arrival .btn-row .btn.btn-primary:hover::part(base){
  filter:brightness(1.07);transform:translateY(-1px);
}
html.sl-on .dialog.is-arrival .btn-row .btn.btn-ghost::part(base){
  background:var(--bg-raised);color:color-mix(in srgb,var(--brand) 62%,var(--fg));
  border:1.5px solid color-mix(in srgb,var(--brand) 45%,var(--rule-strong));
}
html.sl-on .dialog.is-arrival .btn-row .btn.btn-ghost:hover::part(base){
  border-color:var(--brand);background:var(--brand-wash);
}
html:not(.sl-on) .pc-prog{display:none}

.ct-intro{display:flex;flex-direction:column;gap:var(--s-3)}
.ct-intro p{font-size:var(--t-sm);color:var(--fg-muted);line-height:1.85;user-select:text}
.ct-list{display:flex;flex-direction:column;gap:var(--s-4)}
.ct-sec{
  padding:var(--s-4) var(--s-5);border:1px solid var(--rule);
  border-left:2px solid var(--brand);border-radius:var(--r-2);
  background:var(--bg-raised);
}
.ct-list.is-compliance .ct-sec{border-left-color:var(--warn)}
.ct-sec h3{
  font-size:var(--t-md);letter-spacing:-.01em;color:var(--fg);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--rule);
}
.ct-sec p{
  margin-top:var(--s-2);font-size:var(--t-sm);color:var(--fg-muted);
  line-height:1.85;user-select:text;
}
.ct-notices{display:flex;flex-direction:column;gap:var(--s-3)}
.ct-notices li{
  list-style:none;position:relative;padding-left:var(--s-5);
  font-size:var(--t-sm);color:var(--fg-muted);line-height:1.8;user-select:text;
}
.ct-notices li::before{
  content:'!';position:absolute;left:0;top:2px;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--warn-wash);color:var(--warn);
  font-family:var(--f-mono);font-size:11px;font-weight:700;
}
.ct-laws{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ct-laws span{
  padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:var(--t-xs);color:var(--fg-muted);user-select:text;
}
.ct-entry{
  display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);border:1px dashed var(--rule-strong);
  border-radius:var(--r-3);background:var(--bg-sunken);
}
.ct-entry > div{flex:1 1 260px;min-width:0}
.ct-entry h4{font-size:var(--t-md);letter-spacing:-.01em}
.ct-entry p{margin-top:6px;font-size:var(--t-sm);color:var(--fg-muted);line-height:1.72}
@media(max-width:560px){.ct-entry .btn{width:100%}}

/* --------------------------------------------------------------------------
   26. 打印 —— 按一下 Ctrl+P 出来的是一份能直接递出去的交付说明书

   采购方常要把资料打出来走审批流程，所以这里不是"顺便也能打"，而是当成一份文档
   重新排：深色换成纸面配色（印一页深底既费墨又读不清），导航、按钮、演示视频这些
   在纸上点不动的东西全部撤掉，卡片与表格不许跨页断开，页眉页脚补上品牌和联系方式。
   页码交给浏览器打印面板里的"页眉和页脚"选项，@page 的页码计数器 Chrome 至今不支持。
   -------------------------------------------------------------------------- */
.print-only{display:none}

@media print{
  @page{size:A4;margin:16mm 14mm}

  /* 纸面一律浅色，并且不跟随访客在屏幕上选的主题 */
  :root,
  html[data-theme="dark"],
  html[data-theme="light"]{
    --bg:#fff; --bg-raised:#fff; --bg-sunken:#fff; --bg-hover:#fff;
    --fg:#000; --fg-muted:#2C3140; --fg-subtle:#5A6076;
    --rule:#C9CDD9; --rule-strong:#9AA0B2;

    /* 主色与功能色都压深一档，浅底上才有对比度 */
    --brand:#3A2DC0; --brand-hi:#3A2DC0; --brand-lo:#3A2DC0;
    --brand-wash:#EFEDFC; --brand-glow:transparent;
    --ok:#0A7A4F; --ok-wash:#E9F7F0; --ok-ink:#0A7A4F;
    --danger:#B4232D;

    --screen:#fff; --screen-2:#FAFBFD; --screen-3:#F0F2F7;
    --screen-fg:#000; --screen-muted:#5A6076;

    --shadow-1:none; --shadow-2:none; --shadow-screen:0 0 0 1px #C9CDD9;
    --glow-a:transparent; --glow-b:transparent;

    /* 字号换成印刷单位，屏幕上那套 vw 流体值在纸上算出来会失控 */
    --t-mega:23pt; --t-xxl:18pt; --t-xl:14pt; --t-lg:12pt;
    --t-md:10.5pt; --t-base:9.8pt; --t-sm:8.6pt; --t-xs:8pt; --t-mono:7.8pt;

    /* 大间距在纸上纯属浪费版面 */
    --s-6:18px; --s-7:22px; --s-8:26px; --s-9:30px; --s-10:34px;
    --pad-x:0; --maxw:none;

    color-scheme:light;
  }

  html,body{background:#fff!important;color:#000!important;overflow:visible!important}
  body{line-height:1.6}

  /* 屏幕上的氛围层、阅读进度条、贯穿的消息线在纸上都没有意义 */
  .ambient,.scroll-progress,
  .sheet::before,.row > .body::before,.dev-shot::after{display:none!important}

  /* 纸上点不动的东西：导航、按钮、浮层、视频。
     首屏那台模拟聊天整块撤掉 —— 它是靠脚本逐条播出来的假界面，纸上只会留一片空白，
     真实界面由「界面一览」那节的截图承担。 */
  .topbar,.nav,.nav-toggle,.theme-toggle,.rail,
  .btn,.btn-row,.link-go,.dl-btn,
  .video-frame,.hero-stage,
  .mask,.dialog,.viewer,
  .plan-countdown,.tickr,.pay-go,
  .foot-col,.foot-bottom{display:none!important}

  /* 滚动入场动画的初始态是透明的，不解开会印出一堆空白页 */
  .reveal,.reveal.in,.chat-row{opacity:1!important;transform:none!important}
  *,*::before,*::after{
    transition:none!important;animation:none!important;
    box-shadow:none!important;text-shadow:none!important;
  }

  /* 版面收成单栏：左侧那条元信息槽在 A4 上太吃宽度，改成标题上方的一行 */
  .sheet,.row{grid-template-columns:1fr!important;gap:0!important}
  .row{padding:var(--s-6) 0!important;border-top:1px solid var(--rule)}
  .row:first-of-type{border-top:none}
  .row > .meta{
    grid-column:1;padding:0 0 var(--s-3);
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);
    border-left:none;
  }
  .row > .body{grid-column:1;padding-left:0!important}

  /* 首屏撤掉右边那台设备后，左栏要把整个宽度收回来 */
  .hero{grid-template-columns:1fr!important}
  .row.is-hero{padding:0 0 var(--s-6)!important}

  /* 多列组件在 A4 上重新分栏，四列挤在 182mm 里字会小到读不了 */
  .devwall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .figures,.arch-row,.arch-row.is-tight{
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
  }
  .foot-in{grid-template-columns:1fr!important}

  /* 分页：标题不许单独留在页尾，成块的内容不许被切两半 */
  h1,h2,h3,h4,h5,.eyebrow{break-after:avoid;page-break-after:avoid}
  .card,.shot-card,.plan,.figure,.manifest-item,.chain-step,.log-entry,
  .faq-item,.dl-card,.arch-node,.stack-group,.demo-strip,.fanout-item,
  figure,blockquote,tr{break-inside:avoid;page-break-inside:avoid}

  /* 长表格跨页时表头要在每一页重复出现，否则后面几页读不懂列的含义 */
  table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}

  /* 这几处的颜色是有含义的（回执、对照表的有无、推荐档位、交付状态），得让它真的印出来 */
  .tick,.badge,.matrix td,.matrix th,.plan.is-featured,.pill,.tag,
  .state,.gap-item,.cz-lines b,.ab-track i{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* ---- 源码实证与交付范围这两页的组件 ---- */

  /* 让位规则是给屏幕上那排浮动按钮用的，纸上没有按钮，留白纯属浪费版面 */
  .gap-item,.cz-row,.dir-row,.abars,.snip figcaption{padding-right:0}
  .tbls{margin-right:0}

  /* 一条一格都不许跨页断开，断在中间的验收条目会被当成两条 */
  .gap-item,.cz-row,.dir-row,.snip,.tbl,.ab,.calibre li,.group{break-inside:avoid}

  /* 代码要能读：等宽字号压小、长行折回来而不是留在纸外，行号列留着便于对照源码 */
  .snip{background:#fff}
  .snip-ln,.snip-code{font-size:7pt;line-height:1.55;padding-top:8px;padding-bottom:8px}
  .snip-code{overflow:visible;white-space:pre-wrap;word-break:break-all}
  .snip-copy{display:none!important}
  /* 高亮色在纸上没意义，还容易印花，统一压成黑字，仅注释淡一档 */
  .c-kw,.c-st,.c-nu,.c-fn{color:#000}
  .c-cm{color:#5A6076}

  /* 一百多张表印成三列会挤，两列读着舒服；标签色块压成细框 */
  .tbls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl{box-shadow:0 0 0 .5pt #C9CDD9!important}
  .gap-keys span{border-style:solid}

  /* 接口排行的条形图在纸上留着有用，能看出各模块的相对体量 */
  .ab-track{background:#F0F2F7}
  .ab-track i{background:#3A2DC0}

  /* 分组跳转是屏幕上的锚点导航，纸上点不动 */
  .jumps{display:none!important}

  /* ---- 交付与验收这一页的组件 ---- */

  /* 验收清单是这一页在纸上的主角：方格要看得见、能画勾，一条不许跨页断开。
     现场是打印出来逐项过的，一条断在两页上就会被漏掉或重复打勾。 */
  .ck-row{break-inside:avoid;padding:5px 0}
  .ck-row input{
    width:11pt;height:11pt;border:.8pt solid #000;border-radius:1.5pt;
    background:#fff;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  /* 纸上不做灰化与删除线：勾是现场画的，预先划掉反而看不清原文 */
  .ck-row input:checked{background:#fff;border-color:#000}
  .ck-row input:checked::after{display:none}
  .ck-row.is-done label b{color:#000;text-decoration:none}
  .ck-row.is-done label span{opacity:1}
  .ck-row label b{font-size:9pt}
  .ck-row label span{font-size:7.8pt}

  /* 进度条和那两个批量按钮是屏上的工具，纸上没有意义 */
  .ck-bar{display:none!important}

  /* 组标题上的进度换成纯总数：方格是空着让人现场画勾的，
     旁边写「已勾 4 / 6」会让人以为这张纸上有四项已经通过了 */
  .group-n .ck-live{display:none}
  .group-n .ck-paper{display:inline}
  .group.is-clear .group-no,
  .group.is-clear .group-n{border-color:#9AA0B2;color:var(--fg-subtle)}

  /* 签署栏是这份单子的落点，必须整块留在同一页 */
  .sign{
    break-inside:avoid;border:.8pt solid #000;border-style:solid;
    padding:12px;margin-top:14px;
  }
  .sign-cell i{border-bottom:.8pt solid #000}

  /* 质保条款：承诺的数字保持等宽右对齐，逐条不跨页 */
  .sla-row{break-inside:avoid;padding:7px 0}
  .sla-row,.sla-row:first-child{border-color:#C9CDD9}
  .sla-v{color:#000;font-weight:600}
  /* 上面那条通用的 box-shadow:none 带 !important，这里靠描边拼格线的组件得抢回来 */
  .ex-row{break-inside:avoid;box-shadow:0 0 0 .5pt #C9CDD9!important}
  .ex-mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .exs{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* 选型自评整块撤掉：单选钮在纸上按不动，一堆没选中的圆点只会让人以为漏印了 */
  .advisor,#advisor{display:none!important}

  /* 容量估算：下拉框在纸上选不了，但当前那一档的数字是有用的，所以只撤控件、留结果卡。
     估算口径和免责那句必须跟着一起印，否则纸上只剩一组人数，等于把估算印成了承诺 */
  .sz-pick{display:none!important}
  .sizer{grid-template-columns:minmax(0,1fr)!important}
  .sz-card{
    border:.5pt solid #C9CDD9!important;box-shadow:none!important;break-inside:avoid;
  }
  .sz-chip{
    background:#F2F3F7!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .sz-chip.is-limit{box-shadow:none!important}
  .sz-num p b{color:#000!important}
  /* 连接能力那一行在纸上没有颜色可依靠，改用实线左边框继续和人数区间分开 */
  .sz-num.is-cap{border-left:1pt solid #000;padding-left:8px;margin-left:0}
  .sz-take{
    border:.5pt solid #C9CDD9!important;background:transparent!important;
    color:#000;break-inside:avoid;
  }

  /* 压测报告：这一页印出来就是一份可以附在合同后面的实测记录。
     环境那一块必须跟数据一起印 —— 只印数字不印条件，纸面上就变成了性能承诺。
     加压表逐行不跨页；失败的那几轮在纸上没有颜色可用，改成在失败率后面补个星号，
     否则黑白打印看不出哪几轮是有损耗的。 */
  .benv,.bramp,.bscore,.bres{break-inside:auto}
  .be-row,.br-row,.bs-row,.bt-row,.br-head,.bt-head{break-inside:avoid}
  .be-row,.be-row:first-child,
  .br-row,.br-head,
  .bs-row,.bs-row:first-child,
  .bt-row,.bt-head{border-color:#C9CDD9}
  .be-v,.bs-row p,.bt-on{color:#000}
  .br-ok b,.bt-on{color:#000!important}
  .br-row.is-miss .br-ok b,
  .br-row.is-miss .br-f{color:#000!important;font-weight:700}
  .br-row.is-miss .br-f::after{content:" *"}
  .bramp::after{
    content:"* 标星的轮次存在建连损耗，已建立的连接未掉线。";
    display:block;padding-top:6px;
    font-size:8.5pt;color:#5A6070;
  }

  /* 没上传截图的位置，屏幕上显示占位框是对的，但印在交付文档里像没做完 */
  .dev-empty{display:none!important}
  .shot-card:has(img:not([src])),
  .stagecast:has(img:not([src])){display:none!important}

  /* 页脚只留品牌与那句标语，导航链接在纸上没用 */
  .foot{border-top:1px solid var(--rule);padding:var(--s-4) 0 0;margin-top:var(--s-5)}

  img{max-width:100%!important}

  /* 页眉页脚由 ui.js 注入，只在纸上出现 */
  .print-only{display:block}
  .print-head{
    display:flex;align-items:center;gap:10px;
    padding-bottom:8px;margin-bottom:14px;
    border-bottom:1.5px solid #000;
  }
  .print-head img{width:26px;height:26px;border-radius:6px}
  .print-head b{font-size:11pt;font-weight:800;letter-spacing:-.01em}
  .print-head .ph-sub{
    font-family:var(--f-mono);font-size:7pt;
    letter-spacing:.18em;color:var(--fg-subtle);
  }
  .print-head .ph-doc{
    margin-left:auto;text-align:right;
    font-family:var(--f-mono);font-size:7.6pt;color:var(--fg-muted);line-height:1.5;
  }
  .print-head .ph-doc b{display:block;font-size:9pt;font-family:var(--f-sans)}
  .print-foot{
    margin-top:12px;padding-top:8px;border-top:1px solid var(--rule);
    font-family:var(--f-mono);font-size:7.4pt;color:var(--fg-subtle);
    display:flex;flex-wrap:wrap;gap:4px 14px;
  }
}