/* ==========================================================================
   FlycatSoft · 通用智能体软件商城
   Design System v3 — "Crisp"
   纯白底 / 近黑墨 / 电光蓝强调 / 近黑主按钮 · 高对比 · 亮暗双主题
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ---------- 2. Tokens ---------- */
:root {
  /* surfaces —— clean blue-gray, with clear separation between layers */
  --bg:         #F6F8FB;
  --bg-sub:     #EEF3F8;
  --bg-sunken:  #E2EAF3;
  --card:       #FFFFFF;
  --card-sub:   #F8FAFC;
  --scrim:      rgba(12,25,43,.58);

  /* lines */
  --line:       #D8E1EB;
  --line-2:     #B7C5D5;
  --line-3:     #8798AB;

  /* ink */
  --ink:        #152233;
  --ink-2:      #394B60;
  --ink-3:      #66788B;
  --ink-4:      #94A3B5;

  /* brand · clear blue */
  --accent:      #1667D9;
  --accent-600:  #0E4EA8;
  --accent-soft: #DCEAFF;
  --accent-tint: #EFF6FF;

  /* primary action */
  --ink-btn:    #152233;
  --ink-btn-h:  #243B56;
  --on-ink:     #F6F8FB;

  /* semantic colors */
  --green:      #237A5A;
  --green-soft: #DDF3E8;
  --amber:      #A76C09;
  --amber-soft: #FFF0C7;
  --star:       #F5A623;
  --star-empty: #E3C68B;
  --red:        #BC3A41;
  --red-soft:   #FBE1E4;
  --violet:     #6951A1;
  --violet-soft:#ECE7FB;

  /* media tints */
  --tint-blue:  #E4EFFD;
  --tint-green: #E2F2EA;
  --tint-amber: #FFF1D5;
  --tint-violet:#EEEAFB;
  --tint-rose:  #FBE7EA;
  --tint-slate: #E8EEF4;

  /* 正文表格：深色表头 + 白字 + 斑马纹行。
     表头底色单独成对变量，暗色主题在下面覆盖成「比卡片略亮」的一档，
     这样两套主题里都是深底白字，而不是暗色下反成白底黑字。 */
  --table-head-bg:  #16263A;
  --table-head-ink: #F4F7FB;
  --table-stripe:   #F1F5FA;

  /* effects */
  --shadow-1: 0 1px 2px rgba(21,34,51,.06);
  --shadow-2: 0 1px 2px rgba(21,34,51,.06), 0 8px 18px -6px rgba(21,34,51,.12);
  --shadow-3: 0 2px 6px rgba(21,34,51,.07), 0 18px 38px -12px rgba(21,34,51,.16);
  --shadow-4: 0 4px 12px rgba(21,34,51,.08), 0 36px 68px -20px rgba(21,34,51,.22);
  --ring:     0 0 0 3px rgba(22,103,217,.24);

  /* type —— 衬线走「杂志」路线；中文回退到宋体 */
  --font-serif:   Cambria, Georgia, 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', SimSun, 'Times New Roman', serif;
  --font-display: 'Segoe UI', system-ui, -apple-system, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-body:    'Segoe UI', system-ui, -apple-system, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  /* geometry —— 圆角收小，越接近印刷品越不该有气泡感 */
  --r-xs: 3px;
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 11px;
  --r-xl: 16px;
  --pill: 999px;

  --shell: 1200px;
  --gutter: 32px;
  --header-h: 64px;

  /* 区块垂直节奏 —— 上一版 80/108px 太散，收一档 */
  --sec-y:      52px;
  --sec-y-tight: 32px;
  --sec-y-loose: 68px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ----------------------------------------------------------------
     v2 兼容别名层
     这些是上一版配色留下的旧变量名。页面里仍有引用，
     直接删掉会让声明失效（背景透明 / 颜色继承）。这里统一映射到 v3
     token，保证老页面不掉色。新代码请直接使用右侧的 v3 变量名。
     ---------------------------------------------------------------- */
  --paper:       var(--bg);
  --paper-2:     var(--bg-sub);
  --card-2:      var(--card-sub);
  --card-3:      var(--bg-sunken);
  --pine:        var(--green);
  --pine-soft:   var(--green-soft);
  --pine-tint:   var(--tint-green);
  --on-pine:     #FFFFFF;
  --citrus:      var(--amber);
  --citrus-600:  #8E5A05;
  --citrus-soft: var(--amber-soft);
  --coral:       var(--red);
  --coral-soft:  var(--red-soft);
  --sky:         var(--accent);
  --sky-soft:    var(--accent-soft);
  --plum:        var(--violet);
  --plum-soft:   var(--violet-soft);
}

[data-theme="dark"] {
  --bg:         #0F1722;
  --bg-sub:     #172231;
  --bg-sunken:  #223044;
  --card:       #182535;
  --card-sub:   #1E2C3C;
  --scrim:      rgba(0,0,0,.7);

  --line:       #2B3B4F;
  --line-2:     #3E536B;
  --line-3:     #698099;

  --ink:        #F4F7FB;
  --ink-2:      #C4D0DD;
  --ink-3:      #91A3B5;
  --ink-4:      #687E94;

  --accent:      #6BA7FF;
  --accent-600:  #91C0FF;
  --accent-soft: #193A68;
  --accent-tint: #142B4B;

  --ink-btn:    #F4F7FB;
  --ink-btn-h:  #DCE7F3;
  --on-ink:     #0F1722;

  --green:      #70C79D;
  --green-soft: #183A2C;
  --amber:      #E8BA61;
  --amber-soft: #3A2D14;
  --star-empty: #7C6636;
  --red:        #F18A91;
  --red-soft:   #3F2027;
  --violet:     #BFA8F2;
  --violet-soft:#31294A;

  --tint-blue:  #1A3458;
  --tint-green: #19372B;
  --tint-amber: #3A2D14;
  --tint-violet:#31294A;
  --tint-rose:  #3F2027;
  --tint-slate: #263445;

  /* 暗色下页面本身就是深底，表头改用「比卡片亮一档」的深蓝灰，
     保持深底白字的观感，同时与正文区仍有分界 */
  --table-head-bg:  #2C4058;
  --table-head-ink: #F4F7FB;
  --table-stripe:   #1E2C3C;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.45);
  --shadow-3: 0 4px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.55);
  --shadow-4: 0 8px 16px rgba(0,0,0,.5), 0 32px 72px rgba(0,0,0,.65);
  --ring:     0 0 0 3px rgba(107,167,255,.3);

  /* v2 兼容别名层（暗色下需要单独覆盖的两项） */
  --on-pine:    #0F1722;
  --citrus-600: #E8BA61;
}

/* ---------- 3. Base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .28s var(--ease), color .28s var(--ease);
}

/* 细微的噪点纹理，避免大面积平色背景显得过于生硬。
   用负 z-index 沉到内容之下 —— 不要给 body 的子元素加 position，
   那会把 .header 的 sticky 顶掉。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity: .05;
}
[data-theme="dark"] body::before { opacity: .07; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-sub); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid var(--bg-sub); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* ---------- 4. Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 820px; }
.shell--wide { max-width: 1440px; }

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: var(--sec-y-tight); }
.section--loose { padding-block: var(--sec-y-loose); }
.section--band { background: var(--bg-sub); border-block: 1px solid var(--line); }
.section--card { background: var(--card); border-block: 1px solid var(--line); }
.section--sunken { background: var(--bg-sunken); }

.stack { display: flex; flex-direction: column; }
.stack-8  { gap: 8px; }  .stack-12 { gap: 12px; } .stack-16 { gap: 16px; }
.stack-20 { gap: 20px; } .stack-24 { gap: 24px; } .stack-32 { gap: 32px; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }

.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); }
.g-auto-sm { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }

.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- 5. Typography ---------- */
/* 大标题走衬线（中文回退宋体），小标题仍用无衬线——宋体在 20px 以下会糊 */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700; line-height: 1.2; letter-spacing: -.012em;
}
h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; letter-spacing: -.022em; }
h1 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.14; letter-spacing: -.02em; }
h2 { font-size: clamp(26px, 3vw, 40px); }
h3 { font-size: clamp(17px, 1.3vw, 20px); }
h4 { font-size: 15.5px; }
h5 { font-size: 13.5px; letter-spacing: 0; }

