/* 诺辉研究 · 组件样式。只用 theme.css 的变量，不出现任何字面色值。 */

/* ═══ 外壳 ═══ */
.shell-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--c-bg) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border)}
.shell-top .in{max-width:var(--layout-max);margin:0 auto;padding:0 var(--sp-5);height:64px;
  display:flex;align-items:center;gap:var(--sp-5)}
.brand{display:flex;align-items:center;gap:10px;font:600 20px var(--font-display);letter-spacing:-.02em;flex:none}
.brand svg{display:block;width:28px;height:28px;flex:none}
.brand .en{font:400 12.4px var(--font-body);color:var(--c-text-faint);letter-spacing:.06em;margin-left:2px}
.brand:hover .cell{fill:var(--c-brand-hover)}
.nav{display:flex;gap:var(--sp-1);margin-left:var(--sp-2)}
.nav a{padding:8px 12px;border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--c-text-muted);
  transition:color var(--dur-fast) var(--ease-in),background var(--dur-fast) var(--ease-in)}
.nav a:hover{color:var(--c-text);background:var(--c-surface)}
.nav a.on{color:var(--c-text);font-weight:500;background:var(--c-brand-soft)}
.top-search{flex:1 1 200px;min-width:180px;max-width:320px;position:relative}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);flex:none}
.role-switch{display:flex;align-items:center;gap:var(--sp-2);padding:5px 8px 5px 12px;border:1px solid var(--c-border);
  border-radius:999px;background:var(--c-bg)}
.role-switch .k{font:500 var(--fs-micro) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-faint)}
/* 身份切换器里的下拉：要压过后面 .field 的 margin-bottom，所以用两个类提权 */
.role-switch .field{margin:0}
.role-switch .sel{width:auto}
.role-switch .sel-t{width:auto;height:26px;padding:0 2px 0 6px;border:0;background:none;
  font-size:var(--fs-xs);font-weight:500;gap:6px;justify-content:flex-start}
.role-switch .sel-t:hover{border:0;color:var(--c-brand)}
.role-switch .sel-m{right:0;left:auto;min-width:190px}
.shell-top .burger{display:none}
.shell-foot{border-top:1px solid var(--c-border);background:var(--c-surface);margin-top:var(--sp-10)}
.shell-foot .in{max-width:var(--layout-max);margin:0 auto;padding:var(--sp-7) var(--sp-5);
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.shell-foot h5{margin:0 0 var(--sp-3);font:500 var(--fs-eyebrow) var(--font-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-text-faint)}
.shell-foot a,.shell-foot p{display:block;font-size:var(--fs-xs);color:var(--c-text-muted);line-height:1.9}
/* 上面这条 (0,2,0) 会压过 .brand (0,1,0)，把页脚品牌位的 flex 与字号一起覆盖掉，
   结果是 28px 图标配 12.5px 文字、且不再垂直居中。这里重新指定。*/
.shell-foot .brand{display:flex;align-items:center;gap:9px;color:var(--c-text);
  font:600 17px/1 var(--font-display);letter-spacing:-.02em;margin-bottom:var(--sp-3)}
.shell-foot .brand svg{width:22px;height:22px}
.shell-foot .brand:hover{text-decoration:none}
.shell-foot a:hover{color:var(--c-text);text-decoration:underline}
.shell-foot .legal a.out,.shell-foot a.out{color:var(--c-brand);display:inline}
.shell-foot a.out:hover{color:var(--c-brand);text-decoration:underline}
.shell-foot .legal{max-width:var(--layout-max);margin:0 auto;padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--c-border);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  font-size:var(--fs-xs);color:var(--c-text-faint)}
.page{max-width:var(--layout-max);margin:0 auto;padding:var(--sp-7) var(--sp-5) 0}
.page-read{max-width:var(--layout-read)}
.page-head{margin-bottom:var(--sp-6)}
.page-head .eyebrow{font:500 var(--fs-eyebrow) var(--font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-faint);display:block;margin-bottom:var(--sp-2)}
.page-head p{margin-top:var(--sp-3);color:var(--c-text-muted);font-size:var(--fs-sm);max-width:70ch;line-height:1.75}

