/* 标签与问答资料浏览器。面板隐藏由 hidden 属性负责。 */
.tab-list { display:flex; gap:8px; max-width:100%; overflow-x:auto; padding-bottom:1px; border-bottom:1px solid var(--border) }
.tab-list [role="tab"] { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:48px; padding:10px 20px; border:0; border-radius:var(--r-none); background:var(--bg); color:var(--text-muted); font-size:var(--text-nav) }
.tab-list [role="tab"][aria-selected="true"] { color:var(--text) }
.tab-list [role="tab"][aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:20px; right:20px; height:3px; background:var(--accent); color:var(--on-accent) }
.tab-panel { padding-top:28px; min-width:0 }
.question-browser { display:grid; grid-template-columns:minmax(0,.45fr) minmax(0,.55fr); gap:64px; align-items:start }
.question-browser__title { margin:0 0 32px; font-size:var(--text-question-heading); line-height:1.2 }
.question-list { display:flex; flex-direction:column; gap:10px; border:0 }
.question-list [role="tab"] {
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  min-height:64px; padding:16px 20px; text-align:left;
  border:1.5px solid var(--transparent); border-radius:var(--r-sm);
  background:var(--bg-panel); color:var(--text); font-size:var(--text-body);
}
.question-list [role="tab"][aria-selected="true"] { border-color:var(--border-strong); background:var(--bg); color:var(--text) }
.question-list [role="tab"]::after { content:"›"; flex-shrink:0; font-size:var(--text-h3) }
.answer-panel { border:1px solid var(--border); border-radius:var(--r-panel); padding:32px; background:var(--bg); color:var(--text) }
.answer-panel h3 { margin:0 0 20px }
.answer-panel p { color:var(--text-muted) }
.answer-panel .actions { margin-top:24px }
.code-panel { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); overflow:hidden }
.code-panel__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border); font-size:var(--text-xs) }
.code-panel pre { margin:0; padding:16px; font-size:var(--text-sm); line-height:1.8 }
.copy-button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:4px 12px; border:1px solid var(--border-strong); border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted); font-size:var(--text-xs) }
.capability-band { display:flex; align-items:center; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border) }
.capability-band__label { font-size:var(--text-xs); color:var(--text-muted); flex-shrink:0 }
.capability-band ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 0 }
.capability-band li { display:inline-flex; align-items:center; gap:8px; padding-inline:20px; border-left:1px solid var(--border); font-size:var(--text-label) }
.capability-band .icon { width:16px; height:16px }

