/* ============================================================
   NOOS Skill Market — Modernist
   2026-09-17 第三版：照搬设计稿 "modernist-43195e72" 的设计语言。

   设计语言（来自设计系统 readme + 设计稿实现）：
     · 扁平、建筑感（字体已于 2026-09-18 按运营《修改汇总·技术执行版》§一.1
       从 Archivo 换为 Space Grotesk / Inter / IBM Plex Mono）
     · 零圆角（--radius 全为 0，这是刻意的，任何地方都不许圆角）
     · 2px 黑色粗线分区，1px 发丝线做次级分隔；不许把粗线软化成发丝
     · 不许有阴影、不许浮起；靠对齐与分隔线的强弱来组织信息
     · 按钮文字一律左对齐（按钮比文字宽时，文字贴左内边距，不居中）
     · 网格可见：卡片白底 + gap:1px 露出底色，间隙本身就是网格线
     · 强调色克制使用，只给主操作与小范围强调

   配色：设计稿把 Modernist 原本的红 #ec3013 换成了 NOOS 的绿。
     --brand #90E619   console 的 brand.DEFAULT（白底平台自家的绿）
     --brand-deep #4d7c0f  正文可读的深绿（白底 4.99:1 过 AA），链接与必填星号用它
     🔴 #90E619 压白底仅 1.55:1，永远不能当文字色，只作填充块，其上配 #0a0a0a
   ============================================================ */

/* 字体系统（2026-09-21 字体最终版）：
   Space Grotesk  Hero／页面标题／区块标题／卡片标题／展示数字   400-600
   Inter          正文／导航／按钮／表单／标签／状态             400-600
   系统等宽 mono  钱包地址／技术编号／代码                      本期不加载 IBM Plex Mono
   字重仅用 400/500/600（NOOS Logo 的 800 保留为品牌标识）
   中文回退 PingFang SC / Noto Sans SC */
/* 2026-09-21 字体最终版：只加载两套品牌字体（Space Grotesk + Inter），
   字重收敛到 400/500/600（去掉 700）；mono 改系统等宽，不再加载 IBM Plex Mono。 */
/* ── 本地自托管字体（2026-09-22 决策 8）────────────────────────────
   原为 @import Google Fonts CDN，国内访问不稳时会掉成系统字体，
   与设计稿字形不一致，且 @import 阻塞渲染、超时前首屏会白一下。
   仅保留 latin / latin-ext 分片（本站为英文站），中文回退仍走
   系统的 PingFang SC / Noto Sans SC，无需下载。
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#ffffff;
  --surface:#fafafa;
  --ink:#0a0a0a;
  --brand:#90E619;
  --brand-hover:#7ac70f;
  --brand-deep:#4d7c0f;
  /* HOT 角标用的红。这【不是】新加的第二个强调色 —— #ec3013 本来就是 Modernist
     设计系统自己的 --color-accent，设计稿为了 NOOS 品牌才把它换成了绿；
     这里用回它的 600 档。取 600 而不是原生 #ec3013：白字压 #ec3013 只有 4.20:1
     差一点不过 AA（角标是 10px 小字），#dd2b0f 是 4.74:1 刚好过。 */
  --hot:#ff563c;         /* accent-500，HOT 角标里那个会跳的红字 */
  --hair:rgba(10,10,10,0.18);       /* 发丝线 */
  --hair-2:rgba(10,10,10,0.12);     /* 更淡的行线 */
  --hair-3:rgba(10,10,10,0.10);
  --line-in:rgba(10,10,10,0.35);    /* 输入框边 */
  --t-62:rgba(10,10,10,0.70);   /* §13 L846 辅助文字加深 0.62→0.70 */
  --t-64:rgba(10,10,10,0.72);   /* §13 L846 0.64→0.72 */
  --t-66:rgba(10,10,10,0.74);   /* §13 L846 0.66→0.74 */
  --t-70:rgba(10,10,10,0.70);
  --t-72:rgba(10,10,10,0.72);
  --t-74:rgba(10,10,10,0.74);
  --t-75:rgba(10,10,10,0.75);
  --display:'Space Grotesk','PingFang SC','Noto Sans SC',system-ui,sans-serif;
  --sans:'Inter','PingFang SC','Noto Sans SC',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1320px;
  --pad:28px;

  /* 兼容别名，勿删：HTML 内联样式里还有引用 */
  --fg:var(--ink); --muted:var(--t-70); --muted-2:var(--t-62);
  --lime:var(--brand-deep); --lime-line:var(--hair); --lime-faint:var(--surface);
  --accent:var(--ink); --card:#fff; --card-2:var(--surface);
  --line:var(--hair); --radius:0; --r:0; --r-sm:0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:400;   /* §一.2 正文：16px / 400 / 1.6 */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
/* §一.2：减少 800-900 超粗字重，避免 Hero 和卡片标题笨重 */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.02em}
/* §一.2 字号表：Section Heading 22-32px / 字重 600（H1 仍是 650-700，不动） */
h2,h3,h4{font-weight:600}
a{color:var(--brand-deep);text-decoration:none;text-underline-offset:3px}
/* 🔴 2026-09-19 运营验收发现：Input Type 选 Text 时 Supported File Types 仍然显示。
   根因不是 JS —— `hidden` 属性是靠【浏览器默认样式】 [hidden]{display:none} 生效的，
   而作者样式永远赢过默认样式：只要给同一个元素写了任何 display，hidden 就失效。
   实测被盖掉的三处（同一根因）：
     · upload.html  .field#ftypes-field      ← .field{display:block}        运营报的这条
     · skill.html   .btn.example-toggle      ← .btn{display:inline-flex}    内容不长时按钮该藏不藏
     · my.html      <tr hidden> 反馈行        ← ≤860px 的 .tbl tr{display:block}
                                                桌面端正常，【手机端反馈面板会自己漏出来】
   一条兜底规则全治，且防止以后再犯。必须带 !important —— 不然下一条 display 又能盖掉它。 */
[hidden]{display:none !important}


a:hover{color:#3d6309;text-decoration:underline}
button,input,select,textarea{font-family:inherit;border-radius:0}
button{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--t-64)}
::selection{background:#e2ffae}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}

/* ══════════ 顶栏 ══════════ */
/* 🔴 sticky 必须挂在 #top 上，不能挂在 .topbar 上。
   #top 是 JS 的挂载点，高度就等于顶栏自身（66px）——sticky 元素只能在父容器
   范围内粘住，父容器一出画顶栏就跟着滚走了。全站顶栏滚动即消失就是这个原因。 */
#top{position:sticky;top:0;z-index:30}
.topbar{background:#fff;border-bottom:2px solid var(--ink)}
.topbar-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:66px;
  display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:baseline;gap:10px;flex:none}
.brand b{font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.brand span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-64)}
.nav{display:flex;gap:20px;margin-left:8px}
.nav a{padding:4px 0;font-size:13px;font-weight:600;color:var(--t-64);
  border-bottom:2px solid transparent;text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.on{color:var(--ink);border-bottom-color:var(--ink)}
.spacer{flex:1}
/* 🔴 顶栏按钮必须 flex:none —— .btn 基类没写，窄屏下会被 flex 压缩，
   "Publish Skill" 在 400px 折成两行。nowrap 是第二道保险。 */
.topbar-in>.btn{flex:none;white-space:nowrap}
/* 小屏把品牌副标去掉，给主 CTA 和汉堡腾位。副标只是装饰，手机上不承担信息 */
@media(max-width:480px){.brand span{display:none}}
.demo-flag{font-family:var(--mono);font-size:11px;color:var(--t-64)}
.wallet-chip{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink)}
/* 在线点做成方块，零圆角 */
.dot-live{width:7px;height:7px;background:var(--brand);border:1px solid var(--ink);display:block;flex:none}

/* ══════════ 按钮 —— 文字一律左对齐 ══════════ */
/* §13 L850 所有主按钮同一高度：统一 min-height，各处只调左右内边距 */
.btn{display:inline-flex;align-items:center;gap:7px;padding:0 14px;min-height:40px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  font-size:13px;font-weight:600;text-align:left;justify-content:flex-start;
  text-decoration:none;transition:background .12s}
.btn:hover{background:#f0f0f0;color:var(--ink);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--ink);color:var(--ink)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-sm{padding:0 10px;min-height:32px;font-size:12px}
.btn-ghost{border-color:transparent;background:transparent;color:var(--t-66);
  padding:0;min-height:auto;font-size:12px;font-weight:600}
.btn-ghost:hover{background:transparent;color:var(--ink)}

/* ══════════ 页头 ══════════ */
.hero{border-bottom:1px solid var(--hair)}
/* §5.3 首屏压缩：60/38 → 42/26，配合下方 kicker/p/btns/stats 的间距一起收 */
/* 设计稿是 60/38，这里压到 28/18 —— §5.3 L277 要求首屏压缩 15–20%，
   单栏堆叠本来就比两栏高，纵向必须逐项收紧才守得住 */
.hero-in{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 30px}
.kicker{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);margin:0}
/* 设计稿：max-width:15ch，字号上限 74px。这里压到 52 以守住 §5.3 的首屏压缩要求 */
/* 标题不换行：去掉 max-width:15ch，字号回到设计稿的 clamp(38px,6vw,74px)。
   实测 74px 单行需 1113px < 可用 1264px，放得下；
   窄到约 620px 以下会自然折行，这是对的，不要用 white-space:nowrap 硬撑。 */
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.18;letter-spacing:-.03em;font-weight:600;
  max-width:none;margin:18px 0 0}
