/* 所有浮窗均为静态设置示意，不作为可交互表单。 */
.stage { position:relative; margin:0; padding:150px 26px 40px 0; min-width:0 }
.stage__dome { position:absolute; z-index:0; top:0; left:14%; width:380px; height:190px; border-radius:var(--r-pill) var(--r-pill) 0 0; background:var(--geo-cobalt); color:var(--c-on-accent) }
.stage__ghost { position:absolute; z-index:1; top:128px; right:0; bottom:62px; left:56px; border-radius:var(--r-window); background:var(--c-panel); color:var(--c-ink); box-shadow:var(--shadow-ghost); opacity:.94 }
.win { position:relative; z-index:2; background:var(--c-bg); color:var(--c-ink); border-radius:var(--r-window); box-shadow:var(--shadow-float); overflow:hidden }
.win__bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 24px 18px 28px; border-bottom:1px solid var(--c-line) }
.win__title { font-family:var(--f-display); font-size:var(--fs-brand); font-weight:var(--weight-brand); letter-spacing:var(--tracking-brand) }
.chip { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill); background:var(--c-accent-soft); color:var(--c-accent); font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:var(--weight-medium); line-height:1.4; max-width:100%; overflow-wrap:anywhere }
.chip::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-accent) }
.win__ctrl { margin-left:auto; display:flex; gap:20px; color:var(--c-muted) }
.win__ctrl svg { width:12px; height:12px }
.win__body { display:grid; grid-template-columns:172px minmax(240px,1fr) 214px }
.win__body>* { min-width:0 }
.col { padding:22px 20px 24px }
.col+.col { border-left:1px solid var(--c-line) }
.col__head { margin:0 0 12px; font-size:var(--fs-xs); font-weight:var(--weight-bold); letter-spacing:.02em; color:var(--c-muted) }
.steps { padding:22px 12px 24px }
.steps .col__head { padding-inline:10px }
.steps ul { list-style:none; margin:0; padding:0 }
.steps li { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-field); font-size:var(--fs-small); font-weight:var(--weight-medium); color:var(--c-muted) }
.steps li+li { margin-top:2px }
.steps li i { flex-shrink:0; width:9px; height:9px; border-radius:var(--r-round); border:2px solid var(--c-line-strong) }
.steps li.is-on { background:var(--c-accent-soft); color:var(--c-accent) }
.steps li.is-on i { border-color:var(--c-accent); background:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-ring) }
.form { display:grid; gap:14px; padding:22px 24px 24px }
.form .col__head { margin:0 }
.field__label { display:block; margin-bottom:6px; font-size:var(--fs-xs); font-weight:var(--weight-medium); color:var(--c-muted) }
.input { min-height:38px; padding:8px 12px; display:flex; align-items:center; border:1px solid var(--c-line); border-radius:var(--r-field); background:var(--c-bg); color:var(--c-ink); font-size:var(--fs-small); min-width:0; overflow-wrap:anywhere }
.input--mono { font-family:var(--f-mono); font-size:var(--fs-xs) }
.input--focus { border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-ring) }
.input--select { justify-content:space-between; gap:12px }
.input--select svg { width:12px; height:12px; color:var(--c-muted) }
.form__row { display:grid; grid-template-columns:86px minmax(0,1fr); gap:16px; align-items:end }
.toggle { height:38px; display:flex; align-items:center }
.toggle__track { position:relative; width:42px; height:24px; border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-on-accent); flex-shrink:0 }
.toggle__track::after { content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:var(--r-round); background:var(--c-on-accent); box-shadow:var(--shadow-knob) }
.proxy { display:flex; flex-direction:column; padding:22px 16px 20px }
.proxy .col__head { padding-inline:6px }
.radio { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-field); font-size:var(--fs-small); font-weight:var(--weight-medium); color:var(--c-muted) }
.radio+.radio { margin-top:2px }
.radio i { position:relative; flex-shrink:0; width:18px; height:18px; border-radius:var(--r-round); border:2px solid var(--c-line-strong); background:var(--c-bg) }
.radio.is-on { background:var(--c-accent-soft); color:var(--c-ink) }
.radio.is-on i { border-color:var(--c-accent); background:var(--c-accent) }
.radio.is-on i::after { content:""; position:absolute; inset:4px; border-radius:var(--r-round); background:var(--c-on-accent) }
.proxy__ok { margin-top:auto; min-height:40px; border-radius:var(--r-btn); background:var(--c-accent); color:var(--c-on-accent); display:grid; place-items:center; font-size:var(--fs-label); font-weight:var(--weight-bold); box-shadow:var(--shadow-btn-sm) }
.geo-tri { position:absolute; z-index:0; right:-120px; bottom:-150px; width:540px; height:540px; pointer-events:none; max-width:none }
.s-lavender { stop-color:var(--geo-lavender) }
.s-coral { stop-color:var(--geo-coral) }

