/* ==========================================================================
   image-splitter v3 重设计（提案 demo）—— 覆盖层。
   思路同生产的 reskin 层：把 image-split.css 的变量整套重映射到 blkswn
   （白/黑/发丝线/荧光黄记号），再逐面重画可见控件；机制样式（编辑画布、
   手机 mock、轮播、busy）原样复用。chrome 与正文区块直接用 theme.css 的 .bs-*。
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg2: var(--bs-bg-sub);
  --panel: #ffffff;
  --panel2: var(--bs-bg-sub);
  --line: var(--bs-border);
  /* --text / --muted 是 tokens.css 的基础变量名，不能在此重定义：
     tokens 有 --bs-text:var(--text)，再写 --text:var(--bs-text) 会成循环、双双失效。 */
  /* 品牌三色整套收黑：老 CSS 里它们只剩「强调」这一个角色 */
  --pink: #000000;
  --violet: #000000;
  --cyan: #000000;
  --grad: none;
  --radius: 0;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  /* reskin 层独有、被 image-split.css 消费的变量 */
  --ink: #000000;
  --ink2: #666666;
  --font-mono: var(--bs-font-condensed);
  /* prod 调色板剩余项：不映射就会漏出米黄/绿/橙底色（如上传模块的 --cream） */
  --cream: #ffffff;
  --cream2: var(--bs-bg-sub);
  --green: #000000;
  --orange: #000000;
  --yellow: var(--bs-accent);
}
:focus-visible { outline: 2px solid var(--bs-text); outline-offset: 2px; border-radius: 0; }

/* .accent（lang 文案里的 span）：渐变字 → 荧光黄记号笔 */
.accent { background: var(--bs-accent); -webkit-background-clip: border-box; background-clip: border-box; color: var(--bs-text); padding: 0 0.3em; }
.badge-soon { background: var(--bs-accent); color: var(--bs-text); border: 1px solid var(--bs-text); border-radius: var(--bs-radius-pill); font-size: 0.65em; padding: 0.1em 0.8em; margin-left: 0.6em; vertical-align: middle; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--bs-font-condensed); font-weight: 400; }

/* ---------- 通用按钮：黑白胶囊 ---------- */
.btn { border-radius: var(--bs-radius-pill); box-shadow: none; font-family: var(--bs-font-body); font-weight: 500; transition: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary { background: var(--bs-invert-bg); color: var(--bs-invert-text); border: 1px solid var(--bs-invert-bg); }
.btn-primary:hover { background: var(--bs-surface); color: var(--bs-text); }
.btn-ghost { background: var(--bs-surface); color: var(--bs-text); border: 1px solid var(--bs-border); }
.btn-ghost:hover { background: var(--bs-bg-sub); color: var(--bs-text); }

/* ---------- hero：左文右 demo ---------- */
.is-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.is-hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* 提高一级：.bs-page-hero p 的 margin:0 会盖过裸类选择器 */
.bs-page-hero .is-hero-note { margin: 3rem 0 0; font-size: 0.8rem; color: var(--bs-text-sub); }
.hero-demo { max-width: 26rem; margin: 0 auto; width: 100%; }
.hd-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.hd-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.9rem; font-size: 0.8rem; font-family: var(--bs-font-body); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-pill); background: var(--bs-bg); cursor: pointer; color: var(--bs-text); }
.hd-tab:hover { background: var(--bs-bg-sub); }
.hd-tab.on { background: var(--bs-accent); border-color: var(--bs-text); }
.hd-tab svg { width: 14px; height: 14px; }
.bs-page-hero .hd-caption { font-family: var(--bs-font-condensed); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-text-sub); margin: 0.75rem 0 0; text-align: center; }

/* ---------- 样例轮播 ---------- */
.sample-actions { display: flex; gap: 0.4rem; }
.sample-nav { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--bs-border); background: var(--bs-surface); color: var(--bs-text); cursor: pointer; font-size: 1rem; line-height: 1; }
.sample-nav:hover { background: var(--bs-bg-sub); }
.sample-carousel { overflow: hidden; }
/* scroll-padding 是必须的：机制层给 .sample-grid 留了 2px 内边距，但卡片带
   `scroll-snap-align:start`，吸附会把卡片起始边贴到 scrollport 边缘、把那 2px
   吞掉（scrollLeft 强制设 0 也会弹回 2）—— 第一张卡的 1px 左边框正好落在裁剪线上，
   看起来就是"没有左边框"；选中态外面还多一圈 1px box-shadow，更需要余量。 */