/* 强调词＝荧光绿实底块（绿只作填充，不作文字色） */
/* §一.2：保留绿色强调 the network，但缩小背景块高度和左右内边距 */
.hero h1 em{font-style:normal;background:var(--brand);padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* 设计稿原本是 max-width:66ch，右侧会空掉 715px。
   用户要求撑满整宽再换行，故去掉宽度上限。
   ⚠️ 代价：1440px 下每行约 190 字符，超出常规易读区间（66–75）；
      line-height 从 1.55 提到 1.65 来补偿长行的回扫难度。 */
.hero p{max-width:none;margin:20px 0 0;font-size:16px;font-weight:400;line-height:1.6;color:var(--t-72);
  text-wrap:pretty}

/* ══════════ 换行：避免孤行（2026-09-21 加） ══════════
   这些段落都带 max-width，行尾常把最后两三个词甩到下一行变成孤行。
   text-wrap:pretty 让浏览器回溯几行重新断，把最后一行补到合理长度；
   它【不改】任何盒模型和宽度，纯断行策略，所以不会影响布局尺寸。
   标题用 balance（标题行数少，balance 才有效果，pretty 对短文本几乎不动）。 */
.lede,.sub-lede,.sec-lede,.wp-sub,.field-n,.tb-note,.tb-warn,.exb-n,.sg-n,.sg-miss,
.cr-note,.cr-demo,.note,.stake-note,.rv-b,.rv-n,.reqbox p,.endnote p,.feedback p,
.lockblock p,.body,.body-ul li,.stat .sn,.card-desc,.empty p{text-wrap:pretty}
h1,h2,h3,.sec-title,.wp-h,.endnote h3{text-wrap:balance}
/* 首页大标题例外：它是满宽排版、断行位置是设计定死的（绿块压在 for the job 上），
   balance 会去均分两行，把绿块位置挪掉。 */
.hero h1{text-wrap:wrap}

/* 统计：gap:1px 露出底色当网格线 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;
  background:var(--hair);margin-top:22px;border-top:1px solid var(--hair)}
/* 设计稿：padding 16px 16px 4px，首格去掉左内边距与页面左缘对齐 */
.stat{background:#fff;padding:13px 16px 5px}
.stat:first-child{padding-left:0}
.stat .k{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.stat .v{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
/* 详情/我的/创作者页上方那条粗线 */
.stats-strong{border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);margin-top:38px}

/* ══════════ 搜索与筛选 ══════════ */
.filters{border-bottom:1px solid var(--hair)}
.filters-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.searchbar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--hair);padding:13px 0}
.searchbar svg{flex:none;color:var(--ink)}
.searchbar input{flex:1;border:0;outline:none;background:transparent;min-width:0;
  font-size:20px;font-weight:500;letter-spacing:-.01em;padding:4px 0;color:var(--ink)}
.frow{display:flex;gap:18px;align-items:baseline;padding:8px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--hair-3)}
.frow:last-child{border-bottom:0}
.flabel-2{margin-left:28px}
@media(max-width:1100px){.frow-2{flex-direction:column;align-items:flex-start;gap:8px}.flabel-2{margin-left:0}}
.flabel{width:auto;min-width:78px;flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-62);padding-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.chip{display:flex;align-items:baseline;gap:6px;padding:6px 10px;font-size:12px;font-weight:600;
  border:1px solid rgba(10,10,10,0.22);background:#fff;color:var(--t-75);transition:border-color .12s}
.chip:hover{border-color:var(--ink)}
/* 选中＝绿底黑字黑边 */
.chip.on{background:var(--brand);color:var(--ink);border-color:var(--ink)}
.chip .n{font-size:11px;opacity:.88;font-weight:500}

/* ══════════ 结果区与卡片网格 ══════════ */
.gridhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:9px}
.gridhead h2{font-size:24px;letter-spacing:-.02em}
.gridhead .cnt{font-size:12px;color:var(--t-66);font-family:var(--mono);padding-bottom:3px}

/* 网格线＝1px 间隙 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-top:0}
.card{position:relative;background:#fff;display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 18px;height:100%;text-decoration:none;color:var(--ink);
  transition:background .12s}
.card:hover{background:var(--surface);color:var(--ink);text-decoration:none}
/* 上传向导 Step 3 的 Listing preview：卡片是死的，不要给可点的暗示 */
.card-static{cursor:default}
.card-static:hover{background:#fff}
/* 角标贴角，零圆角 */
.ribbon{position:absolute;top:0;right:0;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding:4px 8px;
  background:var(--brand);color:var(--ink)}
/* HOT 的最终做法（2026-09-17 第三轮定）：黑底白字 + 一个红色小火苗。
   走过的弯路：① 纯黑 —— 语义上是"中性/默认"，表达不了"热门"；
   ② 整块红底 —— 实测渲染后一屏同时出现 6 红 + 5 绿共 11 个彩块，像促销传单，
      且红配绿本身别扭。
   现在红只出现在 11px 的火苗上：语义带到了，画面不吵，也守住了设计系统的
   单强调色体系（readme: "use the accent sparingly, for ... small emphasis"）。
   火苗取 accent-500 #ff563c，压黑底 6.27:1，小图标看得清。 */
.ribbon.hot{background:var(--ink);padding:4px 8px}
/* HOT 的最终做法（2026-09-17 第四轮定）：黑底 + 一个会跳动的红色 HOT 字。
   走过的弯路，都别再兜回去：
     ① 纯黑白字 —— 黑在这套设计里是中性色，表达不了"热门"；
     ② 整块红底 —— 实测一屏同时出现 6 红 + 5 绿共 11 个彩块，像促销传单；
     ③ 黑底 + 实心火苗图标 —— 图标形状在小尺寸下辨识度有限，且多一个异类实心图标
        （全站其余 43 个都是 1.6 描边）。
   现在红只落在"HOT"这一个词上：语义最直接，不新增图标，也守住了设计系统的
   单强调色体系（readme: "use the accent sparingly, for ... small emphasis"）。
   #ff563c 压黑底 6.27:1、#ff9783 压黑底 9.43:1，都清晰。

   🔴 字必须单独包一层 .hot-w：动画用 transform，套在 .ribbon.hot 上会把整个
      黑色角标一起缩放。transform 不影响布局，所以角标尺寸不会跳。
   🔴 关键帧只动 color / transform，不要加 filter 或改字号，那会触发重排。 */
.ribbon.hot .hot-w{
  display:inline-block;
  color:var(--hot);
  transform-origin:50% 50%;
  animation:hot-pulse .9s ease-in-out infinite;
}
@keyframes hot-pulse{
  0%,100%{color:var(--hot);transform:scale(1)}
  50%    {color:#ff9783;   transform:scale(1.09)}
}
/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion:reduce){
  .ribbon.hot .hot-w{animation:none;color:var(--hot)}
}

.card-top{display:flex;gap:12px;align-items:flex-start;padding-right:70px}
.card-icon{flex:none;margin-top:3px;color:var(--ink);display:block}
.card-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-64)}
.card-desc{font-size:13.5px;line-height:1.5;color:var(--t-74);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:4px}
.wallet{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--t-66);
  border-bottom:1px solid rgba(10,10,10,0.22);cursor:pointer;background:none;border-left:0;
  border-right:0;border-top:0;padding:0}
.wallet:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* 🔴 必须排在 .wallet / .wallet:hover【之后】：两者同优先级(0,1,0/0,2,0)，
   靠源码顺序决胜。写在前面会被 .wallet 的 border-bottom 盖回去，规则变成死的
   —— 2026-09-22 就这么错过一次，预览卡里的钱包照样带下划线像能点。 */
.wallet-static{cursor:default;border-bottom-color:transparent}
.wallet-static:hover{color:var(--t-66);border-bottom-color:transparent}
.card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(10,10,10,0.14);padding-top:11px}
.card-nums{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.calls{font-weight:600}
.staked{color:var(--t-64);overflow-wrap:anywhere}
.card-stage{display:flex;align-items:flex-end;gap:9px;flex:none}
.stage-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-64)}
/* 五根递增柱：已过=黑，当前=绿，未到=极淡 */
.bars{display:flex;align-items:flex-end;gap:2px}
.bars i{display:block;width:4px;background:rgba(10,10,10,0.13)}
.bars i:nth-child(1){height:5px}
.bars i:nth-child(2){height:8px}
.bars i:nth-child(3){height:11px}
.bars i:nth-child(4){height:14px}
.bars i:nth-child(5){height:17px}
.bars i.p{background:var(--ink)}
.bars i.c{background:var(--brand)}

.empty{border:1px solid var(--hair);border-top:0;padding:64px 28px;font-size:17px;
  font-weight:600;color:var(--t-66)}

/* ══════════ 详情页 ══════════ */
.backlink{max-width:var(--max);margin:0 auto;padding:22px var(--pad) 0;width:100%}
/* 🔴 width:100% 不可删：body 是 flex 列容器，子元素带左右 auto 外边距会取消横向拉伸、
   退化成按内容收缩 —— 会出现「页头宽、正文窄、卡片挤成一列」。 */
.sec{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
.detail-head{display:flex;gap:18px;align-items:flex-start;padding-top:26px}
.detail-icon{flex:none;margin-top:8px;color:var(--ink)}
.detail-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.badge-stage{background:var(--brand);color:var(--ink);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px}
.badge-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.detail-title{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.025em;
  overflow-wrap:anywhere}
/* max-width 去掉：62ch 会把一句话掐成两行，而容器宽度本来放得下（实测自然单行 630 ≤ 可用 799） */
.detail-desc{max-width:none;margin:18px 0 0;font-size:17px;line-height:1.55;color:var(--t-75)}

/* 🔒 内容不公开＝整块绿底，全站最响的一处 */
.lockblock{background:var(--brand);border:1px solid var(--ink);padding:30px 32px;
  display:flex;gap:22px;align-items:flex-start;margin-top:34px}
.lockblock svg{flex:none;margin-top:4px;color:var(--ink)}
.lockblock h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--ink)}
.lockblock p{margin:12px 0 0;max-width:72ch;font-size:15px;line-height:1.6;color:var(--ink);
  font-weight:500}