/* 大号数字也用衬线，Cambria 的现代数字比无衬线更有"印刷品"味 */
.stat b, .price, .plan__price b, .pdp__price b, .calc__big b, .plan__name,
.hero__meta b, .tl__ver b, .err__code, .wordmark, .quote__mark,
.sum-row--total, .person__photo span, .press__logo, .logos span {
  font-family: var(--font-serif);
  font-weight: 700; letter-spacing: -.018em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--amber, .eyebrow--citrus { color: var(--amber); }
.eyebrow--green { color: var(--green); }
.eyebrow--muted { color: var(--ink-3); }
.eyebrow--bare::before { display: none; }
.eyebrow:not(.eyebrow--bare)::before { content: ""; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

.lead { font-size: clamp(16px, 1.15vw, 18px); color: var(--ink-2); line-height: 1.68; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }

.sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.sec-head p { color: var(--ink-2); font-size: 16px; }

.page-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-block: 52px 34px; max-width: 800px; }
.page-head--center { align-items: center; text-align: center; margin-inline: auto; }
.page-head h1 { font-size: clamp(30px, 3.4vw, 46px); }

.prose { font-size: 16px; color: var(--ink-2); line-height: 1.78; }
.prose > * + * { margin-top: 20px; }
.prose h2 { color: var(--ink); font-size: 24px; margin-top: 44px; }
.prose h3 { color: var(--ink); font-size: 19px; margin-top: 32px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-top: 9px; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px;
  font-family: var(--font-display); font-size: 18.5px; font-weight: 600; font-style: italic; color: var(--ink);
}
.prose code {
  font-family: var(--font-mono); font-size: .87em; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 2px 6px; color: var(--accent);
}
.prose pre {
  background: var(--ink); color: #E8ECF2; border-radius: var(--r);
  padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.68;
}
[data-theme="dark"] .prose pre { background: #05070B; border: 1px solid var(--line); }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 36px; }

/* ---------- 5.1 正文富文本：表格 / 任务列表 / 术语表 / 脚注 ----------
   这些结构来自后台导入的 .md（Goldmark 渲染，见 internal/web/blog_markdown.go）：
   清洗器给每个表格套上 .post-table-wrap（见 internal/web/view_helpers_part03.go），
   列多时表格在容器内横向滚动，而不是把整页撑破或把每列压成一条竖排文字。
   博客、帮助中心、商品详情、静态页共用这一套，各页表格才不会长得不一样。 */

/* 表格外壳：细边框 + 圆角 + 横向滚动，窄屏也能完整读完每一列 */
.post-table-wrap {
  max-width: 100%;
  margin: 4px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93em;
  line-height: 1.68;
}

.prose caption {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: left;
}

.prose th,
.prose td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

/* 表头：深色底 + 白字，一眼分出「标题行 / 数据行」。
   下边框与表头底色同色，深底到浅底之间不再多出一条突兀的灰线。
   不锁 white-space: 中文表头常有一整句话，锁了必须横向滚动才看得全 */
.prose thead th {
  background: var(--table-head-bg);
  border-bottom: 0;
  color: var(--table-head-ink);
  font-size: .92em;
  font-weight: 700;
}

/* 深底上的行内代码与链接单独提亮：--accent 在深蓝底上对比度不够 */
.prose thead th code {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: var(--table-head-ink);
}
.prose thead th a { color: var(--table-head-ink); }

/* 行首列放的多是「项 / 参数 / 名称」，略微加重后对照表更好读 */
.prose tbody td:first-child { color: var(--ink); font-weight: 600; }
.prose tbody th { background: var(--card-sub); color: var(--ink); font-weight: 600; }

/* 斑马纹 + 悬停高亮：列多的表不容易串行 */
.prose tbody tr:nth-child(even) th,
.prose tbody tr:nth-child(even) td { background: var(--table-stripe); }
.prose tbody tr:hover th,
.prose tbody tr:hover td { background: var(--accent-tint); }
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }

/* GFM 的对齐写法（| :-- | :-: | --: |）渲染成 align 属性，这里照着排 */
.prose th[align="center"], .prose td[align="center"] { text-align: center; }
.prose th[align="right"], .prose td[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.prose th[align="justify"], .prose td[align="justify"] { text-align: justify; }

/* 单元格里的行内代码（路径、字段名）比正文小一号，长串可断行 */
.prose th code, .prose td code { font-size: .85em; }
.prose td a { text-underline-offset: 2px; }

/* 任务列表：复选框本身就是标记，去掉项目符号并把文字对齐到框后 */
.prose li > input[type="checkbox"] {
  margin: 0 7px 0 0;
  vertical-align: -1px;
  accent-color: var(--accent);
}
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.25em; }

/* 术语表（Markdown 定义列表）：术语加重，定义用左侧细线区隔 */
.prose dl { margin: 20px 0; }
.prose dt { margin-top: 14px; color: var(--ink); font-weight: 700; }
.prose dd { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid var(--line-2); }

/* 脚注：文末说明收小字号，回到正文的箭头不换行 */
.prose .footnotes {
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .88em;
}
.prose .footnotes hr { display: none; }
.prose .footnotes ol { padding-left: 20px; }
.prose sup { font-size: .72em; line-height: 0; }

@media (max-width: 640px) {
  /* 窄屏上表格按内容自然宽度横向滚动，不把每列压成一条竖排文字 */
  .prose table { min-width: 520px; }
  .prose th, .prose td { padding: 9px 12px; }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px); }

/* 主按钮 = 近黑，白底上对比度最高 */
.btn--primary { background: var(--ink-btn); color: var(--on-ink); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--ink-btn-h); box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* 强调按钮 = 电光蓝，用于关键转化 */
.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn--accent:hover { background: var(--accent-600); box-shadow: var(--shadow-2); transform: translateY(-1px); }

.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { opacity: .88; transform: translateY(-1px); }

.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--card-sub); }

.btn--quiet { background: transparent; color: var(--ink-2); padding-inline: 12px; }
.btn--quiet:hover { background: var(--bg-sunken); color: var(--ink); }

.btn--link { background: none; padding: 0; color: var(--accent); font-weight: 600; }
.btn--link:hover { gap: 12px; }

.btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: var(--r-xs); }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { padding: 15px 28px; font-size: 16px; border-radius: var(--r); }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--pill); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  transition: gap .18s var(--ease);
}
.link-arrow:hover { gap: 11px; }
.link-arrow svg { width: 14px; height: 14px; }

/* ---------- 7. Badges / pills / tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px; border-radius: var(--pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-1);
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); flex: none; }
.badge--pine, .badge--green { background: var(--green-soft); border-color: transparent; color: var(--green); }
.badge--citrus, .badge--amber { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.badge--coral, .badge--red { background: var(--red-soft); border-color: transparent; color: var(--red); }
.badge--sky, .badge--blue, .badge--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge--solid { background: var(--ink); border-color: transparent; color: var(--bg); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 600; letter-spacing: .005em;
  background: var(--bg-sunken); color: var(--ink-2); border: 1px solid transparent;
}
.tag--pine, .tag--green { background: var(--green-soft); color: var(--green); }
.tag--citrus, .tag--amber { background: var(--amber-soft); color: var(--amber); }
.tag--coral, .tag--red { background: var(--red-soft); color: var(--red); }
.tag--sky, .tag--blue { background: var(--accent-soft); color: var(--accent); }
.tag--plum, .tag--violet { background: var(--violet-soft); color: var(--violet); }
.tag--solid { background: var(--ink); color: var(--bg); }
/* 与 badge / fcard__ico 对齐的补充分支 */
.tag--accent { background: var(--accent-soft); color: var(--accent); }
.tag--slate { background: var(--bg-sunken); color: var(--ink-2); }

.kbd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 6px; border-radius: 5px; background: var(--card);
  border: 1px solid var(--line-2); border-bottom-width: 2px; color: var(--ink-2);
}

/* ---------- 8. Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field__hint { font-size: 12.5px; color: var(--ink-3); }
.field__error { font-size: 12.5px; color: var(--red); display: none; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .input { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.input, .select, .textarea {
  width: 100%; padding: 10px 13px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.5;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.textarea { min-height: 124px; resize: vertical; }
.select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2378818F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group .input { flex: 1; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.check input { appearance: none; width: 17px; height: 17px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--line-3); border-radius: 5px; background: var(--card); cursor: pointer;
  transition: all .15s var(--ease); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }
.check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3.5px var(--card); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check--card { padding: 14px 15px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); transition: all .16s var(--ease); }
.check--card:hover { border-color: var(--line-3); }
.check--card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--ring); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; }
.switch input { appearance: none; width: 40px; height: 23px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s var(--ease); flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .22s var(--ease-out); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(17px); }

.search { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; }
.search svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 39px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.qty button { width: 34px; height: 36px; display: grid; place-items: center; color: var(--ink-2); font-size: 16px; transition: background .15s var(--ease); }
.qty button:hover { background: var(--bg-sunken); color: var(--ink); }
.qty input { width: 42px; height: 36px; text-align: center; border: 0; background: none; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.qty input:focus { outline: none; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: var(--pill);
  background: var(--card); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* 范围滑块（ROI 计算器用） */
.range { width: 100%; appearance: none; height: 5px; border-radius: 99px; background: var(--bg-sunken); cursor: pointer; }
.range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: var(--shadow-2); cursor: grab; }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: var(--shadow-2); cursor: grab; }

/* ---------- 9. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-2); border-bottom-color: var(--line-2); }

.nav { display: flex; align-items: center; gap: 18px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }

.nav__menu { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: var(--r-xs);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--bg-sunken); }
.nav__link[aria-current="page"], .nav__item.is-active > .nav__link { color: var(--accent); font-weight: 600; }
.nav__link svg { width: 12px; height: 12px; opacity: .55; transition: transform .2s var(--ease); }
.nav__item:hover > .nav__link svg { transform: rotate(180deg); }
.nav__link--primary { gap: 8px; padding-inline: 14px; font-weight: 600; }
.nav__link--primary svg { width: 16px; height: 16px; opacity: .8; transition: none; }
.nav__item:hover > .nav__link--primary svg { transform: none; }

.drop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px);
  min-width: 264px; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease-out), visibility .18s;
  z-index: 70;
}
.nav__item:hover .drop, .nav__item:focus-within .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* 入口与面板之间那 8px 空档原本是 hover 死区：鼠标离开入口往下走会掉进这段空当，
   .nav__item:hover 立刻断掉 → 面板的 pointer-events 变回 none 并开始淡出，
   还没点到就先收起，慢一点的下移（1px/25ms）甚至会点空到面板下面的页面内容上。
   这块透明桥接区把空档填平（顶部再压住入口 2px 的 padding，避免取整留缝），
   入口 ↔ 面板之间不再有断点；pointer-events 跟着面板走（收起时同样为 none），
   所以面板没展开时不会挡住它下面的任何东西。 */