.sample-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 14rem; gap: 0.75rem; padding: 3px 3px 10px; scroll-padding-left: 3px; scroll-padding-right: 3px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.sample-grid::-webkit-scrollbar { display: none; }
.sample-card { border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-surface); padding: 0; cursor: pointer; text-align: left; overflow: hidden; box-shadow: none; }
.sample-card:hover { border-color: var(--bs-text); box-shadow: 0 0 0 1px var(--bs-text); transform: none; }
/* 12 张样例里 11 张原图是 0.50–0.60 的竖图（都是 9:16 的社交网格素材），
   之前钉成 4/3 等于把画面裁掉三分之二。改 9:16 + 列宽 11→14rem。
   border-bottom 是 cream 时代 `.sample-card img{border-bottom:4px solid var(--ink)}`
   的残留，v3 层一直没收 —— 就是每张图下面那条粗黑杠。 */
.sample-card img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; border-bottom: 0; }
/* 选中态此前完全没被 v3 层接管，还吃着 cream 时代的
   `box-shadow:14px 14px 0 var(--yellow),14px 14px 0 4px var(--ink)` —— 就是那块
   戳出卡片外的大黄块。改成全站统一的记号语言：黑描边 + 荧光黄信息条（黄=选中）。 */
.sample-card.is-selected { border-color: var(--bs-text); box-shadow: 0 0 0 1px var(--bs-text); transform: none; }
.sample-card.is-selected .sample-info { background: var(--bs-accent); }
.sample-info { display: block; padding: 0.5rem 0.75rem; }
.sample-info strong { display: block; font-size: 0.85rem; font-weight: 500; color: var(--bs-text); }
.sample-info em { display: block; font-style: normal; font-family: var(--bs-font-condensed); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-text-sub); margin-top: 2px; }

/* ---------- 工作台 ---------- */
.tool-shell { background: var(--bs-surface); border: none; border-radius: 0; box-shadow: none; padding: 1.5rem; }
.dropzone { border: 1px dashed var(--bs-border); border-radius: 0; background: var(--bs-surface); color: var(--bs-text-sub); }
.dropzone:hover, .dropzone.drag { background: var(--bs-bg-sub); border-color: var(--bs-text); box-shadow: none; transform: none; }
.dropzone strong { color: var(--bs-text); font-weight: 500; }
.dz-ico { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--bs-border); background: var(--bs-surface); color: var(--bs-text); box-shadow: none; }
/* prod 在 .dropzone:hover 时给图标 translateY(-5px) scale(1.05)，blkswn 不做位移 */
.dropzone:hover .dz-ico { transform: none; }
.dz-hint { background: var(--bs-bg-sub); border-radius: var(--bs-radius-pill); color: var(--bs-text-sub); }
.canvas-frame { border: 1px solid var(--bs-border); border-radius: 0; box-shadow: none; background: #101010; }
.canvas-hint { font-size: 0.78rem; color: var(--bs-text-sub); }
.editor .panel { background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: 0; box-shadow: none; }
/* 出结果后面板变粘性可滚动，机制层为此把 padding-right 收成 4px（≥1121px）或 0
   （901–1120px），跟 padding-left:24px 不对称 —— 整块内容贴右、左边空出一条沟。
   横向内距对称回 24px；纵向与 sticky/overflow 行为不动。
   选择器必须是 `.tool-shell.has-results .panel`(0-3-0) 才压得过机制层同名规则，
   `.editor .panel`(0-2-0) 会输。 */
.tool-shell.has-results .panel { padding-right: 24px; }
.ctrl-group h3 { font-family: var(--bs-font-condensed); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-text); }
.control-label, .row .lbl { font-size: clamp(10px, 0.7vw, 12px); letter-spacing: 0.04rem; text-transform: uppercase; color: var(--bs-text-sub); font-family: var(--bs-font-body); font-weight: 400; }

