/* 胶囊分类条与单幅展台 */
.tabs { min-width:0 }
.tablist,[role="tablist"] { display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:6px;margin:0 0 28px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin }
[role="tab"] { flex-shrink:0;min-height:44px;padding:10px 20px;border:0;border-radius:var(--r-pill);background:var(--c-chip-idle);color:var(--c-text);font-size:14px;font-weight:var(--weight-semibold);white-space:nowrap }
[role="tab"]:hover { background:var(--c-panel-2);color:var(--c-text) }
[role="tab"][aria-selected="true"] { background:var(--c-accent);color:var(--c-text);box-shadow:var(--sh-soft) }
[role="tabpanel"] { min-width:0;scroll-margin-top:88px }
.feature-stage { display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);align-items:center;min-height:390px;padding:48px;border-radius:var(--r-container);background:linear-gradient(180deg,var(--c-skycard-a),var(--c-skycard-b));color:var(--c-text);box-shadow:var(--sh-soft);overflow:clip;gap:32px }
.feature-stage > * { min-width:0 }
.feature-stage--butter { background:var(--c-butter);color:var(--c-text) }
.feature-stage--fog { background:var(--c-fogcard);color:var(--c-text) }
.feature-stage--ink { background:linear-gradient(160deg,var(--c-ink-a),var(--c-ink-b));color:var(--c-on-dark) }
.feature-stage h3 { margin-top:0;font-size:26px;font-weight:var(--weight-heavy) }
.feature-stage p { font-size:15px;line-height:1.9;color:var(--c-muted) }
.feature-stage--ink p { color:var(--c-on-dark-muted) }
.feature-stage__link { font-size:15px;font-weight:var(--weight-bold);text-decoration:none }
.feature-stage__link:hover { text-decoration:underline }
.settings-slice { padding:24px;border:1px solid var(--c-border);border-radius:var(--r-menu);background:var(--c-panel);color:var(--c-text);box-shadow:var(--sh-window) }
.settings-slice__title { display:block;margin-bottom:16px;font-size:14px;font-weight:var(--weight-heavy) }
.settings-slice__row { display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;padding-block:10px;border-top:1px solid var(--c-border);font-size:13px }
.settings-slice__value { font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere }
.settings-slice__choice { padding:5px 10px;border-radius:var(--r-pill);background:var(--c-chip-idle);color:var(--c-text);font-size:12px }

/* 分类跳转条：放在覆盖全部章节的直接父容器内 */
.toc { position:sticky;top:12px;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;margin-block:24px;padding:10px;border:1px solid var(--c-border);border-radius:var(--r-menu);background:var(--c-panel);color:var(--c-text);box-shadow:var(--sh-soft);overflow-x:visible }
.toc a { flex-shrink:0;padding:10px 14px;border-radius:var(--r-pill);text-decoration:none;font-size:13px;font-weight:var(--weight-semibold);white-space:nowrap }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-chip-idle);color:var(--c-text) }
.toc--flow { position:static }

/* 无脚本可用的问答 */
.faq-list { display:grid;gap:12px }
.faq-item { min-width:0;border:1px solid var(--c-border);border-radius:var(--r-menu);background:var(--c-panel);color:var(--c-text);box-shadow:var(--sh-soft) }
.faq-item summary { position:relative;min-height:64px;padding:18px 56px 18px 22px;list-style:none;font-size:16px;font-weight:var(--weight-bold);cursor:pointer }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";position:absolute;right:22px;top:16px;font-size:23px;font-weight:var(--weight-medium) }
.faq-item[open] summary::after { content:"−" }
.faq-item[open] summary { border-bottom:1px solid var(--c-border) }
.faq-item__answer { padding:20px 22px;font-size:15px;color:var(--c-muted) }
.faq-item__answer > :last-child { margin-bottom:0 }