/* ═══ 按钮（VI §8.1）═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:40px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--radius-md);background:none;color:var(--c-text);
  font:500 var(--fs-sm) var(--font-body);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-in),border-color var(--dur-fast) var(--ease-in),
             color var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn-primary{background:var(--c-brand);color:var(--c-on-brand)}
.btn-primary:hover:not(:disabled){background:var(--c-brand-hover)}
.btn-second{border-color:var(--c-border)}
.btn-second:hover:not(:disabled){background:var(--c-surface);border-color:var(--c-border-strong)}
.btn-ghost{color:var(--c-text-muted)}
.btn-ghost:hover:not(:disabled){background:var(--c-surface);color:var(--c-text)}
.btn-text{height:auto;padding:0;color:var(--c-brand)}
.btn-text:hover{text-decoration:underline}
.btn-danger{background:var(--c-danger);color:var(--c-bg)}
.btn-danger:hover:not(:disabled){filter:brightness(.92)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-sm);color:var(--c-text-muted)}
.btn-icon:hover{background:var(--c-surface);color:var(--c-text)}
.btn-icon:active{transform:scale(.94)}
.btn-sm{height:32px;padding:0 14px;font-size:var(--fs-xs)}
.btn-lg{height:48px;padding:0 28px;font-size:15.5px}
.btn-block{width:100%}
.btn:disabled{background:var(--c-surface-3);color:var(--c-text-disabled);border-color:transparent;cursor:not-allowed}
.btn-second:disabled,.btn-ghost:disabled{background:none;border-color:var(--c-line-soft)}
.btn .spin{width:14px;height:14px;border:1.6px solid color-mix(in srgb,var(--c-on-brand) 35%,transparent);
  border-top-color:var(--c-on-brand);border-radius:50%;animation:spin .9s linear infinite;flex:none}
.btn-second .spin,.btn-ghost .spin{border-color:var(--c-border);border-top-color:var(--c-brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ 表单（VI §8.2 / §8.3）═══ */
.field{margin-bottom:var(--sp-5)}
.field>label{display:block;font-size:var(--fs-xs);font-weight:500;margin-bottom:7px}
.field .req{color:var(--c-danger);margin-left:3px}
.inp{width:100%;height:40px;padding:0 14px;background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--radius-md);font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease-in),background var(--dur-fast) var(--ease-in)}
textarea.inp{height:auto;min-height:112px;padding:10px 14px;resize:vertical;line-height:1.6}
.inp:hover:not(:disabled){border-color:var(--c-border-strong)}
.inp:focus{outline:2px solid var(--c-brand-soft);outline-offset:0;border-color:var(--c-brand)}
.inp::placeholder{color:var(--c-text-faint)}
.inp:disabled{background:var(--c-surface-3);color:var(--c-text-disabled);cursor:not-allowed}
.inp[aria-invalid="true"]{border-color:var(--c-danger);background:var(--c-danger-soft)}
.field .msg{min-height:18px;margin-top:5px;font-size:var(--fs-xs);color:var(--c-text-faint);line-height:1.4}
.field .msg.err{color:var(--c-danger)}
.inp-pre{position:relative}
.inp-pre .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--c-text-faint);pointer-events:none;transition:color var(--dur-fast)}
.inp-pre .inp{padding-left:38px}
.inp-pre .inp:focus~.ic{color:var(--c-brand)}
.chk{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--fs-sm);
  min-height:36px;line-height:1.55;user-select:none}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .bx{width:16px;height:16px;margin-top:2px;flex:none;border:1px solid var(--c-border-strong);
  border-radius:var(--radius-sm);background:var(--c-bg);display:grid;place-items:center;
  transition:background var(--dur-fast) var(--ease-in),border-color var(--dur-fast) var(--ease-in)}
.chk.radio .bx{border-radius:50%}
.chk .bx svg{opacity:0;transition:opacity 180ms}
.chk input:checked+.bx{background:var(--c-brand);border-color:var(--c-brand)}
.chk input:checked+.bx svg{opacity:1}
.chk.radio input:checked+.bx{background:var(--c-bg);border-color:var(--c-brand);
  box-shadow:inset 0 0 0 4px var(--c-brand)}
.chk input:focus-visible+.bx{outline:2px solid var(--c-border-strong);outline-offset:2px}
.chk input:disabled+.bx{background:var(--c-surface-3);border-color:var(--c-border)}
.chk input:disabled~span{color:var(--c-text-disabled)}
/* 整块可点的单选卡（支付方式、套餐选择）*/
.pick{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--c-border);
  border-radius:var(--radius-md);cursor:pointer;background:var(--c-bg);
  transition:border-color var(--dur-fast) var(--ease-in),background var(--dur-fast) var(--ease-in)}