.drop::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px;
}
.drop--wide { min-width: 540px; padding: 12px; }
.drop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.drop__link { display: flex; gap: 11px; padding: 10px 11px; border-radius: var(--r-sm); transition: background .15s var(--ease); }
.drop__link:hover { background: var(--bg-sub); }
.drop__ico { width: 32px; height: 32px; flex: none; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.drop__ico svg { width: 16px; height: 16px; }
.drop__ico--citrus, .drop__ico--amber { background: var(--amber-soft); color: var(--amber); }
.drop__ico--sky, .drop__ico--blue { background: var(--accent-soft); color: var(--accent); }
.drop__ico--plum, .drop__ico--violet { background: var(--violet-soft); color: var(--violet); }
.drop__ico--green { background: var(--green-soft); color: var(--green); }
.drop__t { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.drop__d { font-size: 12px; color: var(--ink-3); line-height: 1.45; display: block; }

/* 页头「产品」下拉（项目补充）：入口在页头最左侧，面板跟着左对齐，
   否则默认的居中定位会把宽面板顶出视口左边缘。 */
.drop--start { left: 0; transform: translate(0, 6px); }
.nav__item:hover .drop--start, .nav__item:focus-within .drop--start { transform: translate(0, 0); }
/* 产品数量随上架情况变化：面板限高并在内部滚动，
   产品一多也不会长到超出视口；最后一行是回产品列表页的出口，与上面的条目用细线分开。 */
.drop--products { max-height: min(72vh, 560px); overflow-y: auto; }
.drop__foot { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; text-align: right; }
.drop__foot a { font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* 页头账户入口（项目补充）：未登录给登录/注册按钮，已登录给头像 + 昵称与账户下拉。
   下拉默认在触发器正下方居中，账户入口靠右，因此用 drop--end 贴右侧避免超出视口。 */
.nav__account { display: flex; align-items: center; gap: 6px; flex: none; }
.nav__account-name { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop--end { left: auto; right: 0; transform: translate(0, 6px); }
.nav__item:hover .drop--end, .nav__item:focus-within .drop--end { transform: translate(0, 0); }
.drop__logout { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }

/* 窄屏页头图标位已经很挤，账户入口统一收进移动端菜单的「账户」分组。 */
@media (max-width: 900px) {
  .nav__account { display: none; }
}

.nav__side { display: flex; align-items: center; gap: 6px; flex: none; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-2); position: relative;
  border: 1px solid transparent;
  transition: all .15s var(--ease);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn__count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg);
}
.lang { display: flex; padding: 3px; gap: 2px; background: var(--bg-sunken); border-radius: var(--pill); }
.lang button { padding: 4px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 700; color: var(--ink-3); transition: all .15s var(--ease); }
.lang button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }

.nav__toggle { display: none; }

/* mobile drawer */
.mdrawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.mdrawer__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .28s var(--ease); }
.mdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(350px, 88vw);
  background: var(--bg); border-left: 1px solid var(--line);
  padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform .32s var(--ease-out);
}
.mdrawer.is-open { visibility: visible; }
.mdrawer.is-open .mdrawer__scrim { opacity: 1; }
.mdrawer.is-open .mdrawer__panel { transform: none; }
.mdrawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mdrawer__group { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.mdrawer__label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 10px 11px 5px; }
.mdrawer a { padding: 11px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.mdrawer a:hover { background: var(--bg-sub); color: var(--ink); }
.mdrawer a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* 移动端菜单的账户分组（项目补充）：一行登录态 + 与页头下拉同源的账户入口。 */
.mdrawer__account { display: flex; align-items: center; gap: 10px; padding: 10px 11px; }
.mdrawer__account strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mdrawer__account small { display: block; font-size: 12px; color: var(--ink-3); }
.mdrawer__logout { margin-top: 8px; padding-inline: 11px; }

/* ---------- 10. Hero ---------- */
/* 顶部用一层极浅的暖色渐变收住视线，再叠一张细网格；不再用大色斑，
   那种径向光晕在浅色背景上会显得过重。 */
.hero {
  padding-block: 48px 60px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-sub) 0%, var(--bg) 72%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, transparent 68%);
  opacity: .26; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero__inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 600px; }

