/*
 * 数学拆书工坊 · 组件样式
 * 只引用 tokens.css 里的令牌。类名前缀 .mbs-，一个组件一段，段首注明组件名和类型。
 */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mbs-bg); color: var(--mbs-fg); font: var(--mbs-text-md)/var(--mbs-leading-body) var(--mbs-font-sans); }
a { color: inherit; }
:focus-visible { outline: var(--mbs-rule-strong) solid var(--mbs-accent); outline-offset: var(--mbs-space-1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- MbsSeal · 通用/图标 ---------- */
.mbs-seal { width: var(--mbs-seal); height: var(--mbs-seal); flex: none; }
.mbs-seal rect { fill: var(--mbs-color-cinnabar); }
.mbs-seal text { fill: var(--mbs-color-seal-ink); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); }

/* ---------- MbsNavBar · 导航/导航栏 ---------- */
.mbs-nav { display: flex; align-items: center; gap: var(--mbs-space-3); max-width: var(--mbs-page-max); margin: 0 auto; padding: var(--mbs-space-4) var(--mbs-gutter); }
.mbs-nav__brand { display: flex; align-items: center; gap: var(--mbs-space-2); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-md); text-decoration: none; }
.mbs-nav__by { font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
.mbs-nav__links { margin-left: auto; display: flex; gap: var(--mbs-space-6); font-size: var(--mbs-text-sm); }
.mbs-nav__links a { text-decoration: none; color: var(--mbs-fg-2); }
.mbs-nav__links a:hover { color: var(--mbs-fg); }
@media (max-width: 760px) { .mbs-nav { padding: var(--mbs-space-3) var(--mbs-gutter-sm); } .mbs-nav__links { display: none; } }

/* ---------- MbsButton · 通用/按钮 ---------- */
/* 主按钮：墨色实底 + 末尾箭头，悬停只让箭头前移，不换灰；次按钮：无框，纸上划线；朱砂按钮只用在吸顶卡和底部条 */
.mbs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--mbs-space-2); min-height: var(--mbs-control-h); padding: 0 var(--mbs-space-6); border-radius: var(--mbs-radius-sm); border: none; font: inherit; font-size: var(--mbs-text-md); letter-spacing: var(--mbs-tracking-button); text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform var(--mbs-dur-fast) var(--mbs-ease), box-shadow var(--mbs-dur-fast); }
.mbs-btn--primary { background: var(--mbs-btn-bg); color: var(--mbs-btn-fg); box-shadow: inset 0 calc(-1 * var(--mbs-edge-2)) 0 var(--mbs-color-press-shade); }
.mbs-btn--accent { background: var(--mbs-accent); color: var(--mbs-color-on-cinnabar); box-shadow: inset 0 calc(-1 * var(--mbs-edge-2)) 0 var(--mbs-color-press-shade); }
.mbs-btn--primary::after, .mbs-btn--accent::after { content: "→"; display: inline-block; transition: transform var(--mbs-dur-base) var(--mbs-ease); }
.mbs-btn--primary:hover::after, .mbs-btn--accent:hover::after { transform: translateX(var(--mbs-space-1)); }
.mbs-btn--ghost { background: transparent; color: var(--mbs-fg); box-shadow: inset 0 0 0 var(--mbs-rule) var(--mbs-fg); transition: background-color var(--mbs-dur-fast), color var(--mbs-dur-fast); }
.mbs-btn--ghost:hover { background: var(--mbs-fg); color: var(--mbs-bg); }
.mbs-btn:focus-visible { outline: var(--mbs-rule-strong) solid var(--mbs-fg); outline-offset: var(--mbs-space-1); }
.mbs-btn:active { transform: translateY(var(--mbs-rule)); box-shadow: none; }
.mbs-btn[disabled], .mbs-btn[aria-disabled="true"] { opacity: var(--mbs-opacity-disabled); cursor: not-allowed; transform: none; }
.mbs-btn[disabled]::after, .mbs-btn[aria-busy="true"]::after { content: none; }
.mbs-btn[aria-busy="true"] { cursor: progress; }
.mbs-btn[aria-busy="true"]::before { content: ""; width: var(--mbs-space-3); height: var(--mbs-space-3); border-radius: var(--mbs-radius-pill); border: var(--mbs-rule-strong) solid currentColor; border-right-color: transparent; animation: mbs-spin var(--mbs-dur-spin) linear infinite; }
.mbs-btn--block { display: flex; width: 100%; }
@keyframes mbs-spin { to { transform: rotate(1turn); } }

/* ---------- MbsSectionHead · 通用/文字排版 ---------- */
.mbs-eyebrow { font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-eyebrow); color: var(--mbs-fg-2); }
.mbs-eyebrow__no { display: inline-flex; align-items: center; gap: var(--mbs-space-2); margin-right: var(--mbs-space-2); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); color: var(--mbs-accent); }
.mbs-eyebrow__no::after { content: ""; width: var(--mbs-space-5); border-top: var(--mbs-rule) solid currentColor; }
.mbs-h2 { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-2xl); line-height: var(--mbs-leading-snug); letter-spacing: var(--mbs-tracking-tight); margin: var(--mbs-space-2) 0 0; }
.mbs-lede { font-size: var(--mbs-text-lg); color: var(--mbs-fg-2); max-width: var(--mbs-measure); margin: var(--mbs-space-4) 0 0; }

/* ---------- 页面骨架：左内容 + 右吸顶栏 ---------- */
.mbs-page { overflow-x: clip; max-width: var(--mbs-page-max); margin: 0 auto; padding: 0 var(--mbs-gutter); display: grid; grid-template-columns: minmax(0, 1fr) var(--mbs-rail-w); gap: var(--mbs-space-12); }
.mbs-section { padding: var(--mbs-space-16) 0; border-top: var(--mbs-rule) solid var(--mbs-line); }
.mbs-rail { position: relative; }
@media (max-width: 980px) { .mbs-page { grid-template-columns: minmax(0, 1fr); padding: 0 var(--mbs-gutter-sm); gap: 0; } .mbs-rail { display: none; } }

/* ---------- MbsFreeCard · 数据展示/卡片（吸顶，借 Affix 行为） ---------- */
.mbs-freecard { position: sticky; top: var(--mbs-space-16); margin-top: var(--mbs-space-10); border: var(--mbs-rule) solid var(--mbs-line); border-radius: var(--mbs-radius-lg); padding: var(--mbs-space-5) var(--mbs-space-5) var(--mbs-space-4); background: var(--mbs-bg); z-index: var(--mbs-z-sticky); }
.mbs-freecard__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mbs-space-2); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-md); }
.mbs-freecard__tag { font-family: var(--mbs-font-sans); font-size: var(--mbs-text-sm); color: var(--mbs-accent); white-space: nowrap; }
.mbs-freecard > ul { list-style: none; margin: var(--mbs-space-3) 0 var(--mbs-space-4); padding: 0; font-size: var(--mbs-text-sm); }
.mbs-freecard > ul > li { padding: var(--mbs-space-1) 0; border-top: var(--mbs-rule) dashed var(--mbs-line); }
.mbs-freecard > ul > li::before { content: "✓"; color: var(--mbs-accent); margin-right: var(--mbs-space-2); font-weight: var(--mbs-weight-bold); }
.mbs-freecard__more { display: block; text-align: center; font-size: var(--mbs-text-sm); margin-top: var(--mbs-space-3); color: var(--mbs-fg-2); }

/* ---------- MbsBottomBar · 其他/固钉（手机） ---------- */
.mbs-bottombar { display: none; }
@media (max-width: 980px) {
  .mbs-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--mbs-z-bar); gap: var(--mbs-space-3); align-items: center; padding: var(--mbs-space-3) var(--mbs-space-4) calc(var(--mbs-space-3) + env(safe-area-inset-bottom)); background: var(--mbs-bg); border-top: var(--mbs-rule) solid var(--mbs-line); }
  .mbs-bottombar__text { flex: 1; min-width: 0; font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
  .mbs-bottombar .mbs-btn { min-height: var(--mbs-control-h-sm); }
  body { padding-bottom: calc(var(--mbs-control-h) + var(--mbs-space-6)); }
}