.pick:hover{border-color:var(--c-border-strong);background:var(--c-surface)}
.pick.on{border-color:var(--c-brand);background:var(--c-brand-soft)}

/* 自定义下拉（禁用原生 select，VI §8.3）*/
.sel{position:relative}
.sel-t{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-md);
  font-size:var(--fs-sm);cursor:pointer;text-align:left;transition:border-color var(--dur-fast) var(--ease-in)}
.sel-t:hover{border-color:var(--c-border-strong)}
.sel.open .sel-t{border-color:var(--c-brand)}
.sel-t .ar{flex:none;color:var(--c-text-faint);transition:transform var(--dur-fast) var(--ease-in)}
.sel.open .sel-t .ar{transform:rotate(180deg)}
.sel-m{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;padding:4px;background:var(--c-bg);
  border:1px solid var(--c-border-strong);border-radius:var(--radius-md);max-height:280px;overflow:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.sel.open .sel-m{opacity:1;transform:none;pointer-events:auto}
.sel-o{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;
  font-size:var(--fs-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background 150ms}
.sel-o:hover,.sel-o.hot{background:var(--c-brand-soft)}
.sel-o.on{background:var(--c-brand-soft);font-weight:500}
.sel-o .ck{color:var(--c-brand);opacity:0}.sel-o.on .ck{opacity:1}

/* ═══ 卡片 / 列表 / 面包屑 ═══ */
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--sp-5)}
a.card,.card-link{display:block;transition:background var(--dur-base) var(--ease-in),
  border-color var(--dur-base) var(--ease-in),transform var(--dur-fast) var(--ease-in)}
a.card:hover,.card-link:hover{background:var(--c-surface);border-color:var(--c-border-strong)}
a.card:active,.card-link:active{transform:scale(.995)}
.list{border-top:1px solid var(--c-line-soft)}
.list>a,.list>li{display:block;padding:14px var(--sp-4);margin:0 calc(var(--sp-4) * -1);
  border-bottom:1px solid var(--c-line-soft);transition:background var(--dur-fast) var(--ease-in)}
.list>a:hover{background:var(--c-surface)}
.list>a:focus-visible{outline-offset:-2px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);
  color:var(--c-text-muted);margin-bottom:var(--sp-4)}
.crumb .sp{color:var(--c-text-faint)}
.crumb a:hover{color:var(--c-text);text-decoration:underline}
.crumb .cur{color:var(--c-text)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--radius-sm);
  background:var(--c-surface-2);color:var(--c-text-muted);font-size:var(--fs-xs);
  transition:background var(--dur-fast),color var(--dur-fast)}
a.tag:hover{background:var(--c-brand-soft);color:var(--c-brand)}
.desc{border-top:1px solid var(--c-line-soft)}
.desc .r{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--sp-4);padding:12px 0;
  border-bottom:1px solid var(--c-line-soft);font-size:var(--fs-xs)}
.desc .r dt{color:var(--c-text-muted)}
.desc .r dd{margin:0}

/* ═══ 状态标签（VI §2.6 / §8.8：形状 + 颜色双编码，不靠色相区分）═══ */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;
  border-radius:var(--radius-sm);font-size:var(--fs-xs);line-height:1;white-space:nowrap}
.st i{width:8px;height:8px;flex:none;display:block}
.st-done{background:var(--c-accent);color:var(--c-text);border:1px solid var(--t-700)}
.st-done i{background:var(--t-700)}
.st-live{background:var(--c-brand-soft);color:var(--c-brand);border:1px solid var(--c-brand)}
.st-live i{background:var(--c-brand);border-radius:50%}
.st-wait{background:transparent;color:var(--c-text-muted);border:1px dashed var(--t-mute)}
.st-wait i{background:transparent;border:1.4px dashed var(--t-mute)}
.st-off{background:var(--c-surface-2);color:var(--c-text-muted);border:1px solid var(--c-border)}
.st-off i{background:var(--t-mute)}
.st-bad{background:var(--c-danger-soft);color:var(--c-danger);border:1px solid var(--c-danger)}
.st-bad i{background:var(--c-danger);border-radius:50%}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;
  border-radius:999px;background:var(--c-brand);color:var(--c-on-brand);
  font:500 11px var(--font-mono);font-variant-numeric:lining-nums}