/* 目录必须直接放在覆盖全部章节的父容器内。 */
.toc { position:sticky; top:var(--nav-h); z-index:15; display:flex; gap:8px; padding-block:12px; max-width:100%; overflow-x:auto; background:var(--bg); color:var(--text); border-block:1px solid var(--border) }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; flex-shrink:0; border-radius:var(--r-pill); color:var(--text-muted); text-decoration:none; font-size:var(--text-label) }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel); color:var(--accent) }
.faq-item { border-bottom:1px solid var(--border); padding-block:4px }
.faq-item summary { position:relative; list-style:none; cursor:pointer; padding:22px 36px 22px 0; font-size:var(--text-lead); line-height:1.5 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:22px; color:var(--text-muted) }
.faq-item[open] summary::after { content:"−" }
.faq-item__body { padding-bottom:24px; color:var(--text-muted); max-width:76ch }
.term-card { border-top:1px solid var(--border); padding:24px 0 }
.term-card__category { font-size:var(--text-xs); color:var(--text-muted); margin-bottom:12px }
.term-card h3 { margin:0 0 10px }
.term-card__alias { display:block; margin-top:6px; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-muted) }
.term-card p { margin-bottom:12px; color:var(--text-muted) }
.client-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-panel); background:var(--bg); color:var(--text) }
.client-card--first { border-color:var(--accent-soft-line) }
.client-card__head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px }
.client-card h3 { margin:0; font-size:var(--text-h3) }
.client-card__description { margin-top:20px; color:var(--text-muted) }
.client-card__meta { display:flex; flex-wrap:wrap; gap:12px; margin-block:16px; color:var(--text-muted); font-size:var(--text-sm) }
.client-card__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px }
[data-ver]:empty { display:none }
.badge,.tag { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:var(--text-xs); line-height:1.5; background:var(--bg-panel); color:var(--text-muted); overflow-wrap:anywhere; white-space:normal; vertical-align:middle }
.badge--first,.badge--recommended { border-color:var(--accent-soft-line); background:var(--accent-soft); color:var(--accent-dark) }
.badge--archived { background:var(--bg-panel-2); color:var(--text-muted) }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:var(--r-circle); background:var(--accent); color:var(--on-accent); flex-shrink:0 }
.status-dot--success { background:var(--success); color:var(--text) }
.status-dot--warn { background:var(--warn); color:var(--text) }
.status-dot--error { background:var(--error); color:var(--text) }
.post-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-panel); background:var(--bg); color:var(--text) }
.post-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; color:var(--text-muted); font-size:var(--text-xs) }
.post-card h3 { margin:0 0 16px; font-size:var(--text-lead); line-height:1.6 }
.post-card h3 a { color:var(--text); text-decoration:none }
.post-card h3 a:hover { color:var(--accent) }
.post-card p { color:var(--text-muted); font-size:var(--text-label) }
.callout { margin:28px 0; padding:20px 24px; border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--bg-panel); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout--warning { border-left-color:var(--warn) }
.callout--error { border-left-color:var(--error) }
.callout--success { border-left-color:var(--success) }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-block:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-panel); background:var(--bg-panel); color:var(--text) }
.article-download h2 { margin:0 0 8px; font-size:var(--text-h3) }
.article-download p { margin:0; color:var(--text-muted) }
.article-download .btn { flex-shrink:0 }
.table-scroll { overflow-x:auto; max-width:100%; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--r-md) }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--text-label) }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:14px 18px; border-bottom:1px solid var(--border);
  overflow-wrap:normal; word-break:normal; vertical-align:top;
}
.data-table th,.prose table th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-medium) }
.data-table td,.prose table td { background:var(--bg); color:var(--text) }
.data-table code,.prose table code { overflow-wrap:anywhere; white-space:normal }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; overscroll-behavior-inline:contain }
.prose table :is(th,td) { min-width:7em }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:30; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 18px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:var(--shadow-fab); font-size:var(--text-label); font-weight:var(--weight-medium); text-decoration:none; transition:border-color var(--time-fast) var(--ease),transform var(--time-fast) var(--ease) }
.dl-fab svg { width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.dl-fab:hover { border-color:var(--accent-soft-line); color:var(--text); transform:translateY(-1px) }

/* 首屏静态客户端示意。链接仅负责跳转，不模拟真实下载或保存。 */
.workspace { margin:30px 0 0; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-container); overflow:hidden }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--border) }
.steps a { position:relative; display:flex; align-items:center; justify-content:center; height:52px; padding-inline:12px; font-size:var(--text-button); color:var(--text-muted); text-decoration:none; border-left:1px solid var(--border) }
.steps a:first-child { border-left:0 }
.steps a:hover { color:var(--text); background:var(--bg-panel-2) }
.steps a.is-current { background:var(--bg); color:var(--text); font-weight:var(--weight-medium) }
.steps a.is-current::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); color:var(--on-accent) }
.stage { padding:56px }
.app { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-window); box-shadow:var(--shadow-window); overflow:hidden; line-height:1.5 }
.app__bar { position:relative; height:34px; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--border) }
.app__dots { display:flex; gap:6px }
.app__dots i { display:block; width:10px; height:10px; flex-shrink:0; border-radius:var(--r-circle); background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border) }
.app__title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:var(--text-xs); color:var(--text-muted); letter-spacing:.01em; white-space:nowrap }
.app__body { display:grid; grid-template-columns:60px minmax(0,1fr) 316px }
.app__rail { background:var(--bg-panel); color:var(--text-muted); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 0 }
.rail__item { width:36px; height:36px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--text-muted); flex-shrink:0 }
.rail__item svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.rail__item.is-on { background:var(--accent-soft); color:var(--accent) }
.rail__item--end { margin-top:auto }
.app__main { padding:16px 24px 18px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.main__head { display:flex; align-items:center; justify-content:space-between; gap:8px }
.main__title { margin:0; font-size:var(--text-lead); font-weight:var(--weight-medium); letter-spacing:-.01em }
.ghost-chip { display:inline-flex; align-items:center; height:24px; padding:0 10px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:var(--text-xs); color:var(--text-muted) }
.import__label { display:block; margin-bottom:6px; font-size:var(--text-xs); color:var(--text-muted) }
.import__row { display:flex; gap:8px }
.import__field { flex:1 1 auto; min-width:0; min-height:34px; padding:7px 12px; border:1px solid var(--border); border-radius:var(--r-field); background:var(--bg); color:var(--text-muted); font-family:var(--font-mono); font-size:12.5px; overflow-wrap:anywhere; line-height:18px }
.pill-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 18px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-size:var(--text-sm); font-weight:var(--weight-medium); text-decoration:none }
.pill-btn:hover { background:var(--accent-dark); color:var(--on-accent) }
.empty { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 14px; border:1px dashed var(--border-strong); border-radius:var(--r-md); font-size:var(--text-sm); color:var(--text-muted) }
.empty svg { width:18px; height:18px; fill:none; stroke:var(--text-muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.yaml { background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden }
.yaml__head { display:flex; align-items:center; justify-content:space-between; height:30px; padding:0 14px; border-bottom:1px solid var(--border); font-size:var(--text-xs); color:var(--text-muted) }
.yaml__file { font-family:var(--font-mono); color:var(--text) }
.yaml__code { display:block; margin:0; padding:8px 14px 10px 0; font-family:var(--font-mono); font-size:12.5px; line-height:1.62; overflow-x:auto }
.line { display:grid; grid-template-columns:40px 1fr; white-space:pre }
.ln { color:var(--text-muted); text-align:right; padding-right:16px; user-select:none }
.k { color:var(--accent) }
.p { color:var(--text-muted) }
.v { color:var(--text) }
.app__side { border-left:1px solid var(--border); padding:0 18px 16px; display:flex; flex-direction:column }
.side__tabs { display:flex; gap:20px; height:40px; border-bottom:1px solid var(--border) }
.side__tabs span { position:relative; display:flex; align-items:center; font-size:var(--text-sm); color:var(--text-muted) }
.side__tabs .is-on { color:var(--text); font-weight:var(--weight-medium) }
.side__tabs .is-on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); color:var(--on-accent) }
.settings { margin:6px 0 0 }
.settings div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; border-bottom:1px solid var(--bg-panel-2) }
.settings div:last-child { border-bottom:0 }
.settings dt { font-size:var(--text-sm); color:var(--text) }
.settings dd { margin:0 }
.val { display:inline-flex; align-items:center; min-height:20px; padding:1px 10px; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text-muted); font-size:var(--text-xs) }
.val--accent { background:var(--accent-soft); color:var(--accent-dark); font-weight:var(--weight-medium) }
.val--mono { background:var(--bg); color:var(--text); border:1px solid var(--border); font-family:var(--font-mono); font-size:11.5px }
.solid-btn { margin-top:auto; display:flex; align-items:center; justify-content:center; min-height:36px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-size:13.5px; font-weight:var(--weight-medium); text-decoration:none }
.solid-btn:hover { background:var(--accent-dark); color:var(--on-accent) }