/* ---------- MbsHero · 首屏（布局 + 文字排版） ---------- */
.mbs-herowrap { max-width: var(--mbs-page-max); margin: 0 auto; padding: 0 var(--mbs-gutter); }
.mbs-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-items: center; gap: var(--mbs-space-12); padding: var(--mbs-space-16) 0; }
.mbs-hero__copy { display: grid; justify-items: center; width: 100%; position: relative; z-index: var(--mbs-z-content); min-width: 0; }
.mbs-hero__title { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-hero-b); line-height: 1.05; letter-spacing: var(--mbs-tracking-tight); margin: var(--mbs-space-3) 0 0; }
.mbs-hero__title .mbs-nowrap { white-space: nowrap; }
.mbs-hero__title em { font-style: normal; color: var(--mbs-accent); }
.mbs-herowrap .mbs-eyebrow { font-size: var(--mbs-text-sm); }
.mbs-hero__sub { color: var(--mbs-fg-2); font-size: var(--mbs-text-lg); margin: var(--mbs-space-6) auto 0; max-width: var(--mbs-measure); word-break: keep-all; }
.mbs-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mbs-space-6); margin-top: var(--mbs-space-8); }
.mbs-herowrap .mbs-flip { max-width: var(--mbs-flip-max-wide); text-align: left; }
@media (max-width: 980px) { .mbs-herowrap { padding: 0 var(--mbs-gutter-sm); } }
@media (max-width: 760px) { .mbs-hero { padding: var(--mbs-space-8) 0 var(--mbs-space-12); gap: var(--mbs-space-8); } }

/* ---------- MbsPageFlip · 数据展示/轮播（讲义翻页动画，参考 1） ---------- */
.mbs-flip { position: relative; perspective: var(--mbs-flip-perspective); width: 100%; max-width: var(--mbs-flip-max); aspect-ratio: var(--mbs-flip-ratio); margin: 0 auto; }
.mbs-flip__book { position: absolute; inset: 0; transform: rotateX(var(--mbs-flip-tilt)); transform-style: preserve-3d; }
.mbs-flip__half, .mbs-flip__leaf > div { position: absolute; top: 0; bottom: 0; background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); overflow: hidden; padding: var(--mbs-space-5) var(--mbs-space-4); font-size: var(--mbs-text-flip); line-height: var(--mbs-leading-body); }
.mbs-flip__half { width: 50%; }
.mbs-flip__half--l { left: 0; border-radius: var(--mbs-radius-md) 0 0 var(--mbs-radius-md); background: linear-gradient(90deg, var(--mbs-color-sheet-light), var(--mbs-color-sheet) 70%, var(--mbs-color-sheet-fold)); box-shadow: calc(-1 * var(--mbs-rule)) var(--mbs-rule) 0 var(--mbs-color-page-edge-1), calc(-1 * var(--mbs-edge-2)) var(--mbs-edge-2) 0 var(--mbs-color-page-edge-2), calc(-1 * var(--mbs-edge-3)) var(--mbs-edge-3) 0 var(--mbs-color-page-edge-3), calc(-1 * var(--mbs-edge-4)) var(--mbs-edge-4) 0 var(--mbs-color-page-edge-4), calc(-1 * var(--mbs-edge-5)) var(--mbs-edge-5) 0 var(--mbs-color-page-edge-5), var(--mbs-shadow-float); }
.mbs-flip__half--r { right: 0; border-radius: 0 var(--mbs-radius-md) var(--mbs-radius-md) 0; background: linear-gradient(270deg, var(--mbs-color-sheet-light), var(--mbs-color-sheet) 70%, var(--mbs-color-sheet-fold)); box-shadow: var(--mbs-rule) var(--mbs-rule) 0 var(--mbs-color-page-edge-1), var(--mbs-edge-2) var(--mbs-edge-2) 0 var(--mbs-color-page-edge-2), var(--mbs-edge-3) var(--mbs-edge-3) 0 var(--mbs-color-page-edge-3), var(--mbs-edge-4) var(--mbs-edge-4) 0 var(--mbs-color-page-edge-4), var(--mbs-edge-5) var(--mbs-edge-5) 0 var(--mbs-color-page-edge-5), var(--mbs-shadow-float); }
.mbs-flip__leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; animation: mbs-turn var(--mbs-dur-flip-cycle) var(--mbs-ease) infinite; }
.mbs-flip__leaf > div { inset: 0; backface-visibility: hidden; border-radius: 0 var(--mbs-radius-md) var(--mbs-radius-md) 0; }
.mbs-flip__leaf > .mbs-flip__back { transform: rotateY(180deg); border-radius: var(--mbs-radius-md) 0 0 var(--mbs-radius-md); }
/* 不用 opacity：opacity 会把 3D 拍平，背面文字会变成镜像（2026-11-06 实测） */
@keyframes mbs-turn { 0% { transform: rotateY(0); visibility: hidden; } 4% { visibility: visible; transform: rotateY(0); } 22% { transform: rotateY(0); } 42% { transform: rotateY(-180deg); } 97% { transform: rotateY(-180deg); visibility: visible; } 98%, 100% { transform: rotateY(-180deg); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .mbs-flip__leaf { animation: none; display: none; } }
.mbs-flip__run { display: flex; justify-content: space-between; font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-color-sheet-ink-2); border-bottom: var(--mbs-rule) solid var(--mbs-color-sheet-edge); padding-bottom: var(--mbs-space-1); margin-bottom: var(--mbs-space-2); }
.mbs-flip h5 { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-sm); margin: 0 0 var(--mbs-space-2); }
.mbs-flip p { margin: 0 0 var(--mbs-space-1); }
@media (max-width: 520px) { .mbs-flip { aspect-ratio: var(--mbs-flip-ratio-sm); } .mbs-flip__half, .mbs-flip__leaf > div { padding: var(--mbs-space-3) var(--mbs-space-2); } }

/* ---------- MbsZhupi · 通用/文字排版（朱批：讲义里补全的步骤） ---------- */
.mbs-zhupi { border-left: var(--mbs-rule-strong) solid var(--mbs-color-sheet-zhu); padding: var(--mbs-space-1) 0 var(--mbs-space-1) var(--mbs-space-3); margin: var(--mbs-space-3) 0; }
.mbs-zhupi__label { display: block; font-family: var(--mbs-font-kai); color: var(--mbs-color-sheet-zhu); font-size: var(--mbs-text-md); }
.mbs-ring { font-family: var(--mbs-font-kai); color: var(--mbs-color-sheet-zhu); border: var(--mbs-rule) solid var(--mbs-color-sheet-zhu); border-radius: var(--mbs-radius-pill); padding: 0 var(--mbs-space-1); }
.mbs-term { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); color: var(--mbs-color-sheet-term); }

/* ---------- MbsLectureSheet · 数据展示/卡片（一页讲义） ---------- */
.mbs-sheet { background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); padding: var(--mbs-space-8) var(--mbs-space-8) var(--mbs-space-5); font-size: var(--mbs-text-sheet); line-height: var(--mbs-leading-sheet); box-shadow: var(--mbs-shadow-sheet); min-width: 0; }
.mbs-sheet h4 { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-lg); margin: 0 0 var(--mbs-space-3); }
.mbs-sheet p { margin: 0; }
.mbs-sheet p + p { margin-top: var(--mbs-space-2); }
.mbs-sheet .tag { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); color: var(--mbs-color-sheet-term); }
.mbs-sheet .fill { border-left: var(--mbs-rule-strong) solid var(--mbs-color-sheet-zhu); padding: var(--mbs-space-1) 0 var(--mbs-space-1) var(--mbs-space-3); margin: var(--mbs-space-3) 0; }
.mbs-sheet .fill b { display: block; font-family: var(--mbs-font-kai); font-weight: var(--mbs-weight-regular); color: var(--mbs-color-sheet-zhu); font-size: var(--mbs-text-md); }
.mbs-sheet .katex-display { overflow-x: auto; overflow-y: hidden; }
.mbs-sheet__folio { display: flex; justify-content: space-between; margin-top: var(--mbs-space-4); padding-top: var(--mbs-space-2); border-top: var(--mbs-rule) solid var(--mbs-color-sheet-edge); font-size: var(--mbs-text-xs); color: var(--mbs-color-sheet-ink-2); }
@media (max-width: 760px) { .mbs-sheet { padding: var(--mbs-space-6) var(--mbs-space-4) var(--mbs-space-4); overflow-x: auto; } }

