.tagbadge,.badge,.fact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  padding: 6px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}
.tagbadge { padding-left: 11px; box-shadow: var(--shadow-soft); }
.tagbadge b { color: var(--text); font-weight: 600; }
.tagbadge__dot,.status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-wash); }
.status-dot--success { background: var(--success); box-shadow: none; }
.badge--accent { background: var(--accent-wash); color: var(--text); border-color: var(--clear); }
.fact-pills,.protocols { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fact-pill code { color: var(--text); }
.app-store-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  max-width: 100%;
  padding: 12px 26px 12px 22px;
  border: 1px solid var(--clear);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg,var(--accent-from),var(--accent));
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
  font: 600 16px/1.3 var(--font-body);
  text-align: center;
  text-decoration: none;
  transition: transform var(--duration),box-shadow var(--duration);
}
.app-store-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-store-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.app-store-button:active { transform: translateY(1px); box-shadow: var(--shadow-soft); }
.app-store-button--badge { min-height: 60px; border-radius: var(--r-note); background: var(--bg-panel-2); color: var(--on-dark); box-shadow: var(--shadow-soft); }
.app-store-button--badge svg { width: 25px; height: 28px; }
.app-store-button__text { display: grid; gap: 3px; text-align: left; }
.app-store-button__text small { font: 500 11px/1.2 var(--font-body); }
.app-store-button__text strong { font: 600 16px/1.3 var(--font-body); }
.tabs { min-width: 0; }
.tabs__rail { max-width: 100%; margin: 0 auto 32px; padding: 6px; width: fit-content; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; border-radius: var(--r-pill); background: var(--track); color: var(--text); }
.tabs__rail [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--r-pill); background: var(--clear); color: var(--text-muted); font-size: 14px; font-weight: 600; }
.tabs__rail [role="tab"] svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabs__rail [aria-selected="true"] { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.tabs__rail [role="tab"]:hover { color: var(--text); }
.tabs__panel { padding: 48px; border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-float); }
.tabs__panel + .tabs__panel { margin-top: 24px; }
.tabs.is-enhanced .tabs__panel { margin-top: 0; }
.feature-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 56px; }
.feature-detail > * { min-width: 0; }
.feature-detail p { color: var(--text-muted); }
.feature-detail pre { margin: 0; }
.setting-group { margin: 0; padding: 0; list-style: none; border-radius: var(--r-note); background: var(--gutter-bg); color: var(--text); border: 1px solid var(--border); }
.setting-group li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 14px 20px; }
.setting-group li + li { border-top: 1px solid var(--border); }
.setting-group li::after { content: "›"; color: var(--text-muted); }
.toc { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-note); background: var(--bg-panel); color: var(--text); }
.toc__list { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; list-style: none; padding: 0; margin: 0; }
.toc__list li { flex-shrink: 0; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: var(--r-pill); color: var(--text-muted); font-size: 14px; text-decoration: none; }
.toc a:hover,.toc a[aria-current] { background: var(--track); color: var(--text); }
.toc--sticky { position: sticky; top: 12px; z-index: 10; }
.faq { border-radius: var(--r-note); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); }
.faq + .faq { margin-top: 12px; }
.faq summary { position: relative; padding: 22px 54px 22px 24px; min-height: 64px; list-style: none; cursor: pointer; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 22px; color: var(--text-muted); font-family: var(--font-mono); }
.faq[open] summary::after { content: "−"; }
.faq__body { padding: 0 24px 24px; color: var(--text-muted); }
.faq__body > :last-child { margin-bottom: 0; }
.term-card { padding: 28px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.term-card__category { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 12px; }
.term-card h3 { font: 700 21px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.term-card p { color: var(--text-muted); }
.term-card > :last-child { margin-bottom: 0; }
.official-shot { width: 100%; max-width: 280px; min-width: 0; flex-shrink: 0; margin-inline: auto; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-shot); }
.official-shot { border-radius: var(--r-shot); outline: 1px solid var(--border); background: var(--bg-panel); color: var(--text-muted); }
.official-shot figcaption { padding: 14px 12px; font-size: 13px; line-height: 1.6; text-align: center; }
.shot-row { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 32px; }
.device-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 36px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-note); text-decoration: none; }
.device-card__icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.device-card h3,.device-card p { margin: 0; }
.device-card p { color: var(--text-muted); }
.device-card__link { margin-top: auto; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-dark); text-underline-offset: .3em; }
.device-card:hover { box-shadow: var(--shadow-float); }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.article-card h3 { font-size: 21px; line-height: 1.5; margin: 0; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent-dark); }
.article-card p { margin: 0; color: var(--text-muted); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
.article-card__more { margin-top: auto; font-size: 14px; }
.callout { margin: 24px 0; padding: 24px 28px; border-left: 3px solid var(--accent); border-radius: var(--r-note); background: var(--accent-wash); color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout__title { display: block; margin-bottom: 8px; font-weight: 700; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: var(--r-note); }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); color: var(--text); text-align: left; }
.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(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th,.prose table th,.manual-body table th { background: var(--track); color: var(--text); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.prose table,.manual-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: var(--bg-panel);
  color: var(--text);
  overscroll-behavior-inline: contain;
}
.data-table td code,.prose table td code,.manual-body table td code { overflow-wrap: anywhere; }
.dl-fab { position: fixed; right: max(18px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 36px); min-height: 56px; padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-note); font-size: 14px; font-weight: 600; text-decoration: none; }
.dl-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.has-article-fab { padding-bottom: 96px; }
.article-store-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 48px; padding: 32px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-note); }
.article-store-card__copy { flex: 1 1 260px; min-width: 0; }
.article-store-card h2 { font-size: 24px; margin: 0 0 12px; }
.article-store-card p { color: var(--text-muted); margin: 0; }

