/* Tab 以 data-tabs 为独立作用域；hidden 只由 tabs.js 在初始化后维护。 */
.tabs { min-width:0 }
.tab-list,[role="tablist"] { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; padding:5px 3px 12px; scrollbar-width:thin; overscroll-behavior-x:contain }
[role="tab"] { flex-shrink:0; min-height:44px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text-muted); font-size:var(--fs-sm); font-weight:var(--weight-semibold); text-align:left }
[role="tab"]:hover { background:var(--bg-panel); color:var(--text) }
[role="tab"][aria-selected="true"] { border-color:var(--accent-line); background:var(--accent-tint); color:var(--accent-dark) }
[role="tabpanel"] { min-width:0; margin-top:20px }
.feature-tabs { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:64px; align-items:start }
.feature-tabs>[role="tablist"] { display:flex; flex-direction:column; align-items:stretch; overflow:visible; padding:0; gap:12px }
.feature-tabs [role="tab"] { position:relative; width:100%; padding:18px 24px; border:0; border-radius:var(--r-sm); background:var(--clear); color:var(--text-muted); white-space:normal }
.feature-tabs [role="tab"]::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:var(--r-pill); background:var(--clear) }
.feature-tabs [role="tab"][aria-selected="true"] { background:var(--surface); color:var(--text) }
.feature-tabs [role="tab"][aria-selected="true"]::before { background:var(--accent) }
.tab-brow { display:block; margin-bottom:6px; font-size:var(--fs-xs); color:var(--accent-dark); font-weight:var(--weight-bold) }
.feature-tabs [role="tab"]:nth-child(3n+2) .tab-brow { color:var(--teal-ink) }
.feature-tabs [role="tab"]:nth-child(3n) .tab-brow { color:var(--amber-ink) }
.tab-title { display:block; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:var(--weight-heavy); line-height:1.35 }
.feature-tabs [role="tabpanel"] { margin-top:0 }
.feature-demo { padding:36px; border:1px solid var(--border); border-radius:var(--r-canvas); background:linear-gradient(140deg,var(--bg-wash),var(--bg)); color:var(--text) }
.mini-window { padding:22px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); color:var(--text); box-shadow:var(--shadow-card) }
.mini-window-head { display:flex; align-items:center; gap:8px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); font-size:var(--fs-sm); font-weight:var(--weight-bold) }
.mini-window-head::before { content:""; width:8px; height:8px; border-radius:var(--r-circle); background:var(--accent); flex-shrink:0 }
.demo-form { display:grid; gap:14px }
.demo-form label { display:grid; gap:6px; font-size:var(--fs-sm) }
.demo-form input { width:100% }
.feature-detail { margin:28px 0 0; color:var(--text-muted); font-size:var(--fs-base); line-height:1.85 }
.radio-options { display:grid; gap:12px }
.radio-options label { display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--fs-sm) }
.toc { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.toc a { display:block; padding:8px 12px; border-radius:var(--r-chip); font-size:var(--fs-sm); color:var(--text-muted) }
.toc a:hover,.toc a[aria-current] { background:var(--surface); color:var(--accent-dark) }
.toc-sticky { position:sticky; top:16px; z-index:4; align-self:start }
.chapter-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start }
.chapter-layout>.toc { flex-direction:column; align-items:stretch }
.chapter-layout>* { min-width:0 }
.faq-list { display:grid; gap:12px }
.faq-item { border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); color:var(--text); box-shadow:var(--shadow-soft) }
.faq-item summary { position:relative; cursor:pointer; padding:22px 58px 22px 24px; list-style:none; font-size:var(--fs-base); font-weight:var(--weight-semibold) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:20px; font-family:var(--font-mono); color:var(--accent-dark); font-size:var(--fs-h3) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 22px; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { padding:26px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.term-card h3 { margin:12px 0; font-size:var(--fs-h3) }
.term-card p { margin-bottom:0; color:var(--text-muted) }
.term-en { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-muted) }
.client-card { position:relative; padding:30px; border:1px solid var(--border); border-radius:var(--r-canvas); background:var(--surface); color:var(--text); box-shadow:var(--shadow-card) }
.client-head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:20px }
.client-head>* { min-width:0 }
.client-icon { width:56px; height:56px; flex-shrink:0 }
.client-name { margin:0 0 4px; font-size:var(--fs-h3) }
.client-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--text-muted) }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.client-notes { margin-top:20px; font-size:var(--fs-sm); color:var(--text-muted) }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; overflow:hidden; overflow-wrap:anywhere; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:var(--fs-xs); font-weight:var(--weight-semibold); line-height:1.5 }
.badge-primary { border-color:var(--accent-line); background:var(--accent-tint); color:var(--accent-dark) }
.badge-recommended { border-color:var(--teal-line); background:var(--surface); color:var(--teal-ink) }
.badge-retired { border-color:var(--amber-line); background:var(--surface); color:var(--amber-ink) }
.article-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); color:var(--text); box-shadow:var(--shadow-soft); transition:box-shadow var(--motion-fast),transform var(--motion-fast) }
.article-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card) }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:var(--fs-xs); color:var(--text-muted) }
.article-card h3 { margin:20px 0 14px; font-size:var(--fs-h3); line-height:1.5 }
.article-card h3 a:hover { color:var(--accent-dark) }
.article-card p { color:var(--text-muted); font-size:var(--fs-sm) }
.article-more { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto; padding-top:18px; color:var(--accent-dark); font-size:var(--fs-sm); font-weight:var(--weight-semibold) }
.callout { margin:24px 0; padding:22px 24px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-btn); background:var(--accent-tint); color:var(--text) }
.callout strong { color:var(--accent-dark) }
.callout p:last-child { margin-bottom:0 }
.callout-note { background:var(--bg-panel); color:var(--text); border-left-color:var(--teal) }
.callout-note strong { color:var(--teal-ink) }
.callout-warning { background:var(--bg-panel); color:var(--text); border-left-color:var(--amber) }
.callout-warning strong { color:var(--amber-ink) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:var(--r-btn); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; background:var(--surface); color:var(--text); font-size:var(--fs-sm) }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td {
  min-width:7em; padding:14px 18px; border-bottom:1px solid var(--border);
  text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-semibold) }