/* 讲义页 + 页旁朱批 */
.mbs-reel { display: grid; gap: var(--mbs-space-12); margin-top: var(--mbs-space-8); }
.mbs-spread { display: grid; grid-template-columns: minmax(0, 1fr) var(--mbs-note-w); gap: var(--mbs-space-6); align-items: start; }
.mbs-marginnote { font-family: var(--mbs-font-kai); color: var(--mbs-accent); font-size: var(--mbs-text-lg); line-height: var(--mbs-leading-body); padding-top: var(--mbs-space-8); position: sticky; top: var(--mbs-space-16); }
.mbs-marginnote small { display: block; font-family: var(--mbs-font-sans); font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-fg-2); }
@media (max-width: 760px) { .mbs-spread { grid-template-columns: minmax(0, 1fr); gap: var(--mbs-space-2); } .mbs-marginnote { position: static; padding-top: 0; order: -1; } }

/* ---------- MbsCollapse · 数据展示/折叠面板（FAQ） ---------- */
/* 每问前一个朱砂序号，右侧细箭头展开时转向，答案带左侧细线，像讲义里的问答 */
.mbs-collapse { margin-top: var(--mbs-space-5); counter-reset: mbs-faq; border-top: var(--mbs-rule) solid var(--mbs-line); }
.mbs-collapse details { border-bottom: var(--mbs-rule) solid var(--mbs-line); counter-increment: mbs-faq; }
.mbs-collapse summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: var(--mbs-space-10) minmax(0, 1fr) var(--mbs-space-6); align-items: baseline; gap: 0 var(--mbs-space-2); padding: var(--mbs-space-5) 0; font-family: var(--mbs-font-serif); font-size: var(--mbs-text-lg); font-weight: var(--mbs-weight-bold); }
.mbs-collapse summary::-webkit-details-marker { display: none; }
.mbs-collapse summary::before { content: counter(mbs-faq, decimal-leading-zero); font-family: var(--mbs-font-serif); font-size: var(--mbs-text-sm); font-weight: var(--mbs-weight-regular); color: var(--mbs-accent); }
.mbs-collapse summary::after { content: "›"; justify-self: end; font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); color: var(--mbs-fg-2); transform: rotate(90deg); transition: transform var(--mbs-dur-base) var(--mbs-ease); }
.mbs-collapse details[open] summary::after { transform: rotate(-90deg); color: var(--mbs-accent); }
.mbs-collapse summary:hover { color: var(--mbs-accent); }
.mbs-collapse p { margin: 0 0 var(--mbs-space-5) var(--mbs-space-10); padding-left: var(--mbs-space-4); border-left: var(--mbs-rule) solid var(--mbs-line); color: var(--mbs-fg-2); max-width: var(--mbs-measure); }

/* ---------- MbsExpander · 折叠面板的变体（「易知」点开成三步，参考 4 试字器） ---------- */
/* 一段讲义摘录，不是悬浮大卡；「易知」是朱砂椭圆圈注，点开后圈注填实，三步以朱批形式长在下面 */
.mbs-expander { margin-top: var(--mbs-space-7); background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); border-radius: var(--mbs-radius-sm); padding: var(--mbs-space-7) var(--mbs-space-8); box-shadow: var(--mbs-shadow-sheet); }
.mbs-expander__orig { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-lg); line-height: var(--mbs-leading-body); }
.mbs-expander__toggle { position: relative; font: inherit; font-family: var(--mbs-font-kai); background: none; color: var(--mbs-color-sheet-zhu); cursor: pointer; padding: 0 var(--mbs-space-2); margin: 0 var(--mbs-space-1); border: var(--mbs-rule-strong) solid var(--mbs-color-sheet-zhu); border-radius: var(--mbs-radius-pill); transition: background-color var(--mbs-dur-base), color var(--mbs-dur-base); }
.mbs-expander__toggle::after { content: "点开"; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(-1 * var(--mbs-space-1))); font-family: var(--mbs-font-sans); font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-color-sheet-ink-2); white-space: nowrap; }
.mbs-expander__toggle:hover { background: var(--mbs-color-sheet-light); }
.mbs-expander.is-open .mbs-expander__toggle { background: var(--mbs-color-sheet-zhu); color: var(--mbs-color-on-cinnabar); }
.mbs-expander.is-open .mbs-expander__toggle::after { content: "收起"; }
.mbs-expander__steps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mbs-dur-page) var(--mbs-ease); }
.mbs-expander.is-open .mbs-expander__steps { grid-template-rows: 1fr; }
.mbs-expander__steps > div { overflow: hidden; }
.mbs-expander ol { list-style: none; counter-reset: mbs-step; margin: var(--mbs-space-4) 0 0; padding: 0 0 0 var(--mbs-space-4); border-left: var(--mbs-rule-strong) solid var(--mbs-color-sheet-zhu); font-size: var(--mbs-text-md); line-height: var(--mbs-leading-sheet); }
.mbs-expander ol li { counter-increment: mbs-step; display: grid; grid-template-columns: var(--mbs-space-6) minmax(0, 1fr); }
.mbs-expander ol li::before { content: counter(mbs-step, cjk-ideographic); font-family: var(--mbs-font-kai); color: var(--mbs-color-sheet-zhu); }
.mbs-expander__hint { font-size: var(--mbs-text-sm); color: var(--mbs-color-sheet-ink-2); margin: var(--mbs-space-4) 0 0; padding-top: var(--mbs-space-3); border-top: var(--mbs-rule) solid var(--mbs-color-sheet-edge); }

/* ---------- MbsLedger · 数据展示/列表（AI 不说人话 对照） ---------- */
.mbs-ledger { margin-top: var(--mbs-space-6); border-top: var(--mbs-rule-strong) solid var(--mbs-fg); }
.mbs-ledger__row { display: grid; grid-template-columns: var(--mbs-space-10) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--mbs-space-5); padding: var(--mbs-space-4) 0; border-bottom: var(--mbs-rule) solid var(--mbs-line); }
.mbs-ledger__head { font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); padding: var(--mbs-space-2) 0; }
.mbs-ledger__n { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xl); color: var(--mbs-fg-2); line-height: var(--mbs-leading-tight); }
.mbs-ledger__lab { display: block; font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); }
.mbs-ledger__bad .mbs-ledger__lab { color: var(--mbs-fg-2); }
.mbs-ledger__good .mbs-ledger__lab { color: var(--mbs-accent); }
.mbs-ledger__bad b, .mbs-ledger__good b { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-lg); }
.mbs-ledger__bad b { text-decoration: line-through; text-decoration-color: var(--mbs-accent); text-decoration-thickness: var(--mbs-rule-strong); }
.mbs-ledger p { margin: var(--mbs-space-1) 0 0; font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
@media (max-width: 760px) { .mbs-ledger__row { grid-template-columns: var(--mbs-space-8) minmax(0, 1fr); } .mbs-ledger__good { grid-column: 2; margin-top: var(--mbs-space-3); padding-left: var(--mbs-space-3); border-left: var(--mbs-rule-strong) solid var(--mbs-accent); } .mbs-ledger__head { display: none; } }

/* ---------- MbsStat · 数据展示/统计数值（巨型数字，数据来自覆盖网格） ---------- */
.mbs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--mbs-space-5); border-top: var(--mbs-rule) solid var(--mbs-line); }
.mbs-stat { padding: var(--mbs-space-4) var(--mbs-space-4) var(--mbs-space-2) 0; min-width: 0; }
.mbs-stat + .mbs-stat { padding-left: var(--mbs-space-5); border-left: var(--mbs-rule) solid var(--mbs-line); }
.mbs-stat b { display: block; font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-stat); line-height: var(--mbs-leading-none); letter-spacing: var(--mbs-tracking-tight); }
.mbs-stat--accent b { color: var(--mbs-accent); }
.mbs-stat span { display: block; font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); margin-top: var(--mbs-space-2); }
.mbs-stat[aria-busy="true"] b { color: transparent; background: var(--mbs-bg-2); border-radius: var(--mbs-radius-sm); }

