/* 大纲树与染色详情板 */
.tabs { min-width: 0; }
.feature-tabs { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: 48px; margin-top: 40px; }
.tab-list { display: flex; gap: 8px; min-width: 0; list-style: none; }
.tab-list [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 18px;
  border: var(--line) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-panel);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
}
.tab-list [role="tab"][aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.outline-tabs { position: relative; flex-direction: column; align-items: stretch; gap: 8px; padding-left: 18px; }
.outline-tabs::before { content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 2px; background: var(--accent); }
.outline-tabs [role="tab"] { position: relative; border: 0; border-radius: var(--radius-sm); background: var(--bg); color: var(--text-muted); padding-left: 0; }
.outline-tabs [role="tab"]:nth-child(even) { margin-left: 20px; }
.outline-tabs [role="tab"][aria-selected="true"] { color: var(--accent); }
.tab-dot { display: block; width: 14px; height: 14px; flex-shrink: 0; border-radius: var(--radius-circle); background: var(--accent); transition: transform var(--time-fast); }
.outline-tabs [role="tab"]:nth-child(3n + 2) .tab-dot { background: var(--success); }
.outline-tabs [role="tab"]:nth-child(3n) .tab-dot { background: var(--warn); }
[role="tab"][aria-selected="true"] .tab-dot { transform: scale(1.25); }
[role="tabpanel"] { min-width: 0; animation: panel-arrive .25s var(--ease-out); }
.feature-detail { border-radius: var(--radius-lg); overflow: hidden; color: var(--text); background: var(--accent-tint); }
.feature-art { display: grid; align-items: center; min-height: 240px; padding: 28px; background: var(--accent); color: var(--bg-panel); }
.feature-art svg { width: 100%; height: auto; max-height: 230px; display: block; }
.feature-body { padding: 28px; }
.feature-body h3 { margin-bottom: 12px; }
.feature-body p { line-height: 1.8; }
.feature-body pre { margin-top: 20px; }
.tone-direct { background: var(--success-tint); color: var(--text); }
.tone-direct .feature-art { color: var(--text); background: var(--success); }
.tone-reject { background: var(--warn-tint); color: var(--text); }
.tone-reject .feature-art { color: var(--text); background: var(--warn); }
.art-line { fill: none; stroke: currentColor; stroke-width: 2; }
.art-pill { fill: var(--bg-panel); stroke: var(--border); stroke-width: 1; }
.art-label { fill: var(--text); font-family: var(--font-mono); font-size: 12px; }
@keyframes panel-arrive { from { opacity: 0; } to { opacity: 1; } }

/* 分类锚点导航保持文档流；需要吸顶时父级必须覆盖所有章节。 */
.toc { max-width: 100%; margin-bottom: 32px; border: var(--line) solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); padding: 20px; }
.toc-title { margin-bottom: 10px; font-weight: var(--weight-medium); }
.toc ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: var(--text-sm); }
.toc-sticky { position: sticky; top: 16px; z-index: 4; }
.toc-static { position: static; }

.faq-list { border-radius: var(--radius-lg); border: var(--line) solid var(--border); overflow: hidden; color: var(--text); background: var(--bg-panel); }
.faq-item + .faq-item { border-top: var(--line) solid var(--border); }
.faq-item summary { position: relative; min-height: 64px; padding: 20px 54px 20px 24px; cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 18px; color: var(--accent); font-family: var(--font-mono); font-size: 22px; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); }
.faq-answer > * + * { margin-top: 12px; }

.term-card { min-width: 0; padding: 28px; border-radius: var(--radius-lg); color: var(--text); background: var(--bg-panel); border: var(--line) solid var(--border); }
.term-card dt, .term-card h3 { font-family: var(--font-mono); color: var(--accent); font-size: 20px; overflow-wrap: anywhere; }
.term-card dd, .term-card p { margin-top: 12px; color: var(--text-muted); }
.term-category { display: inline-block; margin-bottom: 16px; font-size: var(--text-xs); color: var(--text-muted); }