.data-table tr:last-child td { border-bottom:0 }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; font-size:var(--fs-sm); background:var(--surface); color:var(--text) }
.prose table code,.article-body table code { overflow-wrap:anywhere }
.article-body { min-width:0 }
.article-body pre { overflow-x:auto; max-width:100% }
.article-body :not(pre)>code { overflow-wrap:anywhere }
.article-body :where(div,section) { min-width:0; max-width:100% }
.article-download { margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:linear-gradient(140deg,var(--bg-wash),var(--bg)); color:var(--text); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px }
.article-download-copy { flex:1 1 240px; min-width:0 }
.article-download h2 { font-size:var(--fs-h3); margin:0 0 8px }
.article-download p { margin:0; color:var(--text-muted); font-size:var(--fs-sm) }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:15; display:inline-flex; align-items:center; gap:12px; max-width:calc(100% - 40px); min-height:56px; padding:12px 18px; border:1px solid var(--accent-line); border-radius:var(--r-btn); background:var(--surface); color:var(--accent-dark); box-shadow:var(--shadow-card); font-size:var(--fs-sm); font-weight:var(--weight-bold) }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.dl-fab:hover { background:var(--accent-tint); color:var(--accent-dark) }
/* 设计预览家具。色值只由 base.css 中的令牌提供。 */
.preview-section { padding-top:64px; padding-bottom:64px; border-top:1px solid var(--border) }
.preview-label { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted) }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:16px }
.swatch { min-width:0; margin:0; padding:10px; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--surface); color:var(--text) }
.swatch-sample { display:block; height:64px; border:1px solid var(--border); border-radius:var(--r-chip); margin-bottom:10px }
.swatch figcaption { font-family:var(--font-mono); font-size:var(--fs-xs); overflow-wrap:anywhere }
.sw-bg { background:var(--bg) }
.sw-panel { background:var(--bg-panel) }
.sw-wash { background:var(--bg-wash) }
.sw-mid { background:var(--wash-mid) }
.sw-surface { background:var(--surface) }
.sw-chrome { background:var(--chrome) }
.sw-border { background:var(--border) }
.sw-border-strong { background:var(--border-strong) }
.sw-dot { background:var(--dot-gray) }
.sw-skeleton { background:var(--skeleton) }
.sw-accent { background:var(--accent) }
.sw-dark { background:var(--accent-dark) }
.sw-soft { background:var(--accent-soft) }
.sw-tint { background:var(--accent-tint) }
.sw-lip { background:var(--accent-lip) }
.sw-accent-line { background:var(--accent-line) }
.sw-teal { background:var(--teal) }
.sw-teal-ink { background:var(--teal-ink) }
.sw-teal-line { background:var(--teal-line) }
.sw-amber { background:var(--amber) }
.sw-amber-ink { background:var(--amber-ink) }
.sw-amber-line { background:var(--amber-line) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-subtle { background:var(--text-subtle) }
.sw-on { background:var(--on-accent) }
.sw-phone { background:var(--phone-bar) }
.sw-scrim { background:var(--scrim) }
.sw-veil { background:var(--veil) }
.sw-camera { background:var(--camera-ring) }
.sw-success { background:var(--success) }
.sw-success-ink { background:var(--success-ink) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-clear { background:var(--clear) }
.button-specimens { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding-top:12px; padding-bottom:12px }
.preview-heading { font-size:var(--fs-h1); font-weight:var(--weight-heavy); line-height:var(--leading-title); margin-bottom:20px; letter-spacing:var(--tracking-title) }
.preview-fab { position:static; margin-top:24px }
@media(max-width:900px) {
  .feature-tabs { gap:32px; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr) }
  .chapter-layout { grid-template-columns:minmax(0,1fr); gap:24px }
  .chapter-layout>.toc { flex-direction:row; align-items:center; position:static }
}
@media(max-width:640px) {
  .feature-tabs { grid-template-columns:minmax(0,1fr); gap:20px }
  .feature-tabs>[role="tablist"] { flex-direction:row; overflow-x:auto; align-items:stretch; gap:8px; padding:4px 3px 12px }
  .feature-tabs [role="tab"] { width:auto; max-width:240px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--surface); color:var(--text-muted) }
  .feature-tabs [role="tab"]::before { display:none }
  .feature-tabs [role="tab"][aria-selected="true"] { background:var(--accent-tint); color:var(--text); border-color:var(--accent-line) }
  .tab-title { font-size:var(--fs-base) }
  .tab-brow { margin-bottom:3px }
  .feature-demo { padding:20px }
  .mini-window { padding:18px }
  .client-card { padding:22px }
  .faq-item summary { padding-left:20px }
  .faq-answer { padding-left:20px; padding-right:20px }
  .dl-fab { right:20px; bottom:20px; min-height:50px }
  .article-download { padding:22px }
}