/* 章节索引、手册正文与跨页内容组件 */
.tabs { min-width:0; }
.tabs [role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tabs [role="tab"] {
  min-height:44px; padding:10px 20px; border:1px solid var(--c-border);
  border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted);
  font-weight:600; max-width:100%; overflow-wrap:anywhere;
}
.tabs [role="tab"]:hover { border-color:var(--c-accent); color:var(--c-accent); }
.tabs [role="tab"][aria-selected="true"] { background:var(--c-accent-dark); color:var(--c-on-dark); border-color:var(--c-accent-dark); }
.tabs [role="tabpanel"] { min-width:0; }
.chapter-tabs { display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; }
.chapter-tabs [role="tablist"] { flex-direction:column; align-items:stretch; gap:12px; margin:0; }
.chapter-tabs [role="tab"] {
  position:relative; text-align:left; padding:16px 24px; border-color:var(--c-clear);
  background:var(--c-clear); color:var(--c-on-dark-muted);
}
.chapter-tabs [role="tab"]::before { content:""; position:absolute; left:10px; top:calc(50% - 7px); width:3px; height:14px; border-radius:var(--r-line); background:var(--c-accent); }
.chapter-tabs [role="tab"][aria-selected="true"] { background:var(--c-bg); color:var(--c-text); border-color:var(--c-bg); }
.chapter-tabs [role="tab"]:hover { color:var(--c-text); background:var(--c-panel); }
.chapter-panel { position:relative; padding:36px; border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); min-width:0; }
.chapter-panel__meta { display:flex; justify-content:flex-end; margin-bottom:16px; }
.chapter-panel p { line-height:1.85; }
.manual-layout { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; gap:56px; }
.toc { position:sticky; top:24px; padding:20px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); max-height:calc(100dvh - 48px); overflow-y:auto; }
.toc__title { font-size:13px; font-weight:700; margin-bottom:12px; }
.toc ul { list-style:none; margin:0; padding:0; }
.toc a { display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--c-muted); font-size:14px; overflow-wrap:anywhere; }
.toc a:hover,.toc a[aria-current] { background:var(--c-panel); color:var(--c-accent); }
.jump-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.jump-nav a { padding:10px 18px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-text); font-size:14px; }
.faq-item { border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); padding:0 24px; min-width:0; }
.faq-item + .faq-item { margin-top:12px; }
.faq-item summary { cursor:pointer; padding:22px 28px 22px 0; font-weight:600; position:relative; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font-size:22px; color:var(--c-accent); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__body { padding-bottom:24px; color:var(--c-muted); }
.faq-item__body p:last-child { margin-bottom:0; }
.term-card { border-top:4px solid var(--c-accent-dark); }
.term-card__key { display:block; font-family:var(--f-mono); font-size:13px; color:var(--c-accent); margin-bottom:16px; overflow-wrap:anywhere; }
.term-card h3 { margin-bottom:12px; }
.term-card p { color:var(--c-muted); }
.client-card__head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.client-card__head h3 { margin:0; }
.client-card__icon { width:56px; height:56px; flex-shrink:0; }
.client-card__version { font-family:var(--f-mono); font-size:13px; color:var(--c-muted); }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.client-card--primary { border-color:var(--c-accent); }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.badge,.tag {
  display:inline-block; max-width:100%; overflow-wrap:anywhere; vertical-align:middle;
  padding:4px 12px; border-radius:var(--r-pill);
  background:var(--c-panel); color:var(--c-muted); font-size:12px; font-weight:600; line-height:1.5;
}
.badge--primary { background:var(--c-accent-dark); color:var(--c-on-dark); }
.badge--recommended,.badge--client { background:var(--c-success); color:var(--c-on-dark); }
.badge--retired { background:var(--c-panel-2); color:var(--c-on-dark); }
.badge--warning { background:var(--c-warn); color:var(--c-text); }
.tag--clamped { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.article-card { display:flex; flex-direction:column; }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-family:var(--f-mono); font-size:12px; color:var(--c-muted); margin-bottom:24px; }
.article-card h3 { font-size:22px; margin-bottom:16px; }
.article-card h3 a:hover { color:var(--c-accent); }
.article-card p { color:var(--c-muted); }
.article-card__link { margin-top:auto; padding-top:12px; color:var(--c-accent); font-size:14px; font-weight:600; }
.callout {
  margin:24px 0; padding:24px 28px;
  border:1px solid var(--c-border); border-left:4px solid var(--c-accent);
  border-radius:var(--r-page); background:var(--c-panel); color:var(--c-text);
}
.callout--success { border-left-color:var(--c-success); }
.callout--warning { border-left-color:var(--c-warn); }
.callout--error { border-left-color:var(--c-error); }
.callout p:last-child { margin-bottom:0; }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-page); }
.data-table { width:100%; border-collapse:collapse; background:var(--c-bg); color:var(--c-text); }
.data-table th,.data-table td,.prose table th,.prose table td,.manual-body table th,.manual-body table td {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--c-border);
  text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th,.manual-body table th { background:var(--c-panel); color:var(--c-text); font-weight:600; }
