/* ============================================================
Klog 样式 5/5 · 视图层（历史追加区）
装：各业务视图自己的皮肤——习惯 / 打卡热力 / 统计 / 记账 / 搜索 / 回收站 /
个人中心 pfg / 抽屉与滚轮 / 小部件 等，按时间线一路追加至今。
⚠ 本片大量规则是对 01-04 的定向覆盖，必须最后加载。
⚠ 已知病灶：历史上每加一个页面就往这里续一段带自己类名的样式，从不复用
03 的组件层，导致同一视觉模式被复制几十遍。新增视图样式前，先跑
node dev/lab/css-bloat-gate.cjs 看有没有可复用的现成类。
─── 1008 拆分头结束 ─── */
/* ============================================================
阶段一增强：今日一言 / 快捷操作 / 数据洞察 / 分类
（.ov-hero / .ov-quote* 基线已随「概览 · 今日时间线 v1.0」迁移到文件末尾，
.ov-quick 横滑胶囊轨已随 1010 hero 信息重排撤除，此处只保留仍被空态使用的 .empty .btn）
============================================================ */
.empty .btn { display: inline-flex; align-items: center; gap: var(--sp-1); }
.empty .btn span { margin: 0; }
/* 0927：概览「本周」卡撤除，.insight-* 与 .ov-dist-*（分类分布条）随之退场。
下面的 .ov-bars 一族仍被统计页「完成趋势」（原名产出趋势）复用，别当死样式清掉。 */
.ov-bars { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-1); padding-top: var(--sp-1); }
.ov-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-1); min-width: 0; }
.ov-bar-n { font-size: var(--fs-micro); color: var(--text-4); height: 15px; line-height: 15px; font-variant-numeric: tabular-nums; }
.ov-bar { width: 58%; max-width: 22px; min-height: 3px; border-radius: var(--r-1); background: color-mix(in srgb, var(--primary) 34%, transparent); }
.ov-bar-col.is-today .ov-bar { background: var(--primary); }
.ov-bar-l { font-size: var(--fs-micro); color: var(--text-4); }
.ov-bar-col.is-today .ov-bar-l { color: var(--primary); font-weight: var(--fw-medium); }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-circle); flex-shrink: 0; vertical-align: -1px; }
/* 已归档区：习惯行用行内色点区分（待办无颜色，只有标题） */
.trash-title .cat-dot { margin-right: var(--sp-1); }
.cat-filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.cat-filter .chip { height: 30px; }
.cat-filter > * { flex-shrink: 0; } /* 移动端横向滚动布局下禁止 chips 被压缩折行 */
.cat-filter .chip .cat-dot { margin-left: 2px; }
.chip { white-space: nowrap; }
.todo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin-top: 3px; }
.todo-cat { display: inline-flex; align-items: center; gap: var(--sp-1); height: 19px; padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-micro); color: var(--text-3); background: var(--bg-card); }
.todo-cat .cat-dot { width: 7px; height: 7px; }
.todo-desc { font-size: var(--fs-micro); color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.field-hint { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--text-4); line-height: 1.6; }
/* 空态（友好文案 + 引导按钮） */
.empty .empty-ico { margin-bottom: 0; }
.empty-text { font-size: var(--fs-body); color: var(--text-3); margin: var(--sp-3) 0 var(--sp-3); line-height: 1.6; }
/* 分类管理弹窗 */
.cat-palette { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: relative; }
.cat-swatch { width: 24px; height: 24px; border-radius: var(--r-2); border: none; cursor: pointer; transition: transform var(--d-med) var(--ease-spring); }
/* hover 缩放只给真鼠标（触屏统一走下面的按压即时态）——
触屏上 tap 会粘住 :hover，原先那下「黑色再点会跳」其实是它：已选中的走早退、
DOM 没重建、粘住的 1.12 放了一下；其余颜色一点就被重绘换新节点，所以没份。 */
@media (hover: hover) {
.cat-swatch:hover { transform: scale(1.12); }
}
/* 按下缩小、松手回弹（1015 站主定）：按下走自己的快过渡（.1s 缩到 .9），
松手 :active 摘掉、交还基线那条 .32s 弹簧——cubic-bezier 的 1.56 过冲就是「一点弹性」。
两个旋钮：按下深度 .9；回弹劲度 = --ease-spring 的 1.56（越大越弹）。 */
.cat-swatch:active { transform: scale(.9); transition: transform var(--d-micro) ease-out; }
.cat-swatch.is-sel { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary); }
/* 头像底色「自动」档：不指定固定色 = 回退按名字哈希上色。虚线圈 + 字母 A 明示
「这是一模式、不是一个颜色」，与实色预设块一眼可分；选中时让位给上面的 .is-sel 主色环。 */
.cat-swatch-auto {
background: var(--bg-page); color: var(--text-3);
display: inline-flex; align-items: center; justify-content: center;
font-size: calc(12px * var(--fs-scale)); font-weight: var(--fw-semibold);
box-shadow: inset 0 0 0 1px var(--border);
}
/* 自定义颜色入口：虚线圈 + 加号（与「新增」同语言）；取到颜色后填色并显示勾。
虚线圈画在 ::before 上、不再用 border——border 参与盒模型，而色板「一行铺满」那一档
（.cat-palette.is-fit）里 flex 分给每枚的是内容盒、边框另加在外面，于是「+」永远比
同排预设枚宽 2~3px，一行看着就不齐（390 实测 29.11 对 30，对照实验：抹掉边框即齐）。
挪到 inset:0 的绝对定位伪元素上，圈仍压在盒子边缘、与 border 版逐像素同形，
但所有色块的盒模型从此完全相同。position:relative 必须自己带上：
基础档的 .cat-swatch 不带定位，桌面端这枚会挂到 .cat-palette 那一层去。 */
.cat-swatch-custom {
position: relative;
display: flex; align-items: center; justify-content: center;
background: transparent; color: var(--text-4);
border: none;
transition: transform var(--d-fast) var(--ease-float), color var(--transition-fast), background var(--d-base) linear;
}
.cat-swatch-custom::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 1.5px dashed var(--border-strong);
transition: border-color var(--transition-fast);
}
.cat-swatch-custom svg { width: 13px; height: 13px; display: block; }
@media (hover: hover) { .cat-swatch-custom:hover { color: var(--text-1); } }
@media (hover: hover) { .cat-swatch-custom:hover::before { border-color: var(--text-4); } }
.cat-swatch-custom.is-filled::before { border-color: transparent; }
.cat-custom-hex {
align-self: center; margin-left: 2px;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-micro); color: var(--text-4); letter-spacing: .02em;
}
/* ≤768 手机端样式 → 06-mobile.css */
/* ---- 自建取色抽屉（.wp-mask / .wp-sheet 外壳，黑白语言里只让颜色有彩色） ---- */
.cp-stage {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3); margin-bottom: var(--sp-4);
background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-3);
}
.cp-chip {
flex: none; width: 46px; height: 46px; border-radius: var(--r-3);
display: flex; align-items: center; justify-content: center;
background: #5DCAA5; color: var(--white); /* 底色=取色初值（JS 开面板即运行时改写）；白勾＝取色器功能色豁免 */
box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
transition: background var(--d-fast) linear, color var(--d-fast) linear;
}
.cp-chip .habit-check { width: 20px; height: 20px; }
.cp-stage-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-stage-txt b { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); }
.cp-stage-txt em { font-style: normal; font-size: var(--fs-micro); color: var(--text-4); line-height: 1.5; }
.cp-ramp { flex: none; display: flex; gap: var(--sp-1); }
.cp-ramp i {
width: 26px; height: 26px; border-radius: var(--r-2);
display: flex; align-items: center; justify-content: center;
font-style: normal; font-family: var(--font-mono); font-size: var(--fs-10); line-height: 1;
transition: background var(--d-fast) linear, color var(--d-fast) linear;
}
.cp-sv {
position: relative; height: 150px; border-radius: var(--r-3);
/* 取色器饱和/明度平面：这里的纯黑/纯白是 HSL 功能色（V=0 必须是绝对黑，否则选不出暗色、
S=0 必须绝对白），不是 UI 表面色——是「全站禁可见纯黑」红线的登记豁免之一（另两类是
mask-image 通道端点与 rgba(0,0,0,α) 半透明遮罩）。改近黑会让取色失真，勿动。 */
background:
linear-gradient(to top, #000000, rgba(0, 0, 0, 0)),
linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)),
hsl(calc(var(--cp-h, 210) * 1deg), 100%, 50%);
box-shadow: inset 0 0 0 1px var(--border);
touch-action: none; cursor: crosshair;
}
.cp-hue {
position: relative; height: 26px; margin-top: var(--sp-3); border-radius: var(--radius-pill);
background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
box-shadow: inset 0 0 0 1px var(--border);
touch-action: none; cursor: ew-resize;
}
.cp-thumb {
position: absolute; width: 22px; height: 22px; border-radius: var(--r-pill);
border: 2px solid var(--white); background: transparent; pointer-events: none; /* 取色器把手白环＝功能色豁免（DESIGN_SYSTEM §1） */
box-shadow: 0 0 0 1px rgba(17, 17, 17, .3), 0 2px 6px rgba(17, 17, 17, .3);
transform: translate(-50%, -50%);
transition: transform var(--d-fast) var(--ease-float);
}
.cp-sv .cp-thumb {
left: calc(var(--cp-s, 0) * 100%);
top: calc((1 - var(--cp-v, 1)) * 100%);
background: hsl(calc(var(--cp-h, 210) * 1deg), calc(var(--cp-s, 0) * 100%), calc(var(--cp-v, 1) * 50%));
}
.cp-hue .cp-thumb { top: 50%; left: calc(var(--cp-h, 0) * 100% / 360); background: hsl(calc(var(--cp-h, 0) * 1deg), 100%, 50%); }
.cp-sv.is-drag .cp-thumb, .cp-hue.is-drag .cp-thumb { transform: translate(-50%, -50%) scale(1.16); }
.cp-sv:focus-visible, .cp-hue:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* 色值井（1029 换新款）：旧版是「色值」两个字 + 一整条 form-input 大灰框，那是站内很早以前的
表单长相（标签单占一列、框子跟正文表单同款）。现在走现行井语言——井里住一枚实时上色的
色块，HEX 是井内的等宽读数；标签不再单占一列（读屏仍吃 input 的 aria-label）。
非习惯场景（人物头像底色）里「本周热力档位」那一块不渲染，这枚小色块就是唯一的实时预览。
三态与站内输入井同源：静息 --fld-fill → 聚焦整井主描边 + --focus-glow 柔光。 */
.cp-hex-well {
display: flex; align-items: center; gap: var(--sp-3);
margin-top: var(--sp-4); height: 44px; padding: 0 var(--sp-3);
background: var(--fld-fill); border: 1px solid transparent; border-radius: var(--fld-r);
transition: background var(--d-fast) linear, border-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
}
.cp-hex-well:focus-within { background: var(--bg-card); border-color: var(--primary); box-shadow: var(--focus-glow); }
.cp-hex-dot {
flex: none; width: 22px; height: 22px; border-radius: var(--r-2);
background: #5DCAA5; color: var(--white); /* 底色=取色初值（JS 开面板即改写），与 .cp-chip 同属取色器材质豁免 */
box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
transition: background var(--d-fast) linear;
}
.cp-hex {
flex: 1; min-width: 0; height: 100%; padding: 0; border: none; background: none; outline: none;
font-family: var(--font-mono); font-size: calc(15px * var(--fs-scale)); letter-spacing: .06em; text-transform: uppercase;
color: var(--text-1); caret-color: var(--primary);
}
.cp-sheet .wp-foot { margin-top: var(--sp-6); }
/* 桌面端「居中对话框」形态见文件末尾的 .wp-mask.cp-mask 块：
必须排在 .wp-sheet 基础规则之后并带上 .wp-mask 前缀，否则会被同特异性的 width:100% / 24px 顶圆角反压 *//* (1008 死规则清理) *//* (1008 死规则清理) *//* (1008 死规则清理) */
.cat-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 2px; border-bottom: 1px solid var(--border); }
.cat-row:last-child { border-bottom: none; }/* (1008 死规则清理) *//* (1008 死规则清理) *//* (1008 死规则清理) */
/* flex: none 是补的一笔真 bug（真机截图）：28×28 的图标钮在手机行里是唯一可被压缩的
弹性项——信息区是 flex:1 1 0%（basis 0 不参与收缩）、角色胶囊写了 flex-shrink:0，
于是内容最长的那一行（「当前」标签那行）把额度钮挤成 0 宽，整列看着缺一格。
图标钮在任何一行里都不该被压，所以收在基类上，不给用户页开特例。 */
.cat-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: none; border-radius: var(--radius-btn); background: transparent; color: var(--text-3); cursor: pointer; }
.cat-act svg { width: 14px; height: 14px; }
@media (hover: hover) { .cat-act:hover { background: var(--bg-hover); color: var(--text-1); } }
@media (hover: hover) { .cat-act-del:hover { color: var(--status-bad); } }
.cat-row-empty { padding: var(--sp-3) 2px; text-align: center; font-size: var(--fs-caption); color: var(--text-4); }
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
阶段二：子任务 / 重复 / Markdown / 置顶 / 习惯打卡
============================================================ */
/* .av-colors-k：头像底色那一行的行首（1029 搬进头像抽屉后它住在抽屉里，不是一张表单，
用 div 而不是 label——label 得指向一个控件，这里是一组色块按钮）。
副说明的字号/墨色必须与表单里的 label .opt 同一把尺，所以并进同一条规则，不再抄一遍。 */
label .opt, .av-colors-k .opt { color: var(--text-4); font-size: var(--fs-micro); font-weight: 400; }
/* 子任务编辑器 */
.sub-editor { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.sub-row {
display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2);
border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg-card);
transition: transform var(--d-base) var(--ease-float); /* 拖动让位补间（§4.3b 四口同一套） */
}
.sub-row.is-done .sub-title { color: var(--text-4); text-decoration: line-through; }
.sub-check { flex-shrink: 0; }
.sub-title { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-del { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--radius-btn); background: transparent; color: var(--text-4); cursor: pointer; }
.sub-del svg { width: 13px; height: 13px; }
@media (hover: hover) { .sub-del:hover { background: var(--bg-hover); color: var(--status-bad); } }
.sub-add { display: flex; gap: var(--sp-2); }
.sub-add .form-input { flex: 1; }
.sub-add .btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; }
.sub-add .btn svg { width: 15px; height: 15px; }
/* 待办行徽标：子任务进度 / 重复 */
.todo-flag {
display: inline-flex; align-items: center; gap: var(--sp-1); height: 19px; padding: 0 var(--sp-2);
border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--text-3);
font-size: var(--fs-micro); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.todo-flag svg { width: 11px; height: 11px; }
.todo-flag-rep { color: var(--text-3); }
/* 重复规则：每周几 / 每月几号 */
.wd-row { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); }
.wd-btn {
flex: 1; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-btn);
background: var(--bg-card); color: var(--text-3); font-size: var(--fs-caption); cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
@media (hover: hover) { .wd-btn:hover { border-color: var(--border-strong); color: var(--text-1); } }
.wd-btn.active { border-color: var(--primary); color: var(--text-1); font-weight: var(--fw-medium); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.dom-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--text-3); }
.dom-row .form-input { width: 84px; }
/* Markdown 编辑 / 预览 */
.md-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
/* 「内容」这行标题包在 .md-field-head 里（同一行还要放格式条/预览分段），
`.field > label` 打不到它——1104 前它一直在吃正文默认字，是第六档。
字形已并进 03 的字段标题唯一档（那条选择器列表里有 .md-field-head > label），
这里不再重复声明；fgPaintIcons 认它，图标仍挂在这一行。 */
/* 备忘表单的紧凑分段（复用 .seg 组件，选中态 = 主色填充） */
.md-seg button { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-micro); }
/* 备忘快捷格式条：仅手机端（JS 门控 wbCoarse）。内嵌进弹窗 flex 布局，
贴在底部按钮栏上方——键盘顶起时视口收缩、弹窗变矮，工具栏自然落到键盘正上方。 */
.md-fmt-slot { flex: 0 0 auto; display: flex; justify-content: center; padding: var(--sp-2) var(--sp-3); }
.md-fmt-slot[hidden] { display: none; }
.md-fmt-bar {
display: flex; align-items: center; gap: 2px; padding: var(--sp-1);
max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-3);
box-shadow: var(--shadow-float);
animation: mdFmtIn var(--d-base) var(--ease-enter);
}
.md-fmt-bar::-webkit-scrollbar { display: none; }
@keyframes mdFmtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.md-fmt-bar .mdb {
min-width: 42px; height: 42px; padding: 0; flex: none;
border: none; background: transparent; color: var(--text-2);
border-radius: var(--r-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
font-size: calc(17px * var(--fs-scale)); line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--d-micro) ease;
}
.md-fmt-bar .mdb:active { background: var(--bg-hover); color: var(--text-1); transform: scale(.9); }
.md-fmt-bar .mdb b { font-weight: 700; }
.md-fmt-bar .mdb i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.md-fmt-bar .mdb u { text-decoration: underline; text-underline-offset: 2px; }
.md-fmt-bar .mdb s { text-decoration: line-through; }
/* 内联格式与标题之间的发丝分隔线 */
.md-fmt-bar .mdb-div { width: 1px; height: 22px; flex: none; margin: 0 var(--sp-1); background: var(--border); }
/* 标题按钮：更紧凑，字号阶梯暗示层级 */
.md-fmt-bar .mdb-h { min-width: 38px; font-weight: 600; letter-spacing: .2px; }
.md-fmt-bar .mdb-h[data-h="1"] { font-size: calc(16px * var(--fs-scale)); }
.md-fmt-bar .mdb-h[data-h="2"] { font-size: calc(15px * var(--fs-scale)); }
.md-fmt-bar .mdb-h[data-h="3"] { font-size: calc(14px * var(--fs-scale)); }
.md-fmt-bar .mdb-h[data-h="4"] { font-size: calc(13px * var(--fs-scale)); }
@media (prefers-reduced-motion: reduce) {
.md-fmt-bar { animation: none; }
}
.md-body {
border: 1px solid var(--border); border-radius: var(--radius-btn);
background: var(--bg-card); padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-caption); color: var(--text-2); line-height: 1.7; overflow: auto;
min-height: 140px; max-height: 320px;
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { color: var(--text-1); margin: var(--sp-3) 0 var(--sp-1); line-height: 1.4; }
.md-body h1 { font-size: calc(17px * var(--fs-scale)); } .md-body h2 { font-size: calc(15px * var(--fs-scale)); } .md-body h3 { font-size: calc(14px * var(--fs-scale)); } .md-body h4 { font-size: calc(13px * var(--fs-scale)); }
.md-body p { margin: var(--sp-1) 0; }
.md-body ul, .md-body ol { margin: var(--sp-1) 0; padding-left: 1.4em; }
.md-body li { margin: 2px 0; }
.md-body code { font-family: var(--font-mono); font-size: var(--fs-micro); background: var(--bg-soft); border-radius: var(--r-1); padding: 1px var(--sp-1); }
.md-body pre { background: var(--bg-soft); border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3); overflow: auto; margin: var(--sp-2) 0; }
.md-body pre code { background: transparent; padding: 0; }
.md-body blockquote { margin: var(--sp-2) 0; padding: var(--sp-1) var(--sp-3); border-left: 3px solid var(--border-strong); color: var(--text-3); }
.md-body a { color: var(--primary); }
.md-body img { max-width: 100%; border-radius: var(--radius-btn); }
.md-body hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-3) 0; }
.md-body table { border-collapse: collapse; margin: var(--sp-2) 0; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); }
.md-empty-hint { color: var(--text-disabled); font-size: var(--fs-caption); }
/* 标题字形吃 03 的字段标题唯一档（.check-line 整行就是标题，已列进那条选择器列表） */
.check-line { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; margin: var(--sp-1) 0 2px; }
.check-line input { accent-color: var(--primary); }
/* 备忘 · 档案移出备忘后的一行交代（2.49 M0-a）。
数字不单独设字族：--font-sans 栈首的 KlogNum 已认领 0-9，裸文本里的数字自动等宽。
不设 display，所以 hidden 属性吃 UA 的 [hidden]{display:none}，不另开一条死规则。 */
.memo-card-hint { margin: var(--sp-2) 2px 0; text-align: center; font-size: var(--fs-caption); color: var(--text-4); }
/* 备忘置顶 */
.memo-card.is-pinned { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.memo-pin {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 26px; height: 26px; border: none; border-radius: var(--radius-btn);
background: transparent; color: var(--text-4); cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast), transform var(--d-fast) var(--ease-float);
}
.memo-pin svg { width: 14px; height: 14px; }
@media (hover: hover) { .memo-pin:hover { background: var(--bg-hover); color: var(--text-1); transform: rotate(-12deg); } }
.memo-pin.on { color: var(--primary); }
.memo-pin.on svg { fill: color-mix(in srgb, var(--primary) 18%, transparent); }
/* 标签管理 */
/* 习惯打卡 */
.habit-today-panel { margin-bottom: var(--sp-4); }
.habit-today-panel .panel-head .t-micro { font-size: var(--fs-micro); color: var(--text-4); }
/* 完成度提示（2026-10-03 方案 B）：卡头两行制——标题行 + 分段进度条行。
一段 = 一个习惯，打卡点亮纯黑（你点名的黑进度条；习惯色只留在色点/热力图，
1003 真机反馈「颜色一多就花」后收色），右侧挂 N/M 计数；
习惯数为 0 时整行 hidden（JS 控制），不再出现「0/0」噪声 */
.panel-head .ph-title { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.habit-today-panel .panel-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.hb-head-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.hb-head-bar { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.hb-head-bar[hidden] { display: none; }
.hb-segbar { flex: 1; display: flex; gap: var(--sp-1); min-width: 0; }
.hb-seg { flex: 1 1 0; min-width: 0; height: 6px; border-radius: var(--radius-pill); background: var(--bg-count); }
.hb-seg.on { background: var(--primary); }
.hb-segnum { flex: none; display: flex; align-items: baseline; gap: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-4); font-size: var(--fs-12); line-height: 1; }
.hb-segnum b { font-size: var(--fs-num-sm); font-weight: var(--fw-bold); color: var(--text-1); }
.hb-segnum i { font-style: normal; }
.habit-today-row {
display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--border); font-size: var(--fs-caption); color: var(--text-2);
}
.habit-today-row:last-child { border-bottom: none; }
.habit-today-row .row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streak-mark { font-size: var(--fs-micro); color: var(--text-4); flex-shrink: 0; }
/* 主胶囊两态（2026-10-03）：未打卡 = 黑实底「打卡」；已打卡 = 淡墨底 + 墨色字。
全部从 --text-1 / --bg-card 派生 → 亮暗主题自适应；习惯色只留在色点与热力图，
行内不再复涂（1003 用户反馈「颜色一多就花」后收色）。触屏 hover 复位段只需还原变量 */
.habit-toggle-btn {
--hb-bg: var(--primary);
--hb-fg: var(--on-primary);
flex-shrink: 0; height: 30px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
border: none; background: var(--hb-bg); color: var(--hb-fg);
font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer;
transition: all var(--transition-fast);
}
@media (hover: hover) { .habit-toggle-btn:hover { background: var(--primary-hover); color: var(--on-primary); } }
.habit-toggle-btn.on {
--hb-bg: color-mix(in srgb, var(--text-1) 7%, var(--bg-card));
--hb-fg: var(--text-1);
display: inline-flex; align-items: center; gap: var(--sp-1);
}
@media (hover: hover) {
.habit-toggle-btn.on:hover {
--hb-bg: color-mix(in srgb, var(--text-1) 11%, var(--bg-card));
}
}
.habit-check { width: 14px; height: 14px; display: block; }
.habit-toggle-btn:active { transform: scale(.96); }
.habit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--card-gap); }
.habit-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card); min-width: 0;
transition: border-color var(--transition-fast), transform var(--d-base) var(--ease-float), box-shadow var(--d-base) var(--ease-float);
}
@media (hover: hover) { .habit-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-hover); } }
.habit-name { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 1021 站主令：连续/本月两枚数据进标题行贴右缘（卡上编辑/停用钮已撤，.habit-ops 随删）。
align-self: flex-end 让 12px 小字的盒底与 16px 标题盒底齐平（色点仍垂直居中）；
flex-shrink:0 + nowrap 保住数值不被长标题挤断行——挤名字（名字本来就有省略号）。 */
.habit-meta { display: flex; gap: var(--sp-3); align-self: flex-end; flex-shrink: 0; font-size: var(--fs-caption); color: var(--text-4); white-space: nowrap; }
.habit-meta b { color: var(--text-1); font-variant-numeric: tabular-nums; }
/* ---- 打卡热力（本周 7 格 + 详情弹窗周/月/年） ---- */
.hm-cell {
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-1); background: var(--hm-0); color: var(--hm-ink-0);
box-shadow: inset 0 0 0 1px var(--hm-line);
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-medium);
}
.hm-l0 { background: var(--hm-0); color: var(--hm-ink-0); }
/* 1~3 档由「习惯自己的颜色」派生：JS 把亮/暗两套档位与墨色写在 .hb-heat / .hm-panel 的 style 上，
取不到变量时回落品牌绿 token（如站外预览、旧数据） */
.hm-l1 { background: var(--hm-a, var(--hm-1)); color: var(--hm-ka, var(--hm-ink-1)); box-shadow: none; }
.hm-l2 { background: var(--hm-b, var(--hm-2)); color: var(--hm-kb, var(--hm-ink-2)); box-shadow: none; }
.hm-l3 { background: var(--hm-c, var(--hm-3)); color: var(--hm-kc, var(--hm-ink-3)); box-shadow: none; }
[data-theme="dark"] .hm-l1 { background: var(--hm-ad, var(--hm-1)); color: var(--hm-kad, var(--hm-ink-1)); }
[data-theme="dark"] .hm-l2 { background: var(--hm-bd, var(--hm-2)); color: var(--hm-kbd, var(--hm-ink-2)); }
[data-theme="dark"] .hm-l3 { background: var(--hm-cd, var(--hm-3)); color: var(--hm-kcd, var(--hm-ink-3)); }
.hm-cell.is-today { box-shadow: 0 0 0 1.5px var(--primary); }
.hm-cell.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-disabled); }
.hm-cell.is-pad { background: transparent; box-shadow: none; }
.hm-dot { width: 3px; height: 3px; border-radius: var(--r-circle); background: var(--text-disabled); display: block; }
/* 周视图格子里的次数：包一层 .hm-v 便于原位改写，外观完全继承格子 */
.hm-v { font: inherit; line-height: 1; display: inline-block; }
/* 卡片内：只给本周 7 格 */
.hb-heat { margin-top: var(--sp-3); }
.hb-heat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.hb-heat-title { font-size: var(--fs-micro); letter-spacing: .08em; color: var(--text-4); }
.hb-heat-sum { font-size: var(--fs-micro); color: var(--text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-heat-sum b { color: var(--text-1); font-weight: var(--fw-semibold); }
.hm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.hm-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; }
.hm-col em { font-style: normal; font-size: var(--fs-10); line-height: 1; color: var(--text-4); }
.hm-col:has(.is-future) em { color: var(--text-disabled); }
.hm-sq { width: 100%; max-width: 34px; aspect-ratio: 1 / 1; }
.hm-sq-lg { max-width: 46px; font-size: calc(13px * var(--fs-scale)); }
.hm-sq-lg .hm-dot { width: 4px; height: 4px; }
/* 详情弹窗里的热力面板 */
.hm-panel {
margin-top: var(--sp-3); padding: var(--sp-3);
background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.hm-seg { width: 100%; }
.hm-seg .hm-tab { flex: 1; font-family: var(--font-mono); }
.hm-nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.hm-range {
flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
/* 1004：放不下时让尾巴那枚「返回 / 本周」整枚退到第二行，日期一行都不许断——
与 .st-range 同一排法，两族共用一套行为，别一处包一处不包 */
flex-wrap: wrap; row-gap: 2px;
font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-1);
font-variant-numeric: tabular-nums;
}
/* 日期本体（.hm-range 是 flex 容器，匿名文本项 CSS 选不中，必须包成真元素才管得住）：
与统计页 .st-range-t 同一条——nowrap，宁可徽章退行也不把「8/16」拆成两截 */
.hm-range-t { white-space: nowrap; }
/* 当期徽章（本周/本月/今年/本期）：全站统一黑色主胶囊（黑底白字），
与「返回」徽章同 padding / 字号 → 同尺寸档；心情、习惯、统计三处共用 */
.hm-cur {
font-style: normal; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
background: var(--primary); color: var(--on-primary);
font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: .02em; line-height: 1;
}
/* 返回徽章（回到本周/本月/今年/本期）：灰色系胶囊，与黑色当期徽章成对（一黑一灰、同尺寸）。
视觉是小胶囊，热区靠 ::after 外扩补回 ≥38px（同站内图标钮手法） */
.hm-back {
position: relative; border: none; cursor: pointer;
background: var(--bg-count); color: var(--text-2);
padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: .02em; line-height: 1;
transition: background var(--transition-fast), color var(--transition-fast);
}
.hm-back::after { content: ''; position: absolute; inset: -10px -6px; }
/* 两枚胶囊都不许被压扁：它们住在 .hm-range / .st-range 这只 flex 容器尾巴上，
默认 flex-shrink:1 会先把「返回」挤瘦再换行——1004 要的正好相反（日期优先，徽章退行） */
.hm-cur, .hm-back { flex: none; }
@media (hover: hover) { .hm-back:hover { background: var(--bg-count-active); color: var(--text-1); } }
.dp-nav[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.hm-summ { margin: var(--sp-2) 0; text-align: center; font-size: var(--fs-micro); color: var(--text-4); font-variant-numeric: tabular-nums; }
.hm-summ b { color: var(--text-2); font-weight: var(--fw-medium); }
/* 月视图：桌面把 7 列收到 336px 居中（格约 44px），一屏看完整月，不必滚动弹窗 */
.hm-wkrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); max-width: 336px; margin: 0 auto var(--sp-1); }
.hm-wkrow span { text-align: center; font-size: var(--fs-10); line-height: 1; color: var(--text-4); }
.hm-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); max-width: 336px; margin: 0 auto; }
.hm-day { width: 100%; aspect-ratio: 1 / 1; font-size: var(--fs-12); }
.hm-year { display: flex; align-items: flex-start; gap: var(--sp-1); margin-top: 2px; }
.hm-ylab { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; padding-top: var(--sp-4); flex: none; }
.hm-ylab span { font-size: var(--fs-9); line-height: 12px; color: var(--text-4); }
.hm-year-scroll {
flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior: contain;
padding-bottom: var(--sp-1); -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.hm-year-inner { display: inline-block; min-width: max-content; }
.hm-year-scroll::-webkit-scrollbar { height: 6px; }
.hm-year-scroll::-webkit-scrollbar-button { display: none; }
.hm-year-scroll::-webkit-scrollbar-track { background: transparent; }
.hm-year-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-1); }
@media (hover: hover) { .hm-year-scroll:hover::-webkit-scrollbar-thumb { background: var(--text-disabled); } }
.hm-mlab { display: flex; gap: 3px; height: 15px; }
.hm-mlab i {
flex: none; width: 12px; font-style: normal; font-size: var(--fs-9); line-height: 15px;
color: var(--text-4); font-family: var(--font-mono); text-align: left;
}
.hm-ygrid { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.hm-dot-c { width: 12px; height: 12px; border-radius: var(--r-1); }
.hm-legend {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border);
font-size: var(--fs-micro); color: var(--text-4);
}
.hm-lg-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.hm-legend .hm-cell { width: 12px; height: 12px; }
/* 面板过渡：切视图上移淡入、翻页按方向滑入（方向可感知），打卡只做今日格脉冲 */
@keyframes hmInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hmInLeft { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes hmInRight{ from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes hmPulse { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.hm-in-up { animation: hmInUp var(--d-toast) var(--ease-enter); }
.hm-in-left { animation: hmInLeft var(--d-toast) var(--ease-enter); }
.hm-in-right { animation: hmInRight var(--d-toast) var(--ease-enter); }
.hm-body.hm-in-left .hm-week > .hm-col,
.hm-body.hm-in-right .hm-week > .hm-col,
.hm-body.hm-in-up .hm-week > .hm-col { animation: hmInUp var(--d-push) var(--ease-enter) backwards; }
.hm-body .hm-week > .hm-col:nth-child(2) { animation-delay: .022s; }
.hm-body .hm-week > .hm-col:nth-child(3) { animation-delay: .044s; }
.hm-body .hm-week > .hm-col:nth-child(4) { animation-delay: .066s; }
.hm-body .hm-week > .hm-col:nth-child(5) { animation-delay: .088s; }
.hm-body .hm-week > .hm-col:nth-child(6) { animation-delay: var(--d-micro); }
.hm-body .hm-week > .hm-col:nth-child(7) { animation-delay: var(--d-micro); }
.hm-cell.hm-pulse { animation: hmPulse var(--d-enter) var(--ease-float); }
/* 区间标题与统计行只做透明度：它们和网格是相邻块级元素，
带 translateY 的入场会在动画起点压住今日格顶部那圈 1.5px 黑环（看着像被裁掉一下） */
@keyframes hmFade { from { opacity: 0; } to { opacity: 1; } }
.hm-swap.hm-in-up, .hm-swap.hm-in-left, .hm-swap.hm-in-right { animation-name: hmFade; animation-duration: var(--d-modal); }
@media (prefers-reduced-motion: reduce) {
.hm-in-up, .hm-in-left, .hm-in-right, .hm-cell.hm-pulse,
.hm-body .hm-week > .hm-col { animation: none; }
}
/* 多次打卡控件：勾选钮带当日次数，前面挂「减一次」小钮 */
.hb-ctl { display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.hb-times { min-width: 7px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: inherit; }
/* 「减一次」幽灵圆钮（2026-10-03）：去掉描边、退成浅灰底，热区仍由 ≤768 档放到 38px */
.hb-minus {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 26px; height: 26px; padding: 0; border-radius: var(--radius-pill);
border: none; background: var(--bg-muted); color: var(--text-3); cursor: pointer;
transition: all var(--transition-fast);
}
.hb-minus svg { width: 12px; height: 12px; display: block; }
@media (hover: hover) { .hb-minus:hover { background: var(--bg-hover); color: var(--text-1); } }
.hb-minus:active { transform: scale(.92); }
/* 今日行拖动手柄（2026-10-03）：子任务编辑器 .sub-handle 同款语言——
可见六点提手、touch-action:none 保证指针拖动在触屏上可靠；
拖起行 z-index 抬一层 + 容器禁选中，行 :active 沉底在拖拽期关闭防闪 */
.hb-grip {
flex: 0 0 22px; width: 22px; height: 36px; margin-left: -6px; padding: 0;
border: none; background: transparent;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-4); opacity: .55; cursor: grab;
touch-action: none; -webkit-user-select: none; user-select: none;
}
.hb-grip svg, .mg-grip svg { width: 14px; height: 14px; }
@media (hover: hover) { .hb-grip:hover, .mg-grip:hover { opacity: .85; } }
.hb-grip:active, .habit-today-row.is-dragging .hb-grip { cursor: grabbing; opacity: 1; }
/* 拖动排序三段（1105 站主点名，四个面同一套参数，见 DESIGN_SYSTEM §4.3b）：
① 拖起 = 轻微抬高（浮起阴影 + 卡面，JS 另给 scale(1.015)）
② 经过 = 让出空位（行基础条的 transform 补间滑开，此前是瞬跳）
③ 松手 = 落进空位（摘掉容器 is-dragging-mode＝补间回来了、浮起还挂在行上，
JS 把被拖行补到整行格点，动画跑完才落库重渲——重渲后 DOM 序 == 屏上序，不闪回）
「跟手禁补间」由容器态类压，不给落位另开一份浮起声明（那会被 bloat-gate 记成逐字重复）。 */
.habit-today-row { transition: transform var(--d-base) var(--ease-float); }
.habit-today-row.is-dragging {
position: relative; z-index: 3;
background: var(--bg-card); border-bottom-color: transparent;
border-radius: var(--r-3); box-shadow: var(--shadow-float);
}
.is-dragging-mode .habit-today-row.is-dragging { transition: none; } /* 拖起那行必须逐帧跟手 */
#habitTodayList.is-dragging-mode { user-select: none; -webkit-user-select: none; }
#habitTodayList.is-dragging-mode .habit-today-row:active { background: transparent; }
/* 长按主钮 = 取消今天：按住过程中缓慢压下一档并转危险色，
过渡 380ms 略短于 500ms 触发点，松手前就能看出「再按下去要取消了」 */
.habit-toggle-btn, .hb-minus {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
touch-action: manipulation;
}
.habit-toggle-btn.on.is-holding {
border-color: var(--status-bad); color: var(--status-bad); background: var(--tag-bad-bg);
transform: scale(.93);
transition: transform var(--d-enter) var(--ease-float), color var(--d-modal) ease, background var(--d-modal) ease, border-color var(--d-modal) ease;
}
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
阶段三：日记 / 回收站 / 数据与提醒
============================================================ */
.mood-chip {
display: inline-flex; align-items: center; gap: var(--sp-1); height: 22px; padding: 0 var(--sp-2);
border-radius: var(--radius-pill); background: var(--bg-soft);
font-size: var(--fs-micro); color: var(--text-2);
}
/* 心情选择（.mood-seg）：1003 起并入 seg-slide v2 分段体系——结构 .seg.seg-slide.mood-seg，
皮肤全在文件末尾「心情分段」块（与待办状态筛选同源，只多胶囊圆角）。此处不再有独立皮肤。 */
.field-diary-head { align-items: flex-end; }
.field-diary-head .field-grow { flex: 1; min-width: 0; }
.ov-diary-cta { margin-top: var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); }/* (1008 死规则清理) *//* (1008 死规则清理) */
.diary-bring .btn-link { font-size: var(--fs-caption); }
.diary-list { display: flex; flex-direction: column; gap: var(--card-gap); }
/* 本月心情带（1003）：月度心情小结轻条——材质与 .diary-card 同源（白卡描边投影），
左「N 月 · N 篇」右四色堆叠条（MOODS 顺序 好→糟，零档自然收 0 宽），下一行小结文案；
本月 0 篇整条 hidden，不占位。 */
.mood-band {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--card-gap);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
/* 行卡规矩：按下只沉底色不缩放 */
.mood-band:active { background: var(--bg-hover); }
.mood-band-go { flex-shrink: 0; display: inline-flex; color: var(--text-4); }
.mood-band-go svg { width: 14px; height: 14px; }
.mood-band-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); flex-shrink: 0; white-space: nowrap; }
.mood-band-track { flex: 1; min-width: 0; height: 8px; display: flex; gap: 2px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-muted); }
.mood-band-seg { flex-basis: 0; min-width: 0; }
.mood-band-note { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--text-4); }
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
心情热力页（1003）：壳=dd-modal 灰底画布 + hm-modal 桌面 560 宽；
网格/星期表头/翻页/图例/方向入场全借打卡热力 .hm-* 与 .dp-nav，此处只补：
① 大格（月/周）淡彩底——心情色 20% 调和白卡（暗色 30% 调和暗底），数字一律深墨，
治「全饱和大色块发花」；② 年视图小点面积小，维持本色保住全年扫读；
③ 小结行=文字+比例条的横向排布；④ 图例色点直接实色（打卡图例是档位灰绿）。
============================================================ */
.moodhm-modal .hm-cell.mh-has { cursor: pointer; }
.moodhm-modal .hm-sq.mh-has, .moodhm-modal .hm-day.mh-has {
background: color-mix(in srgb, var(--mood) var(--mw, 20%), var(--bg-card)); color: var(--text-2);
}
[data-theme="dark"] .moodhm-modal .hm-sq.mh-has, [data-theme="dark"] .moodhm-modal .hm-day.mh-has {
background: color-mix(in srgb, var(--mood) var(--mwd, 30%), var(--bg-card)); color: rgba(255, 255, 255, .92); /* 1025：原硬编 #15171B 与 --bg-card 暗档 Δ4，归单源 */
}
.moodhm-modal .hm-dot-c.mh-has { background: var(--mood); }
/* 「本月/今年」当期胶囊：打卡热力给的是习惯色浅档（绿系），心情页里绿色=很好，
换中性灰避免与心情四色打架 */
/* 时间文本包进白卡（心情 + 习惯两张热力面板共用 .hm-modal）：白底描边 + 微影；
圆角与两侧 dp-nav 一致（--radius-btn）；高度对齐翻页钮（桌面 26 / ≤768 38） */
.hm-modal .hm-range {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-btn);
box-shadow: var(--shadow-sm); min-height: 26px; padding: 0 var(--sp-3);
}
/* ≤768 手机端样式 → 06-mobile.css */
.moodhm-sumtxt { flex: 1; min-width: 0; }
.moodhm-sumtrack { flex: 0 0 120px; height: 8px; }
.diary-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4); cursor: pointer;
transition: border-color var(--transition-fast), transform var(--d-base) var(--ease-float), box-shadow var(--d-base) var(--ease-float);
}
@media (hover: hover) { .diary-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-hover); } }
.diary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.diary-date { display: flex; align-items: baseline; gap: var(--sp-2); }
.diary-date b { font-size: var(--fs-body); color: var(--text-1); }
.diary-date span { font-size: var(--fs-micro); color: var(--text-4); }
.diary-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.diary-sec { display: flex; gap: var(--sp-3); font-size: var(--fs-caption); line-height: 1.7; }
.diary-k { flex-shrink: 0; color: var(--text-4); width: 76px; }
.diary-v { color: var(--text-2); min-width: 0; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.diary-v.muted { color: var(--text-disabled); }
/* 回收站 */
.trash-rows { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.trash-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 2px; border-bottom: 1px solid var(--border); }
.trash-row:last-child { border-bottom: none; }
.trash-title { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-time { font-size: var(--fs-micro); color: var(--text-4); font-family: var(--font-mono); flex-shrink: 0; }
/* 个人中心：数据与提醒 */
/* 1030 清死样式：「可点击 KPI 卡」那一节（.summary-card[data-goto] 三态 + .kpi-grid 的窄屏
覆盖）随类名一起退役——两个类名在 index.php / assets/*.js / api / lib 里 0 命中。 */
.md-warn { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-btn); background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--text-2); font-size: var(--fs-micro); }
/* ============================================================
日历头部改版：左「年 月 ▾」下拉 + 右 ‹ › 切月
============================================================ */
.dp-head { justify-content: space-between; }
.dp-head-navs { display: flex; align-items: center; gap: 3px; }
.dp-ym { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-1); }
/* ============================================================
日历下钻动画（Win11 式）：下钻放大入场 / 返回收拢入场
============================================================ */
.dp-years, .dp-months, .dp-grid { transform-origin: 50% 40%; }
.dp-zoom-in { animation: dpZoomIn var(--d-modal) var(--ease-float); }
.dp-zoom-out { animation: dpZoomOut var(--d-modal) var(--ease-float); }
@keyframes dpZoomIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes dpZoomOut { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.dp-zoom-in, .dp-zoom-out { animation: none; }
}
/* 修复：全局 svg display:block 导致 dp-tl 内箭头折行 */
.dp-tl { display: inline-flex; align-items: center; }
/* 两列格里的 label（优先级/截止时间等）：字形与下间距都在 03 的字段标题唯一档里
（`.field > label, .field-row > div > label`），此处不再另写一遍。 */
/* 无子任务时列表容器不占位，避免 label 到输入行间距偏大 */
.sub-editor:empty { display: none; }
/* ============================================================
打卡状态切换过渡：勾/文字弹性入场 + 连续天数淡入
============================================================ */
@keyframes btnPop {
0% { transform: scale(.88); opacity: .4; }
70% { transform: scale(1.03); }
100% { transform: scale(1); opacity: 1; }
}
.btn-pop { animation: btnPop var(--d-modal) var(--ease-float); }
@keyframes fadeSoft { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeSoft var(--d-push) ease-out; }
@media (prefers-reduced-motion: reduce) {
.btn-pop, .fade-in { animation: none; }
}
/* ============================================================
详情弹窗（点击卡片/行 = 查看，编辑走表单）
—— 旧扁平详情结构（detail-hero/detail-title/detail-desc/detail-count/detail-kv）
已随 dd-modal 语言收口全部删除，详情语言只剩 .dd-* 一套。
============================================================ */
#dt-subs .sub-row { cursor: pointer; }
#dt-subs .sub-row .dt-sub-check { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; margin: 0; }
/* 弹窗链切换（编辑/新增表单、删除确认）：移动端新内容自顶部推入
—— 实现在文件末尾「手机端全局 UI/UX 优化 v1.0 · 6」，
须排在 cascade 等 ≤768 规则之后才能覆盖它们 */
/* ============================================================
移动端动效优化：退出柔和化 + 弹窗内容级联 + 列表 stagger
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 待办表格行递进（沿用 tbody-enter 触发，全端生效） */
.tbody-enter tr:nth-child(2) { animation-delay: .03s; }
.tbody-enter tr:nth-child(3) { animation-delay: .06s; }
.tbody-enter tr:nth-child(4) { animation-delay: .09s; }
.tbody-enter tr:nth-child(5) { animation-delay: var(--d-micro); }
.tbody-enter tr:nth-child(6) { animation-delay: var(--d-fast); }
.tbody-enter tr:nth-child(7) { animation-delay: var(--d-base); }
.tbody-enter tr:nth-child(n + 8) { animation: none; } /* 同上：桌面待办表格第 8 行起直接落终态 */
@media (prefers-reduced-motion: reduce) {
.modal-card.cascade .modal-body > *,
.list-cascade > *,
.content > .view.is-slide-out-l,
.content > .view.is-slide-in-r,
.content > .view.is-slide-out-r,
.content > .view.is-slide-in-l,
.header-txt.is-swap,
.tbody-enter tr { animation: none !important; }
}
/* ============================================================
移动端弹窗链：离场内容淡出（卡片背景常驻，无空白帧）
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.modal-card .modal-body, .modal-card .modal-foot { transition: none; }
.modal-card.leaving .modal-body, .modal-card.leaving .modal-foot { opacity: 0; }
}
/* ============================================================
用户管理页 + 角色徽章（Ultra / Max / Pro / Free，仅标识）
1017 方案 E：五档统一构造——淡底 bg@16% + 同色相加深 1px 内描边 bg@38%，扁平无投影。
描边走 inset box-shadow 而不是 border：桌面档只有 16px 高，加实 border 会吃掉
内容区 2px 让字顶边，也会撑动下面那条「抽屉等宽列」的基线。
层级另靠文字前的递增徽记（Free 无 → Pro 点 → Max 星 → Ultra 冠），
徽记由 app.js roleMarkHtml 出、吃 currentColor 与该行文字同色。
============================================================ */
.role-badge {
display: inline-flex; align-items: center; gap: var(--sp-1); height: 16px; padding: 0 var(--sp-1);
/* 1018 站主令：全站角色徽章统一为图3那种全圆胶囊——基类圆角从方角档 --radius-btn(r-1) 改成 --radius-pill，
桌面 / 账户卡 / 详情行 / 顶栏 / 抽屉 / 手机列表一并跟手机档一致（这是把上一版「桌面保持方角」的取舍反转）。 */
border-radius: var(--radius-pill); font-size: var(--fs-10); font-weight: var(--fw-semibold);
letter-spacing: .02em; vertical-align: middle; margin-left: var(--sp-1);
}
/* 档位徽记：11px 为桌面基准，≤768 与 ≥1025 两档跟着放大（见本文件下方两处媒体查询） */
.role-badge .rb-mark { display: inline-flex; width: 11px; height: 11px; flex: none; }
.role-badge .rb-mark svg { width: 100%; height: 100%; display: block; }
/* 三档彩色共用同一条构造，只差两枚局部令牌——层级由「色相 + 徽记」承担，不靠各写一遍样式 */
.role-badge.role-ultra, .role-badge.role-max, .role-badge.role-pro {
background: color-mix(in srgb, var(--rb-bg) 16%, transparent);
color: var(--rb-fg);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rb-bg) 38%, transparent);
}
.role-badge.role-ultra { --rb-bg: var(--role-ultra-bg); --rb-fg: var(--role-ultra-fg); }
.role-badge.role-max { --rb-bg: var(--role-max-bg); --rb-fg: var(--role-max-fg); }
.role-badge.role-pro { --rb-bg: var(--role-pro-bg); --rb-fg: var(--role-pro-fg); }
/* Free 走中性灰，不吃档位色板；描边用 border-strong 与其余三档同份量（原来是无边，站主点名「都加上描边」） */
.role-badge.role-free { background: var(--bg-soft); color: var(--text-4); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* 暗档 Free：--text-4 压在 --bg-soft 上实测只有 4.33:1，够不到 AA（1017 徽章台子量出来的）。
与 04-shell 里 .role-badge.role-local 暗档同一手——中性字提到 --text-3（约 8.4:1）。
明档不动：那边 --text-4 过 4.5，且刻意比三档彩色淡一档是层级表达的一部分。 */
[data-theme="dark"] .role-badge.role-free { color: var(--text-3); }
.users-rows { display: flex; flex-direction: column; gap: var(--card-gap); }
.user-row {
display: flex; align-items: center; gap: var(--sp-3);
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4);
}
.user-row-avatar {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 36px; height: 36px; border-radius: var(--radius-btn);
background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
font-size: var(--fs-body); font-weight: var(--fw-semibold);
}
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { display: flex; align-items: center; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-name .tag { margin-left: var(--sp-2); }
.user-row-name .role-badge { margin-left: var(--sp-1); }
.user-row-sub { margin-top: 2px; font-size: var(--fs-micro); color: var(--text-4); }
.users-denied {
padding: var(--sp-8) var(--sp-4); text-align: center; border: 1px dashed var(--border);
border-radius: var(--radius-card); color: var(--text-4); font-size: var(--fs-caption);
}
/* 手机端角色胶囊：与 .role-badge 共用色板（元素带双类），只放大形与热区；
复合选择器压过 ≤768 的 .role-badge 单类档（同元素双类必须写复合，后代选择器不生效） */
.u-role-pill.role-badge {
position: relative; flex-shrink: 0; border: 0; cursor: pointer;
height: 30px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
font-size: var(--fs-12); font-weight: var(--fw-semibold);
transition: transform var(--d-micro) ease, filter var(--transition-fast);
}
.u-role-pill.role-badge::after { content: ""; position: absolute; inset: -5px; } /* 视觉 30px，热区 40px */
.u-role-pill.role-badge:active { transform: scale(.94); filter: brightness(.92); }
.u-role-pill.role-badge .rb-mark { width: 13px; height: 13px; } /* 胶囊 30px 高、字 fs-12，徽记同档放大 */
/* 角色抽屉只有 4 行：刻意不带 .tf-list 类——wireSheetGrab 的选择器链认不到列表，
抽屉就按内容高度收起（同登录抽屉的无列表形态），不会被两档锁拉到 2/3 屏留大片空白；
把手下拉关闭 / 上滑橡皮筋照常 */
.u-role-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.u-role-list .tf-row { padding: var(--sp-4); }
/* 徽章定宽成等宽列，后面的角色说明文字左对齐到同一条基线。
1017 方案 E 给每枚徽章前加了徽记（图标 11px + 间距 4px），52px 装不下「◆ Ultra」，
故放宽到 68px——Free 没有徽记，靠 min-width + justify-content:center 仍与其余三行同宽同基线。 */
.u-role-list .tf-row .role-badge { margin-left: 0; min-width: 68px; justify-content: center; height: 22px; padding: 0 var(--sp-2); font-size: var(--fs-12); flex: none; }
.u-role-note { font-size: var(--fs-micro); color: var(--text-4); line-height: 1.7; padding: 0 2px calc(var(--sp-1) + var(--sab, 0px)); }
/* 用户管理行内的「每日额度」钮：壳整个借 .cat-act（与铅笔/删除同族，≤768 自动放大到 40 热区）。
开了小灶的在右上角点一颗实心点——它不占宽度（手机端那一行只有头像｜信息｜三颗钮的余量），
又能一眼看出「这个人是被单独开过档的」；具体数值点开看，不铺开成第四列文字。 */
.u-cap { position: relative; }
.u-cap.has-cap::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px;
border-radius: var(--r-circle); background: var(--primary); }
/* 桌面副行才写数值：手机端 .user-row-sub 没有 nowrap，多写一段字就把整行顶成两行 */
.u-cap-note { color: var(--text-3); }
/* 额度小灶页（用户管理 → 那颗额度钮）：卡片分组照站主 1007 参考稿，
方言全部用站内表单那一套——输入行走 .fg-row + .form-input（不是记一笔那只金额大账盒）、
快捷档借 .lg-pays/.lg-pay、两枚标借 .hm-cur/.hm-back、撤掉借标准 .btn.btn-sm.btn-danger。
这里只补把它们串起来的骨架，不新造视觉语言。 */
/* 手写 .fg-card 也要用 hidden 属性开关（撤掉那张卡）：媒体查询里 .fg-card 是 display:block，
会压掉 UA 的 [hidden]{display:none}——与 .st-navbtn 那颗出票钮同一类坑，不点名就收不回。 */
.fg-card[hidden] { display: none; }
.cap-bar { margin-top: var(--sp-3); }
.cap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
/* 表单行里裸放的按钮要贴右缘：.fg-row 的标题是定宽列（flex:0 0 auto），
只有 .form-input / .select-wrap 一族才 flex:1 顶到右边（同记一笔 .lg-dir 那一招）。 */
.fg-card .fg-row > .btn { margin-left: auto; }
/* 「撤掉」这颗借一句话那颗黑胶囊（.nl-act + .nl-act-btn 的材质），但 .nl-act 是为「悬浮」写的，
搬进卡片行要连带治它三条：① 桌面那条 `@media(min-width:769px){.nl-act{display:none}}`
会把这颗钮整颗藏掉（只给 .nl-sheet 留活口）；② 浮入动画 nlFloatIn 在常驻行里是多余的跳动；
③ 它是 span，不吃上面那条 `> .btn` 的贴右规则。
★ 必须写复合选择器 .nl-act.cap-pill（0,2,0）：媒体查询不加特异性，
单写 .cap-pill 会与那条桌面规则同分、按先后裁决，早晚被 display:none 盖掉。 */
.fg-card .fg-row > .cap-pill { margin-left: auto; }
.nl-act.cap-pill { display: inline-flex; animation: none; }
.cap-val { flex: none; margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: calc(16px * var(--fs-scale)); font-weight: var(--fw-semibold); color: var(--text-1); }
.cap-note { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--text-4); line-height: 1.6; }
/* 1018 站主续：要在手机端列表随时看每人今日额度（今用/余），撤销此前「手机端隐藏 u-cap-note」那条
（旧顾虑是怕顶两行，但注记在昵称下方的小字副行里，长了自然换到副行第二行，不动卡片主体那单行 头像｜昵称｜胶囊）。 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ---- 用户管理页内检索与统计（1011）-------------------------------------
三块全借现成外壳，本段只补它们凑进同一页缺的那点几何：
① 搜索框 = .search-field 药丸（搜索体系 v2 定「抽屉与桌面页内框共用一只框」），
基座里它是 inline-flex + min(320px,100%)，页内要通栏所以放宽成 100%；
② 总数 = .st-hero-n（统计页那只大数字，同档字号），装进 .panel 卡；
③ 角色筛选 = .cat-filter + .chip（待办/备忘/纪念日同一排分类芯片），人数走 .chip-cnt。
顺序账：以下全是单类，写在 33 行 .cat-filter 与 03 组件 61 行 .search-field 之后才压得住；
≤768 的 .cat-filter 横滑轨（161）与 .cat-filter .chip 38 高（2153）本段都不覆盖，照吃。
桌面整行可点，光标给到 pointer（手机端按下反馈已有 .user-row:active 那一档）。 */
.us-tools { margin-bottom: var(--module-gap); }
.us-search { width: 100%; margin-bottom: var(--card-gap); }
.us-stat { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.us-stat .us-filter { margin: var(--sp-3) 0 0; } /* .cat-filter 默认那 20 底距是给页外用的，卡里只留上距 */
/* 两排筛选（角色 / 邮箱）之间也吃这一条 12px——站内「同组筛选相互间收进 card-gap」的既有节奏，
所以不需要第二排单独开规则（分段器那版留下的 .us-mail-seg 随真机反馈撤掉）。 */
/* 0 人档：整颗降一档灰度。hover 复位并成一条写（拆成两条会与 .wd-btn:hover 那组逐字撞车，
撞进 bloat-gate 的重复组；合一条还顺手把 :hover 的特异性抬到 4 类，压得住 .chip:hover） */
.us-stat .chip[disabled], .us-stat .chip[disabled]:hover {
opacity: .45; border-color: var(--border); color: var(--text-3); cursor: default;
}
.user-row { cursor: pointer; }
/* 详情页头像：借 .user-row-avatar 那只材质，只在 hero 里放大一档。
并排那一行不新造 flex——套既有的 .dd-hero-head；只把自己那两行的竖排留白收掉
（挂在 .us-d-id 上而不是 .dd-hero-head 上：个人中心那页也在用后者，别连坐）。 */
.us-d-av { width: 46px; height: 46px; font-size: calc(18px * var(--fs-scale)); }
.us-d-id .dd-hero-name { margin-top: 0; }
.us-d-id .dd-hero-date { margin-top: 3px; }
/* 双类压 .dd-v（那条在 2296 行、比我靠后，单类写过去颜色被它吃回去） */
.dd-v.us-d-none { color: var(--text-disabled); }
/* ---- 停用（封号）· 详情页动作行（2.09）-------------------------------
停用页整屏借的就是详情那一套（.dd-hero / .dd-group / .dd-hero-name），
本段只补它独有的四样：禁行标记、解封时间那一句、管理员备注的原样呈现、底部一句去处说明。
1018 站主令：连「删除账号」这行也不涂红了（红太突兀），站内唯一的 dd-danger 使用者已去类，
这条报警色皮肤随其规则一并撤除；危险度回归文案「连同名下数据一并删除」+ confirmDeleteUser 二次确认。 */
.susp-mark {
display: inline-flex; width: 44px; height: 44px; border-radius: var(--r-circle);
background: var(--tag-bad-bg); color: var(--tag-bad-fg); align-items: center; justify-content: center;
}
.susp-mark svg { width: 24px; height: 24px; }
/* 备注是管理员写给人家看的一句原话：不截断、不折行成省略号，pre-wrap 让他自己换的行也算数 */
.susp-note {
padding: var(--sp-3) var(--sp-4); font-size: calc(15px * var(--fs-scale));
color: var(--text-2); line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.susp-tip { margin-top: var(--sp-3); padding: 0 var(--sp-1); font-size: var(--fs-micro); color: var(--text-4); line-height: 1.6; }
.susp-hint { font-style: normal; font-weight: 400; font-size: var(--fs-micro); color: var(--text-4); margin-left: var(--sp-1); }
/* 折叠态只留一行入口：那句说明跟着输入框一起收，
否则「保存后该账号需用新密码重新登录」会孤零零挂在入口行底下，读起来像已经展开了 */
.desc-field.is-collapsed > .field-hint { display: none; }
/* 侧栏用户名行：徽章跟随名字右侧（flex 对齐 + 溢出保护） */
.user-name { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.user-name .role-badge { margin-left: 0; flex-shrink: 0; }
.user-name { overflow: hidden; }
.user-name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ============================================================
自定义下拉（用户管理角色选择）：展开列表主题化
============================================================ */
.dd { position: relative; width: 96px; flex-shrink: 0; }
.dd-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-1); cursor: pointer; text-align: left;
}
.dd-toggle svg { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; transition: transform var(--d-fast) var(--ease-float); }
.dd.open .dd-toggle svg { transform: rotate(180deg); }
.dd-menu {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-btn);
box-shadow: var(--shadow-hover); padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px;
animation: ddIn var(--d-fast) var(--ease-enter);
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dd-item {
display: flex; align-items: center; justify-content: space-between;
border: none; background: transparent; border-radius: calc(var(--radius-btn) - 2px);
padding: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); cursor: pointer; text-align: left;
transition: background var(--transition-fast), color var(--transition-fast);
}
@media (hover: hover) { .dd-item:hover { background: var(--bg-hover); color: var(--text-1); } }
.dd-item.is-sel { color: var(--primary); font-weight: var(--fw-medium); }
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.dd-menu { animation: none; }
}
/* hidden 属性全局兜底：任何自定义 display 的元素，hidden 时必须真正隐藏
（.dd-menu 的 display:flex 覆盖过 hidden 默认样式 → 菜单常开） */
[hidden] { display: none !important; }
/* Ultra（创始人）：1017 权限徽章重设计（方案 E）——旧「双金渐变 + 内描边」撤掉，
Ultra 并入本文件上方那条与 Max/Pro 共用的淡底+同色描边构造（只绑 --role-ultra-bg/fg）。
顶配身份改由「金色相 + 一枚皇冠」承担，不再靠材质化装饰（那做法在同族里像穿了礼服）。
故此处不再单独给 .role-badge.role-ultra 写样式。 */
/* ============================================================
移动端 tabbar 布局（显式 margin 版）：dock 滑动动画可过渡
胶囊宽度恒定 = 容器宽 - --dock-r（那 70px 是留给圆形加号的席位），两态差别只剩
「本视图有没有加号」：有 → margin-left:0 左贴；没有 → 平移到正中。
居中量由 --dock-r 算出（r/2），≤380 档只换这一个令牌——历史上 70/62 与 35/31
各写两份，改一处忘一处就出过「dock 右移 66px、贴死屏幕右边」的实测 bug。
两态都显式 transform:none：只留 margin-left 一位移源。
0925 备忘：试过「概览+统计两席 / 收窄居中」的双形态（含逐帧跟手形变），手机上
反而丢了直达五个模块那一排，已回退；那版源码存 E:\Klog\backups\20260925-dock-dual-shipped。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 周岁 / 周年徽章：主色淡底，区别于普通 tag */
.years-tag {
/* 与英雄区「类型」胶囊（.dd-mood）同一套语言：等高描边胶囊、成对出现不再突兀。
告别旧 .tag 的小方角矮片，改用胶囊圆角 + bg-card 干净底 + text-3 弱一档。 */
height: 24px; padding: 0 var(--sp-2);
border-radius: var(--radius-pill);
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-3);
font-weight: var(--fw-medium);
letter-spacing: .02em;
}
/* 类型 / 分类筛选浮层共用的 tf-row 列表（复用 .wp-mask/.wp-sheet 抽屉骨架） */
.tf-list {
display: flex; flex-direction: column; gap: var(--sp-2);
max-height: 52vh; overflow-y: auto; margin-bottom: var(--sp-4);
}
.tf-row {
position: relative; /* 行内绝对定位件的地基（1020 曾钉 .tf-bar 卡底缘，1025 撤条后仍留作通用地基） */
display: flex; align-items: center; gap: var(--sp-3); width: 100%;
padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-3);
background: var(--bg-card); color: var(--text-1); font-size: calc(15px * var(--fs-scale)); text-align: left;
cursor: pointer; transition: background var(--d-fast), border-color var(--d-fast);
}
@media (hover: hover) { .tf-row:hover { background: var(--bg-hover); } }
.tf-row.is-sel { border-color: var(--primary); background: var(--bg-hover); }
.tf-dot { width: 12px; height: 12px; border-radius: var(--r-circle); flex-shrink: 0; }
.tf-dot-all { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-4); }
.tf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-cnt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-4); font-size: calc(13px * var(--fs-scale)); }
.tf-check { color: var(--primary); display: inline-flex; }
.tf-check svg { width: 18px; height: 18px; }
/* 分类抽屉行名下的「共 N 件 · 已完成 d」小字。
.tf-sub 生产里从无定义（排序抽屉那行的 sub 一直没样式、挤成同行尾巴）——这里补上
块级小字档，同时服务分类抽屉、排序抽屉与 1025 合并抽屉的当前档说明三处，不另开第二个类。
1025（站主点名「每个分类下面那根进度条不好看」）：卡底那根 .tf-bar 完成度条连同
为它加的 9px 底内距一并撤掉——主读数已换成未完成数，比例不需要图形再讲一遍，
行收回单行节奏。 */
.tf-sub { display: block; font-size: var(--fs-micro); color: var(--text-4); }
/* 类型管理：内置类型（生日 / 纪念日）只读行 + 内置小标 */
.mg-row-builtin { cursor: default; }
.mg-row-builtin:hover { background: transparent; }
.mg-builtin-tag { margin-left: auto; }
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
小票机：机身（白卡，站内灰底白卡语言）+ 纸（吐纸动画）+ 小票盒
拟物只保留「出纸口 + 白纸滑出」的骨架，材质全部走令牌：
机身=白卡描边，屏幕=浅灰内衬，主操作=小面积黑胶囊，出纸口=浅灰凹槽。
============================================================ */
.rm-tabs { margin-bottom: var(--sp-3); } /* 视觉由 .seg 分段组件承担 */
/* 票种开关（日志票 / 账本月票）：seg-slide 通栏两段，摆在机身之上、机器之前 */
.rm-mode { display: flex; width: 100%; margin-bottom: var(--sp-3); }
.rm-machine {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-4); padding: var(--sp-4) var(--sp-4) 0;
box-shadow: var(--shadow-card);
position: relative; overflow: hidden;
}
.rm-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.rm-logo { color: var(--text-1); font-weight: var(--fw-bold); font-size: var(--fs-body); letter-spacing: .04em; }
.rm-screen {
background: var(--bg-page); border: 1px solid var(--border);
border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); min-height: 96px;
display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2);
}
.rm-date-line { display: flex; align-items: baseline; gap: var(--sp-3); }
.rm-date-line b { color: var(--text-1); font-size: var(--fs-h3, 17px); font-weight: var(--fw-bold); }
.rm-date-line span { color: var(--text-4); font-size: var(--fs-caption); }
.rm-state { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-caption); }
.rm-dot { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--text-4); flex-shrink: 0; }
.rm-dot-busy { background: var(--rm-dot-busy); animation: rmPulse 1s ease-in-out infinite; }
.rm-dot-done { background: var(--rm-dot-done); }
@keyframes rmPulse { 50% { opacity: .3; } }
.rm-actions { padding: var(--sp-3) 0; display: flex; justify-content: flex-end; }
.rm-actions .btn { background: var(--primary); border-color: transparent; color: var(--on-primary); }
@media (hover: hover) { .rm-actions .btn:hover { background: var(--primary-hover); } }
.rm-slot { height: 10px; background: var(--bg-muted); border-radius: var(--r-2) var(--r-2) 0 0; margin: 0 -18px; box-shadow: inset 0 2px 4px rgba(17,17,17,.10); }
.rm-paper-ops { display: flex; justify-content: center; padding: var(--sp-2) 0 0; }
/* 小票盒：存根墙——每条存档是一张撕下来的白纸票根（直边顶、锯齿撕边底，与小票 canvas 的撕边同构），
墨色与小票印刷同源（#111/#9a9a9a），纸质细节=打孔虚线分界 + 等宽字打印时间 + 右下角 NO. 微缩票号；
整行点按查看，右上角小圆钮删除 */
.rm-box-list { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 400px; margin: 0 auto; padding: 2px 2px var(--sp-3); }
.rm-box-row {
position: relative; display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-3) var(--sp-4) var(--sp-4); background: var(--white); border-radius: var(--r-1); /* 小票纸面＝固定白纸材质（§1 材质豁免：机身翻面、纸不翻），
故纸上墨色 #111/#9a9a9a/#b9b9b9 为材质固定色，勿改 --text-*/--primary（暗档会翻出「黑纸上白字」事故） */
box-shadow: 0 1px 1px rgba(17,17,17,.05), 0 8px 18px -10px rgba(17,17,17,.22);
cursor: pointer; user-select: none; -webkit-user-select: none;
transition: transform var(--d-base) var(--ease-float), box-shadow var(--d-base) ease;
animation: rmBoxIn var(--d-enter) var(--ease-enter) backwards;
}
@media (hover: hover) { .rm-box-row:hover { transform: translateY(-2px); box-shadow: 0 1px 1px rgba(17,17,17,.05), 0 12px 26px -10px rgba(17,17,17,.28); } }
.rm-box-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* 锯齿撕边：纸色朝下三角铺满行底 */
.rm-box-row::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px;
background: conic-gradient(from -45deg at 50% 100%, #fff 90deg, transparent 0) 0 0 / 12px 6px repeat-x;
}
@keyframes rmBoxIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.rm-box-row:nth-child(2) { animation-delay: .04s; }
.rm-box-row:nth-child(3) { animation-delay: .08s; }
.rm-box-row:nth-child(4) { animation-delay: var(--d-micro); }
.rm-box-row:nth-child(5) { animation-delay: var(--d-fast); }
.rm-box-row:nth-child(6) { animation-delay: var(--d-base); }
.rm-box-row:nth-child(7) { animation-delay: var(--d-modal); }
.rm-box-row:nth-child(n+8) { animation-delay: var(--d-toast); }
.rm-box-day { flex: 0 0 auto; min-width: 46px; text-align: center; }
.rm-box-day b {
display: block; font-size: calc(27px * var(--fs-scale)); line-height: 1.05; font-weight: 800; color: #111;
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rm-box-day span { display: block; margin-top: 3px; font-size: var(--fs-11); color: #9a9a9a; letter-spacing: .05em; white-space: nowrap; }
/* 打孔虚线：存根与票体的分界 */
.rm-box-info {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
border-left: 1px dashed rgba(17,17,17,.20); padding-left: var(--sp-3);
}
.rm-box-date { font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: #111; }
.rm-box-sub {
font-size: var(--fs-12); color: #9a9a9a; letter-spacing: .01em;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-box-del {
flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: var(--r-circle);
background: transparent; color: #b9b9b9; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--d-base) ease, color var(--d-base) ease;
}
.rm-box-del svg { width: 17px; height: 17px; }
@media (hover: hover) { .rm-box-del:hover { background: rgba(17,17,17,.06); color: var(--status-bad); } }
/* 右下角微缩票号：像存根上印的小字 */
.rm-box-no {
position: absolute; right: 15px; bottom: 5px; pointer-events: none;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
font-size: var(--fs-9); letter-spacing: .12em; color: rgba(17,17,17,.30);
}
.rm-box-empty {
text-align: center; padding: var(--sp-8) var(--sp-4); margin: var(--sp-1) 2px;
border: 1.5px dashed var(--border-strong); border-radius: var(--r-3); color: var(--text-4);
}
.rm-box-empty svg { width: 34px; height: 34px; display: block; margin: 0 auto var(--sp-3); opacity: .85; }
.rm-box-empty p { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-3); }
.rm-box-empty span { display: block; margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--text-4); }
@media (prefers-reduced-motion: reduce) { .rm-box-row { animation: none; } }
/* ============================================================
出纸机制：overflow 裁剪窗（静止、透明）——整卷纸藏于出纸口内，
打印时整张纸（含投影）分段下移 translateY(-100% → 0)，从出纸口滑出。
窗口自身不做任何动画，纸的外观全部跟纸走，避免"纸先出现、内容再动"的割裂感
============================================================ */
/* 高度：移动端随 ≤768 的 .modal-card 规则全屏；桌面在下方媒体块定高 82vh */
.rm-modal .modal-body { flex: 1; overflow-y: auto; background: var(--rm-well); }
.rm-machine {
max-width: 340px; margin: 0 auto;
background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 95%, #111111 5%) 100%);
border: 1px solid var(--border);
border-radius: var(--r-4); padding: var(--sp-4) var(--sp-4) var(--sp-3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(17,17,17,.04),
0 1px 1px rgba(17,17,17,.05),
0 3px 6px rgba(17,17,17,.07),
0 12px 24px -8px rgba(17,17,17,.16);
position: relative; z-index: 2;
}
.rm-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.rm-screen { background: var(--bg-page); border-color: var(--border); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); }
.rm-screen .rm-actions { padding: var(--sp-3) 0 0; }
/* 出纸口：机身底部一道内凹的深色「狭缝」，与纸同宽，纸从缝里往下滑出 */
.rm-slot {
height: 5px; margin: var(--sp-3) 0 0; border-radius: var(--r-1);
background: linear-gradient(180deg, #26262b, #5b5b63);
box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.6);
}
/* 机身「打印 ID 昵称」设置：与屏幕同语言的浅灰内衬控制卡（图标 + 文案 + 加大开关），
不再是「左字右开关」的裸行，读作打印机面板上的一枚开关 */
.rm-nick-row {
display: flex; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-3);
font-size: calc(15px * var(--fs-scale)); color: var(--text-1);
cursor: pointer; user-select: none; -webkit-user-select: none;
}
.rm-nick-ico { display: inline-flex; color: var(--text-3); flex-shrink: 0; }
.rm-nick-ico svg { width: 16px; height: 16px; }
.rm-nick-txt { flex: 1; font-weight: var(--fw-medium); letter-spacing: .01em; }
.rm-nick-row .status-switch { width: 34px; height: 18px; }
.rm-nick-row .status-switch .switch-slider::before { width: 14px; height: 14px; left: 2px; top: 2px; }
.rm-nick-row .status-switch input:checked + .switch-slider::before { transform: translateX(16px); }
/* 裁剪窗口（静止、透明）：顶部对齐出纸口狭缝下沿，整卷纸藏于缝内，打印时从缝里往下滑出。
负 margin 让窗口上移压住机身底部，消除机身与纸之间的缝隙，纸看起来是「从缝里吐出来」。
z-index 高于机身，使滑出的纸盖在机身下唇之上（纸搭在前缘，更像真实出纸）。
左右内距比机身多 4px（20 vs 16）→ 纸比出纸口略窄，缝两端各探出纸面约 3px，像纸从稍宽的缝里出来。 */
.rm-paper-win { max-width: 340px; margin: -13px auto 0; overflow: hidden; padding: 0 var(--sp-4) 30px; position: relative; z-index: 3; }
.rm-paper { margin: 0; }
/* 纸的外观：投影必须跟着纸的轮廓走——box-shadow 按矩形边框投影，会在撕边下方压出一条
直边暗带、把齿轮齿吃掉一半，所以这里用 drop-shadow（按 alpha 轮廓，齿尖才有纸感）。
顶边方角贴缝、底边由画布自己挖齿，故不铺白底、不留底部圆角。 */
.rm-paper canvas {
display: block; width: 100%;
filter: drop-shadow(0 4px 6px rgba(17,17,17,.16));
}
/* 小票盒「查看」：全屏纯小票查看器（body 级独立浮层，叠在小票机之上、关闭回到小票盒，不顶掉弹窗） */
.rm-view-mask {
position: fixed; inset: 0; z-index: 9000;
background: rgba(12,12,14,.74);
opacity: 0; transition: opacity var(--d-modal) ease;
}
.rm-view-mask.is-open { opacity: 1; }
.rm-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rm-view-bar {
flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2);
padding: calc(var(--sp-2) + var(--sat)) var(--sp-3) var(--sp-2);
}
.rm-view-title {
flex: 1; text-align: center; font-size: calc(15px * var(--fs-scale)); font-weight: 600;
letter-spacing: .01em; color: rgba(255,255,255,.92);
}
.rm-view-x, .rm-view-save {
width: 38px; height: 38px; flex: 0 0 auto; border: none; border-radius: var(--r-circle);
background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--d-base) ease;
}
@media (hover: hover) { .rm-view-x:hover, .rm-view-save:hover { background: rgba(255,255,255,.26); } }
.rm-view-x:active, .rm-view-save:active { background: rgba(255,255,255,.34); }
.rm-view-x svg, .rm-view-save svg { width: 20px; height: 20px; }
.rm-view-scroll {
flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
display: flex; justify-content: center; align-items: flex-start;
padding: var(--sp-1) var(--sp-6) calc(30px + var(--sab));
}
/* 查看器里的纸：白面由画布自己承担（底边是挖空的齿轮撕边），容器只留顶部圆角与投影。
同样用 drop-shadow 让投影跟轮廓走，否则矩形 box-shadow 会从齿缝透出来、压出一条直边暗线 */
.rm-view-paper {
width: 100%; max-width: 320px; background: transparent; border-radius: var(--r-2) var(--r-2) 0 0; overflow: hidden;
filter: drop-shadow(0 14px 26px rgba(0,0,0,.42));
}
.rm-view-paper canvas { display: block; width: 100%; }
/* 小票机日期控件：极简日历图标（白卡机身上浅灰底圆角钮；选中日期由机身屏展示，点按开日历）。
enhanceDates 注入的 dp-display 承载点击与可达性（文字 font-size:0 隐藏、保留朗读），
date-ico 提供图标并铺满整个按钮 */
.rm-cal {
position: relative; width: 36px; height: 36px; padding: 0;
border-radius: var(--r-2); background: var(--bg-muted);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--transition-fast);
}
@media (hover: hover) { .rm-cal:hover { background: var(--border); } }
.rm-cal .date-wrap { position: absolute; inset: 0; } /* 流内无内容会塌缩，强制铺满按钮作为定位参照 */
.rm-cal .dp-display {
position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
border: none; background: transparent; font-size: 0; line-height: 0;
}
.rm-cal .date-ico {
inset: 0; width: 100%; height: 100%; right: auto; top: auto; transform: none;
color: var(--text-2); border-radius: var(--r-2);
}
@media (hover: hover) { .rm-cal .date-ico:hover { background: transparent; color: var(--text-1); } }
/* 保存按钮：简约圆形下载图标，紧跟纸底 */
.rm-save-btn {
width: 42px; height: 42px; border-radius: var(--r-circle);
border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--d-fast) var(--ease-float);
}
.rm-save-btn svg { width: 18px; height: 18px; }
@media (hover: hover) { .rm-save-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } }
.rm-save-btn:active { transform: scale(.92); }
/* 小票机弹窗：桌面宽一点 + 定高 82vh；移动端随全局弹窗全屏 */
@media (min-width: 769px) { .modal-card.rm-modal { max-width: 560px; height: 82vh; } }
/* ============================================================
键盘跳转链接：视觉隐藏，获得焦点时从顶部滑入
============================================================ */
.skip-link {
position: fixed; top: -48px; left: 16px; z-index: 300;
padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--r-2) var(--r-2);
background: var(--primary); color: var(--on-primary);
font-size: var(--fs-caption); text-decoration: none;
transition: top var(--transition-fast);
}
.skip-link:focus-visible { top: 0; }
/* 长列表渲染优化：屏外卡片跳过渲染（滚动到即恢复，auto 记住上次高度）
覆盖 备忘/纪念/习惯/回顾 四类卡片列表（备忘实际类名是 .card-grid，
此前写成 .memo-grid 一直是死选择器） */
.date-list > *, .habit-grid > *, .diary-list > *, .card-grid > * {
content-visibility: auto;
contain-intrinsic-size: auto 120px;
}
/* 个人中心内嵌管理区块：导出 / 导入按钮横排 */
/* ===================== 个人中心 pf-* 区块体系 =====================
布局：账户卡 → 我的概览 KPI → 数据统计 → 数据管理 → 偏好设置 → 账户安全 → 危险操作
颜色 / 圆角 / 字号 / 动效全部走全站设计令牌，暗色主题自动适配 */
/* 账户卡 */
.pf-account {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
/* 登录态账户卡整卡可点击进入编辑资料（右箭头为视觉引导） */
.pf-account-click { cursor: pointer; }
/* 账户卡 + 云端同步状态行：单容器连体（一卡两段，内部分隔线），消除拼接割裂感。
overflow 与 .pfg-card 同一条规矩：底部那段是通栏色带，圆角由卡壳统一裁，
色带自己不再补圆角。 */
.pf-idcard {
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition-fast);
}
@media (hover: hover) { .pf-idcard:has(.pf-account-click:hover) { border-color: var(--border-strong); } }
.pf-idcard .pf-account { background: transparent; border: 0; border-radius: 0; }
/* 云端同步状态行：容器内第二段，上边框即内部分隔线。
底色与 AI 连接卡那条铭牌带（.ai-conn-foot）同档 --bg-soft——
「白卡 + 底部浅灰信息带」是站内一处语言，两处各染一套就成了两个家族（1003） */
.pf-sync-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border); background: var(--bg-soft);
font-size: var(--fs-body); color: var(--text-2);
}
.pf-sync-ok { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--tag-good-fg); flex: none;
transition: color var(--transition-fast); }
.pf-sync-ok svg { width: 14px; height: 14px; }
/* 2.34：这句从写死换成读出来的（复用站内 tag 那两档色，不另配色板）。
「正在同步」不转圈——这一行只有 14px，转起来是装饰不是信息，文案已经说了在动。
未登录时右侧压根不摆徽章：没有云端可说，再染一档灰只是多一条规则。 */
.pf-sync-ok.is-warn { color: var(--tag-bad-fg); }
.pf-sync-ok.is-busy { color: var(--text-3); }
/* ---- 本机与云端（2.34 个人中心二级页）----
行壳直接复用 .pfg-row（行高 / 分隔线 / 图标档 / 热区都在里面），这里只补差异那一小块；
读不到云端就一句正文灰 + 一颗「再读一次」，不另立红字类（这不是校验失败）。
勾选行借 .sd-item 自己一层，不硬套 .pfg-row——它没有箭头、右侧是勾而不是跳转。 */
.sd-load { padding: var(--sp-4) 2px; font-size: var(--fs-body); color: var(--text-3); }
.sd-load + .btn-link { margin-top: var(--sp-2); }
.sd-row { min-height: 52px; }
/* 两行堆叠用块级子元素，不另开一条 flex 列——那与时间线的 .tl-main 逐字同体，
等于把同一份声明抄第二遍（bloat-gate 的逐字重复组会凭空多一组） */
.sd-t { flex: 1; min-width: 0; }
.sd-t b { display: block; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-1); }
.sd-t-2 { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.sd-tag { flex: none; font-size: var(--fs-12); color: var(--text-3); }
.sd-tag.is-gain { color: var(--tag-good-fg); }
.sd-tag.is-up { color: var(--text-2); }
.sd-list { padding: 2px 0 var(--sp-2); border-bottom: 1px solid var(--border); }
.sd-item {
display: flex; align-items: center; gap: var(--sp-3); min-height: 38px; /* 站内手机端触控地板 */
padding: 0 2px; font-size: var(--fs-body); color: var(--text-2); cursor: pointer;
}
.sd-item input { flex: none; width: 18px; height: 18px; accent-color: var(--text-1); }
.sd-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item.is-on .sd-item-t { color: var(--text-1); }
.sd-empty { padding: var(--sp-2) 2px var(--sp-3); font-size: var(--fs-12); color: var(--text-hint); }
.sd-foot { margin-top: var(--sp-3); font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }
.sd-foot b { font-weight: var(--fw-semibold); color: var(--text-1); font-variant-numeric: tabular-nums; }
.pf-account-main { flex: 1; min-width: 0; }
.pf-name { display: flex; align-items: center; font-size: var(--fs-h2); font-weight: 600; color: var(--text-1); line-height: 1.3; }
.pf-name .role-badge { flex: none; }
.pf-sub {
margin-top: 3px; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
font-size: var(--fs-caption); color: var(--text-4);
}
/* 图标片：与个人中心 .pfg-ico 同一语言——无底色纯描线（去灰底瓦片）；色＝1011 行首统一档 */
.pf-ico {
width: 22px; height: 22px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-2);
}
.pf-ico svg { width: 22px; height: 22px; }
.pf-ico-sm { width: 22px; height: 22px; }
.pf-ico-sm svg { width: 22px; height: 22px; }
/* 1030 清死样式：原「我的概览 KPI 卡」一族（.dc-card .kpi-grid / .pf-kpi-card /
.pf-kpi-card .pf-ico / .summary-card.pf-kpi-card:active / .pf-kpi-main 及其下三个 .summary-*）
全部依赖已退役的 pfKpiCard()（本轮作为死函数删除），运行件里 0 命中。
共用的 .pf-ico 基样式在别处，不在这段里，未受影响。 */
/* 数据统计 / 数据管理：行式列表 */
.pf-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.pf-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.pf-row + .pf-row { border-top: 1px solid var(--border); }
.pf-k { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--text-2); }
.pf-v { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--text-1); }
.pf-row.is-danger .pf-v, .pf-row.is-danger .pf-ico { color: var(--tag-bad-fg); }
/* 回收站数量角标 */
.pf-chip {
flex: none; min-width: 20px; padding: 1px var(--sp-2);
border-radius: var(--radius-pill); background: var(--bg-muted);
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-micro); color: var(--text-2); text-align: center;
}
.pf-list .field-hint { padding: var(--sp-2) var(--sp-3) var(--sp-2); }
/* 偏好开关（行内 switch） */
.pf-switch { position: relative; flex: none; width: 38px; height: 22px; display: inline-block; }
.pf-switch input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.pf-track {
position: absolute; inset: 0; pointer-events: none;
background: var(--switch-track); border-radius: var(--radius-pill);
transition: background var(--transition-fast);
}
.pf-track::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--white); /* 开关旋钮恒白（iOS 语言，明暗两档不翻） */
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
transition: transform var(--transition-fast);
}
.pf-switch input:checked + .pf-track { background: var(--primary); }
.pf-switch input:checked + .pf-track::after { transform: translateX(16px); }
/* 暗档开态：--primary 暗档翻成近白 #E8E9EC，与恒白旋钮撞成一片、看不出开没开（1026 实拍）。
改用 token 里现成的 --primary / --on-primary 黑白反转对——近白轨道落近黑旋钮，和亮档「墨轨白钮」
是同一条 iOS 语言，无彩色、不破墨灰调性。关态深灰轨+白钮两档本可辨，不动。 */
[data-theme="dark"] .pf-switch input:checked + .pf-track::after { background: var(--on-primary); }
.pf-switch input:focus-visible + .pf-track { outline: 2px solid var(--border-strong); outline-offset: 2px; }
/* 无权拨动的开关（「每句都走 AI」对无权账号）：本体压暗 + 不给手指响应 */
.pf-switch input:disabled + .pf-track { opacity: .45; cursor: default; }
/* ============================================================
个人中心「灰标题 + 白卡 + 单行」分组（参考图新样式）
样板：数据管理。桌面/移动共用，靠 token 随断点自适应。
结构：卡片外灰色小标题（无图标）→ 白卡 → 单行「图标+名称+箭头/角标」，无描述。
============================================================ */
.pfg { margin-top: var(--pfg-gap); }
.pfg:first-child { margin-top: 0; }
/* 显形开关直接挂在 .pfg 上（见 :root Settings stack 的规矩）；点名防未来谁给它添 display */
.pfg[hidden] { display: none; }
/* 组还没内容（如余额组等 status 回包）时不占位，避免回包瞬间页面往下跳 */
.pfg:empty { display: none; }
.pfg-label {
margin: 0 0 var(--pfg-label-gap) var(--sp-1);
font-size: var(--fs-label);
font-weight: 500;
color: var(--text-4);
letter-spacing: .01em;
}
.pfg-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.pfg-row {
display: flex; align-items: center;
/* 图标列宽与行内间距各立一枚局部令牌：凡是要「与标题文字起线对齐」的整块控件，
一律引 calc(这两枚之和)，不再各写一遍 magic number
（1003 站主点名：通栏分段器从卡片内距一路铺到右缘，比标题整整左凸一截）。
写在行上而不是 :root，是因为这两枚就是这一行的几何——改了它们，对齐自动跟着走。 */
--pfg-ico-w: 22px;
--pfg-row-gap: 12px;
gap: var(--pfg-row-gap);
width: 100%; text-align: left; font: inherit; color: inherit;
background: none; border: 0; cursor: pointer;
padding: 0 var(--card-pad);
min-height: var(--pfg-row-h);
transition: background var(--transition-fast);
}
.pfg-row + .pfg-row { border-top: 1px solid var(--border); }
@media (hover: hover) { .pfg-row:hover { background: var(--bg-hover); } }
.pfg-row:active { background: var(--bg-hover); }
.pfg-ico {
/* 兜底 22px：这枚令牌挂在 .pfg-row 上，卡外单独用到 .pfg-ico 的地方拿不到它 */
flex: none; width: var(--pfg-ico-w, 22px); height: 22px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-2); /* 1011 行首统一档（同 .fg-i/.dd-ico，站主判 text-4 太灰后压深） */
}
.pfg-ico svg { width: 22px; height: 22px; }
.pfg-t { flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--text-1); }
/* 两行字档（标题 + 小字说明）：讲得清这一行的说明就地收进标题列，
不单开 .pfg-note——飘成独立一行会把白卡切成「行/注/行/注」的零碎节奏。
0928 桌面小部件页先立这套（当时叫 .ws-t），0929 提醒与震动页并入时统一成 pfg 家族、
由 app.js 的 pfTitleHtml(title, sub) 一处产出，两页共用一份样式。 */
.pfg-t.pfg-t-2 { display: flex; flex-direction: column; gap: 2px; }
/* 1018 带说明的两行字行（图1 规范）：图标与右侧控件都**对齐标题那一行**，不再整块垂直居中——
说明一长（折两行）时开关悬在大段字中间就是截图点名的那种「乱」。改 flex-start 后：
行上下各补 sp-2 内距，图标/开关 22px 与标题首行（≈22px）顶边同起，中心线天然对齐。
nt-page 本来就有同款 padding 覆盖（见后文），这里统一成全站默认。 */
.pfg-row:has(> .pfg-t-2) { align-items: flex-start; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
/* 「底部上下滑换向」行：swap 图标是横向双箭头，这行讲的是上下对调——转 90° 竖过来，
图标方向与它管的手势同向（站主 1018 点名）。挂 :has(#pf-dock-vswap)，不动共用构造器。 */
.pfg-row:has(#pf-dock-vswap) .pfg-ico svg { transform: rotate(90deg); }
/* 两行各自把 line-height 写死：说明行本来就有，标题行这里补上——
没有确定行高，排版量具就没法判「标题被挤成两字竖排」这类回归（只能量出「大概几行」）。
1018 层级照站内参照档（新增事件页 swRow 的「每年重复 / 过农历」那套，05-views 3618/3619）：
主标题 16px·medium·text-1，说明 12px（--fs-12）·text-4·1.5——与那页逐字同档，不另立标准。 */
.pfg-t-2 .pfg-t-main { line-height: 1.45; font-size: calc(16px * var(--fs-scale)); font-weight: var(--fw-medium); }
.pfg-t-sub {
font-size: var(--fs-12); color: var(--text-4); line-height: 1.5; margin-top: var(--sp-1);
/* 说明折成两行时把两行拉齐：不处理的话常见「第二行只剩一两个字」的孤尾，
一整页行行如此，读起来就是「哪儿没对齐」（0929 实拍）。balance 只重排行、不改内容 */
text-wrap: balance;
}
.pfg-chev { flex: none; width: 18px; height: 18px; color: var(--text-disabled); }
.pfg-chev svg { width: 18px; height: 18px; }
/* 控制行（开关 / 分段）：整行不可点，取消悬停/按压高亮与指针 */
.pfg-ctl { cursor: default; }
.pfg-ctl:hover, .pfg-ctl:active { background: transparent; }
/* 行被禁用（无权拨「每句都走 AI」）：只压标题一档，说明行保持原可读性——
压成整行灰字会把「为什么不能开」那句理由也一起埋掉 */
.pfg-row.is-off .pfg-t-main { color: var(--text-3); }
/* ===================== 桌面小部件 · 预览画廊 =====================
「添加到桌面」这一组：整卡即「添加」按钮，卡面是那只小部件的等比缩微。
皮肤全部走站内 token——白卡 = --bg-card、强调 = --text-1、发丝线 = --border，
深色模式下自动反转，不引入渐变与第二套色板。 */
.ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
.ws-span2 { grid-column: 1 / -1; }
.ws-card {
display: flex; flex-direction: column; align-items: stretch;
width: 100%; padding: 0; border: 0; background: none;
text-align: left; font: inherit; color: inherit; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* 展台等高：两列里一高一矮的卡会把题注推到不同基线上（真机目检的「乱」）。
题注因此永远从同一高度起排，缩微自己在展台里居中。 */
.ws-stage {
display: flex; align-items: center; justify-content: center;
height: 148px; flex: none;
}
/* 缩微按**真实长宽比**画（0928 那版按感觉给尺寸，2×1 成了药丸、2×2 偏小）：
一格行高 = 展台一半 → 2 行的卡（4×2、2×2）铺满展台，1 行的卡（2×1）占一半；
宽度上 4×2 跨两列＝四格，2×2 与 2×1 同占一列＝两格。
于是 4×2≈2.6:1、2×2≈1.25:1、2×1≈2.5:1，与真机上量到的一致。 */
.ws-mock.ws-mock-42 { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ws-mock.ws-mock-22 { width: 100%; height: 100%; }
.ws-mock.ws-mock-21 { width: 100%; height: 74px; display: flex; align-items: center; gap: var(--sp-1); }
/* 题注两行：第一行「名字 + 添加」各自不折行（名字超长省略），第二行小字说明。
「添加」只写文字、不带加号——2×1 的缩微里已经有一颗黑「＋」，两个加号会打架。 */
.ws-cap { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3); padding: 0 1px; }
.ws-cap-line { display: flex; align-items: baseline; gap: var(--sp-2); }
.ws-cap-t {
flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-cap-a { flex: none; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
/* 合并分组后卡内的小标题：比段落标题轻一档、比说明文字重一档 */
.ws-sub {
padding: var(--sp-3) var(--card-pad) var(--sp-1);
font-size: var(--fs-label); font-weight: var(--fw-medium);
color: var(--text-3); letter-spacing: .01em;
}
.ws-sub:not(:first-child) { border-top: 1px solid var(--border); }
/* 页尾孤行说明：不进卡，直接坐在灰底上收掉，省一整组「说明」 */
.ws-legal { padding: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--fs-label); color: var(--text-4); line-height: 1.6; }
.ws-card:active .ws-mock { transform: scale(.985); border-color: var(--text-3); }
.ws-card:active .ws-cap-a { color: var(--text-1); }
.ws-mock {
display: block; box-sizing: border-box; flex: none;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: var(--sp-3); overflow: hidden;
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.ws-mk-head { display: flex; align-items: center; gap: var(--sp-1); }
.ws-mk-head b { font-size: calc(12px * var(--fs-scale)); font-weight: var(--fw-medium); color: var(--text-1); }
.ws-mk-head i {
flex: 1; min-width: 0; font-size: calc(10px * var(--fs-scale)); font-style: normal; color: var(--text-4);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ws-mk-head s {
flex: none; font-size: calc(10px * var(--fs-scale)); line-height: 1; text-decoration: none;
color: var(--bg-card); background: var(--text-1); border-radius: var(--r-pill); padding: var(--sp-1);
}
.ws-mk-row { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); }
.ws-mk-row u {
flex: none; width: 6px; height: 6px; border-radius: var(--r-circle);
border: 1px solid var(--text-disabled); background: none;
}
.ws-mk-row u.on, .ws-mk-row u.bad { background: var(--text-1); border-color: var(--text-1); }
.ws-mk-row em {
flex: 1; min-width: 0; font-size: calc(11px * var(--fs-scale)); font-style: normal; color: var(--text-1);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ws-mk-row i { flex: none; font-size: calc(10px * var(--fs-scale)); font-style: normal; color: var(--text-4); }
.ws-mk-row i.bad { color: var(--text-1); font-weight: var(--fw-medium); }
/* 4×2 缩微改双栏（与真卡同一版式）：左待办带勾选圆、右习惯竖列、中间发丝竖线 */
.ws-mk-cols { display: flex; flex: 1; min-height: 0; margin-top: var(--sp-1); }
.ws-mk-col { display: flex; flex-direction: column; min-width: 0; }
.ws-mk-col-l { flex: 1.55; }
.ws-mk-vdiv { width: 1px; background: var(--border); margin: 1px var(--sp-2); flex: none; }
.ws-mk-round {
flex: none; width: 20px; height: 20px; border-radius: var(--r-pill); padding: 0;
display: flex; align-items: center; justify-content: center;
font-size: calc(13px * var(--fs-scale)); line-height: 1; text-decoration: none;
color: var(--bg-card); background: var(--text-1);
}
.ws-mk-cb {
flex: none; width: 15px; height: 15px; border-radius: var(--r-circle);
border: 1.5px solid var(--text-disabled); background: none;
}
.ws-mk-hb { flex: 1; display: flex; align-items: center; gap: var(--sp-1); min-height: 22px }
.ws-mk-hb u {
flex: none; width: 6px; height: 6px; border-radius: var(--r-circle);
border: 1.5px solid var(--text-disabled); background: none;
}
.ws-mk-hb u.on { background: var(--text-1); border-color: var(--text-1) }
.ws-mk-hb em {
min-width: 0; font-size: calc(10px * var(--fs-scale)); font-style: normal; color: var(--text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-mk-hb b { margin-left: auto; font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale)); font-weight: 400; color: var(--text-4) }
/* 2×1 缩微：单行（圆点=今日状态、名字、大号次数、黑圆「＋」），与真卡同一版式 */
.ws-mk-d {
flex: none; width: 6px; height: 6px; border-radius: var(--r-circle);
border: 1px solid var(--text-disabled);
}
.ws-mk-d.on { background: var(--text-1); border-color: var(--text-1); }
.ws-mk-name {
flex: 1; min-width: 0; font-size: calc(12px * var(--fs-scale)); font-weight: var(--fw-medium); color: var(--text-1);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ws-mk-n { display: flex; align-items: baseline; gap: 1px; flex: none; }
.ws-mk-n b { font-size: calc(24px * var(--fs-scale)); line-height: 1; font-weight: var(--fw-semibold); color: var(--text-1); }
.ws-mk-n i { font-size: calc(10px * var(--fs-scale)); font-style: normal; color: var(--text-4); }
.ws-mk-plus {
flex: none; width: 28px; height: 28px; border-radius: var(--r-circle);
display: flex; align-items: center; justify-content: center;
font-size: calc(15px * var(--fs-scale)); line-height: 1; color: var(--bg-card); background: var(--text-1);
}
/* ≤768 手机端样式 → 06-mobile.css */
/* ===================== 桌面小部件 · 预览画廊 结束 ===================== */
/* 卡内辅助说明行（如桌面提醒权限提示）
说明行讲的是**它上面那一行**，所以线画在下面：紧贴上一行（4px 归组）、
与下一行之间由线分开（0927 真机：线画在说明行上方时，说明文字像被下一行顶上来，
整页看着「都紧贴下边线」）。 */
.pfg-note {
padding: var(--sp-1) var(--card-pad) var(--sp-3);
font-size: var(--fs-label); color: var(--text-4); line-height: 1.6;
}
.pfg-note + .pfg-row, .pfg-note + .pfg-ctl, .pfg-note + .pfg-note { border-top: 1px solid var(--border); }
.pfg-note:last-child { padding-bottom: var(--sp-4); }
/* 只读值（如「本机存储」）：右对齐等宽数字，与 .nt-time 同款语言——
不加边框底色，避免一行里出现两个看起来可点的控件 */
.pfg-val {
flex: none; min-width: 60px; text-align: right;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-caption); color: var(--text-2);
}
/* 存储说明行：App 内要分行报「上次写入 / 开机读取」实况，允许软换行成多行 */
.pfg-note-store { white-space: pre-line; }
.pfg-note.is-warn { color: var(--tag-bad-fg); }
/* 一行两行字：标题 + 小字说明用的是 pfg 家族的 .pfg-t-2（见上文 pfg 章节），
两页共用一份样式，这里只留小部件页特有的东西 */
.ws-row .pf-seg { flex: none; }
/* 分组留白：这两页（桌面小部件 / 提醒与震动）分组多、又都是「标题 + 一两张卡」，
标签与卡之间要能喘气 —— 页面级前缀把通用节奏抬到 26px / 10px */
.ws-page .pfg, .nt-page .pfg, #view-settings .pfg { margin-top: var(--pfg-gap-page); }
.ws-page .pfg:first-child, .nt-page .pfg:first-child, #view-settings .pfg:first-child { margin-top: 0; }
.ws-page .pfg-label, .nt-page .pfg-label, #view-settings .pfg-label { margin-bottom: var(--pfg-label-gap); }
/* 设置页（dock 第三席 · 1010 dock 三席收编）：整页节奏就借上面这三条，
不另起规则块——块语言整只复用 pfg（灰标题 + 白卡行），tip 间距吃基础款同值。 */
/* 卡里第一行就是说明文字时（空态、排错提示），4px 顶距会让文字贴住卡的上沿。
必须连「嵌一层的容器」一起管：实例列表装在 #ws-instances 这类 div 里，
只写 `.pfg-card > .pfg-note:first-child` 会漏掉它们（真机目检：那几行顶距还是窄）。 */
.pfg-card > .pfg-note:first-child,
.pfg-card > div > .pfg-note:first-child { padding-top: var(--sp-3); }
/* 同理收口底部：容器里最后一条说明与卡下沿留 15px，不靠 .pfg-note:last-child 的巧合 */
.pfg-card > div > .pfg-note:last-child { padding-bottom: var(--sp-4); }
/* 一段＝标题行 + 通栏分段器：手机端四枚胶囊塞不进标题行右侧，分段器独占一行 */
.ws-item { border-bottom: 1px solid var(--border); }
.ws-item:last-child { border-bottom: 0; }
.ws-item .pfg-row { min-height: 46px; padding-bottom: var(--sp-1); }
/* 分段器独占一行。必须是 flex 容器：站内的 .pf-seg-fill 靠 `flex:1 1 100%` 撑开、
并用 margin-left 把左缘对齐到标题（图标列宽），放在普通块里这两条都会落空、
分段器缩成一小坨（1003 实测）。 */
.ws-segline { display: flex; padding: 0 var(--card-pad) var(--sp-3); }
/* 危险分组：分组标题与行文字/图标转红 */
.pfg.is-danger .pfg-label { color: var(--tag-bad-fg); }
.pfg-row.is-danger .pfg-t, .pfg-row.is-danger .pfg-ico { color: var(--tag-bad-fg); }
/* 个人中心灰底画布：账户卡改白底，与分组卡一致浮起。
登录态账户卡是 .pf-idcard 容器（内含 border-radius:0 的透明 .pf-account），只给容器刷白即可；
本地态是挂在 body 下的独立 .pf-account，才需要单独刷白。
切勿写成裸 `.pf-account` 类——那会盖掉登录态嵌套账户的透明基线、把它刷成方块而吃掉容器上圆角。 */
.dc-card.dd-modal .pf-idcard { background: var(--bg-card); }
.dc-card.dd-modal .modal-body > .pf-account { background: var(--bg-card); }
/* 移动端：头部是半透明「页面灰」，与账户卡顶部几乎无间隙会让圆角被误看成直角；
给个人中心顶部多留一段灰色沟槽，账户卡上圆角才浮得出来 */
/* ≤768 手机端样式 → 06-mobile.css */
/* 重置按钮：桌面只显示文字（图标隐藏），移动端媒体查询内切换为仅图标 */
.dc-reset-btn .dc-reset-ico { display: none; }
/* ---- pfg 家族扩展：AI 快速录入等设置页（与「提醒与震动自检」同族语言） ---- */
/* 卡内无边框输入行：行高吃堆叠令牌（与 .pfg-row 同一档），等宽字体承 Key */
.pfg-in {
flex: 1; min-width: 0; width: 100%; height: var(--pfg-row-h); box-sizing: border-box;
border: none; background: transparent; outline: none;
font-family: var(--font-mono); font-size: calc(16px * var(--fs-scale)); color: var(--text-1); padding: 0;
}
.pfg-in::placeholder { font-family: var(--font-sans); color: var(--text-hint); }
/* 卡外灰说明（对齐 .pfg-label 的起行位置） */
.pfg-tip { margin: var(--pfg-tip-gap) var(--sp-1) 0; font-size: var(--fs-label); color: var(--text-4); line-height: 1.6; }
/* ============================================================
AI 快速录入 · 连接卡（0929 立版式，1010 换品牌面）
一页只允许一处彩色，就是「连没连上」这件事：
已连接=绿 / 未连接=静灰 / 问不到服务器=红。三态共用同一份版式，
只换 data-state 上的那一个令牌（--ai-accent，状态点与它的光晕吃它），
所以状态切换是原地变色，不会跳版式、也不会各写一套颜色规则。
左侧那块底板不再是「会随状态变色的闪电标」，而是品牌 K 字底板
（与侧栏 / 登录页的 .logo-icon 同色同档，永远黑底白字，暗色反转）；
闪电收进状态点，颜色跟着状态走——品牌归品牌、状态归状态，两处不再抢活。
卡本体仍是站内白卡（.pfg-card 外壳照用），底部那条浅灰带是「设备铭牌」，
承 deepseek 这只等宽型号——AI 气质靠这一处等宽 + 一处绿，不靠渐变。
============================================================ */
.ai-conn {
--ai-accent: var(--text-4);
}
.ai-conn[data-state="on"] {
--ai-accent: var(--status-good);
}
.ai-conn[data-state="err"] {
--ai-accent: var(--status-bad);
}
.ai-conn-main {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--card-pad);
}
/* 品牌底板：照 .logo-icon 那份锁定（黑底 #000 / 字形 #F4F4F4，暗色反过来），字形占板 75%。
别图省事给这只 span 叠 .logo-icon 类——05 在 02 之后加载、同特异度后者胜，
两处 background 与 svg 尺寸会打架（站内「同元素双类升级」那条教训）。 */
.ai-mark {
flex: none; width: 36px; height: 36px; border-radius: var(--r-1);
display: inline-flex; align-items: center; justify-content: center;
background-color: var(--brand-plate); color: var(--brand-plate-ink);
}
/* 暗档反转已由 --brand-plate/--brand-plate-ink 令牌完成，此处原手写 dark 行删除（1025） */
.ai-mark svg { width: auto; height: 27px; display: block; }
.ai-conn-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
/* 品牌大字：字距收紧到 -0.02em，松了就没有「一台设备」的那种整块感。
1013 收到 18 档——右上角多了余额小签之后，21 的品牌字与它并排会抢成一排 */
.ai-name {
font-size: calc(18px * var(--fs-scale)); font-weight: var(--fw-semibold); line-height: 1.15;
letter-spacing: -.022em; color: var(--text-1);
}
.ai-state {
display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
font-size: var(--fs-caption); color: var(--text-4); line-height: 1.3;
}
.ai-state-word { flex: none; font-weight: var(--fw-medium); color: var(--text-2); }
.ai-state-sep { flex: none; color: var(--text-disabled); }
/* 诊断小字（「问不到服务器」「仅本地规则」）留一条地板宽：卡角上多了余额小签之后，
谁该让位要说清楚——**小签让，诊断不让**（2.37 首版反过来，实拍把「问不到服务器」
挤得只剩一个「问」字）。88px 是这六字在 --fs-caption 下的实际占宽（量到 86）。
⚠ 必须挂 :not(:empty)——连上时 sub 是空串，给它留 88px 等于凭空占掉半行，
反而把右边小签挤出卡外。 */
.ai-state-sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ai-state-sub:not(:empty) { min-width: calc(88px * var(--fs-scale)); }
/* 状态点（1010）：7px 圆点换成带光晕的圆角小方块，方块里站着那枚闪电。
只有连上那一态才呼吸——没连上就别装作在动。
光晕走 ::after 且 z-index:-1 垫到底板背后，只能从四边溢出来；
不这么做的话放大那一层同色绿会盖住闪电，闪一下就变成「图标没了」。
底板要有自己的堆叠上下文（position:relative + z-index:0），负层级才出得去它。 */
.ai-dot {
position: relative; z-index: 0; flex: none;
width: 15px; height: 15px; border-radius: var(--r-2);
display: inline-flex; align-items: center; justify-content: center;
background: var(--ai-accent); color: var(--white);
transition: background var(--d-enter) var(--ease-float);
}
.ai-dot svg { width: 9px; height: 9px; fill: currentColor; }
.ai-conn[data-state="on"] .ai-dot::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: var(--r-2); background: var(--status-good);
animation: aiPulse 2.4s var(--ease-float) infinite;
}
/* 15px 底板（1013 收小一档）放大到 1.9 倍 ≈ 28px，正落在状态行的行高里；
沿用旧圆点那个 2.6 会从「一圈光」变成糊到「已连接」字底下的一片绿 */
@keyframes aiPulse {
0% { transform: scale(1); opacity: .5; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
/* 铭牌条：通栏浅灰带，卡壳 overflow 已经把两端圆角裁好，这里不再补圆角 */
.ai-conn-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: var(--sp-2) var(--card-pad);
border-top: 1px solid var(--border); background: var(--bg-soft);
font-size: var(--fs-label); color: var(--text-4); line-height: 1.4;
}
.ai-model {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
color: var(--text-3); letter-spacing: .01em;
}
/* 余额小签（1013 站主点名）：从下面那张「只放一个数」的整行卡收上来，挂在连接卡右上角。
字档退在读数以下（--fs-label 标签 + --fs-caption 等宽数字）、颜色只到 --text-2，
不跟品牌标抢视线；负外距把热区撑回 38 档（站内触控下限），版面高度一点没动。
⚠ 宽度必须是**绝对上限**而不是百分比（2.37 首版写 46% 被实拍打回）：读不到余额时
nlBalText 回的是「登录已过期，请重新登录」这类整句诊断，百分比会跟着行宽一起涨，
把左边「连接失败 · 问不到服务器」那行挤得只剩一个字。132px 是量好的：
「余额 ¥9.91 ↻」正好一行读完，长诊断自己省略号，标题列永远拿得到剩下的。
按下反馈与那枚刷新图标并进下面 .nl-bal 的选择器里（拆开写会撞棘轮的逐字重复组）。
失败时 nlBalPaint 给数值挂 is-bad：降成小灰字，同时把「余额」二字让位——
「余额 未配置 Key」在这个宽度里读不通，去掉标签反而一眼懂。 */
.ai-bal {
flex: none; max-width: 132px; display: inline-flex; align-items: center; gap: var(--sp-1);
box-sizing: border-box; margin: -11px -8px -11px 0; padding: var(--sp-3) var(--sp-2);
appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--r-2);
background: transparent; font-family: inherit; cursor: pointer;
transition: background var(--transition-fast);
}
.ai-bal-k { flex: none; font-size: var(--fs-label); color: var(--text-4); }
/* 数值的地板在 62px：够「¥9.91」整串站直（实测 43px），长串（含赠送后缀、整句诊断）
自己省略号——让位的是小签，不是左边那行状态诊断（见上面 .ai-state-sub 那条）。 */
.ai-bal-v {
flex: 0 1 auto; min-width: 0; max-width: 62px;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-caption); color: var(--text-2);
}
.ai-bal-v.is-bad { font-size: var(--fs-label); font-weight: 400; color: var(--text-4); }
.ai-bal:has(.ai-bal-v.is-bad) .ai-bal-k { display: none; }
/* 读不到余额时那半句诊断再收一档：这一档左边那行「连接失败 · 问不到服务器」已经把
病因说完了，右边再挤一整句进去是复读，还会把左边顶穿（dead 档实拍量出来的）。
全文留在 title 里，点它一下重问也照旧。 */
.ai-bal:has(.ai-bal-v.is-bad) .ai-bal-v { max-width: 40px; }
/* Key 行：sk- 前缀是形状提示，不参与输入，也不许被一起复制走 */
.ai-key-pre {
flex: none; font-family: var(--font-mono); font-size: calc(16px * var(--fs-scale)); color: var(--text-disabled);
user-select: none; -webkit-user-select: none;
transition: color var(--transition-fast);
}
.ai-keyrow:focus-within .ai-key-pre { color: var(--text-3); }
/* 聚焦时只把卡描深一档，不给输入框描红、不刷主色（站内校验语言：控件本身不描边） */
.pfg-card:has(.ai-keyrow:focus-within) { border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) {
.ai-conn[data-state="on"] .ai-dot::after { animation: none; }
}
/* 窄屏（≤360）大字先退一档，别让「可序Ai」把状态行挤成两行；底板跟着收到品牌标准 32 */
/* ≤768 手机端样式 → 06-mobile.css「窄屏（≤360）大字先退一档，别让「可序Ai」把状态行挤成两行；底板跟着收到品牌标准 32」 */
/* ============================================================
登录进行中的反馈（App「登录云端同步」页）
站内此前没有任何加载态——点下登录到页面重载之间是一片死寂，
网络一慢就像「没反应」。这里补一套克制的最小语言：
· .wbf-stage：卡下灰字状态行，文案随阶段走（正在登录 → 正在同步云端）；
· .wbf-spin：发丝弧（1.8 描边、轨道 22% 透明），与站内图标同一字重；
· .modal-head-act.is-busy：头部白圆钮原地换成转弧（同幅 20px，一排钮不跳位）。
动效只有一条旋转，交给全局 prefers-reduced-motion 归零即可（文案仍在说进度）。
============================================================ */
@keyframes wbfSpin { to { transform: rotate(360deg); } }
@keyframes wbfStageIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.wbf-spin { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--text-2); }
.wbf-spin svg { width: 16px; height: 16px; animation: wbfSpin .72s linear infinite; }
.wbf-stage {
display: flex; align-items: center; gap: var(--sp-2);
margin: var(--sp-3) var(--sp-1) 0; font-size: var(--fs-label); color: var(--text-3);
animation: wbfStageIn var(--d-fast) var(--ease-float);
}
.wbf-stage[hidden] { display: none; } /* 自带 display:flex 会压掉 UA 的 hidden，必须点名 */
.modal-head-act .mha-spin { display: none; }
.modal-head-act.is-busy { pointer-events: none; } /* 连点不重复发请求 */
.modal-head-act.is-busy > svg { display: none; }
.modal-head-act.is-busy .mha-spin { display: inline-flex; }
.modal-head-act.is-busy .mha-spin svg { width: 20px; height: 20px; }
.pfg-in:disabled, .form-input:disabled { opacity: .55; }
/* 不可逆操作降红字行（与详情「删除」同档，不做通栏大按钮）。
1002 起收进所在的白卡里：发丝线隔开输入行，红字不再孤零零飘在卡外
（.pfg-clear 裸排版随 0929 版一起退役，全站已无调用点） */
.pfg-clear-in {
display: block; width: 100%; min-height: 44px; box-sizing: border-box;
border: none; border-top: 1px solid var(--border); background: transparent; cursor: pointer;
color: var(--tag-bad-fg); font-size: calc(15px * var(--fs-scale)); text-align: center;
}
.pfg-clear-in:active { opacity: .55; }
/* ---- 一句话录入：实时解析预览（小黑标胶囊 + 正文，去 emoji） ----
0923 曾改成「落点胶囊条 + 18px 结果正文 + 卡内定高 AI 行」，真机目检后用户否掉：
悬浮胶囊要保留、布局不如原来。骨架已还原，只留「输入井随内容长高」这一处不改版面的改进。 */
/* 特异性对齐 textarea.form-input (0,1,1)，桌面端也压得住默认 vertical */
textarea.form-input.nl-ta { resize: none; min-height: 96px; }
.nl-pvbox { padding: 0 var(--card-pad); }
.nl-pvbox:empty { display: none; }
.nl-pv {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-3) 0; border-top: 1px solid var(--border);
font-size: var(--fs-caption); color: var(--text-2);
}
.nl-pv-tag {
flex: none; background: var(--primary); color: var(--on-primary);
border-radius: var(--radius-pill); padding: 3px var(--sp-2);
font-size: var(--fs-label); font-weight: var(--fw-medium);
}
.nl-pv-txt { min-width: 0; }
/* 日期 + 钟点是一个整体，窄屏要整段换行，不能在连字符处被劈开 */
.nl-nw { white-space: nowrap; }
.nl-pv b { color: var(--text-1); font-weight: var(--fw-medium); }
/* 多条结果列表（0924）：一句拆出多条时逐行列出，点哪行单独改哪条。
行本身是 button：热区 ≥44px、按下只给背景衬底（文字不挂 :active 透明度，那读作闪烁）；
可点性靠下面那行提示语交代，不在行内加可见的「改」钮（用户偏好：宁要不可见手势）。 */
.nl-pv-list { border-top: 1px solid var(--border); }
.nl-pv-row {
display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 44px;
padding: var(--sp-2) var(--sp-1); margin: 0 -6px; border: 0; border-radius: var(--r-2);
background: transparent; cursor: pointer; text-align: left; font: inherit;
font-size: var(--fs-caption); color: var(--text-2);
transition: background var(--transition-fast);
}
.nl-pv-row:active { background: var(--bg-muted); }
.nl-pv-row-t { min-width: 0; }
.nl-pv-row-t b { color: var(--text-1); font-weight: var(--fw-medium); }
@media (prefers-reduced-motion: reduce) { .nl-pv-row { transition: none; } }
/* 桌面弹窗底栏本来就有「取消 / 编辑 / 应用」三颗，弹窗态收起悬浮动作胶囊免得重复出口。
但 .nl-sheet（手机底部抽屉）没有底栏，宽屏下也不能收 —— 收了就只剩回车一条路。
.nl-pv-hint { padding: 0 0 11px; font-size: var(--fs-label); color: var(--text-4); line-height: 1.6; }
.nl-pv-ai { padding: 8px 0 12px; font-size: var(--fs-label); color: var(--text-4); }
/* ---------- API 余额行（0925；0930 起两种底：裸排 / 卡内）----------
裸排（桌面录入弹窗，与 .nl-pvbox 同一份横向内距），不挤动 0923 定稿的抽屉版面；
卡内（Klog 设置 / AI 快速录入，inCard）：白卡承着，负外距全部归零，
行高对齐 pfg-row 的 52 档。左灰标签 + 右数值 + 刷新图标，整行可点，
反馈只给一层背景色；失败只降成小灰字，不描红、不 toast。 */
.nl-balbox { padding: 0 var(--card-pad); margin-top: var(--sp-1); }
.nl-bal {
display: flex; align-items: center; gap: var(--sp-2);
/* 负外边距把热区撑回整行宽，内距再用同一份 card-pad 把文字收回原位 */
box-sizing: border-box; width: calc(100% + var(--card-pad) * 2);
margin: 0 calc(-1 * var(--card-pad)); padding: var(--sp-3) var(--card-pad); min-height: 44px;
appearance: none; -webkit-appearance: none; border: 0; border-radius: 0;
background: transparent; color: var(--text-2); font-family: inherit; text-align: left;
cursor: pointer; transition: background var(--transition-fast);
}
/* 卡内版：卡壳给边框圆角和底色，行自己只留内距与高度；行高与 pfg 行同档 */
.nl-bal.nl-bal-card {
width: 100%; margin: 0; padding: 0 var(--card-pad); min-height: var(--pfg-row-h);
}
@media (hover: hover) { .nl-bal:hover { background: var(--bg-hover); } }
/* 按下往「页面文字色」方向压一点：暗色主题里 --bg-soft 比 --bg-hover 更暗，
直接用它两套主题的下压方向会反过来。连接卡角上那枚小签（.ai-bal）共用这一份反馈 */
.nl-bal:active, .ai-bal:active { background: color-mix(in srgb, var(--bg-hover) 82%, var(--text-1)); }
.nl-bal-k { flex: none; font-size: var(--fs-caption); color: var(--text-4); }
.nl-bal-v {
flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
/* 数值右靠，与白卡里「左标签 / 右控件」同一读法；中间那段空白由弹性撑出来 */
text-align: right;
font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-1);
font-variant-numeric: tabular-nums;
}
.nl-bal-v.is-bad { font-size: var(--fs-caption); font-weight: 400; color: var(--text-4); }
/* 刷新那枚图标与转法两种壳共用（连接卡角上的 .ai-bal 是 1013 那份小签） */
.nl-bal-i, .ai-bal-i { flex: none; display: inline-flex; line-height: 0; color: var(--text-4); }
.nl-bal-i svg, .ai-bal-i svg { width: 15px; height: 15px; }
.nl-bal.is-busy .nl-bal-i, .ai-bal.is-busy .ai-bal-i { animation: nlBalSpin .9s linear infinite; }
@keyframes nlBalSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nl-bal.is-busy .nl-bal-i, .ai-bal.is-busy .ai-bal-i { animation: none; } }
/* ---------- 一句话修改（0923）：撤销 toast 与候选抽屉 ----------
撤销钮嵌在同一枚 toast 胶囊里，用描边小胶囊，不另起第二个实心大按钮；
候选抽屉直接复用 .tf-list / .tf-row，与「全部类型 · 全部分类」同一外壳、同一触控尺寸。 */
.toast-act {
flex: none; margin-left: var(--sp-1); padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--border); border-radius: var(--radius-pill);
background: transparent; color: var(--text-1);
font-size: var(--fs-label); font-weight: var(--fw-medium);
cursor: pointer; transition: background var(--d-fast), transform var(--d-micro);
}
@media (hover: hover) { .toast-act:hover { background: var(--bg-hover); } }
.toast-act:active { transform: scale(.95); }
.nl-pick-sheet .tf-list { padding: 2px var(--card-pad) var(--sp-3); }
.nl-pick-sheet .np-kind {
flex: none; padding: 2px var(--sp-2); border-radius: var(--radius-pill);
background: var(--bg-soft); color: var(--text-2);
font-size: var(--fs-label); font-weight: var(--fw-medium);
}
/* ---------- 一句话 AI 识别：悬浮状态胶囊（脱离白卡、独立浮于底部，不被 overflow 裁切） ---------- */
.nl-ai-slot {
position: sticky; bottom: 14px; z-index: 6;
display: flex; justify-content: center;
margin-top: var(--sp-3); pointer-events: none;
}
.nl-ai-slot:empty { display: none; }
.nl-ai-float {
display: inline-flex; opacity: 0;
animation: nlFloatIn var(--d-enter) var(--ease-nl) both;
}
.nl-ai-out { animation: nlFloatOut var(--d-modal) ease both; }
.nl-ai-bob {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
background: var(--text-1); color: var(--bg-card);
font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .3px;
/* 与动作胶囊同一材质同一阴影：一个轻一个重会露出两套标准 */
box-shadow: var(--shadow-float), 0 2px 6px rgba(17,17,17,.04);
animation: nlBob 2.6s ease-in-out var(--d-enter) infinite;
}
/* 微光沿胶囊表面扫过 */
.nl-ai-bob::after {
content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 42%;
background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--bg-card) 42%, transparent), transparent);
transform: translateX(-150%) skewX(-18deg);
animation: nlShine 1.9s ease-in-out var(--d-push) infinite;
}
.nl-ai-spark { display: inline-flex; line-height: 0; }
.nl-ai-spark svg { width: 15px; height: 15px; fill: currentColor; animation: nlSpark 1.7s ease-in-out infinite; }
.nl-ai-txt { position: relative; }
/* ---------- 处理完的动作胶囊（编辑 / 应用）----------
与 AI 胶囊同一材质、同一位置、同一入场动画：处理期间是「AI 正在理解」，
处理完原地换成两段动作，视线不用重新找。
「应用」反白（白底黑字）承担主操作，「编辑」透明底白字——小面积强调给该给的那一个。
槽本身 pointer-events:none（AI 胶囊不该可点），胶囊自己恢复可点。 */
.nl-act {
display: inline-flex; align-items: stretch; overflow: hidden;
border-radius: var(--radius-pill); background: var(--text-1); pointer-events: auto;
/* 阴影一律走站内 --shadow-float（0 10px 28px / 9% 黑）：大模糊、低不透明度才叫柔和。
白底那段在浅页面上会糊掉轮廓，补一圈 6% 的描边而不是加重视觉。 */
box-shadow: var(--shadow-float), 0 2px 6px rgba(17,17,17,.04), 0 0 0 1px rgba(17,17,17,.06);
animation: nlFloatIn var(--d-enter) var(--ease-nl) both;
}
.nl-act-btn {
appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
height: 42px; padding: 0 var(--sp-4); font-family: inherit;
color: var(--bg-card); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .3px;
}
.nl-act-btn:active { opacity: .7; }
.nl-act-apply { background: var(--bg-card); color: var(--text-1); }
.nl-act-apply:active { opacity: .86; }/* (1008 死规则清理) */
/* 桌面弹窗底栏本来就有「取消 / 编辑 / 应用」三颗，弹窗态收起悬浮动作胶囊免得重复出口。
但 .nl-sheet（手机底部抽屉）没有底栏，宽屏下也不能收 —— 收了就只剩回车一条路，
所以按「承载体」判，不按视口宽度一刀切。
⚠ 媒体查询不加特异性：这条必须写在上面 .nl-act 基础规则之后，
否则会被同选择器的 display:inline-flex 盖掉（0929 静默失效过，探针 L2 抓到）。 */
@media (min-width: 769px) {
.nl-act { display: none; }
.nl-sheet .nl-act { display: inline-flex; }
}
/* ≤768 手机端样式 → 06-mobile.css */
@keyframes nlFloatIn { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes nlFloatOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.95); } }
@keyframes nlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nlShine { 0% { transform: translateX(-150%) skewX(-18deg); } 55%, 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes nlSpark { 0%, 100% { transform: rotate(0deg) scale(1); opacity: .85; } 50% { transform: rotate(180deg) scale(1.18); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.nl-ai-float, .nl-ai-bob, .nl-ai-bob::after, .nl-ai-spark svg, .nl-act { animation: none !important; }
.nl-ai-float, .nl-act { opacity: 1; }
}
/* ============================================================
一句话录入 · 手机端底部矮抽屉（0927 第二轮）
输入条那一版真机看下来整体不对：浮签、动作胶囊、连续录入，全都在跟站内既有的
「抽屉」语言抢手感。这版只借 .wp-mask / .wp-sheet 那只现成的壳——把手、下拉即关、
遮罩、入场、返回栈全归 mountSheet 管——把 0923 定稿的那套版面原样搬进来：
井 → 语音提示 → 通栏分隔线 → 黑标胶囊 + 一行结果 → 悬浮胶囊。一样不删。
这里只补壳本身没有的四件：井的台面、聚焦描边、悬浮位常驻定高、空句被拒时抖一下。
============================================================ */
/* 内容自适应 = 天然就是矮抽屉（不像筛选抽屉那样吃 50vh），但长句要能滚、不许顶到状态栏 */
.nl-sheet {
max-height: calc(100vh - var(--header-h) - var(--safe-top) - 24px);
overflow-y: auto; overscroll-behavior: contain;
}
/* 井：1005 收编进 --fld-* 家族。此前它吃的是小票机台面色（--rm-well #EDEFF2）+
一圈 2px 实心灰环，是站内最后一处「编外井」——桌面那只早就在 .fg-card .fg-stack 里
领了 1004b 定稿的配方（软垫底不翻白 + 静止预留 1px 透明描边 + 聚焦 1px 主描边
+ 12px 柔光渐隐）。两边现在同一枚材质、同一枚光环，只差尺寸档（手机 16px 地板）。
16px 是地板：iOS 聚焦小于 16px 的输入框会整页放大。起始 96 由 JS 随内容长到 168 封顶后内部滚 */
.nl-sheet-well {
background: var(--fld-fill); border: 1px solid transparent; border-radius: var(--fld-r);
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea.nl-sheet-ta {
display: block; width: 100%; box-sizing: border-box;
min-height: 96px; max-height: 168px; overflow-y: auto;
border: 0; border-radius: var(--fld-r); background: transparent; box-shadow: none; outline: none;
-webkit-appearance: none; appearance: none; resize: none;
padding: var(--sp-3); font-family: inherit; font-size: calc(16px * var(--fs-scale)); line-height: 1.75; color: var(--text-1);
}
textarea.nl-sheet-ta::placeholder { color: var(--text-hint); }
/* 聚焦：井底不翻白，换 1px 主描边 + 柔光渐隐；不描红（校验失败走「整块抖 + toast」那条语言） */
.nl-sheet-well:focus-within { border-color: var(--primary); box-shadow: var(--focus-glow); }
.nl-sheet .field-hint { margin-top: var(--sp-3); }
/* 预览盒：1005 第二轮——站主点名「画布要白的」，灰画布撤掉，抽屉恢复纯白，
分层改由卡片自己那一档浅面（--bg-inset）+ 1px 描边承担。
只留一点上间距，让第一张卡不贴着提示行。 */
.nl-sheet .nl-pvbox { margin: var(--sp-3) 0 0; padding: 0; }
/* 单条结果同上一张卡，不再留「发丝线 + 一行字」那一版 */
.nl-sheet .nl-pv {
margin-bottom: var(--sp-3); padding: var(--sp-3); font-size: var(--fs-caption);
background: var(--bg-inset); border: 1px solid var(--border);
border-radius: var(--radius-card-m); box-shadow: var(--shadow-card);
}
.nl-sheet .nl-pv-list { border-top: 0; }
/* 卡片材质照抄 .tl-item 的描边/圆角/阴影档，底色换 --bg-inset（比纯白抽屉深一档）。
min-height 44 是热区地板，不随两行布局缩 */
.nl-sheet .nl-pv-row {
align-items: flex-start; margin: 0 0 var(--sp-3); padding: var(--sp-3);
background: var(--bg-inset); border: 1px solid var(--border);
border-radius: var(--radius-card-m); box-shadow: var(--shadow-card);
}
/* 按下只沉底色 + 描边加深一档，整卡不 scale、文字不挂透明度（与 .tl-item:active 同一口径） */
.nl-sheet .nl-pv-row:active { background: var(--bg-hover); border-color: var(--border-strong); }
.nl-sheet .nl-pv-tag { margin-top: 1px; }
/* 多条卡片里标题与次要信息分两行：一行塞不下，而截断等于丢信息。
桌面弹窗态这两条不命中——那里仍是「标题 · 次要信息」一行，与 1005 之前逐字一致 */
.nl-sheet .nl-pv-row-m { display: block; margin-top: 3px; font-size: var(--fs-micro); color: var(--text-4); }
.nl-sheet .nl-pv-row-sep { display: none; }
.nl-sheet .nl-pv-hint { padding: 0 0 var(--sp-3); }
/* 悬浮位常驻定高：胶囊出现/消失都不该推抽屉顶边。
align-items:center 是必需的——flex 项默认 stretch，会把 42px 的胶囊拉到 54px 轨道高，
而里面两段按钮写死 height:42 不跟着长，于是「应用」那块白底比黑底矮一截、
底下露出一条黑边，整枚读起来像裁坏了（0927 用户报「胶囊不对」，放大 4x 才看得出）。 */
.nl-sheet .nl-ai-slot { position: static; display: flex; justify-content: center; align-items: center; min-height: 54px; margin: var(--sp-3) 0 0; }
.nl-sheet .nl-ai-slot:empty { display: flex; }
/* 胶囊落在白色抽屉上：0924 那套「黑底本体 + 白底应用」的反白逻辑是给**灰色画布**写的——
整枚药是暗物体时，白那段才「亮」。搬到白色抽屉上眼睛先抓黑的那半，主次正好读反
（0927 用户判「编辑与应用那枚胶囊不对」）。所以这一层反过来：
白底描边本体 + 黑底「应用」，与站内 .btn-primary / .btn-default 同一对配对。
位置、尺寸、圆角、阴影仍与 AI 胶囊同一份，原地换内容不跳；桌面灰画布上不套这条。 */
.nl-sheet .nl-act { background: var(--bg-card); box-shadow: 0 0 0 1px var(--border), var(--shadow-float); }
.nl-sheet .nl-act-btn { color: var(--text-1); }
.nl-sheet .nl-act-apply { background: var(--primary); color: var(--on-primary); }
.nl-sheet .nl-act-apply:active { opacity: .88; }
/* 两段的分界由填充色自己承担，再画一条 32% 白线就是重复 */
.nl-sheet .nl-act-sep { display: none; }
/* 空句被拒：整块抽屉抖一下 + toast（0924 定稿的校验语言；这里没有白卡可抖，就抖抽屉本身） */
.nl-sheet.is-shake { animation: nlSheetShake var(--d-enter) var(--ease-enter); }
@keyframes nlSheetShake {
0%, 100% { transform: translateY(0); }
20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
.nl-sheet.is-shake { animation: none; }
.nl-sheet-well { transition: none; }
}
/* ============================================================
一句话 · 居中核对卡（1005）
点一张结果卡 → 只核对这一条，「确认记下」才落库，其余卡片留在抽屉里原地不动。
载体：复用 .wp-mask 那只现成遮罩（fixed / z 9000 / is-open 淡入），
只把对齐从 flex-end 改成居中——抽屉那层也是 9000，靠 append 到 body 的 DOM 序压住它。
卡内一切照站内既有语言：36 白圆钮、dd-row 图标行、灰画布白卡、--control-h-lg 主操作。
两种承载体（手机抽屉 / 桌面弹窗）共用这一层，所以规则不圈在 .nl-sheet 里。
============================================================ */
/* 双层遮罩会叠暗（抽屉 32% + 这一层），所以这层自己的底压到 18%，合计约 45% */
/* 1006 修居中失效：基础 .wp-mask{align-items:flex-end}（4510）写在后、同特异度，
把这里先写的居中盖掉了——「居中核对卡」其实一直贴底弹。抬成 .wp-mask.nl-peek-mask 稳赢。 */
.wp-mask.nl-peek-mask {
align-items: center; justify-content: center;
padding: var(--sp-6) var(--sp-4);
background: color-mix(in srgb, var(--text-1) 18%, transparent);
}
.nl-peek {
width: 100%; max-width: 330px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
background: var(--bg-card); border-radius: var(--r-5); box-shadow: var(--shadow-modal);
transform: translateY(14px) scale(.97); opacity: 0;
transition: transform var(--d-push) var(--ease-enter), opacity var(--d-modal) ease;
}
.wp-mask.is-open .nl-peek { transform: none; opacity: 1; }
.np-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
/* 36 白圆钮：站内弹窗头部唯一那枚返回/操作钮的语言，不加文字 */
.np-x {
flex: none; width: 36px; height: 36px; border-radius: var(--r-circle); padding: 0; cursor: pointer;
background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
color: var(--text-1); display: inline-flex; align-items: center; justify-content: center;
}
.np-x:active { background: var(--bg-hover); }
.np-x svg { width: 16px; height: 16px; }
.np-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.np-body { padding: 0 var(--sp-4) var(--sp-1); }
/* 标题点字即改：无井底、无描边，只留一道发丝线，聚焦换成主色——
与「管理面直改」同一口径（校验不描红，这里连校验都没有） */
.np-title {
display: block; width: 100%; box-sizing: border-box;
border: 0; border-bottom: 1px solid var(--border); border-radius: 0; outline: none;
background: transparent; padding: 2px 0 var(--sp-1); font-family: inherit;
font-size: calc(21px * var(--fs-scale)); font-weight: var(--fw-bold); line-height: 1.35; color: var(--text-1);
transition: border-color var(--transition-fast);
}
.np-title:focus { border-bottom-color: var(--primary); }
.np-from { margin-top: var(--sp-1); font-size: var(--fs-label); color: var(--text-4); line-height: 1.5; }
/* 卡里的字段组：白卡上再开一块灰画布，与详情页 .dd-group 同一读法 */
.np-group { margin-top: var(--sp-3); padding: 2px var(--sp-3); background: var(--bg-page); border-radius: var(--radius-card-m); }
.np-group .dd-v.is-strong { color: var(--text-1); font-weight: var(--fw-medium); }
.np-with { font-style: normal; color: var(--text-4); font-weight: 400; }
.np-more {
display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 44px;
padding: var(--sp-3) 0; border: 0; background: transparent; cursor: pointer; text-align: left;
font: inherit; font-size: var(--fs-caption); color: var(--text-4);
}
.np-more .dd-ico { color: var(--text-disabled); }
.np-chev { margin-left: auto; flex: none; width: 14px; height: 14px; transition: transform var(--d-base) ease; }
.np-more.is-open .np-chev { transform: rotate(90deg); }
/* 动效 S4（2026-10-20）：展开区从「hidden 属性 + display:none」硬切 → 「is-open 类 +
grid-template-rows 0fr↔1fr」双向软放。天然吃动态高度（多行 .np-row 无需 JS 测量）；
与 .np-more.is-open 箭头 rotate 同步（都是 0.24s / --ease-ios 尾段减速档）。
子层 .np-extra-inner 承载 overflow:hidden + min-height:0 —— 这是 grid-rows 0fr 塌陷
的必要条件（否则内容 intrinsic 高会把轨道撑起来）。
老 WebView 兜底：Chromium <117 不支持 fr 插值 → 折叠/展开功能仍对、只失去过渡（退化硬切）。
回滚＝撤本段 + 还原 .np-extra[hidden] / app.js 里 ex.hidden 那行。 */
.np-extra {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--d-modal) var(--ease-ios);
}
.np-extra.is-open { grid-template-rows: 1fr; }
.np-extra-inner { overflow: hidden; min-height: 0; }
.np-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.np-ghost {
flex: none; height: var(--control-h-lg); padding: 0 var(--sp-1); border: 0; background: transparent;
cursor: pointer; font: inherit; font-size: var(--fs-caption); color: var(--text-3);
}
.np-ghost:active { color: var(--text-1); }
.np-confirm {
flex: 1; height: var(--control-h-lg); border: 0; border-radius: var(--radius-lg); cursor: pointer;
background: var(--primary); color: var(--on-primary);
font: inherit; font-size: calc(15px * var(--fs-scale)); font-weight: var(--fw-medium); letter-spacing: .4px;
}
.np-confirm:active { opacity: .88; }
/* ---- 结果卡的「已记下」态（1005 逐条核对）：只降档，不划掉、不消失——
它还得能被点回去看一眼 ---- */
.nl-sheet .nl-pv-row .nl-pv-row-t { flex: 1; }
.nl-pv .nl-pv-txt { flex: 1; }
.nl-pv-row-tick {
flex: none; display: none; align-items: center; justify-content: center;
width: 18px; height: 18px; margin-top: 2px; border-radius: var(--r-circle);
background: var(--text-1); color: var(--on-primary);
}
.nl-pv-row-tick svg { width: 11px; height: 11px; }
.nl-pv-row.is-saved, .nl-pv.is-saved { background: var(--bg-soft); border-color: transparent; box-shadow: none; }
.nl-pv-row.is-saved .nl-pv-row-t b { color: var(--text-2); }
.nl-pv-row.is-saved .nl-pv-tag, .nl-pv.is-saved .nl-pv-tag { background: var(--bg-count); color: var(--text-3); }
.nl-pv-row.is-saved .nl-pv-row-tick, .nl-pv.is-saved .nl-pv-row-tick { display: inline-flex; }
/* 单条结果那张卡也能点，所以要有可点性与按下反馈（与多条卡片同一档） */
.nl-pv.is-tap { cursor: pointer; }
.nl-sheet .nl-pv.is-tap { background: var(--bg-inset); border: 1px solid var(--border);
border-radius: var(--radius-card-m); box-shadow: var(--shadow-card); }
.nl-pv.is-tap:active { background: var(--bg-hover); border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) {
.nl-peek { transition: none; transform: none; opacity: 1; }
.np-more .np-chev { transition: none; }
.np-extra { transition: none; }
}
/* ===================== ≤380px 超窄屏（iPhone SE / 小屏安卓 / 系统大字体） ===================== */
/* 触控目标、dock 尺寸与字号地板的超窄屏收缩已迁至文件末尾
「手机端全局 UI/UX 优化 v1.0」——那些规则必须晚于 ≤768 基线才会生效；
此处只保留与后续基线不冲突的两条收缩。 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
手机端可读性强化（≤768px）
原则：正文 15~16px、辅助文字不低于 12px、触控目标 ≥44px；
保持桌面端建立的字阶层级，只抬手机端基线与地板。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 超窄屏回补：在 768 新基线上做温和收缩，不再压回小字号
（dock 标签字号地板已迁至文件末尾的 ≤380 块） */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
父子级联瀑布动效（详情弹窗）
勾选父待办：子任务自上而下依次弹入勾选；取消：同序依次熄灭。
============================================================ */
@keyframes subPop {
0% { transform: scale(1); }
38% { transform: scale(1.32); }
70% { transform: scale(.94); }
100% { transform: scale(1); }
}
@keyframes subFlash {
0% { background: var(--bg-hover); border-color: var(--border-strong); }
100% { background: var(--bg-card); border-color: var(--border); }
}
.dt-sub-check.sub-pop { animation: subPop var(--d-med) var(--ease-float); }
.sub-row.sub-flash { animation: subFlash var(--d-slow) ease-out; }
/* ============================================================
底部导航 · 果冻指示块（双层结构）
外层 .tabbar-ind：只负责位移；内芯 .tabbar-ind-core：软胶镜片，负责形变。
两条通道都由 app.js 的同一条弹簧逐帧驱动（见 updateTabIndicator），
所以这里绝不能再挂 transition——CSS 再补一条曲线，就是「到位后还自己抖两下」的来源。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
底部导航 · 柔光玻璃 dock（与右侧加号同一枚材质令牌）
--glass-* 定义在文件头的主题令牌层，暗色在 [data-theme="dark"] 里整组换值；
这里只负责「谁来消费」，任何一处都不再手写透明度/模糊参数。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* （0925 回退：这里曾有「换形态席次淡入 .dock-morph / @keyframes dockSeatIn」一节，
名单不再随视图置换，也没有任何 JS 会挂那个类——留着就是骗下一个读样式的人。） */
/* ============================================================
事件详情 · 分组卡片式（灰底画布 + 白色圆角卡 + 巨型倒计时）
参考 iOS 设置式信息分组，融入 Klog 黑白 + 等宽数字语言。
============================================================ */
.dd-modal { background: var(--bg-page); }
.dd-modal .modal-body { padding-bottom: var(--sp-6); }
.dd-hero {
background: var(--bg-card); border-radius: var(--r-5);
padding: var(--sp-4); box-shadow: var(--shadow-card);
}
.dd-hero-name { font-size: calc(20px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); margin-top: var(--sp-3); line-height: 1.35; }
.dd-cap { display: block; font-size: var(--fs-micro); color: var(--text-4); margin-top: var(--sp-3); letter-spacing: .5px; }
.dd-big { display: flex; align-items: baseline; gap: var(--sp-1); margin-top: 2px; }
.dd-num {
font-family: var(--font-mono); font-size: 56px; font-weight: var(--fw-bold);
color: var(--text-1); line-height: 1.05; letter-spacing: -2px; font-variant-numeric: tabular-nums;
}
.dd-num-today { font-size: 40px; letter-spacing: 0; color: var(--status-bad); }
.dd-unit { font-size: calc(14px * var(--fs-scale)); color: var(--text-4); }
.dd-hero-date { font-size: calc(14px * var(--fs-scale)); color: var(--text-4); margin-top: var(--sp-3); }
.dd-hero-since { font-size: var(--fs-caption); color: var(--text-3); margin-top: var(--sp-2); }
.dd-hero-since b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-1); }
/* 人物档案英雄区：站主实拍右侧太空。与事件详情/日记/停用页共用的 .dd-hero 默认是竖排
左对齐，大数字和名字挤在左半边、右边整片空。is-person 这个修饰类**只在人物详情挂**
（见 app.js openPersonCard），改成「左文字 / 右倒计时」两栏，把巨型天数甩到右列填白。
右列用事件详情同名容器 .dd-hero-count，垂直居中对齐左列，两栏窄屏自动靠 gap 收窄。 */
.dd-hero.is-person { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.dd-hero.is-person .dd-hero-main { flex: 1; min-width: 0; }
.dd-hero.is-person .dd-hero-count { flex: none; text-align: right; }
/* 1029 站主定稿：灰字三段（农历 / 每年·按农历 / 至今 N 天）**在卡内独占一整行**，
右列「下次生日 N 天」整体上移与左列顶齐平。
做法是把这张卡改成上下两段：上段 .dd-hero-cols 走原来的两栏，下段是灰字行。
根因是宽度：两栏的左列只有 231px，农历一开三段自然宽合计 244px → 溢出 13px →
flex 把三段同时压缩、词内断字（「农历 九月十 / 二」）。
`> span` 那条是补上一版的洞：灰字段落原本是**裸文本节点**，`.dd-meta > *`
选不中匿名 flex item，所以「nowrap + 不收缩」的保护从来没真正吃到。
事件详情只是借 .is-person 的两栏填白（见下方注释），不复用这一条，故另起钩子。 */
.dd-hero.is-person-full { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-3); }
.dd-hero.is-person-full .dd-hero-cols { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
/* 段间距交给上面那条 gap：行自带的 margin-top 在卡内会叠成两份呼吸 */
.dd-hero.is-person-full > .dd-meta, .dd-hero.is-person-full > .dd-hero-date { margin-top: 0; }
.dd-hero.is-person-full .dd-meta > span { white-space: nowrap; }
/* 右列三行（标签 / 巨型数 / 日期）都贴右缘：`.dd-hero-count` 的 text-align:right 管不到
.dd-big 这只 flex 行——数字那行按 flex-start 左包，日期比它长时就从左边露出来一截
（订阅带年份的续费日「2027 年 2 月 2 日」正是这种）。人物/事件那两页这行本来就是最宽的，
加这条是原地不动，只有更长的兄弟行才会显出差别。 */
.dd-hero.is-person-full .dd-hero-count .dd-big { justify-content: flex-end; }
.dd-group {
background: var(--bg-card); border-radius: var(--radius-card-m); margin-top: var(--sp-3);
box-shadow: var(--shadow-card); overflow: hidden;
}
.dd-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); position: relative; }
/* 行分割线（1015 站主定稿：通栏）：原先从文字起笔缩进 48px，站主要求全站统一成
统计卡那种「顶到卡边」的一条——left 归 0 即是。发丝线仍只归 dd 行自己画，
tp-mgr 这类自带 border-top 的行在下面单独掐掉，避免同一道缝叠出粗细两条。 */
.dd-row + .dd-row::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
border-top: 1px solid var(--border);
}
.dd-ico { width: 20px; flex-shrink: 0; color: var(--text-2); display: inline-flex; justify-content: center; }
.dd-ico svg { width: 17px; height: 17px; }
.dd-k { flex: 1; min-width: 0; font-size: calc(15px * var(--fs-scale)); color: var(--text-1); }
.dd-v { color: var(--text-4); font-size: calc(14px * var(--fs-scale)); text-align: right; max-width: 62%; word-break: break-word; }
/* 公历生日那行带「日期 · 属年 · 星座」，比一般 .dd-v 长：中大字号下 62% 上限会把
星座拆成「狮子 / 座」两行（站主实拍）。is-date（仅人物详情生日行挂）放开上限，
并把断行交给空格——keep-all 让 CJK 不在词内断，只可能在「 · 」的空格处折，
星座整词不再被截，也不会撑破卡片（最宽那截「YYYY年M月D日」本就放得下）。 */
.dd-v.is-date { max-width: none; word-break: keep-all; overflow-wrap: normal; }
/* 详情里的「动作行」（归档这类）：排版照 dd-row 抄，只加可按的明示——光标＋右侧箭头＋图标提亮一档。
按下不压暗（站主定：文字禁挂 :active 压暗，即时反馈交给最轻一档震动）。 */
.dd-row.dd-act { cursor: pointer; }
/* 动作行的撑满权从「主语」挪到「说明」：.dd-k 在普通行里是撑满的那一列（站内契约），
但动作行的主语就是那颗动作名（确认已续费 / 取消订阅），它一旦跟着缩、跟着折，
「取消订 / 阅」这种断字就把整行的主语劈开（1107 手机端实拍，大字号档必现）。
改成主语 hug 且不折行、说明去 flex:1 吃剩下的宽度并右对齐——
真挤不下时折的是说明那段话，不是那颗动作名。 */
.dd-row.dd-act .dd-k { flex: none; white-space: nowrap; }
.dd-row.dd-act .dd-v { flex: 1; min-width: 0; }
.dd-row.dd-act .dd-ico { color: var(--text-1); } /* 1011 基档压深到 text-2 后，「提亮一档」改走纯黑 */
.dd-row.dd-act .dd-chev { width: 14px; flex-shrink: 0; color: var(--text-4); display: inline-flex; }
.dd-row.dd-act .dd-chev svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
.dd-row.dd-act:hover .dd-k { color: var(--primary); }
}
/* 底部主操作：手机端把弹窗底栏抬到大按钮档（--control-h-lg 高 · --radius-lg 圆角 · --fs-ctrl-lg 字号）。
这两条曾漏写在媒体查询外，把 app 端规格污染到桌面详情——桌面应落回 .modal-foot 基础 .btn
（--control-h 34px · --radius-btn 4px · 右对齐），故一并收进 ≤768。
历史第三条 flex:1 已删：按钮挂在内容宽的 .modal-foot-group 里，剩余空间全被 .modal-foot-left 的
margin-right:auto 吃掉，实测右组宽 == 子按钮之和（126==126），flex:1 从来没有可分配空间。 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
详情页参考图改版 v1.2（2026-09-21 · 样板=待办详情，手机端专属）
真机反馈收敛：返回=参考图同款白圆钮（图标）、圆钮右侧「待办 · 标题名」面包屑、
编辑回标题栏铅笔、悬浮条只留居中的圆形删除钮（阴影减淡至 .08 档）。
v1.3 收口（2026-09-21）：白圆钮升级为「详情+编辑」共用头部语言——
编辑页返回、铅笔（详情）、对勾/加号（编辑保存）全部换成同款白圆钮，
编辑页主标题从绝对居中移到返回钮右侧（与详情面包屑同一节奏）。
借参考图的层级骨架，转译进站内语言：
· dd-notitle：隐藏居中标题（标题职责交正文 22px 大标题）；
· .dd-meta：标题下一行灰字 meta（截止·分类·重复·创建于），发丝竖线分隔；
· dd-fab + .dd-fabbar：底部悬浮圆形删除钮（居中），内容从其下滚过。
桌面 >768 不挂这些类也不命中（全部圈在 ≤768），底栏语言原样保留。
============================================================ */
.dd-crumb { display: none; } /* 面包屑仅手机端详情标题栏出现（v1.2 起圆形返回钮右侧） */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
待办详情 · dd-modal 迁移 v1.0（2026-09-16）
把待办详情从旧的扁平 detail-hero/detail-kv 提升到与备忘/事件/回顾
一致的「灰底画布 + 白色圆角卡 + iOS 图标行」语言。dd-hero/dd-group/
dd-row 复用既有 token（shadow-card、16 内距、8 组距、发丝线缩进 48px），
这里只补站内没有覆盖的两块：完成勾选英雄区 + 卡内子任务行。
============================================================ */
/* 英雄卡：完成勾选 + 标题；整块可点 = 一键完成（勾选框走原生，JS 里跳过避免二次取反） */
.td-hero { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 注意：不要给 .td-title 加 :active 压暗——按下变淡、抬起恢复的往返就是
「点完成时标题闪一下」，用户明确不要（勾选框填色本身就是按压反馈） */
.td-hero-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.td-hero-row .todo-check { flex-shrink: 0; margin-top: 3px; }
.td-title { flex: 1; min-width: 0; font-size: calc(20px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.35; word-break: break-word; }
.td-title.is-done { color: var(--text-4); text-decoration: line-through; }
/* 详情 = 整屏页（1010 站主定，推翻 1009 的 78% 底部抽屉）：点卡片 → 整屏自下而上快速升起，
入场直接吃 04 的 `.modal-card{animation:sheetUp var(--d-enter)}`，不再单开一档 .6s 抽屉语言（同一套入场语言，
不与别的弹窗分叉）。「详情↔编辑」的共享元素形变（td-grow 长满 / td-shrink 收回）整套撤掉——
点编辑或点新增进表单一律自上而下推入（见文件末尾「弹窗链切换」6），入场方向由「页面角色」决定，
不再看 380ms 链窗口，所以同一个动作不会再「一会儿从下、一会儿从上」。
cmdk 面板虽也带 dd-notitle 但没有 dd-modal，不受影响。 */
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.modal-card.dd-modal.dd-notitle, .modal-card.dd-modal.dd-notitle.closing { animation: none; }
.modal-mask:has(.modal-card.dd-modal.dd-notitle.closing) { animation: none; }
}
/* 分类值：色点与文字上下居中 + 拉开间距（dd-v 里内联成一条，不再贴边） */
.td-cat { display: inline-flex; align-items: center; gap: var(--sp-2); }
.td-cat .cat-dot { width: 9px; height: 9px; flex-shrink: 0; }
/* 描述卡：单独一张白卡内的正文块，长文换行、保留手打换行 */
.td-desc-group { padding: var(--sp-4); }
.td-desc { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
/* 信息组计数徽标：等宽数字，与 dd-v 灰字同档 */
.td-sub-head .chip-cnt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-4); }
/* 子任务表头行与本组列表之间补一道发丝线（dd-row 相邻规则只连 dd-row，此处手动收尾） */
.td-sub-head { padding-bottom: var(--sp-3); }
.td-sub-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--border); } /* 1015 同上：通栏 */
/* 卡内子任务行：拍平掉旧 .sub-row 的独立外框，降为无边框 hairline 行，与 dd-row 同缩进节奏 */
.td-sub-editor { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.td-sub-editor .sub-row {
display: flex; align-items: center; gap: var(--sp-3); position: relative;
min-height: 46px; padding: var(--sp-3) var(--sp-4);
border: none; border-radius: 0; background: transparent;
cursor: pointer;
}
.td-sub-editor .sub-row + .sub-row::before {
content: ""; position: absolute; top: 0; left: 43px; right: 0; border-top: 1px solid var(--border);
}
.td-sub-editor .dt-sub-check { accent-color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }
.td-sub-editor .sub-title { font-size: calc(15px * var(--fs-scale)); color: var(--text-1); white-space: normal; overflow: visible; text-overflow: clip; }
.td-sub-editor .sub-row.is-done .sub-title { color: var(--text-4); text-decoration: line-through; }
.td-sub-editor .sub-row:active { background: var(--bg-hover); }
/* ============================================================
习惯详情 · dd-modal 迁移 v1.0（2026-09-16）
与待办/备忘详情统一：灰底画布 + 白色圆角卡。习惯特有的热力面板
保留 hm-modal 的宽度（年视图网格需要），但外壳从 bg-soft 描边框
升级为白卡（与 .dd-group 同壳）。仅作用于 .dd-modal 内的习惯详情，
习惯列表卡片的 .habit-meta 完全不受影响。
============================================================ */
.hb-hero-dot { width: 12px; height: 12px; flex-shrink: 0; }
.hb-hero-name { flex: 1; min-width: 0; font-size: calc(20px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.35; word-break: break-word; }
.hb-hero .hb-ctl { flex-shrink: 0; }
/* 统计组数值：等宽大数字，呼应站内「黑白 + 等宽数字」语言 */
.hb-stats .hb-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: calc(16px * var(--fs-scale)); color: var(--text-1); }
/* 热力面板：在灰底画布上升级为白卡，与 dd-group 同壳同距 */
.dd-modal .hm-panel {
margin-top: var(--sp-3); padding: var(--sp-4);
background: var(--bg-card); border: none; border-radius: var(--radius-card-m);
box-shadow: var(--shadow-card);
}
/* ============================================================
回收站 / 已归档 · 卡片布局 v2（09-19 晚：手机底部抽屉 + 桌面 dd-modal，
两端内容同一「灰画布 + 每条一张白色圆角卡」。
说明行 = .bin-cap（图标 + 保留期 + 等宽计数）浮在画布上，
条目 = .trash-row 白卡，尾部说明 = .bin-tip 灰字；
卡内操作 = 图标钮：恢复（↩ 中性）/ 彻底删除（红），底栏清空也是同一只删除图标钮。
============================================================ */
/* 管理抽屉表头/说明行（分类/标签/类型管理共用；回收站/已归档已改用 .bin-cap/.bin-tip） */
.tb-head { padding-bottom: var(--sp-3); }
.tb-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--border); } /* 1015 同上：表头线也归通栏 */
.tb-head .chip-cnt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-4); }
.tb-tip { position: relative; padding: var(--sp-3) var(--sp-4); font-size: calc(13px * var(--fs-scale)); line-height: 1.6; color: var(--text-4); }
.tb-tip::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--border); }
.bin-cap {
display: flex; align-items: center; gap: var(--sp-2);
padding: 2px var(--sp-1) var(--sp-3); font-size: calc(13px * var(--fs-scale)); color: var(--text-4);
}
.bin-cap svg { flex: none; width: 16px; height: 16px; }
.bin-cnt { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text-4); }
.trash-rows { display: flex; flex-direction: column; gap: var(--sp-3); max-height: none; overflow: visible; }
.trash-row {
display: flex; align-items: center; gap: var(--sp-3);
background: var(--bg-card); border: none; border-radius: var(--r-3);
padding: var(--sp-3); box-shadow: var(--shadow-card);
transition: transform var(--d-micro) ease, background var(--transition-fast);
}
.trash-rows .cat-row-empty {
background: var(--bg-card); border: none; border-radius: var(--r-3);
padding: var(--sp-6) var(--sp-4); text-align: center; font-size: calc(14px * var(--fs-scale)); color: var(--text-4);
box-shadow: var(--shadow-card);
}
.bin-tip { padding: var(--sp-3) var(--sp-1) 2px; font-size: calc(13px * var(--fs-scale)); line-height: 1.6; color: var(--text-4); }
/* 行内动作 = 图标钮：恢复（↩ 中性）/ 彻底删除（红），层级靠配色不靠字号；触控档见文件下方块 */
.trash-row .cat-act { width: 32px; height: 32px; }
.trash-row .cat-act svg { width: 16px; height: 16px; }
.trash-row .cat-act.cat-act-del { color: var(--status-bad); }
@media (hover: hover) { .trash-row .cat-act.cat-act-del:hover { background: var(--tag-bad-bg); color: var(--status-bad); } }
.trash-row .cat-act:active { transform: scale(.94); }
/* 手机端底部抽屉：灰画布通铺并一路铺到抽屉底（吃掉 sheet 自己的 16px + 安全区下内衬），
列表区吃 --sheet-max 高度档，把手两档 detent/下拉即关由 wireSheetGrab 接管（list 已认 .bin-scroll）。
画布必须铺到底：否则底下顶出一条 .wp-sheet 自己的白带，灰字卡在灰/白交界上读作「位置错位」（0927 真机反馈）；
回收站与已归档现在同一口径——底栏不再占高度（见下 .wp-foot），抽屉底部整块都是画布。 */
.bin-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bin-sheet { position: relative; }
.bin-sheet .bin-scroll {
background: var(--bg-page); margin: 0 -16px calc(-16px - var(--sab));
padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--sab));
max-height: var(--sheet-max); transition: max-height var(--d-push) var(--ease-enter);
}
.bin-sheet .trash-row:active { transform: scale(.985); }
/* 单胶囊底栏通栏（选项类抽屉通用） */
.wp-foot > .wp-btn:only-child { flex: 1; }
/* 清空回收站 = 一只悬浮钮（1105 站主两轮点名：灰的、白的收口条都不要，只留钮）：
底栏退出文档流，不再占那 62px 一条——chrome 少 62px，wireSheetGrab 的 geo() 就把列表区
长高 62px 补回来，抽屉总高度不动。钮绝对定位浮在画布下缘，左右两段空白靠
pointer-events:none 穿透（否则整条透明带会拦住列表滚动与卡片点击），钮自己恢复 auto。
列表末尾另留 62px（钮 46 + 上下各 8）滚出余量，最后一张卡能滚到钮上方、不被压住。 */
.bin-sheet .wp-foot {
position: absolute; left: 0; right: 0; bottom: calc(var(--sp-3) + var(--sab));
justify-content: center; pointer-events: none;
}
.bin-sheet .wp-foot .bin-clear { pointer-events: auto; }
.bin-sheet:not(.bin-nofoot) .trash-rows { margin-bottom: 62px; }
/* 一枚删除图标圆钮：白底 + 红字（浮在灰画布上就是一片浮起的白，不叠淡红色块），
阴影走站内黑影令牌 --shadow-float（0 10px 28px / 9% 黑）：要柔要模糊，不带红调、不压重量 */
.wp-btn.wp-btn-danger.bin-clear {
flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card); color: var(--status-bad);
box-shadow: var(--shadow-float);
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--d-fast) var(--ease-float);
}
.wp-btn.wp-btn-danger.bin-clear:active {
background: var(--bg-hover);
box-shadow: var(--shadow-hover);
transform: scale(.94);
}
/* 两端同一只垃圾桶：图标幅面统一；桌面沿用 .btn-danger 描边皮肤，只把通栏收成方钮。
宽度取 --control-h 而非裸 46px：binMobile()=innerWidth<=768，这条只在桌面命中，而桌面底栏
按钮统一是 --control-h 高——46px 宽配 34px 高是个被压扁的长方形（1003 体检实测 48×35）。
写成 min-width:769 显式跟 JS 门对齐：≤768 段把 --control-h 重映射成 44px，
不圈起来的话这条会在手机端取到 44 宽、配 --control-h-lg 的 46 高，又歪一档。 */
.bin-clear svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 769px) {
.dd-modal .modal-foot .btn.bin-clear { width: var(--control-h); padding: 0; }
}
/* 模块面板（手机端）：按住 dock 上滑弹出，复用 wp-sheet 两档抽屉壳；
行 = 侧栏菜单克隆（概览/用户/未来新模块自动跟进），白卡行 + 右侧计数/当前位。
面板只在 ≤768 由 JS 创建，无需媒体查询 */
.mod-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mod-sheet .mod-scroll {
background: var(--bg-page); margin: 0 -16px; padding: var(--sp-3) var(--sp-4) var(--sp-4);
max-height: var(--sheet-max); transition: max-height var(--d-push) var(--ease-enter), min-height var(--d-push) var(--ease-enter);
}
.mod-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.mod-row {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%; border: none; cursor: pointer;
background: var(--bg-card); border-radius: var(--r-3);
padding: var(--sp-3); box-shadow: var(--shadow-card);
font-size: calc(15px * var(--fs-scale)); color: var(--text-1);
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* 长按=拿起拖换，不弹选择/呼出 */
transition: transform var(--d-base) var(--ease-float); /* 拖动让位补间（§4.3b 四口同一套） */
}
.mod-row svg { width: 20px; height: 20px; flex: none; color: var(--text-3); }
.mod-row .mod-label { flex: 1; min-width: 0; text-align: left; }
/* 固定席序号：钉在 dock 第几格（长按拖到别的行互换） */
.mod-row .mod-seat {
flex: none; min-width: 16px; height: 16px; padding: 0 var(--sp-1); border-radius: var(--r-2);
background: var(--bg-count); color: var(--text-3);
font-family: var(--font-mono); font-size: var(--fs-10); line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
transition: background var(--d-base), color var(--d-base);
}
.mod-row .mod-seat.is-active { background: var(--primary); color: var(--on-primary); }
.mod-row .mod-cnt { animation: none; }
.mod-row .mod-cnt-inline { font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--text-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mod-row .mod-cur { flex: none; font-size: var(--fs-12); color: var(--text-4); }
/* 概览=主页：右侧主页小图标，锁定第一行不参与拖动 */
.mod-row .mod-home { flex: none; display: inline-flex; color: var(--text-3); }
.mod-row .mod-home.is-active { color: var(--text-1); }
.mod-row .mod-home.is-active svg { fill: currentColor; }
.mod-row .mod-home svg { width: 16px; height: 16px; color: inherit; }
.mod-row.mod-locked { cursor: default; }
.mod-row.is-cur { font-weight: var(--fw-semibold); }
.mod-row.is-cur svg { color: var(--text-1); }
.mod-row:active { transform: scale(.985); }
/* 拖拽态（§4.3b 公共标准）：拿起行由 JS 逐帧写 transform（位移+1.015 放大），
浮起用 --shadow-float（与其余三面同档，此前是 hover 档）；
「跟手禁补间」交给容器态类压，松手摘掉容器类＝补间回来、浮起还在，才落得进空位 */
.mod-row.is-drag { position: relative; z-index: 3; box-shadow: var(--shadow-float); }
.mod-rows.is-dragging-mode .mod-row.is-drag { transition: none; }
.mod-rows.is-dragging-mode .mod-row:active { transform: none; }
/* ============================================================
滚轮日期选择器（移动端 · 底部抽屉 + 三列滚轮 + 公历/农历）
============================================================ */
.wp-mask {
position: fixed; inset: 0; z-index: 9000;
background: var(--mask);
display: flex; align-items: flex-end;
opacity: 0; transition: opacity var(--d-modal) ease, padding-bottom var(--d-modal) var(--ease-enter, ease);
}
.wp-mask.is-open { opacity: 1; }
.wp-sheet {
width: 100%; background: var(--bg-card);
border-radius: var(--radius-sheet);
padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + var(--sab));
box-shadow: var(--shadow-modal);
transform: translateY(100%); transition: transform var(--d-med) var(--ease-enter);
}
.wp-mask.is-open .wp-sheet { transform: translateY(0); }
.wp-title { text-align: center; font-size: calc(17px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); margin-bottom: var(--sp-3); }
.wp-seg {
display: flex; justify-content: center; gap: var(--sp-1); margin: 0 auto var(--sp-3);
padding: var(--sp-1); width: max-content; max-width: 100%;
background: var(--bg-muted); border-radius: var(--radius-pill);
}
.wp-seg-btn {
border: none; background: transparent; height: 36px; padding: 0 var(--sp-6);
border-radius: var(--radius-pill); font-size: calc(15px * var(--fs-scale)); color: var(--text-3); cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.wp-seg-btn.is-on { background: var(--primary); color: var(--on-primary); font-weight: var(--fw-medium); }
.wp-wheels { display: flex; height: 220px; margin: var(--sp-1) 0 var(--sp-4); }
.wp-col {
flex: 1; position: relative; overflow: hidden;
touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
-webkit-mask-image: linear-gradient(transparent 0%, #000 24%, #000 76%, transparent 100%);
mask-image: linear-gradient(transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.wp-col:active { cursor: grabbing; }
/* 中心选中带：浅灰圆角横带（各列独立，贴合参考图） */
.wp-col::before {
content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
height: 40px; margin-top: -20px;
background: var(--bg-hover); border-radius: var(--r-2); z-index: 0;
}
.wp-list { position: absolute; left: 0; right: 0; top: 0; will-change: transform; z-index: 1; }
.wp-item {
height: 44px; line-height: 44px; text-align: center;
font-size: calc(15px * var(--fs-scale)); color: var(--text-4);
font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-item.is-on { color: var(--text-1); font-weight: var(--fw-semibold); font-size: calc(17px * var(--fs-scale)); }
/* ---- 滚轮抽屉（日期/时间，0922）：单档固定高，标题栏对称双白圆钮——
左 ✕ 清值（仅可选场景渲染）、右 ✓ 保存（均为详情页 .modal-head-act.is-icon 同材质），
下拉即关、点标题栏不换档（wireSheetGrab expand:false, tap:false） ---- */
.wp-drawer .wp-title { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; }
.wp-drawer .wp-title .wp-ok { position: absolute; right: 0; top: 50%; margin-top: -18px; }
.wp-drawer .wp-title .wp-x { position: absolute; left: 0; top: 50%; margin-top: -18px; }
.wp-drawer .wp-title .wp-x svg { width: 16px; height: 16px; }
/* 「指定今天 / 指定现在」：滚轮下一枚灰底胶囊 + 线性小图标，一眼可读可点（区别于裸文字） */
.wp-drawer .wp-under { text-align: center; margin: 2px 0 var(--sp-1); }
.wp-jump {
display: inline-flex; align-items: center; gap: var(--sp-1);
border: 0; background: var(--bg-muted); color: var(--text-2);
border-radius: var(--radius-pill); height: 38px; padding: 0 var(--sp-4);
font-family: inherit; font-size: calc(14px * var(--fs-scale)); font-weight: var(--fw-medium); line-height: 1;
cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--d-fast) var(--ease-float);
}
.wp-jump svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.wp-jump:active { background: var(--bg-count); color: var(--text-1); transform: scale(.95); }
.wp-foot { display: flex; gap: var(--sp-3); }
.wp-btn { border: none; height: 50px; border-radius: var(--radius-pill); font-size: calc(16px * var(--fs-scale)); cursor: pointer; }
.wp-btn-cancel { flex: 1; background: var(--bg-muted); color: var(--text-2); }
.wp-btn-cancel:active { background: var(--bg-count); }
/* 可选值滚轮（如待办具体时间）左侧的「清除」：窄胶囊、弱化色，别跟确定抢注意力 */
.wp-btn-clear { flex: 0 0 auto; padding: 0 var(--sp-4); background: none; color: var(--text-3); }
.wp-btn-clear:active { color: var(--text-1); }
.wp-btn-ok { flex: 1.5; background: var(--primary); color: var(--on-primary); font-weight: var(--fw-medium); }
.wp-btn-ok:active { background: var(--primary-hover); transform: scale(.985); }
/* 危险确认：同一枚胶囊，只换成语义红（与左滑删除展开的胶囊同款红） */
.wp-btn-ok.wp-btn-danger { background: var(--status-bad); color: var(--on-primary); }
.wp-btn-ok.wp-btn-danger:active { background: var(--status-bad); filter: brightness(.9); transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
.wp-mask, .wp-sheet, .wp-list { transition: none !important; }
}
/* ============================================================
移动端选项选择卡片（复用 .wp-mask/.wp-sheet 抽屉骨架）
列表行 + 右侧勾选态：选中不整行反白，只显 ✓ + 加粗，走「小面积强调」语言
============================================================ */
.op-list {
display: flex; flex-direction: column;
max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
margin: 2px 0 0; overscroll-behavior: contain;
}
.op-item {
display: flex; align-items: center; gap: var(--sp-3); width: 100%;
min-height: 52px; padding: var(--sp-3) var(--sp-2);
background: transparent; border: none; border-top: 1px solid var(--border);
color: var(--text-1); font-family: inherit; font-size: calc(16px * var(--fs-scale)); text-align: left;
cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background var(--transition-fast);
}
.op-list .op-item:first-child { border-top: none; }
.op-item:active { background: var(--bg-hover); }
.op-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-check {
color: var(--primary); display: inline-flex; flex: none;
opacity: 0; transform: scale(.6);
transition: opacity var(--d-base) ease, transform var(--d-base) var(--ease-float);
}
.op-check svg { width: 20px; height: 20px; }
.op-item.is-on { font-weight: var(--fw-semibold); }
.op-item.is-on .op-check { opacity: 1; transform: scale(1); }
/* 表单内的分类 / 类型抽屉：骨架就是上面这只 op-sheet（46vh 滚动窗、不换档、不锁视口），
窗里换成列表页同款的 tf-row 卡片行——行距借 .tf-list 的 8px gap，不挂 .tf-list 类本身，
免得把手拖档时选到另一只容器；管理入口留在滚动窗外，列表再长它也不跟着滚走 */
.fp-sheet .op-list { gap: var(--sp-2); }
.fp-sheet .tps-mgr { width: 100%; margin-top: var(--sp-3); }
/* ============================================================
详情/表单 · 内联操作区（手机端）：mobDetailify / mobFormify 把底栏动作
搬进内容末尾时挂的容器。两种形态共用同一个类名——
· float 详情：.dd-foot-inline.dd-fabbar（悬浮白圆删除钮，见上方 ≤768 段）
· 表单页：.dd-foot-inline 里只放一枚 .dd-del-text 红字行
类名不许改：站内十余个探针按 '#modalCard .dd-foot-inline …' 契约点击。
gate-ok：这两个类只由 wbCoarse() 为真时挂上，桌面 mouse 环境永远匹配不到，
所以刻意不圈媒体查询——圈了反而伤横屏手机：wbCoarse() 的第二条腿
(hover:none) and (pointer:coarse) 在 844×390 这类横屏下为真，而 max-width:768 为假，
圈起来会让横屏手机连这层 flex 容器都拿不到。（横屏结构性错位在 CSS 侧还有 .dd-fabbar
那条同源问题，1003 已单独记为待议项，不在本轮动。）
============================================================ */
.dd-foot-inline {
margin-top: var(--sp-4);
padding-bottom: var(--sab);
display: flex; flex-direction: column; gap: var(--sp-2);
}
.dd-del-text {
width: 100%; height: 40px; border: none; background: transparent;
color: var(--tag-bad-fg); font-size: calc(14px * var(--fs-scale)); cursor: pointer;
}
.dd-del-text:active { opacity: .55; }
/* ============================================================
表单分组卡（编辑页 · 参考 iOS 设置式）
桌面端 .fg-card 完全透明（display:contents，布局照旧）；
移动端：灰底画布 + 白色分组卡 + 左标签右控件行 + 头部保存胶囊。
============================================================ */
/* 图标尺寸与点字间距立成两枚局部令牌：定义在 .fg-card 本身（桌面端也在），
下面的标签列下限从它们推出来——改图标大小，不会把「同一张卡各行输入起始线齐平」
这条设计意图悄悄挤掉 */
.fg-card { display: contents; --fg-i-w: 20px; --fg-i-gap: 8px; }
/* 表单行标题前那枚图标片：与「提醒与震动自检」页同族描线字形（PF_ICONS），小 2px。
1011 定稿全站行首图标统一一档；首版取详情档 text-4 被站主打回「太灰」，
四档并排试作（dbg-ico-align-tone-trial）后压到 --text-2——图标要贴着标题的实度。
行式/开关行的居中没有用 vertical-align 魔法数（标题升 16px 后实测偏低 2px），
改由下面 label/.switch-label 的 inline-flex 承担；-5px 只服务堆叠行那类纯内联场景。 */
.fg-card .fg-i {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: var(--fg-i-w); height: var(--fg-i-w);
margin-right: var(--fg-i-gap); vertical-align: -5px;
color: var(--text-2);
}
.fg-card .fg-i svg { width: var(--fg-i-w); height: var(--fg-i-w); }
.modal-head-act {
margin-left: auto; flex-shrink: 0;
border: none; height: 32px; padding: 0 var(--sp-4);
border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary);
font-size: calc(14px * var(--fs-scale)); font-weight: var(--fw-medium); cursor: pointer;
transition: transform var(--d-micro) ease, background var(--transition-fast);
}
.modal-head-act:active { transform: scale(.94); background: var(--primary-hover); }
/* ≤768 手机端样式 → 06-mobile.css */
/* 分组卡内开关联动拍平：switch-row 自带的小内衬与卡片叠层冲突 */
/* ≤768 手机端样式 → 06-mobile.css「分组卡内开关联动拍平：switch-row 自带的小内衬与卡片叠层冲突」 */
/* 头部对勾保存（移动端表单通用） */
.modal-head-act.is-icon {
width: 34px; height: 34px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.modal-head-act.is-icon svg { width: 20px; height: 20px; } /* 与返回钮 chevron 同幅 */
/* ≤768 手机端样式 → 06-mobile.css */
/* 历史遗留分支（已删，1003 体检）：这一段是为「非悬浮版详情」写的——主操作通栏胶囊、
删除降成居中红字行。五只详情现在一律 mobDetailify({float:true})，非悬浮分支只剩
mobFormify 挂的 .dd-del-text（不是 .btn），于是这里六条规则全部被 .fab-circle 逐条遮蔽，
唯独 :hover / :active 两条盖不住，实测把白圆删除钮洗成透明（hover 时白底消失、
按下时 opacity .55）。删掉即回到 .btn-danger 基础皮肤，圆钮由 .fab-circle 自己说话。 */
/* ============================================================
纪念日列表卡 · 信息层级重排
名称行（类型圆点+名字）/ 属性文字行 / 时间语境行；右侧数字去重
============================================================ */
.date-card .date-title { gap: var(--sp-2); flex-wrap: nowrap; }
.date-name { font-size: calc(16px * var(--fs-scale)); }
/* 1011 D：类型徽章进属性行——.date-attrs 变 flex 容器（分类徽章 + 其余属性文字并排）；
标题前的 .dd-dot 随「类型圆点挪进徽章」一并撤除，三处列表同一套装束 */
.date-attrs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); color: var(--text-4); font-size: var(--fs-micro); margin-top: var(--sp-1); letter-spacing: .2px; }
.date-when {
color: var(--text-3); font-size: var(--fs-caption); margin-top: var(--sp-1);
font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.date-when { font-size: calc(13px * var(--fs-scale)); }
/* ============================================================
手机端提示 · 灵动岛（2.64 定稿体积生长语言；1105 修「两段」与「收缩别扭」）
同一枚 dock 上方深色毛玻璃胶囊，动效语言是「体积生长」：
从种子宽（左右内衬+状态点，点恰居中）真变 width 展开——高度/圆角锁死，
禁非等比缩放（样板量过：scaleX/Y 拉胶囊=读成变形）；展宽 450ms 走
cubic-bezier(.12,.9,.22,1)「早冲刺收尾」。
1105 两条改动（样式在 06-mobile，编排全在 app.js 的 islandToast 一族）：
· 出场不再「等宽度停稳才亮字」——每颗字按「裁剪边什么时候揭到自己」各排各的拍，
展宽与出字叠成同一个动作（旧写法实测宽 154ms 到位、末字 358ms 才起跑＝读成两段）；
· 退场三拍：灭字拍（.12s 内整句文字与状态点一起先散）→ 90ms 后缩回种子与淡出同帧起
（缩回 .22s 从容收、淡出 .15s 不压延迟，两拍叠着走完，肉眼总长 ~210ms）；
旧写法只改 duration 且 il-glyph 没绑 il-lit＝文字全程不淡出，
被缩回去的右缘当场切掉 38~136px（站主说的「收缩别扭」，逐帧量出来的）；
状态点原先也不吃灭字拍，一直亮到岛凭空没＝收尾没有先后（站主：突兀）。
桌面端保持顶部白卡 + toastIn 不动。--il-bottom 是高度调节的唯一变量。
标记名（供盘账 grep）：is-in / il-lit / il-unlit / il-closing / il-sustain / il-instant / il-shrink / islandSeed / data-cls
============================================================ */
.toast { pointer-events: auto; cursor: pointer; }
/* ≤768 手机端样式 → 06-mobile.css */
/* 2.64：toastUp 入场关键帧退役——手机端改走岛形变（JS 驱动 width 过渡），桌面用 toastIn */
/* ============================================================
设置整合：顶栏单头像入口 + 外观三分段
============================================================ */
/* 头像按钮全端可见（顶栏唯一入口） */
.avatar-btn { display: inline-flex; }
@media (min-width: 1025px) {
.avatar-btn { width: 34px; height: 34px; }
}
/* 设置行内三分段（iOS 设置式：灰轨白胶囊） */
.pf-seg {
display: inline-flex; flex-shrink: 0; gap: 2px;
background: var(--bg-muted); border-radius: var(--radius-pill); padding: 3px;
}
.pf-seg button {
border: none; background: transparent; cursor: pointer;
height: 28px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
font-size: calc(12.5px * var(--fs-scale)); color: var(--text-3);
transition: background var(--transition-fast), color var(--transition-fast);
}
.pf-seg button.active {
background: var(--bg-card); color: var(--text-1);
font-weight: var(--fw-medium); box-shadow: var(--shadow-sm);
}
/* 紧凑档：一行只有一颗钮时（桌面小部件「添加 / 选择习惯」、提醒页「去设置」），
38px 触控地板的通用胶囊会把行顶得虚胖——图形收到 26px，
热区用 ::before 上下各外扩 6px 回到 38px（视觉轻、点得住）。
两个类名并列抬到 (0,2,1)：手机端那条 `.pf-seg button{height:38px}` 是同元素更晚的规则，
单类写会被静默盖掉（0928 实拍：钮根本没变小）。 */
.pf-seg.pf-seg-tight { padding: 2px; }
/* 0929 审计：这一档专用于「一行只有一颗」的独立动作（桌面小部件「添加/选择习惯」、
提醒页「去设置」）。原本继承 .pf-seg button 的 --text-3 弱色，读起来像「未选中的分段」
而非可点动作——对比虽够（#555/#F3F4F6≈6.7:1 过 AA），但主动作不该穿最低强调。
抬到 --text-1 + 中等字重，让它读作按钮；仍是站内既有外壳，不另创。 */
.pf-seg.pf-seg-tight button { position: relative; height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-12); color: var(--text-1); font-weight: var(--fw-medium); }
.pf-seg.pf-seg-tight button::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
/* 小一号分段器（0929 真机：设置页里的分段钮比标题还抢眼）：
图形 30px / 12px 字，热区靠 ::before 上下各外扩 4px 回到 38px。
与 .pf-seg-tight 同规格思路，只是这档用于「一排多枚」的分段（提前提醒、强度、自检） */
.pf-seg.pf-seg-sm { padding: 2px; }
.pf-seg.pf-seg-sm button { position: relative; height: 30px; padding: 0 var(--sp-2); font-size: var(--fs-12); }
.pf-seg.pf-seg-sm button::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
/* 本地模式名片右侧「登录账号」文字入口 */
.pf-login-act {
margin-left: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 2px;
border: none; background: transparent; cursor: pointer;
color: var(--primary); font-size: calc(14px * var(--fs-scale)); font-weight: var(--fw-medium);
padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
}
.pf-login-act svg { width: 15px; height: 15px; }
.pf-login-act:active { opacity: .55; }
/* ============================================================
个人中心 · 退出登录（2.13）：圆图标钮 → 满宽贴底大按钮
------------------------------------------------------------
站主点名「退出按钮往下移动，位置参考修改登录密码页那颗」。钮本身用账户向导
那一档现成皮肤（.acct-act .acct-act-block），这里只补两件事：
① .pf-exit-btn —— 图标与文字并排（站内同款：危险操作那颗 .dc-reset-btn）；
② .pf-pinfoot —— 把 .dd-foot-inline 推到「剩余空隙之下」，并把内容底距换成
--auth-btn-bottom：它贴的是 1008 定的那条主按钮基准线，与改密 / 绑定页那颗同一行
（所以 .dd-foot-inline 自带的那份 --sab 内距在这里收掉，免得安全区被算两遍）。
gate-ok：.pf-pinfoot 只由 wbCoarse() 为真时挂上（与 .dd-foot-inline 同一份约定），
所以刻意不圈媒体查询——横屏手机 wbCoarse() 为真而 max-width:768 为假，圈起来会漏。
内容长过一屏时 flex 的 auto 外边距自动归零，退回顺序排布，不裁不跳。
============================================================ */
.pf-exit-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.pf-exit-btn svg { width: 18px; height: 18px; flex: none; }
.modal-card.pf-pinfoot .modal-body { display: flex; flex-direction: column; padding-bottom: var(--auth-btn-bottom); }
.modal-card.pf-pinfoot .modal-body > * { flex: none; }
.modal-card.pf-pinfoot .dd-foot-inline { margin-top: auto; padding-top: var(--sp-4); padding-bottom: 0; }
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
头像圆形化（手机端）+ 编辑资料页居中放大点头像
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 编辑资料：头像独立浮于灰底画布居中，昵称卡在其下方 */
.pf-edit-avatar { flex-direction: column; align-items: center; gap: 0; margin-bottom: 0; padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.user-avatar-xl { width: 92px; height: 92px; font-size: calc(36px * var(--fs-scale)); border-radius: var(--r-circle); }
.ep-avatar-btn {
position: relative; display: block; padding: 0; border: none; background: transparent;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: transform var(--d-fast) ease;
}
.ep-avatar-btn:active { transform: scale(.955); }
.ep-avatar-cam {
position: absolute; right: -2px; bottom: -2px;
width: 30px; height: 30px; border-radius: var(--r-circle);
display: flex; align-items: center; justify-content: center;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--text-3); box-shadow: var(--shadow-sm);
}
.ep-avatar-cam svg { width: 15px; height: 15px; }
/* ============================================================
头像取景页（2.13）：圆框舞台 + 舞台里的图 + 缩放滑杆
------------------------------------------------------------
页面壳整个走账户向导那一套（.acct-modal .acct-wizard：大标题落基准线、白卡装内容、
主钮贴底），所以本页只添这三件新皮。
· 舞台按「所见即所得」裁成圆形——头像本来就是圆的，给方框会骗人（四角其实不上屏）；
· 图永远盖满舞台（位移在 JS 里夹住），touch-action:none 把手势交给我们、页面不跟着滚；
· 只动 transform / width / height，与站内「动效只动 transform/opacity」同源；
· 滑杆是原生 range（键盘左右键与读屏天然可用），皮按令牌上，不引第二套控件；
只上 webkit 那一套前缀——承载体是 Chrome 与 Android WebView，Firefox 分支是白付体量。
============================================================ */
.av-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.av-stage {
position: relative; align-self: center;
width: min(62vw, 260px); height: min(62vw, 260px);
overflow: hidden; border-radius: var(--r-circle);
background: var(--bg-muted); touch-action: none; cursor: grab;
}
.av-stage:active { cursor: grabbing; }
.av-img {
position: absolute; left: 50%; top: 50%;
display: block; max-width: none;
transform: translate(-50%, -50%);
pointer-events: none; /* 手势一律由舞台接：图自己不去接 pointer，少一半丢手 */
user-select: none; -webkit-user-drag: none;
}
/* 1025：取景缩放滑杆删除——双指捏合已覆盖缩放，页面只留圆框舞台 + 重新选择图片。 */
/* ============================================================
Klog 手机端间距规范 v1.0（2026-09-14 定稿，仅 ≤768px 生效）
------------------------------------------------------------
4pt 基准网格，对齐 iOS HIG。后续所有手机端改动必须遵循：
页面边距 16px --content-px 页面内容左右
卡片内距 16px横 / 14px纵 --card-pad（纵向为光学修正）
组内间距 8px 同组元素：label↔控件、图标↔文字、标题↔内容
卡片间距 12px --card-gap 卡片列表、全部网格 gap
模块间距 20px --module-gap 工具栏↔列表、分区↔分区、hero↔卡区
触控目标 ≥44px --control-h；表单行 54、列表行 ≥44
浮层规则 dock=底12+安全区 · toast=dock 上 96 · 弹窗底栏=横16+安全区
桌面端维持自身 24/16 节奏，本规范只在手机端媒体查询内覆盖。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
待办左滑快捷操作层（移动端）：归档 / 删除
参考 HarmonyOS 短信两段式：动作层从行右外随内容同步滑入；
圆形图标按钮 → 完全展开时主操作（删除）膨胀为大胶囊，
次操作（归档）保持小圆；内容平移同时渐隐。
============================================================ */
.swipe-acts { display: none; }
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
手机端全局 UI/UX 优化 v1.0（2026-09-15）
------------------------------------------------------------
本块统一收口手机端的手感、层级、安全区与字号缺陷，
只在 ≤768px / 触屏生效，桌面端零影响；视觉风格不动。
遵循「手机端间距规范 v1.0」：4pt 网格、主操作 ≥44、
icon 类 ≥38、表单行 54、列表行 ≥44、正文 ≥15、辅助 ≥12。
============================================================ */
/* ---- 1. 触摸目标：视觉尺寸克制，热区用 ::after 隐形扩张 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 1. 触摸目标：视觉尺寸克制，热区用 ::after 隐形扩张 ----」 */
/* ---- 2. 层级：用户管理角色菜单曾被底部 dock（z60）压住 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 2. 层级：用户管理角色菜单曾被底部 dock（z60）压住 ----」 */
/* ---- 3. 触屏按压反馈（1104 起视觉 hover 已全部在 @media (hover: hover) 内门控，
触屏不再产生粘滞态，hover 复位已删；本块只保留 :active 即时按压） ---- */
@media (hover: none) {
/* 即时按压反馈 */
.cat-act:active, .sub-del:active, .dd-item:active, .pwd-toggle:active,
.login-pop-x:active, .dc-reset-btn:active, .pf-seg button:active,
.memo-pin:active, .rm-cal:active, .habit-today-row:active,
.cat-row:active, .trash-row:active { background: var(--bg-hover); }
.cat-swatch:active { transform: scale(.88); }
.wd-btn:active, .habit-toggle-btn:active { transform: scale(.97); }
.habit-card:active, .diary-card:active, .summary-card[data-goto]:active,
.user-row:active { transform: scale(.985); }
.rm-save-btn:active { transform: scale(.92); }
.dd-item:active { color: var(--text-1); }
}
/* ---- 4. 视口与安全区：登录页 / 引导页贴 home 条、固定 px 高在横屏溢出 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 4. 视口与安全区：登录页 / 引导页贴 home 条、固定 px 高在横屏溢出 ----」 */
/* ---- 5. 字号地板与 4pt 网格回归 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 5. 字号地板与 4pt 网格回归 ----」 */
/* ---- 6. 弹窗链切换：详情→编辑/删除确认时新内容自顶部推入 ----
（原「1802 行」声明为空块，此处补齐；与返回时的下移离场成对） */
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.modal-card.chain-in .modal-body > * { animation: none !important; }
.modal-card.swap-fade .modal-body > *:not(.modal-ghost), .modal-card.fade-open .modal-body > *,
.modal-card.swap-fade .modal-body > .modal-ghost, .modal-card .modal-head-ghost,
.modal-card .modal-fadeout, .modal-card.is-stacked .modal-body > * { animation: none !important; }
}
/* ============================================================
≤380px 超窄屏收缩（必须排在所有 ≤768 规则之后才生效）
规范：只收缩字号与 dock 宽度，间距与触控目标不回退。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
【样板 · 待确认】待办列表卡片化（仅手机端）
------------------------------------------------------------
把「表格行 + 分隔线」升级为独立信息卡：
· 卡片各自呼吸（--card-gap），去掉行分隔线的表感
· 截止时间降为第二行等宽数字，创建日期让位（详情页仍完整可见）
· 优先级星标补语义色：高=警示红 / 中=正文灰 / 低=禁用灰
· 完成态整卡降权重，与未完成拉开层次
不满意可整块删除，不影响上面的规范收口。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
【推广】卡片列表语言统一：备忘 / 事件 / 习惯 / 日记
------------------------------------------------------------
四张列表的卡壳（白底 + 1px 描边 + radius-card + 14/16 内距 +
shadow-card）本就与待办样板一致，此处补齐的是文字层级与节奏：
· 主标题一律 16px（与待办标题同档），事件名此前已是 16px
· 次级信息一律 12px 地板，数字统一 tabular-nums
· 列表间距回归 --card-gap（事件列表原本 10px 脱离 4pt 网格）
· 按压缩放全部统一 .985
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
确认类弹窗外壳（删除 / 清空 / 重置 / 退出 / 容量 / 数据异常）
------------------------------------------------------------
线性描边图标圆底 → 对象名 → 说明，三段纵向居中；
桌面沿用窄卡，手机端在全屏页里垂直居中、底栏转通栏胶囊。
危险色只取站点已有的 --tag-bad-* / --danger（左滑删除胶囊同款红）。
============================================================ */
.cf-body {
display: flex; flex-direction: column; align-items: center;
gap: var(--sp-2); text-align: center;
}
.cf-mark {
width: 52px; height: 52px; border-radius: var(--r-circle); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--bg-muted); color: var(--text-3);
}
.cf-mark svg { width: 24px; height: 24px; }
.cf-mark.is-danger { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.cf-headline {
font-size: calc(17px * var(--fs-scale)); font-weight: var(--fw-semibold); color: var(--text-1);
line-height: 1.45; word-break: break-word; max-width: 24em;
}
.cf-headline b { font-weight: var(--fw-bold); }
.cf-msg {
font-size: var(--fs-caption); color: var(--text-3); line-height: 1.7;
max-width: 30em; word-break: break-word;
}
.cf-msg b { color: var(--text-1); font-weight: var(--fw-medium); }
/* 手机端：确认弹窗改为与滚轮日期选择器 / 选项卡片同款的底部抽屉
（.wp-mask / .wp-sheet 一套参数：24 圆角、18/16 内距、自下而上 .32s、
标题居中 17px 粗、底栏 50px 双胶囊 flex 1 / 1.5） */
/* 手机端确认抽屉排版 v1.1（cfSheet 独立抽屉）
------------------------------------------------------------
历史上四级内容挤在 gap:10 里、说明与按钮间距实测为 0，读起来一坨。
现在按 4pt 网格拉开节奏，并让「对象名」成为唯一主标题：
带 headline 时把 .wp-title 降为 13px 眉标（:has 判定，退出 / 重置等
没有对象名的确认仍保持 17px 粗标题）。数值与下方 .cf-modal 成对维护。
选择器一律带 .cf-sheet：.wp-title / .wp-foot 与滚轮选择器、选项卡片共用。 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.cf-modal .cf-mark, .cf-sheet .cf-mark { animation: none; }
.cf-modal, .cf-modal.closing { animation: none; }
}
/* ============================================================
dock 瘦身：概览退出底部导航（4 tab + 加号）
回归路径：点 dock 首席「首页」
（1010g：原来这句写的是「点顶栏 logo」——那只 logo 已撤，改指首席；
1010h：连点两下回首页也随之退役）
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
四页排版优化 v1.0（备忘详情 / 备忘编辑 / 已归档 / 回收站）
------------------------------------------------------------
全部收口到站内已定稿的两套语言：详情＝iOS 分组卡片（灰底画布 + 白色
圆角卡 + 图标行组，同 .dd-modal），表单＝.wbf-modal + .fg-card。
只补三类硬伤：
① 触控目标：弹窗返回键 28px、恢复按钮 34px、置顶开关行 37px；
② 可读性：详情时间戳原为 --text-disabled 12px 灰字（对比度≈1.5:1），
改走图标行组；正文 14.4px → 15px 地板；
③ 分组与描边：归档/回收站条目浮在灰底上没有卡片、Markdown 分段控件
白底贴白卡完全看不见、搬家后的开关行带着 .switch-row 的小内衬灰底。
选择器坑（与历史教训同类）：mobFormify 把 .check-line 原节点升级成
.fg-switch.switch-row 时，两个类挂在同一元素上，
「.fg-card .fg-switch .switch-row」是后代选择器，永远匹配不到 → 必须写复合。
============================================================ */
/* ---- 弹窗头部返回钮：全站唯一语言（v1.4，2026-09-23）----
原为「详情 + 编辑」专属的 36 白圆钮（.dd-modal.dd-notitle / .wbf-modal），
个人中心下的数据概览 / 关于 / 小票机 / AI 录入 / 提醒自检仍是裸 chevron，
同一屏出现两种返回钮。现统一收进这一条：白圆 + ::before 外扩热区到 48px
（规范 icon 类 ≥38），桌面 >768 不命中（返回钮本身只在手机端显示）。
位置必须留在此处、且带 .modal-card 抬特异性（0,3,0）：文件更靠前的基础规则
.modal-back(0,1,0) 与 .modal-back:hover(0,2,0) 都会来抢背景与尺寸。 ---- */
/* ≤768 手机端样式 → 06-mobile.css */
/* ---- 备忘详情：hero 内的标题与置顶钮同轴 ---- */
.md-hero-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.md-hero-top .dd-hero-name { flex: 1; min-width: 0; }
.md-hero-tags { margin-top: var(--sp-3); }
/* 置顶：裸图标升级为圆形幽灵钮（44px 触控，选中态实心黑） */
#dt-pin.memo-pin {
width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-pill);
background: var(--bg-muted); color: var(--text-3);
}
#dt-pin.memo-pin svg { width: 18px; height: 18px; }
#dt-pin.memo-pin.on { background: var(--primary); color: var(--on-primary); }
#dt-pin.memo-pin.on svg { fill: none; }
/* 正文卡：白卡自带描边会再套一层框，这里拍平成卡片本身的内容 */
.md-doc { padding: 2px 0; }
.md-doc .md-body {
background: transparent; border: none; border-radius: 0;
padding: var(--sp-4); min-height: 0; max-height: none; overflow: visible;
font-size: calc(15px * var(--fs-scale)); line-height: 1.8; color: var(--text-2);
}
.md-doc .md-body h1 { font-size: calc(18px * var(--fs-scale)); }
.md-doc .md-body h2 { font-size: calc(16px * var(--fs-scale)); }
.md-doc .md-body code { font-size: calc(13px * var(--fs-scale)); }
.md-doc .md-empty-hint { color: var(--text-4); }
/* ---- 备忘编辑：分段控件、开关行、正文输入 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 备忘编辑：分段控件、开关行、正文输入 ----」 */
/* ---- 回收站 / 已归档 · 卡片触控档（手机端卡更大、行内按钮 ≥38） ---- */
.tr-main { flex: 1; min-width: 0; }
.trash-row .trash-title {
font-size: calc(15px * var(--fs-scale)); font-weight: var(--fw-medium); color: var(--text-1); line-height: 1.45;
white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tr-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.tr-acts { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
/* ≤768 手机端样式 → 06-mobile.css */
@media (prefers-reduced-motion: reduce) {
.trash-row:active { transform: none; }
}
/* ============================================================
回顾详情 · 编辑排版 v2（2026-09-16）
外壳走站内既有 .dd-modal（灰底画布），内容拆成白色圆角卡，
与灰色背景形成图底分离；仅作用于 .diary-detail，待办/习惯
详情共用类（detail-hero / detail-kv / detail-meta-line）不受影响。
基调：黑白杂志——封面大日期 + 编号时间轴卡片 + 版权页脚
============================================================ */
.diary-detail { position: relative; color: var(--text-1); }
/* 封面卡：心情胶囊 + 眉标 + 大日期 */
.diary-detail .dd-cover {
background: var(--bg-card); border-radius: var(--r-5);
padding: var(--sp-4) var(--sp-4) var(--sp-6); box-shadow: var(--shadow-card);
}
/* 心情胶囊徽章同款语言：小记封面与事件详情英雄区共用（.dd-mood 单源，勿另起一套） */
.diary-detail .dd-mood, .dd-hero-head .dd-mood {
display: inline-flex; align-items: center; gap: var(--sp-2);
height: 24px; padding: 0 var(--sp-2) 0 var(--sp-2);
border: 1px solid var(--border); border-radius: var(--radius-pill);
background: var(--bg-card);
font-size: var(--fs-micro); color: var(--text-3); letter-spacing: .02em;
}
.diary-detail .dd-mood { margin-bottom: var(--sp-4); }
.diary-detail .dd-mood-dot, .dd-hero-head .dd-mood-dot {
width: 8px; height: 8px; border-radius: var(--r-circle);
background: var(--mood, var(--text-4));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mood, transparent) 18%, transparent);
}
.diary-detail .dd-mast { position: relative; }
.diary-detail .dd-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-11); letter-spacing: .28em; text-transform: uppercase;
color: var(--text-4); margin-bottom: var(--sp-3);
}
.diary-detail .dd-dateline { display: flex; align-items: baseline; gap: var(--sp-3); }
.diary-detail .dd-day {
font-family: var(--font-mono); font-weight: var(--fw-bold);
font-size: 68px; line-height: .86; letter-spacing: -.04em;
color: var(--text-1); font-variant-numeric: tabular-nums;
}
.diary-detail .dd-my {
display: inline-flex; align-items: baseline; gap: var(--sp-3);
font-size: var(--fs-body); color: var(--text-3); letter-spacing: .02em;
}
.diary-detail .dd-week {
font-style: normal; padding-left: var(--sp-2); position: relative;
color: var(--text-4); font-size: var(--fs-caption);
}
.diary-detail .dd-week::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 12px; background: var(--border-strong);
}
/* 三问：每条一张白色卡，编号 + 短横刻度作时间轴导轨 */
.diary-detail .dd-entries { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.diary-detail .dd-entry {
position: relative; display: grid;
grid-template-columns: 40px 1fr; gap: var(--sp-3);
background: var(--bg-card); border-radius: var(--radius-card-m); box-shadow: var(--shadow-card);
padding: var(--sp-4);
}
.diary-detail .dd-no {
font-family: var(--font-mono); font-weight: var(--fw-semibold);
font-size: calc(13px * var(--fs-scale)); letter-spacing: .04em;
color: var(--text-4); padding-top: 2px;
font-variant-numeric: tabular-nums;
}
.diary-detail .dd-no::after {
content: ''; display: block; width: 14px; height: 1px;
background: var(--border-strong); margin-top: var(--sp-1);
}
.diary-detail .dd-label {
margin: 0 0 var(--sp-2);
font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-medium);
letter-spacing: .22em; text-transform: uppercase; color: var(--text-4);
}
.diary-detail .dd-text {
font-size: calc(15px * var(--fs-scale)); line-height: 1.8; color: var(--text-1);
white-space: pre-wrap; word-break: break-word; letter-spacing: .01em;
}
.diary-detail .dd-text .dd-empty { color: var(--text-disabled); font-style: italic; }
.diary-detail .dd-entry.is-empty .dd-text { color: var(--text-disabled); }
.diary-detail .dd-entry.is-empty .dd-no { color: var(--text-disabled); }
.diary-detail .dd-entry.is-empty { background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-page)); box-shadow: none; }
/* 版权页脚：细字直接落在灰底上 */
.diary-detail .dd-colophon {
display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-left: var(--sp-1);
font-family: var(--font-mono); font-size: var(--fs-11);
letter-spacing: .1em; color: var(--text-4);
}
.diary-detail .dd-rule { flex: 0 0 24px; height: 1px; background: var(--text-4); opacity: .5; }
/* 载入 stagger：封面 → 三问 → 页脚自上而下轻入，幅度克制 */
@media (prefers-reduced-motion: no-preference) {
.diary-detail .dd-cover { animation: dd-in var(--d-enter) var(--ease-enter) both; }
.diary-detail .dd-entry { animation: dd-in var(--d-enter) var(--ease-enter) both; }
.diary-detail .dd-entry:nth-of-type(1) { animation-delay: var(--d-micro); }
.diary-detail .dd-entry:nth-of-type(2) { animation-delay: var(--d-fast); }
.diary-detail .dd-entry:nth-of-type(3) { animation-delay: var(--d-modal); }
.diary-detail .dd-colophon { animation: dd-in var(--d-enter) var(--ease-enter) var(--d-toast) both; }
}
@keyframes dd-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* 手机端 ≤768：遵循手机端间距规范 v1.0（卡片内距/正文地板/触控目标） */
/* ≤768 手机端样式 → 06-mobile.css「手机端 ≤768：遵循手机端间距规范 v1.0（卡片内距/正文地板/触控目标）」 */
/* ============================================================
日记配图 · 每日小记「今日剪贴簿」
------------------------------------------------------------
· 编辑态 = 方形网格（4 列，最多 9 张）：不横向滚动，格子才敢吃
touch-action: pan-y，长按拖动排序才不被原生手势抢走
· 详情态 = 横向胶片条：只读滑动，边缘渐隐复用 tgf-l / tgf-r 约定
· 看图台 = 全站唯一的整屏黑底层（.iv-mask，z 高于弹窗与小票预览、低于 toast）
手机端遵循「手机端间距规范 v1.0」：4pt 网格、格内 --card-gap、
主触控 ≥44、icon 类热区 ≥38（小圆点用 ::after 扩热区，不放大图形）
============================================================ */
/* ---------- 编辑态：方形网格 ---------- */
.dg-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--card-gap);
}
.dg-grid .dg-cell { touch-action: pan-y; } /* 竖向仍可滚表单，横向交给拖排 */
.dg-cell {
position: relative; aspect-ratio: 1 / 1; margin: 0;
border-radius: var(--r-3); overflow: visible;
background: var(--bg-count); cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dg-cell img {
display: block; width: 100%; height: 100%; object-fit: cover;
border-radius: var(--r-3); background: var(--bg-count);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-1) 9%, transparent);
pointer-events: none; /* 点击一律交给格子本身 */
-webkit-user-drag: none; user-select: none;
}
/* 取不到图的一格：说明白「失效/没取到」并留出点按动作，绝不是一片空白当坏了 */
.dg-dead {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px; padding: var(--sp-1); text-align: center; border-radius: var(--r-3);
background: var(--bg-count); color: var(--text-4);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-1) 9%, transparent);
}
.dg-dead b { font-size: var(--fs-10); font-weight: var(--fw-semibold); line-height: 1.25; }
.dg-dead i { font-style: normal; font-size: var(--fs-micro); color: var(--text-4); opacity: .72; }
.dg-cell.is-dead img { visibility: hidden; }
.dg-grid .dg-dead i { display: block; }
.dg-film .dg-dead i { display: none; } /* 胶片条格子小，只留「图片已失效」一行 */
/* 照片叠放控件（§1 材质豁免「图片上的幽灵」：删除钮/本机点永远压在用户照片上，
照片内容不可控 → 控件恒深底白 icon，两档主题都不翻，与 .iv 影院同语言） */
.dg-del {
position: absolute; top: 5px; right: 5px;
width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-circle);
background: rgba(17, 17, 17, .66); color: var(--white); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.82);
transition: opacity var(--d-fast) ease, transform var(--d-base) var(--ease-float), background var(--d-fast) ease;
}
.dg-del svg { width: 11px; height: 11px; }
.dg-del::after { content: ''; position: absolute; inset: -9px; } /* icon 热区 ≥38 */
.dg-cell:focus-within .dg-del { opacity: 1; transform: none; }
@media (hover: hover) { .dg-cell:hover .dg-del { opacity: 1; transform: none; } }
@media (hover: hover) { .dg-del:hover { background: rgba(17, 17, 17, .84); } }
.dg-del:active { transform: scale(.92); }
/* 「仅存本机」小圆点（编辑态为纯提示，详情态才可点按补传） */
.dg-local {
position: absolute; left: 7px; bottom: 7px;
width: 8px; height: 8px; border-radius: var(--r-circle);
background: var(--white); box-shadow: 0 0 0 1.5px rgba(17, 17, 17, .6); /* 照片上白点黑环＝材质色（同 .dg-del） */
pointer-events: none;
}
.dg-add {
aspect-ratio: 1 / 1; min-height: 56px;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 0; border: 1.5px dashed var(--border-strong); border-radius: var(--r-3);
background: transparent; color: var(--text-4); cursor: pointer;
font-size: var(--fs-micro); letter-spacing: .04em;
transition: border-color var(--d-base) ease, color var(--d-base) ease, background var(--d-base) ease, transform var(--d-base) var(--ease-float);
}
.dg-add svg { width: 18px; height: 18px; }
@media (hover: hover) { .dg-add:hover { border-color: var(--text-1); color: var(--text-1); background: color-mix(in srgb, var(--text-1) 4%, transparent); } }
.dg-add:active { transform: scale(.96); }
.dg-grid.is-busy { opacity: .62; pointer-events: none; }
.dg-grid.is-busy .dg-add { animation: dg-breathe 1.1s ease-in-out infinite; }
/* 拖起态：抬一层阴影，其余格子瞬时让位（避免多点同时缓动造成的抖动） */
.dg-cell.is-drag { z-index: 3; cursor: grabbing; }
.dg-cell.is-drag img {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-1) 9%, transparent),
0 12px 26px rgba(17, 17, 17, .24);
}
.dg-grid.is-drag { cursor: grabbing; }
@keyframes dg-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* ---------- 详情态：横向胶片条（落在灰底上，图片自身即视觉主体） ---------- */
.dd-film { margin-top: var(--module-gap); }
.dd-film-head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
padding: 0 var(--sp-1) var(--sp-2);
}
.dd-film-eyebrow {
font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-medium);
letter-spacing: .22em; text-transform: uppercase; color: var(--text-4);
}
.dd-film-count {
font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-4);
font-variant-numeric: tabular-nums;
}
.dg-film {
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 0 var(--sp-1);
}
.dg-film::-webkit-scrollbar { display: none; }
.dg-film-track { display: flex; gap: var(--sp-3); width: max-content; }
.dg-film .dg-cell { flex: 0 0 96px; width: 96px; cursor: zoom-in; }
.dg-film .dg-cell img { border-radius: var(--r-3); }
.dg-film .dg-local-dot {
position: absolute; right: 6px; bottom: 6px;
width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-circle);
background: rgba(17, 17, 17, .62); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--d-base) ease, transform var(--d-base) var(--ease-float);
}
.dg-film .dg-local-dot::after { content: ''; position: absolute; inset: -9px; } /* 热区 40 */
.dg-film .dg-local-dot span {
width: 7px; height: 7px; border-radius: var(--r-circle); background: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
@media (hover: hover) { .dg-film .dg-local-dot:hover { background: rgba(17, 17, 17, .8); } }
.dg-film .dg-local-dot:active { transform: scale(.9); }
.dg-film .dg-local-dot.is-busy { animation: dg-breathe 1s ease-in-out infinite; }
/* 边缘渐隐：与站内 chip-scroll 同一套 JS 挂类约定 */
.dg-film.tgf-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px); mask-image: linear-gradient(90deg, transparent 0, #000 26px); }
.dg-film.tgf-r { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 26px); mask-image: linear-gradient(270deg, transparent 0, #000 26px); }
.dg-film.tgf-l.tgf-r {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
/* ---------- 小记图片 · 本机媒体缓存抽屉（个人中心「存储」组 → 抽屉） ----------
纵向节奏不写页面级 magic number：读数→主操作吃 --pfg-label-gap，主操作→策略卡由
.pfg 自己的 --pfg-gap 管，卡→卡外说明由 .pfg-tip 的 --pfg-tip-gap 管，三段各归一处。
抽屉本体已有 16px 横向内距，卡内行再吃一份 --card-pad 会叠成 32px——旧写法是逐条
`padding-left:0 + margin:0 14px` 硬压（14px 无出处）。正解是把这一族卡片的内距令牌
就地降到 --sp-3：行、说明、通栏分段器一起跟着走，谁也不用再被单独拽一次。 */
.mc-sheet { --card-pad: var(--sp-3); padding-bottom: calc(var(--sp-4) + var(--sab)); }
.mc-body { display: flex; flex-direction: column; }
/* 读数两行讲的是同一件事（本机有什么 / 还缺什么），2px 归组——与 .pfg-t-2 标题与说明同档。
两行都带张数与体积：等宽数字让读数上下对齐，不随字宽跳。 */
.mc-read { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.mc-acct { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-1); }
.mc-need { margin: 0; font-size: var(--fs-label); line-height: 1.45; color: var(--text-4); text-wrap: balance; }
/* .wp-btn-ok 自带 flex: 1.5（为 .wp-foot 那一行准备的横向权重）。这里是纵向 flex 容器的子项，
那枚 flex-basis:0 会作用到**高度**上，钮会被压成 0 高——先把它退回 none。
站主口径：这颗「全部存到本机」收小一档、去掉圆角（0＝把圆角关掉的复位语境，非新造型），
不再是大圆角胶囊。写成 .mc-sheet .mc-fetch 是为了稳赢 .wp-btn-ok 的同特异度，不赌源码先后。 */
.mc-sheet .mc-fetch { flex: none; height: 42px; border-radius: 0; font-size: calc(14px * var(--fs-scale)); margin-top: var(--pfg-label-gap); }
.mc-prog { margin: var(--pfg-label-gap) 0 0; font-size: var(--fs-label); line-height: 1.45; color: var(--text-4); font-variant-numeric: tabular-nums; }
/* 两行字档进了抽屉：行上下各补一口气，否则标题、说明、发丝线三样贴成一团（与 nt-page 同值） */
.mc-body .pfg-row:has(.pfg-t-2) { padding-top: var(--pfg-label-gap); padding-bottom: var(--pfg-label-gap); }
/* ---------- 列表卡片：相机张数角标 ---------- */
.diary-head-r { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.diary-imgs {
display: inline-flex; align-items: center; gap: 3px;
height: 22px; padding: 0 var(--sp-2); border-radius: var(--radius-pill);
background: var(--bg-muted); color: var(--text-4);
font-size: var(--fs-micro); position: relative;
}
.diary-imgs svg { width: 12px; height: 12px; }
.diary-imgs b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.diary-imgs-local {
width: 5px; height: 5px; border-radius: var(--r-circle); margin-left: 1px;
background: var(--text-3); box-shadow: 0 0 0 1.5px var(--bg-muted);
}
/* ---------- 看图台：整屏黑底（接入 WbBack 返回栈） ---------- */
.iv-mask {
position: fixed; inset: 0; z-index: 9200;
background: rgba(8, 8, 10, .985);
opacity: 0; transition: opacity var(--d-modal) ease;
touch-action: none; -webkit-user-select: none; user-select: none;
}
.iv-mask.is-open { opacity: 1; }
.iv-mask.is-closing { opacity: 0; }
/* 下拉关闭时跟手压暗（--iv-fade 由 JS 实时写入） */
.iv-mask[style*="--iv-fade"] { opacity: var(--iv-fade, 1); }
.iv { position: absolute; inset: 0; display: flex; flex-direction: column; }
.iv-bar {
flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3);
padding: calc(var(--sp-2) + var(--sat)) var(--sp-3) var(--sp-2);
color: rgba(255, 255, 255, .9);
}
.iv-x {
flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-circle);
background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--d-base) ease;
}
@media (hover: hover) { .iv-x:hover { background: rgba(255, 255, 255, .26); } }
.iv-x svg { width: 17px; height: 17px; }
.iv-meta { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--sp-3); }
.iv-cnt {
font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em;
font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92);
}
.iv-title {
font-size: var(--fs-caption); color: rgba(255, 255, 255, .58);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-flag {
flex: 0 0 auto; min-width: 38px; text-align: right;
font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: .1em;
color: rgba(255, 255, 255, .5);
}
.iv-stage {
flex: 1; min-height: 0; position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-1) var(--sp-3) calc(var(--sp-6) + var(--sab));
}
/* 翻页轨道：每一页并排摆好（100% 宽一页），跟手与吸附都只动这一条；
缩放/平移单独作用在当前那张 ![]()
上，两套位移互不打架。
1016：gap 止「静置露邻图」，落笔按每页实距（stride()）。 */
.iv-track {
display: flex; align-items: center; height: 100%; width: 100%;
gap: var(--card-gap);
will-change: transform;
}
.iv-slide {
flex: 0 0 100%; height: 100%; margin: 0; position: relative;
display: flex; align-items: center; justify-content: center;
}
.iv-img {
display: block; max-width: 100%; max-height: 100%;
border-radius: var(--r-1); background: #0c0c0e; /* 看图台「黑影院」舞台底＝材质色（§1 豁免），两档都暗 */
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
will-change: transform;
-webkit-user-drag: none;
}
/* 取不到的那一页：说清楚，并给一次重取机会（点按见 app.js 的 stage click） */
.iv-dead {
display: none; position: absolute; inset: 0;
flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-1); padding: 0 var(--sp-7); text-align: center;
}
.iv-slide.is-dead .iv-dead { display: flex; }
.iv-slide.is-dead .iv-img { visibility: hidden; }
.iv-dead b { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, .86); }
.iv-dead i { font-style: normal; font-size: var(--fs-micro); color: rgba(255, 255, 255, .45); }
.iv-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-circle);
background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
display: none; align-items: center; justify-content: center;
transition: background var(--d-base) ease, opacity var(--d-base) ease;
}
.iv-nav svg { width: 22px; height: 22px; }
@media (hover: hover) { .iv-nav:hover { background: rgba(255, 255, 255, .22); } }
.iv-prev { left: 16px; } .iv-next { right: 16px; }
.iv-mask.is-first .iv-prev, .iv-mask.is-last .iv-next { opacity: .25; pointer-events: none; }
@media (min-width: 769px) {
.iv-nav { display: inline-flex; }
}
.iv-mask.is-zoomed .iv-nav { opacity: 0; pointer-events: none; }
/* ---------- 手机端 ≤768（间距规范 v1.0：格内距吃 --card-gap、图标热区 ≥38） ---------- */
/* ≤768 手机端样式 → 06-mobile.css「---------- 手机端 ≤768（间距规范 v1.0：格内距吃 --card-gap、图标热区 ≥38） 」 */
/* ---------- 超窄屏 ≤380：只收格子与缩略尺寸，间距与热区不回退 ---------- */
/* ≤768 手机端样式 → 06-mobile.css「---------- 超窄屏 ≤380：只收格子与缩略尺寸，间距与热区不回退 ----------」 */
/* ---------- 减动效：呼吸与位移全部归零 ---------- */
@media (prefers-reduced-motion: reduce) {
.dg-add, .dg-cell.is-drag img, .dg-film .dg-local-dot,
.iv-mask, .iv-track, .iv-img, .iv-nav { transition: none !important; animation: none !important; }
.dg-grid.is-busy .dg-add { animation: none; }
}
/* 详情入场：胶片条接在三问之后、版权页脚之前，节奏与既有 dd-in 一致 */
@media (prefers-reduced-motion: no-preference) {
.diary-detail .dd-film { animation: dd-in var(--d-enter) var(--ease-enter) var(--d-modal) both; }
}
/* ============================================================
回顾编辑 · 桌面端与详情同一套「灰底画布 + 白色圆角卡」语言
（≤768 仍走 mobFormify 的 .wbf-modal + .fg-card，本块不介入）
============================================================ */
@media (min-width: 769px) {
.diary-form { background: var(--bg-page); }
.diary-form .modal-body { padding-bottom: var(--sp-6); }
/* 顶层字段组各成一张白卡（嵌套在 head 行内的 .field 不重复套壳） */
.diary-form .modal-body > .field,
.diary-form .modal-body > .field-row {
background: var(--bg-card); border-radius: var(--radius-card-m); box-shadow: var(--shadow-card);
padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.diary-form .modal-body > .form-error { margin: 0; padding: 0 var(--sp-1); }
.diary-form .field-row .field { margin-bottom: 0; }
/* 字段标题收进全站唯一档（1104 站主令）。从前这里是第四档：等宽 + .18em 字距 +
大写 + --fs-11 + text-4 的「眉标」，与隔壁待办/备忘的标题完全不同形。
现在只保留日记自己的下间距，字体/字重/墨色全部回落到 03 的 .field > label。 */
.diary-form .field > label,
.diary-form .field-row > div > label {
margin-bottom: var(--sp-3);
}
/* 输入材质 / 状态 / 字号已收口到「输入框规范 v2 · 编辑表单族样板」（本文件后段）：
原软底 --bg-soft + 10px 圆角 + 16px 字号就地退役——它是桌面端唯一
一只先跑的「井」，收编后五个表单共用同一组 --fld-* 参数 */
.diary-form textarea.form-input { padding: var(--sp-3); min-height: 68px; line-height: 1.7; resize: vertical; }
/* 头部：日期定宽 + 心情自适应（心情段皮肤归 seg-slide v2 / mood-seg，桌面同 34px 控制档） */
.diary-form .field-diary-head { display: grid; grid-template-columns: 176px 1fr; gap: var(--sp-4); align-items: start; }
.diary-form .diary-bring { margin-top: var(--sp-3); gap: var(--sp-3); }
.diary-form .diary-bring .btn-link {
font-size: var(--fs-caption); color: var(--text-3);
padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
transition: border-color var(--transition-fast), color var(--transition-fast);
}
@media (hover: hover) { .diary-form .diary-bring .btn-link:hover { border-color: var(--border-strong); color: var(--text-1); } }
.diary-form .field-hint { margin-top: 0; }
}
/* ============================================================
手机端编辑表单统一规范 v1.0（2026-09-16，仅 ≤768px）
------------------------------------------------------------
五个编辑弹窗（待办 / 事件 / 回顾 / 备忘 / 习惯）收口到同一套语言，
基准取自已定稿的事件页：灰底画布 + 语义分组白卡。卡内只允许两种行：
行式 .fg-row 单值控件（文本 / 下拉 / 日期 / 开关）
54px 行高、左标签右值、无边框、行间发丝线
堆叠 .fg-stack 多行或复合控件（正文 / 子任务 / 心情 / 农历 / 色板）
上标签（13px --text-4）下「井」
本块修掉的三类不统一（改前实测）：
① 分组：待办一张 895px 巨卡、回顾一张 726px 巨卡 vs 事件 4 张语义卡
→ mobFormify 按字段 data-fg 分组，桌面端 .fg-card 仍是 display:contents 零影响；
② 同类控件三种长相：日期在事件＝右对齐行、在回顾＝描边盒 44px 左对齐、
在待办＝描边盒 40px 居中；下拉同理 → 行式一律无边框右对齐；
③ 「井」不存在：正文井用 --bg-soft(#FAFBFC) 落在白卡上几乎看不见，
下拉 / 日期 / 子任务 / 添加步骤用 --bg-page + 1px 描边 + 4px 直角
→ 统一 --bg-muted 衬底 + 12px 圆角 + 无边框（与卡片 16px 圆角成层级）。
选择器纪律：本块排在全部 ≤768 基线块之后，且与旧规则同特异性或更高
（如 .fg-card .fg-stack .sub-add .form-input 必须写满四级，否则被 2719 行压死）。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* ---- ⑥ 待办表单收口（实测两处「乱」）：
a) 重复的附加行「每 [3] [天][周] 重复一次 / 每月 [X] 号」：数字 input 被
.fg-card .fg-row .form-input 的 flex:1 + 右对齐 + 54px 拉满整行，「每」与数字间
出现大空洞、还撑高行 → 收回紧凑居中小井。
b) 「具体时间」的 dp-display 是 field 直接子级（日期是 enhanceDates 包在 .date-wrap 里，
不受影响），继承 .fg-row .dp-display{width:100%} 触发 flex-wrap，「未设置」掉到第二行
孤零零右对齐 → 让它与标签同行、值右对齐。 ---- */
/* ≤768 手机端样式 → 06-mobile.css */
/* 描述收起态（手机端）：整行按行式呈现，右侧「＋ 填写描述」是无框幽灵入口 */
/* ≤768 手机端样式 → 06-mobile.css「描述收起态（手机端）：整行按行式呈现，右侧「＋ 填写描述」是无框幽灵入口」 */
/* ---- ⑦ 抽屉入口右箭头提示（0929）：
移动端表单里每一枚 .sel-btn / .dp-display（分类 / 重复 / 优先级 / 类型 /
截止日 / 具体时间 / 农历日月…）点开都是底部抽屉（选择卡片 / 滚轮），
桌面那条「下拉小三角」在手机上语义错了 → 统一换成站内右向 chevron，
提示「可进入」。形状沿用 .pfg-chev（个人中心跳转行）的箭头语言，
只是按站内既有做法用 border 画，跟原来那只 border 三角同一实现口径。
仅 ≤768 生效，桌面维持原下拉小三角不动。 ---- */
/* ≤768 手机端样式 → 06-mobile.css */
/* 子任务手柄 / 行内编辑 / 描述入口：两端共用（拖动排序在桌面端同样可用） */
.sub-handle {
flex: 0 0 22px; width: 22px; height: 32px; padding: 0; border: none; background: transparent;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-4); opacity: .55; cursor: grab;
touch-action: none; -webkit-user-select: none; user-select: none;
}
.sub-handle svg { width: 14px; height: 14px; }
@media (hover: hover) { .sub-handle:hover { opacity: .85; } }
.sub-handle:active, .sub-row.is-dragging .sub-handle { cursor: grabbing; opacity: 1; }
/* 拖动三段（§4.3b 公共标准）：浮起皮肤与手机端 06 那条同参，此前桌面只有 z-index，
拖起来看不出「拿离了纸面」 */
.sub-row.is-dragging {
position: relative; z-index: 3;
background: var(--bg-card); border-bottom-color: transparent;
border-radius: var(--r-3); box-shadow: var(--shadow-float);
}
.is-dragging-mode .sub-row.is-dragging { transition: none; } /* 拖起那行必须逐帧跟手 */
/* 行内标题：无边框输入框，看起来就是这行文字本身，随时可改（含已完成的步骤） */
.sub-name {
flex: 1; min-width: 0; border: none; background: transparent; box-shadow: none; outline: none;
padding: 0; font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-1);
text-align: left; height: auto; min-height: 24px;
}
.sub-row.is-done .sub-name { color: var(--text-4); text-decoration: line-through; }
.desc-field .desc-toggle { display: none; }
.desc-field.is-collapsed > .form-input { display: none; }
.desc-field.is-collapsed .desc-toggle {
display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer;
border: 1px dashed var(--border-strong); border-radius: var(--radius-btn);
background: transparent; color: var(--text-3); font-size: var(--fs-caption); padding: var(--sp-2) var(--sp-3);
transition: border-color var(--transition-fast), color var(--transition-fast);
}
@media (hover: hover) { .desc-field.is-collapsed .desc-toggle:hover { border-color: var(--text-4); color: var(--text-1); } }
/* 超窄屏（≤380）：只收缩字号与井内距，分组与行高不回退（间距规范 v1.0） */
/* ≤768 手机端样式 → 06-mobile.css「超窄屏（≤380）：只收缩字号与井内距，分组与行高不回退（间距规范 v1.0）」 */
/* ============================================================
输入框规范 v2 · 编辑表单族样板（2026-10-03）
------------------------------------------------------------
家族基因：填充衬底（--fld-fill）+ 圆角 --fld-r + 桌面文本档
--fld-fs + 悬停加深一档；聚焦跑 1004b 定稿配方——保持衬底不翻白
+ 1px 主描边 + 12px 柔光渐隐（--focus-glow），与账户盒 / 手机端井族同语言。
这是手机端 v1.0「井」语言的桌面表达——材质 / 状态走同一组
--fld-* 令牌，尺寸按平台分档（手机 44-54 / 16px 地板；桌面 36 / 14）。
改前实测（.workbuddy/fldv2-desk-before.log，2026-10-03）：
桌面五表单里文本 / 正文 / 下拉 / 日期 = --bg-page 底 + 1px 描边
+ 4px 直角 + 13px；只有「回顾」的正文井是软底 + 10px 圆角 + 16px
——两种口径并存。聚焦口径更碎：2px 主光环 / 3px 主光环 / 3px
柔光环 / 无光环四种写法。本块把五个表单在桌面端收进同一材质、
同一文本档与同一枚光环；1004b 起聚焦定稿（不翻白 / 1px / 12px 柔光渐隐），
手机端井族同日同配方（尺寸仍按平台分档）。
作用域 .edit-form：五个表单在 Modal.open 时挂（app.js 五处，
与 diary-form / wbf-modal 同一清理名单），其余弹窗零影响。
============================================================ */
@media (min-width: 769px) {
.edit-form .form-input,
.edit-form .sel-btn,
.edit-form .dp-display,
.edit-form .sub-row,
.edit-form .sub-add .btn {
background: var(--fld-fill);
border-color: transparent;
border-radius: var(--fld-r);
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* 1004b：三只可聚焦井静止即预留 1px 透明描边——聚焦换 1px 主描边不跳字 */
.edit-form .form-input,
.edit-form .sel-btn,
.edit-form .dp-display { border: 1px solid transparent; }
/* 文本档统一 14（--fs-body）：收口 13 / 16 两口径（回顾正文井曾整只是 16） */
.edit-form .form-input,
.edit-form .sel-btn,
.edit-form .dp-display { font-size: var(--fld-fs); }
@media (hover: hover) {
.edit-form .form-input:hover,
.edit-form .sel-btn:hover,
.edit-form .dp-display:hover,
.edit-form .sub-add .btn:hover { background: var(--fld-fill-hover); border-color: transparent; }
}
.edit-form .form-input:focus,
.edit-form .sel-btn:focus-visible,
.edit-form .sel-btn.is-open,
.edit-form .dp-display:focus-visible,
.edit-form .dp-display.is-open {
background: var(--fld-fill); border-color: var(--primary); box-shadow: var(--focus-glow);
}
.edit-form .form-input[readonly] { background: var(--bg-disabled); }
}
/* ============================================================
打卡热力 · 手机端适配（遵循「手机端间距规范 v1.0」：
4pt 网格、字号地板、icon 类触控目标 ≥38、主操作 ≥44）
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 触屏无 hover：热力面板控件按压反馈补齐 */
@media (hover: none) {
.hb-minus:active { transform: scale(.94); }
}
/* 超窄屏（≤380）：只收缩年视图格宽，间距与字号地板不回退 */
/* ≤768 手机端样式 → 06-mobile.css「超窄屏（≤380）：只收缩年视图格宽，间距与字号地板不回退」 */
/* ============================================================
登录弹窗 → 底部抽屉（≤768，2026-09-16；2026-09-19 收进标准抽屉语言）
与 wp-sheet / cf-sheet 同一骨架：贴底、顶圆角 24、
.32s ease-enter 自下而上滑入，关闭 .28s 下滑退场，
内距吃 --card-pad、底部垫安全区；顶部 .wp-grab 把手 + .wp-title 标题，
底栏 .wp-foot 两枚胶囊（继续本地=灰、登录=黑），右上 × 收起、
关闭交给把手下拉 / 浏览器返回 / Esc / 取消按钮（wireSheetGrab expand:false）。
必须排在文件末尾：压过基线 .login-mask/.login-pop 与
前文 ≤768 的安全区 padding、≤600 padding 覆写。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
@keyframes loginSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes loginSheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
/* 减动效：排在末尾的手机端规则必须在同位置归零，
否则会反压文件前部的 prefers-reduced-motion 块 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
自建取色抽屉 · 手机端（间距规范 v1.0：主操作 ≥44、iOS 输入字号 ≥16px）
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 排在末尾的手机端规则必须在同位置归零，否则会反压前部 prefers-reduced-motion 块 */
/* ≤768 手机端样式 → 06-mobile.css「排在末尾的手机端规则必须在同位置归零，否则会反压前部 prefers-reduced-motion 块」 */
/* ============================================================
首次访问引导 → 全屏轮播（≤768，2026-10-01）
引导是首启全屏门（非次级面板），手机端铺满整屏：磨砂模块卡 +
大标题 + 圆点 + 底部黑胶囊，左右滑动换屏，末屏「开始使用」原地
切到昵称表单（同卡、不关卡重开、不键盘跳动）。
安全区一律吃令牌 --sat/--sab 并写进 padding 简写（同块后置简写会清零单独 padding-top）。
主操作 50（≥44）、昵称井 54（表单行）、输入 18px（iOS ≥16）。
必须排在文件末尾：压过基线 .ob-mask/.ob-card 与前置 ≤768 覆写。
============================================================ */
/* ≤768 手机端样式 → 06-mobile.css */
/* 触屏无 hover：引导层控件按压即反馈，悬停态一律退回基线 */
@media (hover: none) {
.ob-back:active { background: var(--bg-hover); }
.ob-dot:active { opacity: .6; }
.btn.ob-go:active { transform: scale(.985); background: var(--primary-hover); }
}
/* 暗色：磨砂卡换深色玻璃，柔光与高光边同步 */
/* ≤768 手机端样式 → 06-mobile.css「暗色：磨砂卡换深色玻璃，柔光与高光边同步」 */
/* 超窄屏（≤380）：只收字号，画布内距不回退 */
/* ≤768 手机端样式 → 06-mobile.css「超窄屏（≤380）：只收字号，画布内距不回退」 */
/* 排在末尾的手机端规则必须在同位置归零，否则会反压前部 prefers-reduced-motion 块 */
/* ≤768 手机端样式 → 06-mobile.css「排在末尾的手机端规则必须在同位置归零，否则会反压前部 prefers-reduced-motion 块」 */
/* ============================================================
备忘标签条 / 待办分类条 · 单行横滑 + 「全部…」浮层（2026-09-16）
标签/分类只增不减，换行会无限占高：收成一横行滑区，溢出靠
左右渐隐提示，全量收进浮层（手机 wp-sheet 抽屉 / 桌面 dd-modal）。
scope 到 .memo-tagbar / .todo-catbar / .date-typebar / .mem-groupbar 与 .tag-pick* / .cat-list。
1029：记忆页人物档的筛选条入族（当时按「关系」）；1030 站主令改按「分组」，族名跟着改成
.mem-groupbar——它要的是同一件东西（一行、横滑、边缘渐隐、右侧固定全量入口），
照族里换一档，不复制规则（复制会撞 css-bloat-gate 的重复组棘轮）。
============================================================ */
.memo-tagbar, .todo-catbar, .date-typebar, .mem-groupbar { flex-wrap: nowrap; min-width: 0; }
.memo-tagbar .chip-scroll, .todo-catbar .chip-scroll, .date-typebar .chip-scroll, .mem-groupbar .chip-scroll {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: var(--sp-2);
overflow-x: auto; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
scroll-padding: 0 12px;
}
.memo-tagbar .chip-scroll::-webkit-scrollbar, .todo-catbar .chip-scroll::-webkit-scrollbar, .date-typebar .chip-scroll::-webkit-scrollbar, .mem-groupbar .chip-scroll::-webkit-scrollbar { display: none; }
.memo-tagbar .chip-scroll .chip, .todo-catbar .chip-scroll .chip, .date-typebar .chip-scroll .chip, .mem-groupbar .chip-scroll .chip { flex: 0 0 auto; }
/* 边缘渐隐：由 JS 按滚动位置挂 tgf-l / tgf-r，未溢出不加遮罩 */
.memo-tagbar .chip-scroll.tgf-l, .todo-catbar .chip-scroll.tgf-l, .date-typebar .chip-scroll.tgf-l, .mem-groupbar .chip-scroll.tgf-l {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
}
.memo-tagbar .chip-scroll.tgf-r, .todo-catbar .chip-scroll.tgf-r, .date-typebar .chip-scroll.tgf-r, .mem-groupbar .chip-scroll.tgf-r {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
}
.memo-tagbar .chip-scroll.tgf-l.tgf-r, .todo-catbar .chip-scroll.tgf-l.tgf-r, .date-typebar .chip-scroll.tgf-l.tgf-r, .mem-groupbar .chip-scroll.tgf-l.tgf-r {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
/* 固定「全部…」入口：不参与收缩，压在滚动区右侧 */
.memo-tagbar .chip-more, .todo-catbar .chip-more, .date-typebar .chip-more, .mem-groupbar .chip-more, .todo-catbar .chip-sort { flex: 0 0 auto; color: var(--text-3); }
/* 1014：三处「全部标签/分类/类型」入口只留网格图标 + 计数（文字进 title/aria），
占位从 ~110px 收到 ~58px，分类行不再被它挤走半排 chips；
腾出的右缘给排序钮（图标 + 当前档两字，声明并进上面同一族）。 */
.chip.chip-only { padding: 0 var(--sp-2); }
.todo-catbar .chip-sort svg { width: 15px; height: 15px; flex: none; }
.memo-tagbar .chip-more svg, .todo-catbar .chip-more svg, .date-typebar .chip-more svg, .mem-groupbar .chip-more svg { width: 13px; height: 13px; }
/* ≤768 手机端样式 → 06-mobile.css */
/* 浮层内容：白卡内 chip 全量平铺（复用 .chip 壳，不另造样式） */
.tag-pick-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) 2px; }
.tag-pick-cap { font-size: var(--fs-micro); color: var(--text-4); }
.tag-pick-head.no-sel #tpClear { display: none; }
.tag-pick { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.tag-pick-empty { padding: var(--sp-1) var(--sp-4) var(--sp-3); color: var(--text-4); font-size: calc(14px * var(--fs-scale)); }
/* 管理入口：dd-row 语言的内联行（图标 + 文本 + 右箭头），替代旧底部固定栏 */
.tp-mgr {
width: 100%; text-align: left; cursor: pointer;
border: 0; border-top: 1px solid var(--border); border-radius: 0;
background: none; color: inherit; font: inherit;
transition: background var(--transition-fast);
}
.tp-mgr:active { background: var(--bg-hover); }
@media (hover: hover) { .tp-mgr:hover { background: var(--bg-hover); } }
/* tp-mgr 自带通栏 border-top：dd 行的发丝线再叠上来就是同一道缝两根线
（待办分类管理的「新建分类」尾行、账本分类的每一行都中过招，1015 站主实拍）——
掐掉发丝线，行线只归 tp-mgr 自己画 */
.dd-row.tp-mgr::before { content: none; }
.tp-chev { flex: none; width: 16px; height: 16px; color: var(--text-disabled); }
.tp-chev svg { width: 16px; height: 16px; }
/* —— 手机端底部抽屉：与滚轮时间选择器同款 .wp-mask/.wp-sheet 壳，网格 56vh 比滚轮窗更高 —— */
.tp-sheet .tp-grid {
display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-3);
min-height: 40vh; max-height: 56vh; overflow-y: auto; margin-bottom: var(--sp-3);
-webkit-overflow-scrolling: touch;
}
.tp-sheet .tps-mgr { width: 100%; margin-bottom: var(--sp-3); }
/* 抽屉底栏已撤（三张筛选抽屉：标签/分类/类型都「点即筛、下拉即关」，无「完成」）。
标签是多选，唯一还需要的批量操作「清空已选」搬到标题行右侧：iOS 导航栏式文字钮，
标题仍居中不被推位；只在有选中时淡入（.has-sel 由 JS 跟 state.memoTags 同步），
空态不可点也不留噪声。标题行加高到 38px 当触控地板——热区只吃行内与左右内距，
不上侵把手带（.wp-grab），拖动区不受影响。 */
.tp-sheet .wp-title { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; }
.tps-clear {
position: absolute; right: 0; top: 0; bottom: 0;
display: inline-flex; align-items: center; padding: 0; border: 0;
background: none; cursor: pointer; font-family: inherit;
font-size: calc(14px * var(--fs-scale)); font-weight: var(--fw-medium); line-height: 1;
color: var(--text-3); white-space: nowrap;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
opacity: 0; pointer-events: none;
transition: opacity var(--d-base) ease, color var(--transition-fast), transform var(--d-base) var(--ease-float);
}
.tp-sheet.has-sel .tps-clear { opacity: 1; pointer-events: auto; }
.tps-clear::after { content: ""; position: absolute; inset: 0 -10px; } /* 横向再吃 10px 内距，纵向已满 38 */
.tps-clear:active { color: var(--text-1); transform: scale(.94); }
/* 全部分类浮层行组：桌面进白卡加衬；手机抽屉保底高度（同标签抽屉的「更长」取向） */
.dd-group .cat-list { padding: var(--sp-3) var(--sp-3) 0; margin-bottom: 0; }
.tp-sheet .cat-list { min-height: 32vh; max-height: 56vh; }
/* —— 1025 待办「分类排序」合并抽屉（.fs-sheet）：三段共用一只 tp-sheet 壳 ——
排序段直接复用滚轮抽屉那对 .wp-seg / .wp-seg-btn（灰槽 + 黑把手反白，零新组件），
这里只把它从「居中 max-content」改成「通栏等宽四格」——四枚两字标签在 320px 窄屏也摊得开。
⚠ 本段刻意不写进 @media ≤768：这只抽屉的门禁是 wbCoarse()（触屏或窄屏任一即真），
宽屏平板也会用到它，写进宽度块等于给平板发一只没样式的抽屉。 */
.fs-sheet .wp-seg { width: 100%; margin-bottom: var(--sp-1); }
.fs-sheet .wp-seg-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--sp-4); }
.fs-sheet .fs-cur { margin-bottom: var(--sp-3); padding: 0 var(--sp-1); }
/* C 案的主读数：抽屉行右侧那个数字现在讲是「还剩几件」，就是这一行的 payload，
不能再穿着 .tf-cnt 那身灰小字（--text-4 / 13px）的旧衣服——实拍过一回，
名字黑、说明灰、数字也灰，整行没有重点。升墨 + 升重，字号不动（等宽数字自己会站住）。
⚠ 必须排在下面 .fs-over .tf-cnt 之前：逾期那行的数字要跟红字同色，靠后来者胜盖回去。 */
.fs-sheet .tf-cnt { color: var(--text-1); font-weight: var(--fw-semibold); }
/* 分区小标题：一行 --text-4 小字 + 一条发丝线把段切开，不另起一张卡 */
.fs-sec { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0;
font-size: var(--fs-micro); color: var(--text-4); letter-spacing: .03em; }
.fs-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* 只看已逾期：整行即热区（label 包 checkbox，勾选由原生行为翻转，JS 只接 change）。
红点与 1020 那枚逾期胶囊同族色；选中态描边走告警红而非主色——它是状态告警不是导航选中。 */
.fs-over { color: var(--tag-bad-fg); margin-bottom: var(--sp-2); cursor: pointer; }
.fs-over .over-dot { width: 7px; height: 7px; border-radius: var(--r-circle); background: currentColor; flex: none; }
.fs-over .tf-cnt { color: inherit; }
.fs-over:has(input:checked) { border-color: var(--status-bad); background: var(--bg-hover); }
.fs-over .status-switch { margin-left: var(--sp-1); }
/* —— 手机端体检补丁：触控地板 ≥38（热区扩展走 .modal-head-act ::after 先例，视觉尺寸不动）—— */
/* ≤768 手机端样式 → 06-mobile.css「—— 手机端体检补丁：触控地板 ≥38（热区扩展走 .modal-head-act ::after 先例，视觉尺」 */
/* 取色抽屉 · 桌面形态：同一套外壳转成居中对话框。
特异性必须压过 .wp-sheet（width:100% / 24px 顶圆角 / translateY 贴底），故带 .wp-mask 前缀且排在其后 */
@media (min-width: 769px) {
.wp-mask.cp-mask { align-items: center; justify-content: center; }
.wp-mask .cp-sheet {
width: 420px; max-width: calc(100vw - 48px);
border-radius: var(--r-5); padding: var(--sp-6) var(--sp-6) var(--sp-4);
transform: translateY(10px) scale(.985); opacity: 0;
transition: transform var(--d-toast) var(--ease-enter), opacity var(--d-modal) ease;
}
.wp-mask.cp-mask.is-open .cp-sheet { transform: none; opacity: 1; }
.wp-mask .cp-sv { height: 168px; }
}
/* ============================================================
详情热力 · 动效卡顿修正
============================================================ */
/* 内联操作区（mobDetailify 事后挂进 body 的「编辑 / 删除」）：
吃到 .modal-body > *:nth-child(n) 的错峰延迟，会在弹窗开完后「晚一拍冒出来」，
看着就是闪一下。这里给它独立的零延迟淡入，必须排在级联规则之后才能压住同特异性 */
/* ≤768 手机端样式 → 06-mobile.css */
@keyframes ddFootIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.modal-card.cascade .modal-body > .dd-foot-inline,
.modal-card.chain-in .modal-body > .dd-foot-inline { animation: none; }
}
/* ============================================================
分类 / 标签管理卡改版（2026-09-16）
旧 dc-block 扁平 → dd-modal 语言：白卡 + tb-head 图标行首 +
dd-row 发丝线条目 + 行内编辑区（井式输入 + 色板 + 双按钮）。
条目行 = .mg-row；操作钮 = .mg-act（38px 触控）；编辑器 = .mg-edit。
============================================================ */
.mg-row .dd-k { font-size: calc(15px * var(--fs-scale)); }
.mg-row .dd-v { flex: none; max-width: none; margin-left: auto; }
.mg-act {
flex: none; width: 38px; height: 38px; margin-right: -8px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; border-radius: var(--r-2);
color: var(--text-4); cursor: pointer;
transition: background var(--transition-fast);
}
.mg-act svg { width: 16px; height: 16px; }
.mg-act:active { background: var(--bg-hover); }
.mg-act-del { color: var(--tag-bad-fg); }
/* 行内编辑区：从被编辑的行下方长出来，与列表同一张白卡 *//* (1008 死规则清理) */
.mg-edit .cat-palette { margin-top: var(--sp-3); }
.mg-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-4); font-size: calc(14px * var(--fs-scale)); }
/* 单卡弹窗（管理/浮层）首卡不带 12px 顶距（同 .tb-card:first-child 先例） */
.dd-modal .modal-body > .dd-group:first-child { margin-top: 0; }
/* 管理抽屉（分类/标签 · 手机）：行组通铺抵消 sheet 16px 内衬，列表区 52vh 内滚动 */
.mgr-sheet .mg-inner { margin: 0 -16px var(--sp-1); max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mgr-sheet .wp-foot { margin-top: var(--sp-4); }
/* 管理抽屉叠在选择抽屉上时：透明遮罩（暗底由下层负责），只承接点击与动画 */
.wp-mask.wp-mask-bare { background: transparent; }
/* ============================================================
管理抽屉 · 行级直改（样板：标签管理，2026-09-17）
点行即改：名称原地变常驻输入（子任务行 input 同款思路），
行高不变 → 键盘抬升只动一次，无展开跳动。
============================================================ */
.mg-row[data-tag] { cursor: text; -webkit-tap-highlight-color: transparent; }
.mg-row[data-tag]:active { background: var(--bg-hover); }
.mg-inline {
flex: 1; min-width: 0; width: auto; height: auto; padding: 0;
border: none; border-bottom: 1.5px solid transparent; border-radius: 0;
background: transparent; outline: none;
font: inherit; font-size: calc(16px * var(--fs-scale)); color: var(--text-1); caret-color: var(--primary);
transition: border-color var(--transition-fast);
}
.mg-row.is-editing .mg-inline { border-bottom-color: var(--primary); }
.mg-row.is-editing .dd-v { opacity: .55; }
/* 行级直改推广到分类/类型：色点可点（14px 视觉 + ::after 热区到 38px）、迷你色板条 */
.mg-row[data-id] { cursor: text; -webkit-tap-highlight-color: transparent; }
.mg-row[data-id]:active { background: var(--bg-hover); }
.mg-dot {
width: 14px; height: 14px; border: none; padding: 0; cursor: pointer;
position: relative; flex-shrink: 0; border-radius: var(--r-circle);
-webkit-tap-highlight-color: transparent;
}
.mg-dot::after { content: ""; position: absolute; inset: -12px; } /* 14px 色点 → 38px 热区 */
/* 它是 dd-row（flex 行）里的子块：不给 flex-basis 就会被压成 min-content——
1015 图形格改成 auto-fill 网格之后当场塌成一排 1 枚（网格的 max-content 只有一轨），
旧的 flex-wrap 靠 34px 定宽项侥幸撑住，换成网格就露了形。通栏才是本意。 */
.mg-palette { padding: 0 var(--sp-4) var(--sp-3); flex: 1 1 100%; }
.mg-palette .cat-palette { margin-top: 0; }
/* ============================================================
概览 · 今日时间线 v1.0（2026-09-17）
------------------------------------------------------------
取代原「KPI 六卡 + 进度环 + 四张面板」。一屏只回答两件事：
今天该做什么（时间线一条流）、做得怎么样（hero 进度条）。
· hero 是全站唯一一张反白卡，用它压住整页层级
· 时间线：图标列 + 贯穿轨道线 = 一条「今天」的流水
· 洞察三卡合并成一张「本周」；数据说明迁到「关于」(.ab-*)
桌面 ≥1024 走「左内容 / 右本周」两栏；手机端单列走间距规范 v1.0。
============================================================ */
/* ---- 1. 今日 hero（1010 信息重排 · 方案 A）
------------------------------------------------------------
这一版没新增任何一枚令牌，只干一件事：**把字号档位改指向该被看见的东西**。
问候原来吃全卡最大的 --fs-num-md（手机端 22px）却不承载信息，真正要回答的
「做得怎么样」只有 13px 灰字；现在问候让给 --fs-h3、读数把 22px 接过去。
四件新结构全是站内既有语言的搬家：
· 分段日槽 .ov-seg —— 一件一格替掉「百分比 + 分数 + 连续条」三处重复
· 欠账芯片 .ov-chip —— 借 .tl-mini / .chip 同一把尺（高 --control-h-sm、圆角 r-2 徽章档、
::after 补热区到 38），色点走模块色且只落在点上（习惯色不进文字底）
· 页脚 .ov-foot —— 一言保留但降为细行（2.32 起这一行只有它）
快捷胶囊撤掉五枚：待办 / 备忘 / 习惯与 dock 同名重复，「事件」与 dock 的「纪念」
是同一个模块两个名字，小记由上面那枚芯片承担。hero 只留 dock 到不了的一步直达。 ---- */
.ov-day {
--ovd-bg: var(--bg-card);
--ovd-ink: var(--text-1);
--ovd-dim: var(--text-3);
--ovd-faint: var(--text-4);
--ovd-line: var(--border);
--ovd-well: var(--bg-muted);
background: var(--ovd-bg); color: var(--ovd-ink);
border: 1px solid var(--ovd-line); border-radius: var(--radius-lg);
padding: var(--sp-6) var(--sp-6) var(--sp-4); box-shadow: var(--shadow-card);
}
.ov-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ov-hi { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.35; letter-spacing: -.01em; }
/* 日期两行右对齐、各自 nowrap：旧版连排成一句挂在问候右边，手机宽度下自己折行，
把标题挤成孤零零一行（1010 真机图）。农历取不到时整条 不渲染，不留空行。 */
.ov-date { flex: none; text-align: right; line-height: 1.45; }
.ov-date b { display: block; font-family: var(--font-mono); font-size: var(--fs-12);
font-weight: var(--fw-medium); color: var(--ovd-dim); white-space: nowrap; letter-spacing: .01em; }
.ov-date i { display: block; font-style: normal; font-size: var(--fs-12); color: var(--ovd-faint); white-space: nowrap; }
/* 读数：这张卡的主角。0 安排时同一档字号改说人话——别让「0 / 0」当全卡最大字 */
.ov-read { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.ov-read-l { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.ov-read-n { font-family: var(--font-mono); font-size: var(--fs-num-md); font-weight: var(--fw-semibold);
line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ovd-ink); }
.ov-read-n s { text-decoration: none; color: var(--ovd-faint); }
.ov-read-n.is-txt { font-family: var(--font-sans); letter-spacing: -.01em; }
.ov-read-c { font-size: var(--fs-caption); line-height: 1.4; color: var(--ovd-dim); text-align: right; padding-bottom: 2px;
white-space: nowrap; flex-shrink: 0; } /* 结论区不许被左侧重字挤到换行（站主要「图标+文字」一行） */
.ov-read-c b { font-weight: var(--fw-semibold); color: var(--ovd-ink);
display: inline-flex; align-items: center; gap: var(--sp-1); } /* 左图标右文字，垂直居中同一行 */
/* 全清结论里的内联表情图标：尺寸走 em（跟字号）、墨色靠 fill=currentColor 继承 .ov-read-c b 的 --ovd-ink，
暗色主题自动翻白；它是 flex 子项，故 display:block 去掉行内基线带来的偏移。 */
.ov-read-c svg { width: 1.3em; height: 1.3em; display: block; flex: none; }
/* 分段日槽：实心＝已收，**今天几件事就几格**（2.32 撤掉旧的 10 格上限 + 虚线尾）。
只动 transform/opacity（站内动效铁律）；逐格入场只给切页那一次，
JS 用 animate 决定是否挂 .is-enter——在概览里连点完成不重放整排。
逐格快慢由 JS 按件数写进 --seg-step（件数越多每格越快）；格多到一行放不下
才折行，min-width 4px 是「一眼还数得清」的地板。 */
.ov-segs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--sp-3); }
.ov-seg { flex: 1; min-width: 4px; height: 8px; border-radius: var(--radius-pill);
background: var(--ovd-well); transform-origin: left center;
animation: ovSegIn var(--d-push) var(--ease-float) both; }
.ov-seg.is-on { background: var(--ovd-ink); }
.ov-segs.is-enter .ov-seg { animation-delay: calc(var(--i, 0) * var(--seg-step, 26ms)); }
@keyframes ovSegIn { from { transform: scaleX(.2); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
/* 空日子：一条虚线浅槽，读作「没安排」而不是「坏了」 */
.ov-segs.is-empty .ov-seg { background: transparent; border: 1px dashed var(--border-strong); }
@media (prefers-reduced-motion: reduce) {
.ov-seg, .ov-segs.is-enter .ov-seg { animation: none; }
}
/* 欠账芯片：全卡最该点、原来却唯一不可点的那句灰字。
手机端高度与 .tl-mini / .chip 同档（38，站内触控地板），
桌面收在 --control-h-sm；::after 借 .tl-check 同一写法再往外扩 3px → 44 热区。
色点走模块色且只落在点上（习惯色不进文字底）；底色只给「过期」这一枚上红底。 */
.ov-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ov-chip {
position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
height: var(--control-h-sm); padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: var(--r-2);
border: 1px solid transparent; background: var(--ovd-well); color: var(--text-2);
font-family: inherit; font-size: var(--fs-12); white-space: nowrap; cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--d-micro) ease;
}
.ov-chip::after { content: ""; position: absolute; inset: -3px; }
.ov-chip:active { transform: scale(.97); }
.ov-chip-d { flex: none; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--ovd-dim); }
.ov-chip b { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--ovd-ink); }
.ov-chip.is-habit .ov-chip-d { background: var(--hm-3); }
.ov-chip.is-diary .ov-chip-d { background: var(--ovd-faint); }
.ov-chip.is-bad { background: var(--tag-bad-bg); }
.ov-chip.is-bad .ov-chip-d { background: var(--tag-bad-fg); }
.ov-chip.is-bad b { color: var(--tag-bad-fg); }
/* 页脚：2.32 起只剩「今日一句」一行——那枚「一句话」黑胶囊（连同 .qbtn 一族）撤了，
快速记走首页 FAB ＋ 与 dock 下滑。留 border-top 是因为它上面还压着欠账芯片。 */
.ov-foot { display: flex; align-items: center; gap: var(--sp-3);
margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--ovd-line); }
/* 今日一句的说话人一行（2026-10-26 站主定稿：助手形象 + 自定义昵称 + “句子”）：
.ov-quote 吃掉 .ov-foot 的整行宽（flex:1 + min-width:0），句子长时只有句子被截断，
形象与署名 flex:none 永不参与挤压；三件内部用 --sp-1 挨成一组，形象那一档补到 --sp-2
（署名↔句子要贴，全角“自带半个空位的左边距，再留 8px 就读成两段话了）。
形象与署名之间那 4px 由署名自己带 margin-left，不另开一条 `.ai-face` 规则——
单声明规则会被 css-bloat-gate 记成新的「逐字重复组」。
形象复用 .ai-face 的 16px 档（活体徽章，与设置页 / 对话流同一个形象），零新资源。 */
.ov-quote { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; }
.ov-quote-who { flex: none; margin-left: var(--sp-1); font-size: var(--fs-12); line-height: 1.4;
font-weight: var(--fw-medium); color: var(--ovd-dim); }
.ov-quote-text { min-width: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--ovd-faint);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: opacity var(--d-base) var(--ease-float); }
/* 今日一句（Pro+）异步回来时先淡出、换字后再淡回——硬切会被点名 */
.ov-quote-text.is-swap { opacity: 0; }
/* 首页 hero「早晚简报」通知位（2026-1025）：仅移动端出现，未读时临时替掉「今日一句」。
沿用 .ov-chip 按压语言（.97）与今日一句细行字号档；整页不新增彩色——简报非状态，遵守「唯一彩色是状态」原则。
::after 扩点击热区（同 .ov-chip），够手机端触控地板。 */
.ov-brief { position: relative; display: flex; align-items: center; gap: var(--sp-2);
flex: 1; min-width: 0; margin: 0; padding: 2px 0; background: none; border: 0;
font: inherit; color: var(--ovd-ink); text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent; }
/* 热区上下各扩 10（左右仍 7）：本体只有 24px 高，按旧写法 -7 只到 38，够不着手机端 44 触控地板
（1027 探针实测抓到，DESIGN_SYSTEM §9「触达 <44px」那条欠账在简报胶囊上的具体一处）。
只抹隐形热区、不动布局盒；页脚与上面欠账芯片之间还有 28px 呼吸，芯片自己的 ::after 只扩 3px，互不抢点。 */
.ov-brief::after { content: ""; position: absolute; inset: -10px -7px; }
.ov-brief:active { transform: scale(.97); }
.ov-brief-lead { min-width: 0; font-size: var(--fs-12); line-height: 1.4;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-brief-go { flex: none; font-size: var(--fs-12); color: var(--ovd-dim); }
/* ================= 简报·对话页一只白卡（2026-10-26 站主定稿：只走对话流承载，卡内分段）=================
承载 = 可序页对话流里的一条助手气泡（.npg-ans 本就是一只白卡），整份简报塞进 .bp-inline：
顶部 .bp-hi 问候，下面每段一个 .bp-seg，段间细分隔线分层——即「用一个白色卡片装下」。
★ 配色只走 :root 全站语义 token（--text-1/3/4、--border、--bg-muted）——
这里曾用 --ovd-* 一族，但它们是 .ov-day（hero 卡）作用域内的局部别名，气泡里继承不到，
整层落回深色 hex 兜底，暗色档深字压深底全糊（1026 站主实拍点名）。不再带 hex 兜底（R6）。 */
.bp-inline { display: block; }
/* 简报气泡宽度（1105 站主实拍「整体感觉太窄」）：.npg-ans 本就 `width: fit-content`，
而卡里那几行是「标题 flex:1 ＋ 右对齐读数」——标题越短，内容撑出来的宽度越小，整只卡跟着缩。
简报这一支不参与 fit-content 的取舍：铺满对话流宽度（`:has` 的先例见本页 .nl-page:has(...)）。
只认「直系子里有 .bp-inline」这一条结构判据，别的气泡（普通回复、查询卡）一个字不动。 */
.npg-ans:has(> .bp-inline) { width: 100%; max-width: 100%; }
.bp-hi { padding: 0 0 2px; }
.bp-hi-t { font-size: var(--fs-15); font-weight: 700; color: var(--text-1); line-height: 1.35; }
.bp-hi-sub { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--text-4); }
.bp-seg { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.bp-seg:first-child, .bp-hi + .bp-seg { border-top: 0; padding-top: var(--sp-1); }
.bp-card-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bp-ico { width: 16px; height: 16px; flex: none; color: var(--text-3); }
/* 图标点缀色（1026 站主「图标太墨」）：tone class 由 bpIco(p,tone) 挂 svg 上，
色值在 01-tokens.css 立 --bp-ico-* 双档（暗档同色相提亮）；正文文字仍墨灰不动。 */
.bp-ico.ico-fortune, .bp-ico.ico-summary, .bp-ico.ico-quote { color: var(--bp-ico-gold); }
.bp-ico.ico-overall { color: var(--bp-ico-gold-2); }
.bp-ico.ico-work, .bp-ico.ico-plan { color: var(--bp-ico-blue); }
.bp-ico.ico-love { color: var(--bp-ico-rose); }
.bp-ico.ico-weather { color: var(--bp-ico-sky); }
.bp-ico.ico-todo { color: var(--bp-ico-teal); }
.bp-card-t { font-size: var(--fs-13); font-weight: 700; color: var(--text-1); }
.bp-tag { margin-left: auto; font-size: var(--fs-11); color: var(--text-4);
border: 1px solid var(--border); border-radius: var(--r-1); padding: 1px var(--sp-2); }
.bp-p { margin: 0 0 var(--sp-1); font-size: var(--fs-13); line-height: 1.6; color: var(--text-1); }
.bp-p:last-child { margin-bottom: 0; }
.bp-muted { color: var(--text-3); }
.bp-faint { color: var(--text-4); font-size: var(--fs-12); }
.bp-term-n { font-size: var(--fs-14); font-weight: 700; color: var(--text-1); margin-bottom: var(--sp-1); }
/* 1030 清死样式：早报「运势三格 / 宜忌 / 运势尾行」与晚报「小结三格」那批版式随
bpCell()/bpNum() 等死函数一并摘掉（10-29 版式定稿后 briefHtml 已不消费 m.fortune），
温度读数只留 .bp-wx-now 这一枚 chip。以下类名在运行件里 0 命中：
.bp-f3 .bp-cell .bp-cell-k .bp-cell-v .bp-yj .bp-yj-k .bp-luck .bp-wx-days
.bp-stat3 .bp-num .bp-num-k .bp-num-v ——顺带消掉 R4 三条字号违例（12px/26px/15px）。
（.bp-wx-deg 1107 复生：参考图2 温度大字，见下；.ico-term 随概览并入「今日节气」退役。） */
.bp-wx-now { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text-1); }
/* 温度大字＋天况旁注（1107 参考图2）：大字号只落在 .bp-wx-deg 上——
旧持久化快照的 chip 是纯文本、没有这层子元素，回放时仍是原小字长相，不会被整行放大。 */
.bp-wx-deg { font-size: var(--fs-num-sm); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.bp-wx-meta { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
/* 明日天气条（1107 参考图2：灰底圆角一条，只报事实不追加带伞） */
.bp-wx-tmr { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); background: var(--bg-muted); font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }
/* 洞察暖底 / 寄语紫底（1107 参考图2）：白卡内的着色分块，不再吃段间分隔线；
暖底借 --tag-warn-bg 琥珀族（暗档随令牌翻面），紫底走新立 --bp-quote-bg 双档。 */
.bp-seg-warm, .bp-seg-quote { border-top: 0; border-radius: var(--r-3); padding: var(--sp-3); }
.bp-seg-warm { background: var(--tag-warn-bg); }
.bp-seg-quote { background: var(--bp-quote-bg); }
.bp-seg-warm + .bp-seg, .bp-seg-quote + .bp-seg { border-top: 0; }
.bp-li { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.bp-li:first-child { border-top: 0; padding-top: 0; }
/* 「逾期提醒」这类段里第一条行（1105 站主实拍「中间还多一根横线，像这一行没有内容」）：
:first-child 命不中它——它前面还压着 .bp-card-h 那行标题，于是标题下凭空多一条上边线。
补一条相邻判据把它收掉，段与段之间那条分隔线（.bp-seg 的 border-top）照旧留。 */
.bp-card-h + .bp-li { border-top: 0; padding-top: 0; }
.bp-li-h { font-size: var(--fs-13); font-weight: 700; color: var(--text-1); }
.bp-li-p { margin-top: 2px; font-size: var(--fs-13); line-height: 1.55; color: var(--text-3); }
.bp-quote { font-size: var(--fs-14); line-height: 1.6; font-weight: 600; color: var(--text-1); }
/* ---- 参考图版式件（2026-10-29 站主「照着做」）：待办真列表 / 左右状态行 / 温度角标行 / 两枚新 tone ----
只走 :root 语义 token（R6）；「重要/不急」徽标用既有状态族（--status-bad 即站内逾期/加急同源红），
不另发明颜色。 */
.bp-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; font-size: var(--fs-13); color: var(--text-1); }
.bp-dot { flex: none; width: 12px; height: 12px; border-radius: var(--r-1); border: 1.6px solid var(--text-4); }
.bp-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-item-time { flex: none; font-size: var(--fs-11); color: var(--text-4); font-variant-numeric: tabular-nums; }
.bp-pri { flex: none; font-size: var(--fs-11); line-height: 1.5; padding: 0 var(--sp-1); border-radius: var(--r-1); }
.bp-pri.high { color: var(--status-bad); }
.bp-pri.low { color: var(--text-4); }
.bp-stat-row { display: flex; align-items: baseline; gap: var(--sp-2); padding: 2px 0; font-size: var(--fs-13); color: var(--text-1); }
.bp-stat-row > span:first-child { flex: 1; min-width: 0; color: var(--text-3); }
.bp-stat-v { font-size: var(--fs-12); color: var(--text-3); text-align: right; }
.bp-chip-h { display: flex; margin-bottom: var(--sp-2); }
.bp-ico.ico-insight { color: var(--bp-ico-gold-2); }
.bp-ico.ico-knowledge { color: var(--bp-ico-blue); }
/* ---- 2. 今日时间线 ---- */
#ovTimeline { margin-top: var(--module-gap); }
.tl-group { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-3); }
#ovTimeline > .tl-group:first-child { margin-top: 0; }
.tl-group-l { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--text-3); flex-shrink: 0; }
.tl-group-n {
flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 var(--sp-1); border-radius: var(--radius-pill);
background: var(--bg-count); color: var(--text-4);
font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 18px;
display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.tl-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tl-group.is-bad .tl-group-l { color: var(--tag-bad-fg); }
.tl-group.is-bad .tl-group-n { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.tl-item {
position: relative; display: flex; align-items: center; gap: var(--sp-3);
margin-bottom: var(--sp-3); padding: var(--sp-3);
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-card); box-shadow: var(--shadow-card);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
background var(--transition-fast), transform var(--d-fast) var(--ease-float), opacity var(--d-base) ease;
}
/* 贯穿轨道：1px 竖线落在图标列中心，被不透明的图标底盘截断。
底色走 --border-strong 而不是 --border：这条线一半的行程落在 12px 行缝里，
那里露的是画布 --bg-page(#F7F8FA)，用 #E5E7EB 只差 6% 亮度，手机上等于没画
（1003 真机反馈「连接线被卡片挡在下面」，量的结果是根本没看见）。 */
.tl-item::before {
content: ""; position: absolute; left: 25px; top: -11px; bottom: -11px;
width: 1px; background: var(--border-strong);
}
.tl-group + .tl-item::before { top: 50%; }
.tl-item:last-child::before,
.tl-item:has(+ .tl-group)::before,
.tl-item:has(+ .tl-more)::before,
.tl-item:has(+ .tl-empty)::before { bottom: 50%; }
.tl-item[data-tl-id] { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
.tl-item[data-tl-id]:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.tl-item[data-tl-id]:hover .tl-title { color: var(--primary); }
}
.tl-ico {
position: relative; z-index: 1; flex-shrink: 0;
width: 26px; height: 26px; border-radius: var(--r-circle);
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card); border: 1px solid var(--border); color: var(--text-4);
}
.tl-ico svg { width: 14px; height: 14px; }
.tl-todo .tl-ico { color: var(--text-2); }
.tl-item.is-overdue .tl-ico { background: var(--tag-bad-bg); border-color: transparent; color: var(--tag-bad-fg); }
.tl-item.is-done { background: var(--bg-soft); box-shadow: none; }
.tl-item.is-done .tl-title { color: var(--text-3); }
.tl-item.is-done .tl-ico { border-color: transparent; background: var(--bg-count); }
/* 概览「今天纪念行」不再给整行染色（用户定：只换标不染色）——柔和类型色「今天」小标见 .tl-tag.is-today。 */
/* 「今天还没写」是一句邀请，不是一条空位：底色与其它行同为白卡。
原先写 transparent，透出的是页面灰底，整行读起来像禁用件；
而且图标底盘不再能遮住贯穿轨道，竖线会从卡片中间穿过去（0929）。
「未填写」只由虚线边框表达。 */
.tl-item.is-pending { background: var(--bg-card); border-style: dashed; box-shadow: none; }
/* 按下的反馈只落在「卡片表面」，不落几何：
时间线是一根竖线串起来的，整卡 scale 会把图标底盘与 ::before 轨道一起缩掉，
而每行的缩放中心各不相同 → 相邻行的线段互相错开，看起来就是轨道在抖（0929 反馈）。
表面一沉（底色 + 描边）之后，图标列与轨道纹丝不动，手机端也不会因文字被缩放而发虚；
控件自己的即时反馈（完成圈 .tl-check:active、去写 .tl-mini）照旧，不在这里叠加。
⚠ 必须排在 is-done / is-hit / is-pending 之后：同为 (0,2,0) 特异性，靠源序压过它们的底色，
否则「已打卡」「就是今天」「待写小记」这三类行按下会一点反馈都没有。 */
.tl-item:active { background: var(--bg-hover); border-color: var(--border-strong); }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-1); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { display: flex; align-items: center; min-width: 0; overflow: hidden; font-size: var(--fs-micro); color: var(--text-4); line-height: 1.5; white-space: nowrap; }
.tl-meta > span { flex-shrink: 0; }
/* 分类点与紧随的分类名之间原本 0 间距（dot 与文字是 .tl-meta 两个相邻匿名 flex 项，贴脸）。
补 --sp-1 右距，与日记行心情点（.tl-mood 自带 4px gap）同一节奏。
⚠ .tl-mood 内的点走它自己的 gap，这里必须归零 margin，否则被撑成 8px。 */
.tl-meta .cat-dot { vertical-align: 0; margin-right: var(--sp-1); }
.tl-mood .cat-dot { margin-right: 0; }
.tl-sep { margin: 0 var(--sp-1); color: var(--text-disabled); }
.tl-strong { color: var(--tag-warn-fg); font-weight: var(--fw-medium); }
/* 具体钟点：整条 meta 里唯一「读数字」的元素，等宽 + 加重，比相邻说明大一号。
字号从 --fs-micro 派生（该令牌在手机端断点被抬到 12px），不写裸 px 也不占新令牌 */
.tl-clock {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: calc(var(--fs-micro) + 2px); font-weight: var(--fw-semibold);
color: var(--text-1); letter-spacing: -.01em;
}
/* 摘要是整行唯一可收缩项：空间不够时它自己出省略号，不连累前面的色点与分类。
⚠ 选择器必须写全链 .tl-meta > .tl-desc：上面那条 `.tl-meta > span` 的特异性是 (0,1,1)，
裸 `.tl-desc` 只有 (0,1,0) 压不过它——旧版就是这么被静默盖成 flex-shrink:0，
摘要永远不收缩，窄屏上被 .tl-meta 的 overflow 拦腰裁掉，省略号根本没机会出现
（1003 探针量出来的，红框里那句「· ·」之外还藏着这一处）。 */
.tl-meta > .tl-desc { min-width: 2.5em; max-width: 12em; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 心情＝色点 + 档位词，读起来是一个词，不是一点一字。
旧写法把档位词当裸文本直接挂在 .tl-meta 这个 flex 容器上，匿名项之间零间距，
色点贴上字、又和后面的摘要糊成一串（1003 真机红框指的就是这一坨）。
点与字 5px 沿用 .mood-chip / .todo-cat 那两枚「色点 + 文字」的既有节奏，
只是不描边、不铺底——时间线的次级行本来就靠字号分层，不该再出现一枚胶囊。 */
.tl-mood { display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.tl-act { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); }
/* 行内完成：空圈 → 悬停点亮，语义即「把这件事划掉」 */
.tl-check {
position: relative; width: 30px; height: 30px; padding: 0; flex-shrink: 0;
border-radius: var(--r-circle); cursor: pointer;
border: 1.5px solid var(--border-strong); background: var(--bg-card); color: var(--text-disabled);
display: inline-flex; align-items: center; justify-content: center;
transition: border-color var(--transition-fast), color var(--transition-fast),
background var(--transition-fast), transform var(--d-micro) ease;
}
.tl-check svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
.tl-check:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-hover); }
}
.tl-check:active { transform: scale(.88); background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tl-tag {
padding: 3px var(--sp-2); border-radius: var(--radius-badge); background: var(--bg-muted);
color: var(--text-3); font-size: var(--fs-micro); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tl-tag.is-warn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.tl-tag.is-bad { background: var(--warning); color: var(--white); font-weight: var(--fw-medium); }
/* ⚠ 登记发现（1025 复审）：琥珀实底+白字约 2.2:1，AA 不达标。改字色属视觉变更，待站主定：
A) 底换 --status-bad 实底+白字（≈3.9:1，仍不达正文但徽标大字可读）B) 改淡底深字同族 is-warn。此处仅等价换 --white，不动视觉 */
/* 概览纪念行柔和标：类型色淡底（--mood 由 tlRow 从事件色带入），退役通用警告橙 */
.tl-tag.is-today { background: color-mix(in srgb, var(--mood, var(--text-3)) 12%, transparent); color: color-mix(in srgb, var(--mood, var(--text-3)) 80%, var(--text-1)); font-weight: var(--fw-medium); }
.tl-tag.is-mood { background: color-mix(in srgb, var(--mood, var(--text-3)) 10%, transparent); color: color-mix(in srgb, var(--mood, var(--text-3)) 82%, var(--text-1)); }
.tl-mini {
height: 28px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); cursor: pointer;
border: 1px solid var(--primary); background: transparent; color: var(--primary);
font-family: inherit; font-size: var(--fs-caption);
transition: background var(--transition-fast), color var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
.tl-mini:hover { background: var(--primary); color: var(--on-primary); }
}
/* 实心档：整行唯一的黑色强调点，给「还差一件事」这类待办式邀请用 */
.tl-mini.is-solid { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
@media (hover: hover) and (pointer: fine) {
.tl-mini.is-solid:hover { background: var(--text-2); border-color: var(--text-2); color: var(--on-primary); }
}
/* 时间线里「打卡」与「去写」是同一类黑底文字胶囊，须同规格：二者只差在 habit 基础高 30（mini 28）。
只在时间线作用域把高压到 mini 档；习惯页的 habit-toggle-btn 保持原大按钮尺寸（那里是主 CTA，不吃这条）。
padding / 圆角 / 黑底配色两枚本就一致，无需再补。
字重同样拉平：habit 基础带 --fw-semibold(600)，tl-mini 从未声明→落 400，故给去写补同一档（.tl-mini 全站仅此一处用，波及面零）。 */
.tl-item .habit-toggle-btn { height: 28px; }
.tl-item .tl-mini { font-weight: var(--fw-semibold); }
.tl-more {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-2) 51px; cursor: pointer;
border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
background: transparent; color: var(--text-3); font-family: inherit; font-size: var(--fs-caption);
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tl-more-go { color: var(--text-4); font-size: var(--fs-micro); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
.tl-more:hover { border-color: var(--text-4); color: var(--text-1); background: var(--bg-hover); }
}
.tl-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
padding: 34px var(--sp-4); text-align: center;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-card); box-shadow: var(--shadow-card);
color: var(--text-4); font-size: var(--fs-caption);
}
.tl-empty .empty-ico { width: 32px; height: 32px; margin: 0 0 var(--sp-1); }
.tl-empty-t { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-2); }
.tl-empty-acts { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
/* ---- 2b. 概览「已打卡」叠卡（1003）----
卡一律绝对定位、位置只由 transform 表达，容器高度由 JS 量完写死：
摊开 / 收回于是只剩 transform 与 height 两条补间，子树全程不重排——
概览是可滚页，这里掉一帧都会被手指感觉到（同一条教训见 .tl-item:active 那段）。
下面这几枚 --deck-* 数是 deckPaint 唯一读得到的口径：断点里改数值不用动 app.js。 */
.tl-deck {
--deck-gap: 10px; /* 摊开时卡与卡的间隙 = .tl-item 原本的 margin-bottom */
--deck-step: 7px; /* 叠放时每往下一张往下走多少，也就是「漏出一点边」的厚度 */
--deck-shrink: .022; /* 每往下一张缩的比例；缩在顶边（transform-origin），下缘才漏得出来 */
--deck-layers: 3; /* 最多露几层边；往后几张不再往外走，摞十张也不会拖出一条长尾 */
position: relative;
height: 0; /* 占位，真值由 deckPaint 量完写进来 */
margin-bottom: var(--deck-gap);
transition: height var(--d-morph) var(--ease-nl);
}
.tl-deck > .tl-item {
position: absolute; left: 0; right: 0; top: 0;
margin-bottom: 0;
transform-origin: 50% 0;
transition: transform var(--d-morph) var(--ease-nl), border-color var(--transition-fast),
box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--d-base) ease;
}
/* 轨道：摞里每张卡照旧自己画 ::before，不换成容器上的一根。两个理由都是 1003 真机红框指出来的：
① 绝对定位的 left 从 padding box 起算——平铺卡带 1px 边框、.tl-deck 不带，
同一枚数落点差 1px，两根线在行缝里并排就是「红箭头那儿粗了一倍」；
② 容器那根压在所有卡（z-index ≥1）底下，卡身那一段被白底盖光；
而卡自己的 ::before 画在自己背景之上、又被不透明的图标底盘截断——只有后者对。
下面三条只管「从哪儿起笔、到哪儿收笔」，不改谁来画。 */
.tl-deck[data-open="0"] > .tl-item:not(.is-top)::before { display: none; }
/* 收尾那一张由 JS 指定（摊开＝末张，收起＝首张），且只在这摞确实是本段末位时才收在中线：
中线正是图标底盘的圆心，于是线「走到小图标就停」，两种状态同一个收法。
少了这半条，收起态的线会穿过图标、穿过整张卡、再从露边带里继续往下爬（1003 真机图2）。 */
.tl-deck.is-terminal > .tl-item.is-rail-end::before { bottom: 50%; }
.tl-deck.is-after-group > .tl-item.is-top::before { top: 50%; }
/* 摊开时脚下那条「叠起 ↑」：借 .tl-more 的虚线细行外壳，只改成跟着摞一起平移 */
.tl-deck > .tl-deck-fold {
position: absolute; left: 0; right: 0; top: 0; margin: 0;
transition: transform var(--d-morph) var(--ease-nl), opacity var(--d-modal) ease,
border-color var(--transition-fast), color var(--transition-fast),
background var(--transition-fast);
}
/* 摞起来时后面那几张只是「边」，不抢悬停也不抢点击（点哪儿都算点这摞） */
.tl-deck[data-open="0"] > .tl-item:not(.is-top) { pointer-events: none; }
/* ---- 3. 本周卡已于 0927 撤除：柱子与分类分布不再出现在概览，
四类内容的家底计数搬进统计页「全部数据」（样式见 .st-counts）。
.ov-bars / .ov-bar-* 仍被统计页产出趋势复用，留在此处不动。 ---- */
/* ---- 4. 手机端（≤768）：间距规范 v1.0 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 4. 手机端（≤768）：间距规范 v1.0 ----」 */
/* 系统要求减少动效时，摊开/收回直接到位（几何仍然照算，只是不补间） */
@media (prefers-reduced-motion: reduce) {
.tl-deck, .tl-deck > .tl-item, .tl-deck > .tl-deck-fold { transition: none !important; }
}
/* ---- 5. 关于（个人中心 → 设置 → 关于）：沿用 dd-modal 详情页语言 ----
品牌 lockup 三排居中：① K 字形带底板（亮黑底/暗白底）② 「可序」+ Klog 文字 ③ 版本号 */
.ab-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.ab-logo {
width: 56px; height: 56px; border-radius: var(--r-2); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--brand-plate-ink); background-color: var(--brand-plate); box-shadow: var(--shadow-card);
}
.ab-logo svg { width: auto; height: 42px; display: block; }
.ab-id { min-width: 0; display: flex; flex-direction: column; align-items: center; margin-top: var(--sp-3); }
.ab-name { display: flex; align-items: center; gap: var(--sp-3); font-size: calc(22px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.2; letter-spacing: -.01em; }
.ab-cn { letter-spacing: .06em; }
.ab-ver { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ab-text { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-caption); line-height: 1.85; color: var(--text-2); }
.ab-text b { color: var(--text-1); font-weight: var(--fw-medium); }
.ab-copy { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-micro); color: var(--text-4); letter-spacing: .02em; }
.pf-chip-ver { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ≤768 手机端样式 → 06-mobile.css */
/* 更新日志（整屏层内容语言：白圆角卡列表） */
.cl-list { padding: 2px 2px 0; }
.cl-item { background: var(--bg-card); border-radius: var(--radius-card-m); box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin-bottom: var(--sp-3); }
.cl-ver { font-family: var(--font-mono); font-size: calc(15px * var(--fs-scale)); font-weight: var(--fw-bold); color: var(--text-1); font-variant-numeric: tabular-nums; }
.cl-date { font-size: var(--fs-caption); color: var(--text-4); font-variant-numeric: tabular-nums; }
.cl-cur { margin-left: auto; font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--on-primary); background: var(--primary); border-radius: var(--radius-pill); padding: 2px var(--sp-2); }
.cl-ul { margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.cl-ul li { position: relative; padding-left: var(--sp-4); margin-top: var(--sp-1); font-size: var(--fs-caption); line-height: 1.7; color: var(--text-2); }
.cl-ul li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: var(--r-circle); background: var(--text-4); }
.cl-foot { text-align: center; font-size: var(--fs-micro); color: var(--text-4); margin: 2px 0 var(--sp-1); font-variant-numeric: tabular-nums; }
/* 抽屉态：灰底画布 + 内部可滚动，顶部把手/标题固定（无底栏：下拉即关，见 app.js wireSheetGrab） */
.ab-sheet { background: var(--bg-page); display: flex; flex-direction: column; max-height: 88vh; }
.ab-sheet .wp-grab, .ab-sheet .wp-title { flex: none; }
.ab-sheet .cl-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px var(--sp-2); }
/* 桌面（≥769）：同一只已接入 WbBack 的整屏层，居中成紧凑对话框，隐去把手 */
@media (min-width: 769px) {
.ab-mask { align-items: center; justify-content: center; }
.ab-mask .ab-sheet { width: auto; max-width: 460px; max-height: 82vh; border-radius: var(--r-6); padding-bottom: var(--sp-4);
transform: translateY(12px); }
.ab-mask.is-open .ab-sheet { transform: translateY(0); }
.ab-mask .ab-sheet .wp-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ab-mask .ab-sheet { transition: none !important; }
}
/* ============================================================
抽屉把手（拖拽换档 · 2026-09-19）
把手 + 其下标题行 + 左右空白都可拖：默认≈2/3，上拉到「最长」（顶边贴 App 顶部标题栏下沿）；
最长态再往下轻拉回到默认；默认态往下拉才关闭；点按在两档间切换。
按住/拖动时把手小杠只变色（is-on→--text-4），不再变长短。
与 JS wireSheetGrab 的 DEF/HEADER_GAP 常量成对，改一处要同步另一处。
============================================================ */
.wp-sheet { --sheet-max: 50vh; --sheet-tall: calc(100vh - var(--header-h) - var(--safe-top) - 210px); }
.wp-sheet.is-tall { --sheet-max: var(--sheet-tall); }
.wp-grab {
position: relative; width: 100%; height: 30px; margin: -8px 0 3px;
background: transparent; touch-action: none; cursor: grab;
display: flex; align-items: center; justify-content: center;
}
.wp-grab::before { /* 视觉小杠与通栏热区分开：看得见 40×5，摸得到一整条 */
content: ""; width: 40px; height: 5px; border-radius: var(--radius-pill);
background: var(--border-strong);
transition: background var(--d-base) var(--ease-float);
}
.wp-grab:active { cursor: grabbing; }
/* 按住/拖动态由 JS 切 is-on（触屏 :active 会被 preventDefault 吞掉）：只变色，不变长短 */
.wp-grab.is-on::before { background: var(--text-4); }
.tp-sheet .tp-grid, .tp-sheet .cat-list, .mgr-sheet .mg-inner { max-height: var(--sheet-max); }
/* 高档：选择类抽屉保底 60vh 内容高（拉长对短内容也有反馈） */
.wp-sheet.is-tall .tp-grid, .wp-sheet.is-tall .cat-list, .wp-sheet.is-tall .tf-list { min-height: 60vh; }
.tp-grid, .cat-list, .mg-inner { transition: max-height var(--d-push) var(--ease-enter), min-height var(--d-push) var(--ease-enter); }
/* 抽屉内容下拉到顶后再拖直接关：拦住链式滚动，避免连带页/底层滚动回弹 */
.wp-sheet .tp-grid, .wp-sheet .cat-list, .wp-sheet .tf-list, .wp-sheet .mg-inner { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
.tp-grid, .cat-list, .mg-inner, .wp-grab, .wp-grab::before { transition: none; }
.tps-clear { transition: none; }
}
/* （v3 修订）管理抽屉改全屏后不再泊藏下层：关闭直接下滑露出，零复播 */
/* 键盘升起：遮罩已缩到键盘上方，列表区同步收高保证标题/底栏都在框内 */
.mgr-sheet.is-kbd .mg-inner { max-height: 34vh; }
/* ============================================================
全屏管理抽屉（2026-09-17）：与全屏详情同一语言。
遮罩跟随可视视口 → 键盘升起时 flex 内容区自动压缩，
顶栏常驻、列表滚动，输入框天然露在键盘上方。
============================================================ */
.mgr-full {
height: 100%; border-radius: 0;
padding: calc(var(--sp-1) + var(--safe-top)) 0 calc(var(--sp-2) + var(--sab));
display: flex; flex-direction: column;
}
.mgr-full .wp-grab { margin: 0 0 2px; flex: none; }
.mgr-full .mf-head { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-1) var(--sp-2); flex: none; }
.mgr-full .wp-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-full .mf-back, .mgr-full .mf-done {
border: none; background: transparent; cursor: pointer; flex: none;
height: 40px; min-width: 44px; padding: 0 var(--sp-2);
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-3); -webkit-tap-highlight-color: transparent;
}
.mgr-full .mf-back { color: var(--text-1); }
.mgr-full .mf-back svg { width: 22px; height: 22px; }
.mgr-full .mf-back:active, .mgr-full .mf-done:active { background: var(--bg-hover); }
.mgr-full .mf-done { color: var(--primary); font-size: calc(15px * var(--fs-scale)); font-weight: var(--fw-medium); }
/* 一句话录入 · 按住说话（App 内才有，网页里整条不渲染）：
底部居中的圆钮——微信式按住落在拇指热区，底部锚定、键盘收起也不挪位；
放在「应用」胶囊轨道**上方**，胶囊原地进出、麦克风纹丝不动（不抢那颗已定稿的底部胶囊位）。
三态：静止＝描边软圆 / 按住＝填成黑胶囊并轻轻放大 / 上滑取消＝退回描边并压暗。
反馈克制：填色 + 提示行文字 + 最轻档震动，不加脉冲动画（站内按下即时态口径）。
touch-action:none 是按住不动的前提——否则手指上滑会变成滚动整页。 */
.nl-mic-bar { flex: none; display: flex; justify-content: center; align-items: center; padding: 2px var(--sp-4) 0; }
.nl-mic-btn {
width: 56px; height: 56px; border-radius: var(--r-circle);
border: 1px solid var(--border); background: var(--bg-card); color: var(--text-1);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-float); cursor: pointer; -webkit-tap-highlight-color: transparent;
touch-action: none; user-select: none; -webkit-user-select: none;
transition: transform var(--d-fast) var(--ease-float, ease), background var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.nl-mic-btn svg { width: 24px; height: 24px; }
.nl-mic-btn:active { transform: scale(.93); }
.nl-mic-btn.is-on { background: var(--primary); color: var(--on-primary); border-color: transparent; transform: scale(1.05); }
.nl-mic-btn.is-cancel { background: var(--bg-card); color: var(--text-3); border-color: var(--border); transform: scale(.93); }
.mgr-full .mg-inner { flex: 1; min-height: 0; max-height: none; margin: 0; }
.mgr-full.is-kbd .mg-inner { max-height: none; }
/* ============================================================
App 原生外壳（Capacitor）：状态栏避让收口 + 「提醒与手感」分区
------------------------------------------------------------
本块只服务 App：.nt-* 类仅由 assets/klog-native.js 产出，
[data-shell="app"] 由 index.php 头部探测脚本落到 上；
浏览器版两者都不存在，因此对网页版零影响。
放在文件末尾：确保同等特异性的 ≤768 基线不会把它压成死代码。
============================================================ */
/* ---- 1. App 内不该出现的入口：只剩网页表单登录遮罩 ----
登录账号 / 每日自动备份 / 账户安全 在 App 已改走令牌通道（见 App 登录 + API 接入），
与网站手机端「完全同页」，故不再对它们隐藏；.login-mask 是网页表单登录遮罩，
App 用 openCloudSettings 登录页，继续屏蔽。
「桌面提醒」不再在这里压 display：0923 起 app.js 的 dcManageBlocks 在 App 内直接不渲染
这一行（连同 #pf-remind-hint），一处决定、不留第二套开关。 */
[data-shell="app"] .login-mask { display: none !important; }
/* ---- 2. 行内时间：它是这一类的「值」，不是第二个按钮 ----
外观上就是右对齐的等宽数字，点一下开站内时/分滚轮（KlogTimeWheel，
与日期滚轮同壳）；不加边框不加底色，避免一行里出现两个看起来可点的控件。 */
.nt-time {
flex: none; -webkit-appearance: none; appearance: none;
border: 0; background: none; border-radius: var(--r-2);
color: var(--text-2); font: inherit; font-size: var(--fs-body);
font-variant-numeric: tabular-nums; letter-spacing: .02em;
text-align: right; cursor: pointer;
min-height: 44px; min-width: 64px; padding: 0 var(--sp-1); margin-right: var(--sp-1);
-webkit-tap-highlight-color: transparent;
transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}
.nt-time:active { background: var(--bg-hover); }
.nt-time:focus-visible { outline: 2px solid var(--border-strong); outline-offset: -2px; }
/* WebView 会在数字右侧再画一个小钟，与行尾开关挤成一列参差 —— 去掉，靠说明文案提示可点 */
.nt-time::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; appearance: none; }
/* 某一类关掉时：整行留在原位（还要靠它再打开），只把时间压暗禁点。
0929 起标题列可能是两行字（.pfg-t-2），说明行跟着一起沉，别只压标题 */
.nt-time:disabled { color: var(--text-4); opacity: .4; }
.pfg-ctl:has(.nt-time:disabled) > .pfg-t { color: var(--text-3); }
.pfg-ctl:has(.nt-time:disabled) > .pfg-t .pfg-t-sub { color: var(--text-disabled); }
/* ---- 3. 子行：缩进对齐到标题文字起点，不重复图标 ---- */
.nt-sub { padding-left: calc(var(--card-pad) + var(--sp-6) + var(--sp-3)); }
.nt-sub > .pfg-t { flex: 0 1 auto; font-size: var(--fs-label); color: var(--text-4); }
/* .pfg-row/.pfg-ctl 自带 display 会压掉 UA 的 [hidden]{display:none}，必须点名补回 */
.pfg-row[hidden], .nt-sub[hidden], .nt-type[hidden] { display: none !important; }
/* ---- 4. 分区里的分段控件：沿用同款胶囊外观；手机端高度走 .pf-seg 38px 触控地板，
桌面（基础档 28px 偏矮）单独抬到 34 ----
1011 撤掉这里的 `--pfg-row-gap: 8px` 覆写：那 4px 是给分段器多腾的位子，代价是
「操作强度 / 触感强度 / 自检 / 四类各试一条 / 逐条去开」这些行的标题比整页标题列
左凸 4px（390 实测 63 vs 67，站主画直尺截图点名）。整页一列靠全站 12px 那枚令牌，
通栏分段器的 margin-left 引的是同两枚令牌，跟着一起归线，不必另算 */
.nt-seg > .pfg-t { flex: 1 1 auto; }
.nt-seg .pf-seg { flex: 0 0 auto; }
/* 「自检」「触感强度」这类标签+一排按钮的行：按钮数一多就塞不进一行
（0927 真机：五枚试按钮撑破卡片、"重建排程"被切掉，标签还被挤成两字竖排）。
统一改成标签独占一行、分段器通栏均分——按钮宽度跟着屏宽走，不再靠缩内距硬塞。 */
/* 新增同类行必须带 .nt-wide——只按行名写死选择器会漏
（0927 第一版就漏了新加的「操作强度」行，标签被挤成两字竖排）。
row-gap 单钉 8px：折行后 gap 同时管列距与行距，列距跟全站 12px（标题才在同一列），
标签↔分段器那 8px 是这只组件自己的节奏，别被 12 顶成 20（1011 实测行高 96→100） */
.nt-wide { flex-wrap: wrap; row-gap: var(--sp-2); }
.nt-wide > .pfg-t { white-space: nowrap; }
/* 两行字标题进了 nt-wide：nowrap 只该管标题，小字说明必须能折行，
否则长句会把标题列撑破卡片（nowrap 是从 .pfg-t 继承下来的） */
.nt-wide > .pfg-t .pfg-t-sub { white-space: normal; }
/* 通栏分段器与标题行之间那口气：这是「标签一行 + 分段器一行」这只组件自己的几何，
不是「提醒与震动」这一页的偏好，所以不挂 .nt-page —— 抽屉里同款行（小记图片的原图上限）
不套页面外壳也该拿到同一个值。 */
.nt-wide .pf-seg-fill { margin-top: var(--sp-2); }
/* 通栏分段器：独占一行、按钮均分。左缘对齐「标题文字起线」（一枚图标列 + 一道行间距），
右缘仍到卡内衬为止。旧写法从卡片内距一路铺到右缘，比标题整整左凸一个图标列，
在一页全是「图标 + 标题」的节奏里读起来就是没对齐（1003 站主点名「有点长了」）。
basis 照旧 100%：加了这段左距后由 flex-shrink 自己收回来，右侧不用另算宽度。 */
.pf-seg.pf-seg-fill {
flex: 1 1 100%; order: 2; width: auto;
/* 真塞不下时（≤320 那档六颗一排）整段换行，而不是把字切掉 */
flex-wrap: wrap;
margin-left: calc(var(--pfg-ico-w, var(--sp-6)) + var(--pfg-row-gap, var(--sp-3)));
}
/* 按钮均分这件事，旧写法是 basis 0 + min-width 0：min-width:0 把「至少装得下自己的字」
这条地板也一起拆了，六颗一排时「重建排程」这类四字标签会被压到切字
（1003 左缘对齐标题之后，390 上就切了）。
正解是 basis 仍为 0（保证能均分）+ 地板换成 max-content：
装得下就四颗等宽，装不下的那一颗自己认领宽度——而不是靠切字维持「看起来等宽」。 */
.pf-seg.pf-seg-fill button { flex: 1 1 0; min-width: max-content; padding: 0 var(--sp-1); white-space: nowrap; }
@media (min-width: 769px) {
.nt-seg .pf-seg button { height: 34px; padding: 0 var(--sp-3); }
}
/* ---- 5. 超窄屏（≤380）：只收缩内距，间距与栅格不回退；高度与字号守住地板 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 5. 超窄屏（≤380）：只收缩内距，间距与栅格不回退；高度与字号守住地板 ----」 */
/* ---- 6. 页面级留白（0929 小米真机：整页「太挤」）----
两行字档把内容顶到 ~44px，可上下内距还是通用那套 0 —— 标题、说明、发丝线
三样贴成一团。这一组只改「提醒与震动」页（小部件页昨天真机已过，不去动它）：
行上下给 10px、标题与说明之间 3px、分组之间 30px。
（通栏分段器与标题之间那 8px 已上移进 .nt-wide 组件段——它是这只组件的几何，不是这页的偏好。） */
.nt-page .pfg { margin-top: 30px; }
/* 1011 并一条：折行的通栏分段器行（标签一行+分段器一行）同样上下 10px——
.pfg-row 竖向 padding 本来是 0、全靠 min-height 居中，单行没事，折行把内容顶满
就贴着发丝线/卡边了（站主点名「内边距没有了」）。选择器并进本条、不另开一条：
同体的第二条规则会被防膨胀闸当场红成一组新重复 */
.nt-page .pfg-row:has(.pfg-t-2), .nt-page .pfg-row.nt-wide:has(.pf-seg-fill) { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.nt-page .pfg-t-2 { gap: 3px; }
.nt-page .pfg-note { padding-top: var(--sp-2); padding-bottom: var(--sp-4); }
/* 「提前提醒」这类子行只有一行字，不给内距就会比上下两行字的行明显薄一层 */
.nt-page .nt-sub { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
/* 手机端筛选条撑满整行：「全部标签/分类/类型」入口钉右缘（桌面保持内容宽排布） */
/* ≤768 手机端样式 → 06-mobile.css「手机端筛选条撑满整行：「全部标签/分类/类型」入口钉右缘（桌面保持内容宽排布）」 */
/* 手机端待办分段器（待办/已完成/全部）：撑满一行、三段均分，与筛选条同宽。
1014 站主点名「分段器高度降低一点」：按钮从 --control-h(44) 收到 38（chip 同档，热区不缺），
整只 pill 由 52 降到 46。 */
/* ≤768 手机端样式 → 06-mobile.css */
/* ============================================================
统计（一期：产出量趋势 · 日 / 周 / 月 / 年）
刻意不另起视觉语言：卡片用现成 .panel、柱子用 .ov-bars、
色阶走 --primary + color-mix（--on-primary 在暗色主题自动翻墨色，
不需要第二套档位，也不必像习惯热力那样每次算 hmVars）。
============================================================ */
.st-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
flex-wrap: wrap; margin-bottom: var(--card-gap);
}
.st-nav { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; flex: 1; min-height: var(--control-h); }
/* 工具区只剩粒度分段器：正方形钮靠右，时间标签自己在中间那一段里居中 */
.st-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.st-navbtn {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-btn);
background: var(--bg-card); color: var(--text-2); cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.st-navbtn svg { width: 16px; height: 16px; }
@media (hover: hover) { .st-navbtn:hover { background: var(--bg-hover); color: var(--text-1); } }
.st-navbtn:active { transform: scale(.94); }
/* 未来不可见：已到本期时「下一期」直接锁死，不是点了没反应 */
.st-navbtn:disabled { color: var(--text-disabled); background: transparent; cursor: default; border-color: var(--border-dashed, var(--border)); }
.st-navbtn:disabled:active { transform: none; }
/* 时间标签 + 尾巴上那枚「本期 / 回到本期」当成一组居中（照搬 .hm-range 的排法）：
两态都住在 #stRangeTag 这一个槽里，所以「回本期」出现/消失不再需要影子位。
1004 与心情/习惯热力同步：时间文本包进白卡，圆角对齐两侧方形翻页钮（--radius-btn） */
.st-range {
flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
/* 与 .hm-range 同步（1004）：允许尾巴那枚退到第二行，白卡用 min-height 自己长开 */
flex-wrap: wrap; row-gap: 2px;
font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1);
font-variant-numeric: tabular-nums;
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-btn);
box-shadow: var(--shadow-sm); min-height: 38px; padding: 0 var(--sp-3);
}
.st-range-t { white-space: nowrap; }
.st-range-tag { flex: none; display: inline-flex; align-items: center; }
/* 本期徽章与「回到本期」钮：1004 起直接继承全站统一的黑底当期胶囊 / 灰底返回胶囊，
不再做统计页特例（旧「灰底本期 + 放大返回钮」已并入基础 .hm-cur / .hm-back） */
/* 粒度钮做成正方形：宽度直接取控件高度令牌，改 --control-h 也不会变形 */
/* 1014 站主点名「日周月年这张卡圆角要圆润一些」：容器从 .seg 的 4px 抬到 r-3(12)，
与待办分段器、内容卡同档；.seg 自带 overflow:hidden，方钮首尾随容器裁成圆角。 */
.st-seg { border-radius: var(--r-3); }
.st-seg button {
flex: none; width: var(--control-h); padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
/* 「回本期」独立钮已于 1003 退役：复位入口搬到时间标签后面那枚 .hm-back（见上） */
.st-seg button { padding: 0 var(--sp-3); }
.st-body { display: flex; flex-direction: column; gap: var(--card-gap); }
/* hero：白卡 + 一个大数字，层级靠字号而不是加色块 */
.st-hero { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.st-hero-n { display: flex; align-items: baseline; gap: var(--sp-3); }
.st-hero-n b {
font-size: var(--fs-num-lg); line-height: 1.05; font-weight: var(--fw-semibold); color: var(--text-1);
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.st-hero-n span { font-size: var(--fs-caption); color: var(--text-3); }
.st-hero.is-quiet .st-hero-n b { color: var(--text-disabled); }
.st-hero-parts {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-3);
font-size: var(--fs-body); color: var(--text-2);
}
.st-hero-parts b { font-weight: var(--fw-semibold); color: var(--text-1); font-variant-numeric: tabular-nums; }
.st-hero-foot {
margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border);
font-size: var(--fs-caption); color: var(--text-3);
}
.st-hero-foot b { font-weight: var(--fw-medium); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* 热力网格：格子 = 日号 + 当日产出数（未来日留空数字、只保留轮廓） */
.st-heat { padding-bottom: var(--sp-3); }
.st-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) 0; }
/* 星期标头与 .st-grid 同列宽同间距（.hm-wkrow 有 336px 居中约束，这里借会错一格） */
.st-wkrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) 0; }
.st-wkrow span { text-align: center; font-size: var(--fs-micro); line-height: 1; color: var(--text-4); }
.st-g-year { grid-template-columns: repeat(6, 1fr); }
.st-g-week { grid-template-columns: repeat(7, 1fr); }
.st-cell {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
min-height: 42px; padding: var(--sp-1) 2px; border: none; border-radius: var(--r-1);
background: var(--bg-soft); color: var(--text-2); font: inherit; cursor: pointer;
transition: transform var(--d-micro) var(--ease-float), filter var(--transition-fast);
}
.st-cell.is-pad { background: transparent; cursor: default; }
.st-c-l { font-size: var(--fs-micro); line-height: 1.2; color: inherit; font-variant-numeric: tabular-nums; }
.st-c-n { font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1.2; color: inherit; font-variant-numeric: tabular-nums; }
.st-cell.is-future .st-c-n:empty + .st-c-l, .st-cell.is-future { opacity: .55; }
@media (hover: hover) { .st-cell:hover { filter: brightness(.97); } }
.st-cell:active { transform: scale(.94); }
.st-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); }
/* 四档：1014 起与账本支出日历共用同一族 --lgd-* 墨档（透明度过台面，暗色自动翻亮）——
站主点名「两页最深档一个太浅一个太深，浅一些后统一」。顶格从原 --primary 铺满（100%）
收到 --lgd-3（78%），两页最深档同深浅，「最猛的那几天」仍一眼可辨。
选择器并成一条（.st-l* 与 .lg-day/.lg-mo 的 l* 同深浅同声明，不抄两遍）。 */
.st-l0 { background: var(--bg-soft); color: var(--text-disabled); }
.st-l1, .lg-day.l1, .lg-mo.l1 { background: var(--lgd-1); color: var(--lgd-ink-1); }
.st-l2, .lg-day.l2, .lg-mo.l2 { background: var(--lgd-2); color: var(--lgd-ink-2); }
.st-l3, .lg-day.l3, .lg-mo.l3 { background: var(--lgd-3); color: var(--lgd-ink-3); }
.st-legend {
display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1);
padding: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-micro); color: var(--text-4);
}
.st-legend .st-cell { min-height: 0; width: 14px; height: 14px; border-radius: var(--r-1); cursor: default; }
.st-legend .st-cell:active { transform: none; }
/* 趋势柱：.ov-bars 只负责排布，这里补高度与「按钮化」重置 */
.st-trend { padding-bottom: var(--sp-3); }
.st-bars { min-height: 118px; padding: var(--sp-3) var(--sp-4) 0; }
.st-bar-col { border: none; background: transparent; cursor: pointer; font: inherit; }
.st-bar-col .ov-bar-l { font-variant-numeric: tabular-nums; }
.st-bar-col:active .ov-bar { filter: brightness(.9); }
/* ---- 分项情况（原名「各科目 · 本期 + 家底」）：原「全部数据」四枚死数字的下一形态（1011）----
每科一行头（图标 + 名 + 较上期）+ 本期内容；待办给在库结构条、
打卡列习惯行（连续天数来自现成算法）、账本金额走 .num 等宽。
快照类（在库/逾期/共 N）不随本期变，文案里标的都是「当前」语境。 */
.st-ms { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.st-ms + .st-ms { border-top: 1px solid var(--border); }
.st-ms-h {
display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2);
font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-1);
}
.st-ms-h svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.st-ms-dl {
margin-left: auto; font-size: var(--fs-micro); font-weight: var(--fw-regular);
color: var(--text-4); font-variant-numeric: tabular-nums;
}
.st-ms-l1 { font-size: var(--fs-body); color: var(--text-2); }
.st-ms-l1 b, .st-ms-slim b { font-weight: var(--fw-semibold); color: var(--text-1); font-variant-numeric: tabular-nums; }
.st-ms-slim {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
font-size: var(--fs-body); color: var(--text-2);
}
.st-ms-x { margin-left: auto; font-size: var(--fs-micro); color: var(--text-4); font-variant-numeric: tabular-nums; }
.st-ms-now { white-space: nowrap; }
/* 待办结构条：完成占比铺墨，右侧给在库/未完成/逾期 */
.st-ms-bar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.st-ms-track { flex: none; width: 84px; height: 6px; border-radius: var(--r-pill); background: var(--bg-muted); overflow: hidden; }
.st-ms-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--text-1); }
.st-ms-cap { font-size: var(--fs-micro); color: var(--text-4); font-variant-numeric: tabular-nums; }
.st-ms-cap b { font-weight: var(--fw-medium); color: var(--text-2); }
/* 习惯行：色点 + 名 + 次数/连续 */
.st-ms-rows { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.st-ms-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-2); }
.st-ms-dot { width: 8px; height: 8px; border-radius: var(--r-circle); flex: none; }
.st-ms-name { min-width: 52px; }
.st-ms-val { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.st-ms-val b { color: var(--text-1); font-weight: var(--fw-semibold); }
.st-ms-row.is-off { opacity: .62; }
/* 环比小胶囊：中性灰语言，不引红绿（涨跌都是同一枚）。
1014：撤掉旧的 translateY(-3px) 手调偏移——徽章与「本月完成」改由 .st-hero-side
这只 inline-flex 容器 align-items:center 真正上下居中，不再靠像素硬顶。 */
.st-chg {
font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2);
border-radius: var(--r-pill); background: var(--bg-muted); color: var(--text-3);
font-size: var(--fs-micro); font-weight: var(--fw-medium);
font-variant-numeric: tabular-nums;
}
/* 「本月完成 + 环比胶囊」这一组自成一条居中线，与大数字仍走 .st-hero-n 的 baseline */
.st-hero-side { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* 趋势图例即筛选：点一科只看一科（热力跟着联动），再点同一科 /「显示全部」复位 */
.st-flt {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) var(--sp-4) 0;
font-size: var(--fs-micro); color: var(--text-3);
}
.st-flt button {
display: inline-flex; align-items: center; gap: var(--sp-1); border: none; background: none;
padding: 2px 0; font: inherit; font-size: var(--fs-micro); color: var(--text-3); cursor: pointer;
}
.st-flt button i { width: 9px; height: 9px; border-radius: var(--r-circle); flex: none; }
.st-flt button.on { color: var(--text-1); font-weight: var(--fw-semibold); }
.st-flt button.on i { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--text-1); }
.st-flt-reset {
margin-left: auto; border: none; background: none; padding: 2px 0; font: inherit;
font-size: var(--fs-micro); color: var(--text-3); text-decoration: underline; cursor: pointer;
}
/* 堆叠柱：柱身仍用 .ov-bar 外壳（整列热区 / 按压 / 禁用规则原样生效），
st-stk 只把「单色底」换成「五段墨阶」——段与段留 2px 缝 */
.st-bars .ov-bar.st-stk {
background: transparent; min-height: 0; border-radius: 0;
display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.st-stk i { display: block; width: 100%; border-radius: var(--r-1); font-style: normal; }
/* 统计页脚注：口径写死在页面上，避免「这数字怎么算的」反复问 */
.st-note {
margin-top: var(--card-gap); padding: 0 2px;
font-size: var(--fs-micro); line-height: 1.6; color: var(--text-4);
}
.st-note b { font-weight: var(--fw-medium); color: var(--text-3); }
/* ---- 手机端（真机生效的那份）：导航行在上、粒度分段器撑满一行 ---- */
/* ≤768 手机端样式 → 06-mobile.css「---- 手机端（真机生效的那份）：导航行在上、粒度分段器撑满一行 ----」 */
/* ============================================================
表单出错态（0924 定稿）：只点亮 label，不给输入框描红框
------------------------------------------------------------
试过「控件描红 + 外圈柔红环 + 井底染红」，在浅底表单上太扎眼，用户否掉。
定位靠这三样就够：label 变红（含必填星号）、滚动到位并聚焦、整卡抖一下；
文案交给站内 toast 胶囊。
.is-invalid 由 showFormError 挂在「看得见的那件控件」上（select / date 被
enhance 成 .sel-btn / .dp-display，原生件 display:none），这里只当钩子用，
不产生任何描边或底色。
============================================================ */
.field:has(.is-invalid) > label,
.field-row > div:has(.is-invalid) > label { color: var(--status-bad); }
/* 动效 S6 · label 校验红软切（2026-10-20）：#formError 已从各表单退役（app.js:3368 明写：
长表单里红字常落在折叠线以下，点了保存像「没反应」；改为「label 变红 + 抖动 + toast」三件套）。
红/黑切换此前是**色彩硬切**——与卡片抖一下不同拍、读起来「啪」跳色。补一条 transition:color 150ms
--ease-float 让 label 软切色、与抖动同步；覆盖 is-invalid 变红与摘掉回墨两个方向。
作用域限表单里