/* min() 包住固定下限：320px 视口减去 2×18px 内边距只剩 284px，
   裸写 minmax(320px,..) 必定横向溢出。auto-fit 不会替你降到内容宽度以下。 */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:44px;padding:34px 0}
.sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);margin:0 0 14px}
.kv{display:flex;flex-direction:column}
.kv .row{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--hair)}
.kv .row:last-child{border-bottom:1px solid var(--hair)}
.kv dt{width:130px;flex:none;font-size:13px;color:var(--t-64)}
.kv dd{margin:0;font-size:13px;font-weight:600}
.kv dd.free{font-weight:400;max-width:44ch}
.tagpill{font-size:12px;border:1px solid rgba(10,10,10,0.25);padding:2px 7px;
  font-family:var(--mono)}
.stake-amt{font-weight:600;font-size:34px;letter-spacing:-.02em}
.stake-note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--t-70);max-width:56ch}

/* 成长阶段：五张卡 */
.sub-rule{border-top:2px solid var(--ink);padding-top:22px}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.rung{border:1px solid rgba(10,10,10,0.2);background:#fff;color:var(--t-62);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;min-height:96px}
.rung.passed{background:var(--ink);color:#fff;border-color:var(--ink)}
.rung.here{background:var(--brand);color:var(--ink);border-color:var(--ink)}
.rung .r-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rung .r-n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.88}
.rung .r-mark{font-size:12px;font-weight:600}
.rung .r-name{font-weight:600;font-size:19px;letter-spacing:-.01em}
.rung .r-range{font-size:11.5px;font-family:var(--mono);opacity:.88;margin-top:auto}
.note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--t-66);max-width:90ch}

.sec-title{font-size:24px;font-weight:600;letter-spacing:-.02em;border-top:2px solid var(--ink);
  padding-top:22px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin:0}
.sub-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin:0}

/* ══════════ 创作者页 ══════════ */
.cr-head{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.cr-wallet{font-family:var(--mono);font-size:clamp(30px,5vw,54px);letter-spacing:-.02em;
  font-weight:600}
.cr-sub{margin-top:14px;font-size:14px;color:rgba(10,10,10,0.68)}

/* ══════════ 上传页 ══════════ */
.narrow{max-width:1000px;margin:0 auto;padding:0 var(--pad);width:100%}
/* 段落标题不被 sticky 索引盖住 */
.fsec{scroll-margin-top:118px}
.steps{position:sticky;top:66px;z-index:20;background:#fff;border-bottom:2px solid var(--ink)}
.steps-in{max-width:1000px;margin:0 auto;padding:0 var(--pad)}
.steps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair)}
/* 🔴 长页面用 Section Index，不做假的步骤向导（运营 §8 明确禁止）。
   三段都在同一页上，所以这里是【锚点导航】：可点、可高亮当前所在段，
   但不表达"第几步已完成"。 */
.step{background:#fff;color:var(--t-66);padding:12px 10px;display:flex;flex-direction:column;
  gap:4px;border-bottom:3px solid transparent;text-decoration:none;transition:background .12s}
.step:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.step.on{color:var(--ink);border-bottom-color:var(--brand)}
.step .s-mark{font-size:11px;letter-spacing:.09em;font-family:var(--mono);opacity:.88}
.step .s-label{font-size:12.5px;font-weight:600}

.fsec{padding:34px 0;border-bottom:1px solid var(--hair)}
.fsec:first-child{padding-top:40px}
.fsec:last-child{border-bottom:0}
.fsec-h{display:flex;gap:14px;align-items:baseline;margin-bottom:22px}
.fsec-n{font-family:var(--mono);font-size:12px;color:var(--t-62)}
.fsec-h h2{font-size:22px;letter-spacing:-.02em}
.fsec-h h2 .opt{font-weight:500;color:var(--t-62)}

.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.cell{background:#fff;padding:16px}
.cell .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.cell .v{font-weight:600;font-size:20px;margin-top:8px}
.cell .wal{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-family:var(--mono);font-size:16px;font-weight:600}

.field{display:block;margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.field-h span:first-child{font-size:12px;font-weight:600}
.req{color:var(--brand-deep)}
.hint{font-size:11px;font-family:var(--mono);color:var(--t-62);font-weight:400}
.hint.plain{font-family:inherit}
.field input[type=text],.field select,.field textarea{
  width:100%;border:1px solid var(--line-in);background:#fff;padding:11px 12px;
  font-size:15px;outline:none;color:var(--ink)}
.field textarea{padding:14px;font-size:14px;line-height:1.6;resize:vertical;
  font-family:var(--mono);min-height:230px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.auto-ico{border:1px dashed rgba(10,10,10,0.3);padding:11px 12px;font-size:13px;
  color:var(--t-64);display:flex;align-items:center;gap:10px}
.tagbox{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tagbox .tg{display:flex;align-items:center;gap:7px;border:1px solid rgba(10,10,10,0.3);
  padding:5px 8px;font-size:12px;font-family:var(--mono)}
.tagbox .tg b{border:0;background:transparent;padding:0;cursor:pointer;font-size:13px;
  line-height:1;color:var(--t-62);font-weight:400}
/* 🔴 必须比 .field input[type=text] 更具体，否则被它的 width:100% + 完整边框覆盖，
   tag 输入框会被撑成整行大框。 */
.field .tagbox input[type=text]{width:96px;flex:none;border:0;
  border-bottom:1px solid var(--line-in);padding:5px 2px;
  font-size:12px;outline:none;background:transparent}
.field .tagbox input[type=text]:focus{border-color:var(--ink);box-shadow:none}
/* margin-bottom 必须有：下一块是 .two（无 margin-top），少了这行
   「or import from a file」会和「Input type」贴死，看起来像同一组。
   取 22px 与 .field 的行间节奏一致。 */
.fileline{display:flex;align-items:center;gap:14px;margin-top:16px;margin-bottom:22px;
  flex-wrap:wrap}
.fileline .t{font-size:12.5px;color:var(--t-64)}
.fileline .m{font-size:11.5px;color:var(--t-62);font-family:var(--mono)}

/* 留底警告：黑标题条 + 绿勾图标 */
.warnbox{border:2px solid var(--ink);margin-top:26px}
.warnbox-h{background:var(--ink);color:#fff;padding:11px 16px;display:flex;align-items:center;gap:10px}
.warnbox-h svg{color:var(--brand)}
.warnbox-h span{font-size:13px;font-weight:600}
.warnbox-b{padding:18px 16px}
.warnbox-b p{margin:0;font-size:14px;line-height:1.6;max-width:none}
.checkrow{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;
  background:#fff;border:1px solid var(--ink);cursor:pointer}
.checkrow.on{background:var(--brand)}
.checkrow input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none;cursor:pointer}
.checkrow span{font-size:14px;font-weight:600;line-height:1.45}

.stake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;
  align-items:start}
.sidenote{border-left:2px solid var(--ink);padding:2px 0 2px 18px}
.sidenote .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  margin-bottom:9px}
.sidenote p{margin:0;font-size:13.5px;line-height:1.6;color:var(--t-72)}

.reqbox{border:1px solid var(--hair);padding:22px}
.reqbox .t{font-weight:600;font-size:19px;letter-spacing:-.01em}
.reqbox p{margin:12px 0 0;font-size:14px;line-height:1.6;max-width:78ch;color:var(--t-75)}
.checks{margin-top:20px}
.checks .c{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid var(--hair);flex-wrap:wrap}
.checks .sq{width:9px;height:9px;background:var(--brand);border:1px solid var(--ink);
  display:block;flex:none}
.checks .txt{font-size:13.5px;font-family:var(--mono)}
.checks .vd{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--brand);color:var(--ink);padding:3px 8px}

/* 🔴 必须有上边距：上面 .checkrow.terms 是个带边框的方框，
   不留白按钮就贴在框线上。与 .checkrow.terms 的 margin-top 取同一节奏。 */
.pubrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.pubrow .btn{padding:0 20px;min-height:48px;font-size:15px}
.pubhint{margin-top:16px;font-size:12.5px;color:var(--t-64)}

/* ══════════ 表格 ══════════ */
.tblwrap{overflow-x:auto}
.tbl{width:100%;min-width:820px;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-62);font-weight:600;padding:13px 9px;border-bottom:1px solid var(--hair)}
.tbl th:first-child{padding-left:0}
.tbl th:last-child{padding-right:0}
/* 单元格左右内边距 12→9：省出来的宽度给 Skill 名称，让它不换行（见下）。
   9 列 × 两侧 ≈ 省 48px，够补名称列需要的 35px，表格总宽仍在容器内、不出横向滚动。 */
.tbl td{padding:15px 9px;border-bottom:1px solid var(--hair-2)}
/* Skill 名称不折行：折在名字中间很难看，且用户明确要求非必要不换行 */
.tbl .nm span{white-space:nowrap}
.tbl td:first-child{padding-left:0}
.tbl td:last-child{padding-right:0}
.tbl tr{background:#fff}
.tbl tr:hover{background:var(--surface)}
.tbl .num{text-align:right;font-family:var(--mono)}
.tbl .dim{color:var(--t-70)}
.tbl .nm{display:flex;align-items:center;gap:11px}
.tbl .nm span{font-weight:600}
.pill{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;white-space:nowrap;border:1px solid var(--ink);
  background:var(--brand);color:var(--ink)}
.pill-review{background:#fff;color:var(--t-66);border-color:rgba(10,10,10,0.3)}

/* 底部说明块 */
.endnote{border-top:2px solid var(--ink);padding-top:24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px}
.endnote h3{font-size:20px;letter-spacing:-.02em;max-width:22ch}
.endnote p{margin:0;font-size:14px;line-height:1.65;color:var(--t-75);max-width:64ch}

/* ══════════ 页脚 ══════════ */
.foot{border-top:2px solid var(--ink);margin-top:auto}
.foot-in{max-width:var(--max);margin:0 auto;padding:26px var(--pad) 40px;
  display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-62);font-family:var(--mono)}
.foot-in b{color:var(--ink);font-weight:600}
.foot-in a{color:var(--t-62);text-decoration:underline;text-underline-offset:3px}
.foot-in a:hover{color:var(--ink)}

@media(max-width:860px){
  :root{--pad:18px}
  .nav,.demo-flag,.wallet-chip{display:none}
  /* 🔴 顶栏 gap 必须从 26 收到 14：400px 下 内边距36+品牌166+按钮106+汉堡44+三道gap78 = 430 > 400，
     汉堡会被挤出视口（实测右边 402、scrollWidth 421）。 */
  .topbar-in{gap:14px}
  .hero-in{padding:40px var(--pad) 28px}
  .stat:first-child{padding-left:16px}
  .frow{flex-direction:column;align-items:flex-start;gap:8px}
  .flabel{width:auto;padding-top:0}
  .grid{grid-template-columns:1fr}
  .detail-head{flex-direction:column;gap:14px}
  .lockblock{padding:22px 20px;flex-direction:column;gap:14px}
  .cols{gap:28px}
  .kv dt{width:110px}
  .steps-grid{grid-template-columns:repeat(3,1fr)}
  .steps{position:static}
}


/* ══════════════════════════════════════════════════════════════
   2026-09-18 按运营《改版执行规范》新增。仍守 Modernist：零圆角、
   2px 黑粗线分区、1px 发丝线、gap:1px 当网格线、无阴影。
   ══════════════════════════════════════════════════════════════ */

/* ── Hero 两栏：左标题右流程，把首屏压下来 ── */
/* eyebrow 与流程串同排：流程串就是拿来填右侧空白的（§5.3 L280），不占额外高度 */
.hero-top{display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
/* 流程条：通栏。粗线在上、发丝线在下，和下方统计条共同构成两条横带 */
.flow-t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
/* §5.2 L264 规范给的就是箭头串，不是列表。
   🔴 箭头必须和【前一个词】包在同一个 <b> 里：通栏下用 space-between 时，
      散着放会把箭头甩到两词正中间，读起来像四个独立标签、不像一条流程。 */
/* 右上角的流程串。箭头必须和【前一个词】同在一个 <b> 里，否则会被甩到两词正中间 */
.flow{display:flex;align-items:baseline;flex-wrap:wrap;gap:0}
.flow b{display:inline-flex;align-items:baseline;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-64)}
.flow b i{font-style:normal;font-weight:400;color:var(--t-62);margin:0 9px}

/* ── 卡片新增：价格与主操作 ── */
.price{font-weight:600;font-size:14px;letter-spacing:-.01em}
.price em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--t-64);margin-left:4px}
.card-cta{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  border-bottom:2px solid var(--brand);padding-bottom:1px}
.loadmore{margin-top:26px}