/* ---------- MbsCoverageGrid · 数据展示/宫格（逐条覆盖，参考 4 字形网格） ---------- */
/* 像目录卡片：左上序号、类别，中间条目名；补了步骤的盖一枚朱砂小印「补」，不用灰底 */
.mbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mbs-grid-cell-min), 1fr)); gap: var(--mbs-space-3); margin-top: var(--mbs-space-7); padding: 0; }
.mbs-grid__cell { position: relative; background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); box-shadow: 0 var(--mbs-rule) 0 var(--mbs-color-page-edge-1), 0 var(--mbs-edge-2) 0 var(--mbs-color-page-edge-3); padding: var(--mbs-space-3) var(--mbs-space-3) var(--mbs-space-4); min-height: var(--mbs-grid-cell-h); display: flex; flex-direction: column; gap: var(--mbs-space-1); min-width: 0; }
.mbs-grid__no { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xs); color: var(--mbs-color-sheet-ink-2); }
.mbs-grid__kind { font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-color-sheet-term); }
.mbs-grid__name { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-md); line-height: var(--mbs-leading-snug); margin-top: auto; }
.mbs-grid__state { font-size: var(--mbs-text-xs); color: var(--mbs-color-sheet-ink-2); }
.mbs-grid__cell.is-filled .mbs-grid__state { color: var(--mbs-color-sheet-zhu); }
.mbs-grid__cell.is-filled::after { content: "补"; position: absolute; top: var(--mbs-space-3); right: var(--mbs-space-3); width: var(--mbs-space-6); height: var(--mbs-space-6); display: grid; place-items: center; background: var(--mbs-color-sheet-zhu); color: var(--mbs-color-seal-ink); font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xs); font-weight: var(--mbs-weight-bold); border-radius: var(--mbs-radius-sm); transform: rotate(-4deg); }

/* ---------- MbsManifesto · 通用/文字排版 ---------- */

/* ---------- MbsRadio · 数据录入/单选框（投票） ---------- */
/* 不露原生圆点：整枚签条可点，选中时墨底白字并在前面盖一个朱砂点 */
.mbs-radios { display: flex; flex-wrap: wrap; gap: var(--mbs-space-2); }
.mbs-radio { position: relative; display: inline-flex; gap: var(--mbs-space-2); align-items: center; min-height: var(--mbs-control-h-sm); border: var(--mbs-rule) solid var(--mbs-line); border-radius: var(--mbs-radius-sm); padding: 0 var(--mbs-space-4); cursor: pointer; font-size: var(--mbs-text-sm); background: var(--mbs-bg); transition: border-color var(--mbs-dur-fast), background-color var(--mbs-dur-fast), color var(--mbs-dur-fast); }
.mbs-radio input { position: absolute; opacity: 0; width: var(--mbs-rule); height: var(--mbs-rule); margin: 0; pointer-events: none; }
.mbs-radio::before { content: ""; width: var(--mbs-space-2); height: var(--mbs-space-2); border-radius: var(--mbs-radius-pill); border: var(--mbs-rule) solid var(--mbs-fg-2); }
.mbs-radio:hover { border-color: var(--mbs-fg); }
.mbs-radio:has(input:checked) { background: var(--mbs-fg); border-color: var(--mbs-fg); color: var(--mbs-bg); }
.mbs-radio:has(input:checked)::before { background: var(--mbs-accent); border-color: var(--mbs-accent); }
.mbs-radio:has(input:focus-visible) { outline: var(--mbs-rule-strong) solid var(--mbs-fg); outline-offset: var(--mbs-rule-strong); }
.mbs-radio:has(input:disabled) { opacity: var(--mbs-opacity-disabled); cursor: not-allowed; }

/* ---------- MbsInput · 数据录入/输入框（单元格式，参照 Vant Field / TDesign Mobile Input） ---------- */
/* 标签在左、输入在右，几行合在一张讲义纸卡里；聚焦时标签转朱砂、左侧出一道朱批线；出错时标签转朱砂并在下一行给原因 */
.mbs-fields { background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); border-radius: var(--mbs-radius-md); box-shadow: var(--mbs-shadow-sheet); overflow: hidden; }
.mbs-field { position: relative; display: grid; grid-template-columns: var(--mbs-field-label-w) minmax(0, 1fr); align-items: center; min-height: var(--mbs-control-h); padding: 0 var(--mbs-space-4); }
.mbs-field + .mbs-field::before { content: ""; position: absolute; left: var(--mbs-space-4); right: 0; top: 0; border-top: var(--mbs-rule) solid var(--mbs-color-sheet-edge); }
.mbs-field__label { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-md); transition: color var(--mbs-dur-fast); }
.mbs-input { font: inherit; font-size: var(--mbs-text-md); min-height: var(--mbs-control-h); border: none; background: transparent; color: inherit; outline: none; min-width: 0; width: 100%; padding: 0; }
.mbs-input::placeholder { color: var(--mbs-color-sheet-ink-2); opacity: var(--mbs-opacity-placeholder); }
.mbs-field:focus-within .mbs-field__label { color: var(--mbs-color-sheet-zhu); }
.mbs-field:focus-within::after { content: ""; position: absolute; left: 0; top: var(--mbs-space-3); bottom: var(--mbs-space-3); border-left: var(--mbs-rule-strong) solid var(--mbs-color-sheet-zhu); }
.mbs-field:has(.mbs-input:disabled) { opacity: var(--mbs-opacity-disabled); }
.mbs-field:has(.mbs-input[aria-invalid="true"]) .mbs-field__label { color: var(--mbs-color-sheet-zhu); }
.mbs-field .mbs-field__err { grid-column: 2; margin: 0; padding-bottom: var(--mbs-space-2); min-height: 0; font-size: var(--mbs-text-xs); color: var(--mbs-color-sheet-zhu); }
.mbs-field .mbs-field__err:empty { display: none; }
.mbs-field__err { font-size: var(--mbs-text-sm); color: var(--mbs-accent); min-height: var(--mbs-space-5); margin: var(--mbs-space-2) 0 0; }
.mbs-form { display: grid; gap: var(--mbs-space-4); margin-top: var(--mbs-space-5); max-width: var(--mbs-form-max); }

/* ---------- 页脚 ---------- */
.mbs-footer { max-width: var(--mbs-page-max); margin: 0 auto; padding: var(--mbs-space-7) var(--mbs-gutter); border-top: var(--mbs-rule) solid var(--mbs-line); font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); display: flex; flex-wrap: wrap; gap: var(--mbs-space-2) var(--mbs-space-6); }
.mbs-footer__promo { color: var(--mbs-accent); }
.mbs-footer a { color: inherit; }
.mbs-nav__links a[aria-current="page"] { color: var(--mbs-fg); }

/* ======================================================================
 * 第一批子页面新增（2026-11-06）。每个组件先和 Vant / TDesign Mobile 同类组件比结构，比对写在段首。
 * ====================================================================== */

/* ---------- 版面工具：只在窄屏 / 宽屏出现（断点同上：980） ---------- */
@media (min-width: 981px) { .mbs-only-narrow { display: none; } }
.mbs-h3 { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-lg); line-height: var(--mbs-leading-snug); margin: 0; }
.mbs-mono { font-family: var(--mbs-font-mono); }
.mbs-sub { margin-top: var(--mbs-space-8); }
/* 段落最后一块是列表时，去掉末行的底线，免得和下一段的顶线叠成两道 */
.mbs-section > :is(.mbs-cells, .mbs-services):last-child > :last-child, .mbs-block > .mbs-cells:last-child > :last-child { border-bottom: none; }
.mbs-page > main:has(.mbs-pagehead) { padding-bottom: var(--mbs-space-12); }
.mbs-section--first { border-top: none; padding-top: 0; }
.mbs-actions { display: flex; flex-wrap: wrap; gap: var(--mbs-space-3); align-items: center; margin-top: var(--mbs-space-6); }

/* ---------- MbsPageHead · 通用/文字排版（子页面页头） ---------- */
/* 结构同首页段落标题：小字眉题 → 页标题 → 一句说明；页标题比段落标题大一档、比首屏标题小 */
.mbs-pagehead { padding: var(--mbs-space-8) 0 var(--mbs-space-12); }
.mbs-h1 { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-h1); line-height: var(--mbs-leading-snug); letter-spacing: var(--mbs-tracking-tight); margin: var(--mbs-space-3) 0 0; text-wrap: balance; }
.mbs-pagehead .mbs-lede { margin-top: var(--mbs-space-3); text-wrap: pretty; }
.mbs-pagehead__meta { display: flex; flex-wrap: wrap; gap: var(--mbs-space-1) var(--mbs-space-4); margin-top: var(--mbs-space-3); font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
.mbs-pagehead .mbs-cells { margin-top: var(--mbs-space-8); }
.mbs-pagehead__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mbs-space-2) var(--mbs-space-3); }
@media (max-width: 760px) { .mbs-pagehead { padding: var(--mbs-space-4) 0 var(--mbs-space-10); } }