.prose table,.manual-body table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; min-width:0; border-collapse:collapse; color:var(--c-text); background:var(--c-bg);
}
.prose table code,.manual-body table code,.data-table code { overflow-wrap:anywhere; white-space:normal; }
.download-note { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:48px; background:var(--c-panel); color:var(--c-text); }
.download-note h2 { font-size:24px; margin-bottom:12px; }
.download-note p { margin-bottom:0; color:var(--c-muted); }
.dl-fab {
  position:fixed; z-index:30; right:24px; bottom:24px;
  display:flex; align-items:center; gap:12px; min-height:56px; max-width:calc(100% - 32px);
  padding:14px 22px; border:1px solid var(--c-on-dark-stroke); border-radius:var(--r-pill);
  background:var(--c-accent-dark); color:var(--c-on-dark); font-size:14px; font-weight:600;
}
.dl-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.dl-fab:hover { background:var(--c-accent); color:var(--c-on-dark); }

/* 已确认的静态首页封面；装置始终与平台入口分离。 */
.cover__shell { position:relative; height:668px; margin-top:8px; background:var(--c-accent-dark); color:var(--c-on-dark); border-radius:var(--r-shell); overflow:hidden; }
.cover__copy { position:relative; z-index:3; height:100%; width:688px; padding-left:88px; display:flex; flex-direction:column; justify-content:center; }
.tagpill { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:5px 17px 5px 8px; border:1px solid var(--c-on-dark-stroke); border-radius:var(--r-pill); color:var(--c-on-dark); font-size:13.5px; font-weight:500; letter-spacing:.01em; }
.tagpill__ring { width:22px; height:22px; flex-shrink:0; border:1px solid var(--c-warn); border-radius:var(--r-round); display:grid; place-items:center; }
.tagpill__ring::after { content:""; width:7px; height:7px; border-radius:var(--r-round); background:var(--c-warn); }
.cover__title { margin:28px 0 0; font-family:var(--f-display); font-weight:800; font-size:clamp(30px,3.25vw,48px); line-height:1.2; letter-spacing:-.018em; color:var(--c-on-dark); }
.cover__title span { display:block; }
.cover__title .tint { color:var(--c-h1-tint); }
.cover__actions { margin-top:32px; display:flex; gap:12px; }
.cover__lede { margin:28px 0 0; max-width:470px; font-size:16.5px; line-height:1.8; color:var(--c-on-dark-muted); }
.cover__lede strong { color:var(--c-on-dark); font-weight:600; }
.platforms { margin-top:26px; padding-top:22px; width:470px; border-top:1px solid var(--c-on-dark-line); display:flex; align-items:center; gap:22px; }
.platforms__label { font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--c-on-dark-soft); }
.platforms a { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--c-on-dark-muted); }
.platforms a:hover { color:var(--c-on-dark); }
.platforms svg { width:17px; height:17px; }
.cover__stage { position:absolute; z-index:1; top:0; right:0; bottom:0; width:680px; pointer-events:none; }
.stage__frame { position:absolute; inset:0; }
.arch { position:absolute; left:168px; bottom:0; width:440px; height:556px; background:var(--c-accent); color:var(--c-on-dark); border-radius:220px 220px 0 0; }
.arch::before { content:""; position:absolute; inset:18px 18px 0; border:1px solid var(--c-arch-line); border-bottom:0; border-radius:202px 202px 0 0; }
.manual-page { position:absolute; z-index:1; top:226px; left:24px; width:330px; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-page); box-shadow:3px 4px 0 0 var(--c-page-edge); transform:rotate(-3.5deg); }
.manual-page__head { display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 16px 0 74px; border-bottom:1px solid var(--c-border); }
.manual-page__file { font-family:var(--f-mono); font-size:11.5px; font-weight:700; }
.manual-page__shelf { font-size:10.5px; color:var(--c-muted); letter-spacing:.04em; }
.manual-page__body { padding:7px 0 9px; }
.ln { display:flex; align-items:center; height:16.5px; }
.ln__tab { flex:none; width:64px; display:flex; align-items:center; }
.idx { display:inline-block; margin-left:-1px; height:14px; padding:0 8px 0 9px; border-radius:0 var(--r-index) var(--r-index) 0; background:var(--c-tab); color:var(--c-muted); font-family:var(--f-mono); font-size:9px; font-weight:600; line-height:14px; }
.idx--on { background:var(--c-warn); color:var(--c-text); font-weight:700; }
.ln__code { flex:1; min-width:0; padding-left:10px; white-space:pre; overflow:hidden; font-family:var(--f-mono); font-size:10.5px; color:var(--c-muted); }
.ln__code .k { color:var(--c-accent-dark); font-weight:600; }
.ln__code .s { color:var(--c-success); }
.ln__code .n { color:var(--c-accent); }
.settings-win { position:absolute; z-index:2; top:68px; left:204px; width:384px; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:4px 5px 0 0 var(--c-card-edge); transform:rotate(2deg); overflow:hidden; }
.win-bar { display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; background:var(--c-panel); color:var(--c-text); border-bottom:1px solid var(--c-border); }
.win-bar__dot { width:10px; height:10px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-dot); }
.win-bar__title { margin-left:10px; font-size:13px; font-weight:600; }
.win-bar__app { margin-left:auto; font-family:var(--f-mono); font-size:10.5px; color:var(--c-muted); }
.win-tabs { display:flex; gap:18px; height:38px; padding:0 20px; border-bottom:1px solid var(--c-border); }
.win-tabs span { position:relative; display:flex; align-items:center; font-size:12.5px; color:var(--c-muted); }
.win-tabs .on { color:var(--c-text); font-weight:600; }
.win-tabs .on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--r-line); background:var(--c-accent); }
.opt { display:flex; align-items:center; justify-content:space-between; gap:12px; height:46px; padding:0 20px; border-bottom:1px solid var(--c-border); }
.opt:last-child { border-bottom:0; }
.opt__label { font-size:13.5px; color:var(--c-text); display:flex; align-items:baseline; gap:7px; }
.opt__label code { font-family:var(--f-mono); font-size:11px; color:var(--c-muted); }
.field { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 10px; border:1px solid var(--c-border); border-radius:var(--r-sm); font-family:var(--f-mono); font-size:12.5px; color:var(--c-text); }
.field--port { min-width:86px; }
.switch { position:relative; flex:none; width:36px; height:20px; border-radius:var(--r-pill); background:var(--c-toggle-off); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--r-round); background:var(--c-bg); }
.switch.is-on { background:var(--c-success); }
.switch.is-on::after { transform:translateX(16px); }
.seg { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--c-border); border-radius:var(--r-pill); }
.seg span { padding:3px 11px; border-radius:var(--r-pill); font-size:12px; color:var(--c-muted); }
.seg .on { background:var(--c-accent-dark); color:var(--c-on-dark); font-weight:600; }
.win-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; background:var(--c-panel); color:var(--c-text); border-top:1px solid var(--c-border); }
.win-btn { height:30px; padding:0 18px; display:inline-flex; align-items:center; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; }
.win-btn--line { border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); }
.win-btn--fill { background:var(--c-accent); color:var(--c-on-dark); }
.factband { margin:0 auto; padding-top:24px; padding-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fact { display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 20px; text-align:center; border-left:1px solid var(--c-border); min-width:0; }
.fact:first-child { border-left:0; }
.fact dd { order:1; margin:0; font-family:var(--f-mono); font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--c-text); }
.fact dt { order:2; font-size:13.5px; color:var(--c-muted); }
.next-peek { margin-top:18px; padding:20px 72px 56px; background:var(--c-panel-2); color:var(--c-on-dark); border-radius:var(--r-shell); }
.next-peek__cue { margin:0 0 36px; display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--c-on-dark-soft); }
.next-peek__bar { width:3px; height:14px; border-radius:var(--r-line); background:var(--c-warn); flex-shrink:0; }