/* 通用 tabs；每组使用独立 data-tabs 容器。 */
.tab-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; padding:6px; border-radius:var(--r-tray); background:var(--c-panel); color:var(--c-ink) }
.tab-list [role="tab"] { min-height:44px; padding:10px 20px; border-radius:var(--r-btn); background:var(--c-panel); color:var(--c-muted); font-weight:var(--weight-medium); text-align:center }
.tab-list [role="tab"]:hover { background:var(--c-panel-2); color:var(--c-ink) }
.tab-list [role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--shadow-btn-sm) }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px }
.feature-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center }
.feature-layout>* { min-width:0 }
.feature-list { display:flex; flex-direction:column; gap:0 }
.feature-list [role="tab"] { width:100%; padding:22px 0; text-align:left; border-bottom:1px solid var(--c-line); background:var(--c-bg); color:var(--c-muted); font-size:var(--fs-h3); font-weight:var(--weight-bold); position:relative }
.feature-list [role="tab"][aria-selected="true"] { color:var(--c-ink) }
.feature-list [role="tab"][aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--c-accent) }
.feature-detail { display:block; margin-top:16px; font-size:var(--fs-body); line-height:1.8; font-weight:var(--weight-normal); color:var(--c-muted) }
.feature-list [aria-selected="false"] .feature-detail { display:none }
.feature-stage { position:relative; isolation:isolate; overflow:hidden; min-height:440px; padding:70px 36px; border-radius:var(--r-window); background:var(--c-panel); color:var(--c-ink); display:grid; align-items:center }
.feature-stage::before { content:""; position:absolute; z-index:-1; width:80%; height:80%; left:-20%; top:-36%; border-radius:var(--r-card); transform:rotate(-35deg); background:linear-gradient(135deg,var(--geo-cobalt),var(--geo-lavender),var(--geo-coral)) }
.feature-stage .card { box-shadow:var(--shadow-float) }
.setting-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-block:16px; border-bottom:1px solid var(--c-line); font-size:var(--fs-label) }
.setting-line:last-child { border-bottom:0 }
.toc { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:14px; margin-block:32px; border:1px solid var(--c-line); border-radius:var(--r-tray); background:var(--c-bg); color:var(--c-ink) }
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-field); color:var(--c-muted); text-decoration:none; font-size:var(--fs-label) }
.toc a:hover,.toc a[aria-current] { background:var(--c-accent-soft); color:var(--c-accent) }
.faq { padding:0 24px; border-bottom:1px solid var(--c-line); background:var(--c-bg); color:var(--c-ink) }
.faq summary { position:relative; padding:24px 36px 24px 0; font-weight:var(--weight-bold); cursor:pointer; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; position:absolute; right:0; top:22px; color:var(--c-accent); font-size:var(--fs-h3) }
.faq[open] summary::after { content:"−" }
.faq__body { padding-bottom:24px; color:var(--c-muted) }
.faq__body p:last-child { margin:0 }
.term-card { border-top:3px solid var(--c-accent) }
.term-card dt { margin-bottom:12px; font-size:var(--fs-h3); font-weight:var(--weight-brand) }
.term-card dd { margin:0; color:var(--c-muted) }
.term-card .tag { margin-bottom:16px }
.client-card { padding:32px; border-radius:var(--r-window); background:var(--c-bg); color:var(--c-ink); box-shadow:var(--shadow-float) }
.client-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:20px }
.client-card__head h3 { margin:0 }
.client-card__head img { width:56px; height:56px; flex-shrink:0 }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.client-card__meta { font-family:var(--f-mono); font-size:var(--fs-small); color:var(--c-muted) }
.badge,.tag { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:var(--weight-medium); background:var(--c-panel-2); color:var(--c-ink); max-width:100%; overflow-wrap:anywhere; text-decoration:none }
.badge--first { background:var(--c-accent); color:var(--c-on-accent) }
.badge--recommended { background:var(--c-accent-soft); color:var(--c-accent) }
.badge--retired { background:var(--c-panel-2); color:var(--c-ink) }
.badge--retired::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-warn) }
.status-dot { width:7px; height:7px; border-radius:var(--r-round); background:var(--c-success) }
.article-card { display:flex; flex-direction:column; align-items:flex-start; height:100% }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; font-size:var(--fs-xs); color:var(--c-muted) }
.article-card h3 { font-size:var(--fs-h3); margin-bottom:16px }
.article-card h3 a { color:var(--c-ink); text-decoration:none }
.article-card h3 a:hover { color:var(--c-accent) }
.article-card p { color:var(--c-muted) }
.article-card__link { margin-top:auto; padding-top:16px; font-size:var(--fs-label); font-weight:var(--weight-bold) }
.callout { margin:28px 0; padding:24px 28px; border-left:3px solid var(--c-accent); border-radius:0 var(--r-tray) var(--r-tray) 0; background:var(--c-panel); color:var(--c-ink) }
.callout p:last-child { margin-bottom:0 }
.callout--warn { border-color:var(--c-warn) }
.callout--error { border-color:var(--c-error) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--c-line); border-radius:var(--r-tray); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-label); background:var(--c-bg); color:var(--c-ink) }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-line); overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th { background:var(--c-panel); color:var(--c-ink); font-weight:var(--weight-bold) }
.data-table tr:last-child td { border-bottom:0 }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; background:var(--c-bg); color:var(--c-ink) }
.data-table code,.prose table code { overflow-wrap:anywhere; word-break:normal; white-space:normal }
.download-guide { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:32px; margin-top:48px; background:var(--c-panel); color:var(--c-ink); border-radius:var(--r-card) }
.download-guide__copy { flex:1 1 240px; min-width:0 }
.download-guide h2,.download-guide h3 { font-size:var(--fs-h3); margin:0 0 8px }
.download-guide p { color:var(--c-muted); margin:0 }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:25; display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px); padding:16px 20px; border-radius:var(--r-tray); background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--shadow-btn); font-weight:var(--weight-bold); font-size:var(--fs-label); text-decoration:none }
.dl-fab:hover { background:var(--c-accent-dark); color:var(--c-on-accent) }
.dl-fab svg { width:22px; height:22px; flex-shrink:0 }
.has-dl-fab .site-footer { padding-bottom:110px }

