/* 订阅控制台：固定画布仅用于装饰，不承载正文。 */
.stage {
  position:relative; margin-top:24px; overflow:hidden;
  border:1px solid var(--grid-line); border-right:0; border-bottom:0;
  border-top-left-radius:var(--r-sheet); background-color:var(--bg-sunken); color:var(--text);
  background-image:linear-gradient(to right,var(--grid-line) 1px,var(--clear) 1px),linear-gradient(to bottom,var(--grid-line) 1px,var(--clear) 1px);
  background-size:var(--grid-step) var(--grid-step); background-position:35px 35px;
}
.rig { position:absolute; left:0; top:0; width:840px; height:840px; transform-origin:0 0; }
.card { position:absolute; border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); color:var(--text); }
.swatch { position:absolute; left:-96px; top:372px; width:340px; height:460px; border-radius:var(--r-swatch); background:linear-gradient(40deg,var(--coral) 6%,var(--violet) 94%); color:var(--ink); z-index:1; }
.card-sub { left:204px; top:222px; width:336px; height:600px; background:var(--panel); color:var(--text); z-index:2; }
.card-menu { left:20px; top:60px; width:248px; padding:8px; background:var(--panel-2); color:var(--text); z-index:3; }
.card-code { left:524px; top:28px; width:316px; background:var(--panel); color:var(--text); z-index:3; overflow:hidden; }
.card-route { left:456px; top:500px; width:340px; height:330px; background:var(--panel-2); color:var(--text); z-index:4; }
.win-head { display:flex; align-items:center; justify-content:space-between; height:56px; padding-inline:22px; border-bottom:1px solid var(--border); }
.win-title { font-size:15px; font-weight:var(--weight-bold); letter-spacing:-.01em; }
.win-meta { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.win-head svg { width:16px; height:16px; color:var(--muted); }
.form { display:grid; gap:12px; padding:18px 22px 0; }
.field-label { display:block; margin-bottom:6px; font-size:12px; line-height:18px; color:var(--muted); white-space:nowrap; }
.input { display:flex; align-items:center; justify-content:space-between; height:34px; padding-inline:12px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-field); font-size:13px; white-space:nowrap; }
.input-mono { font-family:var(--font-mono); font-size:11.5px; letter-spacing:-.01em; }
.input-ph { color:var(--muted); }
.field-pair { display:grid; grid-template-columns:76px 1fr; gap:12px; }
.toggle-slot { display:flex; align-items:center; height:34px; }
.toggle { position:relative; display:inline-block; width:40px; height:22px; border-radius:var(--r-pill); background:var(--accent); color:var(--ink); }
.toggle-knob { position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:var(--r-round); background:var(--ink); color:var(--text); }
.form-foot { display:flex; gap:8px; padding:20px 22px; }
.mini-btn { display:inline-flex; align-items:center; min-height:32px; padding-inline:16px; border:1px solid var(--border-strong); border-radius:var(--r-pill); font-size:13px; color:var(--muted); }
.mini-btn-solid { background:var(--text); border-color:var(--text); color:var(--ink); font-weight:var(--weight-semibold); }
.menu-trigger { display:flex; align-items:center; gap:8px; height:36px; padding-inline:10px; font-size:13px; font-weight:var(--weight-semibold); }
.menu-trigger svg { width:15px; height:15px; color:var(--muted); }
.menu-trigger .caret { margin-left:auto; }
.menu { margin-top:6px; padding-top:6px; border-top:1px solid var(--border); display:grid; gap:2px; }
.menu li { display:flex; align-items:center; gap:8px; height:38px; padding-inline:10px; border-radius:var(--r-item); font-size:13px; color:var(--text); white-space:nowrap; }
.menu li svg { width:14px; height:14px; color:var(--muted); }
.menu li.is-hover { background:var(--accent); color:var(--ink); font-weight:600; }
.menu li.is-hover svg { color:var(--ink); }
.code-bar { display:flex; align-items:center; gap:12px; height:40px; padding-inline:16px; background:var(--panel-2); color:var(--text); border-bottom:1px solid var(--border); }
.dots { display:flex; gap:6px; }
.dots i { width:9px; height:9px; border-radius:var(--r-round); background:var(--error); color:var(--ink); }
.dots i:nth-child(2) { background:var(--warn); color:var(--ink); }
.dots i:nth-child(3) { background:var(--success); color:var(--ink); }
.code-name { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.code-lang { margin-left:auto; padding:2px 8px; border:1px solid var(--border); border-radius:var(--r-code); font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.code { padding:14px 18px; border:0; border-radius:0; font-family:var(--font-mono); font-size:11.5px; line-height:17px; color:var(--muted); background:var(--panel); }
.code code { font-size:inherit; }
.ln { display:block; white-space:pre; margin-inline:-18px; padding-inline:18px; }
.ln.is-mark { background:var(--accent-soft); color:var(--muted); box-shadow:inset 2px 0 0 var(--accent); }
pre .k { color:var(--muted); }
pre .s { color:var(--accent); }
pre .n { color:var(--text); }
.rules { padding:8px 18px 0; }
.rules li { display:flex; align-items:center; gap:10px; height:44px; }
.rules li + li { border-top:1px dashed var(--border); }
.rules code { font-family:var(--font-mono); font-size:11.5px; color:var(--text); white-space:nowrap; }
.rule-link { position:relative; flex:1; min-width:24px; height:0; border-top:1px dashed var(--faint); }
.rule-link::after { content:""; position:absolute; right:0; top:-4px; width:7px; height:7px; border-top:1px solid var(--faint); border-right:1px solid var(--faint); transform:rotate(45deg); }
.tag { display:inline-flex; align-items:center; min-height:24px; max-width:100%; padding:3px 10px; background:var(--panel); color:var(--muted); border:1px solid var(--border); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; overflow-wrap:anywhere; }
.tag-proxy { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.strategy { padding:10px 18px 0; }
.seg { display:inline-flex; padding:3px; background:var(--panel); color:var(--muted); border:1px solid var(--border); border-radius:var(--r-pill); }
.seg span { display:inline-flex; align-items:center; height:24px; padding-inline:10px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; }
.seg .is-on { background:var(--text); color:var(--ink); font-weight:600; }

/* 每组 tabs 都用 data-tabs 建立作用域。 */
.tabs-list,[role="tablist"] { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.tab,[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px;
  border:1.5px solid var(--border-strong); border-radius:var(--r-pill);
  background:var(--panel); color:var(--text); font-size:15px; font-weight:var(--weight-semibold);
}
.tab:hover,[role="tab"]:hover { border-color:var(--accent); }
.tab[aria-selected="true"],[role="tab"][aria-selected="true"] { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.tab-panel { margin-top:32px; min-width:0; }
.sheet [role="tab"] { border-color:var(--ink); background:var(--clear); color:var(--ink); }
.sheet [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--ink); }
.feat { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
.feat-title { font-size:var(--type-h2); line-height:1.12; }
.feat-tabs { margin-top:36px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.feat-tab { white-space:nowrap; }
.feat-head { display:flex; align-items:center; gap:14px; padding-block:22px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.stamp { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:var(--r-field); background:var(--accent); color:var(--ink); border:1px solid var(--ink); }
.stamp svg { width:18px; height:18px; }
.feat-head h3 { font-size:22px; }
.feat-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; padding-top:32px; }
.feat-text p { font-size:15px; line-height:1.8; color:var(--ink-soft); }
.mini {
  position:relative; height:300px; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-mini);
  background-color:var(--accent); color:var(--ink);
  background-image:linear-gradient(to right,var(--ink-grid) 1px,var(--clear) 1px),linear-gradient(to bottom,var(--ink-grid) 1px,var(--clear) 1px),linear-gradient(135deg,var(--accent) 10%,var(--mint) 100%);
  background-size:48px 48px,48px 48px,100% 100%; box-shadow:var(--shadow-paper);
}
.mini-badge { position:absolute; top:14px; right:14px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-badge); background:linear-gradient(40deg,var(--coral),var(--violet)); color:var(--ink); }
.mini-badge svg { width:20px; height:20px; }
.mini-slice { position:absolute; left:36px; top:52px; right:0; bottom:0; background:var(--panel); color:var(--text); border-top:1px solid var(--border); border-left:1px solid var(--border); border-radius:var(--r-slice) 0 0 0; }
.mini-head { padding:16px 20px; border-bottom:1px solid var(--border); font-size:14px; font-weight:var(--weight-bold); }
.mini-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:10px 20px; font-size:13px; color:var(--muted); }
.mini-row + .mini-row { border-top:1px solid var(--border); }
.mini-val { display:inline-flex; align-items:center; min-height:30px; padding:4px 12px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-field); }
.mini-val.mono { font-size:11.5px; }

/* 目录直接放在覆盖所有章节的长内容容器内，不为 sticky 增设短父容器。 */
.toc { position:sticky; top:16px; z-index:5; display:flex; gap:8px; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; padding:10px; border:1px solid var(--border); border-radius:var(--r-menu); background:var(--panel); color:var(--text); }
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 16px; flex-shrink:0; border-radius:var(--r-pill); font-size:14px; }
.toc a:hover,.toc a[aria-current] { background:var(--accent); color:var(--ink); }
.sheet .toc { background:var(--paper); color:var(--ink); border-color:var(--ink-grid); }
.faq-list { display:grid; gap:12px; }
.faq-item { min-width:0; border:1px solid var(--border); border-radius:var(--r-mini); background:var(--panel); color:var(--text); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding:20px 24px; list-style:none; font-weight:var(--weight-semibold); cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex-shrink:0; font-family:var(--font-mono); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--muted); }
.sheet .faq-item { background:var(--paper); color:var(--ink); border-color:var(--ink-grid); }
.sheet .faq-answer { color:var(--ink-soft); }