/* ── 详情页：左内容 + 右固定调用卡 ── */
/* 🔴 DOM 顺序 = 标题块 → 调用卡 → 正文块，这样移动端单列时自然就是
   「调用卡置于标题后、详情内容前」（运营 §14 L866）。
   桌面端靠 grid 显式定位把调用卡放到右侧并跨两行，不用 order（order:-1 会
   把它推到标题【之前】，正是之前做错的地方）。 */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:auto 1fr;gap:20px 44px;padding-top:26px;align-items:start}
.detail-titleblock{grid-column:1;grid-row:1;min-width:0}
.detail-body{grid-column:1;grid-row:2;min-width:0}
.runcard{grid-column:2;grid-row:1/span 2}
.runcard{border:2px solid var(--ink);padding:20px;position:sticky;top:82px}
/* 运营 §6 L417 把 Price per Call 和其余 6 项并列为调用卡字段，
   另外 5 行都有 dt 标签，价格不能只有数字没有名字。字号按 §13「小号大写标签 11–12px」 */
.rc-plabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  margin-bottom:5px}
.rc-price{font-size:30px;font-weight:600;letter-spacing:-.025em;padding-bottom:14px;
  border-bottom:2px solid var(--ink)}
.rc-price em{font-style:normal;font-size:12px;font-weight:400;color:var(--t-64);margin-left:7px}
.rc-kv{margin:0 0 16px;display:flex;flex-direction:column}
.rc-kv>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--hair-3);font-size:13px}
.rc-kv dt{color:var(--t-64);margin:0}
.rc-kv dd{margin:0;font-weight:600;text-align:right}
.btn-block{width:100%;justify-content:center;min-height:46px;padding:0}
.rc-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--t-64)}

.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;
  padding:34px 0 0}
.body{margin:0;font-size:14px;line-height:1.6;color:var(--t-74)}
.example{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;
  background:var(--surface);border:1px solid var(--hair);padding:16px;white-space:pre-wrap;
  color:var(--t-75)}
/* 隐私说明缩小成一小块，不再是整屏绿底 */
.privacy{margin-top:18px;border-left:2px solid var(--brand);padding:2px 0 2px 14px;
  font-size:13px;line-height:1.6;color:var(--t-72)}
.privacy b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}

/* ── 空状态 ── */
.notfound{padding:80px 0 90px;border-top:2px solid var(--ink);margin-top:26px}
.notfound h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em}
.notfound p{margin:14px 0 24px;font-size:16px;color:var(--t-70)}

/* ── Creator ── */
/* 头像跟【名字】对齐，不要跟整段文字的中线对齐 —— 整段含 kicker+地址+按钮+说明，
   居中会把头像压到「Copy address」那一行去，看着和名字脱节。 */
.cr-id{display:flex;gap:16px;align-items:flex-start}
.cr-avatar{margin-top:22px}
.cr-avatar{width:54px;height:54px;flex:none;display:grid;place-items:center;
  border:1px solid var(--ink);color:var(--ink)}

/* ── My Skills ── */
.mono{font-family:var(--mono)}
.acts{display:flex;gap:10px;white-space:nowrap}
.acts a{font-size:12px;font-weight:600;color:var(--brand-deep);cursor:pointer;
  border-bottom:1px solid transparent}
.acts a:hover{border-bottom-color:var(--brand-deep);text-decoration:none}
/* §一.3 三种合格状态之一「明确禁用状态」。演示行里无法真操作的动作用它，
   不做成点了没反应的按钮。 */
.acts .off{font-size:12px;font-weight:600;color:var(--t-62);opacity:.55;cursor:not-allowed;
  border-bottom:1px dashed var(--hair)}
.dimrow{opacity:.62}
.pill-changes{background:#fff;color:var(--hot);border-color:var(--hot)}

/* ── 发布页：顶部状态条 ── */
.statusbar{border-bottom:1px solid var(--hair);background:var(--surface)}
.statusbar-in{max-width:1000px;margin:0 auto;padding:12px 28px;display:flex;
  align-items:center;gap:1px;flex-wrap:wrap}
.sb-cell{display:flex;flex-direction:column;gap:3px;padding:4px 20px 4px 0;
  border-right:1px solid var(--hair);margin-right:20px}
.sb-cell:last-of-type{border-right:0}
.sb-cell .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.sb-cell .v{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.sb-cell .v.ok{color:var(--brand-deep)}
.steps-grid.s3{grid-template-columns:repeat(3,1fr)}

/* ── 发布页：Test Skill ── */
.testbox{border:1px solid var(--hair);padding:20px;margin-top:26px;background:var(--surface)}
.tb-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.tb-h h3{font-size:16px;font-weight:600}
.tb-note{font-size:12.5px;color:var(--t-66)}
/* 🔴 white-space:pre-wrap 不可删：模型输出是多行的，默认 normal 会把整段压成一行 */
.preview{white-space:pre-wrap;border:1px solid var(--line-in);background:#fff;padding:14px;min-height:120px;
  font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--t-64)}
.stake-inline{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--t-70)}
.stake-inline b{color:var(--ink)}
.preview-listing{margin-top:26px;border:1px solid var(--hair)}
/* §五.1「Listing Preview 桌面端放在右侧；移动端放在提交按钮之前」。
   移动端不用管 —— DOM 里它本来就排在 terms + Submit 之前，堆叠后天然满足。
   桌面端把 #s3 变两栏，预览进右列并吸顶。 */
@media(min-width:861px){
  #s3{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 28px;align-items:start}
  #s3>.fsec-h{grid-column:1/-1}
  #s3>.preview-listing{grid-column:2;grid-row:2/span 99;margin-top:0;position:sticky;top:84px}
  #s3>*:not(.fsec-h):not(.preview-listing){grid-column:1}
  #s3>.preview-listing .pl-b{max-width:none}
}
.pl-h{background:var(--surface);border-bottom:1px solid var(--hair);padding:10px 16px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.pl-b{padding:16px;max-width:360px}
.pl-b .card{border:1px solid var(--hair)}

/* ── 移动端汉堡菜单（运营 §14：不许隐藏核心功能而无替代入口）── */
.burger{display:none;width:34px;height:34px;border:1px solid var(--ink);background:#fff;
  padding:0;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:16px;height:2px;background:var(--ink);transition:.15s}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--hair);padding:14px 20px 18px;
  flex-direction:column;gap:12px;background:#fff}
.mobile-menu a{font-size:15px;font-weight:600;color:var(--ink);padding:6px 0}
.mobile-menu a.on{border-bottom:2px solid var(--ink);align-self:flex-start}
.mobile-menu .btn{align-self:flex-start;padding:11px 16px}
.mm-wallet{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  color:var(--t-70);padding:6px 0;border-top:1px solid var(--hair-3)}