/* 配置文件道具是文本示例，不仿制应用操作界面。 */
.stage { position: relative; width: 92%; margin: 34px auto 0; }
.hero__screenshot { display: block; width: min(100%, 300px); height: auto; margin-inline: auto; border-radius: 10px; box-shadow: var(--shadow-lg); }
.stage__horizon { position: absolute; left: 50%; bottom: -70px; width: 140%; height: 300px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%,var(--accent-glow),var(--accent-glow-soft) 45%,var(--clear) 72%); color: var(--text); pointer-events: none; z-index: 0; }
.monitor { position: relative; z-index: 1; }
.monitor__bezel { padding: 9px; border-radius: var(--r-bezel); background: linear-gradient(180deg,var(--alu-hi),var(--alu-mid) 55%,var(--alu-lo)); color: var(--text); box-shadow: 0 0 0 1px var(--alu-edge),inset 0 1px 0 var(--bg-panel),inset 0 -1px 0 var(--alu-edge),var(--shadow-float); }
.monitor__screen { background: var(--bg-panel); color: var(--text); border-radius: var(--r-screen); overflow: hidden; box-shadow: 0 0 0 1px var(--alu-inner); text-align: left; }
.monitor__neck { width: 150px; height: 36px; margin-inline: auto; background: linear-gradient(180deg,var(--alu-lo),var(--alu-hi) 38%,var(--alu-mid)); color: var(--text); clip-path: polygon(9% 0,91% 0,100% 100%,0 100%); }
.monitor__foot { width: 270px; height: 9px; margin-inline: auto; border-radius: var(--r-foot); background: linear-gradient(180deg,var(--alu-hi),var(--alu-lo)); color: var(--text); box-shadow: inset 0 0 0 1px var(--alu-edge),var(--shadow-foot); }
.doc__bar { position: relative; height: 35px; display: flex; align-items: center; padding-inline: 14px; border-bottom: 1px solid var(--border); }
.doc__lights { display: flex; gap: 7px; }
.doc__lights i { display: block; width: 11px; height: 11px; border-radius: var(--r-pill); }
.doc__lights i:nth-child(1) { background: var(--error); }
.doc__lights i:nth-child(2) { background: var(--accent); }
.doc__lights i:nth-child(3) { background: var(--success); }
.doc__title { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font: 500 12px/1 var(--font-mono); color: var(--text-muted); }
.doc__body { padding: 16px 28px 18px 0; font: 13.5px/22px var(--font-mono); background: linear-gradient(90deg,var(--gutter-bg) 0 56px,var(--border) 56px 57px,var(--bg-panel) 57px); color: var(--text); overflow-x: auto; }
.doc__lines { min-width: 870px; }
.ln { display: grid; grid-template-columns: 57px 470px minmax(0,1fr) 250px; align-items: center; min-height: 22px; }
.ln__no { text-align: right; padding-right: 16px; font-size: 12px; color: var(--text-muted); user-select: none; }
.ln__code { padding-left: 22px; white-space: pre; color: var(--text); font: inherit; overflow-wrap: normal; }
.ln--hl .ln__code { justify-self: start; margin-left: 12px; padding: 0 12px 0 10px; border-radius: var(--r-code); background: var(--accent-wash); color: var(--text); }
.ln__lead { position: relative; height: 0; border-top: 1px dashed var(--accent); margin-right: 12px; }
.ln__lead::before { content: ""; position: absolute; left: -3px; top: -3.5px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); }
.ln__note { justify-self: start; margin-block: -9px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-note); box-shadow: var(--shadow-note); font: 500 13px/1.35 var(--font-body); white-space: nowrap; }
.ln__note code { font: 700 12px/1.35 var(--font-mono); color: var(--text); }
.c-cmt,.c-val,.c-op,.c-sep,.c-arg { color: var(--text-muted); }
.c-sec,.c-kw,.p-direct { color: var(--text); font-weight: 700; }
.p-proxy { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.p-reject { color: var(--error); font-weight: 700; }

/* 预览专用家具，不参与正式截图样式。 */
.preview-section { padding-top: 72px; padding-bottom: 72px; }
.preview-colors { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.swatch { margin: 0; border-radius: var(--r-note); border: 1px solid var(--border); overflow: hidden; background: var(--bg-panel); color: var(--text); }
.swatch__paint { height: 72px; background: var(--bg); }
.swatch figcaption { padding: 10px 12px; font: 11px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.swatch--panel .swatch__paint { background: var(--bg-panel); }
.swatch--dark .swatch__paint { background: var(--bg-panel-2); }
.swatch--border .swatch__paint { background: var(--border); }
.swatch--accent .swatch__paint { background: var(--accent); }
.swatch--from .swatch__paint { background: var(--accent-from); }
.swatch--accent-dark .swatch__paint { background: var(--accent-dark); }
.swatch--text .swatch__paint { background: var(--text); }
.swatch--muted .swatch__paint { background: var(--text-muted); }
.swatch--faint .swatch__paint { background: var(--text-faint); }
.swatch--success .swatch__paint { background: var(--success); }
.swatch--warn .swatch__paint { background: var(--warn); }
.swatch--error .swatch__paint { background: var(--error); }
.swatch--track .swatch__paint { background: var(--track); }
.swatch--gutter .swatch__paint { background: var(--gutter-bg); }
.swatch--line .swatch__paint { background: var(--line-num); }
.swatch--hi .swatch__paint { background: var(--alu-hi); }
.swatch--mid .swatch__paint { background: var(--alu-mid); }
.swatch--lo .swatch__paint { background: var(--alu-lo); }
.swatch--edge .swatch__paint { background: var(--alu-edge); }
.swatch--inner .swatch__paint { background: var(--alu-inner); }
.swatch--wash .swatch__paint { background: var(--accent-wash); }
.swatch--glow .swatch__paint { background: var(--accent-glow); }
.swatch--soft .swatch__paint { background: var(--accent-glow-soft); }
.swatch--ring .swatch__paint { background: var(--accent-ring); }
.swatch--selection .swatch__paint { background: var(--selection); }
.swatch--veil .swatch__paint { background: var(--veil); }
.swatch--clear .swatch__paint { background: var(--clear); }
.shot-placeholder { display: grid; place-items: center; aspect-ratio: 750 / 1334; border-radius: var(--r-shot); background: var(--track); color: var(--text-muted); text-align: center; font: 13px/1.8 var(--font-mono); }
.preview-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.preview-type h2 { margin-top: 28px; }
@media (max-width: 1180px) {
  .ln { grid-template-columns: 57px 440px minmax(0,1fr) 236px; }
}
@media (max-width: 1040px) {
  .stage { width: 100%; }
  .doc__lines { min-width: 650px; }
  .ln { grid-template-columns: 48px minmax(0,1fr); }
  .ln__lead,.ln__note { display: none; }
  .doc__body { background: linear-gradient(90deg,var(--gutter-bg) 0 47px,var(--border) 47px 48px,var(--bg-panel) 48px); color: var(--text); }
}
@media (max-width: 768px) {
  .feature-detail { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .tabs__panel { padding: 28px; }
  .preview-colors { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .tabs__rail { border-radius: var(--r-note); gap: 4px; }
  .tabs__rail [role="tab"] { padding-inline: 12px; font-size: 13px; }
  .tabs__panel { padding: 24px; }
  .fact-pills,.protocols { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .fact-pill { font-size: 12px; padding: 6px 10px; }
  .shot-row { flex-direction: column; align-items: center; }
  .device-card { padding: 28px; }
  .preview-colors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .doc__body { font-size: 11.5px; line-height: 19px; padding-right: 12px; background: linear-gradient(90deg,var(--gutter-bg) 0 37px,var(--border) 37px 38px,var(--bg-panel) 38px); color: var(--text); }
  .doc__lines { min-width: 560px; }
  .ln { min-height: 19px; grid-template-columns: 38px minmax(0,1fr); }
  .ln__no { padding-right: 10px; font-size: 10.5px; }
  .ln__code { padding-left: 12px; }
  .monitor__bezel { padding: 6px; border-radius: var(--r-small-bezel); }
  .monitor__neck { width: 90px; height: 24px; }
  .monitor__foot { width: 160px; }
  .callout { padding: 20px; }
  .article-store-card { padding: 24px; }
}