/* ---------- MbsTag · 数据展示/标签（对照 Vant Tag：plain、size；这里只要浅底无框一种） ---------- */
.mbs-tags { display: flex; flex-wrap: wrap; gap: var(--mbs-space-2); margin: 0; padding: 0; list-style: none; }
.mbs-tag { display: inline-flex; align-items: center; min-height: var(--mbs-tag-h); padding: 0 var(--mbs-space-2); border-radius: var(--mbs-radius-sm); background: var(--mbs-bg-2); color: var(--mbs-fg); font-size: var(--mbs-text-xs); white-space: nowrap; }

/* ---------- MbsStamp · MbsTag 的变体（印章式状态，文档 §0.3.4） ---------- */
/* 对照 Vant Tag 的 type / plain：这里按含义固定三种——
 *   ink（墨框）：在等我们，例如待报价、制作中、返修中
 *   zhu（朱砂框）：轮到你动手，例如已报价、待验收
 *   solid（朱砂实底）：盖章的结论，例如已交付、已收到；以及推广标识 */
.mbs-stamp { display: inline-flex; align-items: center; gap: var(--mbs-space-1); min-height: var(--mbs-tag-h); padding: 0 var(--mbs-space-2); border: var(--mbs-rule-strong) solid currentColor; border-radius: var(--mbs-radius-sm); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-sm); letter-spacing: var(--mbs-tracking-button); line-height: var(--mbs-leading-none); white-space: nowrap; transform: rotate(var(--mbs-stamp-tilt)); }
.mbs-stamp--ink { color: var(--mbs-fg); }
.mbs-stamp--zhu { color: var(--mbs-accent); }
.mbs-stamp--solid { color: var(--mbs-color-on-cinnabar); background: var(--mbs-accent); border-color: var(--mbs-accent); }
.mbs-stamp--promo { font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-accent); border-width: var(--mbs-rule); transform: none; }
.mbs-promo { display: inline-flex; align-items: center; gap: var(--mbs-space-2); font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
.mbs-sheet .mbs-stamp--solid { background: var(--mbs-color-sheet-zhu); border-color: var(--mbs-color-sheet-zhu); color: var(--mbs-color-seal-ink); }

/* ---------- MbsCell · 数据展示/单元格（对照 Vant Cell：标题、值、说明、右箭头 is-link） ---------- */
/* 只读信息：标签淡墨在左、值浓墨在右，行间细线；不画成输入框的白纸卡（看图类别 6） */
.mbs-cells { margin: var(--mbs-space-4) 0 0; padding: 0; border-top: var(--mbs-rule) solid var(--mbs-line); }
.mbs-cell { display: grid; grid-template-columns: var(--mbs-cell-label-w) minmax(0, 1fr) auto; gap: var(--mbs-space-1) var(--mbs-space-4); align-items: baseline; padding: var(--mbs-space-3) 0; border-bottom: var(--mbs-rule) solid var(--mbs-line); margin: 0; }
.mbs-cell__label { font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); margin: 0; }
.mbs-cell__value { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.mbs-cell__value small { display: block; font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
.mbs-cell__action { justify-self: end; align-self: center; }
.mbs-cell__action .mbs-btn { min-height: var(--mbs-control-h-sm); }
.mbs-cell--link { color: inherit; text-decoration: none; cursor: pointer; align-items: center; min-height: var(--mbs-control-h); }
.mbs-cell--link::after { content: "›"; color: var(--mbs-fg-2); font-size: var(--mbs-text-lg); line-height: var(--mbs-leading-none); }
.mbs-cell--link:hover .mbs-cell__value { color: var(--mbs-accent); }
.mbs-cell--link.is-nolabel, .mbs-cell--link.is-nolabel .mbs-cell__value { grid-template-columns: minmax(0, 1fr) auto; grid-column: auto; }
button.mbs-cell { width: 100%; background: none; border: 0; border-bottom: var(--mbs-rule) solid var(--mbs-line); font: inherit; text-align: left; color: inherit; }
.mbs-cells--plain .mbs-cell { grid-template-columns: var(--mbs-cell-label-w) minmax(0, 1fr); }
.mbs-cells--files .mbs-cell, .mbs-cells--files .mbs-cell.is-off { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mbs-cells--files .mbs-cell__value { font-family: var(--mbs-font-serif); }
.mbs-cells--files .mbs-cell__value small { font-family: var(--mbs-font-sans); }
.mbs-block > .mbs-fold:last-child { border-bottom: none; }
.mbs-cells--files .mbs-cell__action { grid-column: 2; }
.mbs-cell.is-off .mbs-cell__value { color: var(--mbs-fg-2); }
@media (max-width: 520px) { .mbs-cell, .mbs-cells--plain .mbs-cell { grid-template-columns: var(--mbs-field-label-w) minmax(0, 1fr); gap: var(--mbs-space-1) var(--mbs-space-3); } .mbs-cell__action { grid-column: 2; justify-self: start; } .mbs-cell--link { grid-template-columns: var(--mbs-field-label-w) minmax(0, 1fr) auto; } .mbs-cell--link.is-nolabel { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- MbsTimeline · 数据展示/步骤条（对照 Vant Steps direction=vertical：图标、标题、说明、active） ---------- */
/* 已完成：墨点 + 墨线；当前：朱砂点外加一圈宣纸底的环，标题加粗；还没到：空心点、淡墨字；返修支线：赭石点 */
.mbs-steps { list-style: none; margin: var(--mbs-space-5) 0 0; padding: 0; }
.mbs-step { position: relative; display: grid; grid-template-columns: var(--mbs-space-6) minmax(0, 1fr); gap: 0 var(--mbs-space-3); padding-bottom: var(--mbs-space-5); }
.mbs-step::before { content: ""; width: var(--mbs-dot); height: var(--mbs-dot); margin: calc((var(--mbs-text-md) * var(--mbs-leading-body) - var(--mbs-dot)) / 2) auto 0; border-radius: var(--mbs-radius-pill); border: var(--mbs-rule-strong) solid var(--mbs-line); background: var(--mbs-bg); box-sizing: border-box; }
.mbs-step::after { content: ""; position: absolute; left: calc(var(--mbs-space-6) / 2 - var(--mbs-rule)); top: calc((var(--mbs-text-md) * var(--mbs-leading-body) + var(--mbs-dot)) / 2 + var(--mbs-space-1)); bottom: var(--mbs-space-1); border-left: var(--mbs-rule-strong) solid var(--mbs-line); }
.mbs-step:last-child { padding-bottom: 0; }
.mbs-step:last-child::after { content: none; }
.mbs-step__title { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-md); }
.mbs-step__meta { display: block; font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
.mbs-step.is-done::before { background: var(--mbs-fg); border-color: var(--mbs-fg); }
.mbs-step.is-done::after { border-left-color: var(--mbs-fg); }
.mbs-step.is-current::before { background: var(--mbs-accent); border-color: var(--mbs-accent); box-shadow: 0 0 0 var(--mbs-space-1) var(--mbs-bg-2); }
.mbs-step.is-current .mbs-step__title { font-weight: var(--mbs-weight-bold); }
.mbs-step.is-current .mbs-step__meta { color: var(--mbs-accent); }
.mbs-step.is-todo .mbs-step__title { color: var(--mbs-fg-2); }
.mbs-step.is-flow::before { border-color: var(--mbs-fg); }
.mbs-step.is-flow::after { border-left-color: var(--mbs-fg); }
.mbs-step.is-branch::before { background: var(--mbs-color-ochre); border-color: var(--mbs-color-ochre); }
.mbs-step.is-branch.is-current::before { box-shadow: 0 0 0 var(--mbs-space-1) var(--mbs-bg-2); }

/* ---------- MbsNotice · 反馈/提示条（对照 Vant NoticeBar：图标、文字、可关闭；这里做成行内一行，不做整块框） ---------- */
.mbs-notice { display: block; margin: var(--mbs-space-4) 0 0; padding: var(--mbs-space-1) 0 var(--mbs-space-1) var(--mbs-space-3); border-left: var(--mbs-rule-strong) solid var(--mbs-color-ochre); font-size: var(--mbs-text-sm); color: var(--mbs-fg); }
.mbs-notice b { font-weight: var(--mbs-weight-bold); }
.mbs-notice--err { border-left-color: var(--mbs-accent); color: var(--mbs-accent); }
.mbs-notice--ok { border-left-color: var(--mbs-fg); }
.mbs-notice:empty { display: none; }

/* ---------- MbsResult · 反馈/结果（对照 TDesign Mobile Result：图标、标题、描述、操作；Vant Empty 同构） ---------- */
/* 图标位换成一枚印章；左对齐，和页面其余内容同一条左边线 */
.mbs-result { display: grid; justify-items: start; gap: var(--mbs-space-3); padding: var(--mbs-space-6) 0 var(--mbs-space-8); }
.mbs-result .mbs-stamp { font-size: var(--mbs-text-lg); padding: var(--mbs-space-2) var(--mbs-space-3); }
.mbs-result__title { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-xl); line-height: var(--mbs-leading-snug); margin: var(--mbs-space-2) 0 0; text-wrap: balance; }
.mbs-result__text { margin: 0; color: var(--mbs-fg-2); max-width: var(--mbs-measure); text-wrap: pretty; }
.mbs-result .mbs-actions { margin-top: var(--mbs-space-3); }
.mbs-result .mbs-cells { width: 100%; max-width: var(--mbs-form-max); }

/* ---------- MbsFold · MbsCollapse 的变体（单个折叠行：文字 + 数量 + 箭头，箭头方向同首页常见问题） ---------- */
.mbs-fold { margin-top: var(--mbs-space-5); border-top: var(--mbs-rule) solid var(--mbs-line); border-bottom: var(--mbs-rule) solid var(--mbs-line); }
.mbs-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--mbs-space-2); min-height: var(--mbs-control-h); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-md); }
.mbs-fold > summary::-webkit-details-marker { display: none; }
.mbs-fold > summary small { font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
.mbs-fold > summary::after { content: "›"; margin-left: auto; font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); color: var(--mbs-fg-2); transform: rotate(90deg); transition: transform var(--mbs-dur-base) var(--mbs-ease); }
.mbs-fold[open] > summary::after { transform: rotate(-90deg); color: var(--mbs-accent); }
.mbs-fold > summary:hover { color: var(--mbs-accent); }
.mbs-fold__body { padding: 0 0 var(--mbs-space-5); display: grid; gap: var(--mbs-space-5); }

/* ---------- MbsRadio 的两个变体：选择卡片（MbsChoiceCard）、复选（MbsCheckbox） ---------- */
/* 选择卡片对照 TDesign Mobile Radio 的卡片样式（标题 + 描述 + 选中底色）；复选对照 Vant Checkbox（方形图标） */
.mbs-radios--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mbs-space-2); }
.mbs-radio--card { display: grid; grid-template-columns: var(--mbs-space-2) minmax(0, 1fr); align-items: start; gap: var(--mbs-space-1) var(--mbs-space-2); padding: var(--mbs-space-3); }
.mbs-radio--card::before { margin-top: calc((var(--mbs-text-md) * var(--mbs-leading-snug) - var(--mbs-space-2)) / 2); }
.mbs-radio--card b { display: block; font-family: var(--mbs-font-serif); font-size: var(--mbs-text-md); line-height: var(--mbs-leading-snug); }
.mbs-radio--card small { display: block; font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); line-height: var(--mbs-leading-snug); }
.mbs-radio--card:has(input:checked) small { color: inherit; }
.mbs-radio--check::before { border-radius: var(--mbs-radius-sm); }
.mbs-radios.is-invalid .mbs-radio { border-color: var(--mbs-accent); }