/* 高亮：暖色下划线，像马克笔划过一行字 */
.hero h1 em {
  font-style: normal; color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 9px;
  text-underline-offset: -3px;
  text-decoration-skip-ink: none;
}
.hero__sub { font-size: 16.5px; color: var(--ink-2); line-height: 1.7; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__meta { display: flex; gap: 30px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 4px; width: 100%; }
.hero__meta div { display: flex; flex-direction: column; gap: 1px; }
.hero__meta b { font-size: 26px; }
.hero__meta span { font-size: 12.5px; color: var(--ink-3); }

/* 上下留出浮层卡片的高度，避免压住窗口内容（地址栏） */
.hero__visual { position: relative; padding: 56px 0; }

/* 应用窗口 —— 关键：内部元素必须 min-width:0，否则长 URL 会撑破容器 */
.app-window {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-4); overflow: hidden; min-width: 0;
}
.app-window__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--card-sub); }
.app-window__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.app-window__url {
  flex: 1; min-width: 0; margin-left: 8px; padding: 4px 11px; border-radius: var(--pill);
  background: var(--bg-sunken);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-window__body { padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.chat-line { display: flex; gap: 10px; align-items: flex-start; }
.chat-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-family: var(--font-display); }
.chat-av--me { background: var(--ink); color: var(--bg); }
.chat-av--ai { background: var(--accent); color: #fff; }
.chat-bub { background: var(--bg-sub); border: 1px solid var(--line); border-radius: 3px 12px 12px 12px; padding: 10px 13px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.chat-bub--me { background: var(--accent-soft); border-color: transparent; border-radius: 12px 3px 12px 12px; color: var(--ink); }
.task-list { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
.task { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.task__tick { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--green); color: #fff; }
.task__tick svg { width: 9px; height: 9px; }
.task--run .task__tick { background: var(--accent); }
.task__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; min-width: 40px; }
.task__bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* 浮层卡片：贴到窗口四角外侧，留足安全边距 */
.float-card {
  position: absolute; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 15px; box-shadow: var(--shadow-3);
  display: flex; align-items: center; gap: 11px; z-index: 3;
}
.float-card--tl { top: 0; left: -18px; }
.float-card--br { bottom: 0; right: -18px; }
.float-card__ico { width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.float-card__ico svg { width: 17px; height: 17px; }
.float-card b { display: block; font-size: 14px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.02em; }
.float-card span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- 11. Logo strip ---------- */
.logos { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.logos span { font-size: 16px; font-weight: 800; letter-spacing: .01em; color: var(--ink-4); }

/* ---------- 12. Cards ---------- */
.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  overflow: hidden; position: relative; box-shadow: var(--shadow-2);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-3); }

/* 商品封面 —— 明确的色块 + 网格 + 光斑，读起来是"封面"而非"图片加载失败" */
.card__media {
  aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center;
  background: linear-gradient(148deg, var(--tint-blue) 0%, var(--tint-slate) 100%);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.card__media::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(90% 90% at 50% 45%, #000, transparent 80%);
  opacity: .6;
}
.card__media::after {
  content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  top: -46px; right: -52px;
  background: radial-gradient(circle, rgba(255,255,255,.8), transparent 68%);
}
.card__media svg { width: 74px; height: 74px; position: relative; z-index: 1; color: var(--accent); filter: drop-shadow(0 6px 14px rgba(21,34,51,.16)); }
/* 配了封页图（首页热门文章卡）时那一格换成真图：撑满封面区并按裁切填充，
   与图标同处一层（z-index:1）盖住 ::before 的网格纹理，否则图上会叠一层格线。 */
.card__media__cover { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.card__media--tall { aspect-ratio: 4 / 3; }
.card__media--square { aspect-ratio: 1 / 1; }
/* 商品封面配色变体 */
.card__media--blue { background: linear-gradient(148deg, var(--tint-blue) 0%, var(--tint-slate) 100%); }
.card__media--green { background: linear-gradient(148deg, var(--tint-green) 0%, var(--tint-slate) 100%); }
.card__media--green svg { color: var(--green); }
.card__media--amber { background: linear-gradient(148deg, var(--tint-amber) 0%, var(--tint-slate) 100%); }
.card__media--amber svg { color: var(--amber); }
.card__media--violet { background: linear-gradient(148deg, var(--tint-violet) 0%, var(--tint-slate) 100%); }
.card__media--violet svg { color: var(--violet); }
.card__media--rose { background: linear-gradient(148deg, var(--tint-rose) 0%, var(--tint-slate) 100%); }
.card__media--rose svg { color: var(--red); }
.card__media--slate { background: linear-gradient(148deg, var(--tint-slate) 0%, var(--bg-sunken) 100%); }
.card__media--slate svg { color: var(--ink-2); }

.card__badge { position: absolute; top: 11px; left: 11px; z-index: 2; }
.card__fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-3);
  box-shadow: var(--shadow-1);
  transition: all .16s var(--ease);
}
.card__fav:hover { color: var(--red); border-color: var(--red); }
.card__fav[aria-pressed="true"] { color: var(--red); background: var(--red-soft); border-color: transparent; }
/* 收藏请求进行中：按钮禁用并降透明度，避免重复点击和「点了没反应」的观感。 */
.card__fav[aria-busy="true"] { cursor: wait; opacity: .55; }
.card__fav svg { width: 15px; height: 15px; }
.card__body { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-size: 16px; font-weight: 700; font-family: var(--font-display); letter-spacing: -.015em; }
.card__title a:hover { color: var(--accent); }
.card__desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.58; flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); }
.card--flat { border: 0; background: transparent; box-shadow: none; }
.card--flat .card__media { border-radius: var(--r-lg); border: 1px solid var(--line); }
.card--featured { border-color: var(--accent); border-width: 1.5px; box-shadow: var(--shadow-2); }

.price { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.price small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.price del { font-size: 13.5px; font-weight: 500; color: var(--ink-4); margin-right: 6px; }
.price--text { font-size: 15.5px; font-weight: 700; }

/* 产品截图占位组件 —— 让"图"看起来像真实界面 */
.shot { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); overflow: hidden; box-shadow: var(--shadow-1); }
.shot__bar { height: 26px; background: var(--card-sub); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 5px; padding-inline: 10px; }
.shot__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.shot__body { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.shot__line { height: 7px; border-radius: 99px; background: var(--bg-sunken); }
.shot__line--60 { width: 60%; } .shot__line--40 { width: 40%; } .shot__line--80 { width: 80%; }
.shot__line--accent { background: var(--accent-soft); }
.shot__row { display: flex; gap: 8px; align-items: center; }
.shot__box { height: 40px; border-radius: var(--r-xs); background: var(--bg-sub); border: 1px solid var(--line); flex: 1; }
.shot__box--accent { background: var(--accent-soft); border-color: transparent; }

/* feature card */
.fcard { padding: 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow-2); transition: all .22s var(--ease); }
.fcard:hover { border-color: var(--line-3); box-shadow: var(--shadow-3); transform: translateY(-2px); }
.fcard__ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fcard__ico svg { width: 20px; height: 20px; }
.fcard__ico--citrus, .fcard__ico--amber { background: var(--amber-soft); color: var(--amber); }
.fcard__ico--sky, .fcard__ico--blue, .fcard__ico--accent { background: var(--accent-soft); color: var(--accent); }
.fcard__ico--plum, .fcard__ico--violet { background: var(--violet-soft); color: var(--violet); }
.fcard__ico--coral, .fcard__ico--red { background: var(--red-soft); color: var(--red); }
.fcard__ico--green { background: var(--green-soft); color: var(--green); }
.fcard h3 { font-size: 16.5px; }
.fcard p { font-size: 14px; color: var(--ink-2); line-height: 1.62; }
.fcard__num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink-4); letter-spacing: .1em; }
.category-card__meta { display: flex; min-height: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.category-card__meta .fcard__num { letter-spacing: 0; }
.category-card__count { flex: 0 0 auto; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* step */
.step { position: relative; display: flex; flex-direction: column; gap: 10px; }
.step__n {
  width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.step h3 { font-size: 17px; }
.step p { font-size: 14px; color: var(--ink-2); }

/* stat */
.stat { display: flex; flex-direction: column; gap: 3px; padding: 18px 0; }
.stat b { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.stat span { font-size: 13.5px; color: var(--ink-2); }
.stat--pine b, .stat--accent b { color: var(--accent); }
.stat--green b { color: var(--green); }

/* testimonial */
.quote { padding: 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-1); }
.quote__mark { font-size: 38px; line-height: .55; color: var(--accent); opacity: .3; height: 20px; }
.quote p { font-size: 15px; color: var(--ink); line-height: 1.68; flex: 1; }
.quote__who { display: flex; align-items: center; gap: 11px; padding-top: 13px; border-top: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; font-family: var(--font-display); }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--lg { width: 52px; height: 52px; font-size: 16px; }
.avatar--ink { background: var(--ink); color: var(--bg); }
.avatar--green { background: var(--green-soft); color: var(--green); }
.avatar--amber { background: var(--amber-soft); color: var(--amber); }
.quote__who b { display: block; font-size: 14px; font-weight: 700; }
.quote__who span { font-size: 12px; color: var(--ink-3); }

.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 13px; height: 13px; }

/* 评分行的星级计量条：底排是浅金色空心星（撑开尺寸），上排实心星用行内 width 裁切，
   4.6 分就是「4 颗整星 + 第 5 颗填到六成」，与旁边的分数对得上。
   两排共用同一套星形与 2px 间距，裁切边界才会正好落在某颗星的内部。 */
.stars--meter { position: relative; }
.stars.stars--meter svg { width: 15px; height: 15px; }
.stars--meter .stars__layer { display: inline-flex; gap: 2px; }
.stars--meter .stars__layer svg { flex: none; }
.stars--meter .stars__track { color: var(--star-empty); }
.stars--meter .stars__layer--fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; color: var(--star); }

/* 评价表单的星级选择：原生 radio + 兄弟选择器，不依赖 JS。
   容器 row-reverse 把 DOM 顺序 5→1 翻成视觉顺序 1→5，
   于是 input:checked ~ label 命中的正好是「该星以及更低星」，选 4 星亮 1-4 星。
   星形 18px + 3px 内边距 = 24px 点击区：视觉上和页面里 15px 的评分星同一尺度，
   又不小于可点击下限；空星沿用页面统一的浅金色，选中/悬停才亮成实心。 */
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.star-pick__star { color: var(--star-empty); cursor: pointer; line-height: 0; padding: 3px; border-radius: 5px; transition: color .15s var(--ease); }
.star-pick__star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.star-pick__input:focus-visible + .star-pick__star { outline: 2px solid var(--accent); outline-offset: 1px; }
.star-pick__input:checked ~ .star-pick__star,
.star-pick__star:hover,
.star-pick__star:hover ~ .star-pick__star { color: var(--star); }
.star-pick__input:checked ~ .star-pick__star svg,
.star-pick__star:hover svg,
.star-pick__star:hover ~ .star-pick__star svg { fill: currentColor; }

/* pricing */
.plan { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: all .22s var(--ease); }
.plan:hover { box-shadow: var(--shadow-3); }
.plan--featured { border-color: var(--ink); border-width: 1.5px; box-shadow: var(--shadow-3); position: relative; }
.plan__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.plan__desc { font-size: 13.5px; color: var(--ink-2); min-height: 40px; }
.plan__price { display: flex; align-items: flex-end; gap: 5px; }
.plan__price b { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan__price span { font-size: 13px; color: var(--ink-3); padding-bottom: 4px; }
.plan__list { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.plan__list svg { width: 15px; height: 15px; flex: none; color: var(--green); margin-top: 3px; }
.plan__list li.is-off { color: var(--ink-4); }
.plan__list li.is-off svg { color: var(--ink-4); }

.billing-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 5px; background: var(--bg-sunken); border-radius: var(--pill); }
.billing-toggle button { padding: 7px 16px; border-radius: var(--pill); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: all .16s var(--ease); }
.billing-toggle button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }

/* integration tile */
.tile { display: flex; flex-direction: column; gap: 9px; padding: 17px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: all .2s var(--ease); }
.tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tile__ico { width: 36px; height: 36px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--bg-sunken); color: var(--accent); }
.tile__ico svg { width: 18px; height: 18px; }
.tile b { font-size: 14px; font-weight: 700; }
.tile > span:not(.tile__ico) { font-size: 12px; color: var(--ink-3); }

/* team */
.person { display: flex; flex-direction: column; gap: 10px; }
.person__photo { aspect-ratio: 1/1; border-radius: var(--r-lg); background: linear-gradient(155deg, var(--tint-blue), var(--bg-sunken)); border: 1px solid var(--line); display: grid; place-items: center; }
.person__photo span { font-size: 32px; font-weight: 800; color: var(--accent); opacity: .6; }
.person b { font-size: 15px; font-weight: 700; }
.person > span { font-size: 12.5px; color: var(--ink-3); }

/* ---------- 13. Blocks ---------- */
.band { border-radius: var(--r-xl); padding: 44px; background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(46,91,255,.5), transparent 70%); }
.band > * { position: relative; z-index: 1; }
.band h2 { color: var(--bg); }
.band p { color: rgba(255,255,255,.72); }
.band .btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: #fff; }
.band .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
[data-theme="dark"] .band { background: var(--card); border: 1px solid var(--line); }
[data-theme="dark"] .band h2 { color: var(--ink); }
[data-theme="dark"] .band p { color: var(--ink-2); }
[data-theme="dark"] .band .btn--ghost { background: var(--bg-sunken); border-color: var(--line-2); color: var(--ink); }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: all .16s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabpanel { display: none; padding-top: 26px; }
.tabpanel.is-active { display: block; animation: fadeUp .3s var(--ease-out); }

.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow-1); }
.acc + .acc { margin-top: 9px; }
.acc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); }
.acc__head:hover { background: var(--card-sub); }
.acc__ico { width: 20px; height: 20px; flex: none; position: relative; }
.acc__ico::before, .acc__ico::after { content: ""; position: absolute; background: var(--ink-3); border-radius: 2px; transition: transform .22s var(--ease), background .22s var(--ease); }
.acc__ico::before { top: 9px; left: 4px; width: 12px; height: 2px; }
.acc__ico::after { left: 9px; top: 4px; width: 2px; height: 12px; }
.acc.is-open .acc__ico::after { transform: scaleY(0); }
.acc.is-open .acc__ico::before { background: var(--accent); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); }
.acc__inner { padding: 0 18px 18px; font-size: 14px; color: var(--ink-2); line-height: 1.72; }

.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-1); }
.table-wrap--scroll { overflow-x: auto; }
table.data { font-size: 13.5px; min-width: 620px; }
table.data th, table.data td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { background: var(--bg-sub); font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
table.data td { color: var(--ink-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--card-sub); }
table.data td strong, table.data td b { color: var(--ink); }
table.data .is-check { color: var(--green); }
table.data .is-off { color: var(--ink-4); }
.cell-media { display: flex; align-items: center; gap: 11px; }
.cell-media__ph { width: 42px; height: 42px; border-radius: var(--r-xs); background: linear-gradient(150deg, var(--tint-blue), var(--bg-sunken)); border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--accent); }
.cell-media__ph svg { width: 20px; height: 20px; }

