，
其余 8 页（备忘录 / 画布 / 日记 / 联系人 / 网盘 / 市场 / 账户 / 后台 / 工具箱 / 旅行）根本没有网格。
这里清空 .bgfx 的浅色背景，避免它和 body::after 的网格叠加成双倍浓度（.055 叠 .055 ≈ .107）。 */
html:not(.dark) .bgfx { background: none; }
/* 降级态（html.no-glass）会隐藏 body::after，此时由 .bgfx 把网格接回来 */
html.no-glass:not(.dark) .bgfx {
background:
linear-gradient(color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px);
background-size: 48px 48px, 48px 48px;
}
/* 同上（2026-09-23 V2.0.1）：深色网格也已上移到 body::after，这里清空避免双倍浓度 */
html.dark .bgfx { background: none; }
/* 背景模糊光球：浅深均停用（底色光晕统一由浅色「无」+ 深色「body::after/gl-blobs」承担） */
.bgfx i { display: none; }
/* 既有 .bg-orb 全量停用（底色光晕统一由浅色「无」+ 深色「gl-blobs/body::after 夜空 orbs」承担） */
.bg-orb { display: none; }
.orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--brand-mark-dark) 0%, transparent 70%); top: -200px; left: -100px; }
.orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--brand-mark-dark) 0%, transparent 70%); bottom: -150px; right: -100px; }
/* ==================== ⑩ 管理员模拟视图 UI（切换数据按钮 / 横幅 / 弹窗） ==================== */
/* 切换数据悬浮按钮（fixed 左下角） */
/* V5.1.6：FAB 发光收敛 —— 品牌色大范围 glow 换成常规投影（按钮仍醒目，但不再"发光"） */
.auth-view-fab {
position: fixed; left: 20px; bottom: 20px; z-index: 2147482999;
padding:var(--space-8px-16px); border-radius: var(--radius-10px); font-weight: 700;
box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 18%, transparent);
transition: transform 0.18s cubic-bezier(.2,.9,.3,1.5), box-shadow 0.18s;
}
.auth-view-fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--black) 24%, transparent); }
.auth-view-fab:active { transform: translateY(0) scale(0.97); }
html.dark .auth-view-fab { box-shadow: 0 4px 16px color-mix(in srgb, var(--black) 45%, transparent); }
html.dark .auth-view-fab:hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--black) 55%, transparent); }
/* 模拟视图顶部横幅 */
.auth-view-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
background: var(--pri-gradient);
color: var(--white);
font: 13px/1.5 var(--font);
padding:var(--space-8px-16px);
display: flex; align-items: center; justify-content: center; gap:var(--space-14px);
box-shadow: 0 2px 14px color-mix(in srgb, var(--primary) 32%, transparent);
flex-wrap: wrap;
}
html.dark .auth-view-banner { box-shadow: 0 2px 18px color-mix(in srgb, var(--dark-primary) 40%, transparent); }
.auth-view-banner-text { display: inline-flex; align-items: center; gap:var(--space-8px); }
.auth-view-banner-text b { font-weight: 700; border-bottom: 1px dashed color-mix(in srgb, var(--white) 55%, transparent); padding-bottom:var(--space-1px); }
.auth-view-banner-exit {
background: color-mix(in srgb, var(--white) 18%, transparent);
color: var(--white);
border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
border-radius: var(--radius-999px);
padding:var(--space-4px-14px);
font-size: var(--fs-2xs);
font-weight: 600;
cursor: pointer;
min-height: 28px;
font-family: var(--font);
transition: background 0.15s;
}
.auth-view-banner-exit:hover { background: color-mix(in srgb, var(--white) 28%, transparent); }
/* 弹窗遮罩 */
.auth-view-overlay {
position: fixed; inset: 0; z-index: 2147483100;
background: color-mix(in srgb, var(--text) 45%, transparent);
display: flex; align-items: center; justify-content: center; padding:var(--space-16px);
}
html.dark .auth-view-overlay { background: color-mix(in srgb, var(--haven-night-950) 72%, transparent); }
/* 弹窗盒子 — 2.5D 极客卡片风格 */
.auth-view-box {
width: min(420px, 94vw);
max-height: 80vh;
overflow: auto;
background: var(--panel-solid);
border: 1px solid var(--border-cyber);
border-radius: var(--radius-16px);
padding:var(--space-20px);
box-shadow: var(--d3-shadow);
font-family: var(--font);
}
html.dark .auth-view-box { background: var(--d3-bg); border-radius: var(--radius-18px); }
/* 弹窗头部 */
.auth-view-head { display: flex; align-items: center; justify-content: space-between; margin-bottom:var(--space-14px); }
.auth-view-title {
margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--tx);
display: inline-flex; align-items: center; gap:var(--space-8px);
}
.auth-view-title::before {
content: ''; width: 3px; height: 14px; border-radius: var(--radius-2px);
background: var(--pri-gradient);
}
.auth-view-close {
background: transparent; border: none; border-radius: var(--radius-8px);
color: var(--tx3); cursor: pointer;
width: 32px; height: 32px; display: grid; place-items: center;
transition: all 0.15s;
}
.auth-view-close:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--tx); }
html.dark .auth-view-close:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--white); }
/* 弹窗提示 */
.auth-view-hint {
margin: 0 0 12px; font-size: var(--fs-2xs); color: var(--tx3);
line-height: var(--lh-ui);
}
/* 用户列表 */
.auth-view-list { display: flex; flex-direction: column; gap:var(--space-8px); }
/* 用户行 — 极客风格 */
.auth-view-row {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding:var(--space-12px-16px);
border: 1px solid var(--border);
border-radius: var(--radius-12px);
background: var(--panel-solid);
cursor: pointer;
font: 14px var(--font);
color: var(--tx);
text-align: left;
transition: all 0.18s;
}
.auth-view-row:hover {
background: color-mix(in srgb, var(--text) 4%, transparent);
border-color: var(--border-cyber);
transform: translateX(2px);
}
.auth-view-row:active { transform: translateX(2px) scale(0.99); }
html.dark .auth-view-row { background: color-mix(in srgb, var(--haven-night-900) 50%, transparent); border-color: var(--line); }
html.dark .auth-view-row:hover {
background: color-mix(in srgb, var(--dark-primary) 8%, transparent);
border-color: color-mix(in srgb, var(--dark-primary) 35%, transparent);
}
.auth-view-row-name { font-weight: 500; }
/* 用户角色徽章 */
.auth-view-badge {
font-size: var(--fs-2xs); padding:var(--space-3px-10px); border-radius: var(--radius-999px); font-weight: 600;
background: var(--surface-2); color: var(--tx3);
border: 1px solid var(--border);
}
.auth-view-badge.admin {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--c1);
border-color: color-mix(in srgb, var(--primary) 26%, transparent);
}
html.dark .auth-view-badge { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--tx2); border-color: var(--line); }
html.dark .auth-view-badge.admin {
background: color-mix(in srgb, var(--dark-primary) 18%, transparent);
color: var(--c1);
border-color: color-mix(in srgb, var(--dark-primary) 40%, transparent);
}
/* 空状态 / 错误提示 */
.auth-view-empty { text-align: center; color: var(--tx3); padding:var(--space-20px); font-size: var(--fs-xs); }
/* ==================== ⑪ 玻璃拟态层（glassmorphism · 仅浅色） ==================== */
/* 依据：DEMO/玻璃拟态组件库Demo.html v2.4 + design-file/docs/玻璃拟态全站应用方案.md
*
* 设计约定（改动前务必读一遍）：
* 1. 只作用于浅色 html:not(.dark)。深色态（黑青极客）一字不动，保持原样。
* 2. 玻璃公式固定，只换基色：rgba(var(--g-base),α) + blur + saturate + 1px 亮边 + 顶部内高光 + 柔投影。
* 3. 只给「叶子面板」加 backdrop-filter。绝不给 body / 主容器加 —— backdrop-filter 会创建
* 包含块，使内部所有 position:fixed 子元素的坐标基准从视口变成该容器（后果：右键菜单错位、
* 弹窗偏移、副屏浮层跑到主屏）。
* 4. 浮层（弹窗/下拉/抽屉/Toast）单独走「浮层档」高不透明度 .94，保证压在玻璃卡片上仍然可读。
* 5. html.no-glass 一键回退；不支持 backdrop-filter 的环境自动回退不透明底。
*
* 排查提示：某处 fixed 浮层开始错位时，先查它是不是被放进了带 backdrop-filter/transform 的容器。
* 四档材质：薄 .40/10px · 标准 .86/18px · 厚 .92/26px · 浮层 .94/40px */
/* 浅色卡片 hover：默认边已改成 --d3-border，hover 渐进到 --d3-border-hover，
不再跳到 --border-strong（原实现是「白边 1.05:1 → 灰边 1.27:1」的瞬间出现感） */
html:not(.dark) .d3:hover { border-color: var(--d3-border-hover) !important; }
/* 骨架屏：theme.css 用 --surface-2/--border-2 做条纹，浅色下两者几乎同色，占位块看不出边界 */
html:not(.dark) .skeleton {
background: linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 25%, color-mix(in srgb, var(--text) 11%, transparent) 50%, color-mix(in srgb, var(--text) 5%, transparent) 75%);
background-size: 200% 100%;
}
/* ---- 背景层：渐变底 + 5 个彩色光斑（用 body::after，给 login 自己的 body::before 让位） ----
⚠️ 关键：body 自身必须透明，否则它的不透明底会盖住下面这层光斑。
层叠顺序（根层叠上下文）：html 背景 → body::after(z-index:-2) → body 背景 → 正文内容。
原写法 html,body 同时上底 → body 背景落在"正文块背景"阶段，正好压住负 z-index 的伪元素。
所以这里把底移到 html 上，body 让空。 */
html:not(.dark) { background: var(--haven-slate-100); }
html:not(.dark) :is(body, body.light, body.dark) { background: transparent; }
/* ⚠️ travel.html 的 body 带 id="travelPage"，它自己的规则是 **id 选择器**：
#travelPage { background-color: var(--bg); background-image: 30% 淡光晕… }
(1,0,0) 的权重会压过上面那条 (0,2,2) 的透明化规则 —— 表现是整页彩色光斑被一层不透明底盖住
（实测：其余 9 页 body 都是 transparent，只有 travel 是 var(--travel-bg)）。
这里用 `body#travelPage` 把权重提到 (1,1,2) 按回来；顺带清掉它自带那层淡光晕——
现在统一由 §⑪ 的光斑层 + .gl-blobs 负责背景，留着会与新光斑叠加。
★ 以后新增页面若出现"背景还是旧的、光斑看不见"，先查 body 有没有被 id 选择器设了底。 */
html:not(.dark) body#travelPage { background: transparent; }
html:not(.dark) body::after {
content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
/* 柔和雾蓝背景层（V2.0.0 全站风格改·对齐 demo）：
3 团弥散柔光（顶部白 / 右上淡蓝 / 左中淡蓝）+ 自顶向下近白微蓝渐变。
★ 2026-09-23（V2.0.1）：极客网格线并入本层 —— 原先挂在 .bgfx 上，但全站只有
finance / milestones / update-log 三页有
，其余页面根本没有网格。
放在 body::after 里对全部页面一次生效，零 DOM 改动。
网格必须排在最前（绘制在最上）：本层最后一档渐变是不透明底色，排在后面会被它盖掉。 */
background:
linear-gradient(color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px),
radial-gradient(900px 520px at 50% -12%, var(--white) 0%, transparent 62%),
radial-gradient(1000px 620px at 108% -4%, var(--blue-75-soft) 0%, transparent 58%),
radial-gradient(900px 640px at -8% 24%, var(--blue-75-calm) 0%, transparent 56%),
linear-gradient(180deg, var(--blue-50-warm) 0%, var(--haven-slate-100) 60%, var(--bg) 100%);
background-size: 48px 48px, 48px 48px, auto, auto, auto, auto;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* ---- 深色底色：深邃夜空 + 弥散光晕（参考 深色-demo：body 底色 var(--bg) + 4 个 orbs） ----
为了让光晕漏出来，深色下把底从 body 移到 html（与浅色同构）：
html 承载 var(--bg)，body 让空 → gl-blobs(-1) / 静态 body::after(-2) 都能透出。 */
html.dark :is(body, body.light, body.dark) { background: transparent; }
/* 静态兜底光晕（JS 未注入或降级态时由它提供夜空氛围；JS 注入后 .gl-blobs 的浮动 orbs 叠加其上，
二者色值同源（极光青/靛紫/霓虹紫/翡翠绿），叠起来只是光晕强度略增、不会突兀。勿用 gl-blobs-on
把它关掉——notes 等页也会隐藏 .gl-blobs 容器但仍打 gl-blobs-on，关掉会让那些页面失去光晕。 */
html.dark body::after {
content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
/* 2026-09-23（V2.0.1）：深色也补上极客网格线，与浅色同构 ——
原先同样只挂在 .bgfx 上，没有该元素的页面在深色下也没有网格。
★ V5.1.6 光斑收敛：色族 4 → 3（**去掉翡翠绿 orb**，青色 25%→14%）——
深色夜空只保留「青 / 靛 / 紫」品牌同族渐变，绿斑与品牌色不同族、
是深色下"背景发脏"的主因（实测截图左上大片青绿斑）。 */
background:
linear-gradient(color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px),
radial-gradient(520px 520px at -80px -100px, color-mix(in srgb, var(--cyan-500) 14%, transparent), transparent 70%),
radial-gradient(600px 600px at calc(100% + 120px) 40px, color-mix(in srgb, var(--indigo-500) 22%, transparent), transparent 70%),
radial-gradient(480px 480px at 30% calc(100% + 80px), color-mix(in srgb, var(--violet-500) 16%, transparent), transparent 70%);
background-size: 48px 48px, 48px 48px, auto, auto, auto;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}
/* ---- 工具类：新写的模块可直接套用 ---- */
.glass {
background: var(--surface-glass);
-webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.glass-thin { background: var(--surface-glass-thin);
-webkit-backdrop-filter: blur(var(--g-blur-thin)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur-thin)) saturate(var(--g-sat)); }
.glass-strong { background: var(--surface-glass-strong);
-webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat)); }
.glass-pop { background: var(--surface-overlay);
-webkit-backdrop-filter: blur(var(--g-blur-pop)) saturate(180%);
backdrop-filter: blur(var(--g-blur-pop)) saturate(180%);
border: 1px solid var(--glass-border); }
/* 模态档工具类：有正文要读的对话框用这个，不要用 .glass-pop（那是给菜单/气泡的） */
.glass-modal { background: var(--surface-overlay);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--glass-border); }
html.dark .glass-modal { background: var(--surface); }
/* 凹面玻璃：只有半透明底 + 内阴影 + 亮边，不含 blur —— 用在"玻璃里再套一层"的场景，避免模糊互相抵消 */
.inset-glass {
background: var(--surface-glass-strong);
border: 1px solid var(--glass-border);
box-shadow: inset 0 2px 6px color-mix(in srgb, var(--shadow-lg) 18%, transparent);
}
/* 内容卡：统一实底。玻璃只保留给顶栏、筛选浮层、弹窗和菜单。 */
:is(.card, .plain-card, .mk-card, .app-card, .metacard,
.analysis-stat-card, .plan-chart-card, .mk-table-wrap,
.d3, .mod, .goal, .quick, .feed, .chart3d) {
background-color: var(--surface);
background-image: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.hero-banner :is(.stat-card, .card) {
background: color-mix(in srgb, var(--surface) 14%, transparent);
background-image: none;
}
/* ---- 给既有组件补 backdrop-filter（它们本身的半透明底已由令牌换好，这里只补模糊） ---- */
/* 顶栏：走厚档。不能只吃 --surface 的 .46 —— 太透会让滚动内容从顶栏后面透出来干扰阅读 */
html:not(.dark) .site-header {
background: var(--surface-glass-strong);
-webkit-backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur-strong)) saturate(var(--g-sat));
}
/* ⚠️ 例外：**Hero 横幅内部的卡片**不参与玻璃化。
它们（如 travel 总览的四张统计卡）本来的设计是 theme.css 里的
.hero-banner .stat-card { background: color-mix(in srgb, var(--white) 14%, transparent) } ← 渐变上的克制小片
而它们同时带 `.card` 类，会被上面两条 sheen / 模糊规则命中：
55% 白的斜向高光叠上去 → 原本克制的 14% 白被洗成亮粉色药丸，白图标也一起糊掉。
这里把这几项按「改造前」的值精确还原（含原先的灰边与柔投影），
保证 hero 上的统计卡与"上一个版本"一致。作用域是 .hero-banner，站点里所有 hero 统计卡一并受益。
⚠️ **不要把 `.stat-icon` 写进这个列表** —— 我一开始写进去了，结果把图标小片的
`border-color`（原本 var(--border-neutral)）和 `box-shadow`（原本 color-mix(in srgb, var(--black) 28%, transparent) 0 8px 20px -6px，
一个让图标"浮起来"的深色投影）一并覆盖成了卡片的灰边与柔投影，图标就平了。
图标自己本来就没有 backdrop-filter、也没有 background-image，不需要这里兜。 */
html:not(.dark) .hero-banner :is(.card, .stat-card) {
background-image: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: var(--blue-150-soft); /* 改造前的 --border */
box-shadow: 0 8px 32px color-mix(in srgb, var(--text) 6%, transparent); /* 改造前的 --shadow */
}
/* ---- 表单控件：一律实底（**不透底**）----
用户反馈：输入框透出背景光斑后，文字与占位符跟背景糊在一起，打字时视觉混乱。
策略：
· 控件本身 与「字段外壳」（.search / .input-icon-wrap 这类容器型字段）**都**改实底 ——
两者同为白后合起来就是一个干净的实底输入区，不会出现"玻璃框里套白块"。
· 同时去掉输入控件上的 backdrop-filter：实底不需要它，还省一层模糊开销。
· 排除 checkbox / radio / range / color / file / hidden —— 它们不是"文字输入区"，
改背景色反而会让原生控件变怪。
⚠️ 注意这里**没有**动 `.sheet`（notes 弹出面板）：它是对话框面板不是输入区，保持玻璃；
它内部的 `.ta` 文字区按本规则变实底，正是想要的效果。
⚠️ `:is(...)` 与后面的 `:not(...)` 必须**紧连不能换行** —— 中间只要出现空白，就成了后代选择器。 */
html:not(.dark) :is(input, textarea, select, .input, .glass-input, .app-input, .ui-modal-input, .inp, .search, .input-icon-wrap, .ta):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]) {
background-color: var(--white);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* 页面内联样式里直接用 --panel-solid 的容器（login 主卡片、主题开关、admin 用户行等） */
html:not(.dark) :is(.auth-card, .theme-fab, .auth-view-row, .auth-view-badge,
.site-logo, .brand-mark, .stat-card, .hover-card, .chip, .meta-card) {
-webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
}
/* 模态：2026-09-23 删除了原先的「模态档玻璃」规则（--g-alpha-modal / 30px 模糊）。
它下面的全站实底规则 `:is(...){background:var(--modal-bg,var(--white))!important;backdrop-filter:none!important}`
带 !important 且位置更靠后，本条自写入起从未生效 —— 浅色弹窗一直是纯白实底。
决策：保留实底（弹窗承载正文，实底最可读），删除死规则，避免注释与实现继续打架。 */
/* 全站约定：弹出窗主体必须是实底，不能透出背后的卡片/光斑造成文字融合。
⚠️ 只命中弹窗「内容框」，不命中管理页 .modal.fixed 这类全屏遮罩。 */
:is(.ui-modal-box, .modal-box, .modal:not(.fixed), .dialog, .mo .box, .auth-view-box,
.glass-modal, .mk-modal, .trip-modal-box, .plan-modal-box, .plan-drawer,
.edit-modal-box, .review-modal-box, .form-modal,
#data-modal .plain-card, #reset-modal .plain-card, #new-diary-modal .app-card) {
background: var(--modal-bg, var(--white)) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* 浮层：走浮层档（.94 / 40px）—— 短命、面积小、压在所有内容之上，用高白度换可读性
⚠️ 这里刻意【不】包含 `.menu` —— 顶栏导航下拉 `.navgroup .menu` 在每页都存在 4 个，
默认 opacity:0/visibility:hidden。它的白度已经由 --menu-bg 拉到 .94，
再叠 40px 模糊既看不出来、又白占 4 个模糊图层（审计实测每页因此多 4 个 ~41k px² 的大块）。 */
html:not(.dark) :is(.ui-toast, .topnav-menu, .topnav-drawer) {
background: rgba(var(--g-base), var(--g-alpha-pop));
border-color: rgba(var(--g-line), .98);
-webkit-backdrop-filter: blur(var(--g-blur-pop)) saturate(180%);
backdrop-filter: blur(var(--g-blur-pop)) saturate(180%);
}
/* 模态遮罩改为带模糊（浮层压在玻璃上是常态，靠高白度而非改结构解决） */
html:not(.dark) .ui-modal-overlay {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* ---- 配套修补：玻璃化会顺带打破这两处 ---- */
/* 滚动条拇指原本用 --border（已变成白色），浅色底上会看不见 */
html:not(.dark) *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); }
html:not(.dark) *::-webkit-scrollbar-thumb:hover { background: var(--c1); }
html:not(.dark) { scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
/* 进度条/占比条轨道原本用 --border-2（已变白）→ 白底白轨等于看不见，换成淡靛轨道 */
html:not(.dark) :is(.progress-track, .strength-bar, .rec-dim-bar, .fp-rank-bar) {
background: color-mix(in srgb, var(--text) 8%, transparent);
box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
/* 页面加载遮罩必须保持不透明，否则底下的光斑会透出来造成闪烁 */
html:not(.dark) .fl-page-loader { background: var(--haven-slate-100); }
/* ---- 降级与开关 ---- */
/* ① 浏览器不支持 backdrop-filter：回到接近不透明的底，布局零变化 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
html:not(.dark) {
--g-alpha: .92; --g-alpha-thin: .85; --g-alpha-strong: .95;
--g-alpha-pop: .98; --g-alpha-modal: .97;
}
}
/* ② 无玻璃降级 / 低性能档：html.no-glass 或 html.perf-low（可由 sidebar.js 或控制台设置） */
html.no-glass:not(.dark) {
--g-alpha: 1; --g-alpha-thin: 1; --g-alpha-strong: 1;
--g-alpha-pop: 1; --g-alpha-modal: 1;
--g-blur: 0px; --g-blur-thin: 0px; --g-blur-strong: 0px;
--g-blur-pop: 0px; --g-blur-modal: 0px;
--overlay: color-mix(in srgb, var(--text) 42%, transparent);
}
html.no-glass:not(.dark) body::after { display: none; }
/* 降级时也要把 JS 注入的光斑层一起关掉，否则"关了玻璃反而更花" */
html.no-glass:not(.dark) .gl-blobs { display: none; }
html.perf-low:not(.dark) :is(.card, .plain-card, .mk-card, .app-card, .metacard,
.analysis-stat-card, .plan-chart-card, .mk-table-wrap, .filter-bar,
.d3, .mod, .goal, .quick, .feed, .chart3d, .input, .glass-input) {
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html.perf-low:not(.dark) { --g-blur: 12px; --g-blur-strong: 14px; --g-blur-pop: 24px; --g-blur-modal: 20px; }
/* ---- 动效可访问性：玻璃依赖漂浮光斑与位移入场，对眩晕敏感用户不友好 ---- */
@media (prefers-reduced-motion: reduce) {
html:not(.dark) body::after { display: none; }
/* ★ 2026-09-23：只降模糊，不再降不透明度。
原实现把 --g-alpha 压到 .62，卡底变 var(--haven-slate-75) 更透 —— --tx3 从 3.56 掉到 3.43。
动效敏感不该以可读性为代价，白度保持标准档。 */
html:not(.dark) {
--g-blur: 10px; --g-blur-strong: 12px; --g-blur-pop: 20px; --g-blur-modal: 16px;
--g-alpha-pop: .96; --g-alpha-modal: .88;
}
}
.auth-view-empty.err { color: var(--bad); }
/* ==================== ⑫ 命令面板 / 光斑漂浮层 / 低性能开关（2026-09-15） ====================
* 这三件都由 sidebar.js 驱动，样式集中在这里：
* · .cmdk-* 命令面板（V3.0 可见入口 · 全站搜索）
* · .gl-blobs 浅色光斑漂浮层（JS 注入，见 sidebar.js 的 buildBlobs）
* · .ib.on 低性能模式开关的"已开启"态
* 两态通用：面板底色复用 --menu-bg（V2.0.3 起全实体：var(--white) / var(--surface)），所以深浅自动成立。 */
/* ---- 命令面板 ---- */
.cmdk-mask {
position: fixed; inset: 0; z-index: 9999;
display: none; align-items: flex-start; justify-content: center;
padding: 12vh 16px 16px;
background: var(--overlay);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cmdk-mask.show { display: flex; animation: cmdk-fade .18s ease; }
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
width: min(560px, 94vw); max-height: 62vh; display: flex; flex-direction: column;
background: var(--menu-bg); border: 1px solid var(--menu-border);
border-radius: var(--radius-16px); box-shadow: 0 26px 60px -18px color-mix(in srgb, var(--text) 45%, transparent);
overflow: hidden;
animation: cmdk-in .2s cubic-bezier(.22,1,.36,1);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-hd { display: flex; align-items: center; gap:var(--space-10px); padding:var(--space-13px-16px); border-bottom: 1px solid var(--line2); }
.cmdk-ico { display: flex; flex: none; }
.cmdk-ico svg { width: 17px; height: 17px; }
.cmdk-hd input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font-family: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--tx);
}
.cmdk-hd input::placeholder { color: var(--tx3); font-weight: 400; }
.cmdk kbd {
font-family: var(--mono); font-size: var(--fs-2xs); color: var(--tx3);
background: var(--surface-2); border: 1px solid var(--border);
padding:var(--space-2px-6px); border-radius: var(--radius-6px); flex: none;
}
.cmdk-list { overflow-y: auto; padding:var(--space-6px); }
.cmdk-item {
display: flex; align-items: center; gap:var(--space-10px); padding:var(--space-9px-11px); border-radius: var(--radius-11px);
text-decoration: none; color: var(--tx2); transition: background .14s, color .14s;
}
.cmdk-item i { display: flex; flex: none; }
.cmdk-item i svg { width: 17px; height: 17px; }
.cmdk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap:var(--space-1px); }
.cmdk-tx b { font-size: var(--fs-xs); font-weight: 700; color: var(--tx); }
.cmdk-tx em { font-style: normal; font-size: var(--fs-2xs); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-grp { flex: none; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--tx3); }
.cmdk-item.on { background: var(--nb-on-bg); }
.cmdk-item.on .cmdk-tx b, .cmdk-item.on .cmdk-tx em, .cmdk-item.on .cmdk-grp { color: var(--c1); }
.cmdk-item.on i { color: var(--c1); }
.cmdk-empty { padding:var(--space-22px-12px); text-align: center; font-size: var(--fs-2xs); color: var(--tx3); }
.cmdk-ft {
display: flex; align-items: center; justify-content: space-between; gap:var(--space-10px);
padding:var(--space-9px-14px); border-top: 1px solid var(--line2);
font-size: var(--fs-2xs); color: var(--tx3);
}
.cmdk-ft b { color: var(--c1); font-weight: 700; }
.cmdk-keys { display: inline-flex; align-items: center; gap:var(--space-3px); }
.cmdk-x {
width: 30px; height: 30px; flex: none; border: 0; border-radius: var(--radius-8px); cursor: pointer;
background: transparent; color: var(--tx3); font-size: var(--fs-lg); line-height: 1;
}
.cmdk-x:hover { background: var(--surface-2); color: var(--tx); }
.cmdk-sec {
padding:var(--space-9px-11px-5px); color: var(--tx3); font-size: var(--fs-2xs); font-weight: 700;
letter-spacing: .08em;
}
.cmdk-state { padding:var(--space-18px-12px); text-align: center; font-size: var(--fs-2xs); color: var(--tx3); }
/* ---- 光斑漂浮层（浅色已停用 → 取消底色光晕；深色承载 demo 深邃夜空弥散光晕）----
★★ 层叠顺序是这个功能的命门：body::after 与 .gl-blobs 若同为 z-index:-2，
则**树序**决定谁在上，而 ::after 永远排在最后 → ::after 会盖住 .gl-blobs。
实测后果：body::after 那层不透明渐变把光斑全挡了，整站背景变成近白（用户报的就是这个）。
所以这里刻意用 **-1**：负值越大越先画，-2（底+噪点）在下、-1（光斑）在上，
两者都仍在"负 z-index"阶段 → 依旧在所有正文内容之下，不影响可点性。 */
html:not(.dark) .gl-blobs { display: none; } /* 底色光晕已取消（2026-09-22）：浅色不再浮动光斑 */
/* 深色：深邃夜空弥散光晕（参考 深色-demo 经典极光调色盘）
JS 注入 5 个 ，深色下只启用其中 4 个充当 demo 的 4 个 orb */
/* V5.1.6：浮动 orbs 同步收敛 —— 绿 orb 停用、青/靛/紫降不透明度（.35/.35/.25 → .20/.26/.18），
与静态层同族同强度；blur 100px 不变。光晕仍是"深邃夜空"，只是不再五颜六色。 */
html.dark .gl-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html.dark .gl-blobs i { position: absolute; border-radius: var(--radius-50); filter: blur(100px); will-change: transform; }
html.dark .gl-blobs i:nth-child(1) { width: 520px; height: 520px; left: -80px; top: -100px; opacity: .20; background: radial-gradient(circle, var(--cyan-500), transparent 70%); animation: gl-fl1 26s ease-in-out infinite; }
html.dark .gl-blobs i:nth-child(2) { width: 600px; height: 600px; right: -120px; top: 40px; opacity: .26; background: radial-gradient(circle, var(--indigo-500), transparent 70%); animation: gl-fl2 32s ease-in-out infinite; }
html.dark .gl-blobs i:nth-child(3) { width: 480px; height: 480px; left: 30%; bottom: -80px; opacity: .18; background: radial-gradient(circle, var(--violet-500), transparent 70%); animation: gl-fl3 29s ease-in-out infinite; }
html.dark .gl-blobs i:nth-child(4) { display: none; }
html.dark .gl-blobs i:nth-child(5) { display: none; }
@keyframes gl-fl1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 45px) scale(1.1); } }
@keyframes gl-fl2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-75px, 60px) scale(.92); } }
@keyframes gl-fl3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -55px) scale(1.07); } }
/* JS 注入光斑层后，body::after 只保留「柔光渐变底」，避免与 .gl-blobs 叠加过曝 */
/* ⚠️ 本条与上面 `html:not(.dark) body::after` 是**同一层的两套取值**，改背景必须两处一起改。
注：sidebar.js 在非 reduced-motion 下几乎总会给 挂 .gl-blobs-on，
所以实际生效的多数是这一条 —— 网格漏掉这里就等于「大部分页面仍然没有网格」。 */
html:not(.dark).gl-blobs-on body::after {
background:
linear-gradient(color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px),
radial-gradient(900px 520px at 50% -12%, var(--white) 0%, transparent 62%),
radial-gradient(1000px 620px at 108% -4%, var(--blue-75-soft) 0%, transparent 58%),
radial-gradient(900px 640px at -8% 24%, var(--blue-75-calm) 0%, transparent 56%),
linear-gradient(180deg, var(--blue-50-warm) 0%, var(--haven-slate-100) 60%, var(--bg) 100%);
background-size: 48px 48px, 48px 48px, auto, auto, auto, auto;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* ---- 低性能模式开关的开启态 ---- */
.ib.on { color: var(--c1); border-color: var(--border-glow); background: var(--glow-primary); }
@media (prefers-reduced-motion: reduce) {
html:not(.dark) .gl-blobs { display: none; }
.cmdk-mask.show, .cmdk { animation: none; }
}
@media (max-width: 860px) {
.cmdk-mask { padding: 0; align-items: stretch; }
.cmdk { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: var(--radius-0); }
.cmdk-hd { min-height: 58px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; }
.cmdk-list { flex: 1; padding: 6px 8px max(8px, env(safe-area-inset-bottom)); }
.cmdk-item { min-height: 48px; padding:var(--space-10px-12px); }
.cmdk-ft { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
/* ==================== ⑬ 移动端基座（≤860px）· 2026-09-17 新增 ====================
* 依据 `HTML/无需上传/_mobile-audit.js` 在真机视口（390×844 / 360×800，CDP 设备模拟）下的实测：
* · 页面主体布局**本身没有横向溢出**（13 条越界里 9 条是装饰光球）→ 底子是好的，别大改
* · 真正的三类问题：① iOS 输入框自动放大 27 处 ② 触控目标 <44px 200+ 处 ③ 小字 <12px 多处
* 全部只在移动端生效，桌面端（≥861px）零影响。
* 改这里之后请重跑 `node HTML/无需上传/_mobile-audit.js` 验证，别凭感觉。
*/
@media (max-width: 860px) {
/* ① iOS 输入框自动放大 —— 控件字号 <16px 时 iOS 会把**整页**强制放大，
点一下输入框页面就"跳"，手机端最难受的问题之一（实测 12 处，tools 最集中）。
⚠️ 必须 !important：各页输入框字号由 #id / Tailwind 类 / 内联样式设定，特异性高于本层。 */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
select,
textarea { font-size: var(--fs-input) !important; }
/* ② 触控目标 ≥44px —— 只扩**热区**、不动视觉尺寸（直接放大图标会改变顶栏观感）。
34×34 的图标按钮 inset:-5px 后热区正好 44×44。
⚠️ 探针 `_mobile-probe.js` 已按「含 ::after 负 inset 的有效热区」计算，别只量元素 rect。 */
/* ⚠️★ 这里**不能再列 `#auth-view-fab`**（V1.9.9 修）：auth.js 给「切换数据」浮动按钮写的是
`.auth-view-fab{position:fixed;left:20px;bottom:20px}`（注释原文「左下角固定切换数据按钮」），
而本条用的是 **ID 选择器**（特异性 1,0,0）⇒ 不管加载顺序都能压过 auth.js 的类选择器（0,1,0），
把它变成 `position:relative`。后果有两层：
① `bottom:20px` 从「距视口底 20px」变成「相对自身流内位置**上移** 20px」；
② 它回到普通流 ⇒ 每个页面末尾凭空多出 **31px** 文档高度（实测 de.scrollHeight 844 → 875），
于是**手机端每一页都能被拖出 31px**；在独立 App（standalone）里就是整页橡皮筋回弹、
上下露出空白背景 —— 用户 2026-09-21 报的「空备忘录上下滑动出现空白」正是它。
它本来也不需要 relative：`position:fixed` 同样会给绝对定位的 `::after` 提供包含块（见下一行）。 */
.ib, .av, .logo, .m-drawer-hd .x { position: relative; }
.ib::after, .av::after, .logo::after, .m-drawer-hd .x::after { content: ''; position: absolute; inset: -5px; }
/* 模拟查看浮动按钮（auth.js 全站注入）只有 31px 高，单独多扩一点 */
#auth-view-fab::after { content: ''; position: absolute; inset: -7px; }
/* ② b) 横向「条状」控件（tab / 导航项 / 抽屉按钮 / 标签）直接给足 44px 高：
它们本来就是整条可点，加高不破坏排版，也比扩热区更可预期。 */
.fin-tab, .travel-tab, .site-btn, .tgchip, .tool-nav-link,
.m-actions .nb, .m-nav .mi { min-height: 44px; }
/* ③ 小字下限 12px —— 实测这些类族在手机上分别只有 8.5 / 10.5 / 11px，确实难读 */
.brand .os, .m-foot, .mg-l, .sc-sub, .sec .no, .tgchip, .field label { font-size: var(--fs-2xs) !important; }
/* ④ iOS 安全区 —— 配合各页 viewport 的 viewport-fit=cover。
顶栏是 position:sticky;top:0，不补 padding 会被状态栏/刘海压住。 */
.site-header.topbar { padding-top: env(safe-area-inset-top, 0px); }
.m-drawer { padding-top: env(safe-area-inset-top, 0px); }
/* ★ V4.0.1：底部安全区**只在最后一个子元素（.m-foot）补一次**。
原来 `.m-actions` 也补了一次，且 `.m-drawer` 自身还有一层 ⇒ 刘海机底部空白约三倍。 */
.m-drawer .m-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* ★ 版本号 `.brand .os` 在 ≤520px 隐藏 —— **与 app.html 保持一致**
* app.html 里早就有这条（`@media(max-width:520px){.brand .os{display:none}}`），
* 而子页（sidebar.js 生成的顶栏）没有 → 手机上「有的页面写版本号、有的没写」，用户反馈为不一致。
* 选「统一隐藏」而不是「统一显示」的理由：手机实测（390px）显示时版本号会**折成两行**，
* 把品牌区撑到 3 行高、页面标题被挤扁（见 design-file/docs/version-v1.10.0/ 的截图）；
* 顶栏空间宝贵而版本号信息价值低。**桌面端（≥521px）与移动抽屉的 `.m-foot` 仍保留。**
* ⚠️ 改这里的断点要同步 app.html 的同名规则，否则又会不一致。 */
@media (max-width: 520px) {
.brand .os { display: none; }
}
/* ==================== ⑮ 输入框边框（V2.0.3）：非聚焦统一加深，聚焦仍走主题色 ====================
用户反馈浅色下输入框未聚焦时边框太浅、看不清输入范围 ⇒ 统一为雾蓝 color-mix(in srgb, var(--primary) 32%, transparent)。
!important：finance-modules 等模块会在页面内后注入