.term-card,.client-card,.article-card { min-width:0; display:flex; flex-direction:column; gap:16px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-card); }
.term-card p,.client-card p,.article-card p { color:var(--muted); font-size:15px; }
.sheet .term-card,.sheet .client-card,.sheet .article-card { border-color:var(--ink-grid); background:var(--paper); color:var(--ink); box-shadow:var(--shadow-paper); }
.sheet .term-card p,.sheet .client-card p,.sheet .article-card p { color:var(--ink-soft); }
.card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.card-heading h3 { min-width:0; }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:26px; padding:4px 10px; border:1px solid var(--border-strong); border-radius:var(--r-pill); background:var(--panel-2); color:var(--text); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.badge-primary { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.badge-recommended { background:var(--mint); color:var(--ink); border-color:var(--mint); }
.badge-retired { background:var(--panel-2); color:var(--muted); border-style:dashed; }
.status-dot { width:6px; height:6px; border-radius:var(--r-round); background:var(--accent); color:var(--ink); }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.sheet .article-meta { color:var(--ink-soft); }
.article-card h3 a:hover { text-decoration:underline; text-underline-offset:5px; }
.article-card .pill-link { align-self:flex-start; margin-top:auto; }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.callout { margin-block:24px; padding:24px; border:1px solid var(--accent-line); border-left:4px solid var(--accent); border-radius:var(--r-menu); background:var(--panel); color:var(--text); }
.callout p + p { margin-top:12px; }
.sheet .callout { background:var(--accent-soft); color:var(--ink); border-color:var(--ink-grid); border-left-color:var(--ink); }
.callout-title { display:block; margin-bottom:8px; font-weight:var(--weight-bold); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-menu); }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.data-table th,.data-table td,.prose th,.prose td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; vertical-align:top; }
.data-table th,.prose th { background:var(--panel-2); color:var(--text); font-weight:var(--weight-semibold); }
.data-table td,.prose td { background:var(--panel); color:var(--text); }
.sheet .table-scroll { border-color:var(--ink-grid); }
.sheet .data-table th,.sheet .prose th { background:var(--ink); color:var(--text); }
.sheet .data-table td,.sheet .prose td { background:var(--paper); color:var(--ink); border-color:var(--ink-grid); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; text-align:left; }
.prose td code,.data-table td code { overflow-wrap:anywhere; }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); color:var(--text); }
.article-download p { margin-top:8px; color:var(--muted); }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:30; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:56px; padding:12px 20px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--accent); color:var(--ink); box-shadow:var(--shadow-card); font-size:14px; font-weight:var(--weight-bold); }
.dl-fab svg { width:20px; height:20px; }
.dl-fab:hover { background:var(--accent-dark); color:var(--ink); }