/* ═══ 表格（VI §8.14）═══ */
.table-wrap{border:1px solid var(--c-border);border-radius:var(--radius-md);overflow:hidden}
.table-scroll{overflow-x:auto}
table.table{width:100%;min-width:680px;font-size:var(--fs-xs)}
table.table th{background:var(--c-surface-2);font-weight:500;text-align:left;padding:11px var(--sp-4);
  border-bottom:1px solid var(--c-border-strong);white-space:nowrap}
table.table td{padding:0 var(--sp-4);height:44px;border-bottom:1px solid var(--c-line-soft)}
table.table tbody tr{transition:background var(--dur-fast) var(--ease-in)}
table.table tbody tr:hover{background:var(--c-surface)}
table.table tbody tr:last-child td{border-bottom:0}
table.table td.num,table.table th.num{text-align:right;font-family:var(--font-mono);
  font-variant-numeric:lining-nums tabular-nums}
table.table td.empty{height:auto;padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--c-text-muted)}

/* ═══ 分页 ═══ */
.pager{display:flex;gap:var(--sp-1);align-items:center;justify-content:center;margin:var(--sp-6) 0}
.pager button{min-width:32px;height:32px;padding:0 8px;border:0;background:none;border-radius:var(--radius-sm);
  font:400 var(--fs-xs) var(--font-mono);color:var(--c-text-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-in),color var(--dur-fast)}
.pager button:hover:not(:disabled):not(.on){background:var(--c-surface);color:var(--c-text)}
.pager button.on{background:var(--c-brand);color:var(--c-on-brand)}
.pager button:disabled{color:var(--c-text-disabled);cursor:not-allowed}
.pager .el{color:var(--c-text-faint);padding:0 4px}

/* ═══ 空态 / 骨架 / 加载（VI §8.18-8.19）═══ */
.empty{text-align:center;padding:var(--sp-8) var(--sp-5)}
.empty svg{width:72px;height:72px;margin-bottom:var(--sp-5)}
.empty h4{margin:0 0 10px;font-weight:500}
.empty p{max-width:42ch;margin:0 auto var(--sp-5);color:var(--c-text-muted);font-size:var(--fs-sm);line-height:1.7}
.empty-sm{padding:var(--sp-6) 0;text-align:center;font-size:var(--fs-sm);color:var(--c-text-muted)}
.sk{background:var(--c-surface-2);border-radius:var(--radius-sm);animation:pulse 1.6s ease-in-out infinite}
.sk-line{height:12px;margin-bottom:10px}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.spinner{width:20px;height:20px;border:1.6px solid var(--c-border);border-top-color:var(--c-brand);
  border-radius:50%;animation:spin .9s linear infinite}
.prog{height:4px;background:var(--c-surface-3);border-radius:var(--radius-sm);overflow:hidden}
.prog i{display:block;height:100%;background:var(--c-brand);border-radius:var(--radius-sm);
  transition:width var(--dur-base) var(--ease-in)}

/* ═══ 提示条 / Toast / Modal ═══ */
.alert{display:flex;gap:var(--sp-3);padding:14px 18px;border-radius:var(--radius-md);
  font-size:var(--fs-xs);line-height:1.65;margin-bottom:var(--sp-3)}
.alert svg{flex:none;width:17px;height:17px;margin-top:1px}
.alert-info{background:var(--c-info-soft);border-left:3px solid var(--c-info);color:var(--c-text-muted)}
.alert-info svg{color:var(--c-info)}
.alert-warn{background:var(--c-warning-soft);border-left:3px solid var(--c-warning);color:var(--c-text-muted)}
.alert-warn svg{color:var(--c-warning)}
.alert-danger{background:var(--c-danger-soft);border-left:3px solid var(--c-danger);color:var(--c-text-muted)}
.alert-danger svg{color:var(--c-danger)}
.alert b{color:var(--c-text)}
#toasts{position:fixed;top:24px;right:24px;z-index:95;display:flex;flex-direction:column;gap:var(--sp-3);width:320px}
.toast{background:var(--c-text);color:var(--c-bg);border-radius:var(--radius-md);padding:14px 16px;
  font-size:var(--fs-xs);line-height:1.6;animation:t-in var(--dur-base) var(--ease-out)}