/* ---------- 表单分组（不是组件，排版用） ---------- */
.mbs-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--mbs-space-3); }
.mbs-fieldset > legend { padding: 0; margin-bottom: var(--mbs-space-3); font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-lg); }
.mbs-fieldset > legend small { font-family: var(--mbs-font-sans); font-weight: var(--mbs-weight-regular); font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); margin-left: var(--mbs-space-2); }
.mbs-fieldset__hint { margin: 0; font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
.mbs-fieldset__err { margin: 0; font-size: var(--mbs-text-sm); color: var(--mbs-accent); }
.mbs-fieldset__err:empty { display: none; }
.mbs-fieldset--sm > legend { font-size: var(--mbs-text-md); margin-bottom: var(--mbs-space-2); }
.mbs-sub-sm { margin-top: var(--mbs-space-3); }
.mbs-form > .mbs-radio { justify-self: start; }
.mbs-form--wide { gap: var(--mbs-space-10); }
.mbs-field__label.is-required::before { content: "*"; color: var(--mbs-color-sheet-zhu); margin-right: var(--mbs-space-1); }

/* ---------- MbsTextarea · MbsInput 的变体（对照 Vant Field type=textarea：标签仍在左，输入区多行） ---------- */
.mbs-field--area { align-items: start; }
.mbs-field--area .mbs-field__label { padding-top: var(--mbs-space-3); }
.mbs-textarea { font: inherit; font-size: var(--mbs-text-md); line-height: var(--mbs-leading-body); border: none; background: transparent; color: inherit; outline: none; min-width: 0; width: 100%; padding: var(--mbs-space-3) 0; min-height: calc(var(--mbs-control-h) * 2); resize: none; }
.mbs-textarea::placeholder { color: var(--mbs-color-sheet-ink-2); opacity: var(--mbs-opacity-placeholder); }

/* ---------- MbsSampleCard · 数据展示/卡片（对照 Vant Card：缩略图、标题、描述、标签、底部操作） ---------- */
/* 封面像一本讲义：白纸、左侧赭石书脊、宋体书名、右下角一枚「拆」印；右边是字段单元格和试读按钮 */
.mbs-samples { display: grid; gap: var(--mbs-space-12); }
.mbs-samplecard { display: grid; grid-template-columns: var(--mbs-cover-w-lg) minmax(0, 1fr); grid-template-areas: "cover head" "cover cells" "cover cta"; gap: 0 var(--mbs-space-8); align-items: start; }
.mbs-samplecard__head { grid-area: head; }
.mbs-samplecard .mbs-cells { grid-area: cells; }
.mbs-samplecard .mbs-actions { grid-area: cta; margin-top: var(--mbs-space-5); }
.mbs-samplecard__title { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-xl); line-height: var(--mbs-leading-snug); margin: var(--mbs-space-2) 0 0; }
.mbs-samplecard__book { margin: var(--mbs-space-1) 0 0; color: var(--mbs-fg-2); font-size: var(--mbs-text-sm); }
.mbs-cover { grid-area: cover; position: relative; aspect-ratio: var(--mbs-cover-ratio); background: var(--mbs-color-sheet); color: var(--mbs-color-sheet-ink); border-left: var(--mbs-edge-4) solid var(--mbs-color-ochre); border-radius: 0 var(--mbs-radius-sm) var(--mbs-radius-sm) 0; box-shadow: var(--mbs-shadow-sheet); padding: var(--mbs-space-4) var(--mbs-space-3); display: flex; flex-direction: column; gap: var(--mbs-space-1); overflow: hidden; text-decoration: none; }
.mbs-cover__series { font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-color-sheet-ink-2); }
.mbs-cover__title { font-family: var(--mbs-font-serif); font-weight: var(--mbs-weight-bold); font-size: var(--mbs-text-lg); line-height: var(--mbs-leading-snug); margin-top: var(--mbs-space-3); }
.mbs-cover__sub { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-sm); color: var(--mbs-color-sheet-ink-2); }
.mbs-cover .mbs-seal { position: absolute; right: var(--mbs-space-3); bottom: var(--mbs-space-3); width: var(--mbs-space-6); height: var(--mbs-space-6); }
.mbs-cover .mbs-seal rect { fill: var(--mbs-color-sheet-zhu); }
@media (max-width: 760px) {
  .mbs-samplecard { grid-template-columns: var(--mbs-cover-w) minmax(0, 1fr); grid-template-areas: "cover head" "cells cells" "cta cta"; gap: 0 var(--mbs-space-4); }
  .mbs-cover { padding: var(--mbs-space-3) var(--mbs-space-2); }
  .mbs-cover__title { font-size: var(--mbs-text-md); margin-top: var(--mbs-space-1); }
  .mbs-cover__sub { font-size: var(--mbs-text-xs); }
  .mbs-cover .mbs-seal { width: var(--mbs-space-5); height: var(--mbs-space-5); right: var(--mbs-space-2); bottom: var(--mbs-space-2); }
  .mbs-samplecard__title { font-size: var(--mbs-text-lg); }
  .mbs-samplecard .mbs-actions .mbs-btn { flex: 1; }
}