/* 仅供静态设计预览使用。每个色块引用同名令牌。 */
.preview-section { padding-top:72px; }
.preview-section > h2 { margin-bottom:28px; }
.preview-section > p { margin-bottom:24px; color:var(--ink-soft); }
.token-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; }
.token { min-width:0; border:1px solid var(--ink-grid); border-radius:var(--r-menu); overflow:hidden; background:var(--paper); color:var(--ink); }
.token-swatch { display:block; height:70px; border-bottom:1px solid var(--ink-grid); }
.token code { display:block; padding:12px; font-size:12px; }
.sw-bg { background:var(--bg); color:var(--text); }
.sw-sunken { background:var(--bg-sunken); color:var(--text); }
.sw-panel { background:var(--panel); color:var(--text); }
.sw-panel2 { background:var(--panel-2); color:var(--text); }
.sw-border { background:var(--border); color:var(--text); }
.sw-strong { background:var(--border-strong); color:var(--text); }
.sw-grid { background:var(--grid-line); color:var(--text); }
.sw-accent { background:var(--accent); color:var(--ink); }
.sw-accent-dark { background:var(--accent-dark); color:var(--ink); }
.sw-accent-line { background:var(--accent-line); color:var(--ink); }
.sw-accent-soft { background:var(--accent-soft); color:var(--ink); }
.sw-mint { background:var(--mint); color:var(--ink); }
.sw-coral { background:var(--coral); color:var(--ink); }
.sw-violet { background:var(--violet); color:var(--ink); }
.sw-text { background:var(--text); color:var(--ink); }
.sw-muted { background:var(--muted); color:var(--ink); }
.sw-faint { background:var(--faint); color:var(--text); }
.sw-ink { background:var(--ink); color:var(--text); }
.sw-ink-soft { background:var(--ink-soft); color:var(--text); }
.sw-ink-grid { background:var(--ink-grid); color:var(--ink); }
.sw-paper { background:var(--paper); color:var(--ink); }
.sw-success { background:var(--success); color:var(--ink); }
.sw-warn { background:var(--warn); color:var(--ink); }
.sw-error { background:var(--error); color:var(--ink); }
.sw-clear { background:var(--clear); color:var(--ink); }
.sw-veil { background:var(--veil); color:var(--text); }
.button-samples { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-block:12px; }
.type-sample { display:grid; gap:20px; }
.type-display { font-family:var(--font-display); font-size:var(--type-h1); line-height:1.12; font-weight:var(--weight-display); }
.preview-download { margin-inline:16px; border-radius:0 0 var(--r-sheet) var(--r-sheet); background:var(--bg-sunken); color:var(--text); padding-top:64px; padding-bottom:64px; }
.preview-download h2 { margin-bottom:24px; }
.preview-note { font-size:13px; color:var(--ink-soft); }
@media (max-width:1180px) { .rig { transform:scale(.9); } }
@media (max-width:1080px) {
  .stage { height:560px; margin:0 0 0 16px; }
  .rig { transform:scale(.78); }
  .feat { grid-template-columns:minmax(0,1fr); gap:40px; }
}
@media (max-width:640px) {
  .stage { height:440px; }
  .rig { transform:scale(.58); }
  .feat-tabs { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; align-items:center; }
  .feat-tab { flex-shrink:0; }
  .feat-body { grid-template-columns:minmax(0,1fr); }
  .feat-head { gap:12px; }
  .feat-head h3 { font-size:20px; }
  .mini { height:300px; }
  .term-card,.client-card,.article-card { padding:20px; }
  .faq-item summary { padding:18px 20px; }
  .faq-answer { padding:0 20px 20px; }
  .dl-fab { right:16px; bottom:16px; }
  .preview-download { margin-inline:8px; }
  .type-display { font-size:30px; }
}