.appstore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  padding: 12px 26px;
  border: var(--line) solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--bg-panel);
  background: var(--accent);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--time-fast), border-color var(--time-fast);
}
.appstore-button svg { width: 20px; height: 22px; flex-shrink: 0; }
.appstore-button:hover, .appstore-button.is-hover { color: var(--bg-panel); background: var(--accent-dark); border-color: var(--accent-dark); }
.appstore-button:active, .appstore-button.is-active { color: var(--bg-panel); background: var(--accent-dark); border-color: var(--accent-dark); }
.appstore-button[aria-disabled="true"] { color: var(--text-muted); background: var(--bg); border-color: var(--border); pointer-events: none; }
.appstore-copy { display: block; }
.appstore-copy small { display: block; font-size: 11px; font-weight: var(--weight-normal); }
.appstore-copy strong { display: block; font-size: 15px; font-weight: var(--weight-medium); }
.store-primary { min-height: 64px; padding: 14px 30px; font-size: var(--text-lead); }

.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.fact { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; color: var(--text); background: var(--bg-panel); border: var(--line) solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-xs); overflow-wrap: anywhere; }
.fact-label { color: var(--text-muted); }
.fact code { font-size: 12px; }
.fact-long { flex-basis: auto; }
.fact-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--success); flex-shrink: 0; }

.shot-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 28px; }
.official-shot { width: 100%; max-width: 280px; margin-inline: auto; min-width: 0; flex-shrink: 0; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-shot); }
.official-shot figcaption { padding-top: 12px; font-size: var(--text-xs); line-height: 1.7; color: var(--text-muted); }
.shot-frame { border: var(--line) solid var(--border); border-radius: var(--radius-shot); }
.shot-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 750 / 1334; border: var(--line) solid var(--border); border-radius: var(--radius-shot); color: var(--text-muted); background: var(--bg-panel2); text-align: center; font-size: var(--text-sm); }

.device-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; min-width: 0; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-lg); text-decoration: none; }
.device-card > svg { width: 48px; height: 56px; color: var(--accent); flex-shrink: 0; }
.device-card p { color: var(--text-muted); }
.device-card .device-link { margin-top: auto; color: var(--accent); font-weight: var(--weight-medium); }
.device-card:hover { border-color: var(--accent); }
.article-card { display: flex; flex-direction: column; min-width: 0; color: var(--text); background: var(--bg-panel); border: var(--line) solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; color: var(--text-muted); font-size: var(--text-xs); }
.article-card h3 { font-size: 21px; }
.article-card h3 a { color: var(--text); text-decoration: none; }
.article-card h3 a:hover { color: var(--accent); }
.article-card p { margin-top: 14px; color: var(--text-muted); }
.article-card > a:last-child { margin-top: 24px; }
.badge-accent { color: var(--accent); background: var(--accent-tint); border-color: var(--accent-tint); }
.badge-direct { color: var(--text); background: var(--success-tint); border-color: var(--success-tint); }
.badge-reject { color: var(--text); background: var(--warn-tint); border-color: var(--warn-tint); }
.callout { padding: 24px; border-left: 3px solid var(--accent); border-radius: var(--radius-sm); color: var(--text); background: var(--accent-tint); }
.callout > * + * { margin-top: 10px; }
.callout-note { border-left-color: var(--warn); color: var(--text); background: var(--warn-tint); }
.callout-direct { border-left-color: var(--success); color: var(--text); background: var(--success-tint); }
.grouped-list { border: var(--line) solid var(--border); border-radius: var(--radius-lg); list-style: none; overflow: hidden; color: var(--text); background: var(--bg-panel); }
.grouped-list li + li { border-top: var(--line) solid var(--border); }
.grouped-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 24px; color: var(--text); text-decoration: none; }
.grouped-list a::after { content: "›"; color: var(--accent); flex-shrink: 0; font-size: 24px; }
.grouped-list a:hover { color: var(--accent); background: var(--bg-panel2); }