.toast.out{animation:t-out var(--dur-fast) var(--ease-in) forwards}
@keyframes t-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes t-out{to{opacity:0;transform:translateX(16px)}}
.ovl{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--sp-5);
  background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out)}
.ovl.on{opacity:1;pointer-events:auto}
.mdl{width:min(560px,100%);background:var(--c-bg);border:1px solid var(--c-border-strong);
  border-radius:var(--radius-md);transform:translateY(8px);transition:transform var(--dur-base) var(--ease-out)}
.ovl.on .mdl{transform:none}
.mdl.sm{width:min(400px,100%)}
.mdl .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:18px var(--sp-5);border-bottom:1px solid var(--c-line-soft)}
.mdl .hd h3{font-size:18px}
.mdl .bd{padding:var(--sp-5);font-size:var(--fs-sm);color:var(--c-text-muted);line-height:1.78}
.mdl .ft{display:flex;justify-content:flex-end;gap:10px;padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--c-line-soft)}

/* ═══ 指标卡 ═══ */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--c-border);
  border:1px solid var(--c-border);border-radius:var(--radius-md);overflow:hidden}
.metric{background:var(--c-bg);padding:20px 18px;transition:background var(--dur-fast) var(--ease-in)}
a.metric:hover{background:var(--c-surface)}
.metric .v{font:700 clamp(28px,3.4vw,40px)/1 var(--font-mono);letter-spacing:-.04em;
  font-variant-numeric:lining-nums tabular-nums}
.metric .v .u{font-size:.34em;font-weight:400;color:var(--c-brand);vertical-align:super;margin-left:2px}
.metric .l{margin-top:10px;font-size:var(--fs-xs);color:var(--c-text-muted)}


/* 区块头：标题 + 说明 + 右侧「更多」链接。index 与 about 都在用，放这里共用，
   不要各页再写一份——重复实现比冲突更危险，冲突会被发现，重复会静默分叉。*/
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--c-border-strong);margin-bottom:var(--sp-5)}
.sec-head h2{font-size:var(--fs-h3)}
.sec-head p{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--c-text-muted);max-width:62ch;line-height:1.7}
.sec-head .more{font-size:var(--fs-xs);color:var(--c-brand);white-space:nowrap;padding-bottom:2px}
.sec-head .more:hover{text-decoration:underline}

/* ═══ 通用小件 ═══ */
.eyebrow{font:500 var(--fs-eyebrow) var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-faint)}
.muted{color:var(--c-text-muted)}
.faint{color:var(--c-text-faint)}
.hl{background:var(--c-accent);padding:1px .16em;border-radius:2px}
.sec{margin-bottom:var(--sp-8)}
.sec>h2,.sec>h3{margin-bottom:var(--sp-4)}
.rule{font-size:var(--fs-xs);color:var(--c-text-muted);background:var(--c-brand-soft);
  border-left:3px solid var(--c-brand);padding:12px var(--sp-4);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:var(--sp-4) 0;line-height:1.75}
.rule b{color:var(--c-text)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity 720ms var(--ease-out),transform 720ms var(--ease-out)}