/* 参数选择组（layout/比例/格式/发布顺序 共用记号语言：选中 = 荧光黄）。
   **方角、不用胶囊**（用户 2026-07-20）：这些是参数格子不是 CTA，圆角只在
   .btn / .bs-btn 那几个动作按钮上保留。行高统一 32px，比例格从 74 收到 56 ——
   原来 71×74 配 60px 圆角实际渲染成一个椭圆。 */
.chip, .ratio-option, .format-option, .post-option {
  border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-bg);
  color: var(--bs-text); box-shadow: none; font-weight: 400; font-family: var(--bs-font-body);
}
.chip:hover, .ratio-option:hover, .format-option:hover, .post-option:hover { background: var(--bs-bg-sub); border-color: var(--bs-border); color: var(--bs-text); transform: none; box-shadow: none; }
.chip.on, .ratio-option.on, .format-option.on, .post-option.on {
  background: var(--bs-accent); border-color: var(--bs-text); color: var(--bs-text); box-shadow: none; font-weight: 500;
}
.chip { padding: 6px 12px; }
.format-option { padding: 6px 8px; }
.post-option { min-height: 32px; }
.ratio-option { min-height: 56px; gap: 6px; }
/* 比例图标：JS 按长边 30px 画 .ratio-mark（app.js ratioIconAttrs 的 max），
   而 .ratio-icon 的盒子只有 32×26 —— 竖版与 1:1 本来就溢出 2px，按钮收到 56px
   后连按钮边框都盖住了。按 0.8 缩到长边 24px，正好落进 24px 高的图标盒；
   描边 3px→2px 同步收细（24px 的小图标配 3px 边太重）。 */
.ratio-icon { width: 30px; height: 24px; }
.ratio-mark { width: calc(var(--rw) * 0.8); height: calc(var(--rh) * 0.8); border-width: 2px; border-color: var(--bs-text); background: transparent; }
.ratio-option.on .ratio-mark { border-color: var(--bs-text); background: var(--bs-accent); }
#customLayout { border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-bg); color: var(--bs-text); font-family: var(--bs-font-body); padding: 0.25rem 0.9rem; cursor: pointer; }
.mini { width: 32px; height: 32px; border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-surface); color: var(--bs-text); box-shadow: none; }
.mini:hover { background: var(--bs-bg-sub); transform: none; }
/* 滑块两端的 +/− 收窄后这行才排得下（原来 38px 圆钮会把 ⟳/+ 挤到第二行）。 */
.post-toggle { border-width: 1px; }
/* cream 时代的 4px 黑框：整页是 1px 发丝线，这里一直没收 —— 控制面板显得又重又挤。 */
.ctrl-group { border-width: 1px; }
/* 面板内距对称后内容盒窄了 20px（300px 面板 → 行宽 216px），而 Zoom/Rotate 行
   「标签 52 + 钮 32 + 滑杆 min 80 + 钮 32 + 3×10 间距 = 226」排不下，+/⟳ 会掉到
   第二行。收紧标签宽与行间距、放宽滑杆的最小宽，最小需求降到 192px。 */
.row { gap: 8px; }
.row .lbl { min-width: 44px; }
input[type="range"] { accent-color: var(--bs-text); min-width: 60px; }
.switch input, #showGrid { accent-color: var(--bs-text); }
input[type="color"] { border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-surface); }
.replace-link { color: var(--bs-text); text-decoration: underline; text-underline-offset: 3px; }
.replace-link:hover::before { content: "☞ "; }
.profile-ratio-note { color: var(--bs-text-sub); }
.profile-ratio-link { color: var(--bs-text); text-decoration: underline; }

/* 结果区 */
.preview-tabs { border-bottom: 1px solid var(--bs-border); }
/* 平台预览标签：必须带 #results，prod 用 ID 选择器定死了 border/背景，
   裸 .ptab 盖不过（会变成 hover=黄、选中=黑，跟全站「黄=选中」正好相反）。 */
#results .ptab { height: 32px; border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-bg); color: var(--bs-text); box-shadow: none; font-weight: 400; }
#results .ptab:hover { border: 1px solid var(--bs-border); background: var(--bs-bg-sub); color: var(--bs-text); }
#results .ptab.on { border: 1px solid var(--bs-text); background: var(--bs-accent); color: var(--bs-text); }
/* 标签条外框同样是 cream 时代残留：3px 黑边 + rgba(239,233,217,.94) 米黄底
   （全页唯一一处非 v3 调色板的颜色，扫描器抓到的）。 */