/* ---------- MbsSampleSheet · MbsLectureSheet 的变体（样品页：水印 + 朱砂小章，文档 §0.3.4） ---------- */
.mbs-sheet--sample { position: relative; overflow: hidden; isolation: isolate; }
.mbs-sheet__mark { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; align-content: space-around; justify-items: center; overflow: hidden; color: var(--mbs-color-watermark); font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xl); letter-spacing: var(--mbs-tracking-label); white-space: nowrap; }
.mbs-sheet__mark span { transform: rotate(-24deg); }
.mbs-sheet__seal { position: absolute; top: var(--mbs-space-4); right: var(--mbs-space-4); }
.mbs-sheet--sample h4 { padding-right: var(--mbs-space-16); }

/* ---------- MbsPaywall · 反馈/遮罩层（对照 Vant Overlay：遮罩 + 居中内容；主参考没有付费墙，结构自定） ---------- */
/* 锁住的页只有空行，不放正文（R5：去掉样式也读不到）；上面一层宣纸色渐隐，中间一枚「付费解锁」章 + 两个出口 */
.mbs-paywall { position: relative; margin-top: var(--mbs-space-12); }
.mbs-paywall__pages { display: grid; gap: var(--mbs-space-6); filter: blur(var(--mbs-blur-lock)); user-select: none; -webkit-user-select: none; pointer-events: none; }
.mbs-skel { display: grid; gap: var(--mbs-space-4); padding: var(--mbs-space-2) 0 var(--mbs-space-6); }
.mbs-skel i { display: block; height: var(--mbs-skel-h); border-radius: var(--mbs-radius-sm); background: var(--mbs-color-sheet-edge); }
.mbs-skel i:nth-child(1) { width: 42%; height: calc(var(--mbs-skel-h) * 2); }
.mbs-skel i:nth-child(3n) { width: 86%; }
.mbs-skel i:nth-child(4n) { width: 64%; }
.mbs-skel i:nth-child(5n) { width: 92%; margin-left: var(--mbs-space-3); }
.mbs-paywall__veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mbs-space-3); text-align: center; padding: var(--mbs-space-6) var(--mbs-space-4); background: linear-gradient(to bottom, transparent, var(--mbs-bg) 28%, var(--mbs-bg) 72%, transparent); }
.mbs-paywall__veil .mbs-stamp { font-size: var(--mbs-text-lg); padding: var(--mbs-space-2) var(--mbs-space-3); }
.mbs-paywall__veil p { margin: 0; max-width: var(--mbs-measure); color: var(--mbs-fg-2); text-wrap: pretty; }
.mbs-paywall__veil .mbs-actions { justify-content: center; margin-top: var(--mbs-space-2); }

/* ---------- MbsServiceList · 数据展示/列表（对照 Vant List + Cell：每档一行，编号 / 名称和周期 / 交付物 / 操作） ---------- */
.mbs-services { list-style: none; margin: var(--mbs-space-6) 0 0; padding: 0; border-top: var(--mbs-rule-strong) solid var(--mbs-fg); }
.mbs-service { display: grid; grid-template-columns: var(--mbs-space-10) minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: var(--mbs-space-2) var(--mbs-space-5); align-items: start; padding: var(--mbs-space-6) 0; border-bottom: var(--mbs-rule) solid var(--mbs-line); }
.mbs-service__n { font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xl); color: var(--mbs-fg-2); line-height: var(--mbs-leading-tight); }
.mbs-service__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mbs-space-1) var(--mbs-space-3); }
.mbs-service__days { font-size: var(--mbs-text-sm); color: var(--mbs-term); white-space: nowrap; }
.mbs-service__who { margin: var(--mbs-space-1) 0 0; font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
.mbs-service .mbs-tags { padding-top: var(--mbs-space-1); }
.mbs-service .mbs-btn { min-height: var(--mbs-control-h-sm); }
@media (max-width: 760px) {
  .mbs-service { grid-template-columns: var(--mbs-space-8) minmax(0, 1fr); }
  .mbs-service .mbs-tags, .mbs-service > .mbs-btn { grid-column: 2; }
  .mbs-service > .mbs-btn { justify-self: start; }
}

/* ---------- MbsToc · 导航/锚点（对照 Vant IndexBar 的锚点跳转；手机收进 MbsFold，桌面放右栏吸顶） ---------- */
.mbs-toc { list-style: none; margin: 0; padding: 0; counter-reset: mbs-toc; }
.mbs-toc a { counter-increment: mbs-toc; display: grid; grid-template-columns: var(--mbs-space-8) minmax(0, 1fr); align-items: center; min-height: var(--mbs-control-h-sm); border-bottom: var(--mbs-rule) dashed var(--mbs-line); color: var(--mbs-fg-2); font-size: var(--mbs-text-sm); text-decoration: none; }
.mbs-toc a::before { content: counter(mbs-toc, decimal-leading-zero); font-family: var(--mbs-font-serif); font-size: var(--mbs-text-xs); color: var(--mbs-accent); }
.mbs-toc a:hover, .mbs-toc a[aria-current="true"] { color: var(--mbs-fg); }
.mbs-toc--rail { position: sticky; top: var(--mbs-space-16); margin-top: var(--mbs-space-10); }
.mbs-toc--rail .mbs-eyebrow { display: block; margin-bottom: var(--mbs-space-2); }
.mbs-clause { counter-increment: mbs-clause; scroll-margin-top: var(--mbs-space-6); padding: var(--mbs-space-10) 0; }
@media (max-width: 980px) { .mbs-clauses > .mbs-clause:first-child { border-top: none; padding-top: var(--mbs-space-2); } }
.mbs-clauses { counter-reset: mbs-clause; }
.mbs-clause .mbs-h2::before { content: counter(mbs-clause, decimal-leading-zero); display: block; font-size: var(--mbs-text-sm); font-weight: var(--mbs-weight-regular); color: var(--mbs-accent); letter-spacing: var(--mbs-tracking-label); }
.mbs-clause p, .mbs-clause li { max-width: var(--mbs-measure); }
.mbs-clause ul { padding-left: var(--mbs-space-5); margin: var(--mbs-space-4) 0 0; }
.mbs-clause li + li { margin-top: var(--mbs-space-2); }

/* ---------- MbsQrPopup · 反馈/弹出层（对照 Vant Popup round + ImagePreview：标题、大图、说明、关闭） ---------- */
.mbs-qrthumb { width: var(--mbs-control-h); height: var(--mbs-control-h); background: var(--mbs-color-sheet); padding: var(--mbs-space-1); border-radius: var(--mbs-radius-sm); box-shadow: var(--mbs-shadow-sheet); }
.mbs-popup { border: none; padding: var(--mbs-space-6); width: min(var(--mbs-popup-w), calc(100% - var(--mbs-space-8))); border-radius: var(--mbs-radius-lg); background: var(--mbs-bg); color: var(--mbs-fg); box-shadow: var(--mbs-shadow-float); text-align: center; }
.mbs-popup::backdrop { background: var(--mbs-color-scrim); }
.mbs-popup[open] { display: grid; justify-items: center; gap: var(--mbs-space-3); }
.mbs-popup__qr { width: var(--mbs-qr); height: var(--mbs-qr); background: var(--mbs-color-sheet); padding: var(--mbs-space-3); border-radius: var(--mbs-radius-md); }
.mbs-popup p { margin: 0; font-size: var(--mbs-text-sm); color: var(--mbs-fg-2); }
.mbs-popup .mbs-btn { justify-self: stretch; }
.mbs-qr rect { fill: var(--mbs-color-sheet-ink); }

.mbs-page--single { grid-template-columns: minmax(0, 1fr); }
/* ---------- 订单中心两栏（版面，不是组件） ---------- */
.mbs-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--mbs-split-side-w); gap: var(--mbs-space-12); align-items: start; }
@media (max-width: 980px) { .mbs-split { grid-template-columns: minmax(0, 1fr); gap: var(--mbs-space-2); } }
.mbs-block { padding: var(--mbs-space-8) 0; border-top: var(--mbs-rule) solid var(--mbs-line); }
.mbs-block:first-child { border-top: none; padding-top: 0; }
.mbs-block > .mbs-h3 + * { margin-top: var(--mbs-space-3); }

/* ======================================================================
 * 第二批新增（2026-11-06）：收银台、签名下载、订阅、后台
 * ====================================================================== */