/* ---------- 14. Toolbar / filters ---------- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.toolbar__spacer { flex: 1; }
.results-count { font-size: 13px; color: var(--ink-3); }

/* ---------- 15. Breadcrumbs / pagination ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.pager { display: flex; gap: 5px; align-items: center; justify-content: center; padding-top: 34px; }
.pager a, .pager span {
  min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .15s var(--ease);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pager .is-disabled { opacity: .4; pointer-events: none; }
.pager[hidden], .pager [hidden] { display: none; }
.shop-empty { grid-column: 1 / -1; padding: 30px 12px; text-align: center; }

/* ---------- 16. Cart drawer / modal / toast ---------- */
.drawer { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.drawer__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .28s var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(410px, 92vw);
  background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .34s var(--ease-out);
}
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.drawer__foot { padding: 16px 18px; border-top: 1px solid var(--line); background: var(--card-sub); display: flex; flex-direction: column; gap: 10px; }
.line-item { display: flex; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.line-item:last-child { border-bottom: 0; padding-bottom: 0; }
.line-item__ph { width: 58px; height: 58px; border-radius: var(--r-sm); flex: none; background: linear-gradient(150deg, var(--tint-blue), var(--bg-sunken)); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.line-item__ph svg { width: 22px; height: 22px; }
.line-item__ph img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.line-item__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.line-item__t { font-size: 14px; font-weight: 700; }
.line-item__m { font-size: 12px; color: var(--ink-3); }
.line-item__row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 2px; }
.line-item__price { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.sum-row--total { font-size: 17px; font-weight: 800; color: var(--ink); padding-top: 11px; border-top: 1px solid var(--line); letter-spacing: -.02em; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 46px 18px; }
.empty__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-3); }
.empty__ico svg { width: 24px; height: 24px; }
.empty h3 { font-size: 16px; }
.empty p { font-size: 13.5px; color: var(--ink-3); max-width: 300px; }

.modal { position: fixed; inset: 0; z-index: 100; visibility: hidden; display: grid; place-items: center; padding: 22px; }
.modal__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .26s var(--ease); }
.modal__box {
  position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-4); padding: 26px;
  transform: scale(.97) translateY(8px); opacity: 0;
  transition: all .28s var(--ease-out);
}
.modal.is-open { visibility: visible; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__box { transform: none; opacity: 1; }

.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 120; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 17px; border-radius: var(--r);
  background: var(--ink); color: var(--bg);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-4);
  animation: toastIn .3s var(--ease-out);
}
[data-theme="dark"] .toast { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.toast__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.toast--warn .toast__dot { background: var(--amber); }
.toast--err .toast__dot { background: var(--red); }
.toast.is-out { animation: toastOut .24s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- 17. Footer ---------- */
.footer { background: var(--bg-sub); border-top: 1px solid var(--line); margin-top: 32px; }
.footer__top { display: grid; grid-template-columns: minmax(230px,.78fr) minmax(0,2.22fr); gap: 48px; padding-block: 56px 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 330px; }
.footer__brand p { font-size: 13.5px; color: var(--ink-2); }
.footer__stat { font-size: 12px !important; color: var(--ink-3) !important; }
/* 页脚链接列：软件商店 / 博客与资源 / 关于 FLYCATSOFT / 法律与条款 / 用户服务，共 5 栏。
   列宽用 minmax(0,1fr) 收敛，长栏目名（如「关于 FLYCATSOFT」）也不会把整行撑破。 */
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
.footer__col { display: flex; flex-direction: column; gap: 9px; }
.footer__col h4 { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
.footer__col a { font-size: 13px; color: var(--ink-2); transition: color .15s var(--ease); }
.footer__col a:hover { color: var(--accent); }
.footer__news { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.footer__news p { font-size: 12.5px; color: var(--ink-2); }
.wordmark { font-size: clamp(60px, 14vw, 176px); font-weight: 800; line-height: .8; letter-spacing: -.05em; color: var(--ink); opacity: .045; text-align: center; user-select: none; margin-top: 6px; pointer-events: none; }
/* 落款条：品牌落款 + 快捷入口 + 备案信息合成同一条，三者共用一行、随宽度换行。
   它已并入页脚第一个 .shell 容器（页脚不再有独立的 .footer__bottom 层），
   分隔线与上下留白因此都落在这一条规则上。 */
.footer__legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 4px; padding-block: 22px 26px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.footer__seal { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.footer__seal-mark { width: 22px; height: 22px; }
.footer__copyright { color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 备案信息：ICP 备案号 / 公安联网备案号 / 经营许可证 / 主办单位。
   与快捷入口同一套胶囊样式，三个前台外壳共用组件（见 footer_filings.templ）。 */
.site-filings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.site-filings__item { display: inline-flex; align-items: center; padding: 7px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--pill); font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
a.site-filings__item { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; transition: background .16s var(--ease), color .16s var(--ease); }
a.site-filings__item:hover { background: var(--accent-tint); color: var(--accent); }
/* 合规入口分组：只在落款栏补 /refund 这类没进上方链接列的页面，
   其余（用户协议 / 隐私政策）留在「法律与条款」列，避免同一页脚出现两份重复入口。 */
.site-filings__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.footer__social { display: flex; gap: 7px; }
.footer__social a { width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink-2); transition: all .16s var(--ease); }
.footer__social a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.footer__social svg { width: 15px; height: 15px; }

/* ---------- 18. Page-specific ---------- */
/* Home: the two primary destinations */
.home-hub { overflow: hidden; }
.hub-section { padding-block: 58px 64px; }
.hub-section--shop { background: var(--bg); }
.hub-section--blog { background: var(--bg-sub); border-top: 1px solid var(--line); }
.hub-inner { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 58px; }
.hub-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.hub-copy h1 { max-width: 660px; font-family: var(--font-display); font-size: 48px; line-height: 1.18; letter-spacing: 0; }
.hub-copy h2 { max-width: 640px; font-family: var(--font-display); font-size: 34px; line-height: 1.24; letter-spacing: 0; }
.hub-copy p { max-width: 610px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
/* 首页信任行（正版授权 · 自动开通 · 发票 · 退款）：用字号与颜色收成一行附属说明，
   不再依赖内联 style，保证首页每个类名都能在样式表里找到规则。 */
.hub-trust { max-width: 610px; margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.7; }
.hub-preview { min-width: 0; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); }
.hub-preview__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.hub-preview__head strong { font-size: 14px; }
.hub-preview__count { color: var(--ink-3); font: 11px var(--font-mono); }
.hub-offers { display: flex; flex-direction: column; }
.hub-offer { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hub-offer:last-child { border-bottom: 0; }
.hub-offer__icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); }
.hub-offer__icon svg { width: 20px; height: 20px; }
.hub-offer__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-offer__body strong { font-size: 14px; }
.hub-offer__body span { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.hub-offer__arrow { width: 17px; height: 17px; color: var(--ink-4); }
.hub-section__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.hub-section__bar h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: 0; }
.hub-section__bar p { margin-top: 5px; color: var(--ink-3); font-size: 14px; }
.hub-section__bar .btn { flex: none; }

/* ---------- 首页：商品类别磁贴 ---------- */
.cat-tile {
  --cat: var(--accent);
  --cat-soft: var(--accent-soft);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  padding: 19px 19px 17px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
/* 角部柔光：磁贴的色彩来源，悬停时轻轻扩一下 */
.cat-tile::before {
  content: ""; position: absolute; z-index: -1; top: -104px; right: -76px; width: 196px; height: 196px; border-radius: 50%;
  background: radial-gradient(circle, var(--cat-soft) 0%, transparent 70%);
  transition: transform .34s var(--ease-out);
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--line-3); box-shadow: var(--shadow-3); }
.cat-tile:hover::before { transform: scale(1.24) translate(-6px, 6px); }
.cat-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cat-tile__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); }
.cat-tile__ico svg { width: 22px; height: 22px; }
.cat-tile__num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink-4); }
.cat-tile__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.cat-tile__desc { flex: 1; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.cat-tile__go {
  margin-top: 10px; width: 30px; height: 30px; border-radius: var(--pill); display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--cat);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease-out);
}
.cat-tile__go svg { width: 15px; height: 15px; }
.cat-tile:hover .cat-tile__go { background: var(--cat); border-color: var(--cat); color: var(--bg); transform: translateX(3px); }
.cat-tile--accent { --cat: var(--accent); --cat-soft: var(--accent-soft); }
.cat-tile--green  { --cat: var(--green);  --cat-soft: var(--green-soft); }
.cat-tile--violet { --cat: var(--violet); --cat-soft: var(--violet-soft); }
.cat-tile--amber  { --cat: var(--amber);  --cat-soft: var(--amber-soft); }
.cat-tile--red    { --cat: var(--red);    --cat-soft: var(--red-soft); }

/* product detail */
.pdp { display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: start; }
.pdp__gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 92px; }
.pdp__main { aspect-ratio: 4/3; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(148deg, var(--tint-blue) 0%, var(--tint-slate) 100%); display: grid; place-items: center; position: relative; overflow: hidden; transition: opacity .16s var(--ease); box-shadow: var(--shadow-1); }
.pdp__main::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(85% 85% at 50% 45%, #000, transparent 78%); mask-image: radial-gradient(85% 85% at 50% 45%, #000, transparent 78%); opacity: .6; }
.pdp__main svg { width: 96px; height: 96px; color: var(--accent); position: relative; z-index: 1; filter: drop-shadow(0 6px 16px rgba(21,34,51,.18)); }
/* Thumbnails stay on one row: extra images scroll sideways instead of wrapping
   into a second row (wrapping made the gallery height grow with the image count). */
.pdp__thumbs { --pdp-thumb-cols: 4; display: flex; gap: 9px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.pdp__thumb { flex: 0 0 calc((100% - (var(--pdp-thumb-cols) - 1) * 9px) / var(--pdp-thumb-cols)); min-width: 0; aspect-ratio: 1/1; border-radius: var(--r); border: 1px solid var(--line); background: var(--card-sub); display: grid; place-items: center; cursor: pointer; transition: all .16s var(--ease); }
.pdp__thumb:hover { border-color: var(--line-3); }
.pdp__thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--ring); }
.pdp__thumb svg { width: 24px; height: 24px; color: var(--accent); }
.pdp__info { display: flex; flex-direction: column; gap: 18px; }
.pdp__title { font-size: clamp(25px, 2.5vw, 34px); }
.pdp__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp__price b { font-size: 36px; font-weight: 800; letter-spacing: -.04em; }
/* 授权方案（套餐）选择器：每个可售 SKU 一张卡片，选中哪张就用哪张的价格与 SKU 下单。
   这是原厂授权页的「套餐」表达，取代了商城式的规格下拉与规格按钮组。
   卡片只呈现方案名、价格与这条授权自己的说明，不出现销量、评分与现货标签。 */
