/* 共用编辑器：外框、画布、字段问答侧栏。 */
.deck {
  position: relative;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: minmax(0,68fr) minmax(0,32fr);
  gap: 24px;
  padding: 24px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.deck-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: radial-gradient(120% 95% at 0% 100%,var(--canvas-lit) 0%,var(--clear) 58%),linear-gradient(180deg,var(--canvas-2),var(--canvas));
  color: var(--text);
  box-shadow: 0 0 0 1px var(--glow-faint),0 0 16px var(--glow),-40px 48px 96px -24px var(--glow-strong),inset 0 0 22px var(--glow-faint),inset 30px -40px 90px -50px var(--glow);
}
.deck-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 10px; background: var(--canvas-bar); color: var(--text); border-bottom: 1px solid var(--glow-line); border-radius: var(--r-md) var(--r-md) 0 0; }
.grip { width: 14px; height: 14px; color: var(--accent-soft); opacity: .7; flex-shrink: 0; }
.file-tab { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; font: 12.5px var(--font-mono); color: var(--accent-soft); background: var(--glow-faint); border: 1px solid var(--glow-line); border-radius: var(--r-xs); flex-shrink: 0; }
.file-tab svg { width: 12px; height: 12px; flex-shrink: 0; }
.bar-note, .bar-pos { font: 12px var(--font-mono); color: var(--text-muted); }
.bar-pos { margin-left: auto; }
.yaml { margin: 0; padding: 16px 0 64px; list-style: none; counter-reset: ln; font: 13px/20px var(--font-mono); overflow-x: auto; }
.yaml li { display: grid; grid-template-columns: 52px minmax(36ch,1fr); height: 20px; counter-increment: ln; }
.yaml li::before { content: counter(ln); text-align: right; padding-right: 20px; color: var(--text-muted); font-size: 12px; }
.yaml li.is-pick::before { color: var(--accent-soft); }
.src { position: relative; display: block; white-space: pre; color: var(--text); }
.src .k { color: var(--text); }
.src .p, .src .c { color: var(--text-muted); }
.src .v { color: var(--accent-soft); }
.src .r { color: var(--text-muted); }
.pick, .refbox { position: absolute; left: -8px; top: -1px; width: 28ch; height: 22px; border: 1px solid var(--accent); background: var(--sel-fill); color: var(--text); border-radius: var(--r-selection); box-shadow: 0 0 12px var(--glow-faint); pointer-events: none; }
.pick b { position: absolute; right: 10px; top: -17px; height: 16px; padding: 0 6px; font: 500 10px/16px var(--font-mono); color: var(--ink); background: var(--accent); border-radius: var(--r-label) var(--r-label) 0 0; }
.pick i { position: absolute; width: 5px; height: 5px; background: var(--canvas); color: var(--text); border: 1px solid var(--accent); }
.pick .tl { left: -3px; top: -3px; }
.pick .tr { right: -3px; top: -3px; }
.pick .bl { left: -3px; bottom: -3px; }
.pick .br { right: -3px; bottom: -3px; }
.refbox { border: 1px dashed var(--glow-dash); background: var(--clear); color: var(--text); box-shadow: none; }
.capsule { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.capsule .tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--text-muted); flex-shrink: 0; }
.capsule .tool.is-on { background: var(--bg-panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.capsule svg { width: 16px; height: 16px; }
.capsule .div { width: 1px; height: 18px; background: var(--border); color: var(--text); margin: 0 4px; }
.capsule .enc { padding: 0 10px 0 6px; font: 12px var(--font-mono); color: var(--text); white-space: nowrap; }
.qa { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qa-tabs { display: flex; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.qa-tabs span { padding: 6px 12px; font-size: 13px; color: var(--text-muted); border-radius: var(--r-sm); }
.qa-tabs .is-on { background: var(--bg-panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.qa-select { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 12px; font-size: 13px; background: var(--bg-panel-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-sm); }
.qa-select code { font: 12.5px var(--font-mono); color: var(--text); }
.qa-select svg { width: 14px; height: 14px; flex-shrink: 0; }
.qa-card { padding: 12px 14px; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); }
.qa-card.is-linked { border-color: var(--glow-line); box-shadow: inset 0 0 0 1px var(--glow-faint); }
.qa-card.is-ref { background: var(--clear); color: var(--text); border-style: dashed; border-color: var(--glow-dash); }
.qa-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 11px var(--font-mono); color: var(--text-muted); }
.qa-meta b { font-weight: 500; color: var(--accent-soft); }
.qa-q { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.qa-q code { font: 12.5px var(--font-mono); color: var(--accent-soft); }
.qa-a { margin: 0; padding-inline: 4px; font-size: 13px; line-height: 1.8; color: var(--text-muted); }
.tok { font: 12px var(--font-mono); padding: 1px 6px; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xs); }
.qa-input { margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 14px; font-size: 13px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-md); }
.qa-input svg { width: 15px; height: 15px; flex-shrink: 0; }
.qa-input kbd { margin-left: auto; display: grid; place-items: center; min-width: 22px; height: 22px; font: 11px var(--font-mono); background: var(--bg-panel-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-xs); flex-shrink: 0; }

/* 字段索引台；平台标签也使用相同的语义结构。 */
.tabs { min-width: 0; }
.field-tabs, [role="tablist"] { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; min-width: 0; }
[role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 18px;
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font: 13px/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}
[role="tab"][aria-selected="true"] { border-color: var(--accent); color: var(--text); box-shadow: 0 0 12px var(--glow-faint); }
[role="tabpanel"] { min-width: 0; }
.tab-progress { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; overflow: hidden; border-radius: var(--r-pill); background: var(--border); color: var(--text); }
.tab-progress::after { content: ""; display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); color: var(--text); }
.tabs.is-playing [aria-selected="true"] .tab-progress::after { animation: field-countdown var(--tab-duration) linear forwards; }
@keyframes field-countdown { to { transform: scaleX(1); } }
.field-panel { position: relative; display: grid; grid-template-columns: minmax(0,58fr) minmax(0,42fr); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-panel); color: var(--text); overflow: hidden; }
.field-panel::after { content: ""; position: absolute; right: 0; bottom: 0; width: min(240px,50%); height: 170px; pointer-events: none; background: radial-gradient(ellipse at 100% 100%,var(--glow-faint),var(--clear) 72%); color: var(--text); }
.field-code { min-width: 0; padding: 28px; border-right: 1px solid var(--border); }
.field-code pre { margin: 0; }
.field-answer { min-width: 0; padding: 32px; }
.field-answer h3 { margin-top: 0; }
.field-answer p { font-size: 15px; line-height: 1.9; }
.line-highlight { display: block; border: 1px solid var(--accent); border-radius: var(--r-selection); background: var(--sel-fill); color: var(--text); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 24px 40px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); }
.toc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; color: var(--text-muted); text-decoration: none; border-radius: var(--r-sm); }
.toc a:hover { background: var(--bg-panel-2); color: var(--text); }
.toc.is-sticky { position: sticky; top: 12px; z-index: 10; }
.faq-item { border-bottom: 1px solid var(--border); padding-block: 4px; }
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; min-height: 60px; padding-block: 16px; list-style: none; cursor: pointer; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; font: 20px var(--font-mono); color: var(--accent-soft); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: 20px; max-width: 780px; }
.faq-answer > :first-child { margin-top: 0; }
.term-card, .client-card, .post-card, .article-download { min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-panel); color: var(--text); }
.term-card h3, .client-card h3, .post-card h3 { margin-top: 0; }
.term-card dt { font: 18px var(--font-mono); color: var(--text); }
.term-card dd { margin: 16px 0 0; color: var(--text-muted); }
.client-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.client-head > div { min-width: 0; }
.client-logo { width: 56px; height: 56px; flex-shrink: 0; }
.client-head h3 { margin: 0 0 8px; }
.client-card.is-primary { border-color: var(--accent); }
.client-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-meta { font-size: 13px; color: var(--text-muted); }
[data-ver]:empty { display: none; }
.badge, .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel-2); color: var(--text-muted); vertical-align: middle; }
.badge--first, .badge--recommended { border-color: var(--glow-line); color: var(--accent-soft); }
.badge--archived { border-style: dashed; color: var(--text-muted); }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--success); color: var(--ink); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 12px; color: var(--text-muted); }
.post-card h3 { font-size: 22px; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-soft); }
.callout { margin-block: 28px; padding: 20px 24px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); }
.callout p { margin-block: 8px 0; }
.callout--warn { border-left-color: var(--warn); }
.callout--error { border-left-color: var(--error); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-md); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.data-table :is(th,td), .prose table :is(th,td), .article-body table :is(th,td) { min-width: 7em; padding: 16px 20px; border-bottom: 1px solid var(--border); overflow-wrap: normal; word-break: normal; }
.data-table th, .prose table th, .article-body table th { background: var(--bg-panel-2); color: var(--text); font-weight: 500; }
.data-table td, .prose table td, .article-body table td { background: var(--bg-panel); color: var(--text-muted); }
.prose table, .article-body table { display: block; overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.data-table code, .prose table code, .article-body table code { overflow-wrap: anywhere; }
.article-download { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; }
.article-download > div { min-width: 0; }
.article-download h2 { margin: 0 0 8px; font-size: 24px; }
.article-download p { margin: 0; }
.dl-fab { position: fixed; right: 24px; bottom: max(24px,env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: calc(100% - 40px); padding: 12px 18px; background: var(--white); color: var(--ink); border: 1px solid var(--white); border-radius: var(--r-pill); font-size: 14px; text-decoration: none; }
.dl-fab:hover { background: var(--text); color: var(--ink); }
.dl-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
body.has-dl-fab .site-footer { padding-bottom: 80px; }

/* 静态设计预览，不依赖 JS。 */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 16px; }
.swatch { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-panel); color: var(--text); }
.swatch-sample { height: 64px; border-bottom: 1px solid var(--border); color: var(--text); }
.swatch code { display: block; padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); }
.sw-panel2 { background: var(--bg-panel-2); }
.sw-border { background: var(--border); }
.sw-border-strong { background: var(--border-strong); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-accent-soft { background: var(--accent-soft); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-faint { background: var(--text-faint); }
.sw-white { background: var(--white); }
.sw-ink { background: var(--ink); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-canvas { background: var(--canvas); }
.sw-canvas2 { background: var(--canvas-2); }
.sw-canvas-bar { background: var(--canvas-bar); }
.sw-canvas-lit { background: var(--canvas-lit); }
.sw-glow-strong { background: var(--glow-strong); }
.sw-glow { background: var(--glow); }
.sw-glow-faint { background: var(--glow-faint); }
.sw-glow-line { background: var(--glow-line); }
.sw-glow-dash { background: var(--glow-dash); }
.sw-selection { background: var(--sel-fill); }
.sw-clear { background: var(--clear); }
.sw-veil { background: var(--veil); }
.preview-states { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-block: 20px; }
.preview-footer { margin-top: 0; }

@media (max-width: 1080px) {
  .deck { grid-template-columns: minmax(0,1fr); }
  .qa-input { margin-top: 4px; }
}
@media (max-width: 760px) {
  .deck { padding: 14px; border-radius: var(--r-mobile); }
  .yaml { font-size: 12px; padding-bottom: 72px; }
  .bar-note, .bar-pos { display: none; }
  .field-panel { grid-template-columns: minmax(0,1fr); }
  .field-code { padding: 20px; border-right: 0; border-bottom: 1px solid var(--border); }
  .field-answer { padding: 24px; }
}
@media (max-width: 640px) {
  .term-card, .client-card, .post-card, .article-download { padding: 20px; }
  .article-download { flex-direction: column; align-items: flex-start; }
  .dl-fab { right: 20px; }
  .toc.is-sticky { position: static; }
}