@media(max-width:900px){
  .detail-grid{grid-template-columns:1fr;gap:26px}
  /* 调用卡置于标题后、详情内容前（运营 §14） */
  /* 单列时三块按 DOM 自然顺序排：标题 → 调用卡 → 正文 */
  .detail-titleblock,.detail-body,.runcard{grid-column:1;grid-row:auto}
  .runcard{position:static}
  .cols3{gap:24px}
  /* 🔴 44×44：运营 §14「按钮点击区 ≥44px」。
     下面那条 .btn{min-height:44px} 管不到 .burger —— 它不是 .btn，两轮核对都漏了这一个。 */
  .burger{display:flex;width:44px;height:44px}
  .mobile-menu:not([hidden]){display:flex}
  .statusbar-in{gap:0}
  .sb-cell{border-right:0;margin-right:0;padding:6px 18px 6px 0}
  .steps-grid.s3{grid-template-columns:repeat(3,1fr)}
  /* 点击区不小于 44px */
  .btn{min-height:44px}
  .chip{min-height:38px}
}


/* ══════ 2026-09-18 二轮：按 9/23 合规核对结果补齐 ══════ */

/* §8 L546 Validation Errors */
.validation{margin-top:22px;border:1px solid var(--hair)}
.vl-h{background:var(--surface);border-bottom:1px solid var(--hair);padding:9px 14px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.vl{list-style:none;margin:0;padding:6px 14px 12px}
.vl li{font-size:13px;padding:5px 0 5px 20px;position:relative;color:var(--t-74)}
.vl li::before{position:absolute;left:0;top:5px;font-weight:600;font-size:12px}
.vl li.ok::before{content:'✓';color:var(--brand-deep)}
.vl li.bad::before{content:'!';color:var(--hot)}
.vl li.bad{color:var(--ink)}

/* §8 L563 Gas Estimate */
.gasline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--hair)}
.gasline .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.gasline .v{font-family:var(--mono);font-size:14px;font-weight:600}
.gasline .n{font-size:12px;color:var(--t-66)}

/* §8 L581 Learn More */
.learn{font-weight:600;border-bottom:1px solid var(--brand-deep)}
.learn:hover{text-decoration:none}

/* §8 L565 Terms Confirmation */
.checkrow.terms{margin-top:26px}

/* §9 空状态 */
.tbl-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:52px 0 56px}
.tbl-empty b{font-size:18px}
.tbl-empty span{font-size:14px;color:var(--t-70)}
.tbl-empty .btn{margin-top:6px}

/* §9 L647-652 可编辑范围 */
.editscope{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin-top:22px}
.es-col{background:#fff;padding:18px}
.es-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--hair-3)}
.es-col ul{margin:0;padding-left:16px}
.es-col li{font-size:13px;line-height:1.7;color:var(--t-74)}
.es-col p{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--t-70)}

/* 移动菜单里的 Connected Wallet 标签 */
.mm-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  margin-right:2px}

/* §16 L918 Changes Requested 反馈 */
.feedback{border-left:2px solid var(--hot);background:var(--surface);padding:16px 18px;margin:4px 0}
.fb-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);font-weight:600}
.feedback p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--t-75);max-width:78ch}
.fb-a{margin-top:12px}

/* 审核反馈行（My Skills → Changes Requested → View Feedback）。
   运营 §16 P0-A 第 8 条：反馈必须看得到，且能重新提交。 */
.fb{border-left:3px solid var(--ink);padding:12px 16px;background:var(--surface)}
.fb b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.fb p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--t-75);white-space:pre-wrap}
.fb .dim{font-size:12px}