.pdp__plans { display: flex; flex-direction: column; gap: 12px; padding-block: 18px; border-block: 1px solid var(--line); }
.pdp__plans-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pdp__plans-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.plan-pick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.plan-pick__card { display: flex; flex-direction: column; gap: 7px; padding: 14px 15px; text-align: left; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); transition: all .16s var(--ease); }
.plan-pick__card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.plan-pick__card[aria-checked="true"] { border-color: var(--accent); border-width: 1.5px; background: var(--accent-tint); box-shadow: var(--ring); }
.plan-pick__card[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.plan-pick__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-pick__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.plan-pick__mark { padding: 2px 8px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.plan-pick__spec { font-size: 12.5px; color: var(--ink-3); }
.plan-pick__price { display: flex; align-items: baseline; gap: 7px; }
.plan-pick__price b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.plan-pick__price del { font-size: 12.5px; color: var(--ink-4); }
.plan-pick__desc { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.plan-pick__off { font-size: 12px; font-weight: 600; color: var(--ink-4); }
/* 商城式规格按钮组（严格对照 D:/webdemo/shop-001/pages/product.html 的 .pdp__opts）：
   每个规格组一行标签 + 按钮组，选中的按钮用强调色描边与浅底。 */
.pdp__opts { display: flex; flex-direction: column; gap: 12px; padding-block: 18px; border-block: 1px solid var(--line); }
.opt-row { display: flex; flex-direction: column; gap: 8px; }
.opt-row__label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.opt-row__label span { font-weight: 500; color: var(--ink-3); }
.opt-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.opt-btn { padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .15s var(--ease); }
.opt-btn:hover { border-color: var(--ink-3); }
.opt-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.opt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pdp__buy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spec-list { display: flex; flex-direction: column; }
.spec-list div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.spec-list div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--ink-3); }
.spec-list dd { color: var(--ink); font-weight: 600; text-align: right; }

/* cart / checkout */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.summary { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.promo-row { display: flex; gap: 8px; }
.checkout-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding-block: 6px; }
.cstep { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.cstep__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); font-size: 11.5px; font-weight: 800; }
.cstep__n svg { width: 12px; height: 12px; }
.cstep.is-done { color: var(--ink-2); }
.cstep.is-done .cstep__n { background: var(--green); color: #fff; }
.cstep.is-active { color: var(--ink); }
.cstep.is-active .cstep__n { background: var(--ink); color: var(--bg); }
.cstep__line { width: 36px; height: 1px; background: var(--line-2); margin-inline: 10px; }

/* account / docs sidebar */
.with-side { display: grid; grid-template-columns: 226px 1fr; gap: 40px; align-items: start; }
.side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
.side__group { display: flex; flex-direction: column; gap: 2px; }
.side__label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 5px 11px; }
.side__link { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); transition: all .15s var(--ease); }
.side__link:hover { background: var(--bg-sub); color: var(--ink); }
.side__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side__link svg { width: 15px; height: 15px; }
.side__link .tag { margin-left: auto; }

/* account sidebar —— 分类可折叠：默认全部收起，点标题自由展开 / 收起
   （原生 details/summary，无需脚本；其它页面沿用的 .side__group 不带 --fold，不受影响） */
.side__group--fold { gap: 3px; }
.side__group--fold > summary.side__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: var(--r-sm); cursor: pointer; list-style: none; transition: background .15s var(--ease), color .15s var(--ease); }
.side__group--fold > summary.side__label::-webkit-details-marker { display: none; }
.side__group--fold > summary.side__label:hover { background: var(--bg-sub); color: var(--ink-2); }
.side__group--fold > summary.side__label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side__chevron { width: 12px; height: 12px; flex: none; color: var(--ink-4); transition: transform .15s var(--ease); }
.side__group--fold[open] > summary .side__chevron { transform: rotate(90deg); }
.side__items { display: flex; flex-direction: column; gap: 2px; }
/* 窄屏下 .side 变成横向滚动条（见第 21 节）：折叠分类改成“标题在上、展开项在下”的小块，
   不用再和同一行的其它分类抢宽度 */
@media (max-width: 1120px) {
  .side__group--fold { flex-direction: column; align-items: stretch; }
  .side__group--fold > summary.side__label { white-space: nowrap; }
}

/* auth */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h)); }
.auth--solo { grid-template-columns: 1fr; }
.auth__form { display: flex; flex-direction: column; justify-content: center; padding: 40px; background: var(--bg); }
.auth__panel { background: var(--ink); color: var(--bg); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
[data-theme="dark"] .auth__panel { background: var(--card); color: var(--ink); border-left: 1px solid var(--line); }
.auth__panel::after { content: ""; position: absolute; left: -100px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(46,91,255,.55), transparent 70%); }
.auth__panel > * { position: relative; z-index: 1; }
.auth__card { width: 100%; max-width: 392px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }

/* blog */
.post--lead { display: grid; grid-template-columns: 1.12fr 1fr; gap: 34px; align-items: center; padding: 26px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.post--lead .card__media { aspect-ratio: 16/11; border-radius: var(--r-lg); border: 1px solid var(--line); }
/* 有封页图时那一格换成真图：撑满 .card__media 并按裁切填充，
   与图标同处一层（z-index:1）盖住 ::before 的网格纹理，否则图上会叠一层格线。 */
.post--lead .card__media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.post-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.article-head { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; padding-block: 46px 30px; max-width: 760px; margin-inline: auto; }
.article-hero { aspect-ratio: 21/9; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(148deg, var(--tint-blue) 0%, var(--tint-slate) 100%); display: grid; place-items: center; color: var(--accent); position: relative; overflow: hidden; }
.article-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 76%); mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 76%); opacity: .6; }
.article-hero svg { width: 72px; height: 72px; position: relative; z-index: 1; filter: drop-shadow(0 6px 16px rgba(21,34,51,.18)); }
.toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 7px; padding-left: 16px; border-left: 2px solid var(--line); }
.toc a { font-size: 12.5px; color: var(--ink-3); transition: color .15s var(--ease); }
.toc a:hover, .toc a.is-active { color: var(--accent); font-weight: 600; }

/* timeline / changelog */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 5px; bottom: 5px; width: 1.5px; background: var(--line); }
.tl__item { position: relative; padding-bottom: 38px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before { content: ""; position: absolute; left: -27px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent); }
.tl__date { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; }
.tl__ver { display: flex; align-items: center; gap: 9px; margin: 5px 0 10px; }
.tl__ver b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.change { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); padding: 5px 0; }
.change__tag { flex: none; width: 52px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding-top: 4px; }
.change--new .change__tag { color: var(--green); }
.change--fix .change__tag { color: var(--accent); }
.change--imp .change__tag { color: var(--amber); }

/* 404 */
.err { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.err__code { font-size: clamp(88px, 16vw, 200px); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: var(--ink); opacity: .09; }
.err__links { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }

/* ---------- 19. 新增业务组件 ---------- */
/* 对比页 */
.vs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-2); }
.vs__col { padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.vs__col:last-child { border-right: 0; }
.vs__col--us { background: var(--accent-tint); }
.vs__name { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.vs__row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.vs__row svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.vs__row--yes svg { color: var(--green); }
.vs__row--no { color: var(--ink-4); }
.vs__row--no svg { color: var(--ink-4); }
.vs__row--mid svg { color: var(--amber); }

/* ROI 计算器 */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3); background: var(--card); }
.calc__inputs { padding: 30px; display: flex; flex-direction: column; gap: 24px; }
.calc__out { padding: 30px; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; gap: 20px; justify-content: center; }
[data-theme="dark"] .calc__out { background: var(--bg-sunken); border-left: 1px solid var(--line); }
.calc__field { display: flex; flex-direction: column; gap: 9px; }
.calc__field-head { display: flex; justify-content: space-between; align-items: baseline; }
.calc__field-head label { font-size: 13.5px; font-weight: 600; }
.calc__field-head output { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc__big { display: flex; flex-direction: column; gap: 2px; }
.calc__big b { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.calc__big span { font-size: 13px; opacity: .7; }
.calc__rows { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
[data-theme="dark"] .calc__rows { border-top-color: var(--line); }
.calc__rows div { display: flex; justify-content: space-between; font-size: 13.5px; }
.calc__rows b { font-variant-numeric: tabular-nums; }

/* 模板市场 / 卡片网格增强 */
.tpl { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-1); transition: all .2s var(--ease); }
.tpl:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); border-color: var(--line-2); }
.tpl__preview { padding: 16px; background: var(--bg-sub); border-bottom: 1px solid var(--line); }
.tpl__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tpl__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; margin-top: auto; border-top: 1px solid var(--line); }

/* 订单 / 发票行 */
.doc-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row__ico { width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.doc-row__ico svg { width: 18px; height: 18px; }
.doc-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-row__t { font-size: 14px; font-weight: 700; }
.doc-row__m { font-size: 12.5px; color: var(--ink-3); }
/* 行尾箭头：没有尺寸约束的话会被撑成整块 */
.doc-row > svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }

/* 订单进度 */
.steps-h { display: flex; gap: 0; align-items: center; }
.steps-h__item { display: flex; flex-direction: column; gap: 7px; flex: 1; position: relative; }
.steps-h__bar { height: 3px; border-radius: 99px; background: var(--line); }
.steps-h__item.is-done .steps-h__bar { background: var(--green); }
.steps-h__item.is-active .steps-h__bar { background: var(--accent); }
.steps-h__label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.steps-h__item.is-done .steps-h__label, .steps-h__item.is-active .steps-h__label { color: var(--ink); }
.steps-h__time { font-size: 11.5px; color: var(--ink-4); }

/* 订单详情页：单列收据式排版（订单概览 / 商品明细 / 订单信息 / 授权信息） */
.od-page { display: flex; flex-direction: column; gap: 18px; max-width: 920px; margin-inline: auto; }
.od-card { padding: 22px 24px; gap: 16px; }
.od-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* 面板标题：h2 默认是衬线大字，面板里改用无衬线小标题 */
.od-card__t { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }

.od-head { gap: 20px; }
.od-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.od-head__id { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.od-head__no { font-family: var(--font-mono); font-size: 21px; font-weight: 700; letter-spacing: -.01em; word-break: break-all; }

.od-fees { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; min-width: 168px; }
.od-fee { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-3); }
.od-fee--total { padding-top: 5px; }
.od-fee--total b { font-family: var(--font-serif); font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }

.od-note { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--r); font-size: 13.5px; background: var(--amber-soft); color: var(--amber); }
.od-note--red { background: var(--red-soft); color: var(--red); }

/* 订单流程：节点式横向时间轴（已完成打勾 + 发生时间 / 进行中高亮 / 未开始留序号） */
.od-flow { display: flex; margin: 0; padding: 18px 0 2px; border-top: 1px solid var(--line); list-style: none; }
.od-flow__step { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px; text-align: center; }
/* 相邻两个节点之间的连接线，两端正好落在两个节点的圆心上 */
.od-flow__step + .od-flow__step::before { content: ""; position: absolute; top: 11px; right: 50%; left: -50%; height: 2px; background: var(--line); }
/* 本步已完成，说明它左边那段也已经走完 */
.od-flow__step.is-done::before { background: var(--green); }
.od-flow__dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line-2); color: var(--ink-4); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; }
.od-flow__dot svg { width: 13px; height: 13px; }
.od-flow__step.is-done .od-flow__dot { background: var(--green); border-color: var(--green); color: #fff; }
.od-flow__step.is-active .od-flow__dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.od-flow__label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.od-flow__step.is-done .od-flow__label { color: var(--ink-2); }
.od-flow__step.is-active .od-flow__label { color: var(--ink); font-weight: 700; }
.od-flow__time { font-size: 11.5px; color: var(--ink-4); }
.od-flow__time.is-now { color: var(--accent); font-weight: 600; }

.od-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.od-refund { flex: 0 0 auto; }
.od-refund[open] { flex: 1 1 100%; }
.od-refund > summary { list-style: none; cursor: pointer; }
.od-refund > summary::-webkit-details-marker { display: none; }
.od-refund__form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.od-refund__form .field { flex: 0 1 240px; min-width: 190px; }

.od-item { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 13px 0; }
.od-item + .od-item { border-top: 1px solid var(--line); }
.od-thumb { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; background: linear-gradient(150deg, var(--tint-blue), var(--bg-sunken)); border: 1px solid var(--line); color: var(--accent); }
.od-thumb svg { width: 22px; height: 22px; }
/* 有商品主图时那一格换成真图：撑满 52×52（窄屏 44×44）的方块并按裁切填充，
   圆角继承容器，否则图片会按原始尺寸铺开、把商品明细挤变形。 */
.od-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.od-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-item__t { font-size: 14.5px; font-weight: 700; }
.od-item__m { font-size: 12.5px; color: var(--ink-3); }
.od-item__nums { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.od-item__calc { font-size: 12.5px; color: var(--ink-3); }
.od-item__amt { font-size: 14.5px; font-weight: 700; }

.od-license { display: flex; flex-direction: column; gap: 10px; }
.od-license + .od-license { padding-top: 14px; border-top: 1px solid var(--line); }
.od-license__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.od-license__t { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; }
.od-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }
.od-key .mono { font-size: 12.5px; word-break: break-all; }
.od-key .btn { flex: none; }

.od-help { font-size: 13px; text-align: center; }

@media (max-width: 680px) {
  .od-card { padding: 18px; }
  .od-head__no { font-size: 18px; }
  .od-fees { min-width: 0; }
  /* 窄屏放不下两行小字：只留节点与步骤名 */
  .od-flow { padding-top: 16px; }
  .od-flow__step { padding: 0 4px; gap: 5px; }
  .od-flow__label { font-size: 11.5px; }
  .od-flow__time { display: none; }
  .od-item { grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; }
  .od-thumb { width: 44px; height: 44px; }
  .od-thumb svg { width: 19px; height: 19px; }
}

/* 视频 / 播客 */
.episode { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); transition: all .18s var(--ease); }
.episode:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.episode__play { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--bg); }
.episode__play svg { width: 17px; height: 17px; margin-left: 2px; }
.episode__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.episode__t { font-size: 14.5px; font-weight: 700; }
.episode__m { font-size: 12.5px; color: var(--ink-3); }
.episode__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.episode__wave i { width: 2.5px; border-radius: 99px; background: var(--line-2); }

/* 术语表 */
.gloss { display: flex; flex-direction: column; gap: 0; }
.gloss__item { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 190px 1fr; gap: 24px; }
.gloss__item:last-child { border-bottom: 0; }
.gloss__term { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.gloss__term span { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 3px; }
/* 英文模式下术语本身就是英文，下面那行英文小注是重复的 */
[data-lang="en"] .gloss__term span { display: none; }
.gloss__def { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* 新闻/媒体条 */
.press { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.press:last-child { border-bottom: 0; }
.press__logo { font-size: 15px; font-weight: 800; color: var(--ink-3); width: 130px; flex: none; }
/* 标题与日期必须各占一行——.press__main 是 span，默认会让两个子元素排成一行 */
.press__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.press__t { font-size: 15px; font-weight: 700; }
.press__t:hover { color: var(--accent); }
.press__m { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.press > svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }

/* 伙伴卡 */
.partner { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); transition: all .2s var(--ease); }
.partner:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.partner__top { display: flex; align-items: center; gap: 11px; }
.partner__logo { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-sunken); font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-2); flex: none; }

/* 筛选栏（模板市场/收藏夹等） */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }

/* 对比勾选条 */
.compare-bar { position: sticky; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-4); }
[data-theme="dark"] .compare-bar { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.compare-bar__list { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; }

/* 风格指南 */
.swatch { border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-1); }
.swatch__chip { height: 68px; }
.swatch__meta { padding: 10px 12px; font-size: 11.5px; background: var(--card); }
.swatch__meta b { display: block; font-size: 12.5px; color: var(--ink); }
.swatch__meta span { font-family: var(--font-mono); color: var(--ink-3); font-size: 10.5px; }
.sg-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sg-block { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-1); }

