/* ═══════════════════════════════════════════════════════════════════════════
工作台视觉精修 · polish.css
───────────────────────────────────────────────────────────────────────────
纯新增文件，**不改动 index.html 的 style 块与 redesign.css 一个字节**。
回滚 = 删掉 index.html 里的那一行 。
为什么不做「把 18 种字号收成 6 档、31 种圆角收成 4 档」的全量重构：
实测这两个文件里 font-size 共 180 条（只有 1 条走 var()）、
border-radius 共 172 条（只有 21 条走 var()）。收刻度必须逐条改约 330 处声明，
而这是线上有真人在用的工作台，影响面覆盖卡片/详情/管理/弹窗全部界面。
本次改为「按语义分组覆盖」：只动高层级表面与交互反馈，不碰每个组件。
加载顺序：redesign.css → gate.css → polish.css（本文件在最后，同优先级覆盖生效）
改动依据（全部为实测值，不是主观判断）：
卡片阴影 单级 0 2px 10px rgba(11,37,64,.06) → 三级高程 + 悬停抬升
卡片动作条 悬停才出现（opacity:0） → 常驻（触屏上原本永远看不到）
按压反馈 多数按钮无 → scale 按压 + 弹簧缓动收尾
圆角 同一层级内不一致 → 按「小控件/中控件/大表面」归组
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* 三级高程。原来的问题不是阴影不够多，而是**只有一级**，所有元素压在同一层。
分三级之后，面板 > 卡片 > 控件 才有前后关系。 */
--p-el-1:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--p-el-2:0 2px 4px rgba(15,23,42,.04), 0 6px 14px -2px rgba(15,23,42,.08);
--p-el-3:0 8px 16px -4px rgba(15,23,42,.08), 0 20px 36px -10px rgba(15,23,42,.13);
--p-el-lift:0 12px 22px -6px rgba(15,23,42,.13), 0 28px 52px -14px rgba(15,23,42,.18);
--p-line-2:#CBD5E1;
--p-ease-spring:cubic-bezier(.34,1.32,.44,1);
--p-ease-out:cubic-bezier(.22,.72,.24,1);
}
/* ═══════════ 1. 高程：让主要表面分出前后关系 ═══════════ */
/* 首屏筛选面板 / 小美卡：最高一层（它们在内容之上） */
.wb-tile,
.wb-ask{
box-shadow:var(--p-el-1);
border-color:rgba(15,23,42,.07);
transition:box-shadow .22s var(--p-ease-out), border-color .22s var(--p-ease-out);
}
.wb-tile:hover{
box-shadow:var(--p-el-2);
border-color:var(--p-line-2);
}
/* 命令栏输入：聚焦时才抬起，平时贴平（避免首屏到处是浮起的框）
⚠ 真实包装类是 .wb-cmdbox（不是 .wb-cmd-input —— 我第一版猜错了名字，
选择器不匹配时 CSS 静默失效、控制台一声不响，只能靠核对类名发现）。 */
.wb-cmdbox{
transition:box-shadow .22s var(--p-ease-out), border-color .22s var(--p-ease-out);
}
.wb-cmdbox:focus-within{
box-shadow:0 0 0 4px rgba(46,143,210,.12), var(--p-el-2);
}
/* 产品卡：由「几乎无阴影」改为一级高程 + 悬停抬两级 */
.card{
box-shadow:var(--p-el-1);
transition:transform .24s var(--p-ease-spring),
box-shadow .24s var(--p-ease-out),
border-color .24s var(--p-ease-out);
}
.card:hover{
transform:translateY(-3px);
box-shadow:var(--p-el-lift);
border-color:var(--p-line-2);
}
/* 按下要有回应。原来的 :active 只改 transform，没有阴影配合，按下去像没接住。 */
.card:active{
transform:translateY(-1px) scale(.995);
box-shadow:var(--p-el-2);
transition-duration:.09s;
}
/* 左侧分面栏：中低一层（它是辅助面，不该比内容卡更突出） */
.wb-rail{
box-shadow:var(--p-el-1);
border-color:rgba(15,23,42,.07);
}
/* 对比抽屉：浮层，最高一级 */
.wb-cmp.on{
box-shadow:var(--p-el-3);
}
/* ═══════════ 2. 卡片动作条：从「悬停才出现」改为常驻 ═══════════
原行为：.wb-acts { opacity:0 } + .card:hover 才出。
问题：触屏设备没有 hover，那些按钮在那类设备上**永远看不到**。
代价只有 10px 高度，换来的是可发现性和移动端可用性。 */
.card .wb-acts{
opacity:1 !important;
transform:none !important;
transition:opacity .18s var(--p-ease-out), transform .18s var(--p-ease-out);
}
/* 键盘可达性：聚焦到动作条里的按钮时，整条高亮 */
.card .wb-acts:focus-within{
opacity:1 !important;
transform:none !important;
}
/* ═══════════ 3. 交互反馈：按压 + 弹簧收尾 ═══════════
原来多数按钮的 :active 只改背景色。补上位移与缩放，
并用带回弹的缓动收尾 —— 线性缓动按下去是"死"的。 */
.wb-act,
.wb-tile .wb-tile-head,
.wb-pick,
.wb-badge,
.scan-btn,
.chip,
.tag{
transition:transform .14s var(--p-ease-spring),
background-color .16s var(--p-ease-out),
border-color .16s var(--p-ease-out),
color .16s var(--p-ease-out),
box-shadow .16s var(--p-ease-out);
}
.wb-act:active,
.wb-pick:active,
.chip:active,
.scan-btn:active{
transform:scale(.96);
}
.wb-act:hover{
box-shadow:var(--p-el-1);
}
/* 主按钮（卡片上的「生成话术」等）按下时给一点下压 + 收紧阴影 */
.wb-act.pri:active{
transform:scale(.97) translateY(1px);
box-shadow:0 1px 2px rgba(15,23,42,.3);
}
/* ═══════════ 4. 键盘焦点：让焦点环在全站一致可见 ═══════════
原来 :focus-visible 有 15 条规则但不成体系，不同控件外观不一。 */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
outline:2px solid var(--focus, #2E8FD2);
outline-offset:2px;
border-radius:inherit;
}
/* ═══════════ 5. 首屏纵向收紧 ═══════════
实测：1440×900 下第一张产品卡顶边在 893px —— 首屏几乎完全被
命令栏（.wb-cmd margin:32/24 + 输入框 62px）+ 三张筛选面板（.wb-tile padding:18px）
+ gap:16px 占满，用户要滚动才看得到产品。
这里只收紧**空白**，不动任何组件内部结构，也不动信息架构（撤筛选面板要改 JS 模板）。 */
.wb-cmd{margin:26px 0 18px}
.wb-bento{gap:12px;margin-bottom:26px}
.wb-tile{padding:15px 16px}
.wb-tile-head{margin-bottom:11px}
.wb-cmdbox{height:56px}
/* ═══════════ 6. 减弱动效：一律降级 ═══════════ */
@media (prefers-reduced-motion: reduce){
.card,
.card:hover,
.card:active,
.wb-act,
.wb-pick,
.chip,
.wb-tile,
.wb-tile:hover{
transform:none !important;
transition-duration:.001ms !important;
}
.card:hover{ box-shadow:var(--p-el-1); }
}
/* ═══════════════════════════════════════════════════════════════════════════
产品知识区（内容深度试点）
───────────────────────────────────────────────────────────────────────────
复用既有 .block / .kv / .tag / .chip / .copy-btn，只新增以 .pc- 开头的类，
避免与工作台现有样式重名（现有 CSS 里 "knowledge/src-/cite/claim" 均 0 命中）。
数据来自 GET /api/product-content/:pid，只渲染 published 版本。
═══════════════════════════════════════════════════════════════════════════ */
.pc-wrap{margin-top:4px}
.pc-head{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-bottom:12px;
}
.pc-head h3{margin:0;font-size:15px;font-weight:600}
.pc-ver{
font-family:var(--mono);font-size:10.5px;color:var(--muted);
padding:2px 7px;border-radius:var(--radius-sm,8px);
background:var(--surface-2);border:1px solid var(--line);
}
.pc-cat{
font-size:10.5px;padding:2px 7px;border-radius:var(--radius-sm,8px);
background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(46,143,210,.22);
}
/* 状态徽标：ok / pending / unknown / na —— 明确区分「有依据」与「没根据」 */
.pc-st{
display:inline-flex;align-items:center;gap:3px;
font-size:10px;font-weight:500;padding:1px 6px;border-radius:6px;
border:1px solid transparent;white-space:nowrap;
}
.pc-st.ok{background:#E8F5EE;color:#1F7A4D;border-color:rgba(31,122,77,.18)}
.pc-st.pending{background:#FBF4E3;color:#8A6D1F;border-color:rgba(138,109,31,.20)}
.pc-st.unknown{background:#F1F5F9;color:#64748B;border-color:rgba(100,116,139,.20)}
.pc-st.na{background:#FDF3EF;color:#B9502B;border-color:rgba(185,80,43,.20)}
/* 区块 */
.pc-sec{margin-bottom:16px}
.pc-sec:last-child{margin-bottom:0}
.pc-sec h4{
margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;
color:var(--muted);text-transform:uppercase;
display:flex;align-items:center;gap:8px;
}
.pc-sec h4 .pc-mini{
text-transform:none;letter-spacing:0;font-weight:400;
font-size:10.5px;color:var(--muted);opacity:.8;
}
/* 概览 */
.pc-overview{
font-size:13.5px;line-height:1.75;color:var(--ink-2);
padding:12px 14px;border-radius:var(--radius-md,10px);
background:var(--surface-2);border:1px solid var(--line);
}
/* 条目列表 */
.pc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pc-item{
display:flex;gap:9px;align-items:flex-start;
font-size:13px;line-height:1.7;color:var(--ink-2);
padding:9px 11px;border-radius:var(--radius-md,10px);
background:var(--surface);border:1px solid var(--line);
}
.pc-item .pc-bullet{
flex:0 0 auto;width:5px;height:5px;border-radius:50%;
background:var(--brand);margin-top:8px;
}
.pc-item.pc-warn{border-color:rgba(138,109,31,.24);background:#FFFCF4}
.pc-item.pc-warn .pc-bullet{background:#8A6D1F}
.pc-item.pc-danger{border-color:rgba(185,80,43,.26);background:#FEFAF8}
.pc-item.pc-danger .pc-bullet{background:var(--accent)}
.pc-item .pc-txt{flex:1 1 auto;min-width:0}
/* 来源角标 */
.pc-cite{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;margin-left:3px;
font-family:var(--mono);font-size:9.5px;font-weight:600;line-height:1;
color:var(--brand-ink);background:var(--brand-soft);
border:1px solid rgba(46,143,210,.25);border-radius:5px;
cursor:pointer;vertical-align:1px;
transition:background .14s var(--p-ease-out,ease),color .14s,border-color .14s;
}
.pc-cite:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
/* FAQ */
.pc-faq{border:1px solid var(--line);border-radius:var(--radius-md,10px);overflow:hidden;background:var(--surface)}
.pc-faq + .pc-faq{margin-top:8px}
.pc-faq summary{
cursor:pointer;padding:10px 12px;font-size:13px;font-weight:500;color:var(--ink);
list-style:none;display:flex;align-items:center;gap:8px;
}
.pc-faq summary::-webkit-details-marker{display:none}
.pc-faq summary::before{
content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-ink);flex:0 0 auto;
}
.pc-faq summary:hover{background:var(--surface-2)}
.pc-faq .pc-ans{
padding:0 12px 12px 25px;font-size:12.5px;line-height:1.75;color:var(--ink-2);
}
/* 来源清单 */
.pc-sources{
margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong);
}
.pc-sources h4{margin:0 0 8px}
.pc-src-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pc-src{
display:flex;gap:8px;align-items:flex-start;
font-size:11.5px;line-height:1.6;color:var(--ink-2);
padding:7px 9px;border-radius:8px;background:var(--surface-2);
scroll-margin-top:80px;
}
.pc-src.pc-flash{background:var(--brand-soft);outline:2px solid var(--brand-line,rgba(46,143,210,.3))}
.pc-src .pc-src-no{
flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:600;
color:var(--brand-ink);min-width:22px;
}
.pc-src .pc-src-body{flex:1 1 auto;min-width:0}
.pc-src .pc-src-title{color:var(--ink)}
.pc-src .pc-src-meta{
display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;
font-family:var(--mono);font-size:10px;color:var(--muted);
}
.pc-src a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.pc-src .pc-src-type{
font-size:9.5px;padding:0 5px;border-radius:4px;
background:var(--surface-3,#E7EDF4);color:var(--ink-2);
}
/* 未发布 / 无内容 提示 */
.pc-empty{
font-size:12.5px;line-height:1.7;color:var(--muted);
padding:12px 14px;border-radius:var(--radius-md,10px);
background:var(--surface-2);border:1px dashed var(--line-strong);
}
.pc-loading{font-size:12.5px;color:var(--muted);padding:10px 0}
/* 移动端 */
@media (max-width:720px){
.pc-overview{font-size:13px;padding:10px 12px}
.pc-item{font-size:12.5px;padding:8px 10px}
.pc-faq summary{font-size:12.5px;padding:9px 10px}
.pc-faq .pc-ans{padding:0 10px 10px 23px;font-size:12px}
.pc-src{font-size:11px;padding:6px 8px}
.pc-src .pc-src-meta{font-size:9.5px}
}
/* 后台编辑/审核面板 */
.pc-admin{border:1px solid var(--line);border-radius:var(--radius-md,10px);background:var(--surface);padding:14px}
.pc-admin-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;margin-bottom:12px}
.pc-admin-kv dt{color:var(--muted);white-space:nowrap}
.pc-admin-kv dd{margin:0;color:var(--ink)}
.pc-gate{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.pc-gate .pc-blk{
display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.6;
padding:8px 10px;border-radius:8px;
background:#FDF3EF;border:1px solid rgba(185,80,43,.24);color:#8E3D1F;
}
.pc-gate .pc-wn{
display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.6;
padding:7px 10px;border-radius:8px;
background:#FBF4E3;border:1px solid rgba(138,109,31,.22);color:#6E5310;
}
.pc-gate code{font-family:var(--mono);font-size:10.5px;opacity:.85}
.pc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pc-status{
display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;
padding:2px 8px;border-radius:999px;border:1px solid transparent;
}
.pc-status.draft{background:#F1F5F9;color:#475569;border-color:#CBD5E1}
.pc-status.review{background:#FBF4E3;color:#8A6D1F;border-color:rgba(138,109,31,.25)}
.pc-status.published{background:#E8F5EE;color:#1F7A4D;border-color:rgba(31,122,77,.25)}
.pc-status.archived{background:#F4F4F5;color:#71717A;border-color:#D4D4D8}
/* ── 成分解析（用户要求「多解释一下成分功效」）──
用 details/summary 折叠：默认展开前两条，其余点开。
这样一屏内既能看见成分清单，又不会把页面拉得过长。 */
.pc-ing-list{display:flex;flex-direction:column;gap:6px}
.pc-ing{
border:1px solid var(--line);
border-radius:var(--radius-md,10px);
background:var(--surface);
overflow:hidden;
}
.pc-ing[open]{border-color:var(--p-line-2,#CBD5E1);box-shadow:var(--p-el-1,0 1px 3px rgba(15,23,42,.06))}
.pc-ing summary{
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
padding:9px 12px;cursor:pointer;list-style:none;
}
.pc-ing summary::-webkit-details-marker{display:none}
.pc-ing summary::before{
content:"▸";flex:0 0 auto;font-size:9px;color:var(--muted);
transition:transform .16s var(--p-ease-out,ease);transform-origin:center;
}
.pc-ing[open] summary::before{transform:rotate(90deg)}
.pc-ing summary:hover{background:var(--surface-2)}
.pc-ing-name{
font-size:12.5px;font-weight:600;color:var(--ink);
/* ⚠ 不能用 flex:0 0 auto：超长成分名（如「多肽类（乙酰基六肽-8 / 棕榈酰三肽-5 …）」）
会撑出容器。实测 390px 下溢出 11px。改为允许收缩并换行。 */
flex:0 1 auto;
min-width:0;
word-break:break-word;
}
.pc-ing-role{
font-size:11.5px;color:var(--muted);line-height:1.5;
flex:1 1 auto;min-width:0;
word-break:break-word;
}
.pc-ing-detail{
padding:0 12px 11px 27px;
font-size:12.5px;line-height:1.75;color:var(--ink-2);
}
@media (max-width:720px){
.pc-ing summary{padding:8px 10px;gap:6px}
.pc-ing-name{font-size:12px}
.pc-ing-role{font-size:11px}
.pc-ing-detail{padding:0 10px 10px 22px;font-size:12px}
}
/* ── 顶栏在窄屏的横向溢出修复（pc-topbar-fit）──
实测：390px 视口下文档 scrollWidth=644、.top-actions 宽 455px。
根因不是某一项，而是 .topbar-inner 是 grid `auto 1fr auto`：
第三列的 auto 会按 .top-actions 的 max-content 撑开，grid 子项默认
min-width:auto 又不允许收缩，于是整行被顶出视口。
修法：grid 子项允许收缩（min-width:0）+ 操作区允许换行 + 窄屏收紧间距。
只改布局容器的伸缩行为，不动任何组件内部样式。 */
.topbar-inner{min-width:0}
.topbar-inner > *{min-width:0}
.top-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){
.topbar-inner{padding:10px 14px;gap:10px}
.top-actions{gap:6px}
.account-menu{min-width:0}
/* 长邮箱是主要撑宽源：窄屏截断到 30vw */
.account-menu .who #whoName{max-width:30vw}
/* 下拉菜单从 account-menu 左缘向左展开，避免再顶出右侧 */
.account-menu .menu{max-width:min(236px, 86vw)}
}
/* ── 品牌动效 · ThreeUI chromatic wordmark（适配自 MengTo/threeui, MIT）──
移植说明见 index.html 里的 qmWm* 模块注释。
这里只做两件事：① 给逐字 span 一个可被 transform 的盒子
② prefers-reduced-motion 下禁掉过渡，避免用户关了动效还看到残影。
⚠ 关键： 默认 display:inline，而 CSS transform 对 inline 元素**无效**。
不设 inline-block 的话，逐字位移/缩放会静默失效（动画看起来"没生效"）。 */
.brand-name .qm-wm-ch{
display:inline-block;
vertical-align:baseline;
will-change:transform,opacity,filter;
transform-origin:50% 55%;
}
/* 品牌 logo 作为 wordmark 主体，动效期间不改布局，只改合成层 */
.topbar .brand-logo{
will-change:transform,opacity,filter;
transform-origin:50% 55%;
/* 动效期间会产生色散副本，留出一点余量避免被裁 */
backface-visibility:hidden;
}
/* 品牌区可点重播：给一个不显眼的手势提示 */
.topbar .brand-mark{cursor:default}
@media (prefers-reduced-motion: reduce){
/* JS 侧已经直接落到终态；这里兜底，防止任何过渡残留 */
.brand-name .qm-wm-ch,
.topbar .brand-logo{
transition:none !important;
animation:none !important;
}
}
/* ── 窄屏品牌区修复（qm-brand-mobile）──
背景：上一轮为修顶栏横向溢出加了 `.topbar-inner > *{min-width:0}`，
它让 grid 第一列可以被压到 0。实测 390px 下 grid 列变成 `0px 352px`，
品牌名宽度塌到 15px → 逐字折行 8 行 → .brand-mark 高 186px、顶栏 217px。
在页面里对 6 种候选方案做过实测对比（topbarH / markH / 是否溢出）：
A 恢复 min-width:auto → 217 / 186 / 溢出回来了 ✗
B 只加 nowrap → 217 / 186 / 副标题仍折行 ✗
C nowrap + min-width:auto → 217 / 186 / 溢出回来了 ✗
D 单列堆叠 + nowrap → 137 / 30 / 无溢出 ✓ 采用
E D + 隐藏副标题 → 137 / 30 / 无溢出（但丢了信息）
F 品牌列 min-content → 217 / 186 / 溢出回来了 ✗
所以采用 D：窄屏下品牌与操作区各占一行，互不挤压。 */
@media (max-width:900px){
.brand-mark{flex-wrap:nowrap}
.brand-name,.brand-sub{white-space:nowrap}
/* 品牌名逐字拆成了多个 inline-block span，允许在字间断行会很难看；
窄屏一律不换行，超长时由 .brand-sub 让位 */
.brand-sub{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:760px){
.topbar-inner{grid-template-columns:minmax(0,1fr)}
.top-actions{justify-content:flex-start}
}
/* ── 全屏品牌 intro（登录后播一次）──
形态对齐 ThreeUI 的 threeui-intro 参考：**黑底 + 大字 wordmark**。
上一版只放在 30px 顶栏里，尺寸与背景都不对，所以显得弱——这里把尺度还原。
动效数学仍复用 qmWm* 那套（源 makeWordmark() 的曲线与色散公式），
只是幅度按字号比例放大（源是 130px 字号的全屏 wordmark）。
prefers-reduced-motion 下整块不出现，直接进入工作台。 */
.qm-intro{
position:fixed;inset:0;z-index:9000;
background:#000;
display:grid;place-items:center;
opacity:1;
/* 动效期间不要被下面的内容影响合成 */
contain:layout style paint;
}
.qm-intro-stage{
display:flex;align-items:center;justify-content:center;
gap:clamp(14px,2.4vw,30px);
transform-origin:50% 50%;
max-width:92vw;
}
/* 原 .qm-intro-logo 规则已删除：过场不再显示「奇点」标（蓝底在黑背景上不协调） */
.qm-intro-text{
display:flex;align-items:baseline;
color:#f5f5f7;
font-weight:600;letter-spacing:-.012em;line-height:1;
font-size:clamp(22px,4.6vh,64px);
white-space:nowrap;
}
.qm-intro-ch{
display:inline-block; /* 必须：inline 元素吃不到 transform */
will-change:transform,opacity,filter;
transform-origin:50% 55%;
}
/* 窄屏：字号收窄（原注释提到的「上下堆叠」是为 logo + 文字两行准备，现已只剩文字） */
@media (max-width:640px){
.qm-intro-stage{flex-direction:column;gap:clamp(12px,2.6vh,22px)}
.qm-intro-text{font-size:clamp(19px,4vh,34px)}
}
@media (prefers-reduced-motion: reduce){
/* JS 侧本就不创建这块；这里兜底 */
.qm-intro{display:none !important}
}
/* intro 期间锁滚动，避免遮罩下面是可滚动的长页面 */
html.qm-intro-on,
html.qm-intro-on body{overflow:hidden !important}
/* ══════════════════════════════════════════════════════════════════════════
登录门配色钉死（修：退出登录后把应用内主题带到登录页）
──────────────────────────────────────────────────────────────────────────
问题：主题写的是 `body[data-theme="…"]{ --surface:…; --ink:… }`，
而登录门 `.site-gate` 就在 body 里。门内元素用 `var(--surface)` 取色
（如 `.sg-card{ background:var(--surface) }`），于是「应用内切了夜间主题
→ 退出登录 → 登录页卡片变成深蓝」。
为什么 gate.css 自己的 :root 没兜住：自定义属性按**最近的祖先**取值，
`body`（主题定义处）比 `html`（gate.css 的 :root）更近，所以主题值赢。
修法：把 gate.css 那套日间值原样钉在 `.site-gate` 上——它比 body 更近，
因此主题无论怎么变都渗不进登录门。主题变量名与取值均取自 gate.css 的 :root。
══════════════════════════════════════════════════════════════════════════ */
.site-gate{
/* color / background 必须单独钉：这两个属性是在 body 上算完再**继承**下来的，
只钉自定义属性管不到已继承的计算值 —— 实测只钉变量时卡片背景已变白，
但文字仍是夜潜主题的浅色（rgb(234,242,251)）。 */
color:#10192B;
background:linear-gradient(180deg,#E7EEF6 0%,#F2F6FB 40%,#EEF3F9 100%);
--bg:#F7FAFD;
--surface:#FFFFFF;
--surface-2:#EFF4FA;
--ink:#10192B;
--ink-2:#3A4457;
--muted:#76839B;
--line:#E4EAF1;
--line-strong:#C4D2E2;
--accent:#B9502B;
--shadow-1:0 1px 2px rgba(15,20,25,.05),0 4px 12px rgba(15,20,25,.03);
--shadow-2:0 6px 24px rgba(23,23,23,.08),0 2px 6px rgba(23,23,23,.04);
--shadow-3:0 18px 44px -24px rgba(23,23,23,.22);
}
/* ══════════════════════════════════════════════════════════════════════════
v7.1 产品卡片改版（按用户给的参考样式）
──────────────────────────────────────────────────────────────────────────
新 DOM 用 .pc-* 命名，旧的 .card-thumb / .card-main / .wb-acts 不再出现，
所以 redesign.css 与 7 套主题里针对这些类的规则自然失效，无需逐条覆盖。
只保留 ，因为 JS 用它做逐张就地更新（.wb-picked）。
══════════════════════════════════════════════════════════════════════════ */
/* 网格：自动列数，窄屏自动降到 1 列（所以不需要再写断点） */
.grid--wb{ grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:18px }
.grid--wb.dense{ grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:18px }
/* ── 卡片外壳 ── */
.grid--wb > .card--v{
display:flex; flex-direction:column; gap:0;
padding:0; height:100%;
overflow:hidden;
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 1px 2px rgba(16,25,43,.05);
cursor:pointer;
transition:box-shadow .18s, border-color .18s;
}
.grid--wb > .card--v:hover{
border-color:var(--line-strong);
box-shadow:0 12px 28px -16px rgba(16,25,43,.34);
}
.grid--wb > .card--v.wb-picked{
border-color:var(--brand);
box-shadow:0 0 0 1px var(--brand);
}
/* ── 图位：大图居中、等比完整显示 ── */
.grid--wb .pc-media{
position:relative; width:100%;
aspect-ratio:1 / .96;
overflow:hidden;
background:var(--surface-2, #EFF4FA);
border-bottom:1px solid var(--line);
}
/* ⚠ 图片不能用 height:100% 填满父盒。
父盒高度来自 aspect-ratio，对百分比高度而言属于「高度不确定」，
height:100% 会退化成 auto → 图片按自身比例撑开（600×600 变成 268×268），
超出 257 高的盒子后被 overflow:hidden 从底部裁掉。
实测：12 张卡里 11 张在裁，正方形图裁 11px，502×600 的竖图裁 58px。
改成绝对定位 + calc：图片盒子取得确定尺寸，object-fit:contain 才能真正生效。 */
.grid--wb .pc-media img{
position:absolute; left:12px; top:12px;
width:calc(100% - 24px); height:calc(100% - 24px);
object-fit:contain; display:block;
}
.grid--wb .pc-media .pc-ph{
position:absolute; inset:0;
display:grid; place-items:center;
font-size:34px; font-weight:700; color:var(--muted); opacity:.45;
}
.grid--wb .pc-media img + .pc-ph{ display:none } /* 有图时不显示占位字 */
/* ── 文本区 ── */
.grid--wb .pc-body{
display:flex; flex-direction:column; gap:7px;
padding:12px 14px 0;
}
.grid--wb .pc-top{
display:flex; align-items:center; gap:8px; min-width:0;
}
.grid--wb .pc-type{
flex:0 0 auto;
padding:3px 8px; border-radius:6px;
background:var(--brand-soft); color:var(--brand);
font-size:11px; font-weight:600; letter-spacing:.01em;
white-space:nowrap;
}
.grid--wb .pc-brand{
margin-left:auto; min-width:0;
font-size:11.5px; color:var(--muted);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grid--wb .pc-name{
font-size:14px; font-weight:600; line-height:1.4; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; min-height:2.8em;
}
.grid--wb .pc-meta{
font-size:11.5px; color:var(--muted);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grid--wb .pc-tags{
display:flex; flex-wrap:wrap; gap:5px; min-height:23px;
padding-bottom:2px;
}
.grid--wb .pc-tags .tag{
font-size:11px; padding:2px 7px; border-radius:6px;
/* 单行截断：reg_effects 里真实存在整句描述（如"通过在创面表面形成保护层"），
允许换行会把那一张卡撑高、整行错位。全文放 title。 */
display:inline-block; max-width:10.5em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
vertical-align:top;
}
/* ── 两个按钮：等宽并排 ── */
.grid--wb .pc-acts{
display:grid; grid-template-columns:1fr 1fr; gap:8px;
padding:11px 14px 14px;
margin-top:auto;
}
.grid--wb .pc-btn{
height:34px; border-radius:9px;
border:1px solid var(--line-strong);
background:var(--surface); color:var(--ink);
font:600 12.5px/1 inherit; cursor:pointer;
transition:background .16s, border-color .16s, color .16s;
}
.grid--wb .pc-btn:hover{ border-color:var(--brand); color:var(--brand) }
.grid--wb .pc-btn--pri{
background:var(--ink); border-color:var(--ink); color:var(--surface, #fff);
}
.grid--wb .pc-btn--pri:hover{ color:var(--surface, #fff); opacity:.88 }
/* 深色主题下 --ink 是浅色，按钮自动反相，仍然可读 */
body[data-theme="abyss"] .grid--wb .pc-btn--pri,
body[data-theme="sakura"] .grid--wb .pc-btn--pri,
body[data-theme="cosmic"] .grid--wb .pc-btn--pri{ color:var(--bg) }
@media (max-width:760px){
.grid--wb .pc-name{ font-size:13.5px }
.grid--wb .pc-acts{ padding:10px 12px 12px }
}
/* ══════════════════════════════════════════════════════════════════════════
登录门水波背景（ThreeUI Community · src/shaders/elements · MIT）
──────────────────────────────────────────────────────────────────────────
组件本体是同源的 gate-water.html（纯 WebGL2，无外部依赖），用 iframe 铺满门内。
上游 React 版把它当普通背景用；这里只保留 water 变体，并把标记换成「奇点」两个字。
注意：**不要再给 .site-gate 加背景色以外的东西**，否则会盖住 iframe。
══════════════════════════════════════════════════════════════════════════ */
.site-gate{
background:#060708; /* iframe 首帧前的底色，与组件内一致，避免白闪 */
}
.site-gate .sg-water{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
border:0; display:block;
pointer-events:none; /* 背景不吃鼠标 */
opacity:.86;
}
/* 旧的浅色 bokeh 与新背景冲突，隐藏（其 rAF 循环也会在门显示时被停掉） */
.site-gate .sg-bokeh{ display:none !important; }
/* 卡片整体下移：给上方的「奇点」水波留出空间，避免被卡片拦腰切断 */
/* 标记已移到左侧，卡片回到垂直居中 */
.site-gate .sg-stage{ padding-top:0; }
/* 内容层压在水面之上 */
.site-gate .sg-bar-wrap,
.site-gate .sg-env-note,
.site-gate .sg-stage{ position:relative; z-index:1; }
/* 窄屏/低性能设备：小屏时降低一点不透明度，减轻视觉与合成压力 */
@media (max-width:640px){
.site-gate .sg-water{ opacity:.85 }
}
/* ══════════════════════════════════════════════════════════════════════════
登录门：深色玻璃体系（配合水波背景）
──────────────────────────────────────────────────────────────────────────
原来门里是「素白单色」：纯白卡片 + 白色顶栏 + 近黑按钮，放在冷调青蓝的水面上
是四种互不相干的颜色，白块像贴上去的。这里换思路：
gate.css 内部全部靠 --mono-* / --surface / --ink 这一套令牌取色，
所以**重新钉一套冷调深色令牌**就能整体统一，再补 4 条组件级规则做玻璃质感。
令牌仍固定（不随应用主题变化），保持「登录页配色固定」这个既定要求。
══════════════════════════════════════════════════════════════════════════ */
.site-gate{
/* 冷调深色令牌：与水面的青蓝同色系，而不是暖灰 */
--surface:#0B141B;
--surface-2:#0E1A22;
--bg:#060708;
--ink:#EDF5FA;
--ink-2:#AFC4D2;
--muted:#7C93A4;
--line:rgba(150,195,225,.16);
--line-strong:rgba(150,195,225,.28);
--mono-050:#0F1A23;
--mono-100:#121F29;
--mono-200:#16242F;
--mono-400:#5A7286;
--mono-600:#93A9B8;
--mono-800:#C6D8E4;
--mono-900:#EDF5FA;
--mono-ink:rgba(150,195,225,.16);
--mono-ink-2:rgba(150,195,225,.28);
--accent:#4FB3E8;
--shadow-1:0 1px 2px rgba(0,0,0,.5);
--shadow-2:0 30px 80px -40px rgba(0,0,0,.95);
--shadow-3:0 40px 100px -50px rgba(0,0,0,1);
}
/* ── 卡片：深色玻璃 ── */
.site-gate .sg-card{
background:linear-gradient(168deg, rgba(16,30,40,.72), rgba(8,16,22,.62)) !important;
border:1px solid rgba(150,200,230,.20) !important;
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
box-shadow:
0 34px 90px -44px rgba(0,0,0,.95),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.site-gate .sg-panel-head h1{ color:#F2F8FC !important; }
.site-gate .sg-panel-head p{ color:rgba(206,224,236,.72) !important; }
.site-gate .sg-field label{ color:rgba(206,224,236,.78) !important; }
/* ── 输入框：暗底 + 青色聚焦 ── */
.site-gate .sg-input{
background:rgba(255,255,255,.05) !important;
border-color:rgba(150,200,230,.28) !important;
color:#EAF4FA !important;
}
.site-gate .sg-input::placeholder{ color:rgba(196,218,232,.40) !important; }
.site-gate .sg-input:hover{ border-color:rgba(150,200,230,.34) !important; }
.site-gate .sg-input:focus{
border-color:#4FB3E8 !important;
box-shadow:0 0 0 3px rgba(79,179,232,.18) !important;
background:rgba(255,255,255,.07) !important;
}
.site-gate .sg-reveal{ color:rgba(196,218,232,.55) !important; }
/* ── 主按钮：与水面同色系的青蓝渐变（原来近黑，和背景脱节） ── */
.site-gate .sg-btn{
background:linear-gradient(180deg,#4FB3E8 0%,#2079AE 100%) !important;
border-color:transparent !important;
color:#fff !important;
box-shadow:0 14px 30px -14px rgba(79,179,232,.55), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.site-gate .sg-btn:hover:not(:disabled){
filter:brightness(1.08);
box-shadow:0 18px 36px -14px rgba(79,179,232,.65), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
/* ── 次要文字与链接 ── */
.site-gate .sg-form-foot,
.site-gate .sg-link{ color:rgba(196,218,232,.62) !important; }
.site-gate .sg-link{ border-bottom-color:rgba(196,218,232,.22) !important; }
.site-gate .sg-link:hover{ color:#CFE8F7 !important; border-bottom-color:rgba(207,232,247,.5) !important; }
/* ── 顶栏：同一套深色玻璃，浅色文字 ── */
.site-gate .sg-bar{
background:linear-gradient(rgba(14,26,34,.72),rgba(8,16,22,.58)) !important;
border:1px solid rgba(150,200,230,.18) !important;
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 18px 44px -30px rgba(0,0,0,.9) !important;
}
.site-gate .sg-brand b{ color:#F2F8FC !important; }
.site-gate .sg-brand span{ color:rgba(196,218,232,.5) !important; }
.site-gate .sg-nav button{ color:rgba(196,218,232,.66) !important; }
.site-gate .sg-nav button:hover{ color:#EAF4FA !important; background:rgba(255,255,255,.06) !important; }
.site-gate .sg-nav button[aria-selected="true"]{
background:linear-gradient(180deg,#4FB3E8 0%,#2079AE 100%) !important;
color:#fff !important;
box-shadow:0 10px 24px -12px rgba(79,179,232,.6) !important;
}
/* 顶栏右侧那个「云端多人协同」小徽标原本是浅绿底，暗色下改成低透绿 */
.site-gate .sg-env-pill,
.site-gate .sg-bar .sg-pill{ background:rgba(58,165,100,.16) !important; color:#7FE0A6 !important; border-color:rgba(58,165,100,.30) !important; }
/* ── 其它面板（产品/使用指引）的浅色块 ── */
.site-gate .sg-cards article{
background:rgba(255,255,255,.04) !important;
border-color:rgba(150,200,230,.16) !important;
}
.site-gate .sg-cards h3{ color:#E6F2FA !important; }
.site-gate .sg-cards p{ color:rgba(196,218,232,.62) !important; }
.site-gate .sg-stats b{ color:#F2F8FC !important; }
.site-gate .sg-stats span{ color:rgba(196,218,232,.6) !important; }
.site-gate .sg-stats > div{ border-color:rgba(150,200,230,.14) !important; }
/* ══ 布局：桌面端改成「左品牌 / 右卡片」分栏 ══
原来卡片居中、巨大的「奇点」在左侧，两者互相挤、重心偏左。
这里让卡片靠右，把左半屏整个留给水波标记。 */
@media (min-width:1000px){
.site-gate .sg-stage{
justify-content:flex-end;
padding-right:clamp(40px, 7vw, 132px);
padding-left:clamp(40px, 5vw, 96px);
}
}
/* 窄屏：卡片恢复居中，标记自动缩到卡片上方 */
@media (max-width:999px){
.site-gate .sg-stage{ justify-content:center; padding-left:20px; padding-right:20px; }
}
/* ══════════════════════════════════════════════════════════════════════════
登录门 v3.2：左下品牌区 + 顶栏拉宽（2026-10-17）
──────────────────────────────────────────────────────────────────────────
针对截图暴露的三个问题，全部保留水波动画（gate-water.html 一行未动）：
① 左半屏只有「奇点」发光字，下方到大片区域是空白
→ 加 .sg-hero 品牌区，锚定在标记正下方（标记中心约在左 30% / 垂直 45%，
见 gate-water.html 的 shift:[-0.30, 0.02]），内容与发光字同色系。
② 顶栏药丸 max-width:1120px，在宽屏上是悬浮孤岛 → 拉宽到 1560。
③ 宽面板（产品/使用指引）需要全宽 → JS 切面板时给 stage 加 .sg-nohero。
══════════════════════════════════════════════════════════════════════════ */
/* ② 顶栏拉宽：1560 以内随屏走，不再像漂在天上的药丸 */
.site-gate .sg-bar-wrap{ padding-left:28px; padding-right:28px; }
.site-gate .sg-bar{ max-width:1560px; }
/* ① 左下品牌区：默认不渲染，桌面端才出场 */
.site-gate .sg-hero{ display:none; }
@media (min-width:1000px){
.site-gate .sg-hero{
display:block;
align-self:flex-end; /* 锚在主体区底部 = 标记正下方 */
margin-right:auto; /* 卡片继续靠右，两者各占一端 */
margin-bottom:clamp(4px, 3vh, 36px);
max-width:min(42vw, 520px);
min-width:0;
user-select:none;
}
.site-gate .sg-stage.sg-nohero .sg-hero{ display:none; }
}
.site-gate .sg-hero-kicker{
display:inline-flex; align-items:center; gap:8px;
margin:0 0 14px; padding:6px 14px;
border-radius:var(--radius-pill);
font-size:12px; letter-spacing:.08em; color:#9ED8F5;
background:rgba(79,179,232,.10); border:1px solid rgba(79,179,232,.28);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.site-gate .sg-hero-kicker i{
width:6px; height:6px; border-radius:50%;
background:#6CD3FF; box-shadow:0 0 10px #6CD3FF;
}
.site-gate .sg-hero-title{
margin:0 0 4px;
font-size:clamp(26px, 2.6vw, 40px); font-weight:700; line-height:1.38;
letter-spacing:.01em;
color:#EAF6FD; text-shadow:0 2px 28px rgba(108,211,255,.28);
}
.site-gate .sg-hero-title em{ font-style:normal; color:#6CD3FF; }
.site-gate .sg-hero-feats{
list-style:none; margin:20px 0 0; padding:0;
display:flex; gap:10px; flex-wrap:wrap;
}
.site-gate .sg-hero-feats li{
display:flex; align-items:center; gap:10px;
padding:10px 14px; border-radius:12px;
background:rgba(10,22,30,.42); border:1px solid rgba(150,200,230,.16);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.site-gate .sg-hero-feats b{ font-size:16px; line-height:1; }
.site-gate .sg-hero-feats strong{ display:block; font-size:12.5px; font-weight:600; color:#E6F2FA; }
.site-gate .sg-hero-feats span{ display:block; margin-top:2px; font-size:11px; color:rgba(196,218,232,.60); }
/* ══════════════════════════════════════════════════════════════════════════
启动遮罩（2026-10-17）：鉴权结果没回来之前不显示工作台
──────────────────────────────────────────────────────────────────────────
现象：冷启动时先看到完整工作台（711 张卡、筛选面板），隔 0.5–1.5 秒才被登录门盖上；
/api/auth/me 卡住时会一直露着（实测到过 4.5 秒、>15 秒）。
根因：主脚本末尾是 render() 先画、initSiteGate() 后问鉴权；门要等 401 回来才加 .on，
这期间没有任何样式遮挡内容（body.site-locked 只加了 overflow:hidden）。
修法：body 起手带 site-boot，用这层固定遮罩盖住；lockSite()/unlockSite() 在同一帧
撤掉 site-boot。遮罩颜色取登录门底色 #060708，所以「撤遮罩 → 见面」是无缝的。
注意：z-index 必须低于 .site-gate（9999），高于顶栏（40）/弹窗（80）/飘雪（9990）。
══════════════════════════════════════════════════════════════════════════ */
body.site-boot{ overflow:hidden }
.boot-cover{
position:fixed; inset:0; z-index:9998;
display:none; align-items:center; justify-content:center;
background:#060708;
}
body.site-boot .boot-cover{ display:flex }
.boot-cover-inner{
display:flex; align-items:center; gap:9px;
font-size:12.5px; letter-spacing:.02em;
color:rgba(196,218,232,.55);
}
.boot-spin{
width:13px; height:13px; border-radius:50%;
border:2px solid rgba(150,200,230,.20);
border-top-color:#4FB3E8;
animation:bootSpin .7s linear infinite;
}
@keyframes bootSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
.boot-spin{ animation:none; border-top-color:rgba(150,200,230,.5) }
}