#results .preview-tabs { border-width: 1px; background: var(--bs-surface); }
.results-head h3 { font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.1rem; letter-spacing: 0.04rem; text-transform: uppercase; }
.tile-card { border: 1px solid var(--bs-border); border-radius: 0; box-shadow: none; background: var(--bs-surface); }
.tile-badge { background: rgba(0, 0, 0, 0.72); color: var(--bs-invert-text); border-radius: 0; font-family: var(--bs-font-condensed); letter-spacing: 0.05em; }
.tile-dl { background: var(--bs-invert-bg); color: var(--bs-invert-text); border-width: 1px; border-radius: 0; font-weight: 500; }
.tile-dl:hover { background: var(--bs-surface); color: var(--bs-text); box-shadow: inset 0 0 0 1px var(--bs-text); }
.order-note { background: var(--bs-bg-sub); border: none; border-left: 3px solid var(--bs-accent); border-radius: 0; color: var(--bs-text); }
.results-export { border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-surface); }
.mock-note { color: var(--bs-text-sub); }

/* ---------- 去掉 prod 的粗黑边，统一收成发丝线 ---------- */
/* image-split.css 的裸元素规则 section{border-top:4px solid var(--ink)}
   会落到每个 .bs-section 上，整页被粗黑杠分隔；blkswn 用留白+发丝线分区。 */
.bs-section, section { border-top: 0; }
.dz-hint { border: 1px solid var(--bs-border); }
.layout-thumb { border: 1px solid var(--bs-border); }
.final-cta-eyebrow { border: 0; }
.ai-demo, .ai-demo img { border: 1px solid var(--bs-border); }
.final-cta { border: 0; }
/* mock 的黑色偏移块：demo 有、生产被 app.css 压掉了，补回来对齐设计稿 */
.hero-demo .hd-stage { box-shadow: 12px 12px 0 0 var(--bs-text), 12px 12px 0 4px var(--bs-text); }
/* 手机 mock 的 .hd-cells 网格线是示意图本身的一部分，保留不动 */
/* image-split.css 的 .btn 皮肤把按钮转成大写；生产其他 v3 页（pixel-art /
   compress-image）的 .btn 都是 text-transform:none，这里跟齐 v3 标准。
   另：app.css 的 .btn{height:44px;font:inherit} 把胶囊压矮 5px、行高钉成 1.6；
   demo 侧只有 image-split.css 的 padding + min-height，按内容撑开。 */
.btn, .btn-primary, .btn-ghost { text-transform: none; letter-spacing: 0.02em; }
.btn { height: auto; line-height: normal; }

/* ==========================================================================
   共享 chrome 复位（生产专用；demo 里这些元素不存在，规则惰性）
   --------------------------------------------------------------------------
   生产把站头/面包屑/FAQ/相关工具/站尾交给共享组件，它们必须**跟全站其他 v3 页
   一模一样**。但 image-split.css 是给独立布局写的，满是裸元素选择器
   （a / header / footer / details / summary / .wrap …），会整片够到这些组件。

   **demo 在这件事上不是基准** —— demo 的站头 mock 吃的是同一份 image-split.css，
   两边一起被染色，对照器因此报 0 差异却都是错的（2026-07-20 用户肉眼发现）。
   基准是 /compress-image 这类标准 v3 页。下面按「根因」而不是「症状」逐条复位。

   作用域一律用 `:where()` 包 —— **特异性归零**，于是这些复位规则只压得过
   image-split.css 的裸元素选择器（同为 0-0-1，本文件后载即胜），压不过 app.css
   的任何类规则。共享组件长什么样，永远由 app.css 说了算，这里只负责挡住越界。
   （第一版用 `:is()` 写，当场把语言菜单的 ▾ 连同 image-split.css 的 + 一起干掉了。）
   正文与工作台不在作用域内，照常吃 image-split.css。
   ========================================================================== */

/* ① image-split.css:571 `a{color;font-weight:700}` —— 把共享 chrome 里所有
      没写字重的链接染成粗体：站头导航、面包屑、页脚栏链接、相关工具卡的标题与描述。 */