/* ═══ 断点 ═══ */
@media(max-width:1279px){
  .shell-foot .in{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 1280 以下先收英文副标：它是装饰位，让给搜索框（搜索是主入口，不能被挤成一条缝）*/
  .brand .en{display:none}
  .shell-top .in{gap:var(--sp-4)}
}
/* ── 1024 以下：四项导航 + 搜索 + 三个右侧控件放不下，导航折进汉堡、年费按钮收掉 ──
   （年费 CTA 在页内和页脚都有，不是唯一入口；搜索不隐藏——检索是本站首屏必需品）*/
@media(max-width:1023px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell-top .burger{display:inline-flex}
  .top-right .btn-primary{display:none}
  .top-search{max-width:210px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:var(--sp-2);z-index:59}
  .nav.open a{padding:10px 14px}
  .brand .en{display:none}
}
/* ── 768 以下：顶栏折成两行，搜索独占第二行整宽 ── */
@media(max-width:767px){
  .shell-top .in{height:auto;padding:10px var(--sp-4);gap:var(--sp-3);flex-wrap:wrap}
  .top-search{order:5;flex-basis:100%;max-width:none}
  .role-switch{padding:4px 6px 4px 9px}
  .role-switch .k{display:none}
  .page{padding:var(--sp-5) var(--sp-4) 0}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell-foot .in{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .desc .r{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .btn-block-sm{width:100%}
}

/* ═══ 扫码区（VI §9a 扫码支付区 · C.qrBox）═══ */
.qr{position:relative;width:var(--qr-size,200px);height:var(--qr-size,200px);flex:none;
  padding:16px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-sm)}
.qr>.qr-code{width:100%;height:100%;color:var(--c-text)}
.qr>.qr-code svg{display:block;width:100%;height:100%}
.qr .qr-ovl{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-2);padding:var(--sp-4);text-align:center;
  font-size:var(--fs-xs);line-height:1.5;border-radius:var(--radius-sm);
  transition:opacity var(--dur-base) var(--ease-in)}
.qr[data-state="locked"] .qr-ovl,.qr[data-state="done"] .qr-ovl,.qr[data-state="dead"] .qr-ovl{display:flex}
.qr[data-state="locked"] .qr-ovl{background:color-mix(in srgb,var(--c-surface-2) 93%,transparent);color:var(--c-text-muted)}
.qr[data-state="locked"]>.qr-code{opacity:.16}
.qr[data-state="dead"] .qr-ovl{background:color-mix(in srgb,var(--c-surface-2) 93%,transparent);color:var(--c-text-muted)}
.qr[data-state="dead"]>.qr-code{opacity:.14}
.qr[data-state="done"]{border-color:var(--c-brand)}
.qr[data-state="done"] .qr-ovl{background:color-mix(in srgb,var(--c-brand-soft) 96%,transparent);color:var(--c-brand)}
.qr[data-state="done"]>.qr-code{opacity:.12}
.qr .qr-ovl .ic{display:flex}

/* ═══ 顶栏导航不换行 ═══
   1280–1440 区间四项导航会被挤成每项两行（brand+nav+search+right 的自然宽
   超过 1200 版心，nav 默认可收缩就先被压扁）。导航是固定内容，该让步的是
   搜索框——它本来就是 flex:1 1 200 的可伸缩项。 */
.nav{flex:0 0 auto}
.nav a{white-space:nowrap}
/* 1280 以下版心变窄，让搜索框再让出一点，导航才不用收缩 */
@media(max-width:1279px){ .top-search{min-width:132px} }

/* ═══════════════════════════════════════════════════════════════════
   后台新增件（C.tabs / C.drawer / C.steps / C.fileDrop / C.bulkBar / C.toggle）
   只增不改：以上各件前台同样可用，样式全部走 theme.css 变量。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 页签 ── */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--c-border);
  overflow-x:auto;scrollbar-width:thin;margin-bottom:var(--sp-6)}
.tabs button{flex:none;height:42px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;color:var(--c-text-muted);font-size:var(--fs-sm);
  border-bottom:2px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:background var(--dur-fast) var(--ease-in),color var(--dur-fast) var(--ease-in)}
.tabs button:hover{color:var(--c-text);background:var(--c-surface)}
.tabs button.on{background:var(--c-brand-soft);border-bottom-color:var(--c-brand);
  color:var(--c-text);font-weight:500}

/* ── 右侧抽屉 ── */
.drw-ovl{position:fixed;inset:0;z-index:92;display:flex;justify-content:flex-end;
  background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-in)}
.drw-ovl.on{opacity:1;pointer-events:auto}
.drw{width:min(520px,100%);height:100%;display:flex;flex-direction:column;background:var(--c-bg);
  border-left:1px solid var(--c-border-strong);transform:translateX(24px);
  transition:transform var(--dur-base) var(--ease-out)}
.drw-ovl.on .drw{transform:none}
.drw .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5);border-bottom:1px solid var(--c-border)}
.drw .hd h3{font-size:var(--fs-h4)}
.drw .hd .sub{margin-top:6px;font:400 var(--fs-xs) var(--font-mono);color:var(--c-text-faint)}
.drw .bd{flex:1;overflow-y:auto;padding:var(--sp-5);font-size:var(--fs-sm);line-height:1.75}
.drw .ft{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--c-border);background:var(--c-surface)}