.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: var(--line) solid var(--border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em;
  padding: 14px 18px;
  border-bottom: var(--line) solid var(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th { color: var(--text); background: var(--bg-panel2); font-weight: var(--weight-medium); }
.data-table td, .prose table td { color: var(--text); background: var(--bg-panel); }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; }
.data-table code, .prose table code { overflow-wrap: anywhere; white-space: normal; }

.dl-fab { position: fixed; z-index: 15; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - var(--gutter) * 2); min-height: 48px; padding: 12px 20px; border-radius: var(--radius-pill); color: var(--bg-panel); background: var(--accent); border: var(--line) solid var(--accent); text-decoration: none; font-size: var(--text-sm); }
.dl-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.dl-fab:hover { color: var(--bg-panel); background: var(--accent-dark); }
.article-store-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; color: var(--text); background: var(--bg-panel2); border-radius: var(--radius-lg); }
.article-store-card > div { min-width: 0; flex: 1 1 260px; }
.article-store-card h2 { font-size: 24px; }
.article-store-card p { margin-top: 10px; color: var(--text-muted); }

/* 首屏插画的颜色只从令牌取值。 */
.st-sky-top { stop-color: var(--ill-sky-top); }
.st-sky-bottom { stop-color: var(--ill-sky-bottom); }
.st-white { stop-color: var(--bg-panel); }
.f-mtn-far { fill: var(--ill-mtn-far); }
.f-mtn { fill: var(--ill-mtn); }
.f-slope { fill: var(--ill-slope); }
.f-hill { fill: var(--ill-hill); }
.f-shrub { fill: var(--ill-shrub); }
.f-cloud { fill: var(--ill-cloud); }
.f-ground { fill: var(--bg); }
.f-rock { fill: var(--ill-rock); }
.f-rock-hi { fill: var(--ill-mtn); }
.f-stone { fill: var(--ill-stone); }
.f-accent { fill: var(--accent); }
.f-success { fill: var(--success); }
.f-warn { fill: var(--warn); }
.f-dark { fill: var(--accent-dark); }
.br-edge, .stream-edge { fill: none; stroke: var(--ill-stream-edge); stroke-linecap: round; }
.br-edge { stroke-width: 14; }
.stream-edge { stroke-width: 21; }
.br-edge.cut { stroke-linecap: butt; }
.br { fill: none; stroke-width: 8; stroke-linecap: round; }
.br-proxy { stroke: var(--accent); stroke-width: 7; }
.br-direct { stroke: var(--success); }
.br-reject { stroke: var(--warn); stroke-linecap: butt; }
.stream { fill: none; stroke: var(--ill-stream); stroke-width: 12; stroke-linecap: round; }
.phone-body { fill: var(--bg-panel); stroke: var(--accent-dark); stroke-width: 3.5; }
.phone-key { fill: var(--accent-dark); }
.phone-home { fill: var(--accent-dark); opacity: .35; }
.tie { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.anchor { fill: var(--bg-panel); stroke-width: 2; }
.anchor-proxy { stroke: var(--accent); }
.anchor-direct { stroke: var(--success); }
.anchor-reject { stroke: var(--warn); }
.pill { fill: var(--bg-panel); stroke: var(--border); stroke-width: 1; }
.pill-text { font-family: var(--font-mono); font-size: 12px; fill: var(--text); }
.stone-text { font-family: var(--font-mono); font-size: 11.5px; fill: var(--text-muted); }
.t-proxy { fill: var(--accent); font-weight: var(--weight-strong); }
.t-direct, .t-reject { fill: var(--text); font-weight: var(--weight-strong); }
.flow-dot { fill: var(--bg-panel); }
.fd-p1 { transform: translate(1122px, 561px); }
.fd-p2 { transform: translate(1230px, 500px); }
.fd-p3 { transform: translate(1336px, 473px); }
.fd-d1 { transform: translate(1156px, 639px); }
.fd-d2 { transform: translate(1290px, 640px); }
.fd-d3 { transform: translate(1386px, 653px); }
.fd-r1 { transform: translate(1067px, 667px); }
.fd-r2 { transform: translate(1116px, 693px); }
.fd-r3 { transform: translate(1175px, 708px); }

/* 设计预览专用；正式页面不需要这些类。 */
.preview-section { padding-top: 64px; padding-bottom: 64px; }
.preview-section > h2 { margin-bottom: 28px; }
.preview-section > h3 { margin-top: 32px; margin-bottom: 18px; }
.preview-logo { background: var(--bg-panel); color: var(--text); border-radius: var(--radius-circle); }
.preview-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.swatch { min-width: 0; border: var(--line) solid var(--border); border-radius: var(--radius-sm); overflow: hidden; color: var(--text); background: var(--bg-panel); }
.swatch-color { height: 64px; }
.swatch code { display: block; padding: 10px; font-size: 11px; }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); }
.sw-panel2 { background: var(--bg-panel2); }
.sw-header { background: var(--bg-header); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-accent-soft { background: var(--accent-soft); }
.sw-accent-tint { background: var(--accent-tint); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-success { background: var(--success); }
.sw-success-tint { background: var(--success-tint); }
.sw-warn { background: var(--warn); }
.sw-warn-tint { background: var(--warn-tint); }
.sw-error { background: var(--error); }
.sw-sky-top { background: var(--ill-sky-top); }
.sw-sky-bottom { background: var(--ill-sky-bottom); }
.sw-mtn-far { background: var(--ill-mtn-far); }
.sw-mtn { background: var(--ill-mtn); }
.sw-slope { background: var(--ill-slope); }
.sw-hill { background: var(--ill-hill); }
.sw-shrub { background: var(--ill-shrub); }
.sw-rock { background: var(--ill-rock); }
.sw-stone { background: var(--ill-stone); }
.sw-stream { background: var(--ill-stream); }
.sw-stream-edge { background: var(--ill-stream-edge); }
.sw-cloud { background: var(--ill-cloud); }
.preview-display { font-size: var(--title-size); font-family: var(--font-display); line-height: 1.12; color: var(--accent); }
.preview-facts { margin-top: 24px; }
.preview-state { display: grid; gap: 10px; justify-items: start; }
.preview-state small { color: var(--text-muted); }
.preview-on-white { background: var(--bg-panel); color: var(--text); }
.preview-color-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.color-panel { min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--accent-tint); color: var(--text); }
.color-panel-visual { display: grid; align-content: center; gap: 12px; padding: 28px; min-height: 200px; color: var(--bg-panel); background: var(--accent); }
.color-panel-visual code { color: var(--text); background: var(--bg-panel); border-radius: var(--radius-pill); padding: 8px 12px; }
.color-panel-body { padding: 28px; }
.color-panel-body p { margin-top: 12px; }
.color-panel-direct { color: var(--text); background: var(--success-tint); }
.color-panel-direct .color-panel-visual { color: var(--text); background: var(--success); }
.color-panel-reject { color: var(--text); background: var(--warn-tint); }
.color-panel-reject .color-panel-visual { color: var(--text); background: var(--warn); }

@media (max-width: 960px) {
  .feature-tabs { grid-template-columns: 1fr; gap: 24px; }
  .outline-tabs { flex-direction: row; align-items: stretch; overflow-x: auto; padding: 4px; }
  .outline-tabs::before { display: none; }
  .outline-tabs [role="tab"], .outline-tabs [role="tab"]:nth-child(even) { margin-left: 0; padding: 12px 16px; border: var(--line) solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); color: var(--text-muted); flex-shrink: 0; }
  .outline-tabs [role="tab"][aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
}
@media (max-width: 768px) {
  .preview-color-panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature-art { min-height: 190px; padding: 20px; }
  .feature-body, .term-card, .article-card, .device-card { padding: 24px; }
  .facts { flex-direction: row; flex-wrap: wrap; }
  .fact { padding: 6px 10px; }
  .shot-row { flex-direction: column; align-items: center; }
  .official-shot { max-width: min(280px, 100%); }
  .article-store-card { padding: 24px; }
  .article-store-card .appstore-button { width: 100%; }
  .preview-section { padding-top: 48px; padding-bottom: 48px; }
  .preview-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  [role="tabpanel"] { animation: none; }
}