:where(.site-header-bar, .bs-breadcrumb, #faq, .related-tools, .bs-footer) a { font-weight: inherit; }

/* ② `.wrap{max-width:1180px;padding:0 24px}` 覆盖了 app.css 的
      `width:min(80rem, calc(100% - 4rem))` —— 站头与页脚内层缩到 1104/1132，
      与正文的 1152 对不齐。还回 app.css 的值。 */
:where(.site-header-bar, .bs-footer) > .wrap { width: min(80rem, calc(100% - 4rem)); max-width: none; padding-left: 0; padding-right: 0; }
/* 共享 FAQ / 相关工具组件也自带 .wrap（平时它们是页面顶层区块）；本页把它们放进
   demo 的 main.bs-wrap.bs-main 里，会套出第二层更窄的容器 —— 压平。 */
.bs-main > .wrap { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

/* ③ 裸 `header{border-bottom:4px;background:#fff}` / `footer{border-top:4px}` 的粗黑杠
      与实底。站头只能压内层：.site-header-bar 是通栏外壳（app.css 已给它 1px 发丝线），
      header.site-header 是里面的 .wrap —— 两个都加边框会出现两条线，内层那条
      还短一截，裸 header{} 打的正是内层。背景是白底压白底、肉眼看不出来，
      靠 prod-chrome-diff.mjs 抓到的：外壳换色时内层就会露馅。 */
header.site-header { border-bottom: 0; background: transparent; }
.bs-footer { border-top: 0; }

/* ④ 裸 `details{}` / `summary{}` 皮肤（粗黑框 + Archivo Black + 大写 + 两端对齐的
      +/− 记号 + min-height:56px）套走两处共享折叠件：站头的语言/用户菜单、共享 FAQ。
      `border:0` / `padding:0` 这种「全清」写法在 :where() 里是安全的：app.css 的
      `.bs-faq-item{border-bottom}`、`.bs-faq-q{padding}`、`.lang-menu summary::after{' ▾'}`
      都是类规则，一律压得过它。 */
:where(.site-header-bar, #faq) details { border: 0; background: none; margin: 0; border-radius: 0; overflow: visible; }
:where(.site-header-bar, #faq) summary {
  min-height: 0; padding: 0; gap: normal; display: revert;
  font-family: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none;
}
:where(.site-header-bar, #faq) summary::after { content: none; }
/* 唯一要抬特异性的一条：展开态记号出自 `details[open] summary::after`，`[open]`
   算一级，0-1-3 压过上面那条 0-0-2 —— 不单独写会剩一个 1.3rem 的「–」。
   写成 `[open] > summary` 精确到直接子元素，避免够到面板里的其它 summary。 */
:where(.site-header-bar, #faq) details[open] > summary::after { content: none; }
/* 语言菜单的 ▾ 是 app.css 的 `.lang-menu summary::after`(0-1-2)，会被上面这条
   0-1-3 连坐 —— 展开时把它还回来（收起时本就由 app.css 自己给）。 */
.site-header-bar .lang-menu[open] > summary::after { content: ' ▾'; }

/* ⑤ image-split.css 的 :root 重定义了字体变量，body 的字体栈少了 app.css 的
      system-ui 兜底。共享 chrome 还回 tokens 的 --sans。 */
:where(.site-header-bar, .bs-breadcrumb, #faq, .related-tools, .bs-footer) { font-family: var(--sans); }

/* ---------- 正文区（老卡片类仍被 JS/静态段用）：发丝线方格 ---------- */
.cards { gap: 1px; }
.cards .card { background: var(--bs-surface); border: none; box-shadow: 0 0 0 1px var(--bs-border); border-radius: 0; transform: none; }
.cards .card:hover { transform: none; box-shadow: 0 0 0 1px var(--bs-text); border-color: var(--bs-text); }
.cards .card h3 { font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1rem; letter-spacing: 0.04rem; text-transform: uppercase; }
.cards .card .ico { background: var(--bs-accent); color: var(--bs-text); border: 1px solid var(--bs-text); border-radius: 0; font-family: var(--bs-font-condensed); box-shadow: none; }
.layout-thumb { border-radius: 0; }
/* 格子涂黑（用户 2026-07-20）：原来格子与底板同为 #ededed、只靠 1px #ccc 描边
   区分，预览图几乎看不见。黑格 + 浅底，网格形状一眼可读。 */
.layout-thumb i { background: var(--bs-text); border: 0; }

/* use-case 画廊 */
.gallery figure { border: 1px solid var(--bs-border); border-radius: 0; box-shadow: none; background: var(--bs-surface); }
/* hover/focus/选中统一成 sample-card 的记号语言：不位移、不投影，只加黑描边。
   不写 :hover 的话会漏出 prod 的 translateY(-5px) + 紫色边和紫光。 */
.gallery figure:hover, .gallery figure:focus-visible, .gallery figure.is-active {
  transform: none; border-color: var(--bs-text); box-shadow: 0 0 0 1px var(--bs-text);
}
.gallery figcaption { font-family: var(--bs-font-condensed); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-invert-text); background: rgba(0, 0, 0, 0.72); }
/* 横向滚动条：黑滑块 + 灰轨道，方角。
   必须带 #use-cases，prod 用 ID 选择器定了紫色胶囊滑块，裸类选择器盖不过。 */
#use-cases .gallery { scrollbar-width: thin; scrollbar-color: var(--bs-text) var(--bs-bg-sub); }
#use-cases .gallery::-webkit-scrollbar { height: 8px; }
#use-cases .gallery::-webkit-scrollbar-track { background: var(--bs-bg-sub); }
#use-cases .gallery::-webkit-scrollbar-thumb { background: var(--bs-text); border-radius: 0; }
.gallery-nav { border: 1px solid var(--bs-border); border-radius: 50%; background: var(--bs-surface); color: var(--bs-text); box-shadow: none; }
/* 按钮靠 top:50% + translateY(-50%) 居中，hover 只能去掉 scale，不能写 transform:none（会掉下去半个身位） */
.gallery-nav:hover { background: var(--bs-bg-sub); transform: translateY(-50%); }

/* 尺寸表：黑白化（prod 的 3px 粗边 + 黄色斑马纹换成发丝线 + 灰阶隔行） */
.bs-table { background: var(--bs-surface); border-collapse: collapse; }
.bs-table th, .bs-table td { border: 0; border-bottom: 1px solid var(--bs-border); }
.bs-table thead th { background: var(--bs-invert-bg); color: var(--bs-invert-text); }
.bs-table tbody tr:nth-child(even) td { background: var(--bs-bg-sub); }
.bs-table tbody tr:last-child td { border-bottom: 0; }

/* checks 列表（ai-expand） */
.checks li { color: var(--bs-text-sub); }
.checks li::before { color: var(--bs-text); background: var(--bs-accent); }
.checks li b { color: var(--bs-text); }

/* ---------- 收尾 CTA：黑反转面板（blkswn 的 invert 语汇） ---------- */
.final-cta { background: var(--bs-invert-bg); border-radius: 0; }
.final-cta, .final-cta h2, .final-cta p { color: var(--bs-invert-text); }
.final-cta .eyebrow { background: var(--bs-accent); color: var(--bs-text); border-radius: 0; padding: 0.1rem 0.6rem; font-family: var(--bs-font-condensed); letter-spacing: 0.05em; text-transform: uppercase; }
.final-cta .btn-primary { background: var(--bs-surface); color: var(--bs-text); border-color: var(--bs-surface); }
.final-cta .btn-primary:hover { background: var(--bs-accent); border-color: var(--bs-accent); }
.final-cta .btn-ghost { background: transparent; color: var(--bs-invert-text); border-color: rgba(255, 255, 255, 0.4); }
.final-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.final-cta-mosaic .hd-cells { border-color: var(--bs-accent); background: var(--bs-accent); }

/* busy 覆盖层 */
#busy .spinner { border-color: var(--bs-border); border-top-color: var(--bs-text); }

/* 老 CSS 的滚动显现动画（.rv/.in）不采用：blkswn 是平的、不做入场动画。
   JS 会加类，这里不给样式即为空操作。 */
.rv { opacity: 1 !important; transform: none !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .is-hero { grid-template-columns: 1fr; gap: 2rem; }
}