/* ── 流水线步骤条 ── */
.steps{display:flex;flex-direction:column;gap:2px}
.steps li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);
  padding:9px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);color:var(--c-text-muted)}
.steps .mk{width:12px;height:12px;display:block;border:1.4px dashed var(--t-mute);border-radius:50%}
.steps .note{font:400 var(--fs-micro) var(--font-mono);color:var(--c-text-faint);white-space:nowrap}
.steps li.is-run{background:var(--c-brand-soft);color:var(--c-text)}
.steps li.is-run .mk{border:0;background:var(--c-brand);animation:pulse 1.2s ease-in-out infinite}
.steps li.is-done{color:var(--c-text)}
.steps li.is-done .mk{border:0;background:var(--t-700);
  clip-path:polygon(14% 46%,0 60%,38% 100%,100% 22%,86% 8%,38% 70%)}
.steps li.is-fail{background:var(--c-danger-soft);color:var(--c-danger)}
.steps li.is-fail .mk{border:1.4px solid var(--c-danger);background:var(--c-danger)}

/* ── 拖拽上传区 ── */
.drop{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;cursor:pointer;
  padding:var(--sp-7) var(--sp-5);border:1.5px dashed var(--c-border-strong);border-radius:var(--radius-md);
  background:var(--c-surface);color:var(--c-text-muted);
  transition:background var(--dur-fast) var(--ease-in),border-color var(--dur-fast) var(--ease-in)}
.drop:hover,.drop:focus-visible{background:var(--c-brand-soft);border-color:var(--c-brand)}
.drop.over{background:var(--c-brand-soft);border-color:var(--c-brand);border-style:solid}
.drop .ic{color:var(--c-brand)}
.drop .tt{font-size:var(--fs-sm);font-weight:500;color:var(--c-text)}
.drop .hint{font-size:var(--fs-xs);color:var(--c-text-muted);max-width:52ch;line-height:1.7}
.drop .btn{pointer-events:none;margin-top:4px}
.sr-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ── 批量操作条 ── */
.bulk{display:none;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);
  padding:10px var(--sp-4);border:1px solid var(--c-brand);border-radius:var(--radius-md);
  background:var(--c-brand-soft)}
.bulk.on{display:flex}
.bulk .lb{font-size:var(--fs-xs);color:var(--c-text)}
.bulk .lb .n{font-weight:700;color:var(--c-brand);margin:0 2px}
.bulk .clr{margin-left:auto}