/* 预览色板只用令牌映射，不写行内样式。 */
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px }
.swatch { min-width:0; font-family:var(--f-mono); font-size:var(--fs-xs) }
.swatch__paint { height:74px; margin-bottom:10px; border:1px solid var(--c-line); border-radius:var(--r-field) }
.paint-bg { background:var(--c-bg) }
.paint-panel { background:var(--c-panel) }
.paint-panel-2 { background:var(--c-panel-2) }
.paint-line { background:var(--c-line) }
.paint-line-strong { background:var(--c-line-strong) }
.paint-accent { background:var(--c-accent) }
.paint-accent-dark { background:var(--c-accent-dark) }
.paint-accent-soft { background:var(--c-accent-soft) }
.paint-accent-ring { background:var(--c-accent-ring) }
.paint-ink { background:var(--c-ink) }
.paint-muted { background:var(--c-muted) }
.paint-muted-2 { background:var(--c-muted-2) }
.paint-on-accent { background:var(--c-on-accent) }
.paint-success { background:var(--c-success) }
.paint-warn { background:var(--c-warn) }
.paint-error { background:var(--c-error) }
.paint-veil { background:var(--c-veil) }
.paint-cobalt { background:var(--geo-cobalt) }
.paint-lavender { background:var(--geo-lavender) }
.paint-coral { background:var(--geo-coral) }
.type-display { font-family:var(--f-display); font-size:var(--fs-h1); font-weight:var(--weight-display); line-height:var(--leading-display) }
.preview-states { display:flex; flex-wrap:wrap; gap:24px; align-items:center }
.preview-caption { margin-top:16px; color:var(--c-muted); font-size:var(--fs-small) }
@media(max-width:1180px) {
  .stage { max-width:860px; width:100%; margin-inline:auto }
  .win__body { grid-template-columns:172px minmax(0,1fr) 214px }
  .feature-layout { gap:32px }
}
@media(max-width:760px) {
  .win__body { grid-template-columns:minmax(0,1fr) }
  .col+.col { border-left:0; border-top:1px solid var(--c-line) }
  .stage__dome { width:240px; height:120px; top:30px }
  .feature-layout { grid-template-columns:minmax(0,1fr) }
  .proxy__ok { margin-top:20px }
}
@media(max-width:640px) {
  .stage { padding-right:12px; padding-top:150px }
  .stage__ghost { left:24px }
  .win__bar { padding:20px; gap:10px }
  .win__title { font-size:var(--fs-body) }
  .win__ctrl { display:none }
  .form { padding-inline:20px }
  .feature-stage { min-height:340px; padding:48px 20px }
  .client-card { padding:24px }
  .tab-list [role="tab"] { flex:1 1 110px; padding-inline:12px }
  .toc { position:static; gap:4px; padding:8px }
  .toc a { padding-inline:10px }
  .dl-fab { right:20px; bottom:16px; padding:12px 16px }
  .download-guide { padding:24px }
}