/* =========================================================================
 * Sevenbase 页面搭建系统 —— 运行时样式（唯一断点真相源）
 * -------------------------------------------------------------------------
 * 本文件被「前台 SSR 输出」与「编辑器画布 iframe」同时加载。
 * 所有组件样式都通过内联 style 上的 CSS 变量（--sb-*）驱动，
 * 断点规则只写在这里，确保画布与真机 100% 同源（H1_06 已实测一致）。
 *
 * 断点：桌面 ≥1024（基础）｜平板 768–1023（用 -md）｜手机 ≤767（用 -sm）
 * ========================================================================= */

/* =========================================================================
 * 品牌设计 token 层（H9 阶段2.1，方案 §5.1）
 * -------------------------------------------------------------------------
 * 命名空间 --sb-* 中与 props 通道变量（--sb-fs/--sb-bg/--sb-radius 等，
 * 由 runtime/style.ts 把组件样式 props 编译为内联 CSS 变量）冲突的名字
 * 一律改用双后缀（--sb-radius-1 / --sb-shadow-1 / --sb-fz-* / --sb-sp-* / --sb-surface），
 * 绝不占用 props 通道名，否则 :root 值会沿继承链覆盖组件默认行为。
 * 前台 schema-shell 只加载本文件（无 styles.css），故所有 token 自带完整值，
 * 不依赖 --c-* 等外部变量。
 * ========================================================================= */
:root {
  /* —— 色彩 —— */
  --sb-brand: #E8401C;              /* 品牌橙红：按钮/眉题/关键数字/选中态（强调 ≤10%） */
  --sb-brand-dark: #C5330F;         /* 品牌橙红 hover/按压 */
  --sb-brand-tint: #FFF3EC;         /* 品牌浅底：药丸/眉题底色 */
  --sb-ink: #1A1A1A;                /* 主文字/结构 */
  --sb-ink-2: #57534E;              /* 次级文字（暖灰，引用/说明） */
  --sb-deep: #17130F;               /* 深色块/CTA/页脚（比 ink 更暖的黑） */
  --sb-card: #FFFFFF;               /* 卡片面 */
  --sb-surface: #F5F0EB;            /* 页面底色（米白，方案 §5.1 的 --sb-bg） */
  --sb-muted: #8A8A8A;              /* 辅助灰文字 */
  --sb-line: #E7E0D8;               /* 分隔线（暖灰） */
  --sb-line-strong: rgba(26, 26, 26, 0.18);
  --sb-rust: #7A2E1D;               /* 锈红装饰圆（深色卡角部装饰，R11） */
  --sb-rust-2: #8B3A24;             /* 锈红装饰圆亮部（径向渐变高光） */

  /* —— 圆角两档 —— */
  --sb-radius-1: 12px;              /* 小卡/图片/输入 */
  --sb-radius-2: 20px;              /* 大卡/区块容器 */

  /* —— 投影两档 —— */
  --sb-shadow-1: 0 1px 2px rgba(23, 19, 15, 0.04), 0 4px 16px rgba(23, 19, 15, 0.06);   /* 卡片静置 */
  --sb-shadow-2: 0 6px 12px rgba(23, 19, 15, 0.08), 0 16px 40px rgba(23, 19, 15, 0.12); /* 悬浮抬升 */

  /* —— 字体梯度（display 48-56/800 → h2 32/700 → h3 20/600 → body 16 → caption 13） —— */
  /* 中英混排：标题西文命中 Archivo（几何），中文回落系统黑体；数字/眉题走 IBM Plex Mono */
  --sb-font-display: 'Archivo', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --sb-font-num: 'IBM Plex Mono', 'Futura', 'Segoe UI', monospace;
  --sb-fz-display: clamp(40px, 5vw, 56px);
  --sb-fz-h2: 32px;
  --sb-fz-h3: 20px;
  --sb-fz-body: 16px;
  --sb-fz-caption: 13px;

  /* —— 间距节奏（section 垂直 96/64/40 三档；组件内 8 的倍数） —— */
  --sb-sp-xs: 8px;
  --sb-sp-sm: 16px;
  --sb-sp-md: 24px;
  --sb-sp-lg: 40px;
  --sb-sp-xl: 64px;
  --sb-sp-2xl: 96px;
}

/* —— 基础元素：文字 / 间距 / 颜色 / 盒模型 —— */
.sb-el {
  font-size: var(--sb-fs, inherit);
  line-height: var(--sb-lh, inherit);
  font-weight: var(--sb-fw, inherit);
  text-align: var(--sb-align, inherit);
  color: var(--sb-text, inherit);
  margin-top: var(--sb-mt, 0);
  margin-bottom: var(--sb-mb, 0);
  padding: var(--sb-pad, 0);
  background: var(--sb-bg, transparent);
  border-radius: var(--sb-radius, 0);
  border-width: var(--sb-bw, 0);
  border-style: solid;
  border-color: var(--sb-bc, transparent);
  box-shadow: var(--sb-shadow, none);
  opacity: var(--sb-opacity, 1);
}

/* —— 栅格容器（L3 grid） —— */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(var(--sb-cols, 1), 1fr);
  gap: var(--sb-gap, 24px);
  grid-column-gap: var(--sb-gapx, var(--sb-gap, 24px));
  grid-row-gap: var(--sb-gapy, var(--sb-gap, 24px));
  padding: var(--sb-pad, 0);
  background: var(--sb-bg, transparent);
}

/* —— 弹性容器（L3 flex） —— */
.sb-flex {
  display: flex;
  flex-direction: var(--sb-flex-dir, column);
  align-items: var(--sb-align-items, stretch);
  justify-content: var(--sb-justify, flex-start);
  gap: var(--sb-gap, 24px);
  padding: var(--sb-pad, 0);
  background: var(--sb-bg, transparent);
}

/* —— 通用盒子（L3 box / 通栏 / 背景块） —— */
.sb-box {
  display: var(--sb-display, block);
  padding: var(--sb-pad, 0);
  background: var(--sb-bg, transparent);
  border-radius: var(--sb-radius, 0);
  border-width: var(--sb-bw, 0);
  border-style: solid;
  border-color: var(--sb-bc, transparent);
  box-shadow: var(--sb-shadow, none);
  max-width: var(--sb-maxw, none);
  margin-left: auto;
  margin-right: auto;
}

/* —— 通栏：强制占满视口宽度 —— */
.sb-full {
  width: 100%;
}

