/* font-scale-v1 —— 全站字号放大一档(Owner 2026-09-03「整体字体偏小」)。
这一行是防重跑的哨兵,scripts/scale_fonts.py 见到它就拒绝执行:
缩放规则没有不动点,跑第二遍会在放大后的基础上再放大一档。 */
/* ═══════════════════════════════════════════════════════════════
eDragon V2 重构设计系统(2026-07-22 起)
真值源:design_handoff_edragon_redesign/(README + 原型 dc.html)
暖白纸感底 + 品牌蓝(oklch 262°)+ 珊瑚强调(35°)· 亮色专业工具风
═══════════════════════════════════════════════════════════════ */
:root {
/* ═══ 配色基线:H3Test 设计系统(2026-08-18 Owner 定,依据 docs/H3Test-设计系统参考-20260811.md)═══
换掉的是**暖米色底 + 七个彩色族**。为什么那套显得粗糙,不是哪个颜色难看:
1. 底色是暖米 #F7F6F2,而正文字是冷灰、主色是蓝 —— 暖底配冷字,
整页有一层说不清的脏。H3 的做法是**底和字同一个色温**(都偏冷蓝紫),
于是灰阶自己就"干净"了。
2. 蓝/珊瑚/绿/青/紫/金同时是高饱和,每个组件各挑一个,所以散。
H3 只有两个彩色(紫 + 青绿),其余语义色全是**低饱和柔和版**,
状态色不抢主色的戏。
3. 阴影原来是 10%~13%,压得很重。H3 只有两级、4%~7%,几乎看不见,
只负责把层次托起来。
⚠️ 六个色族保留(导航分类 chip 要六个互不混淆的色相),但整体挪进
H3 的柔和区间 —— 保留可区分度,去掉互相竞争。 */
/* 面:冷中性 */
--ed-bg: #F8F9FC;
--ed-card: #FFFFFF;
--ed-s1: #F3F5F9; /* 输入底 */
--ed-s2: #F3F5F9; /* 胶囊底 */
--ed-s3: #EEF1F7; /* hover 面 */
--ed-s4: #E9EDF4; /* 中性 chip / 关闭钮 */
--ed-border: #E6E9F0;
--ed-border-lt: #EEF0F6;
--ed-dash: #D5DAE5;
/* 字:与底同色温 */
--ed-text: #2B3245;
--ed-t2: #4A5266;
/* ⚠️ 比 H3Test 原值(#6E7891)深一档。原值压在 #F8F9FC 上是 4.19,
差 0.31 到 AA 的 4.5 线 —— H3 是内部测试台,我们是对外产品,
这 0.31 不能省。次级说明文字全站都用这一档,量很大。 */
--ed-t3: #626B81;
--ed-w1: #8A92A8;
--ed-w2: #A2AABF;
--ed-w3: #98A0B6;
/* 主色:紫。⚠️ token 名还叫 brand,值从蓝换成紫 —— 改名要动全站几百处
引用,收益为零风险不小。*/
--ed-brand: #8B7CF0;
--ed-brand-deep: #6350DA;
/* 专供「白字压在紫色块上」的更深档(2026-08-24 收敛副色时加)。
渐变去掉青绿之后两端都得是紫,而 --ed-brand 白字只有 3.37:1 ——
不到 AA 的 4.5。这一档 #5443C4 是 7.05:1,与 --ed-brand-deep(5.69:1)
组成的渐变**全程达标**。
⚠️ 别把渐变起点换回 --ed-brand 图好看:那个汉字会糊,
而且这是本仓库第三次栽在"渐变某一端不够暗"上。 */
--ed-brand-darker: #5443C4;
--ed-brand-line: #CFC8F8;
--ed-brand-bg: #F5F3FE;
--ed-brand-bg2: #EDE9FD;
--ed-brand-soft: #E8E4FD;
/* 副色:青绿(主按钮渐变的另一端) */
--ed-teal: #5FD3C4;
--ed-teal-text: #20776F;
--ed-teal-bg: #DFF7F2;
/* 专供"白字压在色块上"的深青。--ed-teal-text 白字只有约 3.5:1,不到 4.5 线。 */
--ed-teal-deep: #23807A;
/* ⚠️ 下面几族的 *-text 一律比 H3 原值**深两档**。实测:H3 的柔和文字色
压在**它自己的柔和底**上只有 3.0~4.0(teal 3.05 / danger 3.44 /
green 3.61),压在页面底上更低 —— 全线不到 AA 的 4.5。
H3Test 是内部测试台,看不清顶多眯眼;我们是对外产品,不能这么发。
保留它的**色相**和**柔和填充**(观感就靠这两样),只把文字压深。
下一个人别"照 H3 原样改回去" —— 那会把可读性一起改没。
核算脚本见本次提交说明,两种底(页面底 + 自己的 chip 底)都要 ≥4.5。
原注释保留如下:H3 的柔和色(如 danger #FF9EAE)
直接当文字色时对白底只有 2.1:1,远不到 4.5 的可读线 —— 那是给填充用的,
不是给文字用的。所以填充取 H3 原值、文字另取同色相的深版。
这不是偏离 H3,是把它的"填充色"和"文字色"分开用。 */
/* 成功绿 */
--ed-green: #7BD8A8;
--ed-green-text: #26794F;
--ed-green-bg: #E6F7EE;
--ed-green-line: #A9E3C4;
/* 警告 / 积分金 / 企业版 */
--ed-gold: #FFCF87;
--ed-ent-bg: #FFF3DF;
--ed-ent-text: #8A6118;
/* 危险 / 珊瑚 */
--ed-coral: #FF9EAE;
--ed-coral-text: #BC4459;
--ed-coral-bg: #FFEDF0;
--ed-danger: #BC3C55;
--ed-danger-bg: #FFEDF0;
/* 信息蓝 —— 原来叫 purple,但主色已经是紫了,两个紫并排等于少一个色相。
换成 H3 的 info 蓝,名字也跟着改成 info(全站只有 1 处引用,改得起)。 */
--ed-info: #8FCDF5;
--ed-info-text: #26709F;
--ed-info-bg: #E5F3FD;
/* 阴影:H3 只有两级,4%~7% */
--ed-shadow-card: 0 1px 2px rgba(43,50,69,.05);
--ed-shadow-pop: 0 8px 28px rgba(43,50,69,.08);
--ed-shadow-hero: 0 8px 28px rgba(43,50,69,.07);
}
html, body {
margin: 0; padding: 0;
background: var(--ed-bg); color: var(--ed-text);
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--ed-brand); text-decoration: none; }
a:hover { color: var(--ed-brand-deep); }
input, textarea, button, select { font-family: inherit; }
::placeholder { color: var(--ed-w2); }
@keyframes edDotBlink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
@keyframes edRiseIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ed-rise { animation: edRiseIn .22s ease; }
/* ───────── Toast ───────── */
#ed-toast {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
background: #26251F; color: #fff; font-size: 14.5px; padding: 11px 18px;
border-radius: 12px; z-index: 120; box-shadow: 0 10px 30px rgba(0,0,0,.25);
animation: edRiseIn .2s ease; max-width: 86vw; pointer-events: none;
}
/* ───────── 顶部导航(桌面) ───────── */
.ed-nav {
position: sticky; top: 0; z-index: 60;
background: color-mix(in srgb, var(--ed-card) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ed-border);
}
.ed-nav-in {
max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 60px;
display: flex; align-items: center; gap: 2px;
}
.ed-logo { display: flex; align-items: center; gap: 9px; border: none; background: transparent; cursor: pointer; padding: 0; margin-right: 18px; }
.ed-logo-mark {
width: 30px; height: 30px; border-radius: 9px; background: var(--ed-brand); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16.5px;
overflow: hidden;
}
.ed-logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 品牌 logo(2026-08-07 换成 Cylon 云朵图)。
不复用 .ed-logo-mark —— 那个是给旧吉祥物用的:带品牌底色 + 9px 圆角 +
object-fit:cover。套在这张透明图上会多出一块蓝底,还会把左右裁掉。 */
/* ⚠️ 尺寸要写死,不能 `width:auto`(2026-09-15)。
auto 意味着宽度由图片本身决定 —— 图还没到(或根本没到)时宽度是 **0**,
于是 LOGO 连同外面那个 `` 的可点区域一起消失,
用户看到的就是「没有 LOGO、也点不回首页」。
原图 333×285,按 height:34 算宽约 40;object-fit:contain 保证
将来换比例的图也不会被拉变形。 */
.ed-logo-img { height: 34px; width: 40px; object-fit: contain; display: block; flex: none; }
/* 图彻底加载失败时的文字兜底(redesign_nav.js 的 onerror 插入)——
宁可显示四个字,也不能让「回首页」这个出口消失。 */
.ed-logo-fallback { font-weight: 800; font-size: 17px; letter-spacing: -.2px; color: var(--ed-text); white-space: nowrap; }
/* 覆盖高度时宽度要跟着改,保持 333:285 的比例(约 1.168);
只改高会留一条白边(object-fit:contain 保证不变形,但位置会偏)。 */
.ed-nav-m .ed-logo-img { height: 27px; width: 32px; }
.ed-drawer .ed-logo-img { height: 26px; width: 30px; }
.ed-logo-name { font-weight: 800; font-size: 17.5px; letter-spacing: -.2px; color: var(--ed-text); }
.ed-nav-sep { width: 1px; height: 20px; background: var(--ed-border); margin: 0 10px; flex: none; }
.ed-nav-link {
flex: none; white-space: nowrap; border: none; background: transparent; cursor: pointer;
font-size: 15px; color: var(--ed-t2); padding: 8px 10px; border-radius: 9px; text-decoration: none;
}
.ed-nav-link:hover { background: var(--ed-s3); color: var(--ed-t2); }
.ed-nav-link.active { color: var(--ed-brand-deep); font-weight: 700; background: var(--ed-brand-bg); }
.ed-nav-cat { position: relative; }
.ed-nav-cat > button {
flex: none; white-space: nowrap; border: none; background: transparent; cursor: pointer;
font-size: 15px; color: var(--ed-t2); padding: 8px 10px; border-radius: 9px;
}
.ed-nav-cat > button:hover, .ed-nav-cat.open > button { background: var(--ed-s3); }
.ed-nav-cat > button .caret { font-size: 10px; color: var(--ed-w3); margin-left: 4px; }
.ed-nav-drop {
position: absolute; top: 46px; left: -8px; width: 330px; background: var(--ed-card);
border: 1px solid var(--ed-border); border-radius: 14px; box-shadow: var(--ed-shadow-pop);
padding: 8px; animation: edRiseIn .16s ease; display: none;
}
.ed-nav-cat.open .ed-nav-drop { display: block; }
.ed-menu-item {
display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: transparent;
border-radius: 10px; padding: 9px 10px; cursor: pointer; text-align: left; text-decoration: none;
}
.ed-menu-item:hover { background: var(--ed-s3); }
.ed-menu-item.locked { cursor: default; opacity: .62; }
.ed-menu-chip {
flex: none; width: 30px; height: 30px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
background: var(--ed-s4); color: var(--ed-t3);
}
/* 2026-08-24 Owner:「参考 avatar 页面的配色方案」+「其它颜色只会让页面产生
视觉污染」—— 六个分类色相全部收成中性灰底。
为什么这六个色相可以直接去掉:它们**没有提供额外信息**。分类靠的是分组
标题 + chip 里那个汉字,而色相与功能的对应关系本来就很弱(c-teal 一个类里
塞了拆解/翻译/听写/字幕/OCR/扩图等 11 个毫不相干的功能)。代价是下拉菜单
一展开就是十几个不同颜色的方块并排 —— 那正是 Owner 说的视觉污染。
唯一保留的是企业版金(.c-gold → .ed-badge-ent 同款):它承载的不是"属于哪
一类",而是"要不要付费",删了会真的丢信息。 */
.ed-menu-chip.c-coral,
.ed-menu-chip.c-blue,
.ed-menu-chip.c-green,
.ed-menu-chip.c-teal { background: var(--ed-s4); color: var(--ed-t3); }
.ed-menu-chip.c-purple{ background: var(--ed-brand-bg2); color: var(--ed-brand-deep); }
.ed-menu-chip.c-gold { background: var(--ed-ent-bg); color: var(--ed-ent-text); }
.ed-menu-name { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--ed-text); }
.ed-menu-desc { display: block; font-size: 12.5px; color: var(--ed-w1); margin-top: 2px; }
.ed-badge-hot { font-size: 11px; background: var(--ed-coral-bg); color: var(--ed-coral-text); padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.ed-badge-ent { font-size: 11px; background: var(--ed-ent-bg); color: var(--ed-ent-text); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.ed-badge-lock { font-size: 11px; background: var(--ed-s4); color: var(--ed-w3); padding: 1px 6px; border-radius: 5px; }
.ed-credits {
display: flex; align-items: center; gap: 6px; background: var(--ed-s2);
border: 1px solid var(--ed-border-lt); border-radius: 999px; padding: 5px 6px 5px 12px;
}
.ed-credits .gem { width: 8px; height: 8px; border-radius: 3px; background: var(--ed-gold); transform: rotate(45deg); }
.ed-credits .num { font-size: 14.5px; font-weight: 700; color: var(--ed-text); }
.ed-credits .topup {
border: none; background: var(--ed-brand); color: #fff; font-size: 12px;
padding: 4px 10px; border-radius: 999px; cursor: pointer; text-decoration: none;
}
.ed-credits .topup:hover { background: var(--ed-brand-deep); color: #fff; }
/* ⚠️ 芯片 2026-09-03 起是 (整体点击去积分中心),不再内嵌「充值」按钮。
.topup 的样式留着:移动抽屉里还有一个同名的充值链接在用。 */
.ed-credits { text-decoration: none; cursor: pointer; }
.ed-credits:hover { border-color: var(--ed-brand-line); }
/* ── 全站顶部动态信息通栏(2026-09-03 Owner §5.1,参照 liblib)──
在导航之上、页面最顶部。liblib 那条是深色窄条 + 右侧关闭按钮。 */
.ed-announce {
position: relative; display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 9px 44px 9px 16px; font-size: 14px; line-height: 1.5;
background: var(--ed-brand-deep); color: #fff; text-align: center;
}
.ed-announce .ea-txt { max-width: 1100px; }
.ed-announce .ea-x {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
border: none; background: transparent; color: #fff; opacity: .65;
font-size: 18.5px; line-height: 1; cursor: pointer; padding: 4px 8px; font-family: inherit;
}
.ed-announce .ea-x:hover { opacity: 1; }
.ed-announce.warn { background: var(--ed-coral-text); }
.ed-announce.error { background: #b42318; }
/* ── 顶栏独立入口:积分超市 / 会员中心(2026-09-03 Owner §1.3,参照 liblib)── */
.ed-top-entry {
display: inline-flex; align-items: center; gap: 5px; margin-right: 8px;
padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.ed-top-entry .ei { font-size: 14.5px; line-height: 1; }
.ed-top-entry.shop { background: var(--ed-brand-bg); color: var(--ed-brand-deep); }
.ed-top-entry.shop:hover { background: var(--ed-brand-soft); }
.ed-top-entry.vip { background: var(--ed-ent-bg); color: var(--ed-ent-text); }
.ed-top-entry.vip:hover { filter: brightness(.97); }
@media (max-width: 1180px) { .ed-top-entry .lb, .ed-top-entry { font-size: 13px; padding: 5px 9px; } }
/* 顶栏在 1180-1400 这一带要收紧:9 个一级项 + 登录后的钱包/会员/积分入口
加起来实测要 ~1300px,再宽松就顶出横向滚动条。
这一档只动**间距**,不动字号 —— 字号小了就回到了 Owner 说的"字太小"。 */
@media (max-width: 1400px) {
.ed-nav-cat > button, .ed-nav-link { padding: 8px 6px; }
.ed-nav-cat > button .caret { margin-left: 2px; }
.ed-nav-sep { margin: 0 6px; }
}
/* ── 头像菜单里的会员条 + 积分余额(Owner §4.2)──
⚠️ 用的是和积分浮层同一套盒子语言(圆角 12 / 底色 --ed-s2 / 同样的字号层级)。
Owner §4.1 实测:「当前的下拉菜单 UI 设计风格和刚才通过积分充值入口进入后的
菜单风格不一致」—— 一个是纯文字列表,一个是带底色的卡片,像两个产品。 */
.ed-user-menu .menu-vip, .ed-user-menu .menu-bal {
margin: 6px 8px; padding: 11px 12px; border-radius: 12px; background: var(--ed-s2);
}
.ed-user-menu .menu-vip { position: relative; }
.ed-user-menu .mv-name { font-size: 15px; font-weight: 800; color: var(--ed-text); }
.ed-user-menu .mv-sub { font-size: 12.5px; color: var(--ed-t3); margin-top: 3px; }
.ed-user-menu .mv-btn {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: var(--ed-brand); color: #fff; font-size: 12.5px; font-weight: 700;
padding: 5px 12px; border-radius: 999px; text-decoration: none;
}
.ed-user-menu .mv-btn:hover { background: var(--ed-brand-deep); color: #fff; }
/* ⚠️ nowrap 是必须的。没有它时,容器一窄 flex 就换行,
「积分可用」和「积分充值」会被压成一列一列的单字(实测截图)。 */
.ed-user-menu .mb-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.ed-user-menu .mb-top b { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ed-text); }
.ed-user-menu .mb-top span { font-size: 12.5px; color: var(--ed-t3); }
.ed-user-menu .mb-btn {
background: var(--ed-card); border: 1px solid var(--ed-border); color: var(--ed-brand-deep);
font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-decoration: none;
align-self: center;
}
.ed-user-menu .mb-btn:hover { border-color: var(--ed-brand); }
.ed-user-menu .mb-sub { font-size: 12.5px; color: var(--ed-t3); margin-top: 5px; }
/* ── 积分浮层(2026-09-02 充值积分改版 · Owner 文档 §1)──────────────────
鼠标移到积分芯片上滑出:会员状态 / 余额分项 / 四个快捷入口。
⚠️ 用 `.open` 类控制,不用 `:hover` 选择器。CSS 的 :hover 一旦鼠标
离开触发区就立刻收,而浮层和芯片之间有间隙、里面还有要点的按钮 ——
纯 CSS 方案会在移过去的路上关掉。JS 里带了 220ms 的延迟关闭。 */
.ed-wallet-wrap { position: relative; }
.ed-wallet-pop {
position: absolute; top: calc(100% + 10px); right: 0; width: 320px; z-index: 240;
background: var(--ed-card); border: 1px solid var(--ed-border);
border-radius: 16px; box-shadow: 0 12px 34px rgba(32, 31, 27, .16);
padding: 14px; opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .16s, transform .16s, visibility .16s;
}
.ed-wallet-pop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.ed-wallet-pop .wsec { padding: 11px 12px; border-radius: 12px; background: var(--ed-s2); margin-bottom: 10px; }
.ed-wallet-pop .wrow { display: flex; align-items: center; gap: 8px; }
.ed-wallet-pop .wtitle { font-size: 15px; font-weight: 800; color: var(--ed-text); }
.ed-wallet-pop .wsub { font-size: 12.5px; color: var(--ed-t3); }
.ed-wallet-pop .wbtn {
border: none; background: var(--ed-brand); color: #fff; font-size: 12.5px; font-weight: 700;
padding: 4px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; text-decoration: none;
}
.ed-wallet-pop .wbtn.ghost { background: transparent; color: var(--ed-brand-deep); padding: 4px 4px; }
.ed-wallet-pop .wbar { height: 5px; border-radius: 99px; background: var(--ed-w1); margin: 9px 0 6px; overflow: hidden; }
.ed-wallet-pop .wbar > i { display: block; height: 100%; background: var(--ed-brand); border-radius: 99px; }
.ed-wallet-pop .wtotal { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--ed-text); }
.ed-wallet-pop .wkinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 9px; }
.ed-wallet-pop .wkinds div { display: flex; justify-content: space-between; font-size: 13px; color: var(--ed-t3); }
.ed-wallet-pop .wkinds b { color: var(--ed-text); font-weight: 700; }
.ed-wallet-pop .wkinds .ll b { color: var(--ed-green-text); }
.ed-wallet-pop .wlinks { border-top: 1px solid var(--ed-border-lt); padding-top: 6px; }
.ed-wallet-pop .wlinks a, .ed-wallet-pop .wlinks button {
display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 8px; border: none;
background: transparent; border-radius: 9px; font-size: 14.5px; color: var(--ed-text);
cursor: pointer; font-family: inherit; text-align: left; text-decoration: none;
}
.ed-wallet-pop .wlinks a:hover, .ed-wallet-pop .wlinks button:hover { background: var(--ed-s2); }
.ed-wallet-pop .wlinks .arr { margin-left: auto; color: var(--ed-t3); font-size: 13px; }
@media (max-width: 860px) { .ed-wallet-pop { display: none; } }
/* ── 积分消耗顺序弹窗(Owner 文档 §7)── */
.ed-so-row {
display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 7px;
border: 1.5px solid var(--ed-border); border-radius: 12px; background: var(--ed-card);
}
.ed-so-row.locked { background: var(--ed-s2); border-color: transparent; }
.ed-so-row.dragging { opacity: .45; }
.ed-so-row .ed-so-n {
flex: none; width: 21px; height: 21px; border-radius: 7px; background: var(--ed-w1);
color: var(--ed-t3); font-size: 12.5px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.ed-so-row .ed-so-grip { flex: none; font-size: 14.5px; color: var(--ed-t3); }
/* ⚠️ 必须显式左对齐。`.ed-modal` 整体是 text-align:center(它本来只放
标题和二维码),列表放进去之后每一行的名称和说明都被居中了 —— 一列
居中的清单读起来找不到左边界。 */
.ed-so-row .ed-so-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.ed-so-row .ed-so-txt b { font-size: 15px; font-weight: 700; }
.ed-so-row .ed-so-txt small { font-size: 12.5px; color: var(--ed-t3); }
.ed-so-btn {
border: none; background: var(--ed-brand); color: #fff; font-size: 14.5px; font-weight: 700;
padding: 8px 18px; border-radius: 10px; cursor: pointer; font-family: inherit;
}
.ed-so-btn.ghost { background: var(--ed-s2); color: var(--ed-text); }
.ed-avatar {
width: 32px; height: 32px; border-radius: 50%; background: var(--ed-brand-soft); color: var(--ed-brand-deep);
display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; margin-left: 10px;
cursor: pointer; border: none; position: relative;
}
/* ⚠️ 宽度 190 → 292(Owner 2026-09-03 §1.3:「宽度不够,剩余积分、
积分充值等 UI 元素显示完全错乱」)。上一轮往菜单里加了会员条和余额条,
那两块是照着 320px 的积分浮层设计的,塞进 190px 里按钮被压成竖排单字。
加宽到 292 并与浮层(320)取同一套圆角/阴影/内边距 —— §1.3 还要求
「UI 设计要跟通过积分余额显示出的下拉菜单保持一致」。 */
.ed-user-menu {
position: absolute; right: 0; top: 40px; width: 292px; background: var(--ed-card); border: 1px solid var(--ed-border);
border-radius: 16px; box-shadow: 0 12px 34px rgba(32, 31, 27, .16); padding: 10px; display: none; z-index: 70; text-align: left;
}
.ed-user-menu.open { display: block; }
.ed-user-menu .row { display: block; width: 100%; border: none; background: transparent; text-align: left;
padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ed-t2); cursor: pointer; text-decoration: none; }
.ed-user-menu .row:hover { background: var(--ed-s3); }
.ed-login-cta {
border: none; background: var(--ed-brand); color: #fff; font-size: 14px; font-weight: 600;
padding: 7px 16px; border-radius: 999px; cursor: pointer; margin-left: 10px; text-decoration: none; white-space: nowrap;
}
.ed-login-cta:hover { background: var(--ed-brand-deep); color: #fff; }
/* ───────── 顶部导航(移动)与抽屉 ───────── */
.ed-nav-m { display: none; }
.ed-drawer { position: fixed; inset: 0; background: var(--ed-card); z-index: 90; overflow: auto; padding: 16px 20px 40px; display: none; }
.ed-drawer.open { display: block; }
.ed-drawer .d-head { display: flex; align-items: center; gap: 10px; height: 44px; }
.ed-drawer .d-close { border: none; background: var(--ed-s4); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 16.5px; color: var(--ed-t3); }
.ed-drawer .d-direct { text-align: left; padding: 14px 2px; border: none; border-bottom: 1px solid var(--ed-border-lt); background: transparent; font-size: 16.5px; font-weight: 600; color: var(--ed-text); cursor: pointer; display: block; width: 100%; text-decoration: none; }
.ed-drawer .d-cat { border-bottom: 1px solid var(--ed-border-lt); }
.ed-drawer .d-cat > button { width: 100%; display: flex; align-items: center; padding: 15px 2px; border: none; background: transparent; cursor: pointer; font-size: 16.5px; font-weight: 600; color: var(--ed-text); }
.ed-drawer .d-cat .caret { color: var(--ed-w3); font-size: 12px; }
.ed-drawer .d-items { display: none; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.ed-drawer .d-cat.open .d-items { display: flex; }
.ed-drawer .d-credit { margin-top: 18px; display: flex; align-items: center; gap: 10px; background: var(--ed-s2); border-radius: 12px; padding: 12px 14px; }
/* ⚠️ 断点 2026-09-03 从 959px 抬到 1180px。
起因是全站字号放大一档后在 1024px 顶出了横向滚动条,查下来是**老问题**:
实测**登录状态**的顶栏(9 个一级分类 + 积分超市 + 会员中心 + 余额 + 头像)
本来就要 ~1300px,在 1024 上放大前也已经溢出 —— 只是没人在这个宽度上试过。
收紧间距救不回来(实测把内边距压到 6px 仍差 280px),所以让抽屉早一点接管:
960-1180 这一带改用抽屉,它装得下全部入口,是这套设计自己的答案。
代价是 1024 的 iPad 横屏 / 小笔记本看不到平铺导航 —— 比顶出横向滚动条好。 */
/* ═══ 顶栏渐进收窄(2026-09-09 Owner)═══
反馈原文:「当浏览器页面压缩时,顶部菜单栏全部消失不见。这里要模仿 Higgsfield.ai 的设计,
当页面压缩时,顶部菜单栏右侧的部分菜单栏选项渐隐消失,积分信息和用户头像保持不变。」
改之前:≤1180px 时 `.ed-nav` 整条 `display:none`,换成只有 logo + 积分 + 汉堡的移动条 ——
在 13 寸笔记本上把浏览器拉窄一点,九个一级入口就一起没了。
改之后:按 `data-pri`(数字越大越先藏)**一档一档**藏,右边先没;
藏起来的项从右侧的「更多」(汉堡)进抽屉,功能一个不少;
**积分芯片与头像永远不参与收窄** —— 它们是状态,不是导航。
移动条要到 ≤640px 才接手(真手机宽度),而不是 1180。 */
.ed-nav-cat, .ed-nav-link { transition: opacity .18s ease, max-width .18s ease; }
.ed-nav-more {
display: none; border: none; background: transparent; cursor: pointer;
padding: 7px 8px; margin-right: 6px; flex-direction: column; gap: 4px; border-radius: 9px;
}
.ed-nav-more:hover { background: var(--ed-s2); }
.ed-nav-more span { width: 17px; height: 2px; background: var(--ed-t2); border-radius: 2px; display: block; }
.ed-nav-more span:last-child { width: 11px; }
/* 一档一档地藏。断点按实测:每藏掉一项大约让出 76-92px。 */
@media (max-width: 1290px) {
.ed-nav-more { display: flex; }
.ed-nav-cat[data-pri="8"] { display: none; }
}
@media (max-width: 1210px) { .ed-nav-cat[data-pri="7"] { display: none; } }
@media (max-width: 1130px) { .ed-nav-cat[data-pri="6"] { display: none; } }
@media (max-width: 1050px) { .ed-nav-cat[data-pri="5"] { display: none; } }
@media (max-width: 975px) { .ed-nav-cat[data-pri="4"] { display: none; } }
@media (max-width: 900px) { .ed-nav-cat[data-pri="3"], .ed-nav-link[data-pri="3"] { display: none; } }
@media (max-width: 820px) { .ed-nav-cat[data-pri="2"], .ed-nav-link[data-pri="2"] { display: none; } }
@media (max-width: 745px) { .ed-nav-cat[data-pri="1"] { display: none; } .ed-nav-sep { display: none; } }
/* 到这一步顶栏只剩:logo · 更多 · 主题 · 积分 · 头像 —— 与 Higgsfield 收到最窄时一致。 */
@media (max-width: 640px) {
.ed-nav { display: none; }
.ed-nav-m {
display: flex; position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ed-border); height: 52px; align-items: center; gap: 10px; padding: 0 16px;
}
.ed-nav-m .m-credits { font-size: 14px; font-weight: 700; color: var(--ed-brand-deep); background: var(--ed-s2); border-radius: 999px; padding: 5px 11px; }
.ed-nav-m .m-burger { border: none; background: transparent; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ed-nav-m .m-burger span { width: 18px; height: 2px; background: var(--ed-text); border-radius: 2px; }
.ed-nav-m .m-burger span:last-child { width: 12px; }
}
/* ───────── 通用组件 ───────── */
.ed-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.ed-card { background: var(--ed-card); border: 1px solid var(--ed-border); border-radius: 13px; }
/* 主按钮:H3 的双色渐变 + 一道同色调柔光。
⚠️ 关键不是渐变好看,是 **min-height 固定**:原来用 padding 撑高度,
于是"生成"和"立即生成视频"两个按钮并排时高度不一样。改成
inline-flex + min-height,文字长短不再影响尺寸。
(H3 原值是 44px;那是它表单里的大按钮,导航条上的用 38 更合身。) */
.ed-btn {
border: none; color: #fff; font-size: 14.5px; font-weight: 700;
padding: 0 18px; min-height: 38px; border-radius: 12px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
/* 2026-08-24:紫→青 改成紫→深紫。青绿是这道渐变里唯一的第二色相,
而这是**全站主按钮** —— 它出现在每一个页面上,是"配色不一致"最大的
单一来源。同色相渐变保留了立体感,不引入第二个颜色。 */
background: linear-gradient(135deg, var(--ed-brand-deep), var(--ed-brand-darker));
box-shadow: 0 8px 22px rgba(139,124,240,.25);
transition: box-shadow .18s ease, filter .18s ease;
}
.ed-btn:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 10px 26px rgba(139,124,240,.34); }
.ed-btn:disabled, .ed-btn[disabled] { opacity: .65; cursor: wait; box-shadow: none; }
.ed-btn-ghost {
border: 1px solid var(--ed-border); background: var(--ed-card); color: var(--ed-t3); font-size: 14.5px;
padding: 0 16px; min-height: 38px; border-radius: 12px; cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.ed-btn-ghost:hover { border-color: var(--ed-dash); color: var(--ed-t2); }
.ed-chip {
border: 1px solid var(--ed-border); background: var(--ed-card); border-radius: 999px; padding: 7px 15px;
font-size: 13px; color: var(--ed-t3); cursor: pointer;
}
.ed-chip:hover { border-color: var(--ed-dash); color: var(--ed-text); }
.ed-chip.on { border: 1.5px solid var(--ed-brand); background: var(--ed-brand-bg); color: var(--ed-brand-deep); font-weight: 700; }
.ed-pop {
background: var(--ed-card); border: 1px solid var(--ed-border); border-radius: 14px;
box-shadow: 0 24px 60px rgba(32,31,27,.18); animation: edRiseIn .16s ease;
}
.ed-overlay { position: fixed; inset: 0; background: rgba(24,23,19,.42); z-index: 100; overflow: auto; padding: 24px; }
.ed-modal { max-width: 760px; margin: 6vh auto; background: var(--ed-card); border-radius: 18px; padding: 26px 28px; animation: edRiseIn .22s ease; }
.ed-x { border: none; background: var(--ed-s4); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: var(--ed-t3); font-size: 15.5px; }
.ed-stripes { background: repeating-linear-gradient(45deg, #EDEFF6 0 12px, #F5F7FB 12px 24px); }
/* ══ 场景页壳(原型「子功能场景页」范式:头部行 + 两栏 + 右栏三件套 + 平台chips + 结算条)══ */
.ed-scene { max-width: 1140px; margin: 0 auto; padding: 22px 24px 72px; }
.ed-scene-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-scene-head .back { border: 1px solid var(--ed-border-lt); background: var(--ed-s1); border-radius: 8px; padding: 5px 11px; font-size: 13px; color: var(--ed-t3); text-decoration: none; cursor: pointer; }
.ed-scene-head .back:hover { border-color: var(--ed-dash); }
.ed-scene-head .glyph { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ed-brand-bg2); color: var(--ed-brand-deep); display: flex; align-items: center; justify-content: center; font-size: 15.5px; font-weight: 800; }
.ed-scene-head .h-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: var(--ed-text); }
.ed-scene-head .h-desc { display: block; font-size: 13px; color: var(--ed-w1); margin-top: 1px; }
.ed-scene-head .freeze { font-size: 12px; color: var(--ed-w2); }
.ed-scene-head .ent-tag { font-size: 11.5px; background: var(--ed-ent-bg); color: var(--ed-ent-text); padding: 2px 7px; border-radius: 5px; font-weight: 700; }
.ed-scene-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ed-scene-grid { grid-template-columns: 1fr; } }
.ed-scene-form { background: var(--ed-card); border: 1px solid var(--ed-border); border-radius: 16px; padding: 20px 22px 22px; }
.ed-scene-side { display: flex; flex-direction: column; gap: 14px; }
.ed-side-card { background: var(--ed-card); border: 1px solid var(--ed-border); border-radius: 16px; padding: 16px 18px; }
.ed-side-card > .t { font-size: 14px; font-weight: 800; color: var(--ed-text); }
.ed-note { display: flex; gap: 8px; font-size: 13px; color: var(--ed-t3); line-height: 1.6; }
.ed-note .dot { color: var(--ed-brand); flex: none; }
.ed-agent-cta { display: block; border: 1px dashed var(--ed-dash); background: transparent; border-radius: 13px; padding: 13px; font-size: 14px; color: var(--ed-w1); text-decoration: none; line-height: 1.6; cursor: pointer; }
.ed-agent-cta:hover { border-color: var(--ed-brand-line); color: var(--ed-brand-deep); }
.ed-agent-cta b { color: var(--ed-brand-deep); }
/* 发布平台 chips(空壳:纯前端多选,后端规范注入为后续) */
.ed-plats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ed-plat-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ed-border); background: var(--ed-card); border-radius: 9px; padding: 6px 11px; font-size: 13px; color: var(--ed-t2); cursor: pointer; font-family: inherit; }
.ed-plat-chip:hover { border-color: var(--ed-dash); }
.ed-plat-chip.on { border-color: var(--ed-brand-line); background: var(--ed-brand-bg); color: var(--ed-brand-deep); font-weight: 600; }
/* 平台字块:统一灰阶,不再用各平台官方色(Owner 2026-08-24「其它颜色只会让页面
产生视觉污染」)。这一组是最安全的收敛点 —— 它是**空壳控件**(见上一行注释:
纯前端多选,后端还没接),那 6 个官方色不承载任何信息,只是在 12 个页面上
各摆一排彩色方块。选中态本来就靠 .on 的紫底+紫边表达,与方块颜色无关。
⚠️ 登录页的第三方 logo(Google 四色 / 微信绿)是另一回事,必须保留原色 ——
官方 logo 改色有品牌合规问题,不在本次收敛范围。 */
.ed-plat-chip .b { flex: none; width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--ed-s4); color: var(--ed-t3); }
.ed-plat-chip.on .b { background: var(--ed-brand); color: #fff; }
/* 底部结算条:预估消耗(大号深蓝)+ 行内主按钮 */
.ed-settle { display: flex; align-items: center; gap: 12px; margin-top: 20px; border-top: 1px solid var(--ed-border-lt); padding-top: 16px; }
.ed-settle .est-label { display: block; font-size: 12px; color: var(--ed-w1); }
.ed-settle .est { display: block; font-size: 22px; font-weight: 800; color: var(--ed-brand-deep); }
.ed-settle .est-note { font-size: 12px; color: var(--ed-w2); }
.ed-stripes-dark { background: repeating-linear-gradient(45deg, #1C2131 0 12px, #262D40 12px 24px); }
/* ═══ 夜间模式(2026-07-27):暖调深灰,与白天同一套 --ed-* 变量,页面零改动即可换肤 ═══
切换:(redesign_nav.js 的主题按钮写入 + localStorage 记忆) */
html[data-theme="dark"] {
/* 冷蓝黑。原来是暖深灰 #171614 —— 白天换成冷色之后,夜间还留暖调
就会出现"白天冷、夜里暖"两套观感。取值来自 H3 自己的深色区间
(它的 preview-canvas 是 linear-gradient(145deg,#1C2131,#111522))。 */
--ed-bg: #111522;
--ed-card: #1A1F2E;
--ed-s1: #1E2433; /* 输入底 */
--ed-s2: #232939; /* 胶囊底 */
--ed-s3: #283044; /* hover 面 */
--ed-s4: #2E374D; /* 中性 chip */
--ed-border: #313A50;
--ed-border-lt: #262E40;
--ed-dash: #3D4761;
/* 字:反相,保持层级 */
--ed-text: #EDEFF5;
--ed-t2: #D2D7E3;
--ed-t3: #A8B0C4;
--ed-w1: #8A93A9;
--ed-w2: #737C92;
--ed-w3: #7D869C;
/* 主色紫:深底上提亮 */
--ed-brand: #A594F5;
--ed-brand-deep: #BCAEF9;
/* 夜间反过来:块是浅色、字用深色(--hp-ink),所以这一档要比 -deep 更**浅**,
不是更深。深字 #10131C 压上去 11.43:1。 */
--ed-brand-darker: #CFC4FB;
--ed-brand-line: #4A3F86;
--ed-brand-bg: #23203C;
--ed-brand-bg2: #292447;
--ed-brand-soft: #362F5C;
/* 副色青绿 */
--ed-teal: #6FDCCD;
--ed-teal-text: #7FE0D2;
--ed-teal-bg: #16332F;
--ed-teal-deep: #8FE6DA; /* 夜间反过来:块是浅色,字用深色(--hp-ink) */
/* 成功 */
--ed-green: #7BD8A8;
--ed-green-text: #8FE0B6;
--ed-green-bg: #16301F;
--ed-green-line: #3D6B52;
/* 警告 / 积分金 */
--ed-gold: #FFCF87;
--ed-ent-bg: #352C1A;
--ed-ent-text: #F0CE8E;
/* 危险 / 珊瑚 */
--ed-coral: #FF9EAE;
--ed-coral-text: #FFAEBB;
--ed-coral-bg: #3A2128;
--ed-danger: #FF8FA3;
--ed-danger-bg: #3A2128;
/* 信息蓝 */
--ed-info: #8FCDF5;
--ed-info-text: #A2D6F7;
--ed-info-bg: #182A3A;
/* 阴影:深底上照旧更沉(浅阴影在深底上等于没有) */
--ed-shadow-card: 0 1px 2px rgba(0,0,0,.35);
--ed-shadow-pop: 0 18px 44px rgba(0,0,0,.5);
--ed-shadow-hero: 0 22px 54px rgba(0,0,0,.4);
color-scheme: dark; /* 让原生控件(滚动条/表单)跟随 */
}
/* 夜间:媒体与占位条纹压暗,避免刺眼白块 */
html[data-theme="dark"] .ed-stripes { background: repeating-linear-gradient(45deg,#1E2433 0 12px,#171C29 12px 24px); }
html[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(.94); }
/* 主题切换按钮 */
.ed-theme-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ed-border);
background: var(--ed-card); color: var(--ed-t3); cursor: pointer; font-size: 15.5px; line-height: 1;
display: flex; align-items: center; justify-content: center; flex: none; transition: border-color .15s, color .15s; }
.ed-theme-btn:hover { border-color: var(--ed-brand-line); color: var(--ed-brand-deep); }
/* ═══════════════════════════════════════════════
邀请有礼顶栏入口 + 帮助与触达弹窗(2026-07-28)
═══════════════════════════════════════════════ */
.ed-invite-cta {
display: inline-flex; align-items: center; gap: 4px; margin-right: 6px;
padding: 6px 9px; border-radius: 999px; text-decoration: none;
font-size: 14px; font-weight: 700; white-space: nowrap;
color: var(--ed-ent-text); background: var(--ed-ent-bg);
border: 1px solid var(--ed-gold); transition: all .15s;
}
.ed-invite-cta:hover { background: var(--ed-gold); color: #fff; border-color: var(--ed-gold); }
.ed-invite-cta .gift { font-size: 14.5px; }
/* 顶栏在 ~1300px 以下会被一级菜单挤爆:先收成纯图标胶囊(仍是金色,依旧显眼),
宽屏(≥1360)才展示完整「邀请有礼」文案。移动端由抽屉里的入口承接。 */
@media (max-width: 1370px) {
.ed-invite-cta { padding: 6px 9px; margin-right: 6px; font-size: 0; }
.ed-invite-cta .gift { font-size: 16.5px; }
}
.ed-user-menu .row-sep { height: 1px; margin: 5px 0; background: var(--ed-border-lt); }
.ed-user-menu .row-dot {
display: none; width: 6px; height: 6px; border-radius: 50%;
background: var(--ed-danger); margin-left: 6px; vertical-align: middle;
}
.ed-modal-mask {
position: fixed; inset: 0; z-index: 3000; display: flex;
align-items: center; justify-content: center; padding: 20px;
background: rgba(20, 19, 16, .45); backdrop-filter: blur(2px);
}
.ed-modal {
position: relative; width: 100%; max-width: 360px; max-height: 86vh; overflow: auto;
background: var(--ed-card); border: 1px solid var(--ed-border);
border-radius: 18px; padding: 26px 24px 22px; text-align: center;
box-shadow: var(--ed-shadow-hero);
}
.ed-modal.wide { max-width: 760px; text-align: left; padding: 22px; }
.ed-modal-x {
position: absolute; right: 12px; top: 10px; width: 28px; height: 28px;
border: none; background: transparent; color: var(--ed-w1);
font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.ed-modal-x:hover { background: var(--ed-s2); color: var(--ed-text); }
.ed-modal-t { font-size: 17.5px; font-weight: 800; color: var(--ed-text); }
.ed-modal-d { font-size: 14px; color: var(--ed-t3); margin-top: 8px; line-height: 1.7; }
.ed-modal-hint { font-size: 12.5px; color: var(--ed-w1); margin-top: 12px; }
.ed-modal-empty { font-size: 14.5px; color: var(--ed-w2); padding: 36px 0; text-align: center; }
.ed-qr {
display: block; width: 210px; height: 210px; margin: 16px auto 0;
border-radius: 12px; border: 1px solid var(--ed-border); background: #fff; padding: 6px;
object-fit: contain;
}
.ed-qr-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 14.5px; font-weight: 600; color: var(--ed-w2); background: var(--ed-s1);
}
.ed-qr-empty span { font-size: 12.5px; font-weight: 400; margin-top: 6px; }
.ed-msg-wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 640px) { .ed-msg-wrap { grid-template-columns: 1fr; } }
.ed-msg-list { max-height: 58vh; overflow: auto; border-right: 1px solid var(--ed-border-lt); padding-right: 8px; }
.ed-msg-row {
display: block; width: 100%; text-align: left; border: none; cursor: pointer;
background: transparent; padding: 9px 10px; border-radius: 10px; font-family: inherit;
}
.ed-msg-row:hover { background: var(--ed-s2); }
.ed-msg-row.on { background: var(--ed-brand-bg); }
.ed-msg-row .t { display: block; font-size: 14px; font-weight: 600; color: var(--ed-t2); line-height: 1.5; }
.ed-msg-row .t em { font-style: normal; color: var(--ed-brand-deep); margin-right: 4px; }
.ed-msg-row .d { display: block; font-size: 12px; color: var(--ed-w2); margin-top: 3px; }
.ed-msg-body { max-height: 58vh; overflow: auto; }
.ed-msg-body .mb-h {
font-size: 16px; font-weight: 800; color: var(--ed-text); line-height: 1.5;
display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
}
.ed-msg-body .mb-h span { font-size: 12.5px; font-weight: 400; color: var(--ed-w2); white-space: nowrap; }
.ed-msg-body .mb-c { font-size: 14.5px; color: var(--ed-t2); line-height: 1.85; margin-top: 12px; }
/* 未开通企业版:菜单整组置灰,可展开查看能力,点击引导联系客服(2026-07-28) */
.ed-nav-cat.ent-locked > button,
.d-cat.ent-locked > button { color: var(--ed-w2); }
.ed-nav-cat.ent-locked .ed-menu-item,
.d-cat.ent-locked .d-item { opacity: .55; }
.ed-nav-cat.ent-locked .ed-menu-item:hover,
.d-cat.ent-locked .d-item:hover { opacity: .78; }
.ed-nav-cat.ent-locked .ed-menu-chip,
.d-cat.ent-locked .d-chip { filter: grayscale(.75); }
/* 人像调节词条 chips(plan.md §4A.1,2026-07-28) */
.pt-chip {
border: 1px solid var(--ed-border); background: var(--ed-card); color: var(--ed-t2);
border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer;
font-family: inherit; transition: all .12s; white-space: nowrap;
}
.pt-chip:hover { border-color: var(--ed-brand); color: var(--ed-brand-deep); }
.pt-chip.on {
background: var(--ed-brand-bg); border-color: var(--ed-brand);
color: var(--ed-brand-deep); font-weight: 700;
}
/* 菜单项前的小图标。⚠️ 必须包在 里,不能直接写在文字前面 ——
i18n 的替换是按 `>中文<` 整串匹配的,emoji 夹在中间会把词条切断,
海外站那一项就翻不了(2026-09-03 实测:加了图标之后 test_i18n 变红)。 */
.ed-user-menu .row .ri { display: inline-block; width: 18px; margin-right: 2px; }
/* ═══════════════════════════════════════════════════════════════════════════
移动端自适应 · 全局层(2026-09-07)
Owner:「移动端页面的体验非常糟糕,特别是**字体缩放之后**。」
## 为什么写在这个文件里,而不是各页自己改
50 个页面里有 12 个**一条小屏断点都没有**,而 `digital_human.html` 自
2026-09-02 起功能冻结(改它要 Owner 手动确认)。redesign.css 是唯一一份
每个页面都在 里加载的样式表 —— 写在这里等于一处改、全站生效,
冻结页也不用动一个字节(和 agent_dock_boot.js 走全局层是同一个理由)。
代价是**要用 !important**:页面自己的