/* 五态角标补齐：Draft 与 Rejected 原来没有，接真数据后会出现 */
.pill-draft{background:#fff;color:var(--t-64);border-color:var(--hair)}
.pill-rejected{background:var(--ink);color:#fff;border-color:var(--ink)}
/* §六.4 Paused：暂停上架。用虚线边框与 Live 区分，不新增颜色（§一.2 不新增装饰） */
.pill-paused{background:#fff;color:var(--t-64);border-style:dashed;border-color:var(--t-62)}

/* 补白格子：只负责挡住容器底色，本身没有任何样式 */
.cell-fill{background:#fff;display:block}

/* ══════════ 自然语言推荐（运营 §5.4–5.6）══════════ */
.finder{border-bottom:1px solid var(--hair);background:var(--surface)}
.finder-in{max-width:var(--max);margin:0 auto;padding:30px var(--pad) 32px}
.finder h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;margin:0}
.finder-sub{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--t-72);max-width:none}
/* 输入区：一次输入 ＋ 一个按钮，不做成聊天气泡 */
.askbox{display:flex;gap:0;margin-top:18px;border:2px solid var(--ink);background:#fff}
.askbox textarea{flex:1;min-width:0;border:0;outline:none;resize:vertical;background:transparent;
  font-family:inherit;font-size:16px;line-height:1.5;padding:14px 16px;color:var(--ink)}
.askbox .btn{flex:none;border:0;border-left:2px solid var(--ink);min-height:auto;
  padding:0 20px;font-size:14px;justify-content:center}
.asketc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.asketc .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
.chip.ex{background:#fff}

/* 推荐结果 */
.recnote{margin-top:22px;font-size:13.5px;color:var(--t-70)}
.recnote.wait{font-family:var(--mono)}
.recs{display:flex;flex-direction:column;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:12px}
.rec{background:#fff;padding:18px 20px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:start}
.rec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.rec-h a{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.rec-h a:hover{text-decoration:underline}
/* §5.5：第一个标 BEST MATCH；档位只用 Best/Strong/Related，不用伪精确百分比 */
.lv{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--ink);flex:none}
.lv.best{background:var(--brand);color:var(--ink)}
.lv.strong{background:#fff;color:var(--ink)}
.lv.related{background:#fff;color:var(--t-66);border-color:rgba(10,10,10,0.3)}
.rec-desc{grid-column:1;margin:0;font-size:14px;line-height:1.55;color:var(--t-72)}
.rec-why{grid-column:1;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--brand);padding-left:10px}
.rec-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;
  color:var(--t-66);font-family:var(--mono)}
.rec-run{grid-column:2;grid-row:1/span 4;align-self:center}
.recfoot{margin:12px 0 0;font-size:12px;color:var(--t-62)}
@media(max-width:700px){
  .askbox{flex-direction:column}
  .askbox .btn{border-left:0;border-top:2px solid var(--ink);min-height:46px}
  .rec{grid-template-columns:1fr}
  .rec-run{grid-column:1;grid-row:auto;align-self:start}
}

/* 核心数据独立成段（§5 推荐页面顺序第 4 项，排在推荐模块之后） */
.statband{border-bottom:1px solid var(--hair)}
.statband-in{max-width:var(--max);margin:0 auto;padding:22px var(--pad) 22px}
.statband .stats{margin-top:0;border-top:0}

/* 未连接钱包时的灰点（对应 .dot-live 的在线绿点） */
.dot-idle{width:7px;height:7px;background:#fff;border:1px solid var(--t-62);display:block;flex:none}

/* 字数超限时的提示色 */
.hint.over{color:var(--hot);font-weight:600}

/* Learn More 就地展开的内容块 */
.learn{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--brand-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.learnbox{margin-top:12px;border-left:2px solid var(--ink);padding:2px 0 2px 14px}
.learnbox p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--t-75)}
.learnbox p:last-child{margin-bottom:0}

/* §14 L869「按钮点击区域不小于 44px」。
   Learn More 与卡片里的钱包地址是行内文字按钮，直接撑到 44px 会破坏段落版式，
   用「内边距撑开 + 负外边距抵消」把命中区做大而不改视觉位置。
   只在窄屏生效，桌面端用鼠标不需要。 */
@media(max-width:860px){
  .learn,.card .wallet,.rec .wallet,.pl-b .wallet{
    position:relative;padding:15px 6px;margin:-15px -6px;display:inline-block}
}

/* 推荐结果的两个入口（新 DOCX §二.2：显示 …View Details 和 Run Skill） */
.rec-acts{grid-column:2;grid-row:1/span 4;align-self:center;display:flex;flex-direction:column;gap:8px}
.rec-view{white-space:nowrap}
@media(max-width:700px){.rec-acts{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}}

/* §三.1 Example Output 展开/收起 */
.example-wrap{position:relative}
.example-wrap.clamped .example{max-height:220px;overflow:hidden}
.example-wrap.clamped::after{content:'';position:absolute;left:1px;right:1px;bottom:38px;
  height:56px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.example-toggle{margin-top:10px}

/* Creator 卡片响应式列数。
   🔴 2026-09-20 由【四列】改为【三列】：《9月改版执行文档·技术最终版》§三 L77
      「桌面卡片最多三列」。旧值 repeat(4,…) 来自上一版口径。
   ⚠️ 这三条是 ID 选择器 + !important，特异性高于任何 .grid-3 类规则 ——
      改列数必须改这里，在末尾追加 .grid-3 是压不过它的（踩过一次）。 */
@media(min-width:1200px){#cr-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(min-width:768px) and (max-width:1199px){#cr-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:767px){#cr-grid{grid-template-columns:1fr !important}}

/* §五.1 步骤折叠 */
.fsec-h{position:relative}
.fsec-toggle{margin-left:auto;background:none;border:1px solid var(--hair);padding:5px 10px;
  font:inherit;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-64);cursor:pointer}
.fsec-toggle:hover{border-color:var(--ink);color:var(--ink)}
.fsec.collapsed>*:not(.fsec-h){display:none}

/* §五.1 底部固定操作栏 */
.stickybar{position:sticky;bottom:0;z-index:20;background:#fff;border-top:2px solid var(--ink)}
.stickybar-in{max-width:1000px;margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sb-miss{font-size:12.5px;min-width:0;flex:1 1 220px}
.sb-miss.bad{color:var(--hot)}
.sb-miss.ok{color:var(--brand-deep);font-weight:600}
@media(max-width:700px){
  .stickybar-in{padding:10px 18px}
  .sb-miss{flex:1 1 100%;order:-1}
  .stickybar .btn{flex:1}
}

/* ══════ §六.5 My Skills 移动端改卡片 ══════
   桌面保留表格；≤860px 用 CSS 把同一份 <table> 变成卡片流，
   主信息直接显示，其余收进 More Actions。
   🔴 不另写一份 DOM —— 两份结构必然会漂，而且 §六.3 刚修完 id 一致性。
   每个 <td> 的标签从 data-k 取，所以 renderReal/演示行都要带 data-k。 */
@media(max-width:860px){
  .tblwrap{overflow:visible}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl thead{display:none}
  .tbl{min-width:0}
  .tbl tr{border:1px solid var(--hair);padding:14px;margin-bottom:12px;background:#fff}
  .tbl tr:hover{background:#fff}
  .tbl td{border:0;padding:5px 0;display:flex;align-items:baseline;gap:12px}
  .tbl td::before{content:attr(data-k);flex:none;width:112px;font-size:11px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;color:var(--t-62)}
  .tbl td:first-child{padding-top:0}
  .tbl td:first-child::before{display:none}
  .tbl td:first-child .nm{font-size:17px}
  /* 🔴 桌面表格给 .nm span 加了 nowrap（防止名字折在中间），
     但卡片布局下没有列宽约束，nowrap 会把长名字顶出视口（320px 实测溢出 6px）。
     移动端必须放开。 */
  .tbl .nm span{white-space:normal}
  .tbl td.num{text-align:left}
  /* 操作收进 More Actions */
  .tbl td.actcell{display:block;margin-top:10px;border-top:1px solid var(--hair-3);padding-top:10px}
  .tbl td.actcell::before{display:none}
  .acts{display:none;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px}
  .acts.open{display:flex}
  .more-toggle{display:inline-block;background:none;border:1px solid var(--hair);
    padding:9px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink)}
}
@media(min-width:861px){.more-toggle{display:none}}


/* ═══════════════════════════════════════════════════════════════════════
   2026-09-20 ·《9月改版执行文档·技术最终版》追加段
   放在文件末尾，同特异性后定义者胜出，因此本段会覆盖上面的旧值。
   分三部分：A 排版校准（文档 §三 表格）· B 新组件 · C 移动端
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────── A. 排版校准（文档 §三 L84-88 的建议值）────────── */

/* Hero 标题（2026-09-21 字体最终版覆盖 09-20 追加段）：桌面 56–68 / 移动 38–42。
   与基类 .hero h1 一致；断行用 <br> 手动控制，不用 text-wrap:balance。 */
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.18;letter-spacing:-.03em}
@media(max-width:640px){.hero h1{font-size:clamp(36px,9vw,40px);line-height:1.2}}
.hero-sm h1{font-size:clamp(30px,4vw,48px)}

/* 页面 H1 桌面 46–50px / 移动 28–34px */
.page-h1{font-size:clamp(30px,4.2vw,48px);letter-spacing:-.03em;line-height:1.04;margin:0}

/* 卡片描述 14–15px。§三 L86「不通过缩小正文解决挤压问题」 */
.card-desc{font-size:14.5px;line-height:1.55}

/* 正文与长说明。§三 L91「长说明限制行宽」 */
.body{font-size:15px;line-height:1.62;max-width:72ch}

/* §三 L87「交互区域至少 44px；键盘焦点可见」 */
.btn{min-height:44px;font-size:14px}
.btn-sm{min-height:36px;font-size:12.5px}
a:focus-visible,button:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,.wstep:focus-visible{
  outline:2px solid var(--brand-deep);outline-offset:2px}

/* §三 L88「筛选与状态使用浅色或描边，不与主按钮争夺注意力」 */
.pill{font-weight:600}

/* ────────── B. 新组件 ────────── */

/* 阶段提示（文档 §一 L43-44） */
.stagenote{margin:18px 0 0;font-size:14px;color:var(--t-70);
  border-left:2px solid var(--ink);padding-left:12px;max-width:72ch}
.stagenote.strong{font-size:15px;color:var(--ink);margin-top:20px}

/* 卡片：Planned price per run + Test runtime */
.price-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t-62);
  font-weight:600}
.price{font-weight:600;font-size:15px;letter-spacing:-.01em}
.card-rt{font-size:11.5px;color:var(--t-64);white-space:nowrap;align-self:flex-end}
.card-nums{gap:2px}

/* 顶栏未连接钱包 = 可点的明确操作（文档 §一 L32） */
/* 顶栏 / 移动菜单的 Disconnect（2026-09-22 加）。低调的文字按钮，
   不跟主 CTA「Upload a skill」抢视觉。 */
.wdisc{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-62);background:none;border:0;border-bottom:1px solid rgba(10,10,10,0.22);
  padding:0 0 1px;margin-left:10px;cursor:pointer}
.wdisc:hover{color:var(--ink);border-bottom-color:var(--ink)}
.wdisc[disabled]{opacity:.5;cursor:default}
.mm-disc{align-self:flex-start;margin:2px 0 0}
/* ≤860px 顶栏的钱包芯片本来就藏了（见 .wallet-chip 那条），断开钮要一起藏，
   否则它会孤零零挂在顶栏上；移动端用菜单里那个 .mm-disc。 */
@media(max-width:860px){ .topbar-in .wdisc{display:none} }
.wallet-chip.actionable{cursor:pointer}
.wallet-chip.actionable:hover{color:var(--brand-deep)}

/* 紧凑筛选控件（文档 §二 L56） */
.selrow{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;padding:12px 0 2px}
.sel{display:flex;flex-direction:column;gap:5px;min-width:0}
.sel>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  font-weight:600}
.sel select{min-height:40px;border:1px solid var(--hair);background:#fff;padding:0 30px 0 11px;
  font:inherit;font-size:13.5px;color:var(--ink);border-radius:0;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sel-inline{flex-direction:row;align-items:center;gap:9px}
.sel-inline>span{white-space:nowrap}

/* 空状态 */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:54px 28px}
.empty b{font-size:17px}

/* 平台介绍与 Future capabilities（文档 §一 L45、§二 L52） */
.platform{border-top:2px solid var(--ink);padding-top:34px;padding-bottom:70px;margin-top:10px}
.plat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.plat-grid .btn{margin-top:18px}
.future{border:1px solid var(--hair);background:var(--surface);padding:20px 22px}
.fut-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  font-weight:600;margin-bottom:12px}
.future ul{margin:0;padding-left:18px}
.future li{font-size:13.5px;line-height:1.85;color:var(--t-74)}
.fut-n{margin:14px 0 0;font-size:12.5px;color:var(--t-64);line-height:1.5}

/* 推荐区 */
.recfoot-row{display:flex;gap:10px;margin-top:14px}
.recnote.bad{color:var(--hot)}
.rec-meta span{font-size:12.5px}

/* 详情页 */
.rc-pnote{margin:8px 0 16px;font-size:12px;line-height:1.5;color:var(--t-64)}
.rc-price em{display:none}
.rc-tags{border-top:1px solid var(--hair);padding-top:13px;margin-top:4px}
.rc-tk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  font-weight:600;margin-bottom:8px}
.rc-tv{display:flex;flex-wrap:wrap;gap:6px}
.excols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.excol{background:#fff;padding:16px 18px;min-width:0}
.ex-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  font-weight:600;margin-bottom:10px}
.ex-note{margin:12px 0 0;font-size:12.5px;color:var(--t-64)}
.sub-s{font-size:13px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.body-ul{margin:0 0 18px;padding-left:19px}
.body-ul li{font-size:15px;line-height:1.7;color:var(--t-74);max-width:72ch}

/* Creator 页 */
.cr-addrline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.cr-demo{font-size:11.5px;color:var(--t-62)}
.cr-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--t-70);max-width:62ch}
.cr-wallet{overflow-wrap:anywhere}
/* 🔴 只有一格时把容器底色关掉：.stats 靠 background:var(--hair)+gap:1px 画格线，
   单格时右侧没有第二格去盖住它，整条灰底就直接露出来（运营问「右边那块灰是什么」）。
   一格不需要格线，底色置白即可。 */
.stats-one{grid-template-columns:minmax(220px,320px);background:#fff}
.stat .sn{font-size:11.5px;color:var(--t-64);margin-top:7px;line-height:1.45;max-width:34ch}
/* 单格统计里这行注释被 34ch 卡成「…is not / available yet.」的孤行；
   单格时格子本来就有 320px，放开让它自己断。 */
.stats-one .stat .sn{max-width:none}

/* Creator dashboard */
.attention{border:2px solid var(--hot);padding:18px 20px;background:#fff}
.att-h{font-size:15px;font-weight:600;margin-bottom:12px}
.att-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;
  border-top:1px solid var(--hair-2)}
.att-row:first-child{border-top:0}
.att-n{font-weight:600;font-size:14px;min-width:0;overflow-wrap:anywhere}
.att-row .btn{margin-left:auto}
.listhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:14px}
.listctl{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.sb-sm{padding:6px 0;min-width:190px}
.sb-sm input{font-size:13.5px}
/* 🔴 只在桌面收窄 min-width。本段在文件末尾，若不加 min-width 媒体条件，
   它会盖掉上面 @media(max-width:860px) 里的 .tbl{min-width:0}，
   于是移动端卡片化了、表格却仍被撑到 620px，375 屏整页横向滚动。 */
@media (min-width:861px){ .tbl-5,.tbl-4{min-width:620px} }
.row-cat{display:block;font-size:11.5px;color:var(--t-64);margin-top:3px}
.pill-withdrawn{background:var(--surface);color:var(--t-62);border-color:var(--hair);
  text-decoration:line-through}

/* ── 发布向导（文档 §四 L100）── */
.wiz{border-bottom:1px solid var(--hair);background:#fff;position:sticky;top:0;z-index:15}
.wiz-in{max-width:1000px;margin:0 auto;padding:0 var(--pad)}
.wsteps{display:flex;gap:0;list-style:none;margin:0;padding:0}
.wstep{display:flex;align-items:center;gap:10px;padding:15px 20px 13px;cursor:default;
  border-bottom:2px solid transparent;color:var(--t-62);min-height:44px}
.wstep:first-child{padding-left:0}
.wstep .wn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid currentColor;font-size:11.5px;font-weight:600;flex:none}
.wstep .wl{font-size:13.5px;font-weight:600;white-space:nowrap}
.wstep.on{color:var(--ink);border-bottom-color:var(--ink)}
.wstep.done{color:var(--brand-deep);cursor:pointer}
.wstep.done .wn{background:var(--brand);border-color:var(--brand);color:var(--ink)}

.wpane{padding:34px 0 0}
.wp-h{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.wp-sub{margin:0 0 26px;font-size:14.5px;line-height:1.6;color:var(--t-70);max-width:70ch}

.startrow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-bottom:26px}
.startrow.picked{opacity:.62}
.startcard{background:#fff;border:0;text-align:left;padding:18px 20px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;font:inherit;min-height:44px}
.startcard:hover{background:var(--surface)}
.startcard b{font-size:15px}
.startcard span{font-size:13px;color:var(--t-70)}
.tplpick{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:-14px 0 26px;
  padding:16px 18px;border:1px solid var(--hair);background:var(--surface)}

.field-n{margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--t-64);max-width:62ch}

.tb-state{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border:1px solid var(--hair);color:var(--t-64);background:#fff}
.tb-testing{border-color:var(--ink);color:var(--ink)}
.tb-done{background:var(--brand);border-color:var(--brand);color:var(--ink)}
.tb-failed{background:var(--ink);border-color:var(--ink);color:#fff}
.tb-note{margin:0 0 16px;font-size:13px;line-height:1.55;color:var(--t-70);max-width:70ch}
.tb-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.tb-warn{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--hot);max-width:70ch}

.wnav{display:flex;align-items:center;gap:12px;margin:30px 0 0;padding-top:22px;
  border-top:1px solid var(--hair)}
.steperr{margin:18px 0 0;border:2px solid var(--hot);padding:16px 18px;background:#fff}
.steperr b{font-size:14px;display:block;margin-bottom:9px}
.steperr ul{margin:0;padding-left:19px}
.steperr li{font-size:13.5px;line-height:1.75;color:var(--t-75)}

.exblock{border:1px solid var(--hair);padding:20px 22px;margin:26px 0 0;background:#fff}
.exb-h{font-size:15px;font-weight:600;margin-bottom:8px}
.exb-n{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--t-70);max-width:70ch}

.signbox{border:1px solid var(--hair);padding:20px 22px;margin:26px 0 0;background:var(--surface)}
.sg-h{font-size:15px;font-weight:600;margin-bottom:8px}
.sg-n{margin:0 0 16px;font-size:13px;line-height:1.55;color:var(--t-70);max-width:70ch}
.sg-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--hair-2)}
.sg-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-62);
  font-weight:600;min-width:104px}