/* —— 页面根容器（H9-03-01 布局体系） ——
 * Page Root 只负责「页面背景 + 整体环境」，绝不锁宽：
 * 通栏 / 限宽全部下沉到 Section（.sb-section > .sb-container）。
 * 背景色默认走全站变量 --c-cream（styles.css 定义，此处仅兜底）。
 */
.sb-page {
  background: var(--sb-page-bg, var(--sb-surface, #F5F0EB));
  color: var(--sb-ink, #1A1A1A);
  /* 防 100vw / 负 margin 类装饰造成横向滚动条（不用 overflow 撑出新滚动容器） */
  overflow-x: hidden;
  overflow-x: clip;
}

/* —— 内容容器（统一最大宽度规则的唯一来源） ——
 * Section 内部用它限宽居中；页面级裸内容也可直接使用。
 * 优先级：Section 自身 maxWidth(--sb-maxw) > 页面级 --sb-page-maxw > 全站 --maxw > 1180px
 */
.sb-container {
  max-width: var(--sb-maxw, var(--sb-page-maxw, var(--maxw, 1180px)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter, clamp(18px, 4vw, 40px));
  padding-right: var(--gutter, clamp(18px, 4vw, 40px));
}

/* —— 区块（Section：通栏背景 + 内部限宽内容） ——
 * 水平 padding 一律为 0（交给 .sb-container 的 gutter），
 * 垂直 padding 由 --sb-pady（paddingY 属性）控制，缺省 48px。
 */
.sb-section {
  width: 100%;
  /* 背景走专用变量（Section 原语把 props.background 写到 --sb-section-bg），
     不用 --sb-bg，避免沿变量继承链泄漏给后代按钮/标签 */
  background: var(--sb-section-bg, transparent);
  color: var(--sb-text, inherit);
  padding-top: var(--sb-pady, var(--sb-pad, 48px));
  padding-bottom: var(--sb-pady, var(--sb-pad, 48px));
}

/* —— 页内锚点（P2-4）：带 anchorId 的区块跳转时避开吸顶导航（68px + 16px 呼吸） —— */
.sb-section[id] { scroll-margin-top: 84px; }

/* —— 区块内容节奏（R5）：slot 包裹层 display:contents 不产生盒，
 * 顶层元素（tag/heading/网格/按钮/CTA…）之间零间距堆叠。
 * 这里给「区块级 slot 的非首子元素」补垂直间距；组件内部嵌套 slot
 * （grid/flex 的子 slot）不受影响（选择器只命中 section 直下）。
 * 组件自身已带的 margin（如 heading 的 mb）会叠加，形成标题→内容的呼吸感。 —— */
.sb-section > .sb-container > .sb-slot > * + * {
  margin-top: var(--sb-slot-gap, 24px);
}

/* —— 富文本（richtext 字段值作为 children 注入） —— */
.sb-richtext { color: var(--sb-text, inherit); font-size: var(--sb-fs, inherit); line-height: var(--sb-lh, 1.7); }
.sb-richtext p { margin: 0 0 1em; }
.sb-richtext h1, .sb-richtext h2, .sb-richtext h3,
.sb-richtext h4, .sb-richtext h5, .sb-richtext h6 { margin: 1.2em 0 .6em; font-weight: 700; line-height: 1.3; }
.sb-richtext ul, .sb-richtext ol { margin: 0 0 1em; padding-left: 1.4em; }
.sb-richtext li { margin: .3em 0; }
.sb-richtext a { color: var(--sb-brand, #E8401C); text-decoration: underline; }
.sb-richtext blockquote { margin: 1em 0; padding: .6em 1em; border-left: 4px solid var(--sb-brand, #E8401C); color: var(--sb-ink-2, #57534E); background: var(--sb-brand-tint, #faf7f4); }
.sb-richtext img { max-width: 100%; height: auto; border-radius: 8px; }
.sb-richtext code { background: #F1ECE5; padding: .1em .4em; border-radius: 4px; font-size: .9em; }

/* —— 按钮（variant：primary 实心 / ghost 浅底描边 / ghost-light 深底描边） —— */
.sb-btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .7em 1.4em; border-radius: var(--sb-radius, 999px);
  background: var(--sb-bg, var(--sb-brand, #E8401C)); color: var(--sb-text, #fff);
  font-weight: 600; text-decoration: none; cursor: pointer; border: none;
  transition: filter .15s ease, border-color .15s ease;
}
.sb-btn[data-variant='primary'] { color: #fff; }
.sb-btn[data-variant='primary']:hover { filter: brightness(.92); }
.sb-btn[data-variant='ghost'] {
  background: transparent; color: var(--sb-ink, #1A1A1A);
  border: 1.5px solid var(--sb-line-strong, rgba(26, 26, 26, 0.18));
}
.sb-btn[data-variant='ghost']:hover { border-color: var(--sb-ink, #1A1A1A); }
.sb-btn[data-variant='ghost-light'] { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.3); }
.sb-btn[data-variant='ghost-light']:hover { border-color: rgba(255, 255, 255, 0.7); }

/* Hero 内的次要按钮跟随区块文字色：
   深色首屏（万事牛）用浅色描边，浅色首屏（社区）仍是深色描边，
   不再出现「按钮颜色与背景一样、看起来只有一个按钮」的情况。 */
.sb-hero .sb-btn[data-variant='ghost'] {
  color: inherit;
  border-color: currentColor;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.sb-hero .sb-btn[data-variant='ghost']:hover {
  border-color: currentColor;
}

/* —— Puck slot 统一容器契约（H9-04 A1，v1.2 §1.3） ——
 * SSR 与画布 DropZone 的 slot 包裹层统一携带 .sb-slot（reconstruct 注入 className）。
 * display:contents 让包裹层不参与布局：真实子元素直接成为父 flex/grid 的 item，
 * 空态/单子/多子一律成立，不再依赖 only-child 结构判断。
 * 注意：display:contents 只作用于 slot 包裹层本身；Puck 拖拽辅助层
 * （overlay/指示线）挂在 DropZone 内部节点或 body 级，不受影响。
 *
 * 编辑画布修正（R9 可用性）：编辑态 Puck 的 slot 根节点就是 DropZone 根元素
 * （携带 data-puck-dropzone，SSR 端 SlotRender 无此属性），若同样 display:contents
 * 会把空槽的 128px 空投区盒模型整个抹掉 → 容器类组件（区块/栅格/弹性盒…）
 * 放进画布后塌缩为 0 高、看不见也拖不进子组件。规则：
 *  - 画布空槽（未命中 hasChildren 类）恢复盒模型 → 空投区可见可落点；
 *  - 画布已有子组件 → 仍 display:contents，画布布局与 SSR 完全一致
 *    （hasChildren 类只在真实 contentIds>0 时存在，拖拽悬停预览不计入，落点稳定）。
 */
.sb-slot { display: contents; }
[data-puck-dropzone].sb-slot:not([class*='_DropZone--hasChildren']) { display: block; }

/* =========================================================================
 * 品牌组件皮肤（H9 阶段2.2/2.3，方案 §5.2/§5.3）
 * 视觉三原则：米白底+暖灰线+留白为默认场；品牌橙红只做强调；深色块制造节奏。
 * ========================================================================= */

/* —— 原语排版层级（阶段5-E）——
 * .sb-el 通用规则把 font-size 回落到 inherit，会抹平 h2 的 UA 字号；
 * 这里为裸原语建立默认层级（props 的 --sb-fs/--sb-fw/--sb-mb 仍可覆盖）。
 * token 梯度：display 48-56 → h2 32 → h3 20 → body 16 → caption 13 */
.sb-el[data-sb='heading'] {
  font-family: var(--sb-font-display, inherit);
  font-size: var(--sb-fs, var(--sb-fz-h2, 32px));
  font-weight: var(--sb-fw, 700);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--sb-mb, var(--sb-sp-sm, 16px));
}
.sb-cta h2 { font-family: var(--sb-font-display, inherit); }
.sb-el[data-sb='tag'] { font-size: var(--sb-fs, var(--sb-fz-caption, 13px)); margin-bottom: var(--sb-mb, var(--sb-sp-sm, 16px)); }
/* 眉题标签：mono + 大写 + 暖字色（R2-2 编辑感眉题） */
.sb-el[data-sb='tag'] > span {
  font-family: var(--sb-font-num, 'IBM Plex Mono', monospace);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sb-ink-2, #57534E);
}
.sb-el[data-sb='richtext'] { max-width: 720px; }
/* 相邻按钮横排：原语外层是 block div，inline-block 让连续按钮排一行 */
.sb-el[data-sb='button'] { display: inline-block; margin-right: var(--sb-sp-sm, 16px); margin-bottom: var(--sb-mb, var(--sb-sp-xs, 8px)); }
.sb-el[data-sb='button']:last-child { margin-right: 0; }

/* —— Hero 品牌组件（眉题/居中大标/副句/双按钮/几何装饰） —— */
/* 上下留白取「区块 paddingY」与 Hero 最小留白的较大值：
   万事牛首页把 section paddingY 设为 0 做整幅深色底，旧写法会让 Hero 上下贴边，
   内容挤在一起；这里保证任何页面都不会低于 96/80px，已设置更大留白的页面不受影响。 */
.sb-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: max(var(--sb-pady, 0px), 96px) var(--sb-sp-md, 24px) max(var(--sb-pady, 0px), 80px);
}
.sb-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.sb-hero-eyebrow {
  display: inline-block; font-family: var(--sb-font-num, 'IBM Plex Mono', monospace);
  font-size: var(--sb-fz-caption, 13px); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sb-brand-dark, #C5330F); background: var(--sb-brand-tint, #FFF3EC);
  border-radius: 999px; padding: 6px 16px; margin-bottom: var(--sb-sp-md, 24px);
}
.sb-hero-title {
  margin: 0 0 var(--sb-sp-sm, 16px); font-family: var(--sb-font-display, inherit);
  font-size: var(--sb-fz-display, 48px);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: inherit;
}
.sb-hero-sub {
  margin: 0 auto var(--sb-sp-lg, 40px); max-width: 640px;
  font-size: 18px; line-height: 1.7; color: var(--sb-muted, #8A8A8A);
}
.sb-hero-actions { display: flex; gap: var(--sb-sp-sm, 16px); justify-content: center; flex-wrap: wrap; }
.sb-hero-decor { position: absolute; inset: 0; pointer-events: none; }
.sb-hero .sb-blob { position: absolute; border-radius: 50%; background: var(--sb-brand, #E8401C); }
.sb-hero .sb-blob-1 { width: 340px; height: 340px; top: -140px; right: -90px; opacity: .08; }
.sb-hero .sb-blob-2 { width: 220px; height: 220px; bottom: -110px; left: -70px; opacity: .06; }
.sb-hero .sb-ring {
  position: absolute; width: 150px; height: 150px; top: 24px; left: 7%;
  border: 2px dashed var(--sb-brand, #E8401C); opacity: .16; border-radius: 50%;
}

/* —— 卡片皮肤（白卡 + 静置浅投影 + hover 抬升，列表/卡片区共用） —— */
/* —— 图文卡片统一高度（全局）：竖排卡与横排重点卡同高，封面高度固定 ——
   数值以列表行卡片（封面 152 + 正文 160）为基准，所有图文卡统一 312px；
   封面不再跟着列宽做 16:9，避免同为一行却因列宽不同而高低不齐。 */
:root { --sb-cardh: 312px; --sb-cardmediah: 152px; }

.sb-cardit {
  display: flex; flex-direction: column; height: var(--sb-cardh);
  background: var(--sb-card, #fff); color: inherit; text-decoration: none;
  border: 1px solid var(--sb-line, #E7E0D8); border-radius: var(--sb-radius-2, 20px);
  overflow: hidden; box-shadow: var(--sb-shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* 纯文字卡片（无封面）：按内容自适应高度，不与图文卡的 312px 定高对齐 */
.sb-cardit--text {
  height: 100%;
  min-height: 0;
}
.sb-cardit--text:not(.sb-cardit-h) > div:last-child {
  flex: 1 1 auto;
}
/* 纯文字卡固定文案结构：标题一行 + 副标题两行，同排卡片高度一致 */
.sb-cardit-text-body {
  padding: var(--sb-sp-md, 24px);
  display: flex; flex-direction: column;
}
.sb-cardit-text-title {
  margin: 0 0 .35em; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
.sb-cardit-text-desc {
  margin: 0; color: var(--sb-muted, #8A8A8A);
  font-size: 14px; line-height: 1.65;
  min-height: calc(1.65em * 2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 竖排卡：封面定高 + 正文区撑满剩余高度，日期行贴底对齐 */
.sb-cardit:not(.sb-cardit-h) .sb-cardit-cover {
  height: var(--sb-cardmediah); aspect-ratio: auto;
}
.sb-cardit:not(.sb-cardit-h) > div:last-child {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* 正文版心：标题/摘要/日期各占固定高度，保证定高卡里标题两行 + 摘要两行 + 日期都完整可见 */
.sb-cardit-body { padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; }
.sb-cardit-body > * { flex: none; }
.sb-cardit-date { margin-top: auto; padding-top: 8px; }
.sb-cardit:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-2); border-color: var(--sb-line-strong, rgba(26,26,26,.18)); }
.sb-cardit-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sb-surface, #F5F0EB); }

/* —— 无封面占位缩略图（品牌感底纹，不留白） —— */
.sb-cardit-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: rgba(232, 64, 28, .32);
  background:
    radial-gradient(120% 120% at 84% 10%, rgba(232, 64, 28, .20), transparent 58%),
    linear-gradient(135deg, #FBE9E1 0%, #F5F0EB 55%, #EFE7DE 100%);
}
.sb-cardit-ph::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(26, 26, 26, .045) 0 1px, transparent 1px 9px);
}
.sb-cardit-ph > span {
  position: relative; z-index: 1;
  font-family: var(--sb-font-display, inherit); font-size: 44px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}

/* —— 横排图文卡片（图左 / 信息右；与竖排卡同高；移动端回落竖排） —— */
.sb-cardit-h {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch; height: var(--sb-cardh);
}
.sb-cardit-h .sb-cardit-cover {
  width: 100%; height: 100%; min-height: 0;
  aspect-ratio: auto; object-fit: cover;
}
.sb-cardit-h-body {
  min-width: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 12px;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.8vw, 34px);
}
.sb-cardit-h-tag {
  align-self: flex-start; padding: .28em .95em; border-radius: 999px;
  border: 1px solid var(--sb-line-strong, rgba(26, 26, 26, .18));
  background: transparent; color: var(--sb-ink-2, #57534E);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.sb-cardit-h-body h4 {
  margin: 0; font-family: var(--sb-font-display, inherit);
  font-size: clamp(21px, 2.4vw, 28px); font-weight: 800;
  line-height: 1.28; letter-spacing: -0.015em; color: var(--sb-ink, #1A1A1A);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sb-cardit-h-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--sb-muted, #8A8A8A);
}
.sb-cardit-h-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sb-cardit-h-meta svg { flex: none; opacity: .8; }
.sb-cardit-h-sum {
  margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--sb-ink-2, #57534E);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sb-cardit-h-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  padding: .68em 1.4em; border-radius: 999px;
  background: var(--sb-brand, #E8401C); color: #fff; font-size: 14px; font-weight: 700;
  transition: filter .18s ease, transform .18s ease;
}
.sb-cardit-h:hover { transform: translateY(-4px); }
.sb-cardit-h:hover .sb-cardit-h-cta { filter: brightness(1.08); transform: translateX(2px); }
@media (max-width: 1023px) {
  .sb-cardit-h { height: var(--sb-cardh); grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); }
  .sb-cardit-h .sb-cardit-cover { height: 100%; aspect-ratio: auto; }
  .sb-cardit-h-body { padding: 20px 22px; gap: 10px; }
  .sb-cardit-h-body h4 { font-size: clamp(19px, 2.3vw, 24px); }
  .sb-cardit-h-sum { font-size: 14px; -webkit-line-clamp: 2; }
}
@media (max-width: 767px) {
  /* 移动端单列堆叠：取消定高，封面回到 16:9 */
  .sb-cardit { height: auto; }
  .sb-cardit:not(.sb-cardit-h) .sb-cardit-cover { height: auto; aspect-ratio: 16 / 9; }
  .sb-cardit-body { padding: var(--sb-sp-md, 24px); }
  .sb-cardit-h { grid-template-columns: 1fr; height: auto; }
  .sb-cardit-h .sb-cardit-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .sb-cardit-h-body { padding: var(--sb-sp-md, 24px); }
}

/* —— 时间轴（左线 + 橙红节点） —— */
.sb-tl { position: relative; border-left: 2px solid var(--sb-line, #E7E0D8); padding-left: var(--sb-sp-md, 24px); }
.sb-tl-item { position: relative; padding-bottom: var(--sb-sp-md, 24px); }
.sb-tl-item:last-child { padding-bottom: 0; }
.sb-tl-item::before {
  content: ''; position: absolute; left: calc(-1 * var(--sb-sp-md, 24px) - 7px); top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sb-brand, #E8401C); box-shadow: 0 0 0 3px var(--sb-surface, #F5F0EB);
}
.sb-tl-date { font-family: var(--sb-font-num, 'Inter', sans-serif); font-weight: 800; color: var(--sb-brand, #E8401C); font-size: 14px; letter-spacing: .02em; }

/* —— FAQ（details/summary + 暖灰线 + "+" 指示） —— */
.sb-faq details { border-bottom: 1px solid var(--sb-line, #E7E0D8); }
.sb-faq summary {
  position: relative; list-style: none; cursor: pointer; font-weight: 600;
  padding: 18px 40px 18px 0; transition: color .15s ease;
}
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--sb-muted, #8A8A8A); line-height: 1;
}
.sb-faq details[open] summary::after { content: '−'; color: var(--sb-brand, #E8401C); }
.sb-faq summary:hover { color: var(--sb-brand, #E8401C); }

/* —— CTA 深色横幅（R11，设计稿 seg-home-4：每页 1 个深色节奏块） ——
 * 左列（橙药丸眉题+大标题+灰描述）+ 右列纵排按钮组 + 底部联系信息列；
 * 右下角锈红装饰圆溢出裁切。旧居中布局已按设计稿改为左对齐。 */
.sb-cta {
  position: relative; overflow: hidden;
  background: var(--sb-bg, var(--sb-ink, #1A1A1A)); color: var(--sb-text, #fff);
  border-radius: var(--sb-radius-2, 20px);
  padding: var(--sb-sp-xl, 64px) var(--sb-sp-xl, 64px) var(--sb-sp-lg, 40px);
  text-align: left;
}
.sb-cta::after {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--sb-rust-2, #8B3A24), var(--sb-rust, #7A2E1D));
  right: -90px; bottom: -120px;
}
.sb-cta > * { position: relative; z-index: 1; }
.sb-cta-main { display: flex; gap: var(--sb-sp-lg, 40px); align-items: flex-start; justify-content: space-between; }
.sb-cta-copy { flex: 1; min-width: 0; }
.sb-cta-eyebrow {
  display: inline-block; background: var(--sb-brand, #E8401C); color: #fff;
  font-family: var(--sb-font-num, 'IBM Plex Mono', monospace);
  font-size: var(--sb-fz-caption, 13px); font-weight: 600; letter-spacing: .04em;
  border-radius: 999px; padding: 5px 14px; margin-bottom: var(--sb-sp-md, 24px);
}
.sb-cta h2 {
  margin: 0 0 var(--sb-sp-sm, 16px); font-family: var(--sb-font-display, inherit);
  font-size: clamp(30px, 3.8vw, 40px); font-weight: 800; line-height: 1.3;
  letter-spacing: -0.01em; max-width: 12.5em;
}
.sb-cta-copy p { margin: 0; max-width: 500px; opacity: .66; line-height: 1.8; font-size: 15px; }
.sb-cta-actions { display: flex; flex-direction: column; gap: 14px; flex: 0 0 210px; }
.sb-cta-actions .sb-btn { width: 100%; justify-content: center; }
.sb-cta-contacts { display: flex; gap: var(--sb-sp-xl, 64px); flex-wrap: wrap; margin-top: var(--sb-sp-lg, 40px); }
.sb-cta-clabel { font-size: var(--sb-fz-caption, 13px); opacity: .55; margin-bottom: 6px; }
.sb-cta-cvalue { font-size: 15px; font-weight: 700; }

/* —— 特性卡组（R11，设计稿协作区块：橙眉题+标题+副句 + 三张深色圆角卡） ——
 * 卡头双形态：序号徽章（.sb-fcard-num）或橙色小标签（.sb-fcard-tag）；
 * 卡右上角锈红装饰圆溢出裁切。 */
.sb-flist-head { margin-bottom: var(--sb-sp-lg, 40px); }
.sb-flist-head .sb-eyebrow { margin-bottom: var(--sb-sp-sm, 16px); }
.sb-flist-title {
  margin: 0 0 10px; font-family: var(--sb-font-display, inherit);
  font-size: var(--sb-fz-h2, 32px); font-weight: 800; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--sb-ink, #1A1A1A);
}
.sb-flist-sub { margin: 0; color: var(--sb-muted, #8A8A8A); font-size: 15px; line-height: 1.7; }
.sb-fcard {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--sb-ink, #1A1A1A); color: #fff;
  border-radius: var(--sb-radius-1, 12px);
  padding: 26px 26px 28px;
}
.sb-fcard::before {
  content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--sb-rust-2, #8B3A24), var(--sb-rust, #7A2E1D));
  top: -48px; right: -48px;
}
.sb-fcard > * { position: relative; z-index: 1; }
.sb-fcard-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sb-brand, #E8401C);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sb-font-num, 'IBM Plex Mono', monospace);
  margin-bottom: 14px;
}
.sb-fcard-tag {
  color: var(--sb-brand, #E8401C); font-size: var(--sb-fz-caption, 13px);
  font-weight: 700; letter-spacing: .02em; margin-bottom: 10px;
}
.sb-fcard-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.sb-fcard-desc { font-size: 13.5px; line-height: 1.75; opacity: .62; }

/* —— 统计区（数字大号品牌色 + caption 标签，米白底直接排版不裹白卡） —— */
.sb-stat { text-align: center; }
.sb-stat .n {
  font-family: var(--sb-font-num, 'Inter', sans-serif); font-weight: 800;
  font-size: 44px; line-height: 1.1; color: var(--sb-brand, #E8401C);
  font-variant-numeric: tabular-nums;
}
.sb-stat .l { margin-top: 6px; font-size: var(--sb-fz-caption, 13px); color: var(--sb-muted, #8A8A8A); letter-spacing: .04em; }

/* =========================================================================
 * 动效体系（阶段5-C）：加载 stagger + 滚动 reveal + 微交互
 * 全部包在 prefers-reduced-motion: no-preference 内；
 * 滚动 reveal 由 site-motion.js 运行时挂 .sb-anim/.sb-in（no-js 安全）
 * ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* —— 首页首屏加载 stagger（hero 子元素依次淡入上移，播一次） —— */
  @keyframes sb-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .sb-hero .sb-hero-eyebrow,
  .sb-hero .sb-hero-title,
  .sb-hero .sb-hero-sub,
  .sb-hero .sb-hero-actions {
    animation: sb-rise .55s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .sb-hero .sb-hero-eyebrow { animation-delay: .05s; }
  .sb-hero .sb-hero-title   { animation-delay: .14s; }
  .sb-hero .sb-hero-sub     { animation-delay: .23s; }
  .sb-hero .sb-hero-actions { animation-delay: .32s; }

  /* —— 滚动 reveal（仅 site-motion.js 启动后生效；首屏区块由 JS 排除） —— */
  html.sb-anim .sb-section {
    opacity: 0;
    transform: translateY(18px);
  }
  html.sb-anim .sb-section.sb-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  }

  /* —— 微交互：按钮按压反馈（hover 态已有 brightness/边框变化） —— */
  .sb-btn:active { transform: scale(.97); }
}

/* =========================================================================
 * 详情页结构化布局（R8：核心内容区按实体写死，设计稿基线 p5-*）
 * 左 2/3 正文 + 右 1/3 sticky 信息卡；移动端单列。
 * ========================================================================= */

/* —— 眉题：字距拉开的橙色大写小字 —— */
.sb-eyebrow {
  font-family: var(--sb-font-num, 'IBM Plex Mono', monospace);
  font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sb-brand, #E8401C); margin-bottom: 14px;
}

/* —— 返回链接 —— */
.sb-back { margin-bottom: 22px; }
.sb-back a {
  color: var(--sb-muted, #8A8A8A); text-decoration: none;
  font-size: 14px; font-weight: 600; transition: color .15s ease;
}
.sb-back a:hover { color: var(--sb-brand, #E8401C); }

/* —— 两栏骨架（头部通栏在网格之外，信息卡从第一个内容小节开始） —— */
.sb-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4.5vw, 60px); align-items: start;
  margin-top: 22px;
}
.sb-detail-main { min-width: 0; }
.sb-detail-main > .sb-dsec:first-child { margin-top: 0; }
.sb-detail-aside {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 16px;
}
/* 嘉宾卡在右栏内单列排布，与信息卡上下并排、共用 sticky 滚动 */
.sb-detail-aside .sb-guests { margin: 0; }
.sb-detail-aside .sb-guest-grid { grid-template-columns: 1fr; }

/* —— 标题层级 —— */
.sb-dtitle {
  margin: 0 0 18px; font-family: var(--sb-font-display, inherit);
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 800;
  line-height: 1.22; letter-spacing: -0.015em; color: var(--sb-ink, #1A1A1A);
}
.sb-dsub { font-size: 15px; color: var(--sb-muted, #8A8A8A); line-height: 1.6; }
.sb-dlead { font-size: 17px; line-height: 1.8; color: var(--sb-ink-2, #57534E); margin: 0 0 1em; }
.sb-dcover {
  display: block; width: 100%; max-height: 520px; object-fit: cover;
  border-radius: var(--sb-radius-2, 20px); border: 1px solid var(--sb-line, #E7E0D8);
  margin: 0 0 var(--sb-sp-md, 24px);
}

/* —— 详情组件编辑器缩略图占位（不消费真实业务数据） —— */
.sb-detail-thumb {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--sb-card, #fff);
  border: 1px dashed var(--sb-line-strong, rgba(26, 26, 26, .18));
  border-radius: var(--sb-radius-2, 20px);
}
.sb-detail-thumb-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr);
  gap: 10px;
}
.sb-detail-thumb-cover {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 6;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FBE9E1 0%, #F5F0EB 55%, #EFE7DE 100%);
  color: rgba(232, 64, 28, .62);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.sb-detail-thumb-main { display: flex; flex-direction: column; gap: 8px; }
.sb-detail-thumb-main span,
.sb-detail-thumb-card span {
  display: block; height: 8px; border-radius: 999px; background: #EFE9E2;
}
.sb-detail-thumb-main .w70 { width: 70%; height: 12px; background: #E4DDD4; }
.sb-detail-thumb-main .w95 { width: 95%; }
.sb-detail-thumb-main .w60 { width: 60%; }
.sb-detail-thumb-main .w85 { width: 85%; }
.sb-detail-thumb-card {
  border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff;
}
.sb-detail-thumb-card .w50 { width: 50%; height: 10px; background: #E4DDD4; }
.sb-detail-thumb-card .w80 { width: 80%; }
.sb-detail-thumb-card .w70 { width: 70%; }
.sb-detail-thumb-copy { min-width: 0; }
.sb-detail-thumb-label {
  margin-bottom: 6px;
  font-size: 16px; font-weight: 800; color: var(--sb-ink, #1A1A1A);
}
.sb-detail-thumb-copy p {
  margin: 0;
  font-size: 13px; line-height: 1.7; color: var(--sb-muted, #8A8A8A);
}
@media (max-width: 640px) {
  .sb-detail-thumb { grid-template-columns: 1fr; }
}

/* —— 标签行 / 药丸 —— */
.sb-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.sb-detail .sb-tagrow:first-child { margin-top: 0; }
.sb-pill {
  display: inline-block; padding: .32em 1em; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.sb-pill--tint { background: var(--sb-brand-tint, #FFF3EC); color: var(--sb-brand-dark, #C5330F); }
.sb-pill--dark { background: var(--sb-ink, #1A1A1A); color: #fff; }
.sb-pill--line { border: 1px solid var(--sb-line-strong, rgba(26,26,26,.18)); color: var(--sb-ink-2, #57534E); background: transparent; }

/* —— 状态胶囊 —— */
.sb-status {
  display: inline-block; padding: .28em .95em; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--sb-brand-tint, #FFF3EC); color: var(--sb-brand-dark, #C5330F);
}
.sb-status[data-state='off'] { background: #EFEAE3; color: var(--sb-muted, #8A8A8A); }

/* —— 圆头像 / 成员·伙伴头部 —— */
.sb-avatar { border-radius: 50%; object-fit: cover; flex: none; display: block; }
.sb-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--sb-brand, #E8401C); color: #fff; font-weight: 800; flex: none;
}
.sb-member-head { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.sb-member-head-text { min-width: 0; }
.sb-member-head-text .sb-dtitle { margin-bottom: 6px; }
.sb-member-head-text .sb-tagrow { margin-bottom: 10px; }
.sb-logosq {
  flex: none; width: 72px; height: 72px; border-radius: 18px; overflow: hidden;
  background: var(--sb-brand, #E8401C); color: #fff; font-size: 30px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.sb-logosq img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* —— 分节 —— */
.sb-dsec { margin-top: 38px; }
.sb-dsec-title {
  margin: 0 0 14px; font-family: var(--sb-font-display, inherit);
  font-size: 23px; font-weight: 800; line-height: 1.3; color: var(--sb-ink, #1A1A1A);
}
.sb-dsec-desc { margin: -6px 0 14px; font-size: 14px; color: var(--sb-muted, #8A8A8A); line-height: 1.7; }
.sb-detail-main p { margin: 0 0 1em; line-height: 1.85; font-size: 15.5px; color: var(--sb-ink-2, #57534E); }
.sb-detail-main p:last-child { margin-bottom: 0; }
.sb-detail-main ul { margin: 0 0 1em; padding-left: 1.4em; line-height: 1.85; font-size: 15.5px; color: var(--sb-ink-2, #57534E); }

/* —— 富文本正文（活动介绍 / 文章正文 / 伙伴详细介绍） —— */
.sb-rich { color: var(--sb-ink-2, #57534E); font-size: 15.5px; line-height: 1.85; }
.sb-rich > *:first-child { margin-top: 0; }
.sb-rich > *:last-child { margin-bottom: 0; }
.sb-rich p { margin: 0 0 1em; }
.sb-rich h2 {
  margin: 1.7em 0 .5em; font-family: var(--sb-font-display, inherit);
  font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--sb-ink, #1A1A1A);
}
.sb-rich h3 {
  margin: 1.5em 0 .45em; font-family: var(--sb-font-display, inherit);
  font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--sb-ink, #1A1A1A);
}
.sb-rich h4 { margin: 1.4em 0 .4em; font-size: 15.5px; font-weight: 700; color: var(--sb-ink, #1A1A1A); }
/* 全局样式里 ul 被重置为 list-style:none，这里显式还原符号 */
.sb-rich ul { list-style: disc outside; margin: 0 0 1em; padding-left: 1.35em; }
.sb-rich ol { list-style: decimal outside; margin: 0 0 1em; padding-left: 1.5em; }
.sb-rich li { margin: .35em 0; padding-left: 2px; }
.sb-rich li::marker { color: var(--sb-brand, #E8401C); font-size: .9em; }
.sb-rich blockquote {
  margin: 1.4em 0; padding: 12px 16px;
  border-left: 3px solid var(--sb-brand, #E8401C);
  border-radius: 0 10px 10px 0;
  background: var(--sb-brand-tint, #FBE9E1);
  color: var(--sb-ink-2, #57534E); font-size: 15px;
}
.sb-rich blockquote p { margin: 0; }
.sb-rich a { color: var(--sb-brand-dark, #C5330F); text-decoration: underline; text-underline-offset: 2px; }
.sb-rich strong, .sb-rich b { font-weight: 700; color: var(--sb-ink, #1A1A1A); }
.sb-rich img { display: block; max-width: 100%; height: auto; margin: 1.4em 0; border-radius: var(--sb-radius-2, 20px); }
.sb-rich hr { margin: 2em 0; border: 0; border-top: 1px solid var(--sb-line, #E7E0D8); }
.sb-rich code { padding: .12em .4em; border-radius: 5px; background: var(--sb-surface-2, #EFEAE3); font-size: .92em; }
.sb-rich pre { margin: 0 0 1em; padding: 14px 16px; border-radius: 12px; background: var(--sb-ink, #1A1A1A); color: #F5F0EB; overflow-x: auto; font-size: 13.5px; line-height: 1.7; }
.sb-rich pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }

/* —— 分享嘉宾：成员名片（点击进个人主页；未公开主页显示锁定态） —— */
.sb-guests { margin: 6px 0 8px; }
.sb-guests-label {
  margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sb-muted, #8A8A8A);
}
.sb-guest-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 288px));
}
.sb-guest {
  display: flex; align-items: center; gap: 14px;
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-2, 20px); padding: 14px 16px;
  text-decoration: none; color: inherit; box-shadow: var(--sb-shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sb-guest--link:hover {
  transform: translateY(-2px); box-shadow: var(--sb-shadow-2);
  border-color: rgba(232, 64, 28, .34);
}
.sb-guest--link:hover .sb-guest-more svg { transform: translateX(2px); }
.sb-guest-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-guest-name {
  font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--sb-ink, #1A1A1A);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-guest-role {
  font-size: 13px; line-height: 1.5; color: var(--sb-ink-2, #57534E);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-guest-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 12px; font-weight: 700; color: var(--sb-brand, #E8401C);
}
.sb-guest-more svg { transition: transform .16s ease; }
.sb-guest-more.is-locked { color: #A8A29B; font-weight: 600; }
.sb-guest .sb-avatar { border: 2px solid var(--sb-brand, #E8401C); }

/* —— 活动议程 —— */
.sb-agenda { list-style: none; padding: 0; margin: 0; }
.sb-agenda li {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--sb-line, #E7E0D8); font-size: 15px; color: var(--sb-ink-2, #57534E);
}
.sb-agenda li:last-child { border-bottom: none; }
.sb-agenda b { flex: none; min-width: 110px; color: var(--sb-brand, #E8401C); font-family: var(--sb-font-num, inherit); font-weight: 700; }

/* —— 右侧信息卡 —— */
.sb-icard {
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-2, 20px); padding: 26px 24px; box-shadow: var(--sb-shadow-1);
}
.sb-icard-title { font-size: 16px; font-weight: 800; color: var(--sb-ink, #1A1A1A); margin-bottom: 6px; }
.sb-icard-rows { margin-top: 4px; }
.sb-icard-row {
  display: flex; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--sb-line, #E7E0D8); font-size: 14px;
}
.sb-icard-row:last-child { border-bottom: none; }
.sb-icard-label { flex: none; width: 3.5em; color: var(--sb-muted, #8A8A8A); }
.sb-icard-value { min-width: 0; color: var(--sb-ink, #1A1A1A); line-height: 1.6; word-break: break-word; }
.sb-icard-group { border-top: 1px solid var(--sb-line, #E7E0D8); margin-top: 12px; padding-top: 14px; }
.sb-icard-gtitle { font-size: 14px; font-weight: 700; color: var(--sb-ink, #1A1A1A); margin-bottom: 8px; }
.sb-icard-glink {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  font-size: 13.5px; color: var(--sb-ink-2, #57534E); text-decoration: none; line-height: 1.6;
}
a.sb-icard-glink { color: var(--sb-brand, #E8401C); font-weight: 600; }
a.sb-icard-glink:hover { color: var(--sb-brand-dark, #C5330F); }
.sb-icard .sb-btn { margin-top: 18px; }
.sb-icard-btn { width: 100%; justify-content: center; }
.sb-icard .sb-btn[data-variant='ghost'] { width: 100%; justify-content: center; cursor: default; }
.sb-icard-foot { margin-top: 14px; font-size: 12px; color: var(--sb-muted, #8A8A8A); line-height: 1.65; }

/* —— 关联行卡（白底横条 + chip） —— */
.sb-relrow {
  display: flex; align-items: center; gap: 16px;
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-1, 12px); padding: 15px 20px;
  text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.sb-relrow + .sb-relrow { margin-top: 12px; }
.sb-relrow:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-1); }
.sb-relrow-body { flex: 1 1 auto; min-width: 0; }
.sb-relrow-title { font-weight: 700; font-size: 15px; color: var(--sb-ink, #1A1A1A); }
.sb-relrow-meta { font-size: 13px; color: var(--sb-muted, #8A8A8A); margin-top: 3px; }
.sb-relrow-chip {
  flex: none; padding: .3em 1em; border-radius: 999px;
  border: 1px solid var(--sb-line-strong, rgba(26,26,26,.18));
  font-size: 12px; color: var(--sb-ink-2, #57534E); background: #fff;
}

/* —— 关联小卡组（橙 tag + 标题 + meta） —— */
.sb-tagcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sb-tagcard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-1, 12px); padding: 18px 20px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-tagcard:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-1); }
.sb-tagcard .sb-pill { margin-bottom: 8px; }
.sb-tagcard-title { font-weight: 800; font-size: 15px; line-height: 1.5; color: var(--sb-ink, #1A1A1A); }
.sb-tagcard-meta { font-size: 12px; color: var(--sb-muted, #8A8A8A); margin-top: 5px; font-family: var(--sb-font-num, inherit); }

/* —— 伙伴可公开资源卡 —— */
.sb-rescards { display: flex; flex-direction: column; gap: 16px; }
.sb-rescard {
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-1, 12px); padding: 20px 24px; box-shadow: var(--sb-shadow-1);
}
.sb-rescard .sb-tagrow { margin-bottom: 10px; }
.sb-rescard-title { font-size: 18px; font-weight: 800; color: var(--sb-brand-dark, #C5330F); margin-bottom: 6px; }
.sb-rescard-desc { margin: 0 0 10px; font-size: 14px; color: var(--sb-ink-2, #57534E); line-height: 1.7; }
.sb-resrow { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.7; }
.sb-resrow b { flex: none; color: var(--sb-muted, #8A8A8A); font-weight: 600; }
.sb-resrow span { color: var(--sb-ink-2, #57534E); min-width: 0; }

/* —— 空态白卡 —— */
.sb-empty {
  background: var(--sb-card, #fff); border: 1px solid var(--sb-line, #E7E0D8);
  border-radius: var(--sb-radius-2, 20px); padding: 64px 32px;
  text-align: center; color: var(--sb-muted, #8A8A8A); font-size: 15px;
  box-shadow: var(--sb-shadow-1);
}

/* —— 竖排卡片：封面 tag 胶囊浮层 + 摘要两行截断 —— */
.sb-cardit-coverwrap { position: relative; overflow: hidden; flex: none; }
.sb-cardit-flag {
  position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px);
  padding: .28em .95em; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--sb-brand-dark, #C5330F);
  font-size: 12px; font-weight: 700; backdrop-filter: blur(4px);
}
.sb-cardit-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* —— 详情页响应式：平板起单列，信息卡回落文档流 —— */
@media (max-width: 1023px) {
  .sb-detail { grid-template-columns: 1fr; gap: 32px; }
  .sb-detail-aside { position: static; max-width: 480px; }
  .sb-guest { padding: 13px 15px; }
  .sb-guest-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 260px)); }
}
@media (max-width: 767px) {
  .sb-back { margin-bottom: 16px; }
  .sb-dsec { margin-top: 30px; }
  .sb-member-head { gap: 16px; }
  .sb-avatar { width: 72px !important; height: 72px !important; }
  .sb-guest-grid { grid-template-columns: 1fr; }
  .sb-guest .sb-avatar { width: 52px !important; height: 52px !important; }
  .sb-agenda b { min-width: 88px; }
}

/* =========================================================================
 * 响应式断点（唯一来源）
 * ========================================================================= */
@media (max-width: 1023px) {
  .sb-el {
    font-size: var(--sb-fs-md, var(--sb-fs, inherit));
    line-height: var(--sb-lh-md, var(--sb-lh, inherit));
    font-weight: var(--sb-fw-md, var(--sb-fw, inherit));
    text-align: var(--sb-align-md, var(--sb-align, inherit));
    margin-top: var(--sb-mt-md, var(--sb-mt, 0));
    margin-bottom: var(--sb-mb-md, var(--sb-mb, 0));
    padding: var(--sb-pad-md, var(--sb-pad, 0));
  }
  .sb-grid {
    grid-template-columns: repeat(var(--sb-cols-md, var(--sb-cols, 1)), 1fr);
    gap: var(--sb-gap-md, var(--sb-gap, 24px));
    grid-column-gap: var(--sb-gapx-md, var(--sb-gapx, var(--sb-gap, 24px)));
    grid-row-gap: var(--sb-gapy-md, var(--sb-gapy, var(--sb-gap, 24px)));
  }
  .sb-flex { gap: var(--sb-gap-md, var(--sb-gap, 24px)); padding: var(--sb-pad-md, var(--sb-pad, 0)); }
  .sb-box { padding: var(--sb-pad-md, var(--sb-pad, 0)); max-width: var(--sb-maxw, none); }
  /* 原语层级平板档（防通用 .sb-el 回落 inherit 抹平字号） */
  .sb-el[data-sb='heading'] { font-size: var(--sb-fs-md, var(--sb-fs, 28px)); }
}

@media (max-width: 767px) {
  .sb-el {
    font-size: var(--sb-fs-sm, var(--sb-fs-md, var(--sb-fs, inherit)));
    line-height: var(--sb-lh-sm, var(--sb-lh-md, var(--sb-lh, inherit)));
    font-weight: var(--sb-fw-sm, var(--sb-fw-md, var(--sb-fw, inherit)));
    text-align: var(--sb-align-sm, var(--sb-align-md, var(--sb-align, inherit)));
    margin-top: var(--sb-mt-sm, var(--sb-mt-md, var(--sb-mt, 0)));
    margin-bottom: var(--sb-mb-sm, var(--sb-mb-md, var(--sb-mb, 0)));
    padding: var(--sb-pad-sm, var(--sb-pad-md, var(--sb-pad, 0)));
  }
  .sb-grid {
    grid-template-columns: repeat(var(--sb-cols-sm, var(--sb-cols-md, var(--sb-cols, 1))), 1fr);
    gap: var(--sb-gap-sm, var(--sb-gap-md, var(--sb-gap, 24px)));
    grid-column-gap: var(--sb-gapx-sm, var(--sb-gapx-md, var(--sb-gapx, var(--sb-gap, 24px))));
    grid-row-gap: var(--sb-gapy-sm, var(--sb-gapy-md, var(--sb-gapy, var(--sb-gap, 24px))));
  }
  .sb-flex { gap: var(--sb-gap-sm, var(--sb-gap-md, var(--sb-gap, 24px))); padding: var(--sb-pad-sm, var(--sb-pad-md, var(--sb-pad, 0))); }
  .sb-box { padding: var(--sb-pad-sm, var(--sb-pad-md, var(--sb-pad, 0))); }
  /* 原语层级手机档 */
  .sb-el[data-sb='heading'] { font-size: var(--sb-fs-sm, var(--sb-fs-md, 24px)); }
  .sb-el[data-sb='button'] { margin-right: var(--sb-sp-xs, 8px); }
  .sb-container { padding-left: 16px; padding-right: 16px; }
  /* 品牌组件手机档收紧（H9 阶段2.2） */
  .sb-hero { padding: 56px var(--sb-sp-sm, 16px) 48px; }
  .sb-hero .sb-blob-1 { width: 220px; height: 220px; top: -100px; right: -70px; }
  .sb-hero .sb-ring { display: none; }
  .sb-cta { padding: var(--sb-sp-lg, 40px) var(--sb-sp-md, 24px); }
  .sb-cta-main { flex-direction: column; }
  .sb-cta-actions { flex-basis: auto; width: 100%; }
  .sb-cta-contacts { gap: var(--sb-sp-md, 24px); margin-top: var(--sb-sp-lg, 40px); }
  .sb-flist-head { margin-bottom: var(--sb-sp-md, 24px); }
  .sb-stat .n { font-size: 36px; }
}