/* ── 开关 ── */
.tgl{display:inline-flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl .tk{flex:none;width:38px;height:22px;margin-top:1px;border-radius:999px;background:var(--c-surface-3);
  border:1px solid var(--c-border-strong);display:flex;align-items:center;padding:0 2px;
  transition:background var(--dur-fast) var(--ease-in),border-color var(--dur-fast) var(--ease-in)}
.tgl .tk i{display:block;width:16px;height:16px;border-radius:50%;background:var(--c-bg);
  border:1px solid var(--c-border-strong);transition:transform var(--dur-fast) var(--ease-out)}
.tgl input:checked+.tk{background:var(--c-brand);border-color:var(--c-brand)}
.tgl input:checked+.tk i{transform:translateX(16px);border-color:var(--c-brand)}
.tgl input:focus-visible+.tk{outline:2px solid var(--c-border-strong);outline-offset:2px}
.tgl input:disabled+.tk{background:var(--c-surface-2);border-color:var(--c-border)}
.tgl .tx{display:flex;flex-direction:column;gap:4px}
.tgl .tx .t{font-size:var(--fs-sm)}
.tgl .tx .h{font-size:var(--fs-xs);color:var(--c-text-muted);line-height:1.6;max-width:56ch}

/* ── 可搜索选择器 searchPicker ──
   候选上千条时下拉不可用（翻不动、搜不了），所以这里是「搜索框 + 结果列表」。
   形制沿用 .field/.inp，选中后折起搜索框、只留一张已选卡片。 */
.rp{position:relative}
.rp-cur{display:flex;align-items:flex-start;gap:var(--sp-3);padding:11px var(--sp-4);
  border:1px solid var(--c-brand);border-radius:var(--radius-md);background:var(--c-brand-soft)}
.rp-cur .m{flex:1;min-width:0}
.rp-cur .m b{display:block;font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.rp-cur .m span{display:block;margin-top:3px;font:400 var(--fs-micro) var(--font-mono);color:var(--c-text-muted)}
.rp-cur .btn-text{flex:none}
.rp-hd{margin-top:var(--sp-3);font:400 var(--fs-micro) var(--font-mono);color:var(--c-text-faint);
  letter-spacing:.04em}
.rp-hd:empty{display:none}
.rp-list{margin-top:6px;border:1px solid var(--c-border);border-radius:var(--radius-md);
  background:var(--c-bg);overflow:hidden}
.rp-o{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:var(--sp-3);align-items:baseline;
  width:100%;padding:10px var(--sp-4);border-bottom:1px solid var(--c-line-soft);
  font-size:var(--fs-xs);transition:background var(--dur-fast) var(--ease-in)}
.rp-o:last-child{border-bottom:0}
.rp-o:hover,.rp-o.hot{background:var(--c-brand-soft)}
.rp-o .id{font:500 var(--fs-micro) var(--font-mono);color:var(--c-brand)}
.rp-o .t{font-weight:500;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-o .s{font:400 var(--fs-micro) var(--font-mono);color:var(--c-text-faint);white-space:nowrap}
.rp .empty-sm{padding:var(--sp-5) var(--sp-4);margin-top:6px;border:1px dashed var(--c-border);
  border-radius:var(--radius-md);font-size:var(--fs-xs);line-height:1.7}
@media(max-width:767px){
  .rp-o{grid-template-columns:minmax(0,1fr);gap:3px}
  .rp-o .t{white-space:normal}
  .rp-o .s{white-space:normal}
}


/* ── 服务端预渲染片段的样式 ──
   这些 class 只出现在 ssr/pages.js 产出的 HTML 里。页面自己的 JS 接管后会把它们换掉，
   但在换掉之前（以及在爬虫眼里）它必须是排好版的，不能是一堆裸标签。 */
.ssr-only-note{display:none}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.srct{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-xs)}
.srct th,.srct td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--c-border);
  vertical-align:top;line-height:1.7}
.srct th{font-weight:500;color:var(--c-text-muted);border-bottom:1px solid var(--c-border-strong)}
.crumb{font-size:var(--fs-xs);color:var(--c-text-muted);margin-bottom:var(--sp-5)}
.crumb a{color:var(--c-text-muted)}
.crumb a:hover{color:var(--c-brand)}
.judg{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.judg li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.judg .n{font:500 var(--fs-micro) var(--font-mono);color:var(--c-brand);
  border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);
  width:24px;height:24px;display:grid;place-items:center}
.judg p{margin:0;line-height:1.85}
.toc{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);line-height:2}
.toc ul{list-style:none;margin:0 0 var(--sp-3);padding-left:var(--sp-5);color:var(--c-text-muted)}
.excerpt{max-height:none;line-height:1.95;color:var(--c-text-muted);
  /* PDF 抽出来的正文里有长串编号、英文文献名和等宽对齐的空白，不允许断行就会撑破视口 */
  overflow-wrap:anywhere;word-break:break-word}
.excerpt p{margin:0 0 var(--sp-3)}
.rrow{display:block;padding:var(--sp-5) 0;border-bottom:1px solid var(--c-border);text-decoration:none}
.rrow .tt{font-size:var(--fs-h5);font-weight:500;color:var(--c-text);margin:8px 0}
.rrow .ab{font-size:var(--fs-xs);color:var(--c-text-muted);line-height:1.8;margin:0 0 8px}
.rrow .mm{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-micro);color:var(--c-text-faint)}
.pager{display:flex;gap:8px;padding:var(--sp-5) 0}
.pager a,.pager .on{padding:6px 12px;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  font-size:var(--fs-xs);text-decoration:none}
.pager .on{border-color:var(--c-brand);color:var(--c-brand)}
.subc{display:block;padding:var(--sp-4);border:1px solid var(--c-border);border-radius:var(--radius-md);
  text-decoration:none}
.subc.todo{border-style:dashed;color:var(--c-text-muted)}
.subc b{display:block;font-weight:500;margin-bottom:4px}
.subc span{font-size:var(--fs-micro);color:var(--c-text-faint)}
.empty-note{color:var(--c-text-muted);font-size:var(--fs-sm);padding:var(--sp-6) 0}