/* 预览页专用展示家具。 */
.token-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.token-swatch { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden }
.token-swatch__paint { height:64px; border-bottom:1px solid var(--border) }
.token-swatch code { display:block; padding:10px 12px; font-size:var(--text-xs) }
.sw-bg { background:var(--bg); color:var(--text) }
.sw-panel { background:var(--bg-panel); color:var(--text) }
.sw-panel2 { background:var(--bg-panel-2); color:var(--text) }
.sw-border { background:var(--border); color:var(--text) }
.sw-border-strong { background:var(--border-strong); color:var(--text) }
.sw-accent { background:var(--accent); color:var(--on-accent) }
.sw-accent-dark { background:var(--accent-dark); color:var(--on-accent) }
.sw-soft { background:var(--accent-soft); color:var(--accent-dark) }
.sw-soft-line { background:var(--accent-soft-line); color:var(--text) }
.sw-text { background:var(--text); color:var(--on-ink) }
.sw-muted { background:var(--text-muted); color:var(--on-ink) }
.sw-faint { background:var(--text-faint); color:var(--text) }
.sw-success { background:var(--success); color:var(--text) }
.sw-warn { background:var(--warn); color:var(--text) }
.sw-error { background:var(--error); color:var(--text) }
.sw-veil { background:var(--veil); color:var(--text) }
.preview-stack { display:grid; gap:24px }
.preview-type-title { margin:0; font-size:var(--text-h1); font-weight:var(--weight-regular); line-height:1.14 }
.preview-note { color:var(--text-muted); font-size:var(--text-sm) }
.preview-header .tabs-nav { display:block }
@media (max-width:1180px) {
  .app__body { grid-template-columns:56px minmax(0,1fr) 288px }
  .stage { padding:40px }
}
@media (max-width:1080px) {
  .preview-header .topbar__inner { height:auto; flex-wrap:wrap; padding-top:12px }
  .preview-header .tabs-nav { order:3; width:100%; overflow-x:auto }
  .preview-header .tabs-nav a { height:46px }
}
@media (max-width:860px) {
  .steps { display:flex; overflow-x:auto }
  .steps a { flex:0 0 auto; min-width:118px; padding-inline:18px; height:48px; font-size:14.5px }
  .stage { padding:16px }
  .app__body { grid-template-columns:1fr }
  .app__rail { display:none }
  .app__main { padding:16px }
  .app__side { border-left:0; border-top:1px solid var(--border); padding:0 16px 16px }
  .solid-btn { margin-top:14px }
  .question-browser { grid-template-columns:1fr; gap:24px }
  .capability-band { align-items:flex-start; flex-direction:column; gap:12px }
  .capability-band li { padding-inline:12px }
}
@media (max-width:640px) {
  .token-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .answer-panel,.client-card,.post-card { padding:20px }
  .article-download { align-items:flex-start; flex-direction:column; padding:20px }
  .dl-fab { right:16px; bottom:16px; min-height:42px }
  .import__row { flex-wrap:wrap }
  .import__field { flex-basis:100% }
  .side__tabs { gap:16px }
  .question-list [role="tab"] { padding-inline:16px }
}