/* 下载卡片、术语与文章 */
.dlgrid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px }
.dlcard { display:flex;flex-direction:column;min-width:0;min-height:262px;padding:28px 26px 26px;border-radius:var(--r-card);background:var(--c-fogcard);color:var(--c-text);box-shadow:var(--sh-soft) }
.dlcard--ink { background:linear-gradient(160deg,var(--c-ink-a),var(--c-ink-b));color:var(--c-on-dark) }
.dlcard--sky { background:linear-gradient(180deg,var(--c-skycard-a),var(--c-skycard-b));color:var(--c-text) }
.dlcard--butter { background:var(--c-butter);color:var(--c-text) }
.dlcard--fog { background:var(--c-fogcard);color:var(--c-text) }
.dlcard__icon { display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-btn);background:var(--c-glass-strong);color:var(--c-text) }
.dlcard--ink .dlcard__icon { background:var(--c-on-dark-line);color:var(--c-on-dark) }
.dlcard__icon svg { width:20px;height:20px }
.dlcard__os { margin:18px 0 4px;font-size:13px;font-weight:var(--weight-bold);color:var(--c-muted) }
.dlcard__name { margin:0;font-size:22px;font-weight:var(--weight-heavy);line-height:1.2 }
.dlcard__text { margin:12px 0 20px;font-size:14.5px;line-height:1.65;color:var(--c-muted) }
.dlcard--ink .dlcard__os,.dlcard--ink .dlcard__text { color:var(--c-on-dark-muted) }
.dlcard__link { margin-top:auto;font-size:15px;font-weight:var(--weight-bold);text-decoration:none }
.dlcard__link:hover { text-decoration:underline }
.client-card { min-width:0;padding:32px;border-radius:var(--r-card);background:var(--c-panel-2);color:var(--c-text);box-shadow:var(--sh-soft) }
.client-card__head { display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:20px }
.client-card__head h3 { margin:0 }
.client-card__logo { width:56px;height:56px;flex-shrink:0 }
.client-card__actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:24px }
.client-card__meta { font-size:13px;color:var(--c-muted) }
.tag,.recommend { display:inline-flex;align-items:center;max-width:100%;padding:5px 11px;border-radius:var(--r-pill);background:var(--c-chip-idle);color:var(--c-text);font-size:12px;font-weight:var(--weight-semibold);line-height:1.5;white-space:normal;overflow-wrap:anywhere }
.recommend--first,.recommend--suggested { background:var(--c-chip-idle);color:var(--c-text);border:1px solid var(--c-border) }
.recommend--retired { background:var(--c-fogcard);color:var(--c-muted);border:1px dashed var(--c-border) }
.tags { display:flex;align-items:center;flex-wrap:wrap;gap:8px }
.term-card { min-width:0;padding:26px;border-radius:var(--r-card);background:var(--c-fogcard);color:var(--c-text);box-shadow:var(--sh-soft) }
.term-card__category { font-size:12px;color:var(--c-muted) }
.term-card h3 { margin:10px 0;font-family:var(--font-mono);font-size:22px }
.term-card p { margin-bottom:0;font-size:15px;color:var(--c-muted) }
.article-card { display:flex;flex-direction:column;min-width:0;padding:28px;border-radius:var(--r-card);background:var(--c-panel-2);color:var(--c-text);box-shadow:var(--sh-soft) }
.article-card__meta { display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--c-muted) }
.article-card h3 { margin:18px 0 12px;font-size:21px;line-height:1.5 }
.article-card h3 a { text-decoration:none }
.article-card h3 a:hover { text-decoration:underline }
.article-card p { font-size:14px;color:var(--c-muted) }
.article-card__link { margin-top:auto;font-size:14px;font-weight:var(--weight-bold) }
.callout { margin:24px 0;padding:22px 24px;border-left:4px solid var(--c-ink-b);border-radius:var(--r-item);background:var(--c-panel-2);color:var(--c-text) }
.callout--warn { border-left-color:var(--c-warn);background:var(--c-butter);color:var(--c-text) }
.callout--error { border-left-color:var(--c-error);background:var(--c-fogcard);color:var(--c-text) }
.callout__title { display:block;margin-bottom:6px;font-weight:var(--weight-bold) }
.callout > :last-child { margin-bottom:0 }

/* 外包横滑与后代裸表格双重保护 */
.table-scroll { max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--r-item) }
.data-table { width:100%;border-collapse:collapse;background:var(--c-panel);color:var(--c-text);font-size:14px }
.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(--c-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(--c-panel-2);color:var(--c-text);font-weight:var(--weight-bold) }
.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;background:var(--c-panel);color:var(--c-text) }
.prose table code,.data-table code,.article-body table code { overflow-wrap:anywhere;white-space:normal }

/* 仅文章页启用的右下下载入口 */
.dl-fab { position:fixed;right:24px;bottom:24px;z-index:25;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);min-height:60px;padding:12px 18px;border-radius:var(--r-menu);background:var(--c-text);color:var(--c-on-dark);box-shadow:var(--sh-fab);text-decoration:none }
.dl-fab svg { width:22px;height:22px;flex-shrink:0 }
.dl-fab__text { min-width:0;font-size:14px;font-weight:var(--weight-bold) }
.dl-fab__text small { display:block;font-size:11px;font-weight:var(--weight-normal);color:var(--c-on-dark-muted) }
.dl-fab:hover { background:var(--c-ink-hover);color:var(--c-on-dark) }
.article-download { display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;padding:28px;border-radius:var(--r-card);background:var(--c-panel-2);color:var(--c-text);box-shadow:var(--sh-soft) }
.article-download__copy { flex:1;min-width:180px }
.article-download h2 { margin:0 0 8px;font-size:23px }
.article-download p { margin:0;color:var(--c-muted);font-size:14px }
@media (max-width:1000px) {
  .dlgrid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-stage { padding:32px;gap:24px }
}
@media (max-width:640px) {
  .tablist,[role="tablist"] { justify-content:flex-start;gap:8px;margin-bottom:20px }
  [role="tab"] { padding-inline:16px;font-size:13px }
  .feature-stage { grid-template-columns:minmax(0,1fr);padding:24px;min-height:0 }
  .feature-stage h3 { font-size:23px }
  .settings-slice { padding:18px }
  .dlgrid { grid-template-columns:minmax(0,1fr) }
  .dlcard { min-height:230px;padding:26px }
  .client-card { padding:24px }
  .client-card__actions .btn { width:100% }
  .toc { top:8px }
  .dl-fab { right:16px;bottom:16px;min-height:52px;padding:10px 14px }
  .article-download { padding:24px }
}