/* 消息中心（/uc/messages）：类型图标 + 类型标签 + 已读状态；未读卡片带主色左边线 */
.msg { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.msg:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.msg--unread { border-left-color: var(--accent); background: var(--accent-tint); }
.msg--unread:hover { border-color: var(--accent); }
.msg__ico { width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-2); }
.msg__ico svg { width: 19px; height: 19px; }
.msg__ico--green { background: var(--green-soft); color: var(--green); }
.msg__ico--blue { background: var(--accent-soft); color: var(--accent); }
.msg__ico--violet { background: var(--violet-soft); color: var(--violet); }
.msg__ico--amber { background: var(--amber-soft); color: var(--amber); }
.msg__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.msg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.msg__title { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.msg__title b { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.msg__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* 类型名是纯文本标签：颜色语义已经由图标的底色承担，这里不再叠一层色块 */
.msg__type { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.msg__time { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg__content { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.msg__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 20. Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; } .mt-88 { margin-top: 88px; }
.mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; } .mb-64 { margin-bottom: 64px; }
.hide { display: none !important; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.self-start { align-self: flex-start; }

/* 徽标/标签在纵向 flex 容器里会被拉伸成整行，这里收住 */
.card__body > .tag, .card__body > .badge, .card__body > .price,
.fcard > .tag, .fcard > .badge,
.plan > .tag, .plan > .badge,
.tile > .tag, .tile > .badge,
.stack > .tag, .stack > .badge { align-self: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scroll-x { overflow-x: auto; scrollbar-width: thin; }
.sticky-top { position: sticky; top: 92px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .24s var(--ease);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }

.skip-link { position: absolute; left: -9999px; top: 10px; z-index: 200; padding: 9px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r-sm); }
.skip-link:focus { left: 10px; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1120px) {
  :root { --gutter: 26px; }
  .hub-inner { grid-template-columns: 1fr; gap: 30px; }
  .hub-preview { max-width: 720px; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__copy { max-width: none; }
  .hero__visual { padding: 0; }
  .float-card--tl { top: -16px; left: 0; }
  .float-card--br { bottom: -16px; right: 0; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .pdp { grid-template-columns: 1fr; gap: 32px; }
  .pdp__gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .summary { position: static; }
  .with-side { grid-template-columns: 1fr; gap: 28px; }
  .side { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .side__group { flex-direction: row; }
  .post--lead { grid-template-columns: 1fr; gap: 20px; }
  .auth { grid-template-columns: 1fr; }
  .auth__panel { display: none; }
  .calc { grid-template-columns: 1fr; }
  .vs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vs__col { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__toggle { display: grid; }
  .lang { display: none; }
  .g-4, .g-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
  .section { padding-block: 60px; }
  .band { padding: 30px 24px; }
  .drop, .drop--wide { display: none; }
  .gloss__item { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; --header-h: 62px; }
  .hub-section { padding-block: 38px 42px; }
  .hub-copy { gap: 13px; }
  .hub-copy h1 { font-size: 36px; }
  .hub-copy h2 { font-size: 29px; }
  .hub-copy p { font-size: 15px; }
  .hub-preview { padding: 16px; }
  .hub-offer { grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; }
  .hub-offer__icon { width: 38px; height: 38px; }
  .hub-section__bar { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .hub-section__bar h2 { font-size: 24px; }
  .g-2, .g-3, .g-4, .g-5 { grid-template-columns: 1fr; }
  .g-auto { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
  .vs { grid-template-columns: 1fr; }
  .hero { padding-block: 36px 48px; }
  .hero__meta { gap: 18px; }
  .page-head { padding-block: 34px 24px; }
  .footer__legal-bar { justify-content: flex-start; gap: 14px 18px; padding-block: 18px 22px; }
  .toolbar { padding: 12px; }
  .shop-promo { align-items: stretch !important; flex-direction: column !important; }
  .shop-promo > p { max-width: 100%; }
  .shop-page-head > h1, .shop-page-head > .lead { width: 100%; max-width: 100%; }
  .shop-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .shop-toolbar > .search, .shop-toolbar > .chips { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .shop-toolbar > .toolbar__spacer { display: none; }
  .shop-toolbar > [data-shop-sort] { width: 100% !important; min-width: 0 !important; max-width: 100%; }
  .grid.g-auto.shop-products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
  .toast-wrap { left: 14px; right: 14px; bottom: 14px; align-items: stretch; }
  .cstep__line { width: 18px; margin-inline: 7px; }
  .calc__inputs, .calc__out { padding: 22px; }
  /* 消息卡片：窄屏把时间折到标题下面，避免标题被时间挤成一列字 */
  .msg { padding: 16px; gap: 12px; }
  .msg__head { flex-direction: column; gap: 8px; }
  .press { flex-direction: column; align-items: flex-start; gap: 6px; }
  .press__logo { width: auto; }
}
@media (max-width: 440px) {
  .g-auto { grid-template-columns: 1fr; }
  .pdp__thumbs { --pdp-thumb-cols: 3; }
}

/* ---------- 23. 单页正文（法律 / 说明类文章）---------- */
/* 静态页正文加 .prose--doc：正文栏收窄到适合中文阅读的行长（约 40 字/行），
   行高与段距按长文习惯放大，小节标题用一条分隔线切出层次。
   只作用在单页正文上，商品详情、帮助中心等同样用 .prose 的区块不受影响。 */
.prose--doc { max-width: 46em; font-size: 17px; line-height: 1.95; color: var(--ink-2); }
.prose--doc > * + * { margin-top: 24px; }
.prose--doc > h2 {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 23px; line-height: 1.5; letter-spacing: .01em; color: var(--ink);
}
.prose--doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose--doc > h3 { margin-top: 36px; font-size: 19px; color: var(--ink); }
.prose--doc strong { color: var(--ink); font-weight: 700; }
.prose--doc ul, .prose--doc ol { margin-top: 24px; padding-left: 24px; }
.prose--doc li + li { margin-top: 10px; }
.prose--doc li::marker { color: var(--accent); }
.prose--doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose--doc blockquote { margin-top: 24px; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); color: var(--ink); }
.prose--doc hr { margin-block: 44px; border: 0; border-top: 1px solid var(--line); }

/* ---------- 24. 站点地图（/sitemap）---------- */
/* 站点地图不是一列裸链接，而是一份可扫读的目录：
   顶部给出「有多少页、什么时候更新的」规模概览与板块快速跳转，
   正文按板块分卡，卡片内仍是逐条可点的页面条目。
   颜色、圆角、阴影全部沿用设计令牌，亮暗主题自动跟随。 */
.smap-hero { padding-block: 30px 0; }
.smap-hero__head { padding-block: 16px 24px; }

/* 规模概览 */
.smap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.smap-stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-1);
}
.smap-stat b { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.smap-stat b.smap-stat__text { font-size: 17px; letter-spacing: 0; }
.smap-stat span { font-size: 12.5px; color: var(--ink-3); }

/* 数据来源说明 */
.smap-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}
.smap-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; stroke: currentColor; stroke-width: 1.6; }

/* 板块快速跳转：长目录里直接跳到目标板块，省去滚动寻找 */
.smap-jump { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 26px; }
.smap-jump__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--card);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.smap-jump__item:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); transform: translateY(-1px); }
.smap-jump__item svg { width: 15px; height: 15px; flex: none; }
.smap-jump__n {
  padding: 1px 7px; border-radius: var(--pill); background: var(--bg-sunken);
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.smap-jump__item:hover .smap-jump__n { background: var(--accent-soft); color: var(--accent); }

/* 板块卡片 */
.smap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.smap-group {
  padding: 0 20px 8px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-1); scroll-margin-top: 96px;
}
.smap-group:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.smap-group__head { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.smap-group__ico {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.smap-group__ico svg { width: 17px; height: 17px; }
.smap-group__head h2 { flex: 1; min-width: 0; font-size: 17px; }
.smap-group__n { flex: none; font-size: 12px; color: var(--ink-3); }

/* 卡片内的页面条目：标题 + 地址 + 箭头，悬停时整行给出反馈 */
.smap-list { display: flex; flex-direction: column; }
.smap-link { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.smap-list > li:last-child .smap-link { border-bottom: 0; }
.smap-link__t { font-size: 14px; font-weight: 600; color: var(--ink); transition: color .18s ease; }
.smap-link__m {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smap-link > svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); transition: color .18s ease, transform .18s ease; }
.smap-link:hover .smap-link__t { color: var(--accent); }
.smap-link:hover > svg { color: var(--accent); transform: translateX(2px); }

/* 空态：没有采到地址时给出下一步动作，不留白页 */
.smap-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 52px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--card); text-align: center;
}
.smap-empty__ico {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-3);
}
.smap-empty__ico svg { width: 22px; height: 22px; }
.smap-empty h2 { font-size: 19px; }
.smap-empty p { max-width: 46ch; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) {
  .smap-groups { grid-template-columns: 1fr; }
  .smap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .smap-stats { grid-template-columns: 1fr; }
  /* 板块胶囊横向滚动，避免十几个板块把页头撑成一大片 */
  .smap-jump {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 20px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .smap-jump::-webkit-scrollbar { display: none; }
  .smap-jump__item { flex: none; }
  .smap-group { padding-inline: 16px; }
}

/* ---------- 22. MCP 接入屏（/uc/mcp） ---------- */
/* 这一屏只有三块：一次性明文、生成卡、令牌表。留白 / 字号 / 间距集中在这里，
   模板里不再到处写 inline style —— 上一版就是被几十处 inline 拉花的。 */
.mcp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mcp-head__text { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.mcp-head__text h2 { font-size: 24px; letter-spacing: -.02em; }
.mcp-head__text p { font-size: 13.5px; line-height: 1.7; }
.mcp-head__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.mcp-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 104px; padding: 11px 16px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-1);
}
.mcp-stat__label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.mcp-stat__value { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* 一次性明文：绿色系提示「这是新的、只有一次」，整串可点复制 */
.mcp-plain {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px;
  border: 1px solid var(--green); border-radius: var(--r-lg);
  background: var(--green-soft); box-shadow: var(--shadow-2);
}
.mcp-plain__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcp-plain__head .tag--green { background: var(--card); }
.mcp-plain__hint { font-size: 12.5px; color: var(--ink-2); }
.mcp-plain__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mcp-plain__code {
  flex: 1 1 320px; min-width: 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--card); border: 1px dashed var(--green);
  font-size: 13px; line-height: 1.6; color: var(--ink); cursor: copy;
  white-space: pre-wrap; word-break: break-all;
}
.mcp-plain__foot { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }

/* 生成卡 */
.mcp-card { box-shadow: var(--shadow-1); }
.mcp-card__body { gap: 16px; padding: 20px 22px; }
.mcp-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mcp-section__title { display: flex; flex-direction: column; gap: 5px; }
.mcp-section__title h3 { font-size: 16.5px; }
.mcp-section__title p { font-size: 13px; line-height: 1.65; max-width: 64ch; }
.mcp-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mcp-form__field { flex: 1 1 200px; min-width: 0; }
.mcp-form__submit { flex: none; }
.mcp-hint { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.mcp-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--amber-soft); }
.mcp-alert p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }

/* 令牌表 */
.mcp-table { min-width: 780px; }
.mcp-cell__main { display: flex; flex-direction: column; gap: 2px; }
.mcp-cell__main b { font-size: 13.5px; }
.mcp-cell__main .dim { font-size: 12px; }
.mcp-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-prefix {
  font-size: 12.5px; padding: 4px 8px; border-radius: var(--r-xs);
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-2);
}
.mcp-copy__btn { padding: 6px 11px; }
.mcp-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mcp-bind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcp-bind__form { display: flex; align-items: center; gap: 6px; }
.mcp-bind__select { height: 34px; padding-block: 0; font-size: 13px; min-width: 150px; }

@media (max-width: 720px) {
  .mcp-head__stats { width: 100%; }
  .mcp-stat { flex: 1 1 0; min-width: 0; }
  .mcp-form__field, .mcp-form__submit { flex: 1 1 100%; }
  .mcp-plain__code { flex: 1 1 100%; }
}

/* ---------- 23. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .header, .footer, .to-top, .drawer, .mdrawer, .toast-wrap, .compare-bar { display: none !important; }
  body { background: #fff; }
}