/* ---------- MbsInput 前缀（对照 Vant Field 的 left-icon / TDesign Input 的 prefix）：标签、前缀、输入三列 ---------- */
.mbs-field--affix { grid-template-columns: var(--mbs-field-label-w) var(--mbs-affix-w) minmax(0, 1fr); }
.mbs-field__affix { font-family: var(--mbs-font-mono); color: var(--mbs-color-sheet-ink-2); }
.mbs-field--affix .mbs-field__err { grid-column: 3; }
.mbs-input--mono { font-family: var(--mbs-font-mono); }

/* ---------- MbsCell 金额值（明码标价：等宽、大一档） ---------- */
.mbs-amount { font-family: var(--mbs-font-mono); font-size: var(--mbs-text-xl); font-weight: var(--mbs-weight-bold); letter-spacing: 0; }

/* ---------- MbsChoiceCard 单列（付款方式：名称 + 一行说明） ---------- */
.mbs-radios--stack { grid-template-columns: minmax(0, 1fr); }

/* ---------- MbsQrInline · MbsQrPopup 的变体（付款页上直接摊开的收款码，不用点开） ---------- */
.mbs-qrbox { display: grid; grid-template-columns: var(--mbs-qr-inline) minmax(0, 1fr); gap: var(--mbs-space-5); align-items: start; margin-top: var(--mbs-space-4); }
.mbs-qrbox__img { width: var(--mbs-qr-inline); height: var(--mbs-qr-inline); background: var(--mbs-color-sheet); padding: var(--mbs-space-3); border-radius: var(--mbs-radius-md); box-shadow: var(--mbs-shadow-sheet); }
.mbs-qrbox .mbs-cells { margin-top: 0; }
@media (max-width: 520px) { .mbs-qrbox { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* ---------- MbsTabs · 导航/标签页（对照 Vant Tabs：标题、徽标数、当前下划线） ---------- */
/* 当前页签墨字加一道朱砂下划线；数量用淡墨小字跟在后面，不做红点 */
.mbs-tabs { display: flex; gap: var(--mbs-space-6); border-bottom: var(--mbs-rule) solid var(--mbs-line); margin-top: var(--mbs-space-4); }
.mbs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--mbs-space-1); min-height: var(--mbs-control-h); padding: 0; border: 0; background: none; font: inherit; font-family: var(--mbs-font-serif); font-size: var(--mbs-text-md); color: var(--mbs-fg-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.mbs-tab small { font-family: var(--mbs-font-sans); font-size: var(--mbs-text-xs); color: var(--mbs-fg-2); }
.mbs-tab:hover { color: var(--mbs-fg); }
.mbs-tab[aria-selected="true"] { color: var(--mbs-fg); font-weight: var(--mbs-weight-bold); }
.mbs-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--mbs-rule)); border-bottom: var(--mbs-rule-strong) solid var(--mbs-accent); }
@media (max-width: 520px) { .mbs-tabs { gap: var(--mbs-space-4); } }

/* ---------- MbsTable · 数据展示/表格（对照 TDesign Mobile Table：表头、行、可点选行、空数据） ---------- */
/* 后台用，比前台密：行高 40 左右、小一号字；窄屏外层左右滑，右缘渐隐提示还能往右 */
.mbs-tablewrap { position: relative; margin-top: var(--mbs-space-4); }
.mbs-tablewrap__scroll { overflow-x: auto; }
.mbs-tablewrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--mbs-fade-w); background: linear-gradient(to right, transparent, var(--mbs-bg)); pointer-events: none; opacity: 0; }
@media (max-width: 980px) { .mbs-tablewrap::after { opacity: 1; } }
.mbs-table { width: 100%; min-width: var(--mbs-table-min); border-collapse: collapse; font-size: var(--mbs-text-sm); }
.mbs-table th { text-align: left; font-weight: var(--mbs-weight-regular); font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-fg-2); padding: var(--mbs-space-2) var(--mbs-table-cell-x); border-bottom: var(--mbs-rule-strong) solid var(--mbs-fg); white-space: nowrap; }
.mbs-table td { padding: var(--mbs-space-2) var(--mbs-table-cell-x); border-bottom: var(--mbs-rule) solid var(--mbs-line); vertical-align: middle; white-space: nowrap; }
.mbs-table th:first-child, .mbs-table td:first-child { padding-left: 0; }
.mbs-table tbody tr { cursor: pointer; }
.mbs-table tbody tr:hover td { background: var(--mbs-bg-2); }
.mbs-table tbody tr[aria-selected="true"] td { background: var(--mbs-bg-2); }
.mbs-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset var(--mbs-rule-strong) 0 0 var(--mbs-accent); padding-left: var(--mbs-space-2); }
.mbs-table .mbs-stamp { font-size: var(--mbs-text-xs); min-height: 0; padding: var(--mbs-rule) var(--mbs-space-1); transform: none; }
.mbs-table__num { text-align: right; font-family: var(--mbs-font-mono); }

/* ---------- MbsFunnel · 数据展示/图表（漏斗：主参考和后备都没有，结构自定） ---------- */
/* 每一步一行：名称 | 条 | 数值 | 相对上一步的比例；条只是线和面，数值直接写在行里（看图类别 16、18） */
.mbs-funnel { list-style: none; margin: var(--mbs-space-5) 0 0; padding: 0; }
.mbs-funnel li { display: grid; grid-template-columns: var(--mbs-funnel-label-w) minmax(0, 1fr) var(--mbs-funnel-value-w) var(--mbs-funnel-value-w); gap: var(--mbs-space-3); align-items: center; padding: var(--mbs-space-2) 0; border-bottom: var(--mbs-rule) dashed var(--mbs-line); font-size: var(--mbs-text-sm); }
.mbs-funnel__bar { height: var(--mbs-bar-h); background: var(--mbs-bg-2); border-radius: var(--mbs-radius-sm); overflow: hidden; }
.mbs-funnel__bar i { display: block; height: 100%; background: var(--mbs-fg); border-radius: var(--mbs-radius-sm); }
.mbs-funnel li.is-zero .mbs-funnel__bar i { display: none; }
.mbs-funnel li.is-zero { color: var(--mbs-fg-2); }
.mbs-funnel b { font-family: var(--mbs-font-mono); font-weight: var(--mbs-weight-bold); text-align: right; }
.mbs-funnel small { font-family: var(--mbs-font-mono); color: var(--mbs-fg-2); text-align: right; }
@media (max-width: 520px) { .mbs-funnel li { grid-template-columns: minmax(0, 1fr) var(--mbs-funnel-value-w) var(--mbs-funnel-value-w); } .mbs-funnel__bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- 后台版面（不是组件） ---------- */
.mbs-admin { max-width: var(--mbs-page-max); margin: 0 auto; padding: 0 var(--mbs-gutter) var(--mbs-space-12); }
.mbs-admin .mbs-pagehead { padding-bottom: var(--mbs-space-4); }
.mbs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mbs-space-2) var(--mbs-space-5); margin-top: var(--mbs-space-5); }
.mbs-filters .mbs-radio { min-height: var(--mbs-control-h-sm); padding: 0 var(--mbs-space-3); font-size: var(--mbs-text-xs); }
.mbs-filters__label { font-size: var(--mbs-text-xs); letter-spacing: var(--mbs-tracking-label); color: var(--mbs-fg-2); }
.mbs-filters__end { margin-left: auto; }
.mbs-adminsplit { display: grid; grid-template-columns: minmax(0, 1fr) var(--mbs-split-side-w); gap: var(--mbs-space-10); align-items: start; }
@media (max-width: 980px) { .mbs-adminsplit { grid-template-columns: minmax(0, 1fr); gap: var(--mbs-space-6); } .mbs-admin { padding: 0 var(--mbs-gutter-sm) var(--mbs-space-12); } .mbs-filters__end { margin-left: 0; } }
.mbs-panel { border-top: var(--mbs-rule-strong) solid var(--mbs-fg); padding-top: var(--mbs-space-4); }
.mbs-panel .mbs-form { margin-top: var(--mbs-space-4); }
.mbs-filters a.mbs-radio { text-decoration: none; color: inherit; }
.mbs-filters .mbs-radio[aria-current="true"] { background: var(--mbs-fg); border-color: var(--mbs-fg); color: var(--mbs-bg); }
.mbs-filters .mbs-radio[aria-current="true"]::before { background: var(--mbs-accent); border-color: var(--mbs-accent); }