/* 预览色板：色值只来自根令牌。 */
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; padding:12px; border:1px solid var(--c-border); border-radius:var(--r-page); background:var(--c-bg); color:var(--c-text); }
.swatch__paint { display:block; height:64px; border:1px solid var(--c-border); border-radius:var(--r-sm); margin-bottom:10px; }
.swatch code { font-size:11px; }
.paint-bg { background:var(--c-bg); }
.paint-panel { background:var(--c-panel); }
.paint-panel-2 { background:var(--c-panel-2); }
.paint-border { background:var(--c-border); }
.paint-accent { background:var(--c-accent); }
.paint-accent-dark { background:var(--c-accent-dark); }
.paint-text { background:var(--c-text); }
.paint-muted { background:var(--c-muted); }
.paint-success { background:var(--c-success); }
.paint-warn { background:var(--c-warn); }
.paint-error { background:var(--c-error); }
.paint-card-edge { background:var(--c-card-edge); }
.paint-page-edge { background:var(--c-page-edge); }
.paint-tab { background:var(--c-tab); }
.paint-dot { background:var(--c-dot); }
.paint-toggle-off { background:var(--c-toggle-off); }
.paint-h1-tint { background:var(--c-h1-tint); }
.paint-on-dark { background:var(--c-on-dark); }
.paint-on-dark-muted { background:var(--c-on-dark-muted); }
.paint-on-dark-soft { background:var(--c-on-dark-soft); }
.paint-on-dark-line { background:var(--c-on-dark-line); }
.paint-on-dark-stroke { background:var(--c-on-dark-stroke); }
.paint-arch-line { background:var(--c-arch-line); }
.paint-veil { background:var(--c-veil); }
.paint-clear { background:var(--c-clear); }
.swatch--dark { background:var(--c-accent-dark); color:var(--c-on-dark); }
.type-display { font-size:var(--fs-h1); font-weight:800; line-height:1.2; font-family:var(--f-display); }
.preview-state { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (max-width:1300px) {
  .stage__frame { transform:scale(.88); transform-origin:right bottom; }
  .cover__copy { padding-left:64px; }
}
@media (max-width:1100px) {
  .cover__shell { height:auto; }
  .cover__copy { width:auto; height:auto; padding:64px 48px 0; }
  .platforms { width:100%; max-width:470px; }
  .cover__stage { position:relative; width:680px; height:640px; margin:0 auto; }
  .stage__frame { transform:none; }
  .factband { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .fact:nth-child(3) { border-left:0; }
  .chapter-tabs { grid-template-columns:210px minmax(0,1fr); gap:24px; }
  .manual-layout { grid-template-columns:200px minmax(0,1fr); gap:32px; }
}
@media (max-width:768px) {
  .manual-layout,.chapter-tabs { grid-template-columns:minmax(0,1fr); }
  .toc { position:static; max-height:none; }
  .chapter-tabs [role="tablist"] { flex-direction:row; flex-wrap:wrap; }
  .chapter-tabs [role="tab"] { flex:1 1 auto; }
  .cover__title { font-size:28px; }
  .download-note { flex-direction:column; align-items:flex-start; }
}
@media (max-width:720px) {
  .cover__copy { padding:44px 24px 0; }
  .cover__actions { flex-wrap:wrap; }
  .platforms { flex-wrap:wrap; gap:14px 20px; }
  .cover__stage { width:100%; height:480px; }
  .cover__stage .settings-win { top:24px; }
  .cover__stage .manual-page { top:480px; left:204px; }
  .stage__frame { width:680px; height:668px; left:50%; margin-left:-204px; transform:scale(.6); transform-origin:left top; }
  .factband { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact { padding-inline:8px; }
  .fact dd { font-size:15px; }
  .next-peek { padding:20px 24px 32px; }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chapter-panel { padding:24px; }
}
@media (max-width:640px) {
  .dl-fab { right:16px; bottom:16px; }
  .cover__title { font-size:clamp(24px,5.5vw,28px); }
  .cover__copy .tagpill { font-size:11px; gap:7px; }
  .cover__actions { gap:8px; }
  .cover__actions .btn { padding-inline:20px; font-size:14px; }
  .faq-item { padding-inline:20px; }
}