.sg-v{font-size:13.5px;display:flex;align-items:center;gap:8px;min-width:0;
  overflow-wrap:anywhere}
.sg-row .btn{margin-left:auto}
.sg-miss{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--hot);max-width:70ch}

.pl-n{margin:14px 18px 18px;font-size:12.5px;color:var(--t-64);line-height:1.5}
.sb-saved{font-size:12px;color:var(--t-64);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:40ch}
.sb-saved.ok{color:var(--brand-deep)}
.sb-saved.bad{color:var(--hot)}
.sb-miss{font-size:12.5px;color:var(--t-64);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sb-miss.ok{color:var(--brand-deep)}
.terms-pane .sub-s{margin-top:22px}

/* ────────── C. 移动端（文档 §三 L92）────────── */
@media (max-width:860px){
  /* 手机端折叠筛选；管理列表转换为重点字段卡片（.tbl 的卡片化在上方已有） */
  .plat-grid{grid-template-columns:1fr;gap:26px}
  .excols{grid-template-columns:1fr}
  .startrow{grid-template-columns:1fr}
  .selrow{gap:12px}
  .sel{flex:1 1 44%}
  .sel select{width:100%}
  .listctl{width:100%}
  .sb-sm{flex:1 1 100%;min-width:0}
  .listctl .sel{flex:1 1 100%}
  .wiz{position:static}
  .wsteps{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wstep{padding:13px 14px 11px;flex:none}
  .wstep .wl{font-size:12.5px}
  .sg-row{align-items:flex-start;flex-direction:column;gap:7px}
  .sg-row .btn{margin-left:0}
  .att-row .btn{margin-left:0}
  /* 底部操作栏不能挡住字段与错误 —— 给内容留出空间 */
  .stickybar-in{flex-wrap:wrap;gap:8px}
  .sb-miss{flex:1 1 100%;white-space:normal}
  .sb-saved{flex:1 1 100%;max-width:none;white-space:normal}
  /* 触控区域 */
  .acts a,.acts .off{display:inline-flex;align-items:center;min-height:44px}
  .wallet{min-height:44px}
}
@media (max-width:520px){
  .stats-one{grid-template-columns:1fr}
  .tplpick{flex-direction:column;align-items:stretch}
  .tplpick .sel{width:100%}
}

/* ────────── D. sentence case 收口（文档 §八 L189）────────── */
/* 🔴 文档 §八「全站采用 sentence case」，而且 §三 L91 要求避免「粗体、全大写和亮绿
   同时叠加」。原设计把一批小标签做成 letter-spacing + text-transform:uppercase，
   于是页面上显示的是 PLANNED PRICE PER RUN / PUBLISHED / EXAMPLE INPUT ——
   运营拿文档 §八 的文案表逐条对页面时对不上，状态名也和 §六.4 的写法不一致。
   这里只对【承载文档明文文案】的那些类取消大写转换，保留字距与字重的版式感；
   纯装饰性的 eyebrow 不动。 */
.pill,
.rc-plabel,
.ex-k,
.price-k,
.rc-tk,
.sg-k,
.fut-k,
.sub-title,
.exb-h,
.tb-state,
.cr-head .kicker{
  text-transform:none;
  letter-spacing:.02em;
}
.pill{font-size:11.5px}
.sub-title{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.tb-state{letter-spacing:.03em}

/* 🔴 文档 §三 L77「桌面卡片最多三列」。
   auto-fill + minmax(300px,1fr) 在 1440 宽下会排到 4 列 —— 实测 4。
   固定三列，窄屏再降。 */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){  .grid-3{grid-template-columns:minmax(0,1fr)} }

/* 审核意见横幅（文档 §六 L147：重提时保留审核意见并定位要改的字段） */
.rvbanner{border:2px solid var(--hot);background:#fff;padding:18px 20px;margin:26px 0 0}
.rv-h{font-size:15px;font-weight:600;margin-bottom:9px}
.rv-b{margin:0;font-size:14px;line-height:1.6;color:var(--t-75);max-width:72ch}
.rv-n{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--t-64);max-width:72ch}

/* 钱包地址兜底：真实地址是 44 字符 base58，任何地方漏了缩写都不该撑破布局 */
.wallet{overflow-wrap:anywhere;max-width:100%}
.rc-kv dd{min-width:0;overflow-wrap:anywhere}


/* ════════════════════════════════════════════════════════════════
   2026-09-21 布局订正：换行 · 留白 · 空网格
   用户原话：「该换行就换行，不该换行不要提前换行。包括两个元素的
   左右／上下之间需要有一定的间隙和留白，不要仅靠着贴着。」
   本段全部为追加覆盖 —— 同特异性下后写的赢，不动上面任何一行。
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · 发布向导容器与全站同宽 ─────────────────────────────────
   原 1000px，而顶栏／页脚是 --max(1320px)。实测 1440 视口下
   H1 "Publish a skill" 比顶栏 logo 右移 160px，五个页面里只有它不对齐。 */
.wiz-in,.narrow,.steps-in,.stickybar-in,.statusbar-in{max-width:var(--max)}

/* ── 2 · 断行 ──────────────────────────────────────────────────
   2a 能单行放下的短说明：放宽上限，别掐成「一长一短」。
      实测 .field-n 原 62ch＝489px 盒，在 944px 可用宽里断成 485/154 —— 第二行只有 154px。 */
.field-n,.tb-warn,.sg-n,.sg-miss,.rc-note,.ex-note,.pl-n{max-width:104ch}

/* 2b 确实需要多行的：用 balance 均分，而不是 pretty。
      pretty 只保证「最后一行不孤」，balance 才会让各行宽度接近。
      ⚠️ balance 只在块内行数 ≤6 时生效（Chrome 默认上限），这些说明都在量级内。
      ⚠️ 它不改行数、不改盒模型，只改断点，所以不会影响任何尺寸。 */
.wp-sub,.cr-note,.note,.tb-note,.exb-n,.rv-b,.rv-n,.reqbox p,.endnote p,
.feedback p,.stake-note,.lockblock p,.detail-desc,.finder-sub,.hero p{text-wrap:balance}

/* ── 3 · 段与段之间的留白 ───────────────────────────────────────
   .sub-rule / .sec-title 自带 2px 顶线，但上一段的收尾文字离这条线只有 12px，
   实测 skill.html 连续四对 <section.sec> 纵向间隙为 0。 */
.sec>.sub-rule,.sec>.sec-title{margin-top:40px}
.sec:first-of-type>.sub-rule,.sec:first-of-type>.sec-title{margin-top:0}

/* ── 4 · 贴着的元素 ────────────────────────────────────────────
   4a my.html：<p.note> 与下面的表格间隙实测 0px */
.note+.tblwrap,.note+.grid,.note+.gridhead{margin-top:18px}

/* 4b 详情页隐私说明：上下内边距只有 2px，绿线包不住文字 */
.privacy{padding:12px 0 12px 16px}

/* 4c 示例展开按钮紧贴渐隐遮罩 */
.example-toggle{margin-top:14px}

/* 4d 发布页两个起始方式：原来共用一条 1px 网格线，读起来是一个分段控件。
      它俩是两个并列【操作】而不是数据网格，给真实间隙。
      （首页卡片网格的 gap:1px 是设计语言里的「网格线」，不动。） */
.startrow{gap:14px;background:transparent;border:0}
.startcard{border:1px solid var(--hair);padding:20px 22px}
.startcard:hover{border-color:var(--ink)}

/* 4e 测试区与上一个字段、下一个操作之间 */
.testbox{margin-top:32px;padding:22px 22px 24px}

/* ── 5 · 底部固定栏不再截断缺项清单 ─────────────────────────────
   原 .sb-miss 是 nowrap+ellipsis，缺项一多就变成「… 」。
   文档 §五 L150 要求缺项【动态计算】并说明，截断等于说不清。 */
.sb-miss{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5}

/* ── 6 · 详情页首屏：去掉被 runcard 撑出来的空行 ──────────────────
   .detail-grid 是 rows:auto 1fr，第二行留给 .detail-body；
   skill.html 没有 .detail-body 时那一行是空的，左列平白空一大块。 */
.detail-grid:not(:has(.detail-body)){grid-template-rows:auto}
.detail-grid:not(:has(.detail-body)) .runcard{grid-row:1}

/* ── 7 · 创作者页单格统计：让唯一那格铺满整条 ──────────────────
   原来格子固定 320px，而 .stats-strong 的上下两条线横贯 1264px，
   右边 944px 是【网格容器自己的底色】露出来的一块 —— 看着像少渲染了两格。
   改成单格占满，整条就是一个完整的白格子，与 my.html 三格统计条同构。
   （试过 width:max-content 让线只压内容，但那样 2px 分节线只画到 1/4 处，
     和 my.html 的统计条对不上，弃用。） */
.stats-one{grid-template-columns:1fr}
.stats-one .stat{padding-right:16px}
/* 创作者说明：62ch 在这块里只有 508px，balance 之后会掉成三行 */
.cr-note{max-width:84ch}

/* ── 8 · 详情页标题块：图标改行内引导（配合 skill.html 的结构改动）────
   原来 .detail-head 是 flex，图标是第一个兄弟，把 H1 与描述整体右推 52px；
   而分类 badge、运行提示仍在 section 左缘 —— 一屏四个左缘。现在统一。 */
.detail-head{display:block;padding-top:22px}
.detail-head .detail-icon{display:inline-block;vertical-align:-3px;margin:0 14px 0 0}
@media(max-width:860px){ .detail-head{display:block} }

/* ── 9 · 创作者页完整钱包地址（配合 creator.html 的结构改动）──────── */
.cr-full{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--t-70);
  background:var(--surface);border:1px solid var(--hair);padding:5px 9px;
  overflow-wrap:anywhere;min-width:0}

/* ── 10 · 页面主说明与容器等宽（沿用首页 .hero p 的既定口径）──────
   .hero p 上面已经写着「用户要求撑满整宽再换行，故去掉宽度上限」。
   同一条口径套到各页首屏说明，避免出现「容器 1264、说明只有 640 就折行」。
   ⚠️ 字段下面的小号提示不在此列（它们仍留 104ch 上限，见 §2a）。 */
.wp-sub,.tb-note,.finder-sub,.detail-desc,.exb-n{max-width:none}

/* ── 11 · 详情页首屏左列容纳示例块（配合 skill.html 结构改动）────────
   左列宽 900px，两栏并排每栏只剩 380px 可放 mono 文本，SQL 会被折得很碎。
   这里改成上下排，每条示例吃满 900px —— 代码类示例宽比高重要。 */
.detail-body{padding-top:0}
.detail-body .excols{grid-template-columns:1fr}
.detail-body>.sub-rule{margin-top:30px}
.detail-body .excol{padding:16px 18px 18px}

/* ── 12 · Creator dashboard 表格列宽 ───────────────────────────────
   实测 1440 下：Status 与 Planned price 之间空了 256px，
   而右对齐的 Planned price 距 Updated 只有 17px —— 空白全堆在错的地方。 */
.tbl-5 th:nth-child(2),.tbl-5 td:nth-child(2){width:20%}
.tbl-5 th:nth-child(3),.tbl-5 td:nth-child(3){width:15%;padding-right:30px}
.tbl-5 th:nth-child(4),.tbl-5 td:nth-child(4){width:14%}
@media(max-width:860px){
  /* ≤860px 表格已被改造成卡片流，列宽提示要让开 */
  .tbl-5 th:nth-child(2),.tbl-5 td:nth-child(2),
  .tbl-5 th:nth-child(3),.tbl-5 td:nth-child(3),
  .tbl-5 th:nth-child(4),.tbl-5 td:nth-child(4){width:auto;padding-right:9px}
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-21 · 汇总文档补充：Hero 双入口 + Explore「What's next」分组
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero 浏览/上传双入口 */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Explore 平台区「What's next」下的 For creators / For callers 分组 */
.future .sub-s{margin-top:16px;margin-bottom:6px}
.future .sub-s:first-of-type{margin-top:4px}
.future ul + .sub-s{margin-top:16px}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-21 · How it works（Now / Next 主线）
   ═══════════════════════════════════════════════════════════════════════ */
.howhead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:22px;flex-wrap:wrap}
.howhead .sub{margin:0}
.howhead .btn{margin-top:0}
.phase{min-width:0}
.phase .flowline{font-family:var(--mono);font-size:13px;color:var(--ink);
  letter-spacing:.01em;margin:10px 0 14px}
.phase.future .flowline{color:var(--t-64)}
.phase ul{margin:0;padding-left:18px}
.phase ul li{margin:6px 0;line-height:1.55}
.phase .body{margin:0 0 12px}

/* Upload · Future settings 折叠区（价格降权） */
.future-set{border:1px solid var(--hair);background:var(--surface);margin:4px 0 8px}
.future-set > summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:13px;
  font-weight:600;color:var(--ink);letter-spacing:-.01em}
.future-set > summary::-webkit-details-marker{display:none}
.future-set > summary::before{content:'+ ';color:var(--t-64)}
.future-set[open] > summary::before{content:'– '}
.future-set > .field{padding:0 16px 16px}

/* 卡片「Example included」标识（替代已移除的价格位） */
.card-ex{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t-64)}
.card-ex::before{content:'';display:inline-block;width:6px;height:6px;background:var(--brand);
  margin-right:6px;vertical-align:middle}

/* Creator dashboard 状态流：Status 标签 + 当前流程一行，下一阶段说明另起一行 */
.flowcap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:16px 0 0}
.flowcap-k{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t-64)}
.flowcap-now{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.flowcap-next{flex-basis:100%;font-size:12.5px;color:var(--t-70);margin-top:2px}

/* ═══ 钱包药丸（2026-09-22）═══════════════════════════════════════════════
   🔴 原来顶栏是「地址芯片」+ 旁边一个裸 Disconnect【两个元素】，
      运营反馈「连上了只看到一个 Disconnect，看不到钱包地址」。
      现在合成一个控件：按钮本身显示地址，点开才有 Copy / Disconnect。
   ⚠️ 本段写在文件末尾是有意的 —— 同优先级靠源码顺序决胜，覆盖规则必须在被覆盖规则【之后】
      （2026-09-22 已经在 .wallet-static 上踩过一次，规则静默失效、页面和 CSS 都不报错）。 */
.wpill{position:relative;display:inline-flex}
/* 🔴 方角不是疏忽：本站设计系统是 --radius:0 / --r:0 / --r-sm:0，全站控件（.btn、卡片、
   输入框）无一圆角。这里若用 border-radius:999px 的圆药丸会跟全站格格不入。
   要的是「地址即按钮」这个形态，不是圆角本身。
   高度对齐 .btn 的 min-height:40px —— 它俩在顶栏和 my.html 头部是并排的。 */
.wpill-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  font-family:var(--mono);font-size:12px;line-height:1;color:var(--ink);
  background:#fff;border:1px solid var(--hair);
  padding:0 14px;cursor:pointer}
.wpill-btn:hover{border-color:var(--ink)}
.wpill-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wpill-caret{font-size:9px;color:var(--t-62);margin-left:-2px}
/* 菜单必须压过顶栏（#top 是 z-index:30），否则展开后被后面的内容盖住一半 */
.wpill-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:176px;display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--ink);padding:4px;
  box-shadow:0 10px 26px rgba(10,10,10,.14)}
.wpill-item{display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;padding:10px 11px}
.wpill-item:hover{background:var(--surface)}
.wpill-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* ≤860px 顶栏收进汉堡菜单，药丸跟着藏 —— 顶栏在 400px 宽下本来就挤
   （见 .topbar-in{gap:14px} 那条注释的实测）。
   🔴 只藏顶栏里的：my.html / upload.html 里的药丸在移动端必须留着，
      那两处没有汉堡菜单兜底。 */
@media(max-width:860px){ .topbar-in .wpill{display:none} }

/* ═══ 品牌图形标（2026-09-22）══════════════════════════════════════════
   与 noosnet.ai 主站一致：主站页头是 28px 的圆点环图标 + mono 粗体 "NOOS"。
   🔴 .brand 是 align-items:baseline（为了 NOOS 与 Skill Market 两段文字对齐基线），
      图片按基线对齐会整个往下掉半个字高，必须 align-self:center 单独压回去。
   🔴 必须写死 width/height 并给 flex:none —— 图是 68x68 的 PNG，
      不写死会在 CSS 还没到时先按原尺寸撑开顶栏（CLS）。 */
.brand .brandmark{width:28px;height:28px;align-self:center;flex:none;display:block}
@media(max-width:860px){ .brand .